/* ===================================================================== EOD — arkusz stylów globalny. Podejście: zmienne CSS (custom properties) + prefers-color-scheme dla domyślnego motywu systemowego, z możliwością ręcznego nadpisania przez atrybut data-motyw="jasny|ciemny" na (ustawiany przez motyw.js i zapamiętywany w localStorage). Mobile-first, RWD. ===================================================================== */ /* --- Motyw jasny (domyślny) --- */ :root { --tlo: #f4f6f8; --tlo-karty: #ffffff; --tekst: #1f2933; --tekst-wyciszony: #5f6b7a; --obramowanie: #d7dce1; --podstawowy: #1f6feb; --podstawowy-hover: #185ec2; --niebezpieczenstwo: #b91c1c; --niebezpieczenstwo-tlo: #fdecec; --sukces: #0a7f3f; --sukces-tlo: #e8f7ef; --ostrzezenie: #92600b; --ostrzezenie-tlo: #fff6e0; --promien: 10px; --cien: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.06); --sidebar-aktywny-tlo: #eaf1fd; --wykres-archiwum: #7c6fdb; } /* --- Motyw ciemny: automatycznie wg systemu ... --- */ @media (prefers-color-scheme: dark) { :root { --tlo: #0f1419; --tlo-karty: #1b222b; --tekst: #e6e9ec; --tekst-wyciszony: #9aa7b3; --obramowanie: #2e3947; --podstawowy: #4c8dfa; --podstawowy-hover: #6ea1fb; --niebezpieczenstwo: #f87171; --niebezpieczenstwo-tlo: #3a1616; --sukces: #4ade80; --sukces-tlo: #123321; --ostrzezenie: #fbbf24; --ostrzezenie-tlo: #3a2c0c; --cien: 0 1px 3px rgba(0, 0, 0, 0.4); --sidebar-aktywny-tlo: #1c2b45; --wykres-archiwum: #a78bfa; } } /* --- ... lub ręcznie wymuszony przełącznikiem (nadpisuje system) --- */ :root[data-motyw="ciemny"] { --tlo: #0f1419; --tlo-karty: #1b222b; --tekst: #e6e9ec; --tekst-wyciszony: #9aa7b3; --obramowanie: #2e3947; --podstawowy: #4c8dfa; --podstawowy-hover: #6ea1fb; --niebezpieczenstwo: #f87171; --niebezpieczenstwo-tlo: #3a1616; --sukces: #4ade80; --sukces-tlo: #123321; --ostrzezenie: #fbbf24; --ostrzezenie-tlo: #3a2c0c; --cien: 0 1px 3px rgba(0, 0, 0, 0.4); --sidebar-aktywny-tlo: #1c2b45; --wykres-archiwum: #a78bfa; } :root[data-motyw="jasny"] { --tlo: #f4f6f8; --tlo-karty: #ffffff; --tekst: #1f2933; --tekst-wyciszony: #5f6b7a; --obramowanie: #d7dce1; --podstawowy: #1f6feb; --podstawowy-hover: #185ec2; --niebezpieczenstwo: #b91c1c; --niebezpieczenstwo-tlo: #fdecec; --sukces: #0a7f3f; --sukces-tlo: #e8f7ef; --ostrzezenie: #92600b; --ostrzezenie-tlo: #fff6e0; --cien: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.06); --sidebar-aktywny-tlo: #eaf1fd; --wykres-archiwum: #7c6fdb; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--tlo); color: var(--tekst); -webkit-font-smoothing: antialiased; transition: background-color .15s ease, color .15s ease; } a { color: var(--podstawowy); } /* --- Layout stron logowania/auth: wyśrodkowana karta, RWD --- Tło całej strony to gradient od ciemnego (górny-lewy róg) do jasnego (dolny-prawy róg, kolor --tlo motywu). Górna część samej karty (logo, tytuł, podtytuł) leży na ciemnym pasie tego samego gradientu, więc jej napisy są celowo jasne (białe) — reszta karty (formularz) leży już na jasnym tle karty i korzysta ze zwykłych kolorów tekstu motywu. */ .strona-auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.25rem; background: linear-gradient(135deg, #141b21 0%, #253238 30%, var(--tlo) 100%); } .karta-auth { width: 100%; max-width: 26rem; background: var(--tlo-karty); border: 1px solid var(--obramowanie); border-radius: var(--promien); box-shadow: 0 16px 40px rgba(0, 0, 0, .28), 0 2px 8px rgba(0, 0, 0, .12); overflow: hidden; } .karta-auth-glowka { background: linear-gradient(160deg, #141b21 0%, #253238 55%, #32424c 100%); padding: 2.25rem 2rem 1.75rem; border-bottom: 3px solid var(--podstawowy); } .karta-auth-tresc { padding: 1.75rem 2rem 2.25rem; } @media (max-width: 480px) { .karta-auth-glowka { padding: 1.75rem 1.25rem 1.5rem; } .karta-auth-tresc { padding: 1.5rem 1.25rem 1.75rem; } } .logo-auth { display: block; width: 90px; height: 90px; object-fit: contain; margin: 0 auto 1.25rem; } .karta-auth-glowka h1 { font-size: 1.3rem; margin: 0 0 .35rem; text-align: center; color: #fff; } .karta-auth-glowka p.podtytul { color: rgba(255, 255, 255, .78); margin: 0; font-size: .92rem; text-align: center; } .logo-placowki { display: block; max-width: 100%; max-height: 4rem; margin: 0 auto 1rem; } /* --- Formularze --- */ .pole-formularza { margin-bottom: 1.1rem; } .pole-formularza label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .35rem; } .pole-formularza input[type="text"], .pole-formularza input[type="password"], .pole-formularza input[type="email"], .pole-formularza input[type="date"], .pole-formularza input[type="time"], .pole-formularza input[type="number"], .pole-formularza select, .pole-formularza textarea { width: 100%; padding: .65rem .75rem; font-size: 1rem; font-family: inherit; border: 1px solid var(--obramowanie); border-radius: 8px; background: var(--tlo-karty); color: var(--tekst); } .pole-formularza input:focus, .pole-formularza select:focus, .pole-formularza textarea:focus { outline: 2px solid var(--podstawowy); outline-offset: 1px; } /* --- Wiersz filtrów (formularze GET z wieloma polami obok siebie) — jako wydzielony pasek narzędzi nad tabelą, nie luźne pola na gołym tle. --- */ .formularz-filtry { display: flex; flex-wrap: wrap; gap: .85rem 1rem; align-items: flex-end; background: var(--tlo); border: 1px solid var(--obramowanie); border-radius: 12px; padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; } .formularz-filtry .pole-formularza label { font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tekst-wyciszony); } .formularz-filtry .pole-formularza { flex: 1 1 11rem; margin-bottom: 0; } .pole-formularza .podpowiedz { font-size: .78rem; color: var(--tekst-wyciszony); margin-top: .3rem; } /* --- Sekcje wewnątrz długich formularzy (np. "Nowy dokument") — każda jako osobny, delikatnie odcieniowany panel (nie tylko cienka linia-separator) — rozbija ścianę pól na czytelne, odseparowane bloki, tak jak w profesjonalnych systemach SaaS (Stripe/Linear-owy styl grupowania pól). --- */ .formularz-sekcja { background: var(--tlo); border: 1px solid var(--obramowanie); border-radius: 12px; padding: 1.5rem 1.5rem 1.65rem; margin-top: 1.25rem; } .formularz-sekcja:first-of-type { margin-top: 0; } .formularz-sekcja-naglowek { display: flex; align-items: center; gap: .65rem; margin-bottom: .3rem; } .formularz-sekcja-ikona { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 8px; background: var(--sidebar-aktywny-tlo); color: var(--podstawowy); flex-shrink: 0; } .formularz-sekcja-ikona-akcent { background: var(--ostrzezenie-tlo); color: var(--ostrzezenie); } .formularz-sekcja-ikona svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .formularz-sekcja-naglowek h2 { font-size: 1.02rem; margin: 0; } .formularz-sekcja-opis { font-size: .82rem; color: var(--tekst-wyciszony); margin: .2rem 0 1.1rem 2.75rem; } /* --- Przełączniki bezpieczeństwa/charakteru dokumentu ("Dokument poufny", "To zgoda...") — jako pełnowymiarowe, klikalne karty zamiast gołych checkboxów zlewających się z resztą formularza. Ustalone po zgłoszeniu użytkownika, że przy zwykłych checkboxach łatwo przeoczyć "poufny". --- */ .przelacznik-bezpieczenstwa { display: flex; align-items: flex-start; gap: .85rem; padding: .9rem 1rem; border: 1px solid var(--obramowanie); border-left: 4px solid var(--podstawowy); border-radius: 8px; margin-bottom: .75rem; cursor: pointer; background: var(--tlo-karty); transition: background-color .15s ease, border-color .15s ease; } .przelacznik-bezpieczenstwa:last-child { margin-bottom: 0; } .przelacznik-bezpieczenstwa:hover { background: var(--tlo); } .przelacznik-bezpieczenstwa-poufny { border-left-color: var(--ostrzezenie); } .przelacznik-bezpieczenstwa input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin-top: .15rem; flex-shrink: 0; accent-color: var(--podstawowy); } .przelacznik-bezpieczenstwa-poufny input[type="checkbox"] { accent-color: var(--ostrzezenie); } .przelacznik-bezpieczenstwa-ikona { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 8px; background: var(--sidebar-aktywny-tlo); color: var(--podstawowy); flex-shrink: 0; } .przelacznik-bezpieczenstwa-poufny .przelacznik-bezpieczenstwa-ikona { background: var(--ostrzezenie-tlo); color: var(--ostrzezenie); } .przelacznik-bezpieczenstwa-ikona svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .przelacznik-bezpieczenstwa-tekst { display: flex; flex-direction: column; gap: .2rem; } .przelacznik-bezpieczenstwa-tekst strong { font-size: .92rem; } .przelacznik-bezpieczenstwa-tekst .podpowiedz { margin: 0; } /* --- Pola formularza obok siebie na szerszych ekranach (np. Tytuł + Kategoria) --- */ .formularz-rzad { display: flex; gap: 1rem; flex-wrap: wrap; } .formularz-rzad > .pole-formularza { flex: 1 1 14rem; min-width: 0; } /* --- Siatka checkboxów (adresaci) zamiast jednej długiej kolumny nazwisk --- */ .lista-zaznaczalna-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .3rem .75rem; } /* --- Kompaktowe etapy workflow: numer etapu obok wyboru osoby, w jednym rzędzie. --- */ .etap-workflow { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; } .etap-workflow-numer { display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; border-radius: 999px; background: var(--tlo); border: 1px solid var(--obramowanie); font-size: .78rem; font-weight: 700; color: var(--tekst-wyciszony); flex-shrink: 0; } .etap-workflow select { flex: 1 1 auto; } .przycisk { width: 100%; padding: .7rem 1rem; font-size: 1rem; font-weight: 600; border: none; border-radius: 8px; background: var(--podstawowy); color: #fff; cursor: pointer; transition: background-color .15s ease; } .przycisk:hover { background: var(--podstawowy-hover); } /* --- Warianty kolorystyczne .przycisk — do akcji o innym znaczeniu niż domyślne "dalej/zapisz" (np. Zaakceptuj/Odrzuć w workflow), zamiast inline style="background:...". --- */ .przycisk-sukces { background: var(--sukces); } .przycisk-sukces:hover { background: color-mix(in srgb, var(--sukces) 82%, black); } .przycisk-niebezpieczenstwo { background: var(--niebezpieczenstwo); } .przycisk-niebezpieczenstwo:hover { background: color-mix(in srgb, var(--niebezpieczenstwo) 82%, black); } /* Przyciski wewnątrz nagłówka strony (.karta-naglowek) nie powinny rozciągać się na 100% szerokości jak domyślny .przycisk w formularzu. */ .karta-naglowek-akcje .przycisk, .karta-naglowek-akcje .przycisk-tekstowy { width: auto; } /* --- Przycisk drugorzędny (dawniej: kolorowy podkreślony tekst — źle czytelny jako klikalna akcja). Zawsze wygląda jak PRZYCISK: obramowanie, tło, padding — nawet gdy semantycznie jest to albo