mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-08-30 12:39:20 +03:00
Revamp CSS template system using var() feature
This commit is contained in:
djmaze
parent
92bbaadbf3
commit
d9bece04b2
30 changed files with 317 additions and 530 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,4 @@
|
|||
|
||||
.b-admin-branding {
|
||||
|
||||
.disabled-form {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.custom-css-wrapper textarea {
|
||||
font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -380,6 +380,7 @@ html.rl-bottom-preview-pane {
|
|||
left: 0;
|
||||
right: 5px;
|
||||
box-shadow: none;
|
||||
background-color: var(--message-bg-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue