ProtonMail V3 - Dark Malachite Theme.css

/*---
Name: Dark Malachite Theme
For: ProtonMail
By: Colonel_Gerdauf
---*/


/* Basic formatting and Main Menus */
#pm_main {
  color: #f0f0f0;
  background-color: #1f1f1f;
}
body {
  font-family: Tahoma, Geneva, sans-serif; 
  font-size: 14px;
}
.headerDesktop-logo {
  background-color: #082e29;
}
.search-form-fieldset {
  background: rgba(8,8,8,0.8);
}
.headerSecured-container {
  background-color: #085e53;
}
.navigation li:hover {
  border-color: rgba(255,255,0,0.75);
  background-color: rgba(240,255,255,0.1);
}
.navigation li.active {
  border-color: rgba(255,0,128,0.75);
  background-color: rgba(240,255,0,0.225);
}
.navigation li.active:hover {
  background-color: rgba(240,255,255,0.3);
}
.navigation li.active:hover a {
  pointer-events: none;
}
.sidebar {
  background-color: #083f38;
}
.sidebarApp-item.active .sidebarApp-link {
  border-left-width: 4px;
  border-left-color: rgba(255,0,128,0.75); 
  background-color: rgba(240,255,0,0.25);
}
.sidebarApp-item.active:hover .sidebarApp-link {
  background-color: rgba(240,255,0,0.4);
  pointer-events: none;
}
.sidebarApp-item:hover:not(.active) .sidebarApp-link {
  background-color: rgba(240,255,255,0.1);
}
.pm_modal .modal-dialog, .pm_modal .modal-dialog .modal-content, .pm_modal .modal-dialog .modal-footer {
  color: inherit;
  background-color: #1f1f1f;
  border-color: #7a80cc;
}
.pm_modal .modal-dialog .close {
  background-color: #7a80cc;
}

/* emails */

.conversation {
  background-color: #404040; 
}
.conversation.read {
  background-color: #101010; 
}
.conversation.active {
  background-color: #282828;
  color: #ffff80;  
}
.conversation .row h4 {
  color: inherit;
}
#conversation-view header h1 {
  color: inherit;
}
#conversation-view .message .summary,
#conversation-view .message .summary .summary-right,
#conversation-view .message .details,
.eventsAttachments-summary,
#attachmentArea,
#conversation-view .message .summary .labels,
#conversation-view .message .summary .location.folders,
#conversation-view .message .summary .message-attachments,
#conversation-view .message .summary .status, 
#conversation-view .message .summary .time{
  background-color: #404040;
}

#conversation-view .message .summary .meta .contact span,
#conversation-view .message .details .recipients-summary strong {
  color: #d0d0d0;  
}
#conversation-view .message .summary .encryptionStatus .fa {
  color: #a0a0a0;  
}
#conversation-view .frame,
.eventsAttachments-details-wrapper {
  background-color: #303030;
}
.eventsAttachments-details-wrapper {
  border-color: #404040;
}

/* Alerts and Notifications */
.alert {
  border-radius: 8px;
  color: inherit;
  background-color: #404040;
}
.alert a{
  color: #0040f0;
}
.alert.alert-info {
  color: #f6e7f2;
  background-color: #404480;
}
.alert.alert-info a {
  color: #f0f000;
}
.alert.alert-warning {
  color: #f2e6e6;
  background-color: #7f0000;
}
.alert.alert-warning a {
  color: #00f0f0;
}


/* Buttons */
.pm_button, .pm_button:focus, .pm_button:active {
  color: inherit;
  background-color: #3f3f3f ;
  border-color: rgba(255,255,255,0.4);
  border-radius: 4px;
}
.pm_button.primary, .pm_button.primary:focus, .pm_button.primary:active {
  color: inherit;
  background-color: #7f3fff;
  border-color: rgba(255,255,255,0.4);
  border-radius: 4px;
}
.pm_button.white, .pm_button.white:focus, .pm_button.white:active {
  color: inherit;
  background-color: #1f1f1f;
  border-color: rgba(255,255,255,0.4);
  border-radius: 4px;
}
.pm_button:hover {
  color: #040404;
  background-color: #d0d0d0;
}
.pm_button.primary:hover {
  color: #805600;
  background-color: #d4bfff;
  border-color: #ccc;
}
.pm_button.link {
  color: #d0d0f0;
  background-color: #3f3f3f;
}
.pm_button.link:hover {
  color: #040408;
  background-color: #d0d0d0;
}
.currencySelector-container .currencySelector-button.active {
  color: #401000;
  background-color: #00d040;
  border-radius: 0px;
}
.currencySelector-container .currencySelector-button:active {
  background-color: #209740;
  border-radius: 0px;
}
div.noUi-target {
  background-color: #404040; 
}
div.noUi-handle {
  background-color: #60c060;
  border-color: #80d080;
}
div.noUi-connect {
  background-color: #404080; 
}
div.noUi-horizontal div.noUi-tooltip {
  color: #f0ffff;
  background-color: rgba(64,48,48,0.9);
  border-color: rgba(64,48,48,0.9);
  box-shadow: 0 0 2px 3px rgba(128,255,0,0.5);
  font-weight: bold;
}


/* badges and context items */
.pm_badge.default {
  color: #c0c0c0;
  background-color: #282828;
}


/* checkboxes */
.customCheckbox-input + .customCheckbox-mask {
  background-color: #0f0f0f;
}
.customCheckbox-input:not(:checked) + .customCheckbox-mask {
  background-image: none;
}
.customCheckbox-input:checked + .customCheckbox-mask {
  background-color: #676ecd;
  border-color: #8288d9;
}


/* Forms */
.pm_form .pm_select, .settingsDashboard-plans [class*="Column-container"] [class*="addonRow"] .pm_select {  
  background-color: #2f2f2f;
  box-shadow: rgba(255,255,255,0.45) 0 0 5px inset;
  border-radius: 2px;
}
.pm_form .pm_select .fa {
  color: #c0c0c0;
}
.pm_form select, .pm_form select:focus {
  color: #f0f0f0;
  background-color: #3f3f3f;
}
.pm_form select option {
  color: inherit;
  background-color: #000;
}
.alert .pm_select,.alert input[type=email],.alert input[type=number],.alert input[type=password],.alert input[type=search],.alert input[type=text],.alert textarea {
 background:#1f1f1f!important
}


/* Tables */
.settingsDashboard-overview-section-table-container .overviewSection-container .overviewSection-tbody-billing {
  background-color: #101010; 
}
.settingsDashboard-plans {
  background-color: #282828;
}
.settingsDashboard-plans .planPrice {
  color: #5c995c;
}
.totalRows-2-years-price, .totalRows-monthly-price, .totalRows-yearly-price, .settingsDashboard-plans .freeColumn-free {
  color: #93cda2;  
}
.settingsDashboard-plans [class*="Column-container"] .isCurrent {
  background-color: #7a80cc;
  border-color: #7a80cc;
  box-shadow: 0 0 8px #7a80cc,0 0 0 2px #7a80cc;
}
.settingsDashboard-plans.free-active .freeColumn-container,
.settingsDashboard-plans.plus-active .plusColumn-container,
.settingsDashboard-plans.professional-active .professionalColumn-container,
.settingsDashboard-plans.visionary-active .visionaryColumn-container {
  box-shadow: 0 0 8px #7a80cc,0 0 0 2px #7a80cc;
}

.settingsDashboard-plans .disabled{
 color: #c00000; 
}


/* Toggle Switches */
.pm_toggle {
  color: rgba(95,95,95,0.25);
  background-color: #3f3f3f;
  box-shadow: #fefefe 0 0 1.2px inset;
}
.pm_toggle:hover { 
  color: rgba(95,95,95,0.5);
  -webkit-transition: 1s;
  transition: 1s;
}
.pm_toggle span.knob {
  background-color: #684068;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  border-color: transparent;
}
.pm_toggle.on .on {
  color: #fff0d7;
  background-color: #0080d0;
  box-shadow: #6cafd9 0 0 4px inset;
}
.pm_toggle.off .off {
  color: #d7ffff;
  background-color: #800000;
  box-shadow: #d96c6c 0 0 4px inset;
}

/* textboxes */
.pm_form input[type="email"],
.pm_form input[type="number"],
.pm_form input[type="password"],
.pm_form input[type="search"],
.pm_form input[type="tel"],
.pm_form input[type="text"],
.pm_form input[type="url"],
.pm_form textarea {
  color: #a0a0a0;
  background-color: #101010;
}
.pm_form input[type="email"]:focus,
.pm_form input[type="number"]:focus,
.pm_form input[type="password"]:focus,
.pm_form input[type="search"]:focus,
.pm_form input[type="tel"]:focus,
.pm_form input[type="text"]:focus,
.pm_form input[type="url"]:focus,
.pm_form textarea:focus {
  color: #c0c0c0;
  background-color: #080808;
}