/* ========================================================================== Silnoręcy — motyw panelu (czerń + magenta, wzorowany na silnorecy.pl) Nadpisuje zmienne Pico v2. Zero zależności zewnętrznych. ========================================================================== */ :root { /* --- paleta marki (magenta pobrana ze strony: rgb(227,47,116)) --- */ --sr-magenta: #e32f74; --sr-magenta-jasna: #f4508e; --sr-magenta-mgla: rgba(227, 47, 116, 0.12); /* --- czernie: nie czysty #000, bo męczy przy długim czytaniu tabel --- */ --sr-tlo: #0b0b0d; --sr-powierzchnia: #141418; --sr-powierzchnia-2: #1c1c22; --sr-obwodka: #2a2a33; --sr-obwodka-mocna: #3a3a46; --sr-tekst: #f4f4f6; --sr-tekst-cichy: #9a9aa6; --sr-zielony: #3fbf7f; --sr-czerwony: #ff5c6c; --sr-zolty: #f5a623; --sr-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --sr-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } /* --- mapowanie na zmienne Pico ------------------------------------------ Selektor MUSI być mocniejszy niż `:root:not([data-theme])`, którym Pico definiuje swój ciemny motyw — samo `:root` przegrywa specyficznością i zostają niebieskie przyciski Pico. Stąd `data-theme="dark"` na i selektor z atrybutem. */ :root[data-theme="dark"] { color-scheme: dark; --pico-font-family: var(--sr-sans); --pico-border-radius: 0.5rem; --pico-line-height: 1.55; --pico-background-color: var(--sr-tlo); --pico-color: var(--sr-tekst); --pico-h1-color: #fff; --pico-h2-color: #fff; --pico-h3-color: var(--sr-tekst); --pico-h4-color: var(--sr-tekst); --pico-h5-color: var(--sr-tekst); --pico-h6-color: var(--sr-tekst-cichy); --pico-muted-color: var(--sr-tekst-cichy); --pico-muted-border-color: var(--sr-obwodka); --pico-primary: var(--sr-magenta); --pico-primary-background: var(--sr-magenta); --pico-primary-border: var(--sr-magenta); --pico-primary-underline: var(--sr-magenta-mgla); --pico-primary-hover: var(--sr-magenta-jasna); --pico-primary-hover-background: var(--sr-magenta-jasna); --pico-primary-hover-border: var(--sr-magenta-jasna); --pico-primary-focus: rgba(227, 47, 116, 0.4); --pico-primary-inverse: #fff; --pico-secondary: var(--sr-tekst-cichy); --pico-secondary-background: var(--sr-powierzchnia-2); --pico-secondary-border: var(--sr-obwodka-mocna); --pico-secondary-hover: var(--sr-tekst); --pico-secondary-hover-background: var(--sr-obwodka); --pico-secondary-inverse: #fff; --pico-card-background-color: var(--sr-powierzchnia); --pico-card-border-color: var(--sr-obwodka); --pico-card-sectioning-background-color: var(--sr-powierzchnia-2); --pico-form-element-background-color: var(--sr-powierzchnia-2); --pico-form-element-border-color: var(--sr-obwodka-mocna); --pico-form-element-color: var(--sr-tekst); --pico-form-element-placeholder-color: var(--sr-tekst-cichy); --pico-form-element-active-background-color: var(--sr-powierzchnia-2); --pico-form-element-active-border-color: var(--sr-magenta); --pico-form-element-focus-color: var(--sr-magenta); --pico-table-border-color: var(--sr-obwodka); --pico-table-row-stripped-background-color: rgba(255, 255, 255, 0.02); --pico-ins-color: var(--sr-zielony); --pico-del-color: var(--sr-czerwony); --pico-mark-background-color: var(--sr-magenta-mgla); --pico-mark-color: var(--sr-tekst); --pico-code-background-color: var(--sr-powierzchnia-2); --pico-code-color: var(--sr-tekst-cichy); --pico-blockquote-border-color: var(--sr-magenta); } /* Pico skaluje bazowy font-size w górę na szerokich ekranach (do 125%). Dla panelu z gęstymi tabelami to strata miejsca — kolumny zaczynają się zawijać i włącza się przewijanie w poziomie. Przypinamy 16px, żeby wymiary w rem były przewidywalne. */ html { font-size: 100%; } body { background: var(--sr-tlo); min-height: 100vh; } /* ========================================================================== Marka ========================================================================== */ .brand { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; color: #fff; text-decoration: none; white-space: nowrap; } .brand:hover { color: #fff; } .brand-tld { color: var(--sr-magenta); } /* ========================================================================== Układ: menu boczne + treść ========================================================================== */ .uklad { display: flex; min-height: 100vh; align-items: stretch; } .menu { /* w px, nie w rem — szerokość menu nie może zależeć od skalowania fontu */ flex: 0 0 240px; width: 240px; background: #000; border-right: 1px solid var(--sr-obwodka); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .menu-marka { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--sr-obwodka); } .menu-nawigacja { flex: 1 1 auto; padding: 0.75rem 0; } /* nagłówek kategorii */ .menu-grupa { padding: 1rem 1.25rem 0.35rem; font-family: var(--sr-mono); font-size: 0.63rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sr-tekst-cichy); } .menu-nawigacja > .menu-grupa:first-child { padding-top: 0.25rem; } /* Pozycje menu jako wypukłe przyciski 3D. Wrażenie głębi robią trzy warstwy naraz: gradient (światło pada z góry), wewnętrzna jasna kreska u szczytu (odblask krawędzi) i ciemny cień pod spodem (grubość klawisza). Bez któregokolwiek z nich przycisk wygląda płasko. */ .menu-link { display: flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0.75rem; padding: 0.5rem 0.85rem; font-size: 0.9rem; font-weight: 500; color: var(--sr-tekst-cichy); text-decoration: none; border: 1px solid var(--sr-obwodka-mocna); border-radius: 0.45rem; background: linear-gradient(180deg, #23232b 0%, #17171c 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 0 #08080a, 0 3px 4px rgba(0, 0, 0, 0.45); transition: transform 0.1s ease, box-shadow 0.1s ease, color 0.12s ease; } .menu-link:hover { color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 3px 0 #08080a, 0 5px 7px rgba(0, 0, 0, 0.5); } /* wciśnięcie — przycisk siada na swoim cieniu */ .menu-link:active { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 0 #08080a; } .menu-aktywna, .menu-aktywna:hover { color: #fff; font-weight: 600; border-color: var(--sr-magenta); background: linear-gradient(180deg, var(--sr-magenta-jasna) 0%, var(--sr-magenta) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 0 #7a1440, 0 3px 6px rgba(227, 47, 116, 0.35); } .menu-aktywna:hover { transform: translateY(-1px); } /* Panel administracyjny w stopce — ten sam klawisz, żeby stopka nie odstawała */ .menu-admin { display: block; margin-bottom: 0.6rem; padding: 0.4rem 0.85rem; font-size: 0.82rem; text-align: center; color: var(--sr-tekst-cichy); text-decoration: none; border: 1px solid var(--sr-obwodka-mocna); border-radius: 0.45rem; background: linear-gradient(180deg, #23232b 0%, #17171c 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 0 #08080a; } .menu-admin:hover { color: #fff; text-decoration: none; } /* stopka menu: konto + wylogowanie */ .menu-stopka { border-top: 1px solid var(--sr-obwodka); padding: 0.9rem 1.25rem; } .konto-login { display: block; color: var(--sr-tekst); font-weight: 600; font-size: 0.85rem; line-height: 1.2; } .konto-rola { display: block; font-family: var(--sr-mono); font-size: 0.63rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sr-magenta); margin-bottom: 0.6rem; } .menu-stopka form { margin: 0; } .menu-stopka button { margin: 0; padding: 0.35rem 0.7rem; font-size: 0.78rem; width: 100%; } /* prawa kolumna */ .tresc { flex: 1 1 auto; min-width: 0; } /* pasek mobilny z hamburgerem — na desktopie ukryty */ .pasek-mobilny { display: none; align-items: center; gap: 0.75rem; background: #000; border-bottom: 1px solid var(--sr-obwodka); padding: 0.6rem 1rem; } .hamburger { cursor: pointer; font-size: 1.4rem; line-height: 1; color: var(--sr-tekst); padding: 0.1rem 0.4rem; border: 1px solid var(--sr-obwodka-mocna); border-radius: var(--pico-border-radius); user-select: none; } .zaslona { display: none; } /* ========================================================================== Nagłówek sekcji ========================================================================== */ main.container { padding-block: 1.5rem 3rem; } /* Wewnątrz układu z menu treść wypełnia prawą kolumnę — bez auto-marginesów Pico, bo centrowałyby ją względem całego okna, licząc też szerokość menu. POZA układem (logowanie — niezalogowany nie ma menu) auto-marginesy Pico muszą zostać, inaczej formularz przykleja się do lewej krawędzi. */ .uklad main.container { margin-inline: 0; max-width: 78rem; padding-inline: 1.75rem; } .naglowek-sekcji { margin-bottom: 1.25rem; } .naglowek-sekcji h1 { margin-bottom: 0.15rem; font-size: 1.6rem; letter-spacing: -0.02em; } .naglowek-sekcji p { margin: 0; color: var(--sr-tekst-cichy); font-size: 0.9rem; } .etykieta { font-family: var(--sr-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sr-magenta); } /* ========================================================================== Kafelki na pulpicie ========================================================================== */ .kafelki { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.9rem; margin-bottom: 2rem; } .kafelek { background: var(--sr-powierzchnia); border: 1px solid var(--sr-obwodka); border-radius: var(--pico-border-radius); padding: 1rem; text-decoration: none; display: block; transition: border-color 0.12s ease, transform 0.12s ease; } a.kafelek:hover { border-color: var(--sr-magenta); text-decoration: none; transform: translateY(-1px); } .kafelek-liczba { font-size: 1.9rem; font-weight: 800; line-height: 1.1; color: #fff; letter-spacing: -0.02em; } .kafelek-opis { color: var(--sr-tekst-cichy); font-size: 0.85rem; margin-top: 0.2rem; } /* ========================================================================== Tabele ========================================================================== */ .tabela-otoczka { overflow-x: auto; border: 1px solid var(--sr-obwodka); border-radius: var(--pico-border-radius); background: var(--sr-powierzchnia); } .tabela-otoczka table { margin: 0; } table thead th { font-family: var(--sr-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sr-tekst-cichy); font-weight: 600; white-space: nowrap; } table td { vertical-align: middle; } .kwota { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; } /* ========================================================================== Znaczniki statusów ========================================================================== */ .znacznik { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-family: var(--sr-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--sr-obwodka-mocna); color: var(--sr-tekst-cichy); white-space: nowrap; } .znacznik-ok { border-color: var(--sr-zielony); color: var(--sr-zielony); } .znacznik-uwaga { border-color: var(--sr-zolty); color: var(--sr-zolty); } .znacznik-zle { border-color: var(--sr-czerwony); color: var(--sr-czerwony); } .znacznik-marka { border-color: var(--sr-magenta); color: var(--sr-magenta); background: var(--sr-magenta-mgla); } /* pusty stan listy */ .pusto { text-align: center; padding: 2.5rem 1rem; color: var(--sr-tekst-cichy); border: 1px dashed var(--sr-obwodka-mocna); border-radius: var(--pico-border-radius); } /* ========================================================================== Komunikaty Django messages ========================================================================== */ .komunikaty article { border-left: 3px solid var(--sr-magenta); padding: 0.7rem 1rem; margin-bottom: 0.6rem; } .komunikaty article.error { border-left-color: var(--sr-czerwony); } .komunikaty article.success { border-left-color: var(--sr-zielony); } .komunikaty article.warning { border-left-color: var(--sr-zolty); } /* ========================================================================== Komponenty przeniesione ze starego app.css ========================================================================== */ .badge { background: var(--sr-magenta); color: #fff; border-radius: 1rem; padding: 0 0.5rem; font-size: 0.75rem; font-weight: 700; } /* Dyspozycyjność — siatka kalendarza (mobile-first: 7 kolumn mieści się od razu na wąskim ekranie) */ .calendar-nav ul { margin-bottom: 0; } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; margin-block: 1rem; } .calendar-weekday { text-align: center; font-family: var(--sr-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sr-tekst-cichy); } .day-empty { visibility: hidden; } .day-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; padding: 0.5rem 0.1rem; line-height: 1.1; font-size: 0.8rem; cursor: pointer; border: 1px solid var(--sr-obwodka-mocna); border-radius: var(--pico-border-radius); background: var(--sr-powierzchnia); color: var(--sr-tekst); } .day-btn:hover { border-color: var(--sr-magenta); } .day-btn .day-num { font-weight: 700; } .day-btn .day-label { font-size: 0.65rem; } .day-btn-dostepny { border-color: var(--sr-zielony); color: var(--sr-zielony); } .day-btn-niedostepny { border-color: var(--sr-czerwony); color: var(--sr-czerwony); } /* Powiadomienia — wyróżnienie nieprzeczytanych (tylko przy tym wejściu na listę) */ .notification-unread { border-left: 0.25rem solid var(--sr-magenta); } .notification-date { float: right; color: var(--sr-tekst-cichy); font-size: 0.8rem; } /* ========================================================================== Logowanie ========================================================================== */ .logowanie { max-width: 25rem; margin: 3rem auto; } .logowanie-marka { display: block; text-align: center; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; color: #fff; margin-bottom: 1.5rem; } /* ========================================================================== Telefon i tablet: menu chowa się w szufladzie Przełącznik to ukryty checkbox +