From d9bece04b273ae8d01081b138b70f797009e3b63 Mon Sep 17 00:00:00 2001 From: djmaze Date: Fri, 5 Feb 2021 10:42:20 +0100 Subject: [PATCH] Revamp CSS template system using var() feature --- dev/Styles/@Boot.css | 4 +- dev/Styles/Admin.less | 13 +- dev/Styles/AdminBranding.less | 8 - dev/Styles/FolderList.less | 25 +- dev/Styles/Layout.less | 1 + dev/Styles/Login.less | 124 +++++++- dev/Styles/Main.less | 17 +- dev/Styles/MessageList.less | 4 +- dev/Styles/Settings.less | 13 +- dev/Styles/Ui.less | 32 +- dev/Styles/_BootstrapFix.less | 8 - dev/Styles/_FontasticToBoot.less | 12 +- snappymail/v/0.0.0/app/templates/Index.html | 4 +- .../0.0.0/app/templates/Themes/template.less | 298 +++--------------- .../v/0.0.0/app/templates/Themes/values.less | 12 +- .../0.0.0/app/templates/Views/User/Login.html | 2 +- snappymail/v/0.0.0/themes/A/styles.less | 21 +- snappymail/v/0.0.0/themes/Blurred/styles.less | 22 +- .../v/0.0.0/themes/DarkShine/styles.less | 22 +- snappymail/v/0.0.0/themes/Default/styles.less | 22 +- snappymail/v/0.0.0/themes/Linen/styles.less | 21 +- snappymail/v/0.0.0/themes/Love/styles.less | 22 +- snappymail/v/0.0.0/themes/Snow/styles.less | 22 +- snappymail/v/0.0.0/themes/Squares/styles.less | 21 +- .../v/0.0.0/themes/SquaresDark/styles.less | 22 +- snappymail/v/0.0.0/themes/Stripes/styles.less | 24 +- snappymail/v/0.0.0/themes/Wood/styles.less | 21 +- snappymail/v/0.0.0/themes/Xv/styles.less | 21 +- tasks/css.js | 3 +- vendors/bootstrap/less/dropdowns.less | 6 +- 30 files changed, 317 insertions(+), 530 deletions(-) diff --git a/dev/Styles/@Boot.css b/dev/Styles/@Boot.css index 566248e2e..80d4d3b9b 100644 --- a/dev/Styles/@Boot.css +++ b/dev/Styles/@Boot.css @@ -11,6 +11,8 @@ body { } #rl-loading, #rl-loading-error { + color: var(--loading-color); + text-shadow: var(--loading-text-shadow); font-size: 30px; line-height: 130%; position: fixed; @@ -28,7 +30,7 @@ body { .e-spinner .e-bounce { animation: bouncedelay 1.4s infinite ease-in-out; - background-color: #333; + background-color: var(--loading-color, #333); border-radius: 100%; box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); display: inline-block; diff --git a/dev/Styles/Admin.less b/dev/Styles/Admin.less index b3ab4a4bb..dbd493f99 100644 --- a/dev/Styles/Admin.less +++ b/dev/Styles/Admin.less @@ -43,7 +43,7 @@ cursor: default; background-color: transparent; - color: #888; + color: var(--settings-menu-disabled-color, #888); padding: 4px 10px; @@ -53,12 +53,17 @@ .e-item.selectable .e-link { cursor: pointer; + color: var(--settings-menu-color); } .e-item.selectable { - &:hover .e-link, &.selected .e-link { - background-color: #555; - color: #fff; + &:hover .e-link{ + background-color: var(--settings-menu-hover-bg-color, #555); + color: var(--settings-menu-hover-color, #fff); + } + &.selected .e-link { + background-color: var(--settings-menu-selected-bg-color, #555); + color: var(--settings-menu-selected-color, #fff); } } } diff --git a/dev/Styles/AdminBranding.less b/dev/Styles/AdminBranding.less index ccad55da7..4c5442974 100644 --- a/dev/Styles/AdminBranding.less +++ b/dev/Styles/AdminBranding.less @@ -1,12 +1,4 @@ .b-admin-branding { - .disabled-form { - opacity: 0.8; - } - - .custom-css-wrapper textarea { - font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; - } } - diff --git a/dev/Styles/FolderList.less b/dev/Styles/FolderList.less index 16b7c465c..d31fc20d1 100644 --- a/dev/Styles/FolderList.less +++ b/dev/Styles/FolderList.less @@ -86,7 +86,7 @@ line-height: 34px; background-color: transparent; vertical-align: middle; - color: grey; + color: var(--folders-disabled-color, grey); cursor: not-allowed; font-size: 14px; @@ -130,12 +130,17 @@ &.selectable { - color: #000; + color: var(--folders-color, #000); cursor: pointer; - &:hover, &.selected, &.focused, &.droppableHover { - background-color: #555; - color: #fff; + &:hover { + background-color: var(--folders-hover-bg-color, #555); + color: var(--folders-hover-color, #fff); + } + + &.droppableHover { + background-color: var(--folders-drop-bg-color, #555); + color: var(--folders-drop-color, #fff); } &.droppableHover * { @@ -143,7 +148,13 @@ } &.focused { - color: #fff; + background-color: var(--folders-focused-bg-color, #555); + color: var(--folders-focused-color, #fff); + } + + &.selected { + background-color: var(--folders-selected-bg-color, #555); + color: var(--folders-selected-color, #fff); } } @@ -289,7 +300,7 @@ html.rl-left-panel-disabled, html.rl-left-panel-short { html.rl-mobile { .btn.buttonCompose { - width: 100%; + width: auto; } .btn.buttonContacts { display: none; diff --git a/dev/Styles/Layout.less b/dev/Styles/Layout.less index 4d521e771..3fa9e3d56 100644 --- a/dev/Styles/Layout.less +++ b/dev/Styles/Layout.less @@ -380,6 +380,7 @@ html.rl-bottom-preview-pane { left: 0; right: 5px; box-shadow: none; + background-color: var(--message-bg-color); } } } diff --git a/dev/Styles/Login.less b/dev/Styles/Login.less index 39edbf8db..0305f94dc 100644 --- a/dev/Styles/Login.less +++ b/dev/Styles/Login.less @@ -22,13 +22,22 @@ .desc { font-size: 30px; + color: var(--loading-color); + text-shadow: var(--loading-text-shadow); } } .loginForm { - background-color: #efefef; - color: #333; + background-color: var(--login-bg-color, #efefef); + border-radius: var(--login-border-radius); + box-shadow: var(--login-box-shadow); + color: var(--login-color, #333); + border: var(--login-border); margin: 0; + + .g-ui-link { + color: var(--login-color); + } } .controls, .control-group { @@ -80,10 +89,6 @@ .controls.error .add-on i, .control-group.error .add-on i { color: #b94a48; } - - .e-mobile-switcher { - text-align: center; - } } .buttonLogin { @@ -106,9 +111,23 @@ } .language-button { + color: inherit; padding: 5px; outline: none; } + + .e-mobile-switcher { + color: var(--powered-color, #333); + margin-top: 8px; + text-align: center; + a { + color: var(--powered-color, #333); + text-decoration: underline; + &:hover { + filter: brightness(1.5); + } + } + } } @media screen and (max-width: 480px) { @@ -132,8 +151,8 @@ left: 0; right: 0; bottom: 0; - background: transparent; - background: rgba(0,0,0,.3); + background: var(---spinner-bg, rgba(0,0,0,.3)); + border-radius: var(--login-border-radius); z-index: 1051; border-radius: 8px; } @@ -149,13 +168,13 @@ border: 8px solid transparent; border-color: transparent; - border-top-color: #fff; + border-top-color: var(--spinner-color, #fff); animation: loginRotation 1s infinite ease-in-out; border-radius: 50%; z-index: 1052; } - } +} .btn-submit-icon-wrp { border: none; @@ -166,3 +185,88 @@ outline: none; cursor: pointer; } + +// glass style +html.glass { + + @glass-color: #fff !important; + @glass-p-color: #aaa !important; + @glass-error-color: #f76260 !important; + @glass-m-color: rgba(255, 255, 255, .8) !important; + + .thm-login { + background: none !important; + background: rgba(0, 0, 0, .5) !important; + box-shadow: none !important; + + border: none !important; + border: 1px solid rgba(255, 255, 255, .2) !important; + + .controls { + .input-append .add-on i { + color: @glass-m-color; + text-shadow: none !important; + outline: none !important; + box-shadow: none !important; + } + + input { + border: 1px solid none !important; + background: none !important; + outline: none !important; + text-shadow: none !important; + box-shadow: none !important; + + color: @glass-color; + border-color: @glass-m-color; + + &:placeholder { + color: @glass-color; + text-shadow: none !important; + } + + &:focus, &:hover { + border-color: @glass-color; + } + } + .btn { + border: 1px solid none !important; + background: none !important; + outline: none !important; + text-shadow: none !important; + box-shadow: none !important; + + color: @glass-color; + border-color: @glass-m-color; + + text-transform: uppercase; + font-size: 13px; + + &:hover, &:active{ + border-color: @glass-color; + } + } + + &.error { + .input-append .add-on i { + color: @glass-error-color; + } + + input { + color: @glass-error-color; + border-color: @glass-error-color; + } + } + } + } + + .thm-login-text { + color: @glass-m-color; + text-shadow: none !important; + + .legend, .e-checkbox-icon, .g-ui-link, .language-button { + color: @glass-m-color; + text-shadow: none !important; + } + } +} diff --git a/dev/Styles/Main.less b/dev/Styles/Main.less index e5f3bcf87..d42670cbd 100644 --- a/dev/Styles/Main.less +++ b/dev/Styles/Main.less @@ -1,17 +1,15 @@ -html { - margin: 0; - padding: 0; - overflow: hidden; +html, body { font-family: Arial, Verdana, Geneva, sans-serif; height: 100%; + margin: 0; + overflow: hidden; + padding: 0; } body { - margin: 0; - padding: 0; - overflow: hidden; - background-color: #e3e3e3; - font-family: Arial, Verdana, Geneva, sans-serif; + background-color: var(--main-bg-color, #e3e3e3); + background-size: var(--main-bg-size); + color: var(--main-color, #000); -webkit-touch-callout: none; @@ -20,7 +18,6 @@ body { left: 0; bottom: 0; right: 0; - height: 100%; } textarea { diff --git a/dev/Styles/MessageList.less b/dev/Styles/MessageList.less index 4f8d97452..28d17ca70 100644 --- a/dev/Styles/MessageList.less +++ b/dev/Styles/MessageList.less @@ -27,7 +27,7 @@ html.rl-no-preview-pane { padding: 7px; z-index: 101; - background-color: #eee; + background-color: var(--message-list-toolbar-bg-color, #eee); // #gradient > .vertical(#f4f4f4, #dfdfdf); border-bottom-right-radius: @rlMainBorderRadius; @@ -78,7 +78,7 @@ html.rl-no-preview-pane { z-index: 101; white-space: nowrap; - background-color: #eee; + background-color: var(--message-list-toolbar-bg-color, #eee); // #gradient > .vertical(#f4f4f4, #dfdfdf); border-top-right-radius: @rlMainBorderRadius; diff --git a/dev/Styles/Settings.less b/dev/Styles/Settings.less index 6337adc88..8630ffaac 100644 --- a/dev/Styles/Settings.less +++ b/dev/Styles/Settings.less @@ -52,7 +52,7 @@ cursor: default; background-color: transparent; - color: #888; + color: var(--settings-menu-disabled-color, #888); padding: 4px 10px; @@ -62,12 +62,17 @@ .e-item.selectable .e-link { cursor: pointer; + color: var(--settings-menu-color); } .e-item.selectable { - &:hover .e-link, &.selected .e-link { - background-color: #555; - color: #fff; + &:hover .e-link{ + background-color: var(--settings-menu-hover-bg-color, #555); + color: var(--settings-menu-hover-color, #fff); + } + &.selected .e-link { + background-color: var(--settings-menu-selected-bg-color, #555); + color: var(--settings-menu-selected-color, #fff); } } } diff --git a/dev/Styles/Ui.less b/dev/Styles/Ui.less index e06e83fc4..789800faa 100644 --- a/dev/Styles/Ui.less +++ b/dev/Styles/Ui.less @@ -35,7 +35,6 @@ } .g-ui-menu { - max-height: 400px; max-width: 300px; overflow-y: auto; @@ -44,27 +43,24 @@ .e-link { text-decoration: none; cursor: pointer; + color: var(--dropdown-menu-color); + background-color: var(--dropdown-menu-background-color); } .e-item.selected > .e-link { - background-color: #eee !important; + background-color: var(--dropdown-menu-selected-background-color, #eee) !important; } - .e-item > .e-link:focus, .e-item > .e-link:hover { - background-color: #555; + .e-item:not(.disabled) > .e-link:focus, + .e-item:not(.disabled) > .e-link:hover { + background-color: var(--dropdown-menu-hover-background-color, #555); background-image: none; - color: #fff; + color: var(--dropdown-menu-hover-color, #fff); } .e-item.disabled > .e-link { cursor: not-allowed; - background-color: #fff; - background-image: none; - color: grey; - } - - .e-item.disabled [class^="icon-"] { - color: grey; + opacity: 0.5; } } @@ -152,18 +148,6 @@ } } -.e-mobile-switcher { - margin-top: 8px; - color: #333; - a { - color: #333; - text-decoration: underline; - &:hover { - color: #333; - } - } -} - .e-languages { margin-top: 8px; diff --git a/dev/Styles/_BootstrapFix.less b/dev/Styles/_BootstrapFix.less index 08acfc296..f05afa96d 100644 --- a/dev/Styles/_BootstrapFix.less +++ b/dev/Styles/_BootstrapFix.less @@ -1,8 +1,4 @@ -body { - background-color: transparent; -} - label { cursor: pointer; } @@ -184,10 +180,6 @@ select { margin-bottom: 0; } -.dropdown-menu { - border-radius: 0; - box-shadow: 0 1px 2px rgba(0,0,0,0.2); -} .dropdown-menu * + .dividerbar { margin-top: 9px; padding-top: 9px; diff --git a/dev/Styles/_FontasticToBoot.less b/dev/Styles/_FontasticToBoot.less index 879a83b22..2eeab00bd 100644 --- a/dev/Styles/_FontasticToBoot.less +++ b/dev/Styles/_FontasticToBoot.less @@ -13,9 +13,9 @@ font-size: 16px; vertical-align: text-top; - .disabled &:not(.icon-white), - .btn[disabled] &:not(.icon-white){ - color: grey; + .disabled &, + .btn[disabled] & { + opacity: 0.5; } } @@ -52,18 +52,14 @@ .icon-checkbox-checked, .icon-checkbox-unchecked, .icon-checkbox-partial, .icon-radio-checked, .icon-radio-unchecked { cursor: pointer; - color: #555; - font-size: 1em; - &:hover, &:active { - color: #000; + filter: brightness(0.5); } } .icon-white { &.icon-checkbox-checked, &.icon-checkbox-unchecked, &.icon-checkbox-partial, &.icon-radio-checked, &.icon-radio-unchecked { color: #eee; - &:hover, &:active { color: #fff; } diff --git a/snappymail/v/0.0.0/app/templates/Index.html b/snappymail/v/0.0.0/app/templates/Index.html index 2849f9770..c5749c528 100644 --- a/snappymail/v/0.0.0/app/templates/Index.html +++ b/snappymail/v/0.0.0/app/templates/Index.html @@ -22,7 +22,7 @@
-
+
{{LoadingDescriptionEsc}}
- +