Use `.conversejs` instead of `.converse-root`

as the class that designates standalone Converse components.

src/modals/styles/_modal.scss

@@ -2,7 +2,7 @@
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/mixins";
 
-.converse-root {
+.conversejs {
     @import "bootstrap/scss/modal";
 
     #converse-modals {

src/plugins/bookmark-views/styles/bookmarks.scss

@@ -1,4 +1,4 @@
-.converse-root {
+.conversejs {
     #controlbox {
         .bookmarks-toggle, .bookmarks-toggle .fa {
             color: var(--groupchats-header-color) !important;
@@ -9,7 +9,7 @@
     }
 }
 
-.converse-root.fullscreen {
+.conversejs.fullscreen {
     #controlbox {
         #chatrooms {
             .bookmarks-list {

src/plugins/chatboxviews/styles/chats.scss

@@ -1,4 +1,4 @@
-.converse-root {
+.conversejs {
     converse-chats {
         &.converse-chatboxes {
             z-index: 1031; // One more than bootstrap navbar

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

@@ -3,7 +3,7 @@
 @import "bootstrap/scss/mixins";
 @import "shared/styles/_variables.scss";
 
-.converse-root {
+.conversejs {
     .chatbox {
         .bottom-panel {
 

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

@@ -1,4 +1,4 @@
-.converse-root {
+.conversejs {
     .chatbox {
         .chat-head {
             display: flex;

src/plugins/chatview/styles/chatbox.scss

@@ -1,4 +1,4 @@
-.converse-root {
+.conversejs {
     .chatbox {
         text-align: left;
         margin: 0 var(--chat-gutter);

src/plugins/chatview/styles/index.scss

@@ -8,7 +8,7 @@
 
 /* ******************* Overlay and embedded styles *************************** */
 
-.converse-root {
+.conversejs {
     converse-chats.converse-embedded,
     converse-chats.converse-overlayed {
         .controlbox-head {
@@ -80,7 +80,7 @@
 }
 
 @include media-breakpoint-down(sm) {
-    .converse-root.converse-overlayed {
+    .conversejs.converse-overlayed {
         > .row {
             flex-direction: column;
             &.no-gutters {
@@ -91,7 +91,7 @@
 }
 
 
-.converse-root {
+.conversejs {
     converse-chats.converse-embedded,
     converse-chats.converse-fullscreen  {
         .flyout {
@@ -176,7 +176,7 @@
 
 /* ******************* Fullpage styles *************************** */
 
-.converse-root {
+.conversejs {
     converse-chats.converse-fullscreen  {
         .chatbox-btn {
             font-size: var(--fullpage-chatbox-button-size);
@@ -216,7 +216,7 @@
 
 
 @include media-breakpoint-down(sm) {
-    .converse-root {
+    .conversejs {
         converse-chats:not(.converse-embedded)  {
             > .row {
                 flex-direction: row-reverse;

src/plugins/controlbox/styles/_controlbox.scss

@@ -4,7 +4,7 @@
 @import "shared/styles/_variables.scss";
 @import "shared/styles/_mixins.scss";
 
-.converse-root {
+.conversejs {
     .oauth-providers {
         text-align: center;
         .oauth-provider {
@@ -387,7 +387,7 @@
     }
 }
 
-.converse-root {
+.conversejs {
     converse-chats {
         &.converse-overlayed {
 
@@ -612,7 +612,7 @@
 
 @include media-breakpoint-down(sm) {
 
-    .converse-root {
+    .conversejs {
         left: 0;
         right: 0;
         padding-left: env(safe-area-inset-left);

src/plugins/fullscreen/styles/background.scss

@@ -2,7 +2,7 @@
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/mixins";
 
-.converse-root-bg {
+.conversejs-bg {
     .subdued {
         opacity: 0.35;
     }

src/plugins/headlines-view/styles/headlines.scss

@@ -1,4 +1,4 @@
-.converse-root {
+.conversejs {
     .chat-head-headline {
         background-color: var(--headline-head-color);
     }
@@ -31,7 +31,7 @@
     }
 }
 
-.converse-root {
+.conversejs {
     converse-chats {
         &.converse-fullscreen {
             .chatbox.headlines {

src/plugins/minimize/styles/minimize.scss

@@ -1,4 +1,4 @@
-.converse-root {
+.conversejs {
     converse-chats {
         &.converse-overlayed {
             converse-minimized-chats {

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

@@ -13,8 +13,8 @@ converse-muc-destroyed {
     height: 100%;
 }
 
-.converse-root.converse-embedded,
-.converse-root {
+.conversejs.converse-embedded,
+.conversejs {
     .badge--muc {
         background-color: var(--groupchats-header-color);
     }
@@ -30,7 +30,7 @@ converse-muc-destroyed {
 
 /* ******************* Overlay  styles *************************** */
 
-.converse-root {
+.conversejs {
     converse-chats {
         &.converse-overlayed {
             .chatbox {
@@ -162,7 +162,7 @@ converse-muc-destroyed {
 
 
 @include media-breakpoint-down(sm) {
-    .converse-root {
+    .conversejs {
         converse-chats.converse-mobile,
         converse-chats.converse-overlayed,
         converse-chats.converse-fullscreen {

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

@@ -1,4 +1,4 @@
-.converse-root {
+.conversejs {
     converse-muc.chatroom {
         converse-muc-bottom-panel {
             display: contents;

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

@@ -3,7 +3,7 @@ converse-muc-config-form {
     overflow: auto;
 }
 
-.converse-root {
+.conversejs {
     .chatroom {
         .box-flyout {
             .muc-form-container {

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

@@ -1,4 +1,4 @@
-.converse-root {
+.conversejs {
     converse-muc.chatroom {
         .chat-head-chatroom {
             color: var(--chatroom-head-color);

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

@@ -1,4 +1,4 @@
-.converse-root {
+.conversejs {
     converse-muc.chatroom {
         .box-flyout {
             .occupants {

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

@@ -4,7 +4,7 @@
 @import "plugins/chatview/styles/chatbox.scss";
 @import "./muc-forms.scss";
 
-.converse-root {
+.conversejs {
     .chatroom {
         width: var(--chatroom-width);
         @media screen and (max-height: $mobile-landscape-height){

src/plugins/muc-views/tests/component.js

@@ -19,7 +19,7 @@ describe("The <converse-muc> component", function () {
         await u.waitUntil(() => (model.session.get('connection_status') === converse.ROOMSTATUS.ENTERED));
 
         const span_el = document.createElement('span');
-        span_el.classList.add('converse-root');
+        span_el.classList.add('conversejs');
         span_el.classList.add('converse-embedded');
 
         const muc_el = document.createElement('converse-muc');

src/plugins/rootview/root.js

@@ -18,7 +18,7 @@ class ConverseRoot extends CustomElement {
 
     connectedCallback () {
         super.connectedCallback();
-        this.classList.add('converse-root');
+        this.classList.add('conversejs');
         this.classList.add(`converse-${api.settings.get('view_mode')}`);
         this.classList.add(`theme-${api.settings.get('theme')}`);
         this.setAttribute('id', 'conversejs');

src/plugins/rosterview/styles/roster.scss

@@ -1,4 +1,4 @@
-.converse-root #converse-roster {
+.conversejs #converse-roster {
     text-align: left;
     width: 100%;
     position: relative;

src/shared/autocomplete/styles/_autocomplete.scss

@@ -1,4 +1,4 @@
-.converse-root {
+.conversejs {
     [hidden] { display: none; }
 
     .visually-hidden {
@@ -128,13 +128,13 @@
     }
 }
 
-.converse-root.converse-fullscreen {
+.conversejs.converse-fullscreen {
     .suggestion-box__results--above {
         bottom: 4.5em;
     }
 }
 
-.converse-root.converse-overlayed {
+.conversejs.converse-overlayed {
     .suggestion-box__results--above {
         bottom: 3.5em;
     }

src/shared/chat/styles/emoji.scss

@@ -2,7 +2,7 @@
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/mixins";
 
-.converse-root {
+.conversejs {
     @import "bootstrap/scss/media";
 
     .chatbox {
@@ -192,7 +192,7 @@
     }
 }
 
-.converse-root {
+.conversejs {
     converse-chats {
         &.converse-overlayed  {
             converse-emoji-dropdown {
@@ -268,7 +268,7 @@
 }
 
 @include media-breakpoint-up(m) {
-    .converse-root {
+    .conversejs {
         .chatbox {
             converse-emoji-picker {
                 max-width: 40em;

src/shared/chat/styles/toolbar.scss

@@ -2,7 +2,7 @@
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/mixins";
 
-.converse-root {
+.conversejs {
 
     .send-button {
         border-radius: 0;

src/shared/chat/styles/unfurl.scss

@@ -2,7 +2,7 @@
 @import "bootstrap/scss/variables";
 @import "shared/styles/_mixins.scss";
 
-.converse-root {
+.conversejs {
     @import "bootstrap/scss/card";
 
     .message {

src/shared/styles/_core.scss

@@ -1,4 +1,4 @@
-.converse-root {
+.conversejs {
     bottom: 0;
     height: 100%;
     position: fixed;
@@ -447,7 +447,7 @@
         font-size: 3.75em;
       }
     }
-    .converse-root:not(.converse-embedded)  {
+    .conversejs:not(.converse-embedded)  {
         .chatbox  {
             .chat-body {
                 border-radius: var(--chatbox-border-radius);
@@ -461,33 +461,33 @@
 
 
 @media screen and (min-width: 576px) {
-    .converse-root .offset-sm-2 {
+    .conversejs .offset-sm-2 {
         margin-left: 16.666667%;
     }
 }
 @media screen and (min-width: 768px) {
-    .converse-root .offset-md-2 {
+    .conversejs .offset-md-2 {
         margin-left: 16.666667%;
     }
-    .converse-root .offset-md-3 {
+    .conversejs .offset-md-3 {
         margin-left: 25%;
     }
 }
 @media screen and (min-width: 992px) {
-    .converse-root .offset-lg-2 {
+    .conversejs .offset-lg-2 {
         margin-left: 16.666667%;
     }
-    .converse-root .offset-lg-3 {
+    .conversejs .offset-lg-3 {
         margin-left: 25%;
     }
 }
 @media screen and (min-width: 1200px) {
-    .converse-root .offset-xl-2 {
+    .conversejs .offset-xl-2 {
         margin-left: 16.666667%;
     }
 }
 @media screen and (max-height: 450px) {
-  .converse-root {
+  .conversejs {
     left: 0;
   }
 }

src/shared/styles/_variables.scss

@@ -1,7 +1,7 @@
 $mobile_landscape_height: 450px !default;
 $mobile_portrait_length: 480px !default;
 
-.converse-root, .converse-root-bg, body.converse-fullscreen {
+.conversejs, .conversejs-bg, body.converse-fullscreen {
     --subdued-color: #A8ABA1;
 
     --green: #3AA569;
@@ -193,7 +193,7 @@ $mobile_portrait_length: 480px !default;
     --list-dot-circle-color: #f6dec1; // lighten($orange, 25%)
 }
 
-.converse-root.theme-concord {
+.conversejs.theme-concord {
     --avatar-border-radius: 10%;
     --avatar-border: 0px;
     --avatar-background-color: none;

src/shared/styles/badges.scss

@@ -1,4 +1,4 @@
-.converse-root {
+.conversejs {
     @import "bootstrap/scss/badge";
 
     .badge {

src/shared/styles/buttons.scss

@@ -1,4 +1,4 @@
-.converse-root {
+.conversejs {
     @import "bootstrap/scss/buttons";
     @import "bootstrap/scss/button-group";
 

src/shared/styles/font-awesome.scss

@@ -64,7 +64,7 @@
 @import "@fortawesome/fontawesome-free/scss/icons";
 @import "@fortawesome/fontawesome-free/scss/screen-reader";
 
-.converse-root, .converse-website {
+.conversejs, .converse-website {
   /* Apparent font-awesome bug? The circle has some kind of bottom margin */
 
   converse-icon:before {

src/shared/styles/forms.scss

@@ -1,4 +1,4 @@
-.converse-root {
+.conversejs {
     @import "bootstrap/scss/forms";
     @import "bootstrap/scss/input-group";
     @import "bootstrap/scss/custom-forms";

src/shared/styles/index.scss

@@ -11,7 +11,7 @@
 @import "./font-awesome.scss";
 @import "mixins";
 
-.converse-root {
+.conversejs {
     @import "bootstrap/scss/root";
     @import "bootstrap/scss/reboot";
     @import "bootstrap/scss/type";

src/shared/styles/lists.scss

@@ -1,4 +1,4 @@
-.converse-root {
+.conversejs {
     @import "bootstrap/scss/list-group";
 
     .list-group-item.active {

src/shared/styles/messages.scss

@@ -1,4 +1,4 @@
-.converse-root {
+.conversejs {
     .styling-directive {
         color: var(--subdued-color);
     }