/** * Tryb ciemny + style kontrolek nagłówka (przełącznik motywu, przełącznik języka). * * Zasady: * - Plik jest ADDYTYWNY: nie zmienia trybu jasnego. Wszystkie nadpisania kolorów * mają prefiks [data-theme="dark"], więc błąd tutaj nie psuje domyślnego wyglądu. * - Ładowany z partials/header.php (początek body), czyli PO całym CSS z . * Nadpisania wygrywają kolejnością kaskady i specyficznością atrybutu. * - UWAGA: dotyczy to wyłącznie arkuszy z . Kilka komponentów wpina swój * arkusz dalej w treści strony (np. css/comments.css z partials/comments-section.php) * i wtedy kolejność jest ODWROTNA - przy równej specyficzności wygrywa tamten plik. * Nadpisanie selektora z dwiema klasami (.comment--reply .comment-card) wymaga * tam trzech, bo [data-theme="dark"] .comment-card to nadal tylko (0,2,0). * - Szerokie nadpisania elementów (a, h1-h6) używają :where(), żeby nie wygrywać * z bardziej szczegółowymi regułami komponentów (np. .menu a, .footer-links a). * - Paleta semantyczna zdefiniowana niżej: zamiast 269 hexów ze style.css * używamy kilku zmiennych (--bg-..., --text-..., --border-...). */ /* ============================================================ PRZEŁĄCZNIKI motywu i języka NA PASKU HEADERA (niezależne od motywu) Pozycjonowane absolutnie względem

(sticky = positioned), przy samej prawej krawędzi ekranu, w pustym bocznym pasie granatu poza treścią (container max 1200px). Kolumna: switch motywu nad switchem języka. Bez tła boxa. Wyjęte z flow

, więc nie poszerzają menu ani go nie dotykają. Switch języka: flaga w gałce (PL biało-czerwona / EN Union Jack). Switch motywu: słońce/księżyc w gałce. ============================================================ */ .nav-switches { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 5; } /* Switch motywu z bocznymi etykietami Light / Dark (analogicznie do PL/EN) */ .fs-theme { display: flex; align-items: center; gap: 8px; } .fs-theme-label { font-size: 0.62rem; font-weight: 700; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.3px; user-select: none; } /* Aktywna etykieta podświetlona na złoto: Light w trybie jasnym, Dark w ciemnym. Motyw ustala JS (data-theme na ), więc active sterujemy tu, nie w PHP. */ .fs-theme-label--light { color: #FFEFA7; } [data-theme="dark"] .fs-theme-label--light { color: rgba(255, 255, 255, 0.5); } [data-theme="dark"] .fs-theme-label--dark { color: #FFEFA7; } /* Oba switche jeden pod drugim: wspólna szerokość bocznych etykiet wypionowuje gałki (Light/Dark są dłuższe niż PL/EN, więc bez tego środki by się rozjeżdżały). Lewa etykieta wyrównana do prawej, prawa do lewej - obie dosunięte do switcha. */ .nav-switches .fs-theme, .nav-switches .fs-lang { gap: 8px; } .nav-switches .fs-theme-label, .nav-switches .fs-lang-label { min-width: 38px; font-size: 0.62rem; } .nav-switches .fs-theme-label--light, .nav-switches .fs-lang-label:first-child { text-align: right; } .nav-switches .fs-theme-label--dark, .nav-switches .fs-lang-label:last-child { text-align: left; } /* Węższe ekrany (poniżej ~1570px boczny pas granatu jest za wąski, by pomieścić blok switchy obok treści): switche zjeżdżają tuż POD pasek headera, wciąż przy prawej krawędzi ekranu i jeden pod drugim. Ponieważ leżą wtedy na treści strony (nie na granatowym pasku), dostają delikatne półprzezroczyste tło dla czytelności etykiet. Powyżej 1570px obowiązuje wariant bazowy - na samym pasku, bez tła. Zakres min 769px: poniżej tego działa menu mobilne (switche w rozwijanym menu). */ @media (min-width: 769px) and (max-width: 1569px) { .nav-switches { top: 100%; right: 10px; transform: translateY(9px); gap: 8px; padding: 10px 13px; background: rgba(20, 27, 43, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 14px; } } /* Geometria z !important: ui-enhancements.js na urządzeniach dotykowych dodaje wszystkim buttonom klasę .touch-friendly (min 44x44px z fixes.css), a mobilne reguły fixes.css nadają buttonom padding/margin - to rozciągało switche. */ .fs-switch { position: relative; width: 58px !important; height: 26px !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: none; border-radius: 999px !important; box-sizing: border-box; cursor: pointer; background: #dfe4ee; box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.3); transition: background-color 0.25s ease; flex-shrink: 0; line-height: 1; } /* Gałka wypełnia niemal całą wysokość tracka (1px luzu na obwodzie) */ .fs-knob { position: absolute; top: 1px; left: 1px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.35); display: flex; align-items: center; justify-content: center; font-size: 13px; transition: transform 0.25s ease; } /* Switch motywu: słońce (jasny, gałka po lewej) / księżyc (ciemny, gałka po prawej) */ .fs-switch--theme .fa-sun { color: #d4af37; display: block; } .fs-switch--theme .fa-moon { display: none; } [data-theme="dark"] .fs-switch--theme { background: #2c3548; } [data-theme="dark"] .fs-switch--theme .fs-knob { transform: translateX(32px); background: #12161f; } [data-theme="dark"] .fs-switch--theme .fa-sun { display: none; } [data-theme="dark"] .fs-switch--theme .fa-moon { display: block; color: #FFEFA7; } /* Switch języka: etykiety PL / EN po bokach, flaga w gałce */ .fs-lang { display: flex; align-items: center; gap: 6px; } .fs-lang-label { font-size: 0.66rem; font-weight: 700; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.4px; user-select: none; } .fs-lang-label.active { color: #FFEFA7; } /* Gałka-flaga: domyślnie flaga Polski, w trybie EN Union Jack (inline SVG) */ .fs-knob--flag { overflow: hidden; border: 1px solid rgba(15, 23, 42, 0.3); background: linear-gradient(to bottom, #ffffff 0 50%, #DC143C 50% 100%); } .fs-switch--lang.is-en .fs-knob { transform: translateX(32px); } .fs-switch--lang.is-en .fs-knob--flag { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='a'%3E%3Cpath d='M0 0v30h60V0z'/%3E%3C/clipPath%3E%3Cpath d='M0 0v30h60V0z' fill='%23012169'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' clip-path='url(%23a)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E") center / cover no-repeat; } [data-theme="dark"] .fs-switch--lang { background: #2c3548; } /* Pozycja z przełącznikami w rozwijanym menu - widoczna tylko na mobile */ .menu-switches { display: none; } /* Notka "artykuł dostępny tylko po polsku" (tryb EN, wstrzykiwana przez js/i18n.js) */ .i18n-notice { background: rgba(26, 76, 139, 0.08); border-left: 4px solid #1a4c8b; border-radius: 6px; padding: 12px 16px; margin-bottom: 20px; font-size: 0.92rem; font-style: italic; } [data-theme="dark"] .i18n-notice { background: rgba(143, 179, 232, 0.1); border-left-color: #8fb3e8; color: var(--text-secondary); } @media (max-width: 768px) { /* Mobile: switche w pasku znikają, żyją w rozwijanym menu (hamburger) */ .nav-switches { display: none; } .menu-switches { display: flex !important; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 22px; padding: 16px 0 6px; margin-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.15); } } /* Płynne przejście kolorów przy przełączaniu motywu (klasa nadawana na 300ms w theme.js). Celowo NIE działa przy ładowaniu strony - tylko przy kliknięciu przełącznika. */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important; } /* ============================================================ PALETA TRYBU CIEMNEGO ============================================================ */ :root[data-theme="dark"] { color-scheme: dark; /* Zmienne semantyczne trybu ciemnego */ --bg-page: #12161f; /* tło strony */ --bg-surface: #1a2130; /* karty, panele, dropdowny (zastępuje #fff, #f9f9f9, #fffdf0) */ --bg-surface-alt: #212a3d; /* hover, naprzemienne wiersze */ --bg-navy-dark: #141b2b; /* header i footer (ciemniejszy wariant granatu) */ --text-primary: #e8eaf0; --text-secondary: #9aa3b5; --border-color: #2c3548; --link-color: #8fb3e8; /* jaśniejszy niebieski dla linków na ciemnym tle */ --gold: #d4af37; /* Nadpisanie zmiennych legacy ze style.css - body i wiele komponentów konsumuje je bezpośrednio, więc przełączają się automatycznie. UWAGA: --primary-color i --secondary-color celowo bez zmian (to jednocześnie tła headera/przycisków i kolory tekstu na granacie). */ --light-gray: var(--bg-page); --text-color: var(--text-primary); --gray: var(--border-color); --dark-gray: var(--text-secondary); } /* ============================================================ BAZA: tekst, nagłówki, linki ============================================================ */ /* :where() = zerowa specyficzność wnętrza; reguły komponentów (np. .logo-text h1, .footer-about h3) zachowują swoje kolory bez dodatkowych wyjątków */ [data-theme="dark"] :where(h1, h2, h3, h4, h5, h6) { color: var(--text-primary); } [data-theme="dark"] :where(a) { color: var(--link-color); } /* ============================================================ CHROME: header, menu, dropdowny ============================================================ */ [data-theme="dark"] header { background-color: var(--bg-navy-dark); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .menu li .dropdown { background-color: var(--bg-surface); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .menu .dropdown li a { color: var(--text-primary); border-bottom-color: var(--border-color); } [data-theme="dark"] .menu .dropdown li a:hover { background-color: var(--bg-surface-alt); } @media (max-width: 768px) { /* Rozwinięte menu mobilne dziedziczy ciemniejszy granat headera */ [data-theme="dark"] .menu { background-color: var(--bg-navy-dark); } [data-theme="dark"] .menu li .dropdown { background-color: var(--bg-surface); } } /* ============================================================ CHROME: wyszukiwarka ============================================================ */ [data-theme="dark"] .search-form { background-color: var(--bg-surface); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); } [data-theme="dark"] #site-search input { background-color: var(--bg-surface); color: var(--text-primary); } [data-theme="dark"] #site-search input::placeholder { color: var(--text-secondary); } [data-theme="dark"] .search-results-container { background-color: var(--bg-surface); } [data-theme="dark"] .search-results-close { color: var(--text-primary); background-color: var(--bg-surface-alt); } [data-theme="dark"] .search-results-close:hover { background-color: var(--border-color); } [data-theme="dark"] .search-results-close i { color: var(--text-primary); } /* ============================================================ CHROME: auth (dropdown konta, modal "Otwórz w przeglądarce") ============================================================ */ [data-theme="dark"] .auth-dropdown { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-color); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .auth-dropdown__name { color: var(--text-primary); } [data-theme="dark"] .auth-dropdown__email { color: var(--text-secondary); } [data-theme="dark"] .auth-dropdown__sep { background: var(--border-color); } [data-theme="dark"] .auth-dropdown__item { color: var(--text-primary); } [data-theme="dark"] .auth-dropdown__item:hover, [data-theme="dark"] .auth-dropdown__item:focus-visible { background: rgba(143, 179, 232, 0.12); } [data-theme="dark"] .auth-dropdown__item i { color: var(--link-color); } /* Wylogowanie: jaśniejsza czerwień, czytelna na ciemnym tle */ [data-theme="dark"] .auth-dropdown__item--logout, [data-theme="dark"] .auth-dropdown__item--logout i { color: #f87171; } [data-theme="dark"] .inapp-modal__card { background: var(--bg-surface); color: var(--text-primary); } [data-theme="dark"] .inapp-modal__title, [data-theme="dark"] .inapp-modal__steps strong { color: var(--text-primary); } [data-theme="dark"] .inapp-modal__lead, [data-theme="dark"] .inapp-modal__steps li { color: var(--text-secondary); } [data-theme="dark"] .inapp-modal__steps { background: var(--bg-surface-alt); } [data-theme="dark"] .inapp-modal__close:hover, [data-theme="dark"] .inapp-modal__close:focus-visible { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); } /* ============================================================ CHROME: footer ============================================================ */ [data-theme="dark"] footer { background-color: var(--bg-navy-dark); } /* ============================================================ PRZYCISKI ============================================================ */ /* .btn-primary zostaje granatowy (marka klubu, na ciemnym tle wygląda dobrze). .btn-secondary miał białe tło - w trybie ciemnym dostaje powierzchnię i złoty akcent. */ [data-theme="dark"] .btn-secondary { background-color: var(--bg-surface); color: var(--text-primary); border-color: var(--gold); } /* ============================================================ STRONA GŁÓWNA: karuzela aktualności, tabela ligowa, mecze ============================================================ */ [data-theme="dark"] .news-slider-box, [data-theme="dark"] .league-table-box { background-color: var(--bg-surface); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.35); } /* Karty "Aktualności meczowe" (.mcard) - w fixes.css maja jaskrawy granatowy gradient (#111d3a -> #1E3A8A), ktory gryzl sie z prawie czarnym tlem strony. Dajemy stonowany ciemny gradient - ten sam jezyk co karty zawodnikow w dark mode - plus subtelna ramka dla odciecia od tla. */ [data-theme="dark"] .mcard { background: linear-gradient(160deg, #242f47 0%, #1a2233 55%, #161c29 100%); border: 1px solid var(--border-color); } /* Sekcja "O naszym klubie" (.about-parallax) - overlay w index.php to mocny navy rgba(30,58,138,0.85), ktory na dark mode swiecil jasnym niebieskim pasem. Ciemny granatowy gradient wtapia sekcje w reszte strony, zdjecie kibicow zostaje widoczne, bialy tekst nadal czytelny. */ [data-theme="dark"] .about-parallax-overlay { background: linear-gradient(135deg, rgba(20, 27, 43, 0.92) 0%, rgba(12, 16, 24, 0.94) 100%); } [data-theme="dark"] .section-header { border-bottom-color: var(--border-color); } [data-theme="dark"] .section-header h2, [data-theme="dark"] .news-slide-content h3 { color: var(--text-primary); } [data-theme="dark"] .news-slide-content p { color: var(--text-secondary); } [data-theme="dark"] .read-more { color: var(--link-color); } /* Przyciski "Czytaj więcej" z białym tłem (inline style w index.php i aktualnosci.php) */ [data-theme="dark"] .news-slide .read-more, [data-theme="dark"] .news-card .read-more { background-color: var(--bg-surface-alt); color: var(--link-color); border-color: var(--link-color); } /* Karty aktualności na liście (aktualnosci.php) */ [data-theme="dark"] .news-card { background-color: var(--bg-surface); } /* Tytuly kart - ten sam jasniejszy niebieski co przycisk "Czytaj wiecej" */ [data-theme="dark"] .news-card h3 { color: var(--link-color); } /* Hover tytulu - zloto, tak jak przycisk "Czytaj wiecej". Wyzsza specyficznosc (0,3,1) niz regula bazowa powyzej (0,2,1), inaczej regula bazowa nadpisalaby stan :hover. */ [data-theme="dark"] .news-card:hover h3 { color: var(--gold); } /* Nagłówek "Filtruj aktualności" - navy (--primary-color) za ciemny na ciemnym tle. Ujednolicony z pigułkami filtrów poniżej (jaśniejszy niebieski). */ [data-theme="dark"] .news-filter h2 { color: var(--link-color); } /* Pigułki filtrów aktualności - w trybie ciemnym navy (--primary-color) jest za ciemny na tle strony (za słaby kontrast). Nieaktywne: jaśniejszy niebieski (--link-color, ten sam co tytuły kart i linki) z przygaszoną ramką. Aktywny i hover: wyraźniejsze niebieskie wypełnienie z białym tekstem - tak jak wariant jasny, tylko rozjaśnione pod ciemne tło. */ [data-theme="dark"] .filter-btn, [data-theme="dark"] .btn-filter { color: var(--link-color); border-color: #3f5488; } [data-theme="dark"] .filter-btn:hover, [data-theme="dark"] .filter-btn.active, [data-theme="dark"] .btn-filter:hover, [data-theme="dark"] .btn-filter.active { background-color: #3f6ad1; border-color: #3f6ad1; color: #fff; } [data-theme="dark"] .dot { background-color: var(--border-color); } [data-theme="dark"] .dot.active { background-color: var(--gold); } [data-theme="dark"] .league-name { color: var(--text-secondary); } /* Tabela ligowa (strona główna i terminarz) */ [data-theme="dark"] .league-table { background-color: var(--bg-surface); } [data-theme="dark"] .league-table th { background-color: var(--bg-surface-alt); color: var(--text-primary); } [data-theme="dark"] .league-table td { border-bottom-color: var(--border-color); } /* Zebra z fixes.css (nth-child even) */ [data-theme="dark"] .league-table tr:nth-child(even) { background-color: var(--bg-surface-alt); } [data-theme="dark"] .league-table tbody tr:hover { background-color: var(--bg-surface-alt); } /* Nasza drużyna. W jasnym motywie to złoto z alfą na bieli, tutaj ta sama alfa dałaby brudny brąz na granacie - dlatego kolor jest jaśniejszy i mocniejszy. 'tbody' jest konieczne, żeby pokonać zebrę powyżej (remis specyficzności rozstrzyga kolejność, a zebra stoi wcześniej). */ [data-theme="dark"] .league-table tbody tr.our-team { background-color: rgba(255, 199, 44, 0.20); } /* Bez tej reguły nasz wiersz jako jedyny nie reagowałby na kursor: powyższa ma tę samą specyficzność co ogólny hover i stoi po nim. */ [data-theme="dark"] .league-table tbody tr.our-team:hover { background-color: rgba(255, 199, 44, 0.30); } /* Awans i spadek: w jasnym motywie mają !important (style.css), więc nadpisanie ich w ciemnym wymaga tego samego. Bez tego blade rgba na granacie ledwo widać. */ [data-theme="dark"] .league-table tbody tr.promotion { background-color: rgba(64, 140, 255, 0.20) !important; } [data-theme="dark"] .league-table tbody tr.relegation { background-color: rgba(255, 90, 106, 0.18) !important; } [data-theme="dark"] .league-table tbody tr.our-team.relegation { background-color: rgba(255, 90, 106, 0.26) !important; } /* Kropki legendy pod tabelą muszą trzymać się kolorów wierszy powyżej, inaczej legenda opisywałaby inne barwy niż te na ekranie. */ [data-theme="dark"] .legend-item.promotion::before { background-color: rgba(64, 140, 255, 0.55); } [data-theme="dark"] .legend-item.our-team-legend::before { background-color: rgba(255, 199, 44, 0.55); } [data-theme="dark"] .legend-item.relegation-legend::before { background-color: rgba(255, 90, 106, 0.5); } [data-theme="dark"] .table-footer { border-top-color: var(--border-color); } /* Sekcja najbliższych meczów + karty meczowe. !important konieczne: fixes.css ustawia tło tej sekcji z !important. */ [data-theme="dark"] .upcoming-matches { background: var(--bg-page) !important; } [data-theme="dark"] .upcoming-matches > .container > h2 { color: var(--text-primary); } [data-theme="dark"] .match-card { background-color: var(--bg-surface); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } [data-theme="dark"] .match-date { background-color: var(--bg-surface-alt); border-bottom-color: var(--border-color); } [data-theme="dark"] .match-date .month, [data-theme="dark"] .match-date .year, [data-theme="dark"] .match-info, [data-theme="dark"] .match-stadium { color: var(--text-secondary); } [data-theme="dark"] .match-date .time, [data-theme="dark"] .match-score, [data-theme="dark"] .vs { color: var(--text-primary); } [data-theme="dark"] .match-stadium { border-top-color: var(--border-color); } /* Sponsorzy: sekcja ciemna, ale kafle sponsorów ZOSTAJĄ jasne (loga sponsorów zakładają jasne tło) */ [data-theme="dark"] .sponsors { background-color: var(--bg-page); } [data-theme="dark"] .sponsor-card { background-color: #f0f1f3; } /* ============================================================ TERMINARZ (mecze/terminarz.php - system zmiennych --v3-*) Strona konsumuje własne zmienne, więc wystarczy je przestawić. UWAGA: NIE dotykamy struktury .match-card ani dat - parsują je match-notifications.js, match-cards-auto.js i sidebar-sport-integration.js. ============================================================ */ :root[data-theme="dark"] { --v3-bg: #12161f; --v3-card: #1a2130; --v3-text: #e8eaf0; --v3-text-secondary: #9aa3b5; --v3-border: #2c3548; --v3-blue: #8fb3e8; --v3-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.25); --v3-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3); --v3-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5); } /* Elementy z tekstem w kolorze var(--v3-navy) - ciemny granat nieczytelny na ciemnym tle */ [data-theme="dark"] .v3-tab.active { color: var(--text-primary); } [data-theme="dark"] .mc3-score--final { color: var(--text-primary); } /* Rzuty karne pod wynikiem: --v3-gold-dark (#8A6520) daje na ciemnym tle 3:1, za mało dla tak małego tekstu. Jaśniejsze złoto wraca do czytelnego kontrastu. */ [data-theme="dark"] .mc3-pens { color: var(--v3-gold-mid, #D4B96A); } /* Hardcodowane jasne tła w inline