/* Wspólny arkusz aplikacji — redesign „papierowy" wg projektu Claude Design („Notatnik Redesign"). Klasy odpowiadają komponentom z Notatnik.Client.UI. Ten sam plik obsługuje wszystkie hosty: przeglądarkę (Blazor WASM) oraz BlazorWebView w MAUI i WPF, więc nie ma tu nic platformowego. Zasada projektu: papier zamiast panelu. Tło w kolorze kartki, białe powierzchnie treści, jeden ciepły akcent (terakota), nagłówki szeryfowe. Kolory i wymiary siedzą w zmiennych — zmiana palety to zmiana bloku :root, nie przeszukiwanie arkusza. */ :root { /* Powierzchnie */ --paper: #efeadf; /* tło aplikacji — kolor kartki */ --surface: #fffefb; /* karty, panele, nawigacja */ --surface-sunken: #fdfbf6; /* pola formularzy i źródło edytora */ /* Atrament — od najciemniejszego do najjaśniejszego */ --ink: #23201b; --ink-2: #3c3830; --ink-3: #4a463e; --ink-4: #5c574e; --muted: #8a857c; --muted-2: #a49e93; /* metadane: daty, liczniki */ /* Akcent */ --accent: #b8543a; --accent-dark: #93412c; --accent-soft: #f4e7e2; /* tło aktywnej pozycji nawigacji, odznaki akcentowej */ --accent-line: #ecd9d2; --accent-wash: #fdf8f6; /* tło wyróżnionego wiersza (nieprzeczytane, zgłoszenie w edycji) */ /* Linie */ --line: #e6e0d5; /* obrysy kart i separatory */ --line-strong: #ddd6c8; /* obrysy pól i przycisków */ --line-input: #ccc4b6; /* pusty checkbox */ /* Odznaka neutralna */ --chip: #f1ede4; /* Role, nie wyglądy — te same nazwy działają w obu motywach, a wartości nie są takie same. „scrim" to przyciemnienie pod arkuszem, nie „półprzezroczysta czerń". */ --on-accent: #fff; /* tekst na wypełnieniu akcentem */ --ink-hover: #100e0b; /* najciemniejszy przycisk po najechaniu */ --warn-strong: #93701a; /* wyróżnienie w treści ostrzegawczej (odpowiedź administratora) */ --shadow-strong: 0 20px 50px -34px rgba(35, 32, 27, .5); --shadow-soft: 0 -12px 32px rgba(35, 32, 27, .16); --scrim: rgba(35, 32, 27, .35); /* Statusy */ --ok: #3f7d4e; --ok-bg: #e6f0e8; --ok-line: #cfe2d4; --warn: #b07a1e; --warn-bg: #f6efe0; --warn-line: #e2c489; --info: #3b6fb0; --info-bg: #e7eef6; --info-line: #d3e0ee; --danger: var(--accent); /* Kroje: Google Fonts wpięte w index.html hostów; stos zapasowy trzyma układ, gdy fontów nie ma (np. desktop/mobile bez sieci). */ --serif: "Newsreader", Georgia, "Times New Roman", serif; --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; /* Mówi przeglądarce, w którym motywie ma malować rzeczy, których ten arkusz nie dotyka: CHECKBOX LISTY ZADAŃ, paski przewijania, tła autouzupełnienia, natywne kontrolki pól. W tym projekcie ta jedna linia waży więcej niż gdzie indziej, bo checkbox jest częścią treści notatki (renderujemy prawdziwy `input`, nie `::before` — patrz reguła niżej) i jasny kwadrat na ciemnej notatce wygląda jak błąd renderowania, a nie jak niedokończony motyw. Konkretna wartość, nie `light dark`: o motywie decyduje wybór użytkownika (patrz blok niżej), więc przeglądarka nie ma tu nic do rozstrzygania. `light dark` kazałoby jej pytać system i natywne kontrolki chodziłyby własną drogą względem reszty arkusza. */ color-scheme: light; } /* Motyw ciemny — wchodzi WYŁĄCZNIE przy atrybucie `data-theme="dark"` na ``, który stawia `js/theme.js` przed pierwszym malowaniem. Ani jednego `@media (prefers-color-scheme…)` w tym arkuszu i to jest celowe: „za ustawieniem systemu" jest jedną z trzech możliwych PREFERENCJI użytkownika (ekran „Konto"), a skrypt rozstrzyga ją do konkretnego motywu. Gdyby na `` trafiała surowa preferencja, ta paleta musiałaby stać tu dwa razy — raz pod atrybutem, raz pod zapytaniem mediów — i jej rozjazd byłoby widać dopiero na rzadkim ekranie w jednym z dwóch trybów. Domyślnie, bez wyboru i bez JS, aplikacja jest JASNA — także na systemie ustawionym na ciemno. Blok przedefiniowuje WYŁĄCZNIE zmienne (`color-scheme` jest jedną z nich w tym sensie: mówi o palecie, nie o układzie) i nie ma tu ani jednej reguły. Gdyby okazała się potrzebna, znaczy to, że gdzieś w arkuszu został kolor wpisany na sztywno — i to jego trzeba naprawić, a nie dopisać wyjątek. Odwrócone są ROLE, nie kolory: „papier" staje się najciemniejszą powierzchnią, a karty są od niego JAŚNIEJSZE (wychodzą do przodu, tak jak w motywie jasnym były jaśniejsze od tła). Atrament idzie od najbardziej wyrazistego do najmniej — tak samo jak w jasnym, tylko w drugą stronę osi jasności. */ :root[data-theme="dark"] { /* Powierzchnie — ciepłe, nie neutralnie szare; papier zostaje papierem, tylko nocnym */ --paper: #191714; --surface: #221f1b; --surface-sunken: #1e1c18; /* Atrament — od najbardziej wyrazistego do najmniej (12.8:1 → 3.6:1 na tle karty) */ --ink: #ece7dd; --ink-2: #ddd7cb; --ink-3: #cbc4b7; --ink-4: #b3ab9d; --muted: #8f887c; --muted-2: #7b746a; /* Akcent MUSI zjaśnieć: terakota #b8543a na ciemnym tle daje 3.25:1, czyli za mało na tekst. Rozjaśniona ma 5.5:1 — ale wtedy biel przestaje się na niej mieścić i dlatego `--on-accent` robi się ciemny. To jest cały powód, dla którego ten kolor jest zmienną, a nie literałem. */ --accent: #e0805f; --accent-dark: #eb9b7d; /* hover = JAŚNIEJ, bo na ciemnym tle wyrazistość rośnie z jasnością */ --accent-soft: #3a241d; --accent-line: #4a2e24; --accent-wash: #241b17; --line: #322e28; --line-strong: #403b33; --line-input: #554e44; --chip: #2b2723; --on-accent: #1a1512; /* ciemny tekst na jasnym akcencie — odwrotnie niż w motywie jasnym */ --ink-hover: #fbf8f2; /* `.btn-ink` jest tu jasnym przyciskiem, więc hover rozjaśnia */ --warn-strong: #e0bd6a; /* Cień na ciemnym tle musi być czystą czernią i głębszy — cień w kolorze tła jest niewidoczny, a rozjaśniony wygląda jak poświata. */ --shadow-strong: 0 20px 50px -34px rgba(0, 0, 0, .8); --shadow-soft: 0 -12px 32px rgba(0, 0, 0, .5); --scrim: rgba(0, 0, 0, .55); --ok: #7fc08c; --ok-bg: #1c2b20; --ok-line: #2f4736; --warn: #d9a94e; --warn-bg: #2c2416; --warn-line: #4a3c1e; --info: #7aa8dd; --info-bg: #1a2432; --info-line: #2c3d52; /* Ta sama rola co w `:root` — natywne kontrolki (CHECKBOX LISTY ZADAŃ, paski przewijania) mają iść za wybranym motywem, a nie za systemem. */ color-scheme: dark; } /* Krój i wielkość TREŚCI notatki — druga i trzecia preferencja urządzenia obok motywu. `js/theme.js` stawia na `` atrybut `data-font` (sans / serif / mono), a wielkość i odstępy wpisuje przed pierwszym malowaniem wprost w `style` tego elementu (`--note-base`, `--note-lead`) — bo to DOWOLNE liczby i nie da się napisać reguły na każdą. Wartości w `:root` niżej są więc awaryjne: widać je tylko wtedy, gdy skrypt nie wystartował. Zmiennych używa wyłącznie `.markdown-view` (powierzchnia edytora i podgląd). Reszta interfejsu — nawigacja, listy, formularze — CELOWO nie idzie za tym wyborem: to jest ustawienie czytania notatki, nie skalowanie aplikacji (od tego jest zoom przeglądarki). Krój niesie własny współczynnik wielkości, bo trzy rodziny mają różną wysokość x: Newsreader przy tych samych 15 px czyta się drobniej niż Hanken Grotesk, a JetBrains Mono — szerzej i większe. Bez tej korekty „Zwykły" znaczyłoby co innego przy każdym kroju. Domyślne wartości (sans, normal) dają dokładnie to, co arkusz miał przed dołożeniem tych preferencji, więc bez JS nic się nie zmienia. */ :root { --note-font: var(--sans); --note-base: 15px; --note-scale: 1; --note-size: calc(var(--note-base) * var(--note-scale)); --note-lead: 1.2; /* Przerwa MIĘDZY akapitami nie jest osobnym wyborem — liczy się z wysokości wiersza, żeby jedna liczba sterowała obiema odległościami i żeby wzór stał w jednym miejscu (decyzja właściciela 2026-09-03). `em` zamiast pikseli: przerwa ma rosnąć razem z wielkością tekstu, inaczej większy tekst byłby ciaśniejszy niż mniejszy. Dolne ograniczenie `clamp` nie jest ozdobą — przy wysokości wiersza poniżej 1 wzór dałby margines UJEMNY, czyli akapity zachodzące na siebie. Górne trzyma luźny wybór przy ziemi. ⚠️ Cena przyjęta świadomie: przy 1.2 przerwa wynosi 3 px, więc AKAPIT wygląda prawie jak złamanie wiersza — pusta linia w Markdownie niemal przestaje być widoczna. Pozycji listy nie dotyczy ani ta liczba, ani wysokość wiersza: pozycje stoją wiersz przy wierszu i to jest punkt odniesienia. */ --note-gap: clamp(0em, calc((var(--note-lead) - 1) * 1em), 1em); } :root[data-font="serif"] { --note-font: var(--serif); --note-scale: 1.08; } :root[data-font="mono"] { --note-font: var(--mono); --note-scale: .94; } * { box-sizing: border-box; } /* Przewija się DOKUMENT, a nie kontener wewnątrz aplikacji — góra strony stoi w miejscu przez `position: sticky` (blok `.page-top` niżej). Wariant „aplikacja na całą wysokość ekranu, treść we własnym przewijaku" (`height: 100dvh` + `overflow: auto`) daje ten sam obraz, ale na telefonie kosztuje dwie rzeczy naraz: klawiatura ekranowa zmniejsza widoczny obszar i karetka w powierzchni edycji potrafi zostać POD nią (przeglądarka przewija wtedy dokument, a nie nasz kontener), a pasek adresu przestaje się chować przy przewijaniu w dół. Obie awarie widać dopiero na urządzeniu, nie w oknie przeglądarki na biurku. `scroll-padding-top` to druga połowa tej decyzji: przewijanie „pokaż mi to" robi przeglądarka sama (karetka w powierzchni edycji, fokus po Tabie) i bez tego celowałaby w górną krawędź OKNA, czyli pod przypięty pasek. Liczba to najwyższy przypięty blok w aplikacji — nagłówek edytora razem z paskiem formatowania. */ html { scroll-padding-top: 96px; } body { margin: 0; font-family: var(--sans); font-size: 14.5px; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-dark); } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; color: var(--ink); } .loading { padding: 4rem; text-align: center; color: var(--muted); } /* --- Szkielet: lewa nawigacja + treść (na wąskim ekranie nawigacja schodzi na dół jako pasek zakładek) --- */ .app { min-height: 100vh; display: flex; } .app-plain { align-items: center; justify-content: center; } .app-plain .content { padding: 6vh 20px; width: 100%; display: flex; justify-content: center; } .sidebar { width: 250px; flex: none; background: var(--surface); border-right: 1px solid var(--line); padding: 22px 16px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .brand { display: flex; align-items: center; gap: 9px; padding: 4px 10px 22px; font-family: var(--serif); font-size: 23px; font-weight: 600; color: var(--ink); } .brand:hover { color: var(--ink); } .brand-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); flex: none; } /* Nawigacja przewija się sama, bo sekcje przestrzeni potrafią być długie: `.sidebar` ma `height: 100vh`, a stopka z wylogowaniem stoi na `margin-top: auto` — bez tego rozwinięta przestrzeń z kilkunastoma notatkami wypchnęłaby ją poza ekran i wyglądałoby to na zniknięcie przycisku, nie na za długie menu. `min-height: 0` jest konieczne: element flex nie zjeżdża domyślnie poniżej rozmiaru swojej treści. */ .sidebar nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; } .sidebar nav a { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 9px; color: var(--ink-3); position: relative; } .sidebar nav a:hover { background: var(--chip); color: var(--ink-2); } .sidebar nav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .nav-badge { margin-left: auto; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; } .nav-tag { margin-left: auto; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent-line); border-radius: 5px; padding: 1px 5px; } .nav-divider { height: 1px; background: var(--line); margin: 12px 10px; } /* Notatki przestrzeni w menu: mniejsze i węższe niż pozycje nawigacji, żeby lista nie konkurowała z nią o uwagę. Tytuł idzie w jedną linię — notatka nazwana zdaniem nie ma rozpychać menu. */ .nav-section { padding: 2px 12px 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .sidebar nav a.nav-note { padding: 6px 12px; font-size: 13.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar nav a.nav-more { padding: 4px 12px; font-size: 12.5px; color: var(--muted); } /* Nagłówek przestrzeni. Przycisk, nie link — rozwijanie sekcji nie jest nawigacją. Przestrzeń bez notatek przychodzi wyłączona (nie ma czego rozwinąć), ale zostaje w menu z licznikiem `0`: ukryta wyglądałaby na przestrzeń, która zniknęła. */ .nav-space { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 12px; border: none; border-radius: 9px; background: none; font: inherit; font-size: 13.5px; color: var(--ink-3); text-align: left; cursor: pointer; } .nav-space:hover:not(:disabled) { background: var(--chip); color: var(--ink-2); } .nav-space:disabled { cursor: default; color: var(--muted); } .nav-space-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-space-count { margin-left: auto; font-size: 11.5px; color: var(--muted); } /* Trójkącik z czystego CSS zamiast ikony: obraca się przy rozwinięciu i nie dokłada nic do drzewa. */ .nav-space::before { content: ""; flex: none; border: 4px solid transparent; border-left-color: currentColor; transition: transform .12s ease; transform-origin: 2px 4px; } .nav-space[aria-expanded="true"]::before { transform: rotate(90deg); } .nav-space-loading { padding: 6px 12px 6px 24px; font-size: 12.5px; color: var(--muted); } .sidebar-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .sidebar-foot .email { font-size: 13px; color: var(--ink-4); padding: 0 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Elementy nawigacji, które istnieją WYŁĄCZNIE na wąskim ekranie: ikony zakładek, piąta zakładka „Więcej" i jej arkusz. Są w drzewie zawsze (jeden layout dla wszystkich hostów), więc chowa je arkusz stylów. Domyślnie ukryte, a nie domyślnie widoczne — dzięki temu zmiana szerokości okna z otwartym arkuszem nie zostawia panelu wiszącego nad desktopowym menu. */ .nav-icon { display: none; } .nav-sheet-toggle { display: none; } .sheet, .sheet-backdrop { display: none; } /* Kolumna treści przestaje rosnąć do szerokości monitora. Bez `max-width` wiersz notatki miał na ekranie 1920 px około 190 znaków — przy takiej długości oko gubi początek następnego wiersza. Wyśrodkowana, a nie dosunięta do nawigacji: dosunięta zostawia na 2560 px metr pustki po jednej stronie i wygląda na niedokończony układ, a nie na decyzję. */ .content { flex: 1; min-width: 0; max-width: 1100px; margin: 0 auto; padding: 40px 48px; } /* --- Nagłówki stron --- */ /* Przypięta góra strony — JEDEN mechanizm na całą aplikację. W środku stoi to, czego nie wolno stracić przy przewijaniu: powrót, tytuł ekranu i działania nagłówka („opróżnij kosz", „oznacz wszystkie", menu „⋯" w notatce). Powód jest praktyczny: przestrzeń z setką notatek i długa notatka kończyły się tym samym — żeby cofnąć albo sięgnąć po działanie, trzeba było przewinąć całą stronę do góry. Tło jest NIEPRZEZROCZYSTE i to nie ozdoba: pod paskiem przejeżdża treść. `--paper`, a nie `--surface`, bo to tło strony, nie karta. Blok nie sięga poza kolumnę treści i nie musi — boczne marginesy `.content` są puste, więc nie ma tam czego zasłaniać. Marginesu dolnego dzieci też nie zerujemy: zostaje POZA blokiem, więc treść wsuwa się pod pasek z tym samym odstępem, jaki ma w spoczynku, a wygląd nieprzewiniętej strony się nie zmienia. z-index nad dolnym paskiem zakładek (20), pod arkuszem „Więcej" (30) — przypięcie tworzy kontekst układania, więc to ONA rozstrzyga, czy menu „⋯" wynurzy się nad zakładki; sam `z-index: 25` na `.menu` już by tego nie zrobił. */ .page-top { position: sticky; top: 0; z-index: 25; background: var(--paper); } h1 { font-size: 38px; font-weight: 500; margin: 0 0 28px; letter-spacing: -.01em; } .page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 28px; } .page-head h1 { margin: 0; } /* Licznik pozycji i odnośniki do miejsc powiązanych stoją po prawej, w jednym rzędzie z tytułem — ten sam kształt nagłówka na każdej stronie listowej. */ .page-head .head-meta { display: flex; align-items: baseline; gap: 14px; margin-left: auto; } .back-link { display: inline-block; font-size: 13.5px; color: var(--muted); margin-bottom: 14px; } .back-link:hover { color: var(--ink-3); } /* --- Przyciski --- */ .btn { /* Element liniowy z pionowym paddingiem NIE rozpycha wiersza, więc nachodziłby na tekst nad sobą i pod sobą, a width nic by na nim nie robiło.