Adjusting message colors

src/definitions/collections/message.less

@@ -52,7 +52,7 @@
   display: @headerDisplay;
   font-family: @headerFont;
   font-weight: @headerFontWeight;
-  margin: 0em 0em @headerDistance 0em;
+  margin: @headerMargin;
 }
 
 /* Default font size */
@@ -149,7 +149,7 @@
 }
 
 .ui.icon.visible.visible.visible.visible.message {
-  display: table;
+  display: flex;
 }
 
 /*--------------
@@ -207,19 +207,21 @@
 ---------------*/
 
 .ui.icon.message {
-  display: table;
+  display: flex;
   width: 100%;
+  align-items: center;
 }
 .ui.icon.message > .icon:not(.close) {
-  display: table-cell;
+  display: block;
+  flex: 0 1 auto;
   width: auto;
   vertical-align: @iconVerticalAlign;
   font-size: @iconSize;
   opacity: @iconOpacity;
 }
 .ui.icon.message > .content {
-  display: table-cell;
-  width: 100%;
+  display: block;
+  flex: 1 1 auto;
   vertical-align: @iconVerticalAlign;
 }
 
@@ -230,11 +232,6 @@
 .ui.icon.message .circular.icon {
   width: 1em;
 }
-.ui.icon.message .circular.icon + .content {
-  width: auto;
-  padding-left: @circularIconContentDistance;
-}
-
 /*--------------
     Floating
 ---------------*/
@@ -264,10 +261,7 @@
 }
 .ui.positive.message,
 .ui.attached.positive.message {
-  box-shadow:
-    0px 0px 0px @borderWidth @positiveBorderColor inset,
-    @shadowShadow
-  ;
+  box-shadow: @positiveBoxShadow;
 }
 .ui.positive.message .header {
   color: @positiveHeaderColor;
@@ -280,10 +274,7 @@
 }
 .ui.negative.message,
 .ui.attached.negative.message {
-  box-shadow:
-    0px 0px 0px @borderWidth @negativeBorderColor inset,
-    @shadowShadow
-  ;
+  box-shadow: @negativeBoxShadow;
 }
 .ui.negative.message .header {
   color: @negativeHeaderColor;
@@ -296,10 +287,7 @@
 }
 .ui.info.message,
 .ui.attached.info.message {
-  box-shadow:
-    0px 0px 0px @borderWidth @infoBorderColor inset,
-    @shadowShadow
-  ;
+  box-shadow: @infoBoxShadow;
 }
 .ui.info.message .header {
   color: @infoHeaderColor;
@@ -312,10 +300,7 @@
 }
 .ui.warning.message,
 .ui.attached.warning.message {
-  box-shadow:
-    0px 0px 0px @borderWidth @warningBorderColor inset,
-    @shadowShadow
-  ;
+  box-shadow: @warningBoxShadow;
 }
 .ui.warning.message .header {
   color: @warningHeaderColor;
@@ -328,10 +313,7 @@
 }
 .ui.error.message,
 .ui.attached.error.message {
-  box-shadow:
-    0px 0px 0px @borderWidth @errorBorderColor inset,
-    @shadowShadow
-  ;
+  box-shadow: @errorBoxShadow;
 }
 .ui.error.message .header {
   color: @errorHeaderColor;
@@ -344,10 +326,7 @@
 }
 .ui.success.message,
 .ui.attached.success.message {
-  box-shadow:
-    0px 0px 0px @borderWidth @successBorderColor inset,
-    @shadowShadow
-  ;
+  box-shadow: @successBoxShadow;
 }
 .ui.success.message .header {
   color: @successHeaderColor;

src/themes/default/collections/message.variables

@@ -11,13 +11,13 @@
 @verticalMargin: 1em;
 @verticalPadding: 1em;
 @horizontalPadding: 1.5em;
-@background: #EFEFEF;
+@background: @darkWhite;
 @lineHeightOffset: ((@lineHeight - 1em) / 2);
 
 @borderRadius: @defaultBorderRadius;
 @borderWidth: 1px;
 @borderShadow: 0px 0px 0px @borderWidth @borderColor inset;
-@shadowShadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
+@shadowShadow: 0px 0px 0px transparent;
 @boxShadow:
   @borderShadow,
   @shadowShadow
@@ -31,10 +31,11 @@
 ;
 
 /* Header */
-@headerFontSize: 1.1em;
+@headerFontSize: @relativeLarge;
 @headerFontWeight: bold;
 @headerDisplay: block;
-@headerDistance: 0.5rem;
+@headerDistance: 0rem;
+@headerMargin: -@headerLineHeightOffset 0em @headerDistance 0em;
 @headerParagraphDistance: 0.25em;
 
 /* Paragraph */
@@ -64,9 +65,8 @@
 /* Icon Message */
 @iconSize: 3em;
 @iconOpacity: 0.8;
-@iconContentDistance: 1.5rem;
+@iconContentDistance: 0rem;
 @iconVerticalAlign: middle;
-@circularIconContentDistance: 2em;
 
 /* Attached */
 @attachedXOffset: -1px;
@@ -83,3 +83,37 @@
   @floatingShadow,
   @borderShadow
 ;
+
+/* Warning / Positive / Negative / Info */
+/*@positiveBorderColor: transparent;
+@negativeBorderColor: transparent;
+@negativeBorderColor: transparent;
+@infoBorderColor: transparent;
+@warningBorderColor: transparent;
+@errorBorderColor: transparent;
+@successBorderColor: transparent;*/
+
+@positiveBoxShadow:
+  0px 0px 0px @borderWidth @positiveBorderColor inset,
+  @shadowShadow
+;
+@negativeBoxShadow:
+  0px 0px 0px @borderWidth @negativeBorderColor inset,
+  @shadowShadow
+;
+@infoBoxShadow:
+  0px 0px 0px @borderWidth @infoBorderColor inset,
+  @shadowShadow
+;
+@warningBoxShadow:
+  0px 0px 0px @borderWidth @warningBorderColor inset,
+  @shadowShadow
+;
+@errorBoxShadow:
+  0px 0px 0px @borderWidth @errorBorderColor inset,
+  @shadowShadow
+;
+@successBoxShadow:
+  0px 0px 0px @borderWidth @successBorderColor inset,
+  @shadowShadow
+;