Revamp CSS template system using var() feature

This commit is contained in:
djmaze 2021-02-05 10:42:20 +01:00
parent 92bbaadbf3
commit d9bece04b2
30 changed files with 317 additions and 530 deletions

View file

@ -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;

View file

@ -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);
}
}
}

View file

@ -1,12 +1,4 @@
.b-admin-branding {
.disabled-form {
opacity: 0.8;
}
.custom-css-wrapper textarea {
font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
}
}

View file

@ -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;

View file

@ -380,6 +380,7 @@ html.rl-bottom-preview-pane {
left: 0;
right: 5px;
box-shadow: none;
background-color: var(--message-bg-color);
}
}
}

View file

@ -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;
}
}
}

View file

@ -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 {

View file

@ -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;

View file

@ -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);
}
}
}

View file

@ -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;

View file

@ -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;

View file

@ -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;
}

View file

@ -22,7 +22,7 @@
<body class="thm-body">
<div id="rl-app" data-boot='{{RainloopBootData}}'>
<div id="rl-loading" class="thm-loading">
<div id="rl-loading">
<div id="rl-loading-desc">{{LoadingDescriptionEsc}}</div>
<div class="e-spinner">
<div class="e-bounce bounce1"></div>
@ -30,7 +30,7 @@
<div class="e-bounce bounce3"></div>
</div>
</div>
<div id="rl-loading-error" class="thm-loading" hidden="">An error occurred.<br/>Please refresh the page and try again.</div>
<div id="rl-loading-error" hidden="">An error occurred.<br/>Please refresh the page and try again.</div>
<div id="rl-content" hidden="">
<div id="rl-popups"></div>
<div id="rl-center">

View file

