Move fullscreen styles into relevant plugin

src/converse.js

@@ -19,7 +19,7 @@ import "./plugins/bookmark-views/index.js";       // Views for XEP-0048 Bookmark
 import "./plugins/chatview/index.js";       // Renders standalone chat boxes for single user chat
 import "./plugins/controlbox/index.js";     // The control box
 import "./plugins/dragresize/index.js";     // Allows chat boxes to be resized by dragging them
-import "./plugins/fullscreen.js";
+import "./plugins/fullscreen/index.js";
 import "./plugins/headlines-view/index.js";
 import "./plugins/mam-views.js";
 import "./plugins/minimize/index.js";             // Allows chat boxes to be minimized

src/plugins/fullscreen.js → src/plugins/fullscreen/index.js

@@ -3,12 +3,15 @@
  * @license Mozilla Public License (MPLv2)
  * @copyright 2020, the Converse.js contributors
  */
-import "./chatview/index.js";
-import "./controlbox/index.js";
-import "./singleton.js";
+import "plugins/chatview/index.js";
+import "plugins/controlbox/index.js";
+import "plugins/singleton.js";
 import "@converse/headless/plugins/muc/index.js";
 import { api, converse } from "@converse/headless/core";
 
+import './styles/fullscreen.scss';
+import './styles/background.scss';
+
 
 converse.plugins.add('converse-fullscreen', {
 

src/plugins/fullscreen/styles/background.scss

@@ -0,0 +1,74 @@
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+
+#conversejs-bg {
+    .subdued {
+        opacity: 0.35;
+    }
+
+    .converse-brand {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 15vh;
+        animation-name: fadein;
+        animation-fill-mode: forwards;
+        animation-duration: 5s;
+        animation-timing-function: ease;
+    }
+
+    .converse-brand__padding {
+        @include make-col-ready();
+        @include media-breakpoint-up(md) {
+            @include make-col(4);
+        }
+        @include media-breakpoint-up(lg) {
+            @include make-col(3);
+        }
+        @include media-breakpoint-up(xl) {
+            @include make-col(2);
+        }
+        padding: 0;
+    }
+
+    .converse-brand__heading {
+        @include make-col-ready();
+        @include media-breakpoint-up(md) {
+            font-size: 4em;
+            @include make-col(8);
+        }
+        @include media-breakpoint-up(lg) {
+            font-size: 5em;
+            @include make-col(9);
+        }
+        @include media-breakpoint-up(xl) {
+            font-size: 6em;
+            @include make-col(10);
+        }
+        padding: 0;
+        display: flex;
+        justify-content: center;
+        margin: auto;
+        svg {
+            margin-top: 0.3em;
+        }
+    }
+
+    .converse-brand__text {
+        color: #ffffff;
+        font-family: var(--branding-font);
+        font-weight: normal;
+        text-align: center;
+        font-size: 140%;
+        margin-left: 0.2em;
+        .byline {
+            margin: 0;
+            font-family: var(--heading-font);
+            font-size: 0.3em;
+            opacity: 0.55;
+            margin-bottom: 2em;
+            margin-left: -2.7em;
+            word-spacing: 5px;
+        }
+    }
+}

src/plugins/fullscreen/styles/fullscreen.scss

@@ -0,0 +1,4 @@
+body.converse-fullscreen {
+    margin: 0;
+    background-color: var(--global-background-color);
+}

src/shared/styles/_core.scss

@@ -1,81 +1,3 @@
-body.converse-fullscreen {
-    margin: 0;
-    background-color: var(--global-background-color);
-}
-
-#conversejs-bg {
-    .converse-brand {
-        display: flex;
-        justify-content: space-between;
-        margin-top: 15vh;
-        animation-name: fadein;
-        animation-fill-mode: forwards;
-        animation-duration: 5s;
-        animation-timing-function: ease;
-    }
-
-    .converse-brand__padding {
-        @include make-col-ready();
-        @include media-breakpoint-up(md) {
-            @include make-col(4);
-        }
-        @include media-breakpoint-up(lg) {
-            @include make-col(3);
-        }
-        @include media-breakpoint-up(xl) {
-            @include make-col(2);
-        }
-        padding: 0;
-    }
-
-    .converse-brand__heading {
-        @include make-col-ready();
-        @include media-breakpoint-up(md) {
-            font-size: 4em;
-            @include make-col(8);
-        }
-        @include media-breakpoint-up(lg) {
-            font-size: 5em;
-            @include make-col(9);
-        }
-        @include media-breakpoint-up(xl) {
-            font-size: 6em;
-            @include make-col(10);
-        }
-        padding: 0;
-        display: flex;
-        justify-content: center;
-        margin: auto;
-        svg {
-            margin-top: 0.3em;
-        }
-    }
-
-    .converse-brand__text {
-        color: #ffffff;
-        font-family: var(--branding-font);
-        font-weight: normal;
-        text-align: center;
-        font-size: 140%;
-        margin-left: 0.2em;
-        .byline {
-            margin: 0;
-            font-family: var(--heading-font);
-            font-size: 0.3em;
-            opacity: 0.55;
-            margin-bottom: 2em;
-            margin-left: -2.7em;
-            word-spacing: 5px;
-        }
-    }
-}
-
-#conversejs-bg, #conversejs {
-    .subdued {
-        opacity: 0.35;
-    }
-}
-
 #conversejs {
     bottom: 0;
     height: 100%;
@@ -92,6 +14,10 @@ body.converse-fullscreen {
         background-color: #EEE !important;
     }
 
+    .subdued {
+        opacity: 0.35;
+    }
+
     .fit-content {
         width: fit-content !important;
         max-width: fit-content !important;