Skip to content

Instantly share code, notes, and snippets.

@chaoslogick
Created June 26, 2020 05:06
Show Gist options
  • Save chaoslogick/44a237b264bf3653c7aa604d7311389f to your computer and use it in GitHub Desktop.
Save chaoslogick/44a237b264bf3653c7aa604d7311389f to your computer and use it in GitHub Desktop.
CSS: Protonmail Theme
/*!
ProtonMail Custom Theme - Black Rock
modified by Jack.A
*/
/* Frame (topbar and sidebar.) */
.headerDesktop-container {
background: #21242E;
}
body section.sidebar {
background: #21242E;
}
.headerDesktop-container a.logo {
background: #21242E;
}
/* Search bar */
.search-form-fieldset {
border-radius: 2px;
background-color: #21242E;
}
.search-form-fieldset button[type=“button”] {
color: #2EBF68;
background-color: #21242E;
border-radius: 2px 0 0 2px;
}
.search-form-fieldset #closeAdvSearch, form.searchForm fieldset button[type=“submit”] {
color: #2EBF68;
}
.search-form-fieldset button[type=“button”]:hover {
background-color: #2EBF68;
}
form.searchForm.adv fieldset #closeAdvSearch, form.searchForm.adv fieldset button[type=“submit”] {
background-color: #21242E;
border-radius: 2px 0 0 2px;
}
.pm_form .input-icon .fa {
color: #2EBF68;
}
/* Top Navigation */
.pm_button.primary {
background-color: #2EBF68;
border-color: #2EBF68;
}
.pm_button.primary:hover {
background-color: #2EBF68;
border-color: #2EBF68;
}
header#pm_header-desktop ul.navigation li a .fa {
color: #fff;
}
header#pm_header-desktop ul.navigation li a strong {
color: #fff;
}
/* TN Dropdown Menu */
header#pm_header-desktop .pm_buttons .pm_button.primary {
background-color: #2EBF68 !important;
border-color: #2EBF68 !important;
}
/* TN Links Hover */
header#pm_header-desktop ul.navigation li.active a, header#pm_header-desktop ul.navigation li:hover a {
border-top-color: #2EBF68 !important;
}
header#pm_header-desktop ul.navigation li.active a strong, header#pm_header-desktop ul.navigation li:hover a strong {
color: #2EBF68;
}
header#pm_header-desktop ul.navigation li.active a .fa, header#pm_header-desktop ul.navigation li:hover a .fa {
color: #2EBF68;
}
header#pm_header-desktop ul.navigation li.active a strong, header#pm_header-desktop ul.navigation li:hover a strong {
color: #2EBF68;
}
/* Sidebar Navigation */
body section.sidebar ul.menu li.active a i.fa {
color: #2EBF68;
}
body section.sidebar ul.menu li a {
color: #fff;
}
body section.sidebar ul.menu li a:hover {
color: #2EBF68;
}
body section.sidebar div.footer div.link a {
color: #2EBF68;
}
body section.sidebar div.footer .bar em {
background-color: #2EBF68;
}
body section.sidebar div.footer div.storage strong {
color: #2EBF68;
}
/* Label Navigation */
body section.sidebar div.labels ul li a:hover {
color: #2EBF68;
}
body section.sidebar div.labels ul li a {
color: #fff;
}
/* Settings Navigation */
#pm_settings .pm_tabs li.active a.pm_button {
background: #fff !important;
color: #1c1c1c;
}
#pm_settings .pm_tabs li a.pm_button {
border-color: #1c1c1c;
background: #1c1c1c;
color: #fff;
}
#pm_settings .pm_tabs li a.pm_button:hover {
background: #373737;
}
#pm_settings .pm_tabs {
/*background: #2f2e2e;*/
background: #474747;
}
/* Dashboard Settings */
#pm_settings #plans header .link {
color: #8cc63f;
}
#pm_settings #plans .plans .plan header {
background: #1c1c1c;
border: 1px solid #1c1c1c;
}
#pm_settings #plans .plans .plan .price, #pm_settings #plans .plans .plan h3 {
color: #1c1c1c;
}
.pm_button.primary.disabled, .pm_button.primary[disabled] {
background: #2EBF68;
}
.pm_button.primary:active, .pm_button.primary:focus {
background: #2EBF68;
border-color: #2EBF68;
}
html.protonmail .text-purple {
color: #2EBF68;
}
/* Label Settings */
.pm_button.round {
border-radius: 2px;
border: 1px solid #7b7b7b;
}
.pm_button.round .fa {
color: #2EBF68;
}
/* Security Settings */
.pm_button {
color: #1c1c1c;
}
.pm_table td {
color: #1c1c1c;
}
/* Contacts */
.pm_table th a {
color: #1c1c1c;
}
.pm_table th .fa {
color: #1c1c1c;
}
/* Report Bug */
.pm_toggle.off .off {
background: #2EBF68;
}
p a {
color: #2EBF68;
}
/* Links */
.pm_button.link {
color: #2EBF68;
}
/* Inbox */
.pm_buttons a {
color: #1c1c1c;
}
body #conversation-list-rows .conversation.read {
color: #1c1c1c !important;
}
/* Reading e-mail. */
#conversation-view .message .toggleDetails {
color: #2EBF68;
}
/* Composing e-mail */
#pm_composer .composer header {
background: #2c2b2b;
}
#pm_composer .composer header .pm_button {
color: #2EBF68;
}
#pm_composer .composer footer .pm_button.primary {
background: #2EBF68;
}
/* Notifications */
body .cg-notify-message.notification-success {
background-color: #2EBF68;
border-color: #2EBF68;
}
/* Tootips */
/*
div.tooltip.inner {
background: #2c2b2b !important;
}*/
/* Mobile */
header#pm_header-mobile {
background: #21242E;
}
body.mobileMode #pm_sidebar section.sidebar {
background: #2c2b2b;
}
body.mobileMode #pm_sidebar section.sidebar .pm_button.round .fa {
color: #2EBF68;
}
header#pm_header-mobile a.compose {
color: #2EBF68;
}
body.mobileMode #body #pm_main .fa-check-square, body.mobileMode #body #pm_main .fa-square-o {
color: #2EBF68;
}
.conversation.read {
background: #2C2F3C;
}
/* Conversation View */
.conversation.active {
background: #1D202A;
border-left: 4px solid #90C941;
}
.conversation .row .senders {
color: #C8C8C8;
}
.conversation {
height: 70px;
box-shadow: inset 0 -1px 0 #4A4D59;
}
#pm_toolbar-desktop {
background-color: #FAFAFA;
}
.pm_toolbar {
background-color: #FAFAFA;
}
.pm_buttons a {
color: #4A4D59;
}
body #conversation-list-columns {
background-color: #FAFAFA;
}
#conversation-view header {
border: 0px;
}
#conversation-view .message.open {
border: 0px;
}
.conversation .row h4 {
color: #4E8FF2;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment