Combine inverse/converse chatrooms css

updates #1091

css/converse.css

@@ -8208,7 +8208,7 @@ body.reset {
   #conversejs.converse-embedded .chat-head-chatroom .chatroom-description,
   #conversejs .chat-head-chatroom .chatroom-description {
     color: #f6ccc1;
-    font-size: 16px;
+    font-size: 14px;
     font-size: 70%;
     margin-top: 3px;
     overflow-y: hidden;
@@ -8455,14 +8455,68 @@ body.reset {
     width: 100%;
     border: 1px solid #999; }
 
-#conversejs .chatbox.chatroom {
+/* ******************* Overlay  styles *************************** */
+#conversejs.converse-overlayed .chatbox.chatroom {
   min-width: 400px !important;
   width: 400px; }
-  #conversejs .chatbox.chatroom .box-flyout {
+  #conversejs.converse-overlayed .chatbox.chatroom .box-flyout {
     min-width: 400px !important;
     width: 400px; }
-  #conversejs .chatbox.chatroom .chatroom-body .occupants .chatroom-features .feature {
+  #conversejs.converse-overlayed .chatbox.chatroom .chatbox-title {
+    flex: 0 0 66.6666666667%;
+    max-width: 66.6666666667%; }
+    #conversejs.converse-overlayed .chatbox.chatroom .chatbox-title .chatroom-description {
+      font-size: 80%; }
+  #conversejs.converse-overlayed .chatbox.chatroom .chatroom-body .occupants .chatroom-features .feature {
+    font-size: 12px; }
+
+/* ******************* Fullpage styles *************************** */
+#conversejs.converse-fullscreen .chatroom .box-flyout,
+#conversejs.converse-mobile .chatroom .box-flyout {
+  background-color: #E77051;
+  border: 1.2em solid #E77051;
+  border-top: 0.8em solid #E77051;
+  width: 100%; }
+  #conversejs.converse-fullscreen .chatroom .box-flyout .chatbox-title,
+  #conversejs.converse-mobile .chatroom .box-flyout .chatbox-title {
+    flex: 0 0 75%;
+    max-width: 75%; }
+    #conversejs.converse-fullscreen .chatroom .box-flyout .chatbox-title .chatroom-description,
+    #conversejs.converse-mobile .chatroom .box-flyout .chatbox-title .chatroom-description {
+      font-size: 70%; }
+  #conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body,
+  #conversejs.converse-mobile .chatroom .box-flyout .chatroom-body {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px; }
+    #conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .chatroom-form-container,
+    #conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .chatroom-form-container {
+      border-radius: 4px; }
+    #conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .chat-area,
+    #conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .chat-area {
+      border-top-left-radius: 4px;
+      min-width: auto; }
+      #conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
+      #conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
+        border-top-left-radius: 4px; }
+      #conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .chat-area.full,
+      #conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .chat-area.full {
+        max-width: 100%; }
+        #conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator,
+        #conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator {
+          max-width: 100%; }
+    #conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .occupants,
+    #conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .occupants {
+      border-top-right-radius: 4px;
+      padding: 1em; }
+      #conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .occupants .occupants-heading,
+      #conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
+        font-size: 16px; }
+      #conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list li,
+      #conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list li {
         font-size: 12px; }
+#conversejs.converse-fullscreen .chatroom .room-invite span .invited-contact,
+#conversejs.converse-mobile .chatroom .room-invite span .invited-contact {
+  margin: 0 0 0.5em -1px; }
 
 #conversejs .chatbox.headlines .chat-head.chat-head-chatbox {
   background-color: #E7A151; }

css/inverse.css

@@ -6865,7 +6865,7 @@ body.reset {
   padding-right: env(safe-area-inset-right);
   color: #666;
   font-family: "Helvetica", "Arial", sans-serif;
-  font-size: 16px;
+  font-size: 14px;
   direction: ltr;
   z-index: 1031; }
   #conversejs .brand-heading {
@@ -6927,7 +6927,7 @@ body.reset {
   #conversejs input[type=submit], #conversejs input[type=button],
   #conversejs input[type=text], #conversejs input[type=password],
   #conversejs button {
-    font-size: 16px;
+    font-size: 14px;
     padding: 0.25em;
     min-height: 0; }
   #conversejs strong {
