From f5898ced4f66c896dcf9e019d31d3df6b57b4358 Mon Sep 17 00:00:00 2001
From: zv <zv@zvcloud.net>
Date: Mon, 1 Jun 2026 20:13:38 +0200
Subject: [PATCH] fix: apply custom Chrome forecast scrollbar

---
 app/globals.css | 63 +++++++++++++++++++++++++++++++------------------
 1 file changed, 40 insertions(+), 23 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index d8edb93..6cb35a2 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -52,28 +52,45 @@ select {
   }
 
   .weather-scrollbar {
-    scrollbar-color: rgba(14, 116, 144, 0.55) rgba(255, 255, 255, 0.16);
-    scrollbar-width: thin;
-  }
-
-  .weather-scrollbar::-webkit-scrollbar {
-    height: 0.55rem;
-  }
-
-  .weather-scrollbar::-webkit-scrollbar-track {
-    border-radius: 9999px;
-    background: rgba(255, 255, 255, 0.16);
-  }
-
-  .weather-scrollbar::-webkit-scrollbar-thumb {
-    border: 2px solid transparent;
-    border-radius: 9999px;
-    background: rgba(14, 116, 144, 0.55);
-    background-clip: padding-box;
-  }
-
-  .weather-scrollbar::-webkit-scrollbar-thumb:hover {
-    background: rgba(8, 145, 178, 0.78);
-    background-clip: padding-box;
+    scrollbar-gutter: stable;
   }
 }
+
+@supports (-moz-appearance: none) {
+  .weather-scrollbar {
+    scrollbar-color: rgba(8, 145, 178, 0.72) rgba(14, 116, 144, 0.1);
+    scrollbar-width: thin;
+  }
+}
+
+.weather-scrollbar::-webkit-scrollbar {
+  height: 0.65rem;
+}
+
+.weather-scrollbar::-webkit-scrollbar-track {
+  border-radius: 9999px;
+  background: rgba(14, 116, 144, 0.1);
+}
+
+.weather-scrollbar::-webkit-scrollbar-thumb {
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+  background: linear-gradient(90deg, rgba(8, 145, 178, 0.78), rgba(14, 116, 144, 0.88));
+  background-clip: padding-box;
+  box-shadow: 0 1px 5px rgba(8, 47, 73, 0.25);
+}
+
+.weather-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(90deg, rgba(6, 182, 212, 0.9), rgba(3, 105, 161, 0.95));
+  background-clip: padding-box;
+}
+
+.dark .weather-scrollbar::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.dark .weather-scrollbar::-webkit-scrollbar-thumb {
+  border-color: rgba(255, 255, 255, 0.18);
+  background: linear-gradient(90deg, rgba(34, 211, 238, 0.72), rgba(56, 189, 248, 0.82));
+  background-clip: padding-box;
+}