From c2d917b9262fec812dfdfe79e9adc7d4763edb58 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 26 Mar 2025 18:53:17 +0200
Subject: [PATCH] style(next): restyle WebKit scrollbars

---
 src/public/stylesheets/theme-next-dark.css  |  7 ++-
 src/public/stylesheets/theme-next-light.css |  7 ++-
 src/public/stylesheets/theme-next/forms.css | 58 +++++++++++++++++++++
 3 files changed, 68 insertions(+), 4 deletions(-)

diff --git a/src/public/stylesheets/theme-next-dark.css b/src/public/stylesheets/theme-next-dark.css
index 87353887b..84a0e0eb9 100644
--- a/src/public/stylesheets/theme-next-dark.css
+++ b/src/public/stylesheets/theme-next-dark.css
@@ -190,8 +190,11 @@
     --right-pane-item-hover-background: #ffffff26;
     --right-pane-item-hover-color: white;
 
-    --scrollbar-border-color: #666;
-    --scrollbar-background-color: #333;
+    --scrollbar-thumb-color: #fdfdfd5c;
+    --scrollbar-thumb-color-hover: #ffffff7d;
+    --scrollbar-border-color: unset; /* Deprecated */
+    --scrollbar-background-color: unset; /* Deprecated */
+
     --link-color: lightskyblue;
 
     --mermaid-theme: dark;
diff --git a/src/public/stylesheets/theme-next-light.css b/src/public/stylesheets/theme-next-light.css
index 4060daf87..781a34a2b 100644
--- a/src/public/stylesheets/theme-next-light.css
+++ b/src/public/stylesheets/theme-next-light.css
@@ -189,8 +189,11 @@
     --right-pane-item-hover-background: #ececec;
     --right-pane-item-hover-color: inherit;
 
-    --scrollbar-border-color: #ddd;
-    --scrollbar-background-color: #ddd;
+    --scrollbar-thumb-color: #0000005c;
+    --scrollbar-thumb-color-hover: #00000066;
+    --scrollbar-border-color: unset; /* Deprecated */
+    --scrollbar-background-color: unset; /* Deprecated */
+
     --link-color: blue;
 
     --mermaid-theme: default;
diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css
index 671a90997..402f332dc 100644
--- a/src/public/stylesheets/theme-next/forms.css
+++ b/src/public/stylesheets/theme-next/forms.css
@@ -660,3 +660,61 @@ a.tn-link:hover[href^="https://"]:not(.no-arrow)::after,
 input[type="range"] {
     background: transparent;
 }
+
+/*
+ * WebKit scrollbars
+ */
+
+:root {
+    --scrollbar-thickness: 10px;
+    --scrollbar-thumb-thickness: 3px;
+    --scrollbar-thumb-hover-thickness: 8px;
+    --scrollbar-start-end-gap: 8px;
+}
+
+/* Scrollbar's body */
+
+::-webkit-scrollbar:vertical {
+    width: var(--scrollbar-thickness) !important;
+}
+
+::-webkit-scrollbar:horizontal {
+    height: var(--scrollbar-thickness) !important;
+}
+
+/* Scrollbar's thumb */
+
+::-webkit-scrollbar-thumb {
+    --s-thumb-thickness: var(--scrollbar-thumb-thickness);
+    --s-thumb-color: var(--scrollbar-thumb-color);
+
+    --s-gradient-angle: 90deg;
+    --s-gradient-p1: calc((var(--scrollbar-thickness) - var(--s-thumb-thickness)) / 2);
+    --s-gradient-p2: calc(var(--s-gradient-p1) + var(--s-thumb-thickness));
+
+    border: none !important;
+    background: linear-gradient(var(--s-gradient-angle), transparent, transparent var(--s-gradient-p1),
+                                       var(--s-thumb-color) 0px, var(--s-thumb-color) var(--s-gradient-p2),
+                                       transparent 0) !important;
+
+    border-radius: calc(var(--scrollbar-thickness) / 2) !important;
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+    --s-gradient-angle: 0deg;
+}
+
+::-webkit-scrollbar-thumb:hover {
+   --s-thumb-thickness: var(--scrollbar-thumb-hover-thickness);
+   --s-thumb-color: var(--scrollbar-thumb-color-hover);
+}
+
+/* Scrollbar's increment/decrement buttons (repurposed as a scrollbar start/end gap) */
+
+::-webkit-scrollbar-button:vertical {
+    height: var(--scrollbar-start-end-gap);
+}
+
+::-webkit-scrollbar-button:horizontal {
+    width: var(--scrollbar-start-end-gap);
+}
\ No newline at end of file