/* Reltika Flow - arkusz aplikacji. Tokeny z pakietu marki (07_wytyczne/design-tokens.css); jasny akcent wyliczany z miętowego (color-mix), nie dobierany na oko. Font: DejaVu Sans z pakietu (licencja: fonts/FONT-LICENSE.txt). */ @font-face { font-family: 'Flow'; src: url('../fonts/DejaVuSans.ttf') format('truetype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Flow'; src: url('../fonts/DejaVuSans-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; } :root { --rf-logo-blue: #084A83; --rf-ink: #102C3A; --rf-steel-blue: #2E6880; --rf-teal: #007F82; --rf-mint: #70E0CA; --rf-cloud: #F4F8FA; --rf-white: #FFFFFF; --rf-text-secondary: #526875; --rf-border: #DCE6EB; --rf-accent-light: color-mix(in srgb, var(--rf-mint) 26%, white); --rf-danger: #C62828; --rf-warning: #B7791F; --rf-success: #2E7D32; --rf-radius-control: 6px; --rf-radius-panel: 12px; --rf-font: 'Flow', 'DejaVu Sans', Arial, sans-serif; } :root { --pasek-wys: 48px; } html, body { height: 100%; margin: 0; } body.flow { font-family: var(--rf-font); font-size: 14px; color: var(--rf-ink); background: var(--rf-cloud); overflow: hidden; } [x-cloak] { display: none !important; } button { font: inherit; } /* --- Pulpit (pod paskiem) --- */ .pulpit { position: absolute; inset: var(--pasek-wys) 0 0 0; } /* Tapeta użytkownika (Panel sterowania - Tapeta pulpitu): zmienna --tapeta na . */ .pulpit.z-tapeta { background: var(--tapeta) center / cover no-repeat; } .pulpit.z-tapeta .pulpit-skrot-nazwa { color: var(--rf-white); background: color-mix(in srgb, var(--rf-ink) 72%, transparent); padding: 2px 8px; border-radius: 6px; } .pulpit.z-tapeta .pulpit-skrot:hover, .pulpit.z-tapeta .pulpit-skrot:focus-visible { background: rgba(16,44,58,0.45); } .pulpit-skroty { position: absolute; inset: 0; --kom-w: 108px; --kom-h: 112px; --margines: 14px; } .pulpit-skrot { position: absolute; left: calc(var(--margines) + var(--kol, 0) * var(--kom-w)); top: calc(var(--margines) + var(--wiersz, 0) * var(--kom-h)); width: 100px; display: flex; flex-direction: column; align-items: center; gap: 6px; touch-action: none; background: none; border: 0; border-radius: 12px; padding: 8px 4px; cursor: pointer; user-select: none; color: var(--rf-ink); font-weight: 500; text-align: center; } .pulpit-skrot:hover, .pulpit-skrot:focus-visible { background: var(--rf-accent-light); outline: none; } .pulpit-skrot.przeciagany { z-index: 50; cursor: grabbing; opacity: 0.9; transition: none; box-shadow: 0 8px 24px rgba(16,44,58,0.25); background: var(--rf-accent-light); } .pulpit-skrot:not(.przeciagany) { transition: left 0.15s, top 0.15s; } .pulpit-skrot-ikona { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--rf-ink); color: var(--rf-white); } /* --- Górny pasek (układ jak w GUI dostawcy: aplikacje | okna | szukaj, zadania, zegar, zalogowany) --- */ .pasek { position: fixed; left: 0; right: 0; top: 0; height: var(--pasek-wys); display: flex; align-items: stretch; background: var(--rf-ink); color: var(--rf-white); z-index: 100000; box-shadow: 0 2px 8px rgba(16,44,58,0.25); } .pasek-guzik { position: relative; flex: none; width: var(--pasek-wys); height: var(--pasek-wys); display: grid; place-items: center; padding: 0; border: 0; cursor: pointer; background: none; color: rgba(255,255,255,0.78); } .pasek-guzik:hover, .pasek-guzik:focus-visible, .pasek-guzik.otwarte { background: rgba(255,255,255,0.12); color: var(--rf-white); outline: none; } .pasek-sygnet { width: 32px; height: 32px; border-radius: 7px; display: block; } .pasek-okna { flex: 1; min-width: 0; display: flex; overflow-x: auto; scrollbar-width: none; } .pasek-okno { flex: none; display: flex; align-items: center; gap: 8px; max-width: 220px; height: 100%; padding: 0 14px; border: 0; border-bottom: 3px solid transparent; cursor: pointer; background: none; color: rgba(255,255,255,0.85); font-size: 13px; white-space: nowrap; } .pasek-okno svg { flex: none; } .pasek-okno-tytul { overflow: hidden; text-overflow: ellipsis; } .pasek-okno:hover { background: rgba(255,255,255,0.08); } .pasek-okno.aktywne { background: rgba(255,255,255,0.14); color: var(--rf-white); border-bottom-color: var(--rf-accent-light); font-weight: 600; } .pasek-okno.ukryte { opacity: 0.55; } .pasek-prawy { flex: none; display: flex; align-items: stretch; } .plakietka-licznik { position: absolute; top: 6px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: var(--rf-teal); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; } .plakietka-licznik[hidden] { display: none; } .plakietka-po-terminie { background: var(--rf-danger); } .pasek-zegar { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding: 0 12px; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; } .pasek-zegar-czas { font-size: 16px; font-weight: 600; } .pasek-zegar-data { font-size: 11px; opacity: 0.75; } .twarz { display: block; border-radius: 50%; object-fit: cover; background: var(--rf-accent-light); } .twarz-inicjaly { display: grid; place-items: center; color: var(--rf-ink); font-weight: 700; } .twarz-mala { width: 34px; height: 34px; font-size: 13px; box-shadow: 0 0 0 2px rgba(255,255,255,0.35); } .twarz-duza { width: 104px; height: 104px; font-size: 34px; box-shadow: 0 0 0 3px rgba(255,255,255,0.25); } /* --- Szuflada aplikacji (z lewej) i panel zalogowanego (z prawej) --- */ .szuflada, .profil { position: fixed; top: var(--pasek-wys); bottom: 0; z-index: 100001; overflow-y: auto; background: var(--rf-ink); color: var(--rf-white); box-shadow: 0 10px 30px rgba(16,44,58,0.35); } .szuflada { left: 0; width: 300px; padding: 12px 14px 20px; display: flex; flex-direction: column; gap: 2px; } .szuflada-naglowek { display: flex; align-items: center; justify-content: space-between; font-size: 17px; font-weight: 600; padding: 2px 0 10px; } .szuflada-zamknij { background: none; border: 0; color: inherit; cursor: pointer; padding: 4px; border-radius: 8px; } .szuflada-zamknij:hover { background: rgba(255,255,255,0.12); } .szuflada-szukaj { height: 40px; padding: 0 12px; margin-bottom: 8px; border: 0; border-radius: 10px; background: rgba(255,255,255,0.1); background-image: none; color: var(--rf-white); font: inherit; appearance: none; -webkit-appearance: none; box-shadow: none; } .szuflada-szukaj::placeholder { color: rgba(255,255,255,0.6); } .szuflada-szukaj:focus { outline: 2px solid var(--rf-accent-light); } .szuflada-grupa { margin: 14px 0 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; } .szuflada-pozycja { display: flex; align-items: center; gap: 12px; padding: 6px; border: 0; border-radius: 10px; background: none; color: inherit; text-align: left; text-decoration: none; cursor: pointer; font-weight: 500; } .szuflada-pozycja:hover, .szuflada-pozycja:focus-visible { background: rgba(255,255,255,0.12); outline: none; } .szuflada-ikona { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--rf-accent-light); color: var(--rf-ink); } .profil { right: 0; width: 340px; padding: 32px 24px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; } .profil .twarz-duza { margin-bottom: 10px; } .profil-nazwisko { font-size: 19px; font-weight: 600; } .profil-login { opacity: 0.8; } .profil-stanowisko { font-size: 13px; opacity: 0.7; } .profil-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.3); background: none; color: var(--rf-white); font: inherit; cursor: pointer; } .profil-link:hover, .profil-link:focus-visible { background: rgba(255,255,255,0.12); outline: none; } .profil-wyloguj { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 10px 22px; border-radius: 10px; background: var(--rf-danger); color: #fff; font-weight: 600; text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; } .profil-wyloguj:hover, .profil-wyloguj:focus-visible { background: #A31F1F; outline: none; } /* --- Okno „Moje zadania": filtry i sekcje (brief jak „plan dnia" w GUI dostawcy) --- */ .zadania-filtry { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 10px; } .zadania-filtry .okno-guzik { margin-left: auto; } .filtry { display: flex; flex-wrap: wrap; background: var(--rf-cloud); border-radius: 10px; padding: 3px; gap: 2px; } .filtr { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 0; border-radius: 8px; background: none; color: var(--rf-ink); font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; } .filtr:hover, .filtr:focus-visible { background: var(--rf-accent-light); outline: none; } .filtr.aktywny { background: var(--rf-ink); color: var(--rf-white); } .filtr-liczba { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 9px; box-sizing: border-box; background: rgba(16,44,58,0.1); font-size: 11px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; } .filtr.aktywny .filtr-liczba { background: rgba(255,255,255,0.22); } .zadania-uwaga { margin: -4px 0 8px; } .zadania-sekcja { margin-bottom: 10px; } .zadania-sekcja-tytul { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--rf-cloud); font-size: 13px; font-weight: 600; } .zadania-sekcja-zalegle .zadania-sekcja-tytul { box-shadow: inset 3px 0 0 var(--rf-danger); } .zadania-sekcja-dzisiaj .zadania-sekcja-tytul { box-shadow: inset 3px 0 0 var(--rf-teal); } .zadanie { display: grid; grid-template-columns: 22px 150px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 10px; border-bottom: 1px solid var(--rf-cloud); font-size: 13px; } .zadanie:hover { background: rgba(209,230,247,0.45); } .zadanie-stan { display: grid; place-items: center; color: var(--rf-teal); } .zadanie-stan-wykonane { color: var(--rf-success); } .zadanie-stan-przegrana { color: var(--rf-danger); } .zadanie-kiedy { white-space: nowrap; font-variant-numeric: tabular-nums; } .zadanie-po-terminie .zadanie-kiedy { color: var(--rf-danger); font-weight: 600; } .zadanie-opis { display: flex; flex-direction: column; min-width: 0; } .zadanie-tytul { font-weight: 500; overflow-wrap: anywhere; } .zadanie-sprawa { font-size: 12px; color: var(--rf-ink); opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .zadanie-sprawa:hover { opacity: 1; } .zadanie-kategoria { white-space: nowrap; } .zadanie-zakonczone .zadanie-tytul { opacity: 0.75; } /* --- Okno „Panel sterowania" (układ jak u dostawcy: grupy w dwóch kolumnach, pozycje po przecinku) --- */ .panel-tytul { margin: 4px 0 14px; font-size: 20px; font-weight: 600; } .panel-kolumny { columns: 2 340px; column-gap: 40px; } .panel-grupa { break-inside: avoid; margin-bottom: 18px; } .panel-grupa h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; } .panel-pozycje { margin: 0; line-height: 1.9; } .panel-pozycje a { color: var(--rf-teal); text-decoration: none; font-weight: 500; } .panel-pozycje a:hover, .panel-pozycje a:focus-visible { text-decoration: underline; } .panel-stary { color: rgba(16,44,58,0.45); } /* --- Okno „Tapeta pulpitu" --- */ .tapety-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 10px; } .tapeta-kafel { position: relative; aspect-ratio: 16 / 10; border: 3px solid transparent; border-radius: 14px; cursor: pointer; background: var(--rf-cloud) center / cover no-repeat; box-shadow: 0 2px 8px rgba(16,44,58,0.18); padding: 0; overflow: hidden; } .tapeta-kafel:hover, .tapeta-kafel:focus-visible { border-color: var(--rf-accent-light); outline: none; } .tapeta-kafel.wybrana { border-color: var(--rf-teal); } .tapeta-jasna { background: var(--rf-cloud); } .tapeta-podpis { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 10px; text-align: left; font-size: 12px; font-weight: 600; background: rgba(16,44,58,0.72); color: var(--rf-white); } .tapeta-kafel.wybrana .tapeta-podpis::after { content: ' - wybrana'; } /* --- Panel „Powiadomienia" (z prawej): granatowy nagłówek, białe karty na szarym tle --- */ .panel-prawy { position: fixed; top: var(--pasek-wys); bottom: 0; right: 0; z-index: 100001; width: 420px; max-width: 100vw; display: flex; flex-direction: column; background: var(--rf-cloud); color: var(--rf-ink); box-shadow: 0 10px 30px rgba(16,44,58,0.35); } .powiadomienia-naglowek { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 10px 18px; background: var(--rf-ink); color: var(--rf-white); font-size: 17px; font-weight: 600; } .powiadomienia-guziki { display: flex; gap: 2px; } .powiadomienia-naglowek .ikona-guzik { color: var(--rf-white); } .powiadomienia-naglowek .ikona-guzik:hover, .powiadomienia-naglowek .ikona-guzik:focus-visible, .powiadomienia-naglowek .ikona-guzik.wlaczony { background: rgba(255,255,255,0.14); color: var(--rf-white); } .powiadomienia-szukaj { margin: 10px 12px 0; background: var(--rf-white); color: var(--rf-ink); border: 1px solid var(--rf-accent-light); } .powiadomienia-szukaj::placeholder { color: rgba(16,44,58,0.5); } .powiadomienia-lista { flex: 1; overflow-y: auto; padding: 10px 12px 16px; display: flex; flex-direction: column; gap: 10px; } .powiadomienia-pusto { padding: 30px 10px; text-align: center; opacity: 0.7; } .powiadomienie { background: var(--rf-white); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .powiadomienie.przypiete { box-shadow: inset 0 0 0 2px var(--rf-accent-light); } .powiadomienie-glowa { display: flex; gap: 12px; align-items: flex-start; } .powiadomienie-naglowek { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .powiadomienie-autor { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .powiadomienie-autor time { white-space: nowrap; font-variant-numeric: tabular-nums; } .powiadomienie-tytul { font-size: 13px; opacity: 0.8; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .powiadomienie-temat { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .powiadomienie-tresc { margin: 0; font-size: 13px; white-space: pre-line; overflow-wrap: anywhere; } .powiadomienie-stopka { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; } .powiadomienie-akcje { display: flex; gap: 2px; margin-left: auto; } .ikona-guzik { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: rgba(16,44,58,0.55); cursor: pointer; } .ikona-guzik:hover, .ikona-guzik:focus-visible { background: var(--rf-cloud); color: var(--rf-ink); outline: none; } .ikona-guzik.wlaczony { color: var(--rf-ink); background: var(--rf-accent-light); } .twarz-srednia { width: 44px; height: 44px; font-size: 15px; flex: none; } /* --- Panel zadań (plan dnia): kolumna osób z lewej, zadania z prawej --- */ .zadania-panel { width: 520px; } .zadania-tresc { flex: 1; min-height: 0; display: flex; } .plan { flex: 1; min-height: 0; display: flex; } .plan-osoby { flex: none; width: 96px; overflow-y: auto; background: var(--rf-ink); color: var(--rf-white); display: flex; flex-direction: column; padding: 8px 0; } .plan-osoba { position: relative; } .plan-osoba-guzik, .plan-dodaj { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border: 0; background: none; color: inherit; cursor: pointer; } .plan-osoba-guzik:hover, .plan-dodaj:hover, .plan-osoba-guzik:focus-visible { background: rgba(255,255,255,0.1); outline: none; } .plan-osoba.aktywna .plan-osoba-guzik, .plan-dodaj.aktywna { background: rgba(255,255,255,0.16); box-shadow: inset -3px 0 0 var(--rf-accent-light); } .plan-twarz { position: relative; } .plan-twarz .plakietka-licznik { top: -4px; right: -8px; } .plan-imie { font-size: 12px; max-width: 88px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .plan-osoba-usun { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; display: none; place-items: center; background: rgba(255,255,255,0.2); color: var(--rf-white); cursor: pointer; } .plan-osoba:hover .plan-osoba-usun, .plan-osoba-usun:focus-visible { display: grid; } .plan-dodaj { margin-top: auto; } .plan-dodaj-plus { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.2); font-size: 26px; line-height: 1; } .plan-tresc { flex: 1; min-width: 0; overflow-y: auto; padding: 10px 12px 16px; background: var(--rf-white); } .plan-sekcja { margin-bottom: 10px; } .plan-sekcja-tytul { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 8px 10px; border-radius: 8px; background: var(--rf-cloud); font-size: 13px; font-weight: 600; } .plan-sekcja-przeszle .plan-sekcja-tytul { box-shadow: inset 3px 0 0 var(--rf-danger); } .plan-sekcja-dzisiaj .plan-sekcja-tytul { box-shadow: inset 3px 0 0 var(--rf-teal); } .plan-sekcja-pusta .plan-sekcja-tytul { box-shadow: none; } .plan-zadanie { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 6px 6px; border-bottom: 1px solid var(--rf-cloud); font-size: 13px; } .plan-zadanie .zadanie-stan { padding-top: 2px; } .plan-zadanie-opis { display: flex; flex-direction: column; min-width: 0; } .plan-pusto { margin: 4px 10px; } .plan-kandydat { display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0; border-bottom: 1px solid var(--rf-cloud); background: none; color: var(--rf-ink); cursor: pointer; } .plan-kandydat:hover, .plan-kandydat:focus-visible { background: var(--rf-accent-light); outline: none; } .plan-wszystkie { margin-top: 6px; } /* --- Panel „Szukaj" (jasny, jak u dostawcy: duży nagłówek, pole, filtry, wyniki poniżej) --- */ .szukaj-panel { width: 600px; background: var(--rf-cloud); } .szukaj-formularz { padding: 14px 20px 16px; background: var(--rf-white); border-bottom: 1px solid rgba(16,44,58,0.1); display: flex; flex-direction: column; gap: 12px; } .szukaj-naglowek { display: flex; align-items: center; justify-content: space-between; } .szukaj-naglowek h2 { margin: 0; font-size: 28px; font-weight: 600; } .szukaj-pole { display: flex; border: 1px solid rgba(16,44,58,0.3); border-radius: 10px; overflow: hidden; background: var(--rf-white); } .szukaj-pole:focus-within { border-color: var(--rf-teal); box-shadow: 0 0 0 3px rgba(20,120,242,0.15); } .szukaj-pole input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 0; outline: none; font: inherit; color: var(--rf-ink); background: none; } .szukaj-pole .ikona-guzik { width: 42px; height: 40px; border-radius: 0; border-left: 1px solid rgba(16,44,58,0.15); } .szukaj-filtry { display: flex; gap: 16px; align-items: flex-start; } .szukaj-filtr { display: flex; flex-direction: column; gap: 6px; flex: 1; } .szukaj-filtr-waski { flex: none; width: 170px; } .szukaj-etykieta { font-size: 12px; font-weight: 600; } .szukaj-kategorie { display: flex; flex-wrap: wrap; gap: 6px; } .szukaj-kategoria { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid rgba(16,44,58,0.25); border-radius: 8px; font-size: 12px; cursor: pointer; user-select: none; color: rgba(16,44,58,0.6); } .szukaj-kategoria input { position: absolute; opacity: 0; pointer-events: none; } .szukaj-kategoria:has(input:checked) { background: var(--rf-teal); border-color: var(--rf-teal); color: #fff; } .szukaj-kategoria:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(20,120,242,0.3); } #szukaj-kiedy { height: 32px; border: 1px solid rgba(16,44,58,0.25); border-radius: 8px; padding: 0 8px; font: inherit; font-size: 13px; color: var(--rf-ink); background: var(--rf-white); } .szukaj-przelacznik { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; margin-top: 4px; } .szukaj-przelacznik input { appearance: none; -webkit-appearance: none; width: 34px; height: 18px; border-radius: 9px; background: rgba(16,44,58,0.25); position: relative; cursor: pointer; margin: 0; transition: background 0.15s; } .szukaj-przelacznik input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left 0.15s; } .szukaj-przelacznik input:checked { background: var(--rf-success); } .szukaj-przelacznik input:checked::after { left: 18px; } .szukaj-wyniki { flex: 1; overflow-y: auto; padding: 12px 16px 20px; } .szukaj-info { margin: 6px 4px 12px; } .szukaj-sekcja { background: var(--rf-white); border-radius: 12px; padding: 6px; margin-bottom: 12px; } .szukaj-wynik { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 7px 6px; border-bottom: 1px solid var(--rf-cloud); font-size: 13px; } .szukaj-wynik.klikalny { cursor: pointer; } .szukaj-wynik.klikalny:hover, .szukaj-wynik.klikalny:focus-visible { background: rgba(209,230,247,0.5); outline: none; } .szukaj-podtytul { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .szukaj-panel.htmx-request .szukaj-wyniki { opacity: 0.55; } /* --- Okna WinBox w barwach marki --- */ .winbox.flow-okno { background: var(--rf-ink); border-radius: 12px 12px 8px 8px; /* Nieaktywne okna: jasna ramka + cień - nałożone na siebie (i na granatowy pasek, nagłówek formatki) mają widoczną krawędź. */ box-shadow: 0 0 0 1px color-mix(in srgb, var(--rf-steel-blue) 55%, white), 0 14px 36px rgba(16,44,58,0.45); } .winbox.flow-okno.focus { /* aktywne: bez ramki (Szymon: „wygląda słabo") - wyróżnia je granatowy tytuł i mocniejszy cień */ box-shadow: 0 18px 44px rgba(16,44,58,0.55); } .winbox.flow-okno:not(.focus) { background: var(--rf-steel-blue); } .winbox.flow-okno .wb-title { font-family: var(--rf-font); font-weight: 600; font-size: 13px; } .winbox.flow-okno .wb-body { background: var(--rf-white); color: var(--rf-ink); overflow: auto; border-radius: 0 0 8px 8px; } /* Nieaktywne okno - bez przezroczystości (treść tylnych okien prześwitywała), tylko jaśniejszy pasek tytułu. */ /* --- Treść okien --- */ .okno { padding: 12px 14px; } .okno-pasek { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .okno-licznik { font-size: 12px; opacity: 0.75; } .okno-guzik { background: var(--rf-accent-light); color: var(--rf-ink); border: 0; border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } .laduje, .pusto { padding: 16px; opacity: 0.7; } .tabela { width: 100%; border-collapse: collapse; font-size: 13px; } .tabela th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; padding: 6px 8px; border-bottom: 2px solid var(--rf-accent-light); } .tabela td { padding: 7px 8px; border-bottom: 1px solid var(--rf-cloud); vertical-align: top; } .tabela-wiersz { cursor: pointer; } .tabela-wiersz:hover td { background: var(--rf-accent-light); } .tabela-zwarta td { padding: 5px 6px; } .tabela a { color: var(--rf-ink); } .mocno { font-weight: 600; } .drobne { font-size: 11px; opacity: 0.7; } .teczka { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--rf-cloud); font-weight: 600; font-size: 12px; } .plakietka { display: inline-block; padding: 2px 10px; border-radius: 10px; color: #fff; font-size: 12px; white-space: nowrap; } .po-terminie { color: var(--rf-danger); font-weight: 600; } .pilne { color: var(--rf-danger); font-weight: 700; } .stan { display: inline-block; padding: 2px 10px; border-radius: 10px; color: #fff; font-size: 12px; white-space: nowrap; background: #9e9e9e; } .stan-late { background: var(--rf-danger); } .stan-soon { background: var(--rf-warning); } .stan-ok { background: var(--rf-success); } .sprawa-naglowek { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; } .sprawa-tytul { font-size: 17px; font-weight: 700; } .sprawa-kolumny { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-bottom: 12px; } .karta { background: var(--rf-cloud); border-radius: 12px; padding: 10px 12px; } .karta h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; } .pola { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; } .pola dt { opacity: 0.7; } .pola dd { margin: 0; font-weight: 500; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* --- Marka w pasku i szufladzie --- */ .pasek-sygnet { border-radius: 8px; background: var(--rf-white); padding: 3px; box-sizing: border-box; } .szuflada-logo { height: 30px; } .szuflada-wle { margin-top: auto; padding-top: 18px; font-size: 11px; opacity: 0.7; letter-spacing: 0.04em; } .szuflada-wle b { color: var(--rf-mint); margin-right: 6px; } .ikona-kolumna { width: 18px; color: var(--rf-steel-blue); } /* --- Formatka sprawy (wzór: formatki spraw eLift) --- */ .formatka { display: flex; flex-direction: column; gap: 12px; } .formatka-naglowek { display: flex; align-items: center; gap: 18px; padding: 14px 18px; border-radius: var(--rf-radius-panel); background: var(--rf-ink); color: var(--rf-white); } .formatka-osoba { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 110px; font-size: 12px; font-weight: 700; text-align: center; } .formatka-tytul { flex: 1; min-width: 0; } .formatka-tytul h2 { margin: 0 0 4px; font-size: 22px; font-weight: 600; color: var(--rf-mint); line-height: 1.25; } .formatka-numer { display: flex; align-items: center; gap: 6px; font-size: 13px; opacity: 0.85; } .formatka-stan { align-self: flex-start; } .etapy { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; overflow-x: auto; } .etap { flex: 1 1 0; min-width: 110px; padding: 10px 18px 10px 26px; font-size: 12px; font-weight: 700; text-align: center; background: var(--rf-border); color: var(--rf-text-secondary); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%); } .etap:first-child { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); padding-left: 14px; } .etap-przebyty { background: color-mix(in srgb, var(--rf-teal) 22%, white); color: var(--rf-ink); } .etap-biezacy { background: var(--etap-kolor, var(--rf-teal)); color: var(--rf-white); } .formatka-kolumny { display: grid; grid-template-columns: minmax(300px, 5fr) 7fr; gap: 12px; align-items: start; } .formatka-prawa { display: flex; flex-direction: column; gap: 12px; } .panel { background: var(--rf-white); border: 1px solid var(--rf-border); border-radius: var(--rf-radius-panel); overflow: hidden; } .panel-naglowek { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 14px; background: var(--rf-ink); color: var(--rf-white); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .panel .tabela { margin: 0; } .panel .tabela td { padding-left: 12px; } .formatka-pola { margin: 0; } .formatka-pole { display: grid; grid-template-columns: 170px 1fr; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--rf-cloud); font-size: 13px; } .formatka-pole dt { display: flex; align-items: center; gap: 6px; color: var(--rf-text-secondary); } .formatka-pole dt svg { color: var(--rf-steel-blue); flex: none; } .formatka-pole dd { margin: 0; font-weight: 500; } tr.klikalny { cursor: pointer; } tr.klikalny:hover td, tr.klikalny:focus-visible td { background: var(--rf-accent-light); } @media (max-width: 1100px) { .formatka-kolumny { grid-template-columns: 1fr; } } /* --- Moduł (Serwis): zakładki, filtry z lewej, lista --- */ .serwis { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; } .zakladki { display: flex; gap: 4px; border-bottom: 2px solid var(--rf-border); margin-bottom: 10px; } .zakladka { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; color: var(--rf-text-secondary); border-bottom: 3px solid transparent; margin-bottom: -2px; } .zakladka:hover, .zakladka:focus-visible { color: var(--rf-ink); outline: none; } .zakladka.aktywna { color: var(--rf-teal); border-bottom-color: var(--rf-teal); } .modul { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 14px; align-items: start; } .modul-filtry { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 0; } .modul-szukaj { height: 34px; padding: 0 10px; border: 1px solid var(--rf-border); border-radius: var(--rf-radius-control); font: inherit; font-size: 13px; } .modul-filtry fieldset { margin: 0; padding: 8px 10px 10px; border: 1px solid var(--rf-border); border-radius: 10px; background: var(--rf-white); display: flex; flex-direction: column; gap: 5px; } .modul-filtry legend { padding: 0 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--rf-text-secondary); } .modul-filtry label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; } .modul-filtry label .filtr-liczba { margin-left: auto; } .modul-lista { min-width: 0; overflow-x: auto; } .modul-tabela td { vertical-align: middle; } .stan-urz-serwisowane { background: var(--rf-success); } .stan-urz-obce { background: #8A9BA5; } .stan-urz-wylaczone { background: var(--rf-text-secondary); } .termin-minela { color: var(--rf-danger); font-weight: 600; } .termin-konczy { color: var(--rf-warning); font-weight: 600; } .termin-brak { color: var(--rf-text-secondary); } .twarz-lista { width: 36px; height: 36px; font-size: 13px; margin: 0 auto; } .osoba-kolumna { text-align: center; min-width: 76px; } .zrodlo { text-align: center; color: var(--rf-steel-blue); } .postep { position: relative; width: 84px; height: 20px; border: 1px solid var(--rf-steel-blue); border-radius: 4px; overflow: hidden; background: var(--rf-white); } .postep-pasek { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--rf-mint) 70%, var(--rf-teal)); } .postep span { position: relative; display: block; text-align: center; font-size: 12px; font-weight: 700; line-height: 18px; } .zgloszenie-opis { min-width: 260px; } .czas { white-space: nowrap; font-weight: 600; } .czas-otwarte { color: var(--rf-teal); } /* --- Logowanie (pakiet marki v1.1: 03_logowanie + login-v12.css) --- Jedno ciągłe tło na całą stronę (brand/logowanie-tlo.png - linie i punkty przechodzą na jasną stronę, bez pionowej krawędzi paneli); panel formularza przezroczysty, pola białe. Na telefonie jasna tapeta i półprzezroczysty panel. */ body.logowanie-strona { overflow: auto; background: var(--rf-ink) url('../brand/logowanie-tlo.png') center center / 100% 100% no-repeat; } .logowanie { min-height: 100vh; display: grid; grid-template-columns: 42% 58%; } .logowanie-panel { display: flex; flex-direction: column; gap: 32px; padding: 48px 8% 28px; background: transparent; } .logowanie-panel > div, .logowanie-formularz { max-width: 390px; } .logowanie-logo { width: 290px; max-width: 100%; align-self: flex-start; margin-bottom: 8px; } .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.24em; color: var(--rf-teal); margin-bottom: 14px; } .eyebrow-mint { color: var(--rf-mint); } .logowanie h1 { margin: 0 0 10px; font-size: 29px; font-weight: 700; color: var(--rf-ink); } .logowanie-wstep { margin: 0; color: var(--rf-text-secondary); } .logowanie-formularz { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; } .logowanie-formularz label { font-size: 13px; font-weight: 700; margin-top: 10px; } .logowanie-formularz input[type=text], .logowanie-formularz input[type=password] { height: 50px; padding: 0 14px; border: 1px solid var(--rf-border); border-radius: var(--rf-radius-control); font: inherit; color: var(--rf-ink); background: var(--rf-white); } .logowanie-formularz input:focus { outline: none; border-color: var(--rf-teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rf-teal) 18%, transparent); } .logowanie-haslo { position: relative; display: flex; } .logowanie-haslo input { flex: 1; padding-right: 72px !important; } .logowanie-haslo button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: none; font: inherit; font-size: 12px; color: var(--rf-text-secondary); cursor: pointer; padding: 6px; } .logowanie-opcje { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin: 8px 0 14px; } .logowanie-opcje label { font-weight: 400; margin: 0; display: flex; gap: 8px; align-items: center; } .logowanie-opcje a, .logowanie-stopka a { color: var(--rf-teal); text-decoration: none; } .przycisk { height: 52px; border: 0; border-radius: var(--rf-radius-control); background: var(--rf-teal); color: var(--rf-white); font: inherit; font-weight: 700; cursor: pointer; } .przycisk:hover, .przycisk:focus-visible { background: color-mix(in srgb, var(--rf-teal) 85%, black); outline: none; } .logowanie-blad { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--rf-radius-control); background: color-mix(in srgb, var(--rf-danger) 10%, white); color: var(--rf-danger); font-size: 13px; } .logowanie-stopka { margin-top: auto; font-size: 11px; color: var(--rf-text-secondary); line-height: 1.6; } .logowanie-opowiesc { display: flex; flex-direction: column; justify-content: center; padding: 80px 8%; color: var(--rf-white); background: transparent; } .logowanie-opowiesc h2 { margin: 0 0 22px; font-size: 56px; line-height: 1.05; font-weight: 700; } .logowanie-opowiesc p { margin: 0; font-size: 17px; line-height: 1.6; opacity: 0.85; } .wle { margin-top: 44px; font-size: 13px; letter-spacing: 0.08em; opacity: 0.85; } .wle b { color: var(--rf-mint); font-size: 18px; margin-right: 10px; } @media (max-width: 760px) { body.logowanie-strona { background: var(--rf-cloud) url('../tapety/03-obieg-jasny.png') center / cover no-repeat; } .logowanie { grid-template-columns: 1fr; } .logowanie-panel { padding: 32px 26px 25px; background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.95) 60%, rgba(255,255,255,.72) 100%); } .logowanie-logo { width: 285px; } .logowanie-opowiesc { display: none; } }