Protonmail v3.7.3 Update

Themes now should work on ProtonMail's v3.7.3.
Added SASS template to make easier for everyone to creatte themes.

7 files changed, 1317 insertions, 0 deletions

diff --git a/Themes/v3.7.3/blue_and_orange/blue_and_orange.css b/Themes/v3.7.3/blue_and_orange/blue_and_orange.css
new file mode 100644
index 0000000..2836779
--- /dev/null
+++ b/Themes/v3.7.3/blue_and_orange/blue_and_orange.css
@@ -0,0 +1,302 @@
+/* =========================================== *
+ * BLUE AND ORANGE 3.7.3 THEME
+ * Author: Cristiano Almeida
+ * Website: www.csalmeida.com
+ * Tweets @_csalmeida
+ * =========================================== */
+.headerDesktop-container {
+  background-color: #0F4C5C;
+}
+
+.search-form-fieldset {
+  background: #0A353F;
+}
+
+[class*="searchForm-action-button-"] {
+  color: #fff;
+}
+
+.searchForm-action-button-advanced:hover, .searchForm-action-button-toggle:hover {
+  background: #ED7D3A;
+}
+
+.customRadio-input:checked + .customRadio-mask {
+  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 10px #ED7D3A;
+  border-color: #ED7D3A;
+}
+
+.pm_button.primary, .pm_button.primary:active {
+  color: #fff;
+  background-color: #0F4C5C;
+  border-color: #0F4C5C;
+}
+
+.pm_button.primary:hover, .pm_button.primary:focus {
+  background-color: #0A353F;
+  border-color: #0A353F;
+}
+
+.navigation > li.active, .navigation > li:hover {
+  box-shadow: 0 5px 0 0 #ED7D3A inset;
+}
+
+.navigation-link {
+  color: #fff;
+}
+
+.navigation-title:hover {
+  color: #ED7D3A;
+}
+
+.pm_dropdown .navigationUser-logout {
+  background-color: #0F4C5C !important;
+  border-color: #0F4C5C !important;
+  color: #fff !important;
+}
+
+.pm_dropdown .navigationUser-logout:hover {
+  background-color: #0A353F !important;
+  border-color: #0A353F !important;
+  color: #fff !important;
+}
+
+.sidebar-btn-compose, .sidebar-btn-compose:active {
+  color: #fff !important;
+  background: #ED7D3A !important;
+  border: none !important;
+}
+
+.sidebar-btn-compose:hover {
+  color: #fff !important;
+  background: #ED7D3A !important;
+  border: none !important;
+  box-shadow: inset 0 400px 400px rgba(0, 0, 0, 0.1);
+}
+
+.headerDesktop-logo {
+  background-color: #0F4C5C;
+}
+
+body section.sidebar {
+  background: #0F4C5C;
+}
+
+body section.sidebar a.compose {
+  background: #ED7D3A;
+  color: #fff;
+}
+
+body section.sidebar a.compose:hover {
+  background: #fff;
+  border-color: #fff;
+  color: #0F4C5C;
+}
+
+body section.sidebar ul.menu li a {
+  color: #fff;
+}
+
+body section.sidebar ul.menu li a:hover {
+  color: #ED7D3A;
+}
+
+body section.sidebar ul.menu li.active a, body section.sidebar ul.menu li.active a {
+  color: #fff;
+}
+
+body section.sidebar ul.menu li.active a i.fa, body section.sidebar ul.menu li.active a i.fa:hover {
+  color: #ED7D3A !important;
+  opacity: 1;
+}
+
+body section.sidebar ul.menu li a .fa-repeat {
+  color: #fff;
+  opacity: 1;
+}
+
+body section.sidebar ul.menu li a i.fa {
+  color: #fff;
+  opacity: 0.5;
+}
+
+body section.sidebar ul.menu li a i.fa:hover, body section.sidebar ul.menu li a:hover i.fa {
+  color: #fff;
+  opacity: 1;
+}
+
+body section.sidebar ul.menu li a em {
+  color: #fff;
+  opacity: 0.5;
+}
+
+body section.sidebar div.labels ul li a {
+  color: #fff;
+  opacity: 0.5;
+}
+
+body section.sidebar div.labels ul li a:hover {
+  color: #fff;
+  opacity: 1;
+}
+
+body section.sidebar div.footer div.link a, body section.sidebar a.version {
+  color: #fff;
+  opacity: 0.5;
+}
+
+body section.sidebar div.footer div.link a:hover, body section.sidebar a.version:hover {
+  color: #ED7D3A;
+  opacity: 1;
+}
+
+body section.sidebar div.footer div.storage strong {
+  color: #fff;
+  opacity: 0.5;
+}
+
+body section.sidebar div.footer .bar em {
+  background: #ED7D3A;
+  height: 3px;
+}
+
+body section.sidebar div.footer .bar {
+  background: #fff;
+  height: 3px;
+}
+
+.pm_buttons, .pm_buttons a {
+  color: #0F4C5C;
+}
+
+.conversation.marked::before {
+  background: #ED7D3A;
+  width: 5px;
+}
+
+#pm_composer .composer header {
+  background: #0F4C5C;
+  color: #fff;
+}
+
+p a {
+  color: #ED7D3A;
+}
+
+#pm_composer .composer footer .pm_button {
+  background: #fff;
+  color: #0F4C5C;
+}
+
+#pm_composer .composer footer .pm_button:hover {
+  background: #fff;
+  color: #0F4C5C;
+}
+
+#pm_composer .composer footer .pm_button.primary {
+  background: #0F4C5C;
+  color: #fff;
+}
+
+#pm_composer .composer footer .pm_button.primary:hover {
+  background: #ED7D3A;
+  color: #fff;
+}
+
+#pm_settings .pm_tabs {
+  background: #e6eaf0;
+}
+
+#pm_settings .pm_tabs li a.pm_button {
+  color: #0F4C5C;
+  border-color: #e6eaf0;
+}
+
+#pm_settings .pm_tabs li a.pm_button:hover {
+  color: #ED7D3A;
+}
+
+#pm_settings .pm_tabs li.active a.pm_button {
+  color: #ED7D3A;
+}
+
+.pm_button.link {
+  color: #ED7D3A;
+}
+
+.pm_toggle.off .off, .pm_toggle.on .on {
+  background: #0F4C5C;
+  color: #fff;
+}
+
+.alert.alert-info {
+  background: #e6eaf0;
+  color: #000;
+}
+
+html.protonmail .text-purple {
+  color: #ED7D3A;
+}
+
+#pm_settings .bar em {
+  background: #ED7D3A;
+  height: 4px;
+}
+
+#pm_settings .bar {
+  background: #0F4C5C;
+  opacity: 0.5;
+  height: 4px;
+}
+
+#plans .plans .plan h3 {
+  background: #0F4C5C;
+  color: #fff;
+}
+
+#plans .plans .plan.plus-plan h3 span, #plans .plans .plan.visionary-plan h3 span, #plans .plans .plan.visionary-plan header {
+  color: #fff;
+}
+
+#plans .plans .plan footer .cycle strong {
+  color: #ED7D3A;
+}
+
+#plans .plans .plan footer .cycle .discount {
+  border-color: transparent #ED7D3A transparent transparent;
+}
+
+#plans .plans .plan footer .cycle .discount span {
+  color: #fff;
+}
+
+.pm_modal .modal-dialog {
+  border-color: #0F4C5C;
+}
+
+.pm_modal .modal-dialog .close {
+  color: #fff;
+  background: #0F4C5C;
+}
+
+.pm_badge {
+  color: #fff;
+}
+
+.pm_badge.primary {
+  background: #0F4C5C;
+  color: #fff;
+}
+
+.pm_badge.success {
+  background: #ED7D3A;
+  color: #fff;
+}
+
+.pm_table table th a, .pm_table table th .fa {
+  color: #ED7D3A;
+}
+
+body .cg-notify-message.notification-success {
+  background-color: #ED7D3A;
+  color: #fff;
+}
diff --git a/Themes/v3.7.3/blue_and_orange/blue_and_orange.min.css b/Themes/v3.7.3/blue_and_orange/blue_and_orange.min.css
new file mode 100644
index 0000000..7aa706d
--- /dev/null
+++ b/Themes/v3.7.3/blue_and_orange/blue_and_orange.min.css
@@ -0,0 +1 @@
+.headerDesktop-container{background-color:#0F4C5C}.search-form-fieldset{background:#0A353F}[class*="searchForm-action-button-"]{color:#fff}.searchForm-action-button-advanced:hover,.searchForm-action-button-toggle:hover{background:#ED7D3A}.customRadio-input:checked+.customRadio-mask{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 10px #ED7D3A;border-color:#ED7D3A}.pm_button.primary,.pm_button.primary:active{color:#fff;background-color:#0F4C5C;border-color:#0F4C5C}.pm_button.primary:hover,.pm_button.primary:focus{background-color:#0A353F;border-color:#0A353F}.navigation>li.active,.navigation>li:hover{box-shadow:0 5px 0 0 #ED7D3A inset}.navigation-link{color:#fff}.navigation-title:hover{color:#ED7D3A}.pm_dropdown .navigationUser-logout{background-color:#0F4C5C !important;border-color:#0F4C5C !important;color:#fff !important}.pm_dropdown .navigationUser-logout:hover{background-color:#0A353F !important;border-color:#0A353F !important;color:#fff !important}.sidebar-btn-compose,.sidebar-btn-compose:active{color:#fff !important;background:#ED7D3A !important;border:none !important}.sidebar-btn-compose:hover{color:#fff !important;background:#ED7D3A !important;border:none !important;box-shadow:inset 0 400px 400px rgba(0,0,0,0.1)}.headerDesktop-logo{background-color:#0F4C5C}body section.sidebar{background:#0F4C5C}body section.sidebar a.compose{background:#ED7D3A;color:#fff}body section.sidebar a.compose:hover{background:#fff;border-color:#fff;color:#0F4C5C}body section.sidebar ul.menu li a{color:#fff}body section.sidebar ul.menu li a:hover{color:#ED7D3A}body section.sidebar ul.menu li.active a,body section.sidebar ul.menu li.active a{color:#fff}body section.sidebar ul.menu li.active a i.fa,body section.sidebar ul.menu li.active a i.fa:hover{color:#ED7D3A !important;opacity:1}body section.sidebar ul.menu li a .fa-repeat{color:#fff;opacity:1}body section.sidebar ul.menu li a i.fa{color:#fff;opacity:0.5}body section.sidebar ul.menu li a i.fa:hover,body section.sidebar ul.menu li a:hover i.fa{color:#fff;opacity:1}body section.sidebar ul.menu li a em{color:#fff;opacity:0.5}body section.sidebar div.labels ul li a{color:#fff;opacity:0.5}body section.sidebar div.labels ul li a:hover{color:#fff;opacity:1}body section.sidebar div.footer div.link a,body section.sidebar a.version{color:#fff;opacity:0.5}body section.sidebar div.footer div.link a:hover,body section.sidebar a.version:hover{color:#ED7D3A;opacity:1}body section.sidebar div.footer div.storage strong{color:#fff;opacity:0.5}body section.sidebar div.footer .bar em{background:#ED7D3A;height:3px}body section.sidebar div.footer .bar{background:#fff;height:3px}.pm_buttons,.pm_buttons a{color:#0F4C5C}.conversation.marked::before{background:#ED7D3A;width:5px}#pm_composer .composer header{background:#0F4C5C;color:#fff}p a{color:#ED7D3A}#pm_composer .composer footer .pm_button{background:#fff;color:#0F4C5C}#pm_composer .composer footer .pm_button:hover{background:#fff;color:#0F4C5C}#pm_composer .composer footer .pm_button.primary{background:#0F4C5C;color:#fff}#pm_composer .composer footer .pm_button.primary:hover{background:#ED7D3A;color:#fff}#pm_settings .pm_tabs{background:#e6eaf0}#pm_settings .pm_tabs li a.pm_button{color:#0F4C5C;border-color:#e6eaf0}#pm_settings .pm_tabs li a.pm_button:hover{color:#ED7D3A}#pm_settings .pm_tabs li.active a.pm_button{color:#ED7D3A}.pm_button.link{color:#ED7D3A}.pm_toggle.off .off,.pm_toggle.on .on{background:#0F4C5C;color:#fff}.alert.alert-info{background:#e6eaf0;color:#000}html.protonmail .text-purple{color:#ED7D3A}#pm_settings .bar em{background:#ED7D3A;height:4px}#pm_settings .bar{background:#0F4C5C;opacity:0.5;height:4px}#plans .plans .plan h3{background:#0F4C5C;color:#fff}#plans .plans .plan.plus-plan h3 span,#plans .plans .plan.visionary-plan h3 span,#plans .plans .plan.visionary-plan header{color:#fff}#plans .plans .plan footer .cycle strong{color:#ED7D3A}#plans .plans .plan footer .cycle .discount{border-color:transparent #ED7D3A transparent transparent}#plans .plans .plan footer .cycle .discount span{color:#fff}.pm_modal .modal-dialog{border-color:#0F4C5C}.pm_modal .modal-dialog .close{color:#fff;background:#0F4C5C}.pm_badge{color:#fff}.pm_badge.primary{background:#0F4C5C;color:#fff}.pm_badge.success{background:#ED7D3A;color:#fff}.pm_table table th a,.pm_table table th .fa{color:#ED7D3A}body .cg-notify-message.notification-success{background-color:#ED7D3A;color:#fff}
diff --git a/Themes/v3.7.3/dark_bubble_gum/dark_bubble_gum.css b/Themes/v3.7.3/dark_bubble_gum/dark_bubble_gum.css
new file mode 100644
index 0000000..d7d2da5
--- /dev/null
+++ b/Themes/v3.7.3/dark_bubble_gum/dark_bubble_gum.css
@@ -0,0 +1,302 @@
+/* =========================================== *
+ * DARK BUBBLE GUM 3.7.3 THEME
+ * Author: Cristiano Almeida
+ * Website: www.csalmeida.com
+ * Tweets @_csalmeida
+ * =========================================== */
+.headerDesktop-container {
+  background-color: #0d0d0d;
+}
+
+.search-form-fieldset {
+  background: #000;
+}
+
+[class*="searchForm-action-button-"] {
+  color: #fff;
+}
+
+.searchForm-action-button-advanced:hover, .searchForm-action-button-toggle:hover {
+  background: #EF2D56;
+}
+
+.customRadio-input:checked + .customRadio-mask {
+  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 10px #EF2D56;
+  border-color: #EF2D56;
+}
+
+.pm_button.primary, .pm_button.primary:active {
+  color: #fff;
+  background-color: #0d0d0d;
+  border-color: #0d0d0d;
+}
+
+.pm_button.primary:hover, .pm_button.primary:focus {
+  background-color: #000;
+  border-color: #000;
+}
+
+.navigation > li.active, .navigation > li:hover {
+  box-shadow: 0 5px 0 0 #EF2D56 inset;
+}
+
+.navigation-link {
+  color: #fff;
+}
+
+.navigation-title:hover {
+  color: #EF2D56;
+}
+
+.pm_dropdown .navigationUser-logout {
+  background-color: #0d0d0d !important;
+  border-color: #0d0d0d !important;
+  color: #fff !important;
+}
+
+.pm_dropdown .navigationUser-logout:hover {
+  background-color: #000 !important;
+  border-color: #000 !important;
+  color: #fff !important;
+}
+
+.sidebar-btn-compose, .sidebar-btn-compose:active {
+  color: #fff !important;
+  background: #EF2D56 !important;
+  border: none !important;
+}
+
+.sidebar-btn-compose:hover {
+  color: #fff !important;
+  background: #EF2D56 !important;
+  border: none !important;
+  box-shadow: inset 0 400px 400px rgba(0, 0, 0, 0.1);
+}
+
+.headerDesktop-logo {
+  background-color: #0d0d0d;
+}
+
+body section.sidebar {
+  background: #0d0d0d;
+}
+
+body section.sidebar a.compose {
+  background: #EF2D56;
+  color: #fff;
+}
+
+body section.sidebar a.compose:hover {
+  background: #fff;
+  border-color: #fff;
+  color: #0d0d0d;
+}
+
+body section.sidebar ul.menu li a {
+  color: #fff;
+}
+
+body section.sidebar ul.menu li a:hover {
+  color: #EF2D56;
+}
+
+body section.sidebar ul.menu li.active a, body section.sidebar ul.menu li.active a {
+  color: #fff;
+}
+
+body section.sidebar ul.menu li.active a i.fa, body section.sidebar ul.menu li.active a i.fa:hover {
+  color: #EF2D56 !important;
+  opacity: 1;
+}
+
+body section.sidebar ul.menu li a .fa-repeat {
+  color: #fff;
+  opacity: 1;
+}
+
+body section.sidebar ul.menu li a i.fa {
+  color: #fff;
+  opacity: 0.5;
+}
+
+body section.sidebar ul.menu li a i.fa:hover, body section.sidebar ul.menu li a:hover i.fa {
+  color: #fff;
+  opacity: 1;
+}
+
+body section.sidebar ul.menu li a em {
+  color: #fff;
+  opacity: 0.5;
+}
+
+body section.sidebar div.labels ul li a {
+  color: #fff;
+  opacity: 0.5;
+}
+
+body section.sidebar div.labels ul li a:hover {
+  color: #fff;
+  opacity: 1;
+}
+
+body section.sidebar div.footer div.link a, body section.sidebar a.version {
+  color: #fff;
+  opacity: 0.5;
+}
+
+body section.sidebar div.footer div.link a:hover, body section.sidebar a.version:hover {
+  color: #EF2D56;
+  opacity: 1;
+}
+
+body section.sidebar div.footer div.storage strong {
+  color: #fff;
+  opacity: 0.5;
+}
+
+body section.sidebar div.footer .bar em {
+  background: #EF2D56;
+  height: 3px;
+}
+
+body section.sidebar div.footer .bar {
+  background: #fff;
+  height: 3px;
+}
+
+.pm_buttons, .pm_buttons a {
+  color: #0d0d0d;
+}
+
+.conversation.marked::before {
+  background: #EF2D56;
+  width: 5px;
+}
+
+#pm_composer .composer header {
+  background: #0d0d0d;
+  color: #fff;
+}
+
+p a {
+  color: #EF2D56;
+}
+
+#pm_composer .composer footer .pm_button {
+  background: #fff;
+  color: #0d0d0d;
+}
+
+#pm_composer .composer footer .pm_button:hover {
+  background: #fff;
+  color: #0d0d0d;
+}
+
+#pm_composer .composer footer .pm_button.primary {
+  background: #0d0d0d;
+  color: #fff;
+}
+
+#pm_composer .composer footer .pm_button.primary:hover {
+  background: #EF2D56;
+  color: #fff;
+}
+
+#pm_settings .pm_tabs {
+  background: #e6eaf0;
+}
+
+#pm_settings .pm_tabs li a.pm_button {
+  color: #0d0d0d;
+  border-color: #e6eaf0;
+}
+
+#pm_settings .pm_tabs li a.pm_button:hover {
+  color: #EF2D56;
+}
+
+#pm_settings .pm_tabs li.active a.pm_button {
+  color: #EF2D56;
+}
+
+.pm_button.link {
+  color: #EF2D56;
+}
+
+.pm_toggle.off .off, .pm_toggle.on .on {
+  background: #0d0d0d;
+  color: #fff;
+}
+
+.alert.alert-info {
+  background: #e6eaf0;
+  color: #000;
+}
+
+html.protonmail .text-purple {
+  color: #EF2D56;
+}
+
+#pm_settings .bar em {
+  background: #EF2D56;
+  height: 4px;
+}
+
+#pm_settings .bar {
+  background: #0d0d0d;
+  opacity: 0.5;
+  height: 4px;
+}
+
+#plans .plans .plan h3 {
+  background: #0d0d0d;
+  color: #fff;
+}
+
+#plans .plans .plan.plus-plan h3 span, #plans .plans .plan.visionary-plan h3 span, #plans .plans .plan.visionary-plan header {
+  color: #fff;
+}
+
+#plans .plans .plan footer .cycle strong {
+  color: #EF2D56;
+}
+
+#plans .plans .plan footer .cycle .discount {
+  border-color: transparent #EF2D56 transparent transparent;
+}
+
+#plans .plans .plan footer .cycle .discount span {
+  color: #fff;
+}
+
+.pm_modal .modal-dialog {
+  border-color: #0d0d0d;
+}
+
+.pm_modal .modal-dialog .close {
+  color: #fff;
+  background: #0d0d0d;
+}
+
+.pm_badge {
+  color: #fff;
+}
+
+.pm_badge.primary {
+  background: #0d0d0d;
+  color: #fff;
+}
+
+.pm_badge.success {
+  background: #EF2D56;
+  color: #fff;
+}
+
+.pm_table table th a, .pm_table table th .fa {
+  color: #EF2D56;
+}
+
+body .cg-notify-message.notification-success {
+  background-color: #EF2D56;
+  color: #fff;
+}
diff --git a/Themes/v3.7.3/dark_bubble_gum/dark_bubble_gum.min.css b/Themes/v3.7.3/dark_bubble_gum/dark_bubble_gum.min.css
new file mode 100644
index 0000000..9d8e7d3
--- /dev/null
+++ b/Themes/v3.7.3/dark_bubble_gum/dark_bubble_gum.min.css
@@ -0,0 +1 @@
+.headerDesktop-container{background-color:#0d0d0d}.search-form-fieldset{background:#000}[class*="searchForm-action-button-"]{color:#fff}.searchForm-action-button-advanced:hover,.searchForm-action-button-toggle:hover{background:#EF2D56}.customRadio-input:checked+.customRadio-mask{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 10px #EF2D56;border-color:#EF2D56}.pm_button.primary,.pm_button.primary:active{color:#fff;background-color:#0d0d0d;border-color:#0d0d0d}.pm_button.primary:hover,.pm_button.primary:focus{background-color:#000;border-color:#000}.navigation>li.active,.navigation>li:hover{box-shadow:0 5px 0 0 #EF2D56 inset}.navigation-link{color:#fff}.navigation-title:hover{color:#EF2D56}.pm_dropdown .navigationUser-logout{background-color:#0d0d0d !important;border-color:#0d0d0d !important;color:#fff !important}.pm_dropdown .navigationUser-logout:hover{background-color:#000 !important;border-color:#000 !important;color:#fff !important}.sidebar-btn-compose,.sidebar-btn-compose:active{color:#fff !important;background:#EF2D56 !important;border:none !important}.sidebar-btn-compose:hover{color:#fff !important;background:#EF2D56 !important;border:none !important;box-shadow:inset 0 400px 400px rgba(0,0,0,0.1)}.headerDesktop-logo{background-color:#0d0d0d}body section.sidebar{background:#0d0d0d}body section.sidebar a.compose{background:#EF2D56;color:#fff}body section.sidebar a.compose:hover{background:#fff;border-color:#fff;color:#0d0d0d}body section.sidebar ul.menu li a{color:#fff}body section.sidebar ul.menu li a:hover{color:#EF2D56}body section.sidebar ul.menu li.active a,body section.sidebar ul.menu li.active a{color:#fff}body section.sidebar ul.menu li.active a i.fa,body section.sidebar ul.menu li.active a i.fa:hover{color:#EF2D56 !important;opacity:1}body section.sidebar ul.menu li a .fa-repeat{color:#fff;opacity:1}body section.sidebar ul.menu li a i.fa{color:#fff;opacity:0.5}body section.sidebar ul.menu li a i.fa:hover,body section.sidebar ul.menu li a:hover i.fa{color:#fff;opacity:1}body section.sidebar ul.menu li a em{color:#fff;opacity:0.5}body section.sidebar div.labels ul li a{color:#fff;opacity:0.5}body section.sidebar div.labels ul li a:hover{color:#fff;opacity:1}body section.sidebar div.footer div.link a,body section.sidebar a.version{color:#fff;opacity:0.5}body section.sidebar div.footer div.link a:hover,body section.sidebar a.version:hover{color:#EF2D56;opacity:1}body section.sidebar div.footer div.storage strong{color:#fff;opacity:0.5}body section.sidebar div.footer .bar em{background:#EF2D56;height:3px}body section.sidebar div.footer .bar{background:#fff;height:3px}.pm_buttons,.pm_buttons a{color:#0d0d0d}.conversation.marked::before{background:#EF2D56;width:5px}#pm_composer .composer header{background:#0d0d0d;color:#fff}p a{color:#EF2D56}#pm_composer .composer footer .pm_button{background:#fff;color:#0d0d0d}#pm_composer .composer footer .pm_button:hover{background:#fff;color:#0d0d0d}#pm_composer .composer footer .pm_button.primary{background:#0d0d0d;color:#fff}#pm_composer .composer footer .pm_button.primary:hover{background:#EF2D56;color:#fff}#pm_settings .pm_tabs{background:#e6eaf0}#pm_settings .pm_tabs li a.pm_button{color:#0d0d0d;border-color:#e6eaf0}#pm_settings .pm_tabs li a.pm_button:hover{color:#EF2D56}#pm_settings .pm_tabs li.active a.pm_button{color:#EF2D56}.pm_button.link{color:#EF2D56}.pm_toggle.off .off,.pm_toggle.on .on{background:#0d0d0d;color:#fff}.alert.alert-info{background:#e6eaf0;color:#000}html.protonmail .text-purple{color:#EF2D56}#pm_settings .bar em{background:#EF2D56;height:4px}#pm_settings .bar{background:#0d0d0d;opacity:0.5;height:4px}#plans .plans .plan h3{background:#0d0d0d;color:#fff}#plans .plans .plan.plus-plan h3 span,#plans .plans .plan.visionary-plan h3 span,#plans .plans .plan.visionary-plan header{color:#fff}#plans .plans .plan footer .cycle strong{color:#EF2D56}#plans .plans .plan footer .cycle .discount{border-color:transparent #EF2D56 transparent transparent}#plans .plans .plan footer .cycle .discount span{color:#fff}.pm_modal .modal-dialog{border-color:#0d0d0d}.pm_modal .modal-dialog .close{color:#fff;background:#0d0d0d}.pm_badge{color:#fff}.pm_badge.primary{background:#0d0d0d;color:#fff}.pm_badge.success{background:#EF2D56;color:#fff}.pm_table table th a,.pm_table table th .fa{color:#EF2D56}body .cg-notify-message.notification-success{background-color:#EF2D56;color:#fff}
diff --git a/Themes/v3.7.3/green_lume/green_lume.css b/Themes/v3.7.3/green_lume/green_lume.css
new file mode 100644
index 0000000..a917af6
--- /dev/null
+++ b/Themes/v3.7.3/green_lume/green_lume.css
@@ -0,0 +1,302 @@
+/* =========================================== *
+ * GREEN LUME 3.7.3 THEME
+ * Author: Cristiano Almeida
+ * Website: www.csalmeida.com
+ * Tweets @_csalmeida
+ * =========================================== */
+.headerDesktop-container {
+  background-color: #0d0d0d;
+}
+
+.search-form-fieldset {
+  background: #000;
+}
+
+[class*="searchForm-action-button-"] {
+  color: #fff;
+}
+
+.searchForm-action-button-advanced:hover, .searchForm-action-button-toggle:hover {
+  background: #2FBF71;
+}
+
+.customRadio-input:checked + .customRadio-mask {
+  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 10px #2FBF71;
+  border-color: #2FBF71;
+}
+
+.pm_button.primary, .pm_button.primary:active {
+  color: #fff;
+  background-color: #0d0d0d;
+  border-color: #0d0d0d;
+}
+
+.pm_button.primary:hover, .pm_button.primary:focus {
+  background-color: #000;
+  border-color: #000;
+}
+
+.navigation > li.active, .navigation > li:hover {
+  box-shadow: 0 5px 0 0 #2FBF71 inset;
+}
+
+.navigation-link {
+  color: #fff;
+}
+
+.navigation-title:hover {
+  color: #2FBF71;
+}
+
+.pm_dropdown .navigationUser-logout {
+  background-color: #0d0d0d !important;
+  border-color: #0d0d0d !important;
+  color: #fff !important;
+}
+
+.pm_dropdown .navigationUser-logout:hover {
+  background-color: #000 !important;
+  border-color: #000 !important;
+  color: #fff !important;
+}
+
+.sidebar-btn-compose, .sidebar-btn-compose:active {
+  color: #fff !important;
+  background: #2FBF71 !important;
+  border: none !important;
+}
+
+.sidebar-btn-compose:hover {
+  color: #fff !important;
+  background: #2FBF71 !important;
+  border: none !important;
+  box-shadow: inset 0 400px 400px rgba(0, 0, 0, 0.1);
+}
+
+.headerDesktop-logo {
+  background-color: #0d0d0d;
+}
+
+body section.sidebar {
+  background: #0d0d0d;
+}
+
+body section.sidebar a.compose {
+  background: #2FBF71;
+  color: #fff;
+}
+
+body section.sidebar a.compose:hover {
+  background: #fff;
+  border-color: #fff;
+  color: #0d0d0d;
+}
+
+body section.sidebar ul.menu li a {
+  color: #fff;
+}
+
+body section.sidebar ul.menu li a:hover {
+  color: #2FBF71;
+}
+
+body section.sidebar ul.menu li.active a, body section.sidebar ul.menu li.active a {
+  color: #fff;
+}
+
+body section.sidebar ul.menu li.active a i.fa, body section.sidebar ul.menu li.active a i.fa:hover {
+  color: #2FBF71 !important;
+  opacity: 1;
+}
+
+body section.sidebar ul.menu li a .fa-repeat {
+  color: #fff;
+  opacity: 1;
+}
+
+body section.sidebar ul.menu li a i.fa {
+  color: #fff;
+  opacity: 0.5;
+}
+
+body section.sidebar ul.menu li a i.fa:hover, body section.sidebar ul.menu li a:hover i.fa {
+  color: #fff;
+  opacity: 1;
+}
+
+body section.sidebar ul.menu li a em {
+  color: #fff;
+  opacity: 0.5;
+}
+
+body section.sidebar div.labels ul li a {
+  color: #fff;
+  opacity: 0.5;
+}
+
+body section.sidebar div.labels ul li a:hover {
+  color: #fff;
+  opacity: 1;
+}
+
+body section.sidebar div.footer div.link a, body section.sidebar a.version {
+  color: #fff;
+  opacity: 0.5;
+}
+
+body section.sidebar div.footer div.link a:hover, body section.sidebar a.version:hover {
+  color: #2FBF71;
+  opacity: 1;
+}
+
+body section.sidebar div.footer div.storage strong {
+  color: #fff;
+  opacity: 0.5;
+}
+
+body section.sidebar div.footer .bar em {
+  background: #2FBF71;
+  height: 3px;
+}
+
+body section.sidebar div.footer .bar {
+  background: #fff;
+  height: 3px;
+}
+
+.pm_buttons, .pm_buttons a {
+  color: #0d0d0d;
+}
+
+.conversation.marked::before {
+  background: #2FBF71;
+  width: 5px;
+}
+
+#pm_composer .composer header {
+  background: #0d0d0d;
+  color: #fff;
+}
+
+p a {
+  color: #2FBF71;
+}
+
+#pm_composer .composer footer .pm_button {
+  background: #fff;
+  color: #0d0d0d;
+}
+
+#pm_composer .composer footer .pm_button:hover {
+  background: #fff;
+  color: #0d0d0d;
+}
+
+#pm_composer .composer footer .pm_button.primary {
+  background: #0d0d0d;
+  color: #fff;
+}
+
+#pm_composer .composer footer .pm_button.primary:hover {
+  background: #2FBF71;
+  color: #fff;
+}
+
+#pm_settings .pm_tabs {
+  background: #e6eaf0;
+}
+
+#pm_settings .pm_tabs li a.pm_button {
+  color: #0d0d0d;
+  border-color: #e6eaf0;
+}
+
+#pm_settings .pm_tabs li a.pm_button:hover {
+  color: #2FBF71;
+}
+
+#pm_settings .pm_tabs li.active a.pm_button {
+  color: #2FBF71;
+}
+
+.pm_button.link {
+  color: #2FBF71;
+}
+
+.pm_toggle.off .off, .pm_toggle.on .on {
+  background: #0d0d0d;
+  color: #fff;
+}
+
+.alert.alert-info {
+  background: #e6eaf0;
+  color: #000;
+}
+
+html.protonmail .text-purple {
+  color: #2FBF71;
+}
+
+#pm_settings .bar em {
+  background: #2FBF71;
+  height: 4px;
+}
+
+#pm_settings .bar {
+  background: #0d0d0d;
+  opacity: 0.5;
+  height: 4px;
+}
+
+#plans .plans .plan h3 {
+  background: #0d0d0d;
+  color: #fff;
+}
+
+#plans .plans .plan.plus-plan h3 span, #plans .plans .plan.visionary-plan h3 span, #plans .plans .plan.visionary-plan header {
+  color: #fff;
+}
+
+#plans .plans .plan footer .cycle strong {
+  color: #2FBF71;
+}
+
+#plans .plans .plan footer .cycle .discount {
+  border-color: transparent #2FBF71 transparent transparent;
+}
+
+#plans .plans .plan footer .cycle .discount span {
+  color: #fff;
+}
+
+.pm_modal .modal-dialog {
+  border-color: #0d0d0d;
+}
+
+.pm_modal .modal-dialog .close {
+  color: #fff;
+  background: #0d0d0d;
+}
+
+.pm_badge {
+  color: #fff;
+}
+
+.pm_badge.primary {
+  background: #0d0d0d;
+  color: #fff;
+}
+
+.pm_badge.success {
+  background: #2FBF71;
+  color: #fff;
+}
+
+.pm_table table th a, .pm_table table th .fa {
+  color: #2FBF71;
+}
+
+body .cg-notify-message.notification-success {
+  background-color: #2FBF71;
+  color: #fff;
+}
diff --git a/Themes/v3.7.3/green_lume/green_lume.min.css b/Themes/v3.7.3/green_lume/green_lume.min.css
new file mode 100644
index 0000000..a6de5f2
--- /dev/null
+++ b/Themes/v3.7.3/green_lume/green_lume.min.css
@@ -0,0 +1 @@
+.headerDesktop-container{background-color:#0d0d0d}.search-form-fieldset{background:#000}[class*="searchForm-action-button-"]{color:#fff}.searchForm-action-button-advanced:hover,.searchForm-action-button-toggle:hover{background:#2FBF71}.customRadio-input:checked+.customRadio-mask{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 10px #2FBF71;border-color:#2FBF71}.pm_button.primary,.pm_button.primary:active{color:#fff;background-color:#0d0d0d;border-color:#0d0d0d}.pm_button.primary:hover,.pm_button.primary:focus{background-color:#000;border-color:#000}.navigation>li.active,.navigation>li:hover{box-shadow:0 5px 0 0 #2FBF71 inset}.navigation-link{color:#fff}.navigation-title:hover{color:#2FBF71}.pm_dropdown .navigationUser-logout{background-color:#0d0d0d !important;border-color:#0d0d0d !important;color:#fff !important}.pm_dropdown .navigationUser-logout:hover{background-color:#000 !important;border-color:#000 !important;color:#fff !important}.sidebar-btn-compose,.sidebar-btn-compose:active{color:#fff !important;background:#2FBF71 !important;border:none !important}.sidebar-btn-compose:hover{color:#fff !important;background:#2FBF71 !important;border:none !important;box-shadow:inset 0 400px 400px rgba(0,0,0,0.1)}.headerDesktop-logo{background-color:#0d0d0d}body section.sidebar{background:#0d0d0d}body section.sidebar a.compose{background:#2FBF71;color:#fff}body section.sidebar a.compose:hover{background:#fff;border-color:#fff;color:#0d0d0d}body section.sidebar ul.menu li a{color:#fff}body section.sidebar ul.menu li a:hover{color:#2FBF71}body section.sidebar ul.menu li.active a,body section.sidebar ul.menu li.active a{color:#fff}body section.sidebar ul.menu li.active a i.fa,body section.sidebar ul.menu li.active a i.fa:hover{color:#2FBF71 !important;opacity:1}body section.sidebar ul.menu li a .fa-repeat{color:#fff;opacity:1}body section.sidebar ul.menu li a i.fa{color:#fff;opacity:0.5}body section.sidebar ul.menu li a i.fa:hover,body section.sidebar ul.menu li a:hover i.fa{color:#fff;opacity:1}body section.sidebar ul.menu li a em{color:#fff;opacity:0.5}body section.sidebar div.labels ul li a{color:#fff;opacity:0.5}body section.sidebar div.labels ul li a:hover{color:#fff;opacity:1}body section.sidebar div.footer div.link a,body section.sidebar a.version{color:#fff;opacity:0.5}body section.sidebar div.footer div.link a:hover,body section.sidebar a.version:hover{color:#2FBF71;opacity:1}body section.sidebar div.footer div.storage strong{color:#fff;opacity:0.5}body section.sidebar div.footer .bar em{background:#2FBF71;height:3px}body section.sidebar div.footer .bar{background:#fff;height:3px}.pm_buttons,.pm_buttons a{color:#0d0d0d}.conversation.marked::before{background:#2FBF71;width:5px}#pm_composer .composer header{background:#0d0d0d;color:#fff}p a{color:#2FBF71}#pm_composer .composer footer .pm_button{background:#fff;color:#0d0d0d}#pm_composer .composer footer .pm_button:hover{background:#fff;color:#0d0d0d}#pm_composer .composer footer .pm_button.primary{background:#0d0d0d;color:#fff}#pm_composer .composer footer .pm_button.primary:hover{background:#2FBF71;color:#fff}#pm_settings .pm_tabs{background:#e6eaf0}#pm_settings .pm_tabs li a.pm_button{color:#0d0d0d;border-color:#e6eaf0}#pm_settings .pm_tabs li a.pm_button:hover{color:#2FBF71}#pm_settings .pm_tabs li.active a.pm_button{color:#2FBF71}.pm_button.link{color:#2FBF71}.pm_toggle.off .off,.pm_toggle.on .on{background:#0d0d0d;color:#fff}.alert.alert-info{background:#e6eaf0;color:#000}html.protonmail .text-purple{color:#2FBF71}#pm_settings .bar em{background:#2FBF71;height:4px}#pm_settings .bar{background:#0d0d0d;opacity:0.5;height:4px}#plans .plans .plan h3{background:#0d0d0d;color:#fff}#plans .plans .plan.plus-plan h3 span,#plans .plans .plan.visionary-plan h3 span,#plans .plans .plan.visionary-plan header{color:#fff}#plans .plans .plan footer .cycle strong{color:#2FBF71}#plans .plans .plan footer .cycle .discount{border-color:transparent #2FBF71 transparent transparent}#plans .plans .plan footer .cycle .discount span{color:#fff}.pm_modal .modal-dialog{border-color:#0d0d0d}.pm_modal .modal-dialog .close{color:#fff;background:#0d0d0d}.pm_badge{color:#fff}.pm_badge.primary{background:#0d0d0d;color:#fff}.pm_badge.success{background:#2FBF71;color:#fff}.pm_table table th a,.pm_table table th .fa{color:#2FBF71}body .cg-notify-message.notification-success{background-color:#2FBF71;color:#fff}
diff --git a/Themes/v3.7.3/theme_template/template_v3.7.3.scss b/Themes/v3.7.3/theme_template/template_v3.7.3.scss
new file mode 100644
index 0000000..7cc5369
--- /dev/null
+++ b/Themes/v3.7.3/theme_template/template_v3.7.3.scss
@@ -0,0 +1,408 @@
+/* =========================================== *
+ * Template 3.7.3 THEME
+ * Author: You name here
+ * Website: Your website here
+ * Tweets Your tweeter handle
+ * =========================================== */
+
+ // Change colors here and they will change everywhere.
+$base: #0d0d0d;
+$search: #000;
+$highlight: #2FBF71;
+$navigation: #fff;
+
+$text_color: #0d0d0d;
+$extra_color: #e6eaf0;
+
+// ================================= \\
+// ========== HORIZONTAL =========== \\
+// ========== NAVIGATION =========== \\
+// ============= BAR =============== \\
+// ================================= \\
+
+
+// Top Navigation BAR (horizontal)
+.headerDesktop-container {
+  background-color: $base;
+}
+
+.search-form-fieldset {
+  background: $search;
+} // Search bar.
+
+
+[class*="searchForm-action-button-"] {
+  color: $navigation;
+} // Search bar buttons.
+
+.searchForm-action-button-advanced:hover, .searchForm-action-button-toggle:hover {
+  background: $highlight;
+} // Search bar buttons hover.
+
+.customRadio-input:checked + .customRadio-mask {
+  box-shadow: inset 0 0 0 3px #fff,inset 0 0 0 10px $highlight;
+  border-color: $highlight;
+} // Advanced search menu.
+
+
+.pm_button.primary, .pm_button.primary:active {
+  color: $navigation;
+  background-color: $base;
+  border-color: $base;
+} // General buttons.
+
+.pm_button.primary:hover, .pm_button.primary:focus {
+  background-color: $search;
+  border-color: $search;
+}
+
+.navigation > li.active, .navigation > li:hover {
+  box-shadow: 0 5px 0 0 $highlight inset;
+} // Navigation top  color shadow
+
+.navigation-link {
+  color: $navigation;
+} // Navigation links including icons.
+
+.navigation-title:hover {
+  color: $highlight;
+} // Hover navigation links
+
+.pm_dropdown .navigationUser-logout {
+  background-color: $base !important;
+  border-color: $base !important;
+  color: $navigation !important;
+} // logout button hover
+
+.pm_dropdown .navigationUser-logout:hover {
+  background-color: $search !important;
+  border-color: $search !important;
+  color: $navigation !important;
+} // logout button hover
+
+.sidebar-btn-compose, .sidebar-btn-compose:active  {
+  color: $navigation !important;
+  background: $highlight !important;
+  border: none !important;
+} // compose button
+
+.sidebar-btn-compose:hover {
+  color: $navigation !important;
+  background: $highlight !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
+
+// ================================= \\
+// =========== VERTICAL ============ \\
+// ========== NAVIGATION =========== \\
+// ============= BAR =============== \\
+// ================================= \\
+
+// Protonmail logo background.
+.headerDesktop-logo {
+  background-color: $base;
+}
+
+// Side Navigation background. (vertical)
+body section.sidebar {
+  background: $base;
+}
+
+// Composition button.
+body section.sidebar a.compose {
+  background: $highlight;
+  color: $navigation;
+}
+
+body section.sidebar a.compose:hover {
+  background: $navigation;
+  border-color: $navigation;
+  color: $base;
+}
+
+// Navigation items.
+body section.sidebar ul.menu li a {
+  color: $navigation;
+}
+
+// Navigation items on hover.
+body section.sidebar ul.menu li a:hover {
+  color: $highlight;
+}
+
+// Navigation items on active and on active hover.
+body section.sidebar ul.menu li.active a, body section.sidebar ul.menu li.active a {
+  color: $navigation;
+}
+
+// Navigation icons on active and on active hover.
+body section.sidebar ul.menu li.active a i.fa, body section.sidebar ul.menu li.active a i.fa:hover {
+  color: $highlight !important;
+  opacity: 1;
+}
+
+// Refresh icon.
+body section.sidebar ul.menu li a .fa-repeat {
+  color: $navigation;
+  opacity: 1;
+}
+
+// Navigation icons.
+body section.sidebar ul.menu li a i.fa {
+  color: $navigation;
+  opacity: 0.5;
+}
+
+// Navigation icons on hover.
+body section.sidebar ul.menu li a i.fa:hover, body section.sidebar ul.menu li a:hover i.fa {
+  color: $navigation;
+  opacity: 1;
+}
+
+// Number of messages.
+body section.sidebar ul.menu li a em {
+  color: $navigation;
+  opacity: 0.5;
+}
+
+// Label links.
+body section.sidebar div.labels ul li a {
+  color: $navigation;
+  opacity: 0.5;
+}
+
+// Label links on hover.
+body section.sidebar div.labels ul li a:hover {
+  color: $navigation;
+  opacity: 1;
+}
+
+// Storage links and version.
+body section.sidebar div.footer div.link a, body section.sidebar a.version {
+  color: $navigation;
+  opacity: 0.5;
+}
+
+// Storage links and version on hover.
+body section.sidebar div.footer div.link a:hover, body section.sidebar a.version:hover {
+  color: $highlight;
+  opacity: 1;
+}
+
+// Storage text.
+body section.sidebar div.footer div.storage strong {
+  color: $navigation;
+  opacity: 0.5;
+}
+
+// Storage bar fill.
+body section.sidebar div.footer .bar em {
+  background: $highlight;
+  height: 3px;
+}
+// Storage bar.
+body section.sidebar div.footer .bar {
+  background: $navigation;
+  height: 3px;
+}
+
+// ================================= \\
+// =========== MESSAGE ============ \\
+// ========== NAVIGATION =========== \\
+// ================================= \\
+
+// Toolbar icons.
+.pm_buttons, .pm_buttons a {
+  color: $base;
+}
+
+// Left border.
+.conversation.marked::before {
+  background: $highlight;
+  width: 5px;
+}
+
+// Unread message background.
+body #conversation-list-rows .conversation {
+
+}
+
+// Read message background.
+body #conversation-list-rows .conversation.read {
+
+}
+
+// ================================= \\
+// =========== COMPOSING =========== \\
+// ============ MESSAGE ============ \\
+// ============= WINDOW ============= \\
+// ================================= \\
+
+// Header color and text.
+#pm_composer .composer header {
+  background: $base;
+  color: $navigation;
+}
+
+// Links in general.
+p a {
+  color: $highlight;
+}
+
+// Attachment, encryption and expiration buttons.
+#pm_composer .composer footer .pm_button {
+  background: $navigation;
+  color: $base;
+}
+
+// Attachment, encryption and expiration buttons on hover.
+#pm_composer .composer footer .pm_button:hover {
+  background: $navigation;
+  color: $base;
+}
+
+// Send button.
+#pm_composer .composer footer .pm_button.primary {
+  background: $base;
+  color: $navigation;
+}
+
+// Send button on hover.
+#pm_composer .composer footer .pm_button.primary:hover {
+  background: $highlight;
+  color: $navigation;
+}
+
+// ================================= \\
+// =========== SETTINGS =========== \\
+// ============ PANEL ============ \\
+// ================================= \\
+
+// Tab menu background.
+#pm_settings .pm_tabs {
+  background: $extra_color;
+}
+
+// Tab menu items.
+#pm_settings .pm_tabs li a.pm_button {
+  color: $base;
+  border-color: $extra_color;
+}
+
+// Tab menu items hover.
+#pm_settings .pm_tabs li a.pm_button:hover {
+  color: $highlight;
+}
+
+// Tab menu active item.
+#pm_settings .pm_tabs li.active a.pm_button {
+  color: $highlight;
+}
+
+// Links in settings.
+.pm_button.link {
+  color: $highlight;
+}
+
+// Pill switch buttons.
+.pm_toggle.off .off, .pm_toggle.on .on {
+  background: $base;
+  color: $navigation;
+}
+
+.alert.alert-info {
+  background: $extra_color;
+  color: #000;
+}
+
+// Small icons in settings.
+html.protonmail .text-purple {
+  color: $highlight;
+}
+
+// Settings storage bar progress (fill).
+#pm_settings .bar em {
+  background: $highlight;
+  height: 4px;
+}
+// Settings storage bar.
+#pm_settings .bar {
+  background: $base;
+  opacity: 0.5;
+  height: 4px;
+}
+
+// Plans and donations.
+#plans .plans .plan h3 {
+  background: $base;
+  color: $navigation;
+}
+
+// Text on Plus and Visionary plan.
+#plans .plans .plan.plus-plan h3 span, #plans .plans .plan.visionary-plan h3 span, #plans .plans .plan.visionary-plan header {
+  color: $navigation;
+}
+
+// Pricing text.
+#plans .plans .plan footer .cycle strong {
+  color: $highlight;
+}
+
+// Discount tag background.
+#plans .plans .plan footer .cycle .discount {
+  border-color: transparent $highlight transparent transparent;
+}
+// Discount tag text.
+#plans .plans .plan footer .cycle .discount span {
+  color: $navigation;
+}
+
+// Pop-up color.
+.pm_modal .modal-dialog {
+  border-color: $base;
+}
+
+// Pop up close button.
+.pm_modal .modal-dialog .close {
+  color: $navigation;
+  background: $base;
+}
+
+// Address badges link
+.pm_badge {
+  color: $navigation;
+}
+
+// Address default badge.
+.pm_badge.primary {
+  background: $base;
+  color: $navigation;
+}
+
+// Address enalbled badge.
+.pm_badge.success {
+  background: $highlight;
+  color: $navigation;
+}
+
+// ================================= \\
+// =========== CONTACTS =========== \\
+// ============ PANEL ============= \\
+// ================================= \\
+
+// Contact table headings.
+.pm_table table th a, .pm_table table th .fa {
+  color: $highlight;
+}
+
+// ================================= \\
+// ============= OTHER ============= \\
+// ================================= \\
+
+//Top pop up notifications.
+body .cg-notify-message.notification-success {
+  background-color: $highlight;
+  color: $navigation;
+}