@@ -7438,7 +7438,7 @@ body {
     font-family: "Century Gothic", futura, "URW Gothic L", Verdana, sans-serif;
     color: white;
     display: block;
-    line-height: 24px;
+    line-height: 20px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap; }
@@ -7552,7 +7552,7 @@ body {
       color: #3AA569; }
       #conversejs .chatbox .sendXMPPMessage .chat-toolbar .fa, #conversejs .chatbox .sendXMPPMessage .chat-toolbar .fa:hover {
         color: #3AA569;
-        font-size: 18px; }
+        font-size: 16px; }
       #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
       #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted {
         color: #666; }
@@ -7608,7 +7608,7 @@ body {
               #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover {
                 background-color: #DCF9F6; }
               #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji a {
-                font-size: 26px; }
+                font-size: 20px; }
                 #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji a:hover {
                   color: #8f2831; }
         #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley a.toggle-smiley {
@@ -7624,7 +7624,7 @@ body {
           #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li,
           #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li {
             padding: 0.2em;
-            font-size: 26px; }
+            font-size: 20px; }
             #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
             #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
               background-color: #DCF9F6; }
@@ -7681,7 +7681,7 @@ body {
       height: 100vh;
       box-shadow: none; } }
 #conversejs.fullscreen .chatbox-btn {
-  font-size: 18px;
+  font-size: 16px;
   margin: 0 0.3em; }
 #conversejs.fullscreen .flyout {
   border-radius: 0;
@@ -7694,7 +7694,7 @@ body {
   #conversejs.fullscreen .chat-head .user-custom-message {
     font-size: 50%;
     height: auto;
-    line-height: 22px; }
+    line-height: 16px; }
 #conversejs.fullscreen .chatbox {
   width: 100%;
   height: 100%;
@@ -7722,21 +7722,21 @@ body {
     border-top-left-radius: 4px;
     border-top-right-radius: 4px; }
     #conversejs.fullscreen .chatbox .chat-body .chat-message {
-      line-height: 22px;
-      font-size: 14px; }
+      line-height: 16px;
+      font-size: 12px; }
       #conversejs.fullscreen .chatbox .chat-body .chat-message .chat-msg-author {
-        line-height: 22px; }
+        line-height: 16px; }
       #conversejs.fullscreen .chatbox .chat-body .chat-message .chat-msg-content {
-        line-height: 22px; }
+        line-height: 16px; }
         #conversejs.fullscreen .chatbox .chat-body .chat-message .chat-msg-content .emojione {
-          height: 22px;
-          margin-bottom: -5.5px; }
+          height: 16px;
+          margin-bottom: -4px; }
   #conversejs.fullscreen .chatbox .chat-content {
     border-top-left-radius: 4px;
     border-top-right-radius: 4px; }
   #conversejs.fullscreen .chatbox .chat-title {
-    font-size: 26px;
-    line-height: 30px; }
+    font-size: 20px;
+    line-height: 24px; }
   #conversejs.fullscreen .chatbox .sendXMPPMessage ul {
     width: 100%; }
   #conversejs.fullscreen .chatbox .sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category-picker {
@@ -7759,14 +7759,14 @@ body {
 #conversejs .set-xmpp-status .fa-times-circle, #conversejs .xmpp-status .fa-times-circle, #conversejs .roster-contacts .fa-times-circle {
   color: #A8ABA1; }
 #conversejs .room-info {
-  font-size: 14px;
+  font-size: 12px;
   font-style: normal;
   font-weight: normal; }
   #conversejs .room-info li.room-info {
     display: block;
     margin-left: 5px; }
   #conversejs .room-info p.room-info {
-    line-height: 22px;
+    line-height: 16px;
     margin: 0;
     display: block;
     white-space: normal; }
@@ -7821,7 +7821,7 @@ body {
       color: #A53214;
       margin: 1em 0; }
     #conversejs #controlbox #converse-register .provider-title {
-      font-size: 26px;
+      font-size: 20px;
       margin: 0; }
     #conversejs #controlbox #converse-register .provider-score {
       width: 178px;
@@ -7870,7 +7870,7 @@ body {
     margin-left: 0;
     color: #666; }
     #conversejs #controlbox .oauth-login .icon-social:before {
-      font-size: 18px; }
+      font-size: 16px; }
   #conversejs #controlbox .controlbox-pane .userinfo {
     padding-bottom: 1em; }
     #conversejs #controlbox .controlbox-pane .userinfo .username {
@@ -7932,7 +7932,7 @@ body {
   #conversejs #controlbox .controlbox-pane {
     background-color: white;
     border: 0;
-    font-size: 16px;
+    font-size: 14px;
     left: 0;
     text-align: left;
     overflow-x: hidden;
@@ -8067,7 +8067,7 @@ body {
     #conversejs.fullscreen #controlbox #converse-login-panel .converse-form {
       padding: 3em 2em 3em; }
   #conversejs.fullscreen #controlbox .toggle-register-login {
-    line-height: 30px; }
+    line-height: 24px; }
   #conversejs.fullscreen #controlbox .brand-heading-container {
     flex: 0 0 100%;
     max-width: 100%;
@@ -8167,9 +8167,9 @@ body {
     #conversejs #converse-roster .roster-filter-form .roster-filter {
       width: 100%;
       margin: 0.2em;
-      font-size: calc(16px - 2px); }
+      font-size: calc(14px - 2px); }
     #conversejs #converse-roster .roster-filter-form .state-type {
-      font-size: calc(16px - 2px);
+      font-size: calc(14px - 2px);
       height: 30px;
       width: 100%; }
   #conversejs #converse-roster .roster-contacts {
@@ -8200,12 +8200,12 @@ body {
         display: block;
         overflow-y: hidden;
         text-shadow: 0 1px 0 #FAFAFA;
-        line-height: 16px;
+        line-height: 14px;
         width: 100%;
         height: 2em;
         padding-top: 0.5em; }
         #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a {
-          line-height: 22px; }
+          line-height: 16px; }
           #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a.fa {
             width: 1.5em; }
         #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .req-contact-name {
@@ -8227,7 +8227,7 @@ body {
             opacity: 1;
             border-radius: 10%;
             padding: 0.2em;
-            font-size: 14px; }
+            font-size: 12px; }
           #conversejs #converse-roster .roster-contacts .roster-group li .open-chat .contact-name {
             overflow: hidden;
             white-space: nowrap;
@@ -8244,7 +8244,7 @@ body {
             display: inline-block;
             height: 30px; }
         #conversejs #converse-roster .roster-contacts .roster-group li.current-xmpp-contact span {
-          font-size: 16px;
+          font-size: 14px;
           float: left;
           margin-right: 0.5em; }
         #conversejs #converse-roster .roster-contacts .roster-group li.odd {
@@ -8266,13 +8266,13 @@ body {
           width: 2em;
           display: none; }
           #conversejs #converse-roster .roster-contacts .roster-group li .remove-xmpp-contact:before {
-            font-size: 16px; }
+            font-size: 14px; }
         #conversejs #converse-roster .roster-contacts .roster-group li:hover {
           background-color: #eff4f7; }
           #conversejs #converse-roster .roster-contacts .roster-group li:hover .remove-xmpp-contact {
             display: inline-block; }
   #conversejs #converse-roster span.pending-contact-name {
-    line-height: 22px;
+    line-height: 16px;
     width: 100%; }
 
 #conversejs .list-container {
@@ -8374,7 +8374,7 @@ body {
   #conversejs.converse-embedded .chat-head-chatroom .chatroom-description,
   #conversejs .chat-head-chatroom .chatroom-description {
     color: #f6ccc1;
-    font-size: 18px;
+    font-size: 14px;
     font-size: 70%;
     margin-top: 3px;
     overflow-y: hidden;
@@ -8398,10 +8398,10 @@ body {
     color: #E77051; }
   #conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-jid,
   #conversejs .chat-head-chatroom .chat-title .chatroom-jid {
-    font-size: 14px; }
+    font-size: 12px; }
 #conversejs.converse-embedded .chatroom,
 #conversejs .chatroom {
