/* Public tournament detail page (/tournaments/{number}/). */ /* Same class tournaments.css/rankings.css/individual-entry.css each define for their own page — this page (title flag, registered-players list, and the Draws group tables) never loaded any of those, so it had no size rule of its own until now. */ .pc-tournament-row-flag { font-size: 1.1em; } /* --------------------------------------------------------- Draws picker */ /* One white card holding BOTH the category row (Open/WS/OD/…) and the Group A/B/C (or Knockout) row under it -- requested directly, reference screenshot. Deliberately holds ONLY these two nav rows, not the actual standings table / bracket underneath (confirmed with the user): that content stays outside this card, directly on the Draws tab's own grey band (--pc-band-section above), in its own already-white .pc-card boxes (.tico-group-standings-card, .pc-bracket-match, .pc-matches-card) -- giving two visually distinct layers (picker card, then content cards) rather than one continuous panel. */ .pc-draws-picker { background: var(--pc-light-surface); border: 1px solid var(--pc-light-border); border-radius: var(--pc-radius); margin-bottom: var(--pc-space-md); } /* Category row keeps the shared .pc-tab-list's own underline look (unchanged) -- just needs side padding now that it sits inside a card instead of flush against the page's own .pc-container edges, and its bottom border needs to reach the card's own edges (the shared rule's margin-bottom already separates it from the row below). */ .pc-draws-category-tabs .pc-tab-list { padding: 0 var(--pc-space-md); margin-bottom: 0; } .pc-draws-subtabs .pc-tab-list { padding: var(--pc-space-sm) var(--pc-space-md); border-bottom: none; margin-bottom: 0; } /* Group A/B/C (or Knockout) -- squarer, slightly-rounded buttons (same --pc-radius-sm the site's own .pc-btn already uses everywhere else, e.g. the homepage's "View rankings"/"Log in" -- corrected directly from an earlier full-pill/999px version, which didn't match), not underlined like the category row above it. Two classes (.pc-draws-subtabs .pc-tab) beats the shared single-class .pc-tab/ .pc-tab.is-active rules (bracket.css) regardless of source order. */ .pc-draws-subtabs .pc-tab { padding: 0.5rem 1rem; border-radius: var(--pc-radius-sm); border-bottom: none; background: var(--pc-light-border); color: var(--pc-light-text); } .pc-draws-subtabs .pc-tab:not(.is-active):hover, .pc-draws-subtabs .pc-tab:not(.is-active):focus-visible { background: var(--pc-light-text-muted); color: #fff; } .pc-draws-subtabs .pc-tab.is-active { background: var(--pc-dark-bg); color: var(--pc-dark-text); border-bottom-color: transparent; } /* Matches/Draws tabs' own section background -- the same deeper grey band (--pc-band-bg, tokens.css) the player profile's ranking-stats panel already sits on, requested directly to match it. Two classes (.pc-section + this one) rather than overriding .pc-section--light itself -- that class is shared by every other light section on the site (Overview tab on this very page included), so redefining its background here would have recolored that too; this only ever needs to beat .pc-section--light's own single-class background rule for THIS section, which the extra class's higher specificity guarantees regardless of the two rules' actual source order. Generic name (not "matches-band") since Draws now uses it too. */ .pc-section.pc-band-section { background: var(--pc-band-bg); } /* "Matches" heading + its own player search, side by side in one row (playcross_render_matches_search()) -- only rendered at all once the schedule has actually been published, so there's something to search. */ .pc-matches-header-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--pc-space-sm); } .pc-matches-header-row .pc-heading { margin: 0; } .pc-matches-search-field { position: relative; width: 100%; max-width: 20rem; } .pc-matches-search-field input[type="search"] { width: 100%; padding: 0.5rem 0.8rem; border: 1px solid var(--pc-light-border); border-radius: var(--pc-radius-sm); font: inherit; } /* Floats below the input rather than pushing the schedule down, same "hover preview" positioning idea the organizer's own Creating-draws table already uses (.tico-draws-preview in the plugin's tico-style.css) -- picking a name here doesn't navigate anywhere, it just filters the schedule already on the page (see matches-search.js), so nothing below should visibly jump while the list is open. */ .pc-matches-search-results { position: absolute; top: 100%; right: 0; left: 0; z-index: 20; margin: 4px 0 0; padding: 0; list-style: none; max-height: 20rem; overflow-y: auto; background: var(--pc-light-surface); border: 1px solid var(--pc-light-border); border-radius: var(--pc-radius-sm); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); } .pc-matches-search-result + .pc-matches-search-result { border-top: 1px solid var(--pc-light-border); } .pc-matches-search-result button { display: block; width: 100%; padding: 0.5rem 0.8rem; background: none; border: none; font: inherit; text-align: left; cursor: pointer; color: var(--pc-light-text); } .pc-matches-search-result button:hover { background: var(--pc-light-bg); } /* Draws tab, group AND KO match lists -- each match its own card with the two players stacked (name/flag/seed per row). 2 side by side, in reading order (1-2 / 3-4 / 5-6 / ...) -- a CSS grid lays out its children (the .tico-match-anchor wrapper each match already renders into) left-to-right/top-to-bottom in DOM order on its own, no manual reordering needed. No max-width of its own -- fills the same full container width as the standings table right above it (a capped max-width here made the 2 cards look narrower than that table, and only ~80% of the page, which read as a layout mistake). Collapses to a single column on a narrow screen, where 2 side by side would leave each one too cramped. */ .pc-draw-match-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pc-space-md); } /* Needed because this class already sets its own `display` -- the browser's default [hidden]{display:none} rule lives in the user-agent stylesheet, a lower-priority origin than this one, so on its own it would lose to .pc-draw-match-list's `display: grid` above and the element would stay visually a (now childless) grid instead of actually disappearing. matches-search.js relies on this to hide an entire time slot once none of its matches belong to the searched-for player. */ .pc-draw-match-list[hidden] { display: none; } @media (max-width: 640px) { .pc-draw-match-list { grid-template-columns: 1fr; } } .pc-draw-match { display: flex; flex-direction: column; gap: 0.35rem; /* Tighter than .pc-card's own default padding -- this card only ever holds a couple of short lines, so the usual card padding left too much empty space above the first player and below the last one. Trimmed further (was 0.6rem) together with .pc-pair-line's own line-height, specifically to close the height gap a doubles card (2 teams stacked, 4 lines) otherwise has over a singles one (2 players, 2 lines) sitting right next to it. */ padding: 0.45rem 1rem; } .pc-draw-match-player { font-weight: 500; /* .pc-draw-match's own flex-direction: column makes this a flex item -- flex items default to min-width: auto, which lets an unbreakable (white-space: nowrap, see .pc-pair-line/.pc-single-line in bracket.css) long name push this element, and the card around it, wider than intended instead of actually truncating with an ellipsis. min-width: 0 is what lets the ellipsis truncation engage instead. */ min-width: 0; } /* Date/time/court strip above a scheduled match's card (see TICO_Dashboard::get_scheduled_match_label() -- absent entirely until the organizer has both placed the match on the schedule AND published it). Same dark band look as .pc-bracket-round-title, already established for round headers in this same Draws/Matches area, reused here for visual consistency rather than inventing a second "info band" style. Rendered as its own element right before whichever of the 3 card shapes (scoreline table / score form / plain card) actually applies, since they don't share a common wrapper to inject into. */ .pc-draw-match-schedule { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0 0 0.4rem; padding: 0.4rem 0.9rem; border-radius: var(--pc-radius-sm); background: var(--pc-dark-bg); color: var(--pc-dark-text); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; } /* "MS O40 - Gr. A" / "WS - KO" -- Matches tab only (playcross_draw_match_category_link()), pinned to the right of the date/time/court text via the flex row above. Underlined so it still reads as a link against the dark band, where the default link color (inherited, meant for a light background) wouldn't otherwise stand out from the surrounding white schedule text next to it. */ .pc-draw-match-schedule-link { color: inherit; text-decoration: underline; white-space: nowrap; } /* Groups the date/court text with the LIVE indicator (below) so both stay pinned together on the left, regardless of whether the category link above is also present -- .pc-draw-match-schedule's own justify-content: space-between only ever sees 2 top-level children (this group, and the link), so it can't push a 3rd child into the middle of the bar instead of keeping the badge right next to the date/court text, per the user's own request ("za" -- right after). */ .pc-draw-match-schedule-label { display: flex; align-items: center; gap: 0.5rem; } /* LIVE indicator, moved here from its own separate badge row (section 10 -- reported directly: showing a whole extra pill-shaped row read as a different component from the recorded-result look every other match card already has). var(--pc-red) itself, not a lighter tint -- against this bar's own very dark petrol background the contrast is already strong, no separate "on-dark" red token needed. Same pulsing dot (@keyframes pc-pulse) .pc-badge--live already uses elsewhere, reused rather than a second animation for the same idea. */ .pc-draw-match-schedule-live { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--pc-red); } /* Needed because this class already sets its own `display` (see .pc-draw-match-list[hidden] above for the exact same reasoning) -- the browser's default [hidden]{display:none} rule is a lower-priority origin than this one, so on its own the badge stayed visible via display:inline-flex regardless of the hidden attribute (section 12.1 -- this element is now always rendered, just toggled hidden/shown by live-poll.js, rather than only ever being emitted when already live). Without this, EVERY match's schedule bar showed "LIVE" permanently, whether it was live, already finished, or never live at all. */ .pc-draw-match-schedule-live[hidden] { display: none; } .pc-draw-match-schedule-live::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; animation: pc-pulse 1.4s ease-in-out infinite; } /* Public "Matches" tab (playcross_render_matches_schedule()) — every scheduled match in one flat chronological list, grouped under a time heading (and, only for a multi-day tournament, a date heading above that). Same dark-band family as .pc-draw-match-schedule/ .pc-bracket-round-title above/elsewhere, just a size step up since this is a page-level section heading, not a per-card label. */ .pc-schedule-day-heading { margin: var(--pc-space-lg) 0 var(--pc-space-sm); } .pc-schedule-time-heading { margin: var(--pc-space-md) 0 var(--pc-space-sm); padding: 0.6rem 1rem; border-radius: var(--pc-radius-sm); background: var(--pc-dark-bg); color: var(--pc-dark-text); font-family: var(--pc-font-heading); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em; } /* Group standings — restyled to an exact brief (colors/sizes down to the px), superseding the earlier "harmonized with the KO bracket" pass below (still wrapped in the same .pc-card shell -- the bracket harmony is now the shell only, not the fill/border/radius, which this brief overrides on its own terms). Component-scoped custom properties on the card itself for every color the brief specifies that has no existing sitewide token close enough to reuse (checked each one against tokens.css first): the container white, the header/leader/hover navy, and the red accent ARE all existing tokens (reused below, not redeclared here) -- these five are genuinely new roles. */ .tico-group-standings-card { --tico-standings-header-text: #a8b8c0; --tico-standings-text: #2c4a57; --tico-standings-divider: #edf0f1; --tico-standings-leader-bg: #fdf1f2; --tico-standings-hover-bg: #e8eff2; padding: 0; overflow: hidden; /* White/var(--pc-light-surface) was already .pc-card's own default background (nothing to override there) -- border, border-radius and box-shadow are the three real changes from that default: no outer border at all now, a soft shadow instead (tinted from the same navy the header below uses, rgba() of --pc-dark-bg's own rgb(10,46,58), not a plain grey shadow), and a tighter 4px radius than .pc-card's usual 10px. */ border: none; border-radius: 4px; box-shadow: 0 1px 3px rgba(10, 46, 58, 0.16); } .tico-group-standings-card .pc-table { margin: 0; } /* Scrolls horizontally exactly like .pc-bracket does (same single overflow-x: auto property, no separate overflow-y needed -- same precedent) -- lives BETWEEN the card and the table, not on the card itself, since the card's own overflow: hidden above is doing an unrelated job (clipping to the rounded corners) and setting overflow-x there too would fight it. Exists because table text is now nowrap (see .tico-group-standings th/td below) -- on a narrow phone the table's natural content width can exceed the card's width, and this is what lets that excess be reached by scrolling sideways instead of text wrapping or the table silently overflowing its card. */ .tico-group-standings-scroll { overflow-x: auto; } .tico-group-standings-scroll .pc-table { width: max-content; min-width: 100%; } /* Never wraps, on any column -- reported directly (screenshotted on mobile): a longer player name was breaking onto a second line inside its cell. Combined with .tico-group-standings-scroll above, the table simply grows wider than the card instead, reachable by scrolling. */ .tico-group-standings th, .tico-group-standings td { white-space: nowrap; } /* Header band — solid navy (var(--pc-dark-bg), close enough to the brief's own literal #0f2b38 -- rgb(15,43,56) vs rgb(10,46,58), a few hex units apart on each channel -- to reuse rather than add a near-duplicate token), replacing the earlier lighter --pc-dark-surface shade. Text color/size/weight/tracking/case/padding are the brief's own exact values, all genuinely new (no existing token this light or this letter-spaced) -- --tico-standings-header-text, declared on .tico-group-standings-card above. Verified against WCAG's contrast formula: ~7:1 on --pc-dark-bg, comfortably over the 4.5:1 floor this 11px text needs. */ .tico-group-standings thead tr { background: var(--pc-dark-bg); } .tico-group-standings thead th { color: var(--tico-standings-header-text); border-bottom: none; padding: 0.8125rem 1.25rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } /* Body rows -- padding/size/text color/divider are the brief's own exact values (--tico-standings-text/--tico-standings-divider, declared on .tico-group-standings-card above); zebra striping reuses --pc-light-bg for the even rows (essentially identical to the brief's own #f6f8f9 -- rgb(247,248,250) vs rgb(246,248,249), 1 unit apart per channel) rather than a near-duplicate token, odd rows staying the card's own white with no override needed. cursor/transition are the brief's own request for a hover/focus affordance -- these rows aren't wired to any click/keyboard behavior yet (no link, no JS), so :focus-visible below currently has nothing to trigger it; flagged in the handoff notes rather than adding a tabindex here, which would be a real (if small) HTML behavior change beyond the visual-only scope asked for. */ .tico-group-standings td { padding: 0.9375rem 1.25rem; font-size: 0.875rem; color: var(--tico-standings-text); border-bottom: 1px solid var(--tico-standings-divider); } .tico-group-standings tbody tr { cursor: pointer; transition: background-color 120ms ease, color 120ms ease; /* Mobile WebKit/Chrome's own default tap-highlight overlay (a solid flash of blue on touch, unrelated to and much louder than the :hover/:focus-visible background below) -- reported directly, screenshot: visible on tap on mobile. cursor: pointer above is exactly what makes a mobile browser treat this row as "tappable" enough to apply its own default highlight; transparent here lets this table's own on-brand hover/focus feedback be the only thing a tap actually shows. */ -webkit-tap-highlight-color: transparent; } .tico-group-standings tbody tr:nth-child(even) { background: var(--pc-light-bg); } /* Current group leader (post-results only, see $has_results in playcross_render_draw_group()) — background tint, navy text, bold weight, and the left red stripe (inset box-shadow, not a real border, so it never adds width/shifts the row's own padding) are the brief's own exact values; the P column (last cell) additionally goes red+bold to read as the standout number in the row. --tico-standings-leader-bg is declared on .tico-group-standings-card above; navy reuses var(--pc-dark-bg) (same reuse reasoning as the header above) and the stripe/P-column red reuses var(--pc-red), already the site's one accent color -- an exact match to the brief's own #e63946. Placed BEFORE the hover/focus rule below on purpose -- same (0,2,2) specificity as that rule's own background/color, so source order breaks the tie; hover needs to win that tie on a hovered leader row (see that rule's own comment), which only happens if this one comes first. */ .tico-group-standings tbody tr.tico-standings-leader { background: var(--tico-standings-leader-bg); box-shadow: inset 3px 0 0 var(--pc-red); } .tico-standings-leader td { color: var(--pc-dark-bg); font-weight: 700; } .tico-standings-leader td:last-child { color: var(--pc-red); } /* Hover/focus -- one shared rule for both (:focus-visible for keyboard users, see the note above on .tico-group-standings td). Applies to every row including the leader: this rule's own background/color both share the exact same (0,2,2) specificity as the leader rule's own background/text-color above, so it only wins that tie by coming AFTER it in this file (moved here on purpose -- see that rule's own comment); without that ordering, hovering the leader row would have incorrectly stayed on its pink background instead of switching to the hover one. The leader's red left stripe (box-shadow, untouched by this rule entirely) and bold weight stay exactly as the brief asked ("červený pásik aj bold zostávajú"); its P-column red text (.tico-standings-leader td:last-child above) follows this same general row-text rule instead, since the brief's own hover spec covers the whole row's text color and doesn't call that value out as a further exception the way it does the stripe/weight. */ .tico-group-standings tbody tr:hover, .tico-group-standings tbody tr:focus-visible { background: var(--tico-standings-hover-bg); } .tico-group-standings tbody tr:hover td, .tico-group-standings tbody tr:focus-visible td { color: var(--pc-dark-bg); } /* No divider under the last row -- the card's own bottom edge is the closing line, same as the bracket never draws a divider after a card's last player row. */ .tico-group-standings tbody tr:last-child td { border-bottom: none; } /* Group standings table — W-L/Sets/Speeders/P (3rd column on) are numbers, right-aligned so the digits line up instead of ragging left. The 1st column ("#"/Seed) and 2nd ("Player") stay left-aligned, same as before. */ .tico-group-standings th:nth-child(n+3), .tico-group-standings td:nth-child(n+3) { text-align: right; } /* Group standings table header — "Sets"/"Speeders" read in full on a wide screen, shrink to "S"/"Sps" on a small one, purely to keep the table as narrow as reasonably possible -- horizontal scrolling (see .tico-group-standings-scroll above) is the deliberate fallback for whatever width remains, not something this abbreviation is trying to avoid outright. */ .tico-standings-abbr .short { display: none; } @media (max-width: 640px) { .tico-standings-abbr .full { display: none; } .tico-standings-abbr .short { display: inline; } } /* Read-only scoreline once a group match has a result — sets-won column emphasized, per-set point columns muted, winner's row bold. table-layout: fixed + an explicit (same 3 classes on every match's own table) is what actually keeps every match card in the list lined up: each match is its own separate , so without a forced column width every one of them would auto-size to its own content (a 2-0 match has fewer set columns and shorter numbers than a 2-1 one), leaving the numbers scattered at different horizontal offsets from card to card. playcross_render_draw_match_scoreline() also always renders sets_to_win*2-1 set columns (blank for a set that was never played) for the same reason -- so the column COUNT is consistent too, not just each column's width. */ .tico-match-scoreline { table-layout: fixed; width: 100%; } /* .tico-match-scoreline-col-name (on the in playcross_render_draw_match_scoreline()) deliberately has no width rule -- in a fixed-layout table, a column left without an explicit width absorbs whatever's left over after the ones that do have one, which is exactly what makes the table stretch to fill its card at any width (see .pc-draw-match-list above) instead of sitting narrower than the card around it with dead space to the right. */ .tico-match-scoreline-col-sets-won { width: 2.5rem; } .tico-match-scoreline-col-set { width: 1.9rem; } .tico-match-scoreline td { padding: 0.3rem 0.5rem; text-align: center; /* This table also carries the generic .pc-table class (for its base width/font/border-collapse) -- but .pc-table td's own border-bottom is meant for row-separated LISTS (group standings etc.), not a 2-row scoreline where it just reads as an unwanted line between the two players. Never wanted here -- overridden off. */ border-bottom: none; } .tico-match-scoreline td:first-child { text-align: left; } .tico-match-scoreline .tico-match-sets-won { font-weight: 700; } /* A visible break between the "sets won" tally and the 3 individual set scores that follow it, so it reads as a sum sitting apart from the breakdown rather than just one more number in the row. */ .tico-match-scoreline .tico-match-sets-won + td { border-left: 2px solid var(--pc-light-border); padding-left: 0.7rem; } .tico-match-scoreline tr.is-winner { font-weight: 700; } /* Reported bug: the row-level bold above also reached the individual per-set score columns, wrongly bolding a number even in a set the overall match winner actually LOST (e.g. a 2-1 winner's own "3" in the set they dropped). Bold there is now decided per SET, not per row -- reset those columns back to normal weight and let .tico-match-set-winner (added server/JS-side to whichever side's number was actually higher in that one set) do the highlighting instead. The name + sets-won tally stay bold for the overall winner, untouched by this reset (nth-child(n+3) starts right after them). */ .tico-match-scoreline td:nth-child(n+3) { font-weight: 400; } .tico-match-scoreline td.tico-match-set-winner { /* td.tico-match-set-winner (not just .tico-match-set-winner) -- matches the nth-child(n+3) reset above's own specificity so this rule, coming later in the stylesheet, actually wins instead of silently losing to it (an element selector on both sides is what makes that comparison a tie in source order, not the class alone). */ font-weight: 700; } /* LIVE match scoreline (section 10) -- the currently in-progress set's own column, AND the sets-won tally (provisional for the same reason: the match isn't decided while this set is still being played), turn red instead of the normal petrol/black text every other, genuinely FINISHED cell here uses -- confirmed with the user as the one visual difference between a live scoreline and a recorded one, everything else about the table stays identical. */ .tico-match-scoreline--live .tico-match-set--live { color: var(--pc-red); } /* Organizer's score-entry/edit form — same card shell as a plain match card, just with a small score-input grid + Save button added below the two player rows. No max-width of its own (beyond .pc-card's default) -- it fills its .pc-draw-match-list grid column exactly like the plain, unplayed card does. */ .tico-match-score-inputs { width: 100%; margin: 0.5rem 0; } .tico-match-score-inputs th, .tico-match-score-inputs td { padding: 0.2rem 0.4rem; text-align: center; } .tico-match-score-inputs td:first-child { text-align: left; font-weight: 500; } .tico-match-score-inputs input[type="number"] { width: 3.5rem; padding: 0.3rem; border: 1px solid var(--pc-light-border); border-radius: 4px; text-align: center; } .tico-match-score-inputs input[type="number"]:disabled { opacity: 0.4; background: var(--pc-light-bg); } .tico-match-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; margin-top: 0.25rem; } /* "Delete result" — plain outline look, distinct from the primary Save button, red on hover/focus since it's a destructive action (same red the site already uses for withdraw/delete elsewhere). */ .tico-match-clear-btn { background: transparent; border: 1px solid var(--pc-light-border); border-radius: 4px; padding: 0.5rem 0.9rem; color: var(--pc-light-text-muted); cursor: pointer; } .tico-match-clear-btn:hover, .tico-match-clear-btn:focus-visible { border-color: var(--pc-red); color: var(--pc-red); } /* "Save" — same size as "Delete result" (padding/border-radius), but colored like the "Online Entry" call-to-action (.pc-btn--primary) so the primary action on this form reads the same as the site's other primary action, rather than a plain unstyled browser button. */ .tico-match-save-btn { background: var(--pc-red); border: 1px solid var(--pc-red); border-radius: 4px; padding: 0.5rem 0.9rem; color: #fff; font-weight: 600; cursor: pointer; } .tico-match-save-btn:hover, .tico-match-save-btn:focus-visible { background: var(--pc-red-hover); border-color: var(--pc-red-hover); } /* "Not played?" — the walkover / no-match outcomes, folded away because almost every match is an ordinary one and the organizer works straight down a board of these cards. Same quiet text-link treatment as the "Edit" disclosure below, for the same reason. */ .tico-match-special > summary { list-style: none; cursor: pointer; margin-top: 0.5rem; font-size: 0.85rem; color: var(--pc-light-text-muted); text-decoration: underline; text-underline-offset: 2px; } .tico-match-special > summary::-webkit-details-marker { display: none; } .tico-match-special > summary:hover, .tico-match-special > summary:focus-visible { color: var(--pc-red); } .tico-match-special-body { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.6rem; padding: 0.75rem; border: 1px solid var(--pc-light-border); border-radius: 4px; background: var(--pc-light-bg); } .tico-match-walkover { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0; padding: 0; border: 0; } .tico-match-walkover legend { padding: 0; font-size: 0.85rem; font-weight: 600; } .tico-match-walkover label { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.9rem; } .tico-match-special-body button { background: transparent; border: 1px solid var(--pc-light-border); border-radius: 4px; padding: 0.4rem 0.75rem; font-size: 0.85rem; color: var(--pc-light-text); cursor: pointer; } .tico-match-special-body button:hover, .tico-match-special-body button:focus-visible { border-color: var(--pc-red); color: var(--pc-red); } .tico-match-nomatch { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0; padding-top: 0.75rem; border-top: 1px solid var(--pc-light-border); } .tico-match-nomatch-hint { font-size: 0.8rem; color: var(--pc-light-text-muted); } /* Stands in for the score table on a match recorded as never played, so the card says why it is blank instead of looking unfilled. */ .tico-match-cancelled-note { margin: 0 0 0.5rem; font-size: 0.9rem; font-weight: 600; color: var(--pc-light-text-muted); } /* "Edit" disclosure on an already-played match — plain text link look rather than a full button, since it's a secondary, occasional action. */ .tico-match-edit { margin-top: 0.4rem; } .tico-match-edit > summary { cursor: pointer; color: var(--pc-light-text-muted); font-size: 0.85rem; font-weight: 600; list-style: none; } .tico-match-edit > summary::-webkit-details-marker { display: none; } .tico-match-edit > summary:hover, .tico-match-edit > summary:focus-visible { color: var(--pc-light-text); } .tico-match-edit[open] > summary { margin-bottom: 0.5rem; } /* Public/spectator LIVE display (claude_code_prompt_live-scoring.md section 10) now reuses .tico-match-scoreline directly (see .tico-match-scoreline--live above) -- the bespoke "big number" card this used to be (.tico-public-live and friends, plus a duplicated copy of referee.css's own .tico-referee-match-set(s) badge) is gone; a live match looks exactly like a recorded result except for the one red in-progress column. */ /* LIVE lock notice (claude_code_prompt_live-scoring.md section 9) -- replaces the organizer's own score-entry form for as long as a referee has LIVE recording active on this match, same card treatment as the plain unplayed-match card (.pc-draw-match) it stands in for. */ .tico-live-lock-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pc-space-sm); } .tico-live-lock-notice p { margin: 0; color: var(--pc-light-text-muted); } /* Referee search/assign widget (claude_code_prompt_live-scoring.md section 3) -- bottom-left of a match card, per spec. Two mutually exclusive states toggled by referee-picker.js (never both visible): "Referee: Name ×" once assigned, or the search box + "Add referee" button before that. */ .tico-referee-picker { margin-top: 0.5rem; font-size: 0.85rem; } .tico-referee-picker-assigned { display: flex; align-items: center; gap: 0.4rem; color: var(--pc-light-text-muted); } .tico-referee-picker-label { font-weight: 600; } .tico-referee-picker-name { color: var(--pc-light-text); } .tico-referee-picker-remove { padding: 0; border: none; background: none; color: var(--pc-light-text-muted); font-size: 1rem; line-height: 1; cursor: pointer; } .tico-referee-picker-remove:hover { color: var(--pc-red); } .tico-referee-picker-search { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; } .tico-referee-picker-input { flex: 1 1 12rem; min-width: 8rem; padding: 0.4rem 0.6rem; border: 1px solid var(--pc-light-border); border-radius: var(--pc-radius-sm); font-family: var(--pc-font-body); font-size: 0.85rem; } .tico-referee-picker-add { flex: 0 0 auto; padding: 0.4rem 0.75rem; font-size: 0.8rem; } .tico-referee-picker-add:disabled { opacity: 0.5; cursor: not-allowed; } /* Dropdown of live-filtered matches -- absolutely positioned under the input (same "floats over everything else" role as e.g. the partner picker's own modal, just inline instead of a full modal here since this widget is small and lives inline on the card already). */ .tico-referee-picker-results { position: absolute; top: 100%; left: 0; z-index: 5; width: 100%; max-width: 20rem; max-height: 12rem; margin: 0.25rem 0 0; padding: 0; overflow-y: auto; list-style: none; background: var(--pc-light-surface); border: 1px solid var(--pc-light-border); border-radius: var(--pc-radius-sm); box-shadow: 0 4px 12px rgba(10, 46, 58, 0.12); } .tico-referee-picker-results button { display: flex; align-items: center; gap: 0.4rem; width: 100%; padding: 0.5rem 0.75rem; border: none; background: none; font-family: var(--pc-font-body); font-size: 0.85rem; text-align: left; cursor: pointer; } .tico-referee-picker-results button:hover { background: var(--pc-light-bg); } /* So a #registered-players jump (after saving an entry) doesn't land the section flush under the sticky site header, hiding the success notice. */ #registered-players { scroll-margin-top: 5rem; } /* Same reasoning, per match: after Save/Delete result, the match's own score form submits back to its own "#tico-match-..." anchor (see playcross_draw_match_anchor_id()) so the reload scrolls straight to it instead of the top of the page -- this keeps that landing spot clear of the sticky site header too. */ .tico-match-anchor { scroll-margin-top: 5rem; } /* Same reasoning again, one level up: the Matches board's own score form submits back to THIS heading (result_redirect_url, set in playcross_render_matches_court_card()) rather than to the match's own card -- landing at the top of the whole board is the point there, not the saved match itself -- so it needs the exact same clearance from the sticky site header the per-match anchor above already has. */ #pc-matches-heading { scroll-margin-top: 5rem; } /* Deadline value in the tournament-info Categories card — open re-uses the same green tournaments.css uses for the "Online Entry" open-status badge, closed re-uses the site's main red accent, so the color alone carries the same open/closed meaning readers already know from the tournament list. */ .pc-tournament-deadline-value { font-family: var(--pc-font-heading); font-weight: 700; font-size: 1.15rem; } .pc-tournament-deadline-value.is-open { color: var(--pc-green); } .pc-tournament-deadline-value.is-closed { color: var(--pc-red); } .pc-tournament-single-header { display: flex; align-items: center; gap: var(--pc-space-md); } .pc-tournament-single-logo { flex: 0 0 auto; width: 5rem; height: auto; } /* "Registered players (12)" / "Open (4)" — a small, unobtrusive count next to a heading, not a second heading of its own. font-size is in em so it shrinks relative to whichever heading (h2 or h3) it sits inside. Shared across the site (not just this section), so the card-grid redesign below scopes its OWN, fixed-px overrides rather than touching this rule. */ .pc-count-muted { font-size: 0.6em; font-weight: 400; color: var(--pc-light-text-muted); } /* "(BD U14)" after a moved player/pair's name — the category they actually registered for, before post-deadline consolidation moved them. */ .pc-original-category { font-size: 0.8em; color: #8b9ea9; } /* ---------------------------------------------- Registered players (card grid) */ #registered-players { background: #f4f7f9; } /* Same size/weight/color as "Tournament info"'s own h2 now (i.e. none of its own here — falls back to plain .pc-heading, exactly like that one), just the flex layout so the count sits next to the heading text instead of wrapping under it. Confirmed with the user. */ #registered-players .pc-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; } #registered-players .pc-heading .pc-count-muted { font-size: 18px; font-weight: 400; color: #7b909c; } /* Masonry: cards fill column 1 top-to-bottom, then column 2, etc. — not a grid, which would force every row across all 3 columns to the same height regardless of how many players are actually in each category. */ .pc-registrants-columns { column-count: 3; column-gap: 22px; } @media (max-width: 1000px) { .pc-registrants-columns { column-count: 2; } } @media (max-width: 680px) { .pc-registrants-columns { column-count: 1; } } .pc-registrants-group { break-inside: avoid; margin-bottom: 22px; padding: 16px 18px 14px; background: #fff; border: 1px solid #dde5ea; border-radius: 6px; } .pc-registrants-group-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4em; margin: 0 0 0.6rem; padding-bottom: 8px; border-bottom: 2px solid #ef3b4f; font-family: var(--pc-font-heading); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #0e2b36; } .pc-registrants-group-title .pc-count-muted { font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: normal; color: #8b9ea9; } .pc-registrant-list { display: flex; flex-direction: column; gap: 7px; list-style: none; margin: 0; padding: 0; } /* "[3] 🇸🇰 Juraj Grega" — shown continuously, even mid-registration before the deadline, so entrants can already see who's seeded where. The seed number is always a direct child of the row itself (never inside the stacked-names block below) specifically so it doesn't push just the FIRST name over while the second one starts further left — both partner names line up under each other because they share the exact same starting x position, regardless of whether a seed happens to be shown. */ .pc-registrant-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; font-size: 15px; line-height: 1.35; text-wrap: pretty; color: #0e2b36; } /* A doubles pair: both names stacked, each on their own line, instead of side by side — the seed sits to the left of the whole 2-line block (align-items: flex-start keeps it pinned to the TOP line, not vertically centered against both). A thin rule under the whole pair separates it from the next one — the list's own 7px row gap alone read as too subtle once a "row" could span 2 lines instead of always 1. */ .pc-registrant-row--pair { align-items: flex-start; padding-bottom: 7px; border-bottom: 1px solid #e3e8eb; } .pc-registrant-row--pair:last-child { padding-bottom: 0; border-bottom: none; } .pc-registrant-pair-names { display: flex; flex-direction: column; gap: 2px; } .pc-registrant-pair-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; } /* Monospace so every "[N]" lines up column-straight regardless of digit count — it's the seeding number, not an ordinal, hence the brackets. min-width reserves that same column even when blank (an unpaired doubles entry, which has no seed of its own — tournament-single.php still prints an empty .pc-registrant-seed for it in a doubles category) so its name starts at the exact same x position as every paired name below/above it, not flush against the card's own left edge. */ .pc-registrant-seed { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 13px; font-weight: 400; color: #8b9ea9; min-width: 2.4em; } .pc-registrant-name { font-weight: 600; color: #0e2b36; } .pc-btn--disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* ---------------------------------------------------- Winners (podium) */ /* ONE flat background for the whole tab -- same #f4f7f9 tone, and the exact same pattern, as Overview's own "Registered players" section (#registered-players, same file, above): the color lives on the
itself, edge to edge, with plain .pc-container content inside at the section's own normal padding -- NOT a second, separately-padded/ rounded "panel" box nested inside a differently-toned section. That nested-panel version read as 2 stacked background colors with a visible seam, and its own extra top padding pushed "Winners" further down than Draws'/Matches' own heading right above it -- both reported directly, fixed by dropping the nested panel entirely. Deliberately NOT also given .pc-band-section (Draws/Matches' own darker-grey-band class, same file above) -- that class's 2-class selector would outrank this single-class one regardless of source order, silently swapping this #f4f7f9 for --pc-band-bg instead; Winners reads as an Overview/Registered-players sibling, not a Draws/Matches one, so it gets their tone, not that band's. Every OTHER literal value below that also appears on Registered players (column-count:3/gap:22px, break-inside:avoid/margin-bottom:22px, card 16px 18px 14px/1px #dde5ea/6px radius, 2px #ef3b4f header rule, 15px/700/ uppercase/.06em/#0e2b36 title, 1000px/680px breakpoints) is still the exact same literal value on purpose -- "reuse the Registered players styling", confirmed with the user. */ .pc-winners-section { background: #f4f7f9; } /* "Winners" itself is the plain, shared .pc-heading (components.css) -- same font/size/weight and same spacing off the dark hero above (.pc-section--tight-top on the
, matching Draws'/Matches' own section right above -- see this section's own comment for why it deliberately does NOT also carry Draws'/Matches' .pc-band-section) as those 2 other tabs, so all 3 headings read as one consistent set. Confirmed with the user. Only the layout (tournament name + place/date pushed to the right, on the same row) is specific to Winners. */ .pc-winners-header-row { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin-bottom: 1.75rem; } .pc-winners-header-row .pc-heading { margin: 0; } .pc-winners-header-meta { text-align: right; } .pc-winners-tournament-name { margin: 0; font-family: var(--pc-font-body); font-size: 18px; font-weight: 700; color: #0e2b36; } .pc-winners-context { margin: 0.25rem 0 0; font-size: 15px; color: #7b909c; } .pc-winners-empty { margin: 0; font-size: 15px; color: #7b909c; } /* Masonry, same as .pc-registrants-columns -- cards fill column 1 top-to- bottom, then column 2, etc., so a 2-row category doesn't stretch to match a 4-row one sitting next to it. */ .pc-winners-columns { column-count: 3; column-gap: 22px; } @media (max-width: 1000px) { .pc-winners-columns { column-count: 2; } } @media (max-width: 680px) { .pc-winners-columns { column-count: 1; } /* The tournament name/place/date block reads better stacked under "Winners" and left-aligned once the row wraps on a phone width, rather than staying pinned right against the now much narrower container. */ .pc-winners-header-meta { text-align: left; } } .pc-winners-card { break-inside: avoid; margin-bottom: 22px; padding: 16px 18px 14px; background: #fff; border: 1px solid #dde5ea; border-radius: 6px; } .pc-winners-card-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4em; margin: 0 0 0.6rem; padding-bottom: 8px; border-bottom: 2px solid #ef3b4f; font-family: var(--pc-font-heading); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #0e2b36; } .pc-winners-rows { display: flex; flex-direction: column; gap: 9px; } .pc-winners-row { display: grid; grid-template-columns: 22px 20px 1fr; column-gap: 9px; align-items: baseline; font-size: 15px; line-height: 1.35; text-wrap: pretty; } .pc-winners-place { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 13px; font-weight: 700; text-align: center; border-radius: 3px; padding: 2px 0; } .pc-winners-place--1 { color: #8a6a12; background: #fbf1d6; } .pc-winners-place--2 { color: #5c6b74; background: #eceff1; } /* Tied places (usually 2 x "3") render this identical badge -- no "3=" or letter suffix, per the user's own spec. --other is a defensive fallback only (the data model never actually produces a place past 3). */ .pc-winners-place--3, .pc-winners-place--other { color: #8a5230; background: #f7ebe3; } .pc-winners-player { font-weight: 600; color: #0e2b36; } /* Main text color (petrol navy), not the site's red -- a linked winner's name is still readable as plain text first; the underline (only on hover/focus) is what signals "this is a link". Confirmed with the user. */ .pc-winners-player a { color: inherit; text-decoration: none; } .pc-winners-player a:hover, .pc-winners-player a:focus-visible { text-decoration: underline; } /* Doubles: both partners stacked, each on their own line -- as in Registered players (.pc-registrant-row--pair). Spans the flag + name columns together (grid-column: 2 / 4) so the place badge itself stays ONE cell shared by both lines instead of repeating per player. */ .pc-winners-team { grid-column: 2 / 4; display: flex; flex-direction: column; gap: 4px; } .pc-winners-team-line { display: flex; align-items: baseline; gap: 9px; } .pc-tournament-notice { margin-top: var(--pc-space-sm); display: flex; align-items: center; gap: var(--pc-space-sm); padding: var(--pc-space-md); border-radius: var(--pc-radius); border: 1px solid var(--pc-amber); background: rgba(230, 162, 60, 0.14); color: var(--pc-light-text); font-weight: 600; max-width: 40rem; } .pc-tournament-notice-icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--pc-amber); color: var(--pc-light-surface); font-family: var(--pc-font-heading); font-size: 1.25rem; font-weight: 800; line-height: 1; } /* Overview/Draws/Matches tab bar — sits inside the same dark hero band as the tournament name/date line (not a separate strip below it), own accent colors rather than the light-bg tab style tournament-detail.php uses (active = red like the site's own accent; hover = amber, so switching tabs feels distinct from just "selected"). */ .pc-tournament-single-hero { /* Shortens the dark band below the Overview/Matches/Draws tab row -- reported directly, was var(--pc-space-sm) (16px). */ padding-bottom: 8px; } .pc-tournament-single-tabs-wrap { margin-top: var(--pc-space-md); } .pc-tournament-tabs .pc-tab-list { display: flex; gap: var(--pc-space-md); border-bottom: 1px solid var(--pc-dark-border); overflow-x: auto; } .pc-tournament-tabs .pc-tab { display: inline-block; font-family: var(--pc-font-heading); font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; background: none; border: none; border-bottom: 3px solid transparent; padding: 0.6rem 0; color: var(--pc-dark-text-muted); text-decoration: none; cursor: pointer; white-space: nowrap; } .pc-tournament-tabs .pc-tab.is-active { color: var(--pc-dark-text); border-bottom-color: var(--pc-red); } .pc-tournament-tabs .pc-tab:not(.is-active):hover, .pc-tournament-tabs .pc-tab:not(.is-active):focus-visible { color: var(--pc-amber); border-bottom-color: var(--pc-amber); } .pc-tab-panel[hidden] { display: none; } /* Entry-actions row (Log in to enter / Edit / Withdraw / Online Entry / Add club players / Enter without an account) -- .pc-btn--guest is pushed to the far right of this same row, per the organizer's own spec. */ .pc-entry-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--pc-space-sm); } .pc-entry-actions .pc-btn--guest { margin-left: auto; } /* Blue instead of the plain grey .pc-btn--outline default, so it doesn't read as "less available" than the other entry buttons -- hover/focus deliberately left untouched (still .pc-btn--outline's own red), per the organizer's own spec. */ .pc-btn--guest { border-color: #1565c0; color: #1565c0; } /* "Enter without an account" collapsible section (guest-entry.js toggles [hidden]) -- deliberately plain/boxed, same modest level of styling as individual-entry.php's own bare /