@ -1,273 +1,73 @@
// mixins +++
.thm-linear-gradient-mixin(@start, @end) when (iscolor(@start)) and (iscolor(@end)) {
background-image: linear-gradient(to bottom, @start, @end) !important; // Standard, IE10
background-image: linear-gradient(to bottom, @start, @end) !important;
background-repeat: repeat-x !important;
}
.thm-border-radius(@radius) when (ispixel(@radius)) {
border-radius: @radius !important;
}
.thm-box-shadow(@shadow) {
box-shadow: @shadow !important;
}
.thm-body-background-image(@value) when (isstring(@value)) {
background-image: url("@{base}@{value}");
}
.thm-body-background-image(@value) when not (isstring(@value)) {
background-image: @value;
}
.thm-rgba-background-color(@simple, @rgba) when (@rgba = false) {
background-color: @simple !important;
}
.thm-rgba-background-color(@simple, @rgba) when not (@rgba = false) {
background-color: @simple !important;
background-color: @rgba !important;
}
// --- mixins
.thm-body {
color: @main-color;
background-color: @main-background-color;
background-size: @main-background-size;
:root {
--main-bg-color: @main-background-color;
--main-bg-size: @main-background-size;
--main-color: @main-color;
--loading-color: @loading-color;
--loading-text-shadow: @loading-text-shadow;
--login-bg-color: @login-background-color;
--login-border: @login-border;
--login-border-radius: @login-border-radius;
--login-box-shadow: @login-box-shadow;
--login-color: @login-color;
--powered-color: @powered-color;
--spinner-bg: @spinner-background;
--spinner-color: @spinner-color;
--folders-color: @folders-color;
--folders-disabled-color: @folders-disabled-color;
--folders-hover-color: @folders-hover-color;
--folders-hover-bg-color: @folders-hover-background-color;
--folders-selected-color: @folders-selected-color;
--folders-selected-bg-color: @folders-selected-background-color;
--folders-focused-color: @folders-focused-color;
--folders-focused-bg-color: @folders-focused-background-color;
--folders-drop-color: @folders-drop-color;
--folders-drop-bg-color: @folders-drop-background-color;
--dropdown-menu-color: @dropdown-menu-color;
--dropdown-menu-background-color: @dropdown-menu-background-color;
--dropdown-menu-selected-background-color: @dropdown-menu-selected-background-color;
--dropdown-menu-hover-color: @dropdown-menu-hover-color;
--dropdown-menu-hover-background-color: @dropdown-menu-hover-background-color;
--message-list-toolbar-bg-color: @message-list-toolbar-background-color;
--message-bg-color: @message-background-color;
--settings-menu-color: @settings-menu-color;
--settings-menu-disabled-color: @settings-menu-disabled-color;
--settings-menu-hover-bg-color: @settings-menu-hover-background-color;
--settings-menu-hover-color: settings-menu-hover-color;
--settings-menu-selected-bg-color: @settings-menu-selected-background-color;
--settings-menu-selected-color: @settings-menu-selected-color;
}
body {
.thm-body-background-image(@main-background-image);
}
.thm-loading {
color: @loading-color !important;
text-shadow: @loading-text-shadow !important;
.e-spinner .e-bounce {
background-color: @loading-color !important;
}
}
.thm-login-desc .desc {
color: @loading-color !important;
text-shadow: @loading-text-shadow !important;
}
.thm-login {
border: @login-border !important;
.thm-rgba-background-color(@login-background-color, @login-rgba-background-color);
.thm-linear-gradient-mixin(@login-gradient-start, @login-gradient-end);
.thm-border-radius(@login-border-radius);
.thm-box-shadow(@login-box-shadow);
&.submitting-pane.submitting {
&:before{
background: @spinner-background;
.thm-border-radius(@login-border-radius);
}
&:after{
border-top-color: @spinner-color;
}
}
}
.thm-login-text {
color: @login-color !important;
.legend, .e-checkbox-icon, .g-ui-link, .language-button {
color: @login-color !important;
}
}
.thm-powered, .thm-mobile-switcher {
color: @powered-color;
a {
color: @powered-color;
&:hover {
color: lighten(@powered-color, 20%);
}
}
}
.thm-languages {
color: @languages-color;
.flag-name {
color: @languages-color;
border-color: @languages-color;
}
}
.g-ui-menu {
color: @dropdown-menu-color !important;
background-color: @dropdown-menu-background-color !important;
}
.g-ui-menu .e-item > .e-link {
color: @dropdown-menu-color !important;
background-color: @dropdown-menu-background-color !important;
> i {
color: @dropdown-menu-color !important;
}
}
.g-ui-menu .e-item.selected > .e-link {
background-color: @dropdown-menu-selected-background-color !important;
}
.g-ui-menu .e-item > .e-link:hover, .g-ui-menu .e-item > .e-link:focus {
color: @dropdown-menu-hover-color !important;
background-color: @dropdown-menu-hover-background-color !important;
> i {
color: @dropdown-menu-hover-color !important;
}
}
.g-ui-menu .e-item.disabled > .e-link, .g-ui-menu .e-item.disabled > .e-link:hover {
color: @dropdown-menu-disabled-color !important;
background-color: @dropdown-menu-background-color !important;
> i {
color: @dropdown-menu-disabled-color !important;
}
}
.thm-message-list-top-toolbar, .thm-message-list-bottom-toolbar {
.thm-rgba-background-color(@message-list-toolbar-background-color, @message-list-toolbar-rgba-background-color);
.thm-linear-gradient-mixin(@message-list-toolbar-gradient-start, @message-list-toolbar-gradient-end);
}
.thm-folders .e-link {
color: @folders-disabled-color !important;
&.selectable {
color: @folders-color !important;
}
&.selectable:hover {
color: @folders-hover-color !important;
.thm-rgba-background-color(@folders-hover-background-color, @folders-hover-rgba-background-color);
}
&.selectable.selected {
color: @folders-selected-color !important;
.thm-rgba-background-color(@folders-selected-background-color, @folders-selected-rgba-background-color);
}
&.focused {
color: @folders-focused-color !important;
.thm-rgba-background-color(@folders-focused-background-color, @folders-focused-rgba-background-color);
}
&.selectable.droppableHover {
color: @folders-drop-color !important;
.thm-rgba-background-color(@folders-drop-background-color, @folders-drop-rgba-background-color);
}
}
.thm-settings-menu .e-item {
.e-link {
color: @settings-menu-disabled-color !important;
}
&.selectable .e-link {
color: @settings-menu-color !important;
}
&.selectable:hover .e-link {
.thm-rgba-background-color(@settings-menu-hover-background-color, @settings-menu-hover-rgba-background-color);
color: @settings-menu-hover-color !important;
}
&.selectable.selected .e-link {
.thm-rgba-background-color(@settings-menu-selected-background-color, @settings-menu-selected-rgba-background-color);
color: @settings-menu-selected-color !important;
}
}
.thm-message-view-background-color {
.thm-rgba-background-color(@message-background-color, @message-rgba-background-color);
}
// 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;
}
}
}

View file

@ -12,14 +12,12 @@
// LOGIN
@login-color: #555;
@login-background-color: #eee;
@login-rgba-background-color: false; // rgba(0,0,0,0.7)
@login-box-shadow: none; // 0px 2px 10px rgba(0,0,0,0.5)
@login-border: 1px solid #ccc;
@login-border-radius: 7px;
@login-gradient-start: none; // #f4f4f4
@login-gradient-end: none; // #dfdfdf
@powered-color: #333;
@languages-color: #333;
@spinner-background: rgba(0,0,0,.3);
@spinner-color: #fff;
@ -37,33 +35,25 @@
@folders-disabled-color: #666;
@folders-selected-color: #eee;
@folders-selected-background-color: #333;
@folders-selected-rgba-background-color: false;
@folders-focused-color: #eee;
@folders-focused-background-color: #333;
@folders-focused-rgba-background-color: false;
@folders-hover-color: #eee;
@folders-hover-background-color: #333;
@folders-hover-rgba-background-color: false;
@folders-hover-background-color: false;
@folders-drop-color: #eee;
@folders-drop-background-color: #333;
@folders-drop-rgba-background-color: false;
// SETTINGS
@settings-menu-color: #333;
@settings-menu-disabled-color: #666;
@settings-menu-selected-color: #eee;
@settings-menu-selected-background-color: #333;
@settings-menu-selected-rgba-background-color: false;
@settings-menu-hover-color: #eee;
@settings-menu-hover-background-color: #333;
@settings-menu-hover-rgba-background-color: false;
// MESSAGE LIST
@message-list-toolbar-background-color: #eee;
@message-list-toolbar-rgba-background-color: false;
@message-list-toolbar-gradient-start: none; // #f4f4f4
@message-list-toolbar-gradient-end: none; // #dfdfdf
// MESSAGE
@message-background-color: #fff;
@message-rgba-background-color: false;

View file

@ -1,6 +1,6 @@
<div class="b-login-content">
<div class="loginFormWrapper" data-bind="css: {'afterLoginHide': formHidden}">
<div class="descWrapper thm-login-desc plugin-mark-Login-AfterLogoDescription"
<div class="descWrapper plugin-mark-Login-AfterLogoDescription"
data-bind="visible: '' !== loadingDesc">
<span class="desc" data-bind="text: loadingDesc"></span>
</div>

View file

@ -10,8 +10,7 @@
// LOGIN
@login-color: #eee;
@login-background-color: #141213;
@login-rgba-background-color: rgba(0,0,0,0.8);
@login-background-color: rgba(0,0,0,0.8);
@login-box-shadow: none;
@login-border: none;
@login-border-radius: 7px;
@ -27,27 +26,21 @@
@folders-color: #fff;
@folders-disabled-color: #aaa;
@folders-selected-color: #fff;
@folders-selected-background-color: #2b333d;
@folders-selected-rgba-background-color: rgba(0,0,0,0.5);
@folders-selected-background-color: rgba(0,0,0,0.5);
@folders-focused-color: #fff;
@folders-focused-background-color: #2b333d;
@folders-focused-rgba-background-color: rgba(0,0,0,0.7);
@folders-focused-background-color: rgba(0,0,0,0.7);
@folders-hover-color: #fff;
@folders-hover-background-color: #2b333d;
@folders-hover-rgba-background-color: rgba(0,0,0,0.5);
@folders-hover-background-color: rgba(0,0,0,0.5);
@folders-drop-color: #fff;
@folders-drop-background-color: #2b333d;
@folders-drop-rgba-background-color: rgba(0,0,0,0.5);
@folders-drop-background-color: rgba(0,0,0,0.5);
// SETTINGS
@settings-menu-color: #fff;
@settings-menu-disabled-color: #aaa;
@settings-menu-selected-color: #fff;
@settings-menu-selected-background-color: #2b333d;
@settings-menu-selected-rgba-background-color: rgba(0,0,0,0.5);
@settings-menu-selected-background-color: rgba(0,0,0,0.5);
@settings-menu-hover-color: #fff;
@settings-menu-hover-background-color: #2b333d;
@settings-menu-hover-rgba-background-color: rgba(0,0,0,0.5);
@settings-menu-hover-background-color: rgba(0,0,0,0.5);
// MESSAGE LIST
@message-list-toolbar-background-color: #eee;

View file

@ -11,13 +11,11 @@
// LOGIN
@login-color: #eee;
@login-background-color: #2b333d;
@login-rgba-background-color: rgba(0,0,0,0.5);
@login-background-color: rgba(0,0,0,0.5);
@login-box-shadow: 0px 2px 10px rgba(0,0,0,0.5);
@login-border: none;
@login-border-radius: 7px;
@powered-color: #ddd;
@languages-color: #ddd;
// MENU
@dropdown-menu-color: #333;
@ -30,27 +28,21 @@
@folders-color: #fff;
@folders-disabled-color: #aaa;
@folders-selected-color: #fff;
@folders-selected-background-color: #2b333d;
@folders-selected-rgba-background-color: rgba(255,255,255,0.3);
@folders-selected-background-color: rgba(255,255,255,0.3);
@folders-focused-color: #fff;
@folders-focused-background-color: #2b333d;
@folders-focused-rgba-background-color: rgba(255,255,255,0.3);
@folders-focused-background-color: rgba(255,255,255,0.3);
@folders-hover-color: #fff;
@folders-hover-background-color: #2b333d;
@folders-hover-rgba-background-color: rgba(255,255,255,0.3);
@folders-hover-background-color: rgba(255,255,255,0.3);
@folders-drop-color: #fff;
@folders-drop-background-color: #2b333d;
@folders-drop-rgba-background-color: rgba(255,255,255,0.3);
@folders-drop-background-color: rgba(255,255,255,0.3);
// SETTINGS
@settings-menu-color: #fff;
@settings-menu-disabled-color: #aaa;
@settings-menu-selected-color: #fff;
@settings-menu-selected-background-color: #2b333d;
@settings-menu-selected-rgba-background-color: rgba(255,255,255,0.3);
@settings-menu-selected-background-color: rgba(255,255,255,0.3);
@settings-menu-hover-color: #fff;
@settings-menu-hover-background-color: #2b333d;
@settings-menu-hover-rgba-background-color: rgba(255,255,255,0.3);
@settings-menu-hover-background-color: rgba(255,255,255,0.3);
// MESSAGE LIST
@message-list-toolbar-background-color: #eee;

View file

@ -11,13 +11,11 @@
// LOGIN
@login-color: #eee;
@login-background-color: #2b333d;
@login-rgba-background-color: rgba(0,0,0,0.5);
@login-background-color: rgba(0,0,0,0.5);
@login-box-shadow: 0px 2px 10px rgba(0,0,0,0.5);
@login-border: none;
@login-border-radius: 7px;
@powered-color: #ddd;
@languages-color: #ddd;
// MENU
@dropdown-menu-color: #333;
@ -30,27 +28,21 @@
@folders-color: #fff;
@folders-disabled-color: #aaa;
@folders-selected-color: #fff;
@folders-selected-background-color: #2b333d;
@folders-selected-rgba-background-color: rgba(255,255,255,0.3);
@folders-selected-background-color: rgba(255,255,255,0.3);
@folders-focused-color: #fff;
@folders-focused-background-color: #2b333d;
@folders-focused-rgba-background-color: rgba(255,255,255,0.3);
@folders-focused-background-color: rgba(255,255,255,0.3);
@folders-hover-color: #fff;
@folders-hover-background-color: #2b333d;
@folders-hover-rgba-background-color: rgba(255,255,255,0.3);
@folders-hover-background-color: rgba(255,255,255,0.3);
@folders-drop-color: #fff;
@folders-drop-background-color: #2b333d;
@folders-drop-rgba-background-color: rgba(255,255,255,0.3);
@folders-drop-background-color: rgba(255,255,255,0.3);
// SETTINGS
@settings-menu-color: #fff;
@settings-menu-disabled-color: #aaa;
@settings-menu-selected-color: #fff;
@settings-menu-selected-background-color: #2b333d;
@settings-menu-selected-rgba-background-color: rgba(255,255,255,0.3);
@settings-menu-selected-background-color: rgba(255,255,255,0.3);
@settings-menu-hover-color: #fff;
@settings-menu-hover-background-color: #2b333d;
@settings-menu-hover-rgba-background-color: rgba(255,255,255,0.3);
@settings-menu-hover-background-color: rgba(255,255,255,0.3);
// MESSAGE LIST
@message-list-toolbar-background-color: #eee;

View file

@ -10,13 +10,11 @@
// LOGIN
@login-color: #eee;
@login-background-color: #2b333d;
@login-rgba-background-color: rgba(0,0,0,0.5);
@login-background-color: rgba(0,0,0,0.5);
@login-box-shadow: 0px 2px 10px rgba(0,0,0,0.5);
@login-border: none;
@login-border-radius: 7px;
@powered-color: #ddd;
@languages-color: #ddd;
// MENU
@dropdown-menu-color: #333;
@ -29,27 +27,21 @@
@folders-color: #fff;
@folders-disabled-color: #aaa;
@folders-selected-color: #fff;
@folders-selected-background-color: #2b333d;
@folders-selected-rgba-background-color: rgba(0,0,0,0.5);
@folders-selected-background-color: rgba(0,0,0,0.5);
@folders-focused-color: #fff;
@folders-focused-background-color: #2b333d;
@folders-focused-rgba-background-color: rgba(0,0,0,0.7);
@folders-focused-background-color: rgba(0,0,0,0.7);
@folders-hover-color: #fff;
@folders-hover-background-color: #2b333d;
@folders-hover-rgba-background-color: rgba(0,0,0,0.5);
@folders-hover-background-color: rgba(0,0,0,0.5);
@folders-drop-color: #fff;
@folders-drop-background-color: #2b333d;
@folders-drop-rgba-background-color: rgba(0,0,0,0.5);
@folders-drop-background-color: rgba(0,0,0,0.5);
// SETTINGS
@settings-menu-color: #fff;
@settings-menu-disabled-color: #aaa;
@settings-menu-selected-color: #fff;
@settings-menu-selected-background-color: #2b333d;
@settings-menu-selected-rgba-background-color: rgba(0,0,0,0.5);
@settings-menu-selected-background-color: rgba(0,0,0,0.5);
@settings-menu-hover-color: #fff;
@settings-menu-hover-background-color: #2b333d;
@settings-menu-hover-rgba-background-color: rgba(0,0,0,0.5);
@settings-menu-hover-background-color: rgba(0,0,0,0.5);
// MESSAGE LIST
@message-list-toolbar-background-color: #eee;

View file

@ -9,8 +9,7 @@
// LOGIN
@login-color: #eee;
@login-background-color: #757575;
@login-rgba-background-color: rgba(0,0,0,0.5);
@login-background-color: rgba(0,0,0,0.5);
@login-box-shadow: none;
@login-border: none;
@login-border-radius: 7px;
@ -26,27 +25,21 @@
@folders-color: #333;
@folders-disabled-color: #999;
@folders-selected-color: #eee;
@folders-selected-background-color: #757575;
@folders-selected-rgba-background-color: rgba(0,0,0,0.5);
@folders-selected-background-color: rgba(0,0,0,0.5);
@folders-focused-color: #eee;
@folders-focused-background-color: #757575;
@folders-focused-rgba-background-color: rgba(0,0,0,0.7);
@folders-focused-background-color: rgba(0,0,0,0.7);
@folders-hover-color: #eee;
@folders-hover-background-color: #757575;
@folders-hover-rgba-background-color: rgba(0,0,0,0.5);
@folders-hover-background-color: rgba(0,0,0,0.5);
@folders-drop-color: #eee;
@folders-drop-background-color: #757575;
@folders-drop-rgba-background-color: rgba(0,0,0,0.5);
@folders-drop-background-color: rgba(0,0,0,0.5);
// SETTINGS
@settings-menu-color: #333;
@settings-menu-disabled-color: #999;
@settings-menu-selected-color: #eee;
@settings-menu-selected-background-color: #757575;
@settings-menu-selected-rgba-background-color: rgba(0,0,0,0.5);
@settings-menu-selected-background-color: rgba(0,0,0,0.5);
@settings-menu-hover-color: #eee;
@settings-menu-hover-background-color: #757575;
@settings-menu-hover-rgba-background-color: rgba(0,0,0,0.5);
@settings-menu-hover-background-color: rgba(0,0,0,0.5);
// MESSAGE LIST
@message-list-toolbar-background-color: #eee;

View file

@ -10,13 +10,11 @@
// LOGIN
@login-color: #eee;
@login-background-color: #490915;
@login-rgba-background-color: rgba(0,0,0,0.5);
@login-background-color: rgba(0,0,0,0.5);
@login-box-shadow: 0px 2px 10px rgba(0,0,0,0.5);
@login-border: none;
@login-border-radius: 7px;
@powered-color: #ddd;
@languages-color: #ddd;
// MENU
@dropdown-menu-color: #333;
@ -29,27 +27,21 @@
@folders-color: #fff;
@folders-disabled-color: #aaa;
@folders-selected-color: #fff;
@folders-selected-background-color: #490915;
@folders-selected-rgba-background-color: rgba(0,0,0,0.3);
@folders-selected-background-color: rgba(0,0,0,0.3);
@folders-focused-color: #fff;
@folders-focused-background-color: #490915;
@folders-focused-rgba-background-color: rgba(0,0,0,0.3);
@folders-focused-background-color: rgba(0,0,0,0.3);
@folders-hover-color: #fff;
@folders-hover-background-color: #490915;
@folders-hover-rgba-background-color: rgba(0,0,0,0.3);
@folders-hover-background-color: rgba(0,0,0,0.3);
@folders-drop-color: #fff;
@folders-drop-background-color: #490915;
@folders-drop-rgba-background-color: rgba(0,0,0,0.3);
@folders-drop-background-color: rgba(0,0,0,0.3);
// SETTINGS
@settings-menu-color: #fff;
@settings-menu-disabled-color: #aaa;
@settings-menu-selected-color: #fff;
@settings-menu-selected-background-color: #490915;
@settings-menu-selected-rgba-background-color: rgba(0,0,0,0.5);
@settings-menu-selected-background-color: rgba(0,0,0,0.5);
@settings-menu-hover-color: #fff;
@settings-menu-hover-background-color: #490915;
@settings-menu-hover-rgba-background-color: rgba(0,0,0,0.5);
@settings-menu-hover-background-color: rgba(0,0,0,0.5);
// MESSAGE LIST
@message-list-toolbar-background-color: #eee;

View file

@ -10,13 +10,11 @@
// LOGIN
@login-color: #eee;
@login-background-color: #2b333d;
@login-rgba-background-color: rgba(0,0,0,0.6);
@login-background-color: rgba(0,0,0,0.6);
@login-box-shadow: 0px 2px 10px rgba(0,0,0,0.5);
@login-border: none;
@login-border-radius: 7px;
@powered-color: #fff;
@languages-color: #fff;
// MENU
@dropdown-menu-color: #333;
@ -29,27 +27,21 @@
@folders-color: #fff;
@folders-disabled-color: #aaa;
@folders-selected-color: #fff;
@folders-selected-background-color: #2b333d;
@folders-selected-rgba-background-color: rgba(0,0,0,0.5);
@folders-selected-background-color: rgba(0,0,0,0.5);
@folders-focused-color: #fff;
@folders-focused-background-color: #2b333d;
@folders-focused-rgba-background-color: rgba(0,0,0,0.7);
@folders-focused-background-color: rgba(0,0,0,0.7);
@folders-hover-color: #fff;
@folders-hover-background-color: #2b333d;
@folders-hover-rgba-background-color: rgba(0,0,0,0.5);
@folders-hover-background-color: rgba(0,0,0,0.5);
@folders-drop-color: #fff;
@folders-drop-background-color: #2b333d;
@folders-drop-rgba-background-color: rgba(0,0,0,0.5);
@folders-drop-background-color: rgba(0,0,0,0.5);
// SETTINGS
@settings-menu-color: #fff;
@settings-menu-disabled-color: #aaa;
@settings-menu-selected-color: #fff;
@settings-menu-selected-background-color: #2b333d;
@settings-menu-selected-rgba-background-color: rgba(0,0,0,0.5);
@settings-menu-selected-background-color: rgba(0,0,0,0.5);
@settings-menu-hover-color: #fff;
@settings-menu-hover-background-color: #2b333d;
@settings-menu-hover-rgba-background-color: rgba(0,0,0,0.5);
@settings-menu-hover-background-color: rgba(0,0,0,0.5);
// MESSAGE LIST
@message-list-toolbar-background-color: #eee;

View file

@ -9,8 +9,7 @@
// LOGIN
@login-color: #eee;
@login-background-color: #757575;
@login-rgba-background-color: rgba(0,0,0,0.5);
@login-background-color: rgba(0,0,0,0.5);
@login-box-shadow: none;
@login-border: none;
@login-border-radius: 7px;
@ -28,27 +27,21 @@
@folders-color: #333;
@folders-disabled-color: #999;
@folders-selected-color: #eee;
@folders-selected-background-color: #757575;
@folders-selected-rgba-background-color: rgba(0,0,0,0.5);
@folders-selected-background-color: rgba(0,0,0,0.5);
@folders-focused-color: #eee;
@folders-focused-background-color: #757575;
@folders-focused-rgba-background-color: rgba(0,0,0,0.7);
@folders-focused-background-color: rgba(0,0,0,0.7);
@folders-hover-color: #eee;
@folders-hover-background-color: #757575;
@folders-hover-rgba-background-color: rgba(0,0,0,0.5);
@folders-hover-background-color: rgba(0,0,0,0.5);
@folders-drop-color: #eee;
@folders-drop-background-color: #757575;
@folders-drop-rgba-background-color: rgba(0,0,0,0.5);
@folders-drop-background-color: rgba(0,0,0,0.5);
// SETTINGS
@settings-menu-color: #333;
@settings-menu-disabled-color: #999;
@settings-menu-selected-color: #eee;
@settings-menu-selected-background-color: #757575;
@settings-menu-selected-rgba-background-color: rgba(0,0,0,0.5);
@settings-menu-selected-background-color: rgba(0,0,0,0.5);
@settings-menu-hover-color: #eee;
@settings-menu-hover-background-color: #757575;
@settings-menu-hover-rgba-background-color: rgba(0,0,0,0.5);
@settings-menu-hover-background-color: rgba(0,0,0,0.5);
// MESSAGE LIST
@message-list-toolbar-background-color: #eee;

View file

