/* * filter-drawer_opt.css — TWIN-ONLY styles for the redesigned filter drawer (Phase 1). * Loaded only by the optimized twin; classic never sees it. Every rule is scoped under * .rd-fdrawer so it cannot affect any existing player/filter styling. Values + tokens * mirror the design (player-redesign-panels.html / styles.css). The drawer reuses the shared * matching engine via customtagfilter_v2_opt.js; this file is purely presentation. */ .rd-fdrawer { /* design tokens, scoped */ --s-shell:#0b0d12; --s-panel:#14171f; --s-panel2:#1a1e28; --s-line:#252a35; --s-ink:#f2f4f8; --s-mut:#8b93a8; --s-sel:#f2b632; --disp:'Chakra Petch',system-ui,sans-serif; --body:'Inter Tight',system-ui,-apple-system,'Segoe UI',Arial,sans-serif; width:344px; align-self:stretch; flex-direction:column; background:var(--s-panel); border-right:1px solid var(--s-line); color:var(--s-ink); font:12px/1.4 var(--body); overflow:hidden; min-height:0; } /* Shown state. Base stays hidden via the [hidden] attr (no display on the base rule, so the attr wins); .rd-open both reveals AND docks it as a full-height left panel. Real board-grid docking is a later refinement — this keeps the board visible to the right meanwhile. */ .rd-fdrawer.rd-open{ display:flex; position:fixed; top:0; left:0; height:100vh; z-index:100000; box-shadow:0 0 44px rgba(0,0,0,.6); } .rd-fdrawer *{ box-sizing:border-box; } /* sticky header / saved / query / footer; only the dimension stack scrolls */ .rd-fdrawer .rd-head{ display:flex; align-items:center; gap:9px; padding:11px 12px; height:38px; background:var(--s-panel2); border-bottom:1px solid var(--s-line); flex:none; } .rd-fdrawer .rd-head b{ font:600 13px/1 var(--disp); letter-spacing:.02em; } .rd-fdrawer .rd-head i{ font-style:normal; font:11px/1 var(--body); color:var(--s-mut); } .rd-fdrawer .rd-head u{ text-decoration:none; margin-left:auto; color:var(--s-mut); font-size:13px; cursor:pointer; } .rd-fdrawer .dsv{ display:flex; flex-wrap:wrap; gap:4px; padding:9px 12px; border-bottom:1px solid var(--s-line); align-items:center; flex:none; } .rd-fdrawer .dsv em{ font-style:normal; font:600 9px/1 var(--body); letter-spacing:.1em; color:var(--s-mut); width:100%; margin-bottom:3px; } .rd-fdrawer .sv{ display:inline-flex; align-items:center; gap:4px; background:#101319; border:1px solid var(--s-line); border-radius:99px; padding:4px 8px; font:600 9.5px/1.2 var(--body); color:#c3cad9; cursor:pointer; } .rd-fdrawer .sv.on{ background:var(--s-sel); border-color:var(--s-sel); color:#1a1204; } .rd-fdrawer .sv u{ text-decoration:none; opacity:.6; } .rd-fdrawer .dsv .empty{ font-size:10.5px; color:var(--s-mut); } .rd-fdrawer .qbar{ padding:9px 12px; border-bottom:1px solid var(--s-line); flex:none; } .rd-fdrawer .qbar em{ display:block; font-style:normal; font:600 9px/1 var(--body); letter-spacing:.1em; color:var(--s-mut); margin-bottom:6px; } .rd-fdrawer .qbar em b{ color:var(--s-sel); } .rd-fdrawer .qc{ display:flex; flex-wrap:wrap; gap:4px; } .rd-fdrawer .qc span{ display:inline-flex; align-items:center; gap:4px; background:var(--s-panel2); border-radius:3px; padding:4px 6px; font:600 9.5px/1.2 var(--body); color:#dfe4ee; } .rd-fdrawer .qc span u{ text-decoration:none; color:var(--s-mut); font-size:10px; cursor:pointer; } .rd-fdrawer .qc .allplays{ color:var(--s-mut); background:none; padding:0; } /* scrolling dimension stack */ .rd-fdrawer .rd-stack{ flex:1 1 auto; overflow-y:auto; overflow-x:hidden; min-height:0; } .rd-fdrawer .acc{ display:flex; align-items:center; gap:7px; padding:8px 12px; cursor:pointer; background:#101319; border-top:1px solid var(--s-line); border-bottom:1px solid var(--s-line); font:600 9.5px/1 var(--body); letter-spacing:.09em; color:#c3cad9; } .rd-fdrawer .acc i{ font-style:normal; color:var(--s-mut); font-size:9px; } .rd-fdrawer .acc s{ text-decoration:none; margin-left:auto; display:inline-flex; gap:4px; align-items:center; } .rd-fdrawer .acc s b{ font:600 9px/1 var(--body); background:var(--s-sel); color:#1a1204; border-radius:99px; padding:3px 6px; letter-spacing:.03em; } .rd-fdrawer .acc s em{ font-style:normal; font-size:9px; color:var(--s-mut); letter-spacing:.05em; border:1px solid var(--s-line); border-radius:3px; padding:3px 5px; cursor:pointer; } .rd-fdrawer .acc s em.on{ color:var(--s-sel); border-color:rgba(242,182,50,.5); } .rd-fdrawer .new{ font:600 8.5px/1 var(--body); background:#0a7d3c; color:#fff; border-radius:99px; padding:3px 5px; letter-spacing:.06em; } .rd-fdrawer .dsr{ display:grid; grid-template-columns:74px 1fr; gap:9px; align-items:center; padding:7px 12px; border-bottom:1px solid #1c202a; } .rd-fdrawer .dsr.full{ grid-template-columns:1fr; } .rd-fdrawer .dsr>em{ font-style:normal; font:600 9px/1.25 var(--body); letter-spacing:.06em; color:var(--s-mut); } /* chip group — the .on state is what the fork toggles on selection */ .rd-fdrawer .tg2{ display:flex; flex-wrap:wrap; gap:4px; } .rd-fdrawer .tg2 span{ padding:4px 7px; border:1px solid var(--s-line); border-radius:99px; font:600 9.5px/1.2 var(--body); color:#c3cad9; display:inline-flex; gap:4px; align-items:center; cursor:pointer; } .rd-fdrawer .tg2 span.on{ background:var(--s-panel2); border-color:var(--s-sel); color:#fff; } .rd-fdrawer .tg2 span i{ font-style:normal; color:var(--s-mut); font-size:9px; } .rd-fdrawer .tg2 span.on i{ color:var(--s-sel); } .rd-fdrawer .tg2 span.dim{ opacity:.5; cursor:not-allowed; } .rd-fdrawer .tg2 span.more{ border-style:dashed; color:var(--s-mut); } .rd-fdrawer .tg2.grp{ opacity:.5; } /* dimmed category group (with a reason line) */ /* distance range track + value */ .rd-fdrawer .rng{ display:flex; align-items:center; gap:7px; } .rd-fdrawer .rngt{ position:relative; flex:1; height:4px; border-radius:2px; background:#2a303d; cursor:pointer; } .rd-fdrawer .rngt i{ position:absolute; top:0; height:4px; border-radius:2px; background:var(--s-sel); } .rd-fdrawer .rngt b{ position:absolute; top:-5px; width:6px; height:14px; border-radius:2px; background:var(--s-sel); } .rd-fdrawer .rngv{ font:600 10px/1 var(--disp); color:#fff; min-width:56px; text-align:right; font-variant-numeric:tabular-nums; } /* inline "Exact…" number-pad builder that expands in place */ .rd-fdrawer .exact-pad{ grid-column:1/-1; margin-top:6px; border:1px solid var(--s-sel); border-radius:6px; background:#0f1218; padding:8px; } .rd-fdrawer .exact-pad .ops{ display:flex; gap:4px; margin-bottom:6px; } .rd-fdrawer .exact-pad .ops span{ flex:1; text-align:center; padding:5px; border:1px solid var(--s-line); border-radius:4px; font:600 10px/1 var(--disp); color:#c3cad9; cursor:pointer; } .rd-fdrawer .exact-pad .ops span.on{ background:var(--s-sel); border-color:var(--s-sel); color:#1a1204; } .rd-fdrawer .exact-pad .pad{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; } .rd-fdrawer .exact-pad .pad span{ text-align:center; padding:8px; border:1px solid var(--s-line); border-radius:4px; font:600 12px/1 var(--disp); color:#fff; cursor:pointer; } .rd-fdrawer .exact-pad .apply{ margin-top:6px; width:100%; text-align:center; padding:7px; background:var(--s-sel); color:#1a1204; border-radius:4px; font:600 10px/1 var(--body); cursor:pointer; } /* search field */ .rd-fdrawer .msearch{ display:flex; align-items:center; width:100%; background:#101319; border:1px solid var(--s-line); border-radius:4px; padding:5px 8px; font-size:10.5px; color:var(--s-mut); margin:0; } .rd-fdrawer .msearch input{ flex:1; background:none; border:0; outline:0; color:#fff; font:inherit; } .rd-fdrawer .msearch u{ text-decoration:none; margin-left:auto; } .rd-fdrawer .legend-hint{ font-size:10px; color:var(--s-mut); padding:5px 12px 8px; } .rd-fdrawer .legend-hint em{ font-style:normal; color:#c3cad9; } /* custom-tags two-pane (kept — unbounded list needs the drill) */ .rd-fdrawer .twopane{ grid-column:1/-1; display:grid; grid-template-columns:40% 1fr; gap:8px; } .rd-fdrawer .twopane .cats,.rd-fdrawer .twopane .vals{ max-height:150px; overflow-y:auto; } .rd-fdrawer .twopane .catrow{ padding:4px 6px; border-radius:4px; font-size:10.5px; color:#c3cad9; cursor:pointer; } .rd-fdrawer .twopane .catrow.on{ background:var(--s-panel2); color:#fff; } /* footer */ .rd-fdrawer .ppf{ display:flex; align-items:center; gap:8px; padding:11px 12px; height:44px; background:#101319; border-top:1px solid var(--s-line); flex:none; } .rd-fdrawer .bt{ font:600 11px/1 var(--body); border:1px solid var(--s-line); border-radius:5px; padding:9px 12px; color:#c3cad9; cursor:pointer; } .rd-fdrawer .bt.pri{ background:var(--s-sel); border-color:var(--s-sel); color:#1a1204; margin-left:auto; } .rd-fdrawer .bt.pri.inert{ background:none; border-color:var(--s-line); color:var(--s-mut); cursor:default; } .rd-fdrawer .bt.hidden{ display:none; } /* ============================================================================ * PHASE 3 · Board — LANES (default) / LIST (compact) + a 32px header toggle. * TWIN-ONLY and additive: LIST styling only bites when #statFrame carries * .rd-list-mode (the adapter toggles it from the header it injects). The default * board (LANES) is visually untouched, so nothing changes until a coach opts in. * Minimap + virtualization are later P3 increments. * ========================================================================== */ .rd-board-head{ display:flex; align-items:center; gap:12px; padding:0 12px; height:32px; flex:none; background:#14171f; border-bottom:1px solid #252a35; color:#f2f4f8; font:12px/1 'Inter Tight',system-ui,-apple-system,'Segoe UI',Arial,sans-serif; } .rd-board-head .rd-seg{ display:inline-flex; border:1px solid #252a35; border-radius:5px; overflow:hidden; } .rd-board-head .rd-seg span{ padding:6px 12px; font:600 9.5px/1 'Chakra Petch',system-ui,sans-serif; letter-spacing:.09em; color:#8b93a8; cursor:pointer; } .rd-board-head .rd-seg span.on{ background:#f2b632; color:#1a1204; } .rd-board-head .rd-bcount{ font-size:11px; color:#8b93a8; font-variant-numeric:tabular-nums; } .rd-board-head .rd-bcount b{ color:#f2f4f8; font-weight:600; } /* Lite board header — shown on non-STAT tabs for consistency (count + Legend + Filter; no LANES/LIST or expand). Aligns its count with the cards (nav-rail clearance) and pushes Legend/Filter right. */ body.rd-has-navrail .rd-board-head.rd-bh-lite{ padding-left:64px; } .rd-board-head.rd-bh-lite .rd-legend-open{ margin-left:auto; } /* TEAM tab's simple filter = the classic All/My/Others dropdown, relocated into the lite header (bug 2). */ .rd-board-head.rd-bh-lite .rd-fd-teamwrap{ display:inline-flex; align-items:center; } .rd-board-head.rd-bh-lite .rd-fd-teamwrap .staff-snip-filter-dropdown{ display:inline-block !important; height:26px; padding:0 8px; width:auto; min-width:118px; background:#20242d; color:#e6e9f0; border:1px solid #333a48; border-radius:6px; font:600 11px/1 'Inter Tight',sans-serif; cursor:pointer; } /* Multi-select delete (bug 9): the "Select" trigger in non-stat board headers + skin the classic overlay. */ .rd-board-head .rd-multidel{ margin-left:6px; height:26px; padding:0 12px; border:1px solid #333a48; background:#191d24; color:#c9cede; border-radius:6px; font:600 11px/1 'Inter Tight',sans-serif; cursor:pointer; } .rd-board-head .rd-multidel:hover{ border-color:#e1261c; color:#fff; } .rd-board-head .rd-multidel.on{ background:#e1261c; border-color:#e1261c; color:#fff; } /* lift the classic delete-multiple popup above the redesign chrome (navrail 99998 / appbar 99999) */ body.rd-has-navrail #del-multiple-snips-popup{ z-index:100012 !important; } /* per-card select checkbox — keep it above the card content and clearly tappable while selecting */ body.rd-multidel-on .add-remove-statsnipcollection{ z-index:6; } body.rd-multidel-on .each-shot .check-movesnip{ box-shadow:0 0 0 2px rgba(0,0,0,.45); } /* Empty collection — a tab with no snips still shows its board rail (the lite header mounts above), and the empty area reads as an intentional, consistent panel instead of bare red "No Data" text. Give it the board's grey ground + nav-rail clearance and turn the .no-bkmarks marker into a quiet, centred empty-state so the tab stays a legible place to add snips. */ /* The classic frame pins its height to 150px (.shots-flex) and lives in the 1874px content column (the camera rail takes the rest of the flex row), so an empty board would float mid-window with a dead strip below it and a gap to the right. Break it out to full width (like the STAT board's 100vw) and fill it down to the viewport bottom — --rd-coll-top (the frame's top, set by ensureAltHeaders on mount + resize) is the only run-time-measured value the CSS needs. */ .rd-empty-frame{ width:100vw !important; height:auto !important; overflow:hidden !important; min-height:calc(100vh - var(--rd-coll-top, 900px)) !important; box-sizing:border-box; background:#14171f !important; display:flex !important; align-items:center; justify-content:center; } body.rd-has-navrail .rd-empty-frame{ padding-left:64px !important; } .rd-empty-frame .no-bkmarks{ color:#5b6274 !important; margin:0 !important; padding:36px 16px !important; font-size:12px !important; font-weight:600 !important; letter-spacing:.02em; text-align:center !important; width:auto !important; } .rd-empty-frame .no-bkmarks::before{ content:"\1F4C2"; display:block; font-size:22px; opacity:.5; margin-bottom:8px; } /* the empty tab's lite header spans full width too, so the rail reads as one panel edge-to-edge */ .rd-board-head.rd-bh-lite.rd-bh-empty{ width:100vw !important; box-sizing:border-box; } /* Non-STAT collections (populated or empty) break out to full width like the STAT board's .rd-boardwrap, so their card row + lite header reach the window's right edge instead of stopping at the 1874px content column (which left a black strip down the right side — the STAT board doesn't have it because it's 100vw). padding-left:64px (nav-rail clearance) is already applied to these frames, and box-sizing keeps it inside. */ #odkFrame, #chartFrame, #teamFrame, #allFrame, #playerFrame, #assignedFrame{ width:100vw !important; box-sizing:border-box; } .rd-board-head.rd-bh-lite{ width:100vw !important; box-sizing:border-box; } /* Transport button tooltips (the classic .player-right-icons a → .tooltip-text) render UNDER the video's control-bar scrubber — an ancestor stacking context the transport can't beat with z-index, even fixed + max z-index. So hide those and mirror the text into a body-level top-layer tip that's always on top. (player-redesign_opt.js positions .rd-tiptop over the hovered control.) */ .player-right-icons .tooltip-text{ display:none !important; } .rd-tiptop{ position:fixed; z-index:2147483000; transform:translate(-50%, calc(-100% - 9px)); pointer-events:none; opacity:0; background:#1a1e28; color:#e6e9f0; padding:5px 9px; border-radius:6px; white-space:nowrap; font:600 11px/1.2 'Inter Tight',system-ui,-apple-system,'Segoe UI',Arial,sans-serif; letter-spacing:.01em; border:1px solid #2b313c; box-shadow:0 6px 18px rgba(0,0,0,.55); transition:opacity .08s; } .rd-tiptop.on{ opacity:1; } .rd-tiptop::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:#1a1e28; } /* POPULATED collections leave a dead black strip below the board too (the board is a fixed-height grid and the collections row only grows to its content, ~44-68px short of the viewport). Fill that row to the bottom with the board's own ground colour so every collection — stat board, card tabs, empty — reaches the browser edge. --rd-row-top (the row's top, published by fillRail on mount/tab/resize) is the run-time value; the board's opaque bg covers the top, this fills below it. */ .entire-video-shot-section{ min-height:calc(100vh - var(--rd-row-top, 868px)) !important; background:#14171f; } /* When the charting panel (.rd-chartwork, fixed right, 404px) is open, cap the bottom board so its right edge stops at the panel's left edge — otherwise the board head's filter + legend buttons sit under the panel. STAT wraps the board in .rd-boardwrap (which overflows its parent); other tabs use the section directly — cap both. */ /* The board only reserves 404px for the panel while it is DOCKED — when detached (floating), the panel no longer occupies the right edge, so the board/video reclaim full width (:not(.cw-detached)). */ body.cw-active:not(.cw-detached) .rd-boardwrap, body.cw-active:not(.cw-detached) .entire-video-shot-section{ width:calc(100vw - 404px) !important; max-width:calc(100vw - 404px) !important; } body.cw-active .rd-boardwrap{ overflow-x:auto; } /* Some frames (STAFF/team, MY…) place .rd-board-head directly in the col — no .rd-boardwrap ancestor — so the head itself spans the full row and its FILTER/LEGEND buttons hide under the panel. Cap the head too, and undo the cap where it sits inside the already-capped wrapper (avoid a padding double-cap). */ body.cw-active:not(.cw-detached) .rd-board-head{ width:calc(100vw - 404px) !important; max-width:calc(100vw - 404px) !important; } body.cw-active .rd-boardwrap .rd-board-head{ width:auto !important; max-width:none !important; } /* LIST — narrow the columns and drop the tag-text block; keep the ramp-coloured result number (the primary at-a-glance signal). Hover-restore of tags is a refinement. */ /* ══ Board views — LANES (rich 4-row study grid) + LIST (compact strip). Both restyle the existing .each-shot IN PLACE; .shot-number stays the clickable .frameshot node so seek/select/filter/ charting wiring is reused verbatim. rdBuildBoard builds ONE DOM per column (possession .rd-lvt = b/i/u · result .rd-cap = rc-n/rc-w + band class · coach .rd-tagcell); these rules reflow it. The mode class `rd-list` lives on .rd-boardwrap (not just #statFrame) so it can also style the fixed left label column, which is #statFrame's sibling. ══ */ /* board frame: toolbar row on top · [labels | scrolling plays] body · minimap at the bottom. width:100vw breaks the board out of its classic column (~1953px, offset for the right sidebar) so it spans the full window; its left is already at x0 and the area to the right is empty here. */ .rd-boardwrap{ display:flex; flex-direction:column; align-items:stretch; background:#0b0d12; width:100vw; } .rd-board-head{ order:0; display:flex; align-items:center; gap:10px; padding:5px 10px; } .rd-board-body{ order:1; display:flex; align-items:flex-start; width:100%; overflow:hidden; } .rd-board-body #statFrame{ flex:1 1 auto; min-width:0; } /* persistent filter tag-summary bar — sits between the board head and body when a filter is active; shows the active chips, removes any one (re-runs the found set), or clears all — no drawer needed. Scoped to body.rd-has-navrail, not .rd-boardwrap: the lanes wrapper is football-only (built by ensureBoardHeader, which returns early unless gameCategory==7), so every other sport rendered the bar into a container these rules never matched. .rd-fsum is created only by filterDrawer_opt.js, which only the redesigned twin loads, so the body scope is as tight in practice and covers both. */ body.rd-has-navrail .rd-fsum{ order:0; display:flex; align-items:center; gap:9px; padding:6px 12px; margin-top:2px; background:#111318; border-top:1px solid #1b2028; border-bottom:1px solid #1b2028; } body.rd-has-navrail .rd-fsum{ padding-left:64px; } /* clears the nav rail — the lite STAT header uses the same 64px */ body.rd-has-navrail .rd-fsum-lbl{ flex:none; display:inline-flex; align-items:center; gap:5px; font:800 9.5px/1 'Inter Tight',system-ui,sans-serif; letter-spacing:.08em; color:#f2b632; } body.rd-has-navrail .rd-fsum-chips{ display:flex; gap:6px; flex:1 1 auto; min-width:0; overflow-x:auto; padding:1px 0; } body.rd-has-navrail .rd-fsum-chip{ flex:none; display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 6px 0 10px; background:#20242d; border:1px solid #2b313c; border-radius:12px; font:600 11px/1 'Inter Tight',system-ui,sans-serif; color:#e6e9f0; white-space:nowrap; } body.rd-has-navrail .rd-fsum-x{ cursor:pointer; color:#8b93a8; font:700 14px/1 sans-serif; } body.rd-has-navrail .rd-fsum-x:hover{ color:#e1261c; } body.rd-has-navrail .rd-fsum-clear, body.rd-has-navrail .rd-fsum-edit{ flex:none; height:24px; padding:0 11px; border-radius:6px; font:700 10.5px/1 'Inter Tight',system-ui,sans-serif; cursor:pointer; } body.rd-has-navrail .rd-fsum-clear{ background:#2a2f3a; color:#c9cede; border:1px solid #3a414e; } body.rd-has-navrail .rd-fsum-clear:hover{ color:#fff; border-color:#e1261c; background:#e1261c; } body.rd-has-navrail .rd-fsum-edit{ background:transparent; color:#8b93a8; border:1px solid #2b313c; } body.rd-has-navrail .rd-fsum-edit:hover{ color:#fff; border-color:#3a4256; } /* tab-switch micro-gate: hide the snip cards while the classic tab swaps in, so the classic snip layout never flashes before the redesign re-styles the new tab (cleared by mountBoard via rd-switching) */ body.rd-switching .each-shot{ visibility:hidden !important; } /* identity tabs (STAFF/MINE/PLAYER/ASSIGN): hide the classic cards until the frame is redesign-built (.rd-idcards is added the moment the meta structure is; build() no longer waits for the authors AJAX, so this window is tiny). Fixes the classic-cards flash on the initial STAFF load. */ #teamFrame:not(.rd-idcards) .each-shot, #playerFrame:not(.rd-idcards) .each-shot, #assignedFrame:not(.rd-idcards) .each-shot{ visibility:hidden !important; } /* fixed left label column (LANES only) height pinned to the card's fixed 166px (see .each-shot below) so the label rows shrink by the SAME amount as the card cells — otherwise the labels stay at their 200px content height while the card compresses to 166, and the headers drift below their lanes. */ .rd-lanes-labels{ flex:0 0 96px; height:166px; display:flex; flex-direction:column; background:#0f1219; border-right:1px solid #252a35; } .rd-lanes-labels .rl-r{ display:flex; flex-direction:column; justify-content:center; padding:0 9px; font:700 9px/1.15 'Inter Tight',system-ui,-apple-system,'Segoe UI',Arial,sans-serif; letter-spacing:.03em; color:#8b93a8; border-bottom:1px solid #1a1e28; } .rd-lanes-labels .rl-r span{ display:block; font-weight:600; font-size:8px; color:#5b6274; } .rd-lanes-labels .rl-play{ flex:0 0 20px; height:20px; } /* no-shrink, mirrors .shot-number min-height:20 */ .rd-lanes-labels .rl-poss{ height:45px; } .rd-lanes-labels .rl-res{ height:45px; } .rd-lanes-labels .rl-tags{ height:90px; } .rd-boardwrap.rd-list .rd-lanes-labels{ display:none; } #statFrame{ align-items:flex-start !important; } #statFrame .each-shot{ cursor:pointer; } /* whole column is clickable (JS forwards to .frameshot) */ /* ── LANES (default): 4 stacked cells per play, aligned to the label rows ── */ .rd-boardwrap:not(.rd-list) #statFrame .each-shot{ display:flex !important; flex-direction:column !important; width:96px !important; min-width:96px !important; max-width:96px !important; height:166px !important; padding:0 !important; margin:0 1px 0 0 !important; border-right:1px solid #21262f; } /* PLAY — the reused .shot-number (its clickable label = play no.; the yardage badge is dropped here) */ .rd-boardwrap:not(.rd-list) #statFrame .each-shot .shot-number{ order:1; height:20px !important; min-height:20px; display:flex !important; align-items:center; justify-content:center; margin:0 !important; background:#191d27 !important; border:0 !important; border-bottom:1px solid #252a35 !important; } .rd-boardwrap:not(.rd-list) #statFrame .each-shot .shot-number .fball-yard-bk{ display:none !important; } .rd-boardwrap:not(.rd-list) #statFrame .each-shot .shot-number .position-relative{ font:700 12px/1 'Chakra Petch',system-ui,sans-serif; color:#e6e9f0 !important; } /* POSSESSION — down (b) · spot (i) · OFF/DEF/SPEC unit (u) */ .rd-boardwrap:not(.rd-list) #statFrame .each-shot .rd-lvt{ order:2; height:45px !important; display:flex !important; flex-direction:column; justify-content:center; gap:1px; padding:4px 6px !important; } .rd-boardwrap:not(.rd-list) #statFrame .each-shot .rd-lvt b{ font:700 11px/1.1 'Inter Tight',system-ui,sans-serif; color:#fff; } .rd-boardwrap:not(.rd-list) #statFrame .each-shot .rd-lvt i{ font-style:normal; font:600 9px/1.15 'Inter Tight',system-ui,sans-serif; color:rgba(255,255,255,.66); } .rd-boardwrap:not(.rd-list) #statFrame .each-shot .rd-lvt .rd-unit{ font:700 8px/1 'Inter Tight',system-ui,sans-serif; letter-spacing:.05em; color:rgba(255,255,255,.85); } /* RESULT — signed yards (rc-n) + band word (rc-w) */ .rd-boardwrap:not(.rd-list) #statFrame .each-shot .rd-cap{ order:3; height:45px !important; display:flex !important; flex-direction:column; justify-content:center; align-items:flex-start; gap:1px; padding:4px 7px; color:#fff; } .rd-boardwrap:not(.rd-list) #statFrame .each-shot .rd-cap .rc-n{ font:800 15px/1 'Chakra Petch',system-ui,sans-serif; } .rd-boardwrap:not(.rd-list) #statFrame .each-shot .rd-cap .rc-w{ font:700 8px/1 'Inter Tight',system-ui,sans-serif; letter-spacing:.04em; opacity:.85; } /* COACH TAGS — first 2 play tags + overflow count */ .rd-boardwrap:not(.rd-list) #statFrame .each-shot .rd-tagcell{ order:4; height:90px; display:flex; flex-direction:column; gap:2px; padding:5px 6px; background:#0f1219; overflow:hidden; } .rd-boardwrap:not(.rd-list) #statFrame .each-shot .rd-tagcell .rd-tg{ font:600 8px/1.2 'Inter Tight',system-ui,sans-serif; color:#c3cad9; border-left:2px solid #3f7d4f; padding-left:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rd-boardwrap:not(.rd-list) #statFrame .each-shot .rd-tagcell .rd-tg-more{ font:600 8px/1 'Inter Tight',system-ui,sans-serif; color:#5b6274; } /* classic inner nodes not used in the LANES grid */ .rd-boardwrap:not(.rd-list) #statFrame .each-shot .shot-username, .rd-boardwrap:not(.rd-list) #statFrame .each-shot .shot-username-fbinfo, .rd-boardwrap:not(.rd-list) #statFrame .each-shot .snip-tooltip{ display:none !important; } /* result-band colours — mirrored 3-band FALLBACK (JS paints the precise 5-band ramp inline, so these only show if the ramp hasn't run yet). Tokens: gain / zero / loss. */ #statFrame .each-shot .rd-cap.rc-g{ background:#3ab54a; } #statFrame .each-shot .rd-cap.rc-z{ background:#565d6d; color:#fff; } #statFrame .each-shot .rd-cap.rc-r{ background:#e1483c; } /* possession colours (§#8) — keyed on which TEAM has the ball, NOT the loss-red hue. home #293991 (your team has it) · away #0d0f14 (opponent has it) · special #800580 */ #statFrame .each-shot .rd-lvt.h{ background:#293991; } #statFrame .each-shot .rd-lvt.a{ background:#0d0f14; } #statFrame .each-shot .rd-lvt.s{ background:#800580; } #statFrame .each-shot .rd-lvt.n{ background:#2b303c; } /* ── LIST (compact): 3 narrow rows — PLAY number (top) · possession · result number ── Mirrors the LANES top rows (number gets its own small row, not combined with the result). No coach-tags row and no left labels. */ .rd-boardwrap.rd-list #statFrame .each-shot{ display:flex !important; flex-direction:column !important; width:60px !important; min-width:60px !important; max-width:60px !important; height:88px !important; padding:0 !important; margin:0 !important; border-right:1px solid #21262f; } /* PLAY (number only — hide the yardage badge so it isn't combined with the result) */ .rd-boardwrap.rd-list #statFrame .each-shot .shot-number{ order:1; flex:0 0 auto !important; height:18px !important; min-height:18px; display:flex !important; align-items:center; justify-content:center; margin:0 !important; background:#191d27 !important; border:0 !important; border-bottom:1px solid #252a35 !important; } .rd-boardwrap.rd-list #statFrame .each-shot .shot-number .fball-yard-bk{ display:none !important; } .rd-boardwrap.rd-list #statFrame .each-shot .shot-number .position-relative{ font:700 10px/1 'Chakra Petch',system-ui,sans-serif; color:#e6e9f0 !important; } /* POSSESSION */ .rd-boardwrap.rd-list #statFrame .each-shot .rd-lvt{ order:2; flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; gap:0; padding:2px 4px; min-height:0; } .rd-boardwrap.rd-list #statFrame .each-shot .rd-lvt b{ font:700 9px/1.1 'Chakra Petch',system-ui,sans-serif; color:#fff; } .rd-boardwrap.rd-list #statFrame .each-shot .rd-lvt i{ font-style:normal; font:600 8px/1.1 'Inter Tight',system-ui,sans-serif; color:rgba(255,255,255,.62); } .rd-boardwrap.rd-list #statFrame .each-shot .rd-lvt .rd-unit{ display:none; } /* RESULT (colored number) */ .rd-boardwrap.rd-list #statFrame .each-shot .rd-cap{ order:3; flex:0 0 auto; height:26px !important; display:flex !important; align-items:center; justify-content:center; padding:2px; } .rd-boardwrap.rd-list #statFrame .each-shot .rd-cap .rc-n{ font:800 12px/1 'Chakra Petch',system-ui,sans-serif; color:#fff; } .rd-boardwrap.rd-list #statFrame .each-shot .rd-cap .rc-w{ display:none; } .rd-boardwrap.rd-list #statFrame .each-shot .rd-tagcell, .rd-boardwrap.rd-list #statFrame .each-shot .shot-username, .rd-boardwrap.rd-list #statFrame .each-shot .shot-username-fbinfo, .rd-boardwrap.rd-list #statFrame .each-shot .snip-tooltip{ display:none !important; } /* §7.5 — selection ring is GOLD in EVERY collection tab, retiring active-red-shot's red marker (red is the chrome accent now, so it no longer reads as selection). OUTLINE, not inset box-shadow: the card tabs' opaque children (thumb + label chips) cover the card face and hid the shadow ring entirely — an outline paints OVER descendants, so the ring shows on every frame (ODK/CHART/MY/STAFF/PLAYER/ASSIGN), and no ID-scoped border override can beat it. The classic red ::before marker stays suppressed across all frames. */ .each-shot.active-red-shot{ outline:2px solid #f2b632 !important; outline-offset:-2px !important; border-radius:6px; } .each-shot.active-red-shot:before{ display:none !important; } /* §7 step 3 — AUTHOR COLOUR TOKENS: six stable hues assigned user_id % 6 (never load-order). Published now; the initials disc is DEFERRED — the web Staff card has no author name/initial (it renders "N/A"; only iPad shows it). The proper disc will render on a NEW element via the getGameSnipAuthors endpoint. */ :root{ --a-author-1:#2ec4b6; --a-author-2:#3aa8f0; --a-author-3:#7c6cf5; --a-author-4:#c86ef0; --a-author-5:#f06ea8; --a-author-6:#f09a3e; } /* §7 — IDENTITY CARD (Staff/Player). Restructure the narrow classic card into the redesign anatomy: thumb (number) → author disc(initials+hue)+name → the classic label as a tag. Slots 3-4 collapse (identity tabs carry no play data). Author-forward: "who cut this" is the axis. */ .rd-idcards{ align-items:flex-start !important; } /* clear the fixed 60px collections rail (mirrors body.rd-has-navrail .rd-boardwrap) so the first card isn't hidden under it — these identity frames aren't wrapped in .rd-boardwrap */ body.rd-has-navrail .rd-idcards{ padding-left:64px !important; box-sizing:border-box !important; } .rd-idcards .each-shot{ width:104px !important; min-width:104px !important; max-width:104px !important; height:auto !important; display:flex !important; flex-direction:column !important; margin:0 6px 0 0 !important; padding:0 !important; background:#111318 !important; border:1px solid #282d37 !important; border-radius:6px !important; overflow:hidden !important; } /* thumb — the reused number cell */ .rd-idcards .each-shot .shot-number{ order:1 !important; width:100% !important; height:52px !important; min-height:52px !important; display:flex !important; align-items:center !important; justify-content:center !important; margin:0 !important; background:#0e1116 !important; border:0 !important; border-bottom:1px solid #20242d !important; border-radius:0 !important; } .rd-idcards .each-shot .shot-number .position-relative{ font:700 15px/1 'Chakra Petch',system-ui,sans-serif !important; color:#e6e9f0 !important; background:transparent !important; } /* The classic per-snip colour layer (inline bg) used to be flattened to #0e1116 here. It is NOT a "result hue" — it is the snip's own custom-tag colour_code, and coaches need to see it (QA 2026-08-09). The bands are restored at the bottom of this file; see "(2) SNIP TAG COLOUR". */ /* identity slot — author disc + name */ .rd-idcards .each-shot .rd-meta{ order:2; display:flex; align-items:center; gap:6px; padding:6px 7px; background:#0e1116; } .rd-idcards .each-shot .rd-disc{ flex:none; width:20px; height:20px; border-radius:50%; display:inline-grid; place-items:center; font:700 8.5px/1 'Inter Tight',system-ui,sans-serif; color:#0c0e12; letter-spacing:-.02em; } /* Assigned coach-view group count (many assignees) — neutral, not a player hue */ .rd-idcards .each-shot .rd-disc.rd-disc-grp{ background:#20242d !important; color:#c3cad9 !important; border:1px solid #3a4256; } .rd-idcards .each-shot .rd-aname{ font:600 9.5px/1.2 'Inter Tight',system-ui,sans-serif; color:#e6e9f0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } /* the classic label → a tag chip at the bottom */ .rd-idcards .each-shot .shot-username{ order:3 !important; display:block !important; width:auto !important; height:auto !important; padding:5px 7px !important; margin:0 !important; background:#0d1014 !important; border:0 !important; border-top:1px solid #20242d !important; border-radius:0 !important; font:600 8.5px/1.2 'Inter Tight',system-ui,sans-serif !important; color:#c3cad9 !important; text-align:left !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; /* the classic label runs VERTICAL (writing-mode:vertical-rl + rotate(180deg)) — that made the label height scale with character count, so cards came out ragged (104/113/131px). Force it horizontal so every label is one line and every identity card is the same height. */ writing-mode:horizontal-tb !important; text-orientation:mixed !important; transform:none !important; line-height:1.3 !important; } .rd-idcards .each-shot{ min-height:104px !important; } /* belt-and-suspenders: uniform card height */ .rd-idcards .each-shot .snip-tooltip{ display:none !important; } /* ===== ODK / CHART / MY tabs — redesign card shell ========================== #odkFrame / #chartFrame / #allFrame ship the same classic thumb+label card the identity tabs started from (colored number + vertical label + red scrollbar). Bring them up to the redesign card (thumb over a horizontal label chip) — no author disc (these tabs aren't author-scoped), uniform size, dark theme. */ /* #scriptFrame (GAMEPLAN) was missing from this list, so its cards rendered at x=0 — straight under the 60px nav rail. The snips were there and correct; you simply could not see them, which is why "Add to GamePlan" reported success and the collection then looked empty (QA #246 bug 34). */ body.rd-has-navrail #odkFrame, body.rd-has-navrail #chartFrame, body.rd-has-navrail #allFrame, body.rd-has-navrail #scriptFrame{ padding-left:64px !important; box-sizing:border-box !important; } #odkFrame .each-shot, #chartFrame .each-shot, #allFrame .each-shot{ width:104px !important; min-width:104px !important; max-width:104px !important; min-height:100px !important; height:auto !important; display:flex !important; flex-direction:column !important; margin:0 6px 0 0 !important; padding:0 !important; background:#111318 !important; border:1px solid #282d37 !important; border-radius:6px !important; overflow:hidden !important; } /* block (not flex-centre) so the classic per-snip colour stripes (.bd-highlight, each an inline-coloured min-height:% band) stack + fill the thumb as a colour bar; the number floats over them (absolute). */ #odkFrame .each-shot .shot-number, #chartFrame .each-shot .shot-number, #allFrame .each-shot .shot-number{ order:1 !important; width:100% !important; height:52px !important; min-height:52px !important; flex:none !important; display:block !important; position:relative !important; overflow:hidden !important; margin:0 !important; background:#0e1116 !important; border:0 !important; border-bottom:1px solid #20242d !important; border-radius:0 !important; } #odkFrame .each-shot .shot-number .position-relative, #chartFrame .each-shot .shot-number .position-relative, #allFrame .each-shot .shot-number .position-relative{ position:absolute !important; inset:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; z-index:1 !important; font:700 15px/1 'Chakra Petch',system-ui,sans-serif !important; color:#fff !important; text-shadow:0 1px 2px rgba(0,0,0,.7) !important; background:transparent !important; } /* NOTE: do NOT over-paint .bd-highlight here — that was killing the O/D/K colour coding. Let the classic inline colours show (ODK / CHART / MINE). Identity cards (Staff/Player) keep their neutral thumb above. */ #odkFrame .each-shot .shot-number .bd-highlight, #chartFrame .each-shot .shot-number .bd-highlight, #allFrame .each-shot .shot-number .bd-highlight{ width:100% !important; display:block !important; } #odkFrame .each-shot .shot-username, #chartFrame .each-shot .shot-username, #allFrame .each-shot .shot-username{ order:2 !important; flex:1 1 auto !important; width:auto !important; height:auto !important; min-height:0 !important; padding:6px 8px !important; margin:0 !important; background:#0d1014 !important; border:0 !important; border-top:1px solid #20242d !important; border-radius:0 !important; writing-mode:horizontal-tb !important; text-orientation:mixed !important; transform:none !important; font:600 9px/1.3 'Inter Tight',system-ui,sans-serif !important; color:#c3cad9 !important; text-align:left !important; display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; white-space:normal !important; overflow:hidden !important; } #odkFrame .each-shot .snip-tooltip, #chartFrame .each-shot .snip-tooltip, #allFrame .each-shot .snip-tooltip{ display:none !important; } /* ===== BOARD/PANEL POLISH =================================================== Clock cleared the gold play/pause button (they overlapped ~11px). */ body.rd-has-appbar .video-time{ margin-left:16px !important; } /* Camera panel: no horizontal scroll (the tiles are a single column), and give the whole right rail the same grey panel backdrop as the top bar + left nav (.rd-campanel added by JS). */ .video-shots{ overflow-x:hidden !important; } .rd-campanel{ background:#14171f !important; /* fill the full right side like the left nav rail (was content-height, leaving black above+below): start right below the 48px app-bar and stretch to the viewport bottom; padding-top keeps the CAMERAS content where the classic layout placed it. */ top:48px !important; min-height:calc(100vh - 48px) !important; padding-top:48px !important; box-sizing:border-box !important; } /* Bottom copyright strip → a grey panel so all four sides read as complete panels. */ .copyRight{ background:#14171f !important; } /* COACH TAGS lane — tag-type view filter control on the lane label + its menu */ .rd-lanes-labels .rl-tags{ position:relative; } .rd-tagfilter{ position:absolute; top:5px; right:5px; width:17px; height:17px; display:inline-flex; align-items:center; justify-content:center; color:#5b6274; cursor:pointer; font-size:14px; border-radius:3px; } .rd-tagfilter:hover{ color:#c3cad9; background:#20242d; } .rd-tagfilter.on{ color:#f2b632; } /* gold = a filter is active (data accent) */ .rd-tf-menu{ position:fixed; z-index:100001; width:238px; max-height:62vh; display:flex; flex-direction:column; background:#14171f; border:1px solid #2b313c; border-radius:8px; padding:8px; box-shadow:0 10px 28px rgba(0,0,0,.55); } .rd-tf-menu[hidden]{ display:none; } .rd-tf-top{ display:flex; align-items:center; gap:6px; margin-bottom:6px; } .rd-tf-h{ flex:1; font:700 9px/1 'Inter Tight',system-ui,sans-serif; letter-spacing:.1em; color:#6f7789; } .rd-tf-top s, .rd-tf-gh s{ text-decoration:none; cursor:pointer; font:600 8.5px/1 'Inter Tight',system-ui,sans-serif; color:#8b93a8; border:1px solid #2b313c; border-radius:4px; padding:3px 6px; } .rd-tf-top s:hover, .rd-tf-gh s:hover{ color:#fff; border-color:#3a4256; } .rd-tf-search{ width:100%; background:#0f1218; border:1px solid #2b313c; border-radius:5px; padding:5px 8px; color:#e6e9f0; font-size:11px; margin-bottom:6px; outline:none; } .rd-tf-search:focus{ border-color:#3a4256; } .rd-tf-list{ overflow-y:auto; flex:1 1 auto; min-height:0; } .rd-tf-g{ margin-bottom:5px; } .rd-tf-gh{ display:flex; align-items:center; gap:4px; margin:5px 0 2px; } .rd-tf-gh em{ flex:1; font:700 8.5px/1 'Inter Tight',system-ui,sans-serif; letter-spacing:.08em; color:#5b6274; font-style:normal; } .rd-tf-t{ display:flex; align-items:center; gap:7px; font:600 11px/1.75 'Inter Tight',system-ui,sans-serif; color:#c3cad9; cursor:pointer; padding:1px 3px; border-radius:3px; } .rd-tf-t:hover{ background:#1a1e28; } .rd-tf-t span{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rd-tf-t b{ font:600 9px/1 'Inter Tight',system-ui,sans-serif; color:#5b6274; font-variant-numeric:tabular-nums; } .rd-tf-t input{ accent-color:#f2b632; margin:0; flex:none; } /* expand ⤢ — lift the whole board into a tall bottom overlay */ .rd-board-head .rd-expand{ cursor:pointer; color:#8b93a8; font-size:14px; padding:2px 4px; } .rd-board-head .rd-expand:hover{ color:#f2f4f8; } .rd-boardwrap.rd-expanded{ position:fixed; bottom:0; z-index:6000; height:340px; display:flex; flex-direction:column; background:#0b0d12; border-top:1px solid #252a35; box-shadow:0 -12px 34px rgba(0,0,0,.6); } .rd-boardwrap.rd-expanded .rd-board-body{ flex:1 1 auto; min-height:0; } .rd-boardwrap.rd-expanded #statFrame{ height:100%; } /* P3 · Minimap track — kept for the expanded overview; hidden in the compact strip (costs height) */ .rd-minimap{ display:none; order:2; align-items:center; gap:9px; padding:5px 12px; flex:none; background:#0f1218; border-top:1px solid #252a35; } .rd-boardwrap.rd-expanded .rd-minimap{ display:flex; } .rd-minimap .mtk{ position:relative; flex:1; height:14px; border-radius:3px; background:#171b23; overflow:hidden; display:flex; cursor:pointer; } .rd-minimap .mtk i{ flex:1 1 0; min-width:0; height:100%; } .rd-minimap .mvw{ position:absolute; top:-1px; height:16px; border:1px solid #f2b632; background:rgba(242,182,50,.16); border-radius:3px; pointer-events:none; } .rd-minimap .mlb{ font:9.5px/1 'Inter Tight',system-ui,-apple-system,'Segoe UI',Arial,sans-serif; color:#8b93a8; font-variant-numeric:tabular-nums; white-space:nowrap; } /* ═══════════════════════════════════════════════════════════════════════════ * PLAYER CHROME (redesign) — TWIN-ONLY. The shell re-layout toward the mockup, * built additively over the existing player. Increment 1: the app header bar. * ═══════════════════════════════════════════════════════════════════════════ */ .rd-appbar{ position:fixed; top:0; left:0; right:0; height:48px; z-index:99999; background:#14171f; border-bottom:1px solid #252a35; display:flex; align-items:center; gap:14px; padding:0 16px; font-family:'Inter Tight',system-ui,-apple-system,'Segoe UI',Arial,sans-serif; } .rd-appbar .rd-logo{ font:700 15px/1 'Chakra Petch',system-ui,sans-serif; letter-spacing:.14em; color:#f2f4f8; } .rd-appbar .rd-gtitle{ font:600 12px/1 'Inter Tight',system-ui,sans-serif; color:#8b93a8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rd-appbar .rd-ab-acts{ margin-left:auto; display:flex; align-items:center; gap:8px; } .rd-appbar .rd-ab-btn{ font:600 11px/1 'Inter Tight',system-ui,sans-serif; color:#c3cad9; border:1px solid #252a35; border-radius:5px; padding:7px 11px; cursor:pointer; white-space:nowrap; } .rd-appbar .rd-ab-btn:hover{ color:#f2f4f8; border-color:#3a4256; } .rd-appbar .rd-ab-btn.pri{ background:#f2b632; border-color:#f2b632; color:#1a1204; } .rd-appbar .rd-ab-btn .bx{ font-size:13px; vertical-align:-2px; } /* whiteboard record button — turns solid red while recording */ .rd-appbar .rd-ab-whiteboard.rd-ab-rec{ background:#e1261c !important; border-color:#e1261c !important; color:#fff !important; } .rd-appbar .rd-ab-whiteboard.rd-ab-rec .bx{ animation:rd-rec-blink 1s steps(1) infinite; } @keyframes rd-rec-blink{ 50%{ opacity:.35; } } /* whiteboard save-options popup → redesign dark theme (classic renders it white) */ body.rd-has-appbar .whiteboard-option-block{ background:#171a21 !important; color:#e6e9f0 !important; border:1px solid #282d37 !important; border-radius:12px !important; box-shadow:0 22px 60px rgba(0,0,0,.6) !important; } body.rd-has-appbar .whiteboard-option-block *{ color:#e6e9f0; } body.rd-has-appbar .whiteboard-option-block [class*="btn-whitebrd"], body.rd-has-appbar .whiteboard-option-block .whiteboard-save-option, body.rd-has-appbar .whiteboard-option-block button{ background:#20242d !important; color:#e6e9f0 !important; border:1px solid #2b313c !important; border-radius:8px !important; } body.rd-has-appbar .whiteboard-option-block [class*="btn-whitebrd"]:hover, body.rd-has-appbar .whiteboard-option-block button:hover{ border-color:#3a4256 !important; } body.rd-has-appbar .whiteboard-option-block .btn-save, body.rd-has-appbar .whiteboard-option-block [class*="save"]{ background:#e1261c !important; border-color:#e1261c !important; color:#fff !important; } .rd-appbar .rd-ab-av{ width:26px; height:26px; border-radius:50%; background:#293991; color:#fff; display:grid; place-items:center; font:700 11px/1 'Inter Tight',system-ui,sans-serif; overflow:hidden; position:relative; } .rd-appbar .rd-ab-av img{ width:100%; height:100%; object-fit:cover; border-radius:50%; grid-area:1/1; } .rd-appbar .rd-ab-av .rd-ab-av-txt{ display:none; grid-area:1/1; } /* the existing beta pill, re-homed into the header so it stops colliding */ .rd-appbar .rd-ab-slot{ display:inline-flex; align-items:center; } .rd-appbar .rd-homed-pill{ position:static !important; margin:0 !important; } /* §#4 top-bar actions — Export dropdown · SmartStats external-link · disabled Stats */ .rd-appbar .rd-ab-export{ position:relative; display:inline-flex; } .rd-appbar .rd-ab-avwrap{ position:relative; display:inline-flex; } .rd-appbar .rd-ab-avwrap .rd-ab-av{ cursor:pointer; } .rd-appbar .rd-ab-menu{ position:absolute; top:calc(100% + 6px); right:0; min-width:184px; z-index:100000; background:#171a21; border:1px solid #282d37; border-radius:8px; padding:5px; box-shadow:0 14px 34px rgba(0,0,0,.55); } .rd-appbar .rd-ab-menu[hidden]{ display:none; } .rd-appbar .rd-ab-menu a{ display:block; padding:8px 10px; border-radius:5px; font:600 11.5px/1.2 'Inter Tight',system-ui,sans-serif; color:#e6e9f0; text-decoration:none; white-space:nowrap; } .rd-appbar .rd-ab-menu a:hover{ background:#20242d; color:#fff; } .rd-appbar .rd-ab-smartstat{ display:inline-flex; align-items:center; gap:5px; } .rd-appbar .rd-ab-smartstat i{ font-size:12px; opacity:.85; } .rd-appbar .rd-ab-btn.rd-ab-off{ opacity:.4; cursor:not-allowed; } .rd-appbar .rd-ab-btn.rd-ab-off:hover{ color:#c3cad9; border-color:#252a35; } /* make room for the fixed header */ body.rd-has-appbar #main{ padding-top:48px; } /* §#3 — retire the persistent red tile strip (.game-btn-wrap). Game actions are in the top bar (#662); snip actions in the on-select footer below. Visually hidden but KEPT IN THE RENDER TREE (clip, not display:none) so the top-bar + footer proxies still fire the real handlers. */ .game-btn-wrap{ position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important; opacity:0 !important; pointer-events:none !important; margin:-1px !important; } /* the snip-panel footer — appears only when a snip is selected */ .rd-snip-footer{ position:fixed; left:64px; bottom:12px; z-index:8000; display:flex; align-items:center; gap:8px; background:#111318; border:1px solid #282d37; border-radius:10px; padding:8px 10px; box-shadow:0 16px 40px rgba(0,0,0,.55); } .rd-snip-footer[hidden]{ display:none; } .rd-snip-footer .rd-sf-lbl{ font:800 9px/1 'Chakra Petch',system-ui,sans-serif; letter-spacing:.1em; color:#5b6274; padding:0 6px 0 3px; cursor:move; } .rd-snip-footer .rd-sf-lbl::before{ content:"\2630"; margin-right:4px; opacity:.55; font-size:10px; } /* grip affordance */ .rd-snip-footer .rd-sf-btn{ font:600 11px/1 'Inter Tight',system-ui,sans-serif; color:#e6e9f0; background:#20242d; border:1px solid #282d37; border-radius:6px; padding:8px 11px; cursor:pointer; white-space:nowrap; } .rd-snip-footer .rd-sf-btn:hover{ background:#272c37; border-color:#3a4256; } .rd-snip-footer .rd-sf-del{ margin-left:14px; color:#ff8078; border-color:#5a2a2a; background:transparent; } .rd-snip-footer .rd-sf-del:hover{ background:rgba(225,38,28,.14); border-color:#e1483c; color:#ff8078; } .rd-snip-footer .rd-sf-addwrap{ position:relative; display:inline-flex; } .rd-snip-footer .rd-sf-addmenu{ position:absolute; bottom:calc(100% + 6px); left:0; min-width:170px; z-index:8001; background:#171a21; border:1px solid #282d37; border-radius:8px; padding:5px; box-shadow:0 14px 34px rgba(0,0,0,.55); } .rd-snip-footer .rd-sf-addmenu[hidden]{ display:none; } .rd-snip-footer .rd-sf-addmenu a{ display:block; padding:8px 10px; border-radius:5px; font:600 11.5px/1.2 'Inter Tight',system-ui,sans-serif; color:#e6e9f0; text-decoration:none; white-space:nowrap; } .rd-snip-footer .rd-sf-addmenu a:hover{ background:#20242d; color:#fff; } /* Chrome inc-2: left icon rail (fills the empty left gutter; board is at x132 so no shift). */ .rd-navrail{ position:fixed; left:0; top:48px; bottom:0; width:60px; z-index:99998; background:#14171f; border-right:1px solid #252a35; display:flex; flex-direction:column; padding:6px 0; gap:2px; overflow-y:auto; } .rd-navrail .rd-nav-item{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 2px; cursor:pointer; color:#8b93a8; border-left:2px solid transparent; } .rd-navrail .rd-nav-item:hover{ color:#c3cad9; background:#1a1e28; } .rd-navrail .rd-nav-item.on{ color:#f2f4f8; background:#1a1e28; border-left-color:#f2b632; } .rd-navrail .rd-nav-item.on i{ color:#f2b632; } .rd-navrail .rd-nav-item i{ font-size:19px; } .rd-navrail .rd-nav-item span{ font:600 8px/1 'Inter Tight',system-ui,sans-serif; letter-spacing:.04em; text-transform:uppercase; } body.rd-has-navrail .snipstabs{ display:none !important; } /* Hide the classic "Report stat snip" control (red circular R that pops in at the video's far left when a snip is selected) — it doesn't belong in the redesigned shell. Twin-only. */ body.rd-has-navrail .reportcoach-statsnip{ display:none !important; } /* Hide the classic yardline hover tooltip (Down / To Go / Yardline / Gain-Loss box) — the redesign surfaces this in the board + play-info bar instead. Twin-only. */ body.rd-has-navrail .bk-yardline-data{ display:none !important; } /* Hide the classic play-info text ("#Snip N - 3RD Down - 13 to go - Own23 - 10 yard gain") at the video's top-left — our .rd-playinfo bar replaces it and the classic text bled out around it. */ body.rd-has-navrail .football-stat-snip-info-container{ display:none !important; } /* The classic Exit link (→ backFromAdvancedplayer, position:absolute z-index 99999) landed on top of the appbar's Export button. Pin it to the far-right corner and shift the appbar actions left to make room. It stays functional (exits the player); the appbar pill handles "back to classic". */ body.rd-has-navrail .rd-appbar .rd-ab-acts{ margin-right:44px; } body.rd-has-navrail .exit-icon-block{ position:fixed !important; top:9px !important; right:14px !important; z-index:100000 !important; } body.rd-has-navrail .exit-icon-block .icon-exit{ color:#8b93a8; font-size:16px; } /* The board (.rd-boardwrap → #statFrame) spans full-width from x0, so the fixed rail (60px) covers its left edge: the LANES/LIST toggle, collections labels and first snip. Inset the board past the rail. box-sizing keeps the wrap at its own width (no right overflow); the inner scroll track just starts 64px in. The video is centred at x300 and needs no shift. */ body.rd-has-navrail .rd-boardwrap{ padding-left:64px; box-sizing:border-box; } /* Single-screen fit. The classic player lays the video/transport/board out with a JS-sized CSS grid (.main-video-section-p1, grid-template-rows in fixed px — e.g. "838px 46px 200px 0px", row 1 = video). Our 48px appbar pushes that viewport-tall grid down, so it overflows and the board falls below the fold; scrolling to reach it then slides the video's top under the fixed appbar. Fix: cap the grid to 100vh − appbar and make ROW 1 the flex row so it alone absorbs the header height — rows 2-4 keep the classic px values so the transport + board reserve their space. Then cap the (position:absolute) video box to the row-1 height and drop its top below the appbar so it isn't clipped. :not(.vjs-fullscreen) keeps the cap off the native fullscreen player. Twin-only. NOTE: the 46px/200px row values mirror the football grid; revisit if a sport ships a different one. */ body.rd-has-navrail .main-video-section-p1{ height:calc(100vh - 48px) !important; grid-template-rows:minmax(0,1fr) 46px 250px 0px !important; } body.rd-has-navrail .main-video-section-p1 .snip-inner-content, body.rd-has-navrail .main-video-section-p1 .embed-responsive-item.video-js:not(.vjs-fullscreen), body.rd-has-navrail .main-video-section-p1 .col-lg-10.col-12{ max-height:calc(100vh - 344px) !important; } body.rd-has-navrail .main-video-section-p1 .col-lg-10.col-12{ top:50px !important; } /* Chrome inc-3: play-info bar — the selected play's PLAY N · down&dist·spot · result, over the video top-left. */ .rd-playinfo{ position:fixed; top:58px; z-index:99997; display:flex; align-items:center; gap:7px; pointer-events:none; } .rd-playinfo .rd-pi-no{ background:#e1261c; color:#fff; font:700 11px/1 'Inter Tight',system-ui,sans-serif; border-radius:4px; padding:5px 9px; letter-spacing:.03em; } .rd-playinfo .rd-pi-sit{ background:rgba(20,23,31,.9); border:1px solid #252a35; color:#c3cad9; font:600 10px/1 'Inter Tight',system-ui,sans-serif; border-radius:4px; padding:5px 9px; } .rd-playinfo .rd-pi-res{ background:rgba(20,23,31,.9); border:1px solid #252a35; font:700 10px/1 'Chakra Petch',system-ui,sans-serif; border-radius:4px; padding:5px 9px; } /* customizable top data bar (retires the snip-data popup). The bar stays pointer-events:none so clicks pass to the video; only the interactive bits opt back in. */ .rd-playinfo .rd-pi-gear, .rd-playinfo .rd-pi-menu, .rd-playinfo .rd-pi-thumb{ pointer-events:auto; } .rd-playinfo .rd-pi-tags{ background:rgba(20,23,31,.9); border:1px solid #252a35; color:#9aa2b4; font:600 10px/1.3 'Inter Tight',system-ui,sans-serif; border-radius:4px; padding:5px 9px; max-width:46vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rd-playinfo .rd-pi-thumb{ display:inline-flex; width:26px; height:26px; border-radius:4px; overflow:hidden; border:1px solid #252a35; background:#0e1116; cursor:pointer; flex:none; } .rd-playinfo .rd-pi-thumb img{ width:100%; height:100%; object-fit:cover; display:block; } /* playbook image lightbox (the "tap to expand" target) */ .rd-pi-lightbox{ position:fixed; inset:0; z-index:100001; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.82); } .rd-pi-lightbox[hidden]{ display:none; } .rd-pi-lb-inner{ position:relative; max-width:92vw; max-height:92vh; } .rd-pi-lb-img{ max-width:92vw; max-height:92vh; border-radius:8px; box-shadow:0 12px 48px rgba(0,0,0,.6); display:block; } .rd-pi-lb-x{ position:absolute; top:-14px; right:-14px; width:32px; height:32px; border-radius:50%; border:none; background:#e1261c; color:#fff; font-size:20px; line-height:1; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.5); } .rd-pi-lb-x:hover{ background:#c21f16; } .rd-playinfo .rd-pi-gear{ cursor:pointer; color:#8b93a8; background:rgba(20,23,31,.9); border:1px solid #252a35; border-radius:4px; padding:4px 7px; font-size:12px; line-height:1; } .rd-playinfo .rd-pi-gear:hover{ color:#fff; } .rd-playinfo .rd-pi-menu{ position:absolute; top:34px; right:0; background:#14171f; border:1px solid #2b313c; border-radius:8px; padding:8px 10px; min-width:172px; box-shadow:0 10px 28px rgba(0,0,0,.55); } .rd-playinfo .rd-pi-menu[hidden]{ display:none; } .rd-playinfo .rd-pi-mh{ font:700 9px/1 'Inter Tight',system-ui,sans-serif; letter-spacing:.1em; color:#6f7789; margin-bottom:6px; } .rd-playinfo .rd-pi-mi{ display:flex; align-items:center; gap:6px; font:600 11px/1.7 'Inter Tight',system-ui,sans-serif; color:#c3cad9; cursor:pointer; } .rd-playinfo .rd-pi-mi input{ accent-color:#e1261c; margin:0; } .rd-playinfo .rd-pi-cfs{ margin:2px 0 2px 12px; padding-left:6px; border-left:1px solid #2b313c; } .rd-playinfo .rd-pi-cfs[hidden]{ display:none; } .rd-playinfo .rd-pi-mdiv{ height:1px; background:#252a35; margin:6px 0; } /* retire the classic snip-data accordion popup — the top bar carries the data now; comment editing stays reachable via the snip footer's Edit frame (#edit-bk-optiondiv). */ body.rd-has-appbar .snip-palette{ display:none !important; } /* Chrome inc-4: cameras panel — CAMERAS header (JS), a gold DEFAULT badge on the game-default tile, and a "THIS SNIP OPENS IN ★ [cam] Change" footer. Restyles the classic .video-shots tiles in place; the JS adds .rd-cams / the badge / the footer, and Change toggles .rd-cam-picking. */ /* Clean tile cards — thumbnail + title, rounded, bordered; the classic clutter (edit/delete/star action row, the green .saveFrame + .set-my-preferred-view corner stars) is hidden until hover so the wiring stays reachable without looking like the old panel. */ /* §#11 — ONE column, compact horizontal tiles (50px thumb + name row); ends the 2-col overflow */ .video-shots.rd-cams{ display:block !important; } .video-shots.rd-cams .snip-shot.loadFrames{ position:relative !important; width:100% !important; height:auto !important; display:flex !important; align-items:center !important; gap:9px !important; cursor:pointer !important; /* whole row switches view */ margin:0 0 6px 0 !important; padding:5px 7px 5px 5px !important; border-radius:7px !important; overflow:visible !important; background:#14171f !important; border:1px solid #252a35 !important; box-shadow:none !important; } .video-shots.rd-cams .snip-shot.loadFrames:hover{ border-color:#3a4256 !important; } .video-shots.rd-cams .snip-shot.loadFrames:nth-child(odd){ margin-right:0 !important; } .video-shots.rd-cams .snip-shot.loadFrames img{ width:50px !important; height:38px !important; object-fit:cover !important; display:block !important; margin:0 !important; border-radius:4px !important; flex:none !important; } .video-shots.rd-cams .snip-shot.loadFrames .cam-title{ flex:1 1 auto !important; min-width:0 !important; padding:0 !important; margin:0 !important; background:transparent !important; font:600 10px/1.15 'Inter Tight',system-ui,-apple-system,sans-serif !important; color:#c3cad9 !important; text-align:left !important; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* DEFAULT badge → inline on the name row (no longer floats over a full-width thumb) */ .rd-cam-default{ position:static !important; flex:none; z-index:5; background:#f2b632; color:#1a1204; font:800 8px/1 'Inter Tight',system-ui,-apple-system,'Segoe UI',Arial,sans-serif; letter-spacing:.06em; padding:3px 5px; border-radius:3px; } /* §#12 — per-tile ⋯ opens the classic edit / delete / set-default as a menu */ .video-shots.rd-cams .rd-cam-menu{ flex:none; cursor:pointer; color:#8b93a8; padding:0 4px; font-size:16px; line-height:1; user-select:none; } .video-shots.rd-cams .rd-cam-menu:hover{ color:#f2f4f8; } .video-shots.rd-cams .snip-shot.loadFrames .session-actions{ position:absolute !important; top:calc(100% - 2px) !important; right:6px !important; left:auto !important; bottom:auto !important; width:auto !important; margin:0 !important; padding:4px !important; display:none !important; flex-direction:column !important; gap:1px !important; z-index:80 !important; min-width:130px !important; background:#171a21 !important; border:1px solid #282d37 !important; border-radius:7px !important; box-shadow:0 12px 30px rgba(0,0,0,.55) !important; opacity:1 !important; } .video-shots.rd-cams .snip-shot.loadFrames.rd-menu-open .session-actions{ display:flex !important; } .video-shots.rd-cams .session-actions .action-item{ display:flex !important; align-items:center !important; gap:9px !important; padding:7px 10px !important; border-radius:5px !important; opacity:1 !important; cursor:pointer !important; white-space:nowrap !important; margin:0 !important; } .video-shots.rd-cams .session-actions .action-item:hover{ background:#20242d !important; } .video-shots.rd-cams .session-actions .action-item a{ color:inherit !important; display:inline-flex !important; align-items:center !important; gap:9px !important; padding:0 !important; margin:0 !important; } .video-shots.rd-cams .session-actions .action-item i{ width:13px !important; text-align:center !important; font-size:11px !important; color:#8b93a8 !important; } .video-shots.rd-cams .session-actions .del-session-wrap:hover i{ color:#e1483c !important; } .video-shots.rd-cams .session-actions .rd-ca-lbl{ font:600 11px/1 'Inter Tight',system-ui,sans-serif !important; color:#e6e9f0 !important; } /* the classic ".set-my-preferred-view" corner star is an in-memory-only floater that covered the ⋯ — hide it. The real default flow is the footer "Change" → pick a view (fires .saveFrame) + the ⋯ "Set default". */ .video-shots.rd-cams .snip-shot.loadFrames .set-my-preferred-view{ display:none !important; } /* §2.3 — camera rail header actions (Play all angles / Compare angles) */ .video-shots.rd-cams .rd-cam-actions{ display:flex; gap:6px; margin:0 0 9px; } .video-shots.rd-cams .rd-cam-act{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:7px 6px; border:1px solid #282d37; background:#171a21; border-radius:6px; cursor:pointer; white-space:nowrap; font:700 8.5px/1 'Inter Tight',system-ui,sans-serif; color:#c3cad9; letter-spacing:.04em; text-transform:uppercase; } .video-shots.rd-cams .rd-cam-act:hover{ border-color:#3a4256; color:#fff; } .video-shots.rd-cams .rd-cam-act i{ font-size:10px; } .video-shots.rd-cams .rd-cam-act.rd-off{ opacity:.4; cursor:not-allowed; } .video-shots.rd-cams .rd-cam-act.rd-off:hover{ border-color:#282d37; color:#c3cad9; } .rd-cam-footer{ display:block; clear:both; width:100%; margin:8px 0 0; padding:9px 10px; box-sizing:border-box; background:#14171f; border:1px solid #252a35; border-radius:7px; } .rd-cam-footer .rd-cf-lbl{ font:700 8px/1 'Inter Tight',system-ui,-apple-system,sans-serif; letter-spacing:.08em; color:#5b6274; margin-bottom:6px; } .rd-cam-footer .rd-cf-row{ display:flex; align-items:center; gap:7px; } .rd-cam-footer .rd-cf-row i{ color:#e1261c; font-size:11px; } .rd-cam-footer .rd-cf-cam{ font:700 11px/1 'Inter Tight',system-ui,sans-serif; color:#f2f4f8; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rd-cam-footer .rd-cf-change{ font:600 10px/1 'Inter Tight',system-ui,sans-serif; color:#c3cad9; background:transparent; border:1px solid #3a4256; border-radius:5px; padding:5px 9px; cursor:pointer; white-space:nowrap; } .rd-cam-footer .rd-cf-change:hover{ color:#fff; border-color:#5b6478; } /* Change → pick mode: every tile is an obvious click target to set the default view */ .video-shots.rd-cam-picking .snip-shot.loadFrames{ box-shadow:inset 0 0 0 2px #e1261c !important; cursor:pointer !important; } .video-shots.rd-cam-picking .snip-shot.loadFrames:hover{ background:#20242d !important; } .video-shots.rd-cam-picking .rd-cam-menu{ pointer-events:none !important; opacity:.25 !important; } /* don't let ⋯ steal the pick click */ .video-shots.rd-cam-picking .rd-cam-footer .rd-cf-change{ background:#e1261c; border-color:#e1261c; color:#fff; } /* Change is now "click a view…" */ /* §#4 — retire the full-width HIGHLIGHTS & WHITEBOARDS red slab; REELS in the collections rail opens the same popup (player-redesign_opt.js wires the rail item to #hightlight-popup-button). */ #hightlight-popup-button{ display:none !important; } /* Remove the OLD bar row below the transport: the redundant blue "Entire Game Video" bar (the game name is in the top bar now) + the red highlight-reel bar (folded into the REELS collections-rail item). The board sits directly under the transport instead. */ .entire-game-video{ display:none !important; } [class*="highlight-reel-div"]{ display:none !important; } /* TRANSPORT (increment 1) — strip the native vjs skin to a clean thin scrubber TRACK (its seek is reused, verified working), and show the real #playpause as the gold play button (it was display:none — the A1.1 defect). The dup remaining-time clock is gone; the one clock is #video-time. Play verified live. */ .vjs-control-bar .vjs-play-control, .vjs-control-bar .vjs-volume-panel, .vjs-control-bar .vjs-remaining-time{ display:none !important; } /* FULLSCREEN — the redesign uses video.js's OWN fullscreen (the classic $(document).fullScreen reflows the classic layout, which fights the redesign chrome). The custom redesign transport isn't inside the fullscreened