Skore: slim scrollbar v style hry namiesto OS defaultu
Zoznam kol v Standings (herny sidebar aj mobilny panel) pouzival hrubu systemovu lavicu scrollbaru, ktora nesedela do velvet/gold temy. Novy .velvet-scroll (index.css) da tenky priehladny track a zlaty polopriehladny thumb (webkit + Firefox scrollbar-color). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -148,7 +148,7 @@ export default function Standings({ standings, guesses = [], players, myOrder, d
|
|||||||
});
|
});
|
||||||
|
|
||||||
const scrollableRounds = (
|
const scrollableRounds = (
|
||||||
<div className={`flex-1 min-h-0 overflow-y-auto px-3 ${desktop ? '' : 'max-h-[45vh]'}`}>
|
<div className={`velvet-scroll flex-1 min-h-0 overflow-y-auto px-3 ${desktop ? '' : 'max-h-[45vh]'}`}>
|
||||||
{rows}
|
{rows}
|
||||||
|
|
||||||
{/* Active round placeholder */}
|
{/* Active round placeholder */}
|
||||||
|
|||||||
@@ -30,6 +30,27 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Slim, on-theme scrollbar (velvet felt + gold accent) for opt-in scroll areas
|
||||||
|
such as the in-game score list, instead of the chunky OS default. */
|
||||||
|
.velvet-scroll {
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: rgba(201, 168, 76, 0.35) transparent;
|
||||||
|
}
|
||||||
|
.velvet-scroll::-webkit-scrollbar {
|
||||||
|
width: 7px;
|
||||||
|
height: 7px;
|
||||||
|
}
|
||||||
|
.velvet-scroll::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.velvet-scroll::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(201, 168, 76, 0.28);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.velvet-scroll::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: rgba(201, 168, 76, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
/* Velvet-table animations (design handoff). Declared as raw CSS so they work
|
/* Velvet-table animations (design handoff). Declared as raw CSS so they work
|
||||||
both via Tailwind's animate-* utilities and inline `animation:` strings. */
|
both via Tailwind's animate-* utilities and inline `animation:` strings. */
|
||||||
@keyframes tp {
|
@keyframes tp {
|
||||||
|
|||||||
Reference in New Issue
Block a user