@ -10,13 +10,11 @@
// LOGIN
@login-color: #eee;
@login-background-color: #2b333d;
@login-rgba-background-color: rgba(0,0,0,0.5);
@login-background-color: rgba(0,0,0,0.5);
@login-box-shadow: 0px 2px 10px rgba(0,0,0,0.5);
@login-border: none;
@login-border-radius: 7px;
@powered-color: #ddd;
@languages-color: #ddd;
// MENU
@dropdown-menu-color: #333;
@ -29,27 +27,21 @@
@folders-color: #fff;
@folders-disabled-color: #aaa;
@folders-selected-color: #fff;
@folders-selected-background-color: #2b333d;
@folders-selected-rgba-background-color: rgba(0,0,0,0.5);
@folders-selected-background-color: rgba(0,0,0,0.5);
@folders-focused-color: #fff;
@folders-focused-background-color: #2b333d;
@folders-focused-rgba-background-color: rgba(0,0,0,0.7);
@folders-focused-background-color: rgba(0,0,0,0.7);
@folders-hover-color: #fff;
@folders-hover-background-color: #2b333d;
@folders-hover-rgba-background-color: rgba(0,0,0,0.5);
@folders-hover-background-color: rgba(0,0,0,0.5);
@folders-drop-color: #fff;
@folders-drop-background-color: #2b333d;
@folders-drop-rgba-background-color: rgba(0,0,0,0.5);
@folders-drop-background-color: rgba(0,0,0,0.5);
// SETTINGS
@settings-menu-color: #fff;
@settings-menu-disabled-color: #aaa;
@settings-menu-selected-color: #fff;
@settings-menu-selected-background-color: #2b333d;
@settings-menu-selected-rgba-background-color: rgba(0,0,0,0.5);
@settings-menu-selected-background-color: rgba(0,0,0,0.5);
@settings-menu-hover-color: #fff;
@settings-menu-hover-background-color: #2b333d;
@settings-menu-hover-rgba-background-color: rgba(0,0,0,0.5);
@settings-menu-hover-background-color: rgba(0,0,0,0.5);
// MESSAGE LIST
@message-list-toolbar-background-color: #eee;

View file

@ -10,12 +10,10 @@
// LOGIN
@login-color: #333;
@login-background-color: #eee;
@login-rgba-background-color: rgba(255,255,255,0.5);
@login-background-color: rgba(255,255,255,0.5);
@login-border: none;
@login-border-radius: 7px;
@powered-color: #ddd;
@languages-color: #ddd;
// MENU
@dropdown-menu-color: #333;
@ -28,29 +26,23 @@
@folders-color: #fff;
@folders-disabled-color: #999;
@folders-selected-color: #fff;
@folders-selected-background-color: #7F7F7F;
@folders-selected-rgba-background-color: rgba(255,255,255,0.3);
@folders-selected-background-color: rgba(255,255,255,0.3);
@folders-focused-color: #fff;
@folders-focused-background-color: #7F7F7F;
@folders-focused-rgba-background-color: rgba(255,255,255,0.5);
@folders-focused-background-color: rgba(255,255,255,0.5);
@folders-hover-color: #fff;
@folders-hover-background-color: #7F7F7F;
@folders-hover-rgba-background-color: rgba(255,255,255,0.3);
@folders-hover-background-color: rgba(255,255,255,0.3);
@folders-drop-color: #fff;
@folders-drop-background-color: #7F7F7F;
@folders-drop-rgba-background-color: rgba(255,255,255,0.3);
@folders-drop-background-color: rgba(255,255,255,0.3);
// SETTINGS
@settings-menu-color: #fff;
@settings-menu-disabled-color: #999;
@settings-menu-selected-color: #fff;
@settings-menu-selected-background-color: #7F7F7F;
@settings-menu-selected-rgba-background-color: rgba(255,255,255,0.3);
@settings-menu-selected-background-color: rgba(255,255,255,0.3);
@settings-menu-hover-color: #fff;
@settings-menu-hover-background-color: #7F7F7F;
@settings-menu-hover-rgba-background-color: rgba(255,255,255,0.3);
@settings-menu-hover-background-color: rgba(255,255,255,0.3);
// MESSAGE LIST
@message-list-toolbar-background-color: #eee;
@message-list-toolbar-gradient-start: #f4f4f4;
@message-list-toolbar-gradient-end: #dfdfdf;
@message-list-toolbar-gradient-end: #dfdfdf;

View file

