CitizenZ

Blog Libre, Net & Société

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;
}
Classé dans : Net, Sécurité Mots clés : protonmail, css, webmail

Vous avez aimé cet article ? Alors partagez-le avec vos amis en cliquant sur les boutons ci-dessous :


CitizenZ : Geek quadra nivernais
épris d'ovalie, de musique, de Libre, de linuxeries et de Net !

Écrire un commentaire

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

Fil RSS des commentaires de cet article