TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-25 09:03:12 +03:00
Code Issues Projects Releases Wiki Activity

🐛 Fixed darkmode color regressions

Browse Source 
refs. https://github.com/TryGhost/Ghost/issues/11445

- fixed input field background colors in Post Settings menu in darkmode
- applied color variables to day picker calendar component
- fixed colors of day picker calendar in darkmode
This commit is contained in:
Peter Zimon 2019-12-16 15:04:32 +01:00
parent 1063698861
commit 735f6eb66f
2 changed files with 29 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
ghost/admin/app/styles/app-dark.css
View File

@ -88,8 +88,8 @@ input,
.gh-select,
.for-switch .input-toggle-component,
.gh-select select,
.settings-menu-container:not(.ember-power-select-multiple-trigger):not(.tag-settings) input,
.settings-menu-container:not(.tag-settings) .gh-input,
.settings-menu-container:not(.ember-power-select-multiple-trigger):not(.tag-settings) input:not([disabled]),
.settings-menu-container:not(.tag-settings) .gh-input:not([disabled]),
.settings-menu-pane .gh-date-time-picker-date,
.settings-menu-pane .gh-date-time-picker-time {
color: var(--darkgrey);
@ -167,6 +167,20 @@ input:focus,
color: var(--darkgrey);
}
.ember-power-calendar-day--today,
.ember-power-calendar-day:not([disabled]):hover {
background-color: color-mod(var(--lightgrey) l(-5%));
}
.ember-power-calendar-day--selected,
.ember-power-calendar-day--selected:not([disabled]):hover {
background: color-mod(var(--blue) l(-10%));
}
.ember-power-calendar-day--interactive[disabled] {
opacity: 0.2;
}
.gh-main,
.gh-nav,
.gh-unsplash-window {

26
ghost/admin/app/styles/components/power-calendar.css
View File

@ -76,11 +76,11 @@
}
.ember-power-calendar-weekdays {
color: #333333;
color: var(--darkgrey);
}
.ember-power-calendar-day {
color: #bbb;
color: var(--midgrey);
}
.ember-power-calendar-nav {
@ -90,47 +90,47 @@
.ember-power-calendar-nav-control {
line-height: 1;
font-size: 150%;
color: #0078c9;
color: var(--blue);
}
.ember-power-calendar-nav-control:focus {
transform: scale(1.2);
color: color-mod(#0078c9 l(+10%));
color: color-mod(var(--blue) l(+10%));
}
.ember-power-calendar-day--current-month {
color: #656d78;
background-color: #f5f7fa;
color: var(--middarkgrey);
background-color: color-mod(var(--lightgrey) l(+4%));
}
.ember-power-calendar-day--today,
.ember-power-calendar-day:not([disabled]):hover {
background-color: #eee;
background-color: var(--lightgrey);
}
.ember-power-calendar-day--other-month:not([disabled]):hover {
color: #aaa;
color: var(--midgrey);
}
.ember-power-calendar-day--selected,
.ember-power-calendar-day--selected:not([disabled]):hover {
font-weight: bold;
background-color: color-mod(#0078c9 l(+50%));
color: #656D78;
background-color: color-mod(var(--blue) l(+30%));
color: var(--middarkgrey);
}
.ember-power-calendar-day--selected.ember-power-calendar-day--range-start,
.ember-power-calendar-day--selected.ember-power-calendar-day--range-end {
background-color: color-mod(#0078c9 l(+40%));
background-color: color-mod(var(--blue) l(+40%));
}
.ember-power-calendar-day--selected.ember-power-calendar-day--range-start:hover,
.ember-power-calendar-day--selected.ember-power-calendar-day--range-end:hover {
background-color: color-mod(#0078c9 l(+40%));
background-color: color-mod(var(--blue) l(+40%));
}
.ember-power-calendar-day--focused {
box-shadow: inset 0px -2px 0px 0px #0078c9;
box-shadow: inset 0px -2px 0px 0px var(--blue);
}
.ember-power-calendar-day--interactive[disabled] {