From f8c6b9438a4ebafcafd87f86b16dd558ae9dd78c Mon Sep 17 00:00:00 2001 From: John O'Nolan Date: Fri, 17 Feb 2017 22:58:08 +0700 Subject: [PATCH] =?UTF-8?q?Prototype=20nightshift=20=F0=9F=8C=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/styles/app-dark.css | 116 +++++++++++++++++++++++++ app/styles/components/power-select.css | 4 +- app/styles/layouts/apps.css | 12 +-- app/styles/layouts/main.css | 2 +- app/styles/layouts/tags.css | 10 +-- app/templates/settings/labs.hbs | 9 ++ 6 files changed, 137 insertions(+), 16 deletions(-) create mode 100644 app/styles/app-dark.css diff --git a/app/styles/app-dark.css b/app/styles/app-dark.css new file mode 100644 index 000000000..5dca73a85 --- /dev/null +++ b/app/styles/app-dark.css @@ -0,0 +1,116 @@ +/* Stop: Normalize. +/* ---------------------------------------------------------- */ +@import "../../bower_components/normalize.css/normalize.css"; + + +/* Patterns: Groups of Styles +/* ---------------------------------------------------------- */ +@import "patterns/global.css"; +@import "patterns/_shame.css"; +@import "patterns/icons.css"; +@import "patterns/forms.css"; +@import "patterns/buttons.css"; +@import "patterns/labels.css"; +@import "patterns/tables.css"; +@import "patterns/navlist.css"; +@import "patterns/boxes.css"; + + +/* Components: Groups of Patterns +/* ---------------------------------------------------------- */ +@import "components/loading-indicator.css"; +@import "components/modals.css"; +@import "components/notifications.css"; +@import "components/uploader.css"; +@import "components/splitbuttons.css"; +@import "components/dropdowns.css"; +@import "components/pagination.css"; +@import "components/badges.css"; +@import "components/popovers.css"; +@import "components/settings-menu.css"; +@import "components/selectize.css"; +@import "components/power-select.css"; + + +/* Layouts: Groups of Components +/* ---------------------------------------------------------- */ +@import "layouts/main.css"; +@import "layouts/flow.css"; +@import "layouts/auth.css"; +@import "layouts/content.css"; +@import "layouts/editor.css"; +@import "layouts/settings.css"; +@import "layouts/users.css"; +@import "layouts/user.css"; +@import "layouts/about.css"; +@import "layouts/tags.css"; +@import "layouts/error.css"; +@import "layouts/apps.css"; +@import "layouts/packages.css"; +@import "layouts/subscribers.css"; + + +:root { + --darkgrey: #e5eff5; + --midgrey: #738a94; + --lightgrey: #333F44; +} + +body { + color: #e5eff5; +} + +input, +.gh-input, +.gh-select { + color: var(--darkgrey); + border-color: color(var(--lightgrey)); + background: color(var(--lightgrey)); +} + +.gh-nav, +.settings-menu-container { + background: #212A2E; +} +.gh-menu-toggle { + border-color: #212A2E; +} + +.gh-nav-search .ember-power-select-trigger { + border-color: color(var(--lightgrey)); + background: color(var(--lightgrey)); +} +.ember-power-select-options:not([role="group"]), +.ember-power-select-dropdown.ember-basic-dropdown-content--in-place { + border-color: color(var(--lightgrey)); + background: color(var(--lightgrey)); +} + +.gh-nav-list i { + color: var(--darkgrey); +} + +.gh-main { + background: #263238; +} + +.gh-btn { + border: color(var(--darkgrey) l(-27%) blackness(+15%)) 1px solid ; + color: color(var(--darkgrey) l(-27%) blackness(+15%)); + text-shadow: none; +} +.gh-btn-blue, +.gh-btn-green, +.gh-btn-red { + color: #fff; + border: 0; +} + +.dropdown-menu > li > a, +.dropdown-menu > li > button { + color: color(var(--lightgrey) lightness(+20%)); +} + +.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-menu > li > button:hover, .dropdown-menu > li > button:focus { + color: var(--lightgrey); +} diff --git a/app/styles/components/power-select.css b/app/styles/components/power-select.css index 527fc57ff..d23435e74 100644 --- a/app/styles/components/power-select.css +++ b/app/styles/components/power-select.css @@ -52,14 +52,12 @@ box-sizing: border-box; width: 100%; border-top: 0 none; - border-right: 1px solid #f2f2f2; } .ember-power-select-group .ember-power-select-group-name { position: relative; display: inline-block; padding: 7px 8px; - background: #fff; color: var(--midgrey); font-size: 0.85em; font-weight: normal; @@ -74,7 +72,7 @@ display: block; width: calc(189px - 100%); height: 1px; - border-bottom: #dfe1e3 1px solid; + border-bottom: var(--midgrey) 1px solid; } @media (max-width: 800px) { diff --git a/app/styles/layouts/apps.css b/app/styles/layouts/apps.css index 8d838dec1..fb461e685 100644 --- a/app/styles/layouts/apps.css +++ b/app/styles/layouts/apps.css @@ -28,7 +28,7 @@ flex-flow: row wrap; align-items: flex-start; max-width: 1200px; - border: rgba(0,0,0,0.1) 1px solid; + border: var(--lightgrey) 1px solid; border-radius: 5px; } @@ -47,7 +47,7 @@ flex: 1 1 100%; } .apps-grid-cell:hover { - background: #f5f7f8; + background: color(var(--lightgrey) l(+5%)); } .apps-card-app { @@ -57,7 +57,7 @@ overflow: hidden; padding: 14px; height: 75px; - border-top: rgba(0,0,0,0.1) 1px solid; + border-top: var(--lightgrey) 1px solid; transition: background 0.3s ease; } @@ -171,21 +171,21 @@ .app-cell h3 { margin: 0; - color: #393939; + color: var(--darkgrey); font-size: 2.4rem; } .app-cell p { margin: 0; margin-bottom: 5px; - color: #a3a3a3; + color: var(--midgrey); font-size: 1.6rem; line-height: 1.4em; } .app-subtitle { max-width: 550px; - color: #666363; + color: var(--midgrey); font-size: 1.6rem; } .app-config-form .gh-btn-grey { diff --git a/app/styles/layouts/main.css b/app/styles/layouts/main.css index 0f51bcf53..1496b4cbe 100644 --- a/app/styles/layouts/main.css +++ b/app/styles/layouts/main.css @@ -394,7 +394,7 @@ body > .ember-view:not(.liquid-target-container) { /* Move main content over for the closed-nav trigger bar */ .gh-autonav .gh-main { - margin-left: 15px; + margin-left: 10px; } } diff --git a/app/styles/layouts/tags.css b/app/styles/layouts/tags.css index 54f47bc43..19b7a14ce 100644 --- a/app/styles/layouts/tags.css +++ b/app/styles/layouts/tags.css @@ -9,7 +9,7 @@ position: relative; display: block; padding: 0 45px 0 0; - border-bottom: 1px solid #dfe1e3; + border-bottom: var(--lightgrey) 1px solid; } .settings-tag .tag-edit-button { @@ -44,7 +44,7 @@ .settings-tag .tag-description { margin: 0; - color: color(#dfe1e3 lightness(-10%)); + color: var(--midgrey); word-wrap: break-word; font-size: 13px; } @@ -53,7 +53,7 @@ position: absolute; top: 20px; right: 12px; - color: color(#dfe1e3 lightness(-10%)); + color: var(--midgrey); font-size: 16px; } @@ -68,8 +68,7 @@ overflow: auto; max-width: calc(100% - 350px); width: 66%; - border-right: #dfe1e3 1px solid; - background: #fff; + border-right: var(--lightgrey) 1px solid; } @media (max-width: 600px) { @@ -97,7 +96,6 @@ min-width: 350px; width: 34%; border: none; - background: #fff; transform: none; } diff --git a/app/templates/settings/labs.hbs b/app/templates/settings/labs.hbs index 3cb192c90..ba7f72cc6 100644 --- a/app/templates/settings/labs.hbs +++ b/app/templates/settings/labs.hbs @@ -59,6 +59,15 @@
{{gh-feature-flag "publicAPI"}}
+
+
+
Night shift
+
Swap Ghost admin's colours to a dark background which is easy on the eyes
+
+
+
{{gh-feature-flag "subscribers"}}
+
+
Subscribers