Ghost/ghost/admin/app/styles/app-dark.css

/* Spirit - Ghost's CSS framework
/* ---------------------------------------------------------- */
/*
    includes normalize v7 so must come first to avoid clobbering
    our old non-Spirit classes
*/
@import "spirit/spirit-dark.css";

/* Patterns: Groups of Styles
/* ---------------------------------------------------------- */
@import "patterns/global.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";
@import "patterns/throbber.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/settings-menu.css";
@import "components/power-select.css";
@import "components/power-calendar.css";
@import "components/publishmenu.css";
@import "components/popovers.css";
@import "components/tour.css";
@import "components/unsplash.css";
@import "components/codemirror.css";
@import "components/lists.css";
@import "components/tabs.css";
@import "components/browser-preview.css";
@import "components/stacks.css";
@import "components/browser-preview.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/members.css";
@import "layouts/error.css";
@import "layouts/apps.css";
@import "layouts/packages.css";
@import "layouts/labs.css";
@import "layouts/whats-new.css";
@import "layouts/preview-email.css";
@import "layouts/portal-settings.css";
@import "layouts/billing.css";
@import "layouts/fullscreen-wizard.css";
@import "layouts/post-preview.css";
@import "layouts/dashboard.css";


:root {
    /* Primary colours */
    --black: #fafafb;
    --white: #111213;
    --lime: #B5FF18;

    --darkgrey: #e8ebed;
    --middarkgrey: #aeb5bc;
    --midgrey: #80868e;
    --midlightgrey:#60666c;
    --lightgrey: #2b2d31;
    --whitegrey: #1c1e21;
    --blue: color-mod(#3eb0ef l(+5%) s(+5%));

    --dark-main-bg-color: #151719;
    --hairline-color-1: #272a30;
    --hairline-color-2: #626D79;

    --main-color-content-greybg: var(--whitegrey);
    --list-color-divider: var(--whitegrey-l1);
}

body {
    color: var(--darkgrey);
}

pre {
    border: color-mod(var(--lightgrey) l(+5%));
    background: var(--lightgrey);
}

hr {
    border-color: color-mod(var(--lightgrey) l(+5%));
}

input,
.gh-input,
.gh-select,
.for-switch .input-toggle-component,
.gh-select select,
.settings-menu-container:not(.ember-power-select-multiple-trigger):not(.tag-settings) input:not([disabled]),
.settings-menu-container:not(.tag-settings) .gh-input:not([disabled]),
.settings-menu-pane .gh-date-time-picker-date,
.settings-menu-pane .gh-date-time-picker-time {
    color: var(--darkgrey);
    border-color: color-mod(var(--lightgrey));
    background: color-mod(var(--lightgrey));
}

input:focus,
.gh-input:focus,
.gh-select:focus,
.gh-select select:focus {
    border-color: color-mod(var(--lightgrey) l(+10%));
}

.for-checkbox label:hover input:not(:checked) + .input-toggle-component,
.for-radio label:hover input:not(:checked) + .input-toggle-component {
    /* light=>dark theme => lightgrey=>middarkgrey */
    border-color: color-mod(var(--lightgrey) l(+10%));
}

.for-checkbox input:checked + .input-toggle-component {
    border-color: var(--green);
    background: var(--green);
}

.gh-input-append {
    border-color: color-mod(var(--lightgrey));
}

.gh-input-group .gh-input:focus + .gh-input-append {
    border-color: color-mod(var(--lightgrey) l(+10%));
}

.gh-input-append,
.gh-input-append:before {
    background: color-mod(var(--lightgrey));
}

.gh-input-icon.gh-icon-link svg path {
    stroke: var(--darkgrey);
}

.gh-main-white {
    background: var(--white);
}

.settings-menu-container {
    background: var(--main-color-content-greybg);
}

@media (max-width: 800px) {
    .gh-mobile-nav-bar {
        background: #191b1f;
    }
}

.gh-nav-search .ember-power-select-trigger {
    border-color: color-mod(var(--lightgrey));
    background: color-mod(var(--lightgrey));
}

.ember-power-select-multiple-trigger {
    border-color: color-mod(var(--lightgrey));
    background: color-mod(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-mod(var(--lightgrey));
    background: var(--whitegrey-l1);
}

.ember-power-select-option[aria-current="true"] {
    background: var(--whitegrey-d1);
}

.ember-basic-dropdown--opened > .ember-power-select-trigger,
.ember-power-select-trigger[aria-expanded="true"],
.ember-power-select-search input {
    border-color: color-mod(var(--lightgrey));
}

.ember-power-calendar-weekdays,
.ember-power-calendar-day--selected,
.ember-power-calendar-day--selected:not([disabled]):hover {
    color: var(--darkgrey);
}

.ember-power-calendar-day--today,
.ember-power-calendar-day:not([disabled]):hover {
    background-color: color-mod(var(--lightgrey) l(-5%));
}

.ember-power-calendar-day--selected,
.ember-power-calendar-day--selected:not([disabled]):hover {
    background: color-mod(var(--blue) l(-10%));
}

.ember-power-calendar-day--interactive[disabled] {
    opacity: 0.2;
}

.gh-main,
.gh-nav,
.gh-unsplash-window {
    background: var(--dark-main-bg-color);
}

.gh-image-uploader-unsplash {
    filter: invert(100%);
}

/* Buttons
/* ---------------------------------------------------------------------- */
.gh-btn {
    color: var(--black);
    text-shadow: none;
}

.gh-btn-primary,
.gh-btn-black {
    color: var(--white);
}

.gh-btn-black:hover,
.gh-btn-primary:hover {
    background: var(--black) !important;
}

.gh-btn:not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):not(.gh-btn-primary):not(.gh-btn-black) {
    background: var(--lightgrey);
    color: var(--black);
}

.gh-btn:not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):not(.gh-btn-primary):not(.gh-btn-black):hover {
    background: var(--lightgrey-d1);
    color: var(--black);
}

.gh-btn-group .gh-btn:first-of-type {
    border-right: none !important;
}

.gh-btn-blue,
.gh-btn-green,
.gh-btn-red {
    color: #fff;
}

.gh-btn-blue:hover,
.gh-btn-green:hover,
.gh-btn-red:hover {
    color: white;
}

.gh-btn-white {
    background: var(--transparent);
}

.gh-btn-outline:hover {
    border-color: var(--lightgrey-l2);
}

.gh-btn-link {
    border: none !important;
}

.gh-image-uploader .gh-btn {
    background: var(--whitegrey) !important;
}

/* ---------------------------------------------------------------------- */

.gh-expandable-header .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red),
.gh-expandable-content .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red), 
.gh-main-section-content.grey .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red) {
    background: var(--lightgrey);
}

.gh-expandable-header .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):hover,
.gh-expandable-content .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):hover, 
.gh-main-section-content.grey .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):hover {
    background: var(--lightgrey-l1);
}

.gh-main-section-header {
    border-bottom: 1px solid var(--hairline-color-1);
}

.gh-main-section.no-heading,
.gh-main-section.bt {
    border-top: 1px solid var(--hairline-color-1);
}

.gh-btn-tabs .gh-btn {
    background: transparent !important;
}

.settings-menu-delete-button {
    color: var(--red);
    border: none !important;
    border-color: transparent;
}

.gh-publishmenu-trigger {
    color: var(--blue);
    border: none !important;
}

.gh-publishmenu-trigger svg path {
    stroke-width: 2px;
}

.dropdown-menu li > a,
.dropdown-menu li > button {
    color: color-mod(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);
    background: var(--whitegrey-d1);
}

.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);
}

.nav-list-item:hover {
    background: var(--lightgrey-l1);
}

.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: var(--whitegrey);
}

.gh-image-uploader {
    background: var(--lightgrey);
}

.gh-image-uploader .description {
    color: var(--midgrey);
}

.gh-main > section.gh-editor-fullscreen {
    background: color-mod(#191b1f l(+2%));
}

.dropdown-menu {
    background: var(--whitegrey-l1);
}

.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);
}

.ember-power-select-multiple-option {
    background: var(--white);
    color: var(--black);
}

.fullscreen-modal-background {
    background: #000;
}

.modal-content {
    background: var(--whitegrey);
}

.seo-preview-title {
    color: color-mod(#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);
}

.gh-editor-header-small {
    background: var(--dark-main-bg-color);
}

.gh-markdown-editor .CodeMirror-cursor {
    border-color: #fff;
}

.koenig-card-html--editor .CodeMirror-cursor {
    border-color: #fff;
}

.gh-logo,
.gh-unsplash-logo {
    filter: invert(100%) brightness(150%);
}

.gh-canvas-background {
    background: #191b1f;
}

.gh-canvas-title span path {
    fill: var(--darkgrey);
}

.gh-canvas-header {
    background: var(--dark-main-bg-color);
}

.gh-loading-spinner {
    border-color: rgba(255,255,255,0.1);
}

.gh-loading-spinner:before {
    background: #fff;
}

.user-cover-edit {
    color: #fff;
}

.gh-unsplash-search:focus {
    background-color: color-mod(var(--lightgrey));
}

.gh-unsplash-zoom {
    background: rgba(0,0,0,0.8);
}

.gh-contributors a:before {
    color: var(--lightgrey);
}

.settings-menu-content .for-radio .input-toggle-component,
.settings-menu-content .for-checkbox .input-toggle-component {
    background: var(--lightgrey);
}

.settings-menu-expanded .content-cover,
.mobile-menu-expanded .content-cover {
    background: transparent;
}

.gh-box {
    background: var(--lightgrey);
    color: var(--darkgrey);
}

.apps-grid,
.apps-grid-cell {
    background: var(--dark-main-bg-color);
}

.td-item-overlay:hover,
.td-item-overlay:focus {
    background-color: var(--black-90);
}

.td-cta-box {
    background: #191b1f;
}

.td-item-empty {
    background: var(--whitegrey-l1);
}

.settings-code-editor .CodeMirror-gutters,
.settings-code code,
.form-group code {
    background-color: var(--whitegrey);
    border-right: 1px solid var(--hairline-color-1);
}

.gh-main-section-description code {
    background-color: var(--whitegrey);
    border: 1px solid var(--lightgrey);
}

.for-switch input:checked+.input-toggle-component {
    background: var(--green);
}

.settings-code-editor .CodeMirror {
    color: var(--black);
}

.settings-code-editor .CodeMirror-cursor {
    border-color: var(--midgrey);
}

.gh-branding-settings-right {
    background: var(--dark-main-bg-color);
}

.gh-branding-settings-header {
    border-bottom: 1px solid var(--hairline-color-1);
}

.gh-branding-settings-options {
    border-right: 1px solid var(--hairline-color-1);
}

.gh-branding-image-container.transparent-bg {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3ERectangle%3C/title%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23303e46' d='M0 0h24v24H0z'/%3E%3Cpath fill='%233e515b' d='M0 0h12v12H0zM12 12h12v12H12z'/%3E%3C/g%3E%3C/svg%3E");
}

.id-item {
    background: var(--dark-main-bg-color);
}

.CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) {
    background: rgba(255, 0, 0, .30);
}

