ProtonMail DeepDark by raitarohikami
Imported and mirrored from https://github.com/RaitaroH/ProtonMail-DeepDark/raw/master/ProtonMailDeepDark.user.css
Details
Authorraitarohikami
LicenseGNU-V3.0
Created
Updated
Categoryunset
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.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;
}
}