is ignored by Chromium/Safari — only | / |
cells can be sticky. So apply sticky per-cell, with a box-shadow for
the bottom divider (a real border-bottom would scroll away). */
.draft-avail-sticky-head th {
position: sticky;
top: 0;
z-index: 5;
background-color: var(--paper);
box-shadow: 0 2px 0 var(--border);
/* Force a thin row — inline padding/lineHeight gets overridden by
browser defaults on | , so lock it down here with specificity. */
padding: 0 8px !important;
height: 18px !important;
line-height: 1 !important;
vertical-align: middle;
}
.draft-avail-sticky-head th button {
padding: 0 !important;
line-height: 1 !important;
height: auto !important;
}
/* Slot filter pills (inline variant) — sits inside the filter row and
scrolls horizontally. touch-action: pan-x makes vertical swipes pass
through to the parent scroll context instead of being captured by the
pills' overflow-x: auto. */
.draft-slot-pills-inline {
touch-action: pan-x;
}
.draft-slot-pills-inline > div { touch-action: pan-x; }
/* ── Draft Room: fullscreen shell ──────────────────────────────────────────
When the user enters the draft room (fantasy-view-store === 'draft-room'),
a clientside callback toggles `body.draft-room-fullscreen`. That class
gates a fixed-viewport layout: the whole shell is position: fixed +
flex column, every section above the table is its natural height, and
the table wrapper takes the remaining height with internal scroll. No
page scroll at all — only the rows inside the wrapper move. */
body.draft-room-fullscreen {
overflow: hidden;
overscroll-behavior: none;
}
body.draft-room-fullscreen .draft-room-shell {
position: fixed;
inset: 0;
z-index: 10;
display: flex;
flex-direction: column;
padding: 10px;
background-color: var(--bg);
overflow: hidden;
}
/* Tighten the sticky band's own paddings/margins in fullscreen mode so
the table gets back the ~25-30px the original layout was eating. */
body.draft-room-fullscreen .draft-sticky-band {
padding: 6px 10px 0;
margin: 0 0 4px;
}
/* Ticker pills: trim height (ESPN-style compact cards). */
body.draft-room-fullscreen #draft-order-ticker > div {
padding: 3px 6px !important;
}
body.draft-room-fullscreen #draft-order-ticker > div > div {
padding: 1px 5px !important;
min-width: 58px !important;
}
body.draft-room-fullscreen .draft-panel-container {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
body.draft-room-fullscreen .draft-tab-panel.draft-tab-active {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
body.draft-room-fullscreen #draft-avail-filter-row,
body.draft-room-fullscreen .draft-collapsible {
flex: 0 0 auto;
}
body.draft-room-fullscreen .draft-avail-wrapper {
flex: 1 1 auto;
min-height: 0;
overflow-x: auto;
overflow-y: auto;
}
body.draft-room-fullscreen #draft-roster-panel.draft-tab-active,
body.draft-room-fullscreen #draft-board-container.draft-tab-active {
overflow-y: auto;
overflow-x: hidden;
}
/* Bottom tab nav (ESPN-style): sits at the bottom of the shell with a
top border instead of the original bottom border. Active indicator
moves to top (above the label) so the cue points at the content above
the bar, not at the page edge below. */
body.draft-room-fullscreen .draft-tabbar-bottom {
flex: 0 0 auto;
border-top: 2px solid var(--border);
border-bottom: none;
background-color: var(--paper);
margin: 6px -10px -10px; /* bleed to shell padding edges */
padding: 0 6px;
}
body.draft-room-fullscreen .draft-tabbar-bottom .draft-tab-btn {
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
margin-top: -2px;
margin-bottom: 0;
padding: 9px 8px;
font-size: 11px;
}
body.draft-room-fullscreen .draft-tabbar-bottom .draft-tab-btn-active {
border-top-color: var(--accent) !important;
border-bottom-color: transparent !important;
}
/* Commissioner gear menu — / popover. Click the gear
to reveal Pause/Resume/Rewind/Reset. Zero JS. */
.draft-comm-menu {
flex-shrink: 0;
position: relative;
}
.draft-comm-menu details { position: relative; }
.draft-comm-summary {
cursor: pointer;
padding: 5px 10px;
background: transparent;
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text);
font-size: 16px;
line-height: 1;
list-style: none;
user-select: none;
display: inline-block;
}
.draft-comm-summary::-webkit-details-marker { display: none; }
.draft-comm-summary::marker { content: ""; }
.draft-comm-summary:hover { background: var(--surface); }
.draft-comm-menu details[open] .draft-comm-summary {
background: var(--surface);
border-color: var(--accent);
}
.draft-comm-popup {
position: absolute;
right: 0;
top: calc(100% + 6px);
background-color: var(--paper);
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px;
z-index: 200;
min-width: 180px;
display: flex;
flex-direction: column;
gap: 6px;
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
/* Buttons inside the popup — let the render callback's inline-block
display still hide individual buttons, but stack the visible ones. */
.draft-comm-popup button { width: 100%; text-align: left; }
/* Inline slot-pills (filter row): smaller padding, no underline, no
sticky background. Replaces the old standalone pills row. */
.draft-slot-pills-inline button {
padding: 4px 10px !important;
font-size: 11px !important;
}
/* Status placeholders between the filter row and the table — only
take space when they have content. Eliminates ~30px of dead vertical
space when the panel is idle.
:empty alone isn't enough because many callbacks return html.Div()
for the "no content" state, which renders as
— :empty doesn't match (the outer has a child), so the panel keeps
margin-bottom. The :has() variant catches the wrapped-empty case. */
.draft-collapsible:empty,
.draft-collapsible:has(> div:empty:only-child) {
display: none;
}
.draft-collapsible:not(:empty):not(:has(> div:empty:only-child)) {
margin-bottom: 6px;
}
/* (Mobile column hide removed — wrapper is back to overflow-x: auto
so the table scrolls horizontally on narrow viewports instead of
clipping columns.) */
/* ── Fantasy section loading overlay (Enter League etc.) ────────────────── */
@keyframes fantasyLoadingSpin {
to { transform: rotate(360deg); }
}
/* Full-viewport overlay so the spinner is visible immediately, regardless
of where the user is scrolled in the previous (pre-navigation) content.
Dimmed backdrop occludes the stale view. */
.fantasy-loading-overlay {
position: fixed;
inset: 0;
z-index: 2000;
background-color: rgba(10, 12, 18, 0.78);
backdrop-filter: blur(2px);
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
color: var(--text);
/* display: flex applied inline by the clientside show callback */
}
.fantasy-loading-spinner {
width: 42px;
height: 42px;
border: 3px solid rgba(255, 255, 255, 0.12);
border-top-color: var(--accent);
border-radius: 50%;
animation: fantasyLoadingSpin 0.8s linear infinite;
}
.fantasy-loading-text {
color: var(--text);
font-family: 'DM Mono', monospace;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* Draft room loading overlay — same look as the fantasy one, but scoped
to the draft-room-shell rather than full-viewport. Hides the empty
header/table while the first state-cache fetch lands. The .hidden
class is toggled by a clientside callback once draft-state-cache.data
resolves. */
.draft-loading-overlay {
position: absolute;
inset: 0;
z-index: 20;
background-color: var(--bg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
color: var(--text);
}
.draft-loading-overlay.hidden { display: none; }
/* ── Roster slot: Insufficient Funds (toploader placeholder) ───────────── */
.draft-slot-no-funds {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
border: 2px dashed #ff6b6b;
background-color: rgba(255, 107, 107, 0.05);
opacity: 0.95;
}
.draft-slot-no-funds .toploader-icon {
/* Generic Ultra Pro toploader silhouette — slightly translucent
rectangle with rounded corners and a faint inner border. */
width: 40px;
height: 56px;
border-radius: 4px;
flex-shrink: 0;
background:
linear-gradient(135deg,
rgba(255, 255, 255, 0.05) 0%,
rgba(255, 255, 255, 0.02) 100%);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.04);
display: flex;
align-items: center;
justify-content: center;
}
/* ── "Draft complete" banner — big, hard to miss ────────────────────────── */
@keyframes draftCompletePulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.0); }
50% { box-shadow: 0 0 0 12px rgba(74, 222, 128, 0.15); }
}
.draft-complete-banner {
display: flex;
align-items: center;
gap: 16px;
background: linear-gradient(135deg,
rgba(74, 222, 128, 0.15) 0%,
rgba(74, 222, 128, 0.05) 100%);
border: 2px solid #4ade80;
border-radius: 12px;
padding: 16px 20px;
animation: draftCompletePulse 2.4s ease-in-out infinite;
}
/* Lock the available-cards panel when draft is complete — dim it
and disable all pointer events so users can't click DRAFT buttons
even briefly. Server already rejects post-complete picks but we
want UX to make it obviously over too. */
.draft-room-complete #draft-avail-panel,
.draft-room-complete #draft-avail-filter-row {
opacity: 0.45;
pointer-events: none;
filter: grayscale(40%);
}
/* ── Draft Room: Unified tab bar (all viewports) ──────────────────────────── */
/* Always single-row. Buttons stretch on wide screens (flex: 1 from below).
On narrow screens, switch to natural-width + horizontal scroll via the
mobile media query — prevents vertical wrapping (height jumps on resize). */
.draft-tabbar {
display: flex;
gap: 0;
border-bottom: 2px solid var(--border);
margin-bottom: 0;
background-color: var(--bg);
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none; /* Firefox */
}
.draft-tabbar::-webkit-scrollbar { display: none; }
.draft-tab-btn {
flex: 1;
background: none;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
color: var(--subtext);
padding: 7px 10px;
cursor: pointer;
font-size: 12px;
font-family: var(--font-mono);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
transition: color 0.15s, background-color 0.15s;
}
.draft-tab-btn:hover {
color: var(--text);
background-color: rgba(255, 255, 255, 0.02);
}
.draft-tab-btn-active {
color: var(--accent) !important;
border-bottom-color: var(--accent) !important;
font-weight: 700 !important;
}
/* Panel container: only the active tab renders visibly */
.draft-tab-panel { display: none; }
.draft-tab-panel.draft-tab-active { display: block; }
/* On narrow screens: keep tab labels readable, allow horizontal scroll */
@media (max-width: 600px) {
.draft-tabbar { overflow-x: auto; scrollbar-width: none; }
.draft-tab-btn {
padding: 10px 12px;
font-size: 11px;
flex: 0 0 auto;
}
#draft-avail-panel .card-table-wrap { overflow-x: auto; }
#draft-avail-panel .dark-dropdown,
#draft-avail-panel .Select-control { min-width: 0 !important; }
#draft-avail-panel table td:nth-child(2) div {
max-width: 120px !important;
}
}
/* ── On-the-clock visual flash ─────────────────────────────────────────────── */
@keyframes draftYourTurnFlash {
0% { box-shadow: 0 0 0 0 rgba(232, 114, 42, 0.0); }
20% { box-shadow: 0 0 0 6px rgba(232, 114, 42, 0.55); }
60% { box-shadow: 0 0 0 4px rgba(232, 114, 42, 0.25); }
100% { box-shadow: 0 0 0 0 rgba(232, 114, 42, 0); }
}
.draft-yourturn-flash {
animation: draftYourTurnFlash 1.4s ease-out 1;
}
/* ── Full-screen draft room ────────────────────────────────────────────────── */
/* When the draft room is the active view, hide the app header AND the
section-nav row (Analytics / Paper Trading / Fantasy + sub-tabs) so
the draft fills the viewport. The draft room has its own
"← Back to League" button for nav-out.
!important needed because both elements use inline display styles. */
body.draft-room-fullscreen .tm26-header { display: none !important; }
body.draft-room-fullscreen #tm26-nav { display: none !important; }
|