Skip to content

Instantly share code, notes, and snippets.

@CatTheHacker CatTheHacker/style.css
Last active Nov 14, 2019

Embed
What would you like to do?
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
You can’t perform that action at this time.