-  width: 300px; }
+  width: 400px; }
   @media screen and (max-height: 450px) {
     #conversejs.converse-embedded .chatroom,
     #conversejs .chatroom {
@@ -8530,7 +8530,7 @@ body {
           #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li {
             cursor: default;
             display: block;
-            font-size: 14px;
+            font-size: 12px;
             overflow: hidden;
             padding: 0.25em 0.25em 0.25em 0;
             text-overflow: ellipsis; }
@@ -8579,7 +8579,7 @@ body {
         border-bottom-right-radius: 4px;
         border: 0;
         color: #666;
-        font-size: 16px;
+        font-size: 14px;
         height: 100%;
         width: 100%;
         overflow-y: auto; }
@@ -8621,19 +8621,35 @@ body {
     width: 100%;
     border: 1px solid #999; }
 
-#conversejs.converse-fullscreen .chat-head-chatroom,
-#conversejs.converse-mobile .chat-head-chatroom {
-  height: 62px;
-  font-size: 20px; }
-  #conversejs.converse-fullscreen .chat-head-chatroom .chat-title .chatroom-description,
-  #conversejs.converse-mobile .chat-head-chatroom .chat-title .chatroom-description {
-    font-size: 65%; }
+/* ******************* Overlay  styles *************************** */
+#conversejs.converse-overlayed .chatbox.chatroom {
+  min-width: 400px !important;
+  width: 400px; }
+  #conversejs.converse-overlayed .chatbox.chatroom .box-flyout {
+    min-width: 400px !important;
+    width: 400px; }
+  #conversejs.converse-overlayed .chatbox.chatroom .chatbox-title {
+    flex: 0 0 66.6666666667%;
+    max-width: 66.6666666667%; }
+    #conversejs.converse-overlayed .chatbox.chatroom .chatbox-title .chatroom-description {
+      font-size: 80%; }
+  #conversejs.converse-overlayed .chatbox.chatroom .chatroom-body .occupants .chatroom-features .feature {
+    font-size: 12px; }
+
+/* ******************* Fullpage styles *************************** */
 #conversejs.converse-fullscreen .chatroom .box-flyout,
 #conversejs.converse-mobile .chatroom .box-flyout {
   background-color: #E77051;
   border: 1.2em solid #E77051;
   border-top: 0.8em solid #E77051;
   width: 100%; }
+  #conversejs.converse-fullscreen .chatroom .box-flyout .chatbox-title,
+  #conversejs.converse-mobile .chatroom .box-flyout .chatbox-title {
+    flex: 0 0 75%;
+    max-width: 75%; }
+    #conversejs.converse-fullscreen .chatroom .box-flyout .chatbox-title .chatroom-description,
+    #conversejs.converse-mobile .chatroom .box-flyout .chatbox-title .chatroom-description {
+      font-size: 70%; }
   #conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body,
   #conversejs.converse-mobile .chatroom .box-flyout .chatroom-body {
     border-top-left-radius: 4px;
@@ -8660,10 +8676,10 @@ body {
       padding: 1em; }
       #conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .occupants .occupants-heading,
       #conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
-        font-size: 18px; }
+        font-size: 16px; }
       #conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list li,
       #conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list li {
-        font-size: 14px; }
+        font-size: 12px; }
 #conversejs.converse-fullscreen .chatroom .room-invite span .invited-contact,
 #conversejs.converse-mobile .chatroom .room-invite span .invited-contact {
   margin: 0 0 0.5em -1px; }
@@ -8710,7 +8726,7 @@ body {
 #conversejs .message.chat-info {
   color: #3AA569;
   font-size: 14px;
-  line-height: 20px;
+  line-height: 14px;
   padding: 0.35rem 1rem; }
   #conversejs .message.chat-info.badge {
     color: white; }

dev.html

@@ -26,14 +26,14 @@
             //     'prosody@conference.prosody.im',
             //     'jdev@conference.jabber.org'
             // ],
-            // websocket_url: 'ws://chat.example.org:5280/xmpp-websocket',
+            websocket_url: 'ws://chat.example.org:5280/xmpp-websocket',
             view_mode: 'fullscreen',
             archived_messages_page_size: '500',
             allow_public_bookmarks: true,
             notify_all_room_messages: [
                 'discuss@conference.conversejs.org'
             ],
-            // bosh_service_url: 'http://chat.example.org:5280/http-bind/',
+            bosh_service_url: 'http://chat.example.org:5280/http-bind/',
             bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
             message_archiving: 'always',
             debug: true

mockup/chatroom.html

@@ -23,7 +23,7 @@
             <div class="chatbox chatroom" id="chatroom">
                 <div class="flyout box-flyout">
                     <div class="chat-head chat-head-chatroom row no-gutters">
-                        <div class="col col-9">
+                        <div class="chatbox-title">
                             <div class="chat-title">Capulet's orchard</div>
                             <p class="chatroom-description">Two households, both alike in dignity, In fair Verona, where we lay our scene.</p>
                         </div>

sass/_chatrooms.scss

@@ -12,7 +12,7 @@
 
         .chatroom-description {
             color: lighten($chatroom-head-color, 25%);
-            font-size: $font-size-large;
+            font-size: $font-size;
             font-size: 70%;
             margin-top: 3px;
             overflow-y: hidden;
@@ -291,3 +291,96 @@
         }
     }
 }
+
+/* ******************* Overlay  styles *************************** */
+
+#conversejs.converse-overlayed {
+    .chatbox {
+        &.chatroom {
+            min-width: $chatroom-width !important;
+            width: $chatroom-width;
+            .box-flyout {
+                min-width: $chatroom-width !important;
+                width: $chatroom-width;
+            }
+            .chatbox-title {
+                @include make-col(8);
+                .chatroom-description {
+                    font-size: 80%;
+                }
+            }
+            .chatroom-body {
+                .occupants {
+                    .chatroom-features {
+                        .feature {
+                            font-size: $font-size-small;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+/* ******************* Fullpage styles *************************** */
+
+#conversejs.converse-fullscreen,
+#conversejs.converse-mobile {
+    .chatroom {
+        .box-flyout {
+            background-color: $chatroom-head-color;
+            border: $flyout-padding solid $chatroom-head-color;
+            border-top: 0.8em solid $chatroom-head-color;
+            width: 100%;
+
+            .chatbox-title {
+                @include make-col(9);
+                .chatroom-description {
+                    font-size: 70%;
+                }
+            }
+
+            .chatroom-body {
+                @include border-top-radius($chatbox-border-radius);
+                .chatroom-form-container {
+                    border-radius: $chatbox-border-radius;
+                }
+                .chat-area {
+                    border-top-left-radius: $chatbox-border-radius;
+                    min-width: auto;
+
+                    .chat-content {
+                        border-top-left-radius: $chatbox-border-radius;
+                    }
+                    &.full {
+                        max-width: 100%;
+                        .new-msgs-indicator {
+                            max-width: 100%;
+                        }
+                    }
+                }
+                .occupants {
+                    border-top-right-radius: $chatbox-border-radius;;
+                    padding: $occupants-padding;
+                    .occupants-heading {
+                        font-size: $font-size-large;
+                    }
+                    ul {
+                        &.occupant-list {
+                            li {
+                                font-size: $font-size-small;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .room-invite {
+            span {
+                .invited-contact {
+                    margin: 0 0 0.5em -1px;
+                }
+            }
+        }
+    }
+}

sass/_variables.scss

@@ -63,6 +63,8 @@ $message-them-color: $green !default;
 
 $roster-height: 194px !default;
 
+$flyout-padding: 1.2em;
+
 $chat-head-color: $green !default;
 $chat-head-text-color: white !default;
 $chat-head-inverse-text-color: white !default;
@@ -110,10 +112,11 @@ $font-path: "../fonticons/fonts/" !default;
 $normal-font: "Helvetica", "Arial", sans-serif;
 $heading-font: 'Century Gothic', futura, 'URW Gothic L', Verdana, sans-serif !default;
 
-$chatroom-head-color: $red !default;
-$chatroom-color-light: $light-red !default;
 $chatroom-color-dark: $darkest-red !default;
+$chatroom-color-light: $light-red !default;
+$chatroom-head-color: $red !default;
 $chatroom-message-them-color: $green !default;
+$chatroom-width: 400px !default;
 
 $headline-head-color: $orange !default;
 
@@ -124,3 +127,17 @@ $box-close-button-padding-right: 4px !default;
 
 $chatbox-button-size: 14px !default;
 $fullpage-chatbox-button-size: 16px !default;
+
+$font-size-small: 12px !default;
+$font-size: 14px !default;
+$font-size-large: 16px !default;
+$font-size-huge: 20px !default;
+$legend-font-size: 16px !default;
+
+$line-height-small:  14px !default;
+$line-height:  16px !default;
+$line-height-large:  20px !default;
+$line-height-huge:  24px !default;
+
+$occupants-padding: 1em;
+

sass/converse.scss

@@ -49,7 +49,6 @@
 @import "roomslist";
 @import "roster";
 @import "chatrooms";
-@import "converse/chatrooms";
 @import "headline";
 @import "messages";
 @import "converse/minimized_chats";

sass/converse/_chatrooms.scss

-#conversejs {
-    .chatbox {
-        &.chatroom {
-            min-width: $chatroom-width !important;
-            width: $chatroom-width;
-            .box-flyout {
-                min-width: $chatroom-width !important;
-                width: $chatroom-width;
-            }
-
-            .chatroom-body {
-                .occupants {
-                    .chatroom-features {
-                        .feature {
-                            font-size: $font-size-small;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}

sass/converse/_variables.scss

@@ -10,17 +10,5 @@ $controlbox-head-height: 55px !default;
 
 $chatbox-hover-height: 1em !default;
 
-$font-size-small: 12px !default;
-$font-size: 14px !default;
-$font-size-large: 16px !default;
-$font-size-huge: 20px !default;
-$legend-font-size: 16px !default;
-
-$line-height-small:  14px !default;
-$line-height:  16px !default;
-$line-height-large:  20px !default;
-
 $chat-width: 250px !default;
 $chat-height: 450px !default;
-
-$chatroom-width: 400px !default;

sass/inverse.scss

@@ -51,7 +51,6 @@
 @import "inverse/roster";
 @import "bookmarks";
 @import "chatrooms";
-@import "inverse/chatrooms";
 @import "headline";
 @import "inverse/headline";
 @import "messages";

sass/inverse/_chatrooms.scss

-#conversejs.converse-fullscreen,
-#conversejs.converse-mobile {
-
-    .chat-head-chatroom {
-        height: $chatroom-head-height;
-        font-size: 20px;
-        .chat-title {
-            .chatroom-description {
-                font-size: 65%;
-            }
-        }
-    }
-
-    .chatroom {
-        .box-flyout {
-            background-color: $chatroom-head-color;
-            border: $flyout-padding solid $chatroom-head-color;
-            border-top: 0.8em solid $chatroom-head-color;
-            width: 100%;
-
-            .chatroom-body {
-                @include border-top-radius($chatbox-border-radius);
-                .chatroom-form-container {
-                    border-radius: $chatbox-border-radius;
-                }
-                .chat-area {
-                    border-top-left-radius: $chatbox-border-radius;
-                    min-width: auto;
-
-                    .chat-content {
-                        border-top-left-radius: $chatbox-border-radius;
-                    }
-                    &.full {
-                        max-width: 100%;
-                        .new-msgs-indicator {
-                            max-width: 100%;
-                        }
-                    }
-                }
-                .occupants {
-                    border-top-right-radius: $chatbox-border-radius;;
-                    padding: $padding;
-                    .occupants-heading {
-                        font-size: $font-size-large;
-                    }
-                    ul {
-                        &.occupant-list {
-                            li {
-                                font-size: $font-size-small;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-        .room-invite {
-            span {
-                .invited-contact {
-                    margin: 0 0 0.5em -1px;
-                }
-            }
-        }
-    }
-}

sass/inverse/_variables.scss

@@ -3,8 +3,6 @@ $emoji-picker-height: 150px !default;
 
 $roster-item-height: 30px !default;
 
-$flyout-padding: 1.2em;
-
 $chat-head-height: 62px !default;
 
 $controlbox-dropdown-height: 30px !default;
@@ -14,21 +12,5 @@ $rounded-border-radius: 4px !default;
 
 $chatbox-hover-height: 6px !default;
 
-$font-size-small: 14px !default;
-$font-size: 16px !default;
-$font-size-large: 18px !default;
-$font-size-huge: 26px !default;
-$legend-font-size: 18px !default;
-
-$line-height-small:  20px !default;
-$line-height:  22px !default;
-$line-height-large:  24px !default;
-$line-height-huge:  30px !default;
-
 $chat-width: 100% !default;
 $chat-height: 100%;
-
-$padding: 1em;
-
-$chatroom-head-height: 62px !default;
-$chatroom-width: 300px !default;

src/templates/chatroom_head.html

-<div class="col">
+<div class="chatbox-title">
     <div class="chat-title" title="{{{o.jid}}}">
         {[ if (o.name && o.name !== o.Strophe.getNodeFromJid(o.jid)) { ]}
             {{{ o.name }}}