Protonmail : un CSS pour le webmail

Rédigé par citizenz - - Aucun commentaire

Protonmail, le mail sécurisé et crypté, permet, entre autre, de "tweaker" son interface de webmail... à condition de maitriser un tant soit peu le CSS ... Voici donc un p'tit code CSS trouvé sur le Net et légèrement amélioré. Votre webmail Protonmail prend, du coup, quelques couleurs sympas ...

/*!
ProtonMail Custom Theme - Black Rock
modified by Jack.A
*/
 
/* Frame (topbar and sidebar.) */
 
header#pm_header-desktop {
background: #21242E;
}
 
body section.sidebar {
background: #21242E;
}
 
header#pm_header-desktop a.logo {
background: #21242E;
}
 
/* Search bar */
form.searchForm fieldset {
border-radius: 2px;
background-color: #21242E;
}
 
form.searchForm fieldset button[type=“button”] {
color: #2EBF68;
background-color: #21242E;
border-radius: 2px 0 0 2px;
}
 
form.searchForm fieldset #closeAdvSearch, form.searchForm fieldset button[type=“submit”] {
color: #2EBF68;
}
 
form.searchForm 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;
}
CitizenZ : Geek quadra nivernais
fan d'ovalie, de musique, de linuxeries et de Net !

À lire également

Écrire un commentaire

 Se rappeler de moi sur ce site
Quelle est la sixième lettre du mot ejrkm1s ?