diff options
| author | cristiano <[email protected]> | 2020-12-30 10:43:34 +0000 |
|---|---|---|
| committer | cristiano <[email protected]> | 2020-12-30 10:43:34 +0000 |
| commit | 3e9fbb0b2bd442a212712d28f68d8d13a8a3ff11 (patch) | |
| tree | c5f32bc995139c7bb55206982577842c67a36398 | |
| parent | e08c003301410a1183ca0c4b5897107fde3cf55b (diff) | |
| download | protonmail-themes-3e9fbb0b2bd442a212712d28f68d8d13a8a3ff11.tar.xz protonmail-themes-3e9fbb0b2bd442a212712d28f68d8d13a8a3ff11.zip | |
Compiled themes. 💅
| -rw-r--r-- | themes/blue_and_orange/blue_and_orange.css | 488 | ||||
| -rw-r--r-- | themes/dark_bubble_gum/dark_bubble_gum.css | 492 | ||||
| -rw-r--r-- | themes/deutera_one/deutera_one.css | 488 | ||||
| -rw-r--r-- | themes/dracula/dracula.css | 488 | ||||
| -rw-r--r-- | themes/green_lume/green_lume.css | 488 | ||||
| -rw-r--r-- | themes/gruvbox/gruvbox.css | 488 | ||||
| -rw-r--r-- | themes/inbox/inbox.css | 716 | ||||
| -rw-r--r-- | themes/monokai/monokai.css | 488 | ||||
| -rw-r--r-- | themes/ochin/ochin.css | 488 | ||||
| -rw-r--r-- | themes/vitamin_c/vitamin_c.css | 488 |
10 files changed, 4734 insertions, 378 deletions
diff --git a/themes/blue_and_orange/blue_and_orange.css b/themes/blue_and_orange/blue_and_orange.css index a8482bc..84a4430 100644 --- a/themes/blue_and_orange/blue_and_orange.css +++ b/themes/blue_and_orange/blue_and_orange.css @@ -1,6 +1,6 @@ /*! =========================================== * * BLUE AND ORANGE THEME - * Version: v4.0.0-beta.20 + * Version: v4.0.0-beta.33 * Author: Cristiano Almeida * Website: www.csalmeida.com * Twitter: @_csalmeida @@ -19,8 +19,12 @@ --color-standard-text: #fff; --boxshadow-main: none; } +html:not(.editor-squire-iframe) body { + background: #0F4C5C; + color: #e6eaf0; } + .pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue { - color: #fff; + color: #e6eaf0; background-color: #ED7D3A; border: 1px solid #ED7D3A; transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out; } @@ -60,20 +64,32 @@ .color-primary { color: #ED7D3A; } -.aside-link { - background: #0b3a46; } - -.aside-link:active .aside-linkIcon, .aside-link:focus .aside-linkIcon, .aside-link:hover .aside-linkIcon, .aside-link[aria-current="true"] .aside-linkIcon { - fill: #0b3a46; - background: none; } - .navigation__counterItem { - background-color: #e06014; + background: #e06014; color: white; } +.item-container-row:hover::before, .item-container:hover::before { + border-color: #f19c69; } + +.item-checkbox + .item-icon:hover, .item-checkbox:hover + .item-icon { + border-color: #f8caaf; } + +.item-checkbox:hover:not(:checked) + .item-icon .item-icon-fakecheck-icon { + fill: #e06014; } + .circle-chart__circle { stroke: #ED7D3A; } +#dropdown-0 .dropDown-content::after, #dropdown-0 .dropDown-content::before, #dropdown-0.dropDown:not(.dropDown--noCaret)::before, +#dropdown-0 .dropDown-content { + background: #0F4C5C; } + +.dropDown:not(.dropDown--noCaret)::before, +.dropDown::after, +.dropDown-logout-initials, +.dropDown-item-hr { + border-color: #135e72 !important; } + #global_search.searchbox-field[type="search"] { background-color: #0A353F; color: #e6eaf0; } @@ -178,7 +194,7 @@ border-color: #d62646; } .link, a, .pm-button--link { - color: #0F4C5C; + color: #e06014; transition: color .2s ease-in-out; } .link:active, .link:focus, .link:hover, @@ -224,10 +240,23 @@ a:active, a:focus, a:hover, color: #e06014; background: transparent; } +.pm-group-buttons > .pm-group-button.pm-button--primary { + border-color: #e06014; } + +.bg-pm-blue-gradient .pm-button--transparent:hover { + color: #e6eaf0; + border-color: #e6eaf0; } + .pm-toggle-checkbox:checked + .pm-toggle-label:before { background: #ED7D3A; border-color: #ED7D3A; } +.composer-title-bar { + background: #0F4C5C; } + +.color-global-light { + color: #e6eaf0; } + .angular-squire-iframe body a { color: #ED7D3A; } @@ -252,13 +281,20 @@ a:active, a:focus, a:hover, .pm-checkbox-fakecheck, .pm-radio-fakeradio { border-color: #0F4C5C; } .pm-checkbox-fakecheck [class*="icon-"], .pm-radio-fakeradio [class*="icon-"] { - fill: #0F4C5C; } + fill: #ED7D3A; } [class*="icon-"].color-primary { color: #0F4C5C; } [class*="icon-"].color-primary:hover { color: #e06014; } +.pm-field, .editor, +.editor-toolbar, +.border-bottom, +.border-top, +.message-container.is-opened > .message-header { + border-color: #082830; } + .badgeLabel, .badgeLabel-primary { border-color: #e06014; } @@ -268,17 +304,423 @@ a:active, a:focus, a:hover, .bg-pm-blue { background-color: #e06014; } -.progress-contact, .progressbar { +body { + scrollbar-color: #167088 #105365; } + +::-webkit-scrollbar { + width: 16px; } + ::-webkit-scrollbar-track { + background: #105365; } + ::-webkit-scrollbar-thumb { + background: #167088; + box-shadow: inset 0 0 0 4px #105365; + border-radius: 16px; } + +.isDarkMode .bordered, +.isDarkMode .bordered-container:not([class*="composerInputMeta-"]), +.isDarkMode .breadcrumb-container { + border-color: #167088; } + +.isDarkMode .dropDown-content::after, .isDarkMode .dropDown-content::before, +.isDarkMode .dropDown:not(.dropDown--noCaret)::before, +.isDarkMode .dropDown-content { + background: #0F4C5C; + border: #0F4C5C; } + +.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: #0b3a46; } + +.isDarkMode .dropDown-item-button.is-disabled, .isDarkMode .dropDown-item-button[disabled], +.isDarkMode .dropDown-item-link.is-disabled, .isDarkMode .dropDown-item-link[disabled] { + background-color: #0e4553; } + +.isDarkMode .squireToolbar-select-list { + background: #0F4C5C; + color: #e6eaf0; } + +.isDarkMode .squireToolbar-dropdown-divider { + background-color: #167088; } + +.isDarkMode .squireToolbar-select-item:hover { + background: #0e4553; } + +.isDarkMode #pm_composer .composer, +.isDarkMode .composerInputMeta-overlay { + background: #0F4C5C; } + +.isDarkMode #pm_composer .composer .fill { + background: #0F4C5C; } + +.isDarkMode .composer-body-container textarea { + background: #0F4C5C; } + +.isDarkMode .composer-addresses-item { + background: #0b3a46; } + +.isDarkMode .composer-addresses-autocomplete ul { + background: #0b3a46; } + +.isDarkMode .composer-addresses-autocomplete li[aria-selected="true"], +.isDarkMode .composer-addresses-autocomplete li:hover { + background: #0F4C5C; } + +.isDarkMode .autocompleteEmails-item { + background-color: #0e4553; + border-color: #0e4553; } + +.isDarkMode .autocompleteEmails-label { + border-left: 1px solid #167088; + border-right: 1px solid #167088; } + +.isDarkMode .composerOptions-container.show { + background: #0e4553; } + .isDarkMode .composerOptions-container.show .shadow-container { + background: #0F4C5C; + color: #e6eaf0; } + +.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: #0e4553; + border-color: #167088; + color: #c6cfdd; } + +.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: #e6eaf0; + background-color: #0F4C5C; + border-color: #167088; } + +.isDarkMode .pm-group-buttons > .pm-group-button.pm-button--primary { + border-color: #167088; } + +.isDarkMode .pm-button-blueborder { + border-color: #ED7D3A; color: #ED7D3A; } - .progress-contact::-moz-progress-bar, .progressbar::-moz-progress-bar { - background: #ED7D3A; } -.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: #c85612; } +.isDarkMode .pm-button-blueborder:hover { + border-color: #ef8c51; + color: #ef8c51; } -.minicalendar-day[aria-current="date"][aria-pressed="true"]::before { - background: #ED7D3A; } +.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: #105365 !important; } + +.isDarkMode .squireToolbar-separator { + background: #135e72; } + +.isDarkMode .composerTime-container, +.isDarkMode [class*="composer-field"] { + color: #e6eaf0; } + +.isDarkMode .composerInputMeta-overlay-fakefield { + border-color: #e6eaf0; } + +.isDarkMode .encryptionStatus .color-global-grey-dm:not(.color-pm-blue) svg { + color: white; } + +.isDarkMode .conversation { + border-color: #167088; } + +.isDarkMode .main-area, +.isDarkMode .main-area--noHeader, +.isDarkMode .main-area--withToolbar, +.isDarkMode .main-area--withToolbar--noHeader, +.isDarkMode [class*="block-info-"] { + color: #e6eaf0; } + +.isDarkMode [class*="block-info"] { + background-color: #167088; + color: #e6eaf0; } + +.isDarkMode .fill-global-grey { + fill: #ED7D3A; } + +.isDarkMode .starbutton { + fill: #0d0d0d; } + +.isDarkMode .bg-global-light, .isDarkMode kbd { + background: #0F4C5C; } + +.isDarkMode .item-container, .isDarkMode .item-container-row, .isDarkMode .contactsummary-container { + background: #0F4C5C; } + +.isDarkMode .items-column-list-inner, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer { + border-color: #167088; } + .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: #167088; } + +.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: #135e72; } + +.isDarkMode .item-container.active, .isDarkMode .item-is-selected { + background: #0e4553; } + .isDarkMode .item-container.active .flex-item-fluid, .isDarkMode .item-is-selected .flex-item-fluid { + color: #ED7D3A; } + +.isDarkMode .item-icon { + background-color: #0F4C5C; + border: 1px solid #d6dde6; } + +.isDarkMode .selectBoxElement-container:hover .item-icon { + background-color: #0F4C5C; + border: 1px solid #eb6e23; } + .isDarkMode .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon { + fill: #eb6e23; } + +.isDarkMode .selectBoxElement-container { + color: #e6eaf0; } + +.isDarkMode .selectBoxElement-container:hover .item-checkbox:checked + .item-icon { + background-color: #eb6e23; + border-color: #eb6e23; } + +.isDarkMode .item-checkbox + .item-icon:hover, +.isDarkMode .item-checkbox:hover + .item-icon { + background-color: #0b3a46; } + +.isDarkMode .items-column-list, +.isDarkMode .elementList-container-row { + background-color: #0F4C5C; } + +.isDarkMode .composer-container { + background: #135e72; } + +.isDarkMode .message-header { + background-color: #135e72; } + +.isDarkMode .view-column-detail { + background-color: #0F4C5C; } + +.isDarkMode details:first-child { + border-color: #167088; } + +.isDarkMode .items-column-list, +.isDarkMode .message-container, +.isDarkMode .message-attachments { + border-color: #167088; } + +.isDarkMode .message-container:not(.sent):not(.draft) .message-header.message-summary::before, +.isDarkMode .message-header.is-inbound::before { + border-top: 1px solid #167088; + border-left: 1px solid #167088; + background-color: #135e72; } + +.isDarkMode .message-infobox { + background-color: #0F4C5C; } + +.isDarkMode .message-content.frame.message-frame { + background: white; + color: black; } + +.isDarkMode .block-info-standard, .isDarkMode .bodyDecrypted blockquote { + border-color: #ED7D3A; } + +.isDarkMode .squireDropdown-item-label { + color: #e6eaf0; } + +.isDarkMode .squireToolbar-action-color { + background: transparent; } + +.isDarkMode .angular-squire-iframe body { + color: #e6eaf0; + background: #135e72; } + .isDarkMode .angular-squire-iframe body a { + color: #ED7D3A; } + +.isDarkMode .plaintext-editor { + color: #e6eaf0; } + +.isDarkMode .pm-button, .isDarkMode .pm-button--info, .isDarkMode .pm-button--redborder { + background: #0F4C5C; + border-color: #167088; + color: #e6eaf0; } + +.isDarkMode .message-attachmentInfo { + border-color: #167088; } + +.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: #ED7D3A; } + +.isDarkMode .pm-button:focus { + color: #e6eaf0; } + +.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: #167088; } + +.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: #167088; + color: #ED7D3A; } + +.isDarkMode .dropDown-content { + background: #0F4C5C; + color: #e6eaf0; } + .isDarkMode .dropDown-content button { + color: #e6eaf0; } + .isDarkMode .dropDown-content .elementsSelector-btn-action, + .isDarkMode .dropDown-content .dropDown-item:hover { + color: #e6eaf0; } + .isDarkMode .dropDown-content .dropDown-item:hover { + background: #135e72 !important; } + .isDarkMode .dropDown-content .dropDown-item + .dropDown-item { + border-top: 1px solid #167088; } + .isDarkMode .dropDown-content .dropDown-item .color-global-grey { + color: #e6eaf0; } + +.isDarkMode .dropDown .dropDown-content::before, .isDarkMode .dropDown .dropDown-content::after { + border-bottom-color: #0F4C5C; } + +.isDarkMode .dropDown--right-bottom::before { + border-right-color: #0F4C5C; } + +.isDarkMode .dropDown--right-bottom .dropDown-content::before, .isDarkMode .dropDown--right-bottom .dropDown-content::after { + background: #0F4C5C; } + +.isDarkMode .dropDown--bottom-right .dropDown-content::before, .isDarkMode .dropDown--bottom-right .dropDown-content::after { + background: #0F4C5C; } + +.isDarkMode .dropDown--bottom-left::before, +.isDarkMode .dropDown--bottom-right::before, +.isDarkMode .dropDown--bottom::before { + border-bottom-color: #167088; } + +.isDarkMode .dropDown--bottom-right { + border: 1px solid #167088; } + +.isDarkMode .pm-field-icon-container[type="search"], .isDarkMode .pm-field[type="search"] { + background-color: #135e72; } + +.isDarkMode .dropDown-contentInner { + background-color: #0F4C5C; } + .isDarkMode .dropDown-contentInner::before, .isDarkMode .dropDown-contentInner::after { + background-color: #0F4C5C; } + .isDarkMode .dropDown-contentInner .dropDown-item span { + color: #e6eaf0 !important; } + +.isDarkMode .searchbox-field[type="search"]:not(#global_search) { + background: #e6eaf0; + color: #0F4C5C; } + +.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: #ef8c51; } + +.isDarkMode .pm-modal, .isDarkMode .pm-modalContentInner { + background-color: #0F4C5C; + color: #e6eaf0; } + .isDarkMode .pm-modal::before, .isDarkMode .pm-modal::after, .isDarkMode .pm-modalContentInner::before, .isDarkMode .pm-modalContentInner::after { + background-color: #0F4C5C; } + .isDarkMode .pm-modal .labelColorSelector-item-mask, .isDarkMode .pm-modalContentInner .labelColorSelector-item-mask { + border: 2px solid #1a829e; } + +.isDarkMode .pm-button--primaryborder, .isDarkMode .pm-button-blueborder { + border-color: #ED7D3A; + color: #ED7D3A; + background-color: #135e72; + 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: #ED7D3A; + color: #ED7D3A; + background-color: #0e4858; } + +.isDarkMode .scrollshadow-static { + background: #0F4C5C; } + +.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: #e6eaf0; + background-color: #135e72; } + .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: #d6dde6; } + +.isDarkMode .composerInputMeta-autocomplete input { + color: #e6eaf0; + background-color: #135e72; } + .isDarkMode .composerInputMeta-autocomplete input::placeholder { + color: #d6dde6; } + +.isDarkMode select.pm-field, .isDarkMode select.pm-field-icon-container { + background-color: #135e72; + color: #e6eaf0; } + +.isDarkMode .storageProgress-content.dropDown-content--rightbottom::before { + border-right-color: #0F4C5C; } + +.isDarkMode .sticky-title { + background: #105365; } + +.isDarkMode .bg-global-highlight { + background-color: #0F4C5C; } + +.isDarkMode .bg-white-dm { + background-color: #135e72; } + +.isDarkMode .main-area, .isDarkMode .main-area--noHeader, +.isDarkMode .main-area--withToolbar, +.isDarkMode .main-area--withToolbar--noHeader, +.isDarkMode [class*="block-info-"] { + color: #e6eaf0; } + +.isDarkMode .main-area, .isDarkMode .main-area--noHeader, +.isDarkMode .main-area--withToolbar, .isDarkMode .main-area--withToolbar--noHeader { + background: #0F4C5C; } + +.isDarkMode .context-bar { + background: #0F4C5C; } + +.isDarkMode .subnav { + background: #135e72; } + .isDarkMode .subnav .link, .isDarkMode .subnav a { + color: #ED7D3A; } + .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: #ef8c51; } + +.isDarkMode .pm-toggle-label { + border-color: #167088; + background: #135e72; } + .isDarkMode .pm-toggle-label::before { + background: #0F4C5C; } + .isDarkMode .pm-toggle-label .pm-toggle-label-img { + fill: #e6eaf0; } + +.isDarkMode .pm-plans-table-row--highlighted { + background-color: #0F4C5C; } + +.isDarkMode .pm-checkbox-fakecheck, +.isDarkMode .pm-radio-fakeradio { + background: transparent; } + +.isDarkMode [class*="icon-"].color-primary { + color: #ED7D3A; } + +.isDarkMode .color-global-grey-dm { + color: #ED7D3A; } diff --git a/themes/dark_bubble_gum/dark_bubble_gum.css b/themes/dark_bubble_gum/dark_bubble_gum.css index cb77866..8e330d8 100644 --- a/themes/dark_bubble_gum/dark_bubble_gum.css +++ b/themes/dark_bubble_gum/dark_bubble_gum.css @@ -1,6 +1,6 @@ /*! =========================================== * * DARK BUBBLE GUM THEME - * Version: v4.0.0-beta.20 + * Version: v4.0.0-beta.33 * Author: Cristiano Almeida * Website: www.csalmeida.com * Twitter: @_csalmeida @@ -8,7 +8,7 @@ :root { --main-bg-color: #1C1C1C; --secondary-bg-color: #0f0f0f; - --bgcolor-searchbox-field: #000; + --bgcolor-searchbox-field: #131212; --bgcolor-spacebar: rgba(255, 255, 255, 0.1); --bgcolor-aside-link: rgba(0, 0, 0, 0.3); --bgcolor-toolbar: #292929; @@ -19,8 +19,12 @@ --color-standard-text: #fff; --boxshadow-main: none; } +html:not(.editor-squire-iframe) body { + background: #1C1C1C; + color: #e6eaf0; } + .pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue { - color: #fff; + color: #e6eaf0; background-color: #EF2D56; border: 1px solid #EF2D56; transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out; } @@ -60,22 +64,34 @@ .color-primary { color: #EF2D56; } -.aside-link { - background: #0f0f0f; } - -.aside-link:active .aside-linkIcon, .aside-link:focus .aside-linkIcon, .aside-link:hover .aside-linkIcon, .aside-link[aria-current="true"] .aside-linkIcon { - fill: #0f0f0f; - background: none; } - .navigation__counterItem { - background-color: #d9103b; + background: #d9103b; color: white; } +.item-container-row:hover::before, .item-container:hover::before { + border-color: #f35c7c; } + +.item-checkbox + .item-icon:hover, .item-checkbox:hover + .item-icon { + border-color: #f8a3b5; } + +.item-checkbox:hover:not(:checked) + .item-icon .item-icon-fakecheck-icon { + fill: #d9103b; } + .circle-chart__circle { stroke: #EF2D56; } +#dropdown-0 .dropDown-content::after, #dropdown-0 .dropDown-content::before, #dropdown-0.dropDown:not(.dropDown--noCaret)::before, +#dropdown-0 .dropDown-content { + background: #1C1C1C; } + +.dropDown:not(.dropDown--noCaret)::before, +.dropDown::after, +.dropDown-logout-initials, +.dropDown-item-hr { + border-color: #292929 !important; } + #global_search.searchbox-field[type="search"] { - background-color: #000; + background-color: #131212; color: #e6eaf0; } .searchbox-advanced-search-button:active, @@ -178,7 +194,7 @@ border-color: #d62646; } .link, a, .pm-button--link { - color: #1C1C1C; + color: #d9103b; transition: color .2s ease-in-out; } .link:active, .link:focus, .link:hover, @@ -224,10 +240,23 @@ a:active, a:focus, a:hover, color: #d9103b; background: transparent; } +.pm-group-buttons > .pm-group-button.pm-button--primary { + border-color: #d9103b; } + +.bg-pm-blue-gradient .pm-button--transparent:hover { + color: #e6eaf0; + border-color: #e6eaf0; } + .pm-toggle-checkbox:checked + .pm-toggle-label:before { background: #EF2D56; border-color: #EF2D56; } +.composer-title-bar { + background: #1C1C1C; } + +.color-global-light { + color: #e6eaf0; } + .angular-squire-iframe body a { color: #EF2D56; } @@ -252,13 +281,20 @@ a:active, a:focus, a:hover, .pm-checkbox-fakecheck, .pm-radio-fakeradio { border-color: #1C1C1C; } .pm-checkbox-fakecheck [class*="icon-"], .pm-radio-fakeradio [class*="icon-"] { - fill: #1C1C1C; } + fill: #EF2D56; } [class*="icon-"].color-primary { color: #1C1C1C; } [class*="icon-"].color-primary:hover { color: #d9103b; } +.pm-field, .editor, +.editor-toolbar, +.border-bottom, +.border-top, +.message-container.is-opened > .message-header { + border-color: #030303; } + .badgeLabel, .badgeLabel-primary { border-color: #d9103b; } @@ -268,17 +304,423 @@ a:active, a:focus, a:hover, .bg-pm-blue { background-color: #d9103b; } -.progress-contact, .progressbar { +body { + scrollbar-color: #363636 #212121; } + +::-webkit-scrollbar { + width: 16px; } + ::-webkit-scrollbar-track { + background: #212121; } + ::-webkit-scrollbar-thumb { + background: #363636; + box-shadow: inset 0 0 0 4px #212121; + border-radius: 16px; } + +.isDarkMode .bordered, +.isDarkMode .bordered-container:not([class*="composerInputMeta-"]), +.isDarkMode .breadcrumb-container { + border-color: #363636; } + +.isDarkMode .dropDown-content::after, .isDarkMode .dropDown-content::before, +.isDarkMode .dropDown:not(.dropDown--noCaret)::before, +.isDarkMode .dropDown-content { + background: #1C1C1C; + border: #1C1C1C; } + +.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: #0f0f0f; } + +.isDarkMode .dropDown-item-button.is-disabled, .isDarkMode .dropDown-item-button[disabled], +.isDarkMode .dropDown-item-link.is-disabled, .isDarkMode .dropDown-item-link[disabled] { + background-color: #171717; } + +.isDarkMode .squireToolbar-select-list { + background: #1C1C1C; + color: #e6eaf0; } + +.isDarkMode .squireToolbar-dropdown-divider { + background-color: #363636; } + +.isDarkMode .squireToolbar-select-item:hover { + background: #171717; } + +.isDarkMode #pm_composer .composer, +.isDarkMode .composerInputMeta-overlay { + background: #1C1C1C; } + +.isDarkMode #pm_composer .composer .fill { + background: #1C1C1C; } + +.isDarkMode .composer-body-container textarea { + background: #1C1C1C; } + +.isDarkMode .composer-addresses-item { + background: #0f0f0f; } + +.isDarkMode .composer-addresses-autocomplete ul { + background: #0f0f0f; } + +.isDarkMode .composer-addresses-autocomplete li[aria-selected="true"], +.isDarkMode .composer-addresses-autocomplete li:hover { + background: #1C1C1C; } + +.isDarkMode .autocompleteEmails-item { + background-color: #171717; + border-color: #171717; } + +.isDarkMode .autocompleteEmails-label { + border-left: 1px solid #363636; + border-right: 1px solid #363636; } + +.isDarkMode .composerOptions-container.show { + background: #171717; } + .isDarkMode .composerOptions-container.show .shadow-container { + background: #1C1C1C; + color: #e6eaf0; } + +.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: #171717; + border-color: #363636; + color: #c6cfdd; } + +.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: #e6eaf0; + background-color: #1C1C1C; + border-color: #363636; } + +.isDarkMode .pm-group-buttons > .pm-group-button.pm-button--primary { + border-color: #363636; } + +.isDarkMode .pm-button-blueborder { + border-color: #EF2D56; color: #EF2D56; } - .progress-contact::-moz-progress-bar, .progressbar::-moz-progress-bar { - background: #EF2D56; } -.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: #c10f34; } +.isDarkMode .pm-button-blueborder:hover { + border-color: #f14569; + color: #f14569; } -.minicalendar-day[aria-current="date"][aria-pressed="true"]::before { - background: #EF2D56; } +.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: #212121 !important; } + +.isDarkMode .squireToolbar-separator { + background: #292929; } + +.isDarkMode .composerTime-container, +.isDarkMode [class*="composer-field"] { + color: #e6eaf0; } + +.isDarkMode .composerInputMeta-overlay-fakefield { + border-color: #e6eaf0; } + +.isDarkMode .encryptionStatus .color-global-grey-dm:not(.color-pm-blue) svg { + color: white; } + +.isDarkMode .conversation { + border-color: #363636; } + +.isDarkMode .main-area, +.isDarkMode .main-area--noHeader, +.isDarkMode .main-area--withToolbar, +.isDarkMode .main-area--withToolbar--noHeader, +.isDarkMode [class*="block-info-"] { + color: #e6eaf0; } + +.isDarkMode [class*="block-info"] { + background-color: #363636; + color: #e6eaf0; } + +.isDarkMode .fill-global-grey { + fill: #EF2D56; } + +.isDarkMode .starbutton { + fill: #0d0d0d; } + +.isDarkMode .bg-global-light, .isDarkMode kbd { + background: #1C1C1C; } + +.isDarkMode .item-container, .isDarkMode .item-container-row, .isDarkMode .contactsummary-container { + background: #1C1C1C; } + +.isDarkMode .items-column-list-inner, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer { + border-color: #363636; } + .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: #363636; } + +.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: #292929; } + +.isDarkMode .item-container.active, .isDarkMode .item-is-selected { + background: #171717; } + .isDarkMode .item-container.active .flex-item-fluid, .isDarkMode .item-is-selected .flex-item-fluid { + color: #EF2D56; } + +.isDarkMode .item-icon { + background-color: #1C1C1C; + border: 1px solid #d6dde6; } + +.isDarkMode .selectBoxElement-container:hover .item-icon { + background-color: #1C1C1C; + border: 1px solid #ed1543; } + .isDarkMode .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon { + fill: #ed1543; } + +.isDarkMode .selectBoxElement-container { + color: #e6eaf0; } + +.isDarkMode .selectBoxElement-container:hover .item-checkbox:checked + .item-icon { + background-color: #ed1543; + border-color: #ed1543; } + +.isDarkMode .item-checkbox + .item-icon:hover, +.isDarkMode .item-checkbox:hover + .item-icon { + background-color: #0f0f0f; } + +.isDarkMode .items-column-list, +.isDarkMode .elementList-container-row { + background-color: #1C1C1C; } + +.isDarkMode .composer-container { + background: #292929; } + +.isDarkMode .message-header { + background-color: #292929; } + +.isDarkMode .view-column-detail { + background-color: #1C1C1C; } + +.isDarkMode details:first-child { + border-color: #363636; } + +.isDarkMode .items-column-list, +.isDarkMode .message-container, +.isDarkMode .message-attachments { + border-color: #363636; } + +.isDarkMode .message-container:not(.sent):not(.draft) .message-header.message-summary::before, +.isDarkMode .message-header.is-inbound::before { + border-top: 1px solid #363636; + border-left: 1px solid #363636; + background-color: #292929; } + +.isDarkMode .message-infobox { + background-color: #1C1C1C; } + +.isDarkMode .message-content.frame.message-frame { + background: white; + color: black; } + +.isDarkMode .block-info-standard, .isDarkMode .bodyDecrypted blockquote { + border-color: #EF2D56; } + +.isDarkMode .squireDropdown-item-label { + color: #e6eaf0; } + +.isDarkMode .squireToolbar-action-color { + background: transparent; } + +.isDarkMode .angular-squire-iframe body { + color: #e6eaf0; + background: #292929; } + .isDarkMode .angular-squire-iframe body a { + color: #EF2D56; } + +.isDarkMode .plaintext-editor { + color: #e6eaf0; } + +.isDarkMode .pm-button, .isDarkMode .pm-button--info, .isDarkMode .pm-button--redborder { + background: #1C1C1C; + border-color: #363636; + color: #e6eaf0; } + +.isDarkMode .message-attachmentInfo { + border-color: #363636; } + +.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: #EF2D56; } + +.isDarkMode .pm-button:focus { + color: #e6eaf0; } + +.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: #363636; } + +.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: #363636; + color: #EF2D56; } + +.isDarkMode .dropDown-content { + background: #1C1C1C; + color: #e6eaf0; } + .isDarkMode .dropDown-content button { + color: #e6eaf0; } + .isDarkMode .dropDown-content .elementsSelector-btn-action, + .isDarkMode .dropDown-content .dropDown-item:hover { + color: #e6eaf0; } + .isDarkMode .dropDown-content .dropDown-item:hover { + background: #292929 !important; } + .isDarkMode .dropDown-content .dropDown-item + .dropDown-item { + border-top: 1px solid #363636; } + .isDarkMode .dropDown-content .dropDown-item .color-global-grey { + color: #e6eaf0; } + +.isDarkMode .dropDown .dropDown-content::before, .isDarkMode .dropDown .dropDown-content::after { + border-bottom-color: #1C1C1C; } + +.isDarkMode .dropDown--right-bottom::before { + border-right-color: #1C1C1C; } + +.isDarkMode .dropDown--right-bottom .dropDown-content::before, .isDarkMode .dropDown--right-bottom .dropDown-content::after { + background: #1C1C1C; } + +.isDarkMode .dropDown--bottom-right .dropDown-content::before, .isDarkMode .dropDown--bottom-right .dropDown-content::after { + background: #1C1C1C; } + +.isDarkMode .dropDown--bottom-left::before, +.isDarkMode .dropDown--bottom-right::before, +.isDarkMode .dropDown--bottom::before { + border-bottom-color: #363636; } + +.isDarkMode .dropDown--bottom-right { + border: 1px solid #363636; } + +.isDarkMode .pm-field-icon-container[type="search"], .isDarkMode .pm-field[type="search"] { + background-color: #292929; } + +.isDarkMode .dropDown-contentInner { + background-color: #1C1C1C; } + .isDarkMode .dropDown-contentInner::before, .isDarkMode .dropDown-contentInner::after { + background-color: #1C1C1C; } + .isDarkMode .dropDown-contentInner .dropDown-item span { + color: #e6eaf0 !important; } + +.isDarkMode .searchbox-field[type="search"]:not(#global_search) { + background: #e6eaf0; + color: #1C1C1C; } + +.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: #f14569; } + +.isDarkMode .pm-modal, .isDarkMode .pm-modalContentInner { + background-color: #1C1C1C; + color: #e6eaf0; } + .isDarkMode .pm-modal::before, .isDarkMode .pm-modal::after, .isDarkMode .pm-modalContentInner::before, .isDarkMode .pm-modalContentInner::after { + background-color: #1C1C1C; } + .isDarkMode .pm-modal .labelColorSelector-item-mask, .isDarkMode .pm-modalContentInner .labelColorSelector-item-mask { + border: 2px solid #424242; } + +.isDarkMode .pm-button--primaryborder, .isDarkMode .pm-button-blueborder { + border-color: #EF2D56; + color: #EF2D56; + background-color: #292929; + 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: #EF2D56; + color: #EF2D56; + background-color: #191919; } + +.isDarkMode .scrollshadow-static { + background: #1C1C1C; } + +.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: #e6eaf0; + background-color: #292929; } + .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: #d6dde6; } + +.isDarkMode .composerInputMeta-autocomplete input { + color: #e6eaf0; + background-color: #292929; } + .isDarkMode .composerInputMeta-autocomplete input::placeholder { + color: #d6dde6; } + +.isDarkMode select.pm-field, .isDarkMode select.pm-field-icon-container { + background-color: #292929; + color: #e6eaf0; } + +.isDarkMode .storageProgress-content.dropDown-content--rightbottom::before { + border-right-color: #1C1C1C; } + +.isDarkMode .sticky-title { + background: #212121; } + +.isDarkMode .bg-global-highlight { + background-color: #1C1C1C; } + +.isDarkMode .bg-white-dm { + background-color: #292929; } + +.isDarkMode .main-area, .isDarkMode .main-area--noHeader, +.isDarkMode .main-area--withToolbar, +.isDarkMode .main-area--withToolbar--noHeader, +.isDarkMode [class*="block-info-"] { + color: #e6eaf0; } + +.isDarkMode .main-area, .isDarkMode .main-area--noHeader, +.isDarkMode .main-area--withToolbar, .isDarkMode .main-area--withToolbar--noHeader { + background: #1C1C1C; } + +.isDarkMode .context-bar { + background: #1C1C1C; } + +.isDarkMode .subnav { + background: #292929; } + .isDarkMode .subnav .link, .isDarkMode .subnav a { + color: #EF2D56; } + .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: #f14569; } + +.isDarkMode .pm-toggle-label { + border-color: #363636; + background: #292929; } + .isDarkMode .pm-toggle-label::before { + background: #1C1C1C; } + .isDarkMode .pm-toggle-label .pm-toggle-label-img { + fill: #e6eaf0; } + +.isDarkMode .pm-plans-table-row--highlighted { + background-color: #1C1C1C; } + +.isDarkMode .pm-checkbox-fakecheck, +.isDarkMode .pm-radio-fakeradio { + background: transparent; } + +.isDarkMode [class*="icon-"].color-primary { + color: #EF2D56; } + +.isDarkMode .color-global-grey-dm { + color: #EF2D56; } diff --git a/themes/deutera_one/deutera_one.css b/themes/deutera_one/deutera_one.css index 9d408a4..7e20ce5 100644 --- a/themes/deutera_one/deutera_one.css +++ b/themes/deutera_one/deutera_one.css @@ -1,6 +1,6 @@ /*! =========================================== * * DEUTERA ONE THEME - * Version: v4.0.0-beta.20 + * Version: v4.0.0-beta.33 * Author: Cristiano Almeida * Website: www.csalmeida.com * Twitter: @_csalmeida @@ -19,8 +19,12 @@ --color-standard-text: #fff; --boxshadow-main: none; } +html:not(.editor-squire-iframe) body { + background: #000076; + color: #e6eaf0; } + .pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue { - color: #fff; + color: #e6eaf0; background-color: #ffed00; border: 1px solid #ffed00; transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out; } @@ -60,20 +64,32 @@ .color-primary { color: #ffed00; } -.aside-link { - background: #00005d; } - -.aside-link:active .aside-linkIcon, .aside-link:focus .aside-linkIcon, .aside-link:hover .aside-linkIcon, .aside-link[aria-current="true"] .aside-linkIcon { - fill: #00005d; - background: none; } - .navigation__counterItem { - background-color: #ccbe00; + background: #ccbe00; color: white; } +.item-container-row:hover::before, .item-container:hover::before { + border-color: #fff133; } + +.item-checkbox + .item-icon:hover, .item-checkbox:hover + .item-icon { + border-color: #fff680; } + +.item-checkbox:hover:not(:checked) + .item-icon .item-icon-fakecheck-icon { + fill: #ccbe00; } + .circle-chart__circle { stroke: #ffed00; } +#dropdown-0 .dropDown-content::after, #dropdown-0 .dropDown-content::before, #dropdown-0.dropDown:not(.dropDown--noCaret)::before, +#dropdown-0 .dropDown-content { + background: #000076; } + +.dropDown:not(.dropDown--noCaret)::before, +.dropDown::after, +.dropDown-logout-initials, +.dropDown-item-hr { + border-color: #000090 !important; } + #global_search.searchbox-field[type="search"] { background-color: #08426b; color: #e6eaf0; } @@ -178,7 +194,7 @@ border-color: #d62646; } .link, a, .pm-button--link { - color: #000076; + color: #ccbe00; transition: color .2s ease-in-out; } .link:active, .link:focus, .link:hover, @@ -224,10 +240,23 @@ a:active, a:focus, a:hover, color: #ccbe00; background: transparent; } +.pm-group-buttons > .pm-group-button.pm-button--primary { + border-color: #ccbe00; } + +.bg-pm-blue-gradient .pm-button--transparent:hover { + color: #e6eaf0; + border-color: #e6eaf0; } + .pm-toggle-checkbox:checked + .pm-toggle-label:before { background: #ffed00; border-color: #ffed00; } +.composer-title-bar { + background: #000076; } + +.color-global-light { + color: #e6eaf0; } + .angular-squire-iframe body a { color: #ffed00; } @@ -252,13 +281,20 @@ a:active, a:focus, a:hover, .pm-checkbox-fakecheck, .pm-radio-fakeradio { border-color: #000076; } .pm-checkbox-fakecheck [class*="icon-"], .pm-radio-fakeradio [class*="icon-"] { - fill: #000076; } + fill: #ffed00; } [class*="icon-"].color-primary { color: #000076; } [class*="icon-"].color-primary:hover { color: #ccbe00; } +.pm-field, .editor, +.editor-toolbar, +.border-bottom, +.border-top, +.message-container.is-opened > .message-header { + border-color: #000043; } + .badgeLabel, .badgeLabel-primary { border-color: #ccbe00; } @@ -268,20 +304,426 @@ a:active, a:focus, a:hover, .bg-pm-blue { background-color: #ccbe00; } -.progress-contact, .progressbar { +body { + scrollbar-color: #0000a9 navy; } + +::-webkit-scrollbar { + width: 16px; } + ::-webkit-scrollbar-track { + background: navy; } + ::-webkit-scrollbar-thumb { + background: #0000a9; + box-shadow: inset 0 0 0 4px navy; + border-radius: 16px; } + +.isDarkMode .bordered, +.isDarkMode .bordered-container:not([class*="composerInputMeta-"]), +.isDarkMode .breadcrumb-container { + border-color: #0000a9; } + +.isDarkMode .dropDown-content::after, .isDarkMode .dropDown-content::before, +.isDarkMode .dropDown:not(.dropDown--noCaret)::before, +.isDarkMode .dropDown-content { + background: #000076; + border: #000076; } + +.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: #00005d; } + +.isDarkMode .dropDown-item-button.is-disabled, .isDarkMode .dropDown-item-button[disabled], +.isDarkMode .dropDown-item-link.is-disabled, .isDarkMode .dropDown-item-link[disabled] { + background-color: #00006c; } + +.isDarkMode .squireToolbar-select-list { + background: #000076; + color: #e6eaf0; } + +.isDarkMode .squireToolbar-dropdown-divider { + background-color: #0000a9; } + +.isDarkMode .squireToolbar-select-item:hover { + background: #00006c; } + +.isDarkMode #pm_composer .composer, +.isDarkMode .composerInputMeta-overlay { + background: #000076; } + +.isDarkMode #pm_composer .composer .fill { + background: #000076; } + +.isDarkMode .composer-body-container textarea { + background: #000076; } + +.isDarkMode .composer-addresses-item { + background: #00005d; } + +.isDarkMode .composer-addresses-autocomplete ul { + background: #00005d; } + +.isDarkMode .composer-addresses-autocomplete li[aria-selected="true"], +.isDarkMode .composer-addresses-autocomplete li:hover { + background: #000076; } + +.isDarkMode .autocompleteEmails-item { + background-color: #00006c; + border-color: #00006c; } + +.isDarkMode .autocompleteEmails-label { + border-left: 1px solid #0000a9; + border-right: 1px solid #0000a9; } + +.isDarkMode .composerOptions-container.show { + background: #00006c; } + .isDarkMode .composerOptions-container.show .shadow-container { + background: #000076; + color: #e6eaf0; } + +.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: #00006c; + border-color: #0000a9; + color: #c6cfdd; } + +.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: #e6eaf0; + background-color: #000076; + border-color: #0000a9; } + +.isDarkMode .pm-group-buttons > .pm-group-button.pm-button--primary { + border-color: #0000a9; } + +.isDarkMode .pm-button-blueborder { + border-color: #ffed00; color: #ffed00; } - .progress-contact::-moz-progress-bar, .progressbar::-moz-progress-bar { - background: #ffed00; } -.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: #b3a600; } +.isDarkMode .pm-button-blueborder:hover { + border-color: #ffef1a; + color: #ffef1a; } -.minicalendar-day[aria-current="date"][aria-pressed="true"]::before { - background: #ffed00; } +.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: navy !important; } + +.isDarkMode .squireToolbar-separator { + background: #000090; } + +.isDarkMode .composerTime-container, +.isDarkMode [class*="composer-field"] { + color: #e6eaf0; } + +.isDarkMode .composerInputMeta-overlay-fakefield { + border-color: #e6eaf0; } + +.isDarkMode .encryptionStatus .color-global-grey-dm:not(.color-pm-blue) svg { + color: white; } + +.isDarkMode .conversation { + border-color: #0000a9; } + +.isDarkMode .main-area, +.isDarkMode .main-area--noHeader, +.isDarkMode .main-area--withToolbar, +.isDarkMode .main-area--withToolbar--noHeader, +.isDarkMode [class*="block-info-"] { + color: #e6eaf0; } + +.isDarkMode [class*="block-info"] { + background-color: #0000a9; + color: #e6eaf0; } + +.isDarkMode .fill-global-grey { + fill: #ffed00; } + +.isDarkMode .starbutton { + fill: #0d0d0d; } + +.isDarkMode .bg-global-light, .isDarkMode kbd { + background: #000076; } + +.isDarkMode .item-container, .isDarkMode .item-container-row, .isDarkMode .contactsummary-container { + background: #000076; } + +.isDarkMode .items-column-list-inner, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer { + border-color: #0000a9; } + .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: #0000a9; } + +.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: #000090; } + +.isDarkMode .item-container.active, .isDarkMode .item-is-selected { + background: #00006c; } + .isDarkMode .item-container.active .flex-item-fluid, .isDarkMode .item-is-selected .flex-item-fluid { + color: #ffed00; } + +.isDarkMode .item-icon { + background-color: #000076; + border: 1px solid #d6dde6; } + +.isDarkMode .selectBoxElement-container:hover .item-icon { + background-color: #000076; + border: 1px solid #e6d500; } + .isDarkMode .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon { + fill: #e6d500; } + +.isDarkMode .selectBoxElement-container { + color: #e6eaf0; } + +.isDarkMode .selectBoxElement-container:hover .item-checkbox:checked + .item-icon { + background-color: #e6d500; + border-color: #e6d500; } + +.isDarkMode .item-checkbox + .item-icon:hover, +.isDarkMode .item-checkbox:hover + .item-icon { + background-color: #00005d; } + +.isDarkMode .items-column-list, +.isDarkMode .elementList-container-row { + background-color: #000076; } + +.isDarkMode .composer-container { + background: #000090; } + +.isDarkMode .message-header { + background-color: #000090; } + +.isDarkMode .view-column-detail { + background-color: #000076; } + +.isDarkMode details:first-child { + border-color: #0000a9; } + +.isDarkMode .items-column-list, +.isDarkMode .message-container, +.isDarkMode .message-attachments { + border-color: #0000a9; } + +.isDarkMode .message-container:not(.sent):not(.draft) .message-header.message-summary::before, +.isDarkMode .message-header.is-inbound::before { + border-top: 1px solid #0000a9; + border-left: 1px solid #0000a9; + background-color: #000090; } + +.isDarkMode .message-infobox { + background-color: #000076; } + +.isDarkMode .message-content.frame.message-frame { + background: white; + color: black; } + +.isDarkMode .block-info-standard, .isDarkMode .bodyDecrypted blockquote { + border-color: #ffed00; } + +.isDarkMode .squireDropdown-item-label { + color: #e6eaf0; } + +.isDarkMode .squireToolbar-action-color { + background: transparent; } + +.isDarkMode .angular-squire-iframe body { + color: #e6eaf0; + background: #000090; } + .isDarkMode .angular-squire-iframe body a { + color: #ffed00; } + +.isDarkMode .plaintext-editor { + color: #e6eaf0; } + +.isDarkMode .pm-button, .isDarkMode .pm-button--info, .isDarkMode .pm-button--redborder { + background: #000076; + border-color: #0000a9; + color: #e6eaf0; } + +.isDarkMode .message-attachmentInfo { + border-color: #0000a9; } + +.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: #ffed00; } + +.isDarkMode .pm-button:focus { + color: #e6eaf0; } + +.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: #0000a9; } + +.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: #0000a9; + color: #ffed00; } + +.isDarkMode .dropDown-content { + background: #000076; + color: #e6eaf0; } + .isDarkMode .dropDown-content button { + color: #e6eaf0; } + .isDarkMode .dropDown-content .elementsSelector-btn-action, + .isDarkMode .dropDown-content .dropDown-item:hover { + color: #e6eaf0; } + .isDarkMode .dropDown-content .dropDown-item:hover { + background: #000090 !important; } + .isDarkMode .dropDown-content .dropDown-item + .dropDown-item { + border-top: 1px solid #0000a9; } + .isDarkMode .dropDown-content .dropDown-item .color-global-grey { + color: #e6eaf0; } + +.isDarkMode .dropDown .dropDown-content::before, .isDarkMode .dropDown .dropDown-content::after { + border-bottom-color: #000076; } + +.isDarkMode .dropDown--right-bottom::before { + border-right-color: #000076; } + +.isDarkMode .dropDown--right-bottom .dropDown-content::before, .isDarkMode .dropDown--right-bottom .dropDown-content::after { + background: #000076; } + +.isDarkMode .dropDown--bottom-right .dropDown-content::before, .isDarkMode .dropDown--bottom-right .dropDown-content::after { + background: #000076; } + +.isDarkMode .dropDown--bottom-left::before, +.isDarkMode .dropDown--bottom-right::before, +.isDarkMode .dropDown--bottom::before { + border-bottom-color: #0000a9; } + +.isDarkMode .dropDown--bottom-right { + border: 1px solid #0000a9; } + +.isDarkMode .pm-field-icon-container[type="search"], .isDarkMode .pm-field[type="search"] { + background-color: #000090; } + +.isDarkMode .dropDown-contentInner { + background-color: #000076; } + .isDarkMode .dropDown-contentInner::before, .isDarkMode .dropDown-contentInner::after { + background-color: #000076; } + .isDarkMode .dropDown-contentInner .dropDown-item span { + color: #e6eaf0 !important; } + +.isDarkMode .searchbox-field[type="search"]:not(#global_search) { + background: #e6eaf0; + color: #000076; } + +.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: #ffef1a; } + +.isDarkMode .pm-modal, .isDarkMode .pm-modalContentInner { + background-color: #000076; + color: #e6eaf0; } + .isDarkMode .pm-modal::before, .isDarkMode .pm-modal::after, .isDarkMode .pm-modalContentInner::before, .isDarkMode .pm-modalContentInner::after { + background-color: #000076; } + .isDarkMode .pm-modal .labelColorSelector-item-mask, .isDarkMode .pm-modalContentInner .labelColorSelector-item-mask { + border: 2px solid #0000c3; } + +.isDarkMode .pm-button--primaryborder, .isDarkMode .pm-button-blueborder { + border-color: #ffed00; + color: #ffed00; + background-color: #000090; + 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: #ffed00; + color: #ffed00; + background-color: #000071; } + +.isDarkMode .scrollshadow-static { + background: #000076; } + +.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: #e6eaf0; + background-color: #000090; } + .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: #d6dde6; } + +.isDarkMode .composerInputMeta-autocomplete input { + color: #e6eaf0; + background-color: #000090; } + .isDarkMode .composerInputMeta-autocomplete input::placeholder { + color: #d6dde6; } + +.isDarkMode select.pm-field, .isDarkMode select.pm-field-icon-container { + background-color: #000090; + color: #e6eaf0; } + +.isDarkMode .storageProgress-content.dropDown-content--rightbottom::before { + border-right-color: #000076; } + +.isDarkMode .sticky-title { + background: navy; } + +.isDarkMode .bg-global-highlight { + background-color: #000076; } + +.isDarkMode .bg-white-dm { + background-color: #000090; } + +.isDarkMode .main-area, .isDarkMode .main-area--noHeader, +.isDarkMode .main-area--withToolbar, +.isDarkMode .main-area--withToolbar--noHeader, +.isDarkMode [class*="block-info-"] { + color: #e6eaf0; } + +.isDarkMode .main-area, .isDarkMode .main-area--noHeader, +.isDarkMode .main-area--withToolbar, .isDarkMode .main-area--withToolbar--noHeader { + background: #000076; } + +.isDarkMode .context-bar { + background: #000076; } + +.isDarkMode .subnav { + background: #000090; } + .isDarkMode .subnav .link, .isDarkMode .subnav a { + color: #ffed00; } + .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: #ffef1a; } + +.isDarkMode .pm-toggle-label { + border-color: #0000a9; + background: #000090; } + .isDarkMode .pm-toggle-label::before { + background: #000076; } + .isDarkMode .pm-toggle-label .pm-toggle-label-img { + fill: #e6eaf0; } + +.isDarkMode .pm-plans-table-row--highlighted { + background-color: #000076; } + +.isDarkMode .pm-checkbox-fakecheck, +.isDarkMode .pm-radio-fakeradio { + background: transparent; } + +.isDarkMode [class*="icon-"].color-primary { + color: #ffed00; } + +.isDarkMode .color-global-grey-dm { + color: #ffed00; } .pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue { color: #fff; diff --git a/themes/dracula/dracula.css b/themes/dracula/dracula.css index 9a39907..91b35d9 100644 --- a/themes/dracula/dracula.css +++ b/themes/dracula/dracula.css @@ -1,6 +1,6 @@ /*! =========================================== * * DRACULA Theme - * Version: v4.0.0-beta.20 + * Version: v4.0.0-beta.33 * Author: Mike Barkmin * Website: www.barkmin.eu * Twitter: @mikebarkmin @@ -19,8 +19,12 @@ --color-standard-text: #fff; --boxshadow-main: none; } +html:not(.editor-squire-iframe) body { + background: #282a36; + color: #e6eaf0; } + .pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue { - color: #fff; + color: #e6eaf0; background-color: #FF79C6; border: 1px solid #FF79C6; transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out; } @@ -60,20 +64,32 @@ .color-primary { color: #FF79C6; } -.aside-link { - background: #1d1f27; } - -.aside-link:active .aside-linkIcon, .aside-link:focus .aside-linkIcon, .aside-link:hover .aside-linkIcon, .aside-link[aria-current="true"] .aside-linkIcon { - fill: #1d1f27; - background: none; } - .navigation__counterItem { - background-color: #ff46b0; + background: #ff46b0; color: white; } +.item-container-row:hover::before, .item-container:hover::before { + border-color: #ffacdc; } + +.item-checkbox + .item-icon:hover, .item-checkbox:hover + .item-icon { + border-color: #fff9fc; } + +.item-checkbox:hover:not(:checked) + .item-icon .item-icon-fakecheck-icon { + fill: #ff46b0; } + .circle-chart__circle { stroke: #FF79C6; } +#dropdown-0 .dropDown-content::after, #dropdown-0 .dropDown-content::before, #dropdown-0.dropDown:not(.dropDown--noCaret)::before, +#dropdown-0 .dropDown-content { + background: #282a36; } + +.dropDown:not(.dropDown--noCaret)::before, +.dropDown::after, +.dropDown-logout-initials, +.dropDown-item-hr { + border-color: #333545 !important; } + #global_search.searchbox-field[type="search"] { background-color: #000; color: #e6eaf0; } @@ -178,7 +194,7 @@ border-color: #ff5555; } .link, a, .pm-button--link { - color: #282a36; + color: #ff46b0; transition: color .2s ease-in-out; } .link:active, .link:focus, .link:hover, @@ -224,10 +240,23 @@ a:active, a:focus, a:hover, color: #ff46b0; background: transparent; } +.pm-group-buttons > .pm-group-button.pm-button--primary { + border-color: #ff46b0; } + +.bg-pm-blue-gradient .pm-button--transparent:hover { + color: #e6eaf0; + border-color: #e6eaf0; } + .pm-toggle-checkbox:checked + .pm-toggle-label:before { background: #FF79C6; border-color: #FF79C6; } +.composer-title-bar { + background: #282a36; } + +.color-global-light { + color: #e6eaf0; } + .angular-squire-iframe body a { color: #FF79C6; } @@ -252,13 +281,20 @@ a:active, a:focus, a:hover, .pm-checkbox-fakecheck, .pm-radio-fakeradio { border-color: #282a36; } .pm-checkbox-fakecheck [class*="icon-"], .pm-radio-fakeradio [class*="icon-"] { - fill: #282a36; } + fill: #FF79C6; } [class*="icon-"].color-primary { color: #282a36; } [class*="icon-"].color-primary:hover { color: #ff46b0; } +.pm-field, .editor, +.editor-toolbar, +.border-bottom, +.border-top, +.message-container.is-opened > .message-header { + border-color: #121319; } + .badgeLabel, .badgeLabel-primary { border-color: #ff46b0; } @@ -268,17 +304,423 @@ a:active, a:focus, a:hover, .bg-pm-blue { background-color: #ff46b0; } -.progress-contact, .progressbar { +body { + scrollbar-color: #3e4153 #2c2f3c; } + +::-webkit-scrollbar { + width: 16px; } + ::-webkit-scrollbar-track { + background: #2c2f3c; } + ::-webkit-scrollbar-thumb { + background: #3e4153; + box-shadow: inset 0 0 0 4px #2c2f3c; + border-radius: 16px; } + +.isDarkMode .bordered, +.isDarkMode .bordered-container:not([class*="composerInputMeta-"]), +.isDarkMode .breadcrumb-container { + border-color: #3e4153; } + +.isDarkMode .dropDown-content::after, .isDarkMode .dropDown-content::before, +.isDarkMode .dropDown:not(.dropDown--noCaret)::before, +.isDarkMode .dropDown-content { + background: #282a36; + border: #282a36; } + +.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: #1d1f27; } + +.isDarkMode .dropDown-item-button.is-disabled, .isDarkMode .dropDown-item-button[disabled], +.isDarkMode .dropDown-item-link.is-disabled, .isDarkMode .dropDown-item-link[disabled] { + background-color: #242530; } + +.isDarkMode .squireToolbar-select-list { + background: #282a36; + color: #e6eaf0; } + +.isDarkMode .squireToolbar-dropdown-divider { + background-color: #3e4153; } + +.isDarkMode .squireToolbar-select-item:hover { + background: #242530; } + +.isDarkMode #pm_composer .composer, +.isDarkMode .composerInputMeta-overlay { + background: #282a36; } + +.isDarkMode #pm_composer .composer .fill { + background: #282a36; } + +.isDarkMode .composer-body-container textarea { + background: #282a36; } + +.isDarkMode .composer-addresses-item { + background: #1d1f27; } + +.isDarkMode .composer-addresses-autocomplete ul { + background: #1d1f27; } + +.isDarkMode .composer-addresses-autocomplete li[aria-selected="true"], +.isDarkMode .composer-addresses-autocomplete li:hover { + background: #282a36; } + +.isDarkMode .autocompleteEmails-item { + background-color: #242530; + border-color: #242530; } + +.isDarkMode .autocompleteEmails-label { + border-left: 1px solid #3e4153; + border-right: 1px solid #3e4153; } + +.isDarkMode .composerOptions-container.show { + background: #242530; } + .isDarkMode .composerOptions-container.show .shadow-container { + background: #282a36; + color: #e6eaf0; } + +.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: #242530; + border-color: #3e4153; + color: #c6cfdd; } + +.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: #e6eaf0; + background-color: #282a36; + border-color: #3e4153; } + +.isDarkMode .pm-group-buttons > .pm-group-button.pm-button--primary { + border-color: #3e4153; } + +.isDarkMode .pm-button-blueborder { + border-color: #FF79C6; color: #FF79C6; } - .progress-contact::-moz-progress-bar, .progressbar::-moz-progress-bar { - background: #FF79C6; } -.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: #ff2da5; } +.isDarkMode .pm-button-blueborder:hover { + border-color: #ff93d1; + color: #ff93d1; } -.minicalendar-day[aria-current="date"][aria-pressed="true"]::before { - background: #FF79C6; } +.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: #2c2f3c !important; } + +.isDarkMode .squireToolbar-separator { + background: #333545; } + +.isDarkMode .composerTime-container, +.isDarkMode [class*="composer-field"] { + color: #e6eaf0; } + +.isDarkMode .composerInputMeta-overlay-fakefield { + border-color: #e6eaf0; } + +.isDarkMode .encryptionStatus .color-global-grey-dm:not(.color-pm-blue) svg { + color: white; } + +.isDarkMode .conversation { + border-color: #3e4153; } + +.isDarkMode .main-area, +.isDarkMode .main-area--noHeader, +.isDarkMode .main-area--withToolbar, +.isDarkMode .main-area--withToolbar--noHeader, +.isDarkMode [class*="block-info-"] { + color: #e6eaf0; } + +.isDarkMode [class*="block-info"] { + background-color: #3e4153; + color: #e6eaf0; } + +.isDarkMode .fill-global-grey { + fill: #FF79C6; } + +.isDarkMode .starbutton { + fill: #50fa7b; } + +.isDarkMode .bg-global-light, .isDarkMode kbd { + background: #282a36; } + +.isDarkMode .item-container, .isDarkMode .item-container-row, .isDarkMode .contactsummary-container { + background: #282a36; } + +.isDarkMode .items-column-list-inner, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer { + border-color: #3e4153; } + .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: #3e4153; } + +.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: #333545; } + +.isDarkMode .item-container.active, .isDarkMode .item-is-selected { + background: #242530; } + .isDarkMode .item-container.active .flex-item-fluid, .isDarkMode .item-is-selected .flex-item-fluid { + color: #FF79C6; } + +.isDarkMode .item-icon { + background-color: #282a36; + border: 1px solid #d6dde6; } + +.isDarkMode .selectBoxElement-container:hover .item-icon { + background-color: #282a36; + border: 1px solid #ff60bb; } + .isDarkMode .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon { + fill: #ff60bb; } + +.isDarkMode .selectBoxElement-container { + color: #e6eaf0; } + +.isDarkMode .selectBoxElement-container:hover .item-checkbox:checked + .item-icon { + background-color: #ff60bb; + border-color: #ff60bb; } + +.isDarkMode .item-checkbox + .item-icon:hover, +.isDarkMode .item-checkbox:hover + .item-icon { + background-color: #1d1f27; } + +.isDarkMode .items-column-list, +.isDarkMode .elementList-container-row { + background-color: #282a36; } + +.isDarkMode .composer-container { + background: #333545; } + +.isDarkMode .message-header { + background-color: #333545; } + +.isDarkMode .view-column-detail { + background-color: #282a36; } + +.isDarkMode details:first-child { + border-color: #3e4153; } + +.isDarkMode .items-column-list, +.isDarkMode .message-container, +.isDarkMode .message-attachments { + border-color: #3e4153; } + +.isDarkMode .message-container:not(.sent):not(.draft) .message-header.message-summary::before, +.isDarkMode .message-header.is-inbound::before { + border-top: 1px solid #3e4153; + border-left: 1px solid #3e4153; + background-color: #333545; } + +.isDarkMode .message-infobox { + background-color: #282a36; } + +.isDarkMode .message-content.frame.message-frame { + background: white; + color: black; } + +.isDarkMode .block-info-standard, .isDarkMode .bodyDecrypted blockquote { + border-color: #FF79C6; } + +.isDarkMode .squireDropdown-item-label { + color: #e6eaf0; } + +.isDarkMode .squireToolbar-action-color { + background: transparent; } + +.isDarkMode .angular-squire-iframe body { + color: #e6eaf0; + background: #333545; } + .isDarkMode .angular-squire-iframe body a { + color: #FF79C6; } + +.isDarkMode .plaintext-editor { + color: #e6eaf0; } + +.isDarkMode .pm-button, .isDarkMode .pm-button--info, .isDarkMode .pm-button--redborder { + background: #282a36; + border-color: #3e4153; + color: #e6eaf0; } + +.isDarkMode .message-attachmentInfo { + border-color: #3e4153; } + +.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: #FF79C6; } + +.isDarkMode .pm-button:focus { + color: #e6eaf0; } + +.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: #3e4153; } + +.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: #3e4153; + color: #FF79C6; } + +.isDarkMode .dropDown-content { + background: #282a36; + color: #e6eaf0; } + .isDarkMode .dropDown-content button { + color: #e6eaf0; } + .isDarkMode .dropDown-content .elementsSelector-btn-action, + .isDarkMode .dropDown-content .dropDown-item:hover { + color: #e6eaf0; } + .isDarkMode .dropDown-content .dropDown-item:hover { + background: #333545 !important; } + .isDarkMode .dropDown-content .dropDown-item + .dropDown-item { + border-top: 1px solid #3e4153; } + .isDarkMode .dropDown-content .dropDown-item .color-global-grey { + color: #e6eaf0; } + +.isDarkMode .dropDown .dropDown-content::before, .isDarkMode .dropDown .dropDown-content::after { + border-bottom-color: #282a36; } + +.isDarkMode .dropDown--right-bottom::before { + border-right-color: #282a36; } + +.isDarkMode .dropDown--right-bottom .dropDown-content::before, .isDarkMode .dropDown--right-bottom .dropDown-content::after { + background: #282a36; } + +.isDarkMode .dropDown--bottom-right .dropDown-content::before, .isDarkMode .dropDown--bottom-right .dropDown-content::after { + background: #282a36; } + +.isDarkMode .dropDown--bottom-left::before, +.isDarkMode .dropDown--bottom-right::before, +.isDarkMode .dropDown--bottom::before { + border-bottom-color: #3e4153; } + +.isDarkMode .dropDown--bottom-right { + border: 1px solid #3e4153; } + +.isDarkMode .pm-field-icon-container[type="search"], .isDarkMode .pm-field[type="search"] { + background-color: #333545; } + +.isDarkMode .dropDown-contentInner { + background-color: #282a36; } + .isDarkMode .dropDown-contentInner::before, .isDarkMode .dropDown-contentInner::after { + background-color: #282a36; } + .isDarkMode .dropDown-contentInner .dropDown-item span { + color: #e6eaf0 !important; } + +.isDarkMode .searchbox-field[type="search"]:not(#global_search) { + background: #e6eaf0; + color: #282a36; } + +.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: #ff93d1; } + +.isDarkMode .pm-modal, .isDarkMode .pm-modalContentInner { + background-color: #282a36; + color: #e6eaf0; } + .isDarkMode .pm-modal::before, .isDarkMode .pm-modal::after, .isDarkMode .pm-modalContentInner::before, .isDarkMode .pm-modalContentInner::after { + background-color: #282a36; } + .isDarkMode .pm-modal .labelColorSelector-item-mask, .isDarkMode .pm-modalContentInner .labelColorSelector-item-mask { + border: 2px solid #494c62; } + +.isDarkMode .pm-button--primaryborder, .isDarkMode .pm-button-blueborder { + border-color: #FF79C6; + color: #FF79C6; + background-color: #333545; + 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: #FF79C6; + color: #FF79C6; + background-color: #262833; } + +.isDarkMode .scrollshadow-static { + background: #282a36; } + +.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: #e6eaf0; + background-color: #333545; } + .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: #d6dde6; } + +.isDarkMode .composerInputMeta-autocomplete input { + color: #e6eaf0; + background-color: #333545; } + .isDarkMode .composerInputMeta-autocomplete input::placeholder { + color: #d6dde6; } + +.isDarkMode select.pm-field, .isDarkMode select.pm-field-icon-container { + background-color: #333545; + color: #e6eaf0; } + +.isDarkMode .storageProgress-content.dropDown-content--rightbottom::before { + border-right-color: #282a36; } + +.isDarkMode .sticky-title { + background: #2c2f3c; } + +.isDarkMode .bg-global-highlight { + background-color: #282a36; } + +.isDarkMode .bg-white-dm { + background-color: #333545; } + +.isDarkMode .main-area, .isDarkMode .main-area--noHeader, +.isDarkMode .main-area--withToolbar, +.isDarkMode .main-area--withToolbar--noHeader, +.isDarkMode [class*="block-info-"] { + color: #e6eaf0; } + +.isDarkMode .main-area, .isDarkMode .main-area--noHeader, +.isDarkMode .main-area--withToolbar, .isDarkMode .main-area--withToolbar--noHeader { + background: #282a36; } + +.isDarkMode .context-bar { + background: #282a36; } + +.isDarkMode .subnav { + background: #333545; } + .isDarkMode .subnav .link, .isDarkMode .subnav a { + color: #FF79C6; } + .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: #ff93d1; } + +.isDarkMode .pm-toggle-label { + border-color: #3e4153; + background: #333545; } + .isDarkMode .pm-toggle-label::before { + background: #282a36; } + .isDarkMode .pm-toggle-label .pm-toggle-label-img { + fill: #e6eaf0; } + +.isDarkMode .pm-plans-table-row--highlighted { + background-color: #282a36; } + +.isDarkMode .pm-checkbox-fakecheck, +.isDarkMode .pm-radio-fakeradio { + background: transparent; } + +.isDarkMode [class*="icon-"].color-primary { + color: #FF79C6; } + +.isDarkMode .color-global-grey-dm { + color: #FF79C6; } diff --git a/themes/green_lume/green_lume.css b/themes/green_lume/green_lume.css index afa6008..137e4e6 100644 --- a/themes/green_lume/green_lume.css +++ b/themes/green_lume/green_lume.css @@ -1,6 +1,6 @@ /*! =========================================== * * GREEN LUME THEME - * Version: v4.0.0-beta.20 + * Version: v4.0.0-beta.33 * Author: Cristiano Almeida * Website: www.csalmeida.com * Tweets @_csalmeida @@ -19,8 +19,12 @@ --color-standard-text: #fff; --boxshadow-main: none; } +html:not(.editor-squire-iframe) body { + background: #1C1C1C; + color: #d6d6d6; } + .pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue { - color: #fff; + color: #d6d6d6; background-color: #2FBF71; border: 1px solid #2FBF71; transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out; } @@ -60,20 +64,32 @@ .color-primary { color: #2FBF71; } -.aside-link { - background: #0f0f0f; } - -.aside-link:active .aside-linkIcon, .aside-link:focus .aside-linkIcon, .aside-link:hover .aside-linkIcon, .aside-link[aria-current="true"] .aside-linkIcon { - fill: #0f0f0f; - background: none; } - .navigation__counterItem { - background-color: #259659; + background: #259659; color: white; } +.item-container-row:hover::before, .item-container:hover::before { + border-color: #4ed38b; } + +.item-checkbox + .item-icon:hover, .item-checkbox:hover + .item-icon { + border-color: #8be2b3; } + +.item-checkbox:hover:not(:checked) + .item-icon .item-icon-fakecheck-icon { + fill: #259659; } + .circle-chart__circle { stroke: #2FBF71; } +#dropdown-0 .dropDown-content::after, #dropdown-0 .dropDown-content::before, #dropdown-0.dropDown:not(.dropDown--noCaret)::before, +#dropdown-0 .dropDown-content { + background: #1C1C1C; } + +.dropDown:not(.dropDown--noCaret)::before, +.dropDown::after, +.dropDown-logout-initials, +.dropDown-item-hr { + border-color: #292929 !important; } + #global_search.searchbox-field[type="search"] { background-color: #000; color: #d6d6d6; } @@ -178,7 +194,7 @@ border-color: #d62646; } .link, a, .pm-button--link { - color: #1C1C1C; + color: #259659; transition: color .2s ease-in-out; } .link:active, .link:focus, .link:hover, @@ -224,10 +240,23 @@ a:active, a:focus, a:hover, color: #259659; background: transparent; } +.pm-group-buttons > .pm-group-button.pm-button--primary { + border-color: #259659; } + +.bg-pm-blue-gradient .pm-button--transparent:hover { + color: #d6d6d6; + border-color: #d6d6d6; } + .pm-toggle-checkbox:checked + .pm-toggle-label:before { background: #2FBF71; border-color: #2FBF71; } +.composer-title-bar { + background: #1C1C1C; } + +.color-global-light { + color: #d6d6d6; } + .angular-squire-iframe body a { color: #2FBF71; } @@ -252,13 +281,20 @@ a:active, a:focus, a:hover, .pm-checkbox-fakecheck, .pm-radio-fakeradio { border-color: #1C1C1C; } .pm-checkbox-fakecheck [class*="icon-"], .pm-radio-fakeradio [class*="icon-"] { - fill: #1C1C1C; } + fill: #2FBF71; } [class*="icon-"].color-primary { color: #1C1C1C; } [class*="icon-"].color-primary:hover { color: #259659; } +.pm-field, .editor, +.editor-toolbar, +.border-bottom, +.border-top, +.message-container.is-opened > .message-header { + border-color: #030303; } + .badgeLabel, .badgeLabel-primary { border-color: #259659; } @@ -268,17 +304,423 @@ a:active, a:focus, a:hover, .bg-pm-blue { background-color: #259659; } -.progress-contact, .progressbar { +body { + scrollbar-color: #363636 #212121; } + +::-webkit-scrollbar { + width: 16px; } + ::-webkit-scrollbar-track { + background: #212121; } + ::-webkit-scrollbar-thumb { + background: #363636; + box-shadow: inset 0 0 0 4px #212121; + border-radius: 16px; } + +.isDarkMode .bordered, +.isDarkMode .bordered-container:not([class*="composerInputMeta-"]), +.isDarkMode .breadcrumb-container { + border-color: #363636; } + +.isDarkMode .dropDown-content::after, .isDarkMode .dropDown-content::before, +.isDarkMode .dropDown:not(.dropDown--noCaret)::before, +.isDarkMode .dropDown-content { + background: #1C1C1C; + border: #1C1C1C; } + +.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: #0f0f0f; } + +.isDarkMode .dropDown-item-button.is-disabled, .isDarkMode .dropDown-item-button[disabled], +.isDarkMode .dropDown-item-link.is-disabled, .isDarkMode .dropDown-item-link[disabled] { + background-color: #171717; } + +.isDarkMode .squireToolbar-select-list { + background: #1C1C1C; + color: #d6d6d6; } + +.isDarkMode .squireToolbar-dropdown-divider { + background-color: #363636; } + +.isDarkMode .squireToolbar-select-item:hover { + background: #171717; } + +.isDarkMode #pm_composer .composer, +.isDarkMode .composerInputMeta-overlay { + background: #1C1C1C; } + +.isDarkMode #pm_composer .composer .fill { + background: #1C1C1C; } + +.isDarkMode .composer-body-container textarea { + background: #1C1C1C; } + +.isDarkMode .composer-addresses-item { + background: #0f0f0f; } + +.isDarkMode .composer-addresses-autocomplete ul { + background: #0f0f0f; } + +.isDarkMode .composer-addresses-autocomplete li[aria-selected="true"], +.isDarkMode .composer-addresses-autocomplete li:hover { + background: #1C1C1C; } + +.isDarkMode .autocompleteEmails-item { + background-color: #171717; + border-color: #171717; } + +.isDarkMode .autocompleteEmails-label { + border-left: 1px solid #363636; + border-right: 1px solid #363636; } + +.isDarkMode .composerOptions-container.show { + background: #171717; } + .isDarkMode .composerOptions-container.show .shadow-container { + background: #1C1C1C; + color: #d6d6d6; } + +.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: #171717; + border-color: #363636; + color: #bdbdbd; } + +.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: #d6d6d6; + background-color: #1C1C1C; + border-color: #363636; } + +.isDarkMode .pm-group-buttons > .pm-group-button.pm-button--primary { + border-color: #363636; } + +.isDarkMode .pm-button-blueborder { + border-color: #2FBF71; color: #2FBF71; } - .progress-contact::-moz-progress-bar, .progressbar::-moz-progress-bar { - background: #2FBF71; } -.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: #20824d; } +.isDarkMode .pm-button-blueborder:hover { + border-color: #39ce7e; + color: #39ce7e; } -.minicalendar-day[aria-current="date"][aria-pressed="true"]::before { - background: #2FBF71; } +.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: #212121 !important; } + +.isDarkMode .squireToolbar-separator { + background: #292929; } + +.isDarkMode .composerTime-container, +.isDarkMode [class*="composer-field"] { + color: #d6d6d6; } + +.isDarkMode .composerInputMeta-overlay-fakefield { + border-color: #d6d6d6; } + +.isDarkMode .encryptionStatus .color-global-grey-dm:not(.color-pm-blue) svg { + color: white; } + +.isDarkMode .conversation { + border-color: #363636; } + +.isDarkMode .main-area, +.isDarkMode .main-area--noHeader, +.isDarkMode .main-area--withToolbar, +.isDarkMode .main-area--withToolbar--noHeader, +.isDarkMode [class*="block-info-"] { + color: #d6d6d6; } + +.isDarkMode [class*="block-info"] { + background-color: #363636; + color: #d6d6d6; } + +.isDarkMode .fill-global-grey { + fill: #2FBF71; } + +.isDarkMode .starbutton { + fill: #eac819; } + +.isDarkMode .bg-global-light, .isDarkMode kbd { + background: #1C1C1C; } + +.isDarkMode .item-container, .isDarkMode .item-container-row, .isDarkMode .contactsummary-container { + background: #1C1C1C; } + +.isDarkMode .items-column-list-inner, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer { + border-color: #363636; } + .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: #363636; } + +.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: #292929; } + +.isDarkMode .item-container.active, .isDarkMode .item-is-selected { + background: #171717; } + .isDarkMode .item-container.active .flex-item-fluid, .isDarkMode .item-is-selected .flex-item-fluid { + color: #2FBF71; } + +.isDarkMode .item-icon { + background-color: #1C1C1C; + border: 1px solid #c9c9c9; } + +.isDarkMode .selectBoxElement-container:hover .item-icon { + background-color: #1C1C1C; + border: 1px solid #2aab65; } + .isDarkMode .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon { + fill: #2aab65; } + +.isDarkMode .selectBoxElement-container { + color: #d6d6d6; } + +.isDarkMode .selectBoxElement-container:hover .item-checkbox:checked + .item-icon { + background-color: #2aab65; + border-color: #2aab65; } + +.isDarkMode .item-checkbox + .item-icon:hover, +.isDarkMode .item-checkbox:hover + .item-icon { + background-color: #0f0f0f; } + +.isDarkMode .items-column-list, +.isDarkMode .elementList-container-row { + background-color: #1C1C1C; } + +.isDarkMode .composer-container { + background: #292929; } + +.isDarkMode .message-header { + background-color: #292929; } + +.isDarkMode .view-column-detail { + background-color: #1C1C1C; } + +.isDarkMode details:first-child { + border-color: #363636; } + +.isDarkMode .items-column-list, +.isDarkMode .message-container, +.isDarkMode .message-attachments { + border-color: #363636; } + +.isDarkMode .message-container:not(.sent):not(.draft) .message-header.message-summary::before, +.isDarkMode .message-header.is-inbound::before { + border-top: 1px solid #363636; + border-left: 1px solid #363636; + background-color: #292929; } + +.isDarkMode .message-infobox { + background-color: #1C1C1C; } + +.isDarkMode .message-content.frame.message-frame { + background: white; + color: black; } + +.isDarkMode .block-info-standard, .isDarkMode .bodyDecrypted blockquote { + border-color: #2FBF71; } + +.isDarkMode .squireDropdown-item-label { + color: #d6d6d6; } + +.isDarkMode .squireToolbar-action-color { + background: transparent; } + +.isDarkMode .angular-squire-iframe body { + color: #d6d6d6; + background: #292929; } + .isDarkMode .angular-squire-iframe body a { + color: #2FBF71; } + +.isDarkMode .plaintext-editor { + color: #d6d6d6; } + +.isDarkMode .pm-button, .isDarkMode .pm-button--info, .isDarkMode .pm-button--redborder { + background: #1C1C1C; + border-color: #363636; + color: #d6d6d6; } + +.isDarkMode .message-attachmentInfo { + border-color: #363636; } + +.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: #2FBF71; } + +.isDarkMode .pm-button:focus { + color: #d6d6d6; } + +.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: #363636; } + +.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: #363636; + color: #2FBF71; } + +.isDarkMode .dropDown-content { + background: #1C1C1C; + color: #d6d6d6; } + .isDarkMode .dropDown-content button { + color: #d6d6d6; } + .isDarkMode .dropDown-content .elementsSelector-btn-action, + .isDarkMode .dropDown-content .dropDown-item:hover { + color: #d6d6d6; } + .isDarkMode .dropDown-content .dropDown-item:hover { + background: #292929 !important; } + .isDarkMode .dropDown-content .dropDown-item + .dropDown-item { + border-top: 1px solid #363636; } + .isDarkMode .dropDown-content .dropDown-item .color-global-grey { + color: #d6d6d6; } + +.isDarkMode .dropDown .dropDown-content::before, .isDarkMode .dropDown .dropDown-content::after { + border-bottom-color: #1C1C1C; } + +.isDarkMode .dropDown--right-bottom::before { + border-right-color: #1C1C1C; } + +.isDarkMode .dropDown--right-bottom .dropDown-content::before, .isDarkMode .dropDown--right-bottom .dropDown-content::after { + background: #1C1C1C; } + +.isDarkMode .dropDown--bottom-right .dropDown-content::before, .isDarkMode .dropDown--bottom-right .dropDown-content::after { + background: #1C1C1C; } + +.isDarkMode .dropDown--bottom-left::before, +.isDarkMode .dropDown--bottom-right::before, +.isDarkMode .dropDown--bottom::before { + border-bottom-color: #363636; } + +.isDarkMode .dropDown--bottom-right { + border: 1px solid #363636; } + +.isDarkMode .pm-field-icon-container[type="search"], .isDarkMode .pm-field[type="search"] { + background-color: #292929; } + +.isDarkMode .dropDown-contentInner { + background-color: #1C1C1C; } + .isDarkMode .dropDown-contentInner::before, .isDarkMode .dropDown-contentInner::after { + background-color: #1C1C1C; } + .isDarkMode .dropDown-contentInner .dropDown-item span { + color: #d6d6d6 !important; } + +.isDarkMode .searchbox-field[type="search"]:not(#global_search) { + background: #d6d6d6; + color: #1C1C1C; } + +.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: #39ce7e; } + +.isDarkMode .pm-modal, .isDarkMode .pm-modalContentInner { + background-color: #1C1C1C; + color: #d6d6d6; } + .isDarkMode .pm-modal::before, .isDarkMode .pm-modal::after, .isDarkMode .pm-modalContentInner::before, .isDarkMode .pm-modalContentInner::after { + background-color: #1C1C1C; } + .isDarkMode .pm-modal .labelColorSelector-item-mask, .isDarkMode .pm-modalContentInner .labelColorSelector-item-mask { + border: 2px solid #424242; } + +.isDarkMode .pm-button--primaryborder, .isDarkMode .pm-button-blueborder { + border-color: #2FBF71; + color: #2FBF71; + background-color: #292929; + 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: #2FBF71; + color: #2FBF71; + background-color: #191919; } + +.isDarkMode .scrollshadow-static { + background: #1C1C1C; } + +.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: #d6d6d6; + background-color: #292929; } + .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: #c9c9c9; } + +.isDarkMode .composerInputMeta-autocomplete input { + color: #d6d6d6; + background-color: #292929; } + .isDarkMode .composerInputMeta-autocomplete input::placeholder { + color: #c9c9c9; } + +.isDarkMode select.pm-field, .isDarkMode select.pm-field-icon-container { + background-color: #292929; + color: #d6d6d6; } + +.isDarkMode .storageProgress-content.dropDown-content--rightbottom::before { + border-right-color: #1C1C1C; } + +.isDarkMode .sticky-title { + background: #212121; } + +.isDarkMode .bg-global-highlight { + background-color: #1C1C1C; } + +.isDarkMode .bg-white-dm { + background-color: #292929; } + +.isDarkMode .main-area, .isDarkMode .main-area--noHeader, +.isDarkMode .main-area--withToolbar, +.isDarkMode .main-area--withToolbar--noHeader, +.isDarkMode [class*="block-info-"] { + color: #d6d6d6; } + +.isDarkMode .main-area, .isDarkMode .main-area--noHeader, +.isDarkMode .main-area--withToolbar, .isDarkMode .main-area--withToolbar--noHeader { + background: #1C1C1C; } + +.isDarkMode .context-bar { + background: #1C1C1C; } + +.isDarkMode .subnav { + background: #292929; } + .isDarkMode .subnav .link, .isDarkMode .subnav a { + color: #2FBF71; } + .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: #39ce7e; } + +.isDarkMode .pm-toggle-label { + border-color: #363636; + background: #292929; } + .isDarkMode .pm-toggle-label::before { + background: #1C1C1C; } + .isDarkMode .pm-toggle-label .pm-toggle-label-img { + fill: #d6d6d6; } + +.isDarkMode .pm-plans-table-row--highlighted { + background-color: #1C1C1C; } + +.isDarkMode .pm-checkbox-fakecheck, +.isDarkMode .pm-radio-fakeradio { + background: transparent; } + +.isDarkMode [class*="icon-"].color-primary { + color: #2FBF71; } + +.isDarkMode .color-global-grey-dm { + color: #2FBF71; } 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; } diff --git a/themes/inbox/inbox.css b/themes/inbox/inbox.css index 612b936..8b04d32 100644 --- a/themes/inbox/inbox.css +++ b/themes/inbox/inbox.css @@ -1,172 +1,188 @@ /*! =========================================== * * INBOX - * Version: v4.0.0-beta.20 + * Version: v4.0.0-beta.33 * Author: Cristiano Almeida * Website: https://www.csalmeida.com * Twitter: @_csalmeida * =========================================== */ :root { - --main-bg-color: #F2F2F2; - --secondary-bg-color: #e5e5e5; + --main-bg-color: #296cd8; + --secondary-bg-color: #2461c4; --bgcolor-searchbox-field: #7297C4; --bgcolor-spacebar: rgba(255, 255, 255, 0.1); --bgcolor-aside-link: rgba(0, 0, 0, 0.3); - --bgcolor-toolbar: white; + --bgcolor-toolbar: #3f7bdc; --fillcolor-logo: #f6f7fa; --fillcolor-icons: #fff; - --color-nav-link: #616161; - --color-nav-active: #4285F4; + --color-nav-link: #F2F2F2; + --color-nav-active: #D23F31; --color-standard-text: #fff; --boxshadow-main: none; } +html:not(.editor-squire-iframe) body { + background: #296cd8; + color: #F2F2F2; } + .pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue { - color: #fff; - background-color: #4285F4; - border: 1px solid #4285F4; + color: #F2F2F2; + background-color: #D23F31; + border: 1px solid #D23F31; transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out; } .is-hover.pm-button--error, .is-hover.pm-button--primary, .is-hover.pm-button--warning, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover { - color: #616161; + color: #F2F2F2; box-shadow: 0 0 0.35714em 0 rgba(0, 0, 0, 0.2); - background: #2a75f3; - border: 1px solid #2a75f3; } + background: #c0372a; + border: 1px solid #c0372a; } .pm-button--primaryborder-dark, .pm-button-blueborder-dark { - background: #F2F2F2; - border-color: #4285F4; - color: #4285F4; } + background: #296cd8; + border-color: #D23F31; + color: #D23F31; } .is-active.pm-button--primaryborder-dark, .is-hover.pm-button--primaryborder-dark, .pm-button--primaryborder-dark:focus, .pm-button--primaryborder-dark:focus-within, .pm-button--primaryborder-dark:hover, .pm-button--primaryborder-dark:not(div):active, .pm-button-blueborder-dark.is-active, .pm-button-blueborder-dark.is-hover, .pm-button-blueborder-dark:focus, .pm-button-blueborder-dark:focus-within, .pm-button-blueborder-dark:hover, .pm-button-blueborder-dark:not(div):active { - background: #F2F2F2; - border-color: #5a95f5; - color: #5a95f5; } + background: #296cd8; + border-color: #d75346; + color: #d75346; } .pm-button--primaryborder, .pm-button-blueborder { - border-color: #2a75f3; - color: #2a75f3; } + border-color: #c0372a; + color: #c0372a; } .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: #2a75f3; - color: #2a75f3; } + border-color: #c0372a; + color: #c0372a; } .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: white; - border-color: #5a95f5; - color: #1266f1; } + background-color: #f7dbd8; + border-color: #d75346; + color: #ab3125; } .bg-primary { - background-color: white; } + background-color: #3f7bdc; } .color-primary { - color: #4285F4; } - -.aside-link { - background: #e5e5e5; } - -.aside-link:active .aside-linkIcon, .aside-link:focus .aside-linkIcon, .aside-link:hover .aside-linkIcon, .aside-link[aria-current="true"] .aside-linkIcon { - fill: #e5e5e5; - background: none; } + color: #D23F31; } .navigation__counterItem { - background-color: #1266f1; + background: #ab3125; color: white; } +.item-container-row:hover::before, .item-container:hover::before { + border-color: #db665b; } + +.item-checkbox + .item-icon:hover, .item-checkbox:hover + .item-icon { + border-color: #e9a19a; } + +.item-checkbox:hover:not(:checked) + .item-icon .item-icon-fakecheck-icon { + fill: #ab3125; } + .circle-chart__circle { - stroke: #4285F4; } + stroke: #D23F31; } + +#dropdown-0 .dropDown-content::after, #dropdown-0 .dropDown-content::before, #dropdown-0.dropDown:not(.dropDown--noCaret)::before, +#dropdown-0 .dropDown-content { + background: #296cd8; } + +.dropDown:not(.dropDown--noCaret)::before, +.dropDown::after, +.dropDown-logout-initials, +.dropDown-item-hr { + border-color: #3f7bdc !important; } #global_search.searchbox-field[type="search"] { background-color: #7297C4; - color: #fff; } + color: #F2F2F2; } .searchbox-advanced-search-button:active, .searchbox-advanced-search-button:focus, .searchbox-advanced-search-button:hover { - background-color: #F2F2F2; } + background-color: #296cd8; } .topnav-link, .topnav-link > .topnav-icon { - color: #616161; + color: #F2F2F2; transition: color .2s ease-in-out; } .topnav-link:active, .topnav-link:focus, .topnav-link:hover, .topnav-link[aria-current="true"] { - color: #4285F4; } + color: #D23F31; } .topnav-link:active > .topnav-icon, .topnav-link:focus > .topnav-icon, .topnav-link:hover > .topnav-icon, .topnav-link[aria-current=true] > .topnav-icon { - color: #4285F4; } + color: #D23F31; } .protonmail .text-purple { - color: #F2F2F2 !important; } + color: #296cd8 !important; } .protonmail .text-purple:hover { - color: #1266f1 !important; } + color: #ab3125 !important; } .dropDown-item-button:focus, .dropDown-item-button:hover, .dropDown-item-link:focus, .dropDown-item-link:hover { - color: #4285F4; } + color: #D23F31; } #pm_composer .composer .composerHeader-container, .composerInputMeta-overlay .composerHeader-container { - background: white; } + background: #3f7bdc; } #pm_composer .composer .fill { background: #fff; } .conversation.marked::before { - background: #4285F4; } + background: #D23F31; } .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) { background: #fff; } .item-container.selected, .item-container-row.selected, .item-container.active, .item-is-selected { - background: rgba(66, 133, 244, 0.1); } + background: rgba(210, 63, 49, 0.1); } .selectBoxElement-container:hover .item-icon { background-color: transparent; - border: 1px solid #2a75f3; } + border: 1px solid #c0372a; } .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon { - fill: #2a75f3; } + fill: #c0372a; } .selectBoxElement-container:hover .item-checkbox:checked + .item-icon { - background-color: #2a75f3; - border-color: #2a75f3; } + background-color: #c0372a; + border-color: #c0372a; } .item-checkbox:checked + .item-icon { - background-color: #4285F4; - border-color: #4285F4; } + background-color: #D23F31; + border-color: #D23F31; } .item-checkbox + .item-icon:hover { - background-color: #2a75f3; - border-color: #2a75f3; } + background-color: #c0372a; + border-color: #c0372a; } .item-checkbox + .item-icon:hover .item-icon-fakecheck-icon { - fill: #616161; } + fill: #F2F2F2; } .item-checkbox:checked + .item-icon:hover .item-icon-fakecheck-icon { - fill: #616161; } + fill: #F2F2F2; } .starbutton { - fill: #4285F4 !important; + fill: #D23F31 !important; opacity: 0.7; } .starbutton:focus, .starbutton:hover { - fill: #4285F4; } + fill: #D23F31; } .autocompleteEmailsItem-icon svg.encryptionIcon { - fill: #2a75f3; } + fill: #c0372a; } .encryptionStatus .color-pm-blue svg { - color: #2a75f3; - fill: #2a75f3; } + color: #c0372a; + fill: #c0372a; } .encryptionStatus .color-global-grey-dm svg { color: black; } .color-pm-blue { - color: #4285F4; } + color: #D23F31; } .pm-radio:checked + .pm-radio-fakeradio::before { - background: #4285F4; } + background: #D23F31; } .block-info-standard { border-color: #1b68c6; } @@ -178,192 +194,554 @@ border-color: #d62646; } .link, a, .pm-button--link { - color: #F2F2F2; + color: #ab3125; transition: color .2s ease-in-out; } .link:active, .link:focus, .link:hover, a:active, a:focus, a:hover, .pm-button--link:hover { - color: #1266f1; } + color: #ab3125; } .pm-button--primary { - background-color: #4285F4; - border-color: #4285F4; } + background-color: #D23F31; + border-color: #D23F31; } .pm-button--link, .pm-button.pm-button--link { - color: #4285F4; } + color: #D23F31; } .pm-button--error, .pm-button--error.pm-button--info, .pm-button--error.pm-button--redborder, .pm-button--primary, .pm-button--primary.pm-button--info, .pm-button--primary.pm-button--redborder, .pm-button--warning, .pm-button--warning.pm-button--info, .pm-button--warning.pm-button--redborder, .pm-button-blue, .pm-button-blue.pm-button--info, .pm-button-blue.pm-button--redborder, .pm-button.pm-button--error, .pm-button.pm-button--primary, .pm-button.pm-button--warning, .pm-button.pm-button-blue { - background-color: #4285F4; - border-color: #4285F4; } + background-color: #D23F31; + border-color: #D23F31; } .is-hover.pm-button--error, .is-hover.pm-button--error.pm-button--info, .is-hover.pm-button--error.pm-button--redborder, .is-hover.pm-button--primary, .is-hover.pm-button--primary.pm-button--info, .is-hover.pm-button--primary.pm-button--redborder, .is-hover.pm-button--warning, .is-hover.pm-button--warning.pm-button--info, .is-hover.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info:focus, .pm-button--error.pm-button--info:focus-within, .pm-button--error.pm-button--info:hover, .pm-button--error.pm-button--redborder:focus, .pm-button--error.pm-button--redborder:focus-within, .pm-button--error.pm-button--redborder:hover, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary.pm-button--info:focus, .pm-button--primary.pm-button--info:focus-within, .pm-button--primary.pm-button--info:hover, .pm-button--primary.pm-button--redborder:focus, .pm-button--primary.pm-button--redborder:focus-within, .pm-button--primary.pm-button--redborder:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning.pm-button--info:focus, .pm-button--warning.pm-button--info:focus-within, .pm-button--warning.pm-button--info:hover, .pm-button--warning.pm-button--redborder:focus, .pm-button--warning.pm-button--redborder:focus-within, .pm-button--warning.pm-button--redborder:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue.is-hover.pm-button--info, .pm-button-blue.is-hover.pm-button--redborder, .pm-button-blue.pm-button--info:focus, .pm-button-blue.pm-button--info:focus-within, .pm-button-blue.pm-button--info:hover, .pm-button-blue.pm-button--redborder:focus, .pm-button-blue.pm-button--redborder:focus-within, .pm-button-blue.pm-button--redborder:hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover, .pm-button.is-hover.pm-button--error, .pm-button.is-hover.pm-button--primary, .pm-button.is-hover.pm-button--warning, .pm-button.pm-button--error:focus, .pm-button.pm-button--error:focus-within, .pm-button.pm-button--error:hover, .pm-button.pm-button--primary:focus, .pm-button.pm-button--primary:focus-within, .pm-button.pm-button--primary:hover, .pm-button.pm-button--warning:focus, .pm-button.pm-button--warning:focus-within, .pm-button.pm-button--warning:hover, .pm-button.pm-button-blue.is-hover, .pm-button.pm-button-blue:focus, .pm-button.pm-button-blue:focus-within, .pm-button.pm-button-blue:hover { - background: #2a75f3; - border: 1px solid #2a75f3; } + background: #c0372a; + border: 1px solid #c0372a; } .is-active.pm-button--error, .is-active.pm-button--error.pm-button--info, .is-active.pm-button--error.pm-button--redborder, .is-active.pm-button--primary, .is-active.pm-button--primary.pm-button--info, .is-active.pm-button--primary.pm-button--redborder, .is-active.pm-button--warning, .is-active.pm-button--warning.pm-button--info, .is-active.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info:not(div):active, .pm-button--error.pm-button--redborder:not(div):active, .pm-button--error:not(div):active, .pm-button--primary.pm-button--info:not(div):active, .pm-button--primary.pm-button--redborder:not(div):active, .pm-button--primary:not(div):active, .pm-button--warning.pm-button--info:not(div):active, .pm-button--warning.pm-button--redborder:not(div):active, .pm-button--warning:not(div):active, .pm-button-blue.is-active, .pm-button-blue.is-active.pm-button--info, .pm-button-blue.is-active.pm-button--redborder, .pm-button-blue.pm-button--info:not(div):active, .pm-button-blue.pm-button--redborder:not(div):active, .pm-button-blue:not(div):active, .pm-button.is-active.pm-button--error, .pm-button.is-active.pm-button--primary, .pm-button.is-active.pm-button--warning, .pm-button.pm-button--error:not(div):active, .pm-button.pm-button--primary:not(div):active, .pm-button.pm-button--warning:not(div):active, .pm-button.pm-button-blue.is-active, .pm-button.pm-button-blue:not(div):active { - background: #1266f1; - border-color: #1266f1; } + background: #ab3125; + border-color: #ab3125; } .pm-button-blueborder { box-shadow: none; - border-color: #F2F2F2; - color: #F2F2F2; + border-color: #296cd8; + color: #296cd8; transition: color .2s ease-in-out, border-color .2s ease-in-out; } .pm-button-blueborder:hover { box-shadow: none; - border-color: #1266f1; - color: #1266f1; } + border-color: #ab3125; + color: #ab3125; } .is-active.pm-button--primaryborder, .pm-button--primaryborder:not(div):active, .pm-button-blueborder.is-active, .pm-button-blueborder:not(div):active { - border-color: #1266f1; - color: #1266f1; + border-color: #ab3125; + color: #ab3125; background: transparent; } +.pm-group-buttons > .pm-group-button.pm-button--primary { + border-color: #ab3125; } + +.bg-pm-blue-gradient .pm-button--transparent:hover { + color: #F2F2F2; + border-color: #F2F2F2; } + .pm-toggle-checkbox:checked + .pm-toggle-label:before { - background: #4285F4; - border-color: #4285F4; } + background: #D23F31; + border-color: #D23F31; } + +.composer-title-bar { + background: #296cd8; } + +.color-global-light { + color: #F2F2F2; } .angular-squire-iframe body a { - color: #4285F4; } + color: #D23F31; } .fill-pm-blue, .message-attachmentIcon .file-outer-icon.is-embedded { - fill: #4285F4; } + fill: #D23F31; } .pm-table--highlight[data-plan-number="1"] tr th:nth-child(2) { - border-color: #4285F4; - color: #4285F4; } + border-color: #D23F31; + color: #D23F31; } .pm-table--highlight[data-plan-number="1"] tr th:nth-child(2)::before { - background-color: #4285F4; } + background-color: #D23F31; } .pm-table--highlight[data-plan-number="1"] tr td:nth-child(2), .pm-table--highlight[data-plan-number="1"] tr th:nth-child(2), .pm-table--highlight[data-plan-number="1"] tr:last-child td:nth-child(2) { - border-color: #4285F4; } + border-color: #D23F31; } .pm-simple-table-row-th .fill-primary { - fill: #4285F4; } + fill: #D23F31; } .pm-checkbox-fakecheck, .pm-radio-fakeradio { - border-color: #F2F2F2; } + border-color: #296cd8; } .pm-checkbox-fakecheck [class*="icon-"], .pm-radio-fakeradio [class*="icon-"] { - fill: #F2F2F2; } + fill: #D23F31; } [class*="icon-"].color-primary { - color: #F2F2F2; } + color: #296cd8; } [class*="icon-"].color-primary:hover { - color: #1266f1; } + color: #ab3125; } + +.pm-field, .editor, +.editor-toolbar, +.border-bottom, +.border-top, +.message-container.is-opened > .message-header { + border-color: #2056ae; } .badgeLabel, .badgeLabel-primary { - border-color: #1266f1; } + border-color: #ab3125; } .badgeLabel, .badgeLabel-blue, .badgeLabel-primary, .bg-pm-blue { - background-color: #1266f1; } + background-color: #ab3125; } + +body { + scrollbar-color: #548ae0 #3272da; } + +::-webkit-scrollbar { + width: 16px; } + ::-webkit-scrollbar-track { + background: #3272da; } + ::-webkit-scrollbar-thumb { + background: #548ae0; + box-shadow: inset 0 0 0 4px #3272da; + border-radius: 16px; } + +.isDarkMode .bordered, +.isDarkMode .bordered-container:not([class*="composerInputMeta-"]), +.isDarkMode .breadcrumb-container { + border-color: #548ae0; } + +.isDarkMode .dropDown-content::after, .isDarkMode .dropDown-content::before, +.isDarkMode .dropDown:not(.dropDown--noCaret)::before, +.isDarkMode .dropDown-content { + background: #296cd8; + border: #296cd8; } + +.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: #2461c4; } + +.isDarkMode .dropDown-item-button.is-disabled, .isDarkMode .dropDown-item-button[disabled], +.isDarkMode .dropDown-item-link.is-disabled, .isDarkMode .dropDown-item-link[disabled] { + background-color: #2667d1; } + +.isDarkMode .squireToolbar-select-list { + background: #296cd8; + color: #F2F2F2; } -.progress-contact, .progressbar { - color: #4285F4; } - .progress-contact::-moz-progress-bar, .progressbar::-moz-progress-bar { - background: #4285F4; } +.isDarkMode .squireToolbar-dropdown-divider { + background-color: #548ae0; } -.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: #0d5bdd; } +.isDarkMode .squireToolbar-select-item:hover { + background: #2667d1; } -.minicalendar-day[aria-current="date"][aria-pressed="true"]::before { - background: #4285F4; } +.isDarkMode #pm_composer .composer, +.isDarkMode .composerInputMeta-overlay { + background: #296cd8; } -.pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue { - color: #FFF; - background-color: #D23F31; - border: 1px solid #D23F31; } +.isDarkMode #pm_composer .composer .fill { + background: #296cd8; } -.is-hover.pm-button--error, .is-hover.pm-button--primary, .is-hover.pm-button--warning, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover { - color: #FFF; - box-shadow: 0 0 0.35714em 0 rgba(0, 0, 0, 0.2); - background: #ab3125; - border: 1px solid #ab3125; } +.isDarkMode .composer-body-container textarea { + background: #296cd8; } -.header, .logo-container { - background-color: #4285F4; } +.isDarkMode .composer-addresses-item { + background: #2461c4; } -.toolbar { - background-color: #1266f1; } +.isDarkMode .composer-addresses-autocomplete ul { + background: #2461c4; } -.aside { - background-color: #f2f2f2; - box-shadow: 1px 0px 3px rgba(0, 0, 0, 0.3); } - .aside .navigation__icon, .aside .navigation__link:focus .navigation__icon, .aside .navigation__link:hover .navigation__icon, .aside .fill-global-light { - fill: #fff; } +.isDarkMode .composer-addresses-autocomplete li[aria-selected="true"], +.isDarkMode .composer-addresses-autocomplete li:hover { + background: #296cd8; } -.aside-link, .aside-link:active, .aside-link:focus, .aside-link[aria-current="true"] { - background: #0a47ac; } +.isDarkMode .autocompleteEmails-item { + background-color: #2667d1; + border-color: #2667d1; } -.aside-link:hover { - background: #D23F31; } +.isDarkMode .autocompleteEmails-label { + border-left: 1px solid #548ae0; + border-right: 1px solid #548ae0; } -.sidebarApp-item [aria-current="page"].navigation__link { - background: #fafafa; } +.isDarkMode .composerOptions-container.show { + background: #2667d1; } + .isDarkMode .composerOptions-container.show .shadow-container { + background: #296cd8; + color: #F2F2F2; } -.content-wrapper { - height: calc(100vh - 9.5rem); - max-height: calc(100vh - 9.5rem); - margin-top: 1.5rem; } +.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: #2667d1; + border-color: #548ae0; + color: #d9d9d9; } -.navigation__icon, -.navigation__link:focus .navigation__icon, .navigation__link:hover .navigation__icon, -.fill-global-light { - fill: #4285F4; } +.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: #F2F2F2; + background-color: #296cd8; + border-color: #548ae0; } -.navigationUser-button, -.topnav-list, -.topnav-link, -.topnav-link:active, .topnav-link:focus, -.topnav-link:hover, -.topnav-link[aria-current="true"] { - color: #fff; } +.isDarkMode .pm-group-buttons > .pm-group-button.pm-button--primary { + border-color: #548ae0; } -.topnav-link:active > .topnav-icon, .topnav-link:focus > .topnav-icon, .topnav-link:hover > .topnav-icon, .topnav-link[aria-current="true"] > .topnav-icon { - fill: #fff; } +.isDarkMode .pm-button-blueborder { + border-color: #D23F31; + color: #D23F31; } -.dropDown-logout-button { - color: #fff; } +.isDarkMode .pm-button-blueborder:hover { + border-color: #d75346; + color: #d75346; } -.dropDown-logout-initials { - border-color: #1266f1; } +.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: #3272da !important; } -.conversation.marked::before { - background: #D23F31; } +.isDarkMode .squireToolbar-separator { + background: #3f7bdc; } + +.isDarkMode .composerTime-container, +.isDarkMode [class*="composer-field"] { + color: #F2F2F2; } + +.isDarkMode .composerInputMeta-overlay-fakefield { + border-color: #F2F2F2; } + +.isDarkMode .encryptionStatus .color-global-grey-dm:not(.color-pm-blue) svg { + color: white; } + +.isDarkMode .conversation { + border-color: #548ae0; } + +.isDarkMode .main-area, +.isDarkMode .main-area--noHeader, +.isDarkMode .main-area--withToolbar, +.isDarkMode .main-area--withToolbar--noHeader, +.isDarkMode [class*="block-info-"] { + color: #F2F2F2; } + +.isDarkMode [class*="block-info"] { + background-color: #548ae0; + color: #F2F2F2; } + +.isDarkMode .fill-global-grey { + fill: #D23F31; } -.conversation.item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active) { +.isDarkMode .starbutton { + fill: #0d0d0d; } + +.isDarkMode .bg-global-light, .isDarkMode kbd { + background: #296cd8; } + +.isDarkMode .item-container, .isDarkMode .item-container-row, .isDarkMode .contactsummary-container { + background: #296cd8; } + +.isDarkMode .items-column-list-inner, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer { + border-color: #548ae0; } + .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: #548ae0; } + +.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: #3f7bdc; } + +.isDarkMode .item-container.active, .isDarkMode .item-is-selected { + background: #2667d1; } + .isDarkMode .item-container.active .flex-item-fluid, .isDarkMode .item-is-selected .flex-item-fluid { + color: #D23F31; } + +.isDarkMode .item-icon { + background-color: #296cd8; + border: 1px solid #e5e5e5; } + +.isDarkMode .selectBoxElement-container:hover .item-icon { + background-color: #296cd8; + border: 1px solid #c0372a; } + .isDarkMode .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon { + fill: #c0372a; } + +.isDarkMode .selectBoxElement-container { + color: #F2F2F2; } + +.isDarkMode .selectBoxElement-container:hover .item-checkbox:checked + .item-icon { + background-color: #c0372a; + border-color: #c0372a; } + +.isDarkMode .item-checkbox + .item-icon:hover, +.isDarkMode .item-checkbox:hover + .item-icon { + background-color: #2461c4; } + +.isDarkMode .items-column-list, +.isDarkMode .elementList-container-row { + background-color: #296cd8; } + +.isDarkMode .composer-container { + background: #3f7bdc; } + +.isDarkMode .message-header { + background-color: #3f7bdc; } + +.isDarkMode .view-column-detail { + background-color: #296cd8; } + +.isDarkMode details:first-child { + border-color: #548ae0; } + +.isDarkMode .items-column-list, +.isDarkMode .message-container, +.isDarkMode .message-attachments { + border-color: #548ae0; } + +.isDarkMode .message-container:not(.sent):not(.draft) .message-header.message-summary::before, +.isDarkMode .message-header.is-inbound::before { + border-top: 1px solid #548ae0; + border-left: 1px solid #548ae0; + background-color: #3f7bdc; } + +.isDarkMode .message-infobox { + background-color: #296cd8; } + +.isDarkMode .message-content.frame.message-frame { + background: white; + color: black; } + +.isDarkMode .block-info-standard, .isDarkMode .bodyDecrypted blockquote { + border-color: #D23F31; } + +.isDarkMode .squireDropdown-item-label { + color: #F2F2F2; } + +.isDarkMode .squireToolbar-action-color { + background: transparent; } + +.isDarkMode .angular-squire-iframe body { + color: #F2F2F2; + background: #3f7bdc; } + .isDarkMode .angular-squire-iframe body a { + color: #D23F31; } + +.isDarkMode .plaintext-editor { + color: #F2F2F2; } + +.isDarkMode .pm-button, .isDarkMode .pm-button--info, .isDarkMode .pm-button--redborder { + background: #296cd8; + border-color: #548ae0; + color: #F2F2F2; } + +.isDarkMode .message-attachmentInfo { + border-color: #548ae0; } + +.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: #D23F31; } + +.isDarkMode .pm-button:focus { + color: #F2F2F2; } + +.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: #548ae0; } + +.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: #548ae0; + color: #D23F31; } + +.isDarkMode .dropDown-content { + background: #296cd8; + color: #F2F2F2; } + .isDarkMode .dropDown-content button { + color: #F2F2F2; } + .isDarkMode .dropDown-content .elementsSelector-btn-action, + .isDarkMode .dropDown-content .dropDown-item:hover { + color: #F2F2F2; } + .isDarkMode .dropDown-content .dropDown-item:hover { + background: #3f7bdc !important; } + .isDarkMode .dropDown-content .dropDown-item + .dropDown-item { + border-top: 1px solid #548ae0; } + .isDarkMode .dropDown-content .dropDown-item .color-global-grey { + color: #F2F2F2; } + +.isDarkMode .dropDown .dropDown-content::before, .isDarkMode .dropDown .dropDown-content::after { + border-bottom-color: #296cd8; } + +.isDarkMode .dropDown--right-bottom::before { + border-right-color: #296cd8; } + +.isDarkMode .dropDown--right-bottom .dropDown-content::before, .isDarkMode .dropDown--right-bottom .dropDown-content::after { + background: #296cd8; } + +.isDarkMode .dropDown--bottom-right .dropDown-content::before, .isDarkMode .dropDown--bottom-right .dropDown-content::after { + background: #296cd8; } + +.isDarkMode .dropDown--bottom-left::before, +.isDarkMode .dropDown--bottom-right::before, +.isDarkMode .dropDown--bottom::before { + border-bottom-color: #548ae0; } + +.isDarkMode .dropDown--bottom-right { + border: 1px solid #548ae0; } + +.isDarkMode .pm-field-icon-container[type="search"], .isDarkMode .pm-field[type="search"] { + background-color: #3f7bdc; } + +.isDarkMode .dropDown-contentInner { + background-color: #296cd8; } + .isDarkMode .dropDown-contentInner::before, .isDarkMode .dropDown-contentInner::after { + background-color: #296cd8; } + .isDarkMode .dropDown-contentInner .dropDown-item span { + color: #F2F2F2 !important; } + +.isDarkMode .searchbox-field[type="search"]:not(#global_search) { background: #F2F2F2; - border-left: 1px solid #616161; } + color: #296cd8; } -.item-container, .item-container-row { - background: #fff; } +.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: #d75346; } -.link, a, .pm-button--link { - color: #4285F4; } +.isDarkMode .pm-modal, .isDarkMode .pm-modalContentInner { + background-color: #296cd8; + color: #F2F2F2; } + .isDarkMode .pm-modal::before, .isDarkMode .pm-modal::after, .isDarkMode .pm-modalContentInner::before, .isDarkMode .pm-modalContentInner::after { + background-color: #296cd8; } + .isDarkMode .pm-modal .labelColorSelector-item-mask, .isDarkMode .pm-modalContentInner .labelColorSelector-item-mask { + border: 2px solid #6a98e4; } + +.isDarkMode .pm-button--primaryborder, .isDarkMode .pm-button-blueborder { + border-color: #D23F31; + color: #D23F31; + background-color: #3f7bdc; + 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: #D23F31; + color: #D23F31; + background-color: #276ad5; } + +.isDarkMode .scrollshadow-static { + background: #296cd8; } + +.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: #F2F2F2; + background-color: #3f7bdc; } + .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: #e5e5e5; } + +.isDarkMode .composerInputMeta-autocomplete input { + color: #F2F2F2; + background-color: #3f7bdc; } + .isDarkMode .composerInputMeta-autocomplete input::placeholder { + color: #e5e5e5; } + +.isDarkMode select.pm-field, .isDarkMode select.pm-field-icon-container { + background-color: #3f7bdc; + color: #F2F2F2; } + +.isDarkMode .storageProgress-content.dropDown-content--rightbottom::before { + border-right-color: #296cd8; } -.link:active, .link:focus, .link:hover, a:active, a:focus, a:hover, .pm-button--link:hover { +.isDarkMode .sticky-title { + background: #3272da; } + +.isDarkMode .bg-global-highlight { + background-color: #296cd8; } + +.isDarkMode .bg-white-dm { + background-color: #3f7bdc; } + +.isDarkMode .main-area, .isDarkMode .main-area--noHeader, +.isDarkMode .main-area--withToolbar, +.isDarkMode .main-area--withToolbar--noHeader, +.isDarkMode [class*="block-info-"] { + color: #F2F2F2; } + +.isDarkMode .main-area, .isDarkMode .main-area--noHeader, +.isDarkMode .main-area--withToolbar, .isDarkMode .main-area--withToolbar--noHeader { + background: #296cd8; } + +.isDarkMode .context-bar { + background: #296cd8; } + +.isDarkMode .subnav { + background: #3f7bdc; } + .isDarkMode .subnav .link, .isDarkMode .subnav a { + color: #D23F31; } + .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: #d75346; } + +.isDarkMode .pm-toggle-label { + border-color: #548ae0; + background: #3f7bdc; } + .isDarkMode .pm-toggle-label::before { + background: #296cd8; } + .isDarkMode .pm-toggle-label .pm-toggle-label-img { + fill: #F2F2F2; } + +.isDarkMode .pm-plans-table-row--highlighted { + background-color: #296cd8; } + +.isDarkMode .pm-checkbox-fakecheck, +.isDarkMode .pm-radio-fakeradio { + background: transparent; } + +.isDarkMode [class*="icon-"].color-primary { + color: #D23F31; } + +.isDarkMode .color-global-grey-dm { color: #D23F31; } -#pm_composer .composer .composerHeader-container { - background-color: #4285F4; } +[aria-current="page"].navigation__link, [aria-current="page"].navigation__link .navigation__icon, [aria-current="page"].navigation__link:hover .navigation__icon:not(.navigation__icon--expand) { + color: #F2F2F2; } -.storageProgress-dropdown .circle-chart__info .circle-chart__percent { - fill: #4285F4; } +.toolbar { + background: #2461c4; } + +.isDarkMode .pm-button, .isDarkMode .pm-button--info, .isDarkMode .pm-button--redborder { + background: #cc3a2d; } + +.isDarkMode .pm-button--primaryborder { + background: transparent; + border-color: #F2F2F2; + color: #F2F2F2; } + +.isDarkMode .pm-button--primaryborder:hover { + border-color: #F2F2F2; + color: #D23F31; } -.storageProgress-dropdown span { - color: #4285F4; - opacity: 1; } +.isDarkMode .composer-body-container textarea { + background: #1c4c99; } diff --git a/themes/monokai/monokai.css b/themes/monokai/monokai.css index 307a39b..6327fc8 100644 --- a/themes/monokai/monokai.css +++ b/themes/monokai/monokai.css @@ -1,6 +1,6 @@ /*! =========================================== * * MONOKAI THEME - * Version: v4.0.0-beta.20 + * Version: v4.0.0-beta.33 * Author: tripscripts * Website: N/A * Twitter: N/A @@ -19,8 +19,12 @@ --color-standard-text: #fff; --boxshadow-main: none; } +html:not(.editor-squire-iframe) body { + background: #1D1E1A; + color: #e6eaf0; } + .pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue { - color: #fff; + color: #e6eaf0; background-color: #89C62A; border: 1px solid #89C62A; transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out; } @@ -60,20 +64,32 @@ .color-primary { color: #89C62A; } -.aside-link { - background: #10100e; } - -.aside-link:active .aside-linkIcon, .aside-link:focus .aside-linkIcon, .aside-link:hover .aside-linkIcon, .aside-link[aria-current="true"] .aside-linkIcon { - fill: #10100e; - background: none; } - .navigation__counterItem { - background-color: #6c9c21; + background: #6c9c21; color: white; } +.item-container-row:hover::before, .item-container:hover::before { + border-color: #a1d94a; } + +.item-checkbox + .item-icon:hover, .item-checkbox:hover + .item-icon { + border-color: #c2e689; } + +.item-checkbox:hover:not(:checked) + .item-icon .item-icon-fakecheck-icon { + fill: #6c9c21; } + .circle-chart__circle { stroke: #89C62A; } +#dropdown-0 .dropDown-content::after, #dropdown-0 .dropDown-content::before, #dropdown-0.dropDown:not(.dropDown--noCaret)::before, +#dropdown-0 .dropDown-content { + background: #1D1E1A; } + +.dropDown:not(.dropDown--noCaret)::before, +.dropDown::after, +.dropDown-logout-initials, +.dropDown-item-hr { + border-color: #2a2c26 !important; } + #global_search.searchbox-field[type="search"] { background-color: #5B26D6; color: #e6eaf0; } @@ -178,7 +194,7 @@ border-color: #d62646; } .link, a, .pm-button--link { - color: #1D1E1A; + color: #6c9c21; transition: color .2s ease-in-out; } .link:active, .link:focus, .link:hover, @@ -224,10 +240,23 @@ a:active, a:focus, a:hover, color: #6c9c21; background: transparent; } +.pm-group-buttons > .pm-group-button.pm-button--primary { + border-color: #6c9c21; } + +.bg-pm-blue-gradient .pm-button--transparent:hover { + color: #e6eaf0; + border-color: #e6eaf0; } + .pm-toggle-checkbox:checked + .pm-toggle-label:before { background: #89C62A; border-color: #89C62A; } +.composer-title-bar { + background: #1D1E1A; } + +.color-global-light { + color: #e6eaf0; } + .angular-squire-iframe body a { color: #89C62A; } @@ -252,13 +281,20 @@ a:active, a:focus, a:hover, .pm-checkbox-fakecheck, .pm-radio-fakeradio { border-color: #1D1E1A; } .pm-checkbox-fakecheck [class*="icon-"], .pm-radio-fakeradio [class*="icon-"] { - fill: #1D1E1A; } + fill: #89C62A; } [class*="icon-"].color-primary { color: #1D1E1A; } [class*="icon-"].color-primary:hover { color: #6c9c21; } +.pm-field, .editor, +.editor-toolbar, +.border-bottom, +.border-top, +.message-container.is-opened > .message-header { + border-color: #030302; } + .badgeLabel, .badgeLabel-primary { border-color: #6c9c21; } @@ -268,17 +304,423 @@ a:active, a:focus, a:hover, .bg-pm-blue { background-color: #6c9c21; } -.progress-contact, .progressbar { +body { + scrollbar-color: #373932 #22231f; } + +::-webkit-scrollbar { + width: 16px; } + ::-webkit-scrollbar-track { + background: #22231f; } + ::-webkit-scrollbar-thumb { + background: #373932; + box-shadow: inset 0 0 0 4px #22231f; + border-radius: 16px; } + +.isDarkMode .bordered, +.isDarkMode .bordered-container:not([class*="composerInputMeta-"]), +.isDarkMode .breadcrumb-container { + border-color: #373932; } + +.isDarkMode .dropDown-content::after, .isDarkMode .dropDown-content::before, +.isDarkMode .dropDown:not(.dropDown--noCaret)::before, +.isDarkMode .dropDown-content { + background: #1D1E1A; + border: #1D1E1A; } + +.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: #10100e; } + +.isDarkMode .dropDown-item-button.is-disabled, .isDarkMode .dropDown-item-button[disabled], +.isDarkMode .dropDown-item-link.is-disabled, .isDarkMode .dropDown-item-link[disabled] { + background-color: #181915; } + +.isDarkMode .squireToolbar-select-list { + background: #1D1E1A; + color: #e6eaf0; } + +.isDarkMode .squireToolbar-dropdown-divider { + background-color: #373932; } + +.isDarkMode .squireToolbar-select-item:hover { + background: #181915; } + +.isDarkMode #pm_composer .composer, +.isDarkMode .composerInputMeta-overlay { + background: #1D1E1A; } + +.isDarkMode #pm_composer .composer .fill { + background: #1D1E1A; } + +.isDarkMode .composer-body-container textarea { + background: #1D1E1A; } + +.isDarkMode .composer-addresses-item { + background: #10100e; } + +.isDarkMode .composer-addresses-autocomplete ul { + background: #10100e; } + +.isDarkMode .composer-addresses-autocomplete li[aria-selected="true"], +.isDarkMode .composer-addresses-autocomplete li:hover { + background: #1D1E1A; } + +.isDarkMode .autocompleteEmails-item { + background-color: #181915; + border-color: #181915; } + +.isDarkMode .autocompleteEmails-label { + border-left: 1px solid #373932; + border-right: 1px solid #373932; } + +.isDarkMode .composerOptions-container.show { + background: #181915; } + .isDarkMode .composerOptions-container.show .shadow-container { + background: #1D1E1A; + color: #e6eaf0; } + +.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: #181915; + border-color: #373932; + color: #c6cfdd; } + +.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: #e6eaf0; + background-color: #1D1E1A; + border-color: #373932; } + +.isDarkMode .pm-group-buttons > .pm-group-button.pm-button--primary { + border-color: #373932; } + +.isDarkMode .pm-button-blueborder { + border-color: #89C62A; color: #89C62A; } - .progress-contact::-moz-progress-bar, .progressbar::-moz-progress-bar { - background: #89C62A; } -.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: #5d871d; } +.isDarkMode .pm-button-blueborder:hover { + border-color: #96d435; + color: #96d435; } -.minicalendar-day[aria-current="date"][aria-pressed="true"]::before { - background: #89C62A; } +.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: #22231f !important; } + +.isDarkMode .squireToolbar-separator { + background: #2a2c26; } + +.isDarkMode .composerTime-container, +.isDarkMode [class*="composer-field"] { + color: #e6eaf0; } + +.isDarkMode .composerInputMeta-overlay-fakefield { + border-color: #e6eaf0; } + +.isDarkMode .encryptionStatus .color-global-grey-dm:not(.color-pm-blue) svg { + color: white; } + +.isDarkMode .conversation { + border-color: #373932; } + +.isDarkMode .main-area, +.isDarkMode .main-area--noHeader, +.isDarkMode .main-area--withToolbar, +.isDarkMode .main-area--withToolbar--noHeader, +.isDarkMode [class*="block-info-"] { + color: #e6eaf0; } + +.isDarkMode [class*="block-info"] { + background-color: #373932; + color: #e6eaf0; } + +.isDarkMode .fill-global-grey { + fill: #89C62A; } + +.isDarkMode .starbutton { + fill: #0d0d0d; } + +.isDarkMode .bg-global-light, .isDarkMode kbd { + background: #1D1E1A; } + +.isDarkMode .item-container, .isDarkMode .item-container-row, .isDarkMode .contactsummary-container { + background: #1D1E1A; } + +.isDarkMode .items-column-list-inner, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer { + border-color: #373932; } + .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: #373932; } + +.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: #2a2c26; } + +.isDarkMode .item-container.active, .isDarkMode .item-is-selected { + background: #181915; } + .isDarkMode .item-container.active .flex-item-fluid, .isDarkMode .item-is-selected .flex-item-fluid { + color: #89C62A; } + +.isDarkMode .item-icon { + background-color: #1D1E1A; + border: 1px solid #d6dde6; } + +.isDarkMode .selectBoxElement-container:hover .item-icon { + background-color: #1D1E1A; + border: 1px solid #7ab126; } + .isDarkMode .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon { + fill: #7ab126; } + +.isDarkMode .selectBoxElement-container { + color: #e6eaf0; } + +.isDarkMode .selectBoxElement-container:hover .item-checkbox:checked + .item-icon { + background-color: #7ab126; + border-color: #7ab126; } + +.isDarkMode .item-checkbox + .item-icon:hover, +.isDarkMode .item-checkbox:hover + .item-icon { + background-color: #10100e; } + +.isDarkMode .items-column-list, +.isDarkMode .elementList-container-row { + background-color: #1D1E1A; } + +.isDarkMode .composer-container { + background: #2a2c26; } + +.isDarkMode .message-header { + background-color: #2a2c26; } + +.isDarkMode .view-column-detail { + background-color: #1D1E1A; } + +.isDarkMode details:first-child { + border-color: #373932; } + +.isDarkMode .items-column-list, +.isDarkMode .message-container, +.isDarkMode .message-attachments { + border-color: #373932; } + +.isDarkMode .message-container:not(.sent):not(.draft) .message-header.message-summary::before, +.isDarkMode .message-header.is-inbound::before { + border-top: 1px solid #373932; + border-left: 1px solid #373932; + background-color: #2a2c26; } + +.isDarkMode .message-infobox { + background-color: #1D1E1A; } + +.isDarkMode .message-content.frame.message-frame { + background: white; + color: black; } + +.isDarkMode .block-info-standard, .isDarkMode .bodyDecrypted blockquote { + border-color: #89C62A; } + +.isDarkMode .squireDropdown-item-label { + color: #e6eaf0; } + +.isDarkMode .squireToolbar-action-color { + background: transparent; } + +.isDarkMode .angular-squire-iframe body { + color: #e6eaf0; + background: #2a2c26; } + .isDarkMode .angular-squire-iframe body a { + color: #89C62A; } + +.isDarkMode .plaintext-editor { + color: #e6eaf0; } + +.isDarkMode .pm-button, .isDarkMode .pm-button--info, .isDarkMode .pm-button--redborder { + background: #1D1E1A; + border-color: #373932; + color: #e6eaf0; } + +.isDarkMode .message-attachmentInfo { + border-color: #373932; } + +.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: #89C62A; } + +.isDarkMode .pm-button:focus { + color: #e6eaf0; } + +.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: #373932; } + +.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: #373932; + color: #89C62A; } + +.isDarkMode .dropDown-content { + background: #1D1E1A; + color: #e6eaf0; } + .isDarkMode .dropDown-content button { + color: #e6eaf0; } + .isDarkMode .dropDown-content .elementsSelector-btn-action, + .isDarkMode .dropDown-content .dropDown-item:hover { + color: #e6eaf0; } + .isDarkMode .dropDown-content .dropDown-item:hover { + background: #2a2c26 !important; } + .isDarkMode .dropDown-content .dropDown-item + .dropDown-item { + border-top: 1px solid #373932; } + .isDarkMode .dropDown-content .dropDown-item .color-global-grey { + color: #e6eaf0; } + +.isDarkMode .dropDown .dropDown-content::before, .isDarkMode .dropDown .dropDown-content::after { + border-bottom-color: #1D1E1A; } + +.isDarkMode .dropDown--right-bottom::before { + border-right-color: #1D1E1A; } + +.isDarkMode .dropDown--right-bottom .dropDown-content::before, .isDarkMode .dropDown--right-bottom .dropDown-content::after { + background: #1D1E1A; } + +.isDarkMode .dropDown--bottom-right .dropDown-content::before, .isDarkMode .dropDown--bottom-right .dropDown-content::after { + background: #1D1E1A; } + +.isDarkMode .dropDown--bottom-left::before, +.isDarkMode .dropDown--bottom-right::before, +.isDarkMode .dropDown--bottom::before { + border-bottom-color: #373932; } + +.isDarkMode .dropDown--bottom-right { + border: 1px solid #373932; } + +.isDarkMode .pm-field-icon-container[type="search"], .isDarkMode .pm-field[type="search"] { + background-color: #2a2c26; } + +.isDarkMode .dropDown-contentInner { + background-color: #1D1E1A; } + .isDarkMode .dropDown-contentInner::before, .isDarkMode .dropDown-contentInner::after { + background-color: #1D1E1A; } + .isDarkMode .dropDown-contentInner .dropDown-item span { + color: #e6eaf0 !important; } + +.isDarkMode .searchbox-field[type="search"]:not(#global_search) { + background: #e6eaf0; + color: #1D1E1A; } + +.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: #96d435; } + +.isDarkMode .pm-modal, .isDarkMode .pm-modalContentInner { + background-color: #1D1E1A; + color: #e6eaf0; } + .isDarkMode .pm-modal::before, .isDarkMode .pm-modal::after, .isDarkMode .pm-modalContentInner::before, .isDarkMode .pm-modalContentInner::after { + background-color: #1D1E1A; } + .isDarkMode .pm-modal .labelColorSelector-item-mask, .isDarkMode .pm-modalContentInner .labelColorSelector-item-mask { + border: 2px solid #45473e; } + +.isDarkMode .pm-button--primaryborder, .isDarkMode .pm-button-blueborder { + border-color: #89C62A; + color: #89C62A; + background-color: #2a2c26; + 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: #89C62A; + color: #89C62A; + background-color: #1a1b18; } + +.isDarkMode .scrollshadow-static { + background: #1D1E1A; } + +.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: #e6eaf0; + background-color: #2a2c26; } + .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: #d6dde6; } + +.isDarkMode .composerInputMeta-autocomplete input { + color: #e6eaf0; + background-color: #2a2c26; } + .isDarkMode .composerInputMeta-autocomplete input::placeholder { + color: #d6dde6; } + +.isDarkMode select.pm-field, .isDarkMode select.pm-field-icon-container { + background-color: #2a2c26; + color: #e6eaf0; } + +.isDarkMode .storageProgress-content.dropDown-content--rightbottom::before { + border-right-color: #1D1E1A; } + +.isDarkMode .sticky-title { + background: #22231f; } + +.isDarkMode .bg-global-highlight { + background-color: #1D1E1A; } + +.isDarkMode .bg-white-dm { + background-color: #2a2c26; } + +.isDarkMode .main-area, .isDarkMode .main-area--noHeader, +.isDarkMode .main-area--withToolbar, +.isDarkMode .main-area--withToolbar--noHeader, +.isDarkMode [class*="block-info-"] { + color: #e6eaf0; } + +.isDarkMode .main-area, .isDarkMode .main-area--noHeader, +.isDarkMode .main-area--withToolbar, .isDarkMode .main-area--withToolbar--noHeader { + background: #1D1E1A; } + +.isDarkMode .context-bar { + background: #1D1E1A; } + +.isDarkMode .subnav { + background: #2a2c26; } + .isDarkMode .subnav .link, .isDarkMode .subnav a { + color: #89C62A; } + .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: #96d435; } + +.isDarkMode .pm-toggle-label { + border-color: #373932; + background: #2a2c26; } + .isDarkMode .pm-toggle-label::before { + background: #1D1E1A; } + .isDarkMode .pm-toggle-label .pm-toggle-label-img { + fill: #e6eaf0; } + +.isDarkMode .pm-plans-table-row--highlighted { + background-color: #1D1E1A; } + +.isDarkMode .pm-checkbox-fakecheck, +.isDarkMode .pm-radio-fakeradio { + background: transparent; } + +.isDarkMode [class*="icon-"].color-primary { + color: #89C62A; } + +.isDarkMode .color-global-grey-dm { + color: #89C62A; } diff --git a/themes/ochin/ochin.css b/themes/ochin/ochin.css index 046d332..a0a51aa 100644 --- a/themes/ochin/ochin.css +++ b/themes/ochin/ochin.css @@ -1,6 +1,6 @@ /*! =========================================== * * OCHIN - * Version: v4.0.0-beta.20 + * Version: v4.0.0-beta.33 * Author: Cristiano Almeida * Website: https://www.csalmeida.com * Twitter: @_csalmeida @@ -19,8 +19,12 @@ --color-standard-text: #fff; --boxshadow-main: none; } +html:not(.editor-squire-iframe) body { + background: #333E4C; + color: #e6eaf0; } + .pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue { - color: #fff; + color: #e6eaf0; background-color: #A8E576; border: 1px solid #A8E576; transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out; } @@ -60,20 +64,32 @@ .color-primary { color: #A8E576; } -.aside-link { - background: #29323d; } - -.aside-link:active .aside-linkIcon, .aside-link:focus .aside-linkIcon, .aside-link:hover .aside-linkIcon, .aside-link[aria-current="true"] .aside-linkIcon { - fill: #29323d; - background: none; } - .navigation__counterItem { - background-color: #8ddd4b; + background: #8ddd4b; color: white; } +.item-container-row:hover::before, .item-container:hover::before { + border-color: #c3eda1; } + +.item-checkbox + .item-icon:hover, .item-checkbox:hover + .item-icon { + border-color: #ecf9e1; } + +.item-checkbox:hover:not(:checked) + .item-icon .item-icon-fakecheck-icon { + fill: #8ddd4b; } + .circle-chart__circle { stroke: #A8E576; } +#dropdown-0 .dropDown-content::after, #dropdown-0 .dropDown-content::before, #dropdown-0.dropDown:not(.dropDown--noCaret)::before, +#dropdown-0 .dropDown-content { + background: #333E4C; } + +.dropDown:not(.dropDown--noCaret)::before, +.dropDown::after, +.dropDown-logout-initials, +.dropDown-item-hr { + border-color: #3d4a5b !important; } + #global_search.searchbox-field[type="search"] { background-color: #1A2533; color: #e6eaf0; } @@ -178,7 +194,7 @@ border-color: #d62646; } .link, a, .pm-button--link { - color: #333E4C; + color: #8ddd4b; transition: color .2s ease-in-out; } .link:active, .link:focus, .link:hover, @@ -224,10 +240,23 @@ a:active, a:focus, a:hover, color: #8ddd4b; background: transparent; } +.pm-group-buttons > .pm-group-button.pm-button--primary { + border-color: #8ddd4b; } + +.bg-pm-blue-gradient .pm-button--transparent:hover { + color: #e6eaf0; + border-color: #e6eaf0; } + .pm-toggle-checkbox:checked + .pm-toggle-label:before { background: #A8E576; border-color: #A8E576; } +.composer-title-bar { + background: #333E4C; } + +.color-global-light { + color: #e6eaf0; } + .angular-squire-iframe body a { color: #A8E576; } @@ -252,13 +281,20 @@ a:active, a:focus, a:hover, .pm-checkbox-fakecheck, .pm-radio-fakeradio { border-color: #333E4C; } .pm-checkbox-fakecheck [class*="icon-"], .pm-radio-fakeradio [class*="icon-"] { - fill: #333E4C; } + fill: #A8E576; } [class*="icon-"].color-primary { color: #333E4C; } [class*="icon-"].color-primary:hover { color: #8ddd4b; } +.pm-field, .editor, +.editor-toolbar, +.border-bottom, +.border-top, +.message-container.is-opened > .message-header { + border-color: #1f252d; } + .badgeLabel, .badgeLabel-primary { border-color: #8ddd4b; } @@ -268,20 +304,426 @@ a:active, a:focus, a:hover, .bg-pm-blue { background-color: #8ddd4b; } -.progress-contact, .progressbar { +body { + scrollbar-color: #47576b #374352; } + +::-webkit-scrollbar { + width: 16px; } + ::-webkit-scrollbar-track { + background: #374352; } + ::-webkit-scrollbar-thumb { + background: #47576b; + box-shadow: inset 0 0 0 4px #374352; + border-radius: 16px; } + +.isDarkMode .bordered, +.isDarkMode .bordered-container:not([class*="composerInputMeta-"]), +.isDarkMode .breadcrumb-container { + border-color: #47576b; } + +.isDarkMode .dropDown-content::after, .isDarkMode .dropDown-content::before, +.isDarkMode .dropDown:not(.dropDown--noCaret)::before, +.isDarkMode .dropDown-content { + background: #333E4C; + border: #333E4C; } + +.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: #29323d; } + +.isDarkMode .dropDown-item-button.is-disabled, .isDarkMode .dropDown-item-button[disabled], +.isDarkMode .dropDown-item-link.is-disabled, .isDarkMode .dropDown-item-link[disabled] { + background-color: #2f3946; } + +.isDarkMode .squireToolbar-select-list { + background: #333E4C; + color: #e6eaf0; } + +.isDarkMode .squireToolbar-dropdown-divider { + background-color: #47576b; } + +.isDarkMode .squireToolbar-select-item:hover { + background: #2f3946; } + +.isDarkMode #pm_composer .composer, +.isDarkMode .composerInputMeta-overlay { + background: #333E4C; } + +.isDarkMode #pm_composer .composer .fill { + background: #333E4C; } + +.isDarkMode .composer-body-container textarea { + background: #333E4C; } + +.isDarkMode .composer-addresses-item { + background: #29323d; } + +.isDarkMode .composer-addresses-autocomplete ul { + background: #29323d; } + +.isDarkMode .composer-addresses-autocomplete li[aria-selected="true"], +.isDarkMode .composer-addresses-autocomplete li:hover { + background: #333E4C; } + +.isDarkMode .autocompleteEmails-item { + background-color: #2f3946; + border-color: #2f3946; } + +.isDarkMode .autocompleteEmails-label { + border-left: 1px solid #47576b; + border-right: 1px solid #47576b; } + +.isDarkMode .composerOptions-container.show { + background: #2f3946; } + .isDarkMode .composerOptions-container.show .shadow-container { + background: #333E4C; + color: #e6eaf0; } + +.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: #2f3946; + border-color: #47576b; + color: #c6cfdd; } + +.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: #e6eaf0; + background-color: #333E4C; + border-color: #47576b; } + +.isDarkMode .pm-group-buttons > .pm-group-button.pm-button--primary { + border-color: #47576b; } + +.isDarkMode .pm-button-blueborder { + border-color: #A8E576; color: #A8E576; } - .progress-contact::-moz-progress-bar, .progressbar::-moz-progress-bar { - background: #A8E576; } -.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: #7fd936; } +.isDarkMode .pm-button-blueborder:hover { + border-color: #b6e98b; + color: #b6e98b; } -.minicalendar-day[aria-current="date"][aria-pressed="true"]::before { - background: #A8E576; } +.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: #374352 !important; } + +.isDarkMode .squireToolbar-separator { + background: #3d4a5b; } + +.isDarkMode .composerTime-container, +.isDarkMode [class*="composer-field"] { + color: #e6eaf0; } + +.isDarkMode .composerInputMeta-overlay-fakefield { + border-color: #e6eaf0; } + +.isDarkMode .encryptionStatus .color-global-grey-dm:not(.color-pm-blue) svg { + color: white; } + +.isDarkMode .conversation { + border-color: #47576b; } + +.isDarkMode .main-area, +.isDarkMode .main-area--noHeader, +.isDarkMode .main-area--withToolbar, +.isDarkMode .main-area--withToolbar--noHeader, +.isDarkMode [class*="block-info-"] { + color: #e6eaf0; } + +.isDarkMode [class*="block-info"] { + background-color: #47576b; + color: #e6eaf0; } + +.isDarkMode .fill-global-grey { + fill: #A8E576; } + +.isDarkMode .starbutton { + fill: #0d0d0d; } + +.isDarkMode .bg-global-light, .isDarkMode kbd { + background: #333E4C; } + +.isDarkMode .item-container, .isDarkMode .item-container-row, .isDarkMode .contactsummary-container { + background: #333E4C; } + +.isDarkMode .items-column-list-inner, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer { + border-color: #47576b; } + .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: #47576b; } + +.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: #3d4a5b; } + +.isDarkMode .item-container.active, .isDarkMode .item-is-selected { + background: #2f3946; } + .isDarkMode .item-container.active .flex-item-fluid, .isDarkMode .item-is-selected .flex-item-fluid { + color: #A8E576; } + +.isDarkMode .item-icon { + background-color: #333E4C; + border: 1px solid #d6dde6; } + +.isDarkMode .selectBoxElement-container:hover .item-icon { + background-color: #333E4C; + border: 1px solid #9ae161; } + .isDarkMode .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon { + fill: #9ae161; } + +.isDarkMode .selectBoxElement-container { + color: #e6eaf0; } + +.isDarkMode .selectBoxElement-container:hover .item-checkbox:checked + .item-icon { + background-color: #9ae161; + border-color: #9ae161; } + +.isDarkMode .item-checkbox + .item-icon:hover, +.isDarkMode .item-checkbox:hover + .item-icon { + background-color: #29323d; } + +.isDarkMode .items-column-list, +.isDarkMode .elementList-container-row { + background-color: #333E4C; } + +.isDarkMode .composer-container { + background: #3d4a5b; } + +.isDarkMode .message-header { + background-color: #3d4a5b; } + +.isDarkMode .view-column-detail { + background-color: #333E4C; } + +.isDarkMode details:first-child { + border-color: #47576b; } + +.isDarkMode .items-column-list, +.isDarkMode .message-container, +.isDarkMode .message-attachments { + border-color: #47576b; } + +.isDarkMode .message-container:not(.sent):not(.draft) .message-header.message-summary::before, +.isDarkMode .message-header.is-inbound::before { + border-top: 1px solid #47576b; + border-left: 1px solid #47576b; + background-color: #3d4a5b; } + +.isDarkMode .message-infobox { + background-color: #333E4C; } + +.isDarkMode .message-content.frame.message-frame { + background: white; + color: black; } + +.isDarkMode .block-info-standard, .isDarkMode .bodyDecrypted blockquote { + border-color: #A8E576; } + +.isDarkMode .squireDropdown-item-label { + color: #e6eaf0; } + +.isDarkMode .squireToolbar-action-color { + background: transparent; } + +.isDarkMode .angular-squire-iframe body { + color: #e6eaf0; + background: #3d4a5b; } + .isDarkMode .angular-squire-iframe body a { + color: #A8E576; } + +.isDarkMode .plaintext-editor { + color: #e6eaf0; } + +.isDarkMode .pm-button, .isDarkMode .pm-button--info, .isDarkMode .pm-button--redborder { + background: #333E4C; + border-color: #47576b; + color: #e6eaf0; } + +.isDarkMode .message-attachmentInfo { + border-color: #47576b; } + +.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: #A8E576; } + +.isDarkMode .pm-button:focus { + color: #e6eaf0; } + +.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: #47576b; } + +.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: #47576b; + color: #A8E576; } + +.isDarkMode .dropDown-content { + background: #333E4C; + color: #e6eaf0; } + .isDarkMode .dropDown-content button { + color: #e6eaf0; } + .isDarkMode .dropDown-content .elementsSelector-btn-action, + .isDarkMode .dropDown-content .dropDown-item:hover { + color: #e6eaf0; } + .isDarkMode .dropDown-content .dropDown-item:hover { + background: #3d4a5b !important; } + .isDarkMode .dropDown-content .dropDown-item + .dropDown-item { + border-top: 1px solid #47576b; } + .isDarkMode .dropDown-content .dropDown-item .color-global-grey { + color: #e6eaf0; } + +.isDarkMode .dropDown .dropDown-content::before, .isDarkMode .dropDown .dropDown-content::after { + border-bottom-color: #333E4C; } + +.isDarkMode .dropDown--right-bottom::before { + border-right-color: #333E4C; } + +.isDarkMode .dropDown--right-bottom .dropDown-content::before, .isDarkMode .dropDown--right-bottom .dropDown-content::after { + background: #333E4C; } + +.isDarkMode .dropDown--bottom-right .dropDown-content::before, .isDarkMode .dropDown--bottom-right .dropDown-content::after { + background: #333E4C; } + +.isDarkMode .dropDown--bottom-left::before, +.isDarkMode .dropDown--bottom-right::before, +.isDarkMode .dropDown--bottom::before { + border-bottom-color: #47576b; } + +.isDarkMode .dropDown--bottom-right { + border: 1px solid #47576b; } + +.isDarkMode .pm-field-icon-container[type="search"], .isDarkMode .pm-field[type="search"] { + background-color: #3d4a5b; } + +.isDarkMode .dropDown-contentInner { + background-color: #333E4C; } + .isDarkMode .dropDown-contentInner::before, .isDarkMode .dropDown-contentInner::after { + background-color: #333E4C; } + .isDarkMode .dropDown-contentInner .dropDown-item span { + color: #e6eaf0 !important; } + +.isDarkMode .searchbox-field[type="search"]:not(#global_search) { + background: #e6eaf0; + color: #333E4C; } + +.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: #b6e98b; } + +.isDarkMode .pm-modal, .isDarkMode .pm-modalContentInner { + background-color: #333E4C; + color: #e6eaf0; } + .isDarkMode .pm-modal::before, .isDarkMode .pm-modal::after, .isDarkMode .pm-modalContentInner::before, .isDarkMode .pm-modalContentInner::after { + background-color: #333E4C; } + .isDarkMode .pm-modal .labelColorSelector-item-mask, .isDarkMode .pm-modalContentInner .labelColorSelector-item-mask { + border: 2px solid #52637a; } + +.isDarkMode .pm-button--primaryborder, .isDarkMode .pm-button-blueborder { + border-color: #A8E576; + color: #A8E576; + background-color: #3d4a5b; + 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: #A8E576; + color: #A8E576; + background-color: #313c49; } + +.isDarkMode .scrollshadow-static { + background: #333E4C; } + +.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: #e6eaf0; + background-color: #3d4a5b; } + .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: #d6dde6; } + +.isDarkMode .composerInputMeta-autocomplete input { + color: #e6eaf0; + background-color: #3d4a5b; } + .isDarkMode .composerInputMeta-autocomplete input::placeholder { + color: #d6dde6; } + +.isDarkMode select.pm-field, .isDarkMode select.pm-field-icon-container { + background-color: #3d4a5b; + color: #e6eaf0; } + +.isDarkMode .storageProgress-content.dropDown-content--rightbottom::before { + border-right-color: #333E4C; } + +.isDarkMode .sticky-title { + background: #374352; } + +.isDarkMode .bg-global-highlight { + background-color: #333E4C; } + +.isDarkMode .bg-white-dm { + background-color: #3d4a5b; } + +.isDarkMode .main-area, .isDarkMode .main-area--noHeader, +.isDarkMode .main-area--withToolbar, +.isDarkMode .main-area--withToolbar--noHeader, +.isDarkMode [class*="block-info-"] { + color: #e6eaf0; } + +.isDarkMode .main-area, .isDarkMode .main-area--noHeader, +.isDarkMode .main-area--withToolbar, .isDarkMode .main-area--withToolbar--noHeader { + background: #333E4C; } + +.isDarkMode .context-bar { + background: #333E4C; } + +.isDarkMode .subnav { + background: #3d4a5b; } + .isDarkMode .subnav .link, .isDarkMode .subnav a { + color: #A8E576; } + .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: #b6e98b; } + +.isDarkMode .pm-toggle-label { + border-color: #47576b; + background: #3d4a5b; } + .isDarkMode .pm-toggle-label::before { + background: #333E4C; } + .isDarkMode .pm-toggle-label .pm-toggle-label-img { + fill: #e6eaf0; } + +.isDarkMode .pm-plans-table-row--highlighted { + background-color: #333E4C; } + +.isDarkMode .pm-checkbox-fakecheck, +.isDarkMode .pm-radio-fakeradio { + background: transparent; } + +.isDarkMode [class*="icon-"].color-primary { + color: #A8E576; } + +.isDarkMode .color-global-grey-dm { + color: #A8E576; } .pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue { color: #FFF; diff --git a/themes/vitamin_c/vitamin_c.css b/themes/vitamin_c/vitamin_c.css index 9878a9c..4129312 100644 --- a/themes/vitamin_c/vitamin_c.css +++ b/themes/vitamin_c/vitamin_c.css @@ -1,6 +1,6 @@ /*! =========================================== * * VITAMIN C THEME - * Version: v4.0.0-beta.20 + * Version: v4.0.0-beta.33 * Author: Cristiano Almeida * Website: www.csalmeida.com * Twitter: @_csalmeida @@ -19,8 +19,12 @@ --color-standard-text: #fff; --boxshadow-main: none; } +html:not(.editor-squire-iframe) body { + background: #004358; + color: #e6eaf0; } + .pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue { - color: #fff; + color: #e6eaf0; background-color: #FD7400; border: 1px solid #FD7400; transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out; } @@ -60,20 +64,32 @@ .color-primary { color: #FD7400; } -.aside-link { - background: #00303f; } - -.aside-link:active .aside-linkIcon, .aside-link:focus .aside-linkIcon, .aside-link:hover .aside-linkIcon, .aside-link[aria-current="true"] .aside-linkIcon { - fill: #00303f; - background: none; } - .navigation__counterItem { - background-color: #ca5d00; + background: #ca5d00; color: white; } +.item-container-row:hover::before, .item-container:hover::before { + border-color: #ff8f31; } + +.item-checkbox + .item-icon:hover, .item-checkbox:hover + .item-icon { + border-color: #ffb97e; } + +.item-checkbox:hover:not(:checked) + .item-icon .item-icon-fakecheck-icon { + fill: #ca5d00; } + .circle-chart__circle { stroke: #FD7400; } +#dropdown-0 .dropDown-content::after, #dropdown-0 .dropDown-content::before, #dropdown-0.dropDown:not(.dropDown--noCaret)::before, +#dropdown-0 .dropDown-content { + background: #004358; } + +.dropDown:not(.dropDown--noCaret)::before, +.dropDown::after, +.dropDown-logout-initials, +.dropDown-item-hr { + border-color: #005672 !important; } + #global_search.searchbox-field[type="search"] { background-color: #1F8A70; color: #e6eaf0; } @@ -178,7 +194,7 @@ border-color: #d62646; } .link, a, .pm-button--link { - color: #004358; + color: #ca5d00; transition: color .2s ease-in-out; } .link:active, .link:focus, .link:hover, @@ -224,10 +240,23 @@ a:active, a:focus, a:hover, color: #ca5d00; background: transparent; } +.pm-group-buttons > .pm-group-button.pm-button--primary { + border-color: #ca5d00; } + +.bg-pm-blue-gradient .pm-button--transparent:hover { + color: #e6eaf0; + border-color: #e6eaf0; } + .pm-toggle-checkbox:checked + .pm-toggle-label:before { background: #FD7400; border-color: #FD7400; } +.composer-title-bar { + background: #004358; } + +.color-global-light { + color: #e6eaf0; } + .angular-squire-iframe body a { color: #FD7400; } @@ -252,13 +281,20 @@ a:active, a:focus, a:hover, .pm-checkbox-fakecheck, .pm-radio-fakeradio { border-color: #004358; } .pm-checkbox-fakecheck [class*="icon-"], .pm-radio-fakeradio [class*="icon-"] { - fill: #004358; } + fill: #FD7400; } [class*="icon-"].color-primary { color: #004358; } [class*="icon-"].color-primary:hover { color: #ca5d00; } +.pm-field, .editor, +.editor-toolbar, +.border-bottom, +.border-top, +.message-container.is-opened > .message-header { + border-color: #001c25; } + .badgeLabel, .badgeLabel-primary { border-color: #ca5d00; } @@ -268,17 +304,423 @@ a:active, a:focus, a:hover, .bg-pm-blue { background-color: #ca5d00; } -.progress-contact, .progressbar { +body { + scrollbar-color: #006a8b #004b62; } + +::-webkit-scrollbar { + width: 16px; } + ::-webkit-scrollbar-track { + background: #004b62; } + ::-webkit-scrollbar-thumb { + background: #006a8b; + box-shadow: inset 0 0 0 4px #004b62; + border-radius: 16px; } + +.isDarkMode .bordered, +.isDarkMode .bordered-container:not([class*="composerInputMeta-"]), +.isDarkMode .breadcrumb-container { + border-color: #006a8b; } + +.isDarkMode .dropDown-content::after, .isDarkMode .dropDown-content::before, +.isDarkMode .dropDown:not(.dropDown--noCaret)::before, +.isDarkMode .dropDown-content { + background: #004358; + border: #004358; } + +.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: #00303f; } + +.isDarkMode .dropDown-item-button.is-disabled, .isDarkMode .dropDown-item-button[disabled], +.isDarkMode .dropDown-item-link.is-disabled, .isDarkMode .dropDown-item-link[disabled] { + background-color: #003b4e; } + +.isDarkMode .squireToolbar-select-list { + background: #004358; + color: #e6eaf0; } + +.isDarkMode .squireToolbar-dropdown-divider { + background-color: #006a8b; } + +.isDarkMode .squireToolbar-select-item:hover { + background: #003b4e; } + +.isDarkMode #pm_composer .composer, +.isDarkMode .composerInputMeta-overlay { + background: #004358; } + +.isDarkMode #pm_composer .composer .fill { + background: #004358; } + +.isDarkMode .composer-body-container textarea { + background: #004358; } + +.isDarkMode .composer-addresses-item { + background: #00303f; } + +.isDarkMode .composer-addresses-autocomplete ul { + background: #00303f; } + +.isDarkMode .composer-addresses-autocomplete li[aria-selected="true"], +.isDarkMode .composer-addresses-autocomplete li:hover { + background: #004358; } + +.isDarkMode .autocompleteEmails-item { + background-color: #003b4e; + border-color: #003b4e; } + +.isDarkMode .autocompleteEmails-label { + border-left: 1px solid #006a8b; + border-right: 1px solid #006a8b; } + +.isDarkMode .composerOptions-container.show { + background: #003b4e; } + .isDarkMode .composerOptions-container.show .shadow-container { + background: #004358; + color: #e6eaf0; } + +.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: #003b4e; + border-color: #006a8b; + color: #c6cfdd; } + +.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: #e6eaf0; + background-color: #004358; + border-color: #006a8b; } + +.isDarkMode .pm-group-buttons > .pm-group-button.pm-button--primary { + border-color: #006a8b; } + +.isDarkMode .pm-button-blueborder { + border-color: #FD7400; color: #FD7400; } - .progress-contact::-moz-progress-bar, .progressbar::-moz-progress-bar { - background: #FD7400; } -.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: #b15100; } +.isDarkMode .pm-button-blueborder:hover { + border-color: #ff8218; + color: #ff8218; } -.minicalendar-day[aria-current="date"][aria-pressed="true"]::before { - background: #FD7400; } +.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: #004b62 !important; } + +.isDarkMode .squireToolbar-separator { + background: #005672; } + +.isDarkMode .composerTime-container, +.isDarkMode [class*="composer-field"] { + color: #e6eaf0; } + +.isDarkMode .composerInputMeta-overlay-fakefield { + border-color: #e6eaf0; } + +.isDarkMode .encryptionStatus .color-global-grey-dm:not(.color-pm-blue) svg { + color: white; } + +.isDarkMode .conversation { + border-color: #006a8b; } + +.isDarkMode .main-area, +.isDarkMode .main-area--noHeader, +.isDarkMode .main-area--withToolbar, +.isDarkMode .main-area--withToolbar--noHeader, +.isDarkMode [class*="block-info-"] { + color: #e6eaf0; } + +.isDarkMode [class*="block-info"] { + background-color: #006a8b; + color: #e6eaf0; } + +.isDarkMode .fill-global-grey { + fill: #FD7400; } + +.isDarkMode .starbutton { + fill: #0d0d0d; } + +.isDarkMode .bg-global-light, .isDarkMode kbd { + background: #004358; } + +.isDarkMode .item-container, .isDarkMode .item-container-row, .isDarkMode .contactsummary-container { + background: #004358; } + +.isDarkMode .items-column-list-inner, .isDarkMode .ReactVirtualized__Grid__innerScrollContainer { + border-color: #006a8b; } + .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: #006a8b; } + +.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: #005672; } + +.isDarkMode .item-container.active, .isDarkMode .item-is-selected { + background: #003b4e; } + .isDarkMode .item-container.active .flex-item-fluid, .isDarkMode .item-is-selected .flex-item-fluid { + color: #FD7400; } + +.isDarkMode .item-icon { + background-color: #004358; + border: 1px solid #d6dde6; } + +.isDarkMode .selectBoxElement-container:hover .item-icon { + background-color: #004358; + border: 1px solid #e46800; } + .isDarkMode .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon { + fill: #e46800; } + +.isDarkMode .selectBoxElement-container { + color: #e6eaf0; } + +.isDarkMode .selectBoxElement-container:hover .item-checkbox:checked + .item-icon { + background-color: #e46800; + border-color: #e46800; } + +.isDarkMode .item-checkbox + .item-icon:hover, +.isDarkMode .item-checkbox:hover + .item-icon { + background-color: #00303f; } + +.isDarkMode .items-column-list, +.isDarkMode .elementList-container-row { + background-color: #004358; } + +.isDarkMode .composer-container { + background: #005672; } + +.isDarkMode .message-header { + background-color: #005672; } + +.isDarkMode .view-column-detail { + background-color: #004358; } + +.isDarkMode details:first-child { + border-color: #006a8b; } + +.isDarkMode .items-column-list, +.isDarkMode .message-container, +.isDarkMode .message-attachments { + border-color: #006a8b; } + +.isDarkMode .message-container:not(.sent):not(.draft) .message-header.message-summary::before, +.isDarkMode .message-header.is-inbound::before { + border-top: 1px solid #006a8b; + border-left: 1px solid #006a8b; + background-color: #005672; } + +.isDarkMode .message-infobox { + background-color: #004358; } + +.isDarkMode .message-content.frame.message-frame { + background: white; + color: black; } + +.isDarkMode .block-info-standard, .isDarkMode .bodyDecrypted blockquote { + border-color: #FD7400; } + +.isDarkMode .squireDropdown-item-label { + color: #e6eaf0; } + +.isDarkMode .squireToolbar-action-color { + background: transparent; } + +.isDarkMode .angular-squire-iframe body { + color: #e6eaf0; + background: #005672; } + .isDarkMode .angular-squire-iframe body a { + color: #FD7400; } + +.isDarkMode .plaintext-editor { + color: #e6eaf0; } + +.isDarkMode .pm-button, .isDarkMode .pm-button--info, .isDarkMode .pm-button--redborder { + background: #004358; + border-color: #006a8b; + color: #e6eaf0; } + +.isDarkMode .message-attachmentInfo { + border-color: #006a8b; } + +.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: #FD7400; } + +.isDarkMode .pm-button:focus { + color: #e6eaf0; } + +.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: #006a8b; } + +.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: #006a8b; + color: #FD7400; } + +.isDarkMode .dropDown-content { + background: #004358; + color: #e6eaf0; } + .isDarkMode .dropDown-content button { + color: #e6eaf0; } + .isDarkMode .dropDown-content .elementsSelector-btn-action, + .isDarkMode .dropDown-content .dropDown-item:hover { + color: #e6eaf0; } + .isDarkMode .dropDown-content .dropDown-item:hover { + background: #005672 !important; } + .isDarkMode .dropDown-content .dropDown-item + .dropDown-item { + border-top: 1px solid #006a8b; } + .isDarkMode .dropDown-content .dropDown-item .color-global-grey { + color: #e6eaf0; } + +.isDarkMode .dropDown .dropDown-content::before, .isDarkMode .dropDown .dropDown-content::after { + border-bottom-color: #004358; } + +.isDarkMode .dropDown--right-bottom::before { + border-right-color: #004358; } + +.isDarkMode .dropDown--right-bottom .dropDown-content::before, .isDarkMode .dropDown--right-bottom .dropDown-content::after { + background: #004358; } + +.isDarkMode .dropDown--bottom-right .dropDown-content::before, .isDarkMode .dropDown--bottom-right .dropDown-content::after { + background: #004358; } + +.isDarkMode .dropDown--bottom-left::before, +.isDarkMode .dropDown--bottom-right::before, +.isDarkMode .dropDown--bottom::before { + border-bottom-color: #006a8b; } + +.isDarkMode .dropDown--bottom-right { + border: 1px solid #006a8b; } + +.isDarkMode .pm-field-icon-container[type="search"], .isDarkMode .pm-field[type="search"] { + background-color: #005672; } + +.isDarkMode .dropDown-contentInner { + background-color: #004358; } + .isDarkMode .dropDown-contentInner::before, .isDarkMode .dropDown-contentInner::after { + background-color: #004358; } + .isDarkMode .dropDown-contentInner .dropDown-item span { + color: #e6eaf0 !important; } + +.isDarkMode .searchbox-field[type="search"]:not(#global_search) { + background: #e6eaf0; + color: #004358; } + +.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: #ff8218; } + +.isDarkMode .pm-modal, .isDarkMode .pm-modalContentInner { + background-color: #004358; + color: #e6eaf0; } + .isDarkMode .pm-modal::before, .isDarkMode .pm-modal::after, .isDarkMode .pm-modalContentInner::before, .isDarkMode .pm-modalContentInner::after { + background-color: #004358; } + .isDarkMode .pm-modal .labelColorSelector-item-mask, .isDarkMode .pm-modalContentInner .labelColorSelector-item-mask { + border: 2px solid #007da5; } + +.isDarkMode .pm-button--primaryborder, .isDarkMode .pm-button-blueborder { + border-color: #FD7400; + color: #FD7400; + background-color: #005672; + 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: #FD7400; + color: #FD7400; + background-color: #003f53; } + +.isDarkMode .scrollshadow-static { + background: #004358; } + +.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: #e6eaf0; + background-color: #005672; } + .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: #d6dde6; } + +.isDarkMode .composerInputMeta-autocomplete input { + color: #e6eaf0; + background-color: #005672; } + .isDarkMode .composerInputMeta-autocomplete input::placeholder { + color: #d6dde6; } + +.isDarkMode select.pm-field, .isDarkMode select.pm-field-icon-container { + background-color: #005672; + color: #e6eaf0; } + +.isDarkMode .storageProgress-content.dropDown-content--rightbottom::before { + border-right-color: #004358; } + +.isDarkMode .sticky-title { + background: #004b62; } + +.isDarkMode .bg-global-highlight { + background-color: #004358; } + +.isDarkMode .bg-white-dm { + background-color: #005672; } + +.isDarkMode .main-area, .isDarkMode .main-area--noHeader, +.isDarkMode .main-area--withToolbar, +.isDarkMode .main-area--withToolbar--noHeader, +.isDarkMode [class*="block-info-"] { + color: #e6eaf0; } + +.isDarkMode .main-area, .isDarkMode .main-area--noHeader, +.isDarkMode .main-area--withToolbar, .isDarkMode .main-area--withToolbar--noHeader { + background: #004358; } + +.isDarkMode .context-bar { + background: #004358; } + +.isDarkMode .subnav { + background: #005672; } + .isDarkMode .subnav .link, .isDarkMode .subnav a { + color: #FD7400; } + .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: #ff8218; } + +.isDarkMode .pm-toggle-label { + border-color: #006a8b; + background: #005672; } + .isDarkMode .pm-toggle-label::before { + background: #004358; } + .isDarkMode .pm-toggle-label .pm-toggle-label-img { + fill: #e6eaf0; } + +.isDarkMode .pm-plans-table-row--highlighted { + background-color: #004358; } + +.isDarkMode .pm-checkbox-fakecheck, +.isDarkMode .pm-radio-fakeradio { + background: transparent; } + +.isDarkMode [class*="icon-"].color-primary { + color: #FD7400; } + +.isDarkMode .color-global-grey-dm { + color: #FD7400; } |
