Created
April 2, 2020 17:28
-
-
Save kiyui/2e1b13259a0d2984d9c0b2a566f8f1d5 to your computer and use it in GitHub Desktop.
Protonmail Theme
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @charset "UTF-8"; /*! | |
| * Custom Theme for ProtonMail v3.16.21 | |
| * http://amdelamar.com/pm-theme/ | |
| * SPDX-License-Identifier: MIT | |
| */ | |
| :root { | |
| --theme1: #4a154b; | |
| --theme2: #896184; | |
| --theme3: #ffeeed; | |
| --theme4: #ffc2c0; | |
| --theme5: #42425e; | |
| --theme6: #ffc2c0; | |
| --theme7: #fefefe; | |
| --red: #cc9393; | |
| --red-light: #ec6446; | |
| --yellow: #dfdf19; | |
| --yellow-light: #e7d360; | |
| --green: #a6cc93; | |
| --green-light: #89bc70; | |
| --blue: #bce8f1; | |
| --blue-light: #93b9cc; | |
| --white: #fff; | |
| --black: #000; | |
| } | |
| #exiting { | |
| background-color: var(--theme3); | |
| color: var(--theme2); | |
| } | |
| #exiting .spinner.large .spinner1, | |
| #exiting .spinner.large .spinner2, | |
| #exiting .spinner.large .spinner3 { | |
| background-color: var(--theme1); | |
| } | |
| .spinner.large .spinner1, | |
| .spinner.large .spinner2, | |
| .spinner.large .spinner3 { | |
| background-color: var(--theme3); | |
| } | |
| .spinner1, | |
| .spinner2, | |
| .spinner3 { | |
| background-color: var(--theme1); | |
| } | |
| .proton-embedded:after { | |
| background: url(/assets/img/icons/broken-img.png) 5px 50% no-repeat | |
| var(--theme3); | |
| border-color: var(--theme2) var(--theme4) var(--theme4) var(--theme2); | |
| } | |
| html.protonmail body { | |
| background: var(--theme2); | |
| } | |
| html.protonmail body.blank, | |
| html.protonmail body.secure { | |
| background: var(--theme3); | |
| } | |
| html.protonmail .visionary { | |
| color: var(--theme3); | |
| } | |
| html.protonmail .plus { | |
| color: var(--theme3); | |
| } | |
| html.protonmail .text-gray { | |
| color: var(--theme2); | |
| } | |
| html.protonmail .text-light-gray { | |
| color: var(--theme4); | |
| } | |
| html.protonmail .text-green { | |
| color: var(--green); | |
| } | |
| html.protonmail .text-yellow { | |
| color: var(--yellow); | |
| } | |
| html.protonmail .text-red { | |
| color: var(--red); | |
| } | |
| html.protonmail .text-purple { | |
| color: var(--theme1) !important; | |
| } | |
| html.protonmail .border-panel { | |
| border: 1px solid var(--theme4); | |
| } | |
| header#pm_header { | |
| background: var(--theme2); | |
| } | |
| header#pm_header .newBugReport-container, | |
| header#pm_header a { | |
| color: var(--theme3); | |
| } | |
| header#pm_headerDesktop, | |
| header.headerDesktop-container { | |
| background: var(--theme3); | |
| } | |
| header#pm_headerDesktop a.logo, | |
| header .headerDesktop-logo.logo, | |
| .headerSecuredDesktop-logo { | |
| color: var(--theme1); | |
| background-color: var(--theme3); | |
| } | |
| header#pm_headerDesktop a.logo img, | |
| header .headerDesktop-logo.logo img, | |
| .headerSecuredDesktop-logo::before { | |
| webkit-filter: grayscale(100%) brightness(50%); | |
| filter: grayscale(100%) brightness(50%); | |
| } | |
| header#pm_headerDesktop ul.navigation > li:hover, | |
| header.headerDesktop-container ul.navigation > li:hover { | |
| border-color: var(--theme1) !important; | |
| } | |
| header#pm_headerDesktop ul.navigation > li.active, | |
| header.headerDesktop-container ul.navigation > li.active { | |
| border-color: var(--theme1) !important; | |
| } | |
| header#pm_headerDesktop ul.navigation > li > a, | |
| header.headerDesktop-container ul.navigation > li > a { | |
| color: var(--theme2); | |
| } | |
| header#pm_headerDesktop.no-auth { | |
| background: var(--theme2); | |
| } | |
| header#pm_headerDesktop.no-auth a { | |
| color: var(--theme3); | |
| } | |
| header#pm_header-tablet { | |
| background: var(--theme5); | |
| } | |
| header#pm_header-tablet .compose { | |
| background-color: var(--theme1); | |
| color: var(--theme3); | |
| } | |
| header#pm_header-tablet .compose:hover { | |
| background-color: var(--theme6); | |
| } | |
| header#pm_header-tablet .compose:active { | |
| background-color: var(--theme5); | |
| } | |
| header#pm_header-tablet a.logoMobile { | |
| color: var(--theme3); | |
| } | |
| header#pm_header-tablet .location { | |
| color: var(--theme3); | |
| } | |
| header#pm_header-mobile { | |
| background: var(--theme5); | |
| } | |
| header#pm_header-mobile a.compose, | |
| header#pm_header-mobile a.compose:hover { | |
| background: var(--theme5); | |
| } | |
| header#pm_header-mobile a.logoMobile { | |
| color: var(--theme3); | |
| } | |
| header#pm_header-mobile .searchBtn, | |
| header#pm_header-mobile a.compose { | |
| color: var(--theme3); | |
| } | |
| header#pm_header-mobile .location { | |
| color: var(--theme3); | |
| } | |
| .headerBlock-container { | |
| border-bottom: 1px solid var(--theme4); | |
| } | |
| #attachmentArea { | |
| background: var(--theme3); | |
| border-top: 1px solid var(--theme4); | |
| } | |
| #attachmentArea header .embedded { | |
| color: var(--theme1); | |
| } | |
| body section.sidebar { | |
| background: var(--theme3); | |
| } | |
| .sidebarApp-container .sidebar-btn-back { | |
| border: 1px solid var(--theme5) !important; | |
| color: var(--theme5) !important; | |
| } | |
| .sidebarApp-container .sidebar-btn-back:hover { | |
| background: var(--theme1) !important; | |
| color: var(--theme3) !important; | |
| } | |
| .sidebarApp-container .sidebar-btn-compose { | |
| background: var(--theme1) !important; | |
| border-color: var(--theme1) !important; | |
| color: var(--theme7) !important; | |
| } | |
| .sidebarApp-container .sidebar-btn-compose:hover { | |
| background-color: var(--theme6) !important; | |
| border-color: transparent !important; | |
| color: var(--theme7) !important; | |
| } | |
| .sidebarApp-item .navigationItem-item, | |
| .sidebarApp-item .sidebarApp-link, | |
| .sidebarApp-menu .menuLabel-link { | |
| color: var(--theme3); | |
| } | |
| .sidebarApp-item .navigationItem-icon, | |
| .sidebarApp-item .sidebarApp-icon, | |
| .sidebarApp-menu .menuLabel-icon, | |
| .sidebarApp-icon .donateBtn-icon { | |
| color: var(--theme4); | |
| } | |
| body section.sidebar ul.menu li button { | |
| color: var(--theme2); | |
| } | |
| body section.sidebar ul.menu li button:hover { | |
| color: var(--theme1); | |
| } | |
| body section.sidebar ul.menu li button i.fa { | |
| color: var(--theme2); | |
| } | |
| body section.sidebar ul.menu li a { | |
| color: var(--theme2); | |
| } | |
| body section.sidebar ul.menu li a:hover { | |
| color: var(--theme1); | |
| } | |
| body section.sidebar ul.menu li a em { | |
| color: var(--theme5); | |
| } | |
| body section.sidebar ul.menu li a i.fa { | |
| color: var(--theme2); | |
| } | |
| body section.sidebar ul.menu li a .fa-repeat { | |
| color: var(--theme6); | |
| } | |
| body section.sidebar ul.menu li a .fa-repeat:hover { | |
| color: var(--theme1); | |
| } | |
| body section.sidebar ul.menu li.active a { | |
| color: var(--theme2); | |
| } | |
| body section.sidebar ul.menu li.active a:hover { | |
| color: var(--theme1); | |
| } | |
| body section.sidebar ul.menu li.active a i.fa { | |
| color: var(--theme6); | |
| } | |
| body section.sidebar div.labels ul li.active a, | |
| .menuLabel-item.active .menuLabel-title { | |
| color: var(--theme2); | |
| font-weight: 700; | |
| } | |
| body section.sidebar div.labels ul li a:hover { | |
| color: var(--theme3); | |
| } | |
| body section.sidebar div.footer div.link a { | |
| color: var(--theme1); | |
| } | |
| body section.sidebar div.footer div.link a:hover { | |
| color: var(--theme6); | |
| } | |
| .sidebarApp-container .footer div.storage strong { | |
| color: var(--theme1); | |
| } | |
| body section.sidebar div.footer a.upgrade { | |
| color: var(--theme1); | |
| } | |
| body section.sidebar div.footer .bar em { | |
| background-color: var(--theme1); | |
| } | |
| body section.sidebar div.footer .bar { | |
| background-color: var(--theme4); | |
| } | |
| .sidebarApp-container .version { | |
| color: var(--theme1) !important; | |
| } | |
| .sidebarApp-container .version:hover { | |
| color: var(--theme6) !important; | |
| } | |
| .sidebarApp-container .footer .storageBar { | |
| background-color: var(--theme4) !important; | |
| } | |
| .storageBar .storageBar-progress { | |
| background-color: var(--theme1) !important; | |
| } | |
| body section.sidebar div.labels ul li a { | |
| color: var(--theme2) !important; | |
| } | |
| body section.sidebar div.labels ul li a:hover { | |
| color: var(--theme1) !important; | |
| } | |
| body section.sidebar div.labels ul li a em { | |
| color: var(--theme2) !important; | |
| } | |
| body.mobileMode #pm_sidebar section.sidebar { | |
| background: var(--theme2) !important; | |
| } | |
| body.mobileMode #pm_sidebar section.sidebar .pm_button.round .fa { | |
| color: var(--theme3) !important; | |
| } | |
| body.mobileMode #pm_sidebar section.sidebar .userDisplay em, | |
| body.mobileMode #pm_sidebar section.sidebar .userDisplay strong { | |
| color: var(--theme3) !important; | |
| } | |
| body.mobileMode #pm_sidebar section.sidebar ul.menu li button { | |
| color: var(--theme3) !important; | |
| } | |
| .pm_toolbar { | |
| box-shadow: inset 0 -1px 0 var(--theme4) !important; | |
| } | |
| #conversation-view .fa-star { | |
| color: var(--yellow) !important; | |
| } | |
| #conversation-view header { | |
| border-bottom: 0 solid var(--theme4) !important; | |
| } | |
| #conversation-view header h1 { | |
| color: var(--black) !important; | |
| } | |
| #conversation-view .message { | |
| border: 1px solid var(--theme4) !important; | |
| } | |
| #conversation-view .message .message-contact-sender { | |
| color: var(--theme5) !important; | |
| } | |
| #conversation-view .message .contact a.compose { | |
| color: var(--theme1) !important; | |
| } | |
| #conversation-view .message .details { | |
| background: var(--theme3) !important; | |
| } | |
| #conversation-view .message.marked .details, | |
| #conversation-view .message.marked .summary { | |
| box-shadow: inset 5px 0 0 var(--theme1) !important; | |
| } | |
| #conversation-view .message.details.open .labelz .pm_labels label { | |
| box-shadow: 0.25rem 0 0 0.25rem var(--theme3) !important; | |
| } | |
| #conversation-view .message.unread > div.summary { | |
| background: var(--theme3) !important; | |
| } | |
| #conversation-view .message.unread:not(.open) .summary .labels, | |
| #conversation-view .message.unread:not(.open) .summary .status, | |
| #conversation-view .message.unread:not(.open) .summary .time { | |
| background: var(--theme3) !important; | |
| } | |
| #conversation-view .message.unread > div.summary .labels .pm_labels label { | |
| box-shadow: 0.25rem 0 0 0.25rem var(--theme3) !important; | |
| } | |
| #conversation-view .message > div.summary { | |
| background: var(--theme3) !important; | |
| } | |
| #conversation-view .message > div.summary .summary-right { | |
| background: transparent !important; | |
| } | |
| #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 { | |
| background: var(--theme3) !important; | |
| } | |
| #conversation-view .message > div.summary .time::after { | |
| background: -moz-linear-gradient( | |
| left, | |
| rgba(255, 255, 255, 0) 0, | |
| var(--theme3) 100% | |
| ) !important; | |
| background: -webkit-linear-gradient( | |
| left, | |
| rgba(255, 255, 255, 0) 0, | |
| var(--theme3) 100% | |
| ) !important; | |
| background: linear-gradient( | |
| to right, | |
| rgba(255, 255, 255, 0) 0, | |
| var(--theme3) 100% | |
| ) !important; | |
| } | |
| #conversation-view .message > div.summary .meta .contact span { | |
| color: var(--theme4) !important; | |
| } | |
| #conversation-view .message > div.summary .labels .pm_labels label { | |
| box-shadow: 0.25rem 0 0 0.25rem var(--theme3) !important; | |
| } | |
| #conversation-view .message > div.details { | |
| background: var(--theme3) !important; | |
| } | |
| #conversation-view .message > div.details .pm_buttons a { | |
| background: var(--theme3) !important; | |
| } | |
| #conversation-view .message > div.details .recipients-details .from, | |
| #conversation-view .message > div.details .recipients-details .where { | |
| color: var(--theme4) !important; | |
| } | |
| #conversation-view .message > div.details .recipients-details .contact em { | |
| color: var(--theme4) !important; | |
| } | |
| #conversation-view .message > div.details .recipients-summary strong { | |
| color: var(--theme4) !important; | |
| } | |
| #conversation-view .message > div.details .recipients-summary .from { | |
| color: var(--theme4) !important; | |
| } | |
| #conversation-view .message .toggleDetails { | |
| color: var(--theme1) !important; | |
| } | |
| #conversation-view .message .expiration { | |
| background: var(--red-light) !important; | |
| color: var(--theme3!important); | |
| } | |
| #conversation-view .message .showImages { | |
| background: var(--theme3) !important; | |
| color: var(--theme1) !important; | |
| border-top: 1px solid var(--theme4) !important; | |
| } | |
| #conversation-view .message .frame { | |
| background-color: var(--theme7) !important; | |
| border-top: 1px solid var(--theme4) !important; | |
| } | |
| #conversation-view .message .frame .email .pm_button.more { | |
| background: var(--theme3) !important; | |
| } | |
| body.mobileMode #conversation-view .message > div.summary .time { | |
| background: var(--theme3) !important; | |
| } | |
| body#eo-unlock, | |
| body#login-unlock, | |
| body#reset { | |
| background: var(--theme2) !important; | |
| } | |
| body.mobileMode | |
| #conversation-view | |
| .message.details | |
| > div.summary | |
| .meta | |
| .contact | |
| em { | |
| color: var(--theme4) !important; | |
| } | |
| #pm_placeholder { | |
| color: var(--theme4); | |
| padding-top: 40%; | |
| text-transform: uppercase; | |
| } | |
| #nothingToSeeHere .fa { | |
| color: var(--theme4); | |
| } | |
| #nothingToSeeHere span { | |
| color: var(--theme4); | |
| } | |
| #nothingToSeeHere h3 { | |
| color: var(--theme4); | |
| } | |
| #pm_conversations .meta .fa-star-o, | |
| #pm_conversations .meta .singleStar, | |
| #pm_conversations article > header .fa-lock, | |
| #pm_conversations article > header .fa-paperclip, | |
| #pm_conversations header .loc, | |
| #pm_rows .meta .fa-star-o, | |
| #pm_rows .meta .singleStar, | |
| #pm_rows article > header .fa-lock, | |
| #pm_rows article > header .fa-paperclip, | |
| #pm_rows header .loc { | |
| color: var(--theme4); | |
| } | |
| body#reset .alert { | |
| color: var(--black); | |
| } | |
| #pm_footer { | |
| color: var(--theme3); | |
| } | |
| #pm_footer a { | |
| color: var(--theme3); | |
| } | |
| #pm_footer a:hover { | |
| color: var(--theme4); | |
| } | |
| #pm_footer.static { | |
| color: var(--theme2); | |
| } | |
| #pm_footer.static a { | |
| color: var(--theme2); | |
| } | |
| #pm_footer.static a:hover { | |
| color: var(--black); | |
| } | |
| #pm_composer .composer .meta input { | |
| background: var(--theme3); | |
| } | |
| #pm_composer .composer .fill { | |
| color: var(--black); | |
| background: var(--theme7); | |
| } | |
| #pm_composer .composer { | |
| background: var(--theme3); | |
| } | |
| #pm_composer .addLinkPopover-field .addLinkPopover-label { | |
| color: var(--black) !important; | |
| } | |
| #pm_composer .addLinkPopover-field .addLinkPopover-input { | |
| color: var(--black) !important; | |
| background: var(--white) !important; | |
| } | |
| #pm_composer .composer .askEmbedding { | |
| background: var(--theme3); | |
| color: var(--theme2); | |
| } | |
| #pm_composer .composer .attachmentBar i.embedded, | |
| #pm_composer .composer .options .fa { | |
| color: var(--theme1); | |
| } | |
| #pm_composer .composer .askEmbedding ul { | |
| background: var(--theme3); | |
| border: 1px solid rgba(0, 0, 0, 0.2); | |
| } | |
| .composerOptions-container { | |
| background: var(--theme3); | |
| } | |
| #pm_composer .composer .options footer { | |
| background: var(--theme3); | |
| } | |
| #pm_composer .composer .attachmentBar { | |
| border-top: 1px solid var(--theme4); | |
| background: var(--theme3); | |
| } | |
| #pm_composer .composer .previews { | |
| background: var(--theme3); | |
| } | |
| #pm_composer .composer .previews .preview-close { | |
| color: var(--theme2); | |
| } | |
| #pm_composer .composer .previews .attachment .fa.embedded { | |
| color: var(--theme1); | |
| } | |
| #pm_composer .composer .previews .pm_button { | |
| background: var(--theme3); | |
| } | |
| #pm_composer .composer.attachmentsOpen .attachmentBar { | |
| box-shadow: 0 1px 0 var(--theme4); | |
| } | |
| #pm_composer .composer.attachmentsOpen .attachmentArea .pm_button { | |
| color: var(--theme2); | |
| } | |
| #pm_composer .composer.attachmentsOpen .attachmentArea .pm_button.uploading { | |
| background: var(--theme4); | |
| } | |
| #pm_composer .composer header { | |
| background: var(--theme2); | |
| color: var(--theme3); | |
| } | |
| #pm_composer .composer header.composerEncrypt-header, | |
| #pm_composer .composer header.composerExpiration-header { | |
| background: 0; | |
| color: var(--theme2); | |
| } | |
| #pm_composer .composer header .actions .pm_button { | |
| color: var(--theme3) !important; | |
| border: none !important; | |
| } | |
| #pm_composer .composer header .actions .pm_button:hover { | |
| color: var(--theme2) !important; | |
| } | |
| #pm_composer .composer .pm_button.link { | |
| border: none !important; | |
| } | |
| #pm_composer .composer .row { | |
| border-bottom: 1px solid var(--theme4) !important; | |
| } | |
| #pm_composer .composer .row.placeholder div { | |
| color: var(--theme2); | |
| } | |
| #pm_composer .composer input, | |
| #pm_composer .composer select { | |
| color: var(--theme2) !important; | |
| } | |
| #pm_composer .composer select option { | |
| color: var(--theme2) !important; | |
| background-color: var(--theme3) !important; | |
| } | |
| #pm_composer .composer .meta { | |
| color: var(--theme2) !important; | |
| background: var(--theme3) !important; | |
| } | |
| #pm_composer .composer footer { | |
| background: var(--theme3) !important; | |
| border-top: 1px solid var(--theme4) !important; | |
| } | |
| #pm_composer .composer footer .pm_button { | |
| background: var(--theme3) !important; | |
| } | |
| #pm_composer .composer footer .pm_button:hover { | |
| background-color: var(--theme7) !important; | |
| color: var(--theme2) !important; | |
| } | |
| #pm_composer .composer footer .pm_button.primary { | |
| background: var(--theme1) !important; | |
| } | |
| #pm_composer .composer footer .pm_button.primary:hover { | |
| background-color: var(--theme6) !important; | |
| color: var(--theme2) !important; | |
| } | |
| #pm_composer .composer footer .pm_button.disabled { | |
| background: var(--black); | |
| } | |
| #pm_composer .composer ::-webkit-input-placeholder { | |
| color: var(--theme4); | |
| } | |
| #pm_composer .composer :-moz-placeholder { | |
| color: var(--theme4); | |
| } | |
| #pm_composer .composer ::-moz-placeholder { | |
| color: var(--theme4); | |
| } | |
| #pm_composer .composer :-ms-input-placeholder { | |
| color: var(--theme4); | |
| } | |
| .colorPopover-container | |
| .colorPopover-panel | |
| .colorPopover-select | |
| .colorList-list | |
| .colorList-btn-choose { | |
| color: inherit !important; | |
| background-color: inherit !important; | |
| border: unset !important; | |
| } | |
| .squireToolbar-container { | |
| border-bottom: 1px solid var(--theme4) !important; | |
| background-color: var(--theme3) !important; | |
| } | |
| .squireToolbar-container .squire-toolbar, | |
| [class*="squireToolbar-row"] { | |
| background-color: var(--theme3) !important; | |
| } | |
| [class*="squireToolbar-action-"] + .squireToolbar-separator { | |
| border-left: 1px solid var(--theme4) !important; | |
| } | |
| .squire-popover { | |
| background: var(--theme3) !important; | |
| border: 1px solid var(--theme4) !important; | |
| } | |
| .squire-popover input { | |
| border: 1px solid var(--theme3) !important; | |
| color: var(--theme2) !important; | |
| } | |
| .squire-popover button { | |
| border: 1px solid var(--theme1) !important; | |
| background-color: var(--theme1) !important; | |
| color: var(--theme3) !important; | |
| } | |
| #pm_settings .well { | |
| border: 1px solid var(--theme4); | |
| } | |
| #pm_settings .editor-container, | |
| #pm_settings .usage { | |
| background: var(--theme7); | |
| } | |
| #pm_settings .usage .total, | |
| #pm_settings .usage .used { | |
| color: var(--theme4); | |
| background: var(--theme3); | |
| } | |
| #pm_settings .usage .bar { | |
| background: var(--theme3); | |
| } | |
| #pm_settings .usage .bar .amount { | |
| background: var(--theme1); | |
| } | |
| #pm_settings .pm_tabs { | |
| background: var(--theme3); | |
| } | |
| #pm_settings .pm_tabs li a.pm_button { | |
| background-color: var(--theme6); | |
| border-color: var(--theme5); | |
| color: var(--theme3); | |
| border-bottom: 1px solid var(--theme5); | |
| } | |
| #pm_settings .pm_tabs li a.pm_button:hover { | |
| background: var(--theme3); | |
| color: var(--theme1); | |
| } | |
| #pm_settings .pm_tabs li.active a.pm_button { | |
| background: var(--theme3); | |
| color: var(--theme2); | |
| border-bottom-color: var(--theme3); | |
| } | |
| #pm_settings .pm_tabs li.active a.pm_button:hover { | |
| color: var(--theme1); | |
| } | |
| #pm_settings .pm_tabs li:last-child a { | |
| border-right: 1px solid var(--theme5); | |
| } | |
| #pm_settings .settings .angular-squire-wrapper { | |
| border: 1px solid var(--theme4); | |
| box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.15); | |
| } | |
| #pm_settings .settings #keys-addressTable td .fa-times-circle { | |
| color: var(--red); | |
| } | |
| #pm_settings .settings #keys-addressTable td .fa-check { | |
| color: var(--theme2); | |
| } | |
| .addressKeysView-container .addressKeysView-toggle .pm_button, | |
| .addressKeysView-container table tr td .pm_buttons, | |
| .addressKeysView-container table tr td .pm_button { | |
| border: none !important; | |
| } | |
| #pm_settings .settings .row .border-bottom { | |
| border-bottom: 1px solid var(--theme4); | |
| } | |
| #pm_settings .settings .row .setting .as-sortable-placeholder { | |
| background: var(--theme4) !important; | |
| } | |
| #pm_settings .settings .row .setting .as-sortable-dragging { | |
| border: 1px solid var(--theme4); | |
| background: var(--theme3); | |
| } | |
| #pm_settings .settings .row .setting .as-sortable-dragging .fa-check { | |
| background: var(--theme3); | |
| color: var(--theme1); | |
| } | |
| #pm_settings .settings .row .setting .angular-squire-wrapper iframe { | |
| border: 1px solid var(--theme4); | |
| } | |
| body.mobileMode #pm_settings .settings .pm_sort ul { | |
| border-right: 1rem solid var(--theme4); | |
| } | |
| body.mobileMode #pm_settings .pm_tabs { | |
| background: var(--theme3); | |
| } | |
| body.mobileMode #pm_settings .pm_tabs > li > a.pm_button { | |
| color: var(--theme5); | |
| border: 1px solid var(--theme4); | |
| } | |
| body.mobileMode #pm_settings .pm_tabs > li > a.pm_button:hover { | |
| background-color: var(--theme3); | |
| } | |
| body.mobileMode #pm_settings .pm_tabs > li > a.pm_button:active, | |
| body.mobileMode #pm_settings .pm_tabs > li > a.pm_button:focus { | |
| background-color: var(--theme4); | |
| } | |
| body.mobileMode #pm_settings .pm_tabs > li.active > a.pm_button { | |
| background-color: var(--theme1); | |
| border-color: var(--theme1); | |
| color: var(--theme3); | |
| } | |
| body.mobileMode #pm_settings .pm_tabs > li.active > a.pm_button:hover { | |
| background-color: var(--theme6); | |
| border-color: var(--theme6); | |
| } | |
| body.mobileMode #pm_settings .pm_tabs > li.active > a.pm_button:active, | |
| body.mobileMode #pm_settings .pm_tabs > li.active > a.pm_button:focus { | |
| background-color: var(--theme5); | |
| border-color: var(--theme5); | |
| } | |
| body.mobileMode #pm_settings .settings table.pm_table tr { | |
| border: 1px solid var(--theme4); | |
| } | |
| body.mobileMode #pm_settings .settings table.pm_table tr td { | |
| border-bottom: 1px solid var(--theme4); | |
| } | |
| #paymentsModal .disabled input, | |
| #paymentsModal .disabled select { | |
| background-color: var(--theme3); | |
| } | |
| body.mobileMode #invoicesList li { | |
| border: 1px solid var(--theme4); | |
| } | |
| body.mobileMode #invoicesList li p { | |
| border-bottom: 1px solid var(--theme4); | |
| } | |
| body.mobileMode #invoicesList li p.title { | |
| background: var(--theme3); | |
| } | |
| #login-setup #pm_footer { | |
| color: var(--theme2); | |
| } | |
| #login-setup #pm_footer a { | |
| color: var(--theme2); | |
| } | |
| #login-setup #pm_footer a:hover { | |
| color: var(--black); | |
| } | |
| #login-setup .spinner.large .spinner1, | |
| #login-setup .spinner.large .spinner2, | |
| #login-setup .spinner.large .spinner3 { | |
| background-color: var(--theme1); | |
| } | |
| #login-setup .wrapper label em.num { | |
| background-color: var(--theme3); | |
| } | |
| #login-setup .wrapper label span { | |
| color: var(--theme2); | |
| } | |
| #signup .spinner.large .spinner1, | |
| #signup .spinner.large .spinner2, | |
| #signup .spinner.large .spinner3 { | |
| background-color: var(--theme1); | |
| } | |
| #signup .titleLabel em.num { | |
| background-color: var(--theme3); | |
| } | |
| #signup .titleLabel span { | |
| color: var(--theme2); | |
| } | |
| .ua-ie #pm_composer .composer { | |
| border: 1px solid var(--theme4); | |
| } | |
| html.protonmail body.light { | |
| background-color: var(--theme3); | |
| } | |
| body#eo-message, | |
| body#eo-reply { | |
| background: var(--theme2); | |
| } | |
| body#eo-reply ul.infos { | |
| color: var(--theme2); | |
| } | |
| body#eo-reply ul.infos b, | |
| body#eo-reply ul.infos em { | |
| color: var(--theme1); | |
| } | |
| body#eo-reply #message-body .squire-toolbar { | |
| border-top: 1px solid var(--theme4); | |
| border-bottom: 1px solid var(--theme4); | |
| } | |
| body#eo-reply footer { | |
| border-top: 1px solid var(--theme4); | |
| } | |
| .outside #expirationMessage { | |
| background-color: var(--red-light); | |
| color: var(--theme3); | |
| } | |
| .outside #outsideMessageWrap { | |
| background-color: var(--theme3); | |
| } | |
| .outside #attachmentArea { | |
| border-top: 1px solid var(--theme4); | |
| } | |
| .outside .display-embedded, | |
| .outside .display-image { | |
| background: var(--theme3); | |
| border: 1px solid var(--theme4); | |
| } | |
| .outside .display-embedded a, | |
| .outside .display-image a { | |
| color: var(--theme1); | |
| background-color: var(--theme3) !important; | |
| } | |
| .outside .display-embedded:hover, | |
| .outside .display-image:hover { | |
| background: var(--theme3); | |
| } | |
| .outside .message-metadata { | |
| border-bottom: 1px solid var(--theme4); | |
| } | |
| .outside .message-metadata ul.infos li strong, | |
| .outside .message-metadata ul.infos strong { | |
| color: var(--theme2); | |
| } | |
| .outside .message-metadata ul.infos b, | |
| .outside .message-metadata ul.infos li b { | |
| color: var(--theme1); | |
| } | |
| body.mobileMode body#eo-reply #message-body iframe { | |
| background: var(--theme3); | |
| } | |
| body { | |
| color: var(--theme2); | |
| } | |
| code { | |
| color: inherit; | |
| } | |
| p a { | |
| color: var(--theme1); | |
| } | |
| hr { | |
| box-shadow: inset 0 1px 0 var(--theme4), inset 0 -1px 0 var(--theme4); | |
| } | |
| kbd { | |
| color: var(--theme2); | |
| background-color: var(--theme3); | |
| -webkit-box-shadow: 0 0 0 var(--theme4), inset 0 0 0 1px var(--theme4); | |
| box-shadow: 0 0 0 var(--theme4), inset 0 0 0 1px var(--theme4); | |
| } | |
| body .pm_form textarea[readonly], | |
| pre { | |
| background: var(--theme3); | |
| border: 1px solid var(--theme4); | |
| color: var(--theme2); | |
| } | |
| #eo-message .email img.pm_broken, | |
| #eo-reply iframe img.pm_broken, | |
| .message .frame > .email img.pm_broken { | |
| background-color: var(--theme4); | |
| } | |
| #eo-message .email blockquote, | |
| #eo-reply iframe blockquote, | |
| .message .frame > .email blockquote { | |
| border-left: 4px solid var(--theme4) !important; | |
| } | |
| .tooltip.top .tooltip-arrow, | |
| .tooltip.top-left .tooltip-arrow, | |
| .tooltip.top-right .tooltip-arrow { | |
| border-top-color: var(--theme2); | |
| } | |
| .tooltip-inner { | |
| color: var(--theme3); | |
| background-color: var(--theme2); | |
| } | |
| .tooltip.right .tooltip-arrow { | |
| border-right-color: var(--theme2); | |
| } | |
| .tooltip.left .tooltip-arrow { | |
| border-left-color: var(--theme2); | |
| } | |
| .tooltip.bottom .tooltip-arrow, | |
| .tooltip.bottom-left .tooltip-arrow, | |
| .tooltip.bottom-right .tooltip-arrow { | |
| border-bottom-color: var(--theme2); | |
| } | |
| .alert { | |
| color: var(--black) !important; | |
| background: var(--theme4) !important; | |
| } | |
| .alert a, | |
| .alert.alert-danger a, | |
| .alert.alert-info a, | |
| .alert.alert-success a, | |
| .alert.alert-warning a { | |
| color: var(--theme1) !important; | |
| } | |
| .alert.alert-info { | |
| color: var(--black) !important; | |
| background: var(--theme4) !important; | |
| } | |
| .alert.alert-success { | |
| color: var(--black) !important; | |
| background: var(--green) !important; | |
| } | |
| .alert.alert-danger { | |
| color: var(--black) !important; | |
| background: var(--red-light) !important; | |
| } | |
| .alert.alert-warning { | |
| color: var(--black) !important; | |
| background: var(--yellow-light) !important; | |
| } | |
| .alert .pm_button { | |
| background: var(--theme3) !important; | |
| } | |
| .alert .pm_select, | |
| .alert input[type="text"], | |
| .alert input[type="number"], | |
| .alert input[type="password"], | |
| .alert input[type="email"], | |
| .alert input[type="search"], | |
| .alert textarea { | |
| background: var(--theme3) !important; | |
| } | |
| .customCheckbox-input:checked + .customCheckbox-mask { | |
| background-color: var(--theme6); | |
| border-color: var(--theme6); | |
| } | |
| .customRadio-input:checked + .customRadio-mask { | |
| box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 10px var(--theme6); | |
| border-color: var(--theme6); | |
| } | |
| .labelDropdown .pm_button.link { | |
| color: var(--theme1); | |
| } | |
| .labelDropdown .alsoArchive { | |
| border-top: 1px solid var(--theme4); | |
| border-bottom: 1px solid var(--theme4); | |
| } | |
| .labelDropdown .labelSearch .fa { | |
| color: var(--theme1); | |
| } | |
| .labelDropdown .labelSearch input { | |
| border-bottom: 1px solid var(--theme4); | |
| } | |
| .searchForm-advanced-container, | |
| .searchForm-advanced-main, | |
| .searchForm-advanced-wrapper { | |
| background-color: var(--theme7) !important; | |
| } | |
| form.searchForm, | |
| .searchForm-container, | |
| .searchForm-advanced-container label { | |
| color: var(--theme2); | |
| } | |
| form.searchForm fieldset, | |
| .search-form-fieldset { | |
| box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important; | |
| background: var(--theme7) !important; | |
| color: var(--theme2) !important; | |
| } | |
| form.searchForm fieldset button[type="button"], | |
| .searchForm-action-button { | |
| color: var(--theme2); | |
| } | |
| [class*="searchForm-action-button-"] { | |
| color: var(--theme2); | |
| } | |
| form.searchForm fieldset button[type="button"]:hover, | |
| .searchForm-action-button:hover { | |
| background: var(--theme7); | |
| } | |
| form.searchForm fieldset #closeAdvSearch, | |
| form.searchForm fieldset button[type="submit"] { | |
| color: var(--theme2); | |
| } | |
| form.searchForm fieldset input.query, | |
| .search-form-fieldset-input { | |
| background: var(--theme7); | |
| color: var(--theme2); | |
| } | |
| form.searchForm #advancedSearchDropdown label { | |
| color: var(--theme2); | |
| } | |
| form.searchForm #advancedSearchDropdown .wrap { | |
| background: var(--theme7); | |
| } | |
| body.mobileMode form.searchForm #advancedSearchDropdown .wrap { | |
| border-bottom: 1px solid var(--theme3); | |
| } | |
| #advancedSearchModal .date em { | |
| color: var(--theme4); | |
| } | |
| body .is-selected .pika-button { | |
| background: var(--theme1) !important; | |
| color: var(--theme3) !important; | |
| } | |
| body .is-today .pika-button { | |
| color: var(--theme1); | |
| } | |
| #labelModal ul.palette li a .fa { | |
| color: var(--theme3); | |
| } | |
| body .cg-notify-message { | |
| background: var(--theme2); | |
| color: var(--theme3) !important; | |
| } | |
| body .cg-notify-message.notification-success { | |
| background-color: var(--green); | |
| } | |
| body .cg-notify-message.notification-warning { | |
| background-color: var(--yellow-light); | |
| } | |
| body .cg-notify-message.notification-danger { | |
| background-color: var(--red); | |
| } | |
| body .cg-notify-message.notification-info { | |
| background-color: var(--blue-light); | |
| } | |
| #pm_latest header { | |
| color: var(--theme2); | |
| border-bottom: 0 solid var(--theme4); | |
| } | |
| #pm_latest #storageStatus .wrap span { | |
| color: var(--theme2); | |
| } | |
| #pm_latest #storageStatus .wrap span strong { | |
| color: var(--theme1); | |
| } | |
| #pm_latest section { | |
| border: 1px solid var(--theme4); | |
| } | |
| #pm_latest .storageArea div.storage { | |
| color: var(--theme4); | |
| } | |
| #pm_latest .storageArea div.storage strong { | |
| color: var(--theme1); | |
| } | |
| #pm_latest .storageArea .bar { | |
| background-color: var(--theme4); | |
| } | |
| #pm_latest .storageArea .bar em { | |
| background-color: var(--theme1); | |
| } | |
| .autocompleteEmails-container { | |
| color: var(--theme2) !important; | |
| } | |
| .autocompleteEmails-container .autocompleteEmails-autocomplete { | |
| color: var(--theme2) !important; | |
| background-color: var(--theme4) !important; | |
| } | |
| .autocompleteCommand-container .autocompleteEmails-autocomplete li + li { | |
| border-color: var(--theme1) !important; | |
| } | |
| .autocompleteCommand-container .autocompleteEmails-autocomplete li { | |
| color: var(--theme2) !important; | |
| background-color: var(--theme7) !important; | |
| } | |
| .autocompleteCommand-input { | |
| color: var(--theme2) !important; | |
| background-color: var(--theme3) !important; | |
| } | |
| .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 { | |
| color: var(--theme3) !important; | |
| background-color: var(--theme1) !important; | |
| } | |
| .autocomplete-container .awesomplete li:hover, | |
| .autocompleteEmails-autocomplete li:hover { | |
| color: var(--theme3) !important; | |
| background-color: var(--theme6) !important; | |
| } | |
| .autocompleteEmails-item { | |
| border: 1px solid var(--theme4) !important; | |
| background-color: var(--theme3) !important; | |
| } | |
| .autocompleteEmails-item-invalid { | |
| border-color: var(--red) !important; | |
| color: var(--red) !important; | |
| } | |
| .autocompleteEmails-field .awesomplete ul { | |
| border: 1px solid var(--theme4) !important; | |
| background-color: var(--theme3) !important; | |
| } | |
| .autocompleteEmails-field .awesomplete li[aria-selected="true"], | |
| .autocompleteEmails-field .awesomplete li[aria-selected="true"]:hover { | |
| background-color: var(--theme4) !important; | |
| } | |
| .autocompleteEmails-field .awesomplete li[aria-selected="false"], | |
| .autocompleteEmails-field .awesomplete li[aria-selected="false"]:hover { | |
| background-color: var(--theme6) !important; | |
| } | |
| .autocompleteEmails-field .awesomplete li:hover { | |
| background-color: var(--theme3) !important; | |
| } | |
| .autocompleteEmails-field .awesomplete li, | |
| .autocompleteEmails-field .awesomplete li:hover, | |
| .autocompleteEmails-field .awesomplete li[aria-selected="true"], | |
| .autocompleteEmails-field .awesomplete li[aria-selected="true"]:hover { | |
| color: var(--theme2) !important; | |
| } | |
| .autocompleteEmails-btn-remove:active, | |
| .autocompleteEmails-btn-remove:focus { | |
| color: var(--theme5) !important; | |
| } | |
| .monetize .modal-dialog .modal-content .upsell h4 { | |
| color: var(--theme1); | |
| } | |
| .monetize .modal-dialog .modal-content .upsell ul { | |
| color: var(--theme3); | |
| } | |
| #pm_settings .bar em { | |
| background-color: var(--theme1); | |
| } | |
| #pm_settings .donate .well { | |
| box-shadow: inset 0 0 3rem var(--theme4); | |
| } | |
| #plans .plans .plan header { | |
| background: var(--theme2); | |
| color: var(--theme3); | |
| } | |
| #plans .plans .plan h3, | |
| .settingsDashboard-container #plans .plan .plan-title { | |
| background-color: var(--theme1); | |
| color: var(--theme3); | |
| } | |
| .settingsDashboard-plans | |
| [class*="Column-container"] | |
| [class*="addonRow"] | |
| .pm_select { | |
| background: var(--theme7) !important; | |
| } | |
| .settingsDashboard-plans, | |
| .settingsDashboard-plans::after, | |
| .settingsDashboard-plans::before { | |
| background: transparent !important; | |
| } | |
| .overviewSection-tbody-billing, | |
| .subscriptionSection-tbody-billing, | |
| .subscriptionSection-tbody-billing > tr:first-of-type { | |
| background: var(--theme7) !important; | |
| } | |
| .overviewSection-couponCode { | |
| color: var(--black); | |
| } | |
| .settingsDashboard-container #plans .plan > section ul { | |
| background: var(--theme7); | |
| } | |
| #plans .plans .plan.plus-plan footer, | |
| #plans .plans .plan.plus-plan header { | |
| background: var(--theme3); | |
| } | |
| #plans .plans .plan section { | |
| border: 1px solid var(--theme4); | |
| } | |
| #plans .plans .plan section ul li { | |
| border-bottom: 1px solid var(--theme4); | |
| } | |
| #plans .plans .plan section ul li.disabled { | |
| color: var(--theme4); | |
| } | |
| #plans .plans .plan footer { | |
| border: 1px solid var(--theme4); | |
| } | |
| #plans .plans .plan footer .cycle { | |
| border-bottom: 1px solid var(--theme4); | |
| color: var(--theme4); | |
| } | |
| #plans .plans .plan footer .cycle .discount { | |
| border-color: var(--green) transparent transparent; | |
| color: var(--theme3); | |
| } | |
| #plans .plans .plan footer .cycle label { | |
| color: var(--theme2); | |
| } | |
| #plans .plans .plan footer .cycle strong { | |
| color: var(--theme1); | |
| } | |
| #plans .plans .plan.plus-plan h3 span { | |
| color: var(--theme3); | |
| } | |
| #plans .plans .plan.visionary-plan h3 span, | |
| #plans .plans .plan.visionary-plan header { | |
| color: var(--theme3); | |
| } | |
| .intl-tel-input .selected-flag .iti-arrow { | |
| border-top: 4px solid var(--theme2); | |
| } | |
| .intl-tel-input .selected-flag .iti-arrow.up { | |
| border-bottom: 4px solid var(--theme2); | |
| } | |
| .intl-tel-input .country-list { | |
| background-color: var(--theme3); | |
| border: 1px solid var(--theme4); | |
| } | |
| .intl-tel-input .country-list .divider { | |
| border-bottom: 1px solid var(--theme4); | |
| } | |
| .intl-tel-input .country-list .country .dial-code { | |
| color: var(--theme4); | |
| } | |
| .iti-flag { | |
| background-color: var(--theme4); | |
| } | |
| .pm_form .cardPanel { | |
| background: var(--theme1); | |
| color: var(--theme3); | |
| } | |
| .pm_form .cardPanel.issuer-mastercard { | |
| background: var(--black); | |
| } | |
| .paginator-disabled-main .paginator-dropdown, | |
| .paginator-disabled-next .paginator-btn-next, | |
| .paginator-disabled-previous .paginator-btn-previous { | |
| color: var(--theme5) !important; | |
| box-shadow: unset !important; | |
| background-color: var(--theme3) !important; | |
| } | |
| .paginator-disabled-main .paginator-dropdown:hover, | |
| .paginator-disabled-next .paginator-btn-next:hover, | |
| .paginator-disabled-previous .paginator-btn-previous:hover { | |
| background-color: var(--theme7) !important; | |
| color: var(--theme2) !important; | |
| } | |
| .popover { | |
| background-color: var(--theme3); | |
| } | |
| .popover-title { | |
| background-color: var(--theme3); | |
| border-bottom: var(--theme4); | |
| } | |
| .popover.top > .arrow { | |
| border-top-color: var(--theme4); | |
| } | |
| .popover.top > .arrow:after { | |
| border-top-color: var(--theme3); | |
| } | |
| .popover.right > .arrow { | |
| border-right-color: var(--theme4); | |
| } | |
| .popover.right > .arrow:after { | |
| border-right-color: var(--theme3); | |
| } | |
| .popover.bottom > .arrow { | |
| border-bottom-color: var(--theme4); | |
| } | |
| .popover.bottom > .arrow:after { | |
| border-bottom-color: var(--theme3); | |
| } | |
| .popover.left > .arrow { | |
| border-left-color: var(--theme4); | |
| } | |
| .popover.left > .arrow:after { | |
| border-left-color: var(--theme3); | |
| } | |
| .composerAttachments-container { | |
| background: var(--theme3); | |
| } | |
| .composerAttachments-loaders { | |
| border-top: 1px solid var(--theme4); | |
| } | |
| .composerAskEmbdded-details { | |
| background: var(--theme3); | |
| } | |
| .composerInputMeta-overlay { | |
| background: var(--theme3) !important; | |
| color: var(--theme2) !important; | |
| } | |
| .composerInputMeta-overlay-label { | |
| color: var(--theme4) !important; | |
| } | |
| .progressLoader-container.pm_button { | |
| background: var(--theme3); | |
| } | |
| [class*="listAttachments-icon"].embedded { | |
| color: var(--theme1); | |
| } | |
| .listAttachments-list .listAttachments-att { | |
| color: var(--theme2) !important; | |
| background: var(--theme3) !important; | |
| } | |
| .listAttachments-list .listAttachments-att:after { | |
| border-right: 1px solid var(--theme4) !important; | |
| } | |
| .squire-dropzone { | |
| background: var(--theme3) !important; | |
| } | |
| .conversation { | |
| background: var(--theme7) !important; | |
| border-bottom-color: var(--theme7) !important; | |
| } | |
| .conversation .expiration, | |
| body #conversation-list-rows .conversation .expiration { | |
| border-color: transparent var(--red-light) transparent transparent !important; | |
| } | |
| .conversation .row .meta .fa-star-o { | |
| color: var(--theme4) !important; | |
| } | |
| .conversation .row .meta .fa-star { | |
| color: var(--yellow) !important; | |
| } | |
| .conversation .row .pm_labels label { | |
| background: transparent !important; | |
| } | |
| .conversation .row h4 { | |
| color: var(--black) !important; | |
| } | |
| .conversation.read { | |
| background: var(--theme3) !important; | |
| border-bottom-color: var(--theme7) !important; | |
| } | |
| .conversation.read h4 { | |
| color: var(--black) !important; | |
| font-weight: 400; | |
| } | |
| .conversation.read .pm_labels label { | |
| box-shadow: none !important; | |
| background: transparent !important; | |
| } | |
| .conversation.marked::before { | |
| background-color: var(--theme1) !important; | |
| } | |
| .conversation.active { | |
| background: var(--theme6) !important; | |
| color: var(--theme3) !important; | |
| border-bottom-color: var(--theme7) !important; | |
| } | |
| .conversation.active h4 { | |
| color: var(--theme7) !important; | |
| } | |
| .conversation.active .pm_labels label { | |
| background: transparent !important; | |
| box-shadow: none !important; | |
| } | |
| body #conversation-list-rows .conversation { | |
| color: var(--theme2) !important; | |
| background: var(--theme7) !important; | |
| } | |
| body #conversation-list-rows .conversation .expiration { | |
| color: var(--theme3) !important; | |
| } | |
| body #conversation-list-rows .conversation .fa-star-o { | |
| color: var(--theme4) !important; | |
| } | |
| body #conversation-list-rows .conversation .fa-star { | |
| color: var(--yellow) !important; | |
| } | |
| body #conversation-list-rows .conversation .subject h4 { | |
| color: var(--black) !important; | |
| } | |
| body #conversation-list-rows .conversation .subject .pm_labels { | |
| background: transparent !important; | |
| } | |
| body #conversation-list-rows .conversation .subject .pm_labels label { | |
| background: transparent !important; | |
| } | |
| body #conversation-list-rows .conversation.read, | |
| body #conversation-list-rows .conversation.read .subject .pm_labels, | |
| body #conversation-list-rows .conversation.read .subject .pm_labels label { | |
| background: var(--theme3) !important; | |
| } | |
| body #conversation-list-rows .conversation.read .subject h4 { | |
| color: var(--theme2) !important; | |
| } | |
| .unsubscribePanel-container { | |
| background: var(--theme3) !important; | |
| color: var(--theme2) !important; | |
| } | |
| .unsubscribePanel-button, | |
| .messageExtra-container > [class*="-container"] > [class*="-button"] { | |
| background: var(--theme1) !important; | |
| color: var(--theme3) !important; | |
| border: 1px solid var(--theme1) !important; | |
| } | |
| .unsubscribePanel-button:hover, | |
| .messageExtra-container > [class*="-container"] > [class*="-button"]:hover { | |
| background: var(--theme6) !important; | |
| border: 1px solid var(--theme6) !important; | |
| } | |
| .eventsAttachments-container { | |
| background: var(--theme3) !important; | |
| color: var(--theme2) !important; | |
| } | |
| .eventsAttachments-summary { | |
| background: var(--theme6) !important; | |
| color: var(--theme7) !important; | |
| } | |
| .pm_button { | |
| color: var(--theme5) !important; | |
| border: 1px solid var(--theme4) !important; | |
| } | |
| .pm_button:hover { | |
| background-color: var(--theme3) !important; | |
| } | |
| .pm_button:active, | |
| .pm_button:focus { | |
| background-color: var(--theme4) !important; | |
| } | |
| .pm_button.primary { | |
| background-color: var(--theme1) !important; | |
| border-color: var(--theme1) !important; | |
| color: var(--theme3) !important; | |
| } | |
| .pm_button.primary:hover { | |
| background-color: var(--theme6) !important; | |
| border-color: var(--theme6) !important; | |
| } | |
| .pm_button.primary:active, | |
| .pm_button.primary:focus { | |
| background-color: var(--theme5) !important; | |
| border-color: var(--theme5) !important; | |
| } | |
| .pm_button.primary.disabled, | |
| .pm_button.primary[disabled] { | |
| background: var(--theme6) !important; | |
| } | |
| .pm_button.link { | |
| border: none !important; | |
| color: var(--theme1) !important; | |
| } | |
| .pm_button.round { | |
| border: 1px solid var(--theme4) !important; | |
| } | |
| .pm_button.round .fa { | |
| color: var(--theme1) !important; | |
| } | |
| .pm_button.round:hover { | |
| background-color: var(--theme3) !important; | |
| } | |
| .pm_button.round:active, | |
| .pm_button.round:focus { | |
| background-color: var(--theme3) !important; | |
| } | |
| .pm_button.success { | |
| background-color: var(--green) !important; | |
| border-color: var(--green) !important; | |
| color: var(--theme3) !important; | |
| } | |
| .pm_button.success:hover { | |
| background-color: var(--green-light) !important; | |
| border-color: var(--green-light) !important; | |
| } | |
| .pm_button.success.disabled, | |
| .pm_button.success[disabled] { | |
| background: var(--green-light) !important; | |
| } | |
| .pm_button.error { | |
| background-color: var(--red) !important; | |
| border-color: var(--red) !important; | |
| color: var(--theme3) !important; | |
| } | |
| .pm_button.error:hover { | |
| background-color: var(--red-light) !important; | |
| border-color: var(--red-light) !important; | |
| } | |
| .pm_button.error.disabled, | |
| .pm_button.error[disabled] { | |
| background: var(--red-light) !important; | |
| } | |
| .pm_buttons { | |
| border: 1px solid var(--theme4) !important; | |
| background: var(--theme3) !important; | |
| } | |
| .pm_buttons .pm_buttons { | |
| border: none !important; | |
| } | |
| .pm_buttons.disabled { | |
| border: 1px solid var(--theme3) !important; | |
| box-shadow: none !important; | |
| background: var(--theme3) !important; | |
| } | |
| .pm_buttons .pm_buttons-child { | |
| background: var(--theme3) !important; | |
| } | |
| .pm_buttons .pm_buttons-child.disabled { | |
| box-shadow: none !important; | |
| background: var(--theme3) !important; | |
| } | |
| .pm_buttons .disabled, | |
| .pm_buttons [disabled] { | |
| color: var(--theme4) !important; | |
| box-shadow: inset 0 0 50rem 0 var(--theme3) !important; | |
| background: var(--theme3) !important; | |
| } | |
| .pm_buttons .pm_buttons:not(:first-of-type), | |
| .pm_buttons > * { | |
| border-color: var(--theme4) !important; | |
| } | |
| .pm_buttons a, | |
| #conversation-view .message .details .pm_buttons a, | |
| .pm_buttons .pm_buttons-child { | |
| color: var(--theme5) !important; | |
| background: var(--theme3) !important; | |
| } | |
| .pm_buttons a:hover, | |
| #conversation-view .message .details .pm_buttons a:hover, | |
| .pm_buttons .pm_buttons-child:hover, | |
| .chooseLayoutBtns-container-rows .chooseLayoutBtns-btn-rows, | |
| .chooseLayoutBtns-container:not(.chooseLayoutBtns-container-rows) | |
| .chooseLayoutBtns-btn-column { | |
| background-color: var(--theme7) !important; | |
| color: var(--theme2) !important; | |
| } | |
| .pm_buttons a.active, | |
| .pm_buttons a:active, | |
| .pm_buttons .pm_buttons-child:active { | |
| background: var(--theme4) !important; | |
| } | |
| .pm_buttons.primary a { | |
| background-color: var(--theme1) !important; | |
| border-color: var(--theme1) !important; | |
| color: var(--theme3) !important; | |
| } | |
| .pm_buttons.primary a:hover { | |
| background-color: var(--theme6) !important; | |
| border-color: var(--theme6) !important; | |
| } | |
| .pm_buttons.primary a:active, | |
| .pm_buttons.primary a:focus { | |
| background-color: var(--theme5) !important; | |
| border-color: var(--theme5) !important; | |
| } | |
| .readUnread-container.disabled [class*="readUnread-btn"] { | |
| box-shadow: inset 0 0 50rem 0 var(--theme3) !important; | |
| } | |
| body.mobileMode #body #pm_main .fa-check-square, | |
| body.mobileMode #body #pm_main .fa-square-o { | |
| color: var(--theme5) !important; | |
| } | |
| .pm_dropdown { | |
| background: var(--theme7) !important; | |
| border: 1px solid var(--theme4) !important; | |
| } | |
| .pm_dropdown > a, | |
| .pm_dropdown > button, | |
| .pm_dropdown > ul > li { | |
| border-bottom: 1px solid var(--theme4) !important; | |
| } | |
| .pm_dropdown > a:hover, | |
| .pm_dropdown > button:hover, | |
| .pm_dropdown > ul > li:hover { | |
| color: var(--theme2) !important; | |
| } | |
| .pm_dropdown .paginator-dropdown-item { | |
| background: var(--theme7) !important; | |
| } | |
| .pm_dropdown .paginator-dropdown-item:hover { | |
| background: var(--theme3) !important; | |
| } | |
| .pm_labels.inline label .close { | |
| color: var(--theme2) !important; | |
| } | |
| .pm_labels label { | |
| color: var(--theme2) !important; | |
| } | |
| .pm_modal .angular-squire-wrapper { | |
| border: 1px solid var(--theme4) !important; | |
| } | |
| .pm_modal.domains .modal-dialog .modal-content .modal-body { | |
| box-shadow: inset 0 1px 0 var(--theme4), inset 0 -1px 0 var(--theme4) !important; | |
| } | |
| .pm_modal .modal-dialog { | |
| background: var(--theme3) !important; | |
| border: 5px solid var(--theme1) !important; | |
| box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important; | |
| } | |
| .pm_modal .modal-dialog .close { | |
| color: var(--theme3) !important; | |
| background: var(--theme1) !important; | |
| } | |
| .pm_modal .modal-dialog .modal-content { | |
| background: var(--theme3) !important; | |
| } | |
| .pm_modal .modal-dialog .modal-content .modal-body { | |
| box-shadow: inset 0 1px 0 var(--theme4), inset 0 -1px 0 var(--theme4) !important; | |
| } | |
| .pm_modal .modal-dialog .modal-footer { | |
| background-color: var(--theme3) !important; | |
| } | |
| .pm_modal .modal-dialog .modal-content h1, | |
| .pm_modal .modal-dialog .modal-content h2, | |
| .pm_modal .modal-dialog .modal-content h3, | |
| .pm_modal .modal-dialog .modal-content h4 { | |
| color: var(--theme2) !important; | |
| } | |
| .pm_modal .modal-dialog .modal-content h1 em, | |
| .pm_modal .modal-dialog .modal-content h2 em, | |
| .pm_modal .modal-dialog .modal-content h3 em, | |
| .pm_modal .modal-dialog .modal-content h4 em { | |
| color: var(--theme4) !important; | |
| } | |
| body.mobileMode .pm_modal .modal-dialog { | |
| background: var(--theme3) !important; | |
| } | |
| body.mobileMode .pm_modal .modal-dialog .close { | |
| color: var(--theme2) !important; | |
| } | |
| .pm_form legend { | |
| border-bottom: 1px solid var(--theme4) !important; | |
| } | |
| .pm_form legend .small { | |
| color: var(--theme2) !important; | |
| } | |
| .pm_form legend .small a { | |
| color: var(--theme1) !important; | |
| } | |
| .pm_form ::-webkit-input-placeholder { | |
| color: var(--theme4); | |
| } | |
| .pm_form :-moz-placeholder { | |
| color: var(--theme4); | |
| } | |
| .pm_form ::-moz-placeholder { | |
| color: var(--theme4); | |
| } | |
| .pm_form input:-ms-input-placeholder { | |
| color: var(--theme4); | |
| } | |
| .pm_form ::-ms-input-placeholder { | |
| color: var(--theme4); | |
| } | |
| .pm_form :-ms-input-placeholder { | |
| color: var(--theme4); | |
| } | |
| .pm_form .pm_select { | |
| border-radius: 4px; | |
| box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.15) !important; | |
| } | |
| .pm_form .pm_select .fa { | |
| color: var(--theme2) !important; | |
| } | |
| .pm_form optgroup { | |
| color: var(--theme2) !important; | |
| background: var(--theme3) !important; | |
| } | |
| .pm_form .input-icon .fa { | |
| color: var(--theme4) !important; | |
| } | |
| .searchForm-advanced-wrapper input[type="text"], | |
| .searchForm-advanced-wrapper input[type="search"], | |
| .searchForm-advanced-wrapper input[type="email"], | |
| .searchForm-advanced-wrapper input[type="number"] { | |
| box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.15) !important; | |
| color: var(--theme2) !important; | |
| } | |
| .pm_form input[type="text"], | |
| .pm_form input[type="number"], | |
| .pm_form input[type="password"], | |
| .pm_form input[type="email"], | |
| .pm_form input[type="search"], | |
| .pm_form input[type="tel"] { | |
| box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.15) !important; | |
| background: var(--theme7) !important; | |
| } | |
| .pm_form select:active, | |
| .pm_form select:focus { | |
| box-shadow: inset 0 0 0 1px var(--theme1) !important; | |
| } | |
| .pm_form input[type="text"], | |
| .pm_form input[type="number"], | |
| .pm_form input[type="password"], | |
| .pm_form input[type="email"], | |
| .pm_form input[type="search"], | |
| .pm_form input[type="tel"], | |
| .pm_select, | |
| .pm_form textarea, | |
| .contactItem-inputs input, | |
| .contactItem-inputs textarea { | |
| border: 1px solid var(--theme4) !important; | |
| color: var(--theme2) !important; | |
| } | |
| .pm_form input[type="text"].ng-invalid.ng-touched, | |
| .pm_form input[type="number"].ng-invalid.ng-touched, | |
| .pm_form input[type="password"].ng-invalid.ng-touched, | |
| .pm_form input[type="email"].ng-invalid.ng-touched, | |
| .pm_form input[type="search"].ng-invalid.ng-touched, | |
| .pm_form input[type="tel"].ng-invalid.ng-touched, | |
| .pm_form select.ng-invalid.ng-touched, | |
| .pm_form textarea.ng-invalid.ng-touched { | |
| border-color: var(--red) !important; | |
| } | |
| .pm_form input[type="text"]:hover, | |
| .pm_form input[type="number"]:hover, | |
| .pm_form input[type="password"]:hover, | |
| .pm_form input[type="email"]:hover, | |
| .pm_form input[type="search"]:hover, | |
| .pm_form input[type="tel"]:hover, | |
| .pm_select:hover, | |
| .pm_form textarea:hover { | |
| border-color: var(--theme4) !important; | |
| } | |
| .pm_form input[type="text"]:focus, | |
| .pm_form input[type="number"]:focus, | |
| .pm_form input[type="password"]:focus, | |
| .pm_form input[type="email"]:focus, | |
| .pm_form input[type="search"]:focus, | |
| .pm_form input[type="tel"]:focus, | |
| .pm_select:focus, | |
| .pm_form textarea:focus { | |
| color: var(--black) !important; | |
| background: var(--theme7) !important; | |
| border-color: var(--theme1) !important; | |
| } | |
| .pm_form input[type="text"].disabled, | |
| .pm_form input[type="text"][disabled], | |
| .pm_form input[type="number"].disabled, | |
| .pm_form input[type="number"][disabled], | |
| .pm_form input[type="password"].disabled, | |
| .pm_form input[type="password"][disabled], | |
| .pm_form input[type="email"].disabled, | |
| .pm_form input[type="email"][disabled], | |
| .pm_form input[type="search"].disabled, | |
| .pm_form input[type="search"][disabled], | |
| .pm_form input[type="tel"].disabled, | |
| .pm_form input[type="tel"][disabled], | |
| .pm_form select.disabled, | |
| .pm_form select[disabled], | |
| .pm_form textarea.disabled, | |
| .pm_form textarea[disabled] { | |
| color: var(--theme4) !important; | |
| border-color: var(--theme4) !important; | |
| background: var(--theme4) !important; | |
| } | |
| .pm_form input[type="text"].success, | |
| .pm_form input[type="number"].success, | |
| .pm_form input[type="password"].success, | |
| .pm_form input[type="email"].success, | |
| .pm_form input[type="search"].success, | |
| .pm_form input[type="tel"].success, | |
| .pm_form select.success, | |
| .pm_form textarea.success { | |
| color: var(--green-light) !important; | |
| border-color: var(--green-light) !important; | |
| } | |
| .pm_form input[type="text"].error, | |
| .pm_form input[type="number"].error, | |
| .pm_form input[type="password"].error, | |
| .pm_form input[type="email"].error, | |
| .pm_form input[type="search"].error, | |
| .pm_form input[type="tel"].error, | |
| .pm_form select.error, | |
| .pm_form textarea.error { | |
| color: var(--red-light) !important; | |
| border-color: var(--red-light) !important; | |
| } | |
| .pm_form input[type="text"].warning, | |
| .pm_form input[type="number"].warning, | |
| .pm_form input[type="password"].warning, | |
| .pm_form input[type="email"].warning, | |
| .pm_form input[type="search"].warning, | |
| .pm_form input[type="tel"].warning, | |
| .pm_form select.warning, | |
| .pm_form textarea.warning { | |
| color: var(--yellow-light) !important; | |
| border-color: var(--yellow-light) !important; | |
| } | |
| .pm_panel, | |
| .pm_panel.alt a { | |
| color: var(--theme3) !important; | |
| } | |
| .pm_form textarea { | |
| background: var(--theme7) !important; | |
| } | |
| body.light .pm_panel { | |
| background: var(--theme3) !important; | |
| color: var(--theme2) !important; | |
| } | |
| .contactList-table { | |
| background: transparent !important; | |
| } | |
| .contactList-item-activeContact td { | |
| background-color: var(--theme1) !important; | |
| } | |
| .pm_table table thead { | |
| border-top: 1px solid var(--theme4) !important; | |
| } | |
| .pm_table table.print em { | |
| border: 1px solid var(--theme4) !important; | |
| } | |
| .pm_sort ul, | |
| .pm_table table.bordered { | |
| border: 1px solid var(--theme4) !important; | |
| } | |
| .pm_table table.plain th { | |
| color: var(--theme2) !important; | |
| } | |
| .pm_table table td .fa.fa-sort, | |
| .pm_table table th .fa.fa-sort { | |
| color: var(--theme4) !important; | |
| } | |
| .pm_table table th { | |
| background: var(--theme3) !important; | |
| border-bottom: 1px solid var(--theme4) !important; | |
| color: var(--theme5) !important; | |
| } | |
| .pm_table table th a { | |
| color: var(--theme1) !important; | |
| } | |
| .pm_table table th .fa { | |
| color: var(--theme1) !important; | |
| } | |
| .pm_table table td { | |
| border-bottom: 1px solid var(--theme4) !important; | |
| color: var(--theme2) !important; | |
| } | |
| .pm_table table tr.hasTable table { | |
| background-color: var(--theme3) !important; | |
| } | |
| .pm_table table tr.disabled td { | |
| color: var(--theme4) !important; | |
| } | |
| .pm_toggle span.knob { | |
| background: var(--theme3) !important; | |
| border: 1px solid var(--theme4) !important; | |
| } | |
| .pm_toggle.off .off, | |
| .pm_toggle.on .on { | |
| background-color: var(--theme1) !important; | |
| color: var(--theme3) !important; | |
| } | |
| .pm_tabs { | |
| border-right: 1px solid var(--theme4) !important; | |
| } | |
| .pm_tabs li a { | |
| background-color: var(--theme3) !important; | |
| } | |
| .pm_tabs li.active a { | |
| background-color: var(--theme3) !important; | |
| border-bottom: unset !important; | |
| color: var(--theme1) !important; | |
| } | |
| .pm_sort ul li { | |
| border-bottom: 1px solid var(--theme4) !important; | |
| background: var(--theme3) !important; | |
| } | |
| .pm_sort ul li.highlight { | |
| background-color: var(--theme3) !important; | |
| } | |
| .pm_sort ul li .fa.fa-ellipsis-v { | |
| color: var(--theme4) !important; | |
| } | |
| .as-sortable-dragging .fa-check, | |
| .pm_sort ul li .fa.fa-check { | |
| color: var(--theme1) !important; | |
| } | |
| .pm_sort ul li .fa.fa-check { | |
| background: var(--theme3) !important; | |
| } | |
| .as-sortable-placeholder { | |
| background: var(--theme4) !important; | |
| } | |
| .as-sortable-dragging { | |
| border: 1px solid var(--theme4) !important; | |
| background: var(--theme3) !important; | |
| } | |
| .image.loading:after, | |
| .loader em { | |
| border-left: 0.5em solid var(--theme5) !important; | |
| } | |
| .as-sortable-dragging .fa-check { | |
| background: var(--theme3) !important; | |
| } | |
| .as-sortable-dragging .fa-ellipsis-v { | |
| color: var(--theme4) !important; | |
| } | |
| #pm_loader.full { | |
| background: var(--theme3) !important; | |
| } | |
| #pm_slow, | |
| #pm_slow2 { | |
| color: var(--theme3) !important; | |
| } | |
| #pm_loading { | |
| background: var(--theme3) !important; | |
| } | |
| .image.loading:after { | |
| background: var(--theme3) !important; | |
| } | |
| input[type="range"].pm_range::-webkit-slider-runnable-track { | |
| background: var(--theme4); | |
| } | |
| input[type="range"].pm_range::-webkit-slider-thumb { | |
| background: var(--theme1); | |
| } | |
| input[type="range"].pm_range:focus::-webkit-slider-runnable-track { | |
| background: var(--theme4); | |
| } | |
| input[type="range"].pm_range::-moz-range-track { | |
| background: var(--theme1); | |
| } | |
| input[type="range"].pm_range::-moz-range-thumb { | |
| background: var(--theme1); | |
| } | |
| input[type="range"].pm_range::-ms-track { | |
| background: var(--theme1); | |
| } | |
| input[type="range"].pm_range::-ms-fill-lower { | |
| background: var(--theme4); | |
| } | |
| input[type="range"].pm_range::-ms-fill-upper { | |
| background: var(--theme1); | |
| } | |
| input[type="range"].pm_range::-ms-thumb { | |
| background: var(--theme1); | |
| } | |
| input[type="range"].pm_range:focus::-ms-fill-lower { | |
| background: var(--theme4); | |
| } | |
| input[type="range"].pm_range:focus::-ms-fill-upper { | |
| background: var(--theme1); | |
| } | |
| #pm_main, | |
| #wrapper, | |
| #conversation-list-columns, | |
| #conversation-list-rows { | |
| background: var(--theme3) !important; | |
| } | |
| .pm_badge, | |
| .pm_tag { | |
| background: var(--theme4) !important; | |
| } | |
| .pm_tag { | |
| color: var(--theme2) !important; | |
| } | |
| .pm_badge { | |
| color: var(--theme3) !important; | |
| } | |
| .pm_badge.default { | |
| color: var(--theme2) !important; | |
| } | |
| .pm_badge.primary { | |
| background-color: var(--theme1) !important; | |
| } | |
| .pm_badge.success { | |
| background-color: var(--green) !important; | |
| } | |
| .pm_badge.error { | |
| background-color: var(--red) !important; | |
| } | |
| .pm_badge.warning { | |
| background-color: var(--yellow-light) !important; | |
| } | |
| .scrollbox-container { | |
| background-color: var(--theme7) !important; | |
| background-image: unset !important; | |
| } | |
| .scrollbox-container::after, | |
| .scrollbox-container::before { | |
| background: none !important; | |
| } | |
| .commandPalette-container { | |
| background-color: var(--theme7) !important; | |
| } | |
| .autocompleteCommand-container | |
| .autocompleteEmails-autocomplete | |
| [aria-selected="true"] { | |
| background-color: var(--theme1) !important; | |
| } | |
| .currencySelector-container .currencySelector-button.active { | |
| background: var(--theme4); | |
| } | |
| .pm_sort-container, | |
| .pm_sort-item-content { | |
| border-color: var(--theme4) !important; | |
| } | |
| .emailBlockList-list { | |
| border-color: var(--theme4) !important; | |
| } | |
| .emailBlockList-row { | |
| color: var(--theme5) !important; | |
| } | |
| .manageContactGroupLink-container, | |
| .manageContactGroupLink-label, | |
| .manageContactGroupLink-icon { | |
| color: var(--theme2) !important; | |
| } | |
| .totalRows-label-right { | |
| background: none !important; | |
| } | |
| .sidebarApp-menu .ico-protonvpn { | |
| opacity: 0.5; | |
| -webkit-filter: brightness(0); | |
| filter: brightness(0); | |
| } | |
| .dropdown-label-scrollbox-label-text-ellipsis { | |
| color: var(--theme2) !important; | |
| } | |
| .dropdown-folder-scrollbox-group-item-button { | |
| color: var(--theme2) !important; | |
| } | |
| .contactItem-inputs input:not([type="checkbox"]), | |
| .contactItem-inputs textarea { | |
| background: var(--white); | |
| } | |
| .pm_toggle-checkbox:checked + .pm_toggle-label { | |
| background-color: var(--theme1) !important; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment