/* ══════════════════════════════════════════════════════════════════════ DeepReview — Unified Review screen styling. A faithful port of the design system's "Unified Review" mockup, layered on top of the shared styles.css. Loaded ONLY by review.html, so every rule here is review-scoped (including the :root token redefinitions). Strategy: the design's token palette is defined below AND the app's older token names are aliased onto it (--panel→--surface, --muted→ --text-muted, --kill→--green, …). That makes the existing review CSS in styles.css adopt the indigo/slate design palette automatically; the component rules here then refine the structure to match the mockup. Behavioural customisations (timeline row heights, click-top-seeks / click-bottom-edits phase cards, HP-from-start, CS removed) are kept. ══════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Spline+Sans+Mono:wght@400;500;600&display=swap'); :root { /* ── Design palette ─────────────────────────────────────────────── */ --indigo-200: #c7c7f5; --indigo-300: #a5a5f0; --indigo-400: #8080ea; --indigo-500: #5e5ee2; --indigo-600: #4444d4; --indigo-700: #3636b0; --slate-950: #0c0d13; --slate-900: #14151e; --slate-850: #1b1d29; --slate-border: #292c3c; --slate-border-strong: #363a4e; --slate-hover: #252839; --slate-400: #8b8fa6; --slate-100: #e7e9f2; --green: #4dd17a; --gold: #f0c244; --red: #ff5d5d; --cyan: #00d4d4; --note-purple: #b173ff; --note-blue: #4ea1ff; --note-green: #4dd17a; /* Objectives read PINK everywhere (neutrals were purple, too close to the fights' purple). Fights keep --note-purple; only objectives use this. */ --obj-pink: #ff5db1; --note-gold: #f0c244; --note-orange: #ff8a4c; --note-red: #ff5d5d; --note-pink: #ff7ec0; --note-teal: #00d4d4; --note-gray: #a8b3c4; --note-white: #e6e9ef; /* Surfaces / borders / text (design semantic aliases) */ --bg: var(--slate-950); --surface: var(--slate-900); --surface-raised: var(--slate-850); --surface-hover: var(--slate-hover); --border: var(--slate-border); --border-strong: var(--slate-border-strong); --text: var(--slate-100); --text-muted: var(--slate-400); --text-faint: #5c6075; --brand: var(--indigo-600); --brand-hover: var(--indigo-500); --accent: var(--indigo-400); --accent-soft: rgba(68, 68, 212, 0.14); --accent-border: rgba(96, 96, 226, 0.45); --overlay: rgba(8, 9, 14, 0.62); /* Motion + elevation (design tokens; ledger.css carries the same values) */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 0.1s; --transition-colors: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.6); /* Fonts */ --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Text surfaces that can hold inline annotation refs: the sans stack behind the editor ▣ face (styles.css), whose 0.9em gap plus the digits is what the mirror's painted `[n]` needs. */ --font-edit: "DR Anno Ref Edit", var(--font-sans); /* ── Alias the app's older token names onto the design palette ───── */ --panel: var(--surface); --panel-2: var(--surface-raised); --muted: var(--text-muted); --kill: var(--green); --assist: var(--gold); --death: var(--red); --note: var(--note-purple); } body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } .mono, .subtle .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } button { font-family: inherit; } /* Shared button restyle (scoped to review page) */ button, .btn { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 6px; transition: background-color .1s, border-color .1s, color .1s; } button:hover, .btn:hover { background-color: var(--surface-hover); border-color: var(--border-strong); } .primary, button.primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; } .primary:hover, button.primary:hover { background-color: var(--brand-hover); border-color: var(--brand-hover); } .subtle { color: var(--text-muted); } /* ════════════════════════════════════════════════════════════════════ HEADER ════════════════════════════════════════════════════════════════════ */ /* The top bar IS the window titlebar now: a split deck — 24px system strip (titlebar.css owns it; it's the Tauri drag region) over the 36px game-context toolbar. Docked full-width, flush with the window top — bottom hairline only, with 10px of page background above the middle row (matching the middle↔timeline row-gap). */ .header { /* align-items/justify-content reset the base .header rule (styles.css) — its align-items:center would shrink the column's children to content width instead of stretching them across the deck. */ display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 0; flex: none; background: var(--surface); border: none; border-bottom: 1px solid var(--border); margin: 0 0 10px; } .header .tb-toolbar { padding: 0 12px 0 10px; gap: 10px; } .header .back { /* min-width keeps the hit target honest when the label is short (the pool viewer's "‹ vods") — the button must not shrink to the word. Centered so a short label sits mid-button; "‹ library" already fills past the min. */ display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 13px; min-width: 94px; border: 1px solid var(--border); background: var(--surface-raised); color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; font-weight: 600; white-space: nowrap; flex: none; } .header .back:hover { border-color: var(--accent-border); color: var(--text); text-decoration: none; } /* Load-failure screen's escape hatch (the header back stays too — same look). */ .err-back { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; height: 30px; padding: 0 13px; min-width: 94px; border: 1px solid var(--border); background: var(--surface-raised); color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; font-weight: 600; white-space: nowrap; letter-spacing: .02em; } .err-back:hover { border-color: var(--accent-border); color: var(--text); text-decoration: none; } /* Multi-POV switcher (pool VODs with more than one uploader in the game): one champion tile per POV with its F-key, allies underlined accent, enemies red, the POV being watched outlined. */ .header .pov-bar { display: flex; align-items: center; gap: 4px; flex: none; } .header .pov-lab { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: .02em; margin-right: 4px; white-space: nowrap; } .header .pov-lab .caret { color: var(--text-faint); margin-left: 4px; } .header .pov-btn { position: relative; width: 28px; height: 28px; padding: 0; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: var(--surface-raised); color: var(--text-muted); cursor: pointer; transition: border-color .1s, box-shadow .1s; } .header .pov-btn img { width: 100%; height: 100%; object-fit: cover; display: block; } .header .pov-btn .pov-ph { font-family: var(--font-mono); font-size: 12px; font-weight: 600; } .header .pov-btn kbd { position: absolute; right: -1px; bottom: -1px; padding: 1px 2px; font: 600 8px/1 var(--font-mono); color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); } .header .pov-btn.ally { box-shadow: inset 0 -2px 0 var(--accent); } .header .pov-btn.enemy { box-shadow: inset 0 -2px 0 var(--red); } .header .pov-btn:hover { border-color: var(--accent-border); } .header .pov-btn.on { border-color: var(--accent); } .header .pov-btn.on kbd { color: var(--accent); border-color: var(--accent-border); } /* Clock-sync mark (top-left square): green = frame-synced; gold = only the Live Client's start anchor (±1–2 s) or a hand-set offset — the POV that will read seconds off the others in a fight review. Absent while unknown. */ .header .pov-btn .pov-sync { position: absolute; left: -1px; top: -1px; width: 7px; height: 7px; background: var(--gold); border: 1px solid var(--bg); pointer-events: none; } .header .pov-btn[data-sync="exact"] .pov-sync, .header .pov-btn[data-sync="manual"] .pov-sync { background: var(--green); } /* Last frame of the outgoing POV, held over the stage until the incoming one has seeked — a switch never shows black. */ /* POV standbys: full-size invisible siblings of #video (also inside the theater host) — adoption is a class flip, never a resize or reload. */ video.pov-standby { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0 !important; pointer-events: none !important; z-index: 0; } /* The incoming POV's warm standby, shown over the stage from the moment it has seeked until the main element has caught up — the switch never renders a decoder-teardown black frame, and never depends on canvas frame capture. */ /* Champion badge — square, hidden until the match is known. */ .header .rv-champ { width: 24px; height: 24px; object-fit: cover; background: var(--bg); border: 1px solid var(--border); flex: none; } .header .rv-champ[hidden] { display: none; } .header h1 { font-size: 14px; font-weight: 700; margin: 0; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; min-width: 0; flex: none; } .header .crumbs { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; } .crumbs .res-win { color: var(--green); font-weight: 700; } .crumbs .res-loss { color: var(--red); font-weight: 700; } .crumbs .sep { color: var(--text-faint); } .crumbs .kda { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .crumbs .kda .k { color: var(--text); } .crumbs .kda .d { color: var(--red); } .crumbs .kda .a { color: var(--text-muted); } .crumbs .kda .slash { color: var(--text-faint); } .crumbs .mono { color: var(--text); } .header .hdr-spacer { flex: 1; } /* Save read-out — mono 12px; the bracket chrome comes from the global .save instrument-tag rules further down. */ .header .save { font-size: 12px; font-weight: 600; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .header .save .save-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); } /* ════════════════════════════════════════════════════════════════════ LAYOUT — video + side, full-width timeline below ════════════════════════════════════════════════════════════════════ */ /* Column widths, side padding and the gaps around the video are computed by layoutVideoPane() (review.js) from the video's native aspect ratio — the values here are the no-JS defaults. Height subtracts the header deck's full vertical footprint: 74px docked deck (33px strip incl. its rule + 40px toolbar + 1px bottom hairline) + 10px bottom margin. No top padding (the middle windows grow up to the header's 10px margin); 6px bottom padding = the timeline's gap to the screen bottom. Gaps read as the app background, never the black page backdrop. */ .review-layout { position: relative; /* anchors the load overlay */ flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 408px; grid-template-rows: 1fr auto; row-gap: 10px; column-gap: 0; padding: 0; height: calc(100dvh - 84px); background: var(--bg); } /* ── Public web viewer (deepreview.lol/vods/) ────────────────────── Its layout + chrome overrides are NOT here. They are inlined into the page head by relay-server/lib/vods-web.js, because this file is a separately-cached asset: a visitor holding an older copy of it would fall back to the calc() height above and get a dead strip under the timeline, which is exactly what happened twice. Anything that must be in step with the served markup belongs with the markup. */ /* Full-content loading state while the review fetches (review.js removes it). */ .review-loading { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: var(--bg); } /* min-width 0 keeps the pane inside its grid track (the default min-width:auto would let the fixed-width video column blow the layout out to the right). */ .video-pane { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; background: var(--bg); } .notes-pane { grid-column: 2; grid-row: 1; border-left: 1px solid var(--border); min-height: 0; display: flex; flex-direction: column; background: var(--surface); position: relative; } /* Docked: the strip runs edge to edge and sits on the window's bottom edge, the way the header deck sits on its top. The side insets layoutVideoPane() computes belong to the middle row only (margins on the two panes). */ .timeline-pane { grid-column: 1 / 3; grid-row: 2; } /* Middle row: empty window on the left + the video player pinned to the right. The vp-split gap (left window ↔ video) and the grid column-gap (video ↔ notes) are kept equal by layoutVideoPane(); the left window absorbs the rest of the slack via flex:1. */ .video-pane .vp-split { flex: 1; min-height: 0; min-width: 0; display: flex; gap: 10px; } .vp-window { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); } .vp-window-body { flex: 1; min-height: 0; } /* The player column: JS sets its width to the frame's exact width, so the control bar spans the frame and their corners line up. */ .vp-right { flex: none; display: flex; flex-direction: column; min-height: 0; max-width: 100%; } .vp-right .video-stage { align-items: center; justify-content: center; } /* One line always — a wrapping control bar would change the column height and make the frame fit oscillate. */ .vp-right .video-controls { flex-wrap: nowrap; } /* ── Video stage ─────────────────────────────────────────────────── */ .video-stage { position: relative; background: #000; overflow: hidden; flex: 1; min-height: 0; display: flex; } /* Letterbox bars (object-fit:contain leaves the unused area) are pitch black — still the video element itself, so clicks on the bars still hit the video. */ #video { width: 100%; height: 100%; object-fit: contain; background: #000; } .video-controls { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--surface); border-top: 1px solid var(--border); flex: none; } .vc-btn:not([hidden]) { min-width: 31px; height: 31px; padding: 0 9px; border: 1px solid var(--border); background: var(--surface-raised); color: var(--text-muted); border-radius: 6px; font-family: var(--font-mono); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; } .vc-btn:hover { border-color: var(--border-strong); color: var(--text); background: var(--surface-raised); } .vc-btn.vc-play { background: var(--brand); border-color: var(--brand); color: #fff; width: 40px; } /* Solid Glyph transport faces: the skip icons carry their number inside the ring. */ .vc-btn svg { display: block; } .vc-ico { position: relative; display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; } .vc-ico > b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-top: 1px; font: 700 6.5px var(--font-mono); letter-spacing: -.05em; } .vc-btn#clipBtn { display: inline-flex; align-items: center; gap: 5px; } .vc-btn.vc-play:hover { background: var(--brand-hover); } /* #drawBtn deliberately has no special styling — it's always usable, so the old accent "glow" just made it look like a toggled state that wasn't. */ .vc-time { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-left: 4px; } .vc-spacer { flex: 1; } .vc-select { height: 31px; padding: 0 9px; border: 1px solid var(--border); background: var(--surface-raised); color: var(--text); border-radius: 6px; font-family: var(--font-mono); font-size: 12px; } /* ── Drawing toolbar (handoff 17 rework) ────────────────────────────── Lives in .video-controls and overlays the transport while drawing; relocated into the theater controls (.dt-theater) in fullscreen. Overrides the legacy top-center placement from styles.css. */ .video-controls { position: relative; } .draw-bar { position: absolute; left: 0; right: 0; bottom: 0; top: auto; height: max-content; /* At least the transport's own height, and the same padding around the same 31px buttons (.video-controls / .vc-btn): the bar then REPLACES the transport edge for edge instead of sitting 3px short of it with the transport peeking out above. Bottom-anchored so a wrapped second row still grows upward over the video. */ min-height: 100%; box-sizing: border-box; transform: none; z-index: 8; border-radius: 0; box-shadow: none; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; row-gap: 6px; padding: 8px 12px; background: var(--surface); border: none; border-top: 1px solid var(--border); backdrop-filter: none; } .draw-bar[hidden] { display: none; } /* ── Clip toolbar ───────────────────────────────────────────────────── Same trick as .draw-bar: an opaque absolute sibling that paints over the transport. The covered controls are made inert while a bar is up (setTransportCovered in review.js), so they're not clickable or focusable underneath. */ .clip-bar { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--surface); box-sizing: border-box; } .clip-bar[hidden] { display: none; } .clip-bar .cb-lab { flex: none; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--accent); } .clip-bar .cb-keys { flex: 1; min-width: 0; overflow: hidden; display: flex; gap: 12px; align-items: center; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); white-space: nowrap; } .clip-bar .cb-keys > span { display: inline-flex; align-items: center; gap: 5px; } .cb-k { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border-strong); border-bottom-width: 2px; padding: 1px 5px; line-height: 1.4; } .clip-bar .cb-btn { flex: none; height: 36px; padding: 0 16px; background: var(--surface-raised); border: 1px solid var(--border); color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; transition: var(--transition-colors); } .clip-bar .cb-btn:hover { background: var(--surface-hover); } .clip-bar .cb-btn.primary { padding: 0 18px; background: var(--brand); border-color: var(--brand); color: #fff; display: inline-flex; align-items: center; gap: 7px; } .clip-bar .cb-btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); } .clip-bar .cb-btn.primary .cb-k { color: rgba(255, 255, 255, .85); background: rgba(0, 0, 0, .22); border-color: rgba(255, 255, 255, .3); } /* The ✂ Clip transport button, lit while clip mode holds the bar. */ #clipBtn.tool-active { background: var(--brand); border-color: var(--brand); color: #fff; } /* Header chip — stands in for the Saved pill while clipping. */ .clip-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .02em; background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--accent); } .clip-chip[hidden] { display: none; } .draw-bar .dgrp { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; } .draw-bar .dsep { width: 1px; height: 22px; background: var(--border); margin: 0 1px; flex: none; } /* Consistent tool buttons: line-art icon + keybind badge. */ .dtool { /* 31px like .vc-btn, so a tool sits exactly where a transport button did. */ height: 31px; min-width: 31px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-raised); color: var(--text-muted); font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; } .dtool:hover { color: var(--text); border-color: var(--text-muted); } .dtool.on { color: var(--accent); border-color: var(--accent); background: rgba(78,161,255,.12); } .dtool.dsave { background: var(--accent); border-color: var(--accent); color: #0e1015; padding: 0 10px; flex: none; } .di { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; } .dk { font-family: var(--font-mono); font-size: 9px; font-weight: 700; line-height: 1; padding: 2px 4px; border: 1px solid currentColor; border-radius: 3px !important; opacity: .55; } .dtool.on .dk { opacity: .85; } .dtool.dsave .dk { opacity: .7; border-color: rgba(14,16,21,.55); } .draw-bar #drawCancel { margin-left: auto; } .dsw { width: 19px; height: 19px; border-radius: 5px; border: 1px solid rgba(255,255,255,.18); cursor: pointer; } .dsw.on { outline: 2px solid #fff; outline-offset: 1px; } /* Current-color / current-size buttons with popups above the bar. */ .dcolor, .dsize { position: relative; } .dcolor-current, .dsize-current { height: 31px; width: 31px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-raised); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .dcolor-current:hover, .dsize-current:hover { border-color: var(--text-muted); } .dcolor-dot { width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28); } .dcolor-pop { position: absolute; left: 0; bottom: calc(100% + 8px); display: grid; grid-template-columns: repeat(5, 19px); gap: 6px; padding: 8px; background: rgba(20,21,30,.98); border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 -12px 40px -16px rgba(0,0,0,.85); z-index: 9; } .dcolor-pop[hidden] { display: none; } .dsize-dot { border-radius: 50% !important; background: var(--text-muted); display: block; } .dsize-pop { position: absolute; left: 0; bottom: calc(100% + 8px); display: flex; align-items: center; gap: 4px; padding: 6px 8px; background: rgba(20,21,30,.98); border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 -12px 40px -16px rgba(0,0,0,.85); z-index: 9; } .dsize-pop[hidden] { display: none; } /* padding:0 is load-bearing: the global `button` rule (styles.css) supplies `padding: 8px 14px`, and under border-box that ate this button's ENTIRE 30px of width (30 - 2 border - 28 padding = 0), so every size dot rendered 0px wide — five empty boxes. Any fixed-size icon button here needs the reset. */ .dsize-opt { width: 30px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .dsize-opt:hover { background: rgba(255,255,255,.08); } .dsize-opt.on { border-color: var(--accent); background: rgba(78,161,255,.12); } .dsize-opt span { border-radius: 50% !important; background: var(--text); display: block; } .draw-readout { font-family: var(--font-mono); font-size: 11px; color: var(--cyan); background: rgba(12,13,19,.8); border: 1px solid rgba(0,212,212,.5); border-radius: 5px; padding: 2px 6px; } /* Compact strip while the toolbar is hosted in the theater controls, where it simply takes the transport row's place. Kept at the SAME height as that row (no vertical padding, no border, no panel of its own) and the scrubber stays visible above it, so entering and leaving draw mode never changes the control bar's height — the frame underneath never moves. */ /* position: relative, NOT static — layout-identical (no offsets), but it makes the bar the offset parent its popups assume. Static handed them to .th-controls, so they opened at the far LEFT of the whole bar instead of under their button. */ .draw-bar.dt-theater { position: relative; left: auto; right: auto; bottom: auto; height: 32px; width: fit-content; margin: 0 auto; padding: 0; border: none; background: none; backdrop-filter: none; justify-content: center; align-items: center; flex-wrap: nowrap; gap: 6px; } /* …and the control bar has to out-rank the draw canvas while it hosts the toolbar. The popups open UPWARD, over the video, where .draw-layer (z 5) sits; .th-controls is z 3, so the popup was painted UNDER a transparent canvas — you could see it and every click on it drew a stroke instead. */ .theater.drawing .th-controls { z-index: 6; } .draw-bar.dt-theater .dtool { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.82); } .draw-bar.dt-theater .dtool:hover { background: rgba(255,255,255,.14); } .draw-bar.dt-theater .dtool.on { color: var(--accent); border-color: var(--accent); background: rgba(78,161,255,.16); } .draw-bar.dt-theater .dtool.dsave { background: var(--accent); border-color: var(--accent); color: #06131f; } .draw-bar.dt-theater .dsep { background: rgba(255,255,255,.18); } .draw-bar.dt-theater #drawCancel { margin-left: 0; } /* ════════════════════════════════════════════════════════════════════ TIMELINE — keeps the app's row heights (30 / 72 / 32) + behaviour ════════════════════════════════════════════════════════════════════ */ /* user-select: none — a drag on the strip scrubs the playhead; without it the drag selected the header/label text around the timeline instead. */ .timeline-pane { padding: 0 16px 7px; background: var(--surface); border: 0; border-top: 1px solid var(--border); flex: none; user-select: none; } /* ── Timeline header (game clock · gold + drakes · pit timers · scope · visibility) ── */ .timeline-header { position: relative; display: flex; align-items: center; gap: 12px; height: 44px; margin: 0 -16px 9px; padding: 0 10px 0 12px; border-bottom: 1px solid var(--border); } .tl-vr { flex: none; width: 1px; height: 26px; background: var(--border); } .tl-clockwrap { flex: none; position: relative; display: flex; align-items: center; gap: 8px; } .tl-clock { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 26px; padding: 0; background: var(--surface-raised); border: 1px solid var(--border); color: var(--text-muted); font-family: var(--font-mono); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; } .tl-clock:hover { background: var(--surface-raised); border-color: var(--accent-border); } .tl-clock.on { border-color: var(--accent-border); } /* Read-only reviews (pool VODs, the coach POV): the clock still reads, never opens. */ .tl-clock.ro { cursor: default; } .tl-clock.ro:hover { border-color: var(--border); } /* Opens UPWARD — the header sits at the bottom of the screen. */ .tl-offpop { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 60; width: 250px; padding: 11px; background: var(--surface-raised); border: 1px solid var(--border-strong); box-shadow: 0 10px 28px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 9px; } .tl-offpop[hidden] { display: none; } .tl-offpop-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; color: var(--text-muted); } .tl-offpop-head i { flex: 1; height: 1px; background: var(--border); } .tl-offpop-len { color: var(--text-faint); font-variant-numeric: tabular-nums; } .tl-offpop-len span { color: var(--text-muted); } .tl-offpop p { margin: 0; font-family: var(--font-sans); font-size: 11px; line-height: 1.4; color: var(--text-muted); } .tl-offpop-row { display: flex; gap: 6px; } .tl-offpop-row button { height: 28px; padding: 0; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: var(--font-mono); font-size: 13px; cursor: pointer; } .tl-offpop-row button:hover { background: var(--surface); border-color: var(--accent-border); } .tl-offpop-step { width: 30px; } .tl-offpop-val { flex: 1; display: flex; align-items: center; justify-content: center; height: 28px; background: var(--surface); border: 1px solid var(--border); font-family: var(--font-mono); font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; } .tl-offpop-row .tl-offpop-ghost { flex: 1; height: 26px; padding: 0 8px; font-size: 10px; white-space: nowrap; color: var(--text-muted); } .tl-offpop-row .tl-offpop-ghost:hover { color: var(--text); } .tl-offpop-row .tl-offpop-done { height: 26px; padding: 0 12px; background: var(--brand); border-color: var(--brand); color: #fff; font-size: 10px; } .tl-offpop-row .tl-offpop-done:hover { background: var(--brand-hover); border-color: var(--brand-hover); } .tl-mid { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding-left: 10px; } .tl-gold { flex: none; width: 46px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .tl-gold.b { text-align: right; } /* Under ~860px of header the gold figures give way to the drakes (design breakpoint). */ .timeline-header.narrow .tl-gold { display: none; } .tl-dots { flex: none; display: flex; align-items: center; gap: 5px; } .tl-dots i { width: 10px; height: 10px; box-sizing: border-box; border-radius: 50% !important; background: transparent; border: 1px solid rgba(231,233,242,.24); } .tl-vs { flex: none; font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); } .tl-objs { flex: none; display: flex; align-items: center; gap: 14px; white-space: nowrap; } .tl-obj { display: flex; align-items: baseline; gap: 7px; } .tl-obj-dot { flex: none; width: 6px; height: 6px; border-radius: 50% !important; background: rgba(231,233,242,.2); } /* Fixed boxes: the label (drake/elder, grubs/herald/baron) and the value (m:ss, up) change width as they tick, and the whole row used to shuffle with them. */ .tl-obj-lbl { width: 6ch; flex: none; font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; color: var(--text-muted); } .tl-obj-val { width: 6ch; flex: none; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; } .tl-obj-val.na { color: var(--text-muted); } .tl-right { flex: none; display: flex; align-items: center; gap: 8px; } .view-toggle { display: inline-flex; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 6px; padding: 2px; gap: 2px; } .view-btn { background: transparent; border: none; border-radius: 4px; color: var(--text-muted); font-size: 11px; font-weight: 600; padding: 4px 11px; } .view-btn.active { background: var(--brand); color: #fff; } .view-btn:disabled { opacity: .4; cursor: default; } /* overflow: visible so the death rails can hang off the bottom edge (they latch ONTO that line — see .gt-dead). Nothing else needs the clip: visibleRange() already clamps bars to 0..100%, and the squared/telemetry reset zeroes the radius, so there are no rounded corners left to clip against. */ .timeline-track { position: relative; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); overflow: visible; } /* ── Zoom bar under the strip ───────────────────────────────────────── Inset to the lane tracks (74px label + the strip's 1px border; the border alone on the right) so the thumb's edges sit under the instants they stand for. */ .tl-zoom { margin-top: 3px; padding: 0 1px 0 75px; } .tlz-track { position: relative; height: 10px; background: var(--bg); border: 1px solid var(--border); touch-action: none; } .tlz-thumb { position: absolute; top: 0; bottom: 0; min-width: 16px; background: rgba(255,255,255,.09); cursor: grab; } .tlz-thumb:hover, .tl-zoom.drag .tlz-thumb { background: rgba(255,255,255,.14); } .tl-zoom.drag .tlz-thumb { cursor: grabbing; } .tlz-h { position: absolute; top: 0; bottom: 0; width: 7px; background: rgba(255,255,255,.22); cursor: ew-resize; } .tlz-h.l { left: 0; } .tlz-h.r { right: 0; } .tlz-h:hover { background: var(--accent); } .tlz-now { position: absolute; top: -1px; bottom: -1px; width: 1px; background: var(--accent); pointer-events: none; } .timeline-track.panning, .timeline-track.panning * { cursor: grabbing !important; } .gt-row { position: relative; border-bottom: 1px solid var(--border); } .gt-row:last-child { border-bottom: none; } .gt-row .rl { position: absolute; left: 0; top: 0; bottom: 0; width: 74px; border-right: 1px solid var(--border); display: flex; align-items: center; padding-left: 11px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .09em; color: var(--text-faint); background: var(--surface); z-index: 3; } .gt-track { position: absolute; left: 74px; right: 0; top: 0; bottom: 0; } /* Every row clips sideways only: phases, notes, markers and fights keep their true position at a zoomed edge and are cut there, so they read as running on past it. Captions and hover furniture still overflow up and down. */ .gt-track { overflow-x: clip; } /* row-time bands, top to bottom (44px total — the v2 design height; every marker is sized to fit THAT, the row is never grown to fit the markers): -4..4 highlight rails, lane 0 straddling the notes/time divider 0..8 the OBJ caption strip 10..34 the fight shape — ONE svg path, upper 10..25 for the K/D/A, lower 25..34 carrying the XvX count (the stem of a T) 11..33 the icon row, CENTRED on y=22 whatever the square size (22px, or 16.5px for a champion portrait). 22 is the centre of the ICON BAND ALONE — the arrow underneath is NOT part of the marker and must not pull it up; icons centre first, ticks hang after. 34..39 anchor ticks, at the instant each event actually happened 40..44 minute ticks ~40..48 death rails AND ward diamonds, both riding the bottom line Wards used to hold a lane of their own at y=35 and now share the bottom line with the death rails, which is what freed the height for the shape. */ /* Time row is 60 (was 48, was 44): +4 was headroom at the TOP so the OBJ caption clears the highlight rails that straddle the notes/time divider; the +12 is air at the BOTTOM — every top-anchored band (caption, icons, anchor ticks; ICON_MID/TICK_TOP in review.js, .gt-cap / .gt-tri tops here) keeps its line, while the bottom-anchored furniture (minute ticks, ward diamonds, death rails) rides the lower bottom line, so the marker band gets clear separation instead of crowding the bottom furniture. */ /* The notes row: bars carry no labels (hover names the note), and a coached review swaps pools via the lane-label toggle instead of splitting — the strip is the same height on every review. */ .row-phase { height: 30px; } .row-note { height: 50px; } .row-time { height: 60px; } /* Top-row picker: the label is the anchor (phases / time / teammate's phases). */ .gt-row .rl.rl-menu { cursor: pointer; } .gt-row .rl.rl-menu:hover, .gt-row .rl.rl-menu.open { color: var(--text-muted); } /* Time mode: a ruler in the top row — minute ticks along the bottom, m:ss labels on the labelled minutes (step chosen per width, renderTopRuler). */ .gt-track.gt-ruler { overflow: hidden; cursor: pointer; background: var(--surface); } /* #14151e, like the label column (user rule) */ .gt-rul-tick { position: absolute; bottom: 0; width: 1px; height: 6px; background: rgba(90,96,128,.9); transform: translateX(-50%); pointer-events: none; } .gt-rul-tick.major { height: 10px; background: var(--text-muted); } .gt-rul-lab { position: absolute; top: 3px; transform: translateX(-50%); font-family: var(--font-mono); font-size: 9px; letter-spacing: .04em; color: var(--text-muted); white-space: nowrap; pointer-events: none; } .gt-rul-lab.edge-l { transform: none; margin-left: 2px; } .gt-rul-lab.edge-r { transform: translateX(-100%); margin-left: -2px; } /* The picker's active option: its icon sits in a blue box, the title takes the accent (no check column, no underline). Teammate rows: masked role glyph, champion square, role name. */ .cm-item .cm-col.tl-on .a, .cm-item .cm-lbl.tl-on { color: var(--accent); } .cm-item > .cm-ico.on { border-radius: 2px; box-shadow: 0 0 0 3px var(--surface-raised), 0 0 0 4px var(--accent); } /* a 1px accent box, 3px clear of the icon */ .cm-item > .cm-ico.tl-rolebox > .tl-role { display: block; width: 100%; height: 100%; background: #8b8fa6; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .cm-item > .cm-ico.tl-rolebox.on > .tl-role { background: var(--accent); } .cm-item > .cm-ico.tl-champ { background-size: cover; } /* Teammate's phases still loading. */ .gt-tophint { position: absolute; left: 6px; top: 0; bottom: 0; display: flex; align-items: center; font-family: var(--font-mono); font-size: 9px; color: var(--text-faint); pointer-events: none; } .gt-phase { position: absolute; top: 0; bottom: 0; border-radius: 3px; font-size: 10px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); overflow: hidden; white-space: nowrap; cursor: pointer; } .gt-phase.wave-0 { background: rgba(78,161,255,.10); border: 1px solid rgba(78,161,255,.20); } .gt-phase.wave-1 { background: rgba(78,161,255,.19); border: 1px solid rgba(78,161,255,.30); } .gt-phase.obj { background: rgba(77,209,122,.10); border: 1px solid rgba(77,209,122,.28); color: var(--green); border-radius: 4px; } .gt-phase.recall { box-shadow: inset 0 -3px 0 var(--accent); } .gt-phase.sel { outline: 1.5px solid var(--accent); outline-offset: -1px; background: var(--accent-soft); color: var(--text); z-index: 2; } .gt-phase.has-note::after { content: ""; position: absolute; top: 2px; right: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); } .gt-phase:hover { filter: brightness(1.35); } /* Your-notes lane: the tail rail (design 2026-09-26). One SVG per lane, one path per note in the note's colour: the latest-started active note owns the full bar, every other running note drops to an 8px rail 2px below it and the bar shrinks only where rails are present (layoutNoteLane). No hover fade of the other notes, no caps, no icon boxes (user 2026-09-27: the icon shows in the hover tooltip instead). z-index 1 keeps the faint recall lines behind the bars. */ .gt-notes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; } .gt-bar { fill-opacity: .28; stroke-width: 1; cursor: pointer; pointer-events: visiblePainted; } .gt-bar:hover { fill-opacity: .4; } .gt-bar.active { stroke: #fff; stroke-width: 1.5; } .tl-tooltip .tt-ico { vertical-align: -2px; margin-right: 5px; } .gt-notes-plus { font: 600 9px var(--font-mono, ui-monospace, monospace); fill: var(--text-muted); text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; } /* Minute ticks: hairline per minute, taller + brighter every 5. Unlabelled by design — the markers carry the meaning and get the space the labels used. */ .gt-rtick { position: absolute; bottom: 0; width: 1px; height: 2px; background: rgba(54,58,78,.9); transform: translateX(-50%); } .gt-rtick.major { height: 4px; background: rgba(90,96,128,.9); } /* styles.css draws the old labelled tick's hairline as a ::before — the element IS the hairline now, so the pseudo would float a second one above it. */ .gt-rtick::before { content: none; } /* Time grid (zoomed views): dashed 1px hairlines under the notes and events. Never solid, never 2px: that is the recall line's look (.gt-recall-line). */ .gt-grid { position: absolute; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); pointer-events: none; z-index: 0; background: repeating-linear-gradient(to bottom, rgba(124,134,176,.34) 0 2px, transparent 2px 6px); } /* Highlight rails: one lane per overlapping run, line + a dot at each end. The line runs the FULL width and the dots are centred ON the endpoints (−2.5px = half the dot past the edge), not tucked inside them. Both matter for contiguous chains (level, tempo): the old 2px line inset left a visible notch at every shared point, and on a segment a few px wide it consumed the whole line, so short runs rendered as orphan dots with nothing connecting them. A dot centred on the boundary is also simply the true instant. */ /* No min-width: the JS passes the segment's TRUE width, and the endpoint dots/diamonds carry visibility + hover for sliver-thin segments — a floor here pushed a short rail's rendered end past the mark that closes it. */ .gt-thread { position: absolute; height: 8px; cursor: pointer; z-index: 4; } .gt-thread .ln { position: absolute; left: 0; right: 0; top: 50%; margin-top: -1px; height: 2px; background: var(--hl); } .gt-thread.sev2 .ln { margin-top: -1.5px; height: 3px; } .gt-thread .d { position: absolute; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; background: var(--hl); border-radius: 50% !important; } .gt-thread.sev2 .d { width: 6px; height: 6px; margin-top: -3px; } .gt-thread .d.l { left: -2.5px; } .gt-thread .d.r { right: -2.5px; } .gt-thread.sev2 .d.l { left: -3px; } .gt-thread.sev2 .d.r { right: -3px; } .gt-thread:hover { filter: brightness(1.35); } /* Relative tempo's recall marks: solid diamonds centred on the same divider line the lane-0 rails ride (rails sit at top −4px with height 8, so their midline is the track's top edge) — teal for the player, orange for the ally, the same pairing the rails use for who-shopped-last. They are the rails' endpoints (tempo rails render dotless). Solid + above the rails (z-5): a mark sits exactly where a desync rail starts, and it has to read on top of the line, not blend into it. Ward diamonds live on the row's BOTTOM line and are outlined, so the two stay distinguishable at a glance. */ .gt-tempo-mark { position: absolute; top: -3.5px; width: 7px; height: 7px; margin-left: -3.5px; transform: rotate(45deg); background: #3ad6c4; cursor: pointer; z-index: 5; } .gt-tempo-mark.ally { background: #ff8a4c; } .gt-tempo-mark:hover { filter: brightness(1.35); } /* Ward placements: cyan diamond centred ON the row's bottom line, sharing that line with the death rails rather than holding a lane inside the row. */ .gt-ward { position: absolute; top: auto; bottom: -3px; width: 7px; height: 7px; margin-left: -3.5px; transform: rotate(45deg); border: 1px solid #00d4d4; background: rgba(0,212,212,.22); cursor: pointer; z-index: 3; } .gt-ward.many { background: rgba(0,212,212,.55); } .gt-ward:hover { background: rgba(0,212,212,.7); } /* Death → respawn: two dots joined by a line (same language as the highlight rails), riding the bottom line of the Time row. The background/border resets are load-bearing — styles.css still carries the old full-height red wash and would otherwise paint a square behind the rail. */ .gt-dead { position: absolute; bottom: -4px; top: auto; height: 8px; min-width: 8px; background: none; border: none; cursor: pointer; z-index: 3; } .gt-dead .ln { position: absolute; left: 2px; right: 2px; top: 50%; margin-top: -1px; height: 2px; background: rgba(255,93,93,.85); } .gt-dead .d { position: absolute; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; background: var(--red); border-radius: 50% !important; } .gt-dead .d.l { left: 0; } .gt-dead .d.r { right: 0; } .gt-dead:hover { filter: brightness(1.3); } /* Champion-portrait pins. The portrait is who it happened TO (your kills and assists) or who did it (your deaths); an execute/turret death has no champion and falls back to .noimg. Above the highlight rails on z so it stays legible when a rule is threading the same stretch. */ /* left / top / width / height come from renderTimeline: the marker layout works in px against the live track width, so the box is placed by its own edges rather than centred with a negative margin. */ .gt-pin { position: absolute; box-sizing: border-box; background-color: var(--bg); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; border: 1px solid; cursor: pointer; z-index: 5; } .gt-pin.kill { border-color: rgba(77,209,122,.9); box-shadow: 0 0 0 1px rgba(77,209,122,.3); } .gt-pin.death { border-color: rgba(255,93,93,.9); box-shadow: 0 0 0 1px rgba(255,93,93,.3); filter: grayscale(.4); } .gt-pin.assist { border-color: rgba(240,194,68,.9); } /* A kill or an assist shows the portrait of whoever DIED, so it's DESATURATED — the champion reads as gone without a mark drawn over the art. (A struck-out diagonal was tried and rejected: on a 16px square it fought the portrait.) It must NOT be done with filter: grayscale — that greys the whole element, outline and count badge included, and the outline colour is what still says kill vs assist. Blending the art against a flat achromatic backdrop in luminosity mode desaturates the ART ONLY; the border keeps its colour. */ .gt-pin.kill, .gt-pin.assist { background-color: #7d7d7d; background-blend-mode: luminosity; } /* Count badge shown when a cluster collapses several events into one marker. */ .gt-n { font: 700 10px/1 var(--font-mono); color: var(--text); text-shadow: 0 1px 2px #000; pointer-events: none; } .gt-trade .gt-n { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .gt-pin.noimg { background-color: rgba(255,255,255,.07); } .gt-pin:hover { filter: brightness(1.3); } /* Hover restores the colour on every desaturated pin — same specificity as the rules above, so these have to come after them to win. */ .gt-pin.death:hover { filter: grayscale(0) brightness(1.15); } .gt-pin.kill:hover, .gt-pin.assist:hover { background-color: var(--bg); background-blend-mode: normal; filter: brightness(1.15); } /* Shared anchor tick, marking the instant an event actually happened. Grouping packs the squares together, so a tick is often OFFSET from the square it belongs to — that offset is what keeps the real timing readable. A marker mounted on a fight gets none: the band is the timing. */ .gt-tri { position: absolute; top: 50px; transform: translateX(-50%); width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; pointer-events: none; z-index: 4; } .gt-tri.kill { border-top: 5px solid var(--green); } .gt-tri.death { border-top: 5px solid var(--red); } .gt-tri.assist { border-top: 5px solid var(--gold); opacity: .82; } .gt-tri.trade { border-top: 5px solid var(--note-orange); opacity: .82; } /* An objective's tick is ALWAYS bright purple — who took it is the square's job (ally/enemy tint), the tick's job is only to say "a neutral happened here". */ /* The objective ARROW is red (the icon carries ally/enemy; the arrow only says "a neutral happened here"). This reverts a spell where it was forced purple. */ .gt-tri.obj.ally, .gt-tri.obj.enemy { border-top: 5px solid var(--red); } /* Hairline stem closing the gap between a SMALLER square and the tick line. Sizes differ per kind but the ticks never do — a kill portrait packed beside a full-size objective keeps its centre on the row and grows a stem down to the shared tick row instead of dropping to meet it. Height/top are inline. */ .gt-stem { position: absolute; width: 1px; transform: translateX(-50%); pointer-events: none; z-index: 4; opacity: .85; } .gt-stem.kill { background: var(--green); } .gt-stem.death { background: var(--red); } .gt-stem.assist { background: var(--gold); } .gt-stem.trade { background: var(--note-orange); } /* The objective stem is the shaft of that red arrow — same colour as its head. */ .gt-stem.obj { background: var(--red); } /* When the tick IS the marker (champion icons off) the stem is the shaft of an arrow rather than a hairline joining two things, so it carries real weight — but a touch slimmer (2.25px, ~25% off the old 3px) so it reads as a stem, not a bar. */ .gt-stem.bare { width: 2.25px; opacity: 1; } /* Invisible hover/click target over a bare tick, used when "show champion icons" is off — the arrow alone is far too small to aim at, but the event still has to be inspectable. top/height come from renderTimeline and match the arrow's actual extent: it must NEVER be sized to the whole icon band, because where the stem is suppressed that band belongs to another event and this pad (appended last, same z) would swallow its clicks. */ .gt-hit { position: absolute; width: 15px; transform: translateX(-50%); background: none; cursor: pointer; z-index: 5; } /* Caption strip above a marker: "OBJ" over a standalone objective, and over a fight when one fell inside its window. This `top` is tuned to sit flush above the OBJECTIVE ICON row (its top ~15). A fight box sits a little lower (top ~17.75), so the fight's caption overrides `top` inline in renderTimeline to stay flush on the box instead of floating above it. */ .gt-cap { position: absolute; top: 18px; transform: translateX(-50%); display: flex; gap: 3px; align-items: center; font: 700 6px/8px var(--font-mono); letter-spacing: .08em; white-space: nowrap; color: var(--text-muted); pointer-events: none; z-index: 4; } .gt-cap .obj { color: var(--obj-pink); font-style: normal; } /* Objective(s) all lost → the OBJ tag greys out (pink stays if any was won). */ .gt-cap .obj.lost { color: var(--text-muted); } /* Objective portrait — one per monster type. Rounded on purpose: it's the one marker that isn't a champion, and the corner radius separates a neutral from a portrait at a glance while still packing flush beside them in a group. The !important is load-bearing — the squared/telemetry reset zeroes every radius on the page (see the round-again allowlist at the bottom of this file). */ .gt-objg { position: absolute; box-sizing: border-box; border-radius: 6px !important; display: flex; align-items: center; justify-content: center; line-height: 1; font-family: var(--font-mono); font-weight: 700; border: 1px solid; cursor: pointer; z-index: 5; overflow: hidden; } .gt-objg.ally { color: var(--obj-pink); border-color: rgba(255,93,177,.65); background: rgba(255,93,177,.16); } .gt-objg.enemy { color: #cf6b6b; border-color: rgba(207,107,107,.6); background: rgba(207,107,107,.14); } /* An objective LOST is slightly desaturated — muted, but nowhere near a death's full greyscale, so which neutral it was still reads. */ .gt-objg.enemy { filter: grayscale(.5) brightness(.92); } .gt-objg.enemy:hover { filter: grayscale(0) brightness(1.35); } /* Real minimap art fills the box; the tinted background stays as the ally/enemy read behind it, and a grub count sits on top with a shadow to stay legible. */ .gt-objg.has-icon { background-size: cover; background-position: center; background-repeat: no-repeat; text-shadow: 0 1px 3px #000; } .gt-objg:hover { filter: brightness(1.35); } /* Trade: the headline is the health the trade COST — red, and with no minus sign, so the two digits and the % get the biggest type the square can hold. The strip under it is where that left you: solid = kept, translucent = what this trade took, bare = already missing. THE OUTLINE BELONGS TO THE BAR, NOT THE MARKER. A box drawn around the whole thing put two verticals up either side of the number and read as a container; the number is meant to float free above the bar it describes. */ .gt-trade { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; border: none; background: none; cursor: pointer; z-index: 5; } .gt-trade .pc { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; line-height: 1; letter-spacing: -.04em; color: var(--red); white-space: nowrap; } /* 7px = the 5px of fill the bar has always had, plus its own 1px outline. */ .gt-trade .bar { position: relative; flex: none; height: 7px; border: 1px solid rgba(255,138,76,.7); background: rgba(255,138,76,.10); } .gt-trade .kept, .gt-trade .lost { position: absolute; top: 0; bottom: 0; } .gt-trade .kept { left: 0; background: rgba(255,138,76,.92); } .gt-trade .lost { background: rgba(255,138,76,.34); } .gt-trade:hover { filter: brightness(1.35); } /* Fight / skirmish box — a single rectangle the height of a small champion portrait, holding the K/D/A. Its width is the LARGER of that caption and the fight's true duration, so a long brawl reads as wide. Two .gt-fedge marks below pin the real start/end. The fill is the timeline background itself (#0c0d13 = --slate-950), so the box reads as an outline around the score; the purple border is the only tone, one for every fight — win/loss is not what the box says. */ .gt-fight { position: absolute; box-sizing: border-box; overflow: hidden; cursor: pointer; z-index: 1; display: flex; align-items: center; justify-content: center; background: #0c0d13; border: 1px solid #463166; } .gt-fight.tf { border-color: #6f4aa1; } /* 1vX — the player alone against 2+ enemies — wears the kill green. */ .gt-fight.solo { border-color: var(--green); } /* The player's K/D/A, filling the box. A figure colours itself once non-zero. */ .gt-fight .kda { font: 700 10px var(--font-mono); letter-spacing: -.02em; color: var(--text-muted); line-height: 1; white-space: nowrap; pointer-events: none; } .gt-fight .kda .k { color: var(--green); } .gt-fight .kda .d { color: var(--red); } .gt-fight .kda .a { color: var(--gold); } .gt-fight:hover { filter: brightness(1.3); } /* The fight's true start and end: two vertical marks (NOT a rail — no connecting line), one at each end of the real span. Same 1px width and colour as the box's own outline (per tone). They run from just under the box to the FULL bottom of the row, and sit at z-index 0 — under recall lines, death rails, arrows and every other marker — so they read as quiet context everything else draws over. Purely informational (the box takes the click); radius reset must not round them. */ .gt-fedge { position: absolute; top: 46px; bottom: 0; width: 1px; transform: translateX(-50%); background: #463166; border-radius: 0 !important; pointer-events: none; z-index: 0; } .gt-fedge.tf { background: #6f4aa1; } .gt-fedge.solo { background: var(--green); } /* Recall lines: light-gray full-height ticks at a recall's first purchase. z-index 0 keeps them UNDER every marker and fight shape — they're context for the row, not something that should cut across an event box. */ .gt-recall-line { position: absolute; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: rgba(206,210,228,.30); cursor: pointer; z-index: 0; } .gt-recall-line:hover { background: rgba(206,210,228,.6); } /* The continuation through the notes lane(s): same line, faded, and inert so it can't intercept a click meant for a note bar underneath it. */ .gt-recall-line.faint { background: rgba(206,210,228,.10); pointer-events: none; z-index: 0; } /* (Objectives now render as per-type glyphs — see .gt-objg above.) */ /* ── Timeline hover card ─────────────────────────────────────────────────── */ /* The Events-tab card for a pin, floated over the timeline. Fixed + JS-placed (see positionHoverCard) so it escapes the pane and flips below when needed. */ .gt-hover { position: fixed; z-index: 70; width: 300px; pointer-events: none; background: var(--surface-raised); border: 1px solid var(--border-strong); box-shadow: 0 16px 40px -16px rgba(0,0,0,.85); } .gt-hover[hidden] { display: none; } /* Fallback bodies (objective / ward / rail) hug their content instead of holding the 300px a real .qc needs. min-width keeps the head's kind and time apart — margin-left:auto collapses to nothing at max-content. */ .gt-hover.compact { width: max-content; min-width: 190px; max-width: 300px; } /* A real .qc lives inside for feed-backed events. It normally stretches as a flex child of .ef-feed, so the popover supplies the width; drop its own box chrome (the popover already has it) but keep the left type spine. */ .gt-hover .qc { background: none; border-top: none; border-right: none; border-bottom: none; margin: 0; } .gt-hover .gh-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--border); border-left: 3px solid var(--gh, var(--accent)); font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .04em; } .gt-hover .gh-kind { color: var(--gh, var(--accent)); } .gt-hover .gh-time { margin-left: auto; color: var(--text-faint); } .gt-hover .gh-body { padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; } .gt-hover .gh-row { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text); } .gt-hover .gh-row b { font-weight: 600; } .gt-hover .gh-t { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); } .gt-hover .gh-sub { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-muted); } .gt-hover .gh-port { width: 20px; height: 20px; flex: none; object-fit: cover; border: 1px solid var(--border); background: var(--bg); } .gt-hover .gh-ports { display: flex; flex-wrap: wrap; gap: 3px; } .gt-hover .gh-ports .gh-port { width: 18px; height: 18px; } .gt-hover .gh-stats { display: flex; gap: 12px; font-size: 11px; color: var(--text-muted); } .gt-hover .gh-stats b { color: var(--text); font-size: 12.5px; } .gt-hover .gh-glyph { width: 20px; text-align: center; font-family: var(--font-mono); font-weight: 700; color: inherit; } /* Objectives taken during a fight have no marker of their own, so the fight's card is where they surface — as the full fight-card tags. `.fx-objs` normally lives INSIDE a padded .qc; here it's a sibling of the .qc, directly in the unpadded popover, so it needs its own inset or it hugs the left/bottom edge. */ .gt-hover .fx-objs { margin: 0; padding: 0 10px 8px; border-top: none; } .gt-hover .gh-tags { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 10px 8px; } .gt-hover .gh-tag { font: 600 9px var(--font-mono); letter-spacing: .04em; padding: 2px 5px; border: 1px solid rgba(255,93,177,.5); color: #ff8fca; background: rgba(255,93,177,.12); } .gt-hover .gh-tag.enemy { border-color: rgba(207,107,107,.5); color: #e0a0a0; background: rgba(207,107,107,.12); } /* ── Visibility button + popover (timeline header) ───────────────────────── */ .tl-hl-btn { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .02em; border: 1px solid var(--border); background: var(--surface-raised); color: var(--text-muted); cursor: pointer; } /* The eye takes the button's own colour, so it lights up with the label. */ .tl-hl-eye { width: 13px; height: 13px; flex: none; display: block; } .tl-hl-btn:hover { color: var(--text); } .tl-hl-btn.on { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent); } .tl-hl-n { font-size: 9px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-border); padding: 1px 5px; margin-left: 6px; } .tl-hl-n[hidden] { display: none; } /* Fixed, not absolute: the timeline header sits at the bottom of the screen, so an absolutely-positioned panel could only ever open downward off-viewport. placeHlPop() flips it above the button and clamps it horizontally. */ .tl-hl-pop { position: fixed; left: 0; top: 0; width: 354px; z-index: 60; padding: 2px 14px 10px; max-height: min(74vh, 620px); overflow-y: auto; background: var(--surface-raised); border: 1px solid var(--border-strong); box-shadow: 0 16px 40px -16px rgba(0,0,0,.8); } .tl-hl-pop[hidden] { display: none; } .tl-hl-pop .sp { flex: 1; } .tl-hl-head, .tl-hl-head2 { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .04em; color: var(--text-faint); } .tl-hl-head { padding: 10px 0 7px; border-bottom: 1px solid var(--border); } .tl-hl-sub { color: var(--text-faint); font-weight: 400; } .tl-hl-rule { padding: 9px 0 10px; border-bottom: 1px solid var(--border); } .tl-hl-r1 { display: flex; align-items: center; gap: 8px; cursor: pointer; } .tl-hl-rule.off .tl-hl-r1 { cursor: default; opacity: .5; } .tl-hl-r2 { display: flex; align-items: center; gap: 6px; margin: 7px 0 0 23px; } .tl-hl-name { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--text); } .tl-hl-sw { width: 12px; height: 2px; flex: none; } .tl-hl-lab, .tl-hl-why { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); } .tl-hl-cb { width: 15px; height: 15px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; box-sizing: border-box; background: var(--bg); border: 1px solid var(--border-strong); color: transparent; } .tl-hl-cb.on { background: var(--accent); border-color: var(--accent); color: #fff; } .tl-hl-pop select, .tl-hl-pop input[type="number"] { height: 24px; padding: 0 6px; box-sizing: border-box; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-family: var(--font-mono); font-size: 11px; } /* Direction controls. A two-state one is a single button that flips on click; a three-state one puts all three on screen — either way it's one click, never a menu you have to open to change a setting this small. */ .tl-hl-tog { height: 24px; padding: 0 9px; box-sizing: border-box; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-family: var(--font-mono); font-size: 11px; cursor: pointer; } .tl-hl-tog:hover { border-color: var(--border-strong); } .tl-hl-tog.on { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent); } .tl-hl-seg { display: inline-flex; } .tl-hl-seg .tl-hl-tog + .tl-hl-tog { margin-left: -1px; } /* Tempo's ally picker: icon + role short-label, in one dropdown button. Custom rather than a