From 970148e23189627ace11e7966367670b69554c9b Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Sun, 4 Sep 2022 13:38:05 +0200
Subject: [PATCH] Make webview scrollbar look identical to Qt one

---
 qt/aqt/data/web/css/webview.scss |  5 +----
 sass/_vars.scss                  |  2 ++
 sass/base.scss                   |  5 +----
 sass/scrollbar.scss              | 19 ++++++++++++++++---
 ts/editable/editable-base.scss   |  4 ++--
 5 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/qt/aqt/data/web/css/webview.scss b/qt/aqt/data/web/css/webview.scss
index 71a377303..f96d5f65b 100644
--- a/qt/aqt/data/web/css/webview.scss
+++ b/qt/aqt/data/web/css/webview.scss
@@ -17,6 +17,7 @@ body {
     transition: opacity 0.5s ease-out;
     margin: 2em;
     overscroll-behavior: none;
+    @include scrollbar.custom;
 }
 
 a {
@@ -27,7 +28,3 @@ a {
 h1 {
     margin-bottom: 0.2em;
 }
-
-.night-mode {
-    @include scrollbar.night-mode;
-}
diff --git a/sass/_vars.scss b/sass/_vars.scss
index 93032dae9..d406a4a80 100644
--- a/sass/_vars.scss
+++ b/sass/_vars.scss
@@ -48,6 +48,7 @@
     --button-pressed-border: #8f8f8f;
     --scrollbar-bg: #d8d8d8;
     --scrollbar-hover-bg: #d0d0d0;
+    --scrollbar-active-bg: #c8c8c8;
 }
 
 :root[class*="night-mode"] {
@@ -97,5 +98,6 @@
     --button-pressed-border: #0a0a0a;
     --scrollbar-bg: #434343;
     --scrollbar-hover-bg: #4e4e4e;
+    --scrollbar-active-bg: #464646;
     color-scheme: dark;
 }
diff --git a/sass/base.scss b/sass/base.scss
index ab8054a6b..13fb684bb 100644
--- a/sass/base.scss
+++ b/sass/base.scss
@@ -34,10 +34,7 @@ $utilities: (
 
 body {
     overscroll-behavior: none;
-}
-
-.night-mode {
-    @include scrollbar.night-mode;
+    @include scrollbar.custom;
 }
 
 button {
diff --git a/sass/scrollbar.scss b/sass/scrollbar.scss
index e448be308..4b47b91d8 100644
--- a/sass/scrollbar.scss
+++ b/sass/scrollbar.scss
@@ -4,7 +4,7 @@
 @use "vars";
 @use "fusion-vars";
 
-@mixin night-mode {
+@mixin custom {
     ::-webkit-scrollbar {
         background-color: var(--window-bg);
 
@@ -18,8 +18,8 @@
     }
 
     ::-webkit-scrollbar-thumb {
-        background: fusion-vars.$button-hover-bg;
-        border-radius: 8px;
+        background: var(--scrollbar-bg);
+        border-radius: 5px;
 
         &:horizontal {
             min-width: 50px;
@@ -28,9 +28,22 @@
         &:vertical {
             min-height: 50px;
         }
+
+        &:hover {
+            background: var(--scrollbar-hover-bg);
+        }
+
+        &:active {
+            background: var(--scrollbar-active-bg);
+        }
     }
 
     ::-webkit-scrollbar-corner {
         background-color: var(--window-bg);
     }
+
+    ::-webkit-scrollbar-track {
+        border-radius: 5px;
+        background-color: transparent;
+    }
 }
diff --git a/ts/editable/editable-base.scss b/ts/editable/editable-base.scss
index ac31a51ea..65f09d9ec 100644
--- a/ts/editable/editable-base.scss
+++ b/ts/editable/editable-base.scss
@@ -18,6 +18,6 @@ p {
     display: none;
 }
 
-:host(.night-mode) {
-    @include scrollbar.night-mode;
+:host(body) {
+    @include scrollbar.custom;
 }