meow
This commit is contained in:
FURRO404
+136
-3
@@ -831,11 +831,39 @@ h3 {
|
||||
font-size: 0.62rem;
|
||||
}
|
||||
|
||||
/* The bracket reads as a campaign map you drag around. The viewport breaks the
|
||||
page's max-width so there's room to manoeuvre; the surface carries a faint
|
||||
tactical grid that pans with the bracket (it lives on the scrolling content). */
|
||||
.bracket-viewport {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
margin-left: calc(50% - 50vw);
|
||||
max-height: 78vh;
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
cursor: grab;
|
||||
border-block: 1px solid var(--color-border);
|
||||
background-color: color-mix(in srgb, var(--color-bg) 86%, #000);
|
||||
}
|
||||
|
||||
.bracket-viewport.is-grabbing {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.tournament-bracket-grid {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 2.6rem;
|
||||
min-width: max-content;
|
||||
padding: 3rem clamp(1.5rem, 5vw, 5rem);
|
||||
--grid-line: color-mix(in srgb, var(--color-border) 38%, transparent);
|
||||
--grid-dot: color-mix(in srgb, var(--color-fury-violet) 16%, transparent);
|
||||
background-image:
|
||||
linear-gradient(var(--grid-line) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
|
||||
radial-gradient(var(--grid-dot) 1.5px, transparent 1.6px);
|
||||
background-size: 116px 116px, 116px 116px, 116px 116px;
|
||||
background-position: 0 0, 0 0, 58px 58px;
|
||||
}
|
||||
|
||||
/* Connector layer: absolutely sized to the full bracket, drawn behind the cards.
|
||||
@@ -850,18 +878,55 @@ h3 {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Each connector is two stacked strokes: a steady base rail plus a brighter
|
||||
dashed tracer that flows toward the winner (left → right, the path's own
|
||||
direction). */
|
||||
.tournament-bracket-lines path {
|
||||
fill: none;
|
||||
stroke: color-mix(in srgb, var(--color-border) 60%, var(--color-fury-violet));
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.bracket-line-base {
|
||||
stroke: color-mix(in srgb, var(--color-border) 55%, var(--color-fury-violet));
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
.bracket-line-flow {
|
||||
stroke: color-mix(in srgb, var(--color-fury-violet) 92%, white);
|
||||
stroke-width: 1.5px;
|
||||
stroke-dasharray: 7 17;
|
||||
opacity: 0.7;
|
||||
animation: bracketFlow 1.4s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes bracketFlow {
|
||||
to {
|
||||
stroke-dashoffset: -24;
|
||||
}
|
||||
}
|
||||
|
||||
/* Bye stub: a short rail + tag on the incoming side of a match whose feeders
|
||||
were all byes, so a top-seed match doesn't read as "appearing from nowhere". */
|
||||
.bracket-bye-stub {
|
||||
stroke: color-mix(in srgb, var(--color-text-muted) 60%, transparent);
|
||||
stroke-width: 1.5px;
|
||||
stroke-dasharray: 3 4;
|
||||
}
|
||||
|
||||
.bracket-bye-tag {
|
||||
fill: var(--color-text-muted);
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.tournament-round-column {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
width: 190px;
|
||||
min-width: 190px;
|
||||
width: 200px;
|
||||
min-width: 200px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@@ -878,6 +943,74 @@ h3 {
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transition: opacity 0.18s ease;
|
||||
}
|
||||
|
||||
/* Hover a team → its whole run lights up; everything else recedes. */
|
||||
.tournament-bracket-grid.has-trace .tournament-match-node:not(.is-traced):not(.is-traced-loss) {
|
||||
opacity: 0.32;
|
||||
}
|
||||
|
||||
.tournament-match-node.is-traced > * {
|
||||
position: relative;
|
||||
box-shadow: 0 0 0 1.5px var(--color-win), 0 0 18px -2px color-mix(in srgb, var(--color-win) 70%, transparent);
|
||||
animation: bracketBreathe 1.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes bracketBreathe {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--color-win) 70%, transparent), 0 0 14px -4px color-mix(in srgb, var(--color-win) 55%, transparent);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 0 2px var(--color-win), 0 0 26px 0 color-mix(in srgb, var(--color-win) 75%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.bracket-line-base.is-traced {
|
||||
stroke: var(--color-win);
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
.bracket-line-flow.is-traced {
|
||||
stroke: color-mix(in srgb, var(--color-win) 75%, white);
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
/* Loser run: same treatment in the loss colour. */
|
||||
.tournament-match-node.is-traced-loss > * {
|
||||
position: relative;
|
||||
animation: bracketBreatheLoss 1.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes bracketBreatheLoss {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--color-loss) 70%, transparent), 0 0 14px -4px color-mix(in srgb, var(--color-loss) 55%, transparent);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 0 2px var(--color-loss), 0 0 26px 0 color-mix(in srgb, var(--color-loss) 75%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.bracket-line-base.is-traced-loss {
|
||||
stroke: var(--color-loss);
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
.bracket-line-flow.is-traced-loss {
|
||||
stroke: color-mix(in srgb, var(--color-loss) 75%, white);
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.tournament-bracket-grid.has-trace .tournament-bracket-lines path:not(.is-traced):not(.is-traced-loss) {
|
||||
opacity: 0.18;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.bracket-line-flow,
|
||||
.tournament-match-node.is-traced > *,
|
||||
.tournament-match-node.is-traced-loss > * {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scrollPulse {
|
||||
|
||||
Reference in New Issue
Block a user