mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-09-12 22:26:12 -05:00
57 lines
1.4 KiB
CSS
57 lines
1.4 KiB
CSS
/* --match-height and gap must match constants in Elimination.tsx */
|
|
.bracket {
|
|
--match-width: 140px;
|
|
--match-height: 55px;
|
|
overflow-x: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--s-8);
|
|
padding-block-end: var(--s-6);
|
|
}
|
|
|
|
.scrollingBracket {
|
|
padding: var(--s-4) var(--s-6);
|
|
max-width: 100%;
|
|
max-height: min(1200px, 82dvh);
|
|
scrollbar-width: none;
|
|
border: var(--border-style);
|
|
border-radius: var(--radius-box);
|
|
overflow: scroll;
|
|
user-select: none;
|
|
|
|
/* In a breakout wrapper (see `mainBreakout`): as wide as needed between the normal page width and
|
|
the content area (then it scrolls), centered. Height fills down to the viewport bottom using the
|
|
JS-published `--bracket-fill-top`, floored so it never collapses. */
|
|
:global([data-main-breakout]) & {
|
|
width: fit-content;
|
|
min-width: min(72rem, 100%);
|
|
margin-inline: auto;
|
|
max-height: max(
|
|
300px,
|
|
calc(100dvh - var(--bracket-fill-top, 30dvh) - var(--s-6))
|
|
);
|
|
|
|
/* The mobile bottom nav is fixed below 600px; keep clear of it. */
|
|
@media screen and (max-width: 599.98px) {
|
|
max-height: max(
|
|
300px,
|
|
calc(
|
|
100dvh -
|
|
var(--bracket-fill-top, 30dvh) -
|
|
var(--layout-nav-height) -
|
|
env(safe-area-inset-bottom) -
|
|
var(--s-3)
|
|
)
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Sizes against the full content area: cqw resolves to <main>, which spans it in breakout mode. */
|
|
.breakoutWrapper {
|
|
:global([data-main-breakout]) & {
|
|
width: 100cqw;
|
|
margin-inline: calc(50% - 50cqw);
|
|
}
|
|
}
|