190a6e1fe7
When a pick is made the picked player's row flashes teal (--electric)
then fades out over 750ms. Works correctly with the TanStack Virtual
list by keeping the row in filteredParticipants during the animation
via animatingOutParticipantIds, then removing it after 650ms.
Key design decisions:
- Animation state lives in AvailableParticipantsSection (internal
useState + timers); the draft room passes a pickAnimationSignal
{id, seq} rather than the Set, so memo only breaks on each pick,
not on the 650ms cleanup
- displayDrafted freezes row content (badges, buttons) during the
animation to prevent height shifts
- Per-ID independent timers via Map ref support rapid autodraft picks
running concurrently without cancellation
- Timers are cleared on unmount in both the draft room and component
- prefers-reduced-motion: skips the color flash, plain opacity fade only
- Removes "Draft Grid" heading from DraftGridSection (visual cleanup)
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
207 lines
5.7 KiB
CSS
207 lines
5.7 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
@theme {
|
|
--font-sans: "Barlow", ui-sans-serif, system-ui, sans-serif,
|
|
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
}
|
|
|
|
@theme inline {
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-destructive: var(--destructive);
|
|
--color-success: var(--success);
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-ring: var(--ring);
|
|
--color-chart-1: var(--chart-1);
|
|
--color-chart-2: var(--chart-2);
|
|
--color-chart-3: var(--chart-3);
|
|
--color-chart-4: var(--chart-4);
|
|
--color-chart-5: var(--chart-5);
|
|
--color-sidebar: var(--sidebar);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-sidebar-primary: var(--sidebar-primary);
|
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
--color-electric: var(--electric);
|
|
--color-amber-accent: var(--amber-accent);
|
|
--color-coral-accent: var(--coral-accent);
|
|
}
|
|
|
|
html {
|
|
color-scheme: dark;
|
|
font-size: 18px;
|
|
}
|
|
|
|
:root {
|
|
--navbar-height: 64px;
|
|
--radius: 0.625rem;
|
|
--background: #14171e;
|
|
--foreground: #ffffff;
|
|
--card: #1c1f26;
|
|
--card-foreground: #ffffff;
|
|
--popover: #1c1f26;
|
|
--popover-foreground: #ffffff;
|
|
--primary: #adf661;
|
|
--primary-foreground: #14171e;
|
|
--secondary: #1c1f26;
|
|
--secondary-foreground: #ffffff;
|
|
--muted: #1c1f26;
|
|
--muted-foreground: rgb(255 255 255 / 55%);
|
|
--accent: #2ce1c1;
|
|
--accent-foreground: #14171e;
|
|
--destructive: oklch(0.65 0.22 25);
|
|
--success: oklch(0.65 0.20 145);
|
|
--border: rgb(255 255 255 / 10%);
|
|
--input: rgb(255 255 255 / 12%);
|
|
--ring: #adf661;
|
|
--chart-1: #adf661;
|
|
--chart-2: #2ce1c1;
|
|
--chart-3: oklch(0.646 0.222 41.116);
|
|
--chart-4: oklch(0.828 0.189 84.429);
|
|
--chart-5: oklch(0.769 0.188 70.08);
|
|
--sidebar: #1c1f26;
|
|
--sidebar-foreground: #ffffff;
|
|
--sidebar-primary: #adf661;
|
|
--sidebar-primary-foreground: #14171e;
|
|
--sidebar-accent: #2ce1c1;
|
|
--sidebar-accent-foreground: #14171e;
|
|
--sidebar-border: rgb(255 255 255 / 10%);
|
|
--sidebar-ring: #adf661;
|
|
--electric: #2ce1c1;
|
|
--brackt-gradient: linear-gradient(to bottom, var(--primary), var(--accent));
|
|
--amber-accent: oklch(0.79 0.17 70);
|
|
--coral-accent: oklch(0.68 0.19 35);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
.bg-card {
|
|
background: #1c1f26;
|
|
border-color: #2a2e38 !important;
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-gradient {
|
|
0%, 100% {
|
|
opacity: 0.35;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.animate-pulse-gradient {
|
|
animation: pulse-gradient 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes rpf-slide-in {
|
|
from { transform: translateY(-32px); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
.rpf-animate {
|
|
animation: rpf-slide-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
|
|
}
|
|
|
|
@keyframes spin-in {
|
|
from { opacity: 0; transform: translateY(-10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.animate-spin-in {
|
|
animation: spin-in 70ms ease both;
|
|
}
|
|
|
|
@keyframes sport-land {
|
|
0% { opacity: 0; transform: scale(0.9); }
|
|
60% { opacity: 1; transform: scale(1.03); }
|
|
100% { opacity: 1; transform: scale(1.0); }
|
|
}
|
|
.animate-sport-land {
|
|
animation: sport-land 450ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
|
|
}
|
|
|
|
@keyframes page-fade-in {
|
|
from { opacity: 0; transform: translateY(14px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.animate-page-fade-in {
|
|
animation: page-fade-in 0.5s ease both;
|
|
}
|
|
|
|
@keyframes ticker-scroll {
|
|
from { transform: translateX(0); }
|
|
to { transform: translateX(-50%); }
|
|
}
|
|
.animate-ticker {
|
|
animation: ticker-scroll 28s linear infinite;
|
|
}
|
|
|
|
@keyframes pick-flash-out {
|
|
0% { background-color: transparent; opacity: 1; }
|
|
35% { background-color: rgb(44 225 193 / 0.25); opacity: 1; }
|
|
60% { background-color: rgb(44 225 193 / 0.06); opacity: 1; }
|
|
75% { background-color: transparent; opacity: 1; }
|
|
100% { background-color: transparent; opacity: 0; }
|
|
}
|
|
@keyframes pick-flash-out-reduced {
|
|
0% { opacity: 1; }
|
|
100% { opacity: 0; }
|
|
}
|
|
.animate-pick-flash-out {
|
|
animation: pick-flash-out 750ms ease-in forwards;
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.animate-pick-flash-out {
|
|
animation: pick-flash-out-reduced 750ms ease-in forwards;
|
|
}
|
|
}
|
|
|
|
@keyframes pick-flash {
|
|
0% { background-color: transparent; }
|
|
35% { background-color: rgb(44 225 193 / 0.25); }
|
|
75% { background-color: rgb(44 225 193 / 0.06); }
|
|
100% { background-color: transparent; }
|
|
}
|
|
.animate-pick-flash {
|
|
animation: pick-flash 750ms ease-in forwards;
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.animate-pick-flash {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
/* NProgress theme override */
|
|
#nprogress .bar {
|
|
background: var(--electric) !important;
|
|
height: 3px !important;
|
|
}
|
|
#nprogress .peg {
|
|
box-shadow: 0 0 10px var(--electric), 0 0 5px var(--electric) !important;
|
|
}
|