Style the spoiler

css/converse.css

@@ -1539,6 +1539,9 @@
     #conversejs .chatbox {
       margin: 0;
       width: 100%; } }
+  #converse-embedded-chat .chatbox .spoiler,
+  #conversejs .chatbox .spoiler {
+    background-color: #e7f7ee; }
   #converse-embedded-chat .chatbox .box-flyout,
   #conversejs .chatbox .box-flyout {
     background-color: white;
@@ -1648,6 +1651,10 @@
       #conversejs .chatbox .chat-body .chat-message .chat-msg-content {
         max-width: 100%;
         word-wrap: break-word; }
+        #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content.spoiler,
+        #conversejs .chatbox .chat-body .chat-message .chat-msg-content.spoiler {
+          border-radius: 4px;
+          padding: 0.5em; }
         #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content .emojione,
         #conversejs .chatbox .chat-body .chat-message .chat-msg-content .emojione {
           margin-bottom: -6px; }
@@ -1683,7 +1690,8 @@
     height: calc(100% - 96px); }
     #converse-embedded-chat .chatbox .chat-content .toggle-spoiler:before,
     #conversejs .chatbox .chat-content .toggle-spoiler:before {
-      padding-right: 0.25em; }
+      padding-right: 0.25em;
+      whitespace: nowrap; }
   #converse-embedded-chat .chatbox .chat-content-sendbutton,
   #conversejs .chatbox .chat-content-sendbutton {
     height: calc(100% - 128px); }
@@ -1732,7 +1740,6 @@
       resize: none; }
       #converse-embedded-chat .chatbox .sendXMPPMessage .chat-textarea.spoiler,
       #conversejs .chatbox .sendXMPPMessage .chat-textarea.spoiler {
-        background-color: #e7f7ee;
         height: 42px; }
     #converse-embedded-chat .chatbox .sendXMPPMessage .send-button,
     #conversejs .chatbox .sendXMPPMessage .send-button {
@@ -1752,11 +1759,11 @@
       padding: 5px;
       height: 25px;
       display: block;
-      background-color: #E7FBF0; }
+      background-color: #3AA569; }
       #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar a,
       #conversejs .chatbox .sendXMPPMessage .chat-toolbar a {
         font-size: 14px;
-        color: #777;
+        color: white;
         text-decoration: none;
         text-shadow: none; }
       #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .chat-toolbar-text,
@@ -1853,7 +1860,7 @@
               color: #8f2831; }
         #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu,
         #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
-          color: #777; }
+          color: white; }
         #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley,
         #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley {
           padding-left: 5px; }

css/inverse.css

@@ -1604,6 +1604,9 @@ body {
     #conversejs .chatbox {
       margin: 0;
       width: 100%; } }
+  #converse-embedded-chat .chatbox .spoiler,
+  #conversejs .chatbox .spoiler {
+    background-color: #e7f7ee; }
   #converse-embedded-chat .chatbox .box-flyout,
   #conversejs .chatbox .box-flyout {
     background-color: white;
@@ -1713,6 +1716,10 @@ body {
       #conversejs .chatbox .chat-body .chat-message .chat-msg-content {
         max-width: 100%;
         word-wrap: break-word; }
+        #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content.spoiler,
+        #conversejs .chatbox .chat-body .chat-message .chat-msg-content.spoiler {
+          border-radius: 0;
+          padding: 0.5em; }
         #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content .emojione,
         #conversejs .chatbox .chat-body .chat-message .chat-msg-content .emojione {
           margin-bottom: -6px; }
@@ -1748,7 +1755,8 @@ body {
     height: calc(100% - 100px); }
     #converse-embedded-chat .chatbox .chat-content .toggle-spoiler:before,
     #conversejs .chatbox .chat-content .toggle-spoiler:before {
-      padding-right: 0.25em; }
+      padding-right: 0.25em;
+      whitespace: nowrap; }
   #converse-embedded-chat .chatbox .chat-content-sendbutton,
   #conversejs .chatbox .chat-content-sendbutton {
     height: calc(100% - 132px); }
@@ -1797,7 +1805,6 @@ body {
       resize: none; }
       #converse-embedded-chat .chatbox .sendXMPPMessage .chat-textarea.spoiler,
       #conversejs .chatbox .sendXMPPMessage .chat-textarea.spoiler {
-        background-color: #e7f7ee;
         height: 42px; }
     #converse-embedded-chat .chatbox .sendXMPPMessage .send-button,
     #conversejs .chatbox .sendXMPPMessage .send-button {
@@ -1817,11 +1824,11 @@ body {
       padding: 5px;
       height: 29px;
       display: block;
-      background-color: #E7FBF0; }
+      background-color: #3AA569; }
       #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar a,
       #conversejs .chatbox .sendXMPPMessage .chat-toolbar a {
         font-size: 16px;
-        color: #777;
+        color: white;
         text-decoration: none;
         text-shadow: none; }
       #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .chat-toolbar-text,
@@ -1918,7 +1925,7 @@ body {
               color: #8f2831; }
         #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu,
         #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
-          color: #777; }
+          color: white; }
         #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley,
         #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley {
           padding-left: 5px; }

sass/_chatbox.scss

@@ -79,6 +79,11 @@
             margin: 0;
             width: $mobile-chat-width;
         }
+
+        .spoiler {
+            background-color: lighten($chat-head-color, 50%);
+        }
+
         .box-flyout {
             background-color: white;
             box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
@@ -180,6 +185,12 @@
                 .chat-msg-content {
                     max-width: 100%;
                     word-wrap: break-word;
+
+                    &.spoiler {
+                        border-radius: $chatbox-border-radius;
+                        padding: 0.5em;
+                    }
+
                     .emojione {
                         margin-bottom: -6px;
                     }
@@ -266,7 +277,6 @@
                 width: 100%;
                 resize: none;
                 &.spoiler {
-                    background-color: lighten($chat-head-color, 50%);
                     height: 42px;
                 }
             }
@@ -287,10 +297,10 @@
                 padding: 5px;
                 height: $toolbar-height;
                 display: block;
-                background-color: $toolbar-color;
+                background-color: $chat-head-color;
                 a {
                     font-size: $font-size;
-                    color: $text-color;
+                    color: white;
                     text-decoration: none;
                     text-shadow: none;
                 }
@@ -386,7 +396,7 @@
                         }
                     }
                     &.toggle-toolbar-menu {
-                        color: $text-color;
+                        color: white;
                     }
                     &.toggle-smiley {
                         padding-left: 5px;

src/templates/toolbar.html

@@ -15,5 +15,5 @@
 <li class="toggle-call"><a class="icon-phone" title="{{{o.label_start_call}}}"></a></li>
 {[ } ]}
 {[ if (o.show_clear_button)  { ]}
-<li class="toggle-clear"><a class="icon-trash" title="{{{o.label_clear}}}"></a></li>
+<li class="toggle-clear"><a class="icon-remove" title="{{{o.label_clear}}}"></a></li>
 {[ } ]}