diff options
Diffstat (limited to 'themes/dracula/dracula.css')
| -rw-r--r-- | themes/dracula/dracula.css | 848 |
1 files changed, 624 insertions, 224 deletions
diff --git a/themes/dracula/dracula.css b/themes/dracula/dracula.css index 9539c4e..a388fd2 100644 --- a/themes/dracula/dracula.css +++ b/themes/dracula/dracula.css @@ -1,335 +1,735 @@ /*! =========================================== * * DRACULA Theme - * Version: 3.14.0 + * Version: v4.0.0-beta.33 * Author: Mike Barkmin * Website: www.barkmin.eu - * Tweets @mikebarkmin + * Twitter: @mikebarkmin * =========================================== */ -.headerDesktop-container { - background-color: #282a36; } +:root { + --main-bg-color: #282a36; + --secondary-bg-color: #1d1f27; + --bgcolor-searchbox-field: #000; + --bgcolor-spacebar: rgba(255, 255, 255, 0.1); + --bgcolor-aside-link: rgba(0, 0, 0, 0.3); + --bgcolor-toolbar: #333545; + --fillcolor-logo: #f6f7fa; + --fillcolor-icons: #fff; + --color-nav-link: #D8D8D8; + --color-nav-active: #FF79C6; + --color-standard-text: #fff; + --boxshadow-main: none; } + +html:not(.editor-squire-iframe) body { + background: #282a36; + color: #e6eaf0; } -.search-form-fieldset { - background: #000; } +.pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue { + 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; } -[class*="searchForm-action-button-"] { - color: #D8D8D8; } +.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: #D8D8D8; + box-shadow: 0 0 0.35714em 0 rgba(0, 0, 0, 0.2); + background: #ff60bb; + border: 1px solid #ff60bb; } -.searchForm-action-button-advanced:hover, .searchForm-action-button-toggle:hover { - background: #FF79C6; } +.pm-button--primaryborder-dark, .pm-button-blueborder-dark { + background: #282a36; + border-color: #FF79C6; + color: #FF79C6; } -.customRadio-input:checked + .customRadio-mask { - box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 10px #FF79C6; - border-color: #FF79C6; } +.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: #282a36; + border-color: #ff93d1; + color: #ff93d1; } -.pm_button.primary, .pm_button.primary:active { - color: #D8D8D8; - background-color: #282a36; - border-color: #282a36; } +.pm-button--primaryborder, .pm-button-blueborder { + border-color: #ff60bb; + color: #ff60bb; } -.pm_button.primary:hover, .pm_button.primary:focus { - background-color: rgba(0, 0, 0, 0.7); - border-color: rgba(0, 0, 0, 0.7); } +.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: #ff60bb; + color: #ff60bb; } -.navigation > li.active, .navigation > li:hover { - border-color: #FF79C6; } +.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: #ff93d1; + color: #ff46b0; } -.navigation-link { - color: #D8D8D8; } +.bg-primary { + background-color: #333545; } -.navigation-title:hover { +.color-primary { color: #FF79C6; } -.pm_dropdown .navigationUser-logout { - background-color: #282a36 !important; - border-color: #282a36 !important; - color: #D8D8D8 !important; } +.navigation__counterItem { + background: #ff46b0; + color: white; } -.pm_dropdown .navigationUser-logout:hover { - background-color: #000 !important; - border-color: #000 !important; - color: #D8D8D8 !important; } +.item-container-row:hover::before, .item-container:hover::before { + border-color: #ffacdc; } -.sidebar-btn-compose, .sidebar-btn-compose:active { - color: #D8D8D8 !important; - background: #FF79C6 !important; - border: none !important; - transition: background-color .2s ease-in-out; } +.item-checkbox + .item-icon:hover, .item-checkbox:hover + .item-icon { + border-color: #fff9fc; } -.sidebar-btn-compose:hover { - color: #D8D8D8 !important; - background: #FF79C6 !important; - border: none !important; - box-shadow: inset 0 400px 400px rgba(0, 0, 0, 0.1); } +.item-checkbox:hover:not(:checked) + .item-icon .item-icon-fakecheck-icon { + fill: #ff46b0; } -.headerDesktop-logo { - background-color: #282a36; } +.circle-chart__circle { + stroke: #FF79C6; } -body section.sidebar { +#dropdown-0 .dropDown-content::after, #dropdown-0 .dropDown-content::before, #dropdown-0.dropDown:not(.dropDown--noCaret)::before, +#dropdown-0 .dropDown-content { background: #282a36; } -body section.sidebar a.compose { - background: #FF79C6; - color: #D8D8D8; } +.dropDown:not(.dropDown--noCaret)::before, +.dropDown::after, +.dropDown-logout-initials, +.dropDown-item-hr { + border-color: #333545 !important; } -body section.sidebar a.compose:hover { - background: #D8D8D8; - border-color: #D8D8D8; - color: #282a36; } +#global_search.searchbox-field[type="search"] { + background-color: #000; + color: #e6eaf0; } + +.searchbox-advanced-search-button:active, +.searchbox-advanced-search-button:focus, +.searchbox-advanced-search-button:hover { + background-color: #282a36; } + +.topnav-link, .topnav-link > .topnav-icon { + color: #D8D8D8; + transition: color .2s ease-in-out; } -body section.sidebar ul.menu li a { - color: #D8D8D8; } +.topnav-link:active, .topnav-link:focus, +.topnav-link:hover, .topnav-link[aria-current="true"] { + color: #FF79C6; } -body section.sidebar ul.menu li a:hover { +.topnav-link:active > .topnav-icon, .topnav-link:focus > .topnav-icon, +.topnav-link:hover > .topnav-icon, .topnav-link[aria-current=true] > .topnav-icon { color: #FF79C6; } -body section.sidebar ul.menu li.active a, body section.sidebar ul.menu li.active a { - color: #D8D8D8; } +.protonmail .text-purple { + color: #282a36 !important; } -body section.sidebar ul.menu li.active a i.fa, body section.sidebar ul.menu li.active a i.fa:hover { - color: #FF79C6 !important; - opacity: 1; } +.protonmail .text-purple:hover { + color: #ff46b0 !important; } -body section.sidebar ul.menu li a .fa-repeat { - color: #D8D8D8; - opacity: 1; } +.dropDown-item-button:focus, .dropDown-item-button:hover, .dropDown-item-link:focus, .dropDown-item-link:hover { + color: #FF79C6; } -body section.sidebar ul.menu li a i.fa { - color: #D8D8D8; - opacity: 0.5; } +#pm_composer .composer .composerHeader-container, +.composerInputMeta-overlay .composerHeader-container { + background: #333545; } -body section.sidebar ul.menu li a i.fa:hover, body section.sidebar ul.menu li a:hover i.fa { - color: #D8D8D8; - opacity: 1; } +#pm_composer .composer .fill { + background: #fff; } -body section.sidebar ul.menu li a em { - color: #D8D8D8; - opacity: 0.5; } +.conversation.marked::before { + background: #FF79C6; } -body section.sidebar div.labels ul li a { - color: #D8D8D8; - opacity: 0.5; } +.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; } -body section.sidebar div.labels ul li a:hover { - color: #D8D8D8; - opacity: 1; } +.item-container.selected, .item-container-row.selected, +.item-container.active, .item-is-selected { + background: rgba(255, 121, 198, 0.1); } -body section.sidebar div.footer div.link a, body section.sidebar a.version { - color: #D8D8D8; - opacity: 0.5; } +.selectBoxElement-container:hover .item-icon { + background-color: transparent; + border: 1px solid #ff60bb; } + .selectBoxElement-container:hover .item-icon .item-icon-fakecheck-icon { + fill: #ff60bb; } -body section.sidebar div.footer div.link a:hover, body section.sidebar a.version:hover { - color: #FF79C6; - opacity: 1; } +.selectBoxElement-container:hover .item-checkbox:checked + .item-icon { + background-color: #ff60bb; + border-color: #ff60bb; } -body section.sidebar div.footer div.storage strong { - color: #D8D8D8; - opacity: 0.5; } +.item-checkbox:checked + .item-icon { + background-color: #FF79C6; + border-color: #FF79C6; } -.conversationPlaceholder #storageStatus .wrap span strong { - color: #FF79C6; } +.item-checkbox + .item-icon:hover { + background-color: #ff60bb; + border-color: #ff60bb; } -.storageBar { - background-color: rgba(0, 0, 0, 0.1); } +.item-checkbox + .item-icon:hover .item-icon-fakecheck-icon { + fill: #D8D8D8; } -.storageBar .storageBar-progress { - background-color: #FF79C6; } +.item-checkbox:checked + .item-icon:hover .item-icon-fakecheck-icon { + fill: #D8D8D8; } -.pm_buttons, .pm_buttons a { - color: #0d0d0d; } +.starbutton { + fill: #FF79C6 !important; + opacity: 0.7; } -.pm_buttons a:hover, .pm_buttons .pm_buttons-child:hover { - color: #FF79C6; } +.starbutton:focus, .starbutton:hover { + fill: #FF79C6; } -.readUnread-container-ur .readUnread-btn-read, -.pm_buttons .pm_buttons:not(:first-of-type), .pm_buttons > *, -.pm_buttons, .pm_buttons a { - border-color: #282a36 !important; } +.autocompleteEmailsItem-icon svg.encryptionIcon { + fill: #ff60bb; } -.dropdown-folder-search .fa.dropdown-folder-search-icon, -.dropdown-label-search .fa.dropdown-label-search-icon { - color: #FF79C6; } +.encryptionStatus .color-pm-blue svg { + color: #ff60bb; + fill: #ff60bb; } -.dropdown-folder-create-button, -.createLabel-button { +.encryptionStatus .color-global-grey-dm svg { + color: black; } + +.color-pm-blue { color: #FF79C6; } -.customCheckbox-container:hover .customCheckbox-mask, -.customMaskInput-container:hover .customCheckbox-mask { - border-color: #FF79C6 !important; } +.pm-radio:checked + .pm-radio-fakeradio::before { + background: #FF79C6; } -.customCheckbox-input:checked + .customCheckbox-mask { +.block-info-standard { + border-color: #1b68c6; } + +.block-info-standard-warning { + border-color: #ffb86c; } + +.block-info-standard-error { + border-color: #ff5555; } + +.link, a, .pm-button--link { + color: #ff46b0; + transition: color .2s ease-in-out; } + +.link:active, .link:focus, .link:hover, +a:active, a:focus, a:hover, +.pm-button--link:hover { + color: #ff46b0; } + +.pm-button--primary { background-color: #FF79C6; - border-color: #FF79C6; - color: #282a36; } + border-color: #FF79C6; } -.conversation.marked::before { +.pm-button--link, .pm-button.pm-button--link { + color: #FF79C6; } + +.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: #FF79C6; + border-color: #FF79C6; } + +.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: #ff60bb; + border: 1px solid #ff60bb; } + +.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: #ff46b0; + border-color: #ff46b0; } + +.pm-button-blueborder { + box-shadow: none; + border-color: #282a36; + color: #282a36; + transition: color .2s ease-in-out, border-color .2s ease-in-out; } + +.pm-button-blueborder:hover { + box-shadow: none; + border-color: #ff46b0; + color: #ff46b0; } + +.is-active.pm-button--primaryborder, +.pm-button--primaryborder:not(div):active, +.pm-button-blueborder.is-active, +.pm-button-blueborder:not(div):active { + border-color: #ff46b0; + 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; - width: 5px; } + border-color: #FF79C6; } -body #conversation-list-rows .conversation { - background: #fff; } +.composer-title-bar { + background: #282a36; } -body #conversation-list-rows .conversation.read { - background: #fff; } +.color-global-light { + color: #e6eaf0; } -#pm_composer .composer header { - background: #282a36; - color: #D8D8D8; } +.angular-squire-iframe body a { + color: #FF79C6; } + +.fill-pm-blue, +.message-attachmentIcon .file-outer-icon.is-embedded { + fill: #FF79C6; } -p a { +.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2) { + border-color: #FF79C6; color: #FF79C6; } + .pm-table--highlight[data-plan-number="1"] tr th:nth-child(2)::before { + background-color: #FF79C6; } -#pm_composer .composer footer .pm_button { - background: #D8D8D8; - color: #282a36; } +.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: #FF79C6; } -#pm_composer .composer footer .pm_button:hover { - background: #D8D8D8; +.pm-simple-table-row-th .fill-primary { + fill: #FF79C6; } + +.pm-checkbox-fakecheck, .pm-radio-fakeradio { + border-color: #282a36; } + .pm-checkbox-fakecheck [class*="icon-"], .pm-radio-fakeradio [class*="icon-"] { + 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; } + +.badgeLabel, +.badgeLabel-blue, +.badgeLabel-primary, +.bg-pm-blue { + background-color: #ff46b0; } + +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; } -#pm_composer .composer footer .pm_button.primary { +.isDarkMode .squireToolbar-select-list { background: #282a36; - color: #D8D8D8; } + color: #e6eaf0; } -#pm_composer .composer footer .pm_button.primary:hover { - background: #FF79C6; - color: #D8D8D8; } +.isDarkMode .squireToolbar-dropdown-divider { + background-color: #3e4153; } -.pm_button.link.composerHeader-btn { - color: #D8D8D8 !important; } +.isDarkMode .squireToolbar-select-item:hover { + background: #242530; } -.pm_button.link.composerHeader-btn:hover { - color: #FF79C6 !important; } +.isDarkMode #pm_composer .composer, +.isDarkMode .composerInputMeta-overlay { + background: #282a36; } -#pm_settings .pm_tabs { - background: #50fa7b; } +.isDarkMode #pm_composer .composer .fill { + background: #282a36; } -#pm_settings .pm_tabs li a.pm_button { - color: #282a36; - border-color: #50fa7b; } +.isDarkMode .composer-body-container textarea { + background: #282a36; } -#pm_settings .pm_tabs li a.pm_button:hover { - color: #FF79C6; } +.isDarkMode .composer-addresses-item { + background: #1d1f27; } -#pm_settings .pm_tabs li.active a.pm_button { - color: #FF79C6; } +.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; } -.pm_button.link { +.isDarkMode .composerOptions-container.show { + background: #242530; } + .isDarkMode .composerOptions-container.show .shadow-container { + background: #282a36; + color: #e6eaf0; } + +.isDarkMode .pm-button.pm-button--primary { + background: #ff46b0; + color: #e6eaf0; + border-color: #ff46b0; } + +.isDarkMode .pm-button.pm-button--primary:hover { + background: #FF79C6; + 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; } -.pm_toggle-label { +.isDarkMode .pm-button-blueborder:hover { + border-color: #ff93d1; + color: #ff93d1; } + +.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; } -.pm_toggle-checkbox:focus + .pm_toggle-label, .pm_toggle-label:hover { +.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; } -.pm_toggle-checkbox:checked + .pm_toggle-label, .pm_toggle-checkbox:checked + .pm_toggle-label:hover, .pm_toggle-checkbox:checked:focus + .pm_toggle-label { - background: #FF79C6; } +.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; } -.pm_toggle.off .off, .pm_toggle.on .on { - background: #282a36; - color: #D8D8D8; } +.isDarkMode .item-icon { + background-color: #282a36; + border: 1px solid #d6dde6; } -.pm_toggle { - box-shadow: 0 0 0 1px #50fa7b; } +.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; } -.alert.alert-info { - background: rgba(80, 250, 123, 0.7); - color: #0d0d0d; } +.isDarkMode .selectBoxElement-container { + color: #e6eaf0; } -.alert.alert-warning { - background: rgba(255, 184, 108, 0.7); - color: #0d0d0d; } +.isDarkMode .selectBoxElement-container:hover .item-checkbox:checked + .item-icon { + background-color: #ff60bb; + border-color: #ff60bb; } -.pm_button.error:focus, .pm_button.error:hover { - background-color: #ff5555; - border-color: rgba(255, 85, 85, 0.7); } +.isDarkMode .item-checkbox + .item-icon:hover, +.isDarkMode .item-checkbox:hover + .item-icon { + background-color: #1d1f27; } -.pm_button.error { - background-color: rgba(255, 85, 85, 0.7); - border-color: #ff5555; } +.isDarkMode .items-column-list, +.isDarkMode .elementList-container-row { + background-color: #282a36; } + +.isDarkMode .composer-container { + background: #333545; } -html.protonmail .text-purple, -.settingsUsers-link-signatures { - color: #FF79C6 !important; } +.isDarkMode .message-header { + background-color: #333545; } + +.isDarkMode .view-column-detail { + background-color: #282a36; } -html.protonmail .text-red { - color: #ff5555 !important; } +.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; } -.pm_button.link { - color: #0d0d0d !important; } +.isDarkMode .message-content.frame.message-frame { + background: white; + color: black; } -.overviewSection-container .topUp-button { +.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; } -.settingsDashboard-plans [class*="Column-container"] .isCurrent { +.isDarkMode .dropDown-content { background: #282a36; - box-shadow: 0 0 8px #282a36, 0 0 0 2px #282a36; - border-bottom: 1px solid #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; } -.settingsDashboard-plans.free-active .freeColumn-container, -.settingsDashboard-plans.plus-active .plusColumn-container, -.settingsDashboard-plans.professional-active .professionalColumn-container, -.settingsDashboard-plans.visionary-active .visionaryColumn-container { - border-color: #282a36; - box-shadow: 0 0 8px #282a36, 0 0 0 2px #282a36; } +.isDarkMode .dropDown--bottom-right .dropDown-content::before, .isDarkMode .dropDown--bottom-right .dropDown-content::after { + background: #282a36; } -[class*="settingsDashboard-arrowToScroll"] .arrowsToScroll-button { - background: rgba(255, 121, 198, 0.7); } +.isDarkMode .dropDown--bottom-left::before, +.isDarkMode .dropDown--bottom-right::before, +.isDarkMode .dropDown--bottom::before { + border-bottom-color: #3e4153; } -[class*="settingsDashboard-arrowToScroll"] .arrowsToScroll-button:hover { - background: #ff79c6; } +.isDarkMode .dropDown--bottom-right { + border: 1px solid #3e4153; } -.vpnRow-add { +.isDarkMode .pm-field-icon-container[type="search"], .isDarkMode .pm-field[type="search"] { background-color: #333545; } -.vpnRow-add:hover { - background: #282a36; } +.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; } -.settingsDashboard-plans .freeColumn-free, -.totalRows-monthly-price, -.totalRows-yearly-price { - color: #0d0d0d; } +.isDarkMode .searchbox-field[type="search"]:not(#global_search) { + background: #e6eaf0; + color: #282a36; } -.totalRows-discount { - border-color: transparent #FF79C6; } +.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; } -.pm_modal .modal-dialog { - border-color: #282a36; } +.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; } -.pm_modal .modal-dialog .close { - color: #D8D8D8; +.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; } -.pm_badge { - color: #D8D8D8; } +.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; } -.pm_badge.primary { - background: #282a36; - color: #D8D8D8; } +.isDarkMode select.pm-field, .isDarkMode select.pm-field-icon-container { + background-color: #333545; + color: #e6eaf0; } -.pm_badge.success { - background: #FF79C6; - color: #D8D8D8; } +.isDarkMode .storageProgress-content.dropDown-content--rightbottom::before { + border-right-color: #282a36; } -.pm_table table th a, .pm_table table th .fa { - color: #FF79C6; } +.isDarkMode .sticky-title { + background: #2c2f3c; } -body .cg-notify-message.notification-success { - background-color: #FF79C6; - color: #D8D8D8; } +.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; } -.appConfigBody-is-mobile .sidebarApp-container { +.isDarkMode .main-area, .isDarkMode .main-area--noHeader, +.isDarkMode .main-area--withToolbar, .isDarkMode .main-area--withToolbar--noHeader { background: #282a36; } -.sidebar-btn-compose, .sidebar-btn-compose:active { - color: #3d3d3d !important; } +.isDarkMode .context-bar { + background: #282a36; } -.sidebar-btn-compose:hover { - color: #3d3d3d !important; } +.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; } -body .cg-notify-message.notification-success { - color: #3d3d3d !important; } +.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; } -.pm_badge.success { - color: #3d3d3d !important; } +.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; } |