/* Wyjściowa 11 - popup wyboru meczu i podglądu projektu. Kolejność sekcji jest umowna i obowiązująca: tokeny -> resety -> szkielet okna -> formularz -> ekran szukania -> kreator -> podgląd końcowy -> ochrona podglądu -> breakpointy -> ograniczenie animacji. KAŻDY selektor występuje tu dokładnie raz. Poprzednia wersja dopisywała poprawki na końcu pliku, przez co ten sam element miał po 3-4 sprzeczne deklaracje i realny wygląd zależał od tego, która wygra kaskadę. */ /* Krój podglądu. Na produkcie tnie Novarese-Medium-CE (Adobe/ITC, licencja preview&print — nie do osadzania w webie), więc w sklepie stoi Playfair Display (OFL) z PEŁNYM zestawem europejskim: polskie, czeskie, chorwackie, węgierskie, rumuńskie, tureckie, bałtyckie. Poprzedni plik był okrojony do 143 glifów i klient z nazwiskiem „Šimić" czy „Gündoğan" widział zamienniki z Georgii. Kolejność źródeł: najpierw NASZ plik, żeby podgląd był ten sam u każdego — lokalny Novarese jest tylko premią dla stanowiska z zainstalowanym krojem CE. */ @font-face { font-family: M11PreviewSerif; src: local('Novarese-Medium-CE'), url('../fonts/m11-preview-serif.woff2?v=2') format('woff2'); unicode-range: U+0020-007E, U+00A0-024F, U+1E00-1EFF, U+2010-205E, U+20AC, U+2122, U+00B0, U+2032, U+2033, U+2212; font-style: normal; font-weight: 400; font-display: swap; } /* Tokeny MUSZĄ siedzieć na :root, a nie na .m11-picker - product.js przenosi .m11-modal do (żeby nie dziedziczyć transformacji i z-indexów z motywu sklepu), więc okno przestaje być potomkiem pickera i wszystkie zmienne zdefiniowane na nim byłyby w oknie nierozwiązane. */ :root { /* Obrys płyty boiska 1:1 z konturem cięcia (m11-field-cut w worker/lineup/m11_worker/templates/field-reference.svg, viewBox 245.52x190). Kontener odwzorowuje zakres X 2.7589-242.7589, stąd te procenty. Dolne narożniki są PODCIĘTE - poniżej y=167.68/190 boki są pionowe - i to jest kształt, który klient dostanie z lasera. */ --m11-field-clip: polygon(16.01% 0, 83.99% 0, 100% 88.25%, 100% 100%, 0 100%, 0 88.21%); --m11-accent: #1f5a78; --m11-accent-dark: #17465e; --m11-ink: #292927; --m11-muted: #777771; --m11-label: #5a5a55; --m11-line: #d7d7d2; --m11-line-soft: #e1e1dc; --m11-surface: #fff; --m11-canvas: #f8f8f6; --m11-error: #a33b2f; --m11-frame: #7b6e5a; --m11-frame-ink: #ead9ac; --m11-radius: 8px; --m11-gap: 15px; --m11-content-max: 760px; } /* Potwierdzenie idzie POD przycisk, nie obok: w jednym rzedzie sciskalo "Zmien mecz" do dwoch linii. */ .m11-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0; } .m11-picker > .m11-chosen { flex: 1 1 100%; } .m11-picker > input[type=hidden] { display: none; } /* --- Resety defensywne --------------------------------------------------- Motyw sklepu stylizuje globalnie `button` (środkowanie tekstu, wersaliki, letter-spacing, własne paddingi). To właśnie stąd brały się podpowiedzi klubów raz wyśrodkowane, raz do lewej. Wymuszamy więc własne wartości zamiast liczyć na to, że motyw ich nie ruszy. */ .m11-dialog .m11-suggestions button, .m11-dialog .m11-candidate { box-sizing: border-box; width: 100%; margin: 0; font: inherit; line-height: 1.35; letter-spacing: normal; text-align: left; text-transform: none; cursor: pointer; /* Motyw sklepu ustawia na `button` place-content:center. W siatce oznacza to, że kolumna kurczy się do najszerszego dziecka i zostaje wyśrodkowana - każdy wiersz podpowiedzi wypadał wtedy w innym miejscu. Samo text-align tego nie naprawia, bo problem jest w rozkładzie siatki, nie w tekście. */ place-content: center start; justify-items: stretch; } /* Obrazki: motyw wymusza `max-width:100%`, co ścinało width:102.3% płyty do 100%. Przy nieprzyciętym podglądzie było to tylko przesunięcie o kilka pikseli, ale po przycięciu do konturu cięcia rozjeżdżał się cały kształt - płyta wychodziła krzywa, a z boku zostawał ciemny pas tła. */ .m11-dialog .m11-pitch > img, .m11-dialog .m11-final-field > img { max-width: none; min-width: 0; } /* inline-flex zamiast paddingu pionowego: przy dziedziczonym line-height napis siadal odrobine za wysoko i wygladal na niewyrownany w ramce przycisku. */ .m11-open, .m11-save, .m11-cancel { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid transparent; border-radius: var(--m11-radius); padding: 0 18px; font: inherit; font-weight: 700; line-height: 1.2; text-align: center; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease; } .m11-open, .m11-save { background: var(--m11-accent); color: #fff; } /* color powtorzone celowo: motyw sklepu nadaje button:hover wlasny kolor tekstu, przez co napis na niebieskim tle robil sie ciemny i znikal w tle. */ .m11-open:hover, .m11-save:hover:not(:disabled), .m11-open:focus, .m11-save:focus:not(:disabled) { background: var(--m11-accent-dark); color: #fff; } /* Przycisk drugiego wyboru, nie przycisk zapomniany: czytelna ramka i ten sam stopien pisma co przycisk glowny. Hover tylko przyciemnia tlo - podskok i zmiana koloru odciagaly wzrok od "Zatwierdz projekt". */ .m11-cancel { background: #fff; border-color: #b6b6ad; color: var(--m11-ink); } .m11-cancel:hover, .m11-cancel:focus { background: #f0efea; border-color: #8f8f86; color: var(--m11-ink); } .m11-open:focus-visible, .m11-save:focus-visible, .m11-cancel:focus-visible, .m11-x:focus-visible, .m11-text-button:focus-visible, .m11-dialog input:focus-visible, .m11-dialog select:focus-visible { outline: 3px solid rgba(31, 90, 120, .28); outline-offset: 2px; } /* --- Odpornosc na style motywu ------------------------------------------- */ /* Motyw sklepu stylizuje globalnie `button` i `input`. Ponizsze reguly nie sa ozdoba - kazda odpowiada bledowi, ktory bylo widac na zywym sklepie. */ /* padding: 15px 35px z motywu rozciagal kolo zamkniecia w elipse 70x40. */ .m11-dialog .m11-x { width: 40px; height: 40px; min-width: 0; padding: 0; } .m11-dialog .m11-x:hover, .m11-dialog .m11-x:focus { border-color: transparent; background: #f0f0ed; background-image: none; color: var(--m11-ink); } /* Przycisk tekstowy ma zostac tekstem takze pod kursorem - motyw podkladal mu pelne tlo przycisku. */ .m11-dialog .m11-text-button:hover, .m11-dialog .m11-text-button:focus { border-color: transparent; background: transparent; background-image: none; color: var(--m11-accent-dark); } /* Motyw maluje KAZDE pole przy kliknieciu na bladoniebiesko i zmienia kolor tekstu (przy `select` z !important). Pola w oknie maja wygladac tak samo przed i po kliknieciu - roznic je ma obwodka skupienia, nie kolor tla. */ .m11-dialog input:focus, .m11-dialog select:focus { border-color: var(--m11-accent); background-color: #fff !important; color: var(--m11-ink); } .m11-dialog input.is-missing:focus { background-color: #fdf4f2 !important; } .m11-dialog button:disabled { cursor: not-allowed; opacity: .55; transform: none; } .m11-modal.is-busy .m11-dialog button:disabled { cursor: wait; } /* --- Szkielet okna ------------------------------------------------------- */ .m11-modal { position: fixed !important; inset: 0 !important; z-index: 2147483647 !important; display: none; visibility: hidden; pointer-events: none; } .m11-modal.is-open { display: block !important; visibility: visible; pointer-events: auto; } .m11-backdrop { position: absolute !important; inset: 0 !important; z-index: 0 !important; background: rgba(12, 15, 17, .72) !important; backdrop-filter: blur(3px); } .m11-dialog { position: relative !important; z-index: 2 !important; display: flex; flex-direction: column; width: min(920px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: 16px auto; border-radius: 14px; background: var(--m11-canvas); overflow: hidden; box-shadow: 0 28px 90px rgba(0, 0, 0, .36); animation: m11-dialog-in .22s ease-out; } @keyframes m11-dialog-in { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } } .m11-head, .m11-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 20px; background: var(--m11-surface); color: var(--m11-ink); } .m11-head { border-bottom: 1px solid #e5e5e1; } .m11-head > div { display: grid; gap: 2px; } .m11-head strong { font-size: 19px; line-height: 1.25; } .m11-head span { color: #666661; font-size: 13px; line-height: 1.35; } .m11-x { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--m11-ink); font-size: 28px; line-height: 1; cursor: pointer; } .m11-x:hover { background: #f0f0ed; } .m11-actions { flex: 0 0 auto; border-top: 1px solid #e2e2dd; } .m11-actions > div { display: flex; gap: 8px; } /* W pasku akcji odstep pionowy z listy widokow tylko przesuwal napis w dol wzgledem sasiednich przyciskow. */ .m11-actions .m11-text-button { margin-top: 0; } .m11-body { min-height: 260px; overflow-y: auto; } /* Jedna siatka treści dla WSZYSTKIEGO w oknie. Wcześniej pola formularza miały max-width: 760px, a lista wyników nie miała żadnego, więc kafelki meczów były szersze od pól nad nimi. */ .m11-view, .m11-message { box-sizing: border-box; width: 100%; max-width: calc(var(--m11-content-max) + 52px); margin: 0 auto; padding-inline: 26px; color: var(--m11-ink); } .m11-view { padding-block: 24px; } .m11-message { padding-block: 0; } .m11-view[hidden], .m11-suggestions[hidden] { display: none !important; } .m11-message, .m11-editor-message { min-height: 20px; margin-top: 14px; color: #666661; font-size: 12px; line-height: 1.4; } .m11-message.is-error, .m11-editor-message.is-error { color: var(--m11-error); font-weight: 650; } /* Pusty pasek komunikatu nie może rezerwować miejsca - inaczej pod nagłówkiem zawsze wisiała pusta luka i pola formularza "odklejały się" od tytułu. */ .m11-message:empty { display: none; } .m11-open-body { overflow: hidden !important; } .m11-modal.is-busy { cursor: wait; } /* --- Formularz i podpowiedzi klubów -------------------------------------- */ .m11-fields { display: grid; gap: var(--m11-gap); } .m11-search-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .m11-fields label { display: grid; align-content: start; gap: 5px; min-width: 0; } .m11-fields label > span { color: var(--m11-label); font-size: 12px; font-weight: 650; } .m11-dialog input, .m11-dialog select { box-sizing: border-box; width: 100%; max-width: none; min-width: 0; height: 45px; margin: 0; padding: 10px; border: 1px solid #c9c9c3; border-radius: var(--m11-radius); background: var(--m11-surface); color: var(--m11-ink); font: inherit; font-size: 16px; line-height: 1.3; } .m11-dialog input:focus, .m11-dialog select:focus { border-color: var(--m11-accent); } .m11-dialog input.is-missing { border-color: var(--m11-error); background: #fdf4f2; } .m11-combobox { position: relative; } /* Lista jest position:fixed i pozycjonowana z JS (positionSuggestions), bo przewijane wnętrze okna (.m11-body) obcinało ją w połowie. */ .m11-suggestions { position: fixed; z-index: 2147483647; max-height: 320px; padding: 5px; border: 1px solid var(--m11-line); border-radius: 9px; background: var(--m11-surface); overflow-y: auto; box-shadow: 0 14px 34px rgba(0, 0, 0, .16); } .m11-suggestions button { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-height: 46px; padding: 8px 10px; border: 0; border-radius: 6px; background: var(--m11-surface); color: var(--m11-ink); } .m11-suggestions button:hover, .m11-suggestions button:focus, .m11-suggestions button.is-active { background: #eef5f8; outline: 0; } .m11-suggestions strong { font-size: 14px; font-weight: 700; } .m11-suggestions span { color: var(--m11-muted); font-size: 11px; } /* --- Lista znalezionych meczów ------------------------------------------- */ .m11-results { display: grid; gap: 8px; } .m11-results-head { margin: 22px 0 0; color: var(--m11-label); font-size: 12px; font-weight: 650; } .m11-candidate { display: grid; grid-template-columns: minmax(0, 1fr) 72px; align-items: center; gap: 18px; padding: 13px 14px; border: 1px solid var(--m11-line); border-radius: 9px; background: var(--m11-surface); color: var(--m11-ink); } .m11-candidate:hover { border-color: #9fb3bd; background: #f7fafb; } .m11-candidate > span { display: grid; gap: 3px; min-width: 0; } .m11-candidate strong { font-size: 14px; font-weight: 700; } .m11-candidate small { color: var(--m11-muted); font-size: 11px; } /* Stała kolumna wyniku - bez niej lista "skakała" przy różnej długości zapisu. */ .m11-candidate > b { display: grid; justify-items: end; gap: 2px; font-size: 18px; line-height: 1; } .m11-candidate > b small { font-size: 10px; font-weight: 700; white-space: nowrap; } .m11-text-button { margin-top: 18px; padding: 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--m11-accent); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; } /* --- Ekran szukania ------------------------------------------------------ */ .m11-progress { display: grid; gap: 6px; padding: 22px 16px; border: 1px solid var(--m11-line-soft); border-radius: 12px; background: var(--m11-surface); text-align: center; box-shadow: 0 2px 10px rgba(41, 41, 39, .05); } .m11-progress-query { margin: 0 0 14px; color: var(--m11-label); font-size: 13px; } .m11-progress-query strong { color: var(--m11-ink); } /* Kadr płyty w proporcji i kształcie produktu (ten sam --m11-field-clip), z zapalającymi się pozycjami 11 zawodników - ekran oczekiwania zapowiada to, co klient dostanie, zamiast pokazywać generyczny "skaner". */ .m11-scan { position: relative; width: 100%; max-width: 250px; margin: 0 auto 18px; aspect-ratio: 245.52 / 190; } .m11-scan-field { position: absolute; inset: 0; background: linear-gradient(170deg, #24688a, #14384c); clip-path: var(--m11-field-clip); } .m11-scan-field i { position: absolute; width: 7.5%; aspect-ratio: 1; border-radius: 50%; background: var(--m11-frame-ink); transform: translate(-50%, -50%); opacity: .22; animation: m11-dot 2.2s ease-in-out infinite; } @keyframes m11-dot { 0%, 62%, 100% { opacity: .22; box-shadow: none; } 20% { opacity: 1; box-shadow: 0 0 8px rgba(234, 217, 172, .75); } } .m11-progress-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; } .m11-progress-stages li { padding-top: 9px; border-top: 2px solid var(--m11-line-soft); color: var(--m11-muted); font-size: 11px; font-weight: 650; transition: color .25s ease, border-color .25s ease; } .m11-progress-stages li.is-done { border-top-color: var(--m11-accent); color: var(--m11-label); } .m11-progress-stages li.is-active { border-top-color: var(--m11-accent); color: var(--m11-accent); } .m11-progress-bar { position: relative; height: 8px; margin: 0 4px; border-radius: 99px; background: #e5e5e0; overflow: hidden; } /* Bez CSS-owego "transition: width" - szerokość ustawia rAF co klatkę (progressTick w product.js), więc przejście liczone przez przeglądarkę tylko opóźniałoby licznik względem wyświetlanej liczby. */ .m11-progress-bar-fill { position: relative; width: 0; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--m11-accent), #3a8ab4); overflow: hidden; } .m11-progress-bar-fill::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%); background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .6) 45%, transparent 65%); animation: m11-shine 1.6s linear infinite; } @keyframes m11-shine { 0% { transform: translateX(-120%); } 100% { transform: translateX(120%); } } .m11-progress-percent { margin: 8px 0 0; color: var(--m11-accent); font-size: 32px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .m11-progress-hint { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid #eeeeea; color: var(--m11-muted); font-size: 12px; line-height: 1.5; } /* Podpowiedz czeka niewidoczna, ale ZAJMUJE miejsce - dzieki temu po jej pojawieniu sie nic nie podskakuje, a sam tekst wchodzi lagodnie. */ .m11-progress-hint { opacity: 0; transform: translateY(4px); transition: opacity 0.5s ease, transform 0.5s ease; } .m11-progress-hint.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .m11-progress-hint { transition: opacity 0.2s linear; transform: none; } } /* --- Kreator (ścieżka ręczna i poprawki) --------------------------------- */ .m11-editor-grid { display: grid; grid-template-columns: 350px minmax(360px, 1fr); gap: 24px; } .m11-pitch { position: relative; align-self: start; aspect-ratio: 245.52 / 190; background: #171717; clip-path: var(--m11-field-clip); overflow: hidden; } .m11-pitch > img { position: absolute; top: 0; left: -1.15%; width: 102.3%; height: 100%; } .m11-token { position: absolute; z-index: 2; display: grid; place-items: center; width: 48px; min-height: 35px; padding: 3px; border: 1px solid var(--m11-accent); border-radius: 7px; background: var(--m11-surface); color: var(--m11-ink); transform: translate(-50%, -50%); cursor: default; user-select: none; box-shadow: 0 3px 8px rgba(0, 0, 0, .12); } .m11-token b { font-size: 11px; } .m11-token small { display: block; max-width: 42px; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; } .m11-player-edit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 14px; margin-top: 18px; } .m11-player-edit label { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 6px; } .m11-player-edit .m11-number { padding-inline: 6px; text-align: center; } /* --- Podgląd końcowy ----------------------------------------------------- */ /* Szerokości dobrane tak, by cały podgląd mieścił się w tej samej kolumnie treści co formularz i lista meczów (var(--m11-content-max) = 760 px): 480 + 30 + 250 = 760. Wcześniej podsumowanie wychodziło poza tę siatkę i wyglądało, jakby było doklejone obok okna. */ .m11-final-stage { display: grid; grid-template-columns: minmax(0, 480px) minmax(210px, 250px); align-items: start; justify-content: center; gap: 30px; } .m11-product-shadow { position: relative; box-sizing: border-box; width: min(100%, calc(100dvh - 220px), 480px); justify-self: center; padding: 3.35%; border: 2px solid #050606; background: linear-gradient(135deg, #202120 0%, #070807 28%, #151615 58%, #020302 100%); box-shadow: 0 20px 38px rgba(14, 14, 13, .34), 0 4px 10px rgba(14, 14, 13, .28), inset 0 0 0 1px #2b2c2a, inset 0 0 0 4px #080908; } .m11-product-shadow:after { content: ""; position: absolute; inset: 3.05%; z-index: 40; border: 1px solid rgba(0, 0, 0, .82); box-shadow: 0 0 0 1px rgba(57, 59, 56, .52), inset 0 0 7px rgba(0, 0, 0, .55); pointer-events: none; } .m11-final-product { position: relative; aspect-ratio: 1; background: #171717; container-type: inline-size; overflow: hidden; font-family: M11PreviewSerif, 'Novarese-Medium-CE', Georgia, serif; } /* Przycięcie do konturu cięcia. Bez niego linie boiska z field-reference.svg (sięgają x=245.5 przy obrysie kończącym się na 242.76) wystawały poza materiał, a dolne narożniki wyglądały na pełne zamiast podciętych. */ .m11-final-field { position: absolute; inset: 0 0 auto; height: 79.166667%; clip-path: var(--m11-field-clip); overflow: hidden; } .m11-final-field > img { position: absolute; top: 0; left: -1.15%; width: 102.3%; height: 100%; } .m11-final-player { position: absolute; z-index: 2; width: 15.175%; aspect-ratio: 36.42 / 29.54; transform: translate(-50%, -50%); } .m11-final-shirt { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1px 1px rgba(50, 36, 17, .24)); font-family: inherit; } .m11-final-shirt .m11-shirt-cut { fill: #58331f; stroke: #f0ddb3; stroke-width: .34; stroke-linejoin: round; } /* Obwiednia koszulki: obrys, nie wypelnienie. Proba wypelnienia (fill-rule) sprawia, ze obwiednia ZNIKA - grupa "m11-player-engrave" w szablonie ma wlasny atrybut fill="none", ktory wygrywa z dziedziczonym stylem. */ .m11-final-shirt .m11-shirt-engrave { fill: none; stroke: #f0ddb3; stroke-width: .34; stroke-linecap: round; stroke-linejoin: round; } .m11-final-shirt text { fill: #f0ddb3; text-anchor: middle; } .m11-shirt-number { font-size: 10px; font-weight: 600; } /* Bez dominant-baseline: y jest prawdziwa linia bazowa, liczona w JS tak samo jak w workerze - inaczej wersaliki siedza za wysoko w polu na nazwisko. */ .m11-shirt-name { letter-spacing: .08px; text-transform: uppercase; } .m11-product-frame { position: absolute; inset: auto 0 0; height: 20.833333%; box-sizing: border-box; background: var(--m11-frame); color: var(--m11-frame-ink); text-align: center; } .m11-product-frame > * { position: absolute; line-height: 1; white-space: nowrap; } .m11-frame-date { top: 14.5%; left: 0; right: 0; font-size: 1.98cqw; } .m11-frame-teams { top: 27.8%; left: 3%; right: 3%; overflow: hidden; font-size: 5.12cqw; font-weight: 400; text-overflow: clip; } .m11-frame-score { top: 53.3%; left: 0; right: 0; font-size: 3.96cqw; font-weight: 400; } .m11-frame-score-extra { top: 70.8%; left: 0; right: 0; font-size: 1.98cqw; } .m11-frame-league, .m11-frame-venue { bottom: 4.1%; max-width: 43%; overflow: hidden; font-size: 2.63cqw; text-overflow: clip; } .m11-frame-league { left: 2%; text-align: left; } .m11-frame-venue { right: 2%; text-align: right; } .m11-final-summary { display: flex; min-width: 0; flex-direction: column; color: var(--m11-ink); animation: m11-summary-in .24s ease-out; } @keyframes m11-summary-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } } .m11-final-summary header { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; padding-bottom: 14px; border-bottom: 1px solid #d8d8d2; } .m11-final-summary header > span { grid-column: 1/-1; color: var(--m11-muted); font-size: 9px; font-weight: 800; letter-spacing: .16em; } .m11-final-summary header > strong { font-size: 14px; line-height: 1.28; } .m11-final-summary header > b { display: grid; justify-items: end; gap: 2px; font-size: 22px; line-height: 1; } .m11-final-summary header > b small { color: var(--m11-muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .m11-final-summary header > b small:empty { display: none; } /* text-align jawnie: motyw sklepu potrafi ustawic wyrownanie do prawej i wtedy wartosci w kazdym wierszu zaczynaja sie w innym miejscu. */ .m11-final-summary h3 { margin: 0 0 5px; font-size: 10px; letter-spacing: .12em; } .m11-final-summary ol { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid #d8d8d2; } .m11-final-summary li { display: grid; grid-template-columns: 28px 1fr; align-items: center; min-height: 23px; border-bottom: 1px solid var(--m11-line-soft); font-size: 10px; } .m11-final-summary li b { color: #6a4028; } .m11-final-summary li span { overflow: hidden; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; } .m11-final-error { grid-column: 1/-1; margin-top: 4px; color: var(--m11-error); font-size: 12px; font-weight: 650; } /* --- Ochrona podglądu ---------------------------------------------------- */ .m11-protected-preview { position: relative; -webkit-touch-callout: none !important; user-select: none !important; -webkit-user-select: none !important; } .m11-protected-preview * { user-select: none !important; -webkit-user-select: none !important; } .m11-preview-guard { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; overflow: hidden; pointer-events: auto; cursor: default; } .m11-watermark-logo { display: block; width: 58%; aspect-ratio: 440/350; overflow: hidden; opacity: .3; } .m11-watermark-logo img { display: block; width: auto !important; max-width: none !important; height: 100% !important; filter: grayscale(1) brightness(.52) contrast(.76); pointer-events: none; } .m11-final-product .m11-watermark-logo { transform: translateY(17%); } /* --- Breakpointy --------------------------------------------------------- */ @media (max-width: 760px) { .m11-final-stage { grid-template-columns: minmax(0, 480px); justify-content: center; gap: 24px; } .m11-final-summary { width: min(100%, 480px); justify-self: center; } /* Dwie kolumny to uklad listy DO CZYTANIA. Bez wykluczenia trybu edycji ta sama regula lamala pola nazwisk na pol, zostawiajac wpisywanie w okienku szerokim na trzy znaki. */ .m11-final-summary:not(.m11-final-summary--edit) ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; } .m11-final-summary:not(.m11-final-summary--edit) li:nth-child(6) { border-top: 1px solid #d8d8d2; } } @media (max-width: 720px) { .m11-dialog { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; } .m11-head { padding: 12px 14px; } .m11-head span { font-size: 12px; } .m11-body { flex: 1 1 0; } .m11-view, .m11-message { padding-inline: 14px; } .m11-view { padding-block: 18px; } .m11-search-fields, .m11-editor-grid { grid-template-columns: 1fr; } .m11-player-edit { grid-template-columns: 1fr; } .m11-pitch { order: -1; } .m11-product-shadow { width: min(100%, 500px); margin: auto; } .m11-actions { padding: 10px 12px; } .m11-save, .m11-cancel { flex: 1 1 auto; } .m11-actions > div { flex: 1 1 auto; } } /* Trzy przyciski obok siebie mieszcza sie w ~360 px tylko wtedy, gdy odstepy zjada sie do zera i guziki sie stykaja. Ponizej 560 px kazdy bierze wlasny wiersz. */ @media (max-width: 560px) { .m11-actions { flex-wrap: wrap; gap: 10px; } .m11-actions > button, .m11-actions > div { flex: 1 1 100%; width: 100%; } .m11-actions .m11-text-button { min-height: 40px; } } @media (max-width: 430px) { .m11-head span { max-width: 270px; } .m11-actions { flex-wrap: wrap; } .m11-actions > div { width: 100%; } .m11-progress-stages { font-size: 10px; } .m11-final-summary:not(.m11-final-summary--edit) ol { grid-template-columns: 1fr; } .m11-final-summary:not(.m11-final-summary--edit) li:nth-child(6) { border-top: 0; } } @media (prefers-reduced-motion: reduce) { .m11-dialog, .m11-final-summary { animation: none; } .m11-open, .m11-save, .m11-cancel { transition: none; } .m11-scan-field i { animation: none; opacity: .6; } .m11-progress-bar-fill::after { animation: none; } } /* --- Poprawianie danych NA podgladzie ------------------------------------ */ /* Klient zmienia dane obok podgladu, zamiast wracac do kreatora i tracic go z oczu. Podglad odswieza przycisk (nie kazde nacisniecie klawisza - inaczej gubi sie kursor), ale zmiana USTAWIENIA przestawia pola od razu, zeby bylo widac, gdzie wpisac bramkarza, a gdzie napastnika. */ .m11-final-summary--edit .m11-edit-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 14px; } .m11-final-summary--edit label { display: grid; gap: 4px; min-width: 0; } .m11-final-summary--edit label > span { color: var(--m11-muted); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } /* Wszystkie pola tej samej wysokosci i tego samego stopnia pisma. Wyzsza swoistosc (.m11-dialog) jest konieczna: motyw sklepu nadaje wlasne style input/select, przez co pole daty bylo wyzsze i pisane wieksza czcionka. line-height: normal, bo w input[type=date] wysoki line-height przesuwa tekst. */ .m11-dialog .m11-final-summary--edit input, .m11-dialog .m11-final-summary--edit select { box-sizing: border-box; width: 100%; min-width: 0; height: 34px; margin: 0; padding: 0 10px; border: 1px solid #d8d8d2; border-radius: 6px; background: #fff; color: var(--m11-ink); font-family: inherit; font-size: 12px; font-weight: 500; line-height: normal; } .m11-dialog .m11-final-summary--edit input[type="date"] { padding-right: 6px; } /* Motyw sklepu ma wlasna regule na WNETRZE pola daty: input[type="date"]::-webkit-datetime-edit { font-size: 15px }. Samo pole dostawalo od nas 12 px, ale wpisana data i tak rysowala sie wieksza od sasiednich pol - stad wrazenie rozjechanych czcionek. */ .m11-dialog input[type="date"]::-webkit-datetime-edit { font-size: inherit; line-height: normal; } /* Bez strzalki lista rozwijana wyglada jak zwykle pole tekstowe i nikt w nia nie klika. Rysujemy ja tlem, bo appearance: none zdejmuje takze natywna. */ .m11-dialog .m11-final-summary--edit select { appearance: none; padding-right: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b6b63' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 10px 6px; cursor: pointer; } .m11-dialog .m11-final-summary--edit input::placeholder { color: #a9a9a2; } .m11-final-summary--edit input:focus, .m11-final-summary--edit select:focus { outline: 2px solid #1d6f8b; outline-offset: 1px; } .m11-edit-hint { margin: -4px 0 12px; padding-bottom: 12px; border-bottom: 1px solid #d8d8d2; color: var(--m11-muted); font-size: 11px; line-height: 1.4; } .m11-edit-lines { display: grid; gap: 10px; margin-top: 12px; } .m11-edit-line h4 { margin: 0 0 5px; color: var(--m11-muted); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .m11-edit-line ol { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; border: 0; } .m11-edit-line li { display: grid; grid-template-columns: 52px 1fr; gap: 6px; align-items: center; min-height: 0; border: 0; } .m11-edit-line input:first-child { text-align: center; } @media (max-width: 720px) { .m11-final-summary--edit .m11-edit-fields { grid-template-columns: 1fr; } .m11-edit-formation { grid-template-columns: 1fr; } } /* Puste wyszukiwanie: wyjasnienie zamiast suchego "nie znaleziono". To moment, w ktorym klient najczesciej rezygnuje - musi zobaczyc powod i wyjscie. */ .m11-empty { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--m11-line-soft, #e4e4de); border-radius: 10px; background: #fbfbf8; } .m11-empty p { margin: 0; color: var(--m11-ink); font-size: 12px; line-height: 1.5; } .m11-empty-head { font-size: 13px !important; font-weight: 750; } .m11-empty strong { font-weight: 750; } .m11-empty-manual { justify-self: start; margin-top: 2px; padding: 8px 14px; border: 1px solid #1d6f8b; border-radius: 8px; background: #fff; color: #1d6f8b; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; } .m11-empty-manual:hover { background: #1d6f8b; color: #fff; } /* --- Tryb poprawiania: ramka na srodek, dane pod nia ---------------------- */ /* W sidebarze dane byly scisniete i nie mieszczily sie z formacja ani z lista nazwisk. W trakcie pracy ramka idzie wiec na srodek, a pola dostaja pelna szerokosc pod nia. Na gotowym podgladzie (przed zatwierdzeniem) zostaje klasyczny uklad z podsumowaniem z boku. */ .m11-final-stage--edit { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 22px; } .m11-final-stage--edit .m11-product-shadow { width: min(100%, 420px); animation: m11-frame-center .38s cubic-bezier(.22, .68, .36, 1) both; } @keyframes m11-frame-center { from { transform: translateX(-6%) scale(1.04); } to { transform: none; } } .m11-final-stage--edit .m11-final-summary { width: 100%; max-width: 760px; animation: m11-panel-up .34s ease-out both; } @keyframes m11-panel-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* Pod ramka jest miejsce, wiec dane ida w trzech kolumnach zamiast w jednej. */ .m11-final-stage--edit .m11-edit-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } .m11-final-stage--edit .m11-edit-lines { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: start; gap: 14px 18px; } @media (prefers-reduced-motion: reduce) { .m11-final-stage--edit .m11-product-shadow, .m11-final-stage--edit .m11-final-summary { animation-duration: .01ms; } } @media (max-width: 900px) { .m11-final-stage--edit .m11-edit-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .m11-final-stage--edit .m11-edit-fields { grid-template-columns: 1fr; } } /* --- Opis meczu pod ramka ------------------------------------------------ */ /* Druzyny i wynik pod produktem, nie w waskiej kolumnie panelu - tam lamaly sie na trzy linie i zjadaly miejsce potrzebne na dane i sklad. */ /* Bez jawnego rozmieszczenia siatka wrzucala podpis w kolumne panelu (drugie dziecko = druga kolumna), zamiast pod ramke. Reguly tylko dla ukladu dwukolumnowego - w edycji i na waskich ekranach scena ma jedna kolumne. */ @media (min-width: 761px) { .m11-final-stage:not(.m11-final-stage--edit) > .m11-product-shadow { grid-column: 1; grid-row: 1; } .m11-final-stage:not(.m11-final-stage--edit) > .m11-final-caption { grid-column: 1 / -1; grid-row: 2; } .m11-final-stage:not(.m11-final-stage--edit) > .m11-final-summary { grid-column: 2; grid-row: 1; } .m11-final-stage:not(.m11-final-stage--edit) > .m11-final-error { grid-column: 1 / -1; } } /* Jeden szeroki wiersz pod ramka: mecz z wynikiem, pod nim data, rozgrywki i stadion. Ciagnie sie przez obie kolumny sceny, wiec dlugie nazwy stadionow maja gdzie sie zmiescic zamiast lamac sie po dwa slowa w panelu. */ .m11-final-caption { grid-column: 1 / -1; margin-top: 14px; padding-top: 12px; border-top: 1px solid #d8d8d2; } .m11-final-caption-match { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: baseline; margin: 0; } .m11-final-caption-match strong { font-size: 15px; font-weight: 700; line-height: 1.25; } .m11-final-caption-match b { display: grid; justify-items: end; gap: 2px; font-size: 20px; font-weight: 700; line-height: 1; } .m11-final-caption-match small { color: var(--m11-muted); font-size: 11px; font-weight: 600; } .m11-final-caption-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 6px 0 0; color: var(--m11-muted); font-size: 12px; font-weight: 600; } /* Kropka rozdziela dane tylko miedzy nimi - nie na poczatku i nie po zawinieciu wiersza, bo wtedy wisi na krawedzi jak literowka. */ .m11-final-caption-meta span + span::before { content: "·"; margin-right: 10px; } @media (max-width: 480px) { .m11-final-caption-match { grid-template-columns: 1fr; } .m11-final-caption-match b { justify-items: start; } } /* Na dotyku pole ponizej 16 px powoduje, ze iOS przybliza cala strone przy wejsciu w nie kursorem. Warunek jest o RODZAJ WSKAZNIKA, nie tylko o szerokosc: tablet w poziomie ma 1024 px i nadal jest dotykowy. */ @media (max-width: 720px), (hover: none) and (pointer: coarse) { .m11-dialog .m11-final-summary--edit input, .m11-dialog .m11-final-summary--edit select { height: 42px; font-size: 16px; } .m11-final-stage--edit .m11-product-shadow { width: min(100%, 340px); } .m11-edit-lines { gap: 12px; } /* Uklad z pulpitu wciety w telefon dawal dwie kolumny sekcji, a w kazdej dwoch pilkarzy obok siebie - na nazwisko zostawalo 37 px. Na waskim ekranie: sekcja na cala szerokosc, jeden pilkarz na wiersz. */ .m11-final-stage--edit .m11-edit-lines { grid-template-columns: 1fr; } .m11-final-summary--edit .m11-edit-line ol { grid-template-columns: 1fr; gap: 8px; } .m11-edit-line li { grid-template-columns: 68px minmax(0, 1fr); gap: 8px; } } /* --- Potwierdzenie na karcie produktu ------------------------------------ */ /* Po "Zatwierdz projekt" okno sie zamyka i klient zostaje na karcie produktu. Sama zmiana napisu na przycisku byla za cicha, zeby uznac to za sukces. */ .m11-chosen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; padding: 10px 12px; border: 1px solid #bcd6c6; border-radius: var(--m11-radius); background: #f1f8f3; color: #1f4d33; font-size: 13px; line-height: 1.35; } /* display: flex bije atrybut hidden, wiec bez tego pusta zielona ramka wisiala na karcie produktu zanim ktokolwiek cokolwiek wybral. */ .m11-chosen[hidden] { display: none; } .m11-chosen b { font-weight: 700; } .m11-chosen em { flex: 1 1 100%; color: #3d6b51; font-size: 12px; font-style: normal; } .m11-chosen span { color: #3d6b51; } @media (max-width: 560px) { .m11-chosen { font-size: 12px; } }