mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-28 22:43:30 +03:00
Prototype nightshift 🌆
This commit is contained in:
John O'Nolan
Austin Burdine
parent
639264166a
commit
2a300e0410
116
ghost/admin/app/styles/app-dark.css
Normal file
116
ghost/admin/app/styles/app-dark.css
Normal file
@ -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);
|
||||
}
|
||||
@ -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) {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user