From 4dff552299a91d6bc56328f48482397e75938aec Mon Sep 17 00:00:00 2001
From: Edouard Vanbelle <opensource@edouard.vanbelle.fr>
Date: Mon, 13 Apr 2026 11:04:13 +0200
Subject: [PATCH] refactor(css): use 1 global declaration for scrollbar

---
 static/css/components/buttons.css          |  2 +-
 static/css/components/languageSelector.css | 16 ------------
 static/css/layout/content.css              | 17 ++++++++++++
 static/css/themes/dark.css                 | 30 ----------------------
 static/css/views/admin.css                 | 19 --------------
 static/css/views/auth.css                  | 17 ------------
 static/css/views/profile.css               | 16 ------------
 7 files changed, 18 insertions(+), 99 deletions(-)

diff --git a/static/css/components/buttons.css b/static/css/components/buttons.css
index d1159e29..f9f7c398 100644
--- a/static/css/components/buttons.css
+++ b/static/css/components/buttons.css
@@ -97,7 +97,7 @@
 }
 
 .toggle-btn.active {
-    background-color: var(--color-bg-surface);
+    background-color: var(--color-border);
     color: var(--color-accent);
     box-shadow: 0 1px 3px var(--color-shadow);
 }
diff --git a/static/css/components/languageSelector.css b/static/css/components/languageSelector.css
index 70ec79ef..9f1456a7 100644
--- a/static/css/components/languageSelector.css
+++ b/static/css/components/languageSelector.css
@@ -64,22 +64,6 @@
     z-index: 1000;
 }
 
-/* Custom scrollbar */
-.language-selector-dropdown::-webkit-scrollbar {
-    width: 6px;
-}
-.language-selector-dropdown::-webkit-scrollbar-track {
-    background: transparent;
-    margin: 8px 0;
-}
-.language-selector-dropdown::-webkit-scrollbar-thumb {
-    background-color: var(--color-border-medium);
-    border-radius: 3px;
-}
-.language-selector-dropdown::-webkit-scrollbar-thumb:hover {
-    background-color: var(--color-text-placeholder);
-}
-
 .language-selector.open .language-selector-dropdown {
     opacity: 1;
     visibility: visible;
diff --git a/static/css/layout/content.css b/static/css/layout/content.css
index 6a5dd874..b48f32b0 100644
--- a/static/css/layout/content.css
+++ b/static/css/layout/content.css
@@ -1,3 +1,20 @@
+/* ── Scrollbar ── */
+
+::-webkit-scrollbar {
+    width: 6px;
+}
+::-webkit-scrollbar-track {
+    background: var(--color-bg-surface);
+}
+::-webkit-scrollbar-thumb {
+    background: var(--color-accent);
+    border-radius: 3px;
+}
+* {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-accent) var(--color-bg-surface);
+}
+
 /* Content area */
 .content-area {
     flex-grow: 1;
diff --git a/static/css/themes/dark.css b/static/css/themes/dark.css
index 519a71bf..f66bf3a0 100644
--- a/static/css/themes/dark.css
+++ b/static/css/themes/dark.css
@@ -84,18 +84,6 @@
 
 /* ------------ */
 
-[data-theme="dark"] ::-webkit-scrollbar-thumb {
-    background-color: rgba(255, 255, 255, 0.15);
-}
-
-[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(255, 255, 255, 0.25);
-}
-
-[data-theme="dark"] * {
-    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
-}
-
 [data-theme="dark"] select {
     background-color: #1e293b;
     border-color: #334155;
@@ -156,24 +144,6 @@
     background-color: #475569;
 }
 
-[data-theme="dark"] .view-toggle {
-    background-color: #1e293b;
-    border-color: #334155;
-}
-
-[data-theme="dark"] .toggle-btn {
-    color: #94a3b8;
-}
-
-[data-theme="dark"] .toggle-btn:hover {
-    background-color: #334155;
-}
-
-[data-theme="dark"] .toggle-btn.active {
-    background-color: #334155;
-    color: #ff5e3a;
-}
-
 [data-theme="dark"] .context-menu {
     background: #1e293b;
     border-color: #334155;
diff --git a/static/css/views/admin.css b/static/css/views/admin.css
index 04800bb2..1820acc6 100644
--- a/static/css/views/admin.css
+++ b/static/css/views/admin.css
@@ -148,25 +148,6 @@ body {
     color: var(--color-text-faint);
 }
 
-/* ── Scrollbar ── */
-::-webkit-scrollbar {
-    width: 8px;
-}
-::-webkit-scrollbar-track {
-    background: transparent;
-}
-::-webkit-scrollbar-thumb {
-    background: var(--color-shadow-md);
-    border-radius: 4px;
-}
-::-webkit-scrollbar-thumb:hover {
-    background: var(--color-shadow-2xl);
-}
-* {
-    scrollbar-width: thin;
-    scrollbar-color: var(--color-shadow-md) transparent;
-}
-
 /* ── Top Header Bar ── */
 .admin-header {
     background: linear-gradient(135deg, var(--color-sidebar-bg-from) 0%, var(--color-sidebar-bg-to) 100%);
diff --git a/static/css/views/auth.css b/static/css/views/auth.css
index 849af480..7ae672a6 100644
--- a/static/css/views/auth.css
+++ b/static/css/views/auth.css
@@ -439,23 +439,6 @@
     padding: 6px;
 }
 
-.lang-picker-list::-webkit-scrollbar {
-    width: 6px;
-}
-
-.lang-picker-list::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-.lang-picker-list::-webkit-scrollbar-thumb {
-    background: var(--color-border);
-    border-radius: 3px;
-}
-
-.lang-picker-list::-webkit-scrollbar-thumb:hover {
-    background: var(--color-text-faint);
-}
-
 /* Language item in dropdown */
 .lang-picker-item {
     display: flex;
diff --git a/static/css/views/profile.css b/static/css/views/profile.css
index 2862ba45..fc549028 100644
--- a/static/css/views/profile.css
+++ b/static/css/views/profile.css
@@ -27,22 +27,6 @@ body {
 
 /* #main-content and #auth-error start hidden via .hidden class */
 
-/* ── Scrollbar ── */
-::-webkit-scrollbar {
-    width: 8px;
-}
-::-webkit-scrollbar-track {
-    background: transparent;
-}
-::-webkit-scrollbar-thumb {
-    background: var(--color-shadow-md);
-    border-radius: 4px;
-}
-* {
-    scrollbar-width: thin;
-    scrollbar-color: var(--color-shadow-md) transparent;
-}
-
 /* ── Header ── */
 .profile-header {
     background: linear-gradient(135deg, var(--color-sidebar-bg-from) 0%, var(--color-sidebar-bg-to) 100%);