thème grey_light pour protonmail 3.5

Voici une nouvelle version de mon thème clair pour protonmail. Cette version est compatible avec Protonmail 3.5.4.


/* =========================================== *
* LIGHT_GREY 3.5.4alpha by WILLYBUNTU
*
*
*
* https://www.behance.net/_csalmeida
*
* =========================================== */

/* Frame (topbar and sidebar.) */

header#pm_header-desktop {
background: #e6eaf0;
border-bottom: 1px solid #acb0bf;
}

body section.sidebar {
background: #fff;
width: 210px;
}

body #pm_main {
width: calc(100% – 210px);
}

header#pm_header-desktop a.logo {
background: #e6eaf0;
}

/* Search bar */
form.searchForm fieldset {
border-radius: 2px;
background-color: #e6eaf0;
}

form.searchForm fieldset button[type= »button »] {
color: #398ee7;
background-color: #e6eaf0;
border-radius: 2px 0 0 2px;
}

form.searchForm fieldset #closeAdvSearch, form.searchForm fieldset button[type= »submit »] {
color: #398ee7;
}

form.searchForm fieldset button[type= »button »]:hover {
background-color: #398ee7;
}

form.searchForm.adv fieldset #closeAdvSearch, form.searchForm.adv fieldset button[type= »submit »] {
background-color: #ddd;
border-radius: 2px 0 0 2px;
}

.pm_form .input-icon .fa {
color: #398ee7;
}

form.searchForm fieldset input.query {
outline: 0;
height: 33px;
line-height: 33px;
display: block;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0 0 0 10px;
background: #fff;
color: #777;
position: absolute;
left: 35px;
box-sizing: border-box;
top: 0;
right: 0;
bottom: 0;
width: 80%;
font-size: 14px;
border-radius: 5px;
}

/*
form.searchForm fieldset input.query:active {
color: #333;
}
*/

/* Top Navigation */

.pm_button.primary {
background-color: #398ee7;
border-color: #398ee7;
}

.pm_button.primary:hover {
background-color: #398ee7;
border-color: #398ee7;
}

header#pm_header-desktop ul.navigation li a .fa {
color: #777;
}

header#pm_header-desktop ul.navigation li a strong {
color: #777;
}

/* TN Dropdown Menu */
header#pm_header-desktop .pm_buttons .pm_button.primary {
background-color: #398ee7 !important;
border-color: #398ee7 !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: #398ee7 !important;
}

header#pm_header-desktop ul.navigation li.active a strong, header#pm_header-desktop ul.navigation li:hover a strong {
color: #f00;
}

header#pm_header-desktop ul.navigation li.active a .fa, header#pm_header-desktop ul.navigation li:hover a .fa {
color: #333;
}

header#pm_header-desktop ul.navigation li.active a strong, header#pm_header-desktop ul.navigation li:hover a strong {
color: #333;
}

/* Sidebar Navigation */
body section.sidebar ul.menu {
margin-bottom: 0px;
}

body section.sidebar ul.menu li a i.fa {
color: #333;
}

body section.sidebar ul.menu li a {
color: #333;
font-size: 12px;
}

body section.sidebar ul.menu li a:hover {
color: #398ee7;
}

body section.sidebar ul.menu li.active a i.fa,
body section.sidebar ul.menu li.active a {
color: #da4a38;
}

body section.sidebar #sidebarLabels {
height: calc(100% – 355px);
min-height: 40px;
}

body section.sidebar div.footer {
padding-top: 0px;
padding-bottom: 0px;
}

body section.sidebar div.footer div.link a {
color: #777;
visibility: hidden;
}

body section.sidebar div.footer .bar em {
background-color: #000;
}

body section.sidebar div.footer div.storage strong {
color: #777;
}
/* Label Navigation */

body section.sidebar div.labels ul li a:hover {
color: #398ee7;
}

body section.sidebar div.labels ul li.active a {
color: #da4a38;
}

body section.sidebar div.labels ul li a {
color: #333;
font-size: 13px;
height: 30px;
}

body section.sidebar {
padding: 10px;
}

/* Settings Navigation */

#pm_settings .pm_tabs li.active a.pm_button {
background: #fff !important;
color: #000;
}

#pm_settings .pm_tabs li a.pm_button {
border-color: #ddd;
background: #f5f6f8;
color: #222;
}

#pm_settings .pm_tabs li a.pm_button:hover {
background: #fff;
}

#pm_settings .pm_tabs {
/*background: #2f2e2e;*/
background: #e6eaf0;
}

/* Dashboard Settings */

#pm_settings #plans header .link {
color: #398ee7;
}

#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: #398ee7;
}

.pm_button.primary:active, .pm_button.primary:focus {
background: #398ee7;
border-color: #398ee7;
}

html.protonmail .text-purple {
color: #398ee7;
}

/* Label Settings */

.pm_button.round {
border-radius: 2px;
border: 1px solid #7b7b7b;
}

.pm_button.round .fa {
color: #398ee7;
}

/* 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: #398ee7;
}

p a {
color: #398ee7;
}

/* Links */

.pm_button.link {
color: #398ee7;
}

/* Inbox */

.pm_buttons a {
color: #1c1c1c;
}

.conversation,
.conversation.read,
.conversation.active {
box-shadow: inset 0 -1px 0 #CCC;
}

.conversation.read {
color: #777 !important;
}

.conversation.read {
color: #333;
background: #FFF;
}
.conversation.read .pm_labels label {
color: #333;
background: #FFF;
box-shadow: none;
}

.conversation.active,
.conversation.active h4 {
color: #333;
}

/* Reading e-mail. */
#conversation-view .message .toggleDetails {
color: #398ee7;
}

/* Composing e-mail */
#pm_composer .composer header {
background: #2c2b2b;
}

#pm_composer .composer header .pm_button {
color: #398ee7;
}

#pm_composer .composer footer .pm_button.primary {
background: #398ee7;
}

/* apparence du logo (ETAT = normal + survol) */
header#pm_header-desktop a.logo img {
visibility: hidden;
}

header#pm_header-desktop a.logo {
/*   background-color: #f1f1f1;*/
background-image: url(« http://wilibre.ml/blog/wp-content/uploads/2016/02/Protonmail_logomini.png »);
background-repeat: no-repeat;
background-position: center center;
}

/* Notifications */
body .cg-notify-message.notification-success {
/*    background-color: #398ee7;
border-color: #398ee7;*/
background-color: #222;
border-color: #222;
color: #fff;
}

/* Tootips */

/*
div.tooltip.inner {
background: #2c2b2b !important;
}*/

/* Mobile */

header#pm_header-mobile {
background: #1a1a1a;
}

body.mobileMode #pm_sidebar section.sidebar {
background: #2c2b2b;
}

body.mobileMode #pm_sidebar section.sidebar .pm_button.round .fa {
color: #398ee7;
}

header#pm_header-mobile a.compose {
color: #398ee7;
}

body.mobileMode #body #pm_main .fa-check-square, body.mobileMode #body #pm_main .fa-square-o {
color: #398ee7;
}