.tm-manager[data-site="dark"] { --tm-bg:#171717; --tm-surface:#222; --tm-surface-2:#2b2b2b; --tm-border:#3a3a3a; --tm-text:#f2f2f2; --tm-muted:#a3a3a3; --tm-soft:#767676; --tm-accent:#ff8c00; --tm-blue:#2f7dd3; --tm-green:#259b55; --tm-red:#bf3d3d; --tm-yellow:#ffc247; --tm-input-bg:#151515; --tm-match-bg:#191919; --tm-row-bg:rgba(255,255,255,.035); --tm-line:#555; color-scheme: dark; } .tm-manager[data-site="dark"] input[type="date"], .tm-manager[data-site="dark"] input[type="time"], .tm-manager[data-site="dark"] input[type="datetime-local"] { color-scheme: dark; } .tm-manager[data-site="dark"] input[type="date"]::-webkit-calendar-picker-indicator, .tm-manager[data-site="dark"] input[type="time"]::-webkit-calendar-picker-indicator, .tm-manager[data-site="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23f2f2f2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:18px 18px; filter:none !important; opacity:1 !important; cursor:pointer; } .tm-manager[data-site="dark"] input:-webkit-autofill, .tm-manager[data-site="dark"] textarea:-webkit-autofill, .tm-manager[data-site="dark"] select:-webkit-autofill { -webkit-text-fill-color:#f2f2f2 !important; caret-color:#f2f2f2 !important; box-shadow:0 0 0 1000px #151515 inset !important; border-color:#3a3a3a !important; transition:background-color 9999s ease-out 0s !important; } .tm-manager[data-site="light"] { --tm-bg:transparent; --tm-surface:rgba(255,255,255,.2); --tm-surface-2:rgba(255,255,255,.2); --tm-border:rgba(255,255,255,.35); --tm-text:#1d2330; --tm-muted:#5a6370; --tm-soft:#8a92a0; --tm-accent:#ff8c00; --tm-blue:#2f7dd3; --tm-green:#1f8b48; --tm-red:#c64141; --tm-yellow:#d99500; --tm-input-bg:rgba(255,255,255,.2); --tm-match-bg:rgba(255,255,255,.2); --tm-row-bg:rgba(255,255,255,.12); --tm-line:rgba(0,0,0,.22); } .tm-manager[data-site="light"][data-default-theme="dark"] { --tm-bg:#ffffff !important; background:#ffffff !important; } .tm-manager { color: var(--tm-text); text-align:left; background: var(--tm-bg); } .tm-manager * { box-sizing:border-box; } .tm-shell { max-width:none; width:99%; margin:0 auto; padding:30px 0px 28px; } .tm-head { display:flex; justify-content:flex-end; align-items:center; gap:12px; margin:6px 0 16px; } .tm-head.tm-head-viewer { justify-content:flex-end; } .tm-head.tm-head-viewer .tm-head-main { display:none; } /* detail views move Back + theme into the card, leaving the top bar empty */ .tm-head.tm-head-empty { display:none; } /* Back + theme row pinned to the top-right of the public tournament hero card */ .tm-public-hero-actions { margin:0 0 10px; } .tm-title { display:flex; align-items:center; gap:10px; font-size:24px; font-weight:800; } .tm-title .material-symbols-outlined { color:var(--tm-accent); font-size:28px; } .tm-title-actions { display:inline-flex; align-items:center; gap:6px; margin-left:6px; } .tm-subtitle { color:var(--tm-muted); font-size:13px; margin-top:4px; } .tm-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; } .tm-publish-options { display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:5px 8px; border:1px solid var(--tm-border); border-radius:7px; background:var(--tm-surface-2); } .tm-publish-options > span, .tm-publish-same > span, .tm-publish-mode-select span, .tm-publish-stage-group-title { color:var(--tm-muted); font-size:11px; font-weight:800; text-transform:uppercase; } .tm-publish-options input, .tm-group-tools input { min-height:28px; border:1px solid var(--tm-border) !important; border-radius:6px; background:var(--tm-input-bg) !important; color:var(--tm-text) !important; -webkit-text-fill-color:var(--tm-text) !important; caret-color:var(--tm-text) !important; text-align:center; font-weight:900; } .tm-publish-options input { width:70px; } .tm-publish-options select { min-height:28px; border:1px solid var(--tm-border) !important; border-radius:6px; background:var(--tm-input-bg) !important; color:var(--tm-text) !important; -webkit-text-fill-color:var(--tm-text) !important; caret-color:var(--tm-text) !important; font-weight:900; } .tm-publish-options .tm-publish-target-mode { width:auto !important; min-width:180px; } .tm-publish-options .tm-publish-stage-value { width:78px; } .tm-publish-options-head { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; } .tm-publish-mode-select { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .tm-publish-same { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .tm-publish-stage-list { display:none; gap:10px; } .tm-publish-options[data-tm-publish-mode="stages"] .tm-publish-same { display:none; } .tm-publish-options[data-tm-publish-mode="stages"] .tm-publish-stage-list { display:grid; } .tm-publish-stage-group { display:grid; gap:6px; } .tm-publish-stage-row { display:grid; grid-template-columns:minmax(0, 1fr) 78px; gap:8px; align-items:center; } .tm-publish-stage-label { min-width:0; color:var(--tm-text); font-size:12px; font-weight:700; text-transform:none; line-height:1.2; } .tm-btn { min-height:36px; border:0; border-radius:7px; padding:0 14px; color:#fff; background:var(--tm-blue); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px; font-weight:700; text-decoration:none; line-height:1; } .tm-btn .material-symbols-outlined { font-size:19px; } .tm-btn:hover { opacity:.9; } .tm-btn:disabled { opacity:.55; cursor:default; } .tm-replace-btn-locked { opacity:.5; } .tm-btn-primary { background:var(--tm-blue); } .tm-btn-success { background:var(--tm-green); } .tm-btn-danger { background:var(--tm-red); } .tm-btn-warning { background:#d77900; } .tm-btn-ghost { background:transparent; border:1px solid var(--tm-border); color:var(--tm-text); } .tm-btn-sm { min-height:30px; padding:0 10px; font-size:12px; } .tm-finish-banner { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:0 0 16px; padding:14px 16px; border:1px solid rgba(35,180,110,.55); border-radius:12px; background:linear-gradient(90deg,rgba(35,180,110,.18),rgba(35,180,110,.06)); } .tm-finish-banner-text { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:var(--tm-text); } .tm-finish-banner-text .material-symbols-outlined { font-size:26px; color:var(--tm-green); } .tm-finish-banner .tm-btn { white-space:nowrap; } .tm-theme-toggle { min-width:92px; } .tm-panel { background:var(--tm-surface); border:1px solid var(--tm-border); border-radius:8px; padding:16px; margin-bottom:14px; } /* The create/edit form renders inside the same .tm-panel chrome as any read-only card (#tmEditPanel only adds the id for JS targeting), so nothing marked "this is now open for editing" versus just looking. An accent wash + left bar does, in both themes: the id selector only touches background-image and border-left, so .tm-panel's own background-color/border keep applying underneath everything else. --tm-accent is the same orange in both [data-site] themes, so this needs no light/dark branch. !important on both: [data-site="light"] .tm-panel (below) sets the WHOLE `background` and `border-color` shorthand !important, which resets background-image to none and repaints border-left-color, on every .tm-panel including this one. An id beats that rule's two classes on specificity alone, but only once both sides are !important - otherwise the plain declaration loses regardless of the id, and the wash silently stopped existing in the light theme only (dark theme has no such blanket panel override, so it looked fine and hid the bug). */ #tmEditPanel { background-image:linear-gradient(165deg, rgba(255,140,0,.09), rgba(255,140,0,.015) 55%) !important; border-left:3px solid var(--tm-accent) !important; } .tm-panel-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:12px; } /* keep the card's Back/Share/Theme/Edit/End/Delete buttons on a single row (title shrinks to fit) */ .tm-panel-head > .tm-actions { flex-wrap:nowrap; flex-shrink:0; } .tm-panel-title { font-size:17px; font-weight:800; } /* Fallback value on purpose: this class is also used in myAlert() bodies (the auto-assign explainer, the out-of-credits notice), which render in the site's alert box OUTSIDE #tmManager - where --tm-muted is not defined at all. An undefined var makes the whole declaration invalid at computed-value time, so `color` silently fell back to inherit and the note came out as the alert's plain white instead of a muted second line. Readable either way, but not what it should look like; the fallback is a mid grey that works on both the dark alert box and either theme. */ .tm-panel-note { color:var(--tm-muted, #a3a3a3); font-size:13px; margin-top:4px; } .tm-tournament-logo { margin:12px 0; padding:0; border:0; background:transparent; display:block; cursor:zoom-in; text-align:left; } .tm-tournament-logo img { width:100%; max-height:540px; object-fit:contain; border-radius:8px; border:1px solid var(--tm-border); background:var(--tm-surface-2); display:block; } .tm-tournament-logo-compact { margin:0; width:104px; flex:0 0 104px; } .tm-tournament-logo-compact img { width:104px; height:auto; max-height:none; object-fit:contain; } .tm-tournament-head-copy { display:flex; align-items:flex-start; gap:12px; min-width:0; flex:1; } .tm-tournament-head-text { min-width:0; flex:1; } .tm-details-toggle { margin-top:4px; } .tm-logo-preview { display:flex; align-items:center; gap:10px; margin-top:8px; color:var(--tm-muted); font-size:12px; } .tm-logo-preview img { width:76px; height:52px; border-radius:6px; object-fit:cover; border:1px solid var(--tm-border); background:var(--tm-surface-2); } .tm-grid { display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:12px; } .tm-field { display:block; grid-column:span 4; } .tm-field-wide { grid-column:span 12; } .tm-field-half { grid-column:span 6; } .tm-field-third { grid-column:span 4; } .tm-inline-fields { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .tm-inline-fields .tm-select, .tm-inline-fields .tm-input { flex:1 1 220px; } .tm-field label, .tm-field > span { display:block; font-size:12px; color:var(--tm-muted); text-transform:uppercase; margin-bottom:5px; font-weight:700; } .tm-input, .tm-select, .tm-textarea { width:100%; min-height:38px; padding:8px 10px; border-radius:7px; border:1px solid var(--tm-border); background:var(--tm-input-bg); color:var(--tm-text); font-size:14px; outline:none; } .tm-input:focus, .tm-select:focus, .tm-textarea:focus { border-color:var(--tm-blue); } .tm-input.invalid, .tm-select.invalid, .tm-textarea.invalid { border-color:var(--tm-red); } .tm-textarea { min-height:74px; resize:vertical; } .tm-manager[data-site="dark"] .tm-input, .tm-manager[data-site="dark"] .tm-select, .tm-manager[data-site="dark"] .tm-textarea { background:#151515 !important; border-color:#3a3a3a !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; caret-color:#ffffff !important; } .tm-manager[data-site="dark"] .tm-input::placeholder, .tm-manager[data-site="dark"] .tm-textarea::placeholder { color:#a3a3a3 !important; -webkit-text-fill-color:#a3a3a3 !important; } .tm-manager[data-site="dark"] .tm-select option { background:#151515 !important; color:#ffffff !important; } .tm-manager[data-site="dark"] .tm-publish-options input, .tm-manager[data-site="dark"] .tm-group-tools input { background:#151515 !important; border-color:#3a3a3a !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; caret-color:#ffffff !important; } /* Billiardon (light theme) - force dark text against white inputs */ .tm-manager[data-site="light"] { color:#111827 !important; color-scheme:light; } .tm-manager[data-site="light"] .tm-input, .tm-manager[data-site="light"] .tm-select, .tm-manager[data-site="light"] .tm-textarea { color:#111827 !important; -webkit-text-fill-color:#111827 !important; caret-color:#111827 !important; background:#ffffff !important; border-color:rgba(17,24,39,.28) !important; } .tm-manager[data-site="light"] .tm-input::placeholder, .tm-manager[data-site="light"] .tm-textarea::placeholder { color:#6b7280 !important; -webkit-text-fill-color:#6b7280 !important; } .tm-manager[data-site="light"] .tm-select option { background:#ffffff !important; color:#111827 !important; } .tm-manager[data-site="light"] .tm-publish-options input, .tm-manager[data-site="light"] .tm-group-tools input { color:#111827 !important; -webkit-text-fill-color:#111827 !important; caret-color:#111827 !important; background:#ffffff !important; border-color:rgba(17,24,39,.28) !important; } .tm-manager[data-site="light"] .tm-panel, .tm-manager[data-site="light"] .tm-public-hero, .tm-manager[data-site="light"] .tm-stat, .tm-manager[data-site="light"] .tm-empty, .tm-manager[data-site="light"] .tm-view-tabs, .tm-manager[data-site="light"] .tm-tournament-card, .tm-manager[data-site="light"] .tm-player-row, .tm-manager[data-site="light"] .tm-group-card, .tm-manager[data-site="light"] .tm-group-stage-card, .tm-manager[data-site="light"] .tm-bracket-panel, .tm-manager[data-site="light"] .tm-match-list-panel, .tm-manager[data-site="light"] .tm-rr-match, .tm-manager[data-site="light"] .tm-sched-row, .tm-manager[data-site="light"] .tm-sort-slot { background:rgba(255,255,255,.96) !important; border-color:rgba(17,24,39,.16) !important; color:#111827 !important; } .tm-manager[data-site="light"] .tm-manual-match-list > .tm-sort-slot.tm-manual-row-alt { background:rgba(255,140,0,.16) !important; } .tm-manager[data-site="light"] .tm-bracket-match, .tm-manager[data-site="light"] .tm-match-list-row, .tm-manager[data-site="light"] .tm-bracket-side, .tm-manager[data-site="light"] .tm-side-score, .tm-manager[data-site="light"] .tm-sort-pos, .tm-manager[data-site="light"] .tm-player-number, .tm-manager[data-site="light"] .tm-icon-tile { background:#f8fafc !important; border-color:rgba(17,24,39,.14) !important; color:#111827 !important; } .tm-manager[data-site="light"] .tm-table-chip { color:#111827 !important; background:#ffffff !important; border-color:rgba(17,24,39,.18) !important; } .tm-manager[data-site="light"] .tm-player-link, .tm-manager[data-site="light"] .tm-player-name-inline, .tm-manager[data-site="light"] .tm-bracket-side, .tm-manager[data-site="light"] .tm-match-list-side, .tm-manager[data-site="light"] .tm-sched-players, .tm-manager[data-site="light"] .tm-card-title, .tm-manager[data-site="light"] .tm-panel-title { color:#111 !important; } .tm-manager[data-site="light"] .tm-player-meta, .tm-manager[data-site="light"] .tm-panel-note, .tm-manager[data-site="light"] .tm-match-list-meta, .tm-manager[data-site="light"] .tm-sched-time, .tm-manager[data-site="light"] .tm-sched-table, .tm-manager[data-site="light"] .tm-public-meta, .tm-manager[data-site="light"] .tm-bracket-round-title, .tm-manager[data-site="light"] .tm-match-list-round-title, .tm-manager[data-site="light"] .tm-bracket-match-head, .tm-manager[data-site="light"] .tm-rr-match-head, .tm-manager[data-site="light"] .tm-standings-table th, .tm-manager[data-site="light"] .tm-sort-handle, .tm-manager[data-site="light"] .tm-sched-num, .tm-manager[data-site="light"] .tm-match-status-line, .tm-manager[data-site="light"] .tm-inline-status { color:#4b5563 !important; } .tm-manager[data-site="light"] .tm-standings-table td { color:#111827 !important; } /* The minimal side paints its highlight through a ::before pseudo-element (its own layout needs the element background to stay clear), so keep it transparent and colour the pseudo-element instead. */ .tm-manager[data-site="light"] .tm-match-list-panel .tm-minimal-side.tm-player-marked { background:transparent !important; box-shadow:none !important; } .tm-manager[data-site="light"] .tm-match-list-panel .tm-minimal-side.tm-player-marked::before { background:rgba(255,230,120,.62); box-shadow:inset 0 0 0 1px rgba(194,134,0,.22); } /* Bracket + match-list sides get a visible amber highlight directly (they have no ::before). The earlier rule blanked these to transparent on light, leaving only a faint text tint that read as "no highlight". Uses the brighter standings-style yellow so it stands out on the light glass. */ .tm-manager[data-site="light"] .tm-bracket-side.tm-player-marked, .tm-manager[data-site="light"] .tm-match-list-side.tm-player-marked { background:rgba(255,230,120,.62) !important; box-shadow:inset 0 0 0 1px rgba(194,134,0,.22) !important; border-radius:6px !important; } .tm-manager[data-site="light"] .tm-bracket-side.tm-player-marked .tm-player-link, .tm-manager[data-site="light"] .tm-match-list-side.tm-player-marked .tm-player-link, .tm-manager[data-site="light"] .tm-match-list-panel .tm-minimal-side.tm-player-marked .tm-minimal-name-text { color:#9f6a00 !important; } /* Readability safety net. The small status pills/boxes colour their TEXT with an accent over a same-hue tint. On the LIGHT theme that tint sits on white, so a bright accent (e.g. the orange live-points box, or the blue/green score pills) drops below a readable contrast — the earlier light-theme block never covered these. Force darker accent text on light; the dark theme keeps the bright accents (bright-on-dark stays legible). Also lift the light "soft" token so faint secondary text (byes, hints) is legible. */ .tm-manager[data-site="light"] { --tm-soft:#6b7280; } .tm-manager[data-site="light"] .tm-score-pill { color:#1a5aa8 !important; } .tm-manager[data-site="light"] .tm-score-pill.live, .tm-manager[data-site="light"] .tm-live-chip { color:#157a3d !important; } .tm-manager[data-site="light"] .tm-side-points.live { color:#b45309 !important; } .tm-manager[data-site="light"] .tm-side-points, .tm-manager[data-site="light"] .tm-side-points.finished, .tm-manager[data-site="light"] .tm-score-pill.finished, .tm-manager[data-site="light"] .tm-finished-chip, .tm-manager[data-site="light"] .tm-rr-head-status { color:#4b5563 !important; } /* Score/points numerals always fall back to the theme text colour so a status tint can never render them (near-)invisible on either theme. */ .tm-manager .tm-side-score, .tm-manager .tm-tv-score { color:var(--tm-text) !important; } /* LIVE highlight must survive the light-theme background overrides (those use [data-site=light] .tm-bracket-match etc. which out-specify the base .live rules and were flattening the green wash to plain white in light mode). */ .tm-manager[data-site="light"] .tm-bracket-match.live, .tm-manager[data-site="light"] .tm-rr-match.live, .tm-manager[data-site="light"] .tm-match-list-row.live { background:linear-gradient(90deg, rgba(37,155,85,.30), #ffffff 52%) !important; border-color:rgba(37,155,85,.6) !important; box-shadow:0 0 0 1px rgba(37,155,85,.26), 0 0 16px rgba(37,155,85,.20) !important; } .tm-manager[data-site="light"] .tm-sched-row.live { background:#e3f6ea !important; border-color:#2d9355 !important; box-shadow:inset 4px 0 0 #45b96e !important; } .tm-manager[data-site="light"] .tm-sched-row.finished { background:#dce3eb !important; border-color:#8794a4 !important; box-shadow:inset 4px 0 0 #64748b !important; } .tm-manager[data-site="light"] .tm-match-list-row:hover { background:#eef4fb !important; border-color:rgba(47,125,211,.48) !important; box-shadow:0 8px 18px rgba(17,24,39,.08) !important; } .tm-manager[data-site="light"] .tm-match-list-row.tm-minimal-row:hover { background:rgba(47,125,211,.10) !important; border-color:rgba(47,125,211,.46) !important; } .tm-manager[data-site="light"] .tm-match-list-row.tm-minimal-row.live { background:rgba(37,155,85,.14) !important; box-shadow:none !important; } /* DARK theme text enforcement (mirror of the light block above). The host-site stylesheets that wrap the embedded manager colour global text with !important — billiardon.css sets `body`, `a` and `td` to `#000 !important` — which leaks BLACK text onto the dark surfaces when the dark theme is active (most visibly the rankings table cells `td` and player-name links `a` on billiardon in dark mode). Force readable light text so nothing disappears on the dark background; secondary/muted text keeps the theme's muted tone. */ .tm-manager[data-site="dark"] { color:#f2f2f2 !important; } .tm-manager[data-site="dark"] td, .tm-manager[data-site="dark"] .tm-standings-table td, .tm-manager[data-site="dark"] .tm-standings-name, .tm-manager[data-site="dark"] .tm-player-link, .tm-manager[data-site="dark"] .tm-player-name-inline, .tm-manager[data-site="dark"] .tm-minimal-name-text, .tm-manager[data-site="dark"] .tm-bracket-side, .tm-manager[data-site="dark"] .tm-match-list-side, .tm-manager[data-site="dark"] .tm-sched-players, .tm-manager[data-site="dark"] .tm-panel-title, .tm-manager[data-site="dark"] .tm-card-title { color:#f2f2f2 !important; } .tm-manager[data-site="dark"] .tm-player-link:hover { color:var(--tm-accent) !important; } .tm-manager[data-site="dark"] .tm-standings-table th, .tm-manager[data-site="dark"] .tm-standings-rank, .tm-manager[data-site="dark"] .tm-panel-note, .tm-manager[data-site="dark"] .tm-player-meta, .tm-manager[data-site="dark"] .tm-sched-time, .tm-manager[data-site="dark"] .tm-sched-table, .tm-manager[data-site="dark"] .tm-sched-num, .tm-manager[data-site="dark"] .tm-bracket-round-title, .tm-manager[data-site="dark"] .tm-match-list-round-title, .tm-manager[data-site="dark"] .tm-bracket-match-head, .tm-manager[data-site="dark"] .tm-rr-match-head { color:#a3a3a3 !important; } .tm-check-row { display:flex; flex-wrap:wrap; gap:10px; } .tm-check { display:inline-flex; align-items:center; gap:7px; min-height:34px; color:var(--tm-text); font-size:13px; } .tm-check-help { display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; } .tm-check-help label { display:inline-flex; align-items:center; gap:7px; min-height:34px; } .tm-check-help .tm-match-icon-btn { width:20px; height:20px; flex:0 0 auto; } .tm-check-help .tm-match-icon-btn .material-symbols-outlined { font-size:14px; } .tm-check input { width:17px; height:17px; accent-color:var(--tm-accent); } .tm-tables-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:8px; } .tm-table-chip { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--tm-border); border-radius:7px; background:var(--tm-input-bg); cursor:pointer; font-weight:700; font-size:13px; } .tm-table-chip input { width:16px; height:16px; accent-color:var(--tm-accent); } .tm-table-chip.checked { border-color:var(--tm-accent); background:rgba(255,140,0,.08); } /* Virtual tables: each grid cell stacks the selectable chip above its PIN / edit row. */ .tm-table-chip-wrap { display:flex; flex-direction:column; gap:6px; min-width:0; } .tm-table-chip-wrap .tm-table-chip { width:100%; box-sizing:border-box; } .tm-table-chip-virtual .tm-table-chip { border-style:dashed; } .tm-vt-icon { font-size:16px; color:var(--tm-accent); } .tm-vt-meta { display:flex; align-items:center; gap:6px; padding:0 2px; font-size:11px; color:var(--tm-muted); flex-wrap:wrap; } .tm-vt-pin { font-weight:800; letter-spacing:.3px; } .tm-vt-locked { display:inline-flex; align-items:center; color:var(--tm-muted); } .tm-vt-locked .material-symbols-outlined { font-size:15px; } .tm-mini-btn { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; border:1px solid var(--tm-border); border-radius:6px; background:transparent; color:var(--tm-text); cursor:pointer; } .tm-mini-btn:hover { border-color:var(--tm-accent); } .tm-mini-btn .material-symbols-outlined { font-size:15px; } .tm-vt-edit-number, .tm-vt-create-number { width:90px; min-height:28px; padding:4px 6px; font-size:12px; border:1px solid var(--tm-border); border-radius:6px; background:var(--tm-input-bg); color:var(--tm-text); font-weight:700; } .tm-vt-create { display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; } .tm-vt-create-btn .material-symbols-outlined { font-size:16px; } .tm-error { color:var(--tm-red); font-size:12px; margin-top:6px; display:none; } .tm-error.show { display:block; } .tm-list { display:grid; gap:16px; } .tm-list-switch { display:inline-flex; gap:3px; padding:3px; border:1px solid var(--tm-border); border-radius:8px; background:var(--tm-surface); } .tm-list-switch button { min-height:32px; border:0; border-radius:6px; padding:0 12px; background:transparent; color:var(--tm-muted); font-weight:800; cursor:pointer; display:inline-flex; align-items:center; gap:6px; } .tm-list-switch button.active { background:var(--tm-input-bg); color:var(--tm-accent); } .tm-manager[data-site="light"] .tm-list-switch button.active { color:var(--tm-blue) !important; } .tm-inline-count { display:inline-flex; align-items:center; gap:0px; white-space:nowrap; font-variant-numeric:tabular-nums; } .tm-inline-count .material-symbols-outlined { font-size:14px; line-height:1; } .tm-inline-count-unlimited { color:var(--tm-accent); } .tm-tournament-card { display:grid; grid-template-columns:minmax(64px, max-content) minmax(0, 1fr) auto; gap:14px; align-items:stretch; background:var(--tm-surface); border:1px solid var(--tm-border); border-left:4px solid var(--tm-accent); border-radius:10px; padding:12px 14px; transition:background .15s ease, border-color .15s ease; } .tm-tournament-card:hover { background:var(--tm-surface-2, var(--tm-input-bg)); } .tm-tournament-card .tm-card-body { min-width:0; display:flex; flex-direction:column; gap:6px; } .tm-tournament-card .tm-card-title-row { display:block; } .tm-tournament-card .tm-card-title { display:block; font-weight:800; font-size:16px; color:var(--tm-text); overflow-wrap:anywhere; text-align:left; line-height:1.25; } .tm-tournament-card .tm-card-meta { display:flex; flex-wrap:wrap; gap:8px; color:var(--tm-muted); font-size:12px; } .tm-tournament-card .tm-actions { justify-content:flex-end; align-self:end; margin-top:auto; } .tm-tournament-card.tm-league-card { cursor:pointer; } .tm-tournament-card.tm-league-card-deleted { cursor:default; } .tm-tournament-card.tm-league-card .tm-actions { pointer-events:auto; } .tm-league-detail-head { display:grid; grid-template-columns:80px minmax(0, 1fr) auto; gap:14px; align-items:center; } .tm-league-player-tools { position:relative; z-index:25; margin-bottom:12px; } .tm-league-ranking-panel { padding:0; overflow:hidden; } .tm-league-ranking-head { display:grid; grid-template-columns:48px minmax(0, 1fr) auto; gap:13px; align-items:center; padding:16px; border-bottom:1px solid var(--tm-border); background:rgba(255,140,0,.08); } .tm-league-ranking-icon { width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:var(--tm-accent); color:#fff; box-shadow:0 7px 18px rgba(0,0,0,.18); } .tm-league-ranking-icon .material-symbols-outlined { font-size:27px; } .tm-league-ranking-copy { min-width:0; } .tm-league-ranking-copy h3 { margin:2px 0 4px; color:var(--tm-text); font-size:19px; line-height:1.2; } .tm-league-ranking-league { color:var(--tm-accent); font-size:10px; line-height:1.2; font-weight:900; letter-spacing:.08em; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tm-league-ranking-count { min-width:76px; padding:8px 11px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid var(--tm-border); border-radius:11px; background:var(--tm-surface); color:var(--tm-text); } .tm-league-ranking-count strong { font-size:20px; line-height:1; } .tm-league-ranking-count span { margin-top:4px; color:var(--tm-muted); font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; } .tm-league-ranking-table-wrap { padding:6px 16px 12px; } /* --tm-lr-min is written inline per table: 650px plus one column per league tournament (see tmLeagueRankingPanelHtml). It is a variable rather than a plain inline min-width so the mobile pinch-zoom scale can still be applied to it from the stylesheet. */ .tm-league-ranking-table { min-width:calc(var(--tm-lr-min, 650px) * var(--tm-standings-scale, 1)); } .tm-league-ranking-table tbody tr:nth-child(even) td { background:var(--tm-row-bg); } .tm-league-rank-badge { width:calc(26px * var(--tm-standings-scale, 1)); height:calc(26px * var(--tm-standings-scale, 1)); display:inline-flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--tm-border); background:var(--tm-surface-2); color:var(--tm-muted); font-size:calc(11px * var(--tm-standings-scale, 1)); font-weight:900; } .tm-league-ranking-podium-1 .tm-league-rank-badge { border-color:#c18b12; background:#d8a72a; color:#1f1705; } .tm-league-ranking-podium-2 .tm-league-rank-badge { border-color:#9aa4b1; background:#cbd2da; color:#1f2937; } .tm-league-ranking-podium-3 .tm-league-rank-badge { border-color:#a46632; background:#bd7d46; color:#21150d; } .tm-league-ranking-points strong { display:inline-flex; min-width:calc(42px * var(--tm-standings-scale, 1)); min-height:calc(27px * var(--tm-standings-scale, 1)); align-items:center; justify-content:center; padding:0 calc(9px * var(--tm-standings-scale, 1)); border-radius:999px; background:rgba(255,140,0,.14); color:var(--tm-accent); font-size:calc(13px * var(--tm-standings-scale, 1)); font-variant-numeric:tabular-nums; } /* One column per league tournament. The header keeps a fixed narrow width (the title is clipped and repeated in full in the tooltip) so ten events still fit inside one horizontal scroll. */ .tm-lr-columns-note { padding:10px 16px 0; } .tm-league-ranking-table th.tm-lr-evt { width:calc(74px * var(--tm-standings-scale, 1)); min-width:calc(74px * var(--tm-standings-scale, 1)); max-width:calc(74px * var(--tm-standings-scale, 1)); padding:calc(6px * var(--tm-standings-scale, 1)); text-align:center; vertical-align:bottom; } .tm-lr-evt-idx { display:block; color:var(--tm-accent); font-size:calc(10px * var(--tm-standings-scale, 1)); font-weight:900; letter-spacing:.04em; } /* The head of a column opens the tournament it stands for. */ .tm-lr-evt-open { display:block; cursor:pointer; border-radius:6px; padding:2px 1px; } .tm-lr-evt-open:hover, .tm-lr-evt-open:focus-visible { background:rgba(255,140,0,.14); outline:none; } .tm-lr-evt-open:hover .tm-lr-evt-name, .tm-lr-evt-open:focus-visible .tm-lr-evt-name { color:var(--tm-accent); text-decoration:underline; } .tm-lr-evt-name { display:block; max-width:calc(62px * var(--tm-standings-scale, 1)); margin:2px auto 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:calc(9px * var(--tm-standings-scale, 1)); font-weight:700; text-transform:none; letter-spacing:0; } /* Seen from inside one of the league's tournaments, its own column is picked out down the table. */ .tm-league-ranking-table th.tm-lr-evt.tm-lr-current { background:rgba(255,140,0,.12); border-bottom-color:var(--tm-accent); } .tm-league-ranking-table td.tm-lr-cell.tm-lr-current { background:rgba(255,140,0,.07); } .tm-league-ranking-table th.tm-lr-first, .tm-league-ranking-table td.tm-lr-cell.tm-lr-first { border-left:1px solid var(--tm-border); } .tm-league-ranking-table td.tm-lr-cell { text-align:center; font-variant-numeric:tabular-nums; white-space:nowrap; } .tm-lr-cell-pts { font-weight:800; } .tm-lr-cell-zero .tm-lr-cell-pts { color:var(--tm-muted); font-weight:700; } .tm-lr-cell-win .tm-lr-cell-pts { color:#d8a72a; } .tm-lr-cell-place { margin-left:calc(3px * var(--tm-standings-scale, 1)); color:var(--tm-muted); font-size:calc(9px * var(--tm-standings-scale, 1)); font-weight:700; vertical-align:super; } .tm-league-ranking-table td.tm-lr-cell-empty { color:var(--tm-muted); opacity:.55; } .tm-league-ranking-table tfoot td { padding:calc(9px * var(--tm-standings-scale, 1)) calc(8px * var(--tm-standings-scale, 1)); border-top:2px solid var(--tm-border); border-bottom:0; background:var(--tm-surface-2); color:var(--tm-text); font-size:calc(11px * var(--tm-standings-scale, 1)); font-variant-numeric:tabular-nums; } .tm-lr-participants-row > td:first-child { text-align:left; color:var(--tm-muted); font-weight:800; text-transform:uppercase; letter-spacing:.035em; } .tm-lr-participants-row > td:first-child .material-symbols-outlined { margin-right:calc(7px * var(--tm-standings-scale, 1)); color:var(--tm-accent); font-size:calc(17px * var(--tm-standings-scale, 1)); vertical-align:-4px; } .tm-league-ranking-table tfoot td.tm-lr-participant-count { text-align:center; } .tm-lr-participant-count strong { display:inline-flex; min-width:calc(26px * var(--tm-standings-scale, 1)); min-height:calc(24px * var(--tm-standings-scale, 1)); align-items:center; justify-content:center; border-radius:999px; background:var(--tm-input-bg); color:var(--tm-text); } .tm-league-ranking-table tfoot td.tm-lr-participant-total { text-align:center; white-space:nowrap; } .tm-lr-participant-total strong { color:var(--tm-accent); font-size:calc(14px * var(--tm-standings-scale, 1)); } .tm-lr-participant-total span { display:block; margin-top:1px; color:var(--tm-muted); font-size:calc(8px * var(--tm-standings-scale, 1)); font-weight:800; letter-spacing:.04em; text-transform:uppercase; } .tm-migration-sql { width:100%; min-height:210px; border-radius:8px; border:1px solid var(--tm-border) !important; background:var(--tm-input-bg) !important; color:var(--tm-text) !important; padding:10px; font-family:monospace; font-size:12px; line-height:1.45; } /* Logo tile: flexible box that shows the WHOLE logo (wide or portrait) without cropping, bounded by max-width/height. Falls back to a square for the placeholder icon. */ .tm-icon-tile { width:auto; min-width:64px; max-width:130px; height:64px; border-radius:10px; background:var(--tm-input-bg); border:1px solid var(--tm-border); display:flex; align-items:center; justify-content:center; overflow:hidden; } .tm-icon-tile .material-symbols-outlined { color:var(--tm-accent); font-size:30px; } .tm-icon-tile img { width:auto; height:100%; max-width:130px; max-height:64px; object-fit:contain; display:block; } .tm-card-title { font-weight:800; font-size:16px; color:var(--tm-text); overflow-wrap:anywhere; } .tm-card-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; color:var(--tm-muted); font-size:12px; } .tm-badge { display:inline-flex; align-items:center; justify-content:center; min-height:20px; border-radius:999px; padding:0 8px; font-size:10px; font-weight:800; text-transform:uppercase; } .tm-badge-live { background:rgba(37,155,85,.18); color:var(--tm-green); } .tm-badge-upcoming { background:rgba(255,194,71,.16); color:var(--tm-yellow); } .tm-badge-ended { background:rgba(150,150,150,.18); color:var(--tm-muted); } .tm-badge-paid { background:rgba(37,155,85,.18); color:var(--tm-green); cursor:pointer; } .tm-badge-unpaid { background:rgba(191,61,61,.18); color:var(--tm-red); cursor:pointer; } .tm-badge-ff { background:rgba(255,140,0,.16); color:var(--tm-yellow); } .tm-badge-bye { background:rgba(150,150,150,.18); color:var(--tm-soft); } .tm-badge-published { background:rgba(47,125,211,.18); color:var(--tm-blue); } .tm-toolbar { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; } .tm-sched-toolbar { align-items:flex-start; } .tm-sched-toolbar-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto; } /* Timezone picker: shows which clock the times on screen use, and lets the viewer change it. */ .tm-tz-pick { display:inline-flex; align-items:center; gap:6px; padding:0 10px 0 8px; min-height:36px; border:1px solid var(--tm-border); border-radius:12px; background:var(--tm-surface); cursor:pointer; } .tm-tz-pick .material-symbols-outlined { font-size:18px; opacity:.7; flex:0 0 auto; } .tm-tz-pick .tm-tz-now { font-size:12px; font-weight:800; letter-spacing:.4px; opacity:.85; white-space:nowrap; } .tm-tz-pick .tm-select { border:0; background:transparent; min-height:34px; padding:0 2px; max-width:150px; font-size:12px; font-weight:700; cursor:pointer; } .tm-tz-pick .tm-select:focus { outline:none; } .tm-toast { position:fixed; left:16px; bottom:16px; z-index:2200; display:flex; align-items:flex-start; gap:8px; min-width:180px; max-width:min(360px, calc(100vw - 32px)); padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.08); background:rgba(17,24,39,.96); color:#fff; box-shadow:0 12px 28px rgba(0,0,0,.32); opacity:0; visibility:hidden; transform:translateY(10px); pointer-events:none; transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s; backdrop-filter:blur(4px); } .tm-manager[data-site="light"] .tm-toast { background:rgba(255,255,255,.97); color:var(--tm-text); border-color:rgba(0,0,0,.08); box-shadow:0 12px 28px rgba(0,0,0,.16); } .tm-toast.show { opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s; } .tm-toast.ok { border-color:var(--tm-green); box-shadow:0 12px 28px rgba(37,155,85,.18); } .tm-toast.error { border-color:var(--tm-red); box-shadow:0 12px 28px rgba(191,61,61,.18); } .tm-toast .tm-toast-icon { flex:0 0 auto; font-size:16px; line-height:1; margin-top:1px; } .tm-toast .tm-toast-msg { min-width:0; font-size:12px; font-weight:800; line-height:1.25; white-space:pre-wrap; word-break:break-word; } /* Connection-lost banner. Top-centre, above everything including the TV board and the fullscreen overlays - if the connection is gone while the board is on the wall, that is exactly when it most needs saying. Deliberately not dismissible: it clears itself the moment a request works. */ .tm-offline { position:fixed; top:12px; left:50%; z-index:2400; display:flex; align-items:center; gap:8px; max-width:min(420px, calc(100vw - 24px)); padding:9px 14px; border-radius:999px; border:1px solid var(--tm-red); background:rgba(17,24,39,.97); color:#fff; font-size:12px; font-weight:800; box-shadow:0 12px 28px rgba(0,0,0,.34); opacity:0; visibility:hidden; transform:translate(-50%, -12px); pointer-events:none; transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s; backdrop-filter:blur(4px); } .tm-offline.show { opacity:1; visibility:visible; transform:translate(-50%, 0); transition-delay:0s; } .tm-offline .material-symbols-outlined { font-size:17px; line-height:1; } .tm-manager[data-site="light"] .tm-offline { background:rgba(255,255,255,.98); color:var(--tm-text); box-shadow:0 12px 28px rgba(0,0,0,.18); } /* History (audit trail). Newest first, one line per change, the action as a fixed-width tag on the left so the eye can scan down for "Score" without reading every row. */ .tm-history { display:flex; flex-direction:column; gap:2px; } .tm-history-row { display:flex; align-items:flex-start; gap:10px; padding:8px 6px; border-bottom:1px solid var(--tm-border); } .tm-history-row:last-child { border-bottom:0; } /* Fixed column so the summaries line up and the eye can scan down for one kind of change. It wraps rather than truncating: the tag is the only thing saying WHAT happened, and "ОБЈАВАТА П…" says nothing. Translations are kept terse for the same reason - the summary beside it carries the detail, so the chip only has to name the category. */ .tm-history-tag { flex:0 0 112px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--tm-accent); border:1px solid var(--tm-accent); border-radius:20px; padding:2px 6px; text-align:center; white-space:normal; line-height:1.3; word-break:break-word; } .tm-history-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; } .tm-history-summary { font-size:13px; font-weight:600; color:var(--tm-text); word-break:break-word; } .tm-history-meta { font-size:11px; color:var(--tm-muted); } .tm-empty { border:1px dashed var(--tm-border); border-radius:8px; padding:22px; text-align:center; color:var(--tm-muted); background:var(--tm-surface); } /* Tabs as eye-catching pill buttons with a filled, glowing active state (both themes). */ .tm-tabs { display:flex; gap:8px; margin-bottom:16px; overflow-x:auto; padding:2px 0 6px; } .tm-tab { min-height:40px; padding:0 16px; border:1px solid var(--tm-border); background:var(--tm-surface); color:var(--tm-muted); border-radius:999px; display:inline-flex; align-items:center; gap:7px; cursor:pointer; white-space:nowrap; font-size:13px; font-weight:800; letter-spacing:.01em; box-shadow:0 1px 2px rgba(0,0,0,.06); transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; } .tm-tab .material-symbols-outlined { font-size:20px; } .tm-tab:hover { color:var(--tm-text); border-color:var(--tm-accent); transform:translateY(-1px); } .tm-tab.active { color:#fff; border-color:transparent; background:linear-gradient(135deg, var(--tm-accent), color-mix(in srgb, var(--tm-accent) 72%, #000)); box-shadow:0 5px 14px color-mix(in srgb, var(--tm-accent) 42%, transparent); } .tm-tab.active:hover { transform:translateY(-1px); filter:brightness(1.04); } .tm-tab.active .material-symbols-outlined { color:#fff; } .tm-manager[data-site="light"] .tm-tab { background:#ffffff; border-color:rgba(0,0,0,.12); color:#5a6370; box-shadow:0 1px 3px rgba(30,40,60,.08); } .tm-manager[data-site="light"] .tm-tab:hover { color:#1d2330; border-color:var(--tm-blue); } .tm-manager[data-site="light"] .tm-tab.active { color:#fff !important; border-color:transparent !important; background:linear-gradient(135deg, #3a8ee6, #2f7dd3) !important; box-shadow:0 5px 14px rgba(47,125,211,.30); } .tm-manager[data-site="light"] .tm-tab.active .material-symbols-outlined { color:#fff; } /* Print-draw (bracket) button hidden for now - re-enable by removing this rule when we bring it back. */ .tm-draw-print-btn { display:none !important; } .tm-view-tabs { display:inline-flex; gap:2px; padding:3px; border:1px solid var(--tm-border); border-radius:8px; background:var(--tm-surface); } .tm-draw-switch-actions { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; } .tm-draw-print-btn .material-symbols-outlined { font-size:18px; } .tm-view-tab { min-height:30px; border:0; border-radius:6px; background:transparent; color:var(--tm-muted); padding:0 10px; display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:12px; cursor:pointer; } .tm-view-tab.active { background:var(--tm-input-bg); color:var(--tm-accent); } .tm-bracket-zoom-controls { display:none; align-items:center; gap:8px; flex-wrap:wrap; } .tm-bracket-zoom-value { min-width:64px; justify-content:center; font-weight:900; } .tm-stat-row { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; margin-bottom:14px; } .tm-stat { background:var(--tm-surface); border:1px solid var(--tm-border); border-radius:8px; padding:12px; } .tm-stat-value { font-size:20px; font-weight:800; } .tm-stat-label { color:var(--tm-muted); font-size:12px; margin-top:3px; } .tm-player-tools { position:relative; margin-bottom:12px; } .tm-player-search-wrap { position:relative; } .tm-search-results { display:none; position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:1000; background:#222; border:1px solid var(--tm-border); border-radius:8px; max-height:260px; overflow-y:auto; box-shadow:0 16px 38px rgba(0,0,0,.38); } .tm-manager[data-site="light"] .tm-search-results { background:rgba(255,255,255,.97); border-color:rgba(0,0,0,.18); box-shadow:0 16px 38px rgba(0,0,0,.22); } .tm-manager[data-site="dark"] .tm-search-results { background:#222; } .tm-player-filter-bar { display:flex; align-items:center; gap:10px; margin:0 0 12px; padding:12px; border:1px solid var(--tm-border); border-radius:8px; background:var(--tm-surface); flex-wrap:wrap; } .tm-player-filter-input { flex:1 1 260px; min-width:0; max-width:420px; display:flex; align-items:center; gap:10px; } .tm-player-filter-input .tm-input { flex:1 1 auto; min-width:0; width:auto; } .tm-player-filter-summary { flex:0 0 auto; white-space:nowrap; margin:0; } .tm-player-print-btn { margin-left:auto; flex:0 0 auto; } .tm-player-print-btn .material-symbols-outlined { font-size:18px; } .tm-player-filter-empty { flex:1 0 100%; margin-top:10px; } .tm-player-filter-hidden { display:none !important; } .tm-search-option { display:flex; justify-content:space-between; gap:10px; padding:10px 12px; cursor:pointer; border-bottom:1px solid var(--tm-border); transition:background .16s ease, transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .tm-search-option:last-child { border-bottom:0; } .tm-search-option:hover { background:var(--tm-surface-2); border-color:var(--tm-accent); transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.12); } .tm-search-option.is-disabled { cursor:default; opacity:.68; pointer-events:none; } .tm-search-option.is-disabled:hover { background:transparent; border-color:var(--tm-border); transform:none; box-shadow:none; } .tm-player-list { display:grid; gap:8px; } .tm-player-row { display:grid; grid-template-columns:34px minmax(0, 1fr) auto; gap:10px; align-items:center; background:var(--tm-surface); border:1px solid var(--tm-border); border-radius:8px; padding:10px; transition:transform .16s ease, opacity .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; } .tm-player-row:hover { transform:translateY(-1px); border-color:var(--tm-accent); background:var(--tm-surface-2); box-shadow:0 10px 20px rgba(0,0,0,.12); } .tm-player-row.removing { transform:translateX(8px); opacity:.35; } .tm-player-picker-panel { margin-top:10px; padding:12px; border:1px solid var(--tm-border); border-radius:8px; background:var(--tm-input-bg); } .tm-league-picker-search-wrap { margin-top:10px; } .tm-player-picker-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; } .tm-player-picker-controls .tm-panel-note { margin-left:auto; } .tm-player-picker-list { display:grid; gap:8px; margin-top:10px; } .tm-player-pick-row { grid-template-columns:26px minmax(0, 1fr) auto; cursor:pointer; } .tm-player-pick-check { display:flex; align-items:center; justify-content:center; } .tm-player-pick-check input { width:17px; height:17px; accent-color:var(--tm-accent); } .tm-player-pick-note { color:var(--tm-muted); font-size:11px; font-weight:800; text-transform:uppercase; } .tm-player-pick-row.is-disabled { opacity:.72; cursor:default; } .tm-player-pick-row.is-disabled:hover { transform:none; box-shadow:none; border-color:var(--tm-border); background:var(--tm-surface); } .tm-player-number { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--tm-input-bg); color:var(--tm-muted); font-weight:800; font-size:12px; } .tm-player-name { color:var(--tm-text); font-weight:800; } .tm-player-meta { color:var(--tm-muted); font-size:12px; margin-top:3px; } .tm-checkin-meta { color:var(--tm-green); font-weight:700; } .tm-player-username { color:var(--tm-blue); font-size:12px; font-weight:600; margin-top:1px; } /* Doubles roster: both team members side by side, each with their name and @username stacked. */ .tm-roster-team { display:flex; flex-wrap:wrap; align-items:flex-start; gap:6px 22px; } .tm-roster-member { display:flex; flex-direction:column; gap:1px; min-width:0; } .tm-activity-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:middle; } .tm-activity-recent { background:var(--tm-green); box-shadow:0 0 4px rgba(37,155,85,.65); } .tm-activity-past { background:var(--tm-accent); } .tm-player-checkin { color:var(--tm-green); font-size:12px; font-weight:700; margin-top:2px; } .tm-player-actions { display:flex; gap:7px; align-items:center; flex-wrap:wrap; } .tm-player-actions .tm-btn .material-symbols-outlined { font-size:16px; } .tm-player-row.is-checked-in { border-color:rgba(37,155,85,.45); } .tm-player-row.is-checked-in:hover { border-color:rgba(37,155,85,.7); } /* Public players list (non-logged + regular logged users only): photo grid, first name then last name on two lines under the photo, sorted by first name. 3 per row on mobile, as many as fit on desktop. The tournament manager keeps the detailed list view above; these rules only apply inside .tm-public-players-grid so the manager layout is unaffected. */ .tm-public-players-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; } @media (min-width:640px) { .tm-public-players-grid { grid-template-columns:repeat(auto-fill, minmax(112px, 1fr)); } } .tm-public-players-grid .tm-player-row { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:12px 8px; } .tm-public-players-grid .tm-player-row:hover { transform:translateY(-2px); } .tm-public-player-card > .tm-verified-badge { position:absolute; top:6px; right:6px; font-size:16px; } .tm-public-player-link { display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; min-width:0; text-decoration:none; color:inherit; } .tm-public-player-photo { position:relative; display:inline-flex; } .tm-public-player-photo .tm-player-avatar { width:72px; height:72px; } .tm-public-player-photo .tm-player-avatar .material-symbols-outlined { font-size:40px; } .tm-public-player-photo .tm-player-flag { left:-4px; top:-4px; width:20px; height:14px; } .tm-public-player-names { display:flex; flex-direction:column; align-items:center; line-height:1.2; width:100%; min-width:0; } .tm-public-player-first { display:inline-flex; align-items:center; justify-content:center; gap:3px; font-weight:800; font-size:13px; color:var(--tm-text); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tm-public-player-first .tm-verified-badge { font-size:15px; } .tm-public-player-last { font-weight:600; font-size:12px; color:var(--tm-muted); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Doubles team card: both members (photo + "Firstname L.") side by side in one grid card, joined by "&". The card spans two grid tracks so the two photos have room. */ .tm-public-team-card { grid-column:span 2; } .tm-public-team-players { display:flex; align-items:flex-start; justify-content:center; gap:8px; width:100%; min-width:0; } .tm-public-team-member { display:flex; flex-direction:column; align-items:center; gap:6px; flex:1 1 0; min-width:0; text-decoration:none; color:inherit; } .tm-public-team-member:hover { transform:translateY(-2px); } .tm-public-team-member .tm-public-player-photo .tm-player-avatar { width:56px; height:56px; } .tm-public-team-member .tm-public-player-photo .tm-player-avatar .material-symbols-outlined { font-size:32px; } .tm-public-team-member-name { display:inline-flex; align-items:center; justify-content:center; gap:3px; font-weight:800; font-size:12px; color:var(--tm-text); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tm-public-team-member-name .tm-verified-badge { font-size:14px; } .tm-public-team-amp { align-self:center; padding-top:20px; color:var(--tm-muted); font-weight:800; font-size:15px; } /* On mobile a doubles grid packs two team cards per row (each card holds both members), so the member photos/text shrink to fit half the screen width. */ @media (max-width:639px) { .tm-public-players-grid--doubles { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; } .tm-public-players-grid--doubles .tm-public-team-card { grid-column:auto; padding:10px 4px; } .tm-public-team-card .tm-public-team-players { gap:4px; } .tm-public-team-card .tm-public-team-member { gap:4px; } .tm-public-team-card .tm-public-team-member .tm-public-player-photo .tm-player-avatar { width:40px; height:40px; } .tm-public-team-card .tm-public-team-member .tm-public-player-photo .tm-player-avatar .material-symbols-outlined { font-size:24px; } .tm-public-team-card .tm-public-team-member .tm-public-player-flag { width:16px; height:11px; } .tm-public-team-card .tm-public-team-member-name { font-size:10px; gap:2px; } .tm-public-team-card .tm-public-team-amp { padding-top:12px; font-size:12px; } } /* Help button + user-manual language menu (top bar / detail card) */ .tm-help-wrap { position:relative; display:inline-flex; } .tm-help-menu { position:absolute; top:calc(100% + 6px); right:0; z-index:60; min-width:210px; background:var(--tm-surface); border:1px solid var(--tm-border); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.28); padding:6px; animation:tmReplacePanelIn .14s ease; } /* The dropdown must be fully opaque - the light theme's --tm-surface is a translucent glass colour, which made this menu see-through and unreadable. Force a solid surface per theme. */ .tm-manager[data-site="dark"] .tm-help-menu { background:#222; } .tm-manager[data-site="light"] .tm-help-menu { background:#ffffff; border-color:rgba(0,0,0,.14); box-shadow:0 10px 30px rgba(0,0,0,.18); } .tm-manager[data-site="light"] .tm-help-lang:hover, .tm-manager[data-site="light"] .tm-help-lang-pref { background:#eef2f7; } .tm-help-menu[hidden] { display:none; } .tm-help-menu-title { display:block; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--tm-muted); padding:5px 8px 6px; } /* Help's rows are (they open a PDF) and the language picker's rows are