Darker (hackier?) skin for ProtonMail - apply in settings or by stylus/stylish (stylus better ofc) / not finished / v0.7 i think? / mostly im using 3 colors
/* fix border */ | |
* { | |
border-radius: 0!important | |
} | |
/* more green for professional */ | |
html.protonmail .professional { | |
color: #64DD17 | |
} | |
/* fix for my custom scrollbar */ | |
/* switched to firefox - guess i dont need that (?) */ | |
/*::-webkit-scrollbar { | |
background-color: #212121!important | |
}*/ | |
/* backgrounds */ | |
.sidebar, | |
.logo, | |
.headerDesktop-container { | |
background: #212121; | |
} | |
#conversation-list-columns, | |
#pm_main { | |
color: #fff; | |
background: #424242 | |
} | |
.conversation { | |
background: #424242!important; | |
color: #EEE; | |
border-bottom-color: #64DD17 | |
} | |
/* button sidebar */ | |
.sidebarApp-container .sidebar-btn-compose { | |
background-color: #64DD17 !important; | |
border-color: #64DD17 !important; | |
color: #212121 | |
} | |
/* idk */ | |
.image.loading:after, | |
.loader em, | |
navigationItem-item ptDnd-dropzone-container { | |
border-left-color: #64DD17!important | |
} | |
/* text */ | |
html.protonmail .text-red { | |
color: #D50000 | |
} | |
html.protonmail .text-green { | |
color: #64DD17 | |
} | |
html.protonmail .text-purple { | |
color: #64DD17!important | |
} | |
/* links */ | |
.headerBlock-container [class*=link], | |
.signupUserForm-footer a, | |
.sidebarApp-container .footer div.storage strong, | |
.sidebarApp-container .footer div.link a, | |
.sidebarApp-item.active .navigationItem-icon, | |
.pm_button.link, | |
p a { | |
color: #64DD17!important; | |
} | |
/* alerts */ | |
.alert { | |
background-color: #212121!important; | |
} | |
.alert-warning { | |
background-color: #FF6F00!important; | |
} | |
.alert.alert-danger a, | |
.alert.alert-info a, | |
.alert.alert-success a, | |
.alert.alert-warning a { | |
color: #64DD17 | |
} | |
/* textarea */ | |
.pm_form textarea { | |
background-color: #212121; | |
color: #64DD17 | |
} | |
/* inputs */ | |
.pm_form input[type=text], | |
.pm_form input[type=number], | |
.pm_form input[type=tel], | |
.pm_form input[type=password], | |
.pm_form input[type=email], | |
.pm_form input[type=search], | |
.pm_form select, | |
.pm_form textarea, | |
.pm_form input[type=text]:hover, | |
.pm_form input[type=number]:hover, | |
.pm_form input[type=tel]:hover, | |
.pm_form input[type=password]:hover, | |
.pm_form input[type=email]:hover, | |
.pm_form input[type=search]:hover, | |
.pm_form select:hover, | |
.pm_form textarea:hover, | |
.pm_form input[type=text]:focus, | |
.pm_form input[type=number]:focus, | |
.pm_form input[type=tel]:focus, | |
.pm_form input[type=password]:focus, | |
.pm_form input[type=email]:focus, | |
.pm_form input[type=search]:focus, | |
.pm_form select:focus, | |
.pm_form textarea:focus { | |
border-color: #64DD17; | |
color: #64DD17; | |
background-color: #212121!important | |
} | |
/* toggles */ | |
.pm_toggle.off .off, | |
.pm_toggle.on .on { | |
background-color: #64DD17!important | |
} | |
.pm_toggle { | |
box-shadow: 0 0 0 1px #64DD17!important; | |
background-color: #212121 | |
} | |
.pm_toggle span.knob { | |
border: 1px solid #64DD17!important; | |
background-color: #64DD17!important | |
} | |
/* buttons */ | |
.pm_button { | |
background-color: #212121; | |
color: #64DD17; | |
border: 1px solid #64DD17 | |
} | |
.pm_buttons a, | |
.pm_buttons a.active, | |
.pm_buttons a:active { | |
background: #212121!important; | |
color: #fff!important | |
} | |
.pm_button.success, | |
.pm_button:hover, | |
.pm_button:focus, | |
.pm_button.primary { | |
background-color: #64DD17!important; | |
color: #212121!important; | |
border: 1px solid #212121!important | |
} | |
.pm_button.round, | |
.pm_button.primary:hover, | |
.pm_button.primary:focus { | |
background-color: #212121!important; | |
color: #64DD17!important; | |
border: 1px solid #64DD17!important | |
} | |
/* Button Error */ | |
.pm_button.error, | |
.pm_button.error:focus, | |
.pm_button.error:hover { | |
background-color: #F44336!important; | |
border-color: #B71C1C!important; | |
color: #fff!important | |
} | |
.pm_button.error:focus, | |
.pm_button.error:hover { | |
box-shadow: 0px 0px 15px 5px #D50000; | |
background-color: #D50000!important; | |
border-color: #D50000!important | |
} | |
/* checkboxes / radios */ | |
.customMaskInput-mask, | |
.customCheckbox-input:checked+.customCheckbox-mask { | |
color: #64DD17!important; | |
background-color: #212121; | |
border-color: #64DD17!important | |
} | |
.customRadio-input:checked+.customRadio-mask { | |
box-shadow: inset 0 0 0 3px #212121, inset 0 0 0 10px #64DD17; | |
border-color: #64DD17 | |
} | |
/* navigation active */ | |
.navigation>li.active, | |
.navigation>li:hover { | |
box-shadow: 0 5px 0 0 #64DD17 inset; | |
} | |
li.active>a>i { | |
color: #64DD17!important | |
} | |
/* search box */ | |
.searchForm-advanced-main, | |
.searchForm-advanced-wrapper { | |
background-color: #212121 | |
} | |
img { | |
filter: invert(1) | |
} | |
/* table border */ | |
.pm_table table.bordered, | |
.pm_table table td { | |
color: #64DD17; | |
border-color: #64DD17!important | |
} | |
.pm_table table thead { | |
border-top-color: #64DD17 | |
} | |
.pm_table table th { | |
background-color: #212121; | |
border-bottom: #64DD17; | |
color: #64DD17 | |
} | |
/* badge */ | |
.pm_badge, | |
.pm_tag { | |
background: #212121!important; | |
color: #64DD17!important | |
} | |
.pm_badge.success { | |
background: #64DD17!important; | |
color: #212121!important | |
} | |
/* icons */ | |
.pm_button.round .fa { | |
color: #64DD17 | |
} | |
/* kbd */ | |
kbd { | |
color: #64DD17; | |
background-color: #212121; | |
box-shadow: 0 0 0 #64DD17; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment