Various concord theme styling fixes

sass/_bookmarks.scss

@@ -1,9 +1,9 @@
 #conversejs {
     #controlbox {
         .bookmarks-toggle, .bookmarks-toggle .fa {
-            color: var(--chatroom-head-color) !important;
+            color: var(--chatroom-head-bg-color) !important;
             &:hover {
-                color: var(--chatroom-head-color-dark) !important;
+                color: var(--chatroom-head-bg-color-dark) !important;
             }
         }
     }

sass/_chatrooms.scss

@@ -1,7 +1,7 @@
 #conversejs.converse-embedded,
 #conversejs {
     .badge-room-color {
-        background-color: var(--chatroom-head-color);
+        background-color: var(--chatroom-head-bg-color);
     }
 
     .add-chatroom {
@@ -37,7 +37,8 @@
 
 
     .chat-head-chatroom {
-        background-color: var(--chatroom-head-color);
+        color: var(--chatroom-head-color);
+        background-color: var(--chatroom-head-bg-color);
         border-bottom: var(--chatroom-head-border-bottom);
 
         .chat-head__desc {
@@ -89,7 +90,7 @@
 
         .box-flyout {
             overflow-y: hidden;
-            background-color: var(--chatroom-head-color);
+            background-color: var(--chatroom-head-bg-color);
 
             width: 100%;
             @media screen and (max-height: $mobile-landscape-height) {
@@ -117,11 +118,11 @@
                 .chat-topic {
                     display: var(--chat-topic-display);
                     font-weight: bold;
-                    color: var(--chatroom-head-color);
+                    color: var(--chatroom-head-bg-color);
                 }
                 .chat-info {
                     display: var(--chat-info-display);
-                    color: var(--chatroom-head-color);
+                    color: var(--chatroom-head-bg-color);
                     line-height: normal;
                     &.badge {
                         color: var(--chat-head-text-color);
@@ -145,7 +146,7 @@
                     min-width: 25%;
                     word-wrap: break-word;
                     .new-msgs-indicator {
-                        background-color: var(--chatroom-head-color);
+                        background-color: var(--chatroom-head-bg-color);
                     }
                     .chat-content {
                         height: 100%;
@@ -189,7 +190,7 @@
 
                     .occupants-heading {
                         font-family: var(--heading-font);
-                        color: var(--chatroom-head-color);
+                        color: var(--groupchats-header-color-dark);
                         padding-left: 0;
                         margin-right: 1em;
                     }
@@ -336,7 +337,7 @@
             padding: 0.5em;
             text-align: center;
             font-size: var(--font-size-small);
-            background-color: var(--chatroom-head-color);
+            background-color: var(--chatroom-head-bg-color);
             color: white;
 
             &.muc-bottom-panel--nickname {
@@ -371,7 +372,7 @@
 
             .chat-textarea {
                 &:active, &:focus{
-                    outline-color: var(--chatroom-head-color);
+                    outline-color: var(--chatroom-head-bg-color);
                 }
                 border-bottom-right-radius: 0;
                 &.correcting {
@@ -470,9 +471,9 @@
 
     .chatroom {
         .box-flyout {
-            background-color: var(--chatroom-head-color);
-            border: var(--flyout-padding) solid var(--chatroom-head-color);
-            border-top: 0.8em solid var(--chatroom-head-color);
+            background-color: var(--chatroom-head-bg-color);
+            border: var(--flyout-padding) solid var(--chatroom-head-bg-color);
+            border-top: 0.8em solid var(--chatroom-head-bg-color);
             width: 100%;
 
             .chat-head__desc {

sass/_controlbox.scss

@@ -69,9 +69,9 @@
         order: -1;
 
         .open-rooms-toggle, .open-rooms-toggle .fa {
-            color: var(--chatroom-head-color) !important;
+            color: var(--groupchats-header-color) !important;
             &:hover {
-                color: var(--chatroom-head-color-dark) !important;
+                color: var(--chatroom-head-bg-color-dark) !important;
             }
         }
 
@@ -229,7 +229,7 @@
             }
 
             .controlbox-heading--groupchats {
-                color: var(--chatroom-head-color);
+                color: var(--groupchats-header-color);
             }
 
             .controlbox-heading--contacts {

sass/_emoji.scss

@@ -135,17 +135,17 @@
 
     .chatroom {
         .emoji-picker.toolbar-menu {
-            background-color: var(--chatroom-head-color);
+            background-color: var(--chatroom-head-bg-color);
             background: white;
             .emoji-skintone-picker {
-                background-color: var(--chatroom-head-color);
+                background-color: var(--chatroom-head-bg-color);
             }
             .emoji-picker__header {
-                background-color: var(--chatroom-head-color);
+                background-color: var(--chatroom-head-bg-color);
                 ul {
                     .emoji-category {
                         &.picked {
-                            border: 1px var(--chatroom-head-color) solid;
+                            border: 1px var(--chatroom-head-bg-color) solid;
                             border-bottom: none;
                         }
                     }

sass/_lists.scss

@@ -102,7 +102,7 @@
             }
 
             &:hover {
-                background-color: var(--controlbox-head-color-lighten-45-percent);
+                background-color: var(--controlbox-pane-bg-hover-color);
                 .fa, .far, .fas {
                     opacity: 1;
                 }

sass/_roster.scss

@@ -171,7 +171,7 @@
                     margin-left: 5px;
                 }
                 &:hover {
-                    background-color: var(--controlbox-head-color-lighten-45-percent);
+                    background-color: var(controlbox-pane-bg-hover-color);
                 }
             }
         }

sass/_variables.scss

@@ -43,7 +43,6 @@ $mobile_portrait_length: 480px !default;
     --send-button-height: 27px;
     --send-button-margin: 3px;
 
-    --controlbox-heading-top-margin: 0.75em;
     --inline-action-margin: 0.75em;
 
     --roster-height: 194px;
@@ -84,12 +83,17 @@ $mobile_portrait_length: 480px !default;
     --button-border-radius: 5px;
     --chatbox-border-radius: 4px;
 
+
+    --groupchats-header-color: var(--chatroom-head-bg-color);
+    --groupchats-header-color-dark: var(--chatroom-head-bg-color-dark);
+
     --controlbox-width: 250px;
     --controlbox-head-color: var(--light-blue);
-    --controlbox-head-color-lighten-45-percent: #eff4f7; // lighten($light-blue, 45%)
-    --controlbox-pane-background-color: white;
     --controlbox-heading-color: inherit;
     --controlbox-heading-font-weight: bold;
+    --controlbox-heading-top-margin: 0.75em;
+    --controlbox-pane-background-color: white;
+    --controlbox-pane-bg-hover-color: #eff4f7;
 
     --chat-gutter: 0.5em;
     --minimized-chats-width: 130px;
@@ -106,13 +110,13 @@ $mobile_portrait_length: 480px !default;
     --heading-display: block;
     --heading-color: white;
 
-    --chatroom-head-color: var(--redder-orange);
-    --chatroom-head-color-dark: #D24E2B; // $red
-    --chatroom-head-color-lighten-25-percent: #f6ccc1; // lighten($red, 25%)
-    --chatroom-head-button-color: var(--chatroom-head-color);
+    --chatroom-head-color: white;
+    --chatroom-head-bg-color: var(--redder-orange);
+    --chatroom-head-bg-color-dark: #D24E2B; // $red
+    --chatroom-head-button-color: var(--chatroom-head-bg-color);
     --chatroom-head-title-font-weight: normal;
     --chatroom-head-title-padding-right: 0px;
-    --chatroom-head-description-color: var(--chatroom-head-color-lighten-25-percent);
+    --chatroom-head-description-color: var(--chatroom-head-bg-color-lighten-25-percent);
     --chatroom-head-description-link-color: white;
     --chatroom-head-description-display: block;
     --chatroom-head-description-border-left: 0px;
@@ -120,8 +124,8 @@ $mobile_portrait_length: 480px !default;
     --chatroom-head-border-bottom: 0px;
     --chatroom-width: 500px;
     --chatroom-correcting-color: #fadfd7; // lighten($red, 30%)
-    --chatroom-badge-color: var(--chatroom-head-color);
-    --chatroom-badge-hover-color: var(--chatroom-head-color-dark);
+    --chatroom-badge-color: var(--chatroom-head-bg-color);
+    --chatroom-badge-hover-color: var(--chatroom-head-bg-color-dark);
 
     --headline-head-color: var(--orange);
     --headline-message-color: #D2842B;
@@ -138,10 +142,10 @@ $mobile_portrait_length: 480px !default;
     --message-font-size: var(--font-size);
     --separator-text-color: var(--message-text-color);
     --chat-separator-border-bottom: 2px solid var(--chat-head-color);
-    --chatroom-separator-border-bottom: 2px solid var(--chatroom-head-color);
+    --chatroom-separator-border-bottom: 2px solid var(--chatroom-head-bg-color);
 
-    --message-input-border-top: 4px solid var(--chatroom-head-color);
-    --message-input-color: var(--chatroom-head-color);
+    --message-input-border-top: 4px solid var(--chatroom-head-bg-color);
+    --message-input-color: var(--chatroom-head-bg-color);
 
     --line-height-small: 14px;
     --line-height: 16px;
@@ -191,8 +195,10 @@ $mobile_portrait_length: 480px !default;
     --avatar-background-color: none;
 
     --controlbox-pane-background-color: #333;
+    --controlbox-pane-bg-hover-color: #464646;
     --controlbox-heading-color: #777;
     --controlbox-heading-font-weight: bold;
+    --groupchats-header-color: var(--redder-orange);
 
     --chat-topic-display: none;
     --chat-info-display: none;
@@ -203,10 +209,10 @@ $mobile_portrait_length: 480px !default;
     --chatbox-border-radius: 0px;
 
     --heading-display: inline;
-    --heading-color: #4F545C;
+    --heading-color: #9B4D;
 
-    --chatroom-head-color: white;
-    --chatroom-head-color-lighten-25-percent: blue;
+    --chatroom-head-color: #7E7E7E;
+    --chatroom-head-bg-color: white;
     --chatroom-head-button-color: #999;
     --chatroom-head-title-font-weight: bold;
     --chatroom-head-title-padding-right: 12px;