/* Warianty wyglądu aplikacji, wybierane przez nauczyciela w /konto (kolumna nauczyciel.wyglad). Ładowany na KAŻDEJ stronie (patrz app/widoki/uklad.php), razem ze wspólnym styl-.css i lista.css — tu dopisujemy tylko to, czego tamten arkusz nie zna: strukturę [data-wyglad] na i dodatkowe znaczniki (.dz-ico, .dz-klasy, .app-side), które w wariancie "klasyczny" mają zostać całkowicie niewidoczne i nie zmieniać istniejącego układu ani o piksel. */ :root{ --warn:#8A5A17; --warn-soft:#F4E7CF; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --warn:#E0B368; --warn-soft:#382D1A; } } :root[data-theme="dark"]{ --warn:#E0B368; --warn-soft:#382D1A; } /* Pasek górny na wąskim ekranie: imię i nazwisko schodzi, zostają same akcje — inaczej cały blok wychodził poza prawą krawędź i "wyloguj" było ucięte. Dotyczy wszystkich wariantów, bo to naprawa błędu, nie zmiana wyglądu. */ .sn-sep{color:var(--muted);opacity:.6;} @media (max-width:620px){ .sn-imie,.sn-sep{display:none;} /* separatory znikają razem z nazwiskiem */ .sn-kto{font-size:10.5px;gap:10px !important;} .sn-wrap{flex-wrap:wrap;row-gap:4px;} /* liczby w nagłówku: po zawinięciu pionowa kreska zostawała wisząca przy prawej krawędzi, bo border-right znikał tylko z ostatniego elementu */ .facts{gap:0 22px;} .fact{border-right:0;padding-right:0;margin-right:0;min-width:132px;} } /* ---------------------------------------------------------------- reset bazowy Znaczniki dopisane w hub.php dla wariantów kafelki/tematyczny są ukryte, dopóki dany wariant nie jest aktywny — żeby "klasyczny" zostawał bit w bit tym, czym był przed tą zmianą. */ .dz-ico,.dz-klasy{display:none;} .masthead-ico{display:none;} .masthead-tytul{display:flex;align-items:center;gap:16px;} body[data-wyglad="tematyczny"] .masthead-ico{ display:flex;flex:none;width:56px;height:56px;border-radius:12px;align-items:center; justify-content:center;color:#fff;box-shadow:var(--shadow); } body[data-wyglad="tematyczny"] .masthead-ico svg{width:30px;height:30px;} /* ---------------------------------------------------------------- app-shell Otwierany w naglowek() i zamykany w stopka() na KAŻDEJ stronie. W wariancie klasycznym/kafelkowym/tematycznym aside jest puste i niewidoczne — .app-shell zachowuje się jak zwykły blok, .app-content jak dotychczasowy przepływ. */ .app-shell{display:flex;align-items:stretch;flex:1;width:100%;min-width:0;} .app-content{flex:1;min-width:0;display:flex;flex-direction:column;} .app-side{display:none;} body[data-wyglad="boczny"] .app-shell{align-items:stretch;} body[data-wyglad="boczny"] .app-side{ display:flex;flex-direction:column;flex:none;width:236px;padding:22px 14px;gap:2px; background:var(--surface-2);border-right:1px solid var(--rule);position:sticky;top:0; align-self:flex-start;height:100vh;overflow-y:auto; } .app-side-lab{font:600 10px "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase; color:var(--muted);margin:0 0 8px;padding:0 10px;} .app-side-lista{display:flex;flex-direction:column;gap:2px;} .app-side-a{display:flex;flex-direction:column;gap:1px;padding:9px 10px;border-radius:6px; text-decoration:none;color:var(--ink-2);} .app-side-a:hover{background:var(--surface-3);} .app-side-a.on{background:var(--surface);color:var(--accent-2);box-shadow:var(--shadow);} .app-side-kw{font:600 10px "IBM Plex Mono",monospace;letter-spacing:.06em;color:var(--muted);} .app-side-a.on .app-side-kw{color:var(--accent-2);} .app-side-t{font-size:13px;line-height:1.3;} @media (max-width:840px){ body[data-wyglad="boczny"] .app-side{position:static;height:auto;width:auto; flex-direction:row;flex-wrap:wrap;overflow-x:auto;} body[data-wyglad="boczny"] .app-side-lista{flex-direction:row;flex-wrap:wrap;} body[data-wyglad="boczny"] .app-side-a{flex-direction:row;gap:8px;white-space:nowrap;} } /* =================================================================== KARTA Wspólny szkielet karty dla wariantów "kafelki" i "tematyczny". Oba używają tego samego markupu .dz co wariant klasyczny, więc zamiast przestawiać kolejność flexem układamy go w siatkę o nazwanych obszarach: ico kw ikona kursu + kwalifikacja (stała wysokość wiersza) tyt tyt tytuł, dowolna liczba wierszy fil fil pusty wiersz 1fr — rozpycha kartę do równej wysokości kls kls paski postępu klas (tylko hub w wariancie kafelki) hrs stn stopka: wymiar godzinowy + status Wiersz "fil" jest sztuczką, dzięki której stopki WSZYSTKICH kart w rzędzie leżą na jednej linii niezależnie od tego, czy tytuł zajął jeden wiersz czy trzy — to był główny powód, dla którego siatka wyglądała na rozjeżdżoną. */ body[data-wyglad="kafelki"] .lista, body[data-wyglad="tematyczny"] .lista{ display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:18px; } body[data-wyglad="kafelki"] .dz, body[data-wyglad="tematyczny"] .dz{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto 1fr auto auto auto; grid-template-areas: "ico kw" "tyt tyt" "fil fil" "kls kls" "lin lin" "hrs stn"; align-items:start; padding:18px; border-radius:12px; box-shadow:var(--shadow); } body[data-wyglad="kafelki"] .dz-ico, body[data-wyglad="tematyczny"] .dz-ico{grid-area:ico;} body[data-wyglad="kafelki"] .dz-rn, body[data-wyglad="tematyczny"] .dz-rn{grid-area:kw;align-self:center;} body[data-wyglad="kafelki"] .dz-t, body[data-wyglad="tematyczny"] .dz-t{ grid-area:tyt;font-size:1.02rem;line-height:1.34;margin-top:14px; } body[data-wyglad="kafelki"] .dz-klasy, body[data-wyglad="tematyczny"] .dz-klasy{grid-area:kls;margin-top:14px;} /* stopka — ciągła kreska rysowana jako własny wiersz siatki (dwie komórki z osobnym border-top dawały linię przerwaną w połowie karty) */ body[data-wyglad="kafelki"] .dz::before, body[data-wyglad="tematyczny"] .dz::before{ content:"";grid-area:lin;height:1px;background:var(--rule);margin:16px 0 11px; } body[data-wyglad="kafelki"] .dz-h, body[data-wyglad="tematyczny"] .dz-h, body[data-wyglad="kafelki"] .chip, body[data-wyglad="tematyczny"] .chip{ margin:0;padding:0;border:0;background:none;border-radius:0; } body[data-wyglad="kafelki"] .dz-h, body[data-wyglad="tematyczny"] .dz-h{ grid-area:hrs;font-size:13.5px;font-weight:600;color:var(--ink);align-self:end; white-space:nowrap; } body[data-wyglad="kafelki"] .chip, body[data-wyglad="tematyczny"] .chip{ grid-area:stn;justify-self:end;align-self:end; font:500 11px "IBM Plex Mono",monospace;color:var(--muted);white-space:nowrap; } /* kropka statusu tylko na kartach kursów — w działach .chip niesie liczbę lekcji */ body[data-wyglad="kafelki"] .dz[data-kurs] .chip.done::before, body[data-wyglad="tematyczny"] .dz[data-kurs] .chip.done::before{ content:"";display:inline-block;width:6px;height:6px;border-radius:50%; background:var(--ok);margin-right:6px;vertical-align:middle; } body[data-wyglad="kafelki"] .dz.off, body[data-wyglad="tematyczny"] .dz.off{opacity:.6;} /* paski postępu klas (hub, wariant kafelki) */ .dz-klasa{display:flex;align-items:center;gap:10px;font-size:12.5px;} .dz-klasa b{font:600 11.5px "IBM Plex Mono",monospace;color:var(--ink-2);flex:none;min-width:40px;} .dz-klasa i{flex:1;height:6px;border-radius:3px;background:var(--surface-3);position:relative; font-style:normal;overflow:hidden;} .dz-klasa i::before{content:"";position:absolute;inset:0;width:var(--p,0%);border-radius:3px; background:var(--accent);} .dz-klasa em{flex:none;min-width:32px;text-align:right;font-style:normal; font:500 11px "IBM Plex Mono",monospace;color:var(--muted);font-variant-numeric:tabular-nums;} .dz-klasa i.dz-brak{flex:1;height:auto;background:none;color:var(--muted); font:500 11px "IBM Plex Mono",monospace;} /* ---------------------------------------------------------------- kafelki Bez ikony kursu — tożsamość niesie kolorowy pasek u góry karty. */ body[data-wyglad="kafelki"] .dz{border-top:3px solid var(--accent);} body[data-wyglad="kafelki"] .dz.off{border-top-color:var(--rule-strong);} body[data-wyglad="kafelki"] .dz-klasy{display:flex;flex-direction:column;gap:7px;} /* ---------------------------------------------------------------- tematyczny Ikona kursu jako kwadrat z gradientem (kolor inline z app/motywy.php), zamiast paska przez całą szerokość, który zjadał pół karty i nic nie mówił. */ body[data-wyglad="tematyczny"] .dz{border:1px solid var(--rule);} body[data-wyglad="tematyczny"] .dz-ico{ display:flex;width:44px;height:44px;border-radius:11px;align-items:center; justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.28); } body[data-wyglad="tematyczny"] .dz-ico svg{width:23px;height:23px;color:#fff;} body[data-wyglad="tematyczny"] .dz-rn{margin-left:14px;} /* Karty bez widocznej ikony (cały wariant kafelki oraz działy na stronie kursu) — etykieta musi ruszać od lewej krawędzi karty, inaczej odsuwa ją szerokość kolumny z wymiarem godzinowym, który dzieli z nią pierwszą kolumnę siatki. */ body[data-wyglad="kafelki"] .dz-rn, body[data-wyglad="tematyczny"] .dz:not([data-kurs]) .dz-rn{ grid-column:1 / -1;margin-left:0; } /* Działy nie mają ikony — numer rzymski przejmuje jej rolę wizualnej kotwicy. */ body[data-wyglad="kafelki"] .dz:not([data-kurs]) .dz-rn, body[data-wyglad="tematyczny"] .dz:not([data-kurs]) .dz-rn{ font-size:15px;font-weight:700;color:var(--accent); } /* =========================================================== WSPÓLNE KOMPONENTY Tabele, karty sekcji i oznaczenia stanu były zdefiniowane wyłącznie w