/* ========================================================================= Motywy graficzne (branding). Każdy motyw zakresowany atrybutem na : [data-theme="elita"] / [data-theme="jasny"] / [data-theme="ciemny"]. Akcent przez zmienną --brand-accent (nadpisywalną inline z panelu admina). Ładowane PO bootstrap.css i site.css (AppAsset), więc nadpisują Bootstrap 3. Domyślny wygląd wg projektu UI „ELITA Szkoła Tańca": jasne tło (#f4f6fb), głęboko granatowy panel boczny (#0b1220), niebieski akcent (#2563EB), białe karty 12px, miękkie pigułki statusów. Admin może nadpisać akcent HEX. ========================================================================= */ :root { --brand-accent: #2563eb; } /* ========================================================================= TYPOGRAFIA I HIERARCHIA (wspólne dla wszystkich motywów) - krój systemowy interfejsu (Segoe UI / San Francisco / Roboto) — natywnie hintowany, ostry, - czytelna hierarchia: cięższe nagłówki, mniejsze WERSALIKOWE etykiety kolumn w stonowanej szarości, dane w neutralnej ciemnej szarości (#1f2937), informacje drugorzędne w jaśniejszym odcieniu. Kolory sterowane zmiennymi — nadpisywane dla motywu ciemnego (niżej). ========================================================================= */ :root { --text-data: #1f2937; /* dane w tabeli / treść — neutralna ciemna szarość zamiast czystej czerni */ --text-secondary: #6b7280; /* informacje drugorzędne (np. „sms", „sms saldo") */ --text-label: #6b7280; /* etykiety kolumn — stonowana szarość */ } /* Wartości dla motywu ciemnego (czytelność na ciemnym tle). Musi być PO :root. */ [data-theme="ciemny"] { --text-data: #d6d8db; --text-secondary: #9aa0a7; --text-label: #9aa0a7; } body { /* Krój SYSTEMOWY interfejsu: Segoe UI (Windows), San Francisco (macOS), Roboto (Android). Wcześniej był tu webfont Inter — na Windowsie przy małych rozmiarach (1x DPI) renderował się słabo: pionowe kreski za cienkie, ukośne „schodkowały", litery nierówne (np. „k"). Na ekranach wysokiej gęstości (telefon) wyglądał świetnie — stąd różnica desktop vs mobile. Krój systemowy jest natywnie hintowany i ostry (ClearType na Windows) na każdym ekranie. */ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Hierarchia nagłówków — tytuł strony większy i cięższy. */ h1, .h1 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; } h2, .h2 { font-weight: 700; letter-spacing: -0.015em; } h3, .h3 { font-weight: 700; letter-spacing: -0.01em; } h4, .h4, h5, .h5 { font-weight: 600; } /* Etykiety kolumn tabel: mniejsze, WERSALIKI, lekki odstęp między literami, stonowana szarość. */ .table > thead > tr > th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-label); } /* Linki sortowania w nagłówku — też stonowane (domyślnie miałyby kolor akcentu); akcent dopiero na hover. */ .table > thead > tr > th > a, .table > thead > tr > th > a:focus { color: var(--text-label); font-weight: 600; text-decoration: none; filter: none; } .table > thead > tr > th > a:hover { color: var(--brand-accent); filter: none; } /* Wiersz filtrów GridView (inputy) — bez wersalików/spacingu, normalna czcionka danych. */ .table > thead > tr.filters > th { text-transform: none; letter-spacing: normal; } .table > thead > tr > th .form-control, .table > thead > tr > th input, .table > thead > tr > th select { text-transform: none; letter-spacing: normal; font-weight: 400; font-size: 13px; color: var(--text-data); } /* Dane w tabeli — neutralna ciemna szarość. */ .table > tbody > tr > td { color: var(--text-data); } /* Informacje drugorzędne — jaśniejszy odcień. */ .text-muted, small, .small, .help-block, .grid-view .summary { color: var(--text-secondary) !important; } /* Responsywne etykiety pozycji menu (.nav-label-md): chowane TYLKO w trybie górnego paska 768–991px (ciasno — zostaje sama ikona). Od 992px menu jest SIDEBAREM (sekcja niżej) — napisy zawsze widoczne. <768px menu mobilne — napisy widoczne. */ @media (min-width: 768px) and (max-width: 991px) { .nav-label-md { display: none !important; } } /* ---- Wspólny akcent (działa we wszystkich motywach przez zmienną) ---- */ a { color: var(--brand-accent); } a:hover, a:focus { color: var(--brand-accent); filter: brightness(1.6); } .btn-primary { background-color: var(--brand-accent); border-color: var(--brand-accent); color: #fff; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { background-color: var(--brand-accent); border-color: var(--brand-accent); color: #fff; filter: brightness(1.25); } .label-primary { background-color: var(--brand-accent); } .badge { background-color: var(--brand-accent); } /* (Zakładki .nav-tabs: styl podkreślenia zdefiniowany w sekcji „JĘZYK WIZUALNY" niżej.) */ .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > a:focus { background-color: var(--brand-accent); border-color: var(--brand-accent); } .progress-bar { background-color: var(--brand-accent); } /* ========================================================================= ELITA (domyślny): wg projektu UI — jasne tło, granatowy panel nawigacji, niebieski akcent; aktywna pozycja menu = pełna niebieska „pigułka". ========================================================================= */ [data-theme="elita"] body { background-color: #f4f6fb; color: #1a1a1a; } [data-theme="elita"] .navbar-inverse { background-color: #0b1220; /* głęboki granat jak w projekcie */ border-color: #0b1220; } [data-theme="elita"] .navbar-inverse .navbar-brand { color: #ffffff; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; } [data-theme="elita"] .navbar-inverse .navbar-nav > li > a { color: #cdd4e0; letter-spacing: 0.2px; } /* Hover/otwarte — subtelne rozjaśnienie… */ [data-theme="elita"] .navbar-inverse .navbar-nav > li > a:hover, [data-theme="elita"] .navbar-inverse .navbar-nav > li > a:focus, [data-theme="elita"] .navbar-inverse .navbar-nav > .open > a, [data-theme="elita"] .navbar-inverse .navbar-nav > .open > a:hover, [data-theme="elita"] .navbar-inverse .navbar-nav > .open > a:focus { color: #ffffff; background-color: rgba(255, 255, 255, 0.08); } /* …a AKTYWNA pozycja — pełny kolor akcentu (niebieska pigułka z projektu). */ [data-theme="elita"] .navbar-inverse .navbar-nav > .active > a, [data-theme="elita"] .navbar-inverse .navbar-nav > .active > a:hover, [data-theme="elita"] .navbar-inverse .navbar-nav > .active > a:focus { color: #ffffff; background-color: var(--brand-accent); } [data-theme="elita"] h1, [data-theme="elita"] h2, [data-theme="elita"] h3 { color: #101828; } [data-theme="elita"] .panel-primary > .panel-heading { background-color: var(--brand-accent); border-color: var(--brand-accent); color: #fff; } [data-theme="elita"] .panel-primary { border-color: var(--brand-accent); } /* ========================================================================= JASNY: jasne, minimalistyczne tło; navbar jasny; stonowany akcent (niebieski) (gdy admin nie narzucił własnego --brand-accent inline). ========================================================================= */ [data-theme="jasny"] { --brand-accent: #2c7be5; } [data-theme="jasny"] body { background-color: #f8fafc; color: #2a2f36; } [data-theme="jasny"] .navbar-inverse { background-color: #ffffff; border-color: #e3e6ea; box-shadow: 0 1px 3px rgba(0,0,0,0.06); } [data-theme="jasny"] .navbar-inverse .navbar-brand { color: #1f2329; font-weight: 700; } [data-theme="jasny"] .navbar-inverse .navbar-nav > li > a { color: #3a4049; } [data-theme="jasny"] .navbar-inverse .navbar-nav > .active > a, [data-theme="jasny"] .navbar-inverse .navbar-nav > .active > a:hover, [data-theme="jasny"] .navbar-inverse .navbar-nav > li > a:hover, [data-theme="jasny"] .navbar-inverse .navbar-nav > li > a:focus { color: #ffffff; background-color: var(--brand-accent); } [data-theme="jasny"] .navbar-inverse .navbar-toggle .icon-bar { background-color: #3a4049; } [data-theme="jasny"] .panel, [data-theme="jasny"] .well { background-color: #ffffff; } /* ========================================================================= CIEMNY: pełny dark mode. Akcent monochromatyczny — jasny (na ciemnym tle). ========================================================================= */ [data-theme="ciemny"] { --brand-accent: #f0f0f0; } [data-theme="ciemny"] body { background-color: #1b1d21; color: #d6d8db; } [data-theme="ciemny"] a { color: #ffffff; } [data-theme="ciemny"] a:hover, [data-theme="ciemny"] a:focus { color: #ffffff; filter: none; text-decoration: underline; } [data-theme="ciemny"] h1, [data-theme="ciemny"] h2, [data-theme="ciemny"] h3, [data-theme="ciemny"] h4, [data-theme="ciemny"] h5 { color: #eceef0; } [data-theme="ciemny"] .text-muted { color: #9aa0a7 !important; } /* Na ciemnym akcent jest jasny — przyciski/labelki/badge muszą mieć ciemny tekst. */ [data-theme="ciemny"] .btn-primary { color: #111; } [data-theme="ciemny"] .btn-primary:hover, [data-theme="ciemny"] .btn-primary:focus, [data-theme="ciemny"] .btn-primary:active { color: #111; } [data-theme="ciemny"] .label-primary, [data-theme="ciemny"] .badge { color: #111; } [data-theme="ciemny"] .navbar-inverse { background-color: #111317; border-color: #000; } [data-theme="ciemny"] .navbar-inverse .navbar-brand { color: #fff; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; } [data-theme="ciemny"] .navbar-inverse .navbar-nav > li > a { color: #cfd2d6; } /* Navbar bardzo ciemny — hover jako subtelna biel (akcent jest jasny, dałby biel-na-bieli). */ [data-theme="ciemny"] .navbar-inverse .navbar-nav > .active > a, [data-theme="ciemny"] .navbar-inverse .navbar-nav > li > a:hover, [data-theme="ciemny"] .navbar-inverse .navbar-nav > li > a:focus, [data-theme="ciemny"] .navbar-inverse .navbar-nav > .open > a { color: #fff; background-color: rgba(255,255,255,0.16); } [data-theme="ciemny"] .panel, [data-theme="ciemny"] .well, [data-theme="ciemny"] .modal-content, [data-theme="ciemny"] .dropdown-menu { background-color: #2a2d33; border-color: #3a3e45; color: #d6d8db; } [data-theme="ciemny"] .dropdown-menu > li > a { color: #d6d8db; } [data-theme="ciemny"] .dropdown-menu > li > a:hover { background-color: #34383f; color: #fff; } [data-theme="ciemny"] .panel-default > .panel-heading { background-color: #23262b; color: #e6e8ea; border-color: #3a3e45; } [data-theme="ciemny"] .panel { border-color: #3a3e45; } [data-theme="ciemny"] .table { color: #d6d8db; } [data-theme="ciemny"] .table > thead > tr > th, [data-theme="ciemny"] .table > tbody > tr > td, [data-theme="ciemny"] .table > tbody > tr > th, [data-theme="ciemny"] .table-bordered, [data-theme="ciemny"] .table-bordered > thead > tr > th, [data-theme="ciemny"] .table-bordered > tbody > tr > td { border-color: #3a3e45; } [data-theme="ciemny"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: #23262b; } [data-theme="ciemny"] .table-hover > tbody > tr:hover { background-color: #30343b; } [data-theme="ciemny"] .form-control { background-color: #23262b; color: #e6e8ea; border-color: #3a3e45; } [data-theme="ciemny"] .form-control::placeholder { color: #8b9098; } [data-theme="ciemny"] .input-group-addon { background-color: #2f333a; color: #d6d8db; border-color: #3a3e45; } [data-theme="ciemny"] .btn-default { background-color: #2f333a; color: #e6e8ea; border-color: #454a52; } [data-theme="ciemny"] .btn-default:hover { background-color: #3a3f47; color: #fff; } [data-theme="ciemny"] .breadcrumb { background-color: #23262b; } [data-theme="ciemny"] .breadcrumb > .active { color: #aab0b7; } [data-theme="ciemny"] .footer { background-color: #111317; border-color: #000; color: #cfd2d6; } [data-theme="ciemny"] hr { border-color: #3a3e45; } [data-theme="ciemny"] .alert-info { background-color: #1d2b36; color: #cfe8f5; border-color: #2a4a5e; } [data-theme="ciemny"] .alert-warning { background-color: #3a3320; color: #f3e2b3; border-color: #5e5326; } [data-theme="ciemny"] .alert-success { background-color: #1e3424; color: #c7e9d1; border-color: #2c5236; } [data-theme="ciemny"] .alert-danger { background-color: #3a2222; color: #f3c7c7; border-color: #5e2c2c; } [data-theme="ciemny"] .well { background-color: #23262b; } /* ========================================================================= KARTY + KONTRAST TŁA (jasne motywy): tło bardzo jasnoszare (#f8fafc), a panele/well/tabele białe — typowy zabieg nowoczesnych paneli. ========================================================================= */ [data-theme="elita"] .panel, [data-theme="jasny"] .panel, [data-theme="elita"] .well, [data-theme="jasny"] .well { background-color: #ffffff; border: 1px solid #e6eaf2; border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); } [data-theme="elita"] .grid-view, [data-theme="jasny"] .grid-view { background-color: #ffffff; border: 1px solid #e6eaf2; border-radius: 12px; padding: 10px 14px 14px; box-shadow: 0 1px 3px rgba(15, 23, 42, .05); } [data-theme="elita"] .table, [data-theme="jasny"] .table { background-color: transparent; } /* ========================================================================= SALDO: kolorujemy TYLKO wartość (pill/badge), nie całe wiersze. ========================================================================= */ .saldo-pill { display: inline-block; padding: 1px 9px; border-radius: 999px; font-weight: 600; font-size: 12px; line-height: 1.7; white-space: nowrap; } .saldo-pill--neg { background: #fee2e2; color: #b91c1c; } /* ujemne — czerwone */ .saldo-pill--pos { background: #dcfce7; color: #15803d; } /* dodatnie — zielone */ .saldo-pill--zero { background: #f1f5f9; color: #64748b; } /* zero — szare */ [data-theme="ciemny"] .saldo-pill--neg { background: #3a2222; color: #f3c7c7; } [data-theme="ciemny"] .saldo-pill--pos { background: #1e3424; color: #c7e9d1; } [data-theme="ciemny"] .saldo-pill--zero { background: #2a2d33; color: #aab0b7; } /* Podsumowanie salda w nagłówku (link/span zamiast pełnego czerwonego przycisku). */ .saldo-summary { font-size: 14px; font-weight: 600; margin-left: 12px; } .saldo-summary, .saldo-summary:hover, .saldo-summary:focus { text-decoration: none; } /* ========================================================================= KONIEC z czerwonym TŁEM całych wierszy (ujemne saldo / zaległości). Wiersz zostaje czysty (białe tło), a sygnałem jest subtelny czerwony pasek z lewej + kolorowany pill z wartością salda. Dotyczy wszystkich tabel. ========================================================================= */ .table > tbody > tr.danger > td, .table > tbody > tr.danger > th, .table-hover > tbody > tr.danger:hover > td, .table-hover > tbody > tr.danger:hover > th { background-color: transparent; } .table > tbody > tr.danger > td:first-child { box-shadow: inset 3px 0 0 #ef4444; } [data-theme="ciemny"] .table > tbody > tr.danger > td:first-child { box-shadow: inset 3px 0 0 #ef6a6a; } /* ========================================================================= UKŁAD I PRZESTRZEŃ: subtelne separatory zamiast pełnych ramek + delikatne podświetlenie wiersza na hover (jasne motywy). Motyw ciemny ma własne ramki. ========================================================================= */ [data-theme="elita"] .table-bordered, [data-theme="jasny"] .table-bordered, [data-theme="elita"] .table-bordered > thead > tr > th, [data-theme="elita"] .table-bordered > thead > tr > td, [data-theme="elita"] .table-bordered > tbody > tr > th, [data-theme="elita"] .table-bordered > tbody > tr > td, [data-theme="jasny"] .table-bordered > thead > tr > th, [data-theme="jasny"] .table-bordered > thead > tr > td, [data-theme="jasny"] .table-bordered > tbody > tr > th, [data-theme="jasny"] .table-bordered > tbody > tr > td { border: 0; } [data-theme="elita"] .table > thead > tr > th, [data-theme="jasny"] .table > thead > tr > th { border-bottom: 2px solid #eef2f7; } [data-theme="elita"] .table > tbody > tr > td, [data-theme="jasny"] .table > tbody > tr > td { border-top: 1px solid #f1f5f9; } [data-theme="elita"] .table-striped > tbody > tr:nth-of-type(odd), [data-theme="jasny"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: #fcfdfe; } [data-theme="elita"] .table-hover > tbody > tr:hover > td, [data-theme="jasny"] .table-hover > tbody > tr:hover > td { background-color: #f1f6fc; } /* ========================================================================= PRZYCISKI: zaokrąglone rogi (6–8px), wyraźny hover, spójne zachowanie. ========================================================================= */ .btn { border-radius: 8px; transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease; } .btn-lg { border-radius: 10px; } .btn:hover { box-shadow: 0 1px 3px rgba(15, 23, 42, .12); } .btn:active, .btn.active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, .10); } /* W grupach/segmentach i input-group nie dokładamy cienia (Bootstrap zarządza rogami). */ .btn-group > .btn:hover, .input-group-btn > .btn:hover { box-shadow: none; } /* ========================================================================= „Karta" paska narzędzi nad tabelą (liczba rekordów + filtry + akcje). ========================================================================= */ .toolbar-card { margin-bottom: 16px; padding: 12px 16px; border-radius: 12px; } .toolbar-card > .btn, .toolbar-card .toolbar-count { vertical-align: middle; } .toolbar-card .toolbar-count { margin-left: 10px; font-size: 13px; } [data-theme="elita"] .toolbar-card, [data-theme="jasny"] .toolbar-card { background-color: #ffffff; border: 1px solid #e6eaf2; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); } [data-theme="ciemny"] .toolbar-card { background-color: #2a2d33; border: 1px solid #3a3e45; } /* ========================================================================= JĘZYK WIZUALNY (wg projektu UI „ELITA"): karty 12px, miękkie pigułki statusów, zaokrąglone przyciski i pola z niebieskim pierścieniem fokusu, zakładki podkreślane, dyskretne breadcrumbs, spokojne banery. ========================================================================= */ /* Nagłówek strony — nieco mniejszy, jak „Witaj, Anna!" w projekcie. */ h1, .h1 { font-size: 28px; margin-top: 10px; } /* Breadcrumbs: dyskretne, bez szarego tła. */ .breadcrumb { background: transparent; padding: 0; margin-bottom: 10px; font-size: 12.5px; } /* Pozostałe kontenery — spójne zaokrąglenia. */ .panel { border-radius: 12px; } .panel-heading { border-radius: 11px 11px 0 0; } .modal-content { border-radius: 14px; } /* btn-default jak w projekcie („Eksportuj"/„Filtruj"): biały, subtelna ramka. */ [data-theme="elita"] .btn-default, [data-theme="jasny"] .btn-default { background-color: #ffffff; border-color: #d8dfea; color: #344054; } [data-theme="elita"] .btn-default:hover, [data-theme="elita"] .btn-default:focus, [data-theme="elita"] .btn-default:active, [data-theme="jasny"] .btn-default:hover, [data-theme="jasny"] .btn-default:focus, [data-theme="jasny"] .btn-default:active { background-color: #f5f8fd; border-color: #c6d0e0; color: #1f2937; } /* Zielone przyciski akcji („Dodaj") przechodzą na kolor akcentu — projekt używa JEDNEGO niebieskiego koloru akcji. Semantyka danger (usuwanie) zostaje czerwona. */ [data-theme="elita"] .btn-success, [data-theme="jasny"] .btn-success { background-color: var(--brand-accent); border-color: var(--brand-accent); color: #fff; } [data-theme="elita"] .btn-success:hover, [data-theme="elita"] .btn-success:focus, [data-theme="elita"] .btn-success:active, [data-theme="elita"] .btn-success.active, [data-theme="jasny"] .btn-success:hover, [data-theme="jasny"] .btn-success:focus, [data-theme="jasny"] .btn-success:active, [data-theme="jasny"] .btn-success.active { background-color: var(--brand-accent); border-color: var(--brand-accent); color: #fff; filter: brightness(1.18); } /* Statusy jako miękkie pigułki (jak „Nieopłacone" / „Oczekujące" w projekcie). */ .label { border-radius: 999px; padding: .25em .8em; font-weight: 600; } [data-theme="elita"] .label-success, [data-theme="jasny"] .label-success { background: #e5f6ec; color: #177245; } [data-theme="elita"] .label-danger, [data-theme="jasny"] .label-danger { background: #fdeaea; color: #d04444; } [data-theme="elita"] .label-warning, [data-theme="jasny"] .label-warning { background: #fdf3e1; color: #b45309; } [data-theme="elita"] .label-info, [data-theme="jasny"] .label-info { background: #e8f0fe; color: #1d4ed8; } [data-theme="elita"] .label-default, [data-theme="jasny"] .label-default { background: #eef1f6; color: #5b6675; } /* Pola formularzy: zaokrąglone, spokojna ramka, pierścień fokusu w kolorze akcentu. */ [data-theme="elita"] .form-control, [data-theme="jasny"] .form-control { border-radius: 8px; border-color: #d8dfea; box-shadow: none; } [data-theme="elita"] .form-control:focus, [data-theme="jasny"] .form-control:focus { border-color: var(--brand-accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14); /* fallback */ box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 16%, transparent); /* nowoczesne przeglądarki */ outline: 0; } [data-theme="ciemny"] .form-control { border-radius: 8px; } /* W grupach input+addon Bootstrap sam skleja rogi — przywracamy tylko zewnętrzne. */ .input-group-addon:first-child { border-radius: 8px 0 0 8px; } .input-group-addon:last-child { border-radius: 0 8px 8px 0; } /* Zakładki: styl podkreślenia (jak „Do zapłaty / Historia wpłat / Faktury"). */ .nav-tabs { border-bottom: 1px solid #e6eaf2; } [data-theme="ciemny"] .nav-tabs { border-bottom-color: #3a3e45; } .nav-tabs > li > a { border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin-right: 4px; padding: 10px 14px; color: var(--text-secondary); font-weight: 600; background: transparent; } .nav-tabs > li > a:hover, .nav-tabs > li > a:focus { border: 0; border-bottom: 2px solid #cdd7e6; background: transparent; color: var(--text-data); } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { border: 0; border-bottom: 2px solid var(--brand-accent); background: transparent; color: var(--brand-accent); } /* Paginacja: pigułki. */ .pagination > li > a, .pagination > li > span { border-radius: 8px !important; margin: 0 2px; border-color: #e2e8f0; color: var(--text-data); } [data-theme="ciemny"] .pagination > li > a, [data-theme="ciemny"] .pagination > li > span { background: #2a2d33; border-color: #3a3e45; color: #d6d8db; } /* Alerty/banery: zaokrąglone, spokojne (jak pasek wydarzenia w projekcie). */ .alert { border-radius: 10px; } [data-theme="elita"] .alert-info, [data-theme="jasny"] .alert-info { background: #eaf2fe; border-color: #d4e3fc; color: #1e40af; } [data-theme="elita"] .alert-info a, [data-theme="jasny"] .alert-info a { color: #1d4ed8; } [data-theme="elita"] .alert-warning, [data-theme="jasny"] .alert-warning { background: #fdf6e7; border-color: #f5e3bb; color: #92600a; } [data-theme="elita"] .alert-success, [data-theme="jasny"] .alert-success { background: #e9f7ef; border-color: #c8ead6; color: #14724b; } [data-theme="elita"] .alert-danger, [data-theme="jasny"] .alert-danger { background: #fdecec; border-color: #f6cdcd; color: #b42318; } /* Rozwijane menu w treści: zaokrąglone, miękki cień. */ [data-theme="elita"] .dropdown-menu, [data-theme="jasny"] .dropdown-menu { border-radius: 10px; border-color: #e6eaf2; box-shadow: 0 8px 24px rgba(15, 23, 42, .10); } /* ========================================================================= NOWY UKŁAD (wg projektu): BOCZNY PANEL NAWIGACJI na desktopie. ≥992px: pasek .navbar-fixed-top staje się stałym sidebarem po lewej (pełna wysokość, pionowe menu, dropdowny rozwijane inline jak akordeon), a treść (#main-content) dostaje lewy margines. Poniżej 992px bez zmian: 768–991px klasyczny górny pasek (same ikony), <768px menu mobilne. ========================================================================= */ :root { --sidebar-w: 236px; } @media (min-width: 992px) { .navbar-fixed-top { top: 0; bottom: 0; left: 0; right: auto; width: var(--sidebar-w); height: 100vh; margin: 0; border: 0; border-radius: 0; } .navbar-fixed-top > .container-fluid { display: flex; flex-direction: column; height: 100%; width: 100%; padding: 0; } .navbar-fixed-top .navbar-header { float: none; padding: 18px 16px 12px; margin: 0 0 6px; border-bottom: 1px solid rgba(128, 140, 160, 0.18); } .navbar-fixed-top .navbar-brand { float: none; display: block; height: auto; padding: 0; font-size: 19px; line-height: 1.3; } /* Menu: zawsze rozwinięte, pionowe, przewijalne gdy długie. */ .navbar-fixed-top .navbar-collapse { display: flex !important; flex-direction: column; flex: 1 1 auto; height: auto !important; max-height: none !important; overflow-y: auto; width: 100%; padding: 4px 10px 12px; border-top: 0; box-shadow: none; } .navbar-fixed-top .navbar-nav { display: flex; flex-direction: column; flex: 1 0 auto; float: none !important; margin: 0; width: 100%; } .navbar-fixed-top .navbar-nav > li { float: none; display: block; } .navbar-fixed-top .navbar-nav > li > a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 12px; margin: 2px 0; border-radius: 10px; font-size: 14px; line-height: 1.35; } /* Ostatnia pozycja (menu użytkownika) przyklejona do dołu — jak w projekcie. */ .navbar-fixed-top .navbar-nav > li:last-child { margin-top: auto; } /* W sidebarze napisy pozycji menu są ZAWSZE widoczne. */ .navbar-fixed-top .nav-label-md { display: inline !important; } /* Dropdowny rozwijają się inline (akordeon), nie jako pływający panel. */ .navbar-fixed-top .navbar-nav .dropdown-menu { position: static; float: none; width: auto; min-width: 0; margin: 0 0 4px 14px; padding: 2px 0; background: transparent; border: 0; box-shadow: none; } .navbar-fixed-top .navbar-nav .dropdown-menu > li > a { padding: 7px 12px; margin: 1px 0; border-radius: 8px; white-space: normal; } /* Kolory podmenu w ciemnym sidebarze (Elita / Ciemny). */ [data-theme="elita"] .navbar-fixed-top .dropdown-menu > li > a, [data-theme="ciemny"] .navbar-fixed-top .dropdown-menu > li > a { color: #b9c2d0; } [data-theme="elita"] .navbar-fixed-top .dropdown-menu > li > a:hover, [data-theme="elita"] .navbar-fixed-top .dropdown-menu > li > a:focus, [data-theme="ciemny"] .navbar-fixed-top .dropdown-menu > li > a:hover, [data-theme="ciemny"] .navbar-fixed-top .dropdown-menu > li > a:focus { color: #ffffff; background: rgba(255, 255, 255, 0.08); } [data-theme="elita"] .navbar-fixed-top .dropdown-menu > .active > a, [data-theme="ciemny"] .navbar-fixed-top .dropdown-menu > .active > a { color: #ffffff; background: var(--brand-accent); } [data-theme="elita"] .navbar-fixed-top .dropdown-menu .divider, [data-theme="ciemny"] .navbar-fixed-top .dropdown-menu .divider { background-color: rgba(255, 255, 255, 0.12); } /* Jasny sidebar (motyw Jasny). */ [data-theme="jasny"] .navbar-fixed-top { border-right: 1px solid #e3e6ea; } [data-theme="jasny"] .navbar-fixed-top .dropdown-menu > li > a { color: #3a4049; } [data-theme="jasny"] .navbar-fixed-top .dropdown-menu > li > a:hover, [data-theme="jasny"] .navbar-fixed-top .dropdown-menu > li > a:focus { background: #eef3fb; color: #1f2329; } /* Cienki scrollbar sidebara. */ .navbar-fixed-top .navbar-collapse::-webkit-scrollbar { width: 6px; } .navbar-fixed-top .navbar-collapse::-webkit-scrollbar-thumb { background: rgba(128, 140, 160, .35); border-radius: 3px; } /* Treść obok sidebara. !important wygrywa też z inline padding-top:80px oraz z wartościami ustawianymi przez JS dynamicznego odstępu. */ #main-content { margin-left: var(--sidebar-w); padding: 22px 28px 20px !important; } .footer { margin-left: var(--sidebar-w); } } /* ========================================================================= DOLNA BELKA MOBILNA (wg projektu): Start / Kalendarz / Płatności / Wiadomości / Menu. Widoczna tylko <768px i tylko dla zalogowanych (body.has-mobile-tabbar). „Menu" otwiera pełne menu (collapse paska). ========================================================================= */ .mobile-tabbar { display: none; } @media (max-width: 767px) { /* Rezerwa na belkę, żeby nie zasłaniała końca treści/stopki. */ body.has-mobile-tabbar { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); } .mobile-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; /* jak pasek nawigacji; pod modalami (1040+) */ background: #ffffff; border-top: 1px solid #e6eaf2; box-shadow: 0 -2px 12px rgba(15, 23, 42, .08); padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); } .mobile-tabbar__item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px 4px; border-radius: 10px; font-size: 10.5px; line-height: 1.2; color: #5b6675; text-decoration: none; position: relative; white-space: nowrap; } .mobile-tabbar__item > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .mobile-tabbar__item .glyphicon { font-size: 17px; } .mobile-tabbar__item:hover, .mobile-tabbar__item:focus { color: var(--brand-accent); text-decoration: none; } .mobile-tabbar__item.active { color: var(--brand-accent); font-weight: 700; } .mobile-tabbar__badge { position: absolute; top: 1px; left: 50%; margin-left: 6px; background: #ef4444; color: #fff; border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 1; padding: 2px 5px; min-width: 16px; text-align: center; } [data-theme="ciemny"] .mobile-tabbar { background: #1f2126; border-top-color: #3a3e45; } [data-theme="ciemny"] .mobile-tabbar__item { color: #9aa0a7; } } /* Drukowanie: bez sidebara/paska i belki mobilnej, treść na całą szerokość. */ @media print { .navbar-fixed-top { display: none !important; } .mobile-tabbar { display: none !important; } #main-content { margin-left: 0 !important; padding: 0 !important; } .footer { display: none !important; } body.has-mobile-tabbar { padding-bottom: 0 !important; } }