Elastic: Fix contrast of warning toasts (#7058)

Add some color variables and slightly make bg-color stronger on "box" messages.

CHANGELOG

@@ -8,6 +8,7 @@ CHANGELOG Roundcube Webmail
 - Enigma: Add script to import keys from filesystem to the db storage (for multihost)
 - Installer: Fix DB Write test on SQLite database ("database is locked" error) (#7064)
 - Installer: Fix so SQLite DSN with a relative path to the database file works in Installer
+- Elastic: Fix contrast of warning toasts (#7058)
 - Fix so type attribute on script tags is not used on HTML5 pages (#6975)
 - Fix unread count after purge on a folder that is not currently selected (#7051)
 - Fix bug where Enter key didn't work on messages list in "List" layout (#7052)

skins/elastic/styles/colors.less

@@ -106,6 +106,7 @@
 @color-message:                     @color-font;
 @color-message-border:              transparent;
 @color-message-background:          fadeout(@color-main, 95%);
+@color-message-text:                #fff;
 @color-message-link:                @color-main;
 @color-message-link-font-weight:    normal;
 @color-message-information:         @color-main;
@@ -113,14 +114,19 @@
 @color-message-warning:             @color-warning;
 @color-message-error:               @color-error;
 @color-message-loading:             tint(@color-font, 30%);
+@color-message-information-text:    @color-message-text;
+@color-message-success-text:        @color-message-text;
+@color-message-warning-text:        @color-message;
+@color-message-error-text:          @color-message-text;
+@color-message-loading-text:        @color-message-text;
 @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%);
+@color-message-error-box-background:        fadeout(@color-message-error, 80%);
+@color-message-information-box-background:  fadeout(@color-message-information, 80%);
+@color-message-success-box-background:      fadeout(@color-message-success, 80%);
+@color-message-warning-box-background:      fadeout(@color-message-warning, 80%);
 
 
 // Popovers (menus)

skins/elastic/styles/widgets/messages.less

@@ -193,7 +193,7 @@
 
     div {
         background-color: @color-message;
-        color: #fff;
+        color: @color-message-text;
 
         @media screen and (max-width: @screen-width-xs) {
             margin: 0;
@@ -211,7 +211,7 @@
         }
 
         & > i.icon:before {
-            color: #fff;
+            color: @color-message-text;
         }
 
         &:last-child {
@@ -221,22 +221,42 @@
 
     .loading {
         background-color: @color-message-loading;
+        & when not(@color-message-loading-text = @color-message-text) { color: @color-message-loading-text; }
+        & > i.icon:before {
+            & when not(@color-message-loading-text = @color-message-text) { color: @color-message-loading-text; }
+        }
     }
 
     .alert-info.information {
         background-color: @color-message-information;
+        & when not(@color-message-information-text = @color-message-text) { color: @color-message-information-text; }
+        & > i.icon:before {
+            & when not(@color-message-information-text = @color-message-text) { color: @color-message-information-text; }
+        }
     }
 
     .alert-success {
         background-color: @color-message-success;
+        & when not(@color-message-success-text = @color-message-text) { color: @color-message-success-text; }
+        & > i.icon:before {
+            & when not(@color-message-success-text = @color-message-text) { color: @color-message-success-text; }
+        }
     }
 
     .alert-warning {
         background-color: @color-message-warning;
+        & when not(@color-message-warning-text = @color-message-text) { color: @color-message-warning-text; }
+        & > i.icon:before {
+            & when not(@color-message-warning-text = @color-message-text) { color: @color-message-warning-text; }
+        }
     }
 
     .alert-danger {
         background-color: @color-message-error;
+        & when not(@color-message-error-text = @color-message-text) { color: @color-message-error-text; }
+        & > i.icon:before {
+            & when not(@color-message-error-text = @color-message-text) { color: @color-message-error-text; }
+        }
     }
 
     a {