Remove sass/inverse/_chatbox.scss

updates #1091

css/converse.css

@@ -7678,21 +7678,78 @@ body.reset {
       margin: -1em; } }
 /* ******************* Fullpage styles *************************** */
 #conversejs.converse-fullscreen .flyout {
-  bottom: 6px; }
-#conversejs.converse-fullscreen .box-flyout {
-  height: 100%;
-  min-height: 50%; }
+  border-radius: 0;
+  border-top: 0.8em solid #3AA569;
+  border: 1.2em solid #3AA569;
+  bottom: 0; }
 #conversejs.converse-fullscreen .chatbox-btn {
-  font-size: 16px; }
+  font-size: 16px;
+  margin: 0 0.3em; }
 #conversejs.converse-fullscreen .chat-head {
-  height: 62px; }
+  height: 62px;
+  font-size: 20px;
+  padding: 0; }
   #conversejs.converse-fullscreen .chat-head .chatbox-buttons {
     flex: 0 0 25%;
     max-width: 25%; }
+  #conversejs.converse-fullscreen .chat-head .user-custom-message {
+    font-size: 50%;
+    height: auto;
+    line-height: 16px; }
 #conversejs.converse-fullscreen .chat-textarea {
   max-height: 400px; }
 #conversejs.converse-fullscreen .emoji-picker {
   height: 150px; }
+#conversejs.converse-fullscreen .chatbox {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  position: relative;
+  width: 100%;
+  min-height: 1px;
+  padding-right: 15px;
+  padding-left: 15px; }
+  @media (min-width: 768px) {
+    #conversejs.converse-fullscreen .chatbox {
+      flex: 0 0 75%;
+      max-width: 75%; } }
+  @media (min-width: 1200px) {
+    #conversejs.converse-fullscreen .chatbox {
+      flex: 0 0 83.3333333333%;
+      max-width: 83.3333333333%; } }
+  #conversejs.converse-fullscreen .chatbox .box-flyout {
+    background-color: #3AA569;
+    box-shadow: none;
+    height: 100vh;
+    min-height: 50vh;
+    width: 100%; }
+  #conversejs.converse-fullscreen .chatbox .chat-body {
+    background-color: #3AA569;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px; }
+    #conversejs.converse-fullscreen .chatbox .chat-body .chat-message {
+      line-height: 16px;
+      font-size: 12px; }
+      #conversejs.converse-fullscreen .chatbox .chat-body .chat-message .chat-msg-author {
+        line-height: 16px; }
+      #conversejs.converse-fullscreen .chatbox .chat-body .chat-message .chat-msg-content {
+        line-height: 16px; }
+        #conversejs.converse-fullscreen .chatbox .chat-body .chat-message .chat-msg-content .emojione {
+          height: 16px;
+          margin-bottom: -4px; }
+  #conversejs.converse-fullscreen .chatbox .chat-content {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px; }
+  #conversejs.converse-fullscreen .chatbox .chat-title {
+    font-size: 20px;
+    line-height: 24px; }
+  #conversejs.converse-fullscreen .chatbox .sendXMPPMessage ul {
+    width: 100%; }
+  #conversejs.converse-fullscreen .chatbox .sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category-picker {
+    margin-right: 5em; }
+  #conversejs.converse-fullscreen .chatbox .sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category {
+    padding-left: 10px;
+    padding-right: 10px; }
 
 @media screen and (max-width: 767px) {
   #conversejs:not(.converse-embedded) > .row {
@@ -7708,6 +7765,9 @@ body.reset {
       bottom: 0;
       height: 100vh;
       box-shadow: none; } }
+@media screen and (max-width: 767px) {
+  #conversejs:not(.converse-embedded).converse-fullscreen .chatbox {
+    width: calc(100% - 50px); } }
 #conversejs .set-xmpp-status .fa-circle, #conversejs .xmpp-status .fa-circle, #conversejs .roster-contacts .fa-circle {
   color: #3AA569; }
 #conversejs .set-xmpp-status .fa-minus-circle, #conversejs .xmpp-status .fa-minus-circle, #conversejs .roster-contacts .fa-minus-circle {
