Skip to content
This repository has been archived by the owner on Nov 28, 2022. It is now read-only.

Commit

Permalink
Prototype nightshift 🌆
Browse files Browse the repository at this point in the history
  • Loading branch information
JohnONolan authored and acburdine committed Feb 17, 2017
1 parent b80cb64 commit f8c6b94
Show file tree
Hide file tree
Showing 6 changed files with 137 additions and 16 deletions.
116 changes: 116 additions & 0 deletions app/styles/app-dark.css
Original file line number Diff line number Diff line change
@@ -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);
}
4 changes: 1 addition & 3 deletions app/styles/components/power-select.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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) {
Expand Down
12 changes: 6 additions & 6 deletions app/styles/layouts/apps.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand All @@ -47,7 +47,7 @@
flex: 1 1 100%;
}
.apps-grid-cell:hover {
background: #f5f7f8;
background: color(var(--lightgrey) l(+5%));
}

.apps-card-app {
Expand All @@ -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;
}

Expand Down Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion app/styles/layouts/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand Down
10 changes: 4 additions & 6 deletions app/styles/layouts/tags.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
Expand All @@ -53,7 +53,7 @@
position: absolute;
top: 20px;
right: 12px;
color: color(#dfe1e3 lightness(-10%));
color: var(--midgrey);
font-size: 16px;
}

Expand All @@ -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) {
Expand Down Expand Up @@ -97,7 +96,6 @@
min-width: 350px;
width: 34%;
border: none;
background: #fff;
transform: none;
}

Expand Down
9 changes: 9 additions & 0 deletions app/templates/settings/labs.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,15 @@
<div class="for-checkbox">{{gh-feature-flag "publicAPI"}}</div>
</div>
</div>
<div class="gh-setting">
<div class="gh-setting-content">
<div class="gh-setting-title">Night shift</div>
<div class="gh-setting-desc">Swap Ghost admin's colours to a dark background which is easy on the eyes</div>
</div>
<div class="gh-setting-action">
<div class="for-checkbox">{{gh-feature-flag "subscribers"}}</div>
</div>
</div>
<div class="gh-setting">
<div class="gh-setting-content">
<div class="gh-setting-title">Subscribers</div>
Expand Down

0 comments on commit f8c6b94

Please sign in to comment.