diff options
Diffstat (limited to 'themes/gruvbox/gruvbox.css')
| -rw-r--r-- | themes/gruvbox/gruvbox.css | 488 |
1 files changed, 465 insertions, 23 deletions
diff --git a/themes/gruvbox/gruvbox.css b/themes/gruvbox/gruvbox.css index e81f28e..4c22d8f 100644 --- a/themes/gruvbox/gruvbox.css +++ b/themes/gruvbox/gruvbox.css @@ -1,7 +1,7 @@ @charset "UTF-8"; /*! =========================================== * * GRUVBOX THEME - * Version: v4.0.0-beta.20 + * Version: v4.0.0-beta.33 * Author: AntoineÐ * Website: www.antoined.fr * Mastodon: @[email protected] @@ -21,8 +21,12 @@ --color-standard-text: #fff; --boxshadow-main: none; } +html:not(.editor-squire-iframe) body { + background: #282828; + color: #fbf1c7; } + .pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue { - color: #fff; + color: #fbf1c7; background-color: #689d6a; border: 1px solid #689d6a; transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out; } @@ -62,20 +66,32 @@ .color-primary { color: #689d6a; } -.aside-link { - background: #1b1b1b; } - -.aside-link:active .aside-linkIcon, .aside-link:focus .aside-linkIcon, .aside-link:hover .aside-linkIcon, .aside-link[aria-current="true"] .aside-linkIcon { - fill: #1b1b1b; - background: none; } - .navigation__counterItem { - background-color: #537f54; + background: #537f54; color: white; } +.item-container-row:hover::before, .item-container:hover::before { + border-color: #87b189; } + +.item-checkbox + .item-icon:hover, .item-checkbox:hover + .item-icon { + border-color: #b5cfb6; } + +.item-checkbox:hover:not(:checked) + .item-icon .item-icon-fakecheck-icon { + fill: #537f54; } + .circle-chart__circle { stroke: #689d6a; } +#dropdown-0 .dropDown-content::after, #dropdown-0 .dropDown-content::before, #dropdown-0.dropDown:not(.dropDown--noCaret)::before, +#dropdown-0 .dropDown-content { + background: #282828; } + +.dropDown:not(.dropDown--noCaret)::before, +.dropDown::after, +.dropDown-logout-initials, +.dropDown-item-hr { + border-color: #353535 !important; } + #global_search.searchbox-field[type="search"] { background-color: #32302f; color: #fbf1c7; } @@ -180,7 +196,7 @@ border-color: #cc241d; } .link, a, .pm-button--link { - color: #282828; + color: #537f54; transition: color .2s ease-in-out; } .link:active, .link:focus, .link:hover, @@ -226,10 +242,23 @@ a:active, a:focus, a:hover, color: #537f54; background: transparent; } +.pm-group-buttons > .pm-group-button.pm-button--primary { + border-color: #537f54; } + +.bg-pm-blue-gradient .pm-button--transparent:hover { + color: #fbf1c7; + border-color: #fbf1c7; } + .pm-toggle-checkbox:checked + .pm-toggle-label:before { background: #689d6a; border-color: #689d6a; } +.composer-title-bar { + background: #282828; } + +.color-global-light { + color: #fbf1c7; } + .angular-squire-iframe body a { color: #689d6a; } @@ -254,13 +283,20 @@ a:active, a:focus, a:hover, .pm-checkbox-fakecheck, .pm-radio-fakeradio { border-color: #282828; } .pm-checkbox-fakecheck [class*="icon-"], .pm-radio-fakeradio [class*="icon-"] { - fill: #282828; } + fill: #689d6a; } [class*="icon-"].color-primary { color: #282828; } [class*="icon-"].color-primary:hover { color: #537f54; } +.pm-field, .editor, +.editor-toolbar, +.border-bottom, +.border-top, +.message-container.is-opened > .message-header { + border-color: #0f0f0f; } + .badgeLabel, .badgeLabel-primary { border-color: #537f54; } @@ -270,17 +306,423 @@ a:active, a:focus, a:hover, .bg-pm-blue { background-color: #537f54; } -.progress-contact, .progressbar { +body { + scrollbar-color: #424242 #2d2d2d; } + +::-webkit-scrollbar { + width: 16px; } + ::-webkit-scrollbar-track { + background: #2d2d2d; } + ::-webkit-scrollbar-thumb { + background: #424242; + box-shadow: inset 0 0 0 4px #2d2d2d; + border-radius: 16px; } + +.isDarkMode .bordered, +.isDarkMode .bordered-container:not([class*="composerInputMeta-"]), +.isDarkMode .breadcrumb-container { + border-color: #424242; } + +.isDarkMode .dropDown-content::after, .isDarkMode .dropDown-content::before, +.isDarkMode .dropDown:not(.dropDown--noCaret)::before, +.isDarkMode .dropDown-content { + background: #282828; + border: #282828; } + +.isDarkMode .dropDown-item-button:focus, .isDarkMode .dropDown-item-button:focus-within, +.isDarkMode .dropDown-item-button:hover, .isDarkMode .dropDown-item-link:focus, +.isDarkMode .dropDown-item-link:focus-within, .isDarkMode .dropDown-item-link:hover { + background-color: #1b1b1b; } + +.isDarkMode .dropDown-item-button.is-disabled, .isDarkMode .dropDown-item-button[disabled], +.isDarkMode .dropDown-item-link.is-disabled, .isDarkMode .dropDown-item-link[disabled] { + background-color: #232323; } + +.isDarkMode .squireToolbar-select-list { + background: #282828; + color: #fbf1c7; } + +.isDarkMode .squireToolbar-dropdown-divider { + background-color: #424242; } + +.isDarkMode .squireToolbar-select-item:hover { + background: #232323; } + +.isDarkMode #pm_composer .composer, +.isDarkMode .composerInputMeta-overlay { + background: #282828; } + +.isDarkMode #pm_composer .composer .fill { + background: #282828; } + +.isDarkMode .composer-body-container textarea { + background: #282828; } + +.isDarkMode .composer-addresses-item { + background: #1b1b1b; } + +.isDarkMode .composer-addresses-autocomplete ul { + background: #1b1b1b; } + +.isDarkMode .composer-addresses-autocomplete li[aria-selected="true"], +.isDarkMode .composer-addresses-autocomplete li:hover { + background: #282828; } + +.isDarkMode .autocompleteEmails-item { + background-color: #232323; + border-color: #232323; } + +.isDarkMode .autocompleteEmails-label { + border-left: 1px solid #424242; + border-right: 1px solid #424242; } + +.isDarkMode .composerOptions-container.show { + background: #232323; } + .isDarkMode .composerOptions-container.show .shadow-container { + background: #282828; + color: #fbf1c7; } + +.isDarkMode .is-disabled.pm-button--error, .isDarkMode .is-disabled.pm-button--error.pm-button--info, .isDarkMode .is-disabled.pm-button--error.pm-button--redborder, .isDarkMode .is-disabled.pm-button--primary, .isDarkMode .is-disabled.pm-button--primary.pm-button--info, .isDarkMode .is-disabled.pm-button--primary.pm-button--redborder, .isDarkMode .is-disabled.pm-button--warning, .isDarkMode .is-disabled.pm-button--warning.pm-button--info, .isDarkMode .is-disabled.pm-button--warning.pm-button--redborder, .isDarkMode .pm-button--error.pm-button--info[disabled], .isDarkMode .pm-button--error.pm-button--redborder[disabled], .isDarkMode .pm-button--error[disabled], .isDarkMode .pm-button--primary.pm-button--info[disabled], .isDarkMode .pm-button--primary.pm-button--redborder[disabled], .isDarkMode .pm-button--primary[disabled], .isDarkMode .pm-button--warning.pm-button--info[disabled], .isDarkMode .pm-button--warning.pm-button--redborder[disabled], .isDarkMode .pm-button--warning[disabled], .isDarkMode .pm-button-blue.is-disabled, .isDarkMode .pm-button-blue.is-disabled.pm-button--info, .isDarkMode .pm-button-blue.is-disabled.pm-button--redborder, .isDarkMode .pm-button-blue.pm-button--info[disabled], .isDarkMode .pm-button-blue.pm-button--redborder[disabled], .isDarkMode .pm-button-blue[disabled], .isDarkMode .pm-button.is-disabled.pm-button--error, .isDarkMode .pm-button.is-disabled.pm-button--primary, .isDarkMode .pm-button.is-disabled.pm-button--warning, .isDarkMode .pm-button.pm-button--error[disabled], .isDarkMode .pm-button.pm-button--primary[disabled], .isDarkMode .pm-button.pm-button--warning[disabled], .isDarkMode .pm-button.pm-button-blue.is-disabled, .isDarkMode .pm-button.pm-button-blue[disabled] { + background-color: #232323; + border-color: #424242; + color: #f8e597; } + +.isDarkMode .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), .isDarkMode .pm-button--info { + color: #fbf1c7; + background-color: #282828; + border-color: #424242; } + +.isDarkMode .pm-group-buttons > .pm-group-button.pm-button--primary { + border-color: #424242; } + +.isDarkMode .pm-button-blueborder { + border-color: #689d6a; color: #689d6a; } - .progress-contact::-moz-progress-bar, .progressbar::-moz-progress-bar { - background: #689d6a; } -.calendar-grid-heading[aria-pressed="true"] -.calendar-grid-heading-number, -.minicalendar-day[aria-pressed="true"], -.minicalendar-day[aria-current="date"]::before, -.calendar-monthgrid-day[aria-pressed="true"] .calendar-monthgrid-day-number { - background: #49704a; } +.isDarkMode .pm-button-blueborder:hover { + border-color: #77a779; + color: #77a779; } -.minicalendar-day[aria-current="date"][aria-pressed="true"]::before { - background: #689d6a; } +.isDarkMode [class*="squireToolbar-row"] .squireToolbar-action-mode:active, .isDarkMode [class*="squireToolbar-row"] .squireToolbar-action-mode:hover, .isDarkMode [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:active, .isDarkMode [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:hover { + background: #2d2d2d !important; } + +.isDarkMode .squireToolbar-separator { + background: #353535; } + +.isDarkMode .composerTime-container, +.isDarkMode [class*="composer-field"] { + color: #fbf1c7; } + +.isDarkMode .composerInputMeta-overlay-fakefield { + border-color: #fbf1c7; } + +.isDarkMode .encryptionStatus .color-global-grey-dm:not(.color-pm-blue) svg { + color: white; } + +.isDarkMode .conversation { + border-color: #424242; } + +.isDarkMode .main-area, +.isDarkMode .main-area--noHeader, +.isDarkMode .main-area--withToolbar, +.isDarkMode .main-area--withToolbar--noHeader, +.isDarkMode [class*="block-info-"] { + color: #fbf1c7; } + +.isDarkMode [class*="block-info"] { + background-color: #424242; + color: #fbf1c7; } + +.isDarkMode .fill-global-grey { + fill: #689d6a; } + +.isDarkMode .starbutton { + fill: #1d2021; } + +.isDarkMode .bg-global-light, .isDarkMode kbd { + background: #282828; } + +.isDarkMode .item-container, .isDarkMode .item-container-row, .isDarkMode .contactsummary-container { + background: #282828; } + +.isDarkMode .items-column-list-inner, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer { + border-color: #424242; } + .isDarkMode .items-column-list-inner .item-container, .isDarkMode .items-column-list-inner .item-container-row, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer .item-container, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer .item-container-row { + border-color: #424242; } + +.isDarkMode .item-container:not(.item-is-selected):not(.read):not(.active), +.isDarkMode .item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active), +.isDarkMode .item-container-row:not(.item-is-selected):not(.item-contact):not(.read):not(.active), .isDarkMode .squireToolbar-container { + background: #353535; } + +.isDarkMode .item-container.active, .isDarkMode .item-is-selected { + background: #232323; } + .isDarkMode .item-container.active .flex-item-fluid, .isDarkMode .item-is-selected .flex-item-fluid { + color: #689d6a; } + +.isDarkMode .item-icon { + background-color: #282828; + border: 1px solid #f9ebaf; } + +.isDarkMode .selectBoxElement-container:hover .item-icon { + background-color: #282828; + border: 1px solid #5d8f5f; } + .isDarkMode .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon { + fill: #5d8f5f; } + +.isDarkMode .selectBoxElement-container { + color: #fbf1c7; } + +.isDarkMode .selectBoxElement-container:hover .item-checkbox:checked + .item-icon { + background-color: #5d8f5f; + border-color: #5d8f5f; } + +.isDarkMode .item-checkbox + .item-icon:hover, +.isDarkMode .item-checkbox:hover + .item-icon { + background-color: #1b1b1b; } + +.isDarkMode .items-column-list, +.isDarkMode .elementList-container-row { + background-color: #282828; } + +.isDarkMode .composer-container { + background: #353535; } + +.isDarkMode .message-header { + background-color: #353535; } + +.isDarkMode .view-column-detail { + background-color: #282828; } + +.isDarkMode details:first-child { + border-color: #424242; } + +.isDarkMode .items-column-list, +.isDarkMode .message-container, +.isDarkMode .message-attachments { + border-color: #424242; } + +.isDarkMode .message-container:not(.sent):not(.draft) .message-header.message-summary::before, +.isDarkMode .message-header.is-inbound::before { + border-top: 1px solid #424242; + border-left: 1px solid #424242; + background-color: #353535; } + +.isDarkMode .message-infobox { + background-color: #282828; } + +.isDarkMode .message-content.frame.message-frame { + background: white; + color: black; } + +.isDarkMode .block-info-standard, .isDarkMode .bodyDecrypted blockquote { + border-color: #689d6a; } + +.isDarkMode .squireDropdown-item-label { + color: #fbf1c7; } + +.isDarkMode .squireToolbar-action-color { + background: transparent; } + +.isDarkMode .angular-squire-iframe body { + color: #fbf1c7; + background: #353535; } + .isDarkMode .angular-squire-iframe body a { + color: #689d6a; } + +.isDarkMode .plaintext-editor { + color: #fbf1c7; } + +.isDarkMode .pm-button, .isDarkMode .pm-button--info, .isDarkMode .pm-button--redborder { + background: #282828; + border-color: #424242; + color: #fbf1c7; } + +.isDarkMode .message-attachmentInfo { + border-color: #424242; } + +.isDarkMode .is-hover.pm-button--info, .isDarkMode .is-hover.pm-button--redborder, +.isDarkMode .pm-button--info:focus, .isDarkMode .pm-button--info:focus-within, +.isDarkMode .pm-button--info:hover, .isDarkMode .pm-button--redborder:focus, +.isDarkMode .pm-button--redborder:focus-within, .isDarkMode .pm-button--redborder:hover, +.isDarkMode .pm-button.is-hover, .isDarkMode .pm-button:focus-within, +.isDarkMode .pm-button:hover:not(.pm-button--primary) { + color: #689d6a; } + +.isDarkMode .pm-button:focus { + color: #fbf1c7; } + +.isDarkMode .is-disabled.pm-button--info, +.isDarkMode .is-disabled.pm-button--redborder, +.isDarkMode .pm-button--info[disabled], +.isDarkMode .pm-button--redborder[disabled], +.isDarkMode .pm-button.is-disabled, +.isDarkMode .pm-button[disabled] { + background: #424242; } + +.isDarkMode .is-active.pm-button--info, +.isDarkMode .is-active.pm-button--redborder, +.isDarkMode .pm-button--info:not(div):active, +.isDarkMode .pm-button--redborder:not(div):active, +.isDarkMode .pm-button.is-active, .isDarkMode .pm-button:not(div):active { + background: #424242; + color: #689d6a; } + +.isDarkMode .dropDown-content { + background: #282828; + color: #fbf1c7; } + .isDarkMode .dropDown-content button { + color: #fbf1c7; } + .isDarkMode .dropDown-content .elementsSelector-btn-action, + .isDarkMode .dropDown-content .dropDown-item:hover { + color: #fbf1c7; } + .isDarkMode .dropDown-content .dropDown-item:hover { + background: #353535 !important; } + .isDarkMode .dropDown-content .dropDown-item + .dropDown-item { + border-top: 1px solid #424242; } + .isDarkMode .dropDown-content .dropDown-item .color-global-grey { + color: #fbf1c7; } + +.isDarkMode .dropDown .dropDown-content::before, .isDarkMode .dropDown .dropDown-content::after { + border-bottom-color: #282828; } + +.isDarkMode .dropDown--right-bottom::before { + border-right-color: #282828; } + +.isDarkMode .dropDown--right-bottom .dropDown-content::before, .isDarkMode .dropDown--right-bottom .dropDown-content::after { + background: #282828; } + +.isDarkMode .dropDown--bottom-right .dropDown-content::before, .isDarkMode .dropDown--bottom-right .dropDown-content::after { + background: #282828; } + +.isDarkMode .dropDown--bottom-left::before, +.isDarkMode .dropDown--bottom-right::before, +.isDarkMode .dropDown--bottom::before { + border-bottom-color: #424242; } + +.isDarkMode .dropDown--bottom-right { + border: 1px solid #424242; } + +.isDarkMode .pm-field-icon-container[type="search"], .isDarkMode .pm-field[type="search"] { + background-color: #353535; } + +.isDarkMode .dropDown-contentInner { + background-color: #282828; } + .isDarkMode .dropDown-contentInner::before, .isDarkMode .dropDown-contentInner::after { + background-color: #282828; } + .isDarkMode .dropDown-contentInner .dropDown-item span { + color: #fbf1c7 !important; } + +.isDarkMode .searchbox-field[type="search"]:not(#global_search) { + background: #fbf1c7; + color: #282828; } + +.isDarkMode .link:active, .isDarkMode .link:focus, .isDarkMode .link:hover, +.isDarkMode a:active, .isDarkMode a:focus, .isDarkMode a:hover, +.isDarkMode .pm-button--link:hover, +.isDarkMode .composerInputMeta-label:hover { + color: #77a779; } + +.isDarkMode .pm-modal, .isDarkMode .pm-modalContentInner { + background-color: #282828; + color: #fbf1c7; } + .isDarkMode .pm-modal::before, .isDarkMode .pm-modal::after, .isDarkMode .pm-modalContentInner::before, .isDarkMode .pm-modalContentInner::after { + background-color: #282828; } + .isDarkMode .pm-modal .labelColorSelector-item-mask, .isDarkMode .pm-modalContentInner .labelColorSelector-item-mask { + border: 2px solid #4e4e4e; } + +.isDarkMode .pm-button--primaryborder, .isDarkMode .pm-button-blueborder { + border-color: #689d6a; + color: #689d6a; + background-color: #353535; + transition: background-color .2s ease-in-out; } + +.isDarkMode .is-hover.pm-button--primaryborder, .isDarkMode .pm-button--primaryborder:focus, +.isDarkMode .pm-button--primaryborder:focus-within, .isDarkMode .pm-button--primaryborder:hover, +.isDarkMode .pm-button-blueborder.is-hover, .isDarkMode .pm-button-blueborder:focus, +.isDarkMode .pm-button-blueborder:focus-within, .isDarkMode .pm-button-blueborder:hover { + border-color: #689d6a; + color: #689d6a; + background-color: #252525; } + +.isDarkMode .scrollshadow-static { + background: #282828; } + +.isDarkMode .pm-field, .isDarkMode .pm-field-icon-container, +.isDarkMode .focus.pm-field-icon-container, .isDarkMode .pm-field-icon-container:focus, +.isDarkMode .pm-field-icon-container:focus-within, .isDarkMode .pm-field.focus, +.isDarkMode .pm-field:focus, .isDarkMode .pm-field:focus-within, +.isDarkMode .composerInputMeta-overlay-fakefield, +.isDarkMode .composerInputMeta-autocomplete { + color: #fbf1c7; + background-color: #353535; } + .isDarkMode .pm-field::placeholder, .isDarkMode .pm-field-icon-container::placeholder, + .isDarkMode .focus.pm-field-icon-container::placeholder, .isDarkMode .pm-field-icon-container:focus::placeholder, + .isDarkMode .pm-field-icon-container:focus-within::placeholder, .isDarkMode .pm-field.focus::placeholder, + .isDarkMode .pm-field:focus::placeholder, .isDarkMode .pm-field:focus-within::placeholder, + .isDarkMode .composerInputMeta-overlay-fakefield::placeholder, + .isDarkMode .composerInputMeta-autocomplete::placeholder { + color: #f9ebaf; } + +.isDarkMode .composerInputMeta-autocomplete input { + color: #fbf1c7; + background-color: #353535; } + .isDarkMode .composerInputMeta-autocomplete input::placeholder { + color: #f9ebaf; } + +.isDarkMode select.pm-field, .isDarkMode select.pm-field-icon-container { + background-color: #353535; + color: #fbf1c7; } + +.isDarkMode .storageProgress-content.dropDown-content--rightbottom::before { + border-right-color: #282828; } + +.isDarkMode .sticky-title { + background: #2d2d2d; } + +.isDarkMode .bg-global-highlight { + background-color: #282828; } + +.isDarkMode .bg-white-dm { + background-color: #353535; } + +.isDarkMode .main-area, .isDarkMode .main-area--noHeader, +.isDarkMode .main-area--withToolbar, +.isDarkMode .main-area--withToolbar--noHeader, +.isDarkMode [class*="block-info-"] { + color: #fbf1c7; } + +.isDarkMode .main-area, .isDarkMode .main-area--noHeader, +.isDarkMode .main-area--withToolbar, .isDarkMode .main-area--withToolbar--noHeader { + background: #282828; } + +.isDarkMode .context-bar { + background: #282828; } + +.isDarkMode .subnav { + background: #353535; } + .isDarkMode .subnav .link, .isDarkMode .subnav a { + color: #689d6a; } + .isDarkMode .subnav .link:active, .isDarkMode .subnav .link:focus, .isDarkMode .subnav .link:hover, .isDarkMode .subnav a:active, .isDarkMode .subnav a:focus, .isDarkMode .subnav a:hover { + color: #77a779; } + +.isDarkMode .pm-toggle-label { + border-color: #424242; + background: #353535; } + .isDarkMode .pm-toggle-label::before { + background: #282828; } + .isDarkMode .pm-toggle-label .pm-toggle-label-img { + fill: #fbf1c7; } + +.isDarkMode .pm-plans-table-row--highlighted { + background-color: #282828; } + +.isDarkMode .pm-checkbox-fakecheck, +.isDarkMode .pm-radio-fakeradio { + background: transparent; } + +.isDarkMode [class*="icon-"].color-primary { + color: #689d6a; } + +.isDarkMode .color-global-grey-dm { + color: #689d6a; } |