From cbd18c62531d623743ab0b6050a347340be32db1 Mon Sep 17 00:00:00 2001 From: John O'Nolan Date: Mon, 12 Jun 2017 16:13:10 +0100 Subject: [PATCH] Update dark mode Fixes https://github.com/TryGhost/Ghost/issues/8560 Depends on https://github.com/TryGhost/Ghost-Admin/pull/733 --- ghost/admin/app/styles/app-dark.css | 118 ++++++++++++++++++ .../app/styles/components/power-select.css | 5 + ghost/admin/app/styles/layouts/editor.css | 11 +- ghost/admin/app/styles/layouts/main.css | 5 +- ghost/admin/app/styles/patterns/buttons.css | 2 +- ghost/admin/app/styles/patterns/forms.css | 2 +- ghost/admin/app/styles/patterns/throbber.css | 3 +- .../components/gh-post-settings-menu.hbs | 2 +- 8 files changed, 138 insertions(+), 10 deletions(-) diff --git a/ghost/admin/app/styles/app-dark.css b/ghost/admin/app/styles/app-dark.css index 9781df7af1..597e50fa06 100644 --- a/ghost/admin/app/styles/app-dark.css +++ b/ghost/admin/app/styles/app-dark.css @@ -69,6 +69,11 @@ body { color: #e5eff5; } +pre { + border: color(var(--lightgrey) l(+5%)); + background: var(--lightgrey); +} + input, .gh-input, .gh-select { @@ -89,6 +94,12 @@ input, border-color: color(var(--lightgrey)); background: color(var(--lightgrey)); } + +.ember-power-select-dropdown { + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); +} + +.ember-power-select-dropdown, .ember-power-select-options:not([role="group"]), .ember-power-select-dropdown.ember-basic-dropdown-content--in-place { border-color: color(var(--lightgrey)); @@ -119,6 +130,23 @@ input, border: 0; } +.gh-btn-link { + border: none; +} + +.settings-menu-delete-button { + color: var(--red); +} + +.gh-publishmenu-trigger { + color: var(--blue); + border: none; +} + +.gh-publishmenu-trigger svg path { + stroke-width: 2px; +} + .dropdown-menu > li > a, .dropdown-menu > li > button { color: color(var(--lightgrey) lightness(+20%)); @@ -131,3 +159,93 @@ input, .gh-cardmenu { background: var(--lightgrey); } + +.editor-toolbar a.active, .editor-toolbar a:hover { + background-color: rgba(0,0,0,0.3); +} + +.gh-badge-black, +.gh-badge.owner { + color: var(--lightgrey); +} + +.nav-list { + border-color: var(--lightgrey); + background: var(--lightgrey); +} + +.selectize-input, +.selectize-control.single .selectize-input.input-active { + background: var(--lightgrey); +} + +.gh-select select { + color: var(--darkgrey); + background: var(--lightgrey); +} + +.gh-date-time-picker-date, +.gh-date-time-picker-time { + background: var(--lightgrey); +} + +.gh-date-time-picker input { + color: var(--darkgrey); +} + +.gh-publishmenu-dropdown { + background: #212A2E; +} + +.gh-image-uploader { + background: var(--lightgrey); +} + +.gh-main > section.gh-editor-fullscreen { + background: color(#212A2E l(+2%)); +} + +.dropdown-menu { + background: var(--lightgrey); +} + +.dropdown-menu > li > a, .dropdown-menu > li > button { + color: var(--darkgrey); +} + +.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-menu > li > button:hover, .dropdown-menu > li > button:focus { + color: #fff; +} + +.dropdown-menu .divider { + opacity: 0.1; +} + +.ember-power-select-group .ember-power-select-option .highlight { + background: rgba(0,0,0,0.5); +} + +.modal-content { + background: #212A2E; +} + +.seo-preview-title { + color: color(#1e0fbe l(+25%)); +} + +.seo-preview-description { + color: var(--midgrey); +} + +.tour-dismiss { + border: none; + background: linear-gradient( rgb(50, 50, 50), rgb(23, 23, 23) ); +} + +.tour-dismiss span { + background: linear-gradient( rgb(69, 69, 69), rgb(42, 44, 45) 60%, rgb(42, 44, 45) 90%, rgb(49, 52, 53) ); +} + +.throbber:before { + background: rgba(0,0,0,0.2); +} diff --git a/ghost/admin/app/styles/components/power-select.css b/ghost/admin/app/styles/components/power-select.css index 047963f384..4722acc54c 100644 --- a/ghost/admin/app/styles/components/power-select.css +++ b/ghost/admin/app/styles/components/power-select.css @@ -2,6 +2,7 @@ padding: 0 16px 0 8px; border: 1px solid #dfe1e3; border-radius: var(--border-radius); + background: transparent; } .ember-power-select-trigger svg { @@ -11,6 +12,10 @@ vertical-align: middle; } +.ember-power-select-trigger svg path { + stroke: var(--darkgrey); +} + .ember-power-select-search { padding: 2px 0 3px 0 !important; } diff --git a/ghost/admin/app/styles/layouts/editor.css b/ghost/admin/app/styles/layouts/editor.css index 806bd6dcff..ab7f1a4a94 100644 --- a/ghost/admin/app/styles/layouts/editor.css +++ b/ghost/admin/app/styles/layouts/editor.css @@ -170,7 +170,6 @@ height: 43px; padding: 0; padding-left: 15px; - background: #fff; border-bottom: var(--lightgrey) 1px solid; z-index: 100; } @@ -298,7 +297,7 @@ .gh-editor-footer .editor-toolbar { border: none; border-radius: 0; - background-color: #fff; + background: transparent; opacity: 1; } @@ -314,6 +313,7 @@ .gh-editor .CodeMirror { padding: 0; overflow: visible; + background: transparent; } /* fix visible scrollbars when OSX is set to show them */ @@ -336,6 +336,7 @@ margin-left: auto; margin-right: auto; border: none; + background: transparent; } .gh-editor .CodeMirror pre { @@ -423,10 +424,14 @@ stroke: color(var(--darkgrey) l(+15%)); } +.editor-toolbar a { + color: var(--darkgrey) !important; +} + .editor-toolbar a.disabled, .gh-editor-preview .editor-toolbar a:not(.no-disable) { pointer-events: none; - color: lightgray !important; + color: var(--lightgrey) !important; } .editor-toolbar a.disabled:hover { diff --git a/ghost/admin/app/styles/layouts/main.css b/ghost/admin/app/styles/layouts/main.css index d8b9ccdeee..3adc168786 100644 --- a/ghost/admin/app/styles/layouts/main.css +++ b/ghost/admin/app/styles/layouts/main.css @@ -85,11 +85,11 @@ body > .ember-view:not(.default-liquid-destination) { width: 12px; height: 12px; transition: margin-top 0.2s ease; - fill: color(var(--darkgrey)); } .gh-nav-menu svg path { stroke-width: 1px; + stroke: color(var(--darkgrey)); } .gh-nav-menu-icon { @@ -138,6 +138,7 @@ body > .ember-view:not(.default-liquid-destination) { .gh-nav-search .ember-power-select-trigger { outline: 0; + background: #fff; } .gh-nav-search-button { @@ -554,7 +555,7 @@ body > .ember-view:not(.default-liquid-destination) { align-items: center; padding: 0 20px; height: 65px; - border-bottom: #dfe1e3 1px solid; + border-bottom: var(--lightgrey) 1px solid; } .view-title { diff --git a/ghost/admin/app/styles/patterns/buttons.css b/ghost/admin/app/styles/patterns/buttons.css index 0a37d848ee..82de69214c 100644 --- a/ghost/admin/app/styles/patterns/buttons.css +++ b/ghost/admin/app/styles/patterns/buttons.css @@ -367,7 +367,7 @@ Usage: CTA buttons grouped together horizontally. } .gh-btn-link { - border: 0; + border: none; } diff --git a/ghost/admin/app/styles/patterns/forms.css b/ghost/admin/app/styles/patterns/forms.css index 16012620b5..54103c42d5 100644 --- a/ghost/admin/app/styles/patterns/forms.css +++ b/ghost/admin/app/styles/patterns/forms.css @@ -182,7 +182,7 @@ textarea { .for-radio label p, .for-checkbox label p { overflow: auto; - color: #000; + color: var(--darkgrey); font-weight: normal; } diff --git a/ghost/admin/app/styles/patterns/throbber.css b/ghost/admin/app/styles/patterns/throbber.css index 3c5b1ed80c..67f05af453 100644 --- a/ghost/admin/app/styles/patterns/throbber.css +++ b/ghost/admin/app/styles/patterns/throbber.css @@ -19,8 +19,7 @@ display: block; width: 14px; height: 14px; - border: rgba(255,255,255,0.1) 2px solid; - background: rgba(255,255,255,0.6); + background: color(var(--blue) alpha(0.9)); border-radius: 100%; box-shadow: color(var(--blue) alpha(0.9)) 0 0 0 2px; } diff --git a/ghost/admin/app/templates/components/gh-post-settings-menu.hbs b/ghost/admin/app/templates/components/gh-post-settings-menu.hbs index fd14d04e31..c32d621782 100644 --- a/ghost/admin/app/templates/components/gh-post-settings-menu.hbs +++ b/ghost/admin/app/templates/components/gh-post-settings-menu.hbs @@ -116,7 +116,7 @@ {{#unless model.isNew}} - + {{/unless}}