/* * huraga-red-dark.css - tryb ciemny (dark mode) dla huraga-red. * * Arkusz nadpisań, ładowany ZAWSZE jako ostatni w * (template.php i template_login.php). Nie zmienia huraga-red.css: cały dark mode * włącza klasa na ustawiana inline skryptem z komponenty/motyw_head.php * (), preferencja w localStorage 'carcon.motyw'. * * Czym NIE jest: huraga-dark.css to wariant akcentu starego motywu (inna paleta * Huragi), a nie przełączalny tryb ciemny - tego pliku nie dotyczy. * * Zasady (pilnuje ich test fuel/app/tests/assets/MotywCiemnyCssTest.php): * - każdy selektor zaczyna się od `html.dark` (wyjątek: `html:not(.dark)` dla * reguł pomocniczych przełącznika, które działają w trybie jasnym), * - cała treść w jednym bloku `@media screen { ... }` (druk zostaje jasny), * - kolory wyłącznie przez tokeny --m-* zdefiniowane na `html.dark`, * - bez @import i bez zewnętrznych url(http...), * - !important wyłącznie w sekcji awaryjnej na samym końcu pliku (nadpisanie * stylów inline wstrzykiwanych przez widoki / JS). * * Kontrast tokenów (WCAG 2.1, skrypt liczący luminancję względną sRGB; nazwy w tabeli to tokeny --m-*): * tekst tlo 12.79 powierzchnia 11.19 powierzchnia-2 9.99 pole 9.45 * tekst-wycisz tlo 7.00 powierzchnia 6.13 powierzchnia-2 5.47 pole 5.17 * naglowek tlo 15.87 powierzchnia 13.89 powierzchnia-2 12.41 pole 11.73 * akcent tlo 7.05 powierzchnia 6.17 powierzchnia-2 5.51 pole 5.21 * akcent-hover tlo 9.25 powierzchnia 8.09 powierzchnia-2 7.23 pole 6.83 * sukces/blad/ostrzezenie/info: min. 5.64 na wszystkich czterech tłach * (wymóg tekstu: >= 4.5) * ramka-pola pole 3.19 powierzchnia-2 3.38 powierzchnia 3.78 tlo 4.32 * (wymóg ramek kontrolek: >= 3.0; pierwotne #6b7380 dawało 2.85 na polu) * biały tekst na akcent-wypełnienie: 4.55 (pierwotne #e74949 dawało 3.86) * Z2 (formularze, nawigacja, liczniki): wszystkie stany pola (normal, focus, * disabled/readonly, error/warning/success/info) mają ramkę >= 3.19 i tekst * >= 5.17; liczniki: biel na wypełnieniu 4.55, --m-tlo na sukces/info/ostrzezenie >= 9.26. * Pełna lista par: skrypt WCAG (scratchpad sesji), sekcja Z2. * Z3 (przyciski, etykiety, alerty, tabele, komponenty): tekst >= 4.5 na wszystkich parach * (btn neutralny 9.99, flat 7.34, inverse 8.12, primary 5.22, szary label 4.69, label-warning 7.65, * alerty 7.60-7.89, label-inverse/wprowadzona #1a1a1a na #adb5bd 8.4, wiersze statusowe >= 6.34 także na hover); granice komponentów bez wyraźnego * wypełnienia (btn-inverse, tooltip) wyznacza ramka --m-ramka-pola >= 3.38. */ @media screen { html.dark { color-scheme: dark; --m-tlo: #121417; --m-powierzchnia: #1e2126; --m-powierzchnia-2: #262a30; --m-pole: #2a2e35; --m-ramka: #3a3f47; --m-ramka-pola: #737b88; --m-biel: #ffffff; --m-tekst: #d4d7dc; --m-tekst-wyciszony: #9aa0a8; --m-naglowek: #eceef1; --m-akcent: #f47c7c; --m-akcent-hover: #f8a0a0; --m-akcent-wypelnienie: #d93a3a; --m-fokus: rgba(244, 124, 124, .45); --m-fokus-blad: rgba(240, 138, 136, .45); --m-fokus-ostrzezenie: rgba(240, 179, 90, .45); --m-fokus-sukces: rgba(127, 207, 143, .45); --m-fokus-info: rgba(124, 192, 230, .45); --m-sukces: #7fcf8f; --m-blad: #f08a88; --m-ostrzezenie: #f0b35a; --m-info: #7cc0e6; /* Z3: przyciski. Neutralny .btn korzysta z --m-powierzchnia-2 (tło) i --m-ramka-pola (ramka). */ --m-przycisk-hover: #31363d; --m-przycisk-aktywny: #1c1f24; --m-przycisk-flat: #3a3f47; --m-przycisk-flat-hover: #474d57; --m-przycisk-flat-aktywny: #2f343b; --m-przycisk-ramka: rgba(255, 255, 255, .16); --m-inverse: #4a505a; --m-inverse-hover: #5a616c; --m-inverse-aktywny: #3d424a; --m-btn-primary: #c93434; --m-btn-primary-hover: #b52b2b; --m-btn-primary-aktywny: #a02424; /* Z3: etykiety/odznaki i tooltip */ --m-szary: #6c757d; --m-szary-hover: #5d656c; --m-label-jasny: #adb5bd; --m-label-jasny-hover: #c4cacf; --m-label-ostrzezenie: #f89406; --m-label-ostrzezenie-href: #c67605; --m-tekst-na-jasnym: #1a1a1a; --m-tooltip: #3a3f47; /* Z3: alerty (tło, tekst, ramka) - ten sam zestaw barwi wiersze statusowe tabel */ --m-alert-ostrz-tlo: #3a3220; --m-alert-ostrz-tekst: #e8c97a; --m-alert-ostrz-ramka: #5a4a26; --m-alert-sukces-tlo: #1d3324; --m-alert-sukces-tekst: #8fd19e; --m-alert-sukces-ramka: #2c5236; --m-alert-blad-tlo: #3a1f22; --m-alert-blad-tekst: #f2a5a3; --m-alert-blad-ramka: #5c2c30; --m-alert-info-tlo: #1b2f3d; --m-alert-info-tekst: #8cc8ea; --m-alert-info-ramka: #2a4a60; /* Z3: tabele - zebra (alfa .03) i nakładka hover (alfa .06) mają różne wartości, żeby się odróżniać */ --m-zebra: rgba(255, 255, 255, .03); --m-hover-wiersza: rgba(255, 255, 255, .06); /* Z4: datepicker (dziś = ciemny bursztyn, aktywny = niebieski), pill pod logo */ --m-dp-dzis-tlo: #5a4a1a; --m-dp-dzis-hover: #6a5820; --m-dp-dzis-tekst: #f0d78a; --m-dp-aktywny: #2f6db5; --m-dp-aktywny-hover: #265a98; --m-pill-logo: #f5f5f5; /* Z6: tekst na kolorowych komórkach z serwera (plik_kol/roz_kol, Dict_Kolor) */ --m-tekst-na-kolorze: #000000; /* Przeklikanie: fiolet „raport w trakcie edycji” (inline `color: purple`), 7.35 na powierzchni z nakładką. */ --m-fiolet: #c9a0e8; /* DataTables 2.x ma wbudowany dark pod html.dark - ten token wyznacza jego tło. */ --dt-html-background: var(--m-powierzchnia); } /* --- Reguły bazowe --- */ html.dark body { background-color: var(--m-tlo); color: var(--m-tekst); } html.dark a { color: var(--m-akcent); } html.dark a:hover, html.dark a:focus { color: var(--m-akcent-hover); } html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 { color: var(--m-naglowek); } html.dark .muted { color: var(--m-tekst-wyciszony); } html.dark hr { border-top-color: var(--m-ramka); border-bottom-color: transparent; } html.dark code, html.dark pre { background-color: var(--m-powierzchnia-2); border-color: var(--m-ramka); color: var(--m-tekst); } html.dark blockquote { border-left-color: var(--m-ramka); } html.dark blockquote.pull-right { border-right-color: var(--m-ramka); } html.dark blockquote small { color: var(--m-tekst-wyciszony); } html.dark .content-block { color: var(--m-tekst); } /* --- Przełącznik motywu (komponenty/motyw_przelacznik.php) --- Trzy segmenty: Jasny / Ciemny / System; wybrany ma aria-pressed="true". Kolory trybu jasnego jako rgb(), bo hex wolno tylko w bloku tokenów. */ /* Wiersz pod menu głównym: odstęp od ostatniej pozycji menu. */ html:not(.dark) .motyw-przelacznik-wiersz, html.dark .motyw-przelacznik-wiersz { margin-top: 30px; } html:not(.dark) .motyw-przelacznik, html.dark .motyw-przelacznik { display: flex; width: 100%; box-sizing: border-box; padding: 2px; border-radius: 6px; } html:not(.dark) .motyw-przelacznik { background-color: rgb(230, 230, 230); } html.dark .motyw-przelacznik { background-color: var(--m-pole); box-shadow: inset 0 0 0 1px var(--m-ramka); } html:not(.dark) .motyw-opcja, html.dark .motyw-opcja { flex: 1 1 0; min-width: 0; margin: 0; padding: 5px 2px; border: 0; border-radius: 4px; background: transparent; font-size: 12px; line-height: 16px; white-space: nowrap; cursor: pointer; } html:not(.dark) .motyw-opcja { color: rgb(68, 68, 68); } html:not(.dark) .motyw-opcja:hover { color: rgb(17, 17, 17); } html:not(.dark) .motyw-opcja[aria-pressed="true"] { color: rgb(17, 17, 17); background-color: rgb(255, 255, 255); box-shadow: 0 1px 2px rgba(0, 0, 0, .18); font-weight: bold; } html.dark .motyw-opcja { color: var(--m-tekst); } html.dark .motyw-opcja:hover { color: var(--m-naglowek); } html.dark .motyw-opcja[aria-pressed="true"] { color: var(--m-naglowek); background-color: var(--m-przycisk-flat); box-shadow: 0 1px 2px rgba(0, 0, 0, .4); font-weight: bold; } html:not(.dark) .motyw-opcja:focus-visible { outline: 2px solid rgba(200, 50, 50, .55); outline-offset: 1px; } html.dark .motyw-opcja:focus-visible { outline: 2px solid var(--m-fokus); outline-offset: 1px; } /* --- Z2 (a) Layout: kolumny, stopka, notatka boczna, nagłówek strony --- */ html.dark .navigation-block { color: var(--m-tekst); } html.dark body>header { border-bottom-color: var(--m-ramka); } html.dark .page-header { border-bottom-color: var(--m-ramka); } html.dark h1 small, html.dark h2 small, html.dark h3 small, html.dark h4 small, html.dark h5 small, html.dark h6 small { color: var(--m-tekst-wyciszony); } html.dark body>footer { border-bottom-color: var(--m-ramka); color: var(--m-tekst-wyciszony); } html.dark body>footer p a { color: var(--m-tekst-wyciszony); } html.dark body>footer p a:hover { color: var(--m-tekst); } html.dark .side-note { background-image: none; background-color: var(--m-powierzchnia-2); border: 1px solid var(--m-ramka); border-radius: 3px; padding-top: 1px; } html.dark .side-note .side-note-container { background-image: none; } html.dark .side-note .side-note-container p { color: var(--m-tekst-wyciszony); } html.dark .side-note .side-note-container h2 { color: var(--m-tekst); } html.dark .side-note .side-note-bottom { background-image: none; padding-bottom: 10px; } /* --- Z2 (b) Nawigacja główna .main-navigation --- */ html.dark .main-navigation>ul { border-bottom-color: var(--m-ramka); } html.dark .main-navigation>ul>li { border-top-color: var(--m-ramka); } html.dark .main-navigation>ul>li a { color: var(--m-tekst); } html.dark .main-navigation>ul>li>a:hover { color: var(--m-akcent); background-color: var(--m-powierzchnia-2); } html.dark .main-navigation>ul>li>a:hover+ul { background-color: var(--m-powierzchnia-2); } html.dark .main-navigation>ul>li ul a { background-image: none; position: relative; } html.dark .main-navigation>ul>li ul a::before { content: ""; position: absolute; left: 22px; top: 9px; width: 0; height: 0; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 8px solid var(--m-tekst-wyciszony); } html.dark .main-navigation>ul>li ul a.current, html.dark .main-navigation>ul>li ul a:hover { color: var(--m-akcent); } html.dark .main-navigation>ul>li ul a.current::before, html.dark .main-navigation>ul>li ul a:hover::before { border-left-color: var(--m-akcent); } html.dark .main-navigation>ul>li.current>a, html.dark .main-navigation>ul>li.current>a [class^="icon-"], html.dark .main-navigation>ul>li.current>a [class*=" icon-"] { color: var(--m-akcent); } html.dark .main-navigation>ul>li.current>a:hover { background-color: transparent; } html.dark .main-navigation .menu-group-header { color: var(--m-tekst-wyciszony); } /* Liczniki: biel na wypełnieniu akcentu 4.55; ciemny tekst na jasnych odcieniach statusów >= 9. */ html.dark .notif-count { background: var(--m-naglowek); color: var(--m-tlo); } html.dark .notif-count--red { background: var(--m-akcent-wypelnienie); color: var(--m-biel); } html.dark .notif-count--green { background: var(--m-sukces); color: var(--m-tlo); } html.dark .notif-count--blue { background: var(--m-info); color: var(--m-tlo); } html.dark .notif-count--orange { background: var(--m-ostrzezenie); color: var(--m-tlo); } /* --- Z2 (c) Profil użytkownika .user-profile --- */ html.dark .user-profile img { border-color: var(--m-ramka); background-color: var(--m-powierzchnia); box-shadow: 0 0 3px rgba(0, 0, 0, .5); } html.dark .user-profile figcaption strong a { color: var(--m-naglowek); } html.dark .user-profile figcaption strong a:hover { color: var(--m-akcent-hover); } html.dark .user-profile figcaption em { color: var(--m-tekst-wyciszony); } /* --- Z2 (d) Bloki danych .data-block (efekt kartek bez białych warstw) --- */ html.dark .data-block { color: var(--m-tekst); box-shadow: 0 0 3px rgba(0, 0, 0, .5), 0 4px 0 -3px var(--m-powierzchnia), 0 4px 0 -2px var(--m-ramka), 0 8px 0 -5px var(--m-powierzchnia), 0 8px 0 -4px var(--m-ramka); } html.dark .data-block .data-container { background-color: var(--m-powierzchnia); border-color: var(--m-ramka); } html.dark .data-block.decent { box-shadow: 0 0 3px rgba(0, 0, 0, .5); } html.dark .data-block.raw { box-shadow: none; } html.dark .data-block.raw .data-container { background-color: transparent; border: none; } html.dark .container.login .data-block { background-color: var(--m-powierzchnia); border-color: var(--m-ramka); } html.dark .data-block header { border-bottom-color: var(--m-ramka); } html.dark .data-block header h2 { color: var(--m-naglowek); } html.dark .data-block footer { color: var(--m-tekst-wyciszony); } html.dark .data-block header .data-header-actions { color: var(--m-tekst); } /* --- Z2 (e) Formularze --- */ html.dark form { background: var(--m-powierzchnia-2); border-color: var(--m-ramka); box-shadow: 0 0 3px rgba(0, 0, 0, .3) inset; } /* Formularze z inline `background:none` (zdejmujące tło i ramke) tracą też wewnętrzny cień. */ html.dark form[style*="background"] { box-shadow: none; } html.dark .container.login form, html.dark .data-block.todo-block form, html.dark form.bank-akcja-post { background: transparent; border: none; box-shadow: none; } html.dark fieldset { border-color: var(--m-ramka); } html.dark legend { color: var(--m-naglowek); border-bottom-color: var(--m-ramka); } html.dark legend small { color: var(--m-tekst-wyciszony); } html.dark .form-actions { background-color: transparent; border-top-color: var(--m-ramka); } html.dark .control-group, html.dark .form-horizontal .control-group { border-bottom-color: var(--m-ramka); } html.dark label, html.dark .control-group label { color: var(--m-tekst); } html.dark label.radio, html.dark label.checkbox { color: var(--m-tekst); } html.dark .help-block, html.dark .help-inline { color: var(--m-tekst-wyciszony); } html.dark .required-mark { color: var(--m-blad); } /* Pola: tło --m-pole, ramka --m-ramka-pola (>= 3:1 na każdym tle powierzchni). */ html.dark textarea, html.dark input[type="text"], html.dark input[type="password"], html.dark input[type="datetime"], html.dark input[type="datetime-local"], html.dark input[type="date"], html.dark input[type="month"], html.dark input[type="time"], html.dark input[type="week"], html.dark input[type="number"], html.dark input[type="email"], html.dark input[type="url"], html.dark input[type="search"], html.dark input[type="tel"], html.dark input[type="color"], html.dark select, html.dark .uneditable-input { background-color: var(--m-pole); color: var(--m-tekst); border-color: var(--m-ramka-pola); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .3); } html.dark option, html.dark optgroup { background-color: var(--m-pole); color: var(--m-tekst); } html.dark input::placeholder, html.dark textarea::placeholder { color: var(--m-tekst-wyciszony); opacity: 1; } html.dark input::-webkit-input-placeholder, html.dark textarea::-webkit-input-placeholder { color: var(--m-tekst-wyciszony); } html.dark input:-webkit-autofill, html.dark textarea:-webkit-autofill, html.dark select:-webkit-autofill { -webkit-text-fill-color: var(--m-tekst); box-shadow: 0 0 0 1000px var(--m-pole) inset; caret-color: var(--m-tekst); } html.dark input[type="checkbox"], html.dark input[type="radio"] { accent-color: var(--m-akcent-wypelnienie); } html.dark textarea:focus, html.dark input[type="text"]:focus, html.dark input[type="password"]:focus, html.dark input[type="datetime"]:focus, html.dark input[type="datetime-local"]:focus, html.dark input[type="date"]:focus, html.dark input[type="month"]:focus, html.dark input[type="time"]:focus, html.dark input[type="week"]:focus, html.dark input[type="number"]:focus, html.dark input[type="email"]:focus, html.dark input[type="url"]:focus, html.dark input[type="search"]:focus, html.dark input[type="tel"]:focus, html.dark input[type="color"]:focus, html.dark select:focus, html.dark .uneditable-input:focus { border-color: var(--m-akcent); box-shadow: 0 0 0 3px var(--m-fokus); } html.dark input:focus:required:invalid, html.dark textarea:focus:required:invalid, html.dark select:focus:required:invalid { color: var(--m-blad); border-color: var(--m-blad); } html.dark input:focus:required:invalid:focus, html.dark textarea:focus:required:invalid:focus, html.dark select:focus:required:invalid:focus { border-color: var(--m-blad); box-shadow: 0 0 0 3px var(--m-fokus-blad); } /* Wyłączone / tylko do odczytu: ciemniejsze tło i wyciszony tekst (ramka bez zmiany stylu, jak w trybie jasnym). Ramka zostaje --m-ramka-pola (>= 3:1), żeby readonly nie znikał z formularza. */ html.dark input[disabled], html.dark select[disabled], html.dark textarea[disabled], html.dark input[readonly], html.dark select[readonly], html.dark textarea[readonly], html.dark fieldset[disabled] input, html.dark fieldset[disabled] select, html.dark fieldset[disabled] textarea { background-color: var(--m-powierzchnia); color: var(--m-tekst-wyciszony); border-color: var(--m-ramka-pola); box-shadow: none; -webkit-text-fill-color: var(--m-tekst-wyciszony); opacity: 1; } html.dark input[type="radio"][disabled], html.dark input[type="checkbox"][disabled], html.dark input[type="radio"][readonly], html.dark input[type="checkbox"][readonly] { background-color: transparent; border-style: solid; } html.dark .pole-zablokowane, html.dark input.pole-zablokowane, html.dark textarea.pole-zablokowane, html.dark select.pole-zablokowane { background-color: var(--m-powierzchnia); color: var(--m-tekst-wyciszony); } /* Add-ony .input-prepend / .input-append */ html.dark .input-prepend .add-on, html.dark .input-append .add-on { background-color: var(--m-powierzchnia-2); color: var(--m-tekst); border-color: var(--m-ramka-pola); text-shadow: none; } html.dark .input-prepend .active, html.dark .input-append .active { background-color: var(--m-sukces); color: var(--m-tlo); border-color: var(--m-sukces); } html.dark .input-prepend .uneditable-input, html.dark .input-append .uneditable-input { border-left-color: var(--m-ramka-pola); border-right-color: var(--m-ramka-pola); } /* Stany walidacji: jaśniejsze odcienie tokenów na ciemnym polu; focus zachowuje kolor stanu. */ html.dark .control-group.error>label, html.dark .control-group.error .help-block, html.dark .control-group.error .help-inline { color: var(--m-blad); } html.dark .control-group.error .checkbox, html.dark .control-group.error .radio, html.dark .control-group.error input, html.dark .control-group.error select, html.dark .control-group.error textarea { color: var(--m-blad); border-color: var(--m-blad); } html.dark .control-group.error .checkbox:focus, html.dark .control-group.error .radio:focus, html.dark .control-group.error input:focus, html.dark .control-group.error select:focus, html.dark .control-group.error textarea:focus { border-color: var(--m-blad); box-shadow: 0 0 0 3px var(--m-fokus-blad); } html.dark .control-group.error .input-prepend .add-on, html.dark .control-group.error .input-append .add-on { color: var(--m-blad); background-color: var(--m-powierzchnia-2); border-color: var(--m-blad); } html.dark .control-group.warning>label, html.dark .control-group.warning .help-block, html.dark .control-group.warning .help-inline { color: var(--m-ostrzezenie); } html.dark .control-group.warning .checkbox, html.dark .control-group.warning .radio, html.dark .control-group.warning input, html.dark .control-group.warning select, html.dark .control-group.warning textarea { color: var(--m-ostrzezenie); border-color: var(--m-ostrzezenie); } html.dark .control-group.warning .checkbox:focus, html.dark .control-group.warning .radio:focus, html.dark .control-group.warning input:focus, html.dark .control-group.warning select:focus, html.dark .control-group.warning textarea:focus { border-color: var(--m-ostrzezenie); box-shadow: 0 0 0 3px var(--m-fokus-ostrzezenie); } html.dark .control-group.warning .input-prepend .add-on, html.dark .control-group.warning .input-append .add-on { color: var(--m-ostrzezenie); background-color: var(--m-powierzchnia-2); border-color: var(--m-ostrzezenie); } html.dark .control-group.success>label, html.dark .control-group.success .help-block, html.dark .control-group.success .help-inline { color: var(--m-sukces); } html.dark .control-group.success .checkbox, html.dark .control-group.success .radio, html.dark .control-group.success input, html.dark .control-group.success select, html.dark .control-group.success textarea { color: var(--m-sukces); border-color: var(--m-sukces); } html.dark .control-group.success .checkbox:focus, html.dark .control-group.success .radio:focus, html.dark .control-group.success input:focus, html.dark .control-group.success select:focus, html.dark .control-group.success textarea:focus { border-color: var(--m-sukces); box-shadow: 0 0 0 3px var(--m-fokus-sukces); } html.dark .control-group.success .input-prepend .add-on, html.dark .control-group.success .input-append .add-on { color: var(--m-sukces); background-color: var(--m-powierzchnia-2); border-color: var(--m-sukces); } html.dark .control-group.info>label, html.dark .control-group.info .help-block, html.dark .control-group.info .help-inline { color: var(--m-info); } html.dark .control-group.info .checkbox, html.dark .control-group.info .radio, html.dark .control-group.info input, html.dark .control-group.info select, html.dark .control-group.info textarea { color: var(--m-info); border-color: var(--m-info); } html.dark .control-group.info .checkbox:focus, html.dark .control-group.info .radio:focus, html.dark .control-group.info input:focus, html.dark .control-group.info select:focus, html.dark .control-group.info textarea:focus { border-color: var(--m-info); box-shadow: 0 0 0 3px var(--m-fokus-info); } html.dark .control-group.info .input-prepend .add-on, html.dark .control-group.info .input-append .add-on { color: var(--m-info); background-color: var(--m-powierzchnia-2); border-color: var(--m-info); } /* ========================================================================== Z3 - nadpisania rdzenia Huragi: przyciski, etykiety, alerty, tabele, komponenty Huraga zapisuje gradienty jako linear-gradient(top, ...), czyli składnia niepoprawna: unprefiksowana wersja jest odrzucana, a Chrome/Safari stosują jeszcze wcześniejsze -webkit-linear-gradient. Dlatego nadpisujemy też background-image (none), a nie tylko background-color. Białe rgba(255,255,255,.5-.75) w text-shadow i box-shadow zdejmujemy. Specyficzność: reguły "neutralne" używają :where(:not(...)) z listą wariantów kolorowych, żeby nie nadpisywać wypełnień btn-primary/warning/danger/success/info/ inverse ani kolorowych etykiet (:where daje zerową specyficzność, ale prefiks html.dark i tak wygrywa z pojedynczymi klasami huraga-red.css). ========================================================================== */ /* --- Z3 (a) Przyciski --- Neutralny .btn: tło --m-powierzchnia-2 (9.99 z tekstem), ramka --m-ramka-pola (>= 3:1 na każdym tle). Hover jaśniejszy (--m-przycisk-hover), active/.active ciemniejszy (--m-przycisk-aktywny) z wewnętrznym cieniem. .btn-flat: tło --m-przycisk-flat (w trybie jasnym płaski przycisk jest szary, tu nieco jaśniejszy od powierzchni). .btn-alt: tylko cień (bez białego insetu z huraga-red.css). */ html.dark .btn:where(:not(.btn-primary):not(.btn-warning):not(.btn-danger):not(.btn-success):not(.btn-info):not(.btn-inverse)) { background-color: var(--m-powierzchnia-2); background-image: none; border-color: var(--m-ramka-pola); color: var(--m-tekst); text-shadow: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .4); } html.dark .btn:where(:not(.btn-primary):not(.btn-warning):not(.btn-danger):not(.btn-success):not(.btn-info):not(.btn-inverse)):hover { background-color: var(--m-przycisk-hover); color: var(--m-naglowek); background-position: 0 0; } html.dark .btn:where(:not(.btn-primary):not(.btn-warning):not(.btn-danger):not(.btn-success):not(.btn-info):not(.btn-inverse)):active, html.dark .btn.active:where(:not(.btn-primary):not(.btn-warning):not(.btn-danger):not(.btn-success):not(.btn-info):not(.btn-inverse)) { background-color: var(--m-przycisk-aktywny); color: var(--m-tekst); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5); } html.dark .btn.disabled:where(:not(.btn-primary):not(.btn-warning):not(.btn-danger):not(.btn-success):not(.btn-info):not(.btn-inverse)), html.dark .btn[disabled]:where(:not(.btn-primary):not(.btn-warning):not(.btn-danger):not(.btn-success):not(.btn-info):not(.btn-inverse)), html.dark .btn.disabled:where(:not(.btn-primary):not(.btn-warning):not(.btn-danger):not(.btn-success):not(.btn-info):not(.btn-inverse)):hover, html.dark .btn[disabled]:where(:not(.btn-primary):not(.btn-warning):not(.btn-danger):not(.btn-success):not(.btn-info):not(.btn-inverse)):hover { background-color: var(--m-powierzchnia-2); color: var(--m-tekst-wyciszony); box-shadow: none; cursor: default; } html.dark .btn:focus { outline-color: var(--m-akcent); } html.dark .btn.btn-flat:where(:not(.btn-primary):not(.btn-warning):not(.btn-danger):not(.btn-success):not(.btn-info):not(.btn-inverse)) { background-color: var(--m-przycisk-flat); color: var(--m-tekst); box-shadow: none; } html.dark .btn.btn-flat:where(:not(.btn-primary):not(.btn-warning):not(.btn-danger):not(.btn-success):not(.btn-info):not(.btn-inverse)):hover { background-color: var(--m-przycisk-flat-hover); color: var(--m-naglowek); } html.dark .btn.btn-flat:where(:not(.btn-primary):not(.btn-warning):not(.btn-danger):not(.btn-success):not(.btn-info):not(.btn-inverse)):active, html.dark .btn.btn-flat.active:where(:not(.btn-primary):not(.btn-warning):not(.btn-danger):not(.btn-success):not(.btn-info):not(.btn-inverse)) { background-color: var(--m-przycisk-flat-aktywny); color: var(--m-tekst); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5); } html.dark .btn.btn-flat.disabled:where(:not(.btn-primary):not(.btn-warning):not(.btn-danger):not(.btn-success):not(.btn-info):not(.btn-inverse)), html.dark .btn.btn-flat[disabled]:where(:not(.btn-primary):not(.btn-warning):not(.btn-danger):not(.btn-success):not(.btn-info):not(.btn-inverse)), html.dark .btn.btn-flat.disabled:where(:not(.btn-primary):not(.btn-warning):not(.btn-danger):not(.btn-success):not(.btn-info):not(.btn-inverse)):hover, html.dark .btn.btn-flat[disabled]:where(:not(.btn-primary):not(.btn-warning):not(.btn-danger):not(.btn-success):not(.btn-info):not(.btn-inverse)):hover { background-color: var(--m-przycisk-flat); color: var(--m-tekst); box-shadow: none; } html.dark .btn.btn-alt:where(:not(.btn-primary):not(.btn-warning):not(.btn-danger):not(.btn-success):not(.btn-info):not(.btn-inverse)) { box-shadow: 0 1px 2px rgba(0, 0, 0, .5); } html.dark .btn.btn-alt.btn-primary, html.dark .btn.btn-alt.btn-warning, html.dark .btn.btn-alt.btn-danger, html.dark .btn.btn-alt.btn-success, html.dark .btn.btn-alt.btn-info, html.dark .btn.btn-alt.btn-inverse { box-shadow: 0 1px 2px rgba(0, 0, 0, .6); } html.dark .btn-group.open .btn.dropdown-toggle:where(:not(.btn-primary):not(.btn-warning):not(.btn-danger):not(.btn-success):not(.btn-info):not(.btn-inverse)) { background-color: var(--m-przycisk-aktywny); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5); } /* Kolorowe przyciski: wypełnienia bez zmian (poza primary), tylko text-shadow:none i ramka. btn-primary: huraga #e74949 + biały tekst = 3.86:1 (poniżej 4.5 dla 13px). Mierzone #c93434: 5.2:1 z białym tekstem, więc w trybie ciemnym primary dostaje --m-btn-primary (hover #b52b2b, active #a02424). Pozostałe kolory (danger/success/info/warning) zachowują gradienty z huraga-red.css. */ html.dark .btn-warning:not(:disabled), html.dark .btn-warning:hover:not(:disabled) { text-shadow: none; border-color: var(--m-przycisk-ramka); } html.dark .btn-danger:not(:disabled), html.dark .btn-danger:hover:not(:disabled) { text-shadow: none; border-color: var(--m-przycisk-ramka); } html.dark .btn-success:not(:disabled), html.dark .btn-success:hover:not(:disabled) { text-shadow: none; border-color: var(--m-przycisk-ramka); } html.dark .btn-info:not(:disabled), html.dark .btn-info:hover:not(:disabled) { text-shadow: none; border-color: var(--m-przycisk-ramka); } /* Wyłączone kolorowe przyciski (warning/danger/success/info): `.btn[disabled]` z huraga-red.css daje im jasne #e6e6e6, co w ciemnym UI jest jasną plamą - dostają wygląd wyłączonego przycisku neutralnego. */ html.dark .btn-warning.disabled, html.dark .btn-warning[disabled], html.dark .btn-danger.disabled, html.dark .btn-danger[disabled], html.dark .btn-success.disabled, html.dark .btn-success[disabled], html.dark .btn-info.disabled, html.dark .btn-info[disabled], html.dark .btn-warning.disabled:hover, html.dark .btn-warning[disabled]:hover, html.dark .btn-danger.disabled:hover, html.dark .btn-danger[disabled]:hover, html.dark .btn-success.disabled:hover, html.dark .btn-success[disabled]:hover, html.dark .btn-info.disabled:hover, html.dark .btn-info[disabled]:hover { background-color: var(--m-powierzchnia-2); background-image: none; border-color: var(--m-ramka-pola); color: var(--m-tekst-wyciszony); text-shadow: none; box-shadow: none; } html.dark .btn-primary, html.dark .btn.btn-flat.btn-primary, html.dark .btn-primary[disabled], html.dark .btn-primary.disabled { background-color: var(--m-btn-primary); background-image: none; border-color: var(--m-przycisk-ramka); color: var(--m-biel); text-shadow: none; } html.dark .btn-primary:not(:disabled), html.dark .btn-primary:hover:not(:disabled), html.dark .btn.btn-flat.btn-primary:hover { text-shadow: none; color: var(--m-biel); } html.dark .btn-primary:hover:not([disabled]), html.dark .btn.btn-flat.btn-primary:hover:not([disabled]) { background-color: var(--m-btn-primary-hover); } html.dark .btn-primary:active:not([disabled]), html.dark .btn-primary.active:not([disabled]), html.dark .btn.btn-flat.btn-primary:active:not([disabled]), html.dark .btn.btn-flat.btn-primary.active:not([disabled]), html.dark .btn-group.open .btn-primary.dropdown-toggle { background-color: var(--m-btn-primary-aktywny); } html.dark .btn-inverse, html.dark .btn.btn-flat.btn-inverse, html.dark .btn-inverse[disabled], html.dark .btn-inverse.disabled { background-color: var(--m-inverse); background-image: none; border-color: var(--m-ramka-pola); color: var(--m-biel); text-shadow: none; } html.dark .btn-inverse:not(:disabled), html.dark .btn-inverse:hover:not(:disabled) { text-shadow: none; color: var(--m-biel); } html.dark .btn-inverse:hover:not([disabled]), html.dark .btn.btn-flat.btn-inverse:hover:not([disabled]) { background-color: var(--m-inverse-hover); color: var(--m-biel); } html.dark .btn-inverse:active:not([disabled]), html.dark .btn-inverse.active:not([disabled]), html.dark .btn.btn-flat.btn-inverse:active:not([disabled]), html.dark .btn.btn-flat.btn-inverse.active:not([disabled]), html.dark .btn-group.open .btn-inverse.dropdown-toggle { background-color: var(--m-inverse-aktywny); color: var(--m-biel); } /* --- Z3 (b) Etykiety i odznaki --- Goła etykieta/odznaka (domyślna #999 = 2.85:1 z białym) dostaje --m-szary #6c757d (4.69 z białym, 3.4 względem powierzchni). label-inverse/badge-inverse i label-wprowadzona/badge-wprowadzona (w trybie jasnym #333 / #1a1a1a, ginące na ciemnej powierzchni) są odwrócone: jasny szary --m-label-jasny #adb5bd z ciemnym tekstem --m-tekst-na-jasnym (ok. 8:1), dzięki czemu nie zlewają się z gołym .label (te same słowniki statusów używają obu: np. W_BIURZE_PROJEKTOWYM vs ROBOCZE). Kolorowe warianty (important/success/info/wyceniona/wyceniana/doakceptacji/wyslana/ofertowana/indigo) bez zmian. label-warning/badge-warning: ciemny tekst --m-tekst-na-jasnym (biel na #f89406 ma 2.28:1). dowyceny/dozmian/yellow mają już czarny tekst - bez zmian. */ html.dark .label, html.dark .badge { text-shadow: none; } html.dark .label:where(:not(.label-important):not(.label-success):not(.label-info):not(.label-warning):not(.label-wyceniona):not(.label-dowyceny):not(.label-wyceniana):not(.label-doakceptacji):not(.label-dozmian):not(.label-wyslana):not(.label-ofertowana):not(.label-indigo):not(.label-yellow)), html.dark .badge:where(:not(.badge-important):not(.badge-success):not(.badge-info):not(.badge-warning):not(.badge-wyceniona):not(.badge-dowyceny):not(.badge-wyceniana):not(.badge-doakceptacji):not(.badge-dozmian):not(.badge-wyslana):not(.badge-ofertowana):not(.badge-indigo)) { background-color: var(--m-szary); color: var(--m-biel); } html.dark a.label:where(:not(.label-important):not(.label-success):not(.label-info):not(.label-warning):not(.label-wyceniona):not(.label-dowyceny):not(.label-wyceniana):not(.label-doakceptacji):not(.label-dozmian):not(.label-wyslana):not(.label-ofertowana):not(.label-indigo):not(.label-yellow)):hover, html.dark a.badge:where(:not(.badge-important):not(.badge-success):not(.badge-info):not(.badge-warning):not(.badge-wyceniona):not(.badge-dowyceny):not(.badge-wyceniana):not(.badge-doakceptacji):not(.badge-dozmian):not(.badge-wyslana):not(.badge-ofertowana):not(.badge-indigo)):hover, html.dark .label[href]:where(:not(.label-important):not(.label-success):not(.label-info):not(.label-warning):not(.label-wyceniona):not(.label-dowyceny):not(.label-wyceniana):not(.label-doakceptacji):not(.label-dozmian):not(.label-wyslana):not(.label-ofertowana):not(.label-indigo):not(.label-yellow)), html.dark .badge[href]:where(:not(.badge-important):not(.badge-success):not(.badge-info):not(.badge-warning):not(.badge-wyceniona):not(.badge-dowyceny):not(.badge-wyceniana):not(.badge-doakceptacji):not(.badge-dozmian):not(.badge-wyslana):not(.badge-ofertowana):not(.badge-indigo)) { background-color: var(--m-szary-hover); color: var(--m-biel); } html.dark .label-inverse, html.dark .badge-inverse, html.dark .label-wprowadzona, html.dark .badge-wprowadzona { background-color: var(--m-label-jasny); color: var(--m-tekst-na-jasnym); } html.dark a.label-inverse:hover, html.dark a.badge-inverse:hover, html.dark .label-inverse[href], html.dark .badge-inverse[href], html.dark .label-wprowadzona[href], html.dark .badge-wprowadzona[href] { background-color: var(--m-label-jasny-hover); color: var(--m-tekst-na-jasnym); } html.dark .label-warning, html.dark .badge-warning, html.dark .label-warning[href], html.dark .badge-warning[href], html.dark a.label-warning:hover, html.dark a.badge-warning:hover { color: var(--m-tekst-na-jasnym); } /* Przeklikanie (2026-10-20): etykieta-link (``, np. ZAL→ w fakturyTabela.js) dostawała kolor linku z `html.dark a` (0,1,2 przebija `.label` 0,1,0): akcent na niebieskim wypełnieniu = 2.30:1. Kolorowe warianty wracają do bieli jak w trybie jasnym, a warianty z czarnym tekstem w Huradze (dowyceny/dozmian/yellow) do --m-tekst-na-kolorze. Warning, inverse i wprowadzona mają własne reguły wyżej/niżej, więc są wyłączone z tej reguły. */ html.dark a.label:where(:not(.label-warning):not(.label-inverse):not(.label-wprowadzona):not(.label-dowyceny):not(.label-dozmian):not(.label-yellow)), html.dark a.label:where(:not(.label-warning):not(.label-inverse):not(.label-wprowadzona):not(.label-dowyceny):not(.label-dozmian):not(.label-yellow)):hover, html.dark a.label:where(:not(.label-warning):not(.label-inverse):not(.label-wprowadzona):not(.label-dowyceny):not(.label-dozmian):not(.label-yellow)):focus, html.dark a.badge:where(:not(.badge-warning):not(.badge-inverse):not(.badge-wprowadzona):not(.badge-dowyceny):not(.badge-dozmian)), html.dark a.badge:where(:not(.badge-warning):not(.badge-inverse):not(.badge-wprowadzona):not(.badge-dowyceny):not(.badge-dozmian)):hover, html.dark a.badge:where(:not(.badge-warning):not(.badge-inverse):not(.badge-wprowadzona):not(.badge-dowyceny):not(.badge-dozmian)):focus { color: var(--m-biel); } html.dark a.label-dowyceny, html.dark a.label-dozmian, html.dark a.label-yellow, html.dark a.badge-dowyceny, html.dark a.badge-dozmian, html.dark a.label-dowyceny:hover, html.dark a.label-dozmian:hover, html.dark a.label-yellow:hover { color: var(--m-tekst-na-kolorze); } /* Tła label-warning zostają takie jak w Huradze (#f89406 / #c67605 dla [href]); tokeny służą do zmierzenia rzeczywiście renderowanej pary z ciemnym tekstem (7.65 i 4.97). */ html.dark .label-warning, html.dark .badge-warning { background-color: var(--m-label-ostrzezenie); } html.dark .label-warning[href], html.dark .badge-warning[href], html.dark a.label-warning:hover, html.dark a.badge-warning:hover { background-color: var(--m-label-ostrzezenie-href); } /* --- Z3 (c) Alerty i klasy .text-* --- Domyślny .alert to ostrzeżenie (żółty); tło/tekst/ramka z tokenów --m-alert-*. Linki i .close w kolorze tekstu alertu (linki dodatkowo podkreślone, żeby nie polegać wyłącznie na barwie). */ html.dark .alert, html.dark .alert-warning { background-color: var(--m-alert-ostrz-tlo); border-color: var(--m-alert-ostrz-ramka); color: var(--m-alert-ostrz-tekst); text-shadow: none; } html.dark .alert-success { background-color: var(--m-alert-sukces-tlo); border-color: var(--m-alert-sukces-ramka); color: var(--m-alert-sukces-tekst); } html.dark .alert-danger, html.dark .alert-error { background-color: var(--m-alert-blad-tlo); border-color: var(--m-alert-blad-ramka); color: var(--m-alert-blad-tekst); } html.dark .alert-info { background-color: var(--m-alert-info-tlo); border-color: var(--m-alert-info-ramka); color: var(--m-alert-info-tekst); } html.dark .alert.alert-white { background-color: var(--m-powierzchnia-2); border-color: var(--m-ramka); color: var(--m-tekst); } html.dark .alert.alert-inverse { background-color: var(--m-inverse); border-color: var(--m-ramka-pola); color: var(--m-biel); } html.dark .alert h1, html.dark .alert h2, html.dark .alert h3, html.dark .alert h4, html.dark .alert h5, html.dark .alert h6, html.dark .alert-heading { color: inherit; } html.dark .alert a:not(.btn) { color: inherit; text-decoration: underline; } html.dark .alert .close { color: inherit; opacity: .7; text-shadow: none; } html.dark .alert .close:hover { color: inherit; opacity: 1; } html.dark .text-error, html.dark .text-danger { color: var(--m-blad); } html.dark .text-success { color: var(--m-sukces); } html.dark .text-warning { color: var(--m-ostrzezenie); } html.dark .text-info { color: var(--m-info); } html.dark .text-primary { color: var(--m-akcent); } html.dark .text-muted { color: var(--m-tekst-wyciszony); } /* Przeklikanie (2026-10-20): klasy pomocnicze z końca huraga-red.css z kolorem dobranym pod jasne tło. Na powierzchni #1e2126: .red-text #ff0000 4.04, .text-red-600 #e53e3e 3.91 (bank: saldo/kwoty ujemne, kadra inżynierska), .blue-text #0000ff 1.88, .text-green-600 #38a169 (zostaje czytelny, ale ujednolicony z sukcesem), tytuł karty zadania nadrzędnego/podrzędnego #525252 2.07. */ html.dark .red-text, html.dark .text-red-600 { color: var(--m-blad); } html.dark .text-green-600 { color: var(--m-sukces); } html.dark .blue-text { color: var(--m-info); } html.dark .zadanie-karta-header .zadanie-link { color: var(--m-naglowek); } /* --- Z3 (d) Tabele --- Rozróżnienie stanów wiersza (każdy inny mechanizm, żeby się nie zlewały): - zebra (.table-striped, wiersze nieparzyste): tło rgba(255,255,255,.03), - hover (.table-hover): nakładka rgba(255,255,255,.06) jako inset box-shadow (działa na zebrze i na wierszach statusowych), - wiersz statusowy tr.success/error/warning/info: pełne przyciemnione tło z alertu (--m-alert-*-tlo), odróżniane barwa. Na powierzchni #1e2126 zebra daje ok. #23262a, hover ok. #292c31 (alfa .03 vs .06 = dwa różne kroki jasności). */ html.dark .table th, html.dark .table td { border-top-color: var(--m-ramka); } /* Pozostałe jasne ramki z huraga-red.css: nagłówek (2px #bec2c8), pionowy separator th w tbody, dolna kropkowana linia zebry (#dedede). Wszystkie przechodzą na --m-ramka. */ html.dark .table thead th { border-bottom-color: var(--m-ramka); } html.dark .table tbody th { border-right-color: var(--m-ramka); } html.dark .table.table-striped { border-bottom-color: var(--m-ramka); } html.dark .table tbody+tbody { border-top-color: var(--m-ramka); } html.dark .table thead th { background-color: var(--m-powierzchnia-2); color: var(--m-naglowek); } html.dark .table-bordered { border-color: var(--m-ramka); } html.dark .table-bordered th, html.dark .table-bordered td { border-left-color: var(--m-ramka); } html.dark .table-striped tbody tr:nth-child(odd) td, html.dark .table-striped tbody tr:nth-child(odd) th { background-color: var(--m-zebra); } html.dark .table tbody tr.success td, html.dark .table tbody tr.success th { background-color: var(--m-alert-sukces-tlo); color: var(--m-alert-sukces-tekst); } html.dark .table tbody tr.error td, html.dark .table tbody tr.error th, html.dark .table tbody tr.danger td, html.dark .table tbody tr.danger th { background-color: var(--m-alert-blad-tlo); color: var(--m-alert-blad-tekst); } html.dark .table tbody tr.warning td, html.dark .table tbody tr.warning th { background-color: var(--m-alert-ostrz-tlo); color: var(--m-alert-ostrz-tekst); } html.dark .table tbody tr.info td, html.dark .table tbody tr.info th { background-color: var(--m-alert-info-tlo); color: var(--m-alert-info-tekst); } /* :where() obniża specyficzność do (0,1,1), żeby nakładka hover nie wygrywała z zaznaczeniem wiersza DataTables (table.dataTable > tbody > tr.selected > *, (0,2,3)). */ html.dark :where(.table-hover tbody tr:hover > *) { box-shadow: inset 0 0 0 9999px var(--m-hover-wiersza); } /* --- Z3 (e) Komponenty Bootstrap --- */ html.dark .well { background-color: var(--m-powierzchnia-2); border-color: var(--m-ramka); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .3); color: var(--m-tekst); } html.dark .well blockquote { border-color: var(--m-ramka); } html.dark .hero-unit { background-color: var(--m-powierzchnia-2); color: var(--m-tekst); } html.dark .thumbnail { background-color: var(--m-powierzchnia); border-color: var(--m-ramka); box-shadow: 0 1px 1px rgba(0, 0, 0, .4); } html.dark .thumbnail:hover { border-color: var(--m-akcent); box-shadow: 0 1px 4px rgba(0, 0, 0, .5); } html.dark .dl-horizontal dt { color: var(--m-naglowek); } html.dark .dl-horizontal dd { color: var(--m-tekst); } html.dark .close { color: var(--m-naglowek); text-shadow: none; opacity: .6; } html.dark .close:hover, html.dark .close:focus { color: var(--m-biel); opacity: 1; } html.dark .caret { border-top-color: var(--m-tekst); } html.dark .dropup .caret, html.dark .navbar-fixed-bottom .dropdown .caret, html.dark .dropup .btn-large .caret { border-bottom-color: var(--m-tekst); } html.dark .btn-primary .caret, html.dark .btn-warning .caret, html.dark .btn-danger .caret, html.dark .btn-info .caret, html.dark .btn-success .caret, html.dark .btn-inverse .caret { border-top-color: var(--m-biel); } /* Dropdown: tło powierzchnia-2, hover/aktywny akcent-wypelnienie z białym tekstem (4.55:1). */ html.dark .dropdown-menu { background-color: var(--m-powierzchnia-2); border-color: var(--m-ramka); box-shadow: 0 5px 10px rgba(0, 0, 0, .5); } html.dark .dropdown-menu a { color: var(--m-tekst); } html.dark .dropdown-menu li>a:hover, html.dark .dropdown-menu .active>a, html.dark .dropdown-menu .active>a:hover { background-color: var(--m-akcent-wypelnienie); color: var(--m-biel); } html.dark .dropdown-menu .divider { background-color: var(--m-ramka); border-bottom-color: transparent; } /* Nawigacja Bootstrap: .nav-tabs (aktywna zakładka ma tło kontenera), .nav-pills, .nav-list. */ html.dark .nav>li>a:hover { background-color: var(--m-powierzchnia-2); } html.dark .nav .nav-header { color: var(--m-tekst-wyciszony); text-shadow: none; } html.dark .nav-list>li>a, html.dark .nav-list .nav-header { text-shadow: none; } html.dark .nav-list>.active>a, html.dark .nav-list>.active>a:hover, html.dark .nav-pills>.active>a, html.dark .nav-pills>.active>a:hover { background-color: var(--m-akcent-wypelnienie); color: var(--m-biel); text-shadow: none; } html.dark .nav-list .divider { background-color: var(--m-ramka); border-bottom-color: transparent; } html.dark .nav-tabs { border-bottom-color: var(--m-ramka); } html.dark .nav-tabs>li>a:hover { border-color: var(--m-ramka) var(--m-ramka) var(--m-ramka); } html.dark .nav-tabs>.active>a, html.dark .nav-tabs>.active>a:hover { background-color: var(--m-powierzchnia); color: var(--m-naglowek); border-color: var(--m-ramka); border-bottom-color: transparent; } html.dark .nav-tabs.nav-stacked>li>a { border-color: var(--m-ramka); } html.dark .nav-tabs.nav-stacked>li>a:hover { border-color: var(--m-ramka); } html.dark .nav-tabs .dropdown-toggle .caret, html.dark .nav-pills .dropdown-toggle .caret { border-top-color: var(--m-akcent); border-bottom-color: var(--m-akcent); } html.dark .nav-tabs .dropdown-toggle:hover .caret, html.dark .nav-pills .dropdown-toggle:hover .caret { border-top-color: var(--m-akcent-hover); border-bottom-color: var(--m-akcent-hover); } html.dark .nav-tabs .active .dropdown-toggle .caret, html.dark .nav-pills .active .dropdown-toggle .caret { border-top-color: var(--m-tekst); border-bottom-color: var(--m-tekst); } html.dark .nav>.dropdown.active>a:hover { color: var(--m-naglowek); } html.dark .nav-tabs .open .dropdown-toggle, html.dark .nav-pills .open .dropdown-toggle, html.dark .nav>li.dropdown.open.active>a:hover { background-color: var(--m-szary); border-color: var(--m-szary); color: var(--m-biel); } /* Breadcrumb, paginacja i pager. */ html.dark .breadcrumb { background-color: var(--m-powierzchnia-2); background-image: none; border-color: var(--m-ramka); box-shadow: none; } html.dark .breadcrumb li { text-shadow: none; } html.dark .breadcrumb .divider { color: var(--m-tekst-wyciszony); } html.dark .breadcrumb .active a { color: var(--m-tekst); } html.dark .pagination a { border-color: var(--m-ramka); background-color: var(--m-powierzchnia); } html.dark .pagination a:hover { background-color: var(--m-powierzchnia-2); color: var(--m-akcent-hover); } html.dark .pagination .active a, html.dark .pagination .active a:hover { background-color: var(--m-pole); color: var(--m-naglowek); } html.dark .pagination .disabled span, html.dark .pagination .disabled a, html.dark .pagination .disabled a:hover { background-color: transparent; color: var(--m-tekst-wyciszony); } html.dark .pagination ul { box-shadow: 0 1px 2px rgba(0, 0, 0, .4); } html.dark .pager a { background-color: var(--m-powierzchnia); border-color: var(--m-ramka); } html.dark .pager a:hover { background-color: var(--m-powierzchnia-2); } html.dark .pager .disabled a, html.dark .pager .disabled a:hover { background-color: transparent; color: var(--m-tekst-wyciszony); } /* Accordion, progress. */ html.dark .accordion-group { border-color: var(--m-ramka); } html.dark .accordion-inner { border-top-color: var(--m-ramka); } html.dark .accordion-heading { background-color: var(--m-powierzchnia-2); } html.dark .progress { background-color: var(--m-pole); background-image: none; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); } /* Popover i tooltip. Tooltip: tło --m-tooltip #3a3f47 z białym tekstem (10.6:1). Samo tło ma względem powierzchni tylko ok. 1.5:1, więc granice komponentu (wymóg >= 3:1 dla elementów graficznych) daje ramka --m-ramka-pola (3.78 względem powierzchni). */ html.dark .popover { background-color: var(--m-powierzchnia-2); border-color: var(--m-ramka); box-shadow: 0 5px 10px rgba(0, 0, 0, .5); color: var(--m-tekst); } html.dark .popover.mypopover, html.dark .popover.komentarze-popover { color: var(--m-tekst); } html.dark .popover-title { background-color: var(--m-pole); border-bottom-color: var(--m-ramka); color: var(--m-naglowek); } html.dark .popover-content { color: var(--m-tekst); } html.dark .popover.top .arrow { border-top-color: var(--m-powierzchnia-2); } html.dark .popover.top .arrow:after { border-top-color: var(--m-ramka); } html.dark .popover.right .arrow { border-right-color: var(--m-powierzchnia-2); } html.dark .popover.right .arrow:after { border-right-color: var(--m-ramka); } html.dark .popover.bottom .arrow { border-bottom-color: var(--m-powierzchnia-2); } html.dark .popover.bottom .arrow:after { border-bottom-color: var(--m-ramka); } html.dark .popover.left .arrow { border-left-color: var(--m-powierzchnia-2); } html.dark .popover.left .arrow:after { border-left-color: var(--m-ramka); } html.dark .tooltip-inner { background-color: var(--m-tooltip); color: var(--m-biel); border: 1px solid var(--m-ramka-pola); } html.dark .tooltip.top .tooltip-arrow { border-top-color: var(--m-tooltip); } html.dark .tooltip.left .tooltip-arrow { border-left-color: var(--m-tooltip); } html.dark .tooltip.bottom .tooltip-arrow { border-bottom-color: var(--m-tooltip); } html.dark .tooltip.right .tooltip-arrow { border-right-color: var(--m-tooltip); } /* Modal (w projekcie unikamy modali, ale klasy są w CSS i pochodzą z bibliotek). */ html.dark .modal { background-color: var(--m-powierzchnia); border-color: var(--m-ramka); box-shadow: 0 3px 7px rgba(0, 0, 0, .6); color: var(--m-tekst); } html.dark .modal-header { border-bottom-color: var(--m-ramka); } html.dark .modal-footer { background-color: var(--m-powierzchnia-2); border-top-color: var(--m-ramka); box-shadow: none; } /* ============================================================ Z4: vendory i grafiki ============================================================ */ /* --- (a) bootstrap-datepicker 1.10.0 --- Vendor nie ma trybu ciemnego; jego selektory mają wysoką specyficzność (np. td.active.disabled:hover:hover), więc poniżej każda grupa stanu jest powtórzona 1:1 z prefiksem html.dark (o jedna klase i jeden typ wyżej). Lista porównawcza vendor -> dark (każda reguła z kolorem w vendorze): .datepicker-dropdown:before/:after (+ orient-top) -> strzałka dropdownu td.day.focused, td.day:hover -> --m-pole td.new, td.old -> --m-tekst-wyciszony td.disabled(:hover) -> wyciszony, bez tła td.highlighted -> --m-alert-info-tlo td.today (+ .disabled, :hover, :active, 20 wariantów) -> ciemny bursztyn td.range (+ .disabled, :hover) -> --m-przycisk-flat td.range.today (+ warianty) -> bursztyn hover td.selected (+ warianty) -> --m-szary td.active (+ warianty) i td.today.active -> --m-dp-aktywny td span (:hover, .focused, .disabled, .new, .old) -> j.w. dla miesiecy/lat td span.active (+ warianty) -> --m-dp-aktywny .datepicker-switch/.next/.prev/tfoot th :hover -> --m-pole .input-daterange .add-on -> jak .add-on formularzy Warianty z hakiem IE (\9) pominięte - przeglądarki ich nie stosują. Gradienty vendora zerujemy (background-image: none). Ramki komórek: vendor ma border:none, więc border-color nie jest potrzebny. */ html.dark .datepicker-dropdown:before { border-bottom-color: var(--m-ramka); } html.dark .datepicker-dropdown:after { border-bottom-color: var(--m-powierzchnia-2); } html.dark .datepicker-dropdown.datepicker-orient-top:before { border-top-color: var(--m-ramka); } html.dark .datepicker-dropdown.datepicker-orient-top:after { border-top-color: var(--m-powierzchnia-2); } html.dark .datepicker.dropdown-menu { background-color: var(--m-powierzchnia-2); border-color: var(--m-ramka-pola); color: var(--m-tekst); } html.dark .datepicker table tr td, html.dark .datepicker table tr th, html.dark .datepicker table tr td.day, html.dark .datepicker-switch, html.dark .datepicker .prev, html.dark .datepicker .next, html.dark .datepicker tfoot tr th, html.dark .datepicker .cw { color: var(--m-tekst); } html.dark .datepicker table tr th.dow { color: var(--m-tekst-wyciszony); } html.dark .datepicker .datepicker-switch, html.dark .datepicker .prev, html.dark .datepicker .next { color: var(--m-naglowek); } html.dark .datepicker table tr td.day.focused, html.dark .datepicker table tr td.day:hover, html.dark .datepicker table tr td span.focused, html.dark .datepicker table tr td span:hover, html.dark .datepicker .datepicker-switch:hover, html.dark .datepicker .next:hover, html.dark .datepicker .prev:hover, html.dark .datepicker tfoot tr th:hover { background: var(--m-pole); color: var(--m-naglowek); } html.dark .datepicker table tr td.new, html.dark .datepicker table tr td.old, html.dark .datepicker table tr td span.new, html.dark .datepicker table tr td span.old { color: var(--m-tekst-wyciszony); } html.dark .datepicker table tr td.highlighted { background: var(--m-alert-info-tlo); } html.dark .datepicker table tr td.disabled, html.dark .datepicker table tr td.disabled:hover, html.dark .datepicker table tr td span.disabled, html.dark .datepicker table tr td span.disabled:hover { background: none; color: var(--m-tekst-wyciszony); } /* dzisiejszy dzień: ciemny bursztyn zamiast żółtego gradientu */ html.dark .datepicker table tr td.today, html.dark .datepicker table tr td.today.disabled, html.dark .datepicker table tr td.today.disabled:hover, html.dark .datepicker table tr td.today:hover, html.dark .datepicker table tr td.today.active, html.dark .datepicker table tr td.today.disabled.active, html.dark .datepicker table tr td.today.disabled.disabled, html.dark .datepicker table tr td.today.disabled:active, html.dark .datepicker table tr td.today.disabled:hover.active, html.dark .datepicker table tr td.today.disabled:hover.disabled, html.dark .datepicker table tr td.today.disabled:hover:active, html.dark .datepicker table tr td.today.disabled:hover:hover, html.dark .datepicker table tr td.today.disabled:hover[disabled], html.dark .datepicker table tr td.today.disabled[disabled], html.dark .datepicker table tr td.today:active, html.dark .datepicker table tr td.today:hover.active, html.dark .datepicker table tr td.today:hover.disabled, html.dark .datepicker table tr td.today:hover:active, html.dark .datepicker table tr td.today:hover:hover, html.dark .datepicker table tr td.today:hover[disabled], html.dark .datepicker table tr td.today[disabled], html.dark .datepicker table tr td.today.active:hover { background-color: var(--m-dp-dzis-tlo); background-image: none; color: var(--m-dp-dzis-tekst); text-shadow: none; } html.dark .datepicker table tr td.today.disabled:hover, html.dark .datepicker table tr td.today:hover, html.dark .datepicker table tr td.today.disabled:hover.active, html.dark .datepicker table tr td.today.disabled:hover.disabled, html.dark .datepicker table tr td.today.disabled:hover:active, html.dark .datepicker table tr td.today.disabled:hover:hover, html.dark .datepicker table tr td.today.disabled:hover[disabled], html.dark .datepicker table tr td.today:hover.active, html.dark .datepicker table tr td.today:hover.disabled, html.dark .datepicker table tr td.today:hover:active, html.dark .datepicker table tr td.today:hover:hover, html.dark .datepicker table tr td.today:hover[disabled], html.dark .datepicker table tr td.today.active:hover { background-color: var(--m-dp-dzis-hover); background-image: none; color: var(--m-dp-dzis-tekst); } /* zakres */ html.dark .datepicker table tr td.range, html.dark .datepicker table tr td.range.disabled, html.dark .datepicker table tr td.range.disabled:hover, html.dark .datepicker table tr td.range:hover { background: var(--m-przycisk-flat); color: var(--m-naglowek); border-radius: 0; } html.dark .datepicker table tr td.range-start, html.dark .datepicker table tr td.range-end { background-color: var(--m-dp-aktywny); background-image: none; color: var(--m-biel); } html.dark .datepicker table tr td.range.today, html.dark .datepicker table tr td.range.today.disabled, html.dark .datepicker table tr td.range.today.disabled:hover, html.dark .datepicker table tr td.range.today:hover, html.dark .datepicker table tr td.range.today.active, html.dark .datepicker table tr td.range.today.disabled.active, html.dark .datepicker table tr td.range.today.disabled.disabled, html.dark .datepicker table tr td.range.today.disabled:active, html.dark .datepicker table tr td.range.today.disabled:hover.active, html.dark .datepicker table tr td.range.today.disabled:hover.disabled, html.dark .datepicker table tr td.range.today.disabled:hover:active, html.dark .datepicker table tr td.range.today.disabled:hover:hover, html.dark .datepicker table tr td.range.today.disabled:hover[disabled], html.dark .datepicker table tr td.range.today.disabled[disabled], html.dark .datepicker table tr td.range.today:active, html.dark .datepicker table tr td.range.today:hover.active, html.dark .datepicker table tr td.range.today:hover.disabled, html.dark .datepicker table tr td.range.today:hover:active, html.dark .datepicker table tr td.range.today:hover:hover, html.dark .datepicker table tr td.range.today:hover[disabled], html.dark .datepicker table tr td.range.today[disabled] { background-color: var(--m-dp-dzis-hover); background-image: none; color: var(--m-dp-dzis-tekst); border-radius: 0; } /* wybrana data (selected, szary) */ html.dark .datepicker table tr td.selected, html.dark .datepicker table tr td.selected.disabled, html.dark .datepicker table tr td.selected.disabled:hover, html.dark .datepicker table tr td.selected:hover, html.dark .datepicker table tr td.selected.active, html.dark .datepicker table tr td.selected.disabled.active, html.dark .datepicker table tr td.selected.disabled.disabled, html.dark .datepicker table tr td.selected.disabled:active, html.dark .datepicker table tr td.selected.disabled:hover.active, html.dark .datepicker table tr td.selected.disabled:hover.disabled, html.dark .datepicker table tr td.selected.disabled:hover:active, html.dark .datepicker table tr td.selected.disabled:hover:hover, html.dark .datepicker table tr td.selected.disabled:hover[disabled], html.dark .datepicker table tr td.selected.disabled[disabled], html.dark .datepicker table tr td.selected:active, html.dark .datepicker table tr td.selected:hover.active, html.dark .datepicker table tr td.selected:hover.disabled, html.dark .datepicker table tr td.selected:hover:active, html.dark .datepicker table tr td.selected:hover:hover, html.dark .datepicker table tr td.selected:hover[disabled], html.dark .datepicker table tr td.selected[disabled] { background-color: var(--m-szary); background-image: none; color: var(--m-biel); text-shadow: none; } html.dark .datepicker table tr td.selected.disabled:hover, html.dark .datepicker table tr td.selected:hover, html.dark .datepicker table tr td.selected.disabled:hover.active, html.dark .datepicker table tr td.selected.disabled:hover.disabled, html.dark .datepicker table tr td.selected.disabled:hover:active, html.dark .datepicker table tr td.selected.disabled:hover:hover, html.dark .datepicker table tr td.selected.disabled:hover[disabled], html.dark .datepicker table tr td.selected:hover.active, html.dark .datepicker table tr td.selected:hover.disabled, html.dark .datepicker table tr td.selected:hover:active, html.dark .datepicker table tr td.selected:hover:hover, html.dark .datepicker table tr td.selected:hover[disabled] { background-color: var(--m-szary-hover); } /* aktywny dzień (niebieski, 5.28:1 z białym) - także dzisiejszy, który jest aktywny */ html.dark .datepicker table tr td.active, html.dark .datepicker table tr td.active.disabled, html.dark .datepicker table tr td.active.disabled:hover, html.dark .datepicker table tr td.active:hover, html.dark .datepicker table tr td.active.active, html.dark .datepicker table tr td.active.disabled.active, html.dark .datepicker table tr td.active.disabled.disabled, html.dark .datepicker table tr td.active.disabled:active, html.dark .datepicker table tr td.active.disabled:hover.active, html.dark .datepicker table tr td.active.disabled:hover.disabled, html.dark .datepicker table tr td.active.disabled:hover:active, html.dark .datepicker table tr td.active.disabled:hover:hover, html.dark .datepicker table tr td.active.disabled:hover[disabled], html.dark .datepicker table tr td.active.disabled[disabled], html.dark .datepicker table tr td.active:active, html.dark .datepicker table tr td.active:hover.active, html.dark .datepicker table tr td.active:hover.disabled, html.dark .datepicker table tr td.active:hover:active, html.dark .datepicker table tr td.active:hover:hover, html.dark .datepicker table tr td.active:hover[disabled], html.dark .datepicker table tr td.active[disabled], html.dark .datepicker table tr td.today.active, html.dark .datepicker table tr td.today.disabled.active, html.dark .datepicker table tr td.today.disabled:active, html.dark .datepicker table tr td.today.disabled:hover.active, html.dark .datepicker table tr td.today.disabled:hover:active, html.dark .datepicker table tr td.today:active, html.dark .datepicker table tr td.today:hover.active, html.dark .datepicker table tr td.today:hover:active, html.dark .datepicker table tr td.today.active:hover { background-color: var(--m-dp-aktywny); background-image: none; color: var(--m-biel); text-shadow: none; } html.dark .datepicker table tr td.active.disabled:hover, html.dark .datepicker table tr td.active:hover, html.dark .datepicker table tr td.active.disabled:hover.active, html.dark .datepicker table tr td.active.disabled:hover.disabled, html.dark .datepicker table tr td.active.disabled:hover:active, html.dark .datepicker table tr td.active.disabled:hover:hover, html.dark .datepicker table tr td.active.disabled:hover[disabled], html.dark .datepicker table tr td.active:hover.active, html.dark .datepicker table tr td.active:hover.disabled, html.dark .datepicker table tr td.active:hover:active, html.dark .datepicker table tr td.active:hover:hover, html.dark .datepicker table tr td.active:hover[disabled], html.dark .datepicker table tr td.today.disabled:hover.active, html.dark .datepicker table tr td.today.disabled:hover:active, html.dark .datepicker table tr td.today:hover.active, html.dark .datepicker table tr td.today:hover:active, html.dark .datepicker table tr td.today.active:hover { background-color: var(--m-dp-aktywny-hover); color: var(--m-biel); } /* miesiące i lata (td span.active) */ html.dark .datepicker table tr td span.active, html.dark .datepicker table tr td span.active.disabled, html.dark .datepicker table tr td span.active.disabled:hover, html.dark .datepicker table tr td span.active:hover, html.dark .datepicker table tr td span.active.active, html.dark .datepicker table tr td span.active.disabled.active, html.dark .datepicker table tr td span.active.disabled.disabled, html.dark .datepicker table tr td span.active.disabled:active, html.dark .datepicker table tr td span.active.disabled:hover.active, html.dark .datepicker table tr td span.active.disabled:hover.disabled, html.dark .datepicker table tr td span.active.disabled:hover:active, html.dark .datepicker table tr td span.active.disabled:hover:hover, html.dark .datepicker table tr td span.active.disabled:hover[disabled], html.dark .datepicker table tr td span.active.disabled[disabled], html.dark .datepicker table tr td span.active:active, html.dark .datepicker table tr td span.active:hover.active, html.dark .datepicker table tr td span.active:hover.disabled, html.dark .datepicker table tr td span.active:hover:active, html.dark .datepicker table tr td span.active:hover:hover, html.dark .datepicker table tr td span.active:hover[disabled], html.dark .datepicker table tr td span.active[disabled] { background-color: var(--m-dp-aktywny); background-image: none; color: var(--m-biel); text-shadow: none; } html.dark .datepicker table tr td span.active.disabled:hover, html.dark .datepicker table tr td span.active:hover, html.dark .datepicker table tr td span.active.disabled:hover.active, html.dark .datepicker table tr td span.active.disabled:hover.disabled, html.dark .datepicker table tr td span.active.disabled:hover:active, html.dark .datepicker table tr td span.active.disabled:hover:hover, html.dark .datepicker table tr td span.active.disabled:hover[disabled], html.dark .datepicker table tr td span.active:hover.active, html.dark .datepicker table tr td span.active:hover.disabled, html.dark .datepicker table tr td span.active:hover:active, html.dark .datepicker table tr td span.active:hover:hover, html.dark .datepicker table tr td span.active:hover[disabled] { background-color: var(--m-dp-aktywny-hover); color: var(--m-biel); } html.dark .input-daterange .add-on { background-color: var(--m-pole); border-color: var(--m-ramka-pola); color: var(--m-tekst); text-shadow: none; } /* --- (b) DataTables 2.3.2 --- Vendor ma własny dark pod html.dark (tło --dt-html-background z Z1, ramki, kolory paginacji), więc jego reguł NIE kopiujemy. Poniżej tylko dopasowanie kontrolek wrappera div.dt-container do palety formularzy (--m-pole, --m-ramka-pola) i paginacji do przycisków. Selektory mają o jeden typ (div) więcej niż dark vendora, żeby wygrać bez !important; jedyny wyjątek (kolor .disabled, vendor daje `#666 !important`) jest w sekcji awaryjnej na końcu pliku. Strzałki sortowania: reguły Huragi `.dataTables_wrapper table.table thead .sorting*` celują w klasy DT 1.x i w pliki img/plugins/dataTables/sort_*.png, których w repo nie ma, a wrapper DT 2.x to div.dt-container - reguły nie działają, więc nic nie ukrywamy. DT 2.x rysuje strzałki glifami (span.dt-column-order:before/:after, currentColor + opacity), więc dziedziczą kolor nagłówka kolumny. Bez filter: invert. */ html.dark div.dt-container .dt-search input, html.dark div.dt-container .dt-length select { background-color: var(--m-pole); border: 1px solid var(--m-ramka-pola); color: var(--m-tekst); } html.dark div.dt-container .dt-search input:focus, html.dark div.dt-container .dt-length select:focus { border-color: var(--m-akcent); box-shadow: 0 0 0 3px var(--m-fokus); } html.dark div.dt-container .dt-info { color: var(--m-tekst-wyciszony); } html.dark div.dt-container .dt-paging .dt-paging-button:hover { background: var(--m-przycisk-flat); border-color: var(--m-ramka-pola); } html.dark div.dt-container .dt-paging .dt-paging-button:active { background: var(--m-przycisk-flat-aktywny); box-shadow: none; } html.dark div.dt-container .dt-paging .dt-paging-button.current, html.dark div.dt-container .dt-paging .dt-paging-button.current:hover { background: var(--m-powierzchnia-2); border: 1px solid var(--m-ramka-pola); color: var(--m-naglowek); } html.dark div.dt-container .dt-paging .dt-paging-button.disabled, html.dark div.dt-container .dt-paging .dt-paging-button.disabled:hover, html.dark div.dt-container .dt-paging .dt-paging-button.disabled:active { background: transparent; border-color: transparent; } html.dark div.dt-container .dt-paging .ellipsis { color: var(--m-tekst-wyciszony); } html.dark div.dt-container .dt-processing { color: var(--m-tekst); } html.dark div.dt-container .dt-processing > div:last-child > div { background: var(--m-akcent); } html.dark table.dataTable thead > tr > th.dt-orderable-asc:hover, html.dark table.dataTable thead > tr > th.dt-orderable-desc:hover { outline-color: var(--m-ramka-pola); } /* --- (c) Grafiki --- icon_footer_info/warning.png: jednolity szary #a4a5aa na przezroczystym tle, na powierzchni daje ok. 6.5:1 - jasne ikony zostają bez filtra (invert zrobiłby je ciemnymi). Gify loading_*.gif zostają bez zmian (do przeklikania na dev). template_logo.png to ciemny szary (#5a6068) na przezroczystym tle (ok. 2.9:1 na tle strony), więc logo dostaje jasny pill. Obecnie żaden widok nie renderuje `.container.login .brand`, reguła czeka na ewentualny powrót logo na ekran logowania. */ html.dark .container.login .brand { box-sizing: content-box; padding: 8px 12px; background-color: var(--m-pill-logo); background-repeat: no-repeat; background-origin: content-box; border-radius: 6px; } /* --- (d) FullCalendar (harmonogram/index.php). jquery.fullcalendar.css ładuje tylko samodzielna strona budowylokalizacje/index.php bez motywu, a harmonogram opiera się na regułach `.full-calendar` z huraga-red.css. Tylko tła i ramki; kolory wydarzeń Google Calendar pochodzą z danych i zostają do przeklikania. --- */ html.dark .fc-widget-header, html.dark .fc-widget-content { border-color: var(--m-ramka); } html.dark .full-calendar .fc-content { background-color: var(--m-powierzchnia); } html.dark .fc-state-highlight { background: var(--m-dp-dzis-tlo); } html.dark .fc-widget-header .fc-agenda-divider-inner { background: var(--m-pole); } html.dark .fc-state-default, html.dark .fc-state-default .fc-button-inner, html.dark .full-calendar .fc-button.fc-state-default, html.dark .full-calendar .fc-button.fc-state-default:hover { background-color: var(--m-powierzchnia-2); background-image: none; border-color: var(--m-ramka-pola); color: var(--m-tekst); text-shadow: none; } html.dark .fc-state-hover, html.dark .fc-state-hover .fc-button-inner { background-color: var(--m-przycisk-hover); border-color: var(--m-ramka-pola); } html.dark .fc-state-active, html.dark .fc-state-active .fc-button-inner, html.dark .full-calendar .fc-button.fc-state-active, html.dark .full-calendar .fc-button.fc-state-active:hover { background-color: var(--m-przycisk-flat); background-image: none; border-color: var(--m-ramka-pola); color: var(--m-naglowek); text-shadow: none; } html.dark .fc-state-disabled, html.dark .fc-state-disabled .fc-button-inner, html.dark .full-calendar .fc-button.fc-state-disabled { background-color: var(--m-powierzchnia-2); background-image: none; border-color: var(--m-ramka); color: var(--m-tekst-wyciszony); text-shadow: none; } /* --- (e) Otoczki podglądów --- Wnętrze iframe (PDF, mail) zostaje jasne i nietknięte (żadnego filter); stylujemy tylko ramke. Tła ramki podglądu maila nie ruszamy: widok ustawia #fff, na którym polega treść maila bez własnego tła. */ html.dark .pdf-preview, html.dark iframe.pdf-preview { border: 1px solid var(--m-ramka); background-color: var(--m-powierzchnia-2); } html.dark .email-preview-frame { border-color: var(--m-ramka); } html.dark .summary-chart { background: transparent; } /* --- (f) Natywne selecty i searchable-select --- searchable-select.js filtruje opcje natywnego