Deutera One Theme

templates/_styles.scss

@@ -67,6 +67,7 @@
   color: $navigation !important;
   background: $highlight !important;
   border: none !important;
+  transition: background-color .2s ease-in-out;
 } // compose button
 
 .sidebar-btn-compose:hover {
@@ -250,12 +251,12 @@ body section.sidebar div.footer div.storage strong {
 
 // Unread message background.
 body #conversation-list-rows .conversation {
-
+  background: #fff;
 }
 
 // Read message background.
 body #conversation-list-rows .conversation.read {
-
+  background: #fff;
 }
 
 // ================================= \\
@@ -340,6 +341,19 @@ p a {
   color: $highlight;
 }
 
+// Toggle rectangle checkboxes.
+.pm_toggle-label {
+  background: $base;
+}
+
+.pm_toggle-checkbox:focus + .pm_toggle-label, .pm_toggle-label:hover {
+  background: lighten($base, 5%);
+}
+
+.pm_toggle-checkbox:checked + .pm_toggle-label:hover, .pm_toggle-checkbox:checked:focus + .pm_toggle-label {
+  background: $highlight;
+}
+
 
 // Pill switch buttons.
 .pm_toggle.off .off, .pm_toggle.on .on {
@@ -421,11 +435,11 @@ html.protonmail .text-red {
 
 // Plans and prices VPN buttons.
 .vpnRow-add {
-  background-color: rgba($highlight, 0.7);
+  background-color:  lighten($base, 5%);
 }
 
 .vpnRow-add:hover {
-  background: rgba($highlight, 1);
+  background: $base;
 }
 
 // Plans and prices - prices.

templates/deutera_one/_override.scss

@@ -0,0 +1,145 @@
+// ================================= \\
+// ========== HORIZONTAL =========== \\
+// ========== NAVIGATION =========== \\
+// ============= BAR =============== \\
+// ================================= \\
+
+.searchForm-action-button-advanced:hover, .searchForm-action-button-toggle:hover {
+  background: $highlight;
+  color: $base;
+} // Search bar buttons hover.
+
+.customRadio-input:checked + .customRadio-mask {
+  box-shadow: inset 0 0 0 3px #fff,inset 0 0 0 10px $base;
+  border-color: $base;
+} // Advanced search menu.
+
+// ================================= \\
+// =========== VERTICAL ============ \\
+// ========== NAVIGATION =========== \\
+// ============= BAR =============== \\
+// ================================= \\
+
+.sidebar-btn-compose, .sidebar-btn-compose:active  {
+  color: $navigation !important;
+  background: $search !important;
+  border: none !important;
+  transition: color .2s ease-in-out,
+              background-color .2s ease-in-out;
+} // compose button
+
+.sidebar-btn-compose:hover {
+  color: $highlight !important;
+  background: darken($search, 5%) !important;
+  border: none !important;
+  // Covers button with darker hue of highlight
+  box-shadow: inset 0 400px 400px rgba(0,0,0,0.1);
+} // compose button
+
+
+// ================================= \\
+// =========== MESSAGE ============ \\
+// ========== NAVIGATION =========== \\
+// ================================= \\
+
+// Toolbar icons.
+.pm_buttons, .pm_buttons a {
+  color: $base;
+}
+
+.pm_buttons a:hover, .pm_buttons .pm_buttons-child:hover {
+  color: lighten($base, 5%);
+}
+
+body #conversation-list-rows .conversation .fa-star {
+  color: $search;
+} // star icon
+
+// Left border of message title.
+.conversation.marked::before {
+  background: darken($search, 5%);
+}
+
+// Checkbox next to message title.
+.customCheckbox-container:hover .customCheckbox-mask,
+.customMaskInput-container:hover .customCheckbox-mask {
+  border-color: $base !important;
+} // message checkbox
+
+.customCheckbox-input:checked+.customCheckbox-mask {
+  background-color: $base;
+  border-color: $base;
+  color: $extra_color;
+}
+
+// ================================= \\
+// =========== COMPOSING =========== \\
+// ============ MESSAGE ============ \\
+// ============= WINDOW ============= \\
+// ================================= \\
+
+// Links in general.
+p a {
+  color: lighten($base, 10%);
+}
+
+// ================================= \\
+// =========== SETTINGS =========== \\
+// ============ PANEL ============ \\
+// ================================= \\
+
+// Small icons in settings.
+html.protonmail .text-purple,
+.settingsUsers-link-signatures  {
+  color: $base !important;
+}
+
+// Topup link.
+.overviewSection-container .topUp-button {
+  color: $base;
+}
+
+// Toggle rectangle checkboxes.
+.pm_toggle-label {
+  background: $base;
+}
+
+.pm_toggle-checkbox:focus + .pm_toggle-label, .pm_toggle-label:hover {
+  background: lighten($base, 5%);
+}
+
+.pm_toggle-checkbox:checked + .pm_toggle-label:hover, .pm_toggle-checkbox:checked:focus + .pm_toggle-label {
+  background: $highlight;
+}
+
+.pm_toggle-label {
+  &::before {
+    color: #fff;
+  }
+
+  &::after {
+    background: #fff;
+  }
+}
+
+.pm_toggle-checkbox:checked + .pm_toggle-label:hover, .pm_toggle-checkbox:checked:focus + .pm_toggle-label {
+  &::before {
+    color: $base;
+  }
+
+  &::after {
+    background: $base;
+  }
+}
+
+// ================================= \\
+// ============= OTHER ============= \\
+// ================================= \\
+
+//Top pop up notifications.
+body .cg-notify-message.notification-success {
+  background-color: darken($search, 5%);
+  color: #fff;
+}
+
+

templates/deutera_one/deutera_one.scss

@@ -0,0 +1,21 @@
+/*! =========================================== *
+ * DEUTERA ONE THEME
+ * Version: 3.14.0
+ * Author: Cristiano Almeida
+ * Website: www.csalmeida.com
+ * Tweets @_csalmeida
+ * =========================================== */
+
+// Change colors here and they will change everywhere.
+$base: #000076;
+$search: #08426b;
+$highlight: #ffed00;
+$navigation: #fff;
+
+$text_color: #0d0d0d;
+$extra_color: #e6eaf0;
+$danger_color: #d62646;
+$warning_color: #ffaa00;
+
+@import '../styles';
+@import 'override';

Themes/blue_and_orange/blue_and_orange.css → themes/blue_and_orange/blue_and_orange.css

@@ -52,7 +52,8 @@
 .sidebar-btn-compose, .sidebar-btn-compose:active {
   color: #fff !important;
   background: #ED7D3A !important;
-  border: none !important; }
+  border: none !important;
+  transition: background-color .2s ease-in-out; }
 
 .sidebar-btn-compose:hover {
   color: #fff !important;
@@ -165,6 +166,12 @@ body section.sidebar div.footer div.storage strong {
   background: #ED7D3A;
   width: 5px; }
 
+body #conversation-list-rows .conversation {
+  background: #fff; }
+
+body #conversation-list-rows .conversation.read {
+  background: #fff; }
+
 #pm_composer .composer header {
   background: #0F4C5C;
   color: #fff; }
@@ -210,6 +217,15 @@ p a {
 .pm_button.link {
   color: #ED7D3A; }
 
+.pm_toggle-label {
+  background: #0F4C5C; }
+
+.pm_toggle-checkbox:focus + .pm_toggle-label, .pm_toggle-label:hover {
+  background: #135e72; }
+
+.pm_toggle-checkbox:checked + .pm_toggle-label:hover, .pm_toggle-checkbox:checked:focus + .pm_toggle-label {
+  background: #ED7D3A; }
+
 .pm_toggle.off .off, .pm_toggle.on .on {
   background: #0F4C5C;
   color: #fff; }
@@ -265,10 +281,10 @@ html.protonmail .text-red {
   background: #ed7d3a; }
 
 .vpnRow-add {
-  background-color: rgba(237, 125, 58, 0.7); }
+  background-color: #135e72; }
 
 .vpnRow-add:hover {
-  background: #ed7d3a; }
+  background: #0F4C5C; }
 
 .settingsDashboard-plans .freeColumn-free,
 .totalRows-monthly-price,

Themes/dark_bubble_gum/dark_bubble_gum.css → themes/dark_bubble_gum/dark_bubble_gum.css

@@ -52,7 +52,8 @@
 .sidebar-btn-compose, .sidebar-btn-compose:active {
   color: #fff !important;
   background: #EF2D56 !important;
-  border: none !important; }
+  border: none !important;
+  transition: background-color .2s ease-in-out; }
 
 .sidebar-btn-compose:hover {
   color: #fff !important;
@@ -165,6 +166,12 @@ body section.sidebar div.footer div.storage strong {
   background: #EF2D56;
   width: 5px; }
 
+body #conversation-list-rows .conversation {
+  background: #fff; }
+
+body #conversation-list-rows .conversation.read {
+  background: #fff; }
+
 #pm_composer .composer header {
   background: #1C1C1C;
   color: #fff; }
@@ -210,6 +217,15 @@ p a {
 .pm_button.link {
   color: #EF2D56; }
 
+.pm_toggle-label {
+  background: #1C1C1C; }
+
+.pm_toggle-checkbox:focus + .pm_toggle-label, .pm_toggle-label:hover {
+  background: #292929; }
+
+.pm_toggle-checkbox:checked + .pm_toggle-label:hover, .pm_toggle-checkbox:checked:focus + .pm_toggle-label {
+  background: #EF2D56; }
+
 .pm_toggle.off .off, .pm_toggle.on .on {
   background: #1C1C1C;
   color: #fff; }
@@ -265,10 +281,10 @@ html.protonmail .text-red {
   background: #ef2d56; }
 
 .vpnRow-add {
-  background-color: rgba(239, 45, 86, 0.7); }
+  background-color: #292929; }
 
 .vpnRow-add:hover {
-  background: #ef2d56; }
+  background: #1C1C1C; }
 
 .settingsDashboard-plans .freeColumn-free,
 .totalRows-monthly-price,