/* TMS brand palette — single source of truth for plain HTML/Bootstrap-style markup. MudBlazor components read the equivalent values from TMS.Web/Theme/TmsTheme.cs (kept in sync by hand, MudBlazor can't consume CSS custom properties directly). Two independent choices, both persisted and applied via attributes on : - [data-theme] "light" | "dark" — structural colors (background/surface/text) - [data-profile] "blue" | "green" | "orange" — brand colors (primary/accent) only Both attributes are set by TMS.Web/Services/ThemeService.cs (via wwwroot/theme.js) once the user picks a mode/profile, and by an inline script in App.razor's before first paint (avoids a flash of the wrong theme/profile) — that script always resolves an explicit value (from localStorage, falling back to prefers-color-scheme for theme / "blue" for profile), so there is no separate prefers-color-scheme branch needed here in the CSS. */ /* Structural colors — depend only on light/dark, not on the color profile. */ :root { --tms-background: #f4f7fa; --tms-surface: #ffffff; --tms-text: #12232e; --tms-text-secondary: #4a5a68; --tms-border: rgba(18, 35, 46, 0.12); --tms-overlay: rgba(6, 24, 36, 0.45); } :root[data-theme="dark"] { --tms-background: #12161d; --tms-surface: #1e2530; --tms-text: #e8edf2; --tms-text-secondary: #a9b6c2; --tms-border: rgba(232, 237, 242, 0.14); --tms-overlay: rgba(0, 0, 0, 0.6); } /* Brand colors — one pair of light/dark values per selectable color profile. "blue" is the default — Primary je záměrně stejná modrá jako lak stolu na živé desce (.tt-table níže, #2a82e6 → #1560bd → #0d4590), ne nezávisle vybraná barva — viz návrh vizuální identity (1.9.2026). Accent ("Ball") je citrusová oranžová, smí se objevit jen ojediněle. */ :root, :root[data-profile="blue"] { --tms-primary: #1560bd; --tms-primary-dark: #0d4590; --tms-accent: #e8622a; } :root[data-theme="dark"], :root[data-profile="blue"][data-theme="dark"] { --tms-primary: #5b9bd9; --tms-primary-dark: #4a86c4; --tms-accent: #ff8a52; } :root[data-profile="green"] { --tms-primary: #1e8a5f; --tms-primary-dark: #146b48; --tms-accent: #f2b705; } :root[data-profile="green"][data-theme="dark"] { --tms-primary: #4fbf8a; --tms-primary-dark: #3a9c6f; --tms-accent: #f5c518; } :root[data-profile="orange"] { --tms-primary: #d9591b; --tms-primary-dark: #b8460f; --tms-accent: #1b8fd9; } :root[data-profile="orange"][data-theme="dark"] { --tms-primary: #ff8a4c; --tms-primary-dark: #e8703a; --tms-accent: #4fa8e0; } html, body { font-family: 'Public Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: var(--tms-background); color: var(--tms-text); } h1, h2, h3, h4, h5, h6 { font-family: 'Barlow Semi Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif; } a, .btn-link { color: var(--tms-primary); } .btn-primary { color: #fff; background-color: var(--tms-primary); border-color: var(--tms-primary-dark); } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; } .content { padding-top: 1.1rem; } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50300; } .validation-message { color: #e50300; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } .cookie-overlay { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: end; justify-content: center; padding: 1rem; background: var(--tms-overlay); } .cookie-banner { width: min(920px, 100%); background: var(--tms-surface); color: var(--tms-text); border-radius: 0.75rem; border: 1px solid var(--tms-border); padding: 1rem 1rem 1.1rem; } .cookie-text { color: var(--tms-text-secondary); } .cookie-btn { min-width: 9rem; } .cookie-btn-equal { color: var(--tms-primary-dark); background-color: var(--tms-surface); border: 1px solid var(--tms-primary); } .cookie-btn-equal:hover { color: #ffffff; background-color: var(--tms-primary); border-color: var(--tms-primary); } .cookie-settings-btn { position: fixed; right: 1rem; bottom: 1rem; z-index: 1040; background: var(--tms-surface); color: var(--tms-text); } .theme-toggle-btn, .color-profile-select { background: var(--tms-surface); color: var(--tms-text); border-color: var(--tms-border); } /* MudDatePicker/MudTimePicker: the popover otherwise inherits the anchor field's own width (e.g. Style="width:10rem" on the input), clipping the calendar/clock (which need ~310px) via the popover's own overflow:hidden instead of sizing to their content. */ .mud-popover:has(.mud-picker-popover-paper) { width: auto !important; } .mud-picker-popover-paper { width: auto !important; min-width: 310px; } /* Stůl na stolní tenis — použito v editoru rozmístění i na živé desce. Barva okraje (--tt-table-border) nese stav (volno/obsazeno/…), vlastní deska je vždy modrá jako reálný stůl; nastavuje se buď inline stylem (živá deska) nebo výchozí šedou (editor rozmístění). Výchozí (bez .tt-table-rotated) = na šířku; s .tt-table-rotated = na výšku (Table.IsRotated). */ .tt-table { --tt-table-border: #6b7280; width: 84px; height: 48px; /* jemný lesk vlevo nahoře nad modrou deskou — společně s barevnou září níže dává stolu trochu 3D dojem místo ploché barevné plochy. */ background: radial-gradient(120% 60% at 20% 12%, rgba(255, 255, 255, 0.32), transparent 60%), linear-gradient(160deg, #2a82e6 0%, #1560bd 45%, #0d4590 100%); border-radius: 6px; border: 3px solid var(--tt-table-border); position: relative; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45), 0 0 16px 1px color-mix(in srgb, var(--tt-table-border) 70%, transparent); flex-shrink: 0; } .tt-table::before { /* síťka uprostřed stolu (na šířku = svislá čára) */ content: ""; position: absolute; left: 50%; top: 2px; bottom: 2px; width: 2px; background: #fff; transform: translateX(-50%); } .tt-table.tt-table-rotated { width: 48px; height: 86px; } /* Uvnitř .tt-hall-floor (promítání na projektoru/různá rozlišení) škáluje stůl podle skutečné šířky plochy (cqw), ne podle pevných px — na velké obrazovce i na mobilu zůstane stejný poměr. */ .tt-hall-floor .tt-table { width: 12cqw; height: 6.8cqw; border-width: 0.4cqw; border-radius: 0.7cqw; } .tt-hall-floor .tt-table.tt-table-rotated { width: 6.8cqw; height: 12cqw; } .tt-hall-floor .tt-table-number { font-size: 2.8cqw; } /* Text pod stolem (hráči/skóre) musí škálovat společně se stolem — jinak na velkém plátně zůstane nesmyslně malý vůči obřímu stolu. Horní barevný pruh přebírá stejnou barvu stavu jako okraj stolu (--tt-table-border, nastavený na společném rodiči), aby šel stav stolu vyčíst na první pohled i bez čtení textu. */ .tt-hall-floor .tt-table-badge { /* display:inline-block je nutné, aby max-width/overflow/text-overflow na inline vůbec fungovaly — jinak se popisek roztáhne na šířku obsahu a překrývá sousední stoly. */ display: inline-block; font-size: 1.9cqw; font-weight: 600; line-height: 1.3; max-width: 26cqw; overflow: hidden; text-overflow: ellipsis; border-top: 0.35cqw solid var(--tt-table-border, transparent); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); } .tt-table.tt-table-rotated::before { /* na výšku = vodorovná čára */ left: 2px; right: 2px; top: 50%; bottom: auto; width: auto; height: 2px; transform: translateY(-50%); } .tt-table::after { /* linie hřiště po obvodu */ content: ""; position: absolute; inset: 3px; border: 1px solid rgba(255, 255, 255, 0.65); border-radius: 2px; pointer-events: none; } .tt-table-number { position: relative; z-index: 1; color: #fff; font-weight: 700; font-size: 0.7rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); } /* Plocha haly v editoru rozmístění i na živé desce — nápodoba dřevěné palubovky víceúčelové sportovní haly: vrstva čar basketbalového hřiště (SVG) nad dřevěnými "prkny" (repeating-linear-gradient), stejně jako u reálných tělocvičen s dokreslenými čarami více sportů. */ .tt-hall-floor { /* container query context — potomci (.tt-table) se škálují podle skutečné šířky téhle plochy (cqw), takže vzhled zůstává poměrově stejný na projektoru i na malém displeji. */ container-type: inline-size; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 500'%3E%3Crect x='20' y='20' width='760' height='460' fill='none' stroke='%23c0392b' stroke-width='4'/%3E%3Cline x1='400' y1='20' x2='400' y2='480' stroke='%23c0392b' stroke-width='4'/%3E%3Ccircle cx='400' cy='250' r='55' fill='none' stroke='%23c0392b' stroke-width='4'/%3E%3Crect x='20' y='170' width='140' height='160' fill='none' stroke='%23c0392b' stroke-width='4'/%3E%3Ccircle cx='160' cy='250' r='55' fill='none' stroke='%23c0392b' stroke-width='4' stroke-dasharray='6 6'/%3E%3Crect x='640' y='170' width='140' height='160' fill='none' stroke='%23c0392b' stroke-width='4'/%3E%3Ccircle cx='640' cy='250' r='55' fill='none' stroke='%23c0392b' stroke-width='4' stroke-dasharray='6 6'/%3E%3Cpath d='M 20 60 A 380 380 0 0 1 20 440' fill='none' stroke='%23c0392b' stroke-width='4'/%3E%3Cpath d='M 780 60 A 380 380 0 0 0 780 440' fill='none' stroke='%23c0392b' stroke-width='4'/%3E%3C/svg%3E"), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0, rgba(0, 0, 0, 0.05) 2px, transparent 2px, transparent 90px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0, transparent 45px, rgba(0, 0, 0, 0.03) 90px), linear-gradient(180deg, #e0b880, #c99a5f); background-size: 100% 100%, auto, auto, auto; background-repeat: no-repeat, repeat, repeat, no-repeat; border: 5px solid #7a4a20; border-radius: 6px; box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.2), 0 10px 30px rgba(0, 0, 0, 0.45); } /* Atmosférický rámeček kolem plochy haly — tmavá hala s rozostřenými reflektory (jen CSS, žádný externí obrázek), aby deska nepůsobila na holé bílé/šedé pozadí stránky. Plocha haly samotná (.tt-hall-floor) zůstává beze změny čitelná — atmosféra je jen v okolním rámu. */ .tt-arena { padding: clamp(0.75rem, 2.5vw, 2.5rem); border-radius: 20px; background: radial-gradient(140px 90px at 10% 15%, rgba(255, 255, 255, 0.16), transparent 70%), radial-gradient(100px 70px at 88% 10%, rgba(255, 255, 255, 0.10), transparent 70%), radial-gradient(160px 100px at 50% 105%, rgba(120, 170, 255, 0.10), transparent 70%), linear-gradient(180deg, #05070d 0%, #0d1420 55%, #131a26 100%); box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.6); } :root[data-theme="dark"] .tt-hall-floor { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 500'%3E%3Crect x='20' y='20' width='760' height='460' fill='none' stroke='%23e0685a' stroke-width='4'/%3E%3Cline x1='400' y1='20' x2='400' y2='480' stroke='%23e0685a' stroke-width='4'/%3E%3Ccircle cx='400' cy='250' r='55' fill='none' stroke='%23e0685a' stroke-width='4'/%3E%3Crect x='20' y='170' width='140' height='160' fill='none' stroke='%23e0685a' stroke-width='4'/%3E%3Ccircle cx='160' cy='250' r='55' fill='none' stroke='%23e0685a' stroke-width='4' stroke-dasharray='6 6'/%3E%3Crect x='640' y='170' width='140' height='160' fill='none' stroke='%23e0685a' stroke-width='4'/%3E%3Ccircle cx='640' cy='250' r='55' fill='none' stroke='%23e0685a' stroke-width='4' stroke-dasharray='6 6'/%3E%3Cpath d='M 20 60 A 380 380 0 0 1 20 440' fill='none' stroke='%23e0685a' stroke-width='4'/%3E%3Cpath d='M 780 60 A 380 380 0 0 0 780 440' fill='none' stroke='%23e0685a' stroke-width='4'/%3E%3C/svg%3E"), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0.25) 2px, transparent 2px, transparent 90px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0, transparent 45px, rgba(0, 0, 0, 0.15) 90px), linear-gradient(180deg, #8a6a3f, #6f5230); background-size: 100% 100%, auto, auto, auto; background-repeat: no-repeat, repeat, repeat, no-repeat; border-color: #4a3216; } /* ── Výsledkové dlaždice (ScoreTiles) ──────────────────────────────── Čitelný TV board pro projektor/monitor. Tmavá paleta, obsazené stoly jsou plně viditelné, volné jsou výrazně ztlumené. */ .tt-tiles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.65rem; } .tt-tile { background: linear-gradient(145deg, #111827 0%, #1a2234 100%); border: 1px solid rgba(255, 255, 255, 0.07); border-left: 3px solid #ef4444; border-radius: 10px; padding: 0.8rem 1rem 0.7rem; display: flex; flex-direction: column; gap: 0.4rem; transition: opacity 0.4s ease, box-shadow 0.3s ease; min-height: 120px; } .tt-tile--active { box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.15), 0 4px 18px rgba(0, 0, 0, 0.5); } .tt-tile--free { border-left-color: #374151; opacity: 0.28; } /* záhlaví: číslo stolu + hala */ .tt-tile__header { display: flex; justify-content: space-between; align-items: baseline; } .tt-tile__number { font-size: 1.05rem; font-weight: 800; color: #f9fafb; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; } .tt-tile__hall { font-size: 0.65rem; color: rgba(255, 255, 255, 0.35); text-transform: uppercase; letter-spacing: 0.07em; } /* celkové skóre zápasu (počet vyhraných setů, ne bodů) — v záhlaví vedle čísla stolu, aby byl vidět stav zápasu bez ohledu na to, jak dlouhé jsou jméno hráčů */ .tt-tile__setcount-badge { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1rem; color: #fbbf24; } /* dva řádky hráčů: avatar (zatím jen iniciály — fotky hráčů zatím nemáme) + jméno + aktuální skóre */ .tt-tile__players { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 0.3rem; } .tt-tile__row { display: flex; align-items: center; gap: 0.5rem; padding: 0.15rem 0.3rem; margin: 0 -0.3rem; border-radius: 6px; transition: background 0.3s ease; } .tt-tile__avatar { flex: 0 0 auto; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 800; color: rgba(255, 255, 255, 0.85); object-fit: cover; } .tt-tile__name { flex: 1 1 auto; min-width: 0; font-size: 0.9rem; font-weight: 600; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tt-tile__livescore { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.35rem; color: #fff; min-width: 1.6rem; text-align: right; transition: color 0.2s ease; } /* hráč aktuálně na podání — jemný modrý pruh přes celý řádek, čitelný i z dálky */ .tt-tile__row--serving { background: linear-gradient(90deg, rgba(37, 99, 235, 0.32), rgba(37, 99, 235, 0.05)); } .tt-tile__row--serving .tt-tile__name { color: #fff; } .tt-tile__row--serving .tt-tile__livescore { color: #93c5fd; } /* název kategorie */ .tt-tile__category { font-size: 0.65rem; color: rgba(255, 255, 255, 0.28); text-transform: uppercase; letter-spacing: 0.06em; margin-top: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* historie odehraných setů (bez toho rozehraného — ten už je vidět velký v .tt-tile__livescore) */ .tt-tile__sethistory { font-size: 0.62rem; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.4); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* volný stůl — jen tlumené číslo, žádný textový štítek ("TABLE FREE" ruší mřížku) */ .tt-tile__free-number { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; color: rgba(255, 255, 255, 0.12); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }