Replaces #conversejs with .conversejs

src/modals/styles/_modal.scss

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

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

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

src/plugins/chatboxviews/styles/chats.scss

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

src/plugins/chatview/styles/_chatbox.scss

@@ -3,7 +3,7 @@
 @import "bootstrap/scss/mixins";
 @import "shared/styles/_variables.scss";
 
-#conversejs {
+.conversejs {
     @import "bootstrap/scss/media";
 
     converse-controlbox-navback {
@@ -400,7 +400,7 @@
 
 /* ******************* Overlay and embedded styles *************************** */
 
-#conversejs {
+.conversejs {
     converse-chats.converse-embedded,
     converse-chats.converse-overlayed {
         .controlbox-head {
@@ -472,7 +472,7 @@
 }
 
 @include media-breakpoint-down(sm) {
-    #conversejs.converse-overlayed {
+    .conversejs.converse-overlayed {
         > .row {
             flex-direction: column;
             &.no-gutters {
@@ -483,7 +483,7 @@
 }
 
 
-#conversejs {
+.conversejs {
     converse-chats.converse-embedded,
     converse-chats.converse-fullscreen  {
         .flyout {
@@ -568,7 +568,7 @@
 
 /* ******************* Fullpage styles *************************** */
 
-#conversejs {
+.conversejs {
     converse-chats.converse-fullscreen  {
         .chatbox-btn {
             font-size: var(--fullpage-chatbox-button-size);
@@ -608,7 +608,7 @@
 
 
 @include media-breakpoint-down(sm) {
-    #conversejs {
+    .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";
 
-#conversejs {
+.conversejs {
     .oauth-providers {
         text-align: center;
         .oauth-provider {
@@ -387,7 +387,7 @@
     }
 }
 
-#conversejs {
+.conversejs {
     converse-chats {
         &.converse-overlayed {
 
@@ -612,7 +612,7 @@
 
 @include media-breakpoint-down(sm) {
 
-    #conversejs {
+    .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";
 
-#conversejs-bg {
+.conversejs-bg {
     .subdued {
         opacity: 0.35;
     }

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

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

src/plugins/minimize/styles/minimize.scss

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

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

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

src/plugins/rootview.js

@@ -16,9 +16,9 @@ converse.plugins.add('converse-rootview', {
                 return;
             }
             const root = api.settings.get('root');
-            if (!root.querySelector('converse-root#conversejs')) {
+            if (!root.querySelector('converse-root.conversejs')) {
                 const el = document.createElement('converse-root');
-                el.setAttribute('id', 'conversejs');
+                el.setAttribute('class', 'conversejs');
                 u.addClass(`theme-${api.settings.get('theme')}`, el);
                 const body = root.querySelector('body');
                 if (body) {

src/plugins/rootview/root.js

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

src/plugins/rootview/utils.js

@@ -7,9 +7,9 @@ export function ensureElement () {
         return;
     }
     const root = api.settings.get('root');
-    if (!root.querySelector('converse-root#conversejs')) {
+    if (!root.querySelector('converse-root.conversejs')) {
         const el = document.createElement('converse-root');
-        el.setAttribute('id', 'conversejs');
+        el.setAttribute('class', 'conversejs');
         u.addClass(`theme-${api.settings.get('theme')}`, el);
         const body = root.querySelector('body');
         if (body) {

src/plugins/rosterview/styles/roster.scss

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

src/shared/autocomplete/styles/_autocomplete.scss

@@ -1,4 +1,4 @@
-#conversejs {
+.conversejs {
     [hidden] { display: none; }
 
     .visually-hidden {
@@ -126,13 +126,13 @@
     }
 }
 
-#conversejs.converse-fullscreen {
+.conversejs.converse-fullscreen {
     .suggestion-box__results--above {
         bottom: 4.5em;
     }
 }
 
-#conversejs.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";
 
-#conversejs {
+.conversejs {
     @import "bootstrap/scss/media";
 
     .chatbox {
@@ -191,7 +191,7 @@
     }
 }
 
-#conversejs {
+.conversejs {
     converse-chats {
         &.converse-overlayed  {
             converse-emoji-dropdown {
@@ -267,7 +267,7 @@
 }
 
 @include media-breakpoint-up(m) {
-    #conversejs {
+    .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";
 
-#conversejs {
+.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";
 
-#conversejs {
+.conversejs {
     @import "bootstrap/scss/card";
 
     .message {

src/shared/styles/_core.scss

@@ -1,4 +1,4 @@
-#conversejs {
+.conversejs {
     bottom: 0;
     height: 100%;
     position: fixed;
@@ -447,7 +447,7 @@
         font-size: 3.75em;
       }
     }
-    #conversejs: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) {
-    #conversejs .offset-sm-2 {
+    .conversejs .offset-sm-2 {
         margin-left: 16.666667%;
     }
 }
 @media screen and (min-width: 768px) {
-    #conversejs .offset-md-2 {
+    .conversejs .offset-md-2 {
         margin-left: 16.666667%;
     }
-    #conversejs .offset-md-3 {
+    .conversejs .offset-md-3 {
         margin-left: 25%;
     }
 }
 @media screen and (min-width: 992px) {
-    #conversejs .offset-lg-2 {
+    .conversejs .offset-lg-2 {
         margin-left: 16.666667%;
     }
-    #conversejs .offset-lg-3 {
+    .conversejs .offset-lg-3 {
         margin-left: 25%;
     }
 }
 @media screen and (min-width: 1200px) {
-    #conversejs .offset-xl-2 {
+    .conversejs .offset-xl-2 {
         margin-left: 16.666667%;
     }
 }
 @media screen and (max-height: 450px) {
-  #conversejs {
+  .conversejs {
     left: 0;
   }
 }

src/shared/styles/_variables.scss

@@ -1,7 +1,7 @@
 $mobile_landscape_height: 450px !default;
 $mobile_portrait_length: 480px !default;
 
-#conversejs, #conversejs-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%)
 }
 
-#conversejs.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 @@
-#conversejs {
+.conversejs {
     @import "bootstrap/scss/badge";
 
     .badge {

src/shared/styles/buttons.scss

@@ -1,4 +1,4 @@
-#conversejs {
+.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";
 
-#conversejs, .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 @@
-#conversejs {
+.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";
 
-#conversejs {
+.conversejs {
     @import "bootstrap/scss/root";
     @import "bootstrap/scss/reboot";
     @import "bootstrap/scss/type";

src/shared/styles/lists.scss

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

src/shared/styles/messages.scss

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