/* ==========================================================================
MAGENT — WARSTWA ODŚWIEŻENIA WIZUALNEGO ("theme-refresh")
==========================================================================
JAK TEGO UŻYĆ (ważne, przeczytaj zanim wrzucisz to globalnie):
1. Podepnij ten plik JAKO OSTATNI , po main.css i
main-bootstrap-overrides.css (i po klasy.css, jeśli dana strona
jej używa). Kolejność w ma znaczenie — ten plik wygrywa
dzięki source order, bez potrzeby sypania !important.
2. NIC się nie zmieni, dopóki nie dodasz klasy "theme-refresh" do
(albo do konkretnego kontenera, jeśli chcesz testować
węziej niż cała strona, np.
).
Wszystkie reguły w tym pliku są spod tej klasy — świadomie,
żeby dało się to włączać stronami i cofać jednym atrybutem.
3. Sugerowana kolejność wdrożenia po sekcjach tego pliku:
tokeny -> typografia -> formularze -> tabele -> alerty/badge/panel
-> top bar -> menu boczne. Każda sekcja jest osobno komentowana,
możesz skopiować tylko wybrane bloki, jeśli nie chcesz całości.
4. Rzeczy, których ten plik CELOWO nie rusza, bo są zbyt specyficzne
dla pojedynczych widoków (ryzyko regresji > korzyść z ujednolicenia):
.dashboard-stats kolory kafelków, .wznawialna/.niewznawialna,
.sidebar-right-fixed, .notification, keyframes @ring.
Jeśli redesign obejmie te widoki, zrób to jako osobny plik.
========================================================================== */
/* --------------------------------------------------------------------------
1. TOKENY — zdefiniowane raz na .theme-refresh, dziedziczą się w dół.
-------------------------------------------------------------------------- */
body.theme-refresh {
--bg-app: #F3F4F6;
--bg-panel: #FFFFFF;
--ink-900: #191C22;
--ink-700: #3C4048;
--ink-500: #6B7078;
--ink-300: #A6ABB3;
--line: #E5E7EB;
--line-strong: #D3D6DC;
--navy: #1B1F2A;
--navy-soft: #262B38;
/* pomarańcz marki (main.css: #FF5A00) doprecyzowany pod kontrast WCAG:
#FF5A00 na białym tle to ok. 2.9:1 — za mało dla tekstu i obwódek.
#E05A00 na przyciskach (biały tekst) i #A6420A na linkach/tekście
dają >= 4.5:1. Odcień ten sam, tylko czytelny. */
--accent: #E05A00;
--accent-ink: #A6420A;
--accent-soft: #FDEEE3;
--accent-soft-strong: #FBDFC9;
--ok-ink: #146C43;
--ok-bg: #E8F5EE;
--ok-line: #BFE3D0;
--warn-ink: #8A5A00;
--warn-bg: #FFF6E0;
--warn-line: #F1DDA6;
--danger-ink: #B02A1F;
--danger-bg: #FBEAE8;
--danger-line: #F0C6C0;
--info-ink: #1D5FA6;
--info-bg: #EAF2FB;
--info-line: #C6DAF0;
--radius: 6px;
--font-ui: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-mono: 'Inconsolata', 'SFMono-Regular', Consolas, monospace;
background: var(--bg-app);
color: var(--ink-900);
font-family: var(--font-ui);
}
/* --------------------------------------------------------------------------
2. BAZA — typografia, linki, focus. Największy ripple, testuj pierwsze.
-------------------------------------------------------------------------- */
.theme-refresh, .theme-refresh TD, .theme-refresh TH {
font-family: var(--font-ui);
color: var(--ink-900);
}
.theme-refresh H1, .theme-refresh H2, .theme-refresh H3,
.theme-refresh H4, .theme-refresh H5 {
color: var(--ink-900);
letter-spacing: -0.2px;
font-weight: 700;
}
.theme-refresh A,
.theme-refresh A:link,
.theme-refresh A:visited {
color: var(--accent-ink);
}
.theme-refresh A:hover,
.theme-refresh A:active {
color: var(--accent);
}
/* main-bootstrap-overrides.css zeruje outline na A/.btn — trzeba oddać
fokus w innej formie, inaczej klawiatura/screen reader tracą orientację. */
.theme-refresh A:focus-visible,
.theme-refresh .btn:focus-visible,
.theme-refresh .form-control:focus-visible,
.theme-refresh input:focus-visible,
.theme-refresh select:focus-visible,
.theme-refresh textarea:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.theme-refresh STRONG, .theme-refresh TH {
font-weight: 600;
}
.theme-refresh .mono {
font-family: var(--font-mono);
}
/* --------------------------------------------------------------------------
3. FORMULARZE — .form-control, walidacja .error/.success (main.css),
inputy w tabelach. To jest sekcja odpowiadająca za pola "Stawka
partnera" z rozmowy o ryzykach — kontrast placeholderów był
głównym grzechem oryginału.
-------------------------------------------------------------------------- */
.theme-refresh .form-control {
border: 1px solid var(--line-strong);
border-radius: 5px;
color: var(--ink-900);
box-shadow: none;
}
.theme-refresh .form-control:focus {
border-color: var(--accent);
box-shadow: none;
}
.theme-refresh .form-control::placeholder {
color: var(--ink-300);
}
.theme-refresh label {
color: var(--ink-700);
font-weight: 600 !important; /* nadpisuje main-bootstrap-overrides.css: label{font-weight:500!important} */
}
/* stany walidacji z main.css — te same selektory, żeby wygrać bez !important
mimo że oryginał już ma dość dużą specyficzność (typ+klasa+sąsiedztwo) */
.theme-refresh INPUT.error,
.theme-refresh SELECT.error,
.theme-refresh TEXTAREA.error {
border-color: var(--danger-ink);
background: var(--danger-bg);
color: var(--danger-ink);
}
.theme-refresh INPUT.success,
.theme-refresh SELECT.success,
.theme-refresh TEXTAREA.success {
border-color: var(--ok-ink);
background: var(--ok-bg);
color: var(--ok-ink);
}
.theme-refresh EM.error {
color: var(--danger-ink);
}
/* --------------------------------------------------------------------------
4. PRZYCISKI — Bootstrap 3 .btn-*. Jeden akcent, reszta stonowana,
żeby wtórna akcja nie krzyczała tak samo jak główna.
-------------------------------------------------------------------------- */
.theme-refresh .btn {
border-radius: 5px;
font-weight: 600;
font-size: 13px;
}
.theme-refresh .btn-default {
background: #fff;
border-color: var(--line-strong);
color: var(--ink-700);
}
.theme-refresh .btn-default:hover,
.theme-refresh .btn-default:focus {
background: #fff;
border-color: var(--ink-300);
color: var(--ink-900);
}
.theme-refresh .btn-primary {
background: var(--accent);
border-color: var(--accent);
}
.theme-refresh .btn-primary:hover,
.theme-refresh .btn-primary:focus {
background: var(--accent-ink);
border-color: var(--accent-ink);
}
.theme-refresh .btn-success {
background: var(--ok-ink);
border-color: var(--ok-ink);
}
.theme-refresh .btn-danger {
background: var(--danger-ink);
border-color: var(--danger-ink);
}
.theme-refresh .btn-warning {
background: var(--warn-ink);
border-color: var(--warn-ink);
color: #fff;
}
.theme-refresh .btn-info {
background: var(--info-ink);
border-color: var(--info-ink);
}
/* unlogged-bootstrap-overrides.css ma bardzo długie, specyficzne selektory
na .btn-default w kontekście .page-unlogged — powtarzam ten sam zestaw,
żeby mieć pewność wygranej w kaskadzie zamiast liczyć na !important. */
.theme-refresh.page-unlogged .btn-default,
.theme-refresh .page-unlogged .btn-default {
background: var(--accent);
border-color: var(--accent-ink);
}
.theme-refresh.page-unlogged .btn-default:hover,
.theme-refresh .page-unlogged .btn-default:hover,
.theme-refresh.page-unlogged .btn-default:active,
.theme-refresh .page-unlogged .btn-default:active {
background: var(--accent-ink);
border-color: var(--accent-ink);
}
/* --------------------------------------------------------------------------
5. ALERTY / KOMUNIKATY — .alert-*. To jest bezpośrednia odpowiedź na
"żółty banner" z ekranu ryzyk: te same klasy Bootstrapa, spójny
zestaw kolorów warn/ok/danger/info używany też w formularzach i tabelach.
-------------------------------------------------------------------------- */
.theme-refresh .alert {
border-radius: var(--radius);
border-width: 1px;
font-size: 13.5px;
}
.theme-refresh .alert-warning {
background: var(--warn-bg);
border-color: var(--warn-line);
color: var(--warn-ink);
}
.theme-refresh .alert-success {
background: var(--ok-bg);
border-color: var(--ok-line);
color: var(--ok-ink);
}
.theme-refresh .alert-danger {
background: var(--danger-bg);
border-color: var(--danger-line);
color: var(--danger-ink);
}
.theme-refresh .alert-info {
background: var(--info-bg);
border-color: var(--info-line);
color: var(--info-ink);
}
/* main-bootstrap-overrides.css robi .bg-warning.text-warning itd. białe na
kolorze — zostawiam tę logikę (kafelki/dashboard), tylko dopasowuję barwy
bazowe wyżej, żeby nie trzeba było jej osobno ruszać. */
/* --------------------------------------------------------------------------
6. TABELE — .table, thead, wiersze grupujące. Główna sekcja pod ekran
"Zarządzanie ryzykami", ale dotyczy każdej listy w CRM-ie.
-------------------------------------------------------------------------- */
.theme-refresh .table {
font-size: 13px;
}
.theme-refresh .table > thead > tr > th {
text-transform: uppercase;
font-size: 11.5px;
letter-spacing: .03em;
color: var(--ink-500);
font-weight: 600;
border-bottom: 1px solid var(--line);
background: #FAFAFB;
}
/* main-bootstrap-overrides.css już zeruje font-weight na pierwszym theadzie —
utrzymuję to, dokładam tylko kolor i wielkość liter, nie nadpisuję dwa razy. */
.theme-refresh .table > caption + thead > tr:first-child > th,
.theme-refresh .table > colgroup + thead > tr:first-child > th,
.theme-refresh .table > thead:first-child > tr:first-child > th {
font-weight: 600;
}
.theme-refresh .table > tbody > tr:hover {
background: #FAFAFC;
}
.theme-refresh .table > tbody > tr > td {
border-color: var(--line);
vertical-align: middle;
}
.theme-refresh table.dataTable tbody tr.selected {
background-color: var(--accent-soft);
}
/* wiersze nagłówkujące grupy (jeśli markup ich używa jako TR z jedną
komórką colspan, jak w widoku ryzyk) — podłącz klasę .group-row w HTML,
ten selektor sam z siebie niczego nie zakłada o istniejącym markupie. */
.theme-refresh TR.group-row > TD {
background: #F6F7F9;
color: var(--navy);
font-weight: 700;
font-size: 12.5px;
}
/* kolumna edytowalna — podłącz klasę .col-edit na TH/TD, żeby odróżnić
pola do wypełnienia od danych tylko do odczytu (patrz makieta z rozmowy). */
.theme-refresh TH.col-edit {
background: var(--accent-soft-strong);
color: var(--accent-ink);
}
.theme-refresh TD.col-edit {
background: var(--accent-soft);
}
/* --------------------------------------------------------------------------
7. PANELE / KARTY — .panel, .panel-heading z main-bootstrap-overrides.css
-------------------------------------------------------------------------- */
.theme-refresh .panel {
border-color: var(--line);
border-radius: 8px;
box-shadow: none;
}
.theme-refresh .panel .panel-heading {
background: #FAFAFB;
border-bottom: 1px solid var(--line);
}
.theme-refresh .panel .panel-heading H3 {
color: var(--ink-900);
font-weight: 700;
}
.theme-refresh .badge {
background: var(--ink-300);
}
.theme-refresh .label-default {
background: var(--ink-300);
}
/* --------------------------------------------------------------------------
8. TOP BAR — .menu-top / .menu-top-xs (main.css). Ciemny pasek zostaje,
gradient wychodzi (płaski kolor lepiej znosi duże obszary jednolite).
-------------------------------------------------------------------------- */
.theme-refresh .menu-top {
background: var(--navy);
background-image: none; /* nadpisuje linear-gradient z main.css */
box-shadow: none;
border-bottom: 1px solid var(--navy-soft);
}
.theme-refresh .menu-top-xs {
background: var(--navy);
}
.theme-refresh .menu-top .logo A,
.theme-refresh .menu-top-xs .logo A {
color: #fff;
font-weight: 700;
}
.theme-refresh .menu-top .profile .nazwa-uzytkownika {
color: #E7E9EE;
}
.theme-refresh .menu-top .profile .dane-posrednika {
color: #9BA1AD;
}
.theme-refresh .menu-top .profile > a {
background: rgba(255,255,255,.08);
border-radius: var(--radius);
}
.theme-refresh .menu-top .profile > a:hover {
background: rgba(255,255,255,.16);
color: #fff;
}
/* --------------------------------------------------------------------------
9. MENU BOCZNE — .menu-left-wrapper .nav (main.css, wewnątrz @media
min-width:768px). Aktywny element dostaje akcent zamiast szarości.
-------------------------------------------------------------------------- */
.theme-refresh .menu-left-wrapper {
background: var(--bg-panel);
border-right: 1px solid var(--line);
}
.theme-refresh .menu-left-wrapper .nav > LI > A {
color: var(--ink-700);
}
.theme-refresh .menu-left-wrapper .nav > LI.active > A,
.theme-refresh .menu-left-wrapper .nav > LI > A:hover,
.theme-refresh .menu-left-wrapper .nav > LI > A:active,
.theme-refresh .menu-left-wrapper .nav > LI > A:focus {
background-color: var(--accent-soft);
color: var(--accent-ink);
}
.theme-refresh .menu-left-wrapper .nav > LI.active > A {
font-weight: 600;
box-shadow: inset 3px 0 0 var(--accent);
}
.theme-refresh .menu-left-wrapper .nav UL > LI > A:hover,
.theme-refresh .menu-left-wrapper .nav UL > LI > A:focus {
background-color: var(--accent-soft);
}
.theme-refresh .menu-left-wrapper .nav > LI.active > UL {
background-color: var(--accent-soft);
}
/* --------------------------------------------------------------------------
10. TŁA POMOCNICZE — .bg-white / .bg-default / .bg-active (main.css)
-------------------------------------------------------------------------- */
.theme-refresh .bg-default {
background: var(--bg-app);
}
.theme-refresh .bg-active {
background: var(--accent-soft);
}
/* ==========================================================================
KONIEC. Sekcje 8-9 (top bar, menu boczne) mają największy koszt testowy,
bo dotykają layoutu widocznego na KAŻDEJ stronie zalogowanego CRM —
sugeruję włączać je jako ostatnie, po tym jak sekcje 3, 4, 6 (formularze,
przyciski, tabele) przejdą bez regresji na 2-3 najbardziej ruchliwych
widokach.
========================================================================== */