@@ -8320,9 +8380,6 @@ body.reset {
         #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
         #conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
           height: 100%; }
-        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area.full,
-        #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full {
-          min-width: 100%; }
       #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants,
       #conversejs .chatroom .box-flyout .chatroom-body .occupants {
         display: flex;
@@ -8512,8 +8569,7 @@ body.reset {
       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; }
+      border-top-left-radius: 4px; }
       #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; }

css/inverse.css

@@ -7614,6 +7614,51 @@ body.reset {
       top: 0;
       left: 0; }
 
+/* ******************* Overlay and embedded styles *************************** */
+#conversejs.converse-embedded .chat-head,
+#conversejs.converse-overlayed .chat-head {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px; }
+  @media screen and (max-height: 450px) {
+    #conversejs.converse-embedded .chat-head,
+    #conversejs.converse-overlayed .chat-head {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0; } }
+  @media screen and (max-width: 480px) {
+    #conversejs.converse-embedded .chat-head,
+    #conversejs.converse-overlayed .chat-head {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0; } }
+#conversejs.converse-embedded .chatbox,
+#conversejs.converse-overlayed .chatbox {
+  min-width: 250px !important;
+  width: 250px; }
+  #conversejs.converse-embedded .chatbox .box-flyout,
+  #conversejs.converse-overlayed .chatbox .box-flyout {
+    min-width: 250px !important;
+    width: 250px; }
+  #conversejs.converse-embedded .chatbox .chat-body .chat-message,
+  #conversejs.converse-overlayed .chatbox .chat-body .chat-message {
+    line-height: 20px; }
+    #conversejs.converse-embedded .chatbox .chat-body .chat-message .chat-msg-author,
+    #conversejs.converse-overlayed .chatbox .chat-body .chat-message .chat-msg-author {
+      line-height: 20px; }
+    #conversejs.converse-embedded .chatbox .chat-body .chat-message .chat-msg-content,
+    #conversejs.converse-overlayed .chatbox .chat-body .chat-message .chat-msg-content {
+      line-height: 20px; }
+      #conversejs.converse-embedded .chatbox .chat-body .chat-message .chat-msg-content .emojione,
+      #conversejs.converse-overlayed .chatbox .chat-body .chat-message .chat-msg-content .emojione {
+        margin-bottom: -5px; }
+#conversejs.converse-embedded .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu,
+#conversejs.converse-overlayed .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu {
+  min-width: 235px; }
+  #conversejs.converse-embedded .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
+  #conversejs.converse-overlayed .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
+    width: 100%; }
+    #conversejs.converse-embedded .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .emoji-category,
+    #conversejs.converse-overlayed .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .emoji-category {
+      float: left; }
+
 #conversejs.converse-overlayed .flyout {
   bottom: 1em; }
 #conversejs.converse-overlayed .box-flyout {
@@ -7626,52 +7671,35 @@ body.reset {
 #conversejs.converse-overlayed .emoji-picker {
   height: 100px; }
 
-#conversejs.converse-fullscreen .flyout {
-  bottom: 6px; }
-#conversejs.converse-fullscreen .box-flyout {
-  height: 100%;
-  min-height: 50%; }
-#conversejs.converse-fullscreen .chatbox-btn {
-  font-size: 16px; }
-#conversejs.converse-fullscreen .chat-head {
-  height: 62px; }
-  #conversejs.converse-fullscreen .chat-head .chatbox-buttons {
-    flex: 0 0 25%;
-    max-width: 25%; }
-#conversejs.converse-fullscreen .chat-textarea {
-  max-height: 400px; }
-#conversejs.converse-fullscreen .emoji-picker {
-  height: 150px; }
-
-@media screen and (max-width: 767px) {
-  #conversejs:not(.converse-embedded) > .row {
-    flex-direction: row-reverse; }
-  #conversejs:not(.converse-embedded) #converse-login-panel .converse-form {
-    padding: 3em 2em 3em; }
-  #conversejs:not(.converse-embedded) .sidebar {
-    display: block; }
-  #conversejs:not(.converse-embedded) .chatbox {
-    width: calc(100% - 50px); }
-    #conversejs:not(.converse-embedded) .chatbox .row .box-flyout {
-      left: 50px;
-      bottom: 0;
-      height: 100vh;
-      box-shadow: none; } }
-#conversejs.converse-fullscreen .chatbox-btn {
-  font-size: 16px;
-  margin: 0 0.3em; }
+@media (max-width: 767.98px) {
+  #conversejs.converse-overlayed > .row {
+    flex-direction: column; }
+    #conversejs.converse-overlayed > .row.no-gutters {
+      margin: -1em; } }
+/* ******************* Fullpage styles *************************** */
 #conversejs.converse-fullscreen .flyout {
   border-radius: 0;
-  border: 1.2em solid #3AA569;
   border-top: 0.8em solid #3AA569;
+  border: 1.2em solid #3AA569;
   bottom: 0; }
+#conversejs.converse-fullscreen .chatbox-btn {
+  font-size: 16px;
+  margin: 0 0.3em; }
 #conversejs.converse-fullscreen .chat-head {
+  height: 62px;
   font-size: 20px;
   padding: 0; }
+  #conversejs.converse-fullscreen .chat-head .chatbox-buttons {
+    flex: 0 0 25%;
+    max-width: 25%; }
   #conversejs.converse-fullscreen .chat-head .user-custom-message {
     font-size: 50%;
     height: auto;
     line-height: 16px; }
+#conversejs.converse-fullscreen .chat-textarea {
+  max-height: 400px; }
+#conversejs.converse-fullscreen .emoji-picker {
+  height: 150px; }
 #conversejs.converse-fullscreen .chatbox {
   width: 100%;
   height: 100%;
@@ -7691,9 +7719,10 @@ body.reset {
       max-width: 83.3333333333%; } }
   #conversejs.converse-fullscreen .chatbox .box-flyout {
     background-color: #3AA569;
+    box-shadow: none;
     height: 100vh;
-    width: 100%;
-    box-shadow: none; }
+    min-height: 50vh;
+    width: 100%; }
   #conversejs.converse-fullscreen .chatbox .chat-body {
     background-color: #3AA569;
     border-top-left-radius: 4px;
@@ -7723,7 +7752,21 @@ body.reset {
     padding-right: 10px; }
 
 @media screen and (max-width: 767px) {
-  #conversejs:not(.converse-embedded).fullscreen .chatbox {
+  #conversejs:not(.converse-embedded) > .row {
+    flex-direction: row-reverse; }
+  #conversejs:not(.converse-embedded) #converse-login-panel .converse-form {
+    padding: 3em 2em 3em; }
+  #conversejs:not(.converse-embedded) .sidebar {
+    display: block; }
+  #conversejs:not(.converse-embedded) .chatbox {
+    width: calc(100% - 50px); }
+    #conversejs:not(.converse-embedded) .chatbox .row .box-flyout {
+      left: 50px;
+      bottom: 0;
+      height: 100vh;
+      box-shadow: none; } }
+@media screen and (max-width: 767px) {
+  #conversejs:not(.converse-embedded).converse-fullscreen .chatbox {
     width: calc(100% - 50px); } }
 #conversejs .set-xmpp-status .fa-circle, #conversejs .xmpp-status .fa-circle, #conversejs .roster-contacts .fa-circle {
   color: #3AA569; }
@@ -8442,9 +8485,6 @@ body.reset {
         #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
         #conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
           height: 100%; }
-        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area.full,
-        #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full {
-          min-width: 100%; }
       #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants,
       #conversejs .chatroom .box-flyout .chatroom-body .occupants {
         display: flex;
@@ -8634,8 +8674,7 @@ body.reset {
       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; }
+      border-top-left-radius: 4px; }
       #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; }
@@ -8803,27 +8842,20 @@ body.reset {
 @media screen and (max-width: 767px) {
   #conversejs:not(.converse-embedded) .message.chat-msg .chat-msg-author {
     white-space: normal; } }
-#converse-embedded-chat [hidden],
 #conversejs [hidden] {
   display: none; }
-#converse-embedded-chat .visually-hidden,
 #conversejs .visually-hidden {
   position: absolute;
   clip: rect(0, 0, 0, 0); }
-#converse-embedded-chat .form-group .awesomplete,
 #conversejs .form-group .awesomplete {
   width: 100%; }
-#converse-embedded-chat div.awesomplete,
 #conversejs div.awesomplete {
   display: inline-block;
   position: relative; }
-  #converse-embedded-chat div.awesomplete mark,
   #conversejs div.awesomplete mark {
     background: #FFB9A7; }
-  #converse-embedded-chat div.awesomplete > input,
   #conversejs div.awesomplete > input {
     display: block; }
-  #converse-embedded-chat div.awesomplete > ul,
   #conversejs div.awesomplete > ul {
     position: absolute;
     left: 0;
@@ -8840,7 +8872,6 @@ body.reset {
     border: 1px solid rgba(0, 0, 0, 0.3);
     box-shadow: 0.05em 0.2em 0.6em rgba(0, 0, 0, 0.2);
     text-shadow: none; }
-    #converse-embedded-chat div.awesomplete > ul:before,
     #conversejs div.awesomplete > ul:before {
       content: "";
       position: absolute;
@@ -8854,44 +8885,34 @@ body.reset {
       border-bottom: 0;
       -webkit-transform: rotate(45deg);
       transform: rotate(45deg); }
-    #converse-embedded-chat div.awesomplete > ul > li,
     #conversejs div.awesomplete > ul > li {
       text-overflow: ellipsis;
       overflow-x: hidden;
       position: relative;
       cursor: pointer;
       padding: 1em; }
-#converse-embedded-chat div.awesomplete > ul[hidden],
-#converse-embedded-chat div.awesomplete > ul:empty,
 #conversejs div.awesomplete > ul[hidden],
 #conversejs div.awesomplete > ul:empty {
   display: none; }
 @supports (transform: scale(0)) {
-  #converse-embedded-chat div.awesomplete > ul,
   #conversejs div.awesomplete > ul {
     transition: 0.3s cubic-bezier(0.4, 0.2, 0.5, 1.4);
     transform-origin: 1.43em -.43em; }
-  #converse-embedded-chat div.awesomplete > ul[hidden],
-  #converse-embedded-chat div.awesomplete > ul:empty,
   #conversejs div.awesomplete > ul[hidden],
   #conversejs div.awesomplete > ul:empty {
     opacity: 0;
     transform: scale(0);
     display: block;
     transition-timing-function: ease; } }
-#converse-embedded-chat div.awesomplete > ul > li:hover,
 #conversejs div.awesomplete > ul > li:hover {
   background: #E77051;
   color: white; }
-#converse-embedded-chat div.awesomplete > ul > li[aria-selected="true"],
 #conversejs div.awesomplete > ul > li[aria-selected="true"] {
   background: #3d6d8f;
   color: white; }
-#converse-embedded-chat div.awesomplete li:hover mark,
 #conversejs div.awesomplete li:hover mark {
   background: #A53214;
   color: white; }
-#converse-embedded-chat div.awesomplete li[aria-selected="true"] mark,
 #conversejs div.awesomplete li[aria-selected="true"] mark {
   background: #3d6b00;
   color: inherit; }

sass/_chatbox.scss

@@ -525,20 +525,27 @@
 
 #conversejs.converse-fullscreen  {
     .flyout {
-        bottom: $fullpage-chatbox-hover-height;
-    }
-    .box-flyout {
-        height: $fullpage-chat-height;
-        min-height: $fullpage-chat-height/2;
+        border-radius: 0;
+        border-top: 0.8em solid $chat-head-color;
+        border: $flyout-padding solid $chat-head-color;
+        bottom: 0;
     }
     .chatbox-btn {
         font-size: $fullpage-chatbox-button-size;
+        margin: 0 0.3em;
     }
     .chat-head {
         height: $fullpage-chat-head-height;
         .chatbox-buttons {
             @include make-col(3);
         }
+        font-size: $font-size-huge;
+        padding: 0;
+        .user-custom-message {
+            font-size: 50%;
+            height: auto;
+            line-height: $line-height;
+        }
     }
     .chat-textarea {
         max-height: $fullpage-max-chat-textarea-height;
@@ -546,6 +553,74 @@
     .emoji-picker {
         height: $fullpage-emoji-picker-height;
     }
+
+    .chatbox {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+
+        @include make-col-ready();
+        @include media-breakpoint-up(md) {
+            @include make-col(9);
+        }
+        @include media-breakpoint-up(xl) {
+            @include make-col(10);
+        }
+
+        .box-flyout {
+            background-color: $chat-head-color;
+            box-shadow: none;
+            height: $fullpage-chat-height;
+            min-height: $fullpage-chat-height/2;
+            width: $fullpage-chat-width;
+        }
+        .chat-body {
+            background-color: $chat-head-color;
+            border-top-left-radius: $chatbox-border-radius;
+            border-top-right-radius: $chatbox-border-radius;
+
+            .chat-message {
+                line-height: $line-height;
+                font-size: $font-size-small;
+                .chat-msg-author {
+                    line-height: $line-height;
+                }
+                .chat-msg-content {
+                    line-height: $line-height;
+                    .emojione {
+                        height: $line-height;
+                        margin-bottom: -$line-height/4;
+                    }
+                }
+            }
+        }
+        .chat-content {
+            border-top-left-radius: $chatbox-border-radius;
+            border-top-right-radius: $chatbox-border-radius;
+        }
+        .chat-title {
+            font-size: $font-size-huge;
+            line-height: $line-height-huge;
+        }
+        .sendXMPPMessage {
+            ul {
+                width: 100%;
+            }
+            .toggle-smiley {
+                ul {
+                    &.emoji-toolbar {
+                        .emoji-category-picker {
+                            margin-right: 5em;
+                        }
+                        .emoji-category {
+                            padding-left: 10px;
+                            padding-right: 10px;
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
 
 @media screen and (max-width: 767px) {
@@ -577,3 +652,11 @@
         }
     }
 }
+
+@media screen and (max-width: 767px) {
+    #conversejs:not(.converse-embedded).converse-fullscreen {
+        .chatbox {
+            width: calc(100% - 50px);
+        }
+    }
+}

sass/_chatrooms.scss

@@ -107,9 +107,6 @@
                     .chat-content {
                         height: 100%;
                     }
-                    &.full {
-                        min-width: 100%;
-                    }
                 }
                 .occupants {
                     display: flex;
@@ -278,20 +275,6 @@
     }
 }
 
-@media screen and (max-width: 767px) {
-    #conversejs:not(.converse-embedded)  {
-        .chatbox {
-            .box-flyout {
-                .chatroom-body {
-                    .chat-area {
-                    }
-                }
-            }
-        }
-    }
-}
-
-
 /* ******************* Overlay  styles *************************** */
 
 #conversejs.converse-overlayed {
@@ -351,8 +334,6 @@
                 }
                 .chat-area {
                     border-top-left-radius: $chatbox-border-radius;
-                    min-width: $fullpage-chat-width;
-
                     .chat-content {
                         border-top-left-radius: $chatbox-border-radius;
                     }

sass/_variables.scss

@@ -132,6 +132,7 @@ $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;
@@ -141,22 +142,15 @@ $line-height-huge:  24px !default;
 
 $occupants-padding: 1em;
 
-$overlayed-max-chat-textarea-height: 200px !default;
-$fullpage-max-chat-textarea-height: 400px !default;
-
+$fullpage-chat-head-height: 62px !default;
+$fullpage-chat-height: 100vh;
+$fullpage-chat-width: 100%;
 $fullpage-emoji-picker-height: 150px !default;
-$overlayed-emoji-picker-height: 100px !default;
+$fullpage-max-chat-textarea-height: 400px !default;
 
-$fullpage-chat-head-height: 62px !default;
 $overlayed-chat-head-height: 55px !default;
-
-$fullpage-chatbox-hover-height: 6px !default;
-$overlayed-chatbox-hover-height: 1em !default;
-
-$fullpage-chat-height: 100%;
 $overlayed-chat-height: 450px !default;
-
-$fullpage-chat-width: auto;
 $overlayed-chat-width: 250px !default;
-
-$roster-item-height: 30px !default;
+$overlayed-chatbox-hover-height: 1em !default;
+$overlayed-emoji-picker-height: 100px !default;
+$overlayed-max-chat-textarea-height: 200px !default;

sass/inverse.scss

@@ -41,7 +41,6 @@
 @import "forms";
 @import "profile";
 @import "chatbox";
-@import "inverse/chatbox";
 @import "controlbox";
 @import "inverse/controlbox";
 @import "roster";

sass/inverse/_chatbox.scss

@@ -1,96 +0,0 @@
-#conversejs.converse-fullscreen {
-    .chatbox-btn {
-        font-size: $font-size-large;
-        margin: 0 0.3em;
-    }
-    .flyout {
-        border-radius: 0;
-        border: $flyout-padding solid $chat-head-color;
-        border-top: 0.8em solid $chat-head-color;
-        bottom: 0;
-    }
-    .chat-head {
-        font-size: 20px;
-        padding: 0;
-        .user-custom-message {
-            font-size: 50%;
-            height: auto;
-            line-height: $line-height;
-        }
-    }
-    .chatbox {
-        width: 100%;
-        height: 100%;
-        margin: 0;
-
-        @include make-col-ready();
-        @include media-breakpoint-up(md) {
-            @include make-col(9);
-        }
-        @include media-breakpoint-up(xl) {
-            @include make-col(10);
-        }
-
-        .box-flyout {
-            background-color: $chat-head-color;
-            height: 100vh;
-            width: 100%;
-            box-shadow: none;
-        }
-        .chat-body {
-            background-color: $chat-head-color;
-            border-top-left-radius: $chatbox-border-radius;
-            border-top-right-radius: $chatbox-border-radius;
-
-            .chat-message {
-                line-height: $line-height;
-                font-size: $font-size-small;
-                .chat-msg-author {
-                    line-height: $line-height;
-                }
-                .chat-msg-content {
-                    line-height: $line-height;
-                    .emojione {
-                        height: $line-height;
-                        margin-bottom: -$line-height/4;
-                    }
-                }
-            }
-        }
-        .chat-content {
-            border-top-left-radius: $chatbox-border-radius;
-            border-top-right-radius: $chatbox-border-radius;
-        }
-        .chat-title {
-            font-size: $font-size-huge;
-            line-height: $line-height-huge;
-        }
-
-        .sendXMPPMessage {
-            ul {
-                width: 100%;
-            }
-            .toggle-smiley {
-                ul {
-                    &.emoji-toolbar {
-                        .emoji-category-picker {
-                            margin-right: 5em;
-                        }
-                        .emoji-category {
-                            padding-left: 10px;
-                            padding-right: 10px;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-@media screen and (max-width: 767px) {
-    #conversejs:not(.converse-embedded).fullscreen {
-        .chatbox {
-            width: calc(100% - 50px);
-        }
-    }
-}