From 5017cd48b6ae6893a41d3df75f1b04fc335e44b6 Mon Sep 17 00:00:00 2001
From: Kibi Kelburton <git@f0ck.it>
Date: Wed, 6 May 2026 05:09:59 +0200
Subject: [PATCH] testing a more unified scrollbar look

---
 public/s/css/f0ckm.css | 25 +++++++++++++------------
 views/scroller.html    |  9 +++++++--
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/public/s/css/f0ckm.css b/public/s/css/f0ckm.css
index 0f3b1f0..6116d02 100644
--- a/public/s/css/f0ckm.css
+++ b/public/s/css/f0ckm.css
@@ -2282,13 +2282,9 @@ body.layout-legacy .scroll-to-bottom svg {
 
 
 
-.comments-list::-webkit-scrollbar {
-  width: 6px;
-}
 
-.comments-list::-webkit-scrollbar-thumb {
-  background: var(--gray);
-  border-radius: 10px;
+.comments-list {
+  scrollbar-width: thin;
 }
 
 .comment {
@@ -3204,13 +3200,20 @@ html[res="fullscreen"] span#favs {
 
 /* Global scrollbar rules */
 ::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: 10px;
+  height: 10px;
 }
 
 ::-webkit-scrollbar-thumb {
   background-color: var(--scrollbar-color);
+  background-clip: content-box;
+  border: 3px solid transparent;
   border-radius: 10px;
+  transition: background-color 0.2s;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--accent);
 }
 
 ::-webkit-scrollbar-track {
@@ -9909,12 +9912,10 @@ body.layout-modern>.pagewrapper:not(:has(.index-layout-wrapper)):not(:has(.item-
   scrollbar-color: var(--accent) transparent;
 }
 
-#shortcuts-modal .login-modal-content::-webkit-scrollbar {
-  width: 6px;
-}
-
 #shortcuts-modal .login-modal-content::-webkit-scrollbar-thumb {
   background-color: var(--accent);
+  background-clip: content-box;
+  border: 3px solid transparent;
   border-radius: 10px;
 }
 
diff --git a/views/scroller.html b/views/scroller.html
index ef4a4df..8509a3c 100644
--- a/views/scroller.html
+++ b/views/scroller.html
@@ -575,8 +575,13 @@
     /* ── COMMENTS PANEL ───────────────────────────── */
     #comments-panel { z-index: 802; }
     #comments-list { flex: 1; overflow-y: auto; padding: 0 16px 8px; }
-    #comments-list::-webkit-scrollbar { width: 4px; }
-    #comments-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 2px; }
+    #comments-list::-webkit-scrollbar { width: 10px; }
+    #comments-list::-webkit-scrollbar-thumb {
+      background: rgba(255,255,255,.12);
+      background-clip: content-box;
+      border: 3px solid transparent;
+      border-radius: 10px;
+    }
     .comment-item { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
     .comment-item:last-child { border-bottom: none; }
     .comment-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid rgba(255,255,255,.12); }