Extract common styles to be used by Parchment Svelte components too

src/common/ui/common.css

@@ -0,0 +1,62 @@
+/*
+
+Common styles used by Svelte components
+=========
+
+Copyright (c) 2024 Dannii Willis
+MIT licenced
+https://github.com/curiousdannii/asyncglk
+
+*/
+
+/* A light theme (loosely) based on Material design */
+:root {
+    --asyncglk-ui-bg: #fff;
+    --asyncglk-ui-border: #666;
+    --asyncglk-ui-fg: #222;
+    --asyncglk-ui-selected: #cee0f2;
+    --asyncglk-ui-textbox: #fff;
+}
+
+/* A dark theme (loosely) based on Material design */
+[data-theme="dark"] {
+    --asyncglk-ui-bg: #111;
+    --asyncglk-ui-border: #666;
+    --asyncglk-ui-fg: #ddd;
+    --asyncglk-ui-selected: #153351;
+    --asyncglk-ui-textbox: #111;
+}
+
+/* UI controls */
+.asyncglk_ui .uirow {
+    line-height: 28px;
+}
+
+.asyncglk_ui button, .asyncglk_ui select, .asyncglk_ui textarea {
+    background: var(--asyncglk-ui-bg);
+    border: 2px solid var(--asyncglk-ui-border);
+    color: var(--asyncglk-ui-fg);
+    font-size: 15px;
+    padding: 3px 6px 4px;
+}
+
+.asyncglk_ui button.flat {
+    background: none;
+    border: 0;
+    display: inline;
+    font-size: inherit;
+    padding: 0;
+}
+
+.asyncglk_ui label {
+    line-height: 28px;
+}
+
+.asyncglk_ui select {
+    padding: 2px 3px 3px;
+}
+
+.asyncglk_ui textarea {
+    font-size: 14px;
+    padding: 4px 6px;
+}

src/dialog/browser/ui/BaseDialog.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import '../../../common/ui/common.css'
+
     import {is_pinch_zoomed} from '../../../common/misc.js'
 
     let dialog: HTMLDialogElement
@@ -53,24 +55,6 @@
 </script>
 
 <style>
-    /* A light theme (loosely) based on Material design */
-    :global(:root) {
-        --asyncglk-ui-bg: #fff;
-        --asyncglk-ui-border: #666;
-        --asyncglk-ui-fg: #222;
-        --asyncglk-ui-selected: #cee0f2;
-        --asyncglk-ui-textbox: #fff;
-    }
-
-    /* A dark theme (loosely) based on Material design */
-    :global([data-theme="dark"]) {
-        --asyncglk-ui-bg: #111;
-        --asyncglk-ui-border: #666;
-        --asyncglk-ui-fg: #ddd;
-        --asyncglk-ui-selected: #153351;
-        --asyncglk-ui-textbox: #111;
-    }
-
     dialog {
         box-sizing: border-box;
         background: var(--asyncglk-ui-bg);
@@ -121,48 +105,14 @@
         top: 10px;
     }
 
-    /* Some styles to be applied to everything in the dialog */
-    dialog :global(.uirow) {
-        line-height: 28px;
-    }
-
-    dialog :global(button), dialog :global(select), dialog :global(textarea) {
-        background: var(--asyncglk-ui-bg);
-        border: 2px solid var(--asyncglk-ui-border);
-        color: var(--asyncglk-ui-fg);
-        font-size: 15px;
-        padding: 3px 6px 4px;
-    }
-
-    dialog :global(button.flat) {
-        background: none;
-        border: 0;
-        display: inline;
-        font-size: inherit;
-        padding: 0;
-    }
-
-    dialog :global(label) {
-        line-height: 28px;
-    }
-
-    dialog :global(select) {
-        padding: 2px 3px 3px;
-    }
-
-    dialog :global(textarea) {
-        font-size: 14px;
-        padding: 4px 6px;
-    }
-
     dialog :global(.foot) {
         text-align: right;
     }
 </style>
 
 <dialog bind:this={dialog}
     class:fullscreen
-    class={extra_class}
+    class="asyncglk_ui {extra_class}"
     class:manually_positioned={typeof visualViewport !== 'undefined'}
     on:close={on_close}
 >

src/glkote/web/core.css

@@ -41,6 +41,12 @@ https://github.com/curiousdannii/asyncglk
     descent-override: 21.9%;
 }
 
+/* The body-scroll-lock package needs these to be set */
+body, html {
+    height: 100%;
+    width: 100%;
+}
+
 /* The position of #gameport must be controlled from without, but the overflow behaviour is ours. */
 div#gameport {
     overflow: clip;
@@ -52,13 +58,6 @@ div#gameport {
     width: 100%;
 }
 
-#loadingpane {
-    position: absolute;
-    width: 100%;
-    text-align: center;
-    top: 20%;
-}
-
 /* Make the test pane render invisibly */
 #layout_test_pane {
     position: absolute;