ProtonMailDeepDark.user.css

/* ==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;
	}
}