/* ── srstats terminal theme system ───────────────────────────────────── Themes are variable sets on . Add a theme: copy a block, rename, adjust the variables. The picker in layouts/terminal.blade.php persists the choice to localStorage ('srstats.theme'). */ :root, :root[data-theme="rainbow"] { --t-bg: #0b0f14; --t-panel: #10161e; --t-panel2: #151d27; --t-border: #24303e; --t-fg: #cdd6e4; --t-dim: #6e7d8d; --t-red: #ff6b6b; --t-orange: #ffa657; --t-yellow: #f7d15a; --t-green: #56d364; --t-cyan: #4dd8c8; --t-blue: #6cb6ff; --t-magenta: #d2a8ff; --t-sel: rgba(108, 182, 255, .12); --t-stripe: rgba(108, 182, 255, .05); } /* amber phosphor — everything burns in one color */ :root[data-theme="amber"] { --t-bg: #120d06; --t-panel: #170f08; --t-panel2: #1e1409; --t-border: #3c2a12; --t-fg: #f5b445; --t-dim: #8f6b2d; --t-red: #ffd27d; --t-orange: #ffc668; --t-yellow: #ffe0a1; --t-green: #f5b445; --t-cyan: #e3a33d; --t-blue: #d8992f; --t-magenta: #ffce8a; --t-sel: rgba(245, 180, 69, .12); --t-stripe: rgba(245, 180, 69, .05); } /* green phosphor — the VT220 in the basement */ :root[data-theme="green"] { --t-bg: #071009; --t-panel: #0a140c; --t-panel2: #0e1a10; --t-border: #1d3a22; --t-fg: #58e77a; --t-dim: #2e7a41; --t-red: #b8ffc7; --t-orange: #8ef2a4; --t-yellow: #ccffd6; --t-green: #58e77a; --t-cyan: #46cf68; --t-blue: #39b957; --t-magenta: #9dffb4; --t-sel: rgba(88, 231, 122, .12); --t-stripe: rgba(88, 231, 122, .05); } /* paper — a terminal session printed on a teletype */ :root[data-theme="paper"] { --t-bg: #efeadd; --t-panel: #f7f3e8; --t-panel2: #ece5d3; --t-border: #cfc5ab; --t-fg: #33302a; --t-dim: #8a8270; --t-red: #b3382e; --t-orange: #ad5f11; --t-yellow: #927708; --t-green: #2c7a3b; --t-cyan: #17756d; --t-blue: #2a5da8; --t-magenta: #8a4bab; --t-sel: rgba(42, 93, 168, .10); --t-stripe: rgba(42, 93, 168, .045); } /* ── base reset (Bootstrap Reboot replacement — CDN dropped) ────────── */ *, *::before, *::after { box-sizing: border-box; } h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: .5rem; line-height: 1.2; } p { margin-top: 0; margin-bottom: 1rem; } ul, ol { margin-top: 0; margin-bottom: 1rem; } table { border-collapse: collapse; } button { font-family: inherit; } a { color: var(--t-blue); } /* ── window chrome ─────────────────────────────────────────────────── */ body.terminal { background: var(--t-bg); color: var(--t-fg); font-family: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 15px; line-height: 1.6; margin: 0; } .term { max-width: 1080px; margin: 1.5rem auto 3rem; border: 1px solid var(--t-border); border-radius: 10px; background: var(--t-panel); /* no overflow:hidden — the mobile nav overlay must be able to hang past the term box on short pages; the titlebar rounds its own top corners instead */ box-shadow: 0 18px 50px rgba(0, 0, 0, .45); } .term-titlebar { display: flex; align-items: center; gap: .75rem; border-radius: 9px 9px 0 0; padding: .55rem .9rem; background: var(--t-panel2); border-bottom: 1px solid var(--t-border); font-size: .8rem; color: var(--t-dim); } .term-dots { display: flex; gap: .38rem; } .term-dots span { width: .72rem; height: .72rem; border-radius: 50%; } .term-dots span:nth-child(1) { background: var(--t-red); } .term-dots span:nth-child(2) { background: var(--t-yellow); } .term-dots span:nth-child(3) { background: var(--t-green); } /* navbar rides the titlebar next to the dots — drop its standalone box */ .term-titlebar .t-nav { flex: 1; min-width: 0; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; } .term-toolbar { /* hidden for now — the page

already carries the title, so this second header line read as redundant. Markup + @section('term-title') still exist on every page; delete the next line to bring it back. */ display: none; /* display: flex; */ justify-content: space-between; align-items: center; gap: .9rem; padding: .45rem .9rem; background: var(--t-panel2); border-bottom: 1px solid var(--t-border); font-size: .8rem; color: var(--t-dim); } .term-toolbar .term-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* theme dropdown in the navbar (replaces the toolbar pickers) */ .t-nav-theme { margin-left: auto; } .t-nav-panel-right { left: auto; right: 0; } .t-nav-panel .t-nav-panel-head { padding: .3rem .6rem .1rem; color: var(--t-dim); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; } .t-nav-panel .t-nav-panel-head + .t-nav-panel-head, .t-nav-panel li + .t-nav-panel-head { margin-top: .25rem; } .t-nav-panel button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: .28rem .6rem; border-radius: 5px; color: var(--t-cyan); font: inherit; cursor: pointer; } .t-nav-panel button:hover { background: var(--t-sel); } .t-nav-panel button.active::after { content: " ✓"; color: var(--t-green); } .term-body { padding: 1.4rem 1.7rem 1.9rem; } .term-footer { padding: .6rem 1.7rem .9rem; color: var(--t-dim); font-size: .82rem; border-top: 1px solid var(--t-border); } .term-footer .ok { color: var(--t-green); } /* ── prompt lines: section headers in shell register ───────────────── */ .prompt { margin: 2.1rem 0 .9rem; color: var(--t-dim); font-size: .88rem; overflow-wrap: anywhere; } .prompt:first-child { margin-top: 0; } .prompt .p-user { color: var(--t-green); } .prompt .p-path { color: var(--t-blue); } .prompt .p-cmd { color: var(--t-fg); } .prompt .p-flag { color: var(--t-cyan); } /* trailing descriptive info after a prompt's command/flags (e.g. "— 719 tournaments") reads as a command's output, not more of the command line itself — each piece gets its own line below the prompt */ .prompt .p-info { display: block; margin-top: .25rem; } .cursor { display: inline-block; width: .55em; height: 1.05em; vertical-align: text-bottom; background: var(--t-fg); animation: term-blink 1.1s steps(1) infinite; } @keyframes term-blink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .cursor { animation: none; } } /* ── header block ───────────────────────────────────────────────────── */ .t-eyebrow { margin: 0 0 .1rem; color: var(--t-dim); font-size: .82rem; } /* every page header now gets the same animated gradient treatment as .rainbow-name (see below) — same gradient/keyframes, page-header size */ .t-name { margin: 0 0 .35rem; font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 800; letter-spacing: .01em; line-height: 1.15; background: linear-gradient(115deg, var(--t-red), var(--t-orange), var(--t-yellow), var(--t-green), var(--t-cyan), var(--t-blue), var(--t-magenta), var(--t-red)); background-size: 300% 300%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rainbow-phase 9s linear infinite; } @media (prefers-reduced-motion: reduce) { .t-name { animation: none; } } .t-meta { margin: 0; color: var(--t-dim); font-size: .92rem; } .t-meta b { color: var(--t-fg); font-weight: 600; } .t-champion { margin: .8rem 0 0; font-size: 1.05rem; color: var(--t-green); font-weight: 600; } .t-champion .label { color: var(--t-dim); font-weight: 400; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; } /* ── bracket: the knockout tree, cool colors early, gold at the end ── */ .bracket { display: flex; gap: 1.4rem; align-items: stretch; overflow-x: auto; padding-bottom: .4rem; } .stage { flex: 1 1 0; min-width: 190px; display: flex; flex-direction: column; } .stage h2 { font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: lowercase; margin: 0 0 .8rem; color: var(--stage-c, var(--t-dim)); white-space: nowrap; } .stage h2::before { content: "── "; } .stage h2::after { content: " ──"; } .stage-round-of-16 { --stage-c: var(--t-blue); } .stage-quarterfinals { --stage-c: var(--t-cyan); } .stage-semifinals { --stage-c: var(--t-magenta); } .stage-finals { --stage-c: var(--t-yellow); } .stage .matches { display: flex; flex-direction: column; gap: .7rem; flex: 1; justify-content: space-around; } .match { border: 1px solid var(--t-border); border-left: 3px solid var(--stage-c, var(--t-border)); border-radius: 6px; background: var(--t-panel2); padding: .35rem .6rem; font-size: .9rem; } .match .pl { display: flex; justify-content: space-between; gap: .5rem; } .match .pl a { color: var(--t-dim); text-decoration: none; } .match .pl.win a { color: var(--stage-c, var(--t-fg)); font-weight: 700; } .match .pl .mark { color: var(--stage-c, var(--t-fg)); } .match .pl a:hover { text-decoration: underline; } /* ── standings table ────────────────────────────────────────────────── */ .t-tablewrap { overflow-x: auto; } table.t-table { width: 100%; border-collapse: collapse; font-size: .9rem; } .t-table th { text-align: left; color: var(--t-dim); font-weight: 600; font-size: .78rem; letter-spacing: .1em; text-transform: lowercase; padding: .3rem .65rem; border-bottom: 1px solid var(--t-border); white-space: nowrap; } .t-table td { padding: .28rem .65rem; white-space: nowrap; } .t-table tbody tr:nth-child(even) { background: var(--t-stripe); } .t-table tbody tr:hover { background: var(--t-sel); } .t-table td.r { text-align: right; } .t-table th[data-sort], .t-table th.foilview-jump { cursor: pointer; user-select: none; } .t-table th[data-sort]:hover, .t-table th.foilview-jump:hover { color: var(--t-fg); } .t-table th[data-sort] .sort-arrow, .t-table th.foilview-jump .sort-arrow { display: inline-block; width: .9em; color: var(--t-cyan); } .t-table a { color: var(--t-fg); text-decoration: none; } .t-table a:hover { text-decoration: underline; } .t-table .dim, .t-table .dim a { color: var(--t-dim); } .finish-1 { color: var(--t-yellow); font-weight: 700; } .finish-2 { color: var(--t-magenta); font-weight: 600; } .finish-4 { color: var(--t-cyan); } .finish-8 { color: var(--t-blue); } .foil-glyph { text-decoration: none; } .drop-flag { color: var(--t-red); font-size: .8rem; } /* ── section panels + jump nav ──────────────────────────────────────── */ /* every page with more than one stat block wraps each block in .panel and lists them in a .section-nav strip right under the header, so sections read as distinct cards instead of running together. */ .section-nav { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 0 0 1.6rem; padding: .7rem 0; border-top: 1px dashed var(--t-border); border-bottom: 1px solid var(--t-border); font-size: .82rem; } /* label the strip so the entries read as links, not stray text */ .section-nav::before { content: "# jump to:"; color: var(--t-dim); opacity: .75; white-space: nowrap; } .section-nav a { color: var(--t-dim); text-decoration: none; letter-spacing: .03em; padding-bottom: .35rem; border-bottom: 2px solid transparent; white-space: nowrap; } .section-nav a:hover { color: var(--t-fg); } .section-nav a.active { color: var(--t-fg); border-color: var(--t-blue); } /* the calendar-only trial (rainbow gradient border) read well site-wide, so it's now every panel's default border rather than an opt-in class */ .panel { position: relative; border: 2px solid transparent; border-radius: 8px; padding: 1.1rem 1.3rem 1.35rem; margin: 0 0 1.5rem; scroll-margin-top: 1rem; background: linear-gradient(var(--t-panel2), var(--t-panel2)) padding-box, linear-gradient(115deg, var(--t-red), var(--t-orange), var(--t-yellow), var(--t-green), var(--t-cyan), var(--t-blue), var(--t-magenta), var(--t-red)) border-box; } .panel > .prompt:first-child { margin-top: 0; } .panel > *:last-child { margin-bottom: 0; } /* collapsible panels — the bare command name in the prompt is the toggle */ .panel > .prompt .p-cmd { cursor: pointer; } .panel > .prompt .p-cmd:hover { text-decoration: underline dashed; text-underline-offset: .25em; } .panel.collapsed > *:not(:first-child):not(.panel-controls) { display: none; } .panel.collapsed > .prompt:first-child { margin-bottom: 0; } .panel.collapsed > .prompt:first-child::after { content: " [collapsed]"; color: var(--t-dim); font-size: .8em; } /* optional per-panel controls (close / minimize), top right, always visible regardless of collapsed state — see .panel.collapsed above */ .panel-controls { position: absolute; top: .7rem; right: .9rem; display: flex; gap: .3rem; } .panel-close, .panel-minimize { width: 1.6rem; height: 1.6rem; display: flex; align-items: center; justify-content: center; color: var(--t-dim); text-decoration: none; background: none; border: none; font-size: 1.1rem; line-height: 1; border-radius: 4px; cursor: pointer; font-family: inherit; } .panel-close:hover, .panel-minimize:hover { color: var(--t-fg); background: var(--t-sel); } .panel-minimize::before { content: "−"; } .panel.collapsed .panel-minimize::before { content: "+"; } /* ── error pages: terminal command-failure states ──────────────────── */ .error-header { margin-bottom: 1.5rem; } .error-panel { max-width: 920px; } .error-exit { color: var(--t-red); } .error-code { margin: 0 0 1rem; color: var(--t-red); font-size: clamp(1.1rem, 3vw, 1.45rem); font-weight: 700; text-transform: lowercase; } .error-code::before { content: "error: "; color: var(--t-dim); font-weight: 400; } .error-command-output { padding: .35rem 0; } .error-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; margin-top: 1rem; } .error-actions a { display: flex; flex-direction: column; gap: .25rem; padding: .75rem .85rem; color: var(--t-fg); text-decoration: none; border: 1px solid var(--t-border); border-left: 3px solid var(--t-cyan); border-radius: 5px; background: var(--t-panel); } .error-actions a::before { content: "$ "; color: var(--t-green); } .error-actions a:hover { border-color: var(--t-cyan); background: var(--t-sel); } .error-actions small { color: var(--t-dim); font-size: .75rem; } @media (max-width: 720px) { .error-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 420px) { .error-actions { grid-template-columns: 1fr; } } /* round-type filter pills, shared by tourney games + player games */ .filter-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin: .1rem 0 1rem; } .filter-pill { display: inline-block; border: 1px solid var(--t-border); border-radius: 999px; padding: .18rem .9rem; font-size: .78rem; letter-spacing: .04em; text-transform: lowercase; color: var(--pill-c, var(--t-dim)); text-decoration: none; background: var(--t-panel); cursor: pointer; line-height: 1.5; } .filter-pill:hover { border-color: var(--pill-c, var(--t-fg)); } .filter-pill.active { color: var(--t-bg); background: var(--pill-c, var(--t-fg)); border-color: var(--pill-c, var(--t-fg)); font-weight: 700; } .rt-swiss { --pill-c: var(--t-green); } .rt-ro16 { --pill-c: var(--t-blue); } .rt-qf { --pill-c: var(--t-cyan); } .rt-sf { --pill-c: var(--t-magenta); } .rt-f { --pill-c: var(--t-yellow); } /* swiss round shades: 8 steps of green, brighter = later round. sw-8 (the last swiss round) matches the swiss filter pill exactly; earlier rounds fade back toward the background */ .sw-1 { --pill-c: color-mix(in srgb, var(--t-green) 37%, var(--t-bg)); } .sw-2 { --pill-c: color-mix(in srgb, var(--t-green) 46%, var(--t-bg)); } .sw-3 { --pill-c: color-mix(in srgb, var(--t-green) 55%, var(--t-bg)); } .sw-4 { --pill-c: color-mix(in srgb, var(--t-green) 64%, var(--t-bg)); } .sw-5 { --pill-c: color-mix(in srgb, var(--t-green) 73%, var(--t-bg)); } .sw-6 { --pill-c: color-mix(in srgb, var(--t-green) 82%, var(--t-bg)); } .sw-7 { --pill-c: color-mix(in srgb, var(--t-green) 91%, var(--t-bg)); } .sw-8 { --pill-c: var(--t-green); } /* games table winner: colored + bold like the bracket's .pl.win, inheriting whichever --pill-c (rt-* or sw-*) the row's round carries */ .t-table a.win { color: var(--pill-c, var(--t-green)); font-weight: 700; } /* expandable round-breakdown row under a multi-expansion tourney's summary row; hidden by default via the [hidden] attribute, toggled by its sibling row's [data-expand-rounds] button */ tr.tr-detail > td { padding: 0 0 .9rem; border-bottom: 1px solid var(--t-border); } tr.tr-detail .t-tablewrap { margin: 0 0 0 1.6rem; } tr.tr-detail table.t-table { font-size: .86rem; } button.filter-pill[data-expand-rounds] { font-family: inherit; } button.filter-pill[data-expand-rounds] .fmt-caret { display: inline-block; margin-right: .3rem; transition: transform .15s ease; } button.filter-pill[data-expand-rounds][aria-expanded="true"] .fmt-caret { transform: rotate(90deg); } /* pager for player games (server-paginated — can run to 10k+ rows) */ .pager { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; row-gap: .5rem; margin-top: .8rem; font-size: .85rem; color: var(--t-dim); } /* markup order is [first/prev] [page N of M] [next/last]; visually the nav links share the top row and the "page N of M" span drops to its own centered line below (was too squished inline) */ .pager > span:nth-child(1) { order: 1; } .pager > span:nth-child(3) { order: 2; } .pager > span:nth-child(2) { order: 3; flex-basis: 100%; text-align: center; } .pager a { color: var(--t-cyan); text-decoration: none; } .pager a:hover { text-decoration: underline; } .pager .disabled { color: var(--t-border); } .pager .page-input { width: 4.2em; background: var(--t-panel); border: 1px solid var(--t-border); border-radius: 4px; color: var(--t-fg); font: inherit; text-align: center; padding: .05rem .3rem; appearance: textfield; -moz-appearance: textfield; } .pager .page-input::-webkit-outer-spin-button, .pager .page-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .pager .page-input:focus { outline: none; border-color: var(--t-cyan); } /* ── canceled tourneys: graveyard ───────────────────────────────────── */ .grave-list { display: flex; flex-direction: column; gap: .6rem; } .grave { border: 1px dashed var(--t-border); border-radius: 8px; background: var(--t-panel); overflow: hidden; } .grave summary { cursor: pointer; list-style: none; padding: .65rem 1rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem; color: var(--t-dim); font-size: .88rem; } .grave summary::-webkit-details-marker { display: none; } .grave summary::before { content: "\2020"; color: var(--t-dim); } .grave summary .gname { color: var(--t-fg); font-weight: 600; } .grave[open] summary { border-bottom: 1px dashed var(--t-border); } .grave-reason { font-size: .7rem; padding: .08rem .6rem; border-radius: 999px; border: 1px solid var(--t-border); color: var(--t-orange); text-transform: lowercase; letter-spacing: .03em; white-space: nowrap; } .grave-count { margin-left: auto; font-size: .82rem; color: var(--t-dim); white-space: nowrap; } .grave-roster { padding: .8rem 1rem 1rem; display: flex; flex-wrap: wrap; gap: .4rem; } .grave-roster a, .grave-roster span.unplayed { font-size: .8rem; padding: .12rem .65rem; border-radius: 999px; border: 1px solid var(--t-border); background: var(--t-panel2); color: var(--t-dim); text-decoration: none; } .grave-roster a:hover { color: var(--t-fg); border-color: var(--t-fg); } .grave-empty { padding: 0 1rem 1rem; color: var(--t-dim); font-size: .85rem; font-style: italic; } /* ── welcome / boot sequence ────────────────────────────────────────── */ .boot-line { margin: 0 0 .3rem; color: var(--t-dim); font-size: .88rem; opacity: 0; animation: boot-in .25s ease-out forwards; } .boot-line .ok { color: var(--t-green); } .boot-line b { color: var(--t-fg); font-weight: 600; } /* BIOS box + kernel line above the boot checklist on the landing page */ .boot-banner { margin: .2rem 0 .8rem; } .boot-bios { margin: 0 0 .4rem; color: var(--t-cyan); font-size: .8rem; line-height: 1.35; overflow-x: auto; } .boot-bios .ok { color: var(--t-green); } .boot-kernel { margin: 0; font-size: .78rem; } @keyframes boot-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .boot-line { animation: none; opacity: 1; } } .hero-champ { margin: 1.5rem 0 .3rem; padding: 1rem 1.2rem; border: 1px solid var(--t-border); border-radius: 8px; background: var(--t-panel2); } .hero-champ .tl { color: var(--t-dim); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; } .hero-champ .rainbow-name { font-size: clamp(1.6rem, 5vw, 2.4rem); margin: .2rem 0; } .hero-champ .ts { color: var(--t-dim); font-size: .85rem; } .quicklinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem; margin: .3rem 0 1.6rem; } .qlink { display: block; border: 1px solid var(--t-border); border-left: 3px solid var(--ql-c, var(--t-border)); border-radius: 8px; background: var(--t-panel2); padding: .7rem .9rem; text-decoration: none; transition: border-color .12s ease, transform .12s ease; } .qlink:hover { border-color: var(--ql-c, var(--t-border)); transform: translateX(2px); } .qlink .qcmd { display: block; color: var(--ql-c, var(--t-fg)); font-weight: 700; font-size: .95rem; } .qlink .qdesc { display: block; color: var(--t-dim); font-size: .78rem; margin-top: .15rem; } /* ── player profile ─────────────────────────────────────────────────── */ /* the TUI's figlet_rainbow gradient, ported: diagonal hue sweep across the name, phase-animated. Colors come from the theme, so amber/green phosphor themes "rainbow" in their own light. */ .rainbow-name { margin: 0 0 .35rem; font-size: clamp(2rem, 7vw, 3.6rem); font-weight: 800; line-height: 1.1; letter-spacing: .02em; overflow-wrap: anywhere; background: linear-gradient(115deg, var(--t-red), var(--t-orange), var(--t-yellow), var(--t-green), var(--t-cyan), var(--t-blue), var(--t-magenta), var(--t-red)); background-size: 300% 300%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rainbow-phase 9s linear infinite; } a.rainbow-name { display: inline-block; text-decoration: none; } a.rainbow-name:hover { text-decoration: underline; } @keyframes rainbow-phase { from { background-position: 0% 0%; } to { background-position: 300% 300%; } } @media (prefers-reduced-motion: reduce) { .rainbow-name { animation: none; } } /* same gradient/animation as .rainbow-name and .t-name, without their fixed sizing — for one-off headings (e.g. the calendar's selected-day heading) that need to inherit their own font-size */ .rainbow-text { background: linear-gradient(115deg, var(--t-red), var(--t-orange), var(--t-yellow), var(--t-green), var(--t-cyan), var(--t-blue), var(--t-magenta), var(--t-red)); background-size: 300% 300%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rainbow-phase 9s linear infinite; } @media (prefers-reduced-motion: reduce) { .rainbow-text { animation: none; } } /* stat tiles — the bordered neon panels from the TUI profile */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin: 1.3rem 0 .4rem; } .tile { border: 1px solid var(--tile-c, var(--t-border)); border-radius: 8px; background: var(--t-panel2); padding: .55rem .8rem .65rem; text-align: center; } .tile .tl { color: var(--tile-c, var(--t-dim)); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: lowercase; } .tile .tv { color: var(--tile-c, var(--t-fg)); font-size: 1.45rem; font-weight: 700; line-height: 1.25; } .tile .ts { color: var(--t-dim); font-size: .74rem; } /* summary tile spanning two grid columns (tourney win streak) */ .tile-wide { grid-column: span 2; } @media (max-width: 360px) { .tile-wide { grid-column: auto; } } /* on phones the tile's "from → to" date span breaks onto its own lines: "→ from" then "to ←" (spans emitted by streaks.blade.php's $spanTile) */ @media (max-width: 700px) { .tile .ts .ts-arrow { display: none; } .tile .ts .ts-from, .tile .ts .ts-to { display: block; } .tile .ts .ts-from::before { content: "→ "; } .tile .ts .ts-to::after { content: " ←"; } } .tile-cyan { --tile-c: var(--t-cyan); } .tile-green { --tile-c: var(--t-green); } .tile-red { --tile-c: var(--t-red); } .tile-yellow { --tile-c: var(--t-yellow); } .tile-blue { --tile-c: var(--t-blue); } .tile-magenta { --tile-c: var(--t-magenta); } .tile-orange { --tile-c: var(--t-orange); } a.tile { display: block; text-decoration: none; transition: border-color .12s ease, background .12s ease; } a.tile:hover { border-color: var(--tile-c, var(--t-fg)); background: var(--t-sel); } /* head-to-head: the TUI rival_radar win bars, █░ style */ .wbar { display: inline-block; width: 8.5em; height: .75em; border: 1px solid var(--t-border); border-radius: 3px; background: var(--t-bg); vertical-align: baseline; overflow: hidden; } .wbar i { display: block; height: 100%; } .wbar-good i { background: var(--t-green); } .wbar-mid i { background: var(--t-yellow); } .wbar-bad i { background: var(--t-red); } .rate-good { color: var(--t-green); font-weight: 700; } .rate-mid { color: var(--t-yellow); font-weight: 700; } .rate-bad { color: var(--t-red); font-weight: 700; } /* versus page: one full-width share bar, player A vs player B */ .sharebar { display: flex; height: 1.1em; border: 1px solid var(--t-border); border-radius: 4px; overflow: hidden; margin: .9rem 0 .2rem; } .sharebar .a { background: var(--t-green); } .sharebar .b { background: var(--t-red); } .sharebar .draw { background: var(--t-border); } .sharebar-legend { display: flex; justify-content: space-between; color: var(--t-dim); font-size: .85rem; } /* h2h picker form on the landing page */ .h2h-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .4rem 0 .6rem; } .h2h-form input { background: var(--t-panel2); color: var(--t-fg); border: 1px solid var(--t-border); border-radius: 5px; font: inherit; padding: .2rem .55rem; width: 14em; max-width: 100%; } .h2h-form button { background: var(--t-panel2); color: var(--t-green); border: 1px solid var(--t-border); border-radius: 5px; font: inherit; font-weight: 700; padding: .2rem .9rem; cursor: pointer; } .h2h-form button:hover { border-color: var(--t-green); } .h2h-form select { background: var(--t-panel2); color: var(--t-fg); border: 1px solid var(--t-border); border-radius: 5px; font: inherit; padding: .2rem .55rem; } /* foil cabinet win chips: dates colored by finish tier */ .win-chip { text-decoration: none; font-size: .82rem; white-space: nowrap; } .win-chip:hover { text-decoration: underline; } /* round strip: the tournament's shape in one line */ .round-strip { color: var(--t-dim); font-size: .9rem; margin: 0; overflow-wrap: anywhere; } .round-strip .sep { color: var(--t-border); } /* ── revenge cards: two games, one glance ─────────────────────────────── */ /* a compact 3x3 grid per card — rows are the two players (game 1's winner listed first, fixed for both rows), columns are the two games. Each cell is a p1/p2 pill; the active (filled) one is whoever won that column's game, so the outcome (defended 2-0, or revenge 1-1) reads from which pills are filled, not a separate win/loss label. */ .revenge-list { display: flex; flex-direction: column; gap: .4rem; } .revenge-card { position: relative; border: 1px solid var(--t-border); border-radius: 6px; background: var(--t-panel); padding: .45rem .75rem .5rem; } .revenge-meta { color: var(--t-dim); font-size: .74rem; margin: 0 0 .15rem; } .revenge-meta:last-of-type { margin-bottom: .3rem; } .revenge-meta a { color: var(--t-dim); text-decoration: none; } .revenge-meta a:hover { color: var(--t-fg); text-decoration: underline; } /* epicness bubble, top-right corner — just the number, title attr carries the explanation */ .rg-epicness { position: absolute; top: .45rem; right: .6rem; min-width: 1.7rem; text-align: center; padding: .1rem .4rem; border: 1px solid var(--t-border); border-radius: 999px; background: var(--t-panel2); color: var(--t-fg); font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; } .revenge-grid { display: grid; grid-template-columns: 1fr auto auto; column-gap: 1rem; row-gap: .15rem; align-items: center; font-size: .84rem; padding-right: 2.4rem; /* clear the epicness bubble */ } .rg-col-label { color: var(--t-dim); font-size: .66rem; text-transform: lowercase; letter-spacing: .02em; text-align: center; white-space: nowrap; } .rg-player { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem; min-width: 0; } .rg-name { color: var(--t-fg); font-weight: 600; text-decoration: none; } .rg-name:hover { text-decoration: underline; } .rg-rank { color: var(--t-dim); font-size: .68rem; font-weight: 400; white-space: nowrap; } /* p1/p2 pills — same visual language as .filter-pill (outline vs filled-active), sized down for the grid */ .rg-pill { display: block; width: 1.8rem; text-align: center; margin: 0 auto; border: 1px solid var(--t-border); border-radius: 999px; padding: .04rem 0; font-size: .64rem; font-weight: 600; letter-spacing: .02em; text-transform: lowercase; color: var(--t-dim); } .rg-pill.active { color: var(--t-bg); background: var(--t-green); border-color: var(--t-green); font-weight: 700; } /* ── shared bits ────────────────────────────────────────────────────── */ .terminal a:focus-visible, .terminal select:focus-visible { outline: 2px solid var(--t-blue); outline-offset: 2px; border-radius: 3px; } .c-red { color: var(--t-red); } .c-orange { color: var(--t-orange); } .c-yellow { color: var(--t-yellow); } .c-green { color: var(--t-green); } .c-cyan { color: var(--t-cyan); } .c-blue { color: var(--t-blue); } .c-magenta { color: var(--t-magenta); } .c-dim { color: var(--t-dim); } @media (max-width: 700px) { .term { margin: 0; border-radius: 0; border-left: none; border-right: none; } .term-body { padding: 1rem .9rem 1.4rem; } .bracket { flex-direction: column; } .stage { min-width: 0; } } /* ── calendar: github-style activity heatmap ────────────────────────── */ .hm-scroll { overflow-x: auto; padding-bottom: .3rem; } .hm { display: flex; gap: .35rem; width: max-content; } .hm-dows { display: flex; flex-direction: column; gap: 3px; margin-top: 1.1rem; /* clear the month label row */ } .hm-dows span { height: 12px; line-height: 12px; font-size: .6rem; color: var(--t-dim); text-align: right; min-width: 2rem; padding-right: .2rem; } .hm-months { display: flex; gap: 3px; height: 1.1rem; } .hm-months span { width: 12px; overflow: visible; white-space: nowrap; font-size: .62rem; color: var(--t-dim); } .hm-grid { display: flex; gap: 3px; } .hm-week { display: flex; flex-direction: column; gap: 3px; } .hm-day { display: block; width: 12px; height: 12px; border-radius: 2px; box-sizing: border-box; position: relative; } .hm-void { background: transparent; } .hm-day.l0 { background: var(--t-panel2); border: 1px solid var(--t-border); } .hm-day.l1 { background: color-mix(in srgb, var(--t-green) 30%, var(--t-bg)); } .hm-day.l2 { background: color-mix(in srgb, var(--t-green) 55%, var(--t-bg)); } .hm-day.l3 { background: color-mix(in srgb, var(--t-green) 80%, var(--t-bg)); } .hm-day.l4 { background: var(--t-green); } a.hm-day:hover { outline: 1px solid var(--t-fg); } .hm-day.hm-sel { outline: 2px solid var(--t-yellow); } /* small corner dot: a canceled event was also recorded on this calendar day — orthogonal to the green fill, which tracks recorded coverage, not attendance (e.g. Thursday casuals that often fail to run) */ .hm-day.hm-canceled::after { content: ""; position: absolute; top: -2px; right: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--t-red); box-shadow: 0 0 0 1px var(--t-panel2); } .hm-legend { display: flex; align-items: center; gap: 4px; font-size: .78rem; margin: .4rem 0 1rem; } .hm-legend .hm-day { display: inline-block; } /* ── calendar: date jump form, selected-day nav, missing-dates list ──── */ .date-jump { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .date-jump input[type="date"] { background: var(--t-panel2); color: var(--t-fg); border: 1px solid var(--t-border); border-radius: 4px; padding: .3rem .5rem; font-family: inherit; font-size: .85rem; } .date-jump button { background: var(--t-panel2); color: var(--t-fg); border: 1px solid var(--t-border); border-radius: 4px; padding: .3rem .7rem; font-family: inherit; font-size: .85rem; cursor: pointer; } .date-jump button:hover { border-color: var(--t-fg); } .day-nav { display: flex; flex-wrap: wrap; gap: .9rem; margin: 0 0 .8rem; font-size: .82rem; } .day-nav a { color: var(--t-dim); text-decoration: none; } .day-nav a:hover { color: var(--t-fg); text-decoration: underline; } /* canceled events shown alongside real ones in the day table, in the same red used for the heatmap's canceled dot and the day-page note */ tr.row-canceled td { color: var(--t-red); } .missing-year { margin: 0 0 .4rem; } .missing-year summary { cursor: pointer; color: var(--t-fg); font-weight: 600; padding: .3rem 0; } .missing-year summary:hover { color: var(--t-cyan); } .missing-grid { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 .9rem; } .missing-chip { display: inline-flex; align-items: center; gap: .3rem; background: var(--t-panel2); border: 1px solid var(--t-border); border-radius: 4px; padding: .15rem .45rem; font-size: .78rem; color: var(--t-dim); text-decoration: none; scroll-margin-top: 5rem; } .missing-chip:hover { color: var(--t-fg); border-color: var(--t-fg); } .missing-chip-canceled { border-color: color-mix(in srgb, var(--t-red) 50%, var(--t-border)); } .missing-chip .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--t-red); display: inline-block; } /* screenshot gallery */ .shot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .9rem; margin-top: 1rem; } .shot-card { display: block; border: 1px solid var(--t-border); border-radius: 8px; background: var(--t-panel2); padding: .5rem .5rem .6rem; text-decoration: none; transition: border-color .12s ease, background .12s ease; } .shot-card:hover { border-color: var(--t-cyan); background: var(--t-sel); } .shot-card img { width: 100%; height: 180px; object-fit: cover; object-position: top; display: block; border-radius: 4px; border: 1px solid var(--t-border); margin-bottom: .45rem; } .shot-name { display: block; color: var(--t-fg); font-size: .82rem; word-break: break-all; } .shot-meta { display: block; color: var(--t-dim); font-size: .74rem; margin-top: .15rem; } /* ── tournament log: terminal-themed card manifest (tourneys-log.blade) ─ */ .tlog-filter { background: var(--t-panel2); border: 1px solid var(--t-border); border-radius: 4px; color: var(--t-fg); font: inherit; font-size: .85rem; padding: .15rem .5rem; width: 16rem; max-width: 60vw; } .tlog-filter:focus { outline: none; border-color: var(--t-cyan); } .tlog-filter::placeholder { color: var(--t-dim); } .tlog-count { font-size: .78rem; margin-left: .4rem; } .tlog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .8rem; margin-top: 1rem; } .tlog-card { display: flex; flex-direction: column; gap: .5rem; border: 1px solid var(--t-border); border-radius: 8px; background: var(--t-panel2); padding: .75rem .85rem; text-decoration: none; color: inherit; transition: border-color .12s ease, background .12s ease; } .tlog-card:hover { border-color: var(--t-cyan); background: var(--t-sel); } .tlog-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; font-size: .78rem; } .tlog-when { display: inline-flex; align-items: baseline; gap: .5rem; } .tlog-time { font-size: .72rem; } .tlog-hash { font-size: .68rem; letter-spacing: .04em; } .tlog-name { color: var(--t-fg); font-weight: 600; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tlog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; font-size: .82rem; } .tlog-pill { color: var(--t-cyan); border: 1px solid var(--t-border); border-radius: 3px; padding: .1rem .45rem; font-size: .7rem; letter-spacing: .02em; white-space: nowrap; } .tlog-stat { display: inline-flex; align-items: center; gap: .3rem; color: var(--t-fg); } .tlog-foil, .tlog-winner { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tlog-foil { color: var(--t-magenta); } .tlog-winner { color: var(--t-yellow); } .tlog-meta svg { flex-shrink: 0; opacity: .8; } .tlog-empty { margin-top: 1rem; } /* ── navbar (terminal theme, Bootstrap-free) ───────────────────────── */ .t-nav { display: flex; align-items: center; gap: .9rem; max-width: 1080px; margin: .9rem auto 0; padding: .45rem .9rem; border: 1px solid var(--t-border); border-radius: 10px; background: var(--t-panel2); font-size: .88rem; position: relative; z-index: 50; } .t-nav-brand { font-weight: 700; text-decoration: none; white-space: nowrap; letter-spacing: .02em; } .t-nav-brand .p-user { color: var(--t-green); } .t-nav-brand .p-path { color: var(--t-blue); } .t-nav-at { color: var(--t-dim); } .t-nav-brand:hover .p-path { text-decoration: underline; } /* admin login form (admin-login.blade.php) */ .admin-login { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; } .admin-login input { background: var(--t-panel2); border: 1px solid var(--t-border); border-radius: 6px; color: var(--t-fg); font: inherit; padding: .3rem .6rem; width: 14rem; } .admin-login input:focus { outline: none; border-color: var(--t-blue); } .admin-login button { background: none; border: 1px solid var(--t-border); border-radius: 6px; color: var(--t-dim); font: inherit; font-size: .85rem; padding: .3rem .8rem; cursor: pointer; } .admin-login button:hover { color: var(--t-fg); border-color: var(--t-blue); } .admin-login .pw-wrap { position: relative; display: inline-flex; align-items: center; } .admin-login .pw-wrap input { padding-right: 3.2rem; } .admin-login .pw-toggle { position: absolute; right: .35rem; border: none; background: none; color: var(--t-dim); font-size: .75rem; padding: .15rem .3rem; } .admin-login .pw-toggle:hover { color: var(--t-fg); } /* ingest log (update.blade.php) */ .update-log { font-size: .85rem; line-height: 1.55; } .update-log .log-ok { color: var(--t-green); } .update-log .log-err { color: var(--t-red); } .update-log .log-warn { color: var(--t-yellow); } .update-log .log-dim { color: var(--t-dim); } .update-log .log-dim:not(:first-child) { margin-top: .45rem; } .update-log .log-data summary { color: var(--t-dim); cursor: pointer; font-size: .75rem; user-select: none; } .update-log .log-data summary:hover { color: var(--t-fg); } .update-log .log-data pre { background: var(--t-panel2); border: 1px solid var(--t-border); border-radius: 6px; color: var(--t-fg); padding: .5rem .7rem; margin: .3rem 0 .5rem; font-size: .75rem; max-height: 22rem; overflow: auto; } .t-nav-ver { color: var(--t-dim); font-size: .72rem; white-space: nowrap; align-self: center; letter-spacing: .04em; } .t-nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--t-border); border-radius: 6px; color: var(--t-dim); font: inherit; padding: .15rem .55rem; cursor: pointer; } .t-nav-toggle:hover { color: var(--t-fg); border-color: var(--t-fg); } .t-nav-menu { display: flex; align-items: center; gap: .9rem; flex: 1; min-width: 0; } .t-nav-list { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; } .t-nav-drop { position: relative; } .t-nav-link { display: inline-flex; align-items: center; gap: .3rem; background: none; border: 0; border-radius: 6px; color: var(--t-dim); font: inherit; padding: .2rem .55rem; text-decoration: none; cursor: pointer; transition: color .12s ease, background .12s ease; } .t-nav-link:hover { color: var(--t-fg); background: var(--t-sel); } .t-nav-link.active { color: var(--t-cyan); } .t-nav-link.active::before { content: "▸"; margin-right: .1rem; } .t-nav-link .caret { font-size: .7em; color: var(--t-dim); } .t-nav-drop.open > .t-nav-link { color: var(--t-fg); background: var(--t-sel); } .t-nav-panel { display: none; position: absolute; top: calc(100% + .35rem); left: 0; min-width: 13rem; list-style: none; margin: 0; padding: .3rem; background: var(--t-panel); border: 1px solid var(--t-border); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); } .t-nav-drop.open > .t-nav-panel { display: block; } .t-nav-panel a { display: block; padding: .28rem .6rem; border-radius: 5px; color: var(--t-fg); text-decoration: none; white-space: nowrap; } .t-nav-panel a:hover { background: var(--t-sel); color: var(--t-cyan); } .t-nav-panel a::before { content: "$ "; color: var(--t-dim); } .t-nav-search { position: relative; display: flex; align-items: center; gap: .35rem; padding: .12rem .55rem; border: 1px solid var(--t-border); border-radius: 6px; background: var(--t-bg); } .t-nav-search:focus-within { border-color: var(--t-cyan); } .t-nav-search-spin { min-width: 1ch; color: var(--t-cyan); } .t-nav-search-results { position: absolute; top: calc(100% + .35rem); right: 0; width: max-content; min-width: 100%; max-width: 26rem; list-style: none; margin: 0; padding: .3rem; background: var(--t-panel); border: 1px solid var(--t-border); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); z-index: 30; } .t-nav-search-results a { display: block; padding: .28rem .6rem; border-radius: 5px; color: var(--t-fg); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .t-nav-search-results a::before { content: "$ "; color: var(--t-dim); } .t-nav-search-results a:hover, .t-nav-search-results a.active { background: var(--t-sel); color: var(--t-cyan); } .t-nav-search-results .t-nav-panel-head { padding: .3rem .6rem .1rem; color: var(--t-dim); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; } .t-nav-search-results li + .t-nav-panel-head { margin-top: .25rem; } .t-nav-search-hint { color: var(--t-dim); font-size: .85em; } .t-nav-search-empty { padding: .28rem .6rem; color: var(--t-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .t-nav-search-prefix { color: var(--t-dim); } .t-nav-search input { background: none; border: 0; outline: none; color: var(--t-fg); font: inherit; width: 8.5rem; } .t-nav-search input::placeholder { color: var(--t-dim); } @media (max-width: 860px) { .t-nav { flex-wrap: wrap; margin: .9rem .8rem 0; } .t-nav-toggle { display: block; } /* the open menu overlays the page below the titlebar instead of pushing it down; anchored to the titlebar so it spans the full term width (the nav itself goes static to hand off positioning) */ .term-titlebar { position: relative; } .term-titlebar .t-nav { position: static; } .t-nav-menu { display: none; flex-direction: column; align-items: stretch; gap: .5rem; position: absolute; top: 100%; left: 0; right: 0; z-index: 60; padding: .6rem .8rem .8rem; background: var(--t-panel2); border: 1px solid var(--t-border); border-top: 0; border-radius: 0 0 8px 8px; box-shadow: 0 16px 34px rgba(0, 0, 0, .5); } .t-nav.menu-open .t-nav-menu { display: flex; } .t-nav-list { flex-direction: column; align-items: stretch; } .t-nav-drop .t-nav-link { width: 100%; } .t-nav-panel { position: static; box-shadow: none; margin: .2rem 0 .2rem 1rem; } .t-nav-search { margin-left: 0; } .t-nav-search input { width: 100%; flex: 1; } } /* win/loss form sparkline (player page): ticks rise for wins and drop for losses off a shared center baseline, so polarity reads by direction even without color */ .spark { display: flex; align-items: flex-start; gap: 2px; margin-top: .9rem; width: fit-content; max-width: 100%; overflow-x: auto; /* baseline sits at the middle of the 46px bar zone */ background: linear-gradient(var(--t-border), var(--t-border)) 0 23px / 100% 1px no-repeat; } .spark-tick { display: flex; flex-direction: column; align-items: center; width: 14px; text-decoration: none; } .spark-bar { position: relative; display: block; width: 12px; height: 46px; } .spark-bar::before { content: ""; position: absolute; left: 0; right: 0; border-radius: 2px; } .spark-win .spark-bar::before { background: var(--t-green); top: 2px; bottom: 50%; } .spark-loss .spark-bar::before { background: var(--t-red); top: 50%; bottom: 2px; } .spark-tick:hover .spark-bar::before { filter: brightness(1.35); } /* opponent name below each tick, reading bottom-to-top so the first letter sits at the bottom */ .spark-name { writing-mode: vertical-rl; transform: rotate(180deg); margin-top: .35rem; max-height: 8.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; color: var(--t-dim); } .spark-tick:hover .spark-name { filter: brightness(1.35); text-decoration: underline; } /* text colored by round type: rt-* classes carry --pill-c */ .rt-ink { color: var(--pill-c, var(--t-dim)); } .spark-caption { margin: .5rem 0 0; font-size: .82rem; } /* player search panel (players page) */ .ps-box { display: flex; align-items: center; gap: .45rem; margin-top: .8rem; padding: .3rem .7rem; max-width: 26rem; border: 1px solid var(--t-border); border-radius: 6px; background: var(--t-bg); } .ps-box:focus-within { border-color: var(--t-cyan); } .ps-prefix { color: var(--t-dim); } .ps-box input { flex: 1; background: none; border: 0; outline: none; color: var(--t-fg); font: inherit; } .ps-box input::placeholder { color: var(--t-dim); } .ps-spin { min-width: 1ch; color: var(--t-cyan); } #ps-results.is-loading .t-tablewrap { opacity: .45; } #ps-results.is-loading .ps-status { color: var(--t-cyan); animation: ps-pulse 1s ease-in-out infinite; } @keyframes ps-pulse { 50% { opacity: .45; } } #ps-results { margin-top: .9rem; } .ps-status { margin: .5rem 0 0; font-size: .82rem; } /* achievement timeline (player/timeline page): left-rail event log. tml-* classes carry --tml-c per event type for the dot + badge */ .tml { list-style: none; margin: .4rem 0 0; padding: 0; } .tml-item { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; padding: .3rem 0 .3rem 1.1rem; border-left: 2px solid var(--t-border); } .tml-item::before { content: ''; position: absolute; left: -5px; top: .72em; width: 8px; height: 8px; border-radius: 50%; background: var(--tml-c, var(--t-dim)); } .tml-title { --tml-c: var(--t-yellow); } .tml-final { --tml-c: var(--t-cyan); } .tml-milestone { --tml-c: var(--t-magenta); } .tml-streak { --tml-c: var(--t-green); } .tml-major::before { box-shadow: 0 0 6px 1px var(--tml-c); } .tml-major .tml-what { font-weight: 700; } .tml-date { min-width: 4.2ch; font-size: .78rem; color: var(--t-dim); white-space: nowrap; } .tml-badge { font-size: .62rem; letter-spacing: .08em; color: var(--tml-c, var(--t-dim)); border: 1px solid var(--tml-c, var(--t-border)); border-radius: 4px; padding: 0 .3rem; white-space: nowrap; } .tml-body { flex: 1; min-width: 12rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; } .tml-metric { font-size: .74rem; color: var(--tml-c, var(--t-dim)); white-space: nowrap; } .tml-sub { flex-basis: 100%; font-size: .82rem; color: var(--t-dim); } .tml-map a span { margin-left: .1rem; } @media (max-width: 40rem) { .tml-item { padding-left: .8rem; } .tml-date { flex-basis: 100%; } }