.CodeMirror .CodeMirror-code .cm-string {
    color: color-mod(#183691 l(+25%));
}

.id-github img,
.id-typeform img,
.id-buffer img,
.id-unsplash,
.id-more img {
    filter: invert(100%);
}

.dark-no-shadow {
    box-shadow: none;
}

.gh-nav {
    border-color: var(--hairline-color-1);
}

.gh-nav-list a {
    color: color-mod(var(--midgrey));
}

.gh-nav-list a:not(.active):not(.gh-secondary-action):hover,
.gh-nav-list .gh-secondary-action:hover span,
.gh-nav-bottom .ember-basic-dropdown-trigger:hover,
.gh-nav-btn-search:hover,
.gh-nav-list button.main-menu-item:hover,
.gh-nav-bottom .ember-basic-dropdown-trigger:hover,
.gh-nav-bottom-tabicon:hover,
.gh-nav-bottom-tabicon.active,
.gh-nav-list .gh-secondary-action:not(.icon-only):hover span {
    background: var(--whitegrey);
}

.gh-nav-list a:not(.active):not(.gh-secondary-action):hover {
    background: var(--whitegrey);
}

.gh-nav-btn-search:hover {
    background: var(--lightgrey);
}

.apps-grid-cell:hover {
    background: var(--whitegrey);
}

.apps-card-app {
    border-bottom: var(--hairline-color-1) 1px solid;
}

.apps-card-app-icon {
    mix-blend-mode: normal;
}

.gh-nav,
.gh-contentfilter-menu-trigger,
.gh-contentfilter-menu-trigger--active,
.gh-contentfilter-menu-trigger:focus,
.tags-container,
.content-list ol,
.gh-settings-main-grid {
    background: var(--dark-main-bg-color);
}

.gh-posts-list-item:hover,
.ember-power-select-group .ember-power-select-option[aria-current=true],
.gh-list-row:not(.header):not(.loading):hover .gh-list-cell,
.gh-list-row:not(.header):not(.loading):hover .gh-list-data,
.settings-tag .tag-edit-button.active,
.gh-portal-site-frame-cover {
    background: var(--whitegrey);
}

.gh-content-status-published {
    background: var(--whitegrey-l1);
}

.gh-browserpreview-browser {
    background: var(--whitegrey);
}

.gh-browserpreview-browser .tabs div  {
    background: var(--lightgrey);
}

.tag-settings .gh-image-uploader {
    background-color: transparent;
}

.gh-settings-main-grid .gh-setting-group span {
    background: color-mod(var(--dark-main-bg-color) l(+2%));
}

.nightshift-toggle {
    background: var(--lightgrey);
}

.nightshift-toggle .thumb {
    background: var(--black);
}

.nightshift-toggle .moon svg {
    color: var(--black);
}

.gh-nav-list .gh-nav-nightshift span svg path {
    fill: color-mod(var(--midgrey) l(-5%));
}

.gh-tag-setting-codeinjection .CodeMirror {
    background: var(--dark-main-bg-color);
}

.gh-tag-setting-codeinjection .CodeMirror-gutters {
    background-color: var(--whitegrey);
    border-right: 1px solid var(--lightgrey);
}

/* Koenig styles */
.kg-link-input {
    border-color: var(--blue) !important;
}

/* Editor  */
.gh-editor-back-button {
    background: var(--dark-main-bg-color);
}

.gh-editor-post-status {
    background: var(--dark-main-bg-color);
}

.gh-editor-preview-trigger {
    background: var(--dark-main-bg-color);
}

.gh-btn-editor {
    background: var(--dark-main-bg-color) !important;
}

.gh-publishmenu-button {
    color: var(--black);
    background: var(--green-d1);
}

.gh-publishmenu-button:hover {
    color: #fff;
    background: var(--green) !important;
}

.settings-menu-delete-button {
    background: var(--main-color-content-greybg) !important;
}

/* Post preview modal */
.gh-post-preview-header,
.gh-post-preview-browser-footer {
    background: var(--main-color-content-greybg);
}

.gh-post-preview-header-border {
    border-bottom: 1px solid var(--hairline-color-1);
}

.gh-post-preview-browser-footer {
    border-top: 1px solid var(--hairline-color-1);
}

/* Dark style Lists */
.gh-list {
    background: var(--dark-main-bg-color) !important;
}

.gh-list-header,
.gh-list-row:not(.header):hover .gh-list-cell,
.gh-list-row:not(.header):hover .gh-list-data {
    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 */
.gh-members-chart-header {
    background: var(--white);
}
.gh-members-chart-header .gh-contentfilter-type .gh-contentfilter-menu-trigger {
    box-shadow: 0 0 0 1px color-mod(var(--darkgrey) l(-27%) blackness(+15%) alpha(50%));
}

.gh-members-import-table::before {
    background: #191b1f;
}

.gh-members-import-table::after {
    background: #191b1f;
}
.gh-import-member-select,
.gh-import-member-select select {
    background: none !important;
}

.modal-fullsettings-preview-container,
.fullscreen-modal-email-preview .gh-pe-mobile-container,
.fullscreen-modal-email-preview .gh-pe-desktop-container{
    background: var(--dark-main-bg-color);
}

.gh-post-preview-browser-container,
.gh-post-preview-email-container,
.gh-post-preview-social-container {
    background: var(--dark-main-bg-color);
}

.modal-fullsettings-main {
    border-left: 1px solid var(--hairline-color-1);
}

.gh-pe-mobile-bezel {
    background: var(--lightgrey-l2);
}

.gh-members-emailsettings-footer-input {
    background: color-mod(var(--lightgrey));
}

.gh-email-design-typography .gh-radio-content {
    border: 1px solid var(--hairline-color-1);
}

.gh-members-connect-testmodelabel {
    background: #983705;
    color: #f8e5b9;
}

/* Portal */
.gh-portal-settings-maintabs {
    border: 1px solid color-mod(var(--darkgrey) l(-27%) blackness(+15%));
}

.gh-portal-page-url-container {
    color: var(--darkgrey);
    border-color: color-mod(var(--lightgrey));
    background: color-mod(var(--lightgrey));
}

.gh-portal-settings-maintabs li:not(:last-of-type) {
    border-right: 1px solid color-mod(var(--darkgrey) l(-27%) blackness(+15%));
}

.gh-portal-settings-main {
    border-left: 1px solid var(--hairline-color-1);
}

.gh-portal-setting-sectionheading {
    border-bottom: 1px solid var(--hairline-color-1);
}

.gh-portal-links-container {
    background: var(--main-color-content-greybg)
}

/* Launch-site wizard */
.fullscreen-wizard-container {
    background: var(--dark-main-bg-color);
}

.gh-launch-wizard-content {
    background: var(--dark-main-bg-color);
    border-top: 1px solid var(--hairline-color-1);
}

.gh-launch-wizard-btn {
    color: var(--black);
    background: var(--green-d1);
}

.gh-launch-wizard-btn:hover {
    color: #fff;
    background: var(--green) !important;
}

.gh-launch-wizard-btn svg {
    fill: var(--black);
}