/* Plan lekcji — styl. Motyw przewodni: dzień jako zmierzona odległość. Lekcje wiszą na pionowej szynie, a jej dwa końce to jedyne dwie godziny, które rodzic naprawdę czyta. Ciepły kolor u góry to poranek (zawieźć), chłodny u dołu — popołudnie (odebrać). Wszystko pomiędzy jest celowo wyciszone. */ :root { --bg: #edf0f4; --surface: #ffffff; --ink: #141c25; --muted: #64737f; --faint: #93a1ac; --line: #d6dce3; --go: #a2570a; --go-soft: #f6e6cf; --back: #463cab; --back-soft: #e2e0f7; --danger: #a32828; --rail-x: 1.25rem; --pad: 1.25rem; --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color-scheme: light; } /* Motyw wybiera skrypt w : albo z zapisanego wyboru, albo z ustawienia telefonu. Dzięki temu paleta ma jedno miejsce definicji zamiast dwóch kopii rozjeżdżających się przy każdej poprawce koloru. */ :root[data-theme='dark'] { --bg: #0e141a; --surface: #161e27; --ink: #e7edf3; --muted: #8b98a5; --faint: #5f6d79; --line: #26313c; --go: #f2a93e; --go-soft: #3a2c14; --back: #a396ff; --back-soft: #241f42; --danger: #ef7a7a; color-scheme: dark; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.4; -webkit-font-smoothing: antialiased; } button { font: inherit; color: inherit; cursor: pointer; } :focus-visible { outline: 2px solid var(--back); outline-offset: 2px; border-radius: 4px; } .view { max-width: 30rem; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; /* Dolny odstęp jest celowo duży: pasek nawigacji telefonu potrafi zjeść kilkadziesiąt pikseli i przykryć przyciski przewijania dni. */ padding: max(0.75rem, env(safe-area-inset-top)) 0 calc(max(1rem, env(safe-area-inset-bottom)) + 1.75rem); } .view[hidden] { display: none; } /* ---------- Nagłówek ---------- */ .topbar { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.5rem var(--pad) 1.25rem; } .topbar__day { flex: 1; min-width: 0; } .topbar__name { margin: 0; font-size: 1.5rem; font-weight: 650; letter-spacing: -0.02em; } .topbar__date { margin: 0.1rem 0 0; color: var(--muted); font-size: 0.9375rem; } .badge { margin-top: 0.35rem; padding: 0.15rem 0.5rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 0.75rem; letter-spacing: 0.02em; white-space: nowrap; } .badge[hidden] { display: none; } .iconbtn { flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); } .iconbtn svg { width: 1.375rem; height: 1.375rem; } .iconbtn:active { background: var(--surface); } /* ---------- Szyna dnia ---------- */ .rail { flex: 1; margin: 0; padding: 0 var(--pad); list-style: none; position: relative; } .stop { position: relative; padding-left: 2.25rem; min-height: 2.5rem; } /* Odcinek szyny biegnie przez każdą pozycję i łączy sąsiednie kropki. */ .stop::before { content: ""; position: absolute; left: var(--rail-x); top: 0; bottom: 0; width: 2px; background: var(--line); transform: translateX(-1px); } /* Szyna zaczyna się i kończy dokładnie na kropkach, nie na krawędzi listy. */ .stop--first::before { top: 1.9rem; } .stop--last::before { bottom: calc(100% - 1.9rem); } /* Okienko przerywa szynę, zamiast ją ciągnąć. */ .stop--gap::before { background: repeating-linear-gradient( to bottom, var(--line) 0 4px, transparent 4px 9px ); } .stop__dot { position: absolute; left: var(--rail-x); top: 1.05rem; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--faint); } .stop__line { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.4rem 0; font-size: 0.9375rem; } .stop__time { flex: none; min-width: 6.5rem; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.875rem; } .stop__name { flex: 1; min-width: 0; font-size: 1.0625rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Sala jest tym, czego szuka się wzrokiem po nazwie przedmiotu, więc czyta się ją tak samo mocno jak przedmiot — wyszarzone zostaje tylko słowo „sala". */ .stop__room { flex: none; color: var(--ink); font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; } .stop__room::before { content: "sala "; color: var(--faint); font-weight: 400; font-size: 0.8125rem; } .stop--gap .stop__name { color: var(--faint); font-style: italic; } /* ---------- Dwa końce dnia ---------- */ .anchor { display: flex; align-items: center; gap: 0.75rem; padding: 0.25rem 0; } .anchor__hour { font-size: 3.25rem; font-weight: 700; line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; } .anchor__label { font-size: 0.75rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.25rem 0.5rem; border-radius: 4px; } .stop--cap { padding-bottom: 0.5rem; } .stop--last { padding-top: 0.5rem; padding-bottom: 0; } .stop--cap .stop__dot { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; top: 1.9rem; } .stop--first .stop__dot { background: var(--go); } .stop--last .stop__dot { background: var(--back); } .stop--first .anchor__hour { color: var(--go); } .stop--last .anchor__hour { color: var(--back); } .stop--first .anchor__label { color: var(--go); background: var(--go-soft); } .stop--last .anchor__label { color: var(--back); background: var(--back-soft); } /* ---------- Stan pusty ---------- */ .empty { flex: 1; margin: 0; padding: 3rem var(--pad); color: var(--muted); text-align: center; } .empty[hidden] { display: none; } .linkbtn { border: 0; padding: 0; background: none; color: var(--back); text-decoration: underline; } /* ---------- Propozycja instalacji ---------- */ .install { margin: 1rem var(--pad) 0; padding: 0.875rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); } .install[hidden] { display: none; } .install__text { margin: 0 0 0.625rem; font-size: 0.875rem; color: var(--muted); } .install__actions { display: flex; gap: 0.5rem; } .install__go, .install__no { padding: 0.5rem 0.9rem; border-radius: 8px; font-size: 0.875rem; } .install__go { border: 0; background: var(--back); color: var(--surface); font-weight: 600; } .install__go[hidden] { display: none; } .install__no { border: 1px solid var(--line); background: none; color: var(--muted); } /* ---------- Nawigacja ---------- */ .nav { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem var(--pad) 0; } .nav__arrow, .nav__today { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; color: var(--ink); } .nav__arrow { width: 3.25rem; height: 3.25rem; font-size: 1.75rem; line-height: 1; padding-bottom: 0.2rem; } .nav__today { height: 3.25rem; padding: 0 1.75rem; color: var(--muted); } .nav__arrow:disabled { color: var(--faint); opacity: 0.45; cursor: default; } .nav__arrow:not(:disabled):active, .nav__today:active { background: var(--bg); } /* ---------- Edycja ---------- */ .editor { flex: 1; padding: 0 var(--pad); } .editor__day + .editor__day { margin-top: 1.5rem; } .editor__title { margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .row { display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: 0.4rem; padding: 0.35rem 0; border-bottom: 1px solid var(--line); } .row input { font: inherit; min-width: 0; padding: 0.4rem 0.35rem; border: 1px solid transparent; border-radius: 6px; background: var(--surface); color: var(--ink); } .row input[type="time"] { font-variant-numeric: tabular-nums; } .row .room { width: 3.5rem; text-align: center; } .row input:invalid, .row .bad { border-color: var(--danger); } .row__remove { width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: none; color: var(--faint); font-size: 1.25rem; line-height: 1; } .hint { grid-column: 1 / -1; margin: 0.1rem 0 0.35rem; color: var(--danger); font-size: 0.8125rem; } .editor__add { margin-top: 0.5rem; padding: 0.4rem 0.75rem; border: 1px dashed var(--line); border-radius: 8px; background: none; color: var(--muted); font-size: 0.875rem; } .editor__footer { padding: 2rem var(--pad) 0; } .danger { width: 100%; padding: 0.85rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--danger); } /* ---------- Ruch ---------- */ @media (prefers-reduced-motion: no-preference) { .rail { animation: wjazd 160ms ease-out; } @keyframes wjazd { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } }