Style the headlines box. (Make it orange)

css/converse.css

@@ -2574,7 +2574,12 @@
     border: 1px solid #999; }
 
 #conversejs .chatbox.headlines .chat-head.chat-head-chatbox {
-  background-color: #3AA569; }
+  background-color: #E7A151; }
+#conversejs .chatbox.headlines .chat-body {
+  background-color: #E7A151;
+  border-radius: 4px; }
+#conversejs .chatbox.headlines .chat-content {
+  border-radius: 4px; }
 
 #conversejs #minimized-chats {
   border-top-left-radius: 4px;

css/inverse.css

@@ -2751,10 +2751,23 @@ body {
     margin: 0 0 0.5em -1px; }
 
 #conversejs .chatbox.headlines .chat-head.chat-head-chatbox {
-  background-color: #3AA569; }
+  background-color: #E7A151; }
+#conversejs .chatbox.headlines .chat-body {
+  background-color: #E7A151;
+  border-radius: 7px; }
+  #conversejs .chatbox.headlines .chat-body .chat-message span.chat-msg-them {
+    color: #D2842B; }
+#conversejs .chatbox.headlines .chat-content {
+  height: 100%;
+  border-radius: 7px; }
+
+#conversejs .chatbox.headlines .box-flyout {
+  background-color: #E7A151; }
+#conversejs .chatbox.headlines .chat-head.chat-head-chatbox {
+  background-color: #E7A151; }
 #conversejs .chatbox.headlines .flyout {
-  border: 1em solid #3AA569;
-  border-top: 0.8em solid #3AA569; }
+  border: 1.2em solid #E7A151;
+  border-top: 0.8em solid #E7A151; }
 
 #converse-embedded-chat,
 #conversejs {

sass/_headline.scss

@@ -5,6 +5,21 @@
                 background-color: $headline-head-color;
             }
         }
+        .chat-body {
+            background-color: $headline-head-color;
+            border-radius: $chatbox-border-radius;
+            .chat-message {
+                span {
+                    &.chat-msg-them {
+                        color: $dark-orange;
+                    }
+                }
+            }
+        }
+        .chat-content {
+            height: 100%;
+            border-radius: $chatbox-border-radius;
+        }
     }
 }
 

sass/converse/_variables.scss

@@ -113,7 +113,7 @@ $chatroom-color-light: $light-red !default;
 $chatroom-color-dark: $darkest-red !default;
 $chatroom-message-them-color: $green !default;
 
-$headline-head-color: $green !default;
+$headline-head-color: $orange !default;
 
 $box-close-button-padding-top: 4px !default;
 $box-close-button-padding-bottom: 4px !default;

sass/inverse/_headline.scss

@@ -1,12 +1,15 @@
 #conversejs {
     .chatbox.headlines {
+        .box-flyout {
+            background-color: $headline-head-color;
+        }
         .chat-head {
             &.chat-head-chatbox {
                 background-color: $headline-head-color;
             }
         }
         .flyout {
-            border: 1em solid $headline-head-color;
+            border: $flyout-padding solid $headline-head-color;
             border-top: 0.8em solid $headline-head-color;
         }
     }

sass/inverse/_variables.scss

@@ -121,7 +121,7 @@ $chatroom-color-light: $light-red !default;
 $chatroom-color-dark: $darkest-red !default;
 $chatroom-message-them-color: $green !default;
 
-$headline-head-color: $green !default;
+$headline-head-color: $orange !default;
 
 $box-close-button-padding-top: 4px !default;
 $box-close-button-padding-bottom: 4px !default;

sass/inverse/inverse.scss

@@ -21,5 +21,6 @@
 @import "bookmarks";
 @import "../chatrooms";
 @import "chatrooms";
+@import "../headline";
 @import "headline";
 @import "../awesomplete"