Various inverse-related CSS improvements.

Most notably, make toolbar same color as chat head and make private chats green
instead of orange.

css/converse.css

@@ -1445,7 +1445,7 @@
     float: left; }
   #converse-embedded-chat .chat-head.chat-head-chatbox,
   #conversejs .chat-head.chat-head-chatbox {
-    background-color: #E7A151; }
+    background-color: #3AA569; }
   #converse-embedded-chat .chat-head .user-custom-message,
   #conversejs .chat-head .user-custom-message {
     color: white;
@@ -1475,7 +1475,7 @@
   #converse-embedded-chat .chatbox-btn.button-on,
   #conversejs .chatbox-btn.button-on {
     background-color: white;
-    color: #E7A151; }
+    color: #3AA569; }
 #converse-embedded-chat .chatbox,
 #conversejs .chatbox {
   display: block;
@@ -1569,35 +1569,30 @@
         margin-top: 1em; }
     #converse-embedded-chat .chatbox .chat-body .chat-image,
     #conversejs .chatbox .chat-body .chat-image {
-      max-width: 100%;
-      max-height: 100%; }
+      max-height: 24em; }
     #converse-embedded-chat .chatbox .chat-body .chat-action,
     #conversejs .chatbox .chat-body .chat-action {
       font-style: italic; }
     #converse-embedded-chat .chatbox .chat-body .chat-message,
     #conversejs .chatbox .chat-body .chat-message {
       margin: 0.3em; }
-      #converse-embedded-chat .chatbox .chat-body .chat-message span,
-      #conversejs .chatbox .chat-body .chat-message span {
-        display: inline-block; }
-        #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-author,
-        #conversejs .chatbox .chat-body .chat-message span.chat-msg-author {
-          max-width: 100%;
-          font-weight: bold;
-          white-space: nowrap;
-          float: left;
-          text-overflow: ellipsis;
-          overflow: hidden; }
-        #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-them,
-        #conversejs .chatbox .chat-body .chat-message span.chat-msg-them {
-          color: #3AA569; }
-        #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-me,
-        #conversejs .chatbox .chat-body .chat-message span.chat-msg-me {
-          color: #578EA9; }
-        #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-content,
-        #conversejs .chatbox .chat-body .chat-message span.chat-msg-content {
-          max-width: 100%;
-          word-wrap: break-word; }
+      #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-author,
+      #conversejs .chatbox .chat-body .chat-message span.chat-msg-author {
+        font-weight: bold;
+        white-space: nowrap;
+        float: left;
+        text-overflow: ellipsis;
+        overflow: hidden; }
+      #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-them,
+      #conversejs .chatbox .chat-body .chat-message span.chat-msg-them {
+        color: #3AA569; }
+      #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-me,
+      #conversejs .chatbox .chat-body .chat-message span.chat-msg-me {
+        color: #578EA9; }
+      #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-content,
+      #conversejs .chatbox .chat-body .chat-message span.chat-msg-content {
+        max-width: 100%;
+        word-wrap: break-word; }
     #converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-them,
     #conversejs .chatbox .chat-body .delayed .chat-msg-them {
       color: #FB5D50; }
@@ -1609,12 +1604,13 @@
     position: absolute;
     width: 100%;
     cursor: pointer;
-    background-color: #E7A151;
+    background-color: #3AA569;
     color: #FCFDFD;
-    padding: 0.3em;
+    padding: 0.5em;
     font-size: 0.9em;
     text-align: center;
-    z-index: 20; }
+    z-index: 20;
+    white-space: nowrap; }
   #converse-embedded-chat .chatbox .chat-content,
   #conversejs .chatbox .chat-content {
     position: relative;
@@ -1646,7 +1642,6 @@
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
     background-clip: padding-box;
-    background: white;
     border-top: 1px solid #BBB;
     border: 0;
     margin: 0;
@@ -1677,7 +1672,7 @@
       left: 3px;
       width: -webkit-calc(100% - 6px);
       width: calc(100% - 6px);
-      background-color: #E7A151;
+      background-color: #3AA569;
       color: white;
       font-size: 80%;
       height: 27px;
@@ -1685,28 +1680,34 @@
     #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar,
     #conversejs .chatbox form.sendXMPPMessage .chat-toolbar {
       box-sizing: border-box;
-      font-size: 14px;
       margin: 0;
       padding: 5px;
       height: 25px;
       display: block;
-      background-color: #FFF5EE; }
+      background-color: #3AA569; }
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar a,
       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar a {
         font-size: 14px;
-        color: #578EA9;
+        color: white;
         text-decoration: none;
         text-shadow: none; }
+      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toolbar-picker-panel a,
+      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toolbar-picker-panel a {
+        color: #578EA9; }
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text,
       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text {
         font-size: 12px;
-        padding-right: 3px;
-        text-shadow: 0 1px 0 white; }
+        padding-right: 3px; }
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted,
       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted {
-        color: #D24E2B; }
+        color: white; }
+        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-picker-panel a,
+        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-picker-panel a,
+        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-picker-panel a,
+        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-picker-panel a {
+          color: #578EA9; }
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified,
       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
@@ -1757,7 +1758,7 @@
         margin-left: 0; }
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley,
       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley {
-        color: #578EA9;
+        color: white;
         padding-left: 5px; }
         #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul,
         #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul {
@@ -1956,7 +1957,7 @@
         #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom a:hover {
           color: #206485; }
         #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom.unread-msgs .open-room {
-          max-width: 50%;
+          max-width: 55%;
           width: auto;
           font-weight: bold; }
         #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom a.room-info:before {
@@ -2028,7 +2029,6 @@
     text-align: center;
     display: inline;
     overflow: hidden;
-    font-size: 12px;
     list-style-type: none;
     /* single tab */ }
     #conversejs #controlbox #controlbox-tabs li {
@@ -2052,7 +2052,7 @@
         text-align: center;
         text-decoration: none; }
         #conversejs #controlbox #controlbox-tabs li a.contacts-tab .msgs-indicator {
-          background-color: #E7A151; }
+          background-color: #3AA569; }
         #conversejs #controlbox #controlbox-tabs li a.rooms-tab .msgs-indicator {
           background-color: #E77051; }
         #conversejs #controlbox #controlbox-tabs li a .msgs-indicator {
@@ -2286,16 +2286,22 @@
           #conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .contact-name {
             width: 70%; }
         #conversejs #converse-roster .roster-contacts dd .open-chat .msgs-indicator {
+          background-color: #3AA569;
           opacity: 1;
           border-radius: 10%;
           padding: 0 0.2em;
           font-size: 12px; }
         #conversejs #converse-roster .roster-contacts dd .open-chat .contact-name {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
           padding: 0;
           margin: 0;
           max-width: 80%;
           float: none;
           height: 60px; }
+          #conversejs #converse-roster .roster-contacts dd .open-chat .contact-name.unread-msgs {
+            max-width: 60%; }
         #conversejs #converse-roster .roster-contacts dd .open-chat .avatar {
           float: left;
           display: inline-block;
@@ -2516,8 +2522,7 @@
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container,
       #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container {
         background-color: white;
-        border-bottom-left-radius: 4px;
-        border-bottom-right-radius: 4px;
+        border-radius: 4px;
         border: 0;
         color: #818479;
         font-size: 14px;
@@ -2541,6 +2546,9 @@
         #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],
         #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit] {
           margin: 0 0.5em; }
+  #converse-embedded-chat .chatroom form.sendXMPPMessage .chat-toolbar,
+  #conversejs .chatroom form.sendXMPPMessage .chat-toolbar {
+    background-color: #E77051; }
   #converse-embedded-chat .chatroom form.sendXMPPMessage .chat-textarea,
   #conversejs .chatroom form.sendXMPPMessage .chat-textarea {
     border-bottom-right-radius: 0; }

css/inverse.css

@@ -1338,7 +1338,7 @@
   #converse-embedded-chat .button-primary,
   #conversejs .button-primary {
     color: white;
-    background-color: #3AA569; }
+    background-color: #E7A151; }
   #converse-embedded-chat .button-secondary,
   #conversejs .button-secondary {
     color: white;
@@ -1346,7 +1346,7 @@
   #converse-embedded-chat .button-cancel,
   #conversejs .button-cancel {
     color: white;
-    background-color: #D24E2B; }
+    background-color: #818479; }
   #converse-embedded-chat form.pure-form.converse-form,
   #conversejs form.pure-form.converse-form {
     background: white;
@@ -1480,7 +1480,7 @@ body {
 #conversejs .chat-head {
   color: #ffffff;
   font-size: 100%;
-  height: 55px;
+  height: 62px;
   margin: 0;
   padding: 0.5em;
   position: relative; }
@@ -1491,7 +1491,7 @@ body {
     float: left; }
   #converse-embedded-chat .chat-head.chat-head-chatbox,
   #conversejs .chat-head.chat-head-chatbox {
-    background-color: #E7A151; }
+    background-color: #3AA569; }
   #converse-embedded-chat .chat-head .user-custom-message,
   #conversejs .chat-head .user-custom-message {
     color: white;
@@ -1521,7 +1521,7 @@ body {
   #converse-embedded-chat .chatbox-btn.button-on,
   #conversejs .chatbox-btn.button-on {
     background-color: white;
-    color: #E7A151; }
+    color: #3AA569; }
 #converse-embedded-chat .chatbox,
 #conversejs .chatbox {
   display: block;
@@ -1579,8 +1579,8 @@ body {
     border-bottom-right-radius: 7px;
     border-top: 0;
     height: 289px;
-    height: -webkit-calc(100% - 55px);
-    height: calc(100% - 55px); }
+    height: -webkit-calc(100% - 62px);
+    height: calc(100% - 62px); }
     @media screen and (max-height: 450px) {
       #converse-embedded-chat .chatbox .chat-body,
       #conversejs .chatbox .chat-body {
@@ -1599,7 +1599,8 @@ body {
       padding: 5px; }
     #converse-embedded-chat .chatbox .chat-body .chat-info,
     #conversejs .chatbox .chat-body .chat-info {
-      color: #D24E2B;
+      color: #3AA569;
+      font-size: 16px;
       margin: 0.3em; }
       #converse-embedded-chat .chatbox .chat-body .chat-info.chat-event,
       #conversejs .chatbox .chat-body .chat-info.chat-event {
@@ -1615,35 +1616,30 @@ body {
         margin-top: 1em; }
     #converse-embedded-chat .chatbox .chat-body .chat-image,
     #conversejs .chatbox .chat-body .chat-image {
-      max-width: 100%;
-      max-height: 100%; }
+      max-height: 24em; }
     #converse-embedded-chat .chatbox .chat-body .chat-action,
     #conversejs .chatbox .chat-body .chat-action {
       font-style: italic; }
     #converse-embedded-chat .chatbox .chat-body .chat-message,
     #conversejs .chatbox .chat-body .chat-message {
       margin: 0.3em; }
-      #converse-embedded-chat .chatbox .chat-body .chat-message span,
-      #conversejs .chatbox .chat-body .chat-message span {
-        display: inline-block; }
-        #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-author,
-        #conversejs .chatbox .chat-body .chat-message span.chat-msg-author {
-          max-width: 100%;
-          font-weight: bold;
-          white-space: nowrap;
-          float: left;
-          text-overflow: ellipsis;
-          overflow: hidden; }
-        #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-them,
-        #conversejs .chatbox .chat-body .chat-message span.chat-msg-them {
-          color: #3AA569; }
-        #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-me,
-        #conversejs .chatbox .chat-body .chat-message span.chat-msg-me {
-          color: #578EA9; }
-        #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-content,
-        #conversejs .chatbox .chat-body .chat-message span.chat-msg-content {
-          max-width: 100%;
-          word-wrap: break-word; }
+      #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-author,
+      #conversejs .chatbox .chat-body .chat-message span.chat-msg-author {
+        font-weight: bold;
+        white-space: nowrap;
+        float: left;
+        text-overflow: ellipsis;
+        overflow: hidden; }
+      #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-them,
+      #conversejs .chatbox .chat-body .chat-message span.chat-msg-them {
+        color: #E77051; }
+      #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-me,
+      #conversejs .chatbox .chat-body .chat-message span.chat-msg-me {
+        color: #578EA9; }
+      #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-content,
+      #conversejs .chatbox .chat-body .chat-message span.chat-msg-content {
+        max-width: 100%;
+        word-wrap: break-word; }
     #converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-them,
     #conversejs .chatbox .chat-body .delayed .chat-msg-them {
       color: #FB5D50; }
@@ -1655,12 +1651,13 @@ body {
     position: absolute;
     width: 100%;
     cursor: pointer;
-    background-color: #E7A151;
+    background-color: #3AA569;
     color: #FCFDFD;
-    padding: 0.3em;
+    padding: 0.5em;
     font-size: 0.9em;
     text-align: center;
-    z-index: 20; }
+    z-index: 20;
+    white-space: nowrap; }
   #converse-embedded-chat .chatbox .chat-content,
   #conversejs .chatbox .chat-content {
     position: relative;
@@ -1672,10 +1669,10 @@ body {
     background-color: #ffffff;
     line-height: 1.3em;
     height: 206px;
-    height: calc(100% - 96px); }
+    height: calc(100% - 100px); }
   #converse-embedded-chat .chatbox .chat-content-sendbutton,
   #conversejs .chatbox .chat-content-sendbutton {
