Elastic: Simplify some styles for .ui.alert

2 files changed, 15 insertions, 18 deletions

diff --git a/skins/elastic/styles/colors.less b/skins/elastic/styles/colors.less
index 1b9c90096..adb009cfb 100644
--- a/skins/elastic/styles/colors.less
+++ b/skins/elastic/styles/colors.less
@@ -101,7 +101,7 @@
 
 // Messages
 @color-message:                     @color-font;
-@color-message-border:              rgba(0, 0, 0, 0.15);
+@color-message-border:              transparent;
 @color-message-background:          fadeout(@color-main, 95%);
 @color-message-link:                @color-main;
 @color-message-link-font-weight:    normal;
diff --git a/skins/elastic/styles/widgets/messages.less b/skins/elastic/styles/widgets/messages.less
index 1b2f48f73..9817149b6 100644
--- a/skins/elastic/styles/widgets/messages.less
+++ b/skins/elastic/styles/widgets/messages.less
@@ -15,28 +15,22 @@
 
 .ui.alert {
     margin: 0;
+    margin-bottom: .2rem;
     opacity: .95;
-    float: left;
     width: 100%;
     padding: .75em;
     color: @color-message;
     border: 1px solid @color-message-border;
     background-color: @color-message-background;
+    border-radius: 0;
     display: flex;
     align-items: center;
 
     @media screen and (max-width: @screen-width-xs) {
         border: 0;
-        border-radius: 0;
         min-height: 4.2rem;
     }
 
-    @media screen and (min-width: (@screen-width-xs + 1px)) {
-        &:not(:last-child) {
-            margin-bottom: .2rem;
-        }
-    }
-
     span {
         margin: auto 0;
     }
@@ -127,19 +121,11 @@
     &.boxconfirmation,
     &.boxinformation,
     &.boxwarning {
-        float: none;
-        border-radius: 0;
-        border: none;
         padding: .5em;
-        margin-top: 0; // this can be a <p> element, reset default margin
 
         i.icon {
             font-size: 1.5em !important;
         }
-
-        &:not(:last-child) {
-            margin-bottom: .2rem;
-        }
     }
 
     &.boxerror {
@@ -184,10 +170,13 @@
     }
 
     div {
-        border-color: transparent;
         background-color: @color-message;
         color: #fff;
 
+        @media screen and (max-width: @screen-width-xs) {
+            margin: 0;
+        }
+
         &.voice {
             position: absolute;
             top: -1000px;
@@ -200,6 +189,14 @@
         & > i.icon:before {
             color: #fff;
         }
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+
+        @media screen and (max-width: @screen-width-xs) {
+            margin: 0;
+        }
     }
 
     .loading {