ProtonMail DeepDark by raitarohikami
Imported from https://github.com/RaitaroH/ProtonMail-DeepDark/raw/master/ProtonMailDeepDark.user.css
Details
Authorraitarohikami
LicenseGNU-V3.0
Created atApril 9, 2021 10:24
Updated atApril 9, 2021 10:24
Applies tounset
Statistics
Learn how we calculate statistics in the FAQ.
Total views321
Total installs602
Weekly installs17
Description
Emails should be written and read in the dark. May the dark be kinder on thine eyes. (PrtonMail dark theme)
Notes
Userstyle doesn't have notes.History
Daily snapshots of style statistics.
Source code
/* ==UserStyle==
@name ProtonMail DeepDark
@namespace gitlab.com/RaitaroH/ProtonMail-DeepDark
@homepageURL https://gitlab.com/RaitaroH/ProtonMail-DeepDark
@version 1.1.1
@updateURL https://gitlab.com/RaitaroH/ProtonMail-DeepDark/raw/master/ProtonMailDeepDark.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
@preprocessor stylus
@var select stylus-deepdark-style "Preset themes" [
"Deep-Dark",
"Inspired-Dark",
"Breeze-Dark",
"HavocOS",
"Arc-Dark",
"Vertex-Dark",
"Mint-Y-Dark",
"Adapta-Nokto",
"Adapta-Breath-Nokto",
"Gruvbox-Dark",
"Gruvbox-Light",
"NierAutomata-Dark",
"NierAutomata-Light",
"Solarized-Dark",
"Solarized-Light",
"9anime",
"Firefox-Dark",
"Firefox-57",
"Discord",
"YouTube-Dark",
"Black-and-White",
"Yellow",
"Yellow-2",
"Ubuntu-Grey",
"Ubuntu-Purple",
"Orange",
"Jisho",
"Custom"
]
@var select colorR "Red color" [
"Default",
"Solarized",
"Gruvbox Dark",
"Gruvbox Dark Intense",
"Gruvbox Light",
"Gruvbox Light Intense",
"Custom"
]
@var color mainColor "Custom main color" "#367bf0"
@var color mainBackground "Custom main background" "#22242d"
@var color secondBackground "Custom second background" "#242730"
@var color hoverBackground "Custom hover background" "#4e5467"
@var color mainText "Custom main text" "#eee"
@var color dimmerText "Custom second text" "#ccc"
@var color colorShadow "Custom shadow color" "rgba(56, 60, 74, .3)"
@var color colorRed "Custom red color" "#d31919"
==/UserStyle== */
@-moz-document domain('mail.protonmail.com') {
/*Theme made by RaitaroH @https://gitlab.com/RaitaroH/YouTube-DeepDark*/
/*GNU General Public License v3.0.*/
/*Main color variables*/
:root
{
if stylus-deepdark-style == "Deep-Dark" {
--main-color: #00adee;
--main-background: #111;
--second-background: #181818;
--hover-background: #232323;
--main-text: #eff0f1;
--dimmer-text: #ccc;
--shadow: 0 1px 0.5px rgba(0, 0, 0, .3);
}
else if stylus-deepdark-style == "Inspired-Dark" {
--main-color: #5e8acc;
--main-background: #232629;
--second-background: #181818;
--hover-background: #515254;
--main-text: #eee;
--dimmer-text: #ccc;
--shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
}
else if stylus-deepdark-style == "Breeze-Dark" {
--main-color: #3daee9;
--main-background: #232629;
--second-background: #2a2e32;
--hover-background: #31363b;
--main-text: #eff0f1;
--dimmer-text: #bdc3c7;
--shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
}
else if stylus-deepdark-style == "Vertex-Dark" {
--main-color: #4080fb;
--main-background: #2b2b2c;
--second-background: #353638;
--hover-background: #515254;
--main-text: #f3f3f5;
--dimmer-text: #aeafb0;
--shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
}
else if stylus-deepdark-style == "Arc-Dark" {
--main-color: #5294e2;
--main-background: #343944;
--second-background: #383c4a;
--hover-background: #414a59;
--main-text: #c1c8d1;
--dimmer-text: #b3bac5;
--shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
}
else if stylus-deepdark-style == "Firefox-Dark" {
--main-color: #5675b9;
--main-background: #272b35;
--second-background: #181d20;
--hover-background: #353a44;
--main-text: #e3eef9;
--dimmer-text: #bec0cc;
--shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
}
else if stylus-deepdark-style == "Firefox-57" {
--main-color: #4080fb;
--main-background: #0c0c0d;
--second-background: #252526;
--hover-background: #323234;
--main-text: #f9f9fa;
--dimmer-text: #d0d0d0;
--shadow: 0 1px 0.5px rgba(54, 54, 54, .2);
}
else if stylus-deepdark-style == "Discord" {
--main-color: #7289da;
--main-background: #1e2124;
--second-background: #2f3136;
--hover-background: #484b51;
--main-text: #fff;
--dimmer-text: #ada8aa;
--shadow: 0 1px 0.5px rgba(47, 49, 54, .23);
}
else if stylus-deepdark-style == "YouTube-Dark" {
--main-color: #e52117;
--main-background: #111;
--second-background: #232323;
--hover-background: #343434;
--main-text: #e1e1e1;
--dimmer-text: #7f7f7f;
--shadow: 0 1px 0.5px rgba(54, 54, 54, .2);
}
else if stylus-deepdark-style == "Mint-Y-Dark" {
--main-color: #9ab87c;
--main-background: #2f2f2f;
--second-background: #383838;
--hover-background: #404040;
--main-text: #fff;
--dimmer-text: #d5dada;
--shadow: 0 1px 0.5px rgba(0, 0, 0, .13);
}
else if stylus-deepdark-style == "9anime" {
--main-color: #723f8c;
--main-background: #0b0a0d;
--second-background: #17151c;
--hover-background: #1E1c25;
--main-text: #f9f6fb;
--dimmer-text: #cac0cf;
--shadow: 0 1px 0.5px rgba(54, 54, 54, .13);
}
else if stylus-deepdark-style == "Black-and-White" {
--main-color: #fff;
--main-background: #000;
--second-background: #1e1e1e;
--hover-background: #313131;
--main-text: #fff;
--dimmer-text: #aaa;
--shadow: 0 1px 0.5px rgba(54 ,54 ,54, .2);
}
else if stylus-deepdark-style == "Yellow" {
--main-color: #ffc700;
--main-background: #141414;
--second-background: #202222;
--hover-background: #353838;
--main-text: #eff0f1;
--dimmer-text: #9f9999;
--shadow: 0 1px 0.5px rgba(34, 34, 34, .2);
}
else if stylus-deepdark-style == "Yellow-2" {
--main-color: #ffc700;
--main-background: #0a0800;
--second-background: #0c0a04;
--hover-background: #0f0d05;
--main-text: #fffdf5;
--dimmer-text: #fff8e1;
--shadow: 0 1px 0.5px rgba(34, 34, 34, .2);
}
else if stylus-deepdark-style == "Ubuntu-Grey" {
--main-color: #ef7847;
--main-background: #312d2a;
--second-background: #3d3c38;
--hover-background: #59564d;
--main-text: #f2f1ef;
--dimmer-text: #e6e5e3;
--shadow: 0 1px 0.5px rgba(89, 86, 77, .12);
}
else if stylus-deepdark-style == "Ubuntu-Purple" {
--main-color: #ef7847;
--main-background: #2c071a;
--second-background: #430b28;
--hover-background: #520D30;
--main-text: #f2f1ef;
--dimmer-text: #e6e5e3;
--shadow: 0 1px 0.5px rgba(82, 13, 48, .2);
}
else if stylus-deepdark-style == "Orange" {
--main-color: #ff6905;
--main-background: #0a0400;
--second-background: #0e0702;
--hover-background: #110903;
--main-text: #fff9f5;
--dimmer-text: #ffede1;
--shadow: 0 1px 0.5px rgba(255, 105, 5, .1);
}
else if stylus-deepdark-style == "Jisho" {
--main-color: #ef7d6c;
--main-background: #332222;
--second-background: #2a1b1b;
--hover-background: #863b2f;
--main-text: #EFB26C;
--dimmer-text: #986E3F;
--shadow: 0 1px 0.5px rgba(37, 19, 5, .19);
}
else if stylus-deepdark-style == "Adapta-Nokto" {
--main-color: #00bcd4;
--main-background: #222d32;
--second-background: #263238;
--hover-background: #2a353b;
--main-text: #fff;
--dimmer-text: #9b9b9b;
--shadow: 0 1px 0.5px rgba(61, 77, 86, .2);
}
else if stylus-deepdark-style == "Adapta-Breath-Nokto" {
--main-color: #1abc9c;
--main-background: #222d32;
--second-background: #263238;
--hover-background: #2a353b;
--main-text: #fff;
--dimmer-text: #9b9b9b;
--shadow: 0 1px 0.5px rgba(42, 53, 59, .32);
}
else if stylus-deepdark-style == "Solarized-Dark" {
--main-color: #268bd2;
--main-background: #073642;
--second-background: #03303c;
--hover-background: #002b36;
--main-text: #fdf6E3;
--dimmer-text: #eee8d5;
--shadow: 0 1px 0.5px rgba(0, 43, 54, .3);
}
else if stylus-deepdark-style == "Solarized-Light" {
--main-color: #268bd2;
--main-background: #fdf6e3;
--second-background: #f5efdc;
--hover-background: #eee8d5;
--main-text: #073642;
--dimmer-text: #586e75;
--shadow: 0 1px 0.5px rgba(222, 216, 196, .2);
}
else if stylus-deepdark-style == "Gruvbox-Dark" {
--main-color: #fe8019;
--main-background: #1d2021;
--second-background: #282828;
--hover-background: #3c3836;
--main-text: #fbf1c7;
--dimmer-text: #ebdbb2;
--shadow: 0 1px 0.5px rgba(60, 56, 54, .22);
}
else if stylus-deepdark-style == "Gruvbox-Light" {
--main-color: #af3a03;
--main-background: #f9f5d7;
--second-background: #fbf1c7;
--hover-background: #ebdbb2;
--main-text: #282828;
--dimmer-text: #3c3836;
--shadow: 0 1px 0.5px rgba(235, 219, 178, .33);
}
else if stylus-deepdark-style == "NierAutomata-Dark" {
--main-color: #fe8019;
--main-background: #33302a;
--second-background: #48453c;
--hover-background: #7c6f64;
--main-text: #dad4bb;
--dimmer-text: #bab5a1;
--shadow: 0 1px 0.5px rgba(124, 111, 100, .15);
}
else if stylus-deepdark-style == "NierAutomata-Light" {
--main-color: #fe8019;
--main-background: #d1cdb7;
--second-background: #dcd8c0;
--hover-background: #bab5a1;
--main-text: #48453c;
--dimmer-text: #33302a;
--shadow: 0 1px 0.5px rgba(186, 181, 161, 2);
}
else if stylus-deepdark-style == "HavocOS" {
--main-color: #0794d4;
--main-background: #141618;
--second-background: #1c1e20;
--hover-background: #212528;
--main-text: #fff;
--dimmer-text: #b9baba;
--shadow: 0 1px 0.5px rgba(185, 186, 186, .04);
}
else if stylus-deepdark-style == "Custom" {
--main-color: mainColor;
--main-background: mainBackground;
--second-background: secondBackground;
--hover-background: hoverBackground;
--main-text: mainText;
--dimmer-text: dimmerText;
--shadow: 0 1px 0.5px colorShadow;
}
if colorR == "Default" { --red: #da4453; }
if colorR == "Solarized" { --red: #dc322f; }
if colorR == "Gruvbox Dark" { --red: #cc241d; }
if colorR == "Gruvbox Dark Intense" { --red: #fb4934; }
if colorR == "Gruvbox Light" { --red: #cc241d; }
if colorR == "Gruvbox Light Intense" { --red: #9d0006; }
if colorR == "Custom" { --red: colorRed; }
}
/*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
{
background: var(--main-background) !important;
color: var(--main-text) !important;
}
p, li:not(.labelModal-item):not(.labelColorSelector-item)
{
color: var(--dimmer-text) !important;
}
/*fix for folder colors*/
.labelColorSelector-item-mask
{
border-color: var(--hover-background) !important;
}
.labelColorSelector-item .fa
{
color: var(--main-background) !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, .pm_panel-login__inner
{
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;
}
.storageBar .storageBar-progress
{
background: var(--main-color) !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,
.recipients-details-size
{
color: var(--dimmer-text) !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, .line_content.new.noteable_line
{
background: transparent !important;
border-color: var(--hover-background) !important;
color: var(--dimmer-text) !important;
}
.diff-line-num.new_line
{
background-color: var(--hover-background) !important;
border-color: var(--hover-background) !important;
color: var(--dimmer-text) !important;
}
.diff-line-num.old_line
{
background-color: var(--second-background) !important;
border-color: var(--hover-background) !important;
color: var(--dimmer-text) !important;
}
/*reply chain*/
blockquote span[class="size"], blockquote span[style*="color"],
#conversation-view .message .frame div
{
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;
}
/*column view senders and date*/
body #conversation-list-rows .conversation .senders, body #conversation-list-rows .conversation .size
{
color: var(--main-text) !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,
.pm_buttons a, .pm_buttons 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, .pm_buttons a, .pm_buttons 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.read:hover, .conversation.active:hover, .conversation.marked:hover, .conversation:hover
{
background-color: var(--second-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;
}
/*folder dropdowns*/
.scrollbox-container-group .dropdown-folder-scrollbox-group-item-button, .scrollbox-container-group .dropdown-folder-scrollbox-group-item-button:hover,
.dropdown-folder-create .dropdown-folder-create-button, .dropdown-folder-create .dropdown-folder-create-button:hover
{
background: transparent !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;
}
/*attachments*/
.composer-askEmbedding, .composerAttachments-container, .composerAttachments-header, .composerAttachments-loaders
{
border-color: var(--hover-background) !important;
background: var(--second-background) !important;
color: var(--main-text) !important;
}
.composerAskEmbdded-details {
border-color: var(--hover-background) !important;
background: var(--hover-background) !important;
}
/*encryption*/
.composerOptions-container
{
border-color: var(--hover-background) !important;
background: var(--second-background) !important;
color: var(--main-text) !important;
}
}