From cf9cf63db1296a5dcbd4f69bb256a97e37b08578 Mon Sep 17 00:00:00 2001 From: Cristiano Almeida Date: Fri, 3 Mar 2017 12:03:22 +0000 Subject: 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. --- Themes/v3.7.3/blue_and_orange/blue_and_orange.css | 302 +++++++++++++++ .../v3.7.3/blue_and_orange/blue_and_orange.min.css | 1 + Themes/v3.7.3/dark_bubble_gum/dark_bubble_gum.css | 302 +++++++++++++++ .../v3.7.3/dark_bubble_gum/dark_bubble_gum.min.css | 1 + Themes/v3.7.3/green_lume/green_lume.css | 302 +++++++++++++++ Themes/v3.7.3/green_lume/green_lume.min.css | 1 + Themes/v3.7.3/theme_template/template_v3.7.3.scss | 408 +++++++++++++++++++++ 7 files changed, 1317 insertions(+) create mode 100644 Themes/v3.7.3/blue_and_orange/blue_and_orange.css create mode 100644 Themes/v3.7.3/blue_and_orange/blue_and_orange.min.css create mode 100644 Themes/v3.7.3/dark_bubble_gum/dark_bubble_gum.css create mode 100644 Themes/v3.7.3/dark_bubble_gum/dark_bubble_gum.min.css create mode 100644 Themes/v3.7.3/green_lume/green_lume.css create mode 100644 Themes/v3.7.3/green_lume/green_lume.min.css create mode 100644 Themes/v3.7.3/theme_template/template_v3.7.3.scss 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; +} -- cgit v1.2.3