/* =============================================================================
cc-theme.css — warstwa markowa panelu contact center Yerbador
-----------------------------------------------------------------------------
Ten plik odpowiada za JEDNO: zeby panel wygladal jak produkt Yerbador,
a nie jak domyslny szablon Front/Windu. Trzyma slownik tokenow i podciaga
pod niego komponenty motywu oraz bibliotek z bundla.
Stany interakcji (cc-saving, cc-inline, cc-empty, cc-row-warning) siedza
w cc-panel.css i nalezaja do innego autora — tutaj ich nie powtarzamy.
Wyjatek: KOLORY podswietlen wierszy (--cc-row-*) sa zdefiniowane tu, w sekcji 1,
bo musialy przestac byc polprzezroczyste, zeby dalo sie policzyc dla nich
kontrast; cc-panel.css tylko je konsumuje.
Kolejnosc ladowania, na ktorej ten plik stoi:
theme.min.css -> windu.css -> [windu_dark.css gdy ciasteczko dark_mode=1] -> cc-theme.css
Jestesmy ostatni, wiec przy TEJ SAMEJ specyficznosci wygrywamy bez !important.
!important pojawia sie wylacznie tam, gdzie po drugiej stronie tez jest
!important — kazde takie miejsce ma komentarz z nazwa nadpisywanej reguly.
Tryb ciemny wlacza atrybut html[data-cc-theme="dark"], stawiany przez
nadpisany main.html.twig na podstawie tego samego ciasteczka dark_mode,
ktore doklada windu_dark.css. Zaden kolor nie jest zdefiniowany wylacznie
w bloku ciemnym: :root jest podstawa, ciemny tylko przedefiniowuje tokeny.
Zaleznosci: kroj Poppins z /assets/css/poppins.css (hostowany lokalnie).
Ten plik go NIE importuje — @import blokuje render, szablon linkuje osobno.
============================================================================= */
/* =============================================================================
1. TOKENY
-----------------------------------------------------------------------------
Zrodlo kolorow: zmienne CSS ze sklepu yerbador.pl (palette4 #09371a jako
kolor marki, palette1 #c4fd02 jako CTA), uzupelnione o odcienie, ktore
wystepuja w kodzie tamtej strony: #0e4a28, #125c31, #16221b, #e2ece6, #63756a.
Kontrast (WCAG 2.1, wspolczynnik dla tekstu min. 4.5:1) — motyw jasny:
--cc-ink #16221b na --cc-surface #ffffff = 16.4:1
--cc-ink #16221b na --cc-bg #f6f8f6 = 15.4:1
--cc-ink-soft #465a4e na --cc-surface = 7.4:1
--cc-ink-soft #465a4e na --cc-surface-2 = 6.6:1 (naglowki tabel)
--cc-ink-faint #63756a na --cc-surface = 4.9:1 (placeholdery)
--cc-brand #09371a na --cc-surface = 13.4:1 (linki, ikony)
--cc-cta-ink #0a1a00 na --cc-cta #c4fd02 = 15.0:1 (przycisk CTA)
--cc-sidebar-ink na --cc-sidebar-bg = 9.7:1
--cc-ok / --cc-warn / --cc-err / --cc-info na bieli = 5.6 / 5.6 / 5.6 / 6.0:1
te same tokeny na najciemniejszym podswietleniu wiersza (--cc-row-warn-hover)
= 4.6 / 4.5 / 4.6 / 4.9:1 <- to jest najciasniejsza para w calym motywie jasnym
Kontrast — motyw ciemny (tlo #0b100d):
--cc-ink #e6efe8 = 16.3:1 (na --cc-surface #111a14 = 15.1:1)
--cc-ink-soft #a9bcb0 = 9.6:1 (na --cc-surface = 8.9:1, na --cc-surface-2 = 8.2:1)
--cc-ink-faint #7d8f84 = 5.6:1
--cc-brand #7fb069 na --cc-surface #111a14 = 7.0:1
--cc-cta-ink #0a1a00 na --cc-cta #c4fd02 = 15.0:1 (CTA bez zmian miedzy motywami)
--cc-sidebar-ink #b9cfc1 na --cc-sidebar-bg #082813 = 9.6:1
REGULA, ktora latwo przeoczyc przy dopisywaniu nowego komponentu:
w ciemnym --cc-brand jest JASNA zielenia, wiec biel na nim daje 2.53:1.
Wszedzie, gdzie tlem jest --cc-brand, tekst w ciemnym schodzi na
--cc-cta-ink (7.17:1) — plakietki, paginacja, kalendarze, przyciski.
Bialy element nietekstowy (ptaszek, kropka przelacznika) nie ma jak zejsc
na ciemny, wiec zamiast tego zmienia sie TLO: --cc-brand-600 (3.78:1,
prog WCAG 1.4.11 to 3:1).
Dlaczego marka w ciemnym jest inna: #09371a na tle #0a0a0e daje ok. 1.4:1,
czyli plama nie do odczytania. Rozjasniamy do #7fb069 (kierunek palette5).
Limonka CTA zostaje bez zmian — na ciemnym tle dziala nawet lepiej niz na
jasnym, a jest to jedyny element, po ktorym uzytkownik poznaje marke z dala.
============================================================================= */
:root {
/* Marka */
--cc-brand: #09371a;
--cc-brand-600: #06240f;
--cc-brand-500: #125c31;
--cc-brand-300: #5c904d;
--cc-brand-050: #e2ece6;
/* CTA — regula 1:1 z przyciskow na yerbador.pl */
--cc-cta: #c4fd02;
--cc-cta-hover: #d4ff3a;
--cc-cta-ink: #0a1a00;
/* Tekst */
--cc-ink: #16221b;
--cc-ink-soft: #465a4e;
--cc-ink-faint: #63756a;
/* Powierzchnie */
--cc-bg: #f6f8f6;
--cc-surface: #ffffff;
--cc-surface-2: #eef3ef;
/* Linie */
--cc-border: #d7e2da;
--cc-border-soft: #e7eee9;
/* Ramka POLA formularza — osobny, ciemniejszy token niz --cc-border.
Uzasadnienie i wyliczony kontrast: sekcja 6 (FORMULARZE), tuz nad
regula .form-control/.custom-select. Nie rozjasniac "dla urody" —
to jest dolny prog WCAG 1.4.11, nie estetyka. */
--cc-border-input: #748d7d; /* na --cc-surface #ffffff = 3.59:1 */
/* Fokus — gotowy kolor do box-shadow, nie sam odcien */
--cc-focus: rgba(18, 92, 49, .35);
/* Geometria */
--cc-radius: .5rem;
--cc-radius-lg: .75rem;
--cc-shadow: 0 1px 2px rgba(9, 55, 26, .06), 0 8px 24px -14px rgba(9, 55, 26, .22);
/* Lewe menu */
--cc-sidebar-bg: #09371a;
--cc-sidebar-ink: #cfe0d6;
/* Statusy — celowo NIE odcienie marki, zeby "czynna" nie zlewalo sie z tlem.
#12773c i #985900 sa o 2-3 punkty ciemniejsze od wczesniejszych #157a3f
i #9a5b00. Powod jest zmierzony, nie estetyczny: wiersz tabeli pod
kursorem dostaje tlo --cc-brand-050 #e2ece6 i na NIM stare tokeny dawaly
4.47:1 (ok) oraz 4.49:1 (warn) — ponizej progu 4.5:1, akurat w kolumnie
"przed/po" dziennika zmian, ktora ma byc przeczytana. Po zmianie 4.66:1
i 4.62:1. Kazda inna para z tymi tokenami tylko zyskala: biel na
.btn-success 5.40 -> 5.63:1, biel na .btn-warning 5.43 -> 5.58:1,
.badge-soft-success 4.57 -> 4.77:1, .badge-soft-warning 4.59 -> 4.72:1. */
--cc-ok: #12773c;
--cc-warn: #985900;
--cc-err: #c62828;
--cc-info: #0f6d7a;
/* Tla i obrysy komunikatow — .alert-soft-*, .bg-soft-*.
NIEPRZEZROCZYSTE celowo. Motyw Front daje tu rgba(...,.1), przez co realny
kontrast zalezal od tego, co lezy pod spodem: ten sam .alert-soft-success
mial 4.72:1 na karcie (--cc-surface) i 4.42:1 na tle strony (--cc-bg),
czyli raz przechodzil prog, raz nie. Staly kolor = jedna liczba do
sprawdzenia zamiast dwoch zaleznych od kontekstu.
Kontrast tekstu (token statusu na wlasnym tle -soft), motyw jasny:
--cc-ok na --cc-ok-soft = 4.88:1
--cc-warn na --cc-warn-soft = 4.85:1
--cc-err na --cc-err-soft = 4.81:1
--cc-info na --cc-info-soft = 5.20:1
--cc-brand na --cc-brand-soft = 11.07:1
--cc-ink-soft na --cc-neutral-soft = 6.36:1
--cc-ink na kazdym z nich = 13.62-14.28:1 (naglowki alertow)
Obrysy -line sa dobrane tak, zeby ramka komunikatu miala 3:1 wzgledem
OBU podlozy, na jakich alert realnie laduje (WCAG 1.4.11): wzgledem
--cc-surface 3.37-3.41:1, wzgledem --cc-bg 3.16-3.19:1. Bez obrysu
komunikat na tle strony byl praktycznie niewidoczny jako blok —
--cc-warn-soft #f5eee6 wobec --cc-bg #f6f8f6 to 1.02:1. */
--cc-ok-soft: #e7f1ec;
--cc-warn-soft: #f5eee6;
--cc-err-soft: #f9eaea;
--cc-info-soft: #e7f0f2;
--cc-brand-soft: #e6ebe8;
--cc-neutral-soft: #eceeed;
--cc-ok-line: #509a6f;
--cc-warn-line: #b28240;
--cc-err-line: #d86b6b;
--cc-info-line: #52969f;
--cc-brand-line: #789181;
--cc-neutral-line: #818f87;
/* Podswietlenia wierszy tabeli dla cc-panel.css (.cc-row-warning, .cc-bulk-on).
Rowniez nieprzezroczyste, i tu powod byl najgrozniejszy: te klasy kladly
color-mix(...,transparent) na KOMORKACH, a pod komorkami lezalo tlo
wiersza pod kursorem (--cc-brand-050). Dwie warstwy sie dodawaly, wiec
podswietlony wiersz POD KURSOREM schodzil do 3.36:1 dla --cc-warn i
3.27:1 dla stanu zaznaczenia — mimo ze sam stan spoczynku prog spelnial.
Nieprzezroczysty kolor komorki zakrywa i tlo hoveru, i paskowanie
.table-striped, wiec zostaje jedna liczba na stan.
Motyw jasny — najgorszy z tokenow statusu (--cc-warn) na danym tle:
--cc-row-warn #f5eee6 = 4.85:1 (widocznosc wobec karty 1.15:1)
--cc-row-warn-hover #f0e6d9 = 4.52:1 (1.23:1; separacja od spoczynku 1.07:1)
--cc-row-pick #e7efea = 4.76:1 (1.17:1)
--cc-row-pick-hover #e0eae4 = 4.53:1 (1.23:1; separacja 1.05:1)
Motyw ciemny — najgorszy jest --cc-err:
--cc-row-warn #272919 = 5.22:1 (1.20:1)
--cc-row-warn-hover #35321c = 4.56:1 (1.37:1; separacja 1.15:1)
--cc-row-pick #1a271a = 5.49:1 (1.14:1)
--cc-row-pick-hover #20311f = 4.87:1 (1.29:1; separacja 1.13:1)
--cc-ink na kazdym z tych osmiu tel: 11.01-14.28:1.
Dlaczego stany hoveru nie moga byc mocniejsze: przy 20% --cc-warn spada
do 4.20:1 (jasny) i 4.14:1 (ciemny). Cala rezerwa miedzy spoczynkiem
a hoverem to w jasnym motywie ok. 1.08 wspolczynnika — tyle zostaje,
gdy tekst statusu ma miec 4.5:1 na bieli i na podswietleniu naraz. */
--cc-row-warn: #f5eee6;
--cc-row-warn-hover: #f0e6d9;
--cc-row-pick: #e7efea;
--cc-row-pick-hover: #e0eae4;
}
html[data-cc-theme="dark"] {
--cc-brand: #7fb069;
--cc-brand-600: #5c904d;
--cc-brand-500: #6ba055;
--cc-brand-300: #a3c98f;
--cc-brand-050: rgba(127, 176, 105, .14);
--cc-cta: #c4fd02;
--cc-cta-hover: #d4ff3a;
--cc-cta-ink: #0a1a00;
--cc-ink: #e6efe8;
--cc-ink-soft: #a9bcb0;
--cc-ink-faint: #7d8f84;
--cc-bg: #0b100d;
--cc-surface: #111a14;
--cc-surface-2: #16221b;
--cc-border: #24352a;
--cc-border-soft: #1c2a21;
--cc-border-input: #5c7765; /* na --cc-surface #111a14 = 3.62:1 */
--cc-focus: rgba(127, 176, 105, .45);
--cc-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 8px 24px -14px rgba(0, 0, 0, .9);
--cc-sidebar-bg: #082813;
--cc-sidebar-ink: #b9cfc1;
--cc-ok: #4ecb7b;
--cc-warn: #f0b043;
--cc-err: #f2707f;
--cc-info: #4ec8d8;
/* Kontrast tekstu (token statusu na wlasnym tle -soft), motyw ciemny:
--cc-ok 6.59:1, --cc-warn 7.10:1, --cc-err 5.18:1, --cc-info 6.86:1,
--cc-brand 5.59:1, --cc-ink-soft na --cc-neutral-soft 6.76:1,
--cc-ink na kazdym z nich 11.49-12.53:1.
Obrysy: wzgledem --cc-surface 3.17-3.23:1, wzgledem --cc-bg 3.42-3.49:1.
Odcienie sa liczone jako token przy 14% na --cc-surface #111a14 —
w ciemnym potrzeba wiecej niz 10%, zeby plama w ogole odrozniala sie
od karty (przy 10% --cc-err-soft mialoby 1.15:1 wobec --cc-surface). */
--cc-ok-soft: #1a3322;
--cc-warn-soft: #302f1b;
--cc-err-soft: #302623;
--cc-info-soft: #1a322f;
--cc-brand-soft: #202f20;
--cc-neutral-soft: #26312a;
--cc-ok-line: #31764a;
--cc-warn-line: #7e642b;
--cc-err-line: #9f5057;
--cc-info-line: #307176;
--cc-brand-line: #507044;
--cc-neutral-line: #5d6b62;
--cc-row-warn: #272919;
--cc-row-warn-hover: #35321c;
--cc-row-pick: #1a271a;
--cc-row-pick-hover: #20311f;
}
/* =============================================================================
2. TYPOGRAFIA
-----------------------------------------------------------------------------
main.html.twig laduje /assets/vendor/fonts/open-sans.css i theme.min.css
ustawia body na "Open Sans". Pokrywamy to dla body, naglowkow i przyciskow.
Poppins jest szerszy od Open Sans przy tym samym stopniu, wiec:
- body zostaje na .875rem (stopien z motywu), ale z ujemnym letter-spacing,
- tabele schodza na .8125rem, bo to one pierwsze zaczynaja lamac kolumny,
- naglowki dostaja mocniejsze scisniecie, bo w Poppinsie duze stopnie
rozjezdzaja sie optycznie.
============================================================================= */
body {
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
letter-spacing: -.006em;
color: var(--cc-ink);
background-color: var(--cc-bg);
}
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
letter-spacing: -.018em;
color: var(--cc-ink);
}
.btn,
.form-control,
.custom-select,
.badge,
.nav-link,
.dropdown-item,
.modal-title,
.card-header-title,
.page-header-title {
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.btn {
letter-spacing: -.005em;
}
/* Tekst drugorzedny motywu ma isc naszym tokenem, inaczej w ciemnym gubi kontrast. */
.text-muted {
color: var(--cc-ink-soft) !important; /* nadpisuje theme.min.css .text-muted{color:#8c98a4!important} */
}
/* Pozostale nosniki koloru tekstu z motywu Front. Do tej pory .text-muted byla
tu jedyna nadpisana klasa, a reszta zostawala na palecie Front i schodzila
ponizej progu: .text-success #00c9a7 na bieli = 1.9:1, .text-info #00c9db
2.0:1, .text-warning #ec9a3c 2.3:1, .text-danger #ed4c78 3.4:1,
.text-primary #377dff 3.7:1, .text-body #677788 w ciemnym 1.5:1,
.text-dark #1e2022 w ciemnym 1.1:1. Na tych klasach stoja komunikaty M-08
oraz wartosci "przed/po" na ekranie audytu — teksty, ktore MUSZA byc
przeczytane, bo informuja, ze cos nie przeszlo.
Kazda z nich ma w theme.min.css !important (np. .text-danger{color:#ed4c78
!important}), wiec sama kolejnosc ladowania nie wystarcza — nadpisujemy
rowniez !importantem. windu_dark.css tych klas nie rusza w ogole, wiec jeden
komplet regul obsluguje oba motywy: kolor idzie tokenem, token zmienia sie
z motywem.
Podana liczba to MINIMUM po wszystkich podlozach, na jakich te klasy realnie
laduja: --cc-surface, --cc-bg, naglowek tabeli (--cc-surface-2), pas
.table-striped, wiersz pod kursorem (--cc-brand-050 w jasnym,
rgba(255,255,255,.05) w ciemnym) oraz cztery podswietlenia wierszy
--cc-row-* z sekcji 1. Minimum wypada zawsze na --cc-row-warn-hover, czyli
na podswietlonym wierszu pod kursorem — i to ono wyznaczylo zarowno
przyciemnienie --cc-ok i --cc-warn, jak i gorna granice tych podswietlen. */
.text-success { color: var(--cc-ok) !important; } /* min. 4.56:1 jasny / 6.25:1 ciemny — nadpisuje theme.min.css .text-success{color:#00c9a7!important} */
.text-warning { color: var(--cc-warn) !important; } /* min. 4.52:1 / 6.77:1 — jw. .text-warning{color:#ec9a3c!important} */
.text-danger { color: var(--cc-err) !important; } /* min. 4.56:1 / 4.56:1 — jw. .text-danger{color:#ed4c78!important} */
.text-info { color: var(--cc-info) !important; } /* min. 4.88:1 / 6.51:1 — jw. .text-info{color:#00c9db!important} */
.text-primary { color: var(--cc-brand) !important; } /* min. 10.82:1 / 5.12:1 — jw. .text-primary{color:#377dff!important} */
/* .text-body i .text-dark maja w szablonach to samo zadanie: "zwykly tekst,
nie link" — w dzienniku aktywnosci i na liscie kampanii
oraz plakietka `badge bg-light text-dark` na liscie statusow. Obie schodza
na --cc-ink, bo tylko on jest kolorem tekstu wlasciwym dla motywu.
.text-dark wzieta doslownie bylaby w ciemnym niewidoczna (#1e2022 na
--cc-surface #111a14 = 1.1:1), a .text-body z Front (#677788) daje tam 1.5:1. */
.text-body { color: var(--cc-ink) !important; } /* min. 13.31:1 / 11.01:1 — nadpisuje theme.min.css .text-body{color:#677788!important} */
.text-dark { color: var(--cc-ink) !important; } /* jw. — .text-dark{color:#1e2022!important} */
a {
color: var(--cc-brand-500);
}
a:hover,
a:focus {
color: var(--cc-brand);
}
/* W ciemnym link schodzi na jasniejszy odcien marki, a nie na --cc-brand-500.
--cc-brand-500 #6ba055 wystarczalo na karcie (5.74:1), ale nie na
podswietlonych wierszach tabeli, w ktorych siedzi wiekszosc linkow panelu
(loadMainContent w kolumnie akcji): na --cc-row-warn-hover dawalo 4.18:1,
na --cc-row-pick-hover 4.46:1 — ponizej progu. --cc-brand-300 #a3c98f daje
tam 6.96:1 i 7.44:1, a na --cc-surface 9.57:1. Najgorsze tlo dla linku
po zmianie: 6.96:1.
Hover musial wtedy przejsc na --cc-ink, bo --cc-brand-300 zajal stan
spoczynku i inaczej nie byloby zadnej reakcji na kursor
(--cc-ink: 11.01-15.13:1 na tych samych tlach). */
html[data-cc-theme="dark"] a {
color: var(--cc-brand-300);
}
html[data-cc-theme="dark"] a:hover,
html[data-cc-theme="dark"] a:focus {
color: var(--cc-ink);
}
hr {
border-top-color: var(--cc-border-soft);
}
.page-header {
border-bottom-color: var(--cc-border);
}
/* =============================================================================
3. LEWE MENU
-----------------------------------------------------------------------------
Menu jest jedynym elementem widocznym na kazdym ekranie przez cala zmiane
konsultanta — tutaj marka ma byc, a nie granat Windu.
============================================================================= */
/* Tlo. theme.min.css ma .navbar-dark{background-color:#132144!important},
windu.css dodaje .navbar-dark{background-color:#0d1424!important} —
bez !important nie da sie ich pokryc. */
.navbar-vertical-aside.navbar-dark,
.navbar-vertical-aside.navbar-dark .navbar-vertical-container {
background-color: var(--cc-sidebar-bg) !important; /* nadpisuje windu.css .navbar-dark i theme.min.css .navbar-dark */
}
/* windu_dark.css sciemnia sam kontener do #07080a (bez !important) —
wyzsza specyficznosc wystarczy. */
html[data-cc-theme="dark"] .navbar-vertical-fixed .navbar-vertical-container {
background-color: var(--cc-sidebar-bg);
}
.navbar-vertical-aside.navbar-bordered,
.navbar-vertical-aside.navbar-bordered .navbar-vertical-footer {
border-color: rgba(255, 255, 255, .07);
}
/* Logo ma oddech: pelny znak Yerbador jest szeroki (1779x459), przy 6.5rem
z motywu robil sie nieczytelnym paskiem.
LEWY ODSTEP JEST WYROWNANY DO SZYNY MENU, A NIE DO KRAWEDZI PANELU.
Poprzednia wartosc .25rem (4px) zastepowala 1.75rem z motywu i sciagala logo
na sam skraj: znak stal na x=4px, a ikony pozycji menu (.nav-icon) na x=31px,
czyli logo wychodzilo 27px w lewo poza szyne, na ktorej ustawiona jest cala
resztka menu. Na szerokim znaku slowny widac to od razu.
Skad 1.9375rem: zmierzone w przegladarce na 1440x900 — .nav-link zaczyna sie
na x=20px (odstep listy), a jego padding-left to 11px, wiec ikona stoi na
31px = 1.9375rem. Wartosc jest wiec wyliczona z geometrii menu, a nie dobrana
na oko; zmiana paddingu .nav-link wymaga poprawienia jej tutaj.
PION ODDAJEMY FLEXOWI. Motyw daje .navbar-brand-wrapper height:3.75rem
i align-items:center, a logo przy 8.75rem szerokosci ma 36px wysokosci
(plik 300x77), wiec centruje sie samo: 12px z gory i 12px z dolu. Wlasny
padding .75rem na robil z niego element WYZSZY od kontenera (60px tresci
w 40px miejsca), przez co logo siadalo 4px nad kontenerem i konczylo z 8px
z gory, a 16px z dolu — optycznie za wysoko. */
.navbar-vertical-aside .navbar-brand-wrapper {
padding: 0 1.9375rem;
}
.navbar-vertical-aside .navbar-brand-logo {
min-width: 8.75rem;
max-width: 8.75rem;
}
.navbar-vertical-aside .navbar-brand-logo-mini {
min-width: 2.25rem;
max-width: 2.25rem;
}
/* Znak w GORNYM pasku (header.html.twig bundla) — nie pomylka, ze regula lezy
w sekcji menu: bundel wstawia w oba miejsca TEN SAM plik. Naglowek bierze
logo_icon_menu, czyli yerbador-mark-white.svg (fill #FFFFFF), bo bundel nie
rozdziela "znak w menu" od "znaku w naglowku". W menu bialy znak lezy na
ciemnej zieleni (13.4:1), ale header ma tlo --cc-surface, wiec tam wychodzi
biel na bieli — 1:1, znak znika.
Kiedy to widac: theme.min.css chowa .navbar-brand-wrapper w naglowku dopiero
regula .navbar-vertical-aside-show-xl .navbar:not(.navbar-vertical-aside)
.navbar-brand-wrapper{display:none} w @media (min-width:1200px), a body ma
min-width 992px — czyli w przedziale 992-1199 px znak jest w naglowku obecny
i niewidoczny. Jest jednoczesnie przyciskiem otwierajacym menu boczne
(.js-navbar-vertical-aside-toggle-invoker), wiec uzytkownik traci jedyne
miejsce, w ktore ma kliknac.
Naprawa bez dotykania szablonu bundla: podkladamy znakowi kafelek w kolorze
menu, czyli dokladnie to tlo, na ktore ten plik SVG zostal narysowany. */
#header .header-logo-btn {
background-color: var(--cc-sidebar-bg);
border-radius: var(--cc-radius);
/* Szablon bundla wiesza na tym przycisku klase narzedziowa .p-0, a ta jest
!importantem — bez odpowiedzi kafelek przylegalby do krawedzi znaku. */
padding: .3rem .5rem !important; /* nadpisuje theme.min.css .p-0{padding:0!important} */
}
/* theme.min.css daje .navbar-brand-logo{min-width:6.5rem;max-width:6.5rem} —
szerokosc pod pelne logo. W naglowku siedzi kwadratowy ZNAK, wiec 6.5rem
rozciagaloby kafelek na pol paska. 2.25rem to ten sam rozmiar, co znak
w zwinietym menu (.navbar-brand-logo-mini wyzej) — oba miejsca zgodne. */
#header .navbar-brand-logo {
min-width: 2.25rem;
max-width: 2.25rem;
}
/* Pozycje menu */
.navbar-vertical.navbar-dark .navbar-nav .nav-link {
color: var(--cc-sidebar-ink);
border-radius: var(--cc-radius);
}
.navbar-vertical.navbar-dark .navbar-nav .nav-link:hover,
.navbar-vertical.navbar-dark .navbar-nav .nav-link:focus {
color: #fff;
background-color: rgba(255, 255, 255, .06);
}
/* Naglowki sekcji: drobne wersaliki, wyraznie oddzielone od pozycji klikalnych.
Krycie bieli policzone, nie dobrane na oko: .60 daje po zmieszaniu z tlem menu
5.8:1 w jasnym i 6.5:1 w ciemnym. Ladniejsze .42 dawalo 3.6:1, czyli naglowek,
ktorego nie da sie przeczytac zerknieciem — a to jest jego cala robota. */
.navbar-vertical .nav-subtitle {
color: rgba(255, 255, 255, .60);
font-size: .6875rem;
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase;
padding-top: 1.125rem;
padding-bottom: .375rem;
}
/* Zastepnik naglowka w menu zwinietym — glif, wiec prog to 3:1 (WCAG 1.4.11);
.40 daje 3.4:1. */
.navbar-vertical .nav-subtitle-replacer {
color: rgba(255, 255, 255, .40);
}
/* Ikony przygaszone, rozjasniane dopiero pod kursorem. */
.navbar-vertical .nav-icon {
opacity: .6;
color: var(--cc-sidebar-ink);
}
.navbar-vertical .nav-link:hover .nav-icon,
.navbar-vertical .nav-link:focus .nav-icon {
opacity: 1;
color: #fff;
}
/* Pozycja aktywna — wariant serwerowy (klasa .active z menu.html.twig).
theme.min.css trzyma na tych linkach border-width:0 0 0 .2rem i barwi
go na #377dff; wystarczy zmienic kolor. */
.navbar-vertical .navbar-nav.nav-tabs .active .nav-link,
.navbar-vertical .navbar-nav.nav-tabs .active.nav-link {
border-left-color: var(--cc-cta);
}
.navbar-vertical.navbar-dark .navbar-nav .nav-link.active,
.navbar-vertical.navbar-dark .navbar-nav .active > .nav-link {
color: #fff;
background-color: rgba(255, 255, 255, .09);
}
.navbar-vertical .nav-link.active .nav-icon {
opacity: 1;
color: #fff;
}
/* Pozycja aktywna — wariant JS-owy (klasa .windu-active dokladana przez admin.js).
windu.css zdejmuje tam kazde obramowanie i cien przez !important, wiec
limonkowy pasek robimy cieniem wewnetrznym i tez z !important. */
.navbar-nav .nav-link.windu-active,
.nav-sub .nav-link.windu-active {
background-color: rgba(255, 255, 255, .09) !important; /* nadpisuje windu.css .navbar-nav .nav-link.windu-active{background-color:rgba(255,255,255,0.05)!important} */
box-shadow: inset .2rem 0 0 0 var(--cc-cta) !important; /* nadpisuje windu.css .navbar-nav .nav-link.windu-active{box-shadow:none!important} */
}
/* W trybie mini menu wyjezdza jako biala plamka na jasnym tle — tam limonka
na bialym byla nieczytelna, wiec pasek idzie kolorem marki. */
.navbar-vertical-aside-mini-mode .navbar-nav .nav-link.windu-active,
.navbar-vertical-aside-mini-mode .nav-sub .nav-link.windu-active {
background-color: var(--cc-brand-050) !important; /* nadpisuje windu.css .navbar-vertical-aside-mini-mode .navbar-nav .nav-link.windu-active{background-color:rgba(0,0,0,0.1)!important} */
box-shadow: inset .2rem 0 0 0 var(--cc-brand) !important; /* jw. — windu.css zeruje box-shadow */
}
/* Kropka przy pozycji podmenu */
.navbar-vertical .active .nav-indicator-icon,
.navbar-vertical .nav-link:hover .nav-indicator-icon,
.navbar-vertical .show > .nav-link > .nav-indicator-icon {
color: var(--cc-cta);
}
/* Rozwijane podmenu w trybie mini to plywajaca karta na jasnym tle. */
.navbar-vertical-aside-show-xl.navbar-vertical-aside-mini-mode .navbar-vertical-content > .navbar-nav > .navbar-vertical-aside-has-menu > .nav {
background-color: var(--cc-surface);
border-radius: var(--cc-radius-lg);
box-shadow: var(--cc-shadow);
}
/* Stopka menu: przelacznik zwijania i plakietka wersji. */
.sidebar-toggle-btn {
color: rgba(255, 255, 255, .45) !important; /* nadpisuje windu.css .sidebar-toggle-btn{color:rgba(255,255,255,0.5)!important} */
}
.sidebar-toggle-btn:hover {
color: var(--cc-cta) !important; /* nadpisuje windu.css .sidebar-toggle-btn:hover{color:white!important} */
}
/* Plakietka wersji i wskaznik cache leza na ciemnej zieleni menu, wiec nie moga
brac tla z .badge-soft-light (sekcja 7, dalej w pliku i o tej samej wadze) —
stad selektor dwuklasowy. */
.sidebar-badges .badge {
background-color: rgba(255, 255, 255, .1);
}
/* .52, nie .38 z motywu: dopiero od .50 plakietka wychodzi nad 4.5:1 wzgledem
tla menu. Ma byc dyskretna, ale czytelna — numer wersji jest pierwsza rzecza,
o ktora pytamy przy zgloszeniu bledu. */
.sidebar-version-badge {
color: rgba(255, 255, 255, .52) !important; /* nadpisuje windu.css .sidebar-version-badge{color:rgba(255,255,255,0.4)!important} */
}
.sidebar-version-badge:hover {
color: var(--cc-cta) !important; /* nadpisuje windu.css .sidebar-version-badge:hover{color:rgba(255,255,255,0.7)!important} */
background-color: rgba(255, 255, 255, .08) !important; /* jw. */
}
/* =============================================================================
4. PRZYCISKI
-----------------------------------------------------------------------------
.btn-primary jest przepisany 1:1 z CTA na yerbador.pl:
background:#C4FD02; color:#0A1A00; border:0; border-radius:10px; font-weight:800
Promien 10px daje juz windu.css (.btn{border-radius:10px!important}), wiec
go nie powtarzamy — zgadza sie ze wzorcem.
Waga 800 zostaje WYLACZNIE na przyciskach glownych (primary + CTA logowania).
Reszta idzie na 600, inaczej ekran zamienia sie w scianke wykrzyknikow.
============================================================================= */
.btn {
font-weight: 600;
}
.btn-primary,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
color: var(--cc-cta-ink);
/* Ramka zostaje przezroczysta, a NIE zerowa. Bootstrap 4 daje kazdemu .btn
border:.0625rem solid, wiec border-width:0 zbijalo CTA o 2 px w pionie
wzgledem sasiedniego .btn-white w tym samym pasku narzedzi. Wyglad ten sam,
wysokosc zgodna z sasiadami. */
background-color: var(--cc-cta);
border-color: transparent;
font-weight: 800;
}
.btn-primary:hover {
color: var(--cc-cta-ink);
background-color: var(--cc-cta-hover);
border-color: transparent;
transform: translateY(-1px);
box-shadow: 0 6px 16px -6px rgba(9, 55, 26, .45);
}
.btn-primary.focus,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show > .btn-primary.dropdown-toggle:focus {
color: var(--cc-cta-ink);
background-color: var(--cc-cta-hover);
box-shadow: none;
}
.btn-primary.disabled,
.btn-primary:disabled {
color: var(--cc-cta-ink);
background-color: var(--cc-cta);
border-color: transparent;
opacity: .45;
}
/* Strzalka rozwijania na tle limonki musi byc ciemna, nie biala. */
.btn-primary.dropdown-toggle::after {
background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='%230a1a00' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.72,15.78a.75.75,0,0,1-.53.22h-.38a.77.77,0,0,1-.53-.22L6.15,10.64a.5.5,0,0,1,0-.71l.71-.71a.49.49,0,0,1,.7,0L12,13.67l4.44-4.45a.5.5,0,0,1,.71,0l.7.71a.5.5,0,0,1,0,.71Z'/%3E%3C/svg%3E") no-repeat right center/1rem 1rem;
}
/* Wspolny pierscien fokusu dla klawiatury — jeden dla wszystkich odmian. */
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-outline-primary:focus-visible,
.btn-white:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible,
.btn-success:focus-visible,
.btn-warning:focus-visible,
.btn-ghost-secondary:focus-visible,
.btn-ghost-primary:focus-visible,
.btn-outline-danger:focus-visible {
outline: 0;
box-shadow: 0 0 0 .2rem var(--cc-focus);
}
.btn-outline-primary {
color: var(--cc-brand);
border-color: var(--cc-brand);
background-color: transparent;
}
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active {
color: #fff;
background-color: var(--cc-brand);
border-color: var(--cc-brand);
}
html[data-cc-theme="dark"] .btn-outline-primary:hover,
html[data-cc-theme="dark"] .btn-outline-primary:not(:disabled):not(.disabled).active,
html[data-cc-theme="dark"] .btn-outline-primary:not(:disabled):not(.disabled):active {
color: var(--cc-cta-ink);
}
.btn-white {
color: var(--cc-ink);
background-color: var(--cc-surface);
border-color: var(--cc-border);
}
.btn-white.active,
.btn-white.focus,
.btn-white:active,
.btn-white:focus,
.btn-white:hover {
color: var(--cc-brand);
background-color: var(--cc-brand-050);
border-color: var(--cc-brand-300);
box-shadow: none;
}
html[data-cc-theme="dark"] .btn-white {
background-color: rgba(255, 255, 255, .06);
border-color: var(--cc-border);
}
html[data-cc-theme="dark"] .btn-white.active,
html[data-cc-theme="dark"] .btn-white.focus,
html[data-cc-theme="dark"] .btn-white:active,
html[data-cc-theme="dark"] .btn-white:focus,
html[data-cc-theme="dark"] .btn-white:hover {
color: var(--cc-brand-300);
background-color: rgba(255, 255, 255, .11);
}
.btn-secondary {
color: #fff;
background-color: var(--cc-brand-500);
border-color: var(--cc-brand-500);
}
.btn-secondary:hover,
.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active {
color: #fff;
background-color: var(--cc-brand);
border-color: var(--cc-brand);
}
html[data-cc-theme="dark"] .btn-secondary {
color: var(--cc-cta-ink);
background-color: var(--cc-brand-600);
border-color: var(--cc-brand-600);
}
html[data-cc-theme="dark"] .btn-secondary:hover,
html[data-cc-theme="dark"] .btn-secondary:not(:disabled):not(.disabled).active,
html[data-cc-theme="dark"] .btn-secondary:not(:disabled):not(.disabled):active {
color: var(--cc-cta-ink);
background-color: var(--cc-brand);
border-color: var(--cc-brand);
}
.btn-outline-secondary {
color: var(--cc-ink-soft);
border-color: var(--cc-border);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.btn-outline-secondary:not(:disabled):not(.disabled):active {
color: var(--cc-brand);
background-color: var(--cc-brand-050);
border-color: var(--cc-brand-300);
}
/* Ostatni przycisk konturowy, ktory zostawal na palecie Front — kasowanie
wartosci slownikowej w formularzu definicji pola (takze w wariancie
sklejanym w JavaScripcie). theme.min.css daje mu #ed4c78: tekst 3.4:1
na bieli, a po najechaniu biel na #ed4c78 to te same 3.4:1 — obie strony
ponizej progu, przy przycisku, ktory kasuje dane. */
.btn-outline-danger {
color: var(--cc-err); /* jasny 5.62:1, ciemny 6.26:1 */
border-color: var(--cc-err); /* obrys: jasny 5.62:1, ciemny 6.26:1, prog 3:1 */
}
.btn-outline-danger:hover,
.btn-outline-danger:not(:disabled):not(.disabled).active,
.btn-outline-danger:not(:disabled):not(.disabled):active {
color: #fff; /* na --cc-err w jasnym: 5.62:1 */
background-color: var(--cc-err);
border-color: var(--cc-err);
}
/* W ciemnym --cc-err jest jasnym rozem — biel na nim to 2.84:1. Tak samo,
jak .btn-danger kilka regul nizej, schodzimy na bardzo ciemny odcien tej
samej barwy: 6.53:1. */
html[data-cc-theme="dark"] .btn-outline-danger:hover,
html[data-cc-theme="dark"] .btn-outline-danger:not(:disabled):not(.disabled).active,
html[data-cc-theme="dark"] .btn-outline-danger:not(:disabled):not(.disabled):active {
color: #2a0709;
}
.btn-danger {
color: #fff;
background-color: var(--cc-err);
border-color: var(--cc-err);
}
html[data-cc-theme="dark"] .btn-danger {
color: #2a0709;
}
.btn-success {
color: #fff;
background-color: var(--cc-ok);
border-color: var(--cc-ok);
}
html[data-cc-theme="dark"] .btn-success {
color: #04220f;
}
.btn-warning {
color: #fff;
background-color: var(--cc-warn);
border-color: var(--cc-warn);
}
html[data-cc-theme="dark"] .btn-warning {
color: #2a1a00;
}
/* Przyciski duchy — uzywane w kolumnie akcji kazdej tabeli. */
.btn-ghost-secondary {
color: var(--cc-ink-soft);
}
.btn-ghost-secondary.active,
.btn-ghost-secondary.focus,
.btn-ghost-secondary:active,
.btn-ghost-secondary:focus,
.btn-ghost-secondary:hover {
color: var(--cc-brand);
background-color: var(--cc-brand-050);
}
.btn-ghost-primary {
color: var(--cc-brand-500);
}
.btn-ghost-primary.active,
.btn-ghost-primary.focus,
.btn-ghost-primary:active,
.btn-ghost-primary:focus,
.btn-ghost-primary:hover {
color: var(--cc-brand);
background-color: var(--cc-brand-050);
}
html[data-cc-theme="dark"] .btn-ghost-primary,
html[data-cc-theme="dark"] .btn-ghost-primary.focus,
html[data-cc-theme="dark"] .btn-ghost-primary:focus,
html[data-cc-theme="dark"] .btn-ghost-primary:hover {
color: var(--cc-brand-300);
}
.btn-ghost-success { color: var(--cc-ok); }
.btn-ghost-warning { color: var(--cc-warn); }
.btn-ghost-danger { color: var(--cc-err); }
.btn-ghost-info { color: var(--cc-info); }
.btn-ghost-success:hover { background-color: rgba(21, 122, 63, .1); color: var(--cc-ok); }
.btn-ghost-warning:hover { background-color: rgba(154, 91, 0, .1); color: var(--cc-warn); }
.btn-ghost-danger:hover { background-color: rgba(198, 40, 40, .1); color: var(--cc-err); }
.btn-ghost-info:hover { background-color: rgba(15, 109, 122, .1); color: var(--cc-info); }
/* Male przyciski — ta sama geometria, tylko gestszy tekst. */
.btn-sm,
.btn-xs {
font-weight: 600;
letter-spacing: 0;
}
.btn-outline-dark {
color: var(--cc-ink-soft);
border-color: var(--cc-border);
}
.btn-outline-dark:hover {
color: var(--cc-ink);
background-color: var(--cc-surface-2);
border-color: var(--cc-border);
}
/* =============================================================================
5. KARTY I TABELE
-----------------------------------------------------------------------------
windu.css narzuca na .table komplet kolorow z !important (tlo, tekst, ramka,
hover), a windu_dark.css robi to samo w czerni — kazdy kolor tabeli musimy
wiec przebic !important. Kazde takie miejsce ma komentarz z nadpisywana regula.
============================================================================= */
.card {
background-color: var(--cc-surface);
border: 1px solid var(--cc-border);
border-radius: var(--cc-radius-lg);
box-shadow: var(--cc-shadow);
}
.card-header {
background-color: var(--cc-surface-2);
border-bottom: 1px solid var(--cc-border-soft);
border-top-left-radius: calc(var(--cc-radius-lg) - 1px);
border-top-right-radius: calc(var(--cc-radius-lg) - 1px);
}
.card-header-title,
.card-title {
color: var(--cc-ink);
font-weight: 600;
}
.card-footer {
background-color: transparent;
border-top: 1px solid var(--cc-border-soft);
color: var(--cc-ink-soft);
}
.card-hover-shadow:hover {
box-shadow: 0 8px 24px -12px rgba(9, 55, 26, .35) !important; /* nadpisuje windu_dark.css .card-hover-shadow:hover{box-shadow:0 6px 12px rgba(0,0,0,.25)!important} */
}
.list-group-item {
background-color: var(--cc-surface);
border-color: var(--cc-border-soft);
color: var(--cc-ink);
}
/* --- Tabela ---------------------------------------------------------------- */
.table {
background-color: var(--cc-surface) !important; /* nadpisuje windu.css .table{background-color:#fff!important} i windu_dark.css .table{background-color:#000!important} */
color: var(--cc-ink) !important; /* jw. — windu.css .table{color:#2f343a!important} */
border-color: var(--cc-border) !important; /* jw. — windu.css .table{border:1px #e7eaf3 solid!important} */
border-radius: var(--cc-radius-lg) !important; /* jw. — windu.css .table{border-radius:15px!important} */
font-size: .8125rem;
}
/* Naglowek: wersaliki, drobny stopien, tlo zaglebione.
Przyklejony naglowek (.cc-table-sticky z cc-panel.css) siega po ten sam token
--cc-surface-2, wiec przy przewijaniu nie zmienia barwy. */
.table thead th {
background-color: var(--cc-surface-2) !important; /* nadpisuje windu.css .table thead th{background-color:#fff!important} i windu_dark.css {background-color:#000!important} */
color: var(--cc-ink-soft) !important; /* jw. — windu.css .table thead th{color:#2f343a!important} */
font-size: .6875rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
border-bottom: 1px solid var(--cc-border) !important; /* jw. — windu_dark.css .table td,.table th{border-color:...!important} */
white-space: nowrap;
}
.table tbody td {
color: var(--cc-ink) !important; /* nadpisuje windu.css .table tbody td{color:#2f343a!important} i windu_dark.css {color:#fff!important} */
}
.table td,
.table th {
border-top-color: var(--cc-border-soft) !important; /* nadpisuje windu_dark.css .table td,.table th{border-top-color:rgba(255,255,255,0.05)!important} */
border-color: var(--cc-border-soft) !important; /* jw. */
}
.table tbody tr:hover,
.table-hover tbody tr:hover,
.table-striped tbody tr:nth-of-type(odd):hover,
.table-hover.table-striped tbody tr:nth-of-type(odd):hover {
background-color: var(--cc-brand-050) !important; /* nadpisuje windu.css .table tbody tr:hover{background-color:rgba(209,216,230,0.45)!important} */
}
html[data-cc-theme="dark"] .table tbody tr:hover,
html[data-cc-theme="dark"] .table-hover tbody tr:hover,
html[data-cc-theme="dark"] .table-striped tbody tr:nth-of-type(odd):hover,
html[data-cc-theme="dark"] .table-hover.table-striped tbody tr:nth-of-type(odd):hover {
background-color: rgba(255, 255, 255, .05) !important; /* nadpisuje windu_dark.css .table tbody tr:hover{background-color:rgba(255,255,255,0.1)!important} */
}
.table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(9, 55, 26, .022);
}
html[data-cc-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(255, 255, 255, .02);
}
.table .thead-light th {
background-color: var(--cc-surface-2) !important; /* nadpisuje windu.css .table thead th{background-color:#fff!important} */
color: var(--cc-ink-soft) !important; /* jw. */
border-color: var(--cc-border) !important; /* jw. */
}
/* Liczby maja sie zgadzac w pionie — CPO, liczba prob, kwoty, czasy. */
.table td,
.table th,
.table input[type="number"] {
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1;
}
/* =============================================================================
6. FORMULARZE
-----------------------------------------------------------------------------
Fokus ma byc zielony, nie domyslnie niebieski — niebieski pierscien na
zielonym panelu to jedyna rzecz, ktora natychmiast zdradza obcy szablon.
============================================================================= */
/* Ramka pola = --cc-border-input, NIE --cc-border.
Powod: w kartach tlo pola (--cc-surface) jest identyczne z tlem karty
(obie #ffffff), wiec ramka jest JEDYNYM wskaznikiem granicy pola — a to
wprost sciaga prog WCAG 1.4.11 (kontrast nietekstowy 3:1 dla granic
komponentow interfejsu). Stary --cc-border (#d7e2da na #ffffff) daje 1.33:1.
Wyliczony kontrast nowego tokenu (wzor WCAG 2.1, relative luminance):
jasny --cc-border-input #748d7d na --cc-surface #ffffff = 3.59:1
ciemny --cc-border-input #5c7765 na --cc-surface #111a14 = 3.62:1
Oba > 3:1 z zapasem ok. 0.6, wiec drobne zaokraglenia w innej przegladarce
nie zepchna ich ponizej progu.
Ramek tabel i kart (--cc-border) NIE zmieniamy — to nie sa granice
komponentow interaktywnych w rozumieniu 1.4.11.
Rozwazona alternatywa: jasniejsza ramka + tlo pola --cc-surface-2 zamiast
bieli (wtedy granice pola dawaloby ROWNIEZ tlo, nie tylko ramka, i prog 3:1
przestalby obowiazywac wprost). ODRZUCONA z dwoch powodow:
1) --cc-surface-2 na .form-control zmienilby wyglad KAZDEGO pola w calym
panelu (filtry, edycja inline w tabelach, modale) — znacznie szerszy
efekt uboczny niz sama ramka, ktorej dotyczy bloker.
2) W gestym formularzu (np. kolejka, 9 sekcji, po 2-3 pola w rzedzie
z odstepem ~10px z Bootstrapowego .form-row) wypelnienie KAZDEGO pola
odcieniem --cc-surface-2 robi z formularza mozaike szarych bloczkow
tuz obok siebie — to WIEKSZE ryzyko "kratownicy" niz sama ciemniejsza
ramka na bialym tle. Sam --cc-border-input (#748d7d) to stonowany
szaro-zielony odcien, wyraznie lzejszy niz czarny — porownywalny
z ramkami pol w innych dostepnych systemach projektowych (np. GOV.UK
Design System), gdzie gestwe formularze z widoczna ramka sa norma,
nie usterka. Dlatego zostaje sama ramka, bez zmiany tla. */
.form-control,
.custom-select {
background-color: var(--cc-surface);
border: 1px solid var(--cc-border-input);
color: var(--cc-ink);
}
/* Promien pol osobno i z pelna lista selektorow elementowych: windu.css narzuca
10px nie tylko na .form-control, ale i na input./select./textarea.form-control
(waga 0,2,0), wiec regula o wadze 0,1,0 pokrylaby tylko czesc pol i formularz
mialby dwa rozne zaokraglenia obok siebie.
Przyciski zostaja na 10px z windu.css — tak wygladaja CTA na yerbador.pl. */
.form-control,
input.form-control,
select.form-control,
textarea.form-control,
.custom-select,
select.custom-select {
border-radius: var(--cc-radius) !important; /* nadpisuje windu.css .form-control,.custom-select,select.form-control,input.form-control,textarea.form-control{border-radius:10px!important} */
}
html[data-cc-theme="dark"] .form-control,
html[data-cc-theme="dark"] .custom-select {
background-color: rgba(255, 255, 255, .05);
border-color: var(--cc-border-input); /* 3.62:1, patrz komentarz nad regula .form-control */
color: var(--cc-ink);
}
.form-control:focus,
.custom-select:focus {
background-color: var(--cc-surface);
border-color: var(--cc-brand);
box-shadow: 0 0 0 .2rem var(--cc-focus);
color: var(--cc-ink);
outline: 0;
}
html[data-cc-theme="dark"] .form-control:focus,
html[data-cc-theme="dark"] .custom-select:focus {
background-color: rgba(255, 255, 255, .07);
border-color: var(--cc-brand);
}
.form-control::placeholder {
color: var(--cc-ink-faint);
opacity: 1;
}
/* Wylaczone i tylko-do-odczytu maja to samo tlo, ale NIE ten sam kolor tekstu.
:disabled jest w WCAG 2.1 wprost zwolnione z progu kontrastu (1.4.3, wyjatek
dla nieaktywnych elementow interfejsu) — przygaszenie jest tu komunikatem.
[readonly] wyjatku NIE ma: pole jest aktywne, da sie je zaznaczyc i skopiowac,
niesie dane DO PRZECZYTANIA, wiec obowiazuje 4.5:1. --cc-ink-faint na
--cc-surface-2 daje w jasnym 4.37:1, czyli o wlos za malo; --cc-ink-soft daje
6.6:1 w jasnym i 8.2:1 w ciemnym. */
.form-control:disabled,
.custom-select:disabled {
background-color: var(--cc-surface-2);
color: var(--cc-ink-faint);
}
.form-control[readonly] {
background-color: var(--cc-surface-2);
color: var(--cc-ink-soft);
}
/* Strzalka selecta idzie kolorem tekstu drugorzednego, osobno dla kazdego motywu. */
.custom-select {
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='%23465a4e' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.72,15.78a.75.75,0,0,1-.53.22h-.38a.77.77,0,0,1-.53-.22L6.15,10.64a.5.5,0,0,1,0-.71l.71-.71a.49.49,0,0,1,.7,0L12,13.67l4.44-4.45a.5.5,0,0,1,.71,0l.7.71a.5.5,0,0,1,0,.71Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .5rem center;
background-size: 1rem 1rem;
}
html[data-cc-theme="dark"] .custom-select {
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='%23a9bcb0' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.72,15.78a.75.75,0,0,1-.53.22h-.38a.77.77,0,0,1-.53-.22L6.15,10.64a.5.5,0,0,1,0-.71l.71-.71a.49.49,0,0,1,.7,0L12,13.67l4.44-4.45a.5.5,0,0,1,.71,0l.7.71a.5.5,0,0,1,0,.71Z'/%3E%3C/svg%3E");
}
.form-group > label,
.form-row > .col-form-label,
.col-form-label {
color: var(--cc-ink);
font-weight: 600;
}
.form-text {
color: var(--cc-ink-soft);
}
/* Bledy walidacji */
.form-control.is-invalid,
.custom-select.is-invalid,
.was-validated .form-control:invalid {
border-color: var(--cc-err);
}
.form-control.is-invalid:focus,
.custom-select.is-invalid:focus,
.was-validated .form-control:invalid:focus {
border-color: var(--cc-err);
box-shadow: 0 0 0 .2rem rgba(198, 40, 40, .28);
}
.invalid-feedback,
.form-control.is-invalid ~ .invalid-feedback {
color: var(--cc-err);
}
.form-control.is-valid,
.custom-select.is-valid {
border-color: var(--cc-ok);
}
/* Przelacznik Bootstrapa 4 (.custom-switch) — uzywany m.in. na liscie nagran. */
.custom-control-input:checked ~ .custom-control-label::before {
background-color: var(--cc-brand);
border-color: var(--cc-brand);
}
/* Wylaczony przelacznik w stanie "wlaczony" — jedyne miejsce w formularzach,
gdzie przebijal jeszcze blekit motywu. theme.min.css trzyma go osobno dla
kazdej odmiany: .custom-switch .custom-control-input:disabled:checked~
.custom-control-label::before{background-color:rgba(55,125,255,.5)} i to jest
waga 0,5,1, wiec ogolna regula "checked" powyzej (0,3,1) go nie siegala.
Powtarzamy wiec pelna liste odmian i bierzemy przygaszona marke — dokladnie
ten sam kolor, co ma .toggle-switch-input:checked:disabled nizej. */
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before,
.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before,
.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
background-color: var(--cc-brand-300);
border-color: var(--cc-brand-300);
}
.custom-control-input:focus ~ .custom-control-label::before {
box-shadow: 0 0 0 .2rem var(--cc-focus);
}
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
border-color: var(--cc-brand-300);
}
.custom-control-label::before {
background-color: var(--cc-surface-2);
border-color: var(--cc-border);
}
.custom-control-label {
color: var(--cc-ink);
}
/* Stan WLACZONY w ciemnym idzie ciemniejszym odcieniem marki niz w jasnym.
Powod: ptaszek i kropka przelacznika to biale glify Bootstrapa (::after
z wbudowanego SVG i bialego tla), czyli elementy nietekstowe — prog WCAG
1.4.11 to 3:1. Biel na --cc-brand w ciemnym (#7fb069) daje 2.53:1, na
--cc-brand-600 (#5c904d) daje 3.78:1. Sam kafelek pozostaje odrozniany od
tla modala: #5c904d na --cc-surface #111a14 to 4.70:1.
Wybralismy ciemniejsze tlo, a nie ciemny wskaznik, bo jedna zmiana zalatwia
naraz przelacznik (.custom-switch) i pole wyboru (.custom-checkbox) — oba
rysuja bialy element na tym samym ::before. */
html[data-cc-theme="dark"] .custom-control-input:checked ~ .custom-control-label::before {
background-color: var(--cc-brand-600);
border-color: var(--cc-brand-600);
}
/* Przelacznik motywu Front (.toggle-switch) — uzywany na liscie kolejek (AMD,
czynnosc). Nazwa inna niz w Bootstrapie, wyglad ma byc ten sam. */
.toggle-switch-label {
background-color: var(--cc-surface-2);
border-color: transparent;
}
html[data-cc-theme="dark"] .toggle-switch-label {
background-color: rgba(255, 255, 255, .12);
}
.toggle-switch-input:checked + .toggle-switch-label {
background-color: var(--cc-brand);
}
/* Ten sam powod co przy .custom-control wyzej: bialy .toggle-switch-indicator
na --cc-brand w ciemnym to 2.53:1, na --cc-brand-600 — 3.78:1 (prog 3:1). */
html[data-cc-theme="dark"] .toggle-switch-input:checked + .toggle-switch-label {
background-color: var(--cc-brand-600);
}
.toggle-switch-input:focus-visible + .toggle-switch-label {
box-shadow: 0 0 0 .2rem var(--cc-focus);
}
.toggle-switch-input:checked:disabled + .toggle-switch-label {
background-color: var(--cc-brand-300);
}
/* Regula ciemna wyzej ma wyzsza wage niz ta o krok wyzej (dochodzi html[...]),
wiec bez tego powtorzenia wylaczony przelacznik w ciemnym przestalby byc
odrozniany od wlaczonego. */
html[data-cc-theme="dark"] .toggle-switch-input:checked:disabled + .toggle-switch-label {
background-color: var(--cc-brand-300);
}
.toggle-switch-indicator {
background-color: #fff;
}
/* Grupy pol: przycisk doklejony z prawej ma trzymac ramke tokenowa. */
.input-group-append .btn,
.input-group-prepend .btn,
.input-group-text {
border-color: var(--cc-border);
}
.input-group-text {
background-color: var(--cc-surface-2);
color: var(--cc-ink-soft);
}
/* =============================================================================
7. KOMPONENTY BUNDLA
-----------------------------------------------------------------------------
Wszystko, co panel dostaje z bibliotek zamkniete w bundlu Windu.
Zadnego CDN — te reguly celuja w pliki, ktore juz sa w vendor/.
============================================================================= */
/* --- select2 --------------------------------------------------------------- */
/* admin.js inicjuje select2 z theme:'bootstrap-5', wiec kontener nosi klase
.select2-container--bootstrap-5 (plik select2-bootstrap-5-theme.min.css).
To jedyne miejsce, gdzie w panelu wystepuja klasy Bootstrapa 5 — pochodza
z biblioteki, nie z naszych szablonow. */
.select2-container--bootstrap-5 .select2-selection {
background-color: var(--cc-surface);
border-color: var(--cc-border);
color: var(--cc-ink);
}
.select2-container .select2-selection--single {
background-color: var(--cc-surface) !important; /* nadpisuje windu_dark.css .select2-container .select2-selection--single{background-color:rgba(255,255,255,0.05)!important} */
border: 1px solid var(--cc-border) !important; /* nadpisuje windu.css .select2-container .select2-selection--single{border:1px solid #e7eaf3!important} */
border-radius: var(--cc-radius) !important; /* jw. — windu.css ustawia tam 10px, a select2 stoi w formularzu obok zwyklych pol */
}
.select2-container--bootstrap-5 .select2-selection--multiple {
border-radius: var(--cc-radius);
}
html[data-cc-theme="dark"] .select2-container .select2-selection--single {
background-color: rgba(255, 255, 255, .05) !important; /* jw. */
}
.select2-container .select2-selection--single .select2-selection__rendered {
color: var(--cc-ink) !important; /* nadpisuje windu_dark.css .select2-container .select2-selection--single .select2-selection__rendered{color:white!important} */
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
color: var(--cc-ink-faint);
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
border-color: var(--cc-brand);
box-shadow: 0 0 0 .2rem var(--cc-focus);
}
.select2-dropdown {
background-color: var(--cc-surface);
border: 1px solid var(--cc-border) !important; /* nadpisuje windu.css .select2-dropdown{border:1px solid #e7eaf3!important} */
border-radius: var(--cc-radius-lg) !important; /* jw. — lista rozwijana to plywajaca karta, wiec promien jak karty */
color: var(--cc-ink);
box-shadow: var(--cc-shadow);
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
background-color: var(--cc-brand-050);
color: var(--cc-ink);
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected="true"] {
background-color: var(--cc-brand);
color: #fff;
}
html[data-cc-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
html[data-cc-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected="true"] {
color: var(--cc-cta-ink);
}
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
background-color: var(--cc-surface);
border-color: var(--cc-border);
border-radius: var(--cc-radius);
color: var(--cc-ink);
}
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
border-color: var(--cc-brand);
box-shadow: 0 0 0 .2rem var(--cc-focus);
}
/* Wybor wielokrotny: kazda pozycja to plakietka markowa. */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
background-color: var(--cc-brand-050);
border-color: var(--cc-brand-300);
border-radius: var(--cc-radius);
color: var(--cc-brand);
}
html[data-cc-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
color: var(--cc-brand-300);
}
/* --- flatpickr ------------------------------------------------------------- */
.flatpickr-calendar {
background: var(--cc-surface);
border-radius: var(--cc-radius-lg);
box-shadow: var(--cc-shadow);
color: var(--cc-ink);
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-weekday {
color: var(--cc-ink-soft);
fill: var(--cc-ink-soft);
}
.flatpickr-day {
color: var(--cc-ink);
border-radius: var(--cc-radius);
}
.flatpickr-day:hover,
.flatpickr-day:focus,
.flatpickr-day.inRange {
background: var(--cc-brand-050);
border-color: var(--cc-brand-050);
color: var(--cc-ink);
}
/* Dzisiaj: sam obrys, zeby nie mylil sie z wyborem. */
.flatpickr-day.today {
border-color: var(--cc-brand-300);
color: var(--cc-brand);
font-weight: 600;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
background: var(--cc-brand-050);
border-color: var(--cc-brand);
color: var(--cc-brand);
}
/* Wybrany: pelne tlo marki. */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.selected.inRange {
background: var(--cc-brand);
border-color: var(--cc-brand);
color: #fff;
}
/* Lista MUSI byc lustrem listy powyzej co do jednego selektora. Wczesniej byly
tu tylko cztery z osmiu i dzien pod kursorem albo w zakresie zostawal bialy
na --cc-brand #7fb069, czyli 2.53:1. --cc-cta-ink na tym samym tle to 7.17:1. */
html[data-cc-theme="dark"] .flatpickr-day.selected,
html[data-cc-theme="dark"] .flatpickr-day.startRange,
html[data-cc-theme="dark"] .flatpickr-day.endRange,
html[data-cc-theme="dark"] .flatpickr-day.selected:hover,
html[data-cc-theme="dark"] .flatpickr-day.startRange:hover,
html[data-cc-theme="dark"] .flatpickr-day.endRange:hover,
html[data-cc-theme="dark"] .flatpickr-day.selected:focus,
html[data-cc-theme="dark"] .flatpickr-day.selected.inRange {
color: var(--cc-cta-ink);
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
color: var(--cc-ink-faint);
}
/* --- daterangepicker ------------------------------------------------------- */
.daterangepicker {
background-color: var(--cc-surface);
border: 1px solid var(--cc-border);
border-radius: var(--cc-radius-lg);
box-shadow: var(--cc-shadow);
color: var(--cc-ink);
font-family: 'Poppins', -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.daterangepicker::before,
.daterangepicker::after {
display: none;
}
.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
background-color: var(--cc-brand-050);
color: var(--cc-ink);
}
.daterangepicker td.in-range {
background-color: var(--cc-brand-050);
color: var(--cc-ink);
}
.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker td.start-date,
.daterangepicker td.end-date {
background-color: var(--cc-brand);
color: #fff;
}
html[data-cc-theme="dark"] .daterangepicker td.active,
html[data-cc-theme="dark"] .daterangepicker td.active:hover,
html[data-cc-theme="dark"] .daterangepicker td.start-date,
html[data-cc-theme="dark"] .daterangepicker td.end-date {
color: var(--cc-cta-ink);
}
.daterangepicker td.off,
.daterangepicker td.disabled {
background-color: transparent;
color: var(--cc-ink-faint);
}
.daterangepicker .drp-buttons {
border-top-color: var(--cc-border-soft);
}
.daterangepicker .ranges li.active {
background-color: var(--cc-brand);
color: #fff;
}
/* Wybrany zakres z listy skrotow ("Ostatnie 7 dni") lezy na tym samym tle co
.daterangepicker td.active kilka regul wyzej — i tak samo musi zmienic tekst
na ciemny. Biel na --cc-brand w ciemnym to 2.53:1, --cc-cta-ink to 7.17:1. */
html[data-cc-theme="dark"] .daterangepicker .ranges li.active {
color: var(--cc-cta-ink);
}
.daterangepicker .ranges li:hover {
background-color: var(--cc-brand-050);
}
/* --- modal ----------------------------------------------------------------- */
.modal-content {
background-color: var(--cc-surface);
color: var(--cc-ink);
}
.modal-header {
background-color: var(--cc-surface-2);
border-bottom-color: var(--cc-border-soft);
}
.modal-title {
color: var(--cc-ink);
font-weight: 600;
}
.modal-footer {
border-top-color: var(--cc-border-soft);
}
/* .close, nie .btn-close — motyw stoi na Bootstrapie 4. Rozmiar zostaje z windu.css.
ZOSTAWIAMY tokeny zamiast oddawac krzyzyk arkuszowi windu_dark.css, bo wtedy
panel mialby dwie rozne logiki dla jednego elementu: w jasnym czarny krzyzyk
Bootstrapa, w ciemnym bialy z Windu, i zaden nie chodzilby po --cc-ink-soft.
Krycie podnosimy do 1: windu.css daje .5 (bez !important, wiec wystarczy
pozniejsza pozycja w kolejce), a krzyzyk to glif nietekstowy o progu 3:1
z WCAG 1.4.11 — przy .5 token schodzil do 2.25:1 w jasnym. Przy kryciu 1
caly kontrast robi kolor: 6.6:1 w jasnym, 8.2:1 w ciemnym. */
.modal-header .close {
color: var(--cc-ink-soft);
opacity: 1;
text-shadow: none;
}
.modal-header .close:hover {
color: var(--cc-ink);
opacity: 1;
}
/* Powtorzenie samego koloru dla trybu ciemnego, bo tam para regul powyzej byla
MARTWA: windu_dark.css bije je !importantem, ktory wygrywa niezaleznie od wagi
selektora. !important tylko w tym bloku — w jasnym windu_dark.css nie jest
w ogole ladowany, wiec tam nie ma czego odwzajemniac i regula zostaje czysta.
Ten arkusz i atrybut data-cc-theme="dark" zawsze ida razem (oba z ciasteczka
dark_mode), wiec zakres jest dokladnie taki, jak trzeba. */
html[data-cc-theme="dark"] .modal-header .close {
color: var(--cc-ink-soft) !important; /* nadpisuje windu_dark.css .modal-header .close,.modal-header .btn-close{color:white!important} */
}
html[data-cc-theme="dark"] .modal-header .close:hover {
color: var(--cc-ink) !important; /* jw. — .modal-header .close{color:white!important} obowiazuje takze pod kursorem */
}
.modal-backdrop {
background-color: rgba(9, 55, 26, .55);
}
html[data-cc-theme="dark"] .modal-backdrop {
background-color: rgba(0, 0, 0, .75);
}
/* --- SweetAlert2 (toasty z ccToast i potwierdzenia z ccConfirm) ------------- */
/* Uwaga na kolejnosc: sweetalert2.all.min.js dokleja swoj arkusz do
dopiero przy uruchomieniu skryptu, czyli PO tym pliku. Dlatego celujemy
przez .swal2-container, ktore podnosi specyficznosc — nie przez !important. */
.swal2-container .swal2-popup {
background: var(--cc-surface);
color: var(--cc-ink);
font-family: 'Poppins', -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.swal2-container .swal2-title,
.swal2-container .swal2-html-container {
color: var(--cc-ink);
}
.swal2-container .swal2-popup.swal2-toast {
background: var(--cc-surface);
border: 1px solid var(--cc-border);
box-shadow: var(--cc-shadow);
}
.swal2-container .swal2-popup.swal2-toast .swal2-title {
color: var(--cc-ink);
font-weight: 600;
}
.swal2-container .swal2-timer-progress-bar {
background: var(--cc-brand-300);
}
/* Przycisk potwierdzenia to CTA — ta sama limonka co w calym panelu. */
.swal2-container .swal2-styled.swal2-confirm {
background-color: var(--cc-cta);
color: var(--cc-cta-ink);
font-weight: 800;
}
.swal2-container .swal2-styled.swal2-confirm:focus {
box-shadow: 0 0 0 .2rem var(--cc-focus);
}
.swal2-container .swal2-styled.swal2-cancel {
background-color: var(--cc-surface-2);
color: var(--cc-ink);
}
.swal2-container .swal2-styled.swal2-deny {
background-color: var(--cc-err);
color: #fff;
}
/* Tak samo jak .btn-danger: --cc-err w ciemnym to jasny roz #f2707f, na ktorym
biel daje 2.84:1. Ciemny tekst daje 6.5:1. Dzis ccConfirm nie uzywa przycisku
"deny", ale nie chcemy pulapki dla pierwszej osoby, ktora go wywola. */
html[data-cc-theme="dark"] .swal2-container .swal2-styled.swal2-deny {
color: #2a0709;
}
/* --- pasek postepu ladowania ekranu ---------------------------------------- */
/* Selektor z #loading_status podnosi specyficznosc ponad windu.css
i windu_dark.css, ktore trzymaja niebieski #556ee6. */
#loading_status .loading-bar-progress {
background: var(--cc-cta);
box-shadow: 0 0 8px rgba(196, 253, 2, .55);
}
/* --- plakietki i wskazniki -------------------------------------------------- */
.badge {
font-weight: 600;
letter-spacing: .01em;
border-radius: var(--cc-radius);
}
.badge-primary {
background-color: var(--cc-brand);
color: #fff;
}
/* Reszta pliku wszedzie tam, gdzie tlem jest marka, przelacza w ciemnym tekst
na --cc-cta-ink (paginacja, .btn-outline-primary, kalendarze). Plakietka byla
jedynym miejscem, ktore tego nie robilo: biel na --cc-brand #7fb069 to 2.53:1,
--cc-cta-ink #0a1a00 na tym samym tle to 7.17:1. */
html[data-cc-theme="dark"] .badge-primary {
color: var(--cc-cta-ink);
}
.badge-soft-primary {
background-color: var(--cc-brand-050);
color: var(--cc-brand);
}
.badge-soft-secondary {
background-color: rgba(70, 90, 78, .1);
color: var(--cc-ink-soft);
}
.badge-soft-success {
background-color: rgba(21, 122, 63, .12);
color: var(--cc-ok);
}
.badge-soft-warning {
background-color: rgba(154, 91, 0, .12);
color: var(--cc-warn);
}
.badge-soft-danger {
background-color: rgba(198, 40, 40, .12);
color: var(--cc-err);
}
.badge-soft-info {
background-color: rgba(15, 109, 122, .12);
color: var(--cc-info);
}
.badge-soft-dark {
background-color: rgba(22, 34, 27, .08);
color: var(--cc-ink);
}
/* Uwaga: .badge-soft-light z motywu to biel na bieli (theme.min.css daje
color:#f9fafc na tle rgba(249,250,252,.1)). W tabeli aktywnosci ta plakietka
niesie numer proby i musi byc czytelna, wiec robimy z niej neutralny zeton
na tokenach — na jasnym 6.6:1, na ciemnym 8.2:1.
Przypadek "plakietka na ciemnozielonym menu" obsluguje osobno sekcja 3. */
.badge-soft-light {
background-color: var(--cc-surface-2);
color: var(--cc-ink-soft);
}
html[data-cc-theme="dark"] .badge-soft-primary { background-color: var(--cc-brand-050); color: var(--cc-brand-300); }
html[data-cc-theme="dark"] .badge-soft-secondary { background-color: rgba(255, 255, 255, .08); color: var(--cc-ink-soft); }
html[data-cc-theme="dark"] .badge-soft-success { background-color: rgba(78, 203, 123, .14); color: var(--cc-ok); }
html[data-cc-theme="dark"] .badge-soft-warning { background-color: rgba(240, 176, 67, .14); color: var(--cc-warn); }
html[data-cc-theme="dark"] .badge-soft-danger { background-color: rgba(242, 112, 127, .14); color: var(--cc-err); }
html[data-cc-theme="dark"] .badge-soft-info { background-color: rgba(78, 200, 216, .14); color: var(--cc-info); }
html[data-cc-theme="dark"] .badge-soft-dark { background-color: rgba(255, 255, 255, .08); color: var(--cc-ink-soft); }
.legend-indicator {
background-color: var(--cc-ink-faint);
}
.legend-indicator.bg-primary { background-color: var(--cc-brand) !important; } /* nadpisuje theme.min.css .bg-primary{background-color:#377dff!important} */
.legend-indicator.bg-success { background-color: var(--cc-ok) !important; } /* jw. — .bg-success */
.legend-indicator.bg-warning { background-color: var(--cc-warn) !important; } /* jw. — .bg-warning */
.legend-indicator.bg-danger { background-color: var(--cc-err) !important; } /* jw. — .bg-danger */
.legend-indicator.bg-info { background-color: var(--cc-info) !important; } /* jw. — .bg-info */
/* --- paginacja -------------------------------------------------------------- */
.page-link {
background-color: var(--cc-surface);
color: var(--cc-ink-soft);
border-color: var(--cc-border-soft);
}
.page-link:hover {
background-color: var(--cc-brand-050);
color: var(--cc-brand);
}
.pagination .page-item.active .page-link {
background-color: var(--cc-brand);
border-color: var(--cc-brand);
color: #fff;
}
html[data-cc-theme="dark"] .pagination .page-item.active .page-link {
background-color: var(--cc-brand) !important; /* nadpisuje windu_dark.css .page-item.active .page-link{background-color:#556ee6!important} */
border-color: var(--cc-brand) !important; /* jw. */
color: var(--cc-cta-ink) !important; /* jw. — windu_dark.css ustawia color:white!important */
}
.pagination .page-item.disabled .page-link {
background-color: var(--cc-surface-2);
color: var(--cc-ink-faint);
}
/* --- okruszki --------------------------------------------------------------- */
.breadcrumb {
background-color: transparent;
padding-left: 0;
}
.breadcrumb-item,
.breadcrumb-item a {
color: var(--cc-ink-soft);
}
.breadcrumb-item a:hover {
color: var(--cc-brand);
}
.breadcrumb-item.active {
color: var(--cc-ink);
font-weight: 600;
}
.breadcrumb-item + .breadcrumb-item::before {
color: var(--cc-ink-faint);
}
/* --- pozostale elementy powloki --------------------------------------------- */
.navbar-fixed {
background-color: var(--cc-surface);
border-color: var(--cc-border);
}
html[data-cc-theme="dark"] .navbar-fixed {
background-color: var(--cc-surface) !important; /* nadpisuje windu_dark.css .navbar-fixed{background-color:#0a0a0e!important} */
border-color: var(--cc-border) !important; /* jw. */
}
html[data-cc-theme="dark"] .navbar-fixed.scrolled {
background-color: rgba(17, 26, 20, .72) !important; /* nadpisuje windu_dark.css .navbar-fixed.scrolled{background-color:rgba(10,10,14,0.6)!important} */
}
/* --- przelacznik trybu ciemnego w naglowku ---------------------------------- */
/* header.html.twig bundla daje tu z JEDNA, stala ikona
tio-sidelight-information (lampka boczna) — ten sam glif w jasnym i w ciemnym,
wiec przycisk nie mowi, w ktorym trybie jestes ani co zrobi klikniecie.
Szablonu bundla nie ruszamy, ale ikona jest glifem z fontu The-Icon-of,
a nie obrazkiem, wiec sam znak podmieniamy przez content na ::before.
Kody z vendor/jcd/windu/AdminBundle/public/assets/vendor/icon-set/style.css.
Dlaczego to NIE jest kruche: regula bundla .tio-sidelight-information:before
ma wage 0,1,0 i nie stawia !important, my celujemy z wnetrza
.nav-item-dark-mode (0,2,0) i wchodzimy pozniej w kolejce. Font jest ten sam,
wiec nie dokladamy zadnego zasobu. Gdyby bundel kiedys zmienil klase ikony
w naglowku, nasza regula po prostu przestanie sie dopinac i przycisk wroci
do wygladu z bundla — cicha degradacja, nie polamany uklad.
Pokazujemy stan BIEZACY, nie docelowy: slonce = jestes w jasnym,
ksiezyc = jestes w ciemnym. Reszta ikon w tym pasku (konto, powiadomienia)
tez opisuje stan, wiec jedna ikona "co sie stanie po kliknieciu" bylaby
w tym miejscu wyjatkiem, ktorego nikt sie nie spodziewa. */
.nav-item-dark-mode .tio-sidelight-information::before {
content: "\eb57"; /* tio-brightness-2 — slonce */
}
html[data-cc-theme="dark"] .nav-item-dark-mode .tio-sidelight-information::before {
content: "\ec23"; /* tio-moon — ksiezyc */
}
/* Drugi sygnal obok glifu: w ciemnym przycisk wyglada na wcisniety, zeby stan
dalo sie odczytac takze bez rozpoznawania rysunku ikony. Barwy te same, co ma
.btn-white w stanie wlaczonym, wiec nie wprowadzamy nowego jezyka kolorow.
Kontrast: --cc-brand-300 #a3c98f na tle przycisku (#202f20 po zmieszaniu
--cc-brand-050 z --cc-surface) = 7.6:1, ramka wzgledem paska = 9.6:1. */
html[data-cc-theme="dark"] .nav-item-dark-mode .btn {
color: var(--cc-brand-300);
background-color: var(--cc-brand-050);
border-color: var(--cc-brand-300);
}
/* Bez tej reguly hover przegralby z html[data-cc-theme="dark"] .btn-white:hover
z sekcji 4 — ta ma te sama wage, ale stoi wczesniej, wiec wygralaby regula
powyzej i przycisk nie reagowalby na kursor. */
html[data-cc-theme="dark"] .nav-item-dark-mode .btn:hover,
html[data-cc-theme="dark"] .nav-item-dark-mode .btn:focus {
color: var(--cc-cta);
background-color: rgba(255, 255, 255, .11);
border-color: var(--cc-brand-300);
}
/* W jasnym celowo NIE ma tu zadnej reguly: przycisk zostaje zwyklym .btn-white,
takim samym jak sasiedni "hamburger", i pod kursorem dostaje ten sam zielony
akcent z sekcji 4. Dopisanie tu koloru zablokowaloby ten hover, bo obie reguly
maja wage 0,2,0, a ta stalaby pozniej. Slonce w glifie wystarczy za komunikat. */
/* --- pozostale elementy powloki, ciag dalszy -------------------------------- */
.dropdown-menu {
background-color: var(--cc-surface);
border: 1px solid var(--cc-border) !important; /* nadpisuje windu_dark.css .dropdown-menu{border:1px solid rgba(255,255,255,0.05)!important} */
border-radius: var(--cc-radius-lg) !important; /* nadpisuje windu.css .dropdown-menu{border-radius:10px!important} */
box-shadow: var(--cc-shadow);
color: var(--cc-ink);
}
.dropdown-item {
color: var(--cc-ink-soft);
border-radius: var(--cc-radius);
}
.dropdown-item:hover,
.dropdown-item:focus {
background-color: var(--cc-brand-050);
color: var(--cc-brand);
}
html[data-cc-theme="dark"] .dropdown-item:hover,
html[data-cc-theme="dark"] .dropdown-item:focus {
color: var(--cc-brand-300);
}
.nav-segment {
background-color: var(--cc-surface-2) !important; /* nadpisuje windu_dark.css .nav-segment{background-color:rgba(255,255,255,0.05)!important} */
}
.nav-segment .nav-link.active {
background-color: var(--cc-surface) !important; /* nadpisuje windu_dark.css .nav-segment .nav-link.active{background-color:rgba(255,255,255,0.1)!important} */
color: var(--cc-brand) !important; /* jw. — windu_dark.css ustawia color:white!important */
}
/* --- komunikaty -------------------------------------------------------------
Tu siedzi wymaganie M-08: odrzucony filtr (activity/_table), przyciety
dziennik (config_change_log/_table), powtarzajace sie nazwy statusow
(status/index), ostrzezenie przed nieodwracalnym laczeniem (status/merge)
oraz podglad drabinki w formularzu kolejki, ktory sklada nazwe klasy
w JavaScripcie.
Rodzina .alert-soft-* nie miala w tym pliku ZADNEJ reguly i zostawala na
barwach Front: .alert-soft-warning to #f5ca99 na rgba(245,202,153,.1),
czyli 1.5:1 — komunikat byl fizycznie nie do przeczytania. Nie bylo tez
reguly bazowej .alert{color:...}, wiec nie ratowalo tego dziedziczenie.
Uklad jest ten sam dla obu rodzin (pelnej i -soft), bo w szablonach wystepuja
wymiennie: tlo tokenem -soft, obrys tokenem -line, tekst tokenem statusu.
Wartosci dla obu motywow sa wypisane przy tokenach w sekcji 1.
Zadna z tych regul nie potrzebuje !important: theme.min.css definiuje
.alert-* i .alert-soft-* bez niego, a windu_dark.css rusza w .alert
wylacznie border-radius. Wystarcza kolejnosc ladowania. */
.alert-success,
.alert-soft-success { background-color: var(--cc-ok-soft); border-color: var(--cc-ok-line); color: var(--cc-ok); }
.alert-warning,
.alert-soft-warning { background-color: var(--cc-warn-soft); border-color: var(--cc-warn-line); color: var(--cc-warn); }
.alert-danger,
.alert-soft-danger { background-color: var(--cc-err-soft); border-color: var(--cc-err-line); color: var(--cc-err); }
.alert-info,
.alert-soft-info { background-color: var(--cc-info-soft); border-color: var(--cc-info-line); color: var(--cc-info); }
.alert-primary,
.alert-soft-primary { background-color: var(--cc-brand-soft); border-color: var(--cc-brand-line); color: var(--cc-brand); }
/* Trzy warianty neutralne motywu prowadzily do tego samego bledu z przeciwnych
stron: .alert-soft-light to biel na bieli (#f9fafc na rgba(249,250,252,.1)),
.alert-soft-dark i .alert-soft-secondary to granat/szarosc, ktore w trybie
ciemnym znikaly w tle. Wszystkie trzy schodza na jeden neutralny zeton —
tak samo, jak .badge-soft-light w sekcji plakietek. */
.alert-secondary,
.alert-soft-secondary,
.alert-soft-light,
.alert-soft-dark { background-color: var(--cc-neutral-soft); border-color: var(--cc-neutral-line); color: var(--cc-ink-soft); }
/* Naglowek komunikatu schodzi na --cc-ink, a nie na kolor statusu: to on niesie
zdanie, ktore ma byc przeczytane najpierw (status/merge: "Decyzji nie da sie
cofnac z panelu"). Na tlach -soft daje 13.62-14.28:1 w jasnym i 11.49-12.53:1
w ciemnym, wobec 4.81-5.20:1 samego tokenu statusu.
Regula jest tu jawnie, bo dotad wychodzilo to przypadkiem: theme.min.css
daje .alert-heading{color:inherit}, ale nasza wlasna .h5/h5{color:var(--cc-ink)}
z sekcji 2 ma te sama wage i lezy dalej w pliku, wiec wygrywala. Po dopisaniu
.alert-soft-* powyzej ta zaleznosc od kolejnosci przestala byc bezpieczna. */
.alert .alert-heading {
color: var(--cc-ink);
}
/* Link w komunikacie. Dwa powody, oba zmierzone:
(1) theme.min.css trzyma tu kolor Front (.alert-soft-warning .alert-link
{color:#f5ca99}) i ma wieksza wage niz nasza regula na samym .alert-*;
(2) globalne a{color:var(--cc-brand-500)} w ciemnym daje na tlach -soft
4.36-4.75:1, czyli miejscami ponizej progu — jedyny taki link w panelu
("Przejdz do laczenia statusow" w status/index) siedzi wlasnie na
--cc-warn-soft, gdzie wychodzilo 4.38:1.
color:inherit rozwiazuje oba naraz: link ma dokladnie ten kontrast, co reszta
komunikatu, wiec nie ma osobnej liczby do pilnowania. Podkreslenie jest
konieczne, bo bez roznicy koloru zostalby bez zadnego wyroznika (WCAG 1.4.1). */
.alert a:not(.btn):not(.close),
.alert .alert-link {
color: inherit;
text-decoration: underline;
}
/* Reakcja na kursor idzie w GORE kontrastu, a nie w dol. Naturalne w tym miejscu
opacity/przygaszenie zabraloby wlasnie te rezerwe, ktorej tu nie ma:
--cc-err na --cc-err-soft to 4.81:1, a przy opacity .8 spadloby do 3.6:1.
--cc-ink na tlach -soft daje 13.62-14.28:1 w jasnym i 11.49-12.53:1 w ciemnym. */
/* :not(.btn):not(.close) wyzej i tutaj — bez tego regula (waga 0,1,1) bilaby
.btn-primary (0,1,0) i przycisk w komunikacie stracilby swoj kolor,
a krzyzyk zamkniecia dostalby podkreslenie. */
.alert a:not(.btn):not(.close):hover,
.alert a:not(.btn):not(.close):focus,
.alert .alert-link:hover,
.alert .alert-link:focus {
color: var(--cc-ink);
text-decoration: underline;
}
/* Utility tla i ramki uzyte w szablonach poza rodzina .alert:
inbound_route/_table.html.twig sklada karte ostrzegawcza jako
`card border-warning` + `card-header bg-soft-warning`, a status/index
plakietke jako `badge bg-light text-dark`.
.bg-soft-warning musi lezec PO .card-header z sekcji 5 (ta sama waga 0,1,0),
inaczej naglowek karty zostalby na --cc-surface-2 i ostrzezenie nie mialoby
swojego koloru. */
.bg-light {
background-color: var(--cc-surface-2) !important; /* nadpisuje theme.min.css .bg-light{background-color:#f9fafc!important} — --cc-ink na tym tle: 14.63:1 jasny, 13.98:1 ciemny */
}
.bg-soft-warning {
background-color: var(--cc-warn-soft); /* theme.min.css daje rgba(245,202,153,.1) bez !important — --cc-warn na tym tle 4.85:1 jasny / 7.10:1 ciemny, --cc-ink 14.28:1 / 11.55:1 */
}
.border-warning {
border-color: var(--cc-warn) !important; /* nadpisuje theme.min.css .border-warning{border-color:#f5ca99!important} — obrys karty wobec --cc-bg: 5.23:1 jasny, 10.05:1 ciemny, przy progu 3:1 dla elementow nietekstowych */
}
.progress {
background-color: var(--cc-surface-2);
}
.progress-bar {
background-color: var(--cc-brand);
}
.content_preloader {
background-color: rgba(246, 248, 246, .6);
}
html[data-cc-theme="dark"] .content_preloader {
background-color: rgba(11, 16, 13, .6);
}
/* Nakladka ladowania modala ma ZAKRYC stara tresc, a nie ja przymglic — inaczej
przy podmianie formularza przez loadModal() widac przez nia poprzedni ekran.
W jasnym windu.css daje tu #fff bez !important, wiec wystarcza sama kolejnosc. */
#modal_content_preloader {
background-color: var(--cc-surface);
}
/* W ciemnym regula powyzej byla martwa: windu_dark.css klad tu polprzezroczysta
plame rgba(10,10,14,.5) z !important, wiec nakladka miala inny odcien niz
modal (#111a14) i przez cale ladowanie przebijala stara tresc.
Odwzajemniamy !important i tylko w tym trybie — patrz uwaga przy .modal-header
.close wyzej: windu_dark.css jedzie tym samym ciasteczkiem co data-cc-theme. */
html[data-cc-theme="dark"] #modal_content_preloader {
background-color: var(--cc-surface) !important; /* nadpisuje windu_dark.css #modal_content_preloader{background-color:rgba(10,10,14,0.5)!important} */
}
.spinner-border {
color: var(--cc-brand);
}
html[data-cc-theme="dark"] .spinner-border {
color: var(--cc-brand-300);
}
/* --- pasek przewijania ------------------------------------------------------ */
/* scrollbar-color jest dziedziczony, wiec wystarczy na html.
Menu boczne ma wlasna regule w windu.css (display:none) i tam jej nie ruszamy. */
html {
scrollbar-width: thin;
scrollbar-color: var(--cc-border) transparent;
}
::-webkit-scrollbar {
width: .5rem;
height: .5rem;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: var(--cc-border);
border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--cc-brand-300);
}
/* =============================================================================
8. EKRAN LOGOWANIA
-----------------------------------------------------------------------------
Jedyny ekran, ktory ktos widzi zanim zaufa systemowi — ma byc markowy
bezwarunkowo, niezaleznie od ustawienia trybu ciemnego.
Co ten ekran naprawde laduje (sprostowanie wczesniejszego komentarza, ktory
twierdzil, ze nadpisany layout nie stawia data-cc-theme — stawia):
nadpisane auth.html.twig i auth/layout.html.twig USTAWIAJA na
data-cc-theme z ciasteczka dark_mode, ale NIE dokladaja windu_dark.css.
Wniosek praktyczny: caly tryb ciemny logowania stoi wylacznie na tokenach
z tego pliku — nie ma tu drugiego arkusza, ktory by cokolwiek poprawil,
ale tez nie ma czego nadpisywac !importantem.
Logo wstawia szablon; tu jest tylko miejsce i rozmiar.
============================================================================= */
body.auth {
/* Literal, nie var(--cc-brand). Przy wlaczonym trybie ciemnym token schodzi
na jasna zielen #7fb069, a logo na tym ekranie jest BIALE (logo_big_header
= yerbador-logo-white.svg) — bialy znak na jasnej zieleni to 1.8:1.
Gradient nizej zwykle to przykrywa, ale tlo spod niego widac wszedzie tam,
gdzie obrazek nie powstaje: wydruk bez grafiki tla, tryb oszczedzania
danych, blad renderu. Wlasciciel projektu rozstrzygnal wprost: LOGO BIALE
NA CIEMNOZIELONYM TLE w obu motywach, wiec kolor jest tu przybity na stale. */
background-color: #09371a;
background-image:
radial-gradient(1100px 620px at 12% -10%, rgba(196, 253, 2, .16), transparent 62%),
radial-gradient(900px 560px at 92% 8%, rgba(92, 144, 77, .30), transparent 60%),
linear-gradient(168deg, #0e4a28 0%, #09371a 48%, #061f10 100%);
background-attachment: fixed;
color: rgba(255, 255, 255, .78);
padding-top: 8vh;
min-height: 100vh;
}
body.auth .windu-admin-logo-big {
width: 15rem;
max-width: 70vw;
height: auto;
}
body.auth .windu-admin-logo {
width: 9rem;
max-width: 60vw;
height: auto;
}
/* Karta logowania jest biala takze wtedy, gdy ktos ma wlaczony tryb ciemny:
na tym jednym ekranie liczy sie czytelnosc pol, nie zgodnosc z preferencja.
Zamiast dopisywac kolor do kazdego elementu w srodku, przywracamy tu jasny
zestaw tokenow — wlasna deklaracja na elemencie bije wartosc odziedziczona
z html, wiec wszystko, co siedzi w karcie i siega po var(--cc-...), samo
wraca na jasne barwy. Wartosci sa co do jednej te same co w :root. */
body.auth .card {
--cc-ink: #16221b;
--cc-ink-soft: #465a4e;
--cc-ink-faint: #63756a;
--cc-surface: #ffffff;
--cc-surface-2: #eef3ef;
--cc-border: #d7e2da;
--cc-border-soft: #e7eee9;
--cc-border-input: #748d7d; /* jw. 3.59:1 — bez tego nadpisania pole logowania
w trybie ciemnym dziedziczyloby --cc-border-input z html[data-cc-theme="dark"]
(#5c7765, kalibrowany pod ciemne --cc-surface), a ta karta jest zawsze biala */
--cc-brand: #09371a;
--cc-brand-500: #125c31;
--cc-brand-300: #5c904d;
--cc-brand-050: #e2ece6;
--cc-focus: rgba(18, 92, 49, .35);
background-color: var(--cc-surface);
color: var(--cc-ink);
border: 0;
border-radius: var(--cc-radius-lg);
box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .55);
}
body.auth .card-body {
padding: 2rem;
}
body.auth .card .h1,
body.auth .card h1,
body.auth .card h2,
body.auth .card h3,
body.auth .card label,
body.auth .card .input-label {
color: var(--cc-ink);
}
body.auth .card .form-control {
background-color: var(--cc-surface);
border-color: var(--cc-border-input);
color: var(--cc-ink);
}
body.auth .card .form-control:focus {
border-color: var(--cc-brand);
box-shadow: 0 0 0 .2rem var(--cc-focus);
}
body.auth .card .form-control::placeholder {
color: var(--cc-ink-faint);
}
/* Oko "pokaz haslo" siedzi w .input-group-append tuz przy polu. */
body.auth .card .input-group-text {
background-color: var(--cc-surface-2);
border-color: var(--cc-border);
color: var(--cc-ink-soft);
}
/* "Zaloguj" jest CTA — limonka, waga 800, pelna szerokosc. */
body.auth .card .btn-primary {
background-color: var(--cc-cta);
color: var(--cc-cta-ink);
border-color: transparent; /* jak w sekcji 4: ramka przezroczysta, nie zerowa */
font-weight: 800;
padding-top: .75rem;
padding-bottom: .75rem;
}
body.auth .card .btn-primary:hover {
background-color: var(--cc-cta-hover);
}
body.auth .card a {
color: var(--cc-brand-500);
}
body.auth .card a:hover {
color: var(--cc-brand);
}
/* Stopka pod karta siedzi na ciemnym tle, wiec idzie jasnym tekstem. */
body.auth .text-center,
body.auth main > .container > .row .text-center {
color: rgba(255, 255, 255, .62);
}
body.auth .text-center a {
color: var(--cc-cta);
}
body.auth .windu-admin-auth-bg {
background-image: none;
}
/* =============================================================================
9. RUCH
-----------------------------------------------------------------------------
Przejscia tylko na kolorze, ramce i cieniu — 120-200 ms. Nic, co przesuwa
uklad: konsultant klika w tabeli po 400 razy dziennie i kazde drgniecie
wiersza to ryzyko klikniecia nie w to pole.
Jedyny transform to 1 px podniesienia przycisku glownego — nie wplywa na
przeplyw dokumentu, bo dzieje sie na warstwie kompozycji.
============================================================================= */
.btn,
.form-control,
.custom-select,
.card,
.badge,
.page-link,
.dropdown-item,
.navbar-vertical .nav-link,
.navbar-vertical .nav-icon,
.select2-container--bootstrap-5 .select2-selection,
.toggle-switch-label,
.custom-control-label::before {
transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
}
.btn-primary {
transition: background-color 150ms ease, color 150ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.table tbody tr {
transition: background-color 120ms ease;
}
@media (prefers-reduced-motion: reduce) {
/* Bez !important: przejscia po drugiej stronie sa deklarowane zwyczajnie
(windu.css .navbar-fixed{transition:all .3s ease}, theme.min.css
.toggle-switch-label{transition:.3s}), a ten plik stoi w kolejce ostatni. */
.btn,
.btn-primary,
.form-control,
.custom-select,
.card,
.badge,
.page-link,
.dropdown-item,
.navbar-vertical .nav-link,
.navbar-vertical .nav-icon,
.select2-container--bootstrap-5 .select2-selection,
.toggle-switch-label,
.toggle-switch-indicator,
.custom-control-label::before,
.table tbody tr,
.navbar-fixed,
.windu-notif {
transition: none;
animation: none;
}
.btn-primary:hover {
transform: none;
}
/* Modal to jedyne miejsce, gdzie windu.css wymusza ruch przez !important —
tylko tutaj odpowiadamy tym samym. */
.modal.show .modal-dialog {
animation: none !important; /* nadpisuje windu.css .modal.show .modal-dialog{animation:modal-show 0.3s ease-out forwards!important} */
}
.modal-backdrop.fade {
transition: none !important; /* nadpisuje windu.css .modal-backdrop.fade{transition:opacity 0.15s linear!important} */
}
}