From fdb4304d3885ba4649991a34bcb576e64195786b Mon Sep 17 00:00:00 2001
From: zv <zv@zvcloud.net>
Date: Mon, 1 Jun 2026 20:04:26 +0200
Subject: [PATCH] style: refine hourly forecast scrollbar

---
 app/globals.css                        | 26 ++++++++++++++++++++++++++
 components/forecast/forecast-panel.tsx |  2 +-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/app/globals.css b/app/globals.css
index a4ab8bb..d8edb93 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -50,4 +50,30 @@ select {
   .text-balance {
     text-wrap: balance;
   }
+
+  .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;
+  }
 }
diff --git a/components/forecast/forecast-panel.tsx b/components/forecast/forecast-panel.tsx
index 57314ba..36651e5 100644
--- a/components/forecast/forecast-panel.tsx
+++ b/components/forecast/forecast-panel.tsx
@@ -69,7 +69,7 @@ export function ForecastPanel({ latitude, longitude, locationName }: { latitude?
         <div className="grid items-start gap-3 lg:grid-cols-[1.35fr_1fr]">
           <Card className="overflow-hidden p-4 sm:p-5">
             <h3 className="flex items-center gap-2 text-sm font-semibold"><Clock3 className="size-4 text-sky-600 dark:text-sky-300" />{t("forecast.hourly")}</h3>
-            <div className="-mx-4 mt-4 overflow-x-auto px-4 pb-1 sm:-mx-5 sm:px-5">
+            <div className="weather-scrollbar -mx-4 mt-4 overflow-x-auto px-4 pb-2 sm:-mx-5 sm:px-5">
               <ul className="flex min-w-max gap-2">
                 {forecast.hourly.map((hour, index) => (
                   <motion.li