Created
August 4, 2019 13:13
-
-
Save zidizei/e1ebd518b76cd590b58f26dc549513d9 to your computer and use it in GitHub Desktop.
Fork of the "ProtonMail DeepDark" UserStyle.
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
| /*Main color variables*/ | |
| :root { | |
| /*User colors*/ | |
| --main-color: #00adee; | |
| --main-background: #111111; | |
| --second-background: #181818; | |
| --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-background) !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 { | |
| font-family: 'Work Sans', 'Roboto', 'Ubuntu', Helvetica, sans-serif; | |
| line-height: 1.5em; | |
| background: var(--main-background) !important; | |
| color: var(--main-text) !important; | |
| } | |
| p, | |
| li:not(.labelColorSelector-item) { | |
| color: var(--dimmer-text) !important; | |
| } | |
| .fa { | |
| color: var(--main-text); | |
| fill: var(--main-text) !important; | |
| } | |
| .fa:hover { | |
| fill: var(--main-color) !important; | |
| } | |
| .fa.fa-angle-down { | |
| color: var(--main-text) !important; | |
| } | |
| #pm_main { | |
| color: var(--dimmer-text); | |
| } | |
| #pm_thread:focus { | |
| outline: 0 !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-color) !important; | |
| box-shadow: var(--shadow) !important; | |
| } | |
| div.tooltip-arrow { | |
| border-color: var(--main-color); | |
| } | |
| .tooltip.top .tooltip-arrow { | |
| border-top-color: var(--main-color) !important; | |
| } | |
| .message.hasSender.open .from-value[pt-tooltip]:before { | |
| content: attr(pt-tooltip); | |
| display: inline-block; | |
| position: absolute; | |
| left: 15px; | |
| top: 10px; | |
| color: white; | |
| font-weight: bold; | |
| font-size: 1.3em; | |
| letter-spacing: 2em; | |
| text-transform: uppercase; | |
| line-height: 2.8em; | |
| padding-top: .05em; | |
| padding-left: 1.1em; | |
| width: 2.8em; | |
| height: 2.8em; | |
| overflow: hidden; | |
| border-radius: 50%; | |
| background: var(--main-color); | |
| vertical-align: middle; | |
| } | |
| [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); | |
| } | |
| .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 .toggleDetails { | |
| background: var(--hover-background) !important; | |
| color: var(--dimmer-text); | |
| font-weight: bold; | |
| font-size: 0.787em; | |
| } | |
| #conversation-view .message .details, | |
| #conversation-view .message .summary { | |
| background: var(--second-background) !important; | |
| border-color: var(--hover-background) !important; | |
| } | |
| .message.hasSender.open .recipients-summary, | |
| .message.hasSender.open .recipients-details, | |
| .message.hasSender.open .contact.message-contact { | |
| margin-left: 64px; | |
| } | |
| /*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 { | |
| background: var(--hover-background) !important; | |
| } | |
| body .cg-notify-message.notification-success, | |
| body .cg-notify-message.notification-info { | |
| background: var(--main-color) !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