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

fix: apply custom Chrome forecast scrollbar

Browse Source
This commit is contained in:
zv
2026-06-01 20:13:38 +02:00
parent 284b1ce8cd
commit f5898ced4f
1 changed files with 40 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
app/globals.css
View File

@@ -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;
}