Start moving css from mockup.css into the core sass files

css/converse.css

@@ -1097,6 +1097,19 @@
     color: #578EA9;
     text-shadow: none; }
 
+.converse-bg {
+  position: relative;
+  height: 100vh;
+  text-align: center;
+  color: #fff; }
+
+body .brand-heading {
+  margin: auto;
+  font-size: 6em;
+  font-weight: bold; }
+  body .brand-heading .icon-conversejs {
+    font-size: 0.88em; }
+
 #converse-embedded-chat,
 #conversejs {
   bottom: 0;
@@ -1139,15 +1152,60 @@
   #converse-embedded-chat ::placeholder,
   #conversejs ::placeholder {
     color: #A8ABA1; }
-  #converse-embedded-chat .circle,
-  #conversejs .circle {
-    border-radius: 50%; }
   #converse-embedded-chat ::selection,
   #conversejs ::selection {
     background-color: #DCF9F6; }
   #converse-embedded-chat ::-moz-selection,
   #conversejs ::-moz-selection {
     background-color: #DCF9F6; }
+  #converse-embedded-chat canvas,
+  #conversejs canvas {
+    background: #000;
+    border-radius: 4px;
+    margin: 2px 0; }
+  #converse-embedded-chat .circle,
+  #conversejs .circle {
+    border-radius: 50%; }
+  #converse-embedded-chat .sidebar,
+  #conversejs .sidebar {
+    display: none;
+    position: absolute;
+    width: 50px;
+    height: 100vh;
+    padding: 10px 0;
+    background-color: #578EA9;
+    text-align: center; }
+    #converse-embedded-chat .sidebar .chatbox-btn,
+    #conversejs .sidebar .chatbox-btn {
+      float: none;
+      margin: 0;
+      font-size: 1.35em; }
+      #converse-embedded-chat .sidebar .chatbox-btn.fa-vcard,
+      #conversejs .sidebar .chatbox-btn.fa-vcard {
+        margin-top: 1em; }
+    #converse-embedded-chat .sidebar .bottom,
+    #conversejs .sidebar .bottom {
+      position: absolute;
+      bottom: 1em; }
+  #converse-embedded-chat .badge,
+  #conversejs .badge {
+    padding: 0.25em 0.4em;
+    line-height: 1; }
+  #converse-embedded-chat .fa,
+  #conversejs .fa {
+    font: normal normal normal 14px/1 FontAwesome;
+    display: inline-block;
+    font-size: inherit;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale; }
+  #converse-embedded-chat .list-container,
+  #conversejs .list-container {
+    text-align: left;
+    margin: 0.3em 0; }
+  #converse-embedded-chat .btn.btn-primary,
+  #conversejs .btn.btn-primary {
+    color: #fff; }
   #converse-embedded-chat .no-text-select,
   #conversejs .no-text-select {
     -webkit-touch-callout: none;
@@ -1396,7 +1454,6 @@
       min-width: 50%; }
     #converse-embedded-chat form.pure-form.converse-form label,
     #conversejs form.pure-form.converse-form label {
-      margin: 1em 0;
       font-size: 16px; }
     #converse-embedded-chat form.pure-form.converse-form input[type=text],
     #converse-embedded-chat form.pure-form.converse-form input[type=password],
@@ -1622,16 +1679,20 @@
       font-style: italic; }
     #converse-embedded-chat .chatbox .chat-body .chat-message,
     #conversejs .chatbox .chat-body .chat-message {
-      overflow: auto; }
+      overflow: auto;
+      margin: 0.3em; }
       #converse-embedded-chat .chatbox .chat-body .chat-message.onload,
       #conversejs .chatbox .chat-body .chat-message.onload {
         animation: colorchange-chatmessage 1s;
         -webkit-animation: colorchange-chatmessage 1s; }
+      #converse-embedded-chat .chatbox .chat-body .chat-message canvas,
+      #conversejs .chatbox .chat-body .chat-message canvas {
+        vertical-align: middle;
+        background: #818479; }
       #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author,
       #conversejs .chatbox .chat-body .chat-message .chat-msg-author {
         font-weight: bold;
         white-space: nowrap;
-        float: left;
         text-overflow: ellipsis;
         overflow: hidden; }
       #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-them,
@@ -1713,12 +1774,14 @@
         width: 100%; } }
     #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea,
     #conversejs .chatbox form.sendXMPPMessage .chat-textarea {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
       border-bottom-left-radius: 4px;
       border-bottom-right-radius: 4px;
-      border: 0;
       height: 70px;
       padding: 0.5em;
       width: 100%;
+      border: none;
       resize: none; }
     #converse-embedded-chat .chatbox form.sendXMPPMessage .send-button,
     #conversejs .chatbox form.sendXMPPMessage .send-button {
@@ -1930,14 +1993,14 @@
 
 #conversejs #controlbox {
   margin-right: 1em; }
-  #conversejs #controlbox .pure-form.converse-form {
-    padding: 0; }
   @media screen and (max-width: 480px) {
     #conversejs #controlbox {
       margin: 0; } }
   @media screen and (max-height: 450px) {
     #conversejs #controlbox {
       margin: 0; } }
+  #conversejs #controlbox .pure-form.converse-form {
+    padding: 0; }
   #conversejs #controlbox .controlbox-head {
     background-color: #578EA9;
     border-top-left-radius: 4px;
@@ -2035,10 +2098,11 @@
       #conversejs #controlbox .conn-feedback p.feedback-subject.error {
         font-weight: bold; }
   #conversejs #controlbox .brand-heading-container .brand-heading {
-    text-align: left;
-    font-size: 150%; }
+    text-align: center; }
   #conversejs #controlbox .brand-heading-container .brand-name {
     font-size: 120%; }
+  #conversejs #controlbox #login-dialog .brand-heading {
+    color: #578EA9; }
   #conversejs #controlbox .toggle-register-login {
     font-weight: bold; }
   #conversejs #controlbox .oauth-login {
@@ -2046,6 +2110,8 @@
     color: #777; }
     #conversejs #controlbox .oauth-login .icon-social:before {
       font-size: 16px; }
+  #conversejs #controlbox #converse-register fieldset.buttons, #conversejs #controlbox #converse-login fieldset.buttons {
+    text-align: center; }
   #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
     height: auto;
     white-space: normal; }
@@ -2058,28 +2124,41 @@
     display: block;
     font-weight: normal;
     margin: 1em 0; }
-  #conversejs #controlbox #users .add-converse-contact {
-    margin: 0 0 0.75em 0; }
-  #conversejs #controlbox #chatrooms form.add-chatroom {
-    margin: 0;
-    padding: 0; }
-    #conversejs #controlbox #chatrooms form.add-chatroom input[type=button],
-    #conversejs #controlbox #chatrooms form.add-chatroom input[type=submit],
-    #conversejs #controlbox #chatrooms form.add-chatroom input[type=text] {
-      width: 100%; }
-  #conversejs #controlbox #chatrooms .rooms-list-container {
-    text-align: left;
-    margin: 0; }
+  #conversejs #controlbox #users {
+    overflow-y: hidden;
+    position: relative; }
+    #conversejs #controlbox #users .add-converse-contact {
+      margin: 0 0 0.75em 0; }
+    #conversejs #controlbox #users .chatbox-btn {
+      margin: 0; }
+  #conversejs #controlbox #chatrooms, #conversejs #controlbox #contacts {
+    margin-top: 0.75em; }
+  #conversejs #controlbox #users .userinfo {
+    padding-bottom: 1em;
+    border-bottom: 1px solid #818479; }
+    #conversejs #controlbox #users .userinfo .username {
+      margin-left: 0.5em; }
+    #conversejs #controlbox #users .userinfo .d-flex {
+      margin-bottom: 0.2em; }
+  #conversejs #controlbox #chatrooms {
+    border-bottom: 1px solid #818479; }
+    #conversejs #controlbox #chatrooms form.add-chatroom {
+      margin: 0;
+      padding: 0; }
+      #conversejs #controlbox #chatrooms form.add-chatroom input[type=button],
+      #conversejs #controlbox #chatrooms form.add-chatroom input[type=submit],
+      #conversejs #controlbox #chatrooms form.add-chatroom input[type=text] {
+        width: 100%; }
     #conversejs #controlbox #chatrooms .rooms-list-container .rooms-toggle {
       display: block;
       color: #777;
       margin-top: 1em; }
       #conversejs #controlbox #chatrooms .rooms-list-container .rooms-toggle:hover {
         color: #585B51; }
-    #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list {
+    #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list {
       margin: 0.5em 0;
       text-align: left; }
-      #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dt {
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list dt {
         border: none;
         color: #777;
         font-weight: normal;
@@ -2087,72 +2166,72 @@
         padding-bottom: 0.5em;
         text-shadow: 0 1px 0 #FAFAFA;
         word-wrap: break-word; }
-      #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom,
-      #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom {
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom,
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom {
         border: none;
         clear: both;
         color: #777;
         display: block;
         overflow: hidden;
-        padding: 0.3em 0;
+        padding: 0.2em 0;
         text-shadow: 0 1px 0 #FAFAFA;
         word-wrap: break-word; }
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom a:hover,
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom a:hover {
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a:hover,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a:hover {
           color: #206485; }
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom.unread-msgs .available-room,
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom.unread-msgs .open-room,
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom.unread-msgs .available-room,
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom.unread-msgs .open-room {
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom.unread-msgs .available-room,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom.unread-msgs .open-room,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom.unread-msgs .available-room,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom.unread-msgs .open-room {
           max-width: 55%;
           width: auto;
           font-weight: bold; }
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom a.room-info:before,
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom a.room-info:before {
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.room-info:before,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.room-info:before {
           font-size: 15px; }
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom a.open-room,
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom a.open-room {
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.open-room,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.open-room {
           width: 68%;
           float: left;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
           padding-right: 0.5em; }
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom a.available-room,
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom a.available-room {
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.available-room,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.available-room {
           width: 85%; }
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .add-bookmark,
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .remove-bookmark,
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .add-bookmark,
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .remove-bookmark {
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark {
           color: #A8ABA1; }
-          #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .add-bookmark.button-on,
-          #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .remove-bookmark.button-on,
-          #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .add-bookmark.button-on,
-          #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .remove-bookmark.button-on {
+          #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark.button-on,
+          #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark.button-on,
+          #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark.button-on,
+          #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark.button-on {
             color: #578EA9; }
-            #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .add-bookmark.button-on:hover,
-            #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .remove-bookmark.button-on:hover,
-            #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .add-bookmark.button-on:hover,
-            #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .remove-bookmark.button-on:hover {
+            #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark.button-on:hover,
+            #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark.button-on:hover,
+            #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark.button-on:hover,
+            #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark.button-on:hover {
               color: #206485; }
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .room-info,
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .room-info {
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .room-info,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .room-info {
           font-size: 12px;
           font-style: normal;
           font-weight: normal; }
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom li.room-info,
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom li.room-info {
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom li.room-info,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom li.room-info {
           display: block;
           margin-left: 5px; }
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom p.room-info,
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom p.room-info {
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom p.room-info,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom p.room-info {
           line-height: 16px;
           margin: 0;
           display: block;
           white-space: normal; }
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom div.room-info,
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom div.room-info {
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom div.room-info,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom div.room-info {
           padding: 0.3em 0;
           clear: left;
           width: 100%; }
@@ -2290,10 +2369,12 @@
     font-size: 14px;
     position: absolute;
     left: 0;
-    text-align: center;
+    text-align: left;
     width: 100%;
+    height: 100%;
     overflow-y: auto;
-    overflow-x: hidden; }
+    overflow-x: hidden;
+    border-radius: 4px; }
     #conversejs #controlbox .controlbox-pane .switch-form {
       padding-bottom: 2em; }
       #conversejs #controlbox .controlbox-pane .switch-form p {
@@ -2301,15 +2382,12 @@
     #conversejs #controlbox .controlbox-pane label {
       font-size: 14px;
       font-weight: bold;
-      height: auto;
-      margin: 4px; }
+      height: auto; }
     #conversejs #controlbox .controlbox-pane dd {
       margin-left: 0;
       margin-bottom: 0; }
       #conversejs #controlbox .controlbox-pane dd.odd {
         background-color: #DCEAC5; }
-  #conversejs #controlbox #users {
-    overflow-y: hidden; }
   #conversejs #controlbox .add-xmpp-contact {
     padding: 1em 0.5em; }
     #conversejs #controlbox .add-xmpp-contact input {
@@ -2346,6 +2424,14 @@
   padding: 10px 8px 0 8px; }
   #conversejs .toggle-controlbox span {
     color: white; }
+#conversejs .xmpp-status .online, #conversejs .xmpp-status-menu .online {
+  color: #3AA569; }
+#conversejs .xmpp-status .dnd, #conversejs .xmpp-status-menu .dnd {
+  color: #E77051; }
+#conversejs .xmpp-status .away, #conversejs .xmpp-status-menu .away {
+  color: #578EA9; }
+#conversejs .xmpp-status .logout, #conversejs .xmpp-status .offline, #conversejs .xmpp-status-menu .logout, #conversejs .xmpp-status-menu .offline {
+  color: #818479; }
 
 #conversejs #controlbox #converse-register .button-cancel {
   font-size: 90%; }
@@ -2356,7 +2442,8 @@
   height: -webkit-calc(100% - 55px);
   height: calc(100% - 55px); }
 #conversejs #controlbox .brand-heading-container .brand-heading {
-  margin-left: 1em; }
+  font-size: 2.2em;
+  margin: 1em 0; }
 
 #conversejs #controlbox .available-chatroom.unread-msgs .msgs-indicator {
   border-radius: 10%;
@@ -2366,34 +2453,38 @@
   text-align: left;
   width: 100%;
   position: relative;
-  margin: 1em 0 0 0;
+  margin: 0;
   height: 194px;
-  height: calc(100% - 50px - 20px);
-  overflow: hidden;
-  padding: 0;
-  padding-bottom: 3em;
+  height: calc(~"100% - 50px - 20px");
+  border-bottom: 1px solid #818479;
+  padding: 0 0 2em 0;
+  overflow: scroll;
+  height: calc(100% - 70px);
   /* Custom addition for CSP */ }
   #conversejs #converse-roster.no-contact-requests {
-    height: calc(100% - 25px - 20px); }
+    height: calc(~"100% - 50px - 20px"); }
   #conversejs #converse-roster #online-count {
     display: none; }
   #conversejs #converse-roster .search-xmpp ul li.chat-info {
     padding-left: 10px; }
   #conversejs #converse-roster .roster-filter-form {
-    margin: 0 0 0.5em 0;
+    margin: 0.2em 0 0;
     width: 100%;
-    /* (jQ addClass:) if input has value: */
-    /* (jQ addClass:) if mouse is over the 'x' input area*/ }
+    /* (dynamically added) if input has value: */
+    /* (dynamically added) if mouse is over the 'x' input area*/ }
+    #conversejs #converse-roster .roster-filter-form span {
+      margin: 0;
+      padding: 0.2em;
+      color: #888;
+      cursor: pointer; }
     #conversejs #converse-roster .roster-filter-form .roster-filter {
       float: left;
       background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg==) no-repeat right -20px center;
       border: 1px solid #999;
       font-size: 14px;
       height: 25px;
-      margin: 0;
-      padding: 0;
-      padding-left: 0.4em;
-      width: 53%; }
+      margin: 0.2em 0.2em 0.2em 0;
+      width: 60%; }
     #conversejs #converse-roster .roster-filter-form .roster-filter.x {
       background-position: right 3px center; }
     #conversejs #converse-roster .roster-filter-form .roster-filter.onX {
@@ -2423,7 +2514,7 @@
       border: 1px solid; }
   #conversejs #converse-roster .roster-contacts {
     padding: 0;
-    margin: 0;
+    margin: 0.2em 0;
     height: 100%;
     overflow-x: hidden;
     overflow-y: auto; }
@@ -2431,12 +2522,12 @@
       border: none;
       color: #777;
       font-weight: normal;
-      text-shadow: 0 1px 0 #FAFAFA; }
+      text-shadow: 0 1px 0 #FAFAFA;
+      margin: 1em 0 0 0; }
       #conversejs #converse-roster .roster-contacts .roster-group .group-toggle {
         color: #777;
         display: block;
-        width: 100%;
-        margin: 0.5em 0; }
+        width: 100%; }
         #conversejs #converse-roster .roster-contacts .roster-group .group-toggle:hover {
           color: #585B51; }
       #conversejs #converse-roster .roster-contacts .roster-group li {
@@ -2448,10 +2539,22 @@
         overflow-y: hidden;
         text-shadow: 0 1px 0 #FAFAFA;
         line-height: 14px;
-        width: 100%;
         height: 30px;
-        margin: 0;
-        padding: 0.5em 0 0 0; }
+        width: 100%; }
+        #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a {
+          width: 2em; }
+        #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact :not(.open-chat) {
+          margin-top: 0.5em; }
+        #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .request-actions {
+          padding: 0 0 0 0.3em;
+          float: right; }
+        #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .open-chat {
+          max-width: 70%; }
+          #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .open-chat .req-contact-name {
+            width: 100%; }
+        #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .req-contact-name {
+          width: 69%;
+          padding: 0; }
         #conversejs #converse-roster .roster-contacts .roster-group li a:hover {
           color: #206485; }
         #conversejs #converse-roster .roster-contacts .roster-group li .open-chat {
@@ -2483,17 +2586,6 @@
             float: left;
             display: inline-block;
             height: 60px; }
-        #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .request-actions {
-          padding: 0 0 0 0.3em;
-          float: right; }
-        #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .open-chat {
-          max-width: 70%; }
-          #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .open-chat .req-contact-name {
-            width: 100%; }
-        #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .req-contact-name {
-          line-height: 16px;
-          width: 69%;
-          padding: 0; }
         #conversejs #converse-roster .roster-contacts .roster-group li.current-xmpp-contact span {
           font-size: 14px;
           float: left;
@@ -2516,7 +2608,8 @@
           float: right;
           margin: 0;
           padding: 0;
-          color: #A8ABA1; }
+          color: #A8ABA1;
+          width: 2em; }
           #conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:before {
             font-size: 14px; }
           #conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:hover {
@@ -2597,7 +2690,8 @@
       width: 100%; }
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-info,
       #conversejs .chatroom .box-flyout .chatroom-body .chat-info {
-        color: #E77051; }
+        color: white;
+        line-height: normal; }
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .mentioned,
       #conversejs .chatroom .box-flyout .chatroom-body .mentioned {
         font-weight: bold; }
@@ -2608,6 +2702,12 @@
       #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 .chat-message .chat-msg-them canvas,
+        #conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them canvas {
+          background: #E77051; }
+      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-me canvas,
+      #conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-me canvas {
+        background: #578EA9; }
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .disconnect-msg,
       #conversejs .chatroom .box-flyout .chatroom-body .disconnect-msg {
         padding: 2em 2em 0 2em; }
@@ -2615,7 +2715,7 @@
       #conversejs .chatroom .box-flyout .chatroom-body .chat-area {
         word-wrap: break-word;
         height: 100%;
-        width: 70%;
+        width: 100%;
         float: left;
         min-width: 200px; }
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
@@ -2624,7 +2724,7 @@
           max-width: 70%; }
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
         #conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
-          padding: 0 0.5em 0 0.5em; }
+          padding: 0.5em; }
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area.full,
         #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full {
           min-width: 100%; }
@@ -2651,6 +2751,13 @@
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
           bottom: 0.5em;
           width: 100%; }
+          #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature,
+          #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature {
+            float: left;
+            margin-right: 0.5em;
+            padding-right: 0;
+            font-size: 1em;
+            cursor: help; }
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul,
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul {
           padding: 0; }
@@ -2783,6 +2890,11 @@
   margin: 0 0.5em;
   padding: 0;
   width: 130px; }
+  #conversejs #minimized-chats .badge {
+    position: absolute;
+    right: 122px;
+    bottom: 8px;
+    border: 1px solid #818479; }
   #conversejs #minimized-chats #toggle-minimized-chats {
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;

css/inverse.css

@@ -1097,6 +1097,19 @@
     color: #578EA9;
     text-shadow: none; }
 
+.converse-bg {
+  position: relative;
+  height: 100vh;
+  text-align: center;
+  color: #fff; }
+
+body .brand-heading {
+  margin: auto;
+  font-size: 6em;
+  font-weight: bold; }
+  body .brand-heading .icon-conversejs {
+    font-size: 0.88em; }
+
 #converse-embedded-chat,
 #conversejs {
   bottom: 0;
@@ -1139,15 +1152,60 @@
   #converse-embedded-chat ::placeholder,
   #conversejs ::placeholder {
     color: #A8ABA1; }
-  #converse-embedded-chat .circle,
-  #conversejs .circle {
-    border-radius: 50%; }
   #converse-embedded-chat ::selection,
   #conversejs ::selection {
     background-color: #DCF9F6; }
   #converse-embedded-chat ::-moz-selection,
   #conversejs ::-moz-selection {
     background-color: #DCF9F6; }
+  #converse-embedded-chat canvas,
+  #conversejs canvas {
+    background: #000;
+    border-radius: 4px;
+    margin: 2px 0; }
+  #converse-embedded-chat .circle,
+  #conversejs .circle {
+    border-radius: 50%; }
+  #converse-embedded-chat .sidebar,
+  #conversejs .sidebar {
+    display: none;
+    position: absolute;
+    width: 50px;
+    height: 100vh;
+    padding: 10px 0;
+    background-color: #578EA9;
+    text-align: center; }
+    #converse-embedded-chat .sidebar .chatbox-btn,
+    #conversejs .sidebar .chatbox-btn {
+      float: none;
+      margin: 0;
+      font-size: 1.35em; }
+      #converse-embedded-chat .sidebar .chatbox-btn.fa-vcard,
+      #conversejs .sidebar .chatbox-btn.fa-vcard {
+        margin-top: 1em; }
+    #converse-embedded-chat .sidebar .bottom,
+    #conversejs .sidebar .bottom {
+      position: absolute;
+      bottom: 1em; }
+  #converse-embedded-chat .badge,
+  #conversejs .badge {
+    padding: 0.25em 0.4em;
+    line-height: 1; }
+  #converse-embedded-chat .fa,
+  #conversejs .fa {
+    font: normal normal normal 14px/1 FontAwesome;
+    display: inline-block;
+    font-size: inherit;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale; }
+  #converse-embedded-chat .list-container,
+  #conversejs .list-container {
+    text-align: left;
+    margin: 0.3em 0; }
+  #converse-embedded-chat .btn.btn-primary,
+  #conversejs .btn.btn-primary {
+    color: #fff; }
   #converse-embedded-chat .no-text-select,
   #conversejs .no-text-select {
     -webkit-touch-callout: none;
@@ -1396,7 +1454,6 @@
       min-width: 50%; }
     #converse-embedded-chat form.pure-form.converse-form label,
     #conversejs form.pure-form.converse-form label {
-      margin: 1em 0;
       font-size: 18px; }
     #converse-embedded-chat form.pure-form.converse-form input[type=text],
     #converse-embedded-chat form.pure-form.converse-form input[type=password],
@@ -1454,6 +1511,7 @@
 body {
   width: 100%;
   height: 100%;
+  height: 100vh;
   font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: #ffffff;
   background-color: #578EA9; }
@@ -1687,16 +1745,20 @@ body {
       font-style: italic; }
     #converse-embedded-chat .chatbox .chat-body .chat-message,
     #conversejs .chatbox .chat-body .chat-message {
-      overflow: auto; }
+      overflow: auto;
+      margin: 0.3em; }
       #converse-embedded-chat .chatbox .chat-body .chat-message.onload,
       #conversejs .chatbox .chat-body .chat-message.onload {
         animation: colorchange-chatmessage 1s;
         -webkit-animation: colorchange-chatmessage 1s; }
+      #converse-embedded-chat .chatbox .chat-body .chat-message canvas,
+      #conversejs .chatbox .chat-body .chat-message canvas {
+        vertical-align: middle;
+        background: #818479; }
       #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author,
       #conversejs .chatbox .chat-body .chat-message .chat-msg-author {
         font-weight: bold;
         white-space: nowrap;
-        float: left;
         text-overflow: ellipsis;
         overflow: hidden; }
       #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-them,
@@ -1778,12 +1840,14 @@ body {
         width: 100%; } }
     #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea,
     #conversejs .chatbox form.sendXMPPMessage .chat-textarea {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
-      border: 0;
       height: 70px;
       padding: 0.5em;
       width: 100%;
+      border: none;
       resize: none; }
     #converse-embedded-chat .chatbox form.sendXMPPMessage .send-button,
     #conversejs .chatbox form.sendXMPPMessage .send-button {
@@ -2016,14 +2080,14 @@ body {
 
 #conversejs #controlbox {
   margin-right: 1em; }
-  #conversejs #controlbox .pure-form.converse-form {
-    padding: 0; }
   @media screen and (max-width: 480px) {
     #conversejs #controlbox {
       margin: 0; } }
   @media screen and (max-height: 450px) {
     #conversejs #controlbox {
       margin: 0; } }
+  #conversejs #controlbox .pure-form.converse-form {
+    padding: 0; }
   #conversejs #controlbox .controlbox-head {
     background-color: #578EA9;
     border-top-left-radius: 0;
@@ -2121,10 +2185,11 @@ body {
       #conversejs #controlbox .conn-feedback p.feedback-subject.error {
         font-weight: bold; }
   #conversejs #controlbox .brand-heading-container .brand-heading {
-    text-align: left;
-    font-size: 150%; }
+    text-align: center; }
   #conversejs #controlbox .brand-heading-container .brand-name {
     font-size: 120%; }
+  #conversejs #controlbox #login-dialog .brand-heading {
+    color: #578EA9; }
   #conversejs #controlbox .toggle-register-login {
     font-weight: bold; }
   #conversejs #controlbox .oauth-login {
@@ -2132,6 +2197,8 @@ body {
     color: #777; }
     #conversejs #controlbox .oauth-login .icon-social:before {
       font-size: 18px; }
+  #conversejs #controlbox #converse-register fieldset.buttons, #conversejs #controlbox #converse-login fieldset.buttons {
+    text-align: center; }
   #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
     height: auto;
     white-space: normal; }
@@ -2144,28 +2211,41 @@ body {
     display: block;
     font-weight: normal;
     margin: 1em 0; }
-  #conversejs #controlbox #users .add-converse-contact {
-    margin: 0 0 0.75em 0; }
-  #conversejs #controlbox #chatrooms form.add-chatroom {
-    margin: 0;
-    padding: 0; }
-    #conversejs #controlbox #chatrooms form.add-chatroom input[type=button],
-    #conversejs #controlbox #chatrooms form.add-chatroom input[type=submit],
-    #conversejs #controlbox #chatrooms form.add-chatroom input[type=text] {
-      width: 100%; }
-  #conversejs #controlbox #chatrooms .rooms-list-container {
-    text-align: left;
-    margin: 0; }
+  #conversejs #controlbox #users {
+    overflow-y: hidden;
+    position: relative; }
+    #conversejs #controlbox #users .add-converse-contact {
+      margin: 0 0 0.75em 0; }
+    #conversejs #controlbox #users .chatbox-btn {
+      margin: 0; }
+  #conversejs #controlbox #chatrooms, #conversejs #controlbox #contacts {
+    margin-top: 0.75em; }
+  #conversejs #controlbox #users .userinfo {
+    padding-bottom: 1em;
+    border-bottom: 1px solid #818479; }
+    #conversejs #controlbox #users .userinfo .username {
+      margin-left: 0.5em; }
+    #conversejs #controlbox #users .userinfo .d-flex {
+      margin-bottom: 0.2em; }
+  #conversejs #controlbox #chatrooms {
+    border-bottom: 1px solid #818479; }
+    #conversejs #controlbox #chatrooms form.add-chatroom {
+      margin: 0;
+      padding: 0; }
+      #conversejs #controlbox #chatrooms form.add-chatroom input[type=button],
+      #conversejs #controlbox #chatrooms form.add-chatroom input[type=submit],
+      #conversejs #controlbox #chatrooms form.add-chatroom input[type=text] {
+        width: 100%; }
     #conversejs #controlbox #chatrooms .rooms-list-container .rooms-toggle {
       display: block;
       color: #777;
       margin-top: 1em; }
       #conversejs #controlbox #chatrooms .rooms-list-container .rooms-toggle:hover {
         color: #585B51; }
-    #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list {
+    #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list {
       margin: 0.5em 0;
       text-align: left; }
-      #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dt {
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list dt {
         border: none;
         color: #777;
         font-weight: normal;
@@ -2173,72 +2253,72 @@ body {
         padding-bottom: 0.5em;
         text-shadow: 0 1px 0 #FAFAFA;
         word-wrap: break-word; }
-      #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom,
-      #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom {
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom,
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom {
         border: none;
         clear: both;
         color: #777;
         display: block;
         overflow: hidden;
-        padding: 0.3em 0;
+        padding: 0.2em 0;
         text-shadow: 0 1px 0 #FAFAFA;
         word-wrap: break-word; }
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom a:hover,
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom a:hover {
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a:hover,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a:hover {
           color: #206485; }
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom.unread-msgs .available-room,
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom.unread-msgs .open-room,
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom.unread-msgs .available-room,
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom.unread-msgs .open-room {
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom.unread-msgs .available-room,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom.unread-msgs .open-room,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom.unread-msgs .available-room,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom.unread-msgs .open-room {
           max-width: 55%;
           width: auto;
           font-weight: bold; }
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom a.room-info:before,
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom a.room-info:before {
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.room-info:before,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.room-info:before {
           font-size: 15px; }
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom a.open-room,
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom a.open-room {
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.open-room,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.open-room {
           width: 68%;
           float: left;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
           padding-right: 0.5em; }
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom a.available-room,
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom a.available-room {
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.available-room,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.available-room {
           width: 85%; }
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .add-bookmark,
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .remove-bookmark,
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .add-bookmark,
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .remove-bookmark {
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark {
           color: #A8ABA1; }
-          #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .add-bookmark.button-on,
-          #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .remove-bookmark.button-on,
-          #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .add-bookmark.button-on,
-          #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .remove-bookmark.button-on {
+          #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark.button-on,
+          #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark.button-on,
+          #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark.button-on,
+          #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark.button-on {
             color: #578EA9; }
-            #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .add-bookmark.button-on:hover,
-            #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .remove-bookmark.button-on:hover,
-            #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .add-bookmark.button-on:hover,
-            #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .remove-bookmark.button-on:hover {
+            #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark.button-on:hover,
+            #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark.button-on:hover,
+            #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark.button-on:hover,
+            #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark.button-on:hover {
               color: #206485; }
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .room-info,
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .room-info {
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .room-info,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .room-info {
           font-size: 14px;
           font-style: normal;
           font-weight: normal; }
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom li.room-info,
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom li.room-info {
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom li.room-info,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom li.room-info {
           display: block;
           margin-left: 5px; }
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom p.room-info,
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom p.room-info {
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom p.room-info,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom p.room-info {
           line-height: 22px;
           margin: 0;
           display: block;
           white-space: normal; }
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom div.room-info,
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom div.room-info {
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom div.room-info,
+        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom div.room-info {
           padding: 0.3em 0;
           clear: left;
           width: 100%; }
@@ -2376,10 +2456,12 @@ body {
     font-size: 16px;
     position: absolute;
     left: 0;
-    text-align: center;
+    text-align: left;
     width: 100%;
+    height: 100%;
     overflow-y: auto;
-    overflow-x: hidden; }
+    overflow-x: hidden;
+    border-radius: 0; }
     #conversejs #controlbox .controlbox-pane .switch-form {
       padding-bottom: 2em; }
       #conversejs #controlbox .controlbox-pane .switch-form p {
@@ -2387,15 +2469,12 @@ body {
     #conversejs #controlbox .controlbox-pane label {
       font-size: 16px;
       font-weight: bold;
-      height: auto;
-      margin: 4px; }
+      height: auto; }
     #conversejs #controlbox .controlbox-pane dd {
       margin-left: 0;
       margin-bottom: 0; }
       #conversejs #controlbox .controlbox-pane dd.odd {
         background-color: #DCEAC5; }
-  #conversejs #controlbox #users {
-    overflow-y: hidden; }
   #conversejs #controlbox .add-xmpp-contact {
     padding: 1em 0.5em; }
     #conversejs #controlbox .add-xmpp-contact input {
@@ -2432,6 +2511,14 @@ body {
   padding: 10px 8px 0 8px; }
   #conversejs .toggle-controlbox span {
     color: white; }
+#conversejs .xmpp-status .online, #conversejs .xmpp-status-menu .online {
+  color: #3AA569; }
+#conversejs .xmpp-status .dnd, #conversejs .xmpp-status-menu .dnd {
+  color: #E77051; }
+#conversejs .xmpp-status .away, #conversejs .xmpp-status-menu .away {
+  color: #578EA9; }
+#conversejs .xmpp-status .logout, #conversejs .xmpp-status .offline, #conversejs .xmpp-status-menu .logout, #conversejs .xmpp-status-menu .offline {
+  color: #818479; }
 
 #conversejs #controlbox {
   min-width: 250px;
@@ -2443,7 +2530,7 @@ body {
   #conversejs #controlbox .brand-heading-container {
     text-align: center; }
     #conversejs #controlbox .brand-heading-container .brand-heading {
-      text-align: center;
+      font-size: 150%;
       font-size: 600%;
       padding: 0.7em 0 0 0;
       opacity: 0.8;
@@ -2494,7 +2581,7 @@ body {
     margin-top: 0.5em; }
   #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
     margin: 2em 30% 3em 30%; }
-    #conversejs #controlbox #converse-register .title, #conversejs #controlbox #converse-register .instructions, #conversejs #controlbox #converse-register label, #conversejs #controlbox #converse-login .title, #conversejs #controlbox #converse-login .instructions, #conversejs #controlbox #converse-login label {
+    #conversejs #controlbox #converse-register .title, #conversejs #controlbox #converse-register .instructions, #conversejs #controlbox #converse-login .title, #conversejs #controlbox #converse-login .instructions {
       margin: 1em 0; }
     #conversejs #controlbox #converse-register input[type=submit],
     #conversejs #controlbox #converse-register input[type=button], #conversejs #controlbox #converse-login input[type=submit],
@@ -2524,34 +2611,38 @@ body {
   text-align: left;
   width: 100%;
   position: relative;
-  margin: 1em 0 0 0;
+  margin: 0;
   height: 194px;
-  height: calc(100% - 60px - 20px);
-  overflow: hidden;
-  padding: 0;
-  padding-bottom: 3em;
+  height: calc(~"100% - 60px - 20px");
+  border-bottom: 1px solid #818479;
+  padding: 0 0 2em 0;
+  overflow: scroll;
+  height: calc(100% - 70px);
   /* Custom addition for CSP */ }
   #conversejs #converse-roster.no-contact-requests {
-    height: calc(100% - 30px - 20px); }
+    height: calc(~"100% - 60px - 20px"); }
   #conversejs #converse-roster #online-count {
     display: none; }
   #conversejs #converse-roster .search-xmpp ul li.chat-info {
     padding-left: 10px; }
   #conversejs #converse-roster .roster-filter-form {
-    margin: 0 0 0.5em 0;
+    margin: 0.2em 0 0;
     width: 100%;
-    /* (jQ addClass:) if input has value: */
-    /* (jQ addClass:) if mouse is over the 'x' input area*/ }
+    /* (dynamically added) if input has value: */
+    /* (dynamically added) if mouse is over the 'x' input area*/ }
+    #conversejs #converse-roster .roster-filter-form span {
+      margin: 0;
+      padding: 0.2em;
+      color: #888;
+      cursor: pointer; }
     #conversejs #converse-roster .roster-filter-form .roster-filter {
       float: left;
       background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg==) no-repeat right -20px center;
       border: 1px solid #999;
       font-size: 16px;
       height: 30px;
-      margin: 0;
-      padding: 0;
-      padding-left: 0.4em;
-      width: 53%; }
+      margin: 0.2em 0.2em 0.2em 0;
+      width: 60%; }
     #conversejs #converse-roster .roster-filter-form .roster-filter.x {
       background-position: right 3px center; }
     #conversejs #converse-roster .roster-filter-form .roster-filter.onX {
@@ -2581,7 +2672,7 @@ body {
       border: 1px solid; }
   #conversejs #converse-roster .roster-contacts {
     padding: 0;
-    margin: 0;
+    margin: 0.2em 0;
     height: 100%;
     overflow-x: hidden;
     overflow-y: auto; }
@@ -2589,12 +2680,12 @@ body {
       border: none;
       color: #777;
       font-weight: normal;
-      text-shadow: 0 1px 0 #FAFAFA; }
+      text-shadow: 0 1px 0 #FAFAFA;
+      margin: 1em 0 0 0; }
       #conversejs #converse-roster .roster-contacts .roster-group .group-toggle {
         color: #777;
         display: block;
-        width: 100%;
-        margin: 0.5em 0; }
+        width: 100%; }
         #conversejs #converse-roster .roster-contacts .roster-group .group-toggle:hover {
           color: #585B51; }
       #conversejs #converse-roster .roster-contacts .roster-group li {
@@ -2606,10 +2697,22 @@ body {
         overflow-y: hidden;
         text-shadow: 0 1px 0 #FAFAFA;
         line-height: 16px;
-        width: 100%;
         height: 30px;
-        margin: 0;
-        padding: 0.5em 0 0 0; }
+        width: 100%; }
+        #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a {
+          width: 2em; }
+        #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact :not(.open-chat) {
+          margin-top: 0.5em; }
+        #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .request-actions {
+          padding: 0 0 0 0.3em;
+          float: right; }
+        #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .open-chat {
+          max-width: 70%; }
+          #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .open-chat .req-contact-name {
+            width: 100%; }
+        #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .req-contact-name {
+          width: 69%;
+          padding: 0; }
         #conversejs #converse-roster .roster-contacts .roster-group li a:hover {
           color: #206485; }
         #conversejs #converse-roster .roster-contacts .roster-group li .open-chat {
@@ -2641,17 +2744,6 @@ body {
             float: left;
             display: inline-block;
             height: 30px; }
-        #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .request-actions {
-          padding: 0 0 0 0.3em;
-          float: right; }
-        #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .open-chat {
-          max-width: 70%; }
-          #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .open-chat .req-contact-name {
-            width: 100%; }
-        #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .req-contact-name {
-          line-height: 22px;
-          width: 69%;
-          padding: 0; }
         #conversejs #converse-roster .roster-contacts .roster-group li.current-xmpp-contact span {
           font-size: 16px;
           float: left;
@@ -2674,7 +2766,8 @@ body {
           float: right;
           margin: 0;
           padding: 0;
-          color: #A8ABA1; }
+          color: #A8ABA1;
+          width: 2em; }
           #conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:before {
             font-size: 16px; }
           #conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:hover {
@@ -2761,7 +2854,8 @@ body {
       width: 100%; }
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-info,
       #conversejs .chatroom .box-flyout .chatroom-body .chat-info {
-        color: #E77051; }
+        color: white;
+        line-height: normal; }
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .mentioned,
       #conversejs .chatroom .box-flyout .chatroom-body .mentioned {
         font-weight: bold; }
@@ -2772,6 +2866,12 @@ body {
       #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 .chat-message .chat-msg-them canvas,
+        #conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them canvas {
+          background: #E77051; }
+      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-me canvas,
+      #conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-me canvas {
+        background: #578EA9; }
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .disconnect-msg,
       #conversejs .chatroom .box-flyout .chatroom-body .disconnect-msg {
         padding: 2em 2em 0 2em; }
@@ -2779,7 +2879,7 @@ body {
       #conversejs .chatroom .box-flyout .chatroom-body .chat-area {
         word-wrap: break-word;
         height: 100%;
-        width: 70%;
+        width: 100%;
         float: left;
         min-width: 100%; }
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
@@ -2788,7 +2888,7 @@ body {
           max-width: 70%; }
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
         #conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
-          padding: 0 0.5em 0 0.5em; }
+          padding: 0.5em; }
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area.full,
         #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full {
           min-width: 100%; }
@@ -2815,6 +2915,13 @@ body {
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
           bottom: 0.5em;
           width: 100%; }
+          #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature,
+          #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature {
+            float: left;
+            margin-right: 0.5em;
+            padding-right: 0;
+            font-size: 1em;
+            cursor: help; }
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul,
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul {
           padding: 0; }

mockup.html

@@ -1,27 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-  "http://www.w3.org/TR/html4/loose.dtd">
-<html>
-<head>
-    <title>Converse.js Live Mockup</title>
-    <meta name="description" content="Converse.js: A chat client for your website" />
-    <link type="text/css" rel="stylesheet" media="screen" href="../css/theme.css" />
-    <link type="text/css" rel="stylesheet" media="screen" href="../css/converse.css" />
-</head>
-
-<body>
-    <div id="header_wrap" class="outer">
-        <header class="inner">
-          <h1 id="project_title"><a href="http://conversejs.org">Converse.js</a></h1>
-          <h2 id="project_tagline">Mockups</h2>
-        </header>
-    </div>
-
-    <ul>
-        <li><a href="/mockup/fullscreen-login.html" class="btn btn-primary">1a. Fullscreen Login</a></li>
-        <li><a href="/mockup/overlayed-login.html" class="btn btn-primary">1b. Overlayed Login</a></li>
-        <li><a href="/mockup/chatbox.html" class="btn btn-primary">2. Fullscreen private chat</a></li>
-        <li><a href="/mockup/chatroom.html" class="btn btn-primary">3. Fullscreen MUC</a></li>
-        <li><a href="/mockup/converse.html" class="btn btn-primary">4. Overlayed chats</a></li>
-    </ul>
-</body>
-</html>

mockup/chatbox.html

@@ -113,7 +113,7 @@
 										</ul>
 									</div>
 									<div class="form-group">
-										<textarea class="form-control" placeholder="Personal message"></textarea>
+										<textarea class="chat-textarea form-control" placeholder="Personal message"></textarea>
 									</div>
 								</form>
 							</div>

mockup/chatroom.html

@@ -91,7 +91,7 @@
                                                     </ul>
                                                 </div>
                                                 <div class="form-group">
-                                                    <textarea class="form-control" placeholder="Message"></textarea>
+                                                    <textarea class="chat-textarea form-control" placeholder="Message"></textarea>
                                                 </div>
                                             </form>
                                         </div>

mockup/converse.html

@@ -10,7 +10,11 @@
     <link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
 </head>
 
-<body>
+<body style="background-color: #578EA9">
+	<div class="converse-bg container">
+		<h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1>
+	</div>
+
 	<div id="conversejs" class="chatbox">
 		<div id="controlbox" class="chatbox">
 			<div class="flyout box-flyout">
@@ -110,7 +114,7 @@
 							</ul>
 						</div>
 						<div class="form-group">
-							<textarea class="form-control" placeholder="Personal message"></textarea>
+							<textarea class="chat-textarea form-control" placeholder="Personal message"></textarea>
 						</div>
 					</form>
 				</div>
@@ -180,7 +184,7 @@
 										</ul>
 									</div>
 									<div class="form-group">
-										<textarea class="form-control" placeholder="Message"></textarea>
+										<textarea class="chat-textrea form-control" placeholder="Message"></textarea>
 									</div>
 								</form>
 							</div>

mockup/css/mockup.css

@@ -1,180 +1,8 @@
-body {
-  height: 100vh;
-  background-color: #578ea9;
-  color: #212529;
-}
-body .brand-heading {
-  margin: auto;
-  font-size: 6em;
-  font-weight: bold;
-}
-body .brand-heading .icon-conversejs {
-  font-size: 0.88em;
-}
-.converse-bg {
-  position: relative;
-  height: 100vh;
-  text-align: center;
-  color: #fff;
-}
-.converse-bg .brand-heading {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-      -ms-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
-}
-.xmpp-status .online,
-.xmpp-status-menu .online {
-  color: #28a745;
-}
-.xmpp-status .dnd,
-.xmpp-status-menu .dnd {
-  color: #dc3545;
-}
-.xmpp-status .away,
-.xmpp-status-menu .away {
-  color: #17a2b8;
-}
-.xmpp-status .logout,
-.xmpp-status-menu .logout,
-.xmpp-status .offline,
-.xmpp-status-menu .offline {
-  color: #868e96;
-}
-#mockups {
-  position: fixed;
-  bottom: 0;
-  left: 50%;
-  padding: 7px;
-  z-index: 2000;
-  background-color: #578ea9;
-  -webkit-transform: translate(-50%, 0%);
-      -ms-transform: translate(-50%, 0%);
-          transform: translate(-50%, 0%);
-}
-#mockups a {
-  width: 30px;
-  padding: 4px;
-  background: #aaa;
-  border: 1px solid #000;
-  color: #000;
-  font-size: 0.9em;
-}
-#conversejs {
-  margin: 10px 0 0;
-}
-#conversejs p {
-  margin-bottom: 1rem;
-}
-#conversejs a,
-#conversejs a:visited {
-  color: #007bff;
-}
-#conversejs a:hover {
-  color: #0056b3;
-}
-#conversejs canvas {
-  background: #000;
-  border-radius: 4px;
-  margin: 2px 0;
-}
-#conversejs form.pure-form.converse-form input[type=button],
-#conversejs form.pure-form.converse-form input[type=submit] {
-  margin-right: 0;
-}
-#conversejs .badge {
-  padding: 0.25em 0.4em;
-  line-height: 1;
-  font-weight: 700;
-  font-size: 0.9em;
-}
-#conversejs .btn.btn-primary {
-  color: #fff;
-}
-#conversejs .chat-head .avatar {
-  border-radius: 5px;
-}
-#conversejs .fa {
-  font: normal normal normal 14px/1 FontAwesome;
-  display: inline-block;
-  font-size: inherit;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-#conversejs #controlbox {
-  margin-right: 0.5em;
-}
-#conversejs #controlbox .controlbox-pane {
-  height: 100%;
-  border-radius: 5px;
-}
-#conversejs #controlbox .controlbox-pane label {
-  margin: 8px;
-}
-#conversejs #controlbox #login-dialog .brand-heading {
-  margin-top: 3.5%;
-  font-size: 2.5em;
-  color: #578ea9;
-}
-#conversejs #controlbox #chatrooms .rooms-list-container {
-  margin: 10px 0;
-}
-#conversejs #converse-roster {
-  height: calc(100% - 70px);
-  margin-top: 0;
-  padding-bottom: 15px;
-  overflow: auto;
-  border-bottom: 1px solid #777;
-}
-#conversejs #converse-roster .roster-filter-form {
-  margin: 5px 0 0;
-}
-#conversejs #converse-roster .roster-filter-form input {
-  width: 56%;
-  margin-right: 5px;
-}
-#conversejs #converse-roster .roster-filter-form span {
-  margin: 0;
-  padding: 0.2em;
-  color: #888;
-  cursor: pointer;
-}
-#conversejs #converse-roster .roster-filter-form span.fa-user {
-  color: #000;
-}
-#conversejs #converse-roster .roster-filter-form .form-group {
-  margin-bottom: 0.5rem;
-}
-#conversejs #converse-roster .roster-contacts {
-  height: auto;
-  font-size: 0.875rem;
-  overflow: hidden;
-}
-#conversejs #converse-roster .roster-contacts dd {
-  height: 28px;
-}
-#conversejs #converse-roster .roster-contacts dd a {
-  text-overflow: initial;
-  overflow: visible;
-}
-#conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact {
-  font-size: 0.95em;
-}
-#conversejs #minimized-chats .badge {
-  position: absolute;
-  right: 122px;
-  bottom: 8px;
-  border: 1px solid #111;
-}
 #conversejs.fullscreen {
   width: 100%;
   height: 100%;
   right: 0;
   bottom: 0;
-  color: #212529;
 }
 #conversejs.fullscreen.login {
   width: calc(100vw - 20px);
@@ -216,117 +44,9 @@ body .brand-heading .icon-conversejs {
 #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chat-area {
   height: calc(100vh - 95px);
 }
-#conversejs .sidebar {
-  display: none;
-  position: absolute;
-  width: 50px;
-  height: 100vh;
-  padding: 10px 0;
-  background-color: #578ea9;
-  text-align: center;
-}
-#conversejs .sidebar .chatbox-btn {
-  float: none;
-  margin: 0;
-  font-size: 1.35em;
-}
-#conversejs .sidebar .chatbox-btn.fa-vcard {
-  margin-top: 30px;
-}
-#conversejs .sidebar .bottom {
-  position: absolute;
-  bottom: 10px;
-}
-#conversejs .chatbox .chat-content {
-  padding: 0.5em;
-}
-#conversejs .chatbox .chat-body {
-  background: #fff;
-}
-#conversejs .chatbox .chat-body .chat-message {
-  margin: 0.3em;
-}
-#conversejs .chatbox .chat-body .chat-message canvas {
-  vertical-align: middle;
-  background: #777;
-}
-#conversejs .chatbox .chat-body .chat-message .chat-msg-me canvas {
-  background: #578ea9;
-}
-#conversejs .chatbox .chat-body .chat-message .chat-msg-them canvas {
-  background: #e77051;
-}
-#conversejs .chatbox .chat-body .chat-message .chat-msg-author {
-  float: none;
-}
-#conversejs .chatbox form.sendXMPPMessage textarea {
-  resize: none;
-  border: none;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-#conversejs .chatbox form.sendXMPPMessage .chat-toolbar a,
-#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
-  color: #212529;
-}
-#conversejs .chatroom .box-flyout .chatroom-body .chat-area {
-  min-width: 100%;
-  height: 395px;
-}
-#conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
-  padding: 0.5em;
-}
-#conversejs .chatroom .box-flyout .chatroom-body .chat-info {
-  color: #fff;
-  line-height: normal;
-}
-#conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
-  bottom: 0;
-  width: auto;
-}
-#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.feature {
-  float: left;
-  margin-right: 0.5em;
-  padding-right: 0;
-  font-size: 1em;
-  cursor: help;
-}
-#conversejs #users {
-  position: relative;
-}
-#conversejs #users #chatrooms {
-  padding-bottom: 5px;
-  border-bottom: 1px solid #aaa;
-}
-#conversejs #users #chatrooms .rooms-list-container dl.rooms-list .available-chatroom,
-#conversejs #users #chatrooms .rooms-list-container dl.rooms-list .open-chatroom {
-  padding: 0.1em 0;
-}
 #conversejs #users #chatrooms .rooms-list-container dl.rooms-list a + a {
   line-height: 22px;
 }
-#conversejs #users #chatrooms,
-#conversejs #users #contacts {
-  margin-top: 0.75em;
-}
-#conversejs #users .userinfo {
-  padding-bottom: 10px;
-  border-bottom: 1px solid #aaa;
-}
-#conversejs #users .userinfo .username {
-  margin-left: 5px;
-}
-#conversejs #users .userinfo .d-flex {
-  margin-bottom: 2px;
-}
-#conversejs #users.controlbox-pane {
-  height: 450px;
-  text-align: left;
-}
-#conversejs #users .chatbox-btn {
-  margin: 0;
-  color: #007bff;
-}
 @media screen and (max-width: 575px) {
   body .brand-heading {
     font-size: 3.75em;

mockup/fullscreen-login.html

@@ -22,7 +22,7 @@
 					<div class="controlbox-panes">
 						<div id="login-dialog" class="controlbox-pane">
 							<div class="row">
-								<div class="col-12">
+								<div class="brand-heading-container col-12">
 									<h1 class="brand-heading">
 										<i class="icon-conversejs"></i> inVerse</h1>
 									<p>
@@ -32,7 +32,7 @@
 
 							<div class="row">
 								<div class="col-sm-8 offset-sm-2 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
-									<form class="pure-form converse-form">
+									<form id="converse-login" class="pure-form converse-form">
 										<div class="form-group">
 											<label for="jid">XMPP Username:</label>
 											<input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">
@@ -41,9 +41,10 @@
 											<label for="password">Password:</label>
 											<input type="password" name="password" class="form-control" placeholder="password" autocomplete="off">
 										</div>
-										<p></p>
-										<p><input class="btn btn-primary" type="submit" value="Log In"></p>
-										<p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
+                                        <fieldset class="buttons">
+                                            <p><input class="btn btn-primary" type="submit" value="Log In"></p>
+                                            <p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
+                                        </fieldset>
 									</form>
 								</div>
 							</div>

mockup/index.html

@@ -1,11 +1,27 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+  "http://www.w3.org/TR/html4/loose.dtd">
 <html>
-
 <head>
-	<title>inVerse Mockups</title>
-	<meta http-equiv="refresh" content="0; URL=login.php">
+    <title>Converse.js Live Mockup</title>
+    <meta name="description" content="Converse.js: A chat client for your website" />
+    <link type="text/css" rel="stylesheet" media="screen" href="../css/theme.css" />
+    <link type="text/css" rel="stylesheet" media="screen" href="../css/converse.css" />
 </head>
 
 <body>
-</body>
+    <div id="header_wrap" class="outer">
+        <header class="inner">
+          <h1 id="project_title"><a href="http://conversejs.org">Converse.js</a></h1>
+          <h2 id="project_tagline">Mockups</h2>
+        </header>
+    </div>
 
-</html>
+    <ul>
+        <li><a href="/mockup/fullscreen-login.html" class="btn btn-primary">1a. Fullscreen Login</a></li>
+        <li><a href="/mockup/overlayed-login.html" class="btn btn-primary">1b. Overlayed Login</a></li>
+        <li><a href="/mockup/chatbox.html" class="btn btn-primary">2. Fullscreen private chat</a></li>
+        <li><a href="/mockup/chatroom.html" class="btn btn-primary">3. Fullscreen MUC</a></li>
+        <li><a href="/mockup/converse.html" class="btn btn-primary">4. Overlayed chats</a></li>
+    </ul>
+</body>
+</html>

mockup/less/mockup.less

@@ -1,18 +1,16 @@
 // overrides for the base css of converse/inverse
 
-@text-color: #212529;
 @link-color: #007bff;
-@hover-color: #0056b3;
 @bg-color: #578ea9;
-@primary-bg-color: #007bff;
-@primary-text-color: #fff;
-
 
 body {
-	height:100vh; background-color:@bg-color; color:@text-color;
 	.brand-heading {
-		margin:auto; font-size:6em; font-weight:bold;
-		.icon-conversejs { font-size:0.88em; }
+		margin: auto;
+        font-size: 6em;
+        font-weight: bold;
+		.icon-conversejs {
+            font-size: 0.88em;
+        }
 	}
 }
 
@@ -21,74 +19,7 @@ body {
 	.brand-heading { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
 }
 
-.xmpp-status, .xmpp-status-menu {
-	.online { color:#28a745; }
-	.dnd { color:#dc3545; }
-	.away { color:#17a2b8; }
-	.logout, .offline { color:#868e96; }
-}
-
-
-#mockups {
-	position:fixed; bottom:0; left:50%; padding:7px; z-index:2000;
-	background-color:@bg-color; transform:translate(-50%, 0%);
-	a {
-		width:30px; padding:4px; background:#aaa; border:1px solid #000;
-		color:#000; font-size:0.9em;
-	}
-}
-
 #conversejs {
-	margin:10px 0 0;
-	p { margin-bottom:1rem; }
-	a, a:visited { color:@link-color; }
-	a:hover { color:@hover-color; }
-	canvas { background:#000; border-radius:4px; margin:2px 0; }
-	form.pure-form.converse-form {
-		input[type=button], input[type=submit] { margin-right:0; }
-	}
-
-	.badge { padding:0.25em 0.4em; line-height:1; font-weight:700; font-size:0.9em; }
-	.btn.btn-primary { color:@primary-text-color; }
-	.chat-head .avatar { border-radius:5px; }
-
-	.fa {
-		font:normal normal normal 14px/1 FontAwesome;
-		display:inline-block; font-size:inherit; text-rendering:auto;
-		-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
-	}
-
-	#controlbox {
-		margin-right:0.5em;
-		.controlbox-pane { height:100%; border-radius:5px; }
-		.controlbox-pane label { margin:8px; }
-		#login-dialog {
-			.brand-heading { margin-top:3.5%; font-size:2.5em; color:@bg-color; }
-		}
-		#chatrooms .rooms-list-container { margin:10px 0; }
-	}
-
-	#converse-roster {
-		height:calc(~"100% - 70px"); margin-top:0; padding-bottom:15px; overflow:auto;
-		border-bottom:1px solid #777;
-		.roster-filter-form {
-			margin:5px 0 0;
-			input { width:56%; margin-right:5px; }
-			span { margin:0; padding:0.2em; color:#888; cursor:pointer; }
-			span.fa-user { color:#000; }
-			.form-group { margin-bottom:0.5rem; }
-		}
-		.roster-contacts {
-			height:auto; font-size:0.875rem; overflow:hidden;
-			dd {
-				height:28px;
-				a { text-overflow:initial; overflow:visible; }
-				a.remove-xmpp-contact { font-size:0.95em; }
-			}
-		}
-	}
-
-	#minimized-chats .badge { position:absolute; right:122px; bottom:8px; border:1px solid #111; }
 
 	&.fullscreen {
 		width:100%; height:100%; right:0; bottom:0; color:@text-color;
@@ -113,16 +44,6 @@ body {
 		.chatroom .box-flyout .chatroom-body .chat-area { height:calc(~"100vh - 95px"); }
 	}
 
-	.sidebar {
-		display:none; position:absolute; width:50px; height:100vh; padding:10px 0;
-		background-color:@bg-color; text-align:center;
-		.chatbox-btn {
-			float:none; margin:0; font-size:1.35em;
-			&.fa-vcard { margin-top:30px; }
-		}
-		.bottom { position:absolute; bottom:10px; }
-	}
-
 	.chatbox {
 		.chat-content { padding:0.5em; }
 		.chat-body {
@@ -175,9 +96,6 @@ body {
 	}
 }
 
-
-
-
 @media screen and (max-width: 575px) {
 	body {
 		.brand-heading { font-size:3.75em; }
@@ -272,5 +190,3 @@ body {
 @media screen and (max-width: 480px) {
 	#conversejs { width:auto; }
 }
-
-

mockup/menu.html

@@ -1,7 +0,0 @@
-		<div id="mockups">
-			<a href="login.php" class="btn btn-primary">1a</a>
-			<a href="login-c.php" class="btn btn-primary">1b</a>
-			<a href="chatbox.php" class="btn btn-primary">2</a>
-			<a href="chatroom.php" class="btn btn-primary">3</a>
-			<a href="converse.php" class="btn btn-primary">4</a>
-		</div>

mockup/overlayed-login.html

@@ -10,8 +10,8 @@
     <link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
 </head>
 
-<body>
-	<div class="container converse-bg">
+<body style="background-color: #578EA9">
+	<div class="converse-bg container">
 		<h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1>
 	</div>
 
@@ -21,15 +21,12 @@
 				<div class="controlbox-panes">
 					<div id="login-dialog" class="controlbox-pane">
 						<div class="row">
-							<div class="col-12">
-								<h1 class="brand-heading">
-									<i class="icon-conversejs"></i> Converse.js</h1>
-								<p>
-									<a href="https://conversejs.org">Open Source</a><br />XMPP chat client</p>
+							<div class="brand-heading-container col-12">
+								<h1 class="brand-heading"><i class="icon-conversejs"></i> converse</h1>
 							</div>
 
 							<div class="col-12">
-								<form class="pure-form converse-form">
+								<form id="converse-login" class="pure-form converse-form">
 									<div class="form-group">
 										<label for="jid">XMPP Username:</label>
 										<input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">

mockup/sidebar.js

@@ -18,7 +18,7 @@ const Sidebar = Backbone.NativeView.extend({
             hamburger.classList.remove('fa-times');
             hamburger.classList.remove('fa-bars');
         } else {
-            converse_el.addClass('sidebar-open');
+            converse_el.classList.add('sidebar-open');
             hamburger.classList.remove('fa-bars');
             hamburger.classList.add('fa-times');
         }

mockup/user-panel.html

@@ -19,7 +19,7 @@
             <span class="w-100">Chatrooms</span>
             <a class="chatbox-btn fa fa-users" title="Click to change rooms" data-toggle="modal" data-target="#chatroomsModal"></a>
         </div>
-        <div class="rooms-list-container">
+        <div class="list-container rooms-list-container">
             <div class="rooms-list">
                 <div class="available-chatroom d-flex flex-row">
                     <a class="open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="#">public</a>
@@ -49,7 +49,7 @@
         </div>
         <form class="pure-form roster-filter-form input-button-group">
             <div class="form-group form-inline">
-                <input value="" class="form-control" placeholder="Filter">
+                <input value="" class="roster-filter form-control" placeholder="Filter">
                 <div class="filter-by">
                     <span class="fa fa-user" title="Filter by contacts"></span>
                     <span class="fa fa-users" title="Filter by groups"></span>
@@ -58,90 +58,108 @@
             </div>
         </form>
 
-        <dl class="roster-contacts" style="display: block;">
-            <dt class="roster-group" style="display: block;">
+        <div class="roster-contacts">
+            <div class="roster-group" id="xmpp-contact-requests">
+                <a href="#" class="group-toggle" title="Click to hide these contacts">
+                    <span class="fa fa-caret-down"></span> Contact Requests</a>
+                <ul>
+                    <li class="offline requesting-xmpp-contact d-flex">
+                        <span class="req-contact-name w-100">Bob Skinstad</span>
+                        <a class="accept-xmpp-request fa fa-check align-self-center" title="Click here to accept this contact's request" href="#"></a>
+                        <a class="decline-xmpp-request fa fa-times align-self-center" title="Click here to decline this contact's request" href="#"></a>
+                    </li>
+                    <li class="offline requesting-xmpp-contact d-flex">
+                        <span class="req-contact-name w-100">André Vos</span>
+                        <a class="accept-xmpp-request fa fa-check align-self-center" title="Click here to accept this contact's request" href="#"></a>
+                        <a class="decline-xmpp-request fa fa-times align-self-center" title="Click here to decline this contact's request" href="#"></a>
+                    </li>
+                </ul>
+            </div>
+
+            <div class="roster-group" data-group="Colleagues">
                 <a href="#" data-group="Colleagues" class="group-toggle" title="Click to hide these contacts">
                     <span class="fa fa-caret-down"></span> Colleagues</a>
-            </dt>
-            <dd class="online current-xmpp-contact d-flex">
-                <a class="open-chat w-100" title="Click to chat with this contact" href="#">
-                    <span class="fa fa-circle" title="This contact is online"></span> Victor Matfield</a>
-                <a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
-            </dd>
-            <dd class="away current-xmpp-contact d-flex">
-                <a class="open-chat w-100" title="Click to chat with this contact" href="#">
-                    <span class="fa fa-circle-o" title="this contact is away"></span> William Winterbottom</a>
-                <a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
-            </dd>
-            <dd class="dnd current-xmpp-contact d-flex">
-                <a class="open-chat w-100" title="Click to chat with this contact" href="#">
-                    <span class="fa fa-minus-circle" title="This contact is busy"></span> Gary Teichmann</a>
-                <a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
-            </dd>
-            <dt class="roster-group" style="display: block;">
+
+                <ul>
+                    <li class="online current-xmpp-contact d-flex">
+                        <a class="open-chat w-100" title="Click to chat with this contact" href="#">
+                            <span class="fa fa-circle" title="This contact is online"></span> Victor Matfield</a>
+                        <a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
+                    </li>
+                    <li class="away current-xmpp-contact d-flex">
+                        <a class="open-chat w-100" title="Click to chat with this contact" href="#">
+                            <span class="fa fa-circle-o" title="this contact is away"></span> William Winterbottom</a>
+                        <a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
+                    </li>
+                    <li class="dnd current-xmpp-contact d-flex">
+                        <a class="open-chat w-100" title="Click to chat with this contact" href="#">
+                            <span class="fa fa-minus-circle" title="This contact is busy"></span> Gary Teichmann</a>
+                        <a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
+                    </li>
+                </li>
+            </div>
+
+            <div class="roster-group" data-group="Family">
                 <a href="#" data-group="Family" class="group-toggle" title="Click to hide these contacts">
                     <span class="fa fa-caret-down"></span> Family</a>
-            </dt>
-            <dd class="away current-xmpp-contact d-flex">
-                <a class="open-chat w-100" title="Click to chat with this contact" href="#">
-                    <span class="fa fa-circle-o" title="this contact is away"></span> Allan Donald</a>
-                <a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
-            </dd>
-            <dd class="offline current-xmpp-contact d-flex">
-                <a class="open-chat w-100" title="Click to chat with this contact" href="#">
-                    <span class="fa fa-times-circle" title="This contact is offline"></span> Corné Krige</a>
-                <a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
-            </dd>
-            <dt class="roster-group" style="display: block;">
+                <ul>
+                    <li class="away current-xmpp-contact d-flex">
+                        <a class="open-chat w-100" title="Click to chat with this contact" href="#">
+                            <span class="fa fa-circle-o" title="this contact is away"></span> Allan Donald</a>
+                        <a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
+                    </li>
+                    <li class="offline current-xmpp-contact d-flex">
+                        <a class="open-chat w-100" title="Click to chat with this contact" href="#">
+                            <span class="fa fa-times-circle" title="This contact is offline"></span> Corné Krige</a>
+                        <a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
+                    </li>
+                </ul>
+            </div>
+
+            <div class="roster-group" data-group="Friends">
                 <a href="#" data-group="Friends" class="group-toggle" title="Click to hide these contacts">
                     <span class="fa fa-caret-down"></span> Friends</a>
-            </dt>
-            <dd class="online current-xmpp-contact d-flex">
-                <a class="open-chat w-100" title="Click to chat with this contact" href="#">
-                    <span class="fa fa-circle" title="This contact is online"></span> John Smit</a>
-                <a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
-            </dd>
-            <dd class="online current-xmpp-contact d-flex">
-                <a class="open-chat w-100" title="Click to chat with this contact" href="#">
-                    <span class="fa fa-circle" title="This contact is online"></span> Bakkies Botha</a>
-                <a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
-            </dd>
-            <dt class="roster-group" style="display: block;">
+                <ul>
+                    <li class="online current-xmpp-contact d-flex">
+                        <a class="open-chat w-100" title="Click to chat with this contact" href="#">
+                            <span class="fa fa-circle" title="This contact is online"></span> John Smit</a>
+                        <a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
+                    </li>
+                    <li class="online current-xmpp-contact d-flex">
+                        <a class="open-chat w-100" title="Click to chat with this contact" href="#">
+                            <span class="fa fa-circle" title="This contact is online"></span> Bakkies Botha</a>
+                        <a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
+                    </li>
+                </ul>
+            </div>
+
+            <div class="roster-group" data-group="Ungrouped">
                 <a href="#" class="group-toggle" title="Click to hide these contacts">
                     <span class="fa fa-caret-down"></span> Ungrouped</a>
-            </dt>
-            <dd class="online current-xmpp-contact d-flex">
-                <a class="open-chat w-100" title="Click to chat with this contact" href="#">
-                    <span class="fa fa-circle" title="This contact is online"></span> James Small</a>
-                <a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
-            </dd>
-            <dt class="roster-group" id="xmpp-contact-requests" style="display: block;">
-                <a href="#" class="group-toggle" title="Click to hide these contacts">
-                    <span class="fa fa-caret-down"></span> Contact Requests</a>
-            </dt>
-            <dd class="offline requesting-xmpp-contact d-flex">
-                <span class="req-contact-name w-100">Bob Skinstad</span>
-                <a class="accept-xmpp-request fa fa-check align-self-center" title="Click here to accept this contact's request" href="#"></a>
-                <a class="decline-xmpp-request fa fa-times align-self-center" title="Click here to decline this contact's request" href="#"></a>
-            </dd>
-            <dd class="offline requesting-xmpp-contact d-flex">
-                <span class="req-contact-name w-100">André Vos</span>
-                <a class="accept-xmpp-request fa fa-check align-self-center" title="Click here to accept this contact's request" href="#"></a>
-                <a class="decline-xmpp-request fa fa-times align-self-center" title="Click here to decline this contact's request" href="#"></a>
-            </dd>
-            <dt class="roster-group" id="pending-xmpp-contacts" style="display: block;">
+                <ul>
+                    <li class="online current-xmpp-contact d-flex">
+                        <a class="open-chat w-100" title="Click to chat with this contact" href="#">
+                            <span class="fa fa-circle" title="This contact is online"></span> James Small</a>
+                        <a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
+                    </li>
+                </ul>
+            </div>
+
+            <div class="roster-group" id="pending-xmpp-contacts">
                 <a href="#" class="group-toggle" title="Click to hide these contacts">
                     <span class="fa fa-caret-down"></span> Pending Contacts</a>
-            </dt>
-            <dd class="offline pending-xmpp-contact d-flex">
-                <span class="pending-contact-name w-100">Rassie Erasmus</span>
-                <a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
-            </dd>
-            <dd class="offline pending-xmpp-contact d-flex">
-                <span class="pending-contact-name w-100">Victor Matfield</span>
-                <a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
-            </dd>
-        </dl>
+                <ul>
+                    <li class="offline pending-xmpp-contact d-flex">
+                        <span class="pending-contact-name w-100">Rassie Erasmus</span>
+                        <a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
+                    </li>
+                    <li class="offline pending-xmpp-contact d-flex">
+                        <span class="pending-contact-name w-100">Victor Matfield</span>
+                        <a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
+                    </li>
+                </ul>
+            </div>
+        </div>
     </div>
 </div>
 <!-- </div> -->

package-lock.json

@@ -7516,6 +7516,10 @@
       "integrity": "sha1-VusCfWW00tzmyy4tMsTUr8nh1wc=",
       "dev": true
     },
+    "snabbdom": {
+      "version": "github:jcbrand/snabbdom#3ed3a2a1a8b98eab19021d6988f3f4af25b606c8",
+      "dev": true
+    },
     "snyk": {
       "version": "1.69.1",
       "resolved": "https://registry.npmjs.org/snyk/-/snyk-1.69.1.tgz",

sass/_chatbox.scss

@@ -157,15 +157,22 @@
                 font-style: italic;
             }
             .chat-message {
+                overflow: auto; // Ensures that content stays inside
+                margin: 0.3em;
+
                 &.onload {
                     animation: colorchange-chatmessage 1s;
                     -webkit-animation: colorchange-chatmessage 1s;
                 }
-                overflow: auto; // Ensures that content stays inside
+
+                canvas {
+                    vertical-align: middle;
+                    background: $gray-color;
+                }
+
                 .chat-msg-author {
                     font-weight: bold;
                     white-space: nowrap;
-                    float: left;
                     text-overflow: ellipsis;
                     overflow: hidden;
                 }
@@ -247,11 +254,13 @@
                 width: 100%;
             }
             .chat-textarea {
+                border-top-left-radius: 0;
+                border-top-right-radius: 0;
                 @include border-bottom-radius($chatbox-border-radius);
-                border: 0;
                 height: $chat-textarea-height;
                 padding: 0.5em;
                 width: 100%;
+                border: none;
                 resize: none;
             }
             .send-button {

sass/_chatrooms.scss

@@ -69,7 +69,8 @@
                 border-top: 0;
                 width: 100%;
                 .chat-info {
-                    color: $chatroom-head-color;
+                    color: white;
+                    line-height: normal;
                 }
                 .mentioned {
                     font-weight: bold;
@@ -81,6 +82,14 @@
                     }
                     .chat-msg-them {
                         color: $chatroom-message-them-color;
+                        canvas {
+                            background: $red;
+                        }
+                    }
+                    .chat-msg-me {
+                        canvas {
+                            background: $light-blue;
+                        }
                     }
                 }
                 .disconnect-msg {
@@ -89,7 +98,7 @@
                 .chat-area {
                     word-wrap: break-word; 
                     height: 100%;
-                    width: 70%;
+                    width: 100%;
                     float: left;
                     min-width: $chat-width;
                     .new-msgs-indicator {
@@ -97,8 +106,7 @@
                         max-width: 70%;
                     }
                     .chat-content {
-                        // There's an annoying Chrome box-sizing bug which prevents us from adding 0.5em padding here.
-                        padding: 0 0.5em 0 0.5em;
+                        padding: 0.5em;
                     }
                     &.full {
                         min-width: 100%;
@@ -125,6 +133,14 @@
                     .chatroom-features {
                         bottom: 0.5em;
                         width: 100%;
+
+                        .feature {
+                            float: left;
+                            margin-right: 0.5em;
+                            padding-right: 0;
+                            font-size: 1em;
+                            cursor: help;
+                        }
                     }
                     .awesomplete {
                         ul {

sass/_controlbox.scss

@@ -1,15 +1,18 @@
 #conversejs {
     #controlbox {
-        .pure-form.converse-form {
-            padding: 0;
-        }
         margin-right: 2*$chat-gutter;
+
         @media screen and (max-width: $mobile-portrait-length) {
             margin: 0;
         }
         @media screen and (max-height: $mobile-landscape-height) {
             margin: 0;
         }
+
+        .pure-form.converse-form {
+            padding: 0;
+        }
+
         .controlbox-head {
             background-color: $controlbox-head-color;
             border-top-left-radius: $chatbox-border-radius;
@@ -129,14 +132,20 @@
 
         .brand-heading-container {
             .brand-heading {
-                text-align: left;
-                font-size: 150%;
+                text-align: center;
             }
+            
             .brand-name {
                 font-size: 120%;
             }
         }
 
+		#login-dialog {
+			.brand-heading {
+                color: $global-background-color;
+            }
+		}
+
         .toggle-register-login {
             font-weight: bold;
         }
@@ -150,6 +159,9 @@
         }
 
         #converse-register, #converse-login {
+            fieldset.buttons {
+                text-align: center;
+            }
             .login-anon {
                 height: auto;
                 white-space: normal;
@@ -168,13 +180,41 @@
             }
 
         }
+
         #users {
+            overflow-y: hidden;
+            position: relative;
+
             .add-converse-contact {
                 margin: 0 0 0.75em 0;
             }
+
+            .chatbox-btn {
+                margin: 0;
+            }
+        }
+
+        #chatrooms, #contacts {
+            margin-top: 0.75em;
+        }
+
+        #users {
+            .userinfo {
+                padding-bottom: 1em;
+                border-bottom: 1px solid $gray-color;
+
+                .username {
+                    margin-left: 0.5em;
+                }
+                .d-flex {
+                    margin-bottom: 0.2em;
+                }
+            }
         }
 
         #chatrooms {
+            border-bottom: 1px solid $gray-color;
+
             form.add-chatroom {
                 input[type=button],
                 input[type=submit],
@@ -184,9 +224,8 @@
                 margin: 0;
                 padding: 0;
             }
+
             .rooms-list-container {
-                text-align: left;
-                margin: 0;
                 .rooms-toggle {
                     display: block;
                     color: $text-color;
@@ -195,7 +234,7 @@
                         color: $dark-gray-color;
                     }
                 }
-                dl.rooms-list {
+                .rooms-list {
                     margin: 0.5em 0;
                     text-align: left;
                     dt {
@@ -214,7 +253,7 @@
                         color: $text-color;
                         display: block;
                         overflow: hidden;
-                        padding: 0.3em 0;
+                        padding: 0.2em 0;
                         text-shadow: 0 1px 0 $text-shadow-color;
                         word-wrap: break-word;
                         a:hover {
@@ -464,10 +503,13 @@
             font-size: $font-size;
             position: absolute;
             left: 0;
-            text-align: center;
+            text-align: left;
             width: 100%;
+            height: 100%;
             overflow-y: auto;
             overflow-x: hidden;
+            border-radius: $chatbox-border-radius;
+
             .switch-form {
                 padding-bottom: 2em;
                 p {
@@ -478,7 +520,6 @@
                 font-size: $font-size;
                 font-weight: bold;
                 height: auto;
-                margin: 4px;
             }
             dd {
                 margin-left: 0;
@@ -489,10 +530,6 @@
             }
         }
 
-        #users {
-            overflow-y: hidden;
-        }
-
         .add-xmpp-contact {
             padding: 1em 0.5em;
             input {
@@ -545,4 +582,19 @@
             color: $inverse-link-color;
         }
     }
+
+    .xmpp-status, .xmpp-status-menu {
+        .online {
+            color: $green;
+        }
+        .dnd {
+            color: $red
+        }
+        .away {
+            color: $light-blue;
+        }
+        .logout, .offline {
+            color: $gray-color;
+        }
+    }
 }

sass/_core.scss

@@ -6,6 +6,24 @@
     @include animation-timing-function(ease);
 }
 
+// FIXME: these need to go elsewhere, they're outside of #conversejs
+.converse-bg {
+  position: relative;
+  height: 100vh;
+  text-align: center;
+  color: #fff;
+}
+
+body .brand-heading {
+  margin: auto;
+  font-size: 6em;
+  font-weight: bold;
+
+    .icon-conversejs {
+        font-size: 0.88em;
+    }
+}
+
 #converse-embedded-chat,
 #conversejs {
     bottom: 0;
@@ -44,10 +62,6 @@
         color: $subdued-color;
     }
 
-    .circle {
-        border-radius: 50%;
-    }
-
     ::selection {
         background-color: $highlight-color;
     }
@@ -55,6 +69,62 @@
         background-color: $highlight-color;
     }
 
+	canvas {
+        background:#000;
+        border-radius:4px;
+        margin: 2px 0;
+    }
+
+    .circle {
+        border-radius: 50%;
+    }
+
+	.sidebar {
+		display: none;
+        position: absolute;
+        width: 50px;
+        height: 100vh;
+        padding: 10px 0;
+		background-color: $controlbox-head-color;
+        text-align: center;
+
+		.chatbox-btn {
+			float: none;
+            margin: 0;
+            font-size: 1.35em;
+			&.fa-vcard {
+                margin-top: 1em;
+            }
+		}
+		.bottom {
+            position: absolute;
+            bottom: 1em;
+        }
+	}
+
+	.badge {
+        padding: 0.25em 0.4em;
+        line-height: 1;
+    }
+
+    .fa {
+        font: normal normal normal 14px/1 FontAwesome;
+        display: inline-block;
+        font-size: inherit;
+        text-rendering: auto;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+    .list-container {
+        text-align: left;
+        margin: 0.3em 0;
+    }
+
+    .btn.btn-primary {
+        color: #fff;
+    }
+
     .no-text-select {
         -webkit-touch-callout: none;
         @include user-select(none);
@@ -255,7 +325,6 @@
                 min-width: 50%;
             }
             label {
-                margin: 1em 0;
                 font-size: $font-size-large;
             }
             input[type=text],

sass/_roster.scss

@@ -2,17 +2,20 @@
     text-align: left;
     width: 100%;
     position: relative;
-    margin: 1em 0 0 0;
+    margin: 0;
     height: $roster-height;
-    height: calc(100% - #{$controlbox-dropdown-height*2} - 20px);
-    overflow: hidden;
-    padding: 0;
-    padding-bottom: 3em;
+    height: calc(~"100% - #{$controlbox-dropdown-height*2} - 20px");
+    border-bottom: 1px solid $gray-color;
+    padding: 0 0 2em 0;
+    overflow: scroll;
 
     &.no-contact-requests {
-        height: calc(100% - #{$controlbox-dropdown-height} - 20px);
+        height: calc(~"100% - #{$controlbox-dropdown-height*2} - 20px");
     }
 
+    // XXX: FIXME
+    height: calc(100% - 70px);
+
     /* Custom addition for CSP */
     #online-count {
         display: none;
@@ -27,24 +30,30 @@
     }
 
     .roster-filter-form {
-        margin: 0 0 0.5em 0;
+        margin: 0.2em 0 0;
         width: 100%;
+
+        span {
+            margin: 0;
+            padding: 0.2em;
+            color: #888;
+            cursor: pointer;
+        }
+
         .roster-filter {
             float: left;
             background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg== ) no-repeat right -20px center;
             border: 1px solid #999;
             font-size: $font-size;
             height: $controlbox-dropdown-height;
-            margin: 0;
-            padding: 0;
-            padding-left: 0.4em;
-            width: 53%;
+            margin: 0.2em 0.2em 0.2em 0;
+            width: 60%;
         }
-        /* (jQ addClass:) if input has value: */
+        /* (dynamically added) if input has value: */
         .roster-filter.x {
             background-position: right 3px center;
         }
-        /* (jQ addClass:) if mouse is over the 'x' input area*/
+        /* (dynamically added) if mouse is over the 'x' input area*/
         .roster-filter.onX {
             cursor: pointer;
         }
@@ -79,15 +88,18 @@
 
     .roster-contacts {
         padding: 0;
-        margin: 0;
+        margin: 0.2em 0;
         height: 100%;
         overflow-x: hidden;
         overflow-y: auto;
+
         .roster-group {
             border: none;
             color: $text-color;
             font-weight: normal;
             text-shadow: 0 1px 0 $text-shadow-color;
+            margin: 1em 0 0 0;
+
             .group-toggle {
                 &:hover {
                     color: $dark-gray-color;
@@ -95,8 +107,8 @@
                 color: $text-color;
                 display: block;
                 width: 100%;
-                margin: 0.5em 0;;
             }
+
             li {
                 border: none;
                 clear: both;
@@ -106,10 +118,31 @@
                 overflow-y: hidden;
                 text-shadow: 0 1px 0 $text-shadow-color;
                 line-height: $font-size;
-                width: 100%;
                 height: 30px;
-                margin: 0;
-                padding: 0.5em 0 0 0;
+                width: 100%;
+
+                &.requesting-xmpp-contact {
+                    a {
+                        width: 2em;
+                    }
+                    :not(.open-chat) {
+                        margin-top: 0.5em;
+                    }
+                    .request-actions {
+                        padding: 0 0 0 0.3em;
+                        float: right;
+                    }
+                    .open-chat {
+                        max-width: 70%;
+                        .req-contact-name {
+                            width: 100%;
+                        }
+                    }
+                    .req-contact-name {
+                        width: 69%;
+                        padding: 0;
+                    }
+                }
 
                 a:hover {
                     color: $dark-link-color;
@@ -154,23 +187,6 @@
                         height: $roster-item-height;
                     }
                 }
-                &.requesting-xmpp-contact {
-                    .request-actions {
-                        padding: 0 0 0 0.3em;
-                        float: right;
-                    }
-                    .open-chat {
-                        max-width: 70%;
-                        .req-contact-name {
-                            width: 100%;
-                        }
-                    }
-                    .req-contact-name {
-                        line-height: $line-height;
-                        width: 69%;
-                        padding: 0;
-                    }
-                }
                 &.current-xmpp-contact span {
                     font-size: $font-size;
                     float: left;
@@ -200,6 +216,7 @@
                         margin: 0;
                         padding: 0;
                         color: $subdued-color;
+                        width: 2em;
                         &:before {
                             font-size: $font-size;
                         }

sass/converse/_controlbox.scss

@@ -15,7 +15,8 @@
 
         .brand-heading-container {
             .brand-heading {
-                margin-left: 1em;
+                font-size: 2.2em;
+                margin: 1em 0;
             }
         }
     }

sass/converse/_minimized_chats.scss

@@ -10,6 +10,13 @@
         padding: 0;
         width: 130px;
 
+        .badge {
+            position: absolute;
+            right: 122px;
+            bottom: 8px;
+            border: 1px solid $gray-color;
+        }
+
         #toggle-minimized-chats {
             border-top-left-radius: $chatbox-border-radius;
             border-top-right-radius: $chatbox-border-radius;

sass/inverse/_controlbox.scss

@@ -12,7 +12,7 @@
         .brand-heading-container {
             text-align: center;
             .brand-heading {
-                text-align: center;
+                font-size: 150%;
                 font-size: 600%;
                 padding: 0.7em 0 0 0;
                 opacity: 0.8;
@@ -63,7 +63,7 @@
         }
         #converse-register, #converse-login {
             margin: 2em 30% 3em 30%;
-            .title, .instructions, label {
+            .title, .instructions {
                 margin: 1em 0;
             }
             input[type=submit],

sass/inverse/_core.scss

@@ -1,6 +1,7 @@
 body {
     width: 100%;
     height: 100%;
+	height: 100vh;
     font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
     color: #ffffff;
     background-color: $global-background-color;

src/templates/inverse_brand_heading.html

@@ -1,4 +1,4 @@
-<span class="brand-heading-container">
+<span class="container brand-heading-container">
     <h1 class="brand-heading"><i class="icon-conversejs"></i>inVerse</h1>
     <p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://conversejs.org">Open Source</a> XMPP chat client</p>
     <p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://hosted.weblate.org/projects/conversejs/#languages">Translate</a> into your own language</p>

src/templates/room_panel.html

@@ -1,4 +1,4 @@
 <form class="add-chatroom"></form>
-<div class="rooms-list-container">
+<div class="list-container rooms-list-container">
     <dl id="available-chatrooms" class="rooms-list"></dl>
 </div>