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 = (
|
||||
<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}
|
||||
|
||||
{/* 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
|
||||
both via Tailwind's animate-* utilities and inline `animation:` strings. */
|
||||
@keyframes tp {
|
||||
|
||||
Reference in New Issue
Block a user