Skip to content

Instantly share code, notes, and snippets.

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