diff options
Diffstat (limited to 'templates/@theme-base/_dark_mode.scss')
| -rw-r--r-- | templates/@theme-base/_dark_mode.scss | 610 |
1 files changed, 610 insertions, 0 deletions
diff --git a/templates/@theme-base/_dark_mode.scss b/templates/@theme-base/_dark_mode.scss new file mode 100644 index 0000000..188148c --- /dev/null +++ b/templates/@theme-base/_dark_mode.scss @@ -0,0 +1,610 @@ +// Applies theme styles across as many areas of the layout as possible. + +// Scrollbar (PM currently does not style this element) +body { + scrollbar-color: lighten($base, 10%) lighten($base, 2%); +} +::-webkit-scrollbar { + width: 16px; + + &-track { + background: lighten($base, 2%); + } + &-thumb { + background: lighten($base, 10%); + box-shadow: inset 0 0 0 4px lighten($base, 2%); + border-radius: 16px; + } +} + +.isDarkMode { + .bordered, + .bordered-container:not([class*="composerInputMeta-"]), + .breadcrumb-container { + border-color: lighten($base, 10%); + } + + .dropDown-content::after, .dropDown-content::before, + .dropDown:not(.dropDown--noCaret)::before, + .dropDown-content { + background: $base; + border: $base; + } + + .dropDown-item-button:focus, .dropDown-item-button:focus-within, + .dropDown-item-button:hover, .dropDown-item-link:focus, + .dropDown-item-link:focus-within, .dropDown-item-link:hover { + background-color: darken($base, 5%); + } + + .dropDown-item-button.is-disabled, .dropDown-item-button[disabled], + .dropDown-item-link.is-disabled, .dropDown-item-link[disabled] { + background-color: darken($base, 2%); + } + + .squireToolbar-select-list { + background: $base; + color: $text_color; + } + + .squireToolbar-dropdown-divider { + background-color: lighten($base, 10%); + } + + .squireToolbar-select-item:hover { + background: darken($base, 2%); + } + + // Compose window + #pm_composer .composer, + .composerInputMeta-overlay { + background: $base; + } + + #pm_composer .composer .fill { + background: $base; + } + + .composer-body-container textarea { + background: $base; + } + + .composer-addresses-item { + background: darken($base, 5%); + } + + + .composer-addresses-autocomplete { + ul { + background: darken($base, 5%); + } + + li[aria-selected="true"], + li:hover { + background: $base; + } + } + + // Email tags present in new message window + .autocompleteEmails-item { + background-color: darken($base, 2%); + border-color: darken($base, 2%); + } + + .autocompleteEmails-label { + border-left: 1px solid lighten($base, 10%); + border-right: 1px solid lighten($base, 10%); + } + + .composerOptions-container.show { + background: darken($base, 2%); + + .shadow-container { + background: $base; + color: $text_color; + } + } + + .pm-button.pm-button--primary { + background: darken($highlight, 10%); + color: $text_color; + border-color: darken($highlight, 10%); + } + + .pm-button.pm-button--primary:hover { + background: $highlight; + color: $text_color; + } + + .is-disabled.pm-button--error, .is-disabled.pm-button--error.pm-button--info, .is-disabled.pm-button--error.pm-button--redborder, .is-disabled.pm-button--primary, .is-disabled.pm-button--primary.pm-button--info, .is-disabled.pm-button--primary.pm-button--redborder, .is-disabled.pm-button--warning, .is-disabled.pm-button--warning.pm-button--info, .is-disabled.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info[disabled], .pm-button--error.pm-button--redborder[disabled], .pm-button--error[disabled], .pm-button--primary.pm-button--info[disabled], .pm-button--primary.pm-button--redborder[disabled], .pm-button--primary[disabled], .pm-button--warning.pm-button--info[disabled], .pm-button--warning.pm-button--redborder[disabled], .pm-button--warning[disabled], .pm-button-blue.is-disabled, .pm-button-blue.is-disabled.pm-button--info, .pm-button-blue.is-disabled.pm-button--redborder, .pm-button-blue.pm-button--info[disabled], .pm-button-blue.pm-button--redborder[disabled], .pm-button-blue[disabled], .pm-button.is-disabled.pm-button--error, .pm-button.is-disabled.pm-button--primary, .pm-button.is-disabled.pm-button--warning, .pm-button.pm-button--error[disabled], .pm-button.pm-button--primary[disabled], .pm-button.pm-button--warning[disabled], .pm-button.pm-button-blue.is-disabled, .pm-button.pm-button-blue[disabled] { + background-color: darken($base, 2%); + border-color: lighten($base, 10%); + color: darken($text_color, 10%); + } + + .pm-button:not(.pm-button-blue):not(.pv-button-green):not(.pm-button--primary):not(.pm-button--primaryborderEvenInDarkMode):not(.pm-button--link):not(.pm-button--error):not(.pm-button--warning):not(.pm-button--redborder):not(.pm-button--primaryborder), .pm-button--info { + color: $text_color; + background-color: $base; + border-color: lighten($base, 10%); + } + + .pm-group-buttons > .pm-group-button.pm-button--primary { + border-color: lighten($base, 10%); + } + + .pm-button-blueborder { + border-color: $highlight; + color: $highlight; + } + + .pm-button-blueborder:hover { + border-color: lighten($highlight, 5%); + color: lighten($highlight, 5%); + } + + [class*="squireToolbar-row"] .squireToolbar-action-mode:active, [class*="squireToolbar-row"] .squireToolbar-action-mode:hover, [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:active, [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:hover { + background: lighten($base, 2%) !important; + } + + .squireToolbar-separator { + background: lighten($base, 5%); + } + + .composerTime-container, + [class*="composer-field"] { + color: $text_color; + } + + .composerInputMeta-overlay-fakefield { + border-color: $text_color; + } + + // Encryption icon + .encryptionStatus .color-global-grey-dm:not(.color-pm-blue) svg { + color: white; + } + + // Message items + .conversation { + border-color: lighten($base, 10%); + } + + .main-area, + .main-area--noHeader, + .main-area--withToolbar, + .main-area--withToolbar--noHeader, + [class*="block-info-"] { + color: $text_color; + } + + [class*="block-info"] { + background-color: lighten($base, 10%); + color: $text_color; + } + + .fill-global-grey { + fill: $highlight; + } + + .starbutton { + fill: $extra_color; + } + + // Read message + .bg-global-light, kbd { + background: $base; + } + + // Contacts items and header + .item-container, .item-container-row, .contactsummary-container { + background: $base; + } + + .items-column-list-inner, .ReactVirtualized__Grid__innerScrollContainer { + border-color: lighten($base, 10%); + + .item-container, .item-container-row { + border-color: lighten($base, 10%); + } + } + + // Unread, not active + .item-container:not(.item-is-selected):not(.read):not(.active), + .item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active), + .item-container-row:not(.item-is-selected):not(.item-contact):not(.read):not(.active), .squireToolbar-container { + background: lighten($base, 5%); + } + + // Active + .item-container.active, .item-is-selected { + background: darken($base, 2%); + .flex-item-fluid { + color: $highlight; + } + } + + // Selected message checkbox + .item-icon { + background-color: $base; + border: 1px solid darken($text_color, 5%); + } + + .selectBoxElement-container:hover .item-icon { + background-color: $base; + border: 1px solid darken($highlight, 5%); + + .item-icon-fakecheck-icon { + fill: darken($highlight, 5%); + } + } + + .selectBoxElement-container { + color: $text_color; + } + + .selectBoxElement-container:hover .item-checkbox:checked + .item-icon { + background-color: darken($highlight, 5%); + border-color: darken($highlight, 5%); + } + + .item-checkbox + .item-icon:hover, + .item-checkbox:hover + .item-icon { + background-color: darken($base, 5%); + } + + // Message list background area + .items-column-list, + .elementList-container-row { + background-color: $base; + } + + // Current message panel + .composer-container { + background: lighten($base, 5%); + } + + .message-header { + background-color: lighten($base, 5%); + } + + .view-column-detail { + background-color: $base; + } + + details:first-child { + border-color: lighten($base, 10%); + } + + .items-column-list, + .message-container, + .message-attachments { + border-color: lighten($base, 10%); + } + + .message-container:not(.sent):not(.draft) .message-header.message-summary::before, + .message-header.is-inbound::before { + border-top: 1px solid lighten($base, 10%); + border-left: 1px solid lighten($base, 10%); + background-color: lighten($base, 5%); + } + + // Mailing list block + .message-infobox { + background-color: $base; + } + + // Email body background, text and links + .message-content.frame.message-frame { + background: white; + color: black; + } + + .block-info-standard, .bodyDecrypted blockquote { + border-color: $highlight; + } + + .squireDropdown-item-label { + color: $text_color; + } + + .squireToolbar-action-color { + background: transparent; + } + + // This forces the background of a new message to used the base color. + .angular-squire-iframe body { + color: $text_color; + background: lighten($base, 5%); + + a { + color: $highlight; + } + } + + .plaintext-editor { + color: $text_color; + } + + // Attachment button + .pm-button, .pm-button--info, .pm-button--redborder { + background: $base; + border-color: lighten($base, 10%); + color: $text_color; + } + + .message-attachmentInfo { + border-color: lighten($base, 10%); + } + + .is-hover.pm-button--info, .is-hover.pm-button--redborder, + .pm-button--info:focus, .pm-button--info:focus-within, + .pm-button--info:hover, .pm-button--redborder:focus, + .pm-button--redborder:focus-within, .pm-button--redborder:hover, + .pm-button.is-hover, .pm-button:focus-within, + .pm-button:hover:not(.pm-button--primary) { + color: $highlight; + } + + .pm-button:focus { + color: $text_color; + } + + .is-disabled.pm-button--info, + .is-disabled.pm-button--redborder, + .pm-button--info[disabled], + .pm-button--redborder[disabled], + .pm-button.is-disabled, + .pm-button[disabled] { + background: lighten($base, 10%); + } + + .is-active.pm-button--info, + .is-active.pm-button--redborder, + .pm-button--info:not(div):active, + .pm-button--redborder:not(div):active, + .pm-button.is-active, .pm-button:not(div):active { + background: lighten($base, 10%); + color: $highlight; + } + + // Dropdowns + .dropDown-content { + background: $base; + color: $text_color; + + button { + color: $text_color; + } + + .elementsSelector-btn-action, + .dropDown-item:hover { + color: $text_color; + } + + .dropDown-item:hover { + background: lighten($base, 5%) !important; + } + + .dropDown-item + .dropDown-item { + border-top: 1px solid lighten($base, 10%); + } + + .dropDown-item { + .color-global-grey { + color: $text_color; + } + } + } + + .dropDown { + .dropDown-content { + &::before, &::after { + border-bottom-color: $base; + } + } + } + + .dropDown--right-bottom { + &::before { + border-right-color: $base; + } + + .dropDown-content { + &::before, &::after { + background: $base; + } + } + } + + .dropDown--bottom-right { + .dropDown-content { + &::before, &::after { + background: $base; + } + } + } + + .dropDown--bottom-left::before, + .dropDown--bottom-right::before, + .dropDown--bottom::before { + border-bottom-color: lighten($base, 10%); + } + + .dropDown--bottom-right { + border: 1px solid lighten($base, 10%); + } + + .pm-field-icon-container[type="search"], .pm-field[type="search"] { + background-color: lighten($base, 5%); + } + + .dropDown-contentInner { + background-color: $base; + + &::before, &::after { + background-color: $base; + } + + .dropDown-item span { + color: $text_color !important; + } + } + + .searchbox-field[type="search"]:not(#global_search) { + background: $text_color; + color: $base; + } + + // Links + + .link:active, .link:focus, .link:hover, + a:active, a:focus, a:hover, + .pm-button--link:hover, + .composerInputMeta-label:hover { + color: lighten($highlight, 5%); + } + + // Modal + .pm-modal, .pm-modalContentInner { + background-color: $base; + color: $text_color; + + &::before, &::after { + background-color: $base; + } + + .labelColorSelector-item-mask { + border: 2px solid lighten($base, 15%); + } + } + + .pm-button--primaryborder, .pm-button-blueborder { + border-color: $highlight; + color: $highlight; + background-color: lighten($base, 5%); + transition: background-color .2s ease-in-out; + } + + .is-hover.pm-button--primaryborder, .pm-button--primaryborder:focus, + .pm-button--primaryborder:focus-within, .pm-button--primaryborder:hover, + .pm-button-blueborder.is-hover, .pm-button-blueborder:focus, + .pm-button-blueborder:focus-within, .pm-button-blueborder:hover { + border-color: $highlight; + color: $highlight; + background-color: darken($base, 1%); + } + + .scrollshadow-static { + background: $base; + } + + // Input fields + .pm-field, .pm-field-icon-container, + .focus.pm-field-icon-container, .pm-field-icon-container:focus, + .pm-field-icon-container:focus-within, .pm-field.focus, + .pm-field:focus, .pm-field:focus-within, + .composerInputMeta-overlay-fakefield, + .composerInputMeta-autocomplete { + color: $text_color; + background-color: lighten($base, 5%); + + &::placeholder { + color: darken($text_color, 5%); + } + } + + .composerInputMeta-autocomplete input { + color: $text_color; + background-color: lighten($base, 5%); + + &::placeholder { + color: darken($text_color, 5%); + } + } + + select.pm-field, select.pm-field-icon-container { + background-color: lighten($base, 5%); + color: $text_color; + } + + // Storage progress modal + .storageProgress-content.dropDown-content--rightbottom { + &::before { + border-right-color: $base; + } + } + + // Settings panel + .sticky-title { + background: lighten($base, 2%); + } + + .bg-global-highlight { + background-color: $base; + } + + .bg-white-dm { + background-color: lighten($base, 5%); + } + + .main-area, .main-area--noHeader, + .main-area--withToolbar, + .main-area--withToolbar--noHeader, + [class*="block-info-"] { + color: $text_color; + } + + .main-area, .main-area--noHeader, + .main-area--withToolbar, .main-area--withToolbar--noHeader { + background: $base; + } + + .context-bar { + background: $base; + } + + .subnav { + background: lighten($base, 5%); + + .link, a { + color: $highlight; + } + + .link:active, .link:focus, .link:hover, a:active, a:focus, a:hover { + color: lighten($highlight, 5%); + } + } + + // Toggle button + .pm-toggle-label { + border-color: lighten($base, 10%); + background: lighten($base, 5%); + + &::before { + background: $base; + } + + .pm-toggle-label-img { + fill: $text_color; + } + } + + // Plans table + .pm-plans-table-row--highlighted { + background-color: $base; + } + + // Forms + .pm-checkbox-fakecheck, + .pm-radio-fakeradio { + background: transparent; + } + + [class*="icon-"].color-primary { + color: $highlight; + } + + .color-global-grey-dm { + color: $highlight; + } +} |