/* Centrum: własny CSS, bez bibliotek i bez fontów z zewnątrz (fonty systemowe). Podstawa 18 px, wszystko w rem. Motyw: z systemu albo wybrany ręcznie (atrybut data-motyw na ). */ :root { --tlo: #eef1f3; --powierzchnia: #ffffff; --powierzchnia-2: #f5f7f8; --tekst: #15202b; --tekst-2: #4c5a66; --linia: #d3dbe1; --akcent: #1f5f86; --akcent-mocny: #174a69; --akcent-tekst: #ffffff; --akcent-tlo: #e2edf4; --ok: #1d7648; --zle: #b3261e; --neutralne: #7a8894; --uwaga: #a86400; --ok-tlo: #e1f2e8; --uwaga-tlo: #fff1d6; --blad-tlo: #fbe4e2; --blad-tekst: #7f1a13; --info-tlo: #e2edf4; --info-tekst: #173f59; --budowa-tlo: #fff3d6; --budowa-tekst: #5f4300; --cien: 0 1px 2px rgba(21, 32, 43, 0.06), 0 2px 8px rgba(21, 32, 43, 0.05); --promien: 12px; --odstep: 16px; --menu-szer: 260px; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) { --tlo: #101417; --powierzchnia: #182026; --powierzchnia-2: #1d262d; --tekst: #e5ebee; --tekst-2: #a4b2bc; --linia: #2d3943; --akcent: #7cc0ec; --akcent-mocny: #a3d4f4; --akcent-tekst: #0a1822; --akcent-tlo: #15303f; --ok: #5cc98f; --zle: #f08b82; --neutralne: #8997a2; --uwaga: #f0b44c; --ok-tlo: #173526; --uwaga-tlo: #3a2f12; --blad-tlo: #45211d; --blad-tekst: #f7cdc8; --info-tlo: #15303f; --info-tekst: #c9e5f7; --budowa-tlo: #3a2f12; --budowa-tekst: #f3dca0; --cien: none; color-scheme: dark; } } :root[data-motyw="ciemny"] { --tlo: #101417; --powierzchnia: #182026; --powierzchnia-2: #1d262d; --tekst: #e5ebee; --tekst-2: #a4b2bc; --linia: #2d3943; --akcent: #7cc0ec; --akcent-mocny: #a3d4f4; --akcent-tekst: #0a1822; --akcent-tlo: #15303f; --ok: #5cc98f; --zle: #f08b82; --neutralne: #8997a2; --uwaga: #f0b44c; --ok-tlo: #173526; --uwaga-tlo: #3a2f12; --blad-tlo: #45211d; --blad-tekst: #f7cdc8; --info-tlo: #15303f; --info-tekst: #c9e5f7; --budowa-tlo: #3a2f12; --budowa-tekst: #f3dca0; --cien: none; color-scheme: dark; } [hidden] { display: none !important; } *, *::before, *::after { box-sizing: border-box; } html { font-size: 112.5%; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--tlo); color: var(--tekst); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif; line-height: 1.5; min-height: 100vh; min-height: 100dvh; } h1 { font-size: 1.6rem; line-height: 1.2; margin: 0; } h2 { font-size: 1.15rem; line-height: 1.3; margin: 0 0 10px; } p { margin: 0 0 12px; } a { color: var(--akcent); } :focus-visible { outline: 3px solid var(--akcent); outline-offset: 2px; } svg { flex-shrink: 0; } .pomin { position: absolute; left: 8px; top: -100px; z-index: 100; padding: 10px 14px; background: var(--powierzchnia); color: var(--akcent); border-radius: var(--promien); } .pomin:focus { top: 8px; } /* --- Układ --- */ .pasek { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--odstep); padding-top: calc(10px + env(safe-area-inset-top, 0px)); background: var(--powierzchnia); border-bottom: 1px solid var(--linia); } .pasek__logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; font-size: 1.1rem; color: var(--tekst); text-decoration: none; white-space: nowrap; } .pasek__znak { width: 28px; height: 28px; fill: none; stroke: var(--akcent); stroke-width: 2; stroke-linecap: round; } .pasek__akcje { display: flex; align-items: center; gap: 8px; } .ikona-przycisk { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--powierzchnia); color: var(--tekst); cursor: pointer; } .ikona-przycisk:hover { border-color: var(--akcent); } html:not(.js) .ikona-przycisk { display: none; } .motyw-ikona { display: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .motyw-ikona .wypelnij { fill: currentColor; stroke: none; } .ikona-przycisk:not([data-stan]) .motyw-ikona--auto, .ikona-przycisk[data-stan="auto"] .motyw-ikona--auto, .ikona-przycisk[data-stan="jasny"] .motyw-ikona--jasny, .ikona-przycisk[data-stan="ciemny"] .motyw-ikona--ciemny { display: block; } .menu { background: var(--powierzchnia); border-bottom: 1px solid var(--linia); padding: 8px var(--odstep) 16px; } .menu__lista { list-style: none; margin: 0; padding: 0; } .menu__link { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 8px 12px; border-radius: 10px; color: var(--tekst); text-decoration: none; } .menu__link:hover { background: var(--powierzchnia-2); } .menu__link:hover span:first-child { text-decoration: underline; } .menu__link[aria-current="page"] { background: var(--akcent-tlo); color: var(--akcent-mocny); font-weight: 700; } .menu__znacznik { font-size: 0.8rem; color: var(--tekst-2); font-weight: 400; white-space: nowrap; } .menu__wyloguj { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--linia); } .tresc { width: 100%; max-width: 960px; margin: 0 auto; padding: 24px var(--odstep) calc(40px + env(safe-area-inset-bottom, 0px)); min-width: 0; } .tresc:focus { outline: none; } /* Telefon: menu chowane pod przyciskiem (bez JS widoczne zawsze). */ .przycisk--menu { margin: 0; min-height: 44px; padding: 8px 16px; } @media (max-width: 879px) { .js .menu { display: none; } .js .menu.menu--otwarte { display: block; } html:not(.js) .przycisk--menu { display: none; } } @media (min-width: 880px) { .uklad { display: grid; grid-template-columns: var(--menu-szer) minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100vh; min-height: 100dvh; } .uklad--wejscie { grid-template-columns: minmax(0, 1fr); } .pasek { grid-column: 1 / -1; } .menu { grid-column: 1; border-bottom: 0; border-right: 1px solid var(--linia); padding: 16px 12px; } .tresc { grid-column: 2; padding-top: 32px; padding-left: 32px; padding-right: 32px; } .uklad--wejscie .tresc { grid-column: 1; } .pasek .przycisk--menu { display: none; } } /* --- Elementy --- */ .naglowek-strony { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 20px; } .plakietka { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--budowa-tlo); color: var(--budowa-tekst); font-size: 0.85rem; font-weight: 600; } .karta { background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--promien); box-shadow: var(--cien); padding: 18px var(--odstep); margin-bottom: var(--odstep); } .karta > :last-child { margin-bottom: 0; } .karta__naglowek { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 8px; } .karta__naglowek h2 { margin: 0; } .link-dalej { text-decoration: none; font-weight: 600; } .link-dalej:hover { text-decoration: underline; } .formularz { display: flex; flex-direction: column; gap: 6px; } .formularz label { font-weight: 600; margin-top: 10px; } .formularz input { font: inherit; font-size: 1.1rem; letter-spacing: 0.08em; padding: 12px 14px; min-height: 52px; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--powierzchnia-2); color: var(--tekst); width: 100%; max-width: 100%; } .formularz input:focus { outline: 3px solid var(--akcent); outline-offset: 1px; border-color: var(--akcent); } .przycisk { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-weight: 600; min-height: 48px; padding: 10px 20px; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--powierzchnia); color: var(--tekst); text-decoration: none; cursor: pointer; text-align: center; } .przycisk:hover { border-color: var(--akcent); } .przycisk--glowny { background: var(--akcent); color: var(--akcent-tekst); border-color: var(--akcent); margin-top: 18px; } .przycisk--glowny:hover { background: var(--akcent-mocny); border-color: var(--akcent-mocny); } .przycisk--pelny { width: 100%; } .alert { padding: 12px 14px; border-radius: var(--promien); } .alert--blad { background: var(--blad-tlo); color: var(--blad-tekst); } .alert--info { background: var(--info-tlo); color: var(--info-tekst); } .pusto, .przypis { color: var(--tekst-2); } .przypis { font-size: 0.9rem; } /* Strona logowania */ .wejscie { max-width: 420px; margin: 4vh auto 0; background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: 16px; box-shadow: var(--cien); padding: 28px 22px; } .wejscie h1 { margin-bottom: 8px; } .wejscie__opis { color: var(--tekst-2); } /* Dziennik */ .filtry { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--odstep); } .filtr { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; border: 1px solid var(--linia); border-radius: 999px; background: var(--powierzchnia); color: var(--tekst); text-decoration: none; } .filtr:hover { border-color: var(--akcent); text-decoration: underline; } .filtr[aria-current="true"] { background: var(--akcent); border-color: var(--akcent); color: var(--akcent-tekst); font-weight: 600; } .zdarzenia { list-style: none; margin: 0; padding: 0; } .zdarzenie { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: baseline; column-gap: 10px; row-gap: 2px; padding: 12px 0; border-top: 1px solid var(--linia); } .zdarzenie:first-child { border-top: 0; padding-top: 4px; } .zdarzenie__kropka { width: 10px; height: 10px; border-radius: 50%; background: var(--neutralne); align-self: center; } .zdarzenie--ok .zdarzenie__kropka { background: var(--ok); } .zdarzenie--zle .zdarzenie__kropka { background: var(--zle); } .zdarzenie__typ { font-weight: 600; min-width: 0; overflow-wrap: anywhere; } .zdarzenie__czas { color: var(--tekst-2); white-space: nowrap; font-variant-numeric: tabular-nums; } .zdarzenie__szczegoly { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--tekst-2); min-width: 0; overflow-wrap: anywhere; } .zdarzenie__ip { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.9rem; } @media (max-width: 479px) { .zdarzenie { grid-template-columns: 12px minmax(0, 1fr); } .zdarzenie__czas { grid-column: 2; } } .stronicowanie { display: flex; flex-wrap: wrap; gap: 10px; } /* --- Podgląd (S2) --- */ code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.9em; overflow-wrap: anywhere; } .przypis--zle { color: var(--blad-tekst); } .kropka { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--neutralne); flex-shrink: 0; vertical-align: baseline; } .kropka--ok { background: var(--ok); } .kropka--zle { background: var(--zle); } .kropka--uwaga { background: var(--uwaga); } /* Zdanie stanu na pulpicie i alarm rozjazdu blokad */ .stan-dnia { display: flex; align-items: flex-start; gap: 14px; padding: 18px var(--odstep); margin-bottom: 10px; border-radius: var(--promien); border: 1px solid var(--linia); background: var(--powierzchnia); } .stan-dnia p { margin: 0 0 4px; } .stan-dnia p:last-child { margin-bottom: 0; } .stan-dnia__zdanie { font-size: 1.35rem; font-weight: 700; line-height: 1.25; } .stan-dnia__znak { width: 18px; height: 18px; border-radius: 50%; margin-top: 6px; background: var(--neutralne); flex-shrink: 0; } .stan-dnia--ok { background: var(--ok-tlo); border-color: transparent; } .stan-dnia--ok .stan-dnia__znak { background: var(--ok); } .stan-dnia--zle { background: var(--blad-tlo); color: var(--blad-tekst); border-color: transparent; } .stan-dnia--zle .stan-dnia__znak { background: var(--zle); } .stan-dnia--uwaga { background: var(--uwaga-tlo); border-color: transparent; } .stan-dnia--uwaga .stan-dnia__znak { background: var(--uwaga); } /* Lista wierszy stanu: kropka, nazwa, stan. Na telefonie stan pod nazwą. */ .wiersze { list-style: none; margin: 0; padding: 0; } .wiersz { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--linia); } .wiersz:first-child { border-top: 0; padding-top: 4px; } .wiersz:last-child { padding-bottom: 0; } .wiersz .kropka { align-self: center; } .wiersz__nazwa { font-weight: 600; min-width: 0; overflow-wrap: anywhere; } .wiersz__opis { display: block; font-weight: 400; font-size: 0.9rem; color: var(--tekst-2); } .wiersz__stan { grid-column: 2; min-width: 0; overflow-wrap: anywhere; } .wiersz__czas { display: block; font-size: 0.9rem; color: var(--tekst-2); } .wiersz--zle .wiersz__stan strong { color: var(--zle); } @media (min-width: 700px) { .wiersz { grid-template-columns: 12px minmax(0, 1fr) minmax(0, 1fr); } .wiersz__stan { grid-column: 3; text-align: right; } } /* Pozycje harmonogramu: udane zwinięte w
, błędne i wyłączone rozwinięte. */ .pozycje { list-style: none; margin: 0; padding: 0; } .pozycja { border-top: 1px solid var(--linia); } .pozycja:first-child { border-top: 0; } .pozycja__glowa { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding: 10px 0; min-height: 44px; } .pozycja__glowa .kropka { align-self: center; } summary.pozycja__glowa { grid-template-columns: 12px minmax(0, 1fr) auto; cursor: pointer; list-style: none; } summary.pozycja__glowa::-webkit-details-marker { display: none; } summary.pozycja__glowa::after { content: ""; width: 9px; height: 9px; margin: 0 4px 0 8px; border-right: 2px solid var(--tekst-2); border-bottom: 2px solid var(--tekst-2); transform: rotate(45deg); align-self: center; } details[open] > summary.pozycja__glowa::after { transform: rotate(-135deg); } summary.pozycja__glowa:hover .pozycja__nazwa { text-decoration: underline; } .pozycja__nazwa { font-weight: 600; min-width: 0; overflow-wrap: anywhere; } .pozycja__skrot, .pozycja__drobne { display: block; font-weight: 400; font-size: 0.9rem; color: var(--tekst-2); overflow-wrap: anywhere; } .pozycja__drobne--wciecie { margin: 0 0 4px 24px; } .wiersze + .przypis { margin-top: 12px; } .pozycja--zle .pozycja__nazwa { color: var(--zle); } .pozycja__pary { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 0 0 12px 24px; } .pozycja__pary div { display: grid; grid-template-columns: minmax(0, 1fr); } @media (min-width: 480px) { .pozycja__pary div { grid-template-columns: 7.5em minmax(0, 1fr); column-gap: 8px; } } .pozycja__pary dt { color: var(--tekst-2); font-size: 0.9rem; } .pozycja__pary dd { margin: 0; overflow-wrap: anywhere; } @media (min-width: 760px) { .pozycja__pary { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--odstep); } } /* Kafle z liczbami (Serwer) */ .kafle { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: var(--odstep); } .kafel { display: flex; flex-direction: column; gap: 2px; padding: 14px var(--odstep); background: var(--powierzchnia); border: 1px solid var(--linia); border-left: 5px solid var(--neutralne); border-radius: var(--promien); min-width: 0; } .kafel--ok { border-left-color: var(--ok); } .kafel--uwaga { border-left-color: var(--uwaga); } .kafel--zle { border-left-color: var(--zle); } .kafel__etykieta { color: var(--tekst-2); font-size: 0.9rem; } .kafel__liczba { font-size: 1.7rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; } .kafel__liczba--mniejsza { font-size: 1.25rem; } .kafel__opis { font-size: 0.9rem; color: var(--tekst-2); overflow-wrap: anywhere; } /* Blokady */ .dwie-kolumny { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--odstep); } @media (min-width: 760px) { .dwie-kolumny { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .duzy-stan { font-size: 1.3rem; font-weight: 700; padding: 8px 12px; border-radius: 10px; background: var(--powierzchnia-2); } .duzy-stan--ok { background: var(--ok-tlo); } .duzy-stan--uwaga { background: var(--uwaga-tlo); } .duzy-stan--zle { background: var(--blad-tlo); color: var(--blad-tekst); } .pary { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0 0 12px; } .pary dt { color: var(--tekst-2); font-size: 0.9rem; margin-top: 8px; } .pary dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; } /* Linki */ .linki { list-style: none; margin: 0; padding: 0; } .linki__pozycja { display: flex; flex-direction: column; padding: 12px 0; border-top: 1px solid var(--linia); min-width: 0; } .linki__pozycja:first-child { border-top: 0; padding-top: 4px; } .linki__link { font-weight: 700; text-decoration: none; overflow-wrap: anywhere; min-height: 28px; } a.linki__link:hover { text-decoration: underline; } .linki__link--brak { color: var(--tekst-2); } .linki__adres { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.85rem; color: var(--tekst-2); overflow-wrap: anywhere; } .linki__opis { font-size: 0.9rem; color: var(--tekst-2); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }