timandClaude Opus 4.8
6c95c64398
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>
112 lines
3.3 KiB
CSS
112 lines
3.3 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
html,
|
|
body,
|
|
#root {
|
|
@apply min-h-screen;
|
|
}
|
|
|
|
/* Single global type lever: enlarges all rem-based Tailwind text (menu/list/
|
|
auth/history screens). The game board uses fixed px + transform zoom, so it
|
|
stays pixel-precise. Bump this one value to scale the menus up or down. */
|
|
html {
|
|
font-size: 18px;
|
|
}
|
|
|
|
body {
|
|
@apply bg-table text-green-score font-sans;
|
|
background:
|
|
radial-gradient(ellipse at 50% -10%, rgba(48, 104, 69, 0.16), transparent 60%),
|
|
#090e0b;
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
/* Form fields keep the velvet look across the app */
|
|
input::placeholder {
|
|
@apply text-green-dim/60;
|
|
}
|
|
}
|
|
|
|
/* 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 {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
@keyframes ci {
|
|
from { opacity: 0; transform: translateY(-6px) scale(0.9); }
|
|
to { opacity: 1; transform: none; }
|
|
}
|
|
@keyframes ar {
|
|
0%, 100% {
|
|
box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18), 0 0 18px rgba(201, 168, 76, 0.5), 0 0 42px rgba(201, 168, 76, 0.2);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 0 5px rgba(201, 168, 76, 0.34), 0 0 32px rgba(201, 168, 76, 0.85), 0 0 56px rgba(201, 168, 76, 0.3);
|
|
}
|
|
}
|
|
@keyframes g1 {
|
|
0%, 100% { box-shadow: 0 0 18px rgba(201, 168, 76, 0.55), 0 6px 18px rgba(0, 0, 0, 0.55); }
|
|
50% { box-shadow: 0 0 34px rgba(201, 168, 76, 0.85), 0 6px 18px rgba(0, 0, 0, 0.55); }
|
|
}
|
|
|
|
/* A played card slides into the centre from the direction of its player. */
|
|
@keyframes fly-top {
|
|
from { opacity: 0; transform: translateY(-90px) scale(0.82); }
|
|
to { opacity: 1; transform: none; }
|
|
}
|
|
@keyframes fly-bottom {
|
|
from { opacity: 0; transform: translateY(90px) scale(0.82); }
|
|
to { opacity: 1; transform: none; }
|
|
}
|
|
@keyframes fly-left {
|
|
from { opacity: 0; transform: translateX(-110px) scale(0.82); }
|
|
to { opacity: 1; transform: none; }
|
|
}
|
|
@keyframes fly-right {
|
|
from { opacity: 0; transform: translateX(110px) scale(0.82); }
|
|
to { opacity: 1; transform: none; }
|
|
}
|
|
|
|
/* A completed trick is swept off the table towards the seat that won it. */
|
|
@keyframes collect-bottom {
|
|
from { opacity: 1; transform: none; }
|
|
to { opacity: 0; transform: translateY(150px) scale(0.66); }
|
|
}
|
|
@keyframes collect-top {
|
|
from { opacity: 1; transform: none; }
|
|
to { opacity: 0; transform: translateY(-150px) scale(0.66); }
|
|
}
|
|
@keyframes collect-left {
|
|
from { opacity: 1; transform: none; }
|
|
to { opacity: 0; transform: translateX(-190px) scale(0.66); }
|
|
}
|
|
@keyframes collect-right {
|
|
from { opacity: 1; transform: none; }
|
|
to { opacity: 0; transform: translateX(190px) scale(0.66); }
|
|
}
|