From ee4413d0bc51e02aa832722aa795c2277fd581c2 Mon Sep 17 00:00:00 2001
From: MMP0 <28616020+MMP0@users.noreply.github.com>
Date: Wed, 21 Feb 2024 11:27:52 +0900
Subject: [PATCH] Improve scrollbar

---
 javascript/amethyst-nightfall.css | 3 ++-
 javascript/black-orange.css       | 3 ++-
 javascript/black-teal.css         | 3 ++-
 javascript/emerald-paradise.css   | 1 +
 javascript/invoked.css            | 1 +
 javascript/light-teal.css         | 3 ++-
 javascript/midnight-barbie.css    | 3 ++-
 javascript/orchid-dreams.css      | 1 +
 javascript/simple-dark.css        | 3 ++-
 javascript/simple-light.css       | 3 ++-
 javascript/timeless-beige.css     | 1 +
 11 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/javascript/amethyst-nightfall.css b/javascript/amethyst-nightfall.css
index 68a9e0746..1fc112a62 100644
--- a/javascript/amethyst-nightfall.css
+++ b/javascript/amethyst-nightfall.css
@@ -37,7 +37,8 @@ input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 18px; cu
 input[type=range]::-moz-range-track { width: 100%; height: 18px; cursor: pointer; box-shadow: 2px 2px 3px #111111; background: var(--input-background-fill); border-radius: var(--radius-lg); border: 0px solid #222222; }
 input[type=range]::-webkit-slider-thumb { box-shadow: 2px 2px 3px #111111; border: 0px solid #000000; height: 18px; width: 40px; border-radius: var(--radius-lg); background: var(--highlight-color); cursor: pointer; appearance: none; margin-top: 0px; }
 input[type=range]::-moz-range-thumb { box-shadow: 2px 2px 3px #111111; border: 0px solid #000000; height: 18px; width: 40px; border-radius: var(--radius-lg); background: var(--highlight-color); cursor: pointer; appearance: none; margin-top: 0px; }
-::-webkit-scrollbar { width: 12px; }
+:root { scrollbar-color: var(--highlight-color) #333333; }
+::-webkit-scrollbar { width: 12px; height: 12px; }
 ::-webkit-scrollbar-track { background: #333333; }
 ::-webkit-scrollbar-thumb { background-color: var(--highlight-color); border-radius: var(--radius-lg); border-width: 0; box-shadow: 2px 2px 3px #111111; }
 div.form { border-width: 0; box-shadow: none; background: transparent; overflow: visible; gap: 1em; margin-bottom: 6px; }
diff --git a/javascript/black-orange.css b/javascript/black-orange.css
index 9ba59fb09..4b9845144 100644
--- a/javascript/black-orange.css
+++ b/javascript/black-orange.css
@@ -54,7 +54,8 @@ input[type=range]::-webkit-slider-thumb { box-shadow: 2px 2px 3px #111111 !impor
   border-radius: var(--radius-lg) !important; background: var(--highlight-color) !important; cursor: pointer !important; appearance: none !important; margin-top: 0px !important; }
 input[type=range]::-moz-range-thumb { box-shadow: 2px 2px 3px #111111 !important; border: 0px solid #000000 !important; height: var(--line-sm) !important; width: var(--line-sm) !important;
   border-radius: var(--radius-lg) !important; background: var(--highlight-color) !important; cursor: pointer !important; appearance: none !important; margin-top: 0px !important; }
-::-webkit-scrollbar { width: 12px; }
+:root { scrollbar-color: var(--highlight-color) #333333; }
+::-webkit-scrollbar { width: 12px; height: 12px; }
 ::-webkit-scrollbar-track { background: #333333; }
 ::-webkit-scrollbar-thumb { background-color: var(--highlight-color); border-radius: var(--radius-lg); border-width: 0; box-shadow: 2px 2px 3px #111111; }
 div.form { border-width: 0; box-shadow: none; background: transparent; overflow: visible; margin-bottom: 6px; }
diff --git a/javascript/black-teal.css b/javascript/black-teal.css
index c60ed3f7a..13c65bc73 100644
--- a/javascript/black-teal.css
+++ b/javascript/black-teal.css
@@ -50,7 +50,8 @@ input[type=range]::-webkit-slider-thumb { box-shadow: 2px 2px 3px #111111 !impor
   border-radius: var(--radius-lg) !important; background: var(--highlight-color) !important; cursor: pointer !important; appearance: none !important; margin-top: 0px !important; }
 input[type=range]::-moz-range-thumb { box-shadow: 2px 2px 3px #111111 !important; border: 0px solid #000000 !important; height: var(--line-xs) !important; width: var(--line-md) !important;
   border-radius: var(--radius-lg) !important; background: var(--highlight-color) !important; cursor: pointer !important; appearance: none !important; margin-top: 0px !important; }
-::-webkit-scrollbar { width: 12px; }
+:root { scrollbar-color: var(--highlight-color) #303030; }
+::-webkit-scrollbar { width: 12px; height: 12px; }
 ::-webkit-scrollbar-track { background: #303030; }
 ::-webkit-scrollbar-thumb { background-color: var(--highlight-color); border-radius: var(--radius-lg); border-width: 0; box-shadow: 2px 2px 3px #111111; }
 div.form { border-width: 0; box-shadow: none; background: transparent; overflow: visible; }
diff --git a/javascript/emerald-paradise.css b/javascript/emerald-paradise.css
index 1fe9a7424..a3825e894 100644
--- a/javascript/emerald-paradise.css
+++ b/javascript/emerald-paradise.css
@@ -39,6 +39,7 @@ input[type=range] { height: var(--line-sm); appearance: none; margin-top: 0; min
 input[type=range]::-webkit-slider-runnable-track, input[type=range]::-moz-range-track { width: 100%; height: 6px; cursor: pointer; background: var(--primary-400); border-radius: var(--radius-lg); border: 0px solid #222222; }
 input[type=range]::-webkit-slider-thumb, input[type=range]::-moz-range-thumb { border: 0px solid #000000; height: var(--line-sm); width: 8px; border-radius: var(--radius-lg); background: white; cursor: pointer; appearance: none; margin-top: 0px; }
 input[type=range]::-moz-range-progress {  background-color: var(--primary-500);  height: 6px;  border-radius: var(--radius-lg); }
+:root { scrollbar-color: var(--highlight-color) #333333; }
 ::-webkit-scrollbar-track { background: #333333; }
 ::-webkit-scrollbar-thumb { background-color: var(--highlight-color); border-radius: var(--radius-lg); border-width: 0; box-shadow: 2px 2px 3px #111111; }
 div.form { border-width: 0; box-shadow: none; background: transparent; overflow: visible; margin-bottom: 6px; }
diff --git a/javascript/invoked.css b/javascript/invoked.css
index c1c6dec13..391db821c 100644
--- a/javascript/invoked.css
+++ b/javascript/invoked.css
@@ -39,6 +39,7 @@ input[type=range] { height: var(--line-sm); appearance: none; margin-top: 0; min
 input[type=range]::-webkit-slider-runnable-track, input[type=range]::-moz-range-track { width: 100%; height: 6px; cursor: pointer; background: var(--primary-400); border-radius: var(--radius-lg); border: 0px solid #222222; }
 input[type=range]::-webkit-slider-thumb, input[type=range]::-moz-range-thumb { border: 0px solid #000000; height: var(--line-sm); width: 8px; border-radius: var(--radius-lg); background: white; cursor: pointer; appearance: none; margin-top: 0px; }
 input[type=range]::-moz-range-progress {  background-color: var(--primary-500);  height: 6px;  border-radius: var(--radius-lg); }
+:root { scrollbar-color: var(--highlight-color) #333333; }
 ::-webkit-scrollbar-track { background: #333333; }
 ::-webkit-scrollbar-thumb { background-color: var(--highlight-color); border-radius: var(--radius-lg); border-width: 0; box-shadow: 2px 2px 3px #111111; }
 div.form { border-width: 0; box-shadow: none; background: transparent; overflow: visible; margin-bottom: 6px; }
diff --git a/javascript/light-teal.css b/javascript/light-teal.css
index 7bfea1d38..cccf07a62 100644
--- a/javascript/light-teal.css
+++ b/javascript/light-teal.css
@@ -48,7 +48,8 @@ input[type=range]::-webkit-slider-thumb { box-shadow: 2px 2px 3px #111111 !impor
   border-radius: var(--radius-lg) !important; background: var(--highlight-color) !important; cursor: pointer !important; appearance: none !important; margin-top: 0px !important; }
 input[type=range]::-moz-range-thumb { box-shadow: 2px 2px 3px #111111 !important; border: 0px solid #000000 !important; height: var(--line-sm) !important; width: var(--line-sm) !important;
   border-radius: var(--radius-lg) !important; background: var(--highlight-color) !important; cursor: pointer !important; appearance: none !important; margin-top: 0px !important; }
-::-webkit-scrollbar { width: 12px; }
+:root { scrollbar-color: var(--highlight-color) #333333; }
+::-webkit-scrollbar { width: 12px; height: 12px; }
 ::-webkit-scrollbar-track { background: #333333; }
 ::-webkit-scrollbar-thumb { background-color: var(--highlight-color); border-radius: var(--radius-lg); border-width: 0; box-shadow: 2px 2px 3px #111111; }
 div.form { border-width: 0; box-shadow: none; background: transparent; overflow: visible; margin-bottom: 6px; }
diff --git a/javascript/midnight-barbie.css b/javascript/midnight-barbie.css
index d6ef80b67..1e53b934e 100644
--- a/javascript/midnight-barbie.css
+++ b/javascript/midnight-barbie.css
@@ -43,7 +43,8 @@ input[type=range]::-webkit-slider-thumb { box-shadow: 2px 2px 3px #111111 !impor
   border-radius: var(--radius-lg) !important; background: var(--highlight-color) !important; cursor: pointer !important; appearance: none !important; margin-top: 0px !important; }
 input[type=range]::-moz-range-thumb { box-shadow: 2px 2px 3px #111111 !important; border: 0px solid #000000 !important; height: var(--line-sm) !important; width: var(--line-sm) !important;
   border-radius: var(--radius-lg) !important; background: var(--highlight-color) !important; cursor: pointer !important; appearance: none !important; margin-top: 0px !important; }
-::-webkit-scrollbar { width: 12px; }
+:root { scrollbar-color: var(--highlight-color) #3a343a; }
+::-webkit-scrollbar { width: 12px; height: 12px; }
 ::-webkit-scrollbar-track { background: #3a343a; }
 ::-webkit-scrollbar-thumb { background-color: var(--highlight-color); border-radius: var(--radius-lg); border-width: 0; box-shadow: 2px 2px 3px #111111; }
 div.form { border-width: 0; box-shadow: none; background: transparent; overflow: visible; margin-bottom: 6px; }
diff --git a/javascript/orchid-dreams.css b/javascript/orchid-dreams.css
index 05ff97a3b..4a80eeed5 100644
--- a/javascript/orchid-dreams.css
+++ b/javascript/orchid-dreams.css
@@ -39,6 +39,7 @@ input[type=range] { height: var(--line-sm); appearance: none; margin-top: 0; min
 input[type=range]::-webkit-slider-runnable-track, input[type=range]::-moz-range-track { width: 100%; height: 6px; cursor: pointer; background: var(--primary-400); border-radius: var(--radius-lg); border: 0px solid #222222; }
 input[type=range]::-webkit-slider-thumb, input[type=range]::-moz-range-thumb { border: 0px solid #000000; height: var(--line-sm); width: 8px; border-radius: var(--radius-lg); background: white; cursor: pointer; appearance: none; margin-top: 0px; }
 input[type=range]::-moz-range-progress {  background-color: var(--primary-500);  height: 6px;  border-radius: var(--radius-lg); }
+:root { scrollbar-color: var(--highlight-color) #333333; }
 ::-webkit-scrollbar-track { background: #333333; }
 ::-webkit-scrollbar-thumb { background-color: var(--highlight-color); border-radius: var(--radius-lg); border-width: 0; box-shadow: 2px 2px 3px #111111; }
 div.form { border-width: 0; box-shadow: none; background: transparent; overflow: visible; margin-bottom: 6px; }
diff --git a/javascript/simple-dark.css b/javascript/simple-dark.css
index fda73d23d..c1f99628d 100644
--- a/javascript/simple-dark.css
+++ b/javascript/simple-dark.css
@@ -48,7 +48,8 @@ input[type=range]::-webkit-slider-thumb { border: 0px solid var(--background-col
   border-radius: var(--radius-lg) !important; background: var(--highlight-color) !important; cursor: pointer !important; appearance: none !important; margin-top: -0.2em !important; }
 input[type=range]::-moz-range-thumb { border: 0px solid var(--background-color) !important; height: var(--line-sm) !important; width: var(--line-sm) !important;
   border-radius: var(--radius-lg) !important; background: var(--highlight-color) !important; cursor: pointer !important; appearance: none !important; margin-top: -0.2em !important; }
-::-webkit-scrollbar { width: 12px; }
+:root { scrollbar-color: var(--highlight-color) var(--primary-700); }
+::-webkit-scrollbar { width: 12px; height: 12px; }
 ::-webkit-scrollbar-track { background: var(--primary-700) }
 ::-webkit-scrollbar-thumb { background-color: var(--highlight-color); border-radius: var(--radius-lg); border-width: 0; }
 div.form { border-width: 0; box-shadow: none; background: transparent; overflow: visible; }
diff --git a/javascript/simple-light.css b/javascript/simple-light.css
index 203f7b913..769d12b2b 100644
--- a/javascript/simple-light.css
+++ b/javascript/simple-light.css
@@ -48,7 +48,8 @@ input[type=range]::-webkit-slider-thumb { border: 0px solid var(--background-col
   border-radius: var(--radius-lg) !important; background: var(--highlight-color) !important; cursor: pointer !important; appearance: none !important; margin-top: -0.2em !important; }
 input[type=range]::-moz-range-thumb { border: 0px solid var(--background-color) !important; height: var(--line-sm) !important; width: var(--line-sm) !important;
   border-radius: var(--radius-lg) !important; background: var(--highlight-color) !important; cursor: pointer !important; appearance: none !important; margin-top: -0.2em !important; }
-::-webkit-scrollbar { width: 12px; }
+:root { scrollbar-color: var(--highlight-color) var(--primary-700); }
+::-webkit-scrollbar { width: 12px; height: 12px; }
 ::-webkit-scrollbar-track { background: var(--primary-700) }
 ::-webkit-scrollbar-thumb { background-color: var(--highlight-color); border-radius: var(--radius-lg); border-width: 0; }
 div.form { border-width: 0; box-shadow: none; background: transparent; overflow: visible; }
diff --git a/javascript/timeless-beige.css b/javascript/timeless-beige.css
index d0142bdce..e453851c8 100644
--- a/javascript/timeless-beige.css
+++ b/javascript/timeless-beige.css
@@ -39,6 +39,7 @@ input[type=range] { height: var(--line-sm); appearance: none; margin-top: 0; min
 input[type=range]::-webkit-slider-runnable-track, input[type=range]::-moz-range-track { width: 100%; height: 6px; cursor: pointer; background: var(--primary-400); border-radius: var(--radius-lg); border: 0px solid #222222; }
 input[type=range]::-webkit-slider-thumb, input[type=range]::-moz-range-thumb { border: 0px solid #000000; height: var(--line-sm); width: 8px; border-radius: var(--radius-lg); background: white; cursor: pointer; appearance: none; margin-top: 0px; }
 input[type=range]::-moz-range-progress {  background-color: var(--primary-500);  height: 6px;  border-radius: var(--radius-lg); }
+:root { scrollbar-color: var(--highlight-color) #333333; }
 ::-webkit-scrollbar-track { background: #333333; }
 ::-webkit-scrollbar-thumb { background-color: var(--highlight-color); border-radius: var(--radius-lg); border-width: 0; box-shadow: 2px 2px 3px #111111; }
 div.form { border-width: 0; box-shadow: none; background: transparent; overflow: visible; margin-bottom: 6px; }