Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Dark mode UI fixes

Browse source
This commit is contained in:
Peter Zimon 2021-02-10 16:36:08 +01:00
parent 9093b32529
commit 1ebff66109
4 changed files with 41 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
ghost/admin/app/styles/app-dark.css
View file

@ -70,11 +70,25 @@
:root { :root {
/* Primary colours */
--black: #fafafb;
--white: #15171A;
--lime: #B5FF18;
--darkgrey: #e5eff5; --darkgrey: #e5eff5;
--middarkgrey: #ABB4BE;
--midgrey: #738296; --midgrey: #738296;
--midlightgrey:#626D79;
--lightgrey: #292f38; --lightgrey: #292f38;
--dark-main-bg-color: #1f2328; --whitegrey: #222730;
--blue: color-mod(#3eb0ef l(+5%) s(+5%)); --blue: color-mod(#3eb0ef l(+5%) s(+5%));
--dark-main-bg-color: #15171A;
--hairline-color-1: #292f38;
--hairline-color-2: #626D79;
--main-color-content-greybg: color-mod(var(--whitegrey-d1) l(+0%) s(+5%));
--list-color-divider: var(--whitegrey-l1);
} }
body { body {
@ -485,7 +499,7 @@ input:focus,
} }
.gh-nav { .gh-nav {
border-right: none; border-color: var(--hairline-color-1);
} }
.gh-nav-list a { .gh-nav-list a {
@ -495,14 +509,17 @@ input:focus,
.gh-nav-list a:not(.active):not(.gh-secondary-action):hover, .gh-nav-list a:not(.active):not(.gh-secondary-action):hover,
.gh-nav-list .gh-secondary-action:hover span, .gh-nav-list .gh-secondary-action:hover span,
.gh-nav-bottom .ember-basic-dropdown-trigger:hover, .gh-nav-bottom .ember-basic-dropdown-trigger:hover,
.gh-nav-list .active,
.gh-nav-btn-search:hover, .gh-nav-btn-search:hover,
.gh-nav-list button.main-menu-item:hover, .gh-nav-list button.main-menu-item:hover,
.gh-nav-bottom .ember-basic-dropdown-trigger:hover, .gh-nav-bottom .ember-basic-dropdown-trigger:hover,
.gh-nav-bottom-tabicon:hover, .gh-nav-bottom-tabicon:hover,
.gh-nav-bottom-tabicon.active, .gh-nav-bottom-tabicon.active,
.gh-nav-list .gh-secondary-action:not(.icon-only):hover span { .gh-nav-list .gh-secondary-action:not(.icon-only):hover span {
background: color-mod(var(--dark-main-bg-color) l(+5%) s(-5%)); background: var(--white);
}
.gh-nav-list a:not(.active):not(.gh-secondary-action):hover {
background: #171b1f;
} }
.gh-nav-btn-search:hover { .gh-nav-btn-search:hover {
@ -524,7 +541,7 @@ input:focus,
.tags-container, .tags-container,
.content-list ol, .content-list ol,
.gh-settings-main-grid { .gh-settings-main-grid {
background: #191b1f; background: var(--dark-main-bg-color);
} }
.gh-posts-list-item:hover, .gh-posts-list-item:hover,
@ -554,15 +571,15 @@ input:focus,
} }
.nightshift-toggle { .nightshift-toggle {
background: #2d3d42; background: var(--black);
} }
.nightshift-toggle .thumb { .nightshift-toggle .thumb {
background: var(--midlightgrey-d2); background: var(--dark-main-bg-color);
} }
.nightshift-toggle .moon svg { .nightshift-toggle .moon svg {
color: var(--midlightgrey-d2); color: var(--dark-main-bg-color);
} }
.gh-tag-setting-codeinjection .CodeMirror-gutters { .gh-tag-setting-codeinjection .CodeMirror-gutters {
@ -578,16 +595,23 @@ input:focus,
/* Dark style Lists */ /* Dark style Lists */
.gh-list { .gh-list {
background: #191b1f; background: var(--dark-main-bg-color) !important;
} }
.gh-list-header, .gh-list-header,
.gh-list-row:not(.header):hover .gh-list-cell, .gh-list-row:not(.header):hover .gh-list-cell,
.gh-list-row:not(.header):hover .gh-list-data, .gh-list-row:not(.header):hover .gh-list-data,
.apps-grid-cell:hover { .apps-grid-cell:hover {
background: var(--white); background: var(--dark-main-bg-color);
} }
.gh-list-header {
border-bottom: 1px solid var(--hairline-color-1);
}
.gh-list-data {
border-top: 1px solid var(--hairline-color-1);
}
/* Members */ /* Members */
.gh-members-chart-header { .gh-members-chart-header {

5
ghost/admin/app/styles/layouts/main.css
View file

@ -683,7 +683,10 @@
.nightshift-toggle.on .thumb { .nightshift-toggle.on .thumb {
position: absolute; position: absolute;
left: 20px; left: 21px;
width: 20px;
height: 20px;
top: 1px;
} }
.nightshift-toggle .sun { .nightshift-toggle .sun {

4
ghost/admin/app/styles/layouts/settings.css
View file

@ -102,12 +102,12 @@
.gh-settings-main-grid .gh-setting-group svg path, .gh-settings-main-grid .gh-setting-group svg path,
.gh-settings-main-grid .gh-setting-group svg circle { .gh-settings-main-grid .gh-setting-group svg circle {
fill: var(--white); fill: #fff;
} }
.gh-settings-main-grid .gh-setting-group:hover svg path, .gh-settings-main-grid .gh-setting-group:hover svg path,
.gh-settings-main-grid .gh-setting-group:hover svg circle { .gh-settings-main-grid .gh-setting-group:hover svg circle {
fill: var(--white); fill: #fff;
} }
.gh-settings-main-grid .gh-setting-group div { .gh-settings-main-grid .gh-setting-group div {

1
ghost/admin/app/styles/patterns/global.css
View file

@ -27,7 +27,6 @@
--midlightgrey: #ABB4BE; --midlightgrey: #ABB4BE;
--lightgrey: #CED4D9; --lightgrey: #CED4D9;
--whitegrey: #EBEEF0; --whitegrey: #EBEEF0;
--white: #ffffff;
/* Tones */ /* Tones */
--white-10: rgba(255, 255, 255, 0.1); --white-10: rgba(255, 255, 255, 0.1);