Changed mobile navigation.

4 files changed, 393 insertions, 300 deletions

diff --git a/Themes/green_lume/green_lume.css b/Themes/green_lume/green_lume.css
index a917af6..912fc23 100644
--- a/Themes/green_lume/green_lume.css
+++ b/Themes/green_lume/green_lume.css
@@ -1,302 +1,380 @@
 /* =========================================== *
- * GREEN LUME 3.7.3 THEME
+ * GREEN LUME 3.12.0 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;
-}
+
+ .headerDesktop-container {
+   background-color: #1C1C1C;
+ }
+
+ .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: #1C1C1C;
+   border-color: #1C1C1C;
+ }
+
+ .pm_button.primary:hover, .pm_button.primary:focus {
+   background-color: rgba(0, 0, 0, 0.7);
+   border-color: rgba(0, 0, 0, 0.7);
+ }
+
+ .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: #1C1C1C !important;
+   border-color: #1C1C1C !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: #1C1C1C;
+ }
+
+ body section.sidebar {
+   background: #1C1C1C;
+ }
+
+ body section.sidebar a.compose {
+   background: #2FBF71;
+   color: #fff;
+ }
+
+ body section.sidebar a.compose:hover {
+   background: #fff;
+   border-color: #fff;
+   color: #1C1C1C;
+ }
+
+ 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;
+ }
+
+ .conversationPlaceholder #storageStatus .wrap span strong {
+   color: #2FBF71;
+ }
+
+ .storageBar {
+   background-color: rgba(0, 0, 0, 0.1);
+ }
+
+ .storageBar .storageBar-progress {
+   background-color: #2FBF71;
+ }
+
+ .pm_buttons, .pm_buttons a {
+   color: #0d0d0d;
+ }
+
+ .pm_buttons a:hover, .pm_buttons .pm_buttons-child:hover {
+   color: #2FBF71;
+ }
+
+ .readUnread-container-ur .readUnread-btn-read,
+ .pm_buttons .pm_buttons:not(:first-of-type), .pm_buttons > *,
+ .pm_buttons, .pm_buttons a {
+   border-color: #1C1C1C !important;
+ }
+
+ .dropdown-folder-search .fa.dropdown-folder-search-icon,
+ .dropdown-label-search .fa.dropdown-label-search-icon {
+   color: #2FBF71;
+ }
+
+ .dropdown-folder-create-button,
+ .createLabel-button {
+   color: #2FBF71;
+ }
+
+ .customCheckbox-container:hover .customCheckbox-mask,
+ .customMaskInput-container:hover .customCheckbox-mask {
+   border-color: #2FBF71 !important;
+ }
+
+ .customCheckbox-input:checked + .customCheckbox-mask {
+   background-color: #2FBF71;
+   border-color: #2FBF71;
+   color: #1C1C1C;
+ }
+
+ .conversation.marked::before {
+   background: #2FBF71;
+   width: 5px;
+ }
+
+ #pm_composer .composer header {
+   background: #1C1C1C;
+   color: #fff;
+ }
+
+ p a {
+   color: #2FBF71;
+ }
+
+ #pm_composer .composer footer .pm_button {
+   background: #fff;
+   color: #1C1C1C;
+ }
+
+ #pm_composer .composer footer .pm_button:hover {
+   background: #fff;
+   color: #1C1C1C;
+ }
+
+ #pm_composer .composer footer .pm_button.primary {
+   background: #1C1C1C;
+   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: #1C1C1C;
+   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: #1C1C1C;
+   color: #fff;
+ }
+
+ .pm_toggle {
+   box-shadow: 0 0 0 1px #e6eaf0;
+ }
+
+ .alert.alert-info {
+   background: rgba(230, 234, 240, 0.7);
+   color: #0d0d0d;
+ }
+
+ .alert.alert-warning {
+   background: rgba(255, 170, 0, 0.7);
+   color: #0d0d0d;
+ }
+
+ .pm_button.error:focus, .pm_button.error:hover {
+   background-color: #d62646;
+   border-color: rgba(214, 38, 70, 0.7);
+ }
+
+ .pm_button.error {
+   background-color: rgba(214, 38, 70, 0.7);
+   border-color: #d62646;
+ }
+
+ html.protonmail .text-purple,
+ .settingsUsers-link-signatures {
+   color: #2FBF71 !important;
+ }
+
+ html.protonmail .text-red {
+   color: #d62646 !important;
+ }
+
+ .pm_button.link {
+   color: #0d0d0d !important;
+ }
+
+ .overviewSection-container .topUp-button {
+   color: #2FBF71;
+ }
+
+ .settingsDashboard-plans [class*="Column-container"] .isCurrent {
+   background: #1C1C1C;
+   box-shadow: 0 0 8px #1C1C1C, 0 0 0 2px #1C1C1C;
+   border-bottom: 1px solid #1C1C1C;
+ }
+
+ .settingsDashboard-plans.free-active .freeColumn-container,
+ .settingsDashboard-plans.plus-active .plusColumn-container,
+ .settingsDashboard-plans.professional-active .professionalColumn-container,
+ .settingsDashboard-plans.visionary-active .visionaryColumn-container {
+   border-color: #1C1C1C;
+   box-shadow: 0 0 8px #1C1C1C, 0 0 0 2px #1C1C1C;
+ }
+
+ [class*="settingsDashboard-arrowToScroll"] .arrowsToScroll-button {
+   background: rgba(47, 191, 113, 0.7);
+ }
+
+ [class*="settingsDashboard-arrowToScroll"] .arrowsToScroll-button:hover {
+   background: #2fbf71;
+ }
+
+ .vpnRow-add {
+   background-color: rgba(47, 191, 113, 0.7);
+ }
+
+ .vpnRow-add:hover {
+   background: #2fbf71;
+ }
+
+ .settingsDashboard-plans .freeColumn-free,
+ .totalRows-monthly-price,
+ .totalRows-yearly-price {
+   color: #0d0d0d;
+ }
+
+ .totalRows-discount {
+   border-color: transparent #2FBF71;
+ }
+
+ .pm_modal .modal-dialog {
+   border-color: #1C1C1C;
+ }
+
+ .pm_modal .modal-dialog .close {
+   color: #fff;
+   background: #1C1C1C;
+ }
+
+ .pm_badge {
+   color: #fff;
+ }
+
+ .pm_badge.primary {
+   background: #1C1C1C;
+   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;
+ }
+
+ .appConfigBody-is-mobile .sidebarApp-container {
+   background: #1C1C1C;
+ }
diff --git a/Themes/green_lume/green_lume.min.css b/Themes/green_lume/green_lume.min.css
deleted file mode 100644
index a6de5f2..0000000
--- a/Themes/green_lume/green_lume.min.css
+++ /dev/null
@@ -1 +0,0 @@
-.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/theme_template/theme_template.css b/Themes/theme_template/theme_template.css
index 6094c3f..f8542ff 100644
--- a/Themes/theme_template/theme_template.css
+++ b/Themes/theme_template/theme_template.css
@@ -1,5 +1,6 @@
 /* =========================================== *
- * Template 3.7.3 THEME
+ * Template THEME
+ * Version: 3.12.0
  * Author: You name here
  * Website: Your website here
  * Tweets Your twitter handle
@@ -373,3 +374,7 @@ body .cg-notify-message.notification-success {
   background-color: #2FBF71;
   color: #fff;
 }
+
+.appConfigBody-is-mobile .sidebarApp-container {
+  background: #1C1C1C;
+}
diff --git a/Themes/theme_template/theme_template.scss b/Themes/theme_template/theme_template.scss
index 1e670f7..5be3054 100644
--- a/Themes/theme_template/theme_template.scss
+++ b/Themes/theme_template/theme_template.scss
@@ -1,5 +1,6 @@
 /* =========================================== *
- * Template 3.7.3 THEME
+ * Template THEME
+ * Version: 3.12.0
  * Author: You name here
  * Website: Your website here
  * Tweets Your twitter handle
@@ -495,3 +496,13 @@ body .cg-notify-message.notification-success {
   background-color: $highlight;
   color: $navigation;
 }
+
+// ================================= \\
+// ============= MOBILE ============ \\
+// ============ SPECIFIC =========== \\
+// ================================= \\
+
+// Mobile navigation.
+.appConfigBody-is-mobile .sidebarApp-container {
+  background: $base;
+}