feat: Add custom scrollbar styles for improved aesthetics and usability

sejtam-dev · sejtam-dev · commit 7c6edfdacbef · 2026-02-28T11:31:33.000+01:00
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -10,6 +10,10 @@
     --text-primary:   #0f172a;
     --text-muted:     #64748b;
     --text-subtle:    #94a3b8;
+
+    --scrollbar-track: #e2e8f0;
+    --scrollbar-thumb: #94a3b8;
+    --scrollbar-thumb-hover: #7c3aed;
 }
 
 /* Dark mode overrides (applied via .dark on <html>) */
@@ -22,6 +26,10 @@
     --text-primary:   #f1f5f9;
     --text-muted:     #94a3b8;
     --text-subtle:    #64748b;
+
+    --scrollbar-track: #1e293b;
+    --scrollbar-thumb: #334155;
+    --scrollbar-thumb-hover: #7c3aed;
 }
 
 @theme inline {
@@ -64,3 +72,34 @@ input[type="range"]::-moz-range-thumb {
     cursor: pointer;
     border: none;
 }
+
+/* ── Custom scrollbar ────────────────────────────────────────────────────── */
+
+/* Webkit (Chrome, Safari, Edge, mobile) */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+::-webkit-scrollbar-track {
+    background: var(--scrollbar-track);
+    border-radius: 999px;
+}
+::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb);
+    border-radius: 999px;
+    border: 2px solid var(--scrollbar-track);
+    transition: background 0.2s;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: var(--scrollbar-thumb-hover);
+}
+::-webkit-scrollbar-corner {
+    background: var(--scrollbar-track);
+}
+
+/* Firefox */
+* {
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+}
+