@ -10,8 +10,7 @@
// LOGIN
@login-color: #333;
@login-background-color: #eee;
@login-rgba-background-color: rgba(255,255,255,0.7);
@login-background-color: rgba(255,255,255,0.7);
@login-border: none;
@login-border-radius: 7px;
@ -29,27 +28,21 @@
@folders-color: #333;
@folders-disabled-color: #999;
@folders-selected-color: #333;
@folders-selected-background-color: #FAEBD2;
@folders-selected-rgba-background-color: rgba(255,255,255,0.5);
@folders-selected-background-color: rgba(255,255,255,0.5);
@folders-focused-color: #333;
@folders-focused-background-color: #FAEBD2;
@folders-focused-rgba-background-color: rgba(255,255,255,0.7);
@folders-focused-background-color: rgba(255,255,255,0.7);
@folders-hover-color: #333;
@folders-hover-background-color: #FAEBD2;
@folders-hover-rgba-background-color: rgba(255,255,255,0.5);
@folders-hover-background-color: rgba(255,255,255,0.5);
@folders-drop-color: #333;
@folders-drop-background-color: #FAEBD2;
@folders-drop-rgba-background-color: rgba(255,255,255,0.5);
@folders-drop-background-color: rgba(255,255,255,0.5);
// SETTINGS
@settings-menu-color: #333;
@settings-menu-disabled-color: #999;
@settings-menu-selected-color: #333;
@settings-menu-selected-background-color: #FAEBD2;
@settings-menu-selected-rgba-background-color: rgba(255,255,255,0.5);
@settings-menu-selected-background-color: rgba(255,255,255,0.5);
@settings-menu-hover-color: #333;
@settings-menu-hover-background-color: #FAEBD2;
@settings-menu-hover-rgba-background-color: rgba(255,255,255,0.5);
@settings-menu-hover-background-color: rgba(255,255,255,0.5);
// MESSAGE LIST
@message-list-toolbar-background-color: #eee;

View file

@ -9,8 +9,7 @@
// LOGIN
@login-color: #eee;
@login-background-color: #757575;
@login-rgba-background-color: rgba(0,0,0,0.5);
@login-background-color: rgba(0,0,0,0.5);
@login-box-shadow: none;
@login-border: none;
@login-border-radius: 7px;
@ -26,27 +25,21 @@
@folders-color: #333;
@folders-disabled-color: #999;
@folders-selected-color: #eee;
@folders-selected-background-color: #757575;
@folders-selected-rgba-background-color: rgba(0,0,0,0.5);
@folders-selected-background-color: rgba(0,0,0,0.5);
@folders-focused-color: #eee;
@folders-focused-background-color: #757575;
@folders-focused-rgba-background-color: rgba(0,0,0,0.7);
@folders-focused-background-color: rgba(0,0,0,0.7);
@folders-hover-color: #eee;
@folders-hover-background-color: #757575;
@folders-hover-rgba-background-color: rgba(0,0,0,0.5);
@folders-hover-background-color: rgba(0,0,0,0.5);
@folders-drop-color: #eee;
@folders-drop-background-color: #757575;
@folders-drop-rgba-background-color: rgba(0,0,0,0.5);
@folders-drop-background-color: rgba(0,0,0,0.5);
// SETTINGS
@settings-menu-color: #333;
@settings-menu-disabled-color: #999;
@settings-menu-selected-color: #eee;
@settings-menu-selected-background-color: #757575;
@settings-menu-selected-rgba-background-color: rgba(0,0,0,0.5);
@settings-menu-selected-background-color: rgba(0,0,0,0.5);
@settings-menu-hover-color: #eee;
@settings-menu-hover-background-color: #757575;
@settings-menu-hover-rgba-background-color: rgba(0,0,0,0.5);
@settings-menu-hover-background-color: rgba(0,0,0,0.5);
// MESSAGE LIST
@message-list-toolbar-background-color: #eee;

View file

@ -12,6 +12,7 @@ const expect = require('gulp-expect-file');
const { config } = require('./config');
const { del } = require('./common');
const cleanCss = require('gulp-clean-css');
const cssClean = () => del(config.paths.staticCSS + '/*.css');
const cssBootBuild = () => {
@ -50,7 +51,6 @@ const cssMainBuild = () => {
};
const cssBootMin = () => {
const cleanCss = require('gulp-clean-css');
return gulp
.src(config.paths.staticCSS + config.paths.css.boot.name)
.pipe(cleanCss())
@ -60,7 +60,6 @@ const cssBootMin = () => {
};
const cssMainMin = () => {
const cleanCss = require('gulp-clean-css');
return gulp
.src(config.paths.staticCSS + config.paths.css.main.name)
.pipe(cleanCss())

View file

@ -44,10 +44,10 @@
padding: 5px 0;
margin: 2px 0 0; // override default ul
list-style: none;
background-color: @dropdownBackground;
color: var(--dropdown-menu-color, inherit);
background-color: var(--dropdown-menu-background-color, @dropdownBackground);
border: 1px solid @dropdownBorder;
border-radius: 6px;
box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
background-clip: padding-box;
// Aligns the dropdown menu to right