Fix custom webview scrollbar not showing (#2085)

* Fix custom scrollbar not showing

* Move body selector out of scrollbar mixin

* Apply custom scrollbar to child elements too

* Remove some duplicate definitions

* Run prettier

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

@@ -17,10 +17,12 @@ body {
     transition: opacity 0.5s ease-out;
     margin: 2em;
     overscroll-behavior: none;
+    &:not(.isMac),
+    &:not(.isMac) * {
+        @include scrollbar.custom;
+    }
 }
 
-@include scrollbar.custom;
-
 a {
     color: var(--accent-link);
     text-decoration: none;

sass/_functions.scss

@@ -21,8 +21,7 @@
                     create-vars-from-map($value, $theme, #{$name}-#{$key}, $output)
                 );
             }
-        }
+        } @else if $key == "default" {
-        @else if $key == "default" {
             @return map.set($output, $name, map.get($map, $key));
         }
     }

sass/base.scss

@@ -32,11 +32,22 @@ $utilities: (
     flex-basis: 75%;
 }
 
+html,
 body {
-    overscroll-behavior: none;
+    height: 100%;
 }
 
-@include scrollbar.custom;
+html {
+    overflow-x: hidden;
+}
+
+body {
+    overscroll-behavior: none;
+    &:not(.isMac),
+    &:not(.isMac) * {
+        @include scrollbar.custom;
+    }
+}
 
 button {
     /* override transition for instant hover response */

sass/scrollbar.scss

@@ -4,48 +4,45 @@
 @use "vars";
 
 @mixin custom {
-    .isWin,
+    &::-webkit-scrollbar {
-    .isLin {
+        background-color: vars.color(canvas);
-        ::-webkit-scrollbar {
-            background-color: vars.color(canvas);
 
-            &:horizontal {
+        &:horizontal {
-                height: 12px;
+            height: 12px;
-            }
-
-            &:vertical {
-                width: 12px;
-            }
         }
 
-        ::-webkit-scrollbar-thumb {
+        &:vertical {
-            background: vars.color(scrollbar-bg);
+            width: 12px;
-            border-radius: vars.prop(border-radius);
-
-            &:horizontal {
-                min-width: 50px;
-            }
-
-            &:vertical {
-                min-height: 50px;
-            }
-
-            &:hover {
-                background: vars.color(scrollbar-bg-hover);
-            }
-
-            &:active {
-                background: vars.color(scrollbar-bg-active);
-            }
-        }
-
-        ::-webkit-scrollbar-corner {
-            background-color: vars.color(canvas);
-        }
-
-        ::-webkit-scrollbar-track {
-            border-radius: 5px;
-            background-color: transparent;
         }
     }
+
+    &::-webkit-scrollbar-thumb {
+        background: vars.color(scrollbar-bg);
+        border-radius: vars.prop(border-radius);
+
+        &:horizontal {
+            min-width: 50px;
+        }
+
+        &:vertical {
+            min-height: 50px;
+        }
+
+        &:hover {
+            background: vars.color(scrollbar-bg-hover);
+        }
+
+        &:active {
+            background: vars.color(scrollbar-bg-active);
+        }
+    }
+
+    &::-webkit-scrollbar-corner {
+        background-color: vars.color(canvas);
+    }
+
+    &::-webkit-scrollbar-track {
+        border-radius: 5px;
+        background-color: transparent;
+    }
 }

ts/change-notetype/change-notetype-base.scss

@@ -23,11 +23,6 @@ html {
     overflow-x: hidden;
 }
 
-html,
-body {
-    height: 100%;
-}
-
 #main {
     padding: 0.5em 0.5em 1em 0.5em;
     height: 100vh;

ts/editable/editable-base.scss

@@ -18,7 +18,8 @@ p {
     display: none;
 }
 
-:host(body) {
+:host(body),
+:host(body) * {
     @include scrollbar.custom;
 }
 

ts/editor/editor-base.scss

@@ -12,8 +12,3 @@ $btn-disabled-opacity: 0.4;
 html {
     overflow: hidden;
 }
-
-html,
-body {
-    height: 100%;
-}

ts/import-csv/import-csv-base.scss

@@ -22,10 +22,6 @@ body {
     padding-bottom: 5em;
 }
 
-html {
-    overflow-x: hidden;
-}
-
 // override the default down arrow colour in <select> elements
 .night-mode select {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");