Created
March 3, 2019 16:38
-
-
Save kwhitaker/af4d387861c9f2f33c2ed448582db3da to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ==UserStyle== | |
| @name ProtonMail DeepDark | |
| @namespace gitlab.com/RaitaroH/ProtonMail-DeepDark | |
| @homepageURL https://gitlab.com/RaitaroH/ProtonMail-DeepDark | |
| @version 1.0.4 | |
| @updateURL https://gitlab.com/RaitaroH/ProtonMail-DeepDark/raw/master/ProtonMail-DeepDark.user.css | |
| @description Emails should be written and read in the dark. May the dark be kinder on thine eyes. (PrtonMail dark theme) | |
| @author RaitaroH | |
| @license GNU-V3.0 | |
| ==/UserStyle== */ | |
| /*Main color variables*/ | |
| :root | |
| { | |
| /*User colors*/ | |
| --main-color: #00adee; | |
| --main-background: #111111; | |
| --second-background: #181818; | |
| --message-background: #eff0f1; | |
| --hover-background: #232323; | |
| --main-text: #eff0f1; | |
| --dimmer-text: #CCCCCC; | |
| --shadow: 0 2px 3px 0 rgba(0,0,0,.2); | |
| --red: #DA4453; | |
| /*DeepDark colors*/ | |
| /* | |
| --main-color: #00adee; | |
| --main-background: #111111; | |
| --second-background: #181818; | |
| --hover-background: #232323; | |
| --main-text: #eff0f1; | |
| --dimmer-text: #CCCCCC; | |
| */ | |
| /*KDE colors*/ | |
| /* | |
| --main-color: #3DAEE9; | |
| --main-background: #232629; | |
| --second-background: #2a2e32; | |
| --hover-background: #31363b; | |
| --main-text: #eff0f1; | |
| --dimmer-text: #bdc3c7; | |
| */ | |
| /*Vertex Dark colors*/ | |
| /* | |
| --main-color: #4080fb; | |
| --main-background: #2B2B2C; | |
| --second-background: #353638; | |
| --hover-background: #515254; | |
| --main-text: #F3F3F5; | |
| --dimmer-text: #AEAFB0; | |
| */ | |
| /*Arc Dark colors*/ | |
| /* | |
| --main-color: #5294E2; | |
| --main-background: #343944; | |
| --second-background: #383C4A; | |
| --hover-background: #414A59; | |
| --main-text: #C1C8D1; | |
| --dimmer-text: #B3BAC5; | |
| */ | |
| /*Firefox Dark colors*/ | |
| /* | |
| --main-color: #5675B9; | |
| --main-background: #272B35; | |
| --second-background: #181D20; | |
| --hover-background: #353A44; | |
| --main-text: #E3EEF9; | |
| --dimmer-text: #606376; | |
| */ | |
| /*Firefox57 Dark colors*/ | |
| /* | |
| --main-color: #4080FB; | |
| --main-background: #0C0C0D; | |
| --second-background: #252526; | |
| --hover-background: #323234; | |
| --main-text: #F9F9FA; | |
| --dimmer-text: #D0D0D0; | |
| */ | |
| /*Discord colors*/ | |
| /* | |
| --main-color: #7289DA; | |
| --main-background: #1E2124; | |
| --second-background: #2F3136; | |
| --hover-background: #484B51; | |
| --main-text: #FFFFFF; | |
| --dimmer-text: #ADA8AA; | |
| */ | |
| /*YouTube dark colors*/ | |
| /* | |
| --main-color: #E52117; | |
| --main-background: #111111; | |
| --second-background: #232323; | |
| --hover-background: #343434; | |
| --main-text: #E1E1E1; | |
| --dimmer-text: #7F7F7F; | |
| */ | |
| /*YouTube light colors*/ | |
| /* | |
| --main-color: #E52117; | |
| --main-background: #F9F9F9; | |
| --second-background: #FFFFFF; | |
| --hover-background: #EAEAEA; | |
| --main-text: #111111; | |
| --dimmer-text: #43434B; | |
| */ | |
| /*Mint-Y-Dark colors*/ | |
| /* | |
| --main-color: #9AB87C; | |
| --main-background: #2F2F2F; | |
| --second-background: #383838; | |
| --hover-background: #404040; | |
| --main-text: #FFFFFF; | |
| --dimmer-text: #D5DADA; | |
| */ | |
| /*9anime colors*/ | |
| /* | |
| --main-color: #723f8c; | |
| --main-background: #0B0A0D; | |
| --second-background: #17151C; | |
| --hover-background: #1E1C25; | |
| --main-text: #B4B4B4; | |
| --dimmer-text: #747474; | |
| */ | |
| /*Black and white*/ | |
| /* | |
| --main-color: #ffffff; | |
| --main-background: #000000; | |
| --second-background: #0a0a0a; | |
| --hover-background: #0f0f0f; | |
| --main-text: #b4b4b4; | |
| --dimmer-text: #828282; | |
| */ | |
| /*Yellow (colors from petrocompletions)*/ | |
| /* | |
| --main-color: #FFC700; | |
| --main-background: #141414; | |
| --second-background: #202222; | |
| --hover-background: #353838; | |
| --main-text: #EFF0F1; | |
| --dimmer-text: #9F9999; | |
| */ | |
| /*Yellow 2*/ | |
| /* | |
| --main-color: #ffc700; | |
| --main-background: #0a0800; | |
| --second-background: #0c0a04; | |
| --hover-background: #0f0d05; | |
| --main-text: #fffdf5; | |
| --dimmer-text: #fff8e1; | |
| */ | |
| /*Ubuntu grey colors*/ | |
| /* | |
| --main-color: #EF7847; | |
| --main-background: #312D2A; | |
| --second-background: #3D3C38; | |
| --hover-background: #59564D; | |
| --main-text: #F2F1EF; | |
| --dimmer-text: #E6E5E3; | |
| */ | |
| /*Ubuntu purple colors*/ | |
| /* | |
| --main-color: #EF7847; | |
| --main-background: #2C071A; | |
| --second-background: #430B28; | |
| --hover-background: #520D30; | |
| --main-text: #F2F1EF; | |
| --dimmer-text: #E6E5E3; | |
| */ | |
| /*Orange*/ | |
| /* | |
| --main-color: #ff6905; | |
| --main-background: #0a0400; | |
| --second-background: #0e0702; | |
| --hover-background: #110903; | |
| --main-text: #fff9f5; | |
| --dimmer-text: #ffede1; | |
| */ | |
| /*Jisho 夜明け colors https://userstyles.org/styles/115621/jisho*/ | |
| /* | |
| --main-color: #EF7D6C; | |
| --main-background: #332222; | |
| --second-background: #2A1B1B; | |
| --hover-background: #863B2F; | |
| --main-text: #EFB26C; | |
| --dimmer-text: #986E3F; | |
| */ | |
| } | |
| /*Scrollbar fix for chrome*/ | |
| body::-webkit-scrollbar-thumb | |
| { | |
| height: 56px; | |
| background: hsla(0, 0%, 53.3%, .4); | |
| } | |
| body::-webkit-scrollbar | |
| { | |
| width: 8px; | |
| } | |
| /*Changed text highlight*/ | |
| ::selection | |
| { | |
| background: var(--main-color) !important; | |
| color: var(--main-text) !important; | |
| } | |
| ::-moz-selection | |
| { | |
| background: var(--main-color) !important; | |
| color: var(--main-text) !important; | |
| } | |
| input::-moz-selection, textarea::-moz-selection | |
| { | |
| background: var(--main-color) !important; | |
| color: var(--main-text) !important; | |
| } | |
| /*Outline for links*/ | |
| a | |
| { | |
| color: var(--main-text) !important; | |
| outline-color: var(--main-color) !important; | |
| } | |
| a:hover | |
| { | |
| color: var(--main-color) !important; | |
| } | |
| /*Background for the entire page*/ | |
| html, body | |
| { | |
| background: var(--main-background) !important; | |
| color: var(--main-text) !important; | |
| } | |
| p, li:not(.labelModal-item) | |
| { | |
| color: var(--dimmer-text) !important; | |
| } | |
| fa | |
| { | |
| fill: var(--main-text) !important; | |
| } | |
| fa:hover | |
| { | |
| fill: var(--main-color) !important; | |
| } | |
| /*Progress*/ | |
| .protonLoader | |
| { | |
| background: var(--hover-background) !important; | |
| border-color: var(--hover-background) !important; | |
| box-shadow: var(--shadow) !important; | |
| } | |
| .protonLoader::after | |
| { | |
| border: 5px solid var(--hover-background) !important; | |
| border-top-color: var(--main-color) !important; | |
| } | |
| .protonLoaderIcon > svg > g:nth-child(1) > path | |
| { | |
| fill: var(--main-color) !important; | |
| } | |
| /*Login*/ | |
| .pm_panel.alt, .pm-loader-fullpage | |
| { | |
| background: var(--second-background) !important; | |
| border-color: var(--hover-background) !important; | |
| } | |
| .loginForm-btn-help, .loginForm-link-signup | |
| { | |
| text-decoration: none !important; | |
| } | |
| .loginForm-btn-help:hover, .loginForm-link-signup, | |
| .customPasswordToggler.password-container .togglePassword-btn-toggle:hover, .togglePassword-btn-toggle.togglePassword-btn-display | |
| { | |
| color: var(--main-color) !important; | |
| } | |
| /*Navbar*/ | |
| .headerSecured-container, .headerNoAuth-container | |
| { | |
| background: var(--second-background) !important; | |
| box-shadow: var(--shadow); | |
| } | |
| .navigation > li.active, .navigation > li:hover | |
| { | |
| border-color: var(--main-color) !important; | |
| } | |
| /*Search*/ | |
| .search-form-fieldset | |
| { | |
| background: var(--hover-background) !important; | |
| } | |
| /*advanced search*/ | |
| div.tooltip-inner | |
| { | |
| background: var(--main-background) !important; | |
| box-shadow: var(--shadow) !important; | |
| } | |
| .tooltip.top .tooltip-arrow | |
| { | |
| border-top-color: var(--main-background) !important; | |
| } | |
| [class*="searchForm-action-button-"]:hover | |
| { | |
| color: var(--main-color) !important; | |
| } | |
| .searchForm-advanced-wrapper, .searchForm-advanced-main | |
| { | |
| background: var(--hover-background) !important; | |
| } | |
| .pm_form input[type="email"], .pm_form input[type="number"], .pm_form input[type="password"], | |
| .pm_form input[type="search"], .pm_form input[type="tel"], .pm_form input[type="text"], | |
| .pm_form input[type="url"], .pm_form select, .pm_form textarea | |
| { | |
| color: var(--main-text) !important; | |
| border-color: var(--hover-background) !important; | |
| background: var(--main-background) !important; | |
| } | |
| .pm_form input[type="email"]:focus, .pm_form input[type="number"]:focus, .pm_form input[type="password"]:focus, | |
| .pm_form input[type="search"]:focus, .pm_form input[type="tel"]:focus, .pm_form input[type="text"]:focus, | |
| .pm_form input[type="url"]:focus, .pm_form select:focus, .pm_form textarea:focus | |
| { | |
| color: var(--main-text) !important; | |
| border-color: var(--main-color) !important; | |
| } | |
| .searchForm-advanced-container label | |
| { | |
| color: var(--main-text) !important; | |
| } | |
| /*info*/ | |
| html.protonmail .text-purple | |
| { | |
| color: var(--main-color) !important; | |
| } | |
| /*checkboxes*/ | |
| .customMaskInput-mask | |
| { | |
| background: var(--main-background) !important; | |
| border-color: var(--main-color) !important; | |
| } | |
| .customCheckbox-input:checked + .customCheckbox-mask | |
| { | |
| box-shadow: inset 0 0 0 2px var(--main-background),inset 0 0 0 10px var(--main-color) !important; | |
| border-color: var(--main-color) !important; | |
| } | |
| .customRadio-input:checked + .customRadio-mask | |
| { | |
| box-shadow: inset 0 0 0 2px var(--main-background),inset 0 0 0 10px var(--main-color) !important; | |
| } | |
| /*calendar*/ | |
| .pika-single | |
| { | |
| background: var(--second-background) !important; | |
| border-color: var(--hover-background) !important; | |
| } | |
| .pika-label | |
| { | |
| color: var(--main-text) !important; | |
| } | |
| .pika-button | |
| { | |
| background: var(--hover-background) !important; | |
| color: var(--dimmer-text) !important; | |
| } | |
| .pika-button:hover, body .is-today .pika-button | |
| { | |
| color: var(--main-color) !important; | |
| } | |
| .pm_button.primary | |
| { | |
| background: var(--main-color) !important; | |
| border-color: var(--main-color) !important; | |
| } | |
| .pm_button.primary:focus, .pm_button.primary:hover | |
| { | |
| background: var(--main-color) !important; | |
| color: var(--main-text) !important; | |
| filter: brightness(110%); | |
| } | |
| /*Sidebar*/ | |
| .sidebarApp-container | |
| { | |
| margin-top: 15px; /*extra spacing due to navbar box-shadow*/ | |
| } | |
| #ptSidebar, .headerSecuredDesktop-logo | |
| { | |
| background: var(--second-background) !important; | |
| border-color: var(--hover-background) !important; | |
| } | |
| .sidebarApp-container .sidebar-btn-compose, .sidebarApp-container .sidebar-btn-compose:hover | |
| { | |
| background: var(--main-color) !important; | |
| border-color: var(--main-color) !important; | |
| } | |
| .sidebarApp-container .sidebar-btn-compose:hover | |
| { | |
| filter: brightness(110%); | |
| color: var(--main-text) !important; | |
| } | |
| .settingsMenu-container .sidebarApp-menu .sidebarApp-item::after, .sidebarApp-item .navigationItem-aside | |
| { | |
| background: transparent !important; | |
| } | |
| /*elements*/ | |
| .menuLabel-item.active .menuLabel-link, .sidebarApp-item.active .navigationItem-item, .sidebarApp-item.active .sidebarApp-link, | |
| .sidebarApp-item .navigationItem-item:hover, .sidebarApp-item .sidebarApp-link:hover, .sidebarApp-menu .menuLabel-link:hover | |
| { | |
| background: var(--hover-background) !important; | |
| } | |
| .sidebarApp-item.active .navigationItem-aside | |
| { | |
| background: transparent !important; | |
| } | |
| .sidebarApp-item.active .navigationItem-icon, | |
| .sidebarApp-item .navigationItem-item:hover .navigationItem-icon, .sidebarApp-item .sidebarApp-link:hover .navigationItem-icon, | |
| .sidebarApp-menu .menuLabel-link:hover .navigationItem-icon, .sidebarApp-item:hover .sidebarApp-icon | |
| { | |
| transition: none !important; | |
| color: var(--main-color) !important; | |
| } | |
| .sidebarApp-container .footer div.storage strong | |
| { | |
| color: var(--main-color) !important; | |
| } | |
| .sidebarApp-container .footer .storageBar | |
| { | |
| background: var(--hover-background) !important; | |
| } | |
| /*Contacts*/ | |
| .contactList-container | |
| { | |
| background-color: var(--main-background) !important; | |
| } | |
| .sidebarApp-item .navigationItem-item, .sidebarApp-item .sidebarApp-link, .sidebarApp-menu .menuLabel-link | |
| { | |
| color: var(--main-text) !important; | |
| } | |
| .sidebarContact-container .sidebarApp-menu .sidebarApp-item::after | |
| { | |
| background: transparent !important; | |
| } | |
| .contactsToolbar-container, .pm_table table tr:not(:last-child) td | |
| { | |
| border-color: var(--hover-background) !important; | |
| } | |
| .contactList-item-activeCursorContact .customCheckbox-container | |
| { | |
| border-left-color: var(--main-color) !important; | |
| } | |
| .contactList-tbody | |
| { | |
| background: var(--hover-background) !important; | |
| } | |
| /*add contacts*/ | |
| .contactDetails-fields-locked-notice | |
| { | |
| background: var(--main-background) !important; | |
| } | |
| .contactItem-label > input | |
| { | |
| color: var(--main-text) !important; | |
| } | |
| .contactItem-inputs input:not([type="checkbox"]), .contactItem-inputs textarea | |
| { | |
| background: var(--main-background) !important; | |
| border-color: var(--hover-background) !important; | |
| color: var(--main-text) !important; | |
| } | |
| .contactItem-inputs input:not([type="checkbox"]):focus, .contactItem-inputs textarea:focus, | |
| .contactItem-inputs input:not([type="checkbox"]):active, .contactItem-inputs textarea:active | |
| { | |
| border-color: var(--main-color) !important; | |
| } | |
| .contactItem-actions > button:not(.pm_button), .contactItem-toggle-sort | |
| { | |
| color: var(--main-color) !important; | |
| } | |
| /*lock icon*/ | |
| .contactDetails-fields-ico > svg | |
| { | |
| color: var(--main-color) !important; | |
| fill: var(--main-color) !important; | |
| } | |
| .contactDetails-fields-ico | |
| { | |
| background-color: var(--hover-background) !important; | |
| } | |
| /*dropdown*/ | |
| .contactItem-selectType | |
| { | |
| background: var(--main-background) !important; | |
| } | |
| .contactItem-selectType li a:hover | |
| { | |
| background: var(--hover-background) !important; | |
| } | |
| /*Welcome*/ | |
| .conversationPlaceholder header | |
| { | |
| color: var(--main-text) !important; | |
| } | |
| .conversationPlaceholder #storageStatus .wrap span | |
| { | |
| color: var(--dimmer-text) !important; | |
| } | |
| .conversationPlaceholder #storageStatus .wrap span strong | |
| { | |
| color: var(--main-color) !important; | |
| } | |
| .conversationPlaceholder header, .conversationPlaceholder section | |
| { | |
| border-color: var(--hover-background) !important; | |
| } | |
| .storageBar | |
| { | |
| background-color: var(--dimmer-text) !important; | |
| } | |
| .conversationPlaceholder section img | |
| { | |
| filter: invert(.92) grayscale(1); | |
| } | |
| /*Emails*/ | |
| #conversation-view .message.marked .details, #conversation-view .message.marked .summary | |
| { | |
| box-shadow: inset 5px 0 0 var(--main-color) !important; | |
| } | |
| #conversation-view header, #conversation-view .message | |
| { | |
| border-color: var(--hover-background) !important; | |
| } | |
| #conversation-view .message .summary | |
| { | |
| color: var(--main-text) !important; | |
| } | |
| #conversation-view .message .summary .meta .contact span, | |
| #conversation-view .message .details .recipients-summary strong, | |
| .messageContacts-email, | |
| .encrypted-subject .header-name, .encrypted-subject i, .messageContacts-where, | |
| span.gmail_quote > font, | |
| #conversation-view .message .frame | |
| { | |
| color: var(--dimmer-text) !important; | |
| } | |
| #conversation-view .message .message-frame | |
| { | |
| background-color: var(--message-background) !important; | |
| } | |
| #conversation-view .message .toggleDetails | |
| { | |
| color: var(--main-color) !important; | |
| } | |
| #conversation-view .message .details, #conversation-view .message .summary | |
| { | |
| background: var(--second-background) !important; | |
| border-color: var(--hover-background) !important; | |
| } | |
| /*time*/ | |
| #conversation-view .message .summary .labels, #conversation-view .message .summary .location.folders, | |
| #conversation-view .message .summary .message-attachments, #conversation-view .message .summary .status, | |
| #conversation-view .message .summary .time, #conversation-view .message .summary .summary-right, | |
| #conversation-view .message.unread:not(.open) .summary .labels, #conversation-view .message.unread:not(.open) .summary .location.folders, | |
| #conversation-view .message.unread:not(.open) .summary .status, #conversation-view .message.unread:not(.open) .summary .summary-right, | |
| #conversation-view .message.unread:not(.open) .summary .time | |
| { | |
| background: var(--second-background) !important; | |
| border-color: var(--hover-background) !important; | |
| } | |
| /*extra emails*/ | |
| .messageExtra-container > [class*="-container"] | |
| { | |
| background: var(--main-background) !important; | |
| border-color: var(--hover-background) !important; | |
| color: var(--main-text) !important; | |
| } | |
| .messageExtra-container > [class*="-container"] [class*="-button"] | |
| { | |
| background: var(--hover-background) !important; | |
| border-color: var(--hover-background) !important; | |
| color: var(--main-text) !important; | |
| } | |
| .messageExtra-container > [class*="-container"] [class*="-button"]:hover | |
| { | |
| color: var(--main-color) !important; | |
| } | |
| /*code*/ | |
| body .pm_form textarea[readonly], pre, code | |
| { | |
| background: var(--hover-background) !important; | |
| border-color: var(--hover-background) !important; | |
| color: var(--dimmer-text) !important; | |
| } | |
| #eo-message .email blockquote, #eo-reply iframe blockquote, .message .frame > .email blockquote | |
| { | |
| border-color: var(--hover-background) !important; | |
| } | |
| /*making some emails readable*/ | |
| .bodyDecrypted > tbody td, .bodyDecrypted > tbody tr td, .bodyDecrypted > tbody tr td div, .bodyDecrypted > table, .bodyDecrypted > tbody, | |
| .wrapper > tbody > tr > td | |
| { | |
| background-color: transparent !important; | |
| border-color: var(--hover-background) !important; | |
| color: var(--dimmer-text) !important; | |
| } | |
| /*Inbox*/ | |
| #conversation-view .frame, #pm_main | |
| { | |
| background: var(--main-background) !important; | |
| } | |
| .pm_toolbar | |
| { | |
| box-shadow: inset 0 -1px 0 var(--hover-background) !important; | |
| } | |
| body #conversation-list-columns | |
| { | |
| border-color: var(--hover-background) !important; | |
| } | |
| /*no messages selected*/ | |
| .countElementsSelected-icon, h1, h2, h3, h4, h5, h6 | |
| { | |
| color: var(--main-text) !important; | |
| } | |
| /*option buttons*/ | |
| .pm_buttons a, .pm_buttons .pm_buttons-child, .countElementsSelected-btn-unselect, | |
| .pm_button:focus, .pm_button:hover, .pm_button | |
| { | |
| background: var(--hover-background) !important; | |
| border-color: var(--hover-background) !important; | |
| } | |
| .pm_buttons, .pm_buttons > * | |
| { | |
| border-color: var(--hover-background) !important; | |
| } | |
| .pm_buttons a, .pm_buttons .pm_buttons-child, .countElementsSelected-btn-unselect, .sidebarApp-item .navigationItem-btn-refresh, .pm_button | |
| { | |
| color: var(--main-text) !important; | |
| } | |
| .pm_toolbar .pm_buttons .pm_buttons-child:hover, .pm_toolbar .pm_buttons > :first-child:hover, | |
| .pm_toolbar .ua-firefox.ua-desktop-linux .pm_button:hover, .pm_toolbar .ua-firefox.ua-desktop-linux .pm_buttons a:hover, | |
| .pm_toolbar .pm_button:focus, .pm_toolbar .pm_button:hover, | |
| .sidebarApp-item .navigationItem-btn-refresh:hover .fa, | |
| .fa.fa-eye-slash.readUnread-btn-unread:hover, | |
| #conversation-view .message .details .pm_buttons a:hover, | |
| .pm_button:focus, .pm_button:hover | |
| { | |
| color: var(--main-color) !important; | |
| } | |
| .chooseLayoutBtns-btn-column:hover, .chooseLayoutBtns-btn-rows:hover | |
| { | |
| filter: brightness(150%); | |
| } | |
| .pm_buttons a.active, .pm_buttons a:active | |
| { | |
| box-shadow: var(--shadow) !important; | |
| } | |
| /*wtf*/ | |
| .paginator-disabled-main .paginator-dropdown, .paginator-disabled-next .paginator-btn-next, .paginator-disabled-previous .paginator-btn-previous, | |
| .readUnread-container.disabled [class*="readUnread-btn"], .pm_buttons .disabled, .pm_buttons [disabled] | |
| { | |
| background: var(--main-background) !important; | |
| box-shadow: none !important; | |
| } | |
| /*messages*/ | |
| .conversation | |
| { | |
| background: var(--main-background) !important; | |
| } | |
| .conversation.read | |
| { | |
| background: var(--hover-background) !important; | |
| } | |
| .conversation.read, .conversation.active, .conversation.marked, .conversation | |
| { | |
| border-color: var(--hover-background) !important; | |
| } | |
| .conversation .row .senders, .conversation .time, .conversation .row .meta .fa-star-o | |
| { | |
| color: var(--dimmer-text) !important; | |
| } | |
| .conversation.marked::before | |
| { | |
| background-color: var(--main-color) !important; | |
| } | |
| .conversation.active | |
| { | |
| color: var(--main-color) !important; | |
| background: var(--second-background) !important; | |
| } | |
| .conversation.active .time, .conversation.active .row .senders, .conversation .row .meta .fa-star, | |
| #conversation-view .message .details .recipients-summary | |
| { | |
| color: var(--main-color) !important; | |
| } | |
| /*Dropdown menus*/ | |
| .pm_dropdown, .scrollbox-container, .scrollbox-container::after, .scrollbox-container::after, .scrollbox-container::before | |
| { | |
| background: var(--main-background) !important; | |
| border-color: var(--hover-background) !important; | |
| } | |
| .pm_dropdown > a, .pm_dropdown > button, .pm_dropdown > ul > li | |
| { | |
| border-color: var(--hover-background) !important; | |
| } | |
| .dropdown-folder-search .fa.dropdown-folder-search-icon, | |
| .dropdown-folder-create-button, .createLabel-button, | |
| .pm_dropdown > a, .pm_dropdown > button, .pm_dropdown > ul > li, | |
| .navigationUser-head | |
| { | |
| color: var(--main-text) !important; | |
| } | |
| .dropdown-folder-scrollbox-group-item-button:hover > *, | |
| .dropdown-folder-create-button:hover, .createLabel-button:hover, | |
| .pm_dropdown > a:hover, .pm_dropdown > button:hover, .pm_dropdown > ul > li:hover | |
| { | |
| color: var(--main-color) !important; | |
| } | |
| .pm_dropdown > button .fa.phishingBtn-icon | |
| { | |
| fill: var(--main-text) !important; | |
| } | |
| .pm_dropdown > button:hover .fa.phishingBtn-icon | |
| { | |
| fill: var(--main-color) !important; | |
| } | |
| .alert.alert-info, .alert, body .cg-notify-message.notification-success, body .cg-notify-message.notification-info | |
| { | |
| background: var(--hover-background) !important; | |
| } | |
| .alert | |
| { | |
| color: var(--main-color) !important; | |
| } | |
| body .cg-notify-message | |
| { | |
| box-shadow: var(--shadow) !important; | |
| } | |
| /*Tutorial*/ | |
| #pm_wizard | |
| { | |
| background: var(--hover-background) !important; | |
| } | |
| #pm_wizard .close | |
| { | |
| color: var(--main-text) !important; | |
| } | |
| #pm_wizard .close:hover | |
| { | |
| color: var(--main-color) !important; | |
| } | |
| #pm_wizard.wizardStep-1 .pagination .pagination-step-1 a, #pm_wizard.wizardStep-2 .pagination .pagination-step-2 a, | |
| #pm_wizard.wizardStep-3 .pagination .pagination-step-3 a, #pm_wizard.wizardStep-4 .pagination .pagination-step-4 a | |
| { | |
| background-color: var(--main-color) !important; | |
| } | |
| #pm_wizard [class^="step-"] .body strong | |
| { | |
| color: var(--main-color) !important; | |
| } | |
| /*Settings*/ | |
| /*back*/ | |
| .sidebarApp-container .sidebar-btn-back | |
| { | |
| background: var(--hover-background) !important; | |
| border-color: var(--hover-background) !important; | |
| } | |
| .sidebarApp-container .sidebar-btn-back:hover | |
| { | |
| color: var(--main-color) !important; | |
| } | |
| .headerBlock-container, #pm_settings .settings .squireToolbar-container, #pm_settings .settings .angular-squire-wrapper, | |
| .pm_sort-item-content, .pm_sort-container | |
| { | |
| border-color: var(--hover-background) !important; | |
| } | |
| .squireToolbar-separator | |
| { | |
| background: var(--second-background) !important; | |
| } | |
| /*signature*/ | |
| [class*="squireToolbar-row"], [class*="squireToolbar-action-"], [class*="squireToolbar-action-"]:hover | |
| { | |
| background: var(--hover-background) !important; | |
| border-color: var(--hover-background) !important; | |
| } | |
| .pm_form label, [class*="squireToolbar-action-"] | |
| { | |
| color: var(--main-text) !important; | |
| } | |
| [class*="squireToolbar-action-"]:hover | |
| { | |
| color: var(--main-color) !important; | |
| } | |
| .as-sortable-item-handle::before | |
| { | |
| opacity: .8; | |
| } | |
| .pm_badge, .pm_tag | |
| { | |
| background: var(--main-color) !important; | |
| } | |
| /*delete account*/ | |
| .pm_button.error | |
| { | |
| color: var(--main-text) !important; | |
| background: var(--red) !important; | |
| } | |
| .pm_button.error:focus, .pm_button.error:hover | |
| { | |
| filter: brightness(110%); | |
| } | |
| /*add dialog*/ | |
| .pm_modal .modal-dialog | |
| { | |
| box-shadow: var(--shadow) !important; | |
| } | |
| .pm_modal .modal-dialog, .labelModal-item-mask | |
| { | |
| border-color: var(--second-background) !important; | |
| } | |
| .pm_modal .modal-dialog .close, | |
| .pm_modal .modal-dialog .modal-content, .pm_modal .modal-dialog, .pm_modal .modal-dialog .modal-footer | |
| { | |
| background: var(--second-background) !important; | |
| } | |
| .pm_modal .modal-dialog .modal-content .modal-body | |
| { | |
| box-shadow: none !important; | |
| } | |
| .pm_modal .modal-dialog .close:hover | |
| { | |
| color: var(--main-color) !important; | |
| } | |
| /*security settings*/ | |
| .pm_table table th | |
| { | |
| background: var(--second-background) !important; | |
| border-color: var(--hover-background) !important; | |
| } | |
| .pm_table table.bordered, .pm_table table tr:not(:last-child) td, .pm_table table thead | |
| { | |
| border-color: var(--hover-background) !important; | |
| } | |
| .pm_table table td, .pm_table table th | |
| { | |
| color: var(--main-text) !important; | |
| } | |
| /*toggle*/ | |
| .pm_toggle-checkbox:focus + .pm_toggle-label, .pm_toggle-label:hover, .pm_toggle-checkbox:checked + .pm_toggle-label, .pm_toggle-checkbox + .pm_toggle-label | |
| { | |
| background: var(--hover-background) !important; | |
| border-color: var(--hover-background) !important; | |
| } | |
| .pm_toggle-label::after | |
| { | |
| background: var(--dimmer-text) !important; | |
| opacity: .7; | |
| } | |
| .pm_toggle-checkbox:checked + .pm_toggle-label::after | |
| { | |
| background: var(--main-color) !important; | |
| opacity: 1; | |
| } | |
| /*adresses*/ | |
| .pm_table table tr.hasTable table | |
| { | |
| background: var(--second-background) !important; | |
| border-color: var(--hover-background) !important; | |
| } | |
| /*proton vpn*/ | |
| .vpn-container .vpn-ressourcesSection-clients-list | |
| { | |
| background: var(--hover-background) !important; | |
| border-color: var(--hover-background) !important; | |
| } | |
| .vpn-container .vpn-ressourcesSection-clients-item-container | |
| { | |
| background: var(--second-background) !important; | |
| } | |
| .vpn-container .vpn-ressourcesSection-clients-item-container:hover | |
| { | |
| box-shadow: none !important; | |
| } | |
| /*Dashboard*/ | |
| .settingsDashboard-overview-section-table-container, #pm_settings .well, .settingsDashboard-plans [class*="Column-container"] > :not(:last-child), | |
| .settingsDashboard-plans [class*="Column-container"], .settingsDashboard-plans .totalRows-container > label:not(:first-of-type)::before | |
| { | |
| border-color: var(--hover-background) !important; | |
| } | |
| .settingsDashboard-overview-section-table-container .overviewSection-container .overviewSection-tbody-billing > tr > th, | |
| .settingsDashboard-overview-section-table-container .overviewSection-container .overviewSection-tbody > tr > th | |
| { | |
| color: var(--main-text) !important; | |
| } | |
| .overviewSection-tbody > tr td strong, .settingsDashboard-plans [class*="Column-container"] > :not(:last-child) | |
| { | |
| color: var(--dimmer-text) !important; | |
| } | |
| .overviewSection-container .topUp-button, .giftCodeBtn-container, .settingsDashboard-plans .freeColumn-free, | |
| .settingsDashboard-plans .planPrice, .totalRows-2-years-price, .totalRows-monthly-price, .totalRows-yearly-price | |
| { | |
| color: var(--main-color) !important; | |
| } | |
| .settingsDashboard-overview-section-table-container .overviewSection-container .overviewSection-tbody-billing | |
| { | |
| background: var(--hover-background) !important; | |
| } | |
| .settingsDashboard-plans { | |
| background: var(--second-background) !important; | |
| } | |
| .settingsDashboard-plans::after, .settingsDashboard-plans::before | |
| { | |
| background: transparent !important; | |
| } | |
| .settingsDashboard-plans [class*="Column-container"] .isCurrent | |
| { | |
| background-color: var(--main-color) !important; | |
| border-color: var(--main-color) !important; | |
| box-shadow: 0 0 8px var(--main-color),0 0 0 2px var(--main-color) !important; | |
| } | |
| .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: var(--main-color) !important; | |
| box-shadow: 0 0 8px var(--main-color),0 0 0 2px var(--main-color) !important; | |
| } | |
| [class*="settingsDashboard-arrowToScroll"] .arrowsToScroll-button | |
| { | |
| background-color: var(--hover-background) !important; | |
| box-shadow: var(--shadow) !important; | |
| } | |
| /*Compose email*/ | |
| #pm_composer .composer | |
| { | |
| box-shadow: var(--shadow) !important; | |
| } | |
| .composerHeader-container | |
| { | |
| background: var(--hover-background) !important; | |
| } | |
| #pm_composer .composer .row | |
| { | |
| border-color: var(--hover-background) !important; | |
| } | |
| #pm_composer .composer .row, .squireEditor-loaded .row, | |
| #pm_composer input, #pm_composer select, #pm_composer textarea | |
| { | |
| color: var(--main-text) !important; | |
| background: var(--main-background) !important; | |
| } | |
| .composerInputMeta-overlay, .autocompleteEmails-autocomplete, | |
| .autocomplete-container .awesomplete li[aria-selected="true"], | |
| .autocomplete-container .awesomplete li[aria-selected="true"]:hover, | |
| .autocompleteEmails-autocomplete li[aria-selected="true"], | |
| .autocompleteEmails-autocomplete li[aria-selected="true"]:hover, | |
| #pm_composer .composer footer, .squireEditor-loaded footer | |
| { | |
| border-color: var(--hover-background) !important; | |
| background: var(--hover-background) !important; | |
| } | |
| .autocompleteEmailsItem-icon .encryptionIcon, .autocompleteEmails-btn-remove:hover | |
| { | |
| color: var(--main-color) !important; | |
| } | |
| .composerInputMeta-overlay, .composerTime-container, .autocompleteEmails-label, .autocompleteEmails-btn-remove | |
| { | |
| color: var(--main-text) !important; | |
| } | |
| .composerInputMeta-overlay-list .svg-ellipsis-clipper, .autocompleteEmails-item | |
| { | |
| background: transparent !important; | |
| } | |
| .autocompleteEmails-item | |
| { | |
| border-color: var(--hover-background) !important; | |
| background: var(--hover-background) !important; | |
| } | |
| /*expiration time*/ | |
| #pm_composer .composer footer .pm_button svg, .squireEditor-loaded footer .pm_button svg | |
| { | |
| fill: var(--main-text) !important; | |
| } | |
| #pm_composer .composer footer .pm_button:hover svg, .squireEditor-loaded footer .pm_button:hover svg | |
| { | |
| fill: var(--main-color) !important; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment