Tweak .button-on css

css/converse.css

@@ -4917,11 +4917,12 @@ body.reset {
   #conversejs .chat-head a:hover.chatbox-btn.fa,
   #conversejs .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa {
     color: white; }
-    #converse-embedded-chat .chat-head a.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head a:visited.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head a:hover.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa.button-on,
-    #conversejs .chat-head a.chatbox-btn.fa.button-on,
-    #conversejs .chat-head a:visited.chatbox-btn.fa.button-on,
-    #conversejs .chat-head a:hover.chatbox-btn.fa.button-on,
-    #conversejs .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa.button-on {
+    #converse-embedded-chat .chat-head a.chatbox-btn.fa.button-on:before, #converse-embedded-chat .chat-head a:visited.chatbox-btn.fa.button-on:before, #converse-embedded-chat .chat-head a:hover.chatbox-btn.fa.button-on:before, #converse-embedded-chat .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa.button-on:before,
+    #conversejs .chat-head a.chatbox-btn.fa.button-on:before,
+    #conversejs .chat-head a:visited.chatbox-btn.fa.button-on:before,
+    #conversejs .chat-head a:hover.chatbox-btn.fa.button-on:before,
+    #conversejs .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa.button-on:before {
+      padding: 0.2em;
       background-color: white;
       color: #3AA569; }
   #converse-embedded-chat .chat-head .chatbox-btn,
@@ -4934,8 +4935,9 @@ body.reset {
     #conversejs .chat-head .chatbox-btn:active {
       position: relative;
       top: 1px; }
-    #converse-embedded-chat .chat-head .chatbox-btn.button-on,
-    #conversejs .chat-head .chatbox-btn.button-on {
+    #converse-embedded-chat .chat-head .chatbox-btn.button-on:before,
+    #conversejs .chat-head .chatbox-btn.button-on:before {
+      border-radius: 5%;
       background-color: white;
       color: #3AA569; }
 #converse-embedded-chat .chatbox,
@@ -5912,16 +5914,14 @@ body.reset {
   #conversejs .chat-head-chatroom a:hover.chatbox-btn.fa,
   #conversejs .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa {
     color: white; }
-    #converse-embedded-chat .chat-head-chatroom a.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head-chatroom a:visited.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head-chatroom a:hover.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on,
-    #conversejs .chat-head-chatroom a.chatbox-btn.fa.button-on,
-    #conversejs .chat-head-chatroom a:visited.chatbox-btn.fa.button-on,
-    #conversejs .chat-head-chatroom a:hover.chatbox-btn.fa.button-on,
-    #conversejs .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on {
-      background-color: white;
+    #converse-embedded-chat .chat-head-chatroom a.chatbox-btn.fa.button-on:before, #converse-embedded-chat .chat-head-chatroom a:visited.chatbox-btn.fa.button-on:before, #converse-embedded-chat .chat-head-chatroom a:hover.chatbox-btn.fa.button-on:before, #converse-embedded-chat .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on:before,
+    #conversejs .chat-head-chatroom a.chatbox-btn.fa.button-on:before,
+    #conversejs .chat-head-chatroom a:visited.chatbox-btn.fa.button-on:before,
+    #conversejs .chat-head-chatroom a:hover.chatbox-btn.fa.button-on:before,
+    #conversejs .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on:before {
       color: #E77051; }
-  #converse-embedded-chat .chat-head-chatroom .chatbox-btn.button-on,
-  #conversejs .chat-head-chatroom .chatbox-btn.button-on {
-    background-color: white;
+  #converse-embedded-chat .chat-head-chatroom .chatbox-btn.button-on:before,
+  #conversejs .chat-head-chatroom .chatbox-btn.button-on:before {
     color: #E77051; }
   #converse-embedded-chat .chat-head-chatroom .chat-title,
   #conversejs .chat-head-chatroom .chat-title {

css/inverse.css

@@ -4969,11 +4969,12 @@ body {
   #conversejs .chat-head a:hover.chatbox-btn.fa,
   #conversejs .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa {
     color: white; }
-    #converse-embedded-chat .chat-head a.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head a:visited.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head a:hover.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa.button-on,
-    #conversejs .chat-head a.chatbox-btn.fa.button-on,
-    #conversejs .chat-head a:visited.chatbox-btn.fa.button-on,
-    #conversejs .chat-head a:hover.chatbox-btn.fa.button-on,
-    #conversejs .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa.button-on {
+    #converse-embedded-chat .chat-head a.chatbox-btn.fa.button-on:before, #converse-embedded-chat .chat-head a:visited.chatbox-btn.fa.button-on:before, #converse-embedded-chat .chat-head a:hover.chatbox-btn.fa.button-on:before, #converse-embedded-chat .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa.button-on:before,
+    #conversejs .chat-head a.chatbox-btn.fa.button-on:before,
+    #conversejs .chat-head a:visited.chatbox-btn.fa.button-on:before,
+    #conversejs .chat-head a:hover.chatbox-btn.fa.button-on:before,
+    #conversejs .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa.button-on:before {
+      padding: 0.2em;
       background-color: white;
       color: #3AA569; }
   #converse-embedded-chat .chat-head .chatbox-btn,
