From 3d23a50a2c26d6f9e630248c4f5d5682aa7bf0ca Mon Sep 17 00:00:00 2001
From: Pas <74743263+Pasithea0@users.noreply.github.com>
Date: Fri, 7 Nov 2025 23:04:33 -0700
Subject: [PATCH] Update global scrollbar styles to be cleaner

Introduces custom scrollbar styling for a thinner, rounded appearance with smooth color transitions and improved aesthetics. Applies consistent scrollbar styles across browsers and enhances user experience.
---
 src/assets/css/index.css | 32 +++++++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index 33b5ace7..83bec77c 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -218,20 +218,38 @@ input[type="range"].styled-slider.slider-progress::-ms-fill-lower {
   border-right-width: 0;
 }
 
+/* Modern thin rounded scrollbar */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: theme("colors.video.context.border") transparent;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
 ::-webkit-scrollbar-track {
-  background-color: transparent;
+  background: transparent;
+  border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb {
   background-color: theme("colors.video.context.border");
-  border: 5px solid transparent;
-  border-left: 0;
-  background-clip: content-box;
+  border-radius: 10px;
+  transition: background-color 0.2s ease;
 }
 
-::-webkit-scrollbar {
-  /* For some reason the styles don't get applied without the width */
-  width: 13px;
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(134, 82, 187, 0.8);
+}
+
+::-webkit-scrollbar-thumb:active {
+  background-color: rgba(134, 82, 187, 1);
+}
+
+::-webkit-scrollbar-corner {
+  background: transparent;
 }
 
 .grecaptcha-badge {