Fix custom CSS not being applied to scrollbars in night mode (#1525)

qt/aqt/data/web/css/webview.scss

@@ -33,6 +33,6 @@ h1 {
     margin-bottom: 0.2em;
 }
 
-.nightMode {
+.night-mode {
     @include scrollbar.night-mode;
 }

sass/base.scss

@@ -41,7 +41,7 @@ body {
     overscroll-behavior: none;
 }
 
-.nightMode {
+.night-mode {
     @include scrollbar.night-mode;
 }
 

sass/scrollbar.scss

@@ -5,7 +5,7 @@
 @use "fusion-vars";
 
 @mixin night-mode {
-    &::-webkit-scrollbar {
+    ::-webkit-scrollbar {
         background-color: var(--window-bg);
 
         &:horizontal {
@@ -17,7 +17,7 @@
         }
     }
 
-    &::-webkit-scrollbar-thumb {
+    ::-webkit-scrollbar-thumb {
         background: fusion-vars.$button-hover-bg;
         border-radius: 8px;
 
@@ -30,7 +30,7 @@
         }
     }
 
-    &::-webkit-scrollbar-corner {
+    ::-webkit-scrollbar-corner {
         background-color: var(--window-bg);
     }
 }

ts/components/ButtonToolbar.svelte

@@ -110,12 +110,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </div>
 
 <style lang="scss">
-    @use "sass/scrollbar";
-
-    .nightMode {
-        @include scrollbar.night-mode;
-    }
-
     .button-toolbar {
         flex-wrap: var(--buttons-wrap);
         padding-left: 0.15rem;

ts/editable/editable-base.scss

@@ -2,10 +2,6 @@
 
 * {
     max-width: 100%;
-
-    :host(.nightMode) & {
-        @include scrollbar.night-mode;
-    }
 }
 
 p {
@@ -21,3 +17,7 @@ p {
 [hidden] {
     display: none;
 }
+
+:host(.night-mode) {
+    @include scrollbar.night-mode;
+}

ts/editor/RichTextInput.svelte

@@ -245,6 +245,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 >
     <div
         class:hidden
+        class:night-mode={$pageTheme.isDark}
         use:attachShadow
         use:attachStyles
         use:attachContentEditable={{ stylesDidLoad }}