Created
December 29, 2019 05:51
-
-
Save ajtatum/28bb848e57f082623b47f861a1ac840d to your computer and use it in GitHub Desktop.
ProtonMail Dark Cyan 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
/* =========================================== * | |
* DARK CYAN THEME | |
* Version: 1.0.0 | |
* Author: AJ Tatum | |
* Website: ajt.io | |
* Tweets @ajtatum | |
* =========================================== */ | |
.headerDesktop-container { | |
background-color: #025a6c; | |
} | |
.search-form-fieldset { | |
background: #202124; | |
} | |
[class*="searchForm-action-button-"] { | |
color: #fff; | |
} | |
.searchForm-action-button-advanced:hover, .searchForm-action-button-toggle:hover { | |
background: #013b47; | |
} | |
.customRadio-input:checked + .customRadio-mask { | |
box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 10px #013b47; | |
border-color: #013b47; | |
} | |
.pm_button.primary, .pm_button.primary:active { | |
color: #fff; | |
background-color: #013b47; | |
border-color: #013b47; | |
} | |
.pm_button.primary:hover, .pm_button.primary:focus { | |
background-color: rgba(0, 0, 0, 0.7); | |
border-color: rgba(0, 0, 0, 0.7); | |
} | |
.navigation > li.active, .navigation > li:hover { | |
box-shadow: 0 5px 0 0 #7cb0bb inset; | |
} | |
.navigation-link { | |
color: #fff; | |
} | |
.navigation-title:hover { | |
color: #7cb0bb; | |
} | |
.pm_dropdown .navigationUser-logout { | |
background-color: #025a6c !important; | |
border-color: #025a6c !important; | |
color: #fff !important; | |
} | |
.pm_dropdown .navigationUser-logout:hover { | |
background-color: #000 !important; | |
border-color: #000 !important; | |
color: #fff !important; | |
} | |
.sidebar-btn-compose, .sidebar-btn-compose:active { | |
color: #fff !important; | |
background: #013b47 !important; | |
border: none !important; | |
} | |
.sidebar-btn-compose:hover { | |
color: #fff !important; | |
background: #013b47 !important; | |
border: none !important; | |
box-shadow: inset 0 400px 400px rgba(0, 0, 0, 0.1); | |
} | |
.headerDesktop-logo { | |
background-color: #025a6c; | |
} | |
body section.sidebar { | |
background: #025a6c; | |
} | |
body section.sidebar a.compose { | |
background: #7cb0bb; | |
color: #fff; | |
} | |
body section.sidebar a.compose:hover { | |
background: #fff; | |
border-color: #fff; | |
color: #025a6c; | |
} | |
body section.sidebar ul.menu li a { | |
color: #fff; | |
} | |
body section.sidebar ul.menu li a:hover { | |
color: #7cb0bb; | |
} | |
body section.sidebar ul.menu li.active a, body section.sidebar ul.menu li.active a { | |
color: #fff; | |
} | |
body section.sidebar ul.menu li.active a i.fa, body section.sidebar ul.menu li.active a i.fa:hover { | |
color: #7cb0bb !important; | |
opacity: 1; | |
} | |
body section.sidebar ul.menu li a .fa-repeat { | |
color: #fff; | |
opacity: 1; | |
} | |
body section.sidebar ul.menu li a i.fa { | |
color: #fff; | |
opacity: 0.5; | |
} | |
body section.sidebar ul.menu li a i.fa:hover, body section.sidebar ul.menu li a:hover i.fa { | |
color: #fff; | |
opacity: 1; | |
} | |
body section.sidebar ul.menu li a em { | |
color: #fff; | |
opacity: 0.5; | |
} | |
body section.sidebar div.labels ul li a { | |
color: #fff; | |
opacity: 0.5; | |
} | |
body section.sidebar div.labels ul li a:hover { | |
color: #fff; | |
opacity: 1; | |
} | |
body section.sidebar div.footer div.link a, body section.sidebar a.version { | |
color: #fff; | |
opacity: 0.5; | |
} | |
body section.sidebar div.footer div.link a:hover, body section.sidebar a.version:hover { | |
color: #7cb0bb; | |
opacity: 1; | |
} | |
body section.sidebar div.footer div.storage strong { | |
color: #fff; | |
opacity: 0.5; | |
} | |
.conversationPlaceholder #storageStatus .wrap span strong { | |
color: #7cb0bb; | |
} | |
.storageBar { | |
background-color: rgba(0, 0, 0, 0.1); | |
} | |
.storageBar .storageBar-progress { | |
background-color: #7cb0bb; | |
} | |
.pm_buttons, .pm_buttons a { | |
color: #0d0d0d; | |
} | |
.pm_buttons a:hover, .pm_buttons .pm_buttons-child:hover { | |
color: #7cb0bb; | |
} | |
.readUnread-container-ur .readUnread-btn-read, | |
.pm_buttons .pm_buttons:not(:first-of-type), .pm_buttons > *, | |
.pm_buttons, .pm_buttons a { | |
border-color: #025a6c !important; | |
} | |
.dropdown-folder-search .fa.dropdown-folder-search-icon, | |
.dropdown-label-search .fa.dropdown-label-search-icon { | |
color: #7cb0bb; | |
} | |
.dropdown-folder-create-button, | |
.createLabel-button { | |
color: #7cb0bb; | |
} | |
.customCheckbox-container:hover .customCheckbox-mask, | |
.customMaskInput-container:hover .customCheckbox-mask { | |
border-color: #7cb0bb !important; | |
} | |
.customCheckbox-input:checked + .customCheckbox-mask { | |
background-color: #7cb0bb; | |
border-color: #7cb0bb; | |
color: #025a6c; | |
} | |
.conversation.marked::before { | |
background: #7cb0bb; | |
width: 5px; | |
} | |
#pm_composer .composer header { | |
background: #025a6c; | |
color: #fff; | |
} | |
p a { | |
color: #7cb0bb; | |
} | |
#pm_composer .composer footer .pm_button { | |
background: #fff; | |
color: #025a6c; | |
} | |
#pm_composer .composer footer .pm_button:hover { | |
background: #fff; | |
color: #025a6c; | |
} | |
#pm_composer .composer footer .pm_button.primary { | |
background: #025a6c; | |
color: #fff; | |
} | |
#pm_composer .composer footer .pm_button.primary:hover { | |
background: #7cb0bb; | |
color: #fff; | |
} | |
#pm_settings .pm_tabs { | |
background: #e6eaf0; | |
} | |
#pm_settings .pm_tabs li a.pm_button { | |
color: #025a6c; | |
border-color: #e6eaf0; | |
} | |
#pm_settings .pm_tabs li a.pm_button:hover { | |
color: #7cb0bb; | |
} | |
#pm_settings .pm_tabs li.active a.pm_button { | |
color: #7cb0bb; | |
} | |
.pm_button.link { | |
color: #7cb0bb; | |
} | |
.pm_toggle.off .off, .pm_toggle.on .on { | |
background: #025a6c; | |
color: #fff; | |
} | |
.pm_toggle { | |
box-shadow: 0 0 0 1px #e6eaf0; | |
} | |
.alert.alert-info { | |
background: rgba(230, 234, 240, 0.7); | |
color: #0d0d0d; | |
} | |
.alert.alert-warning { | |
background: rgba(255, 170, 0, 0.7); | |
color: #0d0d0d; | |
} | |
.pm_button.error:focus, .pm_button.error:hover { | |
background-color: #d62646; | |
border-color: rgba(214, 38, 70, 0.7); | |
} | |
.pm_button.error { | |
background-color: rgba(214, 38, 70, 0.7); | |
border-color: #d62646; | |
} | |
html.protonmail .text-purple, | |
.settingsUsers-link-signatures { | |
color: #7cb0bb !important; | |
} | |
html.protonmail .text-red { | |
color: #d62646 !important; | |
} | |
.pm_button.link { | |
color: #0d0d0d !important; | |
} | |
.overviewSection-container .topUp-button { | |
color: #7cb0bb; | |
} | |
.settingsDashboard-plans [class*="Column-container"] .isCurrent { | |
background: #025a6c; | |
box-shadow: 0 0 8px #025a6c, 0 0 0 2px #025a6c; | |
border-bottom: 1px solid #025a6c; | |
} | |
.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: #025a6c; | |
box-shadow: 0 0 8px #025a6c, 0 0 0 2px #025a6c; | |
} | |
[class*="settingsDashboard-arrowToScroll"] .arrowsToScroll-button { | |
background: rgba(47, 191, 113, 0.7); | |
} | |
[class*="settingsDashboard-arrowToScroll"] .arrowsToScroll-button:hover { | |
background: #7cb0bb; | |
} | |
.vpnRow-add { | |
background-color: rgba(47, 191, 113, 0.7); | |
} | |
.vpnRow-add:hover { | |
background: #7cb0bb; | |
} | |
.settingsDashboard-plans .freeColumn-free, | |
.totalRows-monthly-price, | |
.totalRows-yearly-price { | |
color: #0d0d0d; | |
} | |
.totalRows-discount { | |
border-color: transparent #7cb0bb; | |
} | |
.pm_modal .modal-dialog { | |
border-color: #025a6c; | |
} | |
.pm_modal .modal-dialog .close { | |
color: #fff; | |
background: #025a6c; | |
} | |
.pm_badge { | |
color: #fff; | |
} | |
.pm_badge.primary { | |
background: #025a6c; | |
color: #fff; | |
} | |
.pm_badge.success { | |
background: #7cb0bb; | |
color: #fff; | |
} | |
.pm_table table th a, .pm_table table th .fa { | |
color: #7cb0bb; | |
} | |
body .cg-notify-message.notification-success { | |
background-color: #7cb0bb; | |
color: #fff; | |
} | |
.appConfigBody-is-mobile .sidebarApp-container { | |
background: #025a6c; | |
} | |
.success{ | |
background: #025a6c !important; | |
color: #fff; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment