Break Sass up into more files

And import where appropriate to allow for custom builds that are still styled properly

Makefile

@@ -119,7 +119,6 @@ package-lock.json: package.json
 
 node_modules: $(LERNA) package.json package-lock.json src/headless/package.json src/headless/package-lock.json
 	npm run lerna
-	npm rebuild node-sass
 
 .PHONY: clean
 clean:

src/plugins/chatview/bottom-panel.js

@@ -6,6 +6,8 @@ import { _converse, api, converse } from "@converse/headless/core";
 import { html, render } from 'lit';
 import { clearMessages, parseMessageForCommands } from './utils.js';
 
+import './styles/chat-bottom-panel.scss';
+
 const { u } = converse.env;
 
 export default class ChatBottomPanel extends ElementView {

src/plugins/chatview/heading.js

@@ -7,6 +7,8 @@ import { _converse, api } from "@converse/headless/core";
 import { getHeadingDropdownItem, getHeadingStandaloneButton } from 'plugins/chatview/utils.js';
 import { render } from 'lit';
 
+import './styles//chat-head.scss';
+
 
 export default class ChatHeading extends ElementView {
 

src/plugins/chatview/index.js

@@ -12,7 +12,7 @@ import ChatBoxView from './view.js';
 import chatview_api from './api.js';
 import { _converse, api, converse } from '@converse/headless/core';
 
-import './styles/_chatbox.scss';
+import './styles/index.scss';
 
 const { Strophe } = converse.env;
 

src/plugins/chatview/styles/_chatbox.scss

@@ -1,653 +0,0 @@
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/mixins";
-@import "shared/styles/_variables.scss";
-
-#conversejs {
-    @import "bootstrap/scss/media";
-
-    converse-controlbox-navback {
-        display: none;
-    }
-
-    .flyout {
-        position: absolute;
-
-        @media screen and (max-height: $mobile-landscape-height) {
-            border-radius: 0;
-        }
-        @media screen and (max-width: $mobile-portrait-length) {
-            border-radius: 0;
-        }
-
-        @media screen and (max-height: $mobile-landscape-height) {
-            bottom: 0;
-        }
-        @media screen and (max-width: $mobile-portrait-length) {
-            bottom: 0;
-        }
-    }
-
-    .chatbox-btn {
-        border-radius: 25%;
-        border: none;
-        cursor: pointer;
-        font-size: var(--chatbox-button-size);
-        margin: 0 0.2em;
-        padding: 0 0 0 0.5em;
-        text-decoration: none;
-
-        &:active {
-            position: relative;
-            top: 1px;
-        }
-    }
-
-    .chat-head {
-        display: flex;
-        flex-direction: row;
-        color: #ffffff;
-        font-size: 100%;
-        margin: 0;
-        padding: 0;
-        position: relative;
-
-        &.chat-head-chatbox {
-            background-color: var(--chat-head-color);
-        }
-
-        .avatar {
-            margin-right: 0.5em;
-        }
-
-        .show-msg-author-modal {
-            color: #ffffff !important;
-        }
-
-        .chat-head__desc {
-            color: var(--chat-head-color-lighten-50-percent);
-            font-size: var(--font-size-small);
-            margin: 0;
-            overflow: hidden;
-            padding: 0.5rem 1rem 0.5rem 1rem;
-            text-overflow: ellipsis;
-            width: 100%;
-            max-height: 5em;
-        }
-
-        .chatbox-title {
-            padding: 0.75rem 1rem 0 1rem;
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-            width: 100%;
-        }
-
-        .chatbox-title--no-desc {
-            padding: 0.75rem 1rem;
-        }
-
-        .chatbox-title--row {
-            display: flex;
-            flex-direction: row;
-            overflow: hidden;
-        }
-
-        .chatbox-title__text {
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        .chatbox-title__buttons {
-            display: flex;
-            flex-direction: row-reverse;
-            flex-wrap: nowrap;
-            padding: 0;
-        }
-
-        a, a:visited, a:hover, a:not([href]):not([tabindex]) {
-            &.chatbox-btn {
-                &.fa,
-                &.fas,
-                &.far {
-                    color: white;
-                    &.button-on:before {
-                        padding: 0.2em;
-                        background-color: var(--chat-head-text-color);
-                        color: var(--chat-head-color);
-                    }
-                }
-            }
-        }
-
-        .chatbox-btn {
-            color: white;
-            &.fa, &.far, &.fas  {
-                color: white;
-            }
-            &:active {
-                position: relative;
-                top: 1px;
-            }
-            &.button-on:before {
-                border-radius: 5%;
-                background-color: var(--chat-head-text-color);
-                color: var(--chat-head-color);
-            }
-        }
-    }
-
-    .chatbox {
-        text-align: left;
-        margin: 0 var(--chat-gutter);
-
-        @media screen and (max-height: $mobile-landscape-height) {
-            margin: 0;
-            width: var(--mobile-chat-width);
-        }
-        @media screen and (max-width: $mobile-portrait-length) {
-            margin: 0;
-            width: var(--mobile-chat-width);
-        }
-
-        .box-flyout {
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
-            z-index: 2;
-            overflow: hidden;
-            width: 100%;
-
-            @media screen and (max-height: $mobile-landscape-height) {
-                height: var(--mobile-chat-height);
-                width: var(--mobile-chat-width);
-                height: var(--fullpage-chat-height);
-            }
-            @media screen and (max-width: $mobile-portrait-length) {
-                height: var(--mobile-chat-height);
-                width: var(--mobile-chat-width);
-                height: var(--fullpage-chat-height);
-            }
-        }
-        .chat-title {
-            display: var(--heading-display);
-            font-family: var(--heading-font);
-            color: var(--heading-color);
-            display: block;
-            line-height: var(--line-height-large);
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            &.groupchat {
-                padding-right: var(--chatroom-head-title-padding-right);
-            }
-            a {
-                color: var(--chat-head-text-color);
-                width: 100%;
-            }
-        }
-        .chat-body {
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            background-color: var(--chat-textarea-background-color);
-            border-bottom-left-radius: var(--chatbox-border-radius);
-            border-bottom-right-radius: var(--chatbox-border-radius);
-
-            @media screen and (max-height: $mobile-landscape-height) {
-                border-bottom-left-radius: 0;
-                border-bottom-right-radius: 0;
-            }
-            @media screen and (max-width: $mobile-portrait-length) {
-                border-bottom-left-radius: 0;
-                border-bottom-right-radius: 0;
-            }
-            border-top: 0;
-            p {
-                color: var(--text-color);
-                font-size: var(--message-font-size);
-                margin: 0;
-                padding: 5px;
-            }
-        }
-        .new-msgs-indicator {
-            position: relative;
-            width: 100%;
-            cursor: pointer;
-            background-color: var(--chat-head-color);
-            color: var(--light-background-color);
-            padding: 0.5em;
-            font-size: 0.9em;
-            text-align: center;
-            z-index: 20;
-            white-space: nowrap;
-            margin-bottom: 0.25em;
-        }
-        .chat-content {
-            background-color: var(--chat-content-background-color);
-            border: 0;
-            color: var(--text-color);
-            font-size: var(--message-font-size);
-            height: 100%;
-            line-height: 1.3em;
-            overflow: hidden;
-            padding: 0;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-
-            converse-chat-content {
-                display: flex;
-                flex-direction: column;
-                height: 100%;
-                justify-content: space-between;
-            }
-
-            converse-chat-message {
-                .spinner {
-                    width: 100%;
-                    overflow-y: hidden;
-                }
-            }
-
-            .chat-content__help {
-                max-height: 100%;
-                converse-chat-help {
-                    border-top: 1px solid var(--chat-head-color);
-                    display: block;
-                    height: 100%;
-                    overflow-y: auto;
-                    padding: 0.5em 0;
-                }
-                .close-chat-help {
-                    float: right;
-                    padding-right: 1em;
-                    cursor: pointer;
-                    color: var(--chat-content-background-color);
-                    svg {
-                        fill: var(--chat-head-color);
-                    }
-                }
-            }
-
-            .chat-content__messages {
-                overflow-x: hidden;
-                overflow-y: auto;
-                height: 100%;
-            }
-
-            .chat-content__notifications {
-                height: 1.7em;
-                white-space: pre;
-                background-color: var(--chat-content-background-color);
-                color: var(--subdued-color);
-                font-size: 90%;
-                font-style: italic;
-                line-height: var(--line-height-small);
-                padding: 0 1em 0.3em;
-                &:before {
-                    content: " ";
-                }
-            }
-
-            video {
-                width: 100%
-            }
-            progress {
-                margin: 0.5em 0;
-                width: 100%
-            }
-        }
-
-        .chat-content-sendbutton {
-            height: calc(100% - (var(--chat-textarea-height) + var(--send-button-height) + 2 * var(--send-button-margin)));
-        }
-
-        .dropdown { /* status dropdown styles */
-            background-color: var(--light-background-color);
-            dd {
-                margin: 0;
-                padding: 0;
-                position: relative;
-            }
-        }
-
-        .sendXMPPMessage {
-            -moz-background-clip: padding;
-            -webkit-background-clip: padding-box;
-            border-bottom-radius: var(--chatbox-border-radius);
-            background-clip: padding-box;
-            background-color: white;
-            border: 0;
-            margin: 0;
-            padding: 0;
-            @media screen and (max-height: $mobile-landscape-height) {
-                width: 100%;
-            }
-            @media screen and (max-width: $mobile-portrait-length) {
-                width: 100%;
-            }
-
-            .suggestion-box__results {
-                &:after {
-                    display: none;
-                }
-            }
-
-            .spoiler-hint {
-                width: 100%;
-            }
-
-            .chat-textarea, input {
-                &:active, &:focus{
-                    outline-color: var(--chat-head-color);
-                }
-                &.correcting {
-                    background-color: var(--chat-correcting-color);
-                }
-            }
-
-            .chat-textarea {
-                color: var(--chat-textarea-color);
-                background-color: var(--chat-textarea-background-color);
-                border-top-left-radius: 0;
-                border-top-right-radius: 0;
-                border-bottom-radius: var(--chatbox-border-radius);
-                padding-left: 0.5em;
-                padding-right: 4.5em;
-                padding-top: 0.5em;
-                padding-bottom:0.5em;
-                width: 100%;
-                border: none;
-                min-height: var(--chat-textarea-height);
-                margin-bottom: -4px; // Not clear why this is necessar :(
-                resize: none;
-                &.spoiler {
-                    height: 42px;
-                }
-            }
-        }
-        .dragresize {
-            background: transparent;
-            border: 0;
-            margin: 0;
-            position: absolute;
-            top: 0;
-            z-index: 20;
-            &-top {
-                cursor: n-resize;
-                height: 5px;
-                width: 100%;
-            }
-            &-left,
-            &-occupants-left {
-                cursor: w-resize;
-                width: 5px;
-                height: 100%;
-                left: 0;
-            }
-            &-topleft {
-                cursor: nw-resize;
-                width: 15px;
-                height: 15px;
-                top: 0;
-                left: 0;
-            }
-        }
-    }
-}
-
-/* ******************* Overlay and embedded styles *************************** */
-
-#conversejs {
-    converse-chats.converse-embedded,
-    converse-chats.converse-overlayed {
-        .controlbox-head {
-            padding: 0.5em;
-        }
-        .chat-head {
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
-        }
-        .chatbox {
-            min-width: var(--overlayed-chat-width) !important;
-            width: var(--overlayed-chat-width);
-
-            .box-flyout {
-                min-width: var(--overlayed-chat-width) !important;
-                width: var(--overlayed-chat-width);
-            }
-        }
-    }
-
-    converse-chats.converse-overlayed  {
-        .chat-head, .box-flyout {
-            border-top-left-radius: var(--chatbox-border-radius);
-            border-top-right-radius: var(--chatbox-border-radius);
-            @media screen and (max-height: $mobile-landscape-height) {
-                border-top-left-radius: 0;
-                border-top-right-radius: 0;
-            }
-            @media screen and (max-width: $mobile-portrait-length) {
-                border-top-left-radius: 0;
-                border-top-right-radius: 0;
-            }
-        }
-
-        .flyout {
-            bottom: var(--overlayed-chatbox-hover-height);
-        }
-        .box-flyout {
-            height: var(--overlayed-chat-height);
-            min-height: calc(var(--overlayed-chat-height) / 2);
-        }
-        .chat-head {
-            min-height: var(--overlayed-chat-head-height);
-        }
-        .minimized-chats-flyout .chat-head {
-            cursor: default;
-        }
-        .chat-textarea {
-            max-height: var(--overlayed-max-chat-textarea-height);
-        }
-        .chatbox {
-            .chat-body {
-                height: calc(100% - var(--overlayed-chat-head-height));
-            }
-            .chatbox-title {
-                padding: 0.5rem 0.75rem 0 0.75rem;
-            }
-            .chatbox-title--no-desc {
-                padding: 0.5rem 0.75rem;
-            }
-            converse-dropdown {
-                .btn--standalone {
-                    padding: 0 0.2em;
-                    margin: 0 0 0 0.5em;
-                }
-            }
-        }
-    }
-}
-
-@include media-breakpoint-down(sm) {
-    #conversejs.converse-overlayed {
-        > .row {
-            flex-direction: column;
-            &.no-gutters {
-                margin: -1em;
-            }
-        }
-    }
-}
-
-
-#conversejs {
-    converse-chats.converse-embedded,
-    converse-chats.converse-fullscreen  {
-        .flyout {
-            border-radius: 0;
-            border:none;
-            bottom: 0;
-        }
-
-        .chatbox {
-            margin: 0;
-            margin-left: 15px;
-            .box-flyout {
-                box-shadow: none;
-                overflow: hidden;
-            }
-            &:not(#controlbox) {
-                .box-flyout {
-                    @include media-breakpoint-up(md) {
-                        max-width: 66.666667%;
-                    }
-                    @include media-breakpoint-up(lg) {
-                        max-width: 75%;
-                    }
-                    @include media-breakpoint-up(xl) {
-                        max-width: 83.333333%;
-                    }
-                }
-            }
-            @include media-breakpoint-up(md) {
-                @include make-col(8);
-            }
-            @include media-breakpoint-up(lg) {
-                @include make-col(9);
-            }
-            @include media-breakpoint-up(xl) {
-                @include make-col(10);
-            }
-        }
-
-        &.converse-singleton {
-            .flyout {
-                border: none !important;
-            }
-            .chat-head {
-                padding: 0.5em;
-            }
-            .chatbox {
-                margin: 0;
-                @include make-col-ready();
-                @include media-breakpoint-up(md) {
-                    @include make-col(12);
-                }
-                @include media-breakpoint-up(lg) {
-                    @include make-col(12);
-                }
-                @include media-breakpoint-up(xl) {
-                    @include make-col(12);
-                }
-            }
-        }
-    }
-
-    converse-chats.converse-embedded {
-        .chat-head {
-            font-size: var(--font-size-huge);
-        }
-
-        .chatbox {
-            .box-flyout {
-                bottom: 0;
-                height: 100%;
-                min-width: auto;
-                width: 100%;
-            }
-        }
-
-        .chat-textarea {
-            max-height: var(--fullpage-max-chat-textarea-height);
-        }
-    }
-}
-
-/* ******************* Fullpage styles *************************** */
-
-#conversejs {
-    converse-chats.converse-fullscreen  {
-        .chatbox-btn {
-            font-size: var(--fullpage-chatbox-button-size);
-            margin: 0 0.3em;
-        }
-        .chat-head {
-            font-size: var(--font-size-huge);
-        }
-        .chat-textarea {
-            max-height: var(--fullpage-max-chat-textarea-height);
-        }
-        .chatbox {
-            .box-flyout {
-                box-shadow: none;
-                height: var(--fullpage-chat-height);
-                min-height: calc(var(--fullpage-chat-height) / 2);
-                width: var(--fullpage-chat-width);
-                overflow: hidden;
-            }
-            .chat-body {
-                height: inherit;
-                overflow: hidden;
-                background-color: var(--chat-background-color);
-            }
-            .chat-title {
-                font-size: var(--font-size-huge);
-                line-height: var(--line-height-huge);
-            }
-            .sendXMPPMessage {
-                ul {
-                    width: 100%;
-                }
-            }
-        }
-    }
-}
-
-
-@include media-breakpoint-down(sm) {
-    #conversejs {
-        converse-chats:not(.converse-embedded)  {
-            > .row {
-                flex-direction: row-reverse;
-            }
-            #converse-login-panel {
-                .converse-form {
-                    padding: 3em 2em 3em;
-                }
-            }
-            .chatbox {
-                width: calc(100% - 50px);
-                .row {
-                    .box-flyout {
-                        left: 50px;
-                        bottom: 0;
-                        height: var(--fullpage-chat-height);
-                        box-shadow: none;
-                    }
-                }
-            }
-        }
-
-        converse-chats.converse-mobile,
-        converse-chats.converse-overlayed,
-        converse-chats.converse-fullscreen {
-            .chatbox {
-                .box-flyout {
-                    converse-controlbox-navback {
-                        margin: auto 0;
-                        margin-right: 1em;
-                        display: flex;
-                        .fa-arrow-left {
-                            &:before {
-                                color: var(--chat-head-text-color);
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}

src/plugins/chatview/styles/chat-bottom-panel.scss

@@ -0,0 +1,71 @@
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+@import "shared/styles/_variables.scss";
+
+#conversejs {
+    .chatbox {
+        .bottom-panel {
+
+            .chat-content-sendbutton {
+                height: calc(100% - (var(--chat-textarea-height) + var(--send-button-height) + 2 * var(--send-button-margin)));
+            }
+
+            .sendXMPPMessage {
+                -moz-background-clip: padding;
+                -webkit-background-clip: padding-box;
+                border-bottom-radius: var(--chatbox-border-radius);
+                background-clip: padding-box;
+                background-color: white;
+                border: 0;
+                margin: 0;
+                padding: 0;
+                @media screen and (max-height: $mobile-landscape-height) {
+                    width: 100%;
+                }
+                @media screen and (max-width: $mobile-portrait-length) {
+                    width: 100%;
+                }
+
+                .suggestion-box__results {
+                    &:after {
+                        display: none;
+                    }
+                }
+
+                .spoiler-hint {
+                    width: 100%;
+                }
+
+                .chat-textarea, input {
+                    &:active, &:focus{
+                        outline-color: var(--chat-head-color);
+                    }
+                    &.correcting {
+                        background-color: var(--chat-correcting-color);
+                    }
+                }
+
+                .chat-textarea {
+                    color: var(--chat-textarea-color);
+                    background-color: var(--chat-textarea-background-color);
+                    border-top-left-radius: 0;
+                    border-top-right-radius: 0;
+                    border-bottom-radius: var(--chatbox-border-radius);
+                    padding-left: 0.5em;
+                    padding-right: 4.5em;
+                    padding-top: 0.5em;
+                    padding-bottom:0.5em;
+                    width: 100%;
+                    border: none;
+                    min-height: var(--chat-textarea-height);
+                    margin-bottom: -4px; // Not clear why this is necessar :(
+                    resize: none;
+                    &.spoiler {
+                        height: 42px;
+                    }
+                }
+            }
+        }
+    }
+}

src/plugins/chatview/styles/chat-head.scss

@@ -0,0 +1,97 @@
+#conversejs {
+    .chatbox {
+        .chat-head {
+            display: flex;
+            flex-direction: row;
+            color: #ffffff;
+            font-size: 100%;
+            margin: 0;
+            padding: 0;
+            position: relative;
+
+            &.chat-head-chatbox {
+                background-color: var(--chat-head-color);
+            }
+
+            .avatar {
+                margin-right: 0.5em;
+            }
+
+            .show-msg-author-modal {
+                color: #ffffff !important;
+            }
+
+            .chat-head__desc {
+                color: var(--chat-head-color-lighten-50-percent);
+                font-size: var(--font-size-small);
+                margin: 0;
+                overflow: hidden;
+                padding: 0.5rem 1rem 0.5rem 1rem;
+                text-overflow: ellipsis;
+                width: 100%;
+                max-height: 5em;
+            }
+
+            .chatbox-title {
+                padding: 0.75rem 1rem 0 1rem;
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+                width: 100%;
+            }
+
+            .chatbox-title--no-desc {
+                padding: 0.75rem 1rem;
+            }
+
+            .chatbox-title--row {
+                display: flex;
+                flex-direction: row;
+                overflow: hidden;
+            }
+
+            .chatbox-title__text {
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+            .chatbox-title__buttons {
+                display: flex;
+                flex-direction: row-reverse;
+                flex-wrap: nowrap;
+                padding: 0;
+            }
+
+            a, a:visited, a:hover, a:not([href]):not([tabindex]) {
+                &.chatbox-btn {
+                    &.fa,
+                    &.fas,
+                    &.far {
+                        color: white;
+                        &.button-on:before {
+                            padding: 0.2em;
+                            background-color: var(--chat-head-text-color);
+                            color: var(--chat-head-color);
+                        }
+                    }
+                }
+            }
+
+            .chatbox-btn {
+                color: white;
+                &.fa, &.far, &.fas  {
+                    color: white;
+                }
+                &:active {
+                    position: relative;
+                    top: 1px;
+                }
+                &.button-on:before {
+                    border-radius: 5%;
+                    background-color: var(--chat-head-text-color);
+                    color: var(--chat-head-color);
+                }
+            }
+        }
+    }
+}

src/plugins/chatview/styles/chatbox.scss

@@ -0,0 +1,241 @@
+#conversejs {
+    .chatbox {
+        text-align: left;
+        margin: 0 var(--chat-gutter);
+
+        @media screen and (max-height: $mobile-landscape-height) {
+            margin: 0;
+            width: var(--mobile-chat-width);
+        }
+        @media screen and (max-width: $mobile-portrait-length) {
+            margin: 0;
+            width: var(--mobile-chat-width);
+        }
+
+        converse-controlbox-navback {
+            display: none;
+        }
+
+        .flyout {
+            position: absolute;
+
+            @media screen and (max-height: $mobile-landscape-height) {
+                border-radius: 0;
+            }
+            @media screen and (max-width: $mobile-portrait-length) {
+                border-radius: 0;
+            }
+
+            @media screen and (max-height: $mobile-landscape-height) {
+                bottom: 0;
+            }
+            @media screen and (max-width: $mobile-portrait-length) {
+                bottom: 0;
+            }
+        }
+
+        .chatbox-btn {
+            border-radius: 25%;
+            border: none;
+            cursor: pointer;
+            font-size: var(--chatbox-button-size);
+            margin: 0 0.2em;
+            padding: 0 0 0 0.5em;
+            text-decoration: none;
+
+            &:active {
+                position: relative;
+                top: 1px;
+            }
+        }
+
+        .box-flyout {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
+            z-index: 2;
+            overflow: hidden;
+            width: 100%;
+
+            @media screen and (max-height: $mobile-landscape-height) {
+                height: var(--mobile-chat-height);
+                width: var(--mobile-chat-width);
+                height: var(--fullpage-chat-height);
+            }
+            @media screen and (max-width: $mobile-portrait-length) {
+                height: var(--mobile-chat-height);
+                width: var(--mobile-chat-width);
+                height: var(--fullpage-chat-height);
+            }
+        }
+
+        .chat-title {
+            display: var(--heading-display);
+            font-family: var(--heading-font);
+            color: var(--heading-color);
+            display: block;
+            line-height: var(--line-height-large);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            &.groupchat {
+                padding-right: var(--chatroom-head-title-padding-right);
+            }
+            a {
+                color: var(--chat-head-text-color);
+                width: 100%;
+            }
+        }
+
+        .chat-body {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            background-color: var(--chat-textarea-background-color);
+            border-bottom-left-radius: var(--chatbox-border-radius);
+            border-bottom-right-radius: var(--chatbox-border-radius);
+
+            @media screen and (max-height: $mobile-landscape-height) {
+                border-bottom-left-radius: 0;
+                border-bottom-right-radius: 0;
+            }
+            @media screen and (max-width: $mobile-portrait-length) {
+                border-bottom-left-radius: 0;
+                border-bottom-right-radius: 0;
+            }
+            border-top: 0;
+            p {
+                color: var(--text-color);
+                font-size: var(--message-font-size);
+                margin: 0;
+                padding: 5px;
+            }
+        }
+        .new-msgs-indicator {
+            position: relative;
+            width: 100%;
+            cursor: pointer;
+            background-color: var(--chat-head-color);
+            color: var(--light-background-color);
+            padding: 0.5em;
+            font-size: 0.9em;
+            text-align: center;
+            z-index: 20;
+            white-space: nowrap;
+            margin-bottom: 0.25em;
+        }
+        .chat-content {
+            background-color: var(--chat-content-background-color);
+            border: 0;
+            color: var(--text-color);
+            font-size: var(--message-font-size);
+            height: 100%;
+            line-height: 1.3em;
+            overflow: hidden;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+
+            converse-chat-content {
+                display: flex;
+                flex-direction: column;
+                height: 100%;
+                justify-content: space-between;
+            }
+
+            converse-chat-message {
+                .spinner {
+                    width: 100%;
+                    overflow-y: hidden;
+                }
+            }
+
+            .chat-content__help {
+                max-height: 100%;
+                converse-chat-help {
+                    border-top: 1px solid var(--chat-head-color);
+                    display: block;
+                    height: 100%;
+                    overflow-y: auto;
+                    padding: 0.5em 0;
+                }
+                .close-chat-help {
+                    float: right;
+                    padding-right: 1em;
+                    cursor: pointer;
+                    color: var(--chat-content-background-color);
+                    svg {
+                        fill: var(--chat-head-color);
+                    }
+                }
+            }
+
+            .chat-content__messages {
+                overflow-x: hidden;
+                overflow-y: auto;
+                height: 100%;
+            }
+
+            .chat-content__notifications {
+                height: 1.7em;
+                white-space: pre;
+                background-color: var(--chat-content-background-color);
+                color: var(--subdued-color);
+                font-size: 90%;
+                font-style: italic;
+                line-height: var(--line-height-small);
+                padding: 0 1em 0.3em;
+                &:before {
+                    content: " ";
+                }
+            }
+
+            video {
+                width: 100%
+            }
+            progress {
+                margin: 0.5em 0;
+                width: 100%
+            }
+        }
+
+        .dropdown { /* status dropdown styles */
+            background-color: var(--light-background-color);
+            dd {
+                margin: 0;
+                padding: 0;
+                position: relative;
+            }
+        }
+
+        .dragresize {
+            background: transparent;
+            border: 0;
+            margin: 0;
+            position: absolute;
+            top: 0;
+            z-index: 20;
+            &-top {
+                cursor: n-resize;
+                height: 5px;
+                width: 100%;
+            }
+            &-left,
+            &-occupants-left {
+                cursor: w-resize;
+                width: 5px;
+                height: 100%;
+                left: 0;
+            }
+            &-topleft {
+                cursor: nw-resize;
+                width: 15px;
+                height: 15px;
+                top: 0;
+                left: 0;
+            }
+        }
+    }
+}

src/plugins/chatview/styles/index.scss

@@ -0,0 +1,261 @@
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+@import "shared/styles/_variables.scss";
+@import "bootstrap/scss/media";
+@import "./chatbox.scss";
+
+
+/* ******************* Overlay and embedded styles *************************** */
+
+#conversejs {
+    converse-chats.converse-embedded,
+    converse-chats.converse-overlayed {
+        .controlbox-head {
+            padding: 0.5em;
+        }
+        .chat-head {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+        }
+        .chatbox {
+            min-width: var(--overlayed-chat-width) !important;
+            width: var(--overlayed-chat-width);
+
+            .box-flyout {
+                min-width: var(--overlayed-chat-width) !important;
+                width: var(--overlayed-chat-width);
+            }
+        }
+    }
+
+    converse-chats.converse-overlayed  {
+        .chat-head, .box-flyout {
+            border-top-left-radius: var(--chatbox-border-radius);
+            border-top-right-radius: var(--chatbox-border-radius);
+            @media screen and (max-height: $mobile-landscape-height) {
+                border-top-left-radius: 0;
+                border-top-right-radius: 0;
+            }
+            @media screen and (max-width: $mobile-portrait-length) {
+                border-top-left-radius: 0;
+                border-top-right-radius: 0;
+            }
+        }
+
+        .flyout {
+            bottom: var(--overlayed-chatbox-hover-height);
+        }
+        .box-flyout {
+            height: var(--overlayed-chat-height);
+            min-height: calc(var(--overlayed-chat-height) / 2);
+        }
+        .chat-head {
+            min-height: var(--overlayed-chat-head-height);
+        }
+        .minimized-chats-flyout .chat-head {
+            cursor: default;
+        }
+        .chat-textarea {
+            max-height: var(--overlayed-max-chat-textarea-height);
+        }
+        .chatbox {
+            .chat-body {
+                height: calc(100% - var(--overlayed-chat-head-height));
+            }
+            .chatbox-title {
+                padding: 0.5rem 0.75rem 0 0.75rem;
+            }
+            .chatbox-title--no-desc {
+                padding: 0.5rem 0.75rem;
+            }
+            converse-dropdown {
+                .btn--standalone {
+                    padding: 0 0.2em;
+                    margin: 0 0 0 0.5em;
+                }
+            }
+        }
+    }
+}
+
+@include media-breakpoint-down(sm) {
+    #conversejs.converse-overlayed {
+        > .row {
+            flex-direction: column;
+            &.no-gutters {
+                margin: -1em;
+            }
+        }
+    }
+}
+
+
+#conversejs {
+    converse-chats.converse-embedded,
+    converse-chats.converse-fullscreen  {
+        .flyout {
+            border-radius: 0;
+            border:none;
+            bottom: 0;
+        }
+
+        .chatbox {
+            margin: 0;
+            margin-left: 15px;
+            .box-flyout {
+                box-shadow: none;
+                overflow: hidden;
+            }
+            &:not(#controlbox) {
+                .box-flyout {
+                    @include media-breakpoint-up(md) {
+                        max-width: 66.666667%;
+                    }
+                    @include media-breakpoint-up(lg) {
+                        max-width: 75%;
+                    }
+                    @include media-breakpoint-up(xl) {
+                        max-width: 83.333333%;
+                    }
+                }
+            }
+            @include media-breakpoint-up(md) {
+                @include make-col(8);
+            }
+            @include media-breakpoint-up(lg) {
+                @include make-col(9);
+            }
+            @include media-breakpoint-up(xl) {
+                @include make-col(10);
+            }
+        }
+
+        &.converse-singleton {
+            .flyout {
+                border: none !important;
+            }
+            .chat-head {
+                padding: 0.5em;
+            }
+            .chatbox {
+                margin: 0;
+                @include make-col-ready();
+                @include media-breakpoint-up(md) {
+                    @include make-col(12);
+                }
+                @include media-breakpoint-up(lg) {
+                    @include make-col(12);
+                }
+                @include media-breakpoint-up(xl) {
+                    @include make-col(12);
+                }
+            }
+        }
+    }
+
+    converse-chats.converse-embedded {
+        .chat-head {
+            font-size: var(--font-size-huge);
+        }
+
+        .chatbox {
+            .box-flyout {
+                bottom: 0;
+                height: 100%;
+                min-width: auto;
+                width: 100%;
+            }
+        }
+
+        .chat-textarea {
+            max-height: var(--fullpage-max-chat-textarea-height);
+        }
+    }
+}
+
+/* ******************* Fullpage styles *************************** */
+
+#conversejs {
+    converse-chats.converse-fullscreen  {
+        .chatbox-btn {
+            font-size: var(--fullpage-chatbox-button-size);
+            margin: 0 0.3em;
+        }
+        .chat-head {
+            font-size: var(--font-size-huge);
+        }
+        .chat-textarea {
+            max-height: var(--fullpage-max-chat-textarea-height);
+        }
+        .chatbox {
+            .box-flyout {
+                box-shadow: none;
+                height: var(--fullpage-chat-height);
+                min-height: calc(var(--fullpage-chat-height) / 2);
+                width: var(--fullpage-chat-width);
+                overflow: hidden;
+            }
+            .chat-body {
+                height: inherit;
+                overflow: hidden;
+                background-color: var(--chat-background-color);
+            }
+            .chat-title {
+                font-size: var(--font-size-huge);
+                line-height: var(--line-height-huge);
+            }
+            .sendXMPPMessage {
+                ul {
+                    width: 100%;
+                }
+            }
+        }
+    }
+}
+
+
+@include media-breakpoint-down(sm) {
+    #conversejs {
+        converse-chats:not(.converse-embedded)  {
+            > .row {
+                flex-direction: row-reverse;
+            }
+            #converse-login-panel {
+                .converse-form {
+                    padding: 3em 2em 3em;
+                }
+            }
+            .chatbox {
+                width: calc(100% - 50px);
+                .row {
+                    .box-flyout {
+                        left: 50px;
+                        bottom: 0;
+                        height: var(--fullpage-chat-height);
+                        box-shadow: none;
+                    }
+                }
+            }
+        }
+
+        converse-chats.converse-mobile,
+        converse-chats.converse-overlayed,
+        converse-chats.converse-fullscreen {
+            .chatbox {
+                .box-flyout {
+                    converse-controlbox-navback {
+                        margin: auto 0;
+                        margin-right: 1em;
+                        display: flex;
+                        .fa-arrow-left {
+                            &:before {
+                                color: var(--chat-head-text-color);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/plugins/muc-views/bottom-panel.js

@@ -7,6 +7,8 @@ import { _converse, api, converse } from "@converse/headless/core";
 import { getAutoCompleteListItem, parseMessageForMUCCommands } from './utils.js';
 import { render } from 'lit';
 
+import './styles/muc-bottom-panel.scss';
+
 
 export default class MUCBottomPanel extends BottomPanel {
 

src/plugins/muc-views/heading.js

@@ -8,6 +8,8 @@ import { __ } from 'i18n';
 import { _converse, api, converse } from "@converse/headless/core";
 import { getHeadingDropdownItem, getHeadingStandaloneButton } from 'plugins/chatview/utils.js';
 
+import './styles/muc-head.scss';
+
 
 export default class MUCHeading extends ChatHeading {
 

src/plugins/muc-views/index.js

@@ -1,5 +1,4 @@
 /**
- * @module converse-muc-views
  * @copyright 2020, the Converse.js contributors
  * @description XEP-0045 Multi-User Chat Views
  * @license Mozilla Public License (MPLv2)
@@ -12,7 +11,7 @@ import muc_api from './api.js';
 import { api, converse } from '@converse/headless/core';
 import { fetchAndSetMUCDomain } from './utils.js';
 
-import './styles/muc.scss';
+import './styles/index.scss';
 
 converse.MUC.VIEWS = {
     CONFIG: 'config-form',

src/plugins/muc-views/sidebar.js

@@ -3,6 +3,8 @@ import tpl_muc_sidebar from "./templates/muc-sidebar.js";
 import { CustomElement } from 'shared/components/element.js';
 import { _converse, api, converse } from "@converse/headless/core";
 
+import './styles/muc-occupants.scss';
+
 const { u } = converse.env;
 
 export default class MUCSidebar extends CustomElement {

src/plugins/muc-views/styles/index.scss

@@ -0,0 +1,185 @@
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+@import "shared/styles/_variables.scss";
+
+@import "./muc.scss";
+@import "./muc-details-modal.scss";
+
+converse-muc-disconnected,
+converse-muc-destroyed {
+    padding: 2em;
+    width: 100%;
+    height: 100%;
+}
+
+#conversejs.converse-embedded,
+#conversejs {
+    .badge--muc {
+        background-color: var(--groupchats-header-color);
+    }
+
+    .add-chatroom {
+        input[type="submit"],
+        input[type="button"] {
+            margin: 0.3em 0;
+        }
+    }
+}
+
+
+/* ******************* Overlay  styles *************************** */
+
+#conversejs {
+    converse-chats {
+        &.converse-overlayed {
+            .chatbox {
+                &.chatroom {
+                    min-width: var(--chatroom-width) !important;
+                    width: var(--chatroom-width);
+                    .box-flyout {
+                        min-width: var(--chatroom-width) !important;
+                        width: var(--chatroom-width);
+                    }
+                    .chatbox-title__text {
+                        @include make-col(7);
+                    }
+                    .chatbox-title__buttons {
+                        @include make-col(5);
+                    }
+
+                    .chat-head__desc {
+                        font-size: 80%;
+                        margin-bottom: 1em;
+                    }
+                    .chatroom-body {
+                        .occupants {
+                            .occupants-heading {
+                                padding: 0;
+                            }
+                            .occupant-list {
+                                border-bottom: none;
+                            }
+                            ul {
+                                .occupant {
+                                    .occupant-nick-badge {
+                                        .occupant-badges {
+                                            display: none;
+                                        }
+                                    }
+                                    .occupant-status {
+                                        margin-top: 6px;
+                                    }
+                                }
+                            }
+                        }
+                        .chat-area {
+                            min-width: var(--overlayed-chat-width);
+                        }
+                    }
+                }
+            }
+        }
+
+        &.converse-embedded,
+        &.converse-fullscreen,
+        &.converse-mobile {
+
+            .chatroom {
+                .box-flyout {
+                    width: 100%;
+
+                    .chatroom-body {
+                        .chat-area {
+                            &.full {
+                                .new-msgs-indicator {
+                                    max-width: 100%;
+                                }
+                            }
+                        }
+                        .occupants {
+                            padding: var(--occupants-padding);
+                            .occupants-heading {
+                                font-size: var(--font-size-large);
+                            }
+                            ul {
+                                &.occupant-list {
+                                    li {
+                                        font-size: var(--font-size-small);
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+                .room-invite {
+                    span {
+                        .invited-contact {
+                            margin: 0 0 0.5em -1px;
+                        }
+                    }
+                }
+            }
+        }
+
+        &.converse-embedded {
+            .chatroom {
+                margin: 0;
+                width: 100%;
+                .box-flyout {
+                    .occupants-heading {
+                        font-size: 120%;
+                    }
+                    .chat-content {
+                        .chat-message {
+                            margin: 0.5em;
+                            font-size: 120%;
+                        }
+                    }
+                    .sendXMPPMessage {
+                        .chat-textarea {
+                            padding: 0.5em;
+                            font-size: 110%;
+                        }
+                    }
+                    .chatroom-body {
+                        height: 100%;
+                        .muc-form-container {
+                            height: 100%;
+                            position: relative;
+                        }
+                    }
+                    .occupants {
+                        .occupant-list {
+                            padding-left: 0.3em;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+@include media-breakpoint-down(sm) {
+    #conversejs {
+        converse-chats.converse-mobile,
+        converse-chats.converse-overlayed,
+        converse-chats.converse-fullscreen {
+            .chatbox {
+                .box-flyout {
+                    .chat-head-chatroom {
+                        .chatbox-navback {
+                            margin-right: 0 !important;
+                            .fa-arrow-left {
+                                &:before {
+                                    color: var(--chatroom-head-color);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/plugins/muc-views/styles/muc-bottom-panel.scss

@@ -0,0 +1,49 @@
+#conversejs {
+    converse-muc.chatroom {
+        converse-muc-bottom-panel {
+            display: contents;
+            height: 3em;
+            padding: 0.5em;
+            text-align: center;
+            font-size: var(--font-size-small);
+            background-color: var(--chatroom-head-bg-color);
+            color: white;
+
+            &.muc-bottom-panel--muted {
+                height: 4em;
+                width: 100%;
+            }
+
+            &.muc-bottom-panel--nickname {
+                padding: 0;
+                height: 16em;
+
+                .muc-form-container {
+                    .chatroom-form {
+                        padding-top: 2em;
+                        padding-bottom: 0;
+                    }
+                }
+            }
+
+            .sendXMPPMessage {
+                .suggestion-box__results--above {
+                    bottom: 4.5em;
+                }
+                .chat-textarea, input {
+                    &:active, &:focus{
+                        outline-color: var(--chatroom-head-bg-color) !important;
+                    }
+                    &.correcting {
+                        background-color: var(--chatroom-correcting-color);
+                    }
+                }
+                .chat-textarea {
+                    width: 100%;
+                    border: none;
+                    border-bottom-right-radius: 0;
+                }
+            }
+        }
+    }
+}

src/plugins/muc-views/styles/muc-bottompanel.scss

@@ -0,0 +1,29 @@
+converse-muc-bottom-panel {
+    display: contents;
+}
+
+.muc-bottom-panel {
+    height: 3em;
+    padding: 0.5em;
+    text-align: center;
+    font-size: var(--font-size-small);
+    background-color: var(--chatroom-head-bg-color);
+    color: white;
+
+    &.muc-bottom-panel--muted {
+        height: 4em;
+        width: 100%;
+    }
+
+    &.muc-bottom-panel--nickname {
+        padding: 0;
+        height: 16em;
+
+        .muc-form-container {
+            .chatroom-form {
+                padding-top: 2em;
+                padding-bottom: 0;
+            }
+        }
+    }
+}

src/plugins/muc-views/styles/muc-details-modal.scss

@@ -0,0 +1,23 @@
+#muc-details-modal {
+    .features-list {
+        margin-left: 1em;
+    }
+
+    .chatroom-features {
+        width: 100%;
+        .features-list {
+            padding-top: 0;
+            .feature {
+                width: 100%;
+                margin-right: 0.5em;
+                padding-right: 0;
+                font-size: 1em;
+                cursor: help;
+                .fa {
+                    margin-right: 0.5em;
+                    color: var(--text-color);
+                }
+            }
+        }
+    }
+}

src/plugins/muc-views/styles/muc-forms.scss

@@ -0,0 +1,39 @@
+converse-muc-config-form {
+    width: 100%;
+    overflow: auto;
+}
+
+#conversejs {
+    .chatroom {
+        .box-flyout {
+            .muc-form-container {
+                background-color: white;
+                border: 0;
+                color: var(--text-color);
+                font-size: var(--font-size);
+                height: 100%;
+                width: 100%;
+                overflow-y: auto;
+
+                .validation-message {
+                    font-size: 90%;
+                    color: var(--error-color);
+                }
+                input[type=button],
+                input[type=submit] {
+                    margin: 0 0.5em;
+                }
+                .button-primary {
+                    background-color: var(--chatroom-head-button-color);
+                }
+            }
+
+            .chatroom-form {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                padding: 2em;
+            }
+        }
+    }
+}

src/plugins/muc-views/styles/muc-head.scss

@@ -0,0 +1,65 @@
+#conversejs {
+    converse-muc.chatroom {
+        .chat-head-chatroom {
+            color: var(--chatroom-head-color);
+            background-color: var(--chatroom-head-bg-color);
+            border-bottom: var(--chatroom-head-border-bottom);
+
+            .chat-head__desc {
+                color: var(--chatroom-head-color);
+                display: var(--chatroom-head-description-display);
+                a {
+                    color: var(--chatroom-head-description-link-color);
+                }
+                &:hover {
+                    button {
+                        display: inline-block;
+                    }
+                }
+            }
+
+            .chatbox-title {
+                .btn--transparent {
+                    i {
+                        color: var(--chatroom-head-color);
+                    }
+                }
+                .chatbox-title__text--bookmarked {
+                    margin-left: 0.5em;
+                    color: var(--chatroom-head-color);
+                }
+            }
+
+            .chatbox-title__buttons {
+                background-color: var(--chatroom-head-bg-color);
+            }
+
+            a, a:visited, a:hover, a:not([href]):not([tabindex]) {
+                &.chatbox-btn {
+                    &.fa {
+                        color: var(--chat-head-text-color);
+                        &.button-on:before {
+                            color: var(--chatroom-head-button-color);
+                        }
+                    }
+                }
+            }
+
+            .chatbox-btn {
+                &.button-on:before {
+                    color: var(--chatroom-head-button-color);
+                }
+            }
+            .chatbox-title__text {
+                display: var(--heading-display);
+                font-weight: var(--chatroom-head-title-font-weight);
+                margin: auto 0;
+                padding-right: var(--chatroom-head-title-padding-right);
+                white-space: nowrap;
+                .chatroom-jid {
+                    font-size: var(--font-size-small);
+                }
+            }
+        }
+    }
+}

src/plugins/muc-views/styles/muc-occupants.scss

@@ -0,0 +1,135 @@
+#conversejs {
+    converse-muc.chatroom {
+        .box-flyout {
+            .occupants {
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                overflow-x: hidden;
+                overflow-y: hidden;
+                vertical-align: top;
+                background-color: var(--occupants-background-color);
+                border-left: var(--occupants-border-left);
+                padding: 0.5em;
+                max-width: 75%;
+                min-width: 20%;
+                flex: 0 0 25%;
+
+                .occupants-header {
+                    display: flex;
+                    flex-direction: column;
+                    .hide-occupants {
+                        align-self: flex-end;
+                        cursor: pointer;
+                        font-size: var(--font-size-small);
+                    }
+                }
+
+                .occupants-header--title {
+                    margin-top: 0.5em;
+                    margin-bottom: 0.5em;
+                    display: flex;
+                    flex-direction: row;
+                }
+
+                .fa-user-plus {
+                    margin-right: 0.25em;
+                }
+
+                .occupants-heading {
+                    font-family: var(--heading-font);
+                    color: var(--groupchats-header-color-dark);
+                    padding-left: 0;
+                    margin-right: 1em;
+                }
+                .suggestion-box{
+                    ul {
+                        padding: 0;
+                        li {
+                            padding: 0.5em;
+                        }
+                    }
+                }
+                ul {
+                    padding: 0;
+                    margin-bottom: 0.5em;
+                    overflow-x: hidden;
+                    overflow-y: auto;
+                    list-style: none;
+
+                    &.occupant-list {
+                        overflow-y: auto;
+                        flex-basis: 0;
+                        flex-grow: 1;
+                    }
+                    li {
+                        cursor: default;
+                        display: block;
+                        font-size: var(--font-size-small);
+                        overflow: hidden;
+                        padding: 0.25em 0.25em 0.25em 0;
+                        text-overflow: ellipsis;
+                        .fa {
+                            margin-right: 0.5em;
+                        }
+                        &.feature {
+                            font-size: var(--font-size-tiny);
+                        }
+                        &.occupant {
+                            cursor: pointer;
+
+                            .occupant-nick-badge {
+                                display: flex;
+                                justify-content: space-between;
+                                flex-wrap: wrap;
+
+                                .occupant-badges {
+                                    display: flex;
+                                    justify-content: flex-end;
+                                    flex-wrap: wrap;
+                                    flex-direction: row;
+
+                                    span {
+                                        margin-right: 0.25rem;
+                                    }
+                                }
+                            }
+
+                            div.row.no-gutters {
+                                flex-wrap: nowrap;
+                                min-height: 1.5em;
+                            }
+                            .badge {
+                                margin-bottom: 0.125rem;
+                            }
+
+                            .occupant-status {
+                                display: inline-block;
+                                margin: 0 0.5em 0.125em 0;
+                                width: 0.5em;
+                                height: 0.5em;
+
+                                &.occupant-online,
+                                &.occupant-chat {
+                                    background-color: #1A9707;
+                                }
+                                &.occupant-dnd {
+                                    background-color: red;
+                                }
+                                &.occupant-away {
+                                    background-color: darkorange;
+                                }
+                                &.occupant-xa {
+                                    background-color: orange;
+                                }
+                                &.occupant-offline {
+                                    background-color: darkgrey;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/plugins/muc-views/styles/muc.scss

@@ -1,131 +1,10 @@
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
-@import "bootstrap/scss/mixins";
 @import "shared/styles/_variables.scss";
+@import "plugins/chatview/styles/chatbox.scss";
+@import "./muc-forms.scss";
 
-
-converse-muc-config-form {
-    width: 100%;
-    overflow: auto;
-}
-
-converse-muc-disconnected,
-converse-muc-destroyed {
-    padding: 2em;
-    width: 100%;
-    height: 100%;
-}
-
-#conversejs.converse-embedded,
 #conversejs {
-    .badge--muc {
-        background-color: var(--groupchats-header-color);
-    }
-
-    .add-chatroom {
-        input[type="submit"],
-        input[type="button"] {
-            margin: 0.3em 0;
-        }
-    }
-
-    #muc-details-modal {
-        .features-list {
-            margin-left: 1em;
-        }
-    }
-
-    .chatroom-features {
-        width: 100%;
-        .features-list {
-            padding-top: 0;
-            .feature {
-                width: 100%;
-                margin-right: 0.5em;
-                padding-right: 0;
-                font-size: 1em;
-                cursor: help;
-                .fa {
-                    margin-right: 0.5em;
-                    color: var(--text-color);
-                }
-            }
-        }
-    }
-
-
-    .chat-head-chatroom {
-        color: var(--chatroom-head-color);
-        background-color: var(--chatroom-head-bg-color);
-        border-bottom: var(--chatroom-head-border-bottom);
-
-        .chat-head__desc {
-            color: var(--chatroom-head-color);
-            display: var(--chatroom-head-description-display);
-            a {
-                color: var(--chatroom-head-description-link-color);
-            }
-            &:hover {
-                button {
-                    display: inline-block;
-                }
-            }
-        }
-
-        .chatbox-title {
-            .btn--transparent {
-                i {
-                    color: var(--chatroom-head-color);
-                }
-            }
-            .chatbox-title__text--bookmarked {
-                margin-left: 0.5em;
-                color: var(--chatroom-head-color);
-            }
-        }
-
-        .chatbox-title__buttons {
-            background-color: var(--chatroom-head-bg-color);
-        }
-
-        a, a:visited, a:hover, a:not([href]):not([tabindex]) {
-            &.chatbox-btn {
-                &.fa {
-                    color: var(--chat-head-text-color);
-                    &.button-on:before {
-                        color: var(--chatroom-head-button-color);
-                    }
-                }
-            }
-        }
-
-        .chatbox-btn {
-            &.button-on:before {
-                color: var(--chatroom-head-button-color);
-            }
-        }
-        .chatbox-title__text {
-            display: var(--heading-display);
-            font-weight: var(--chatroom-head-title-font-weight);
-            margin: auto 0;
-            padding-right: var(--chatroom-head-title-padding-right);
-            white-space: nowrap;
-            .chatroom-jid {
-                font-size: var(--font-size-small);
-            }
-        }
-    }
-
-    .empty-history-feedback {
-        position: relative;
-        span {
-            width: 100%;
-            text-align: center;
-            position: absolute;
-            margin-top: 50%;
-        }
-    }
-
     .chatroom {
         width: var(--chatroom-width);
         @media screen and (max-height: $mobile-landscape-height){
@@ -135,11 +14,21 @@ converse-muc-destroyed {
             width: var(--mobile-chat-width);
         }
 
+        .empty-history-feedback {
+            position: relative;
+            span {
+                width: 100%;
+                text-align: center;
+                position: absolute;
+                margin-top: 50%;
+            }
+        }
+
         .box-flyout {
             overflow-y: hidden;
             background-color: var(--chatroom-head-bg-color);
-
             width: 100%;
+
             @media screen and (max-height: $mobile-landscape-height) {
                 height: var(--mobile-chat-height);
                 width: var(--mobile-chat-width);
@@ -155,6 +44,7 @@ converse-muc-destroyed {
                 flex-flow: nowrap;
                 background-color: white;
                 border-top: 0;
+                height: 100%;
                 width: 100%;
                 overflow: hidden;
 
@@ -213,210 +103,7 @@ converse-muc-destroyed {
                         }
                     }
                 }
-                .occupants {
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: space-between;
-                    overflow-x: hidden;
-                    overflow-y: hidden;
-                    vertical-align: top;
-                    background-color: var(--occupants-background-color);
-                    border-left: var(--occupants-border-left);
-                    padding: 0.5em;
-                    max-width: 75%;
-                    min-width: 20%;
-                    flex: 0 0 25%;
-
-                    .occupants-header {
-                        display: flex;
-                        flex-direction: column;
-                        .hide-occupants {
-                            align-self: flex-end;
-                            cursor: pointer;
-                            font-size: var(--font-size-small);
-                        }
-                    }
 
-                    .occupants-header--title {
-                        margin-top: 0.5em;
-                        margin-bottom: 0.5em;
-                        display: flex;
-                        flex-direction: row;
-                    }
-
-                    .fa-user-plus {
-                        margin-right: 0.25em;
-                    }
-
-                    .occupants-heading {
-                        font-family: var(--heading-font);
-                        color: var(--groupchats-header-color-dark);
-                        padding-left: 0;
-                        margin-right: 1em;
-                    }
-                    .suggestion-box{
-                        ul {
-                            padding: 0;
-                            li {
-                                padding: 0.5em;
-                            }
-                        }
-                    }
-                    ul {
-                        padding: 0;
-                        margin-bottom: 0.5em;
-                        overflow-x: hidden;
-                        overflow-y: auto;
-                        list-style: none;
-
-                        &.occupant-list {
-                            overflow-y: auto;
-                            flex-basis: 0;
-                            flex-grow: 1;
-                        }
-                        li {
-                            cursor: default;
-                            display: block;
-                            font-size: var(--font-size-small);
-                            overflow: hidden;
-                            padding: 0.25em 0.25em 0.25em 0;
-                            text-overflow: ellipsis;
-                            .fa {
-                                margin-right: 0.5em;
-                            }
-                            &.feature {
-                                font-size: var(--font-size-tiny);
-                            }
-                            &.occupant {
-                                cursor: pointer;
-
-                                .occupant-nick-badge {
-                                    display: flex;
-                                    justify-content: space-between;
-                                    flex-wrap: wrap;
-
-                                    .occupant-badges {
-                                        display: flex;
-                                        justify-content: flex-end;
-                                        flex-wrap: wrap;
-                                        flex-direction: row;
-
-                                        span {
-                                            margin-right: 0.25rem;
-                                        }
-                                    }
-                                }
-
-                                div.row.no-gutters {
-                                    flex-wrap: nowrap;
-                                    min-height: 1.5em;
-                                }
-                                .badge {
-                                    margin-bottom: 0.125rem;
-                                }
-
-                                .occupant-status {
-                                    display: inline-block;
-                                    margin: 0 0.5em 0.125em 0;
-                                    width: 0.5em;
-                                    height: 0.5em;
-
-                                    &.occupant-online,
-                                    &.occupant-chat {
-                                        background-color: #1A9707;
-                                    }
-                                    &.occupant-dnd {
-                                        background-color: red;
-                                    }
-                                    &.occupant-away {
-                                        background-color: darkorange;
-                                    }
-                                    &.occupant-xa {
-                                        background-color: orange;
-                                    }
-                                    &.occupant-offline {
-                                        background-color: darkgrey;
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-                .muc-form-container {
-                    background-color: white;
-                    border: 0;
-                    color: var(--text-color);
-                    font-size: var(--font-size);
-                    height: 100%;
-                    width: 100%;
-                    overflow-y: auto;
-
-                    .validation-message {
-                        font-size: 90%;
-                        color: var(--error-color);
-                    }
-                    input[type=button],
-                    input[type=submit] {
-                        margin: 0 0.5em;
-                    }
-                    .button-primary {
-                        background-color: var(--chatroom-head-button-color);
-                    }
-                }
-
-                .chatroom-form {
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: center;
-                    padding: 2em;
-                }
-            }
-        }
-
-        converse-muc-bottom-panel {
-            display: contents;
-        }
-
-        .muc-bottom-panel {
-            height: 3em;
-            padding: 0.5em;
-            text-align: center;
-            font-size: var(--font-size-small);
-            background-color: var(--chatroom-head-bg-color);
-            color: white;
-
-            &.muc-bottom-panel--muted {
-                height: 4em;
-                width: 100%;
-            }
-
-            &.muc-bottom-panel--nickname {
-                padding: 0;
-                height: 16em;
-
-                .muc-form-container {
-                    .chatroom-form {
-                        padding-top: 2em;
-                        padding-bottom: 0;
-                    }
-                }
-            }
-        }
-
-        .sendXMPPMessage {
-            .suggestion-box__results--above {
-                bottom: 4.5em;
-            }
-            .chat-textarea, input {
-                &:active, &:focus{
-                    outline-color: var(--chatroom-head-bg-color);
-                }
-                &.correcting {
-                    background-color: var(--chatroom-correcting-color);
-                }
-            }
-            .chat-textarea {
-                border-bottom-right-radius: 0;
             }
         }
 
@@ -429,159 +116,3 @@ converse-muc-destroyed {
         }
     }
 }
-
-/* ******************* Overlay  styles *************************** */
-
-#conversejs {
-    converse-chats {
-        &.converse-overlayed {
-            .chatbox {
-                &.chatroom {
-                    min-width: var(--chatroom-width) !important;
-                    width: var(--chatroom-width);
-                    .box-flyout {
-                        min-width: var(--chatroom-width) !important;
-                        width: var(--chatroom-width);
-                    }
-                    .chatbox-title__text {
-                        @include make-col(7);
-                    }
-                    .chatbox-title__buttons {
-                        @include make-col(5);
-                    }
-
-                    .chat-head__desc {
-                        font-size: 80%;
-                        margin-bottom: 1em;
-                    }
-                    .chatroom-body {
-                        .occupants {
-                            .occupants-heading {
-                                padding: 0;
-                            }
-                            .occupant-list {
-                                border-bottom: none;
-                            }
-                            ul {
-                                .occupant {
-                                    .occupant-nick-badge {
-                                        .occupant-badges {
-                                            display: none;
-                                        }
-                                    }
-                                    .occupant-status {
-                                        margin-top: 6px;
-                                    }
-                                }
-                            }
-                        }
-                        .chat-area {
-                            min-width: var(--overlayed-chat-width);
-                        }
-                    }
-                }
-            }
-        }
-
-        &.converse-embedded,
-        &.converse-fullscreen,
-        &.converse-mobile {
-
-            .chatroom {
-                .box-flyout {
-                    width: 100%;
-
-                    .chatroom-body {
-                        .chat-area {
-                            &.full {
-                                .new-msgs-indicator {
-                                    max-width: 100%;
-                                }
-                            }
-                        }
-                        .occupants {
-                            padding: var(--occupants-padding);
-                            .occupants-heading {
-                                font-size: var(--font-size-large);
-                            }
-                            ul {
-                                &.occupant-list {
-                                    li {
-                                        font-size: var(--font-size-small);
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-                .room-invite {
-                    span {
-                        .invited-contact {
-                            margin: 0 0 0.5em -1px;
-                        }
-                    }
-                }
-            }
-        }
-
-        &.converse-embedded {
-            .chatroom {
-                margin: 0;
-                width: 100%;
-                .box-flyout {
-                    .occupants-heading {
-                        font-size: 120%;
-                    }
-                    .chat-content {
-                        .chat-message {
-                            margin: 0.5em;
-                            font-size: 120%;
-                        }
-                    }
-                    .sendXMPPMessage {
-                        .chat-textarea {
-                            padding: 0.5em;
-                            font-size: 110%;
-                        }
-                    }
-                    .chatroom-body {
-                        height: 100%;
-                        .muc-form-container {
-                            height: 100%;
-                            position: relative;
-                        }
-                    }
-                    .occupants {
-                        .occupant-list {
-                            padding-left: 0.3em;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-
-@include media-breakpoint-down(sm) {
-    #conversejs {
-        converse-chats.converse-mobile,
-        converse-chats.converse-overlayed,
-        converse-chats.converse-fullscreen {
-            .chatbox {
-                .box-flyout {
-                    .chat-head-chatroom {
-                        .chatbox-navback {
-                            margin-right: 0 !important;
-                            .fa-arrow-left {
-                                &:before {
-                                    color: var(--chatroom-head-color);
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}

src/shared/autocomplete/autocomplete.js

@@ -11,6 +11,7 @@ import { helpers, FILTER_CONTAINS, ITEM, SORT_BY_QUERY_POSITION } from './utils.
 import Suggestion from './suggestion.js';
 import { converse } from "@converse/headless/core";
 
+
 const u = converse.env.utils;
 
 

src/shared/autocomplete/styles/_autocomplete.scss

@@ -39,28 +39,30 @@
                 transform: rotate(45deg);
                 z-index: -1;
             }
-            position: absolute;
-            left: 0;
-            right: 0;
-            z-index: 2;
-            min-width: 100%;
-            box-sizing: border-box;
-            list-style: none;
-            padding: 0;
             border-radius: .3em;
-            margin: .2em 0 0;
-            background: hsla(0,0%,100%,.9);
-            background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.9));
             border: 1px solid rgba(0,0,0,.3);
             box-shadow: .05em .2em .6em rgba(0,0,0,.1);
+            box-sizing: border-box;
+            left: 0;
+            list-style: none;
+            margin: .2em 0 0;
+            min-width: 100%;
+            padding: 0;
+            position: absolute;
+            right: 0;
             text-shadow: none;
+            z-index: 2;
 
             > li {
-                text-overflow: ellipsis;
-                overflow-x: hidden;
-                position: relative;
+                background: hsla(0,0%,100%,.9);
+                background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.9));
+                color: var(--text-color);
                 cursor: pointer;
+                display: flex;
+                overflow-x: hidden;
                 padding: 1em;
+                position: relative;
+                text-overflow: ellipsis;
             }
         }
         .suggestion-box__results--below {

src/shared/chat/styles/emoji.scss

@@ -62,6 +62,10 @@
             }
             .emoji-skintone-picker {
                 display: flex;
+                padding: 0.5em 0;
+                background-color: var(--chat-head-color);
+                width: 100%;
+                font-size: var(--font-size);
                 label {
                     margin: 0;
                     padding: 0 0.5em;
@@ -77,10 +81,6 @@
                         padding: 0 0.25em;
                     }
                 }
-                padding: 0.5em 0;
-                background-color: var(--chat-head-color);
-                width: auto;
-                font-size: var(--font-size);
             }
             .emoji-picker {
                 background-color: white;
@@ -129,6 +129,7 @@
                 }
             }
             .emoji-picker__header {
+                width: 100%;
                 display: flex;
                 flex-direction: column;
                 padding: 0.1em 0;

src/shared/chat/styles/toolbar.scss

@@ -26,12 +26,16 @@
 
         .toolbar-buttons {
             width: 100%;
-            display: inline-block;
-
             .message-limit {
                 padding: 0.5em;
                 font-weight: bold;
             }
+            * {
+                float: left;
+            }
+            .right {
+                float: right;
+            }
         }
 
         .unverified a,