Re-wroked UI messages colors

skins/elastic/styles/colors.less

@@ -69,7 +69,7 @@
 // Listings
 @color-list:                        @color-font;
 @color-list-selected:               inherit;
-@color-list-selected-background:    tint(@color-main, 96%);
+@color-list-selected-background:    tint(@color-main, 94%);
 @color-list-flagged:                @color-error;
 @color-list-deleted:                @color-black-shade-border;
 @color-list-secondary:              @color-black-shade-text;

skins/elastic/styles/widgets/messages.less

@@ -11,39 +11,6 @@
 
 /*** UI Messages ***/
 
-#messagestack {
-    position: absolute;
-    bottom: .5em;
-    right: .7em;
-    z-index: 102; // needs to be above .ui-widget-overlay
-    width: 320px;
-    height: auto;
-    max-height: 85%;
-
-    @media screen and (max-width: @screen-width-xs) {
-        left: 0;
-        right: 0;
-        bottom: 0;
-        width: auto;
-    }
-
-    div {
-        &.voice {
-            position: absolute;
-            top: -1000px;
-        }
-
-        i.icon {
-            font-size: 1.5em !important;
-        }
-
-        a:hover {
-            text-decoration: underline;
-            cursor: pointer;
-        }
-    }
-}
-
 // .boxwarning/.boxerror/.boxinformation classes are converted to .ui.alert in bootstrap_init()
 
 .ui.alert {
@@ -54,15 +21,12 @@
     padding: .75em;
     color: @color-message;
     border: 1px solid @color-message-border;
-//    box-shadow: 1px 1px 2px @color-message-shadow;
     background-color: @color-message-background;
     display: flex;
     align-items: center;
 
     @media screen and (max-width: @screen-width-xs) {
-        box-shadow: none;
         border: 0;
-        border-top: 2px solid #fff;
         border-radius: 0;
         min-height: 4.2rem;
     }
@@ -77,10 +41,6 @@
         margin: auto 0;
     }
 
-    &.loading {
-        color: @color-message-loading;
-    }
-
     & > i.icon {
         line-height: 1;
         color: @color-message-information;
@@ -91,13 +51,17 @@
         &:extend(.font-icon-class);
         content: @fa-var-info-circle;
         margin-right: .6rem;
-        width: 1em;
     }
 
-    &.loading > i.icon:before {
+    &.loading {
-        content: @fa-var-circle-notch;
-        .animated-icon-class;
         color: @color-message-loading;
+
+        & > i.icon:before {
+            content: @fa-var-circle-notch;
+            .animated-icon-class;
+            color: @color-message-loading;
+            width: 1em;
+        }
     }
 
     &.alert-success > i.icon:before {
@@ -151,17 +115,13 @@
     &.boxwarning {
         float: none;
         border-radius: 0;
-        box-shadow: none;
         border: none;
         padding: .5em;
+        margin-top: 0; // this can be a <p> element, reset default margin
 
         i.icon {
             font-size: 1.5em !important;
         }
-
-        & + :not(.boxwarning) {
-            margin-top: 1rem;
-        }
     }
 
     &.boxerror {
@@ -176,3 +136,93 @@
         background-color: @color-message-warning-background;
     }
 }
+
+#messagestack {
+    position: absolute;
+    bottom: .5em;
+    right: .7em;
+    z-index: 102; // needs to be above .ui-widget-overlay
+    width: 320px;
+    height: auto;
+    max-height: 85%;
+
+    @media screen and (max-width: @screen-width-xs) {
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: auto;
+    }
+
+    div {
+        border-color: transparent;
+
+        &.voice {
+            position: absolute;
+            top: -1000px;
+        }
+
+        i.icon {
+            font-size: 1.5em !important;
+        }
+    }
+
+    .loading {
+        background-color: @color-list-selected-background;
+        border-color: @color-main;
+        color: @color-main;
+
+        & > i.icon:before {
+            color: inherit;
+        }
+    }
+
+    .alert-info.information {
+        color: #fff;
+        background-color: @color-message-information;
+
+        & > i.icon:before {
+            color: #fff;
+        }
+    }
+
+    .alert-info.notice {
+        color: #fff;
+        background-color: @color-taskmenu-background;
+
+        & > i.icon:before {
+            color: #fff;
+        }
+    }
+
+    .alert-success {
+        color: #fff;
+        background-color: @color-message-success;
+
+        & > i.icon:before {
+            color: #fff;
+        }
+    }
+
+    .alert-warning {
+        background-color: @color-message-warning;
+
+        & > i.icon:before {
+            color: #fff;
+        }
+    }
+
+    .alert-danger {
+        color: #fff;
+        background-color: @color-message-error;
+
+        & > i.icon:before {
+            color: #fff;
+        }
+    }
+
+    a {
+        color: inherit !important;
+        text-decoration: underline;
+        cursor: pointer;
+    }
+}