zv/wtr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: refine hourly forecast scrollbar

Browse Source
This commit is contained in:
zv
2026-06-01 20:04:26 +02:00
parent 94b6b9580d
commit fdb4304d38
2 changed files with 27 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/globals.css
View File

@@ -50,4 +50,30 @@ select {
.text-balance { .text-balance {
text-wrap: 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;
}
} }

2
components/forecast/forecast-panel.tsx
View File

@@ -69,7 +69,7 @@ export function ForecastPanel({ latitude, longitude, locationName }: { latitude?
<div className="grid items-start gap-3 lg:grid-cols-[1.35fr_1fr]"> <div className="grid items-start gap-3 lg:grid-cols-[1.35fr_1fr]">
<Card className="overflow-hidden p-4 sm:p-5"> <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> <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"> <ul className="flex min-w-max gap-2">
{forecast.hourly.map((hour, index) => ( {forecast.hourly.map((hour, index) => (
<motion.li <motion.li