Change text color and default chat height.

css/converse.css

@@ -5,6 +5,7 @@
  * Copyright (c) 2012-2014, JC Brand <jc@opkode.com>
  * Licensed under the Mozilla Public License
  */
+/* https://coolors.co/app/818479-b5cbb7-d2e4c4-e4e9b2-e7e08b */
 @font-face {
   font-family: 'Converse-js';
   src: url("../fonticons/fonts/icomoon.eot?-mnoxh0");
@@ -1037,7 +1038,7 @@
 
 #conversejs {
   bottom: 0;
-  color: #777;
+  color: #818479;
   direction: ltr;
   display: block;
   font-size: 14px;
@@ -1181,7 +1182,7 @@
     background: white;
     margin: 1em; }
     #conversejs form.pure-form.converse-form legend {
-      color: #777; }
+      color: #818479; }
     #conversejs form.pure-form.converse-form label {
       margin-top: 1em; }
     #conversejs form.pure-form.converse-form input[type=text],
@@ -1196,13 +1197,13 @@
       padding-right: 1em; }
     #conversejs form.pure-form.converse-form input.error {
       border: 1px solid red;
-      color: #777; }
+      color: #818479; }
     #conversejs form.pure-form.converse-form .form-help {
       color: gray;
       font-size: 85%;
       padding-top: 5px; }
       #conversejs form.pure-form.converse-form .form-help:hover {
-        color: #777; }
+        color: #818479; }
   #conversejs .chat-textarea-chatbox-selected {
     border: 1px solid #578308;
     margin: 0; }
@@ -1231,8 +1232,8 @@
     position: absolute; }
   #conversejs .chatbox .box-flyout {
     box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
-    height: 400px;
-    min-height: 200px;
+    height: 450px;
+    min-height: 225px;
     min-width: 200px;
     width: 200px;
     z-index: 1; }
@@ -1267,12 +1268,12 @@
     height: -webkit-calc(100% - 44px);
     height: calc(100% - 44px); }
     #conversejs .chatbox .chat-body p {
-      color: #777;
+      color: #818479;
       font-size: 14px;
       margin: 0;
       padding: 5px; }
     #conversejs .chatbox .chat-body .chat-info {
-      color: #777;
+      color: #818479;
       color: #808080;
       margin: 0.3em; }
       #conversejs .chatbox .chat-body .chat-info.chat-event {
@@ -1309,7 +1310,7 @@
     position: relative;
     padding: 0.5em;
     font-size: 13px;
-    color: #777;
+    color: #818479;
     overflow-y: auto;
     border: 0;
     background-color: #ffffff;
@@ -1514,7 +1515,7 @@
       color: gray;
       font-size: 85%; }
       #conversejs #controlbox #converse-register .instructions:hover {
-        color: #777; }
+        color: #818479; }
   #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
     margin-top: 2em; }
     #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
@@ -1543,14 +1544,14 @@
     text-align: left; }
     #conversejs #controlbox #chatrooms #available-chatrooms dt {
       border: none;
-      color: #777;
+      color: #818479;
       font-weight: normal;
       padding: 0;
       text-shadow: 0 1px 0 #FAFAFA; }
     #conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom {
       border: none;
       clear: both;
-      color: #777;
+      color: #818479;
       display: block;
       font-weight: bold;
       overflow: hidden;
@@ -1638,13 +1639,6 @@
     font-size: 12px;
     list-style-type: none;
     /* single tab */ }
-    #conversejs #controlbox #controlbox-tabs a.current,
-    #conversejs #controlbox #controlbox-tabs a.current:hover {
-      box-shadow: none;
-      border-bottom: 0;
-      height: 44px;
-      cursor: default;
-      color: #777; }
     #conversejs #controlbox #controlbox-tabs li {
       float: left;
       list-style: none;
@@ -1657,7 +1651,7 @@
         border-top-left-radius: 4px;
         border-top-right-radius: 4px;
         box-shadow: inset 2px -2px 20px rgba(0, 0, 0, 0.3);
-        color: #888;
+        color: #818479;
         display: block;
         font-size: 12px;
         height: 43px;
@@ -1665,8 +1659,14 @@
         margin: 0;
         text-align: center;
         text-decoration: none; }
-      #conversejs #controlbox #controlbox-tabs li a:hover {
-        color: #777; }
+        #conversejs #controlbox #controlbox-tabs li a:hover {
+          color: #818479; }
+        #conversejs #controlbox #controlbox-tabs li a.current, #conversejs #controlbox #controlbox-tabs li a.current:hover {
+          box-shadow: none;
+          border-bottom: 0;
+          height: 44px;
+          cursor: default;
+          color: #818479; }
   #conversejs #controlbox .xmpp-status {
     display: inline; }
   #conversejs #controlbox .fancy-dropdown {
@@ -1802,7 +1802,7 @@
     overflow-y: auto; }
     #conversejs #converse-roster .roster-contacts dt.roster-group {
       border: none;
-      color: #777;
+      color: #818479;
       display: none;
       font-weight: normal;
       padding: 0.5em;
@@ -1810,13 +1810,13 @@
       #conversejs #converse-roster .roster-contacts dt.roster-group:hover {
         background-color: #E1E6E5; }
       #conversejs #converse-roster .roster-contacts dt.roster-group .group-toggle {
-        color: #777;
+        color: #818479;
         display: block;
         width: 100%; }
     #conversejs #converse-roster .roster-contacts dd {
       border: none;
       clear: both;
-      color: #777;
+      color: #818479;
       display: block;
       font-weight: bold;
       height: 24px;
@@ -1854,7 +1854,7 @@
         width: 22px;
         margin: 0;
         display: none;
-        color: #777; }
+        color: #818479; }
       #conversejs #converse-roster .roster-contacts dd a .open-chat {
         width: 80%; }
   #conversejs #converse-roster span.pending-contact-name {
@@ -1927,7 +1927,7 @@
         border-bottom-left-radius: 4px;
         border-bottom-right-radius: 4px;
         border: 0;
-        color: #777;
+        color: #818479;
         font-size: 14px;
         height: 289px;
         height: -webkit-calc(100% - 44px);

mockup/controlbox.html

@@ -9,7 +9,7 @@
     <link type="text/css" href="../css/converse.css" rel="stylesheet" media="screen" />
     <script src="../components/jquery/dist/jquery.min.js"></script>
 </head>
-<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
+<body id="page-top" data-spy="scroll" data-target=".navbar-custom" style="background-color: white">
 
 <!-- HEADER -->
 <div id="header_wrap" class="outer">

sass/_controlbox.scss

@@ -2,7 +2,7 @@
     #controlbox {
         display: none;
         .controlbox-head {
-            background-color: $chat-head-color;
+            background-color: $controlbox-head-color;
             border-top-left-radius: $chatbox-border-radius;
             border-top-right-radius: $chatbox-border-radius;
             color: $chat-head-inverse-text-color;
@@ -242,15 +242,6 @@
             font-size: 12px;
             list-style-type: none;
 
-            a.current,
-            a.current:hover {
-                box-shadow: none;
-                border-bottom: 0;
-                height: $chat-head-height;
-                cursor: default;
-                color: $text-color;
-            }
-
             /* single tab */
             li {
                 float: left;
@@ -258,14 +249,13 @@
                 padding-left: 0;
                 text-shadow: white 0 1px 0;
                 width: 38%;
-
                 a {
                     background-color: white;
                     border-bottom: 1px solid $border-color;
                     border-top-left-radius: $chatbox-border-radius;
                     border-top-right-radius: $chatbox-border-radius;
                     box-shadow: inset 2px -2px 20px rgba(0, 0, 0, 0.3);
-                    color: #888;
+                    color: $text-color;
                     display: block;
                     font-size: 12px;
                     height: $chat-head-height - 1px;
@@ -273,9 +263,17 @@
                     margin: 0;
                     text-align: center;
                     text-decoration: none;
-                }
-                a:hover {
-                    color: $text-color;
+                    &:hover {
+                        color: $text-color;
+                    }
+                    &.current,
+                    &.current:hover {
+                        box-shadow: none;
+                        border-bottom: 0;
+                        height: $chat-head-height;
+                        cursor: default;
+                        color: $text-color;
+                    }
                 }
             }
         }

sass/_variables.scss

@@ -1,15 +1,17 @@
+ /* https://coolors.co/app/818479-b5cbb7-d2e4c4-e4e9b2-e7e08b */
 
 $link-color: #436F64 !default;
 $inverse-link-color: white !default;
 $link-shadow-color: #FAFAFA !default;
 $text-shadow-color: #FAFAFA !default;
-$text-color: #777 !default;
+$text-color: #818479 !default;
 $border-color: #CCC !default;
 $warning-color: #681F2C !default;
 $light-background-border-color: #E5E9E8 !default;
 $light-background-color: beige !default;
 $icon-color: #114327 !default;
 $highlight-color: #E1E6E5 !default;
+$controlbox-head-color: #436F64 !default;
 $chat-head-color: #436F64 !default;
 $chatroom-head-color: #346121 !default;
 $chat-head-text-color: white !default;
@@ -34,7 +36,7 @@ $legend-font-size: 16px !default;
 
 $chatroom-width: 300px !default;
 $chat-width: 200px !default;
-$chat-height: 400px !default;
+$chat-height: 450px !default;
 $chat-gutter: 7px !default;
 $minimized-chats-width: 130px !default;