-    height: calc(100% - 128px); }
+    height: calc(100% - 132px); }
   #converse-embedded-chat .chatbox .dropdown,
   #conversejs .chatbox .dropdown {
     /* status dropdown styles */
@@ -1692,13 +1689,12 @@ body {
     border-bottom-left-radius: 7px;
     border-bottom-right-radius: 7px;
     background-clip: padding-box;
-    background: white;
     border-top: 1px solid #BBB;
     border: 0;
     margin: 0;
     padding: 0;
     position: relative;
-    height: 95px;
+    height: 99px;
     min-width: 100%; }
     @media screen and (max-height: 450px) {
       #converse-embedded-chat .chatbox form.sendXMPPMessage,
@@ -1723,7 +1719,7 @@ body {
       left: 3px;
       width: -webkit-calc(100% - 6px);
       width: calc(100% - 6px);
-      background-color: #E7A151;
+      background-color: #3AA569;
       color: white;
       font-size: 80%;
       height: 27px;
@@ -1731,28 +1727,34 @@ body {
     #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar,
     #conversejs .chatbox form.sendXMPPMessage .chat-toolbar {
       box-sizing: border-box;
-      font-size: 16px;
       margin: 0;
       padding: 5px;
-      height: 25px;
+      height: 29px;
       display: block;
-      background-color: #FFF5EE; }
+      background-color: #3AA569; }
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar a,
       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar a {
         font-size: 16px;
-        color: #578EA9;
+        color: white;
         text-decoration: none;
         text-shadow: none; }
+      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toolbar-picker-panel a,
+      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toolbar-picker-panel a {
+        color: #578EA9; }
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text,
       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text {
         font-size: 12px;
-        padding-right: 3px;
-        text-shadow: 0 1px 0 white; }
+        padding-right: 3px; }
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted,
       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted {
-        color: #D24E2B; }
+        color: white; }
+        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-picker-panel a,
+        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-picker-panel a,
+        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-picker-panel a,
+        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-picker-panel a {
+          color: #578EA9; }
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified,
       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
@@ -1803,7 +1805,7 @@ body {
         margin-left: 0; }
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley,
       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley {
-        color: #578EA9;
+        color: white;
         padding-left: 5px; }
         #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul,
         #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul {
@@ -1864,8 +1866,8 @@ body {
   font-size: 18px;
   margin: 0 0.3em; }
 #conversejs .flyout {
-  border: 1em solid #E7A151;
-  border-top: 0.8em solid #E7A151;
+  border: 1.2em solid #3AA569;
+  border-top: 0.8em solid #3AA569;
   border-radius: 0;
   bottom: 0; }
 #conversejs .chat-head {
@@ -1874,7 +1876,7 @@ body {
   #conversejs .chat-head .user-custom-message {
     font-size: 66%;
     height: auto;
-    line-height: 16px; }
+    line-height: 22px; }
   #conversejs .chat-head.chat-head-chatbox .close-chatbox-button {
     display: none; }
   #conversejs .chat-head .avatar {
@@ -1886,15 +1888,19 @@ body {
   width: calc(100% - 250px);
   margin: 0; }
   #conversejs .chatbox .box-flyout {
-    background-color: #E7A151;
+    background-color: #3AA569;
     width: -webkit-calc(100% - 250px);
     width: calc(100% - 250px);
     box-shadow: none;
     min-width: auto; }
   #conversejs .chatbox .chat-body {
-    background-color: #E7A151;
+    background-color: #3AA569;
     border-top-left-radius: 7px;
     border-top-right-radius: 7px; }
+    #conversejs .chatbox .chat-body .chat-message {
+      font-size: 16px;
+      line-height: 22px;
+      margin: 0.8em 0; }
   #conversejs .chatbox .chat-content {
     padding: 0 1em 1em 1em;
     border-top-left-radius: 7px;
@@ -1922,7 +1928,7 @@ body {
     border-top-left-radius: 7px;
     border-top-right-radius: 7px;
     color: white;
-    height: 55px;
+    height: 62px;
     margin: 0;
     padding: 6px 6px 6px 0; }
     @media screen and (max-height: 450px) {
@@ -2062,11 +2068,12 @@ body {
           display: block;
           margin-left: 5px; }
         #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom p.room-info {
+          line-height: 22px;
           margin: 0;
-          padding: 0;
           display: block;
           white-space: normal; }
         #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom div.room-info {
+          padding: 0.3em 0;
           clear: left;
           width: 100%; }
   #conversejs #controlbox .dropdown {
@@ -2108,7 +2115,6 @@ body {
     text-align: center;
     display: inline;
     overflow: hidden;
-    font-size: 12px;
     list-style-type: none;
     /* single tab */ }
     #conversejs #controlbox #controlbox-tabs li {
@@ -2126,13 +2132,13 @@ body {
         color: #818479;
         display: block;
         font-size: 14px;
-        height: 54px;
-        line-height: 54px;
+        height: 61px;
+        line-height: 61px;
         margin: 0;
         text-align: center;
         text-decoration: none; }
         #conversejs #controlbox #controlbox-tabs li a.contacts-tab .msgs-indicator {
-          background-color: #E7A151; }
+          background-color: #3AA569; }
         #conversejs #controlbox #controlbox-tabs li a.rooms-tab .msgs-indicator {
           background-color: #E77051; }
         #conversejs #controlbox #controlbox-tabs li a .msgs-indicator {
@@ -2147,7 +2153,7 @@ body {
         #conversejs #controlbox #controlbox-tabs li a.current, #conversejs #controlbox #controlbox-tabs li a.current:hover {
           box-shadow: none;
           border-bottom: 0;
-          height: 55px;
+          height: 62px;
           cursor: default;
           color: #818479; }
   #conversejs #controlbox .fancy-dropdown {
@@ -2277,7 +2283,7 @@ body {
   #conversejs #controlbox .controlbox-head {
     height: 63px;
     padding: 6px 0 6px 0;
-    margin-top: 0.2em; }
+    margin-top: 0.5em; }
   #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
     margin: 30%;
     margin-top: 15%; }
@@ -2405,7 +2411,7 @@ body {
           #conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .contact-name {
             width: 70%; }
         #conversejs #converse-roster .roster-contacts dd .open-chat .msgs-indicator {
-          background-color: #E7A151;
+          background-color: #3AA569;
           opacity: 1;
           border-radius: 10%;
           padding: 0 0.2em;
@@ -2433,7 +2439,7 @@ body {
         #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .open-chat .req-contact-name {
           width: 100%; }
       #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .req-contact-name {
-        line-height: 16px;
+        line-height: 22px;
         width: 69%;
         padding: 0; }
       #conversejs #converse-roster .roster-contacts dd.current-xmpp-contact span {
@@ -2462,7 +2468,7 @@ body {
         #conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact:hover {
           color: #818479; }
   #conversejs #converse-roster span.pending-contact-name {
-    line-height: 16px;
+    line-height: 22px;
     width: 100%; }
 
 #conversejs #controlbox #chatrooms .bookmarks-list dl.rooms-list.bookmarks dd.available-chatroom a.open-room {
@@ -2526,16 +2532,19 @@ body {
       height: 289px;
       border-bottom-left-radius: 7px;
       border-bottom-right-radius: 7px;
-      height: -webkit-calc(100% - 55px);
-      height: calc(100% - 55px);
+      height: -webkit-calc(100% - 62px);
+      height: calc(100% - 62px);
       background-color: white;
       border-top: 0;
       width: 100%; }
+      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-info,
+      #conversejs .chatroom .box-flyout .chatroom-body .chat-info {
+        color: #E77051; }
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .mentioned,
       #conversejs .chatroom .box-flyout .chatroom-body .mentioned {
         font-weight: bold; }
-      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-msg-room,
-      #conversejs .chatroom .box-flyout .chatroom-body .chat-msg-room {
+      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them,
+      #conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them {
         color: #3AA569; }
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .disconnect-msg,
       #conversejs .chatroom .box-flyout .chatroom-body .disconnect-msg {
@@ -2640,19 +2649,18 @@ body {
                   background-color: orange; }
             #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.moderator,
             #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.moderator {
-              color: #D24E2B; }
+              color: #E77051; }
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container,
       #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container {
         background-color: white;
-        border-bottom-left-radius: 7px;
-        border-bottom-right-radius: 7px;
+        border-radius: 7px;
         border: 0;
         color: #818479;
         font-size: 16px;
         height: 289px;
         width: 100%;
-        height: -webkit-calc(100% - 55px);
-        height: calc(100% - 55px);
+        height: -webkit-calc(100% - 62px);
+        height: calc(100% - 62px);
         overflow-y: auto;
         position: absolute; }
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .validation-message,
@@ -2669,6 +2677,12 @@ body {
         #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],
         #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit] {
           margin: 0 0.5em; }
+        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary,
+        #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary {
+          background-color: #E77051; }
+  #converse-embedded-chat .chatroom form.sendXMPPMessage .chat-toolbar,
+  #conversejs .chatroom form.sendXMPPMessage .chat-toolbar {
+    background-color: #E77051; }
   #converse-embedded-chat .chatroom form.sendXMPPMessage .chat-textarea,
   #conversejs .chatroom form.sendXMPPMessage .chat-textarea {
     border-bottom-right-radius: 0; }
@@ -2682,7 +2696,7 @@ body {
     border: 1px solid #999; }
 
 #conversejs .chat-head-chatroom {
-  height: 55px;
+  height: 62px;
   font-size: 20px; }
   #conversejs .chat-head-chatroom .close-chatbox-button:before {
     content: "\e601"; }
@@ -2694,7 +2708,7 @@ body {
   width: calc(100% - 250px); }
   #conversejs .chatroom .box-flyout {
     background-color: #E77051;
-    border: 1em solid #E77051;
+    border: 1.2em solid #E77051;
     border-top: 0.8em solid #E77051;
     width: -webkit-calc(100% - 250px);
     width: calc(100% - 250px); }

inverse.html

@@ -13,11 +13,7 @@
 <body>
     <div class="content">
         <div class="inner-content">
-        <h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
-        <p class="no-chats">
-            You don't have any chats open.<br/></br/>
-            Start a new conversation by clicking on a contact or a room in the left navigation.
-        </p>
+            <h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
         </div>
     </div>
 <script>

sass/_chatbox.scss

@@ -131,7 +131,8 @@
                 padding: 5px;
             }
             .chat-info {
-                color: $warning-color;
+                color: $chat-head-color;
+                font-size: $font-size;
                 margin: 0.3em;
                 &.chat-event {
                     clear: left;
@@ -147,8 +148,7 @@
                 }
             }
             .chat-image {
-                max-width: 100%;
-                max-height: 100%;
+                max-height: 24em;
             }
             .chat-action {
                 font-style: italic;
@@ -156,9 +156,7 @@
             .chat-message {
                 margin: 0.3em;
                 span {
-                    display: inline-block;
                     &.chat-msg-author {
-                        max-width: 100%;
                         font-weight: bold;
                         white-space: nowrap;
                         float: left;
@@ -192,10 +190,11 @@
             cursor: pointer;
             background-color: $chat-head-color;
             color: $light-background-color;
-            padding: 0.3em;
+            padding: 0.5em;
             font-size: 0.9em;
             text-align: center;
             z-index: 20;
+            white-space: nowrap;
         }
         .chat-content {
             position: relative;
@@ -226,7 +225,6 @@
             -webkit-background-clip: padding-box;
             @include border-bottom-radius($chatbox-border-radius);
             background-clip: padding-box;
-            background: white;
             border-top: 1px solid #BBB;
             border: 0;
             margin: 0;
@@ -261,7 +259,6 @@
             }
             .chat-toolbar {
                 box-sizing: border-box;
-                font-size: $font-size;
                 margin: 0;
                 padding: 5px;
                 height: $toolbar-height;
@@ -269,18 +266,27 @@
                 background-color: $toolbar-color;
                 a {
                     font-size: $font-size;
-                    color: $link-color;
+                    color: $inverse-link-color;
                     text-decoration: none;
                     text-shadow: none;
                 }
+                .toolbar-picker-panel {
+                    a {
+                        color: $link-color;
+                    }
+                }
                 .chat-toolbar-text {
                     font-size: 12px;
                     padding-right: 3px;
-                    text-shadow: 0 1px 0 white
                 }
                 .unencrypted a,
                 .unencrypted {
-                    color: $warning-color;
+                    color: $inverse-link-color;
+                    .toolbar-picker-panel {
+                        a {
+                            color: $link-color;
+                        }
+                    }
                 }
                 .unverified a,
                 .unverified {
@@ -327,7 +333,7 @@
                     margin-left: 0;
                 }
                 .toggle-smiley {
-                    color: $link-color;
+                    color: $inverse-link-color;
                     padding-left: 5px;
                     ul {
                         left: 0;

sass/_chatrooms.scss

@@ -62,11 +62,16 @@
                 background-color: white;
                 border-top: 0;
                 width: 100%;
+                .chat-info {
+                    color: $chatroom-head-color;
+                }
                 .mentioned {
                     font-weight: bold;
                 }
-                .chat-msg-room {
-                    color: $message-them-color;
+                .chat-message {
+                    .chat-msg-them {
+                        color: $chatroom-message-them-color;
+                    }
                 }
                 .disconnect-msg {
                     padding: 2em 2em 0 2em;
@@ -175,8 +180,7 @@
                 }
                 .chatroom-form-container {
                     background-color: white;
-                    border-bottom-left-radius: $chatbox-border-radius;
-                    border-bottom-right-radius: $chatbox-border-radius;
+                    border-radius: $chatbox-border-radius;
                     border: 0;
                     color: $text-color;
                     font-size: $font-size;
@@ -200,11 +204,17 @@
                     input[type=submit] {
                         margin: 0 0.5em;
                     }
+                    .button-primary {
+                        background-color: $chatroom-head-color;
+                    }
                 }
             }
         }
 
         form.sendXMPPMessage {
+            .chat-toolbar {
+                background-color: $chatroom-head-color;
+            }
             .chat-textarea {
                 border-bottom-right-radius: 0;
             }

sass/_controlbox.scss

@@ -202,12 +202,13 @@
                             margin-left: 5px;
                         }
                         p.room-info {
+                            line-height: $line-height;
                             margin: 0;
-                            padding: 0;
                             display: block;
                             white-space: normal;
                         }
                         div.room-info {
+                            padding: 0.3em 0;
                             clear: left;
                             width: 100%;
                         }
@@ -271,7 +272,6 @@
             text-align: center;
             display: inline;
             overflow: hidden;
-            font-size: 12px;
             list-style-type: none;
 
             /* single tab */

sass/_core.scss

@@ -177,7 +177,7 @@
     }
     .button-cancel {
         color: white;
-        background-color: $warning-color;
+        background-color: $text-color;
     }
 
     form {

sass/converse/_variables.scss

@@ -47,12 +47,12 @@ $save-button-color: $green !default;
 $chat-textarea-height: 70px !default;
 $send-button-height: 27px !default;
 $send-button-margin: 3px !default;
-$message-them-color: $green !default;
+$message-them-color: $red !default;
 
 $roster-height: 194px !default;
 $roster-item-height: 60px !default;
 
-$chat-head-color: $orange !default;
+$chat-head-color: $green !default;
 $chat-head-text-color: white !default;
 $chat-head-inverse-text-color: white !default;
 $chat-head-height: 55px !default;
@@ -72,9 +72,6 @@ $warning-color: $dark-red !default;
 $light-background-border-color: #B1BFC4 !default;
 $light-background-color: #FCFDFD !default;
 
-$toolbar-height: 25px !default;
-$toolbar-color: #FFF5EE !default;
-
 $moderator-color: $dark-red !default;
 $online-color: $green !default;
 $error-color: $darkest-red !default;
@@ -93,6 +90,9 @@ $font-size: 14px !default;
 $font-size-large: 16px !default;
 $legend-font-size: 16px !default;
 
+$toolbar-height: 25px !default;
+$toolbar-color: $chat-head-color !default;
+
 $line-height:  16px !default;
 
 $controlbox-width: 200px !default;
@@ -111,6 +111,7 @@ $chatroom-width: 300px !default;
 $chatroom-head-color: $red !default;
 $chatroom-color-light: $light-red !default;
 $chatroom-color-dark: $darkest-red !default;
+$chatroom-message-them-color: $green !default;
 
 $headline-head-color: $green !default;
 

sass/inverse/_chatbox.scss

@@ -4,7 +4,7 @@
         margin: 0 0.3em;
     }
     .flyout {
-        border: 1em solid $chat-head-color;
+        border: $flyout-padding solid $chat-head-color;
         border-top: 0.8em solid $chat-head-color;
         border-radius: 0;
         bottom: 0;
@@ -41,6 +41,12 @@
             background-color: $chat-head-color;
             border-top-left-radius: $chatbox-border-radius;
             border-top-right-radius: $chatbox-border-radius;
+
+            .chat-message {
+                font-size: $font-size;
+                line-height: $line-height;
+                margin: 0.8em 0;
+            }
         }
         .chat-content {
             padding: 0 $padding $padding $padding;

sass/inverse/_chatrooms.scss

@@ -15,7 +15,7 @@
         @include calc(width, '100% - #{$controlbox-width}');
         .box-flyout {
             background-color: $chatroom-head-color;
-            border: 1em solid $chatroom-head-color;
+            border: $flyout-padding solid $chatroom-head-color;
             border-top: 0.8em solid $chatroom-head-color;
             @include calc(width, '100% - #{$controlbox-width}');
             .chatroom-body {

sass/inverse/_controlbox.scss

@@ -33,7 +33,7 @@
         .controlbox-head {
             height: $controlbox-head-height;
             padding: 6px 0 6px 0;
-            margin-top: 0.2em;
+            margin-top: 0.5em;
         }
         #converse-register, #converse-login {
             margin: 30%;

sass/inverse/_variables.scss

@@ -44,19 +44,21 @@ $light-text-color: #A8ABA1 !default;
 $border-color: #CCC !default;
 $icon-color: $blue !default;
 $save-button-color: $green !default;
-$chat-textarea-height: 70px !default;
 $send-button-height: 27px !default;
 $send-button-margin: 3px !default;
-$message-them-color: $green !default;
+$message-them-color: $red !default;
 
 $roster-height: 194px !default;
 $roster-item-height: 30px !default;
 
-$chat-head-color: $orange !default;
+$flyout-padding: 1.2em;
+
+$chat-head-color: $green !default;
 $chat-head-text-color: white !default;
 $chat-head-inverse-text-color: white !default;
-$chat-head-height: 55px !default;
-$chatroom-head-height: 55px !default;
+$chat-head-height: 62px !default;
+
+$chat-textarea-height: 70px !default;
 
 $input-focus-color: #1A9707 !default;
 $highlight-color: #DCF9F6 !default;
@@ -64,19 +66,16 @@ $highlight-color: #DCF9F6 !default;
 $controlbox-dropdown-height: 30px !default;
 $controlbox-head-color: $light-blue !default;
 $controlbox-head-height: 63px !default;
-$controlbox-pane-padding: 1.2em !default;
+$controlbox-pane-padding: $flyout-padding !default;
 
-$primary-color: $green !default;
+$primary-color: $orange !default;
 $secondary-color: $blue !default;
 $warning-color: $dark-red !default;
 
 $light-background-border-color: #B1BFC4 !default;
 $light-background-color: #FCFDFD !default;
 
-$toolbar-height: 25px !default;
-$toolbar-color: #FFF5EE !default;
-
-$moderator-color: $dark-red !default;
+$moderator-color: $red !default;
 $online-color: $green !default;
 $error-color: $darkest-red !default;
 
@@ -95,7 +94,10 @@ $font-size-large: 18px !default;
 $font-size-huge: 26px !default;
 $legend-font-size: 18px !default;
 
-$line-height:  16px !default;
+$toolbar-height: 29px !default;
+$toolbar-color: $chat-head-color !default;
+
+$line-height:  22px !default;
 
 $controlbox-width: 250px !default;
 $chat-width: 100% !default;
@@ -111,10 +113,12 @@ $small-mobile-chat-height: 300px !default;
 
 $font-path: "../fonticons/fonts/" !default;
 
+$chatroom-head-height: 62px !default;
 $chatroom-width: 300px !default;
 $chatroom-head-color: $red !default;
 $chatroom-color-light: $light-red !default;
 $chatroom-color-dark: $darkest-red !default;
+$chatroom-message-them-color: $green !default;
 
 $headline-head-color: $green !default;
 

src/templates/chatroom_toolbar.html

@@ -1,6 +1,6 @@
 {[ if (show_emoticons)  { ]}
     <li class="toggle-smiley icon-happy" title="{{{label_insert_smiley}}}">
-        <ul>
+        <ul class="toolbar-picker-panel">
             <li><a class="icon-smiley" href="#" data-emoticon=":)"></a></li>
             <li><a class="icon-wink" href="#" data-emoticon=";)"></a></li>
             <li><a class="icon-grin" href="#" data-emoticon=":D"></a></li>

src/templates/toolbar.html

@@ -1,6 +1,6 @@
 {[ if (show_emoticons)  { ]}
     <li class="toggle-smiley icon-happy" title="{{{label_insert_smiley}}}">
-        <ul>
+        <ul class="toolbar-picker-panel">
             <li><a class="icon-smiley" href="#" data-emoticon=":)"></a></li>
             <li><a class="icon-wink" href="#" data-emoticon=";)"></a></li>
             <li><a class="icon-grin" href="#" data-emoticon=":D"></a></li>

src/templates/toolbar_otr.html

@@ -13,7 +13,7 @@
         {[ if (otr_status == FINISHED) { ]}
             <span class="icon-unlocked"></span>
         {[ } ]}
-        <ul>
+        <ul class="toolbar-picker-panel">
             {[ if (otr_status == UNENCRYPTED) { ]}
                <li><a class="start-otr" href="#">{{{label_start_encrypted_conversation}}}</a></li>
             {[ } ]}