/* 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"; /* 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/billing.css"; :root { --darkgrey: #e5eff5; --midgrey: #738a94; --lightgrey: #333F44; --dark-main-bg-color: #263238; --blue: color-mod(#3eb0ef l(+5%) s(+5%)); } 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%)); } .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)); } .settings-menu-container, .gh-main-white { background: #212A2E; } @media (max-width: 800px) { .gh-mobile-nav-bar { background: #212A2E; } } .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: color-mod(var(--lightgrey)); } .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%); } .gh-btn { color: color-mod(var(--darkgrey) l(-27%) blackness(+15%)); text-shadow: none; } .gh-btn:not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red) { border: color-mod(var(--darkgrey) l(-27%) blackness(+15%)) 1px solid; } .view-actions .gh-btn:not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red) { border-color: color-mod(var(--darkgrey) l(-27%) blackness(+15%) alpha(50%)); } .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-link { border: none !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: color-mod(var(--dark-main-bg-color) l(-2%)); } .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); } .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-image-uploader .description { color: var(--midgrey); } .gh-main > section.gh-editor-fullscreen { background: color-mod(#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); } .fullscreen-modal-background { background: #000; } .modal-content { background: #212A2E; } .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; } .gh-logo, .gh-unsplash-logo { filter: invert(100%) brightness(150%); } .gh-canvas-background { background: #212a2e; } .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: #212A2E; } .td-cta-box { background: #212A2E; } .id-item { background: #212A2E; } .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-mailchimp img, .id-typeform img, .id-buffer img, .id-unsplash, .id-more img { filter: invert(100%); } .dark-no-shadow { box-shadow: none; } .gh-nav { border-right: none; } .gh-nav-list a { color: color-mod(var(--midgrey) l(+10%) s(-5%)); } .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-list .active, .gh-nav-btn-search:hover { background: color-mod(var(--dark-main-bg-color) l(+5%) s(-5%)) } .gh-nav-list .gh-nav-nightshift span svg path { fill: color-mod(var(--midgrey) l(-5%)); } .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 { background: #212A2E; } .gh-posts-list-item:hover, .ember-power-select-option[aria-current=true], .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 { background: color-mod(var(--dark-main-bg-color) l(-2%)); } .tag-settings .gh-image-uploader { background-color: transparent; } /* Koenig styles */ .kg-link-input { border-color: var(--blue) !important; } /* Dark style Lists */ .gh-list { background: #212A2E; } .gh-list-header, .gh-list-row:not(.header):hover .gh-list-cell, .gh-list-row:not(.header):hover .gh-list-data, .apps-grid-cell:hover { background: color-mod(var(--lightgrey) l(-9%)); } /* Members */ .gh-members-chart-header { background: color-mod(var(--lightgrey) l(-9%)); } .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%)); }