From 7ffd0bf61dc058ec3ccce6d696c52d45752356c0 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Tue, 29 Nov 2022 11:48:20 +0200
Subject: [PATCH] Fixed menus in dialogs in firefox Also improved look of
 scrollbars incl. dark mode

---
 .../client/ui/dialogStack/DialogStack.vue     | 13 ++-----
 app/imports/client/ui/styles/body.css         | 37 +++++++++++++++++++
 app/imports/client/ui/styles/stylesIndex.js   |  1 +
 3 files changed, 41 insertions(+), 10 deletions(-)
 create mode 100644 app/imports/client/ui/styles/body.css

diff --git a/app/imports/client/ui/dialogStack/DialogStack.vue b/app/imports/client/ui/dialogStack/DialogStack.vue
index ac3a945b..2e425b0d 100644
--- a/app/imports/client/ui/dialogStack/DialogStack.vue
+++ b/app/imports/client/ui/dialogStack/DialogStack.vue
@@ -63,21 +63,14 @@
     },
     watch: {
       dialogs(newDialogs) {
-        let el = document.documentElement;
+        const el = document.documentElement;
         if (newDialogs.length) {
           this.top = el.scrollTop;
           if (el.scrollHeight > el.clientHeight){
-            el.style.position = 'fixed';
-            el.style.top = `${-this.top}px`;
-            el.style.left = 0;
-            el.style.right = 0;
-            el.style.overflowY = 'scroll';
+            el.style.overflowY = 'hidden';
+            el.scrollTop = this.top;
           }
         } else {
-          el.style.position = null;
-          el.style.top = null;
-          el.style.left = null;
-          el.style.right = null;
           el.style.overflowY = null;
           el.scrollTop = this.top;
         }
diff --git a/app/imports/client/ui/styles/body.css b/app/imports/client/ui/styles/body.css
new file mode 100644
index 00000000..d70859e8
--- /dev/null
+++ b/app/imports/client/ui/styles/body.css
@@ -0,0 +1,37 @@
+html {
+  --scrollbarBG: #f0f0f0;
+  --thumbBG: #cdcdcd;
+  scrollbar-gutter: stable;
+  background-color: var(--scrollbarBG);
+}
+
+html:has(#app.theme--dark) {
+  --scrollbarBG: #212121;
+  --thumbBG: #404040;
+}
+
+#app.theme--dark {
+  --scrollbarBG: #212121;
+  --thumbBG: #404040;
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: var(--scrollbarBG);
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--thumbBG);
+}
+
+::-webkit-scrollbar-corner {
+  background-color: rgba(0, 0, 0, 0);
+}
\ No newline at end of file
diff --git a/app/imports/client/ui/styles/stylesIndex.js b/app/imports/client/ui/styles/stylesIndex.js
index f9a49d9c..add626e2 100644
--- a/app/imports/client/ui/styles/stylesIndex.js
+++ b/app/imports/client/ui/styles/stylesIndex.js
@@ -1,3 +1,4 @@
+import './body.css';
 import './cardColors.css';
 import './cardTitles.css';
 import './centeredInputs.css';