bkvargyasandClaude Fable 5.1
62efa4d127
Matches are positioned per round with SVG connector lines between feeder and next match, winners in bold, live matches tagged with their court, empty slots labelled with what fills them (W R1.4, L R2.1), and the viewer's team highlighted along its path. Double elimination renders winners, losers and finals trees. Narrow screens default to a scaled fit-to-width view; a round-by-round list is also available. Seed script gains --stage=bracket|double. Release 0.3.0. Co-Authored-By: Claude Fable 5.1 <[email protected]> Claude-Session: https://claude.ai/code/session_01MB7nCCAscYsb3zzkT6LHZi
108 lines
12 KiB
CSS
108 lines
12 KiB
CSS
:root{
|
|
--bg:#F7F8F6;--surface:#fff;--ink:#17202A;--muted:#5B6875;--line:#DCE1DE;
|
|
--accent:#1D6FB5;--accent-ink:#fff;--accent-soft:#E4EFF9;--sand:#B98F3F;--sand-soft:#F6EBD2;
|
|
--good:#2E8B57;--warn:#C97B1C;--crit:#C0392B;--court:#1A6FB5;--court-ink:#fff;
|
|
}
|
|
@media (prefers-color-scheme:dark){:root{--bg:#12181F;--surface:#1A222B;--ink:#E8ECEF;--muted:#9AA6B1;--line:#2B3640;--accent:#5AA3E6;--accent-ink:#0E1A26;--accent-soft:#1B3040;--sand:#D9B26E;--sand-soft:#3A3120;--good:#5FCB8A;--warn:#E39A3B;--crit:#E5655A;--court:#1D5F99}}
|
|
*{box-sizing:border-box}
|
|
html{-webkit-text-size-adjust:100%}
|
|
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Source Sans 3",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;font-size:17px;line-height:1.5}
|
|
a{color:var(--accent)}
|
|
h1,h2,h3{font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;line-height:1.1;margin:0;text-wrap:balance}
|
|
h1{font-size:44px;font-weight:700}h2{font-size:26px;font-weight:600}h3{font-size:20px;font-weight:600;color:var(--muted)}
|
|
.mono{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
|
|
.muted{color:var(--muted)}.small{font-size:14px}.tbd{color:var(--muted);font-style:italic}
|
|
main{max-width:960px;margin:0 auto;padding:16px 16px 64px}
|
|
.top{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--surface)}
|
|
.brand{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:22px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);text-decoration:none}
|
|
.top nav a{margin-left:16px;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:15px;text-decoration:none}
|
|
.foot{text-align:center;color:var(--muted);font-size:13px;padding:24px}
|
|
.eyebrow{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:13px;font-weight:600;color:var(--muted)}
|
|
.hero{padding:18px 0 8px}.hero.compact{padding:8px 0}.lede{color:var(--muted);margin:6px 0 0}.notes{white-space:pre-line}
|
|
.pill{display:inline-block;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:600;padding:2px 8px;border-radius:3px;line-height:1.5;vertical-align:middle;background:var(--accent-soft);color:var(--accent)}
|
|
.pill.live{background:var(--good);color:#fff}.pill.final{background:var(--sand-soft);color:var(--sand)}.pill.checkin{background:var(--accent);color:var(--accent-ink)}
|
|
.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px;margin:14px 0}
|
|
.card h2{margin-bottom:8px}
|
|
.list .row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 14px;margin:8px 0;background:var(--surface);border:1px solid var(--line);border-radius:8px;color:var(--ink);text-decoration:none}
|
|
.flash{padding:10px 14px;border-radius:6px;margin:12px 0;background:var(--accent-soft)}.flash.error{background:var(--sand-soft);color:var(--crit);border-left:3px solid var(--crit)}
|
|
.banner{background:var(--sand-soft);border-left:3px solid var(--sand);padding:10px 14px;border-radius:0 6px 6px 0;margin:12px 0;font-weight:600}
|
|
.champion{text-align:center;padding:20px;margin:14px 0;border:2px solid var(--sand);border-radius:8px;background:var(--sand-soft)}.champion h2{font-size:40px}
|
|
/* forms */
|
|
.form label{display:block;margin:12px 0;font-weight:600}
|
|
.form input,.form textarea,.form select{display:block;width:100%;margin-top:4px;padding:10px 12px;font:inherit;font-weight:400;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink)}
|
|
button,.button{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:17px;font-weight:600;padding:10px 18px;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;text-decoration:none;display:inline-block;line-height:1.2}
|
|
button.primary,.button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
|
|
button.danger{color:var(--crit);border-color:var(--crit)}button.small{font-size:14px;padding:6px 10px}
|
|
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
|
|
.linkbox{word-break:break-all;background:var(--bg);padding:10px;border-radius:6px}
|
|
/* courts */
|
|
.courts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin:14px 0}
|
|
.court{background:var(--court);color:var(--court-ink);border-radius:8px;padding:12px 14px;position:relative;overflow:hidden;min-height:96px}
|
|
.court:before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:2px dashed rgba(255,255,255,.35)}
|
|
.court.idle,.court.paused{background:var(--surface);color:var(--muted);border:1px dashed var(--line)}.court.idle:before,.court.paused:before{display:none}
|
|
.court.mine{outline:3px solid var(--sand)}
|
|
.court .lbl{font-family:"Barlow Condensed",sans-serif;font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.85;position:relative}
|
|
.court .teams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-top:6px;position:relative}
|
|
.court .t{font-family:"Barlow Condensed",sans-serif;font-size:24px;font-weight:600;line-height:1.05}
|
|
.court .t:last-child{text-align:right}
|
|
.court .s{font-size:30px;background:#0F1418;color:#fff;padding:2px 10px;border-radius:4px}
|
|
.queue{background:#0F1418;color:#F2F5F7;border-radius:8px;padding:12px 16px;margin:12px 0;display:grid;grid-template-columns:auto 1fr auto;gap:6px 14px;align-items:center}
|
|
.queue .eyebrow{grid-column:1/-1;color:#8E9BA6}
|
|
.qrow{display:contents}.qrow .k{font-family:"Barlow Condensed",sans-serif;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#8E9BA6}
|
|
.qrow:first-of-type span:nth-child(2){color:#F0C46B;font-weight:600}.qrow.mine span:nth-child(2){text-decoration:underline}.qrow .eta{font-size:13px;color:#8E9BA6}
|
|
/* pools */
|
|
.pools{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
|
|
table{width:100%;border-collapse:collapse;font-size:15px}th{text-align:left;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--muted);padding:4px 6px;border-bottom:1px solid var(--ink)}
|
|
td{padding:6px;border-bottom:1px solid var(--line)}.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
|
|
tr.withdrawn td{color:var(--muted);text-decoration:line-through}tr.mine td{background:var(--sand-soft)}.tb{color:var(--sand);margin-left:3px}
|
|
details{margin-top:8px}summary{cursor:pointer;color:var(--muted);font-size:14px}
|
|
ul.plain,ol.plain{list-style:none;padding:0;margin:8px 0}ol.plain{counter-reset:n}ol.plain li{padding:4px 0}
|
|
.cols{columns:2;column-gap:24px}
|
|
.matches li,.sched li{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:8px;padding:5px 0;border-bottom:1px solid var(--line);font-size:15px;align-items:center}
|
|
.sched li{grid-template-columns:auto 1fr auto}.matches li span:first-child{color:var(--muted);font-size:12px}.matches li span:last-child{text-align:right}
|
|
.matches li.live,.sched li.live{background:var(--accent-soft)}.won{font-weight:600}.matches li.mine{outline:1px solid var(--sand)}
|
|
.mine.card{border-color:var(--sand);border-width:2px}.big{font-size:20px}
|
|
/* bracket */
|
|
.bracketwrap .bhead{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
|
|
.bviews{display:flex;gap:4px}.bviews .cur{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
|
|
.bstage{margin-top:14px}.bhint{margin:8px 0 0}
|
|
.btree-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;padding-bottom:6px}
|
|
.btree{position:relative}.rlbls{position:absolute;top:0;left:0;right:0;height:22px}
|
|
.rlbl{position:absolute;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--muted);text-align:center;white-space:nowrap}
|
|
.bcanvas{position:absolute;left:0}.bcanvas svg{position:absolute;left:0;top:0;overflow:visible}
|
|
.bcanvas path{fill:none;stroke:var(--line);stroke-width:2}.bcanvas path.decided{stroke:var(--muted)}.bcanvas path.mine{stroke:var(--sand);stroke-width:3}
|
|
.bm{position:absolute;border:1px solid var(--line);border-radius:6px;background:var(--surface);font-size:14px;display:flex;flex-direction:column;justify-content:center;overflow:visible}
|
|
.bm.list{position:static;width:auto;height:auto;margin:8px 0}
|
|
.brow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 9px;line-height:1.25;min-height:50%}
|
|
.brow+.brow{border-top:1px solid var(--line)}
|
|
.brow .bn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brow .bs{flex:none;min-width:1.5em;text-align:right;color:var(--muted)}
|
|
.brow.won .bn{font-weight:600}.brow.won .bs{color:var(--ink);font-weight:600}.brow.mine{background:var(--sand-soft)}
|
|
.bm.live{border-color:var(--good);box-shadow:0 0 0 1px var(--good)}.bm.on_deck{border-style:dashed}.bm.mine{border-color:var(--sand);border-width:2px}
|
|
.btag{position:absolute;left:50%;transform:translateX(-50%);bottom:-9px;white-space:nowrap;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:10px;padding:0 6px;border-radius:3px;background:var(--bg);border:1px solid var(--line);color:var(--muted);line-height:1.5}
|
|
.btag.live{background:var(--good);color:#fff;border-color:var(--good)}
|
|
.bm.list .btag{position:static;transform:none;display:inline-block;align-self:flex-start;margin:4px 9px 6px}
|
|
.blist{margin-top:10px}.blist .rlbl{position:static;text-align:left}
|
|
.bracketwrap.fit .btree-scroll{overflow:hidden}
|
|
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#0F1418;color:#fff;padding:12px 18px;border-radius:8px;max-width:90vw;box-shadow:0 8px 30px rgba(0,0,0,.3);z-index:9;font-weight:600}
|
|
.loading{color:var(--muted);padding:24px}
|
|
/* display (TV) mode */
|
|
body.display{font-size:22px;background:#0F1418;color:#F2F5F7}
|
|
body.display .top,body.display .foot{display:none}body.display main{max-width:none;padding:20px 28px}
|
|
body.display .display-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}body.display h1{font-size:56px}
|
|
body.display .court .t{font-size:40px}body.display .court .s{font-size:52px}body.display .court{min-height:150px}
|
|
body.display .card{background:#1A222B;border-color:#2B3640;color:#F2F5F7}body.display td{border-color:#2B3640}body.display .bm{background:#12181F;border-color:#2B3640}body.display .brow+.brow{border-color:#2B3640}body.display .bcanvas path{stroke:#3A4652}body.display .btag{background:#1A222B;border-color:#2B3640}
|
|
body.display .queue{font-size:26px}body.display details{display:none}
|
|
/* admin */
|
|
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
|
|
.inline{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}.inline input{width:auto}
|
|
.phases{display:flex;gap:6px;flex-wrap:wrap}.phases .cur{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
|
|
.scorepad{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin:10px 0}
|
|
.scorepad .team{font-family:"Barlow Condensed",sans-serif;font-size:20px;font-weight:600}
|
|
.scorepad .pts{font-size:44px;text-align:center}
|
|
.scorepad .btns{display:flex;gap:6px;justify-content:center}.scorepad .btns button{font-size:24px;padding:6px 18px}
|
|
.adm-table td form{display:inline}
|
|
.qr{text-align:center}.qr img{width:min(70vw,360px);image-rendering:pixelated;border:8px solid #fff;border-radius:6px}
|
|
@media (max-width:640px){h1{font-size:34px}.cols{columns:1}.court .t{font-size:20px}.court .s{font-size:24px}}
|
|
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
|
|
@media print{.top,.foot,button{display:none}body{background:#fff;color:#000}}
|