@@ -4986,8 +4987,9 @@ body {
     #conversejs .chat-head .chatbox-btn:active {
       position: relative;
       top: 1px; }
-    #converse-embedded-chat .chat-head .chatbox-btn.button-on,
-    #conversejs .chat-head .chatbox-btn.button-on {
+    #converse-embedded-chat .chat-head .chatbox-btn.button-on:before,
+    #conversejs .chat-head .chatbox-btn.button-on:before {
+      border-radius: 5%;
       background-color: white;
       color: #3AA569; }
 #converse-embedded-chat .chatbox,
@@ -6050,16 +6052,14 @@ body {
   #conversejs .chat-head-chatroom a:hover.chatbox-btn.fa,
   #conversejs .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa {
     color: white; }
-    #converse-embedded-chat .chat-head-chatroom a.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head-chatroom a:visited.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head-chatroom a:hover.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on,
-    #conversejs .chat-head-chatroom a.chatbox-btn.fa.button-on,
-    #conversejs .chat-head-chatroom a:visited.chatbox-btn.fa.button-on,
-    #conversejs .chat-head-chatroom a:hover.chatbox-btn.fa.button-on,
-    #conversejs .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on {
-      background-color: white;
+    #converse-embedded-chat .chat-head-chatroom a.chatbox-btn.fa.button-on:before, #converse-embedded-chat .chat-head-chatroom a:visited.chatbox-btn.fa.button-on:before, #converse-embedded-chat .chat-head-chatroom a:hover.chatbox-btn.fa.button-on:before, #converse-embedded-chat .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on:before,
+    #conversejs .chat-head-chatroom a.chatbox-btn.fa.button-on:before,
+    #conversejs .chat-head-chatroom a:visited.chatbox-btn.fa.button-on:before,
+    #conversejs .chat-head-chatroom a:hover.chatbox-btn.fa.button-on:before,
+    #conversejs .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on:before {
       color: #E77051; }
-  #converse-embedded-chat .chat-head-chatroom .chatbox-btn.button-on,
-  #conversejs .chat-head-chatroom .chatbox-btn.button-on {
-    background-color: white;
+  #converse-embedded-chat .chat-head-chatroom .chatbox-btn.button-on:before,
+  #conversejs .chat-head-chatroom .chatbox-btn.button-on:before {
     color: #E77051; }
   #converse-embedded-chat .chat-head-chatroom .chat-title,
   #conversejs .chat-head-chatroom .chat-title {

package-lock.json

@@ -4035,7 +4035,7 @@
     },
     "npm": {
       "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/npm/-/npm-5.7.1.tgz",
+      "resolved": "http://registry.npmjs.org/npm/-/npm-5.7.1.tgz",
       "integrity": "sha512-r1grvv6mcEt+nlMzMWPc5n/z5q8NNuBWj0TGFp1PBSFCl6ubnAoUGBsucYsnZYT7MOJn0ha1ptEjmdBoAdJ+SA==",
       "requires": {
         "JSONStream": "1.3.2",
@@ -7997,7 +7997,7 @@
     },
     "onetime": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
       "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
       "dev": true
     },
@@ -8223,7 +8223,7 @@
     },
     "pinkie-promise": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
+      "resolved": "http://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
       "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
       "dev": true,
       "requires": {

sass/_chatbox.scss

@@ -70,8 +70,9 @@
             &.chatbox-btn {
                 &.fa {
                     color: white;
-                    &.button-on {
-                        background-color: white;
+                    &.button-on:before {
+                        padding: 0.2em;
+                        background-color: $chat-head-text-color;
                         color: $chat-head-color;
                     }
                 }
@@ -87,8 +88,9 @@
                 position: relative;
                 top: 1px;
             }
-            &.button-on {
-                background-color: white;
+            &.button-on:before {
+                border-radius: 5%;
+                background-color: $chat-head-text-color;
                 color: $chat-head-color;
             }
         }

sass/_chatrooms.scss

@@ -20,8 +20,7 @@
             &.chatbox-btn {
                 &.fa {
                     color: $chat-head-text-color;
-                    &.button-on {
-                        background-color: $chat-head-text-color;
+                    &.button-on:before {
                         color: $chatroom-head-color;
                     }
                 }
@@ -29,8 +28,7 @@
         }
 
         .chatbox-btn {
-            &.button-on {
-                background-color: $chat-head-text-color;
+            &.button-on:before {
                 color: $chatroom-head-color;
             }
         }