Elastic: Improve ui messages' colors, make loading message dark again

roundcube · Nov 21, 2018 · 356e6c0 · 356e6c0
1 parent 725a531
commit 356e6c0
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 15 deletions.
diff --git a/skins/elastic/styles/colors.less b/skins/elastic/styles/colors.less
@@ -21,7 +21,7 @@
 @color-warning:             #ffd452;
 
 @color-link-secondary:      lighten(@color-font, 60%);
-@color-black-shade-text:    lighten(@color-black, 35%);
+@color-black-shade-text:    tint(@color-black, 40%);
 @color-black-shade-border:  lighten(@color-black, 75%);
 @color-black-shade-bg:      lighten(@color-black, 85%);
 
@@ -104,15 +104,20 @@
 @color-message-border:              rgba(0, 0, 0, 0.15);
 @color-message-background:          fadeout(@color-main, 95%);
 @color-message-link:                @color-main;
+@color-message-link-font-weight:    normal;
 @color-message-information:         @color-main;
 @color-message-success:             @color-success;
 @color-message-warning:             @color-warning;
 @color-message-error:               @color-error;
-@color-message-loading:             #333;
-@color-message-error-background:    fadeout(@color-message-error, 85%);
-@color-message-information-background: fadeout(@color-message-information, 85%);
-@color-message-success-background:  fadeout(@color-message-success, 85%);
-@color-message-warning-background:  fadeout(#ffff66, 75%);
+@color-message-loading:             @color-taskmenu-background;
+@color-message-error-box:           @color-message;
+@color-message-information-box:     @color-message;
+@color-message-success-box:         @color-message;
+@color-message-warning-box:         @color-message;
+@color-message-error-box-background:        fadeout(@color-message-error, 85%);
+@color-message-information-box-background:  fadeout(@color-message-information, 85%);
+@color-message-success-box-background:      fadeout(@color-message-success, 85%);
+@color-message-warning-box-background:      fadeout(#ffff66, 75%);
 
 
 // Popovers (menus)

diff --git a/skins/elastic/styles/widgets/messages.less b/skins/elastic/styles/widgets/messages.less
@@ -103,7 +103,7 @@
 
     a:not(.btn) {
         color: @color-message-link;
-        font-weight: normal;
+        font-weight: @color-message-link-font-weight;
     }
 
     h3 {
@@ -135,19 +135,23 @@
     }
 
     &.boxerror {
-        background-color: @color-message-error-background;
+        background-color: @color-message-error-box-background;
+        & when not(@color-message-error-box = @color-message) { color: @color-message-error-box; }
     }
 
     &.boxinformation {
-        background-color: @color-message-information-background;
+        background-color: @color-message-information-box-background;
+        & when not(@color-message-information-box = @color-message) { color: @color-message-information-box; }
     }
 
     &.boxconfirmation {
-        background-color: @color-message-success-background;
+        background-color: @color-message-success-box-background;
+        & when not(@color-message-error-box = @color-message) { color: @color-message-error-box; }
     }
 
     &.boxwarning {
-        background-color: @color-message-warning-background;
+        background-color: @color-message-warning-box-background;
+        & when not(@color-message-warning-box = @color-message) { color: @color-message-warning-box; }
     }
 
     & + table {
@@ -185,12 +189,11 @@
     }
 
     .loading {
-        background-color: @color-list-selected-background;
-        border-color: @color-main;
-        color: @color-main;
+        background-color: @color-message-loading;
+        color: #fff;
 
         & > i.icon:before {
-            color: @color-main;
+            color: #fff;
         }
     }