/* ========================================================================= 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. Marka Elita (taniec-elita.pl) jest MONOCHROMATYCZNA: czerń + biel. Domyślny akcent = grafitowa czerń (#1A1A1A). Admin może nadpisać dowolnym HEX. ========================================================================= */ :root { --brand-accent: #3A3A3A; } /* ========================================================================= TYPOGRAFIA I HIERARCHIA (wspólne dla wszystkich motywów) - nowoczesny krój bezszeryfowy Inter (z fallbackiem systemowym, ładowany w ), - 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 { font-family: 'Inter', -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 w pasku nawigacji: ikona zawsze widoczna, napis (.nav-label-md) pokazywany dopiero powyżej 1350px. Między 768 a 1350px (desktop, ale ciasno) — sama ikona. Poniżej 768px działa menu mobilne (hamburger), więc napisy znów są widoczne. */ @media (min-width: 768px) and (max-width: 1350px) { .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); } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { border-top: 2px solid var(--brand-accent); } .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): minimalistyczna czerń + biel (monochrom) ========================================================================= */ [data-theme="elita"] body { background-color: #f8fafc; color: #1a1a1a; } [data-theme="elita"] .navbar-inverse { background-color: #0d0d0d; border-color: #000000; } [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: #f1f1f1; letter-spacing: 0.5px; } /* Navbar jest czarny — hover/aktywny jako subtelna biel, nie kolor akcentu. */ [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 > 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 { color: #ffffff; background-color: rgba(255, 255, 255, 0.14); } [data-theme="elita"] h1, [data-theme="elita"] h2, [data-theme="elita"] h3 { color: #111111; letter-spacing: 0.5px; } [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 #e5e7eb; border-radius: 8px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); } [data-theme="elita"] .grid-view, [data-theme="jasny"] .grid-view { background-color: #ffffff; border-radius: 8px; padding: 8px 12px 12px; 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: 6px; transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease; } .btn-lg { border-radius: 8px; } .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: 8px; } .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 #e5e7eb; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); } [data-theme="ciemny"] .toolbar-card { background-color: #2a2d33; border: 1px solid #3a3e45; }