/* PLEXCAD — kit GUI aplikacji webowych, wersja 0.1 (2026-09-01). Wspólna warstwa wyglądu dla aplikacji platformy (Odwierty, geo2cad, Podział). Paleta, typografia i konwencje wzięte z serwisu v4 (`plexcad-platforma/www-dev/v4`: lp.css, panel.css, motyw-ciemny.css), przełożone z języka stron marketingowych na język narzędzia roboczego: gęstsze odstępy, tabele danych, formularze, stany. ŹRÓDŁO PRAWDY: docelowo `plexcad-platforma/www-dev/v4/app-kit/`. Odwierty są pilotem — plik powstał tutaj i po sprawdzeniu w boju wraca do platformy. Do tego czasu zmiany robimy tu, a nie w kopiach. Czego tu NIE ma: rzeczy swoistych dla jednej aplikacji (mapy, podglądy rysunków, tabele domenowe). Te żyją w `style.css` danej aplikacji i korzystają z tokenów poniżej. Fonty: `` — IBM Plex z naszego serwera, bez Google (decyzja właściciela 01.09.2026). */ /* --- tokeny: motyw jasny ------------------------------------------------- */ :root { --papier: #f7f7f2; --karta: #ffffff; --panel: #f2f2ec; --tusz: #1e2428; --tusz-2: #5b6670; --tusz-3: #646d76; /* 4,9:1 na papierze — bezpieczne dla drobnego tekstu */ --linia: #e3e2dc; --linia-sekcja: #c9c8c0; --linia-mocna: #b9b8ae; --nieb: #1f5f99; --nieb-ciemny: #184b79; --nieb-tlo: #eaf1f7; --ziel: #2a7454; --ziel-tlo: #eaf4ef; --uwaga: #8a5a00; --uwaga-tlo: #fdf3e2; --uwaga-linia: #e2c48d; --blad: #9a2020; --blad-tlo: #fdecec; --blad-linia: #e0aaaa; --r: 2px; --wrap: 1180px; --font: 'IBM Plex Sans', 'Segoe UI', system-ui, Arial, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; color-scheme: light; } /* --- tokeny: motyw ciemny ------------------------------------------------ Dwa razy to samo, bo motyw włącza się na dwa sposoby: jawnym wyborem (atrybut na , zapamiętany w localStorage) albo ustawieniem systemu. */ html[data-motyw="ciemny"] { --papier: #0a0b0f; --karta: #14161d; --panel: #171a22; --tusz: #e8eaf0; --tusz-2: #8b90a0; --tusz-3: #8b90a0; --linia: #262a35; --linia-sekcja: #333846; --linia-mocna: #3d4353; --nieb: #5b9dfb; --nieb-ciemny: #74aefc; --nieb-tlo: #152238; --ziel: #3fb98a; --ziel-tlo: #12261f; --uwaga: #e0b062; --uwaga-tlo: #2a2114; --uwaga-linia: #4a3c22; --blad: #f08a8a; --blad-tlo: #2b1616; --blad-linia: #5a2b2b; color-scheme: dark; } @media (prefers-color-scheme: dark) { html:not([data-motyw="jasny"]) { --papier: #0a0b0f; --karta: #14161d; --panel: #171a22; --tusz: #e8eaf0; --tusz-2: #8b90a0; --tusz-3: #8b90a0; --linia: #262a35; --linia-sekcja: #333846; --linia-mocna: #3d4353; --nieb: #5b9dfb; --nieb-ciemny: #74aefc; --nieb-tlo: #152238; --ziel: #3fb98a; --ziel-tlo: #12261f; --uwaga: #e0b062; --uwaga-tlo: #2a2114; --uwaga-linia: #4a3c22; --blad: #f08a8a; --blad-tlo: #2b1616; --blad-linia: #5a2b2b; color-scheme: dark; } } /* --- podstawa ------------------------------------------------------------ */ * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; /* stopka trzyma się dołu również na krótkich ekranach */ background: var(--papier); color: var(--tusz); font-family: var(--font); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.2; letter-spacing: -.015em; } h1 { font-size: 21px; } h2 { font-size: 18px; } h3 { font-size: 16px; } a { color: var(--nieb); text-decoration-color: var(--linia-mocna); text-underline-offset: 2px; } a:hover { color: var(--nieb-ciemny); } .drobne { margin: 3px 0 0; color: var(--tusz-2); font-size: 13px; line-height: 1.5; } .pusto { color: var(--tusz-2); } .mono { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; } /* Etykieta w konwencji panelu: mono, wersaliki, rozstrzelona. */ .etykieta { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--tusz-2); } /* --- nagłówek aplikacji -------------------------------------------------- Ten sam pasek we wszystkich narzędziach platformy: marka, nazwa modułu, po prawej konto i motyw. Wysokość i kolejność elementów nie są dowolne — po nich użytkownik poznaje, że nadal jest w PLEXCAD. */ .pk-naglowek { background: var(--karta); border-bottom: 1px solid var(--linia-sekcja); } .pk-naglowek-in { max-width: var(--wrap); margin: 0 auto; padding: 11px 24px; display: flex; align-items: center; gap: 16px; } .pk-marka { font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: .14em; color: var(--tusz); text-decoration: none; } .pk-marka:hover { color: var(--nieb); } .pk-modul { padding-left: 16px; border-left: 1px solid var(--linia); display: flex; align-items: baseline; gap: 10px; min-width: 0; } .pk-modul h1 { font-size: 17px; } .pk-modul .drobne { margin: 0; } .pk-prawo { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13px; } .pk-konto { color: var(--tusz-2); font-family: var(--mono); font-size: 12px; } .pk-prawo a { color: var(--tusz-2); } .pk-prawo a:hover { color: var(--nieb); } .pk-motyw { background: none; border: 1px solid var(--linia); border-radius: var(--r); padding: 4px 9px; font: inherit; font-size: 12px; color: var(--tusz-2); cursor: pointer; } .pk-motyw:hover { border-color: var(--linia-mocna); color: var(--tusz); } @media (max-width: 700px) { .pk-naglowek-in { flex-wrap: wrap; gap: 8px 14px; } .pk-modul { padding-left: 0; border-left: 0; } .pk-prawo { width: 100%; margin-left: 0; } } /* --- treść i karty ------------------------------------------------------- */ main { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 20px 24px 60px; flex: 1; } .karta { background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r); padding: 16px 18px; margin-bottom: 16px; } .karta > h2, .karta > h3 { margin-bottom: 2px; } .pasek { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .pasek-mini { display: flex; gap: 14px; align-items: center; margin-bottom: 6px; font-size: 13px; } .przyciski { display: flex; gap: 8px; align-items: center; } /* --- przyciski ----------------------------------------------------------- */ button.glowny, button.drugorzedny { border-radius: var(--r); font: inherit; font-weight: 600; cursor: pointer; padding: 9px 18px; } button.glowny { background: var(--nieb); color: #fff; border: 1px solid var(--nieb); } button.glowny:hover:not(:disabled) { background: var(--nieb-ciemny); border-color: var(--nieb-ciemny); } button.drugorzedny { background: var(--karta); color: var(--tusz); border: 1px solid var(--linia-mocna); } button.drugorzedny:hover:not(:disabled) { border-color: var(--tusz-2); } button.glowny:disabled, button.drugorzedny:disabled { opacity: .45; cursor: default; } /* W motywie ciemnym biały napis na #5b9dfb daje 3,7:1 — stąd odwrócenie. */ html[data-motyw="ciemny"] button.glowny { color: #08090d; } @media (prefers-color-scheme: dark) { html:not([data-motyw="jasny"]) button.glowny { color: #08090d; } } button.link { background: none; border: 0; padding: 0; color: var(--nieb); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } button.link:hover { color: var(--nieb-ciemny); } /* --- formularze ---------------------------------------------------------- */ input[type="text"], input[type="number"], input[type="email"], select, textarea { font: inherit; color: var(--tusz); background: var(--karta); border: 1px solid var(--linia-mocna); border-radius: var(--r); padding: 6px 8px; } input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 2px solid var(--nieb); outline-offset: 1px; } input[type="file"] { font: inherit; font-size: 13px; color: var(--tusz-2); } .opcje { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 10px; } .opcje label { display: flex; flex-direction: column; gap: 4px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--tusz-2); } .opcje label input[type="number"], .opcje label input[type="text"] { width: 140px; font-family: var(--font); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--tusz); } .opcje label.ptaszek { flex-direction: row; align-items: center; gap: 8px; font-family: var(--font); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--tusz); } .opcja-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tusz-2); } /* --- tabele -------------------------------------------------------------- */ table { width: 100%; border-collapse: collapse; margin-top: 10px; } th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--linia); font-size: 14px; } th { font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--tusz-2); } tbody tr:hover { background: var(--panel); } /* --- komunikaty ---------------------------------------------------------- Trzy poziomy, wszystkie z lewą krawędzią zamiast wypełnienia całości — tak samo jak wiersze pilnych spraw w panelu konta. */ .stan { margin: 12px 0 0; font-size: 14px; color: var(--tusz-2); } .stan.blad { color: var(--blad); background: var(--blad-tlo); border: 1px solid var(--blad-linia); border-left-width: 3px; border-radius: var(--r); padding: 9px 12px; } .stan.pracuje::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 8px; border: 2px solid var(--linia-mocna); border-top-color: var(--nieb); border-radius: 50%; animation: pk-obrot .7s linear infinite; vertical-align: -1px; } @keyframes pk-obrot { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .stan.pracuje::after { animation: none; } } .ostrzezenia { margin: 12px 0 0; padding: 0; list-style: none; } .ostrzezenia li { background: var(--uwaga-tlo); color: var(--uwaga); border: 1px solid var(--uwaga-linia); border-left-width: 3px; border-radius: var(--r); padding: 7px 10px; margin-top: 6px; font-size: 13px; } .info { background: var(--nieb-tlo); border: 1px solid var(--linia); border-left: 3px solid var(--nieb); border-radius: var(--r); padding: 10px 12px; font-size: 13.5px; color: var(--tusz); } /* Plakietka przy wartości: „OCR", „beta", „szkic". */ .plakietka { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: var(--r); border: 1px solid var(--linia-mocna); background: var(--panel); color: var(--tusz-2); font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .06em; vertical-align: middle; } .plakietka--uwaga { background: var(--uwaga-tlo); color: var(--uwaga); border-color: var(--uwaga-linia); } /* --- zakładki ------------------------------------------------------------ */ .zakladki { /* width: 100% jest konieczne — bez niego auto-margines w kolumnowym flexie kurczy pasek do szerokości zakładek i wypycha go na środek ekranu. */ width: 100%; max-width: var(--wrap); margin: 16px auto 0; padding: 0 24px; display: flex; gap: 2px; border-bottom: 1px solid var(--linia-sekcja); } .zakladka { background: none; border: 1px solid transparent; border-bottom: 0; border-radius: var(--r) var(--r) 0 0; padding: 8px 18px; margin-bottom: -1px; font: inherit; font-weight: 600; font-size: 14px; color: var(--tusz-2); cursor: pointer; } .zakladka:hover { color: var(--tusz); } .zakladka.aktywna { background: var(--karta); color: var(--tusz); border-color: var(--linia-sekcja); border-bottom: 1px solid var(--karta); } /* Wypunktowanie objaśnień pod głównym działaniem: bez kropek, cienka kreska z lewej. */ .objasnienia { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; } .objasnienia li { padding-left: 12px; border-left: 2px solid var(--linia); color: var(--tusz-2); font-size: 13px; line-height: 1.5; max-width: 82ch; } /* --- stopka -------------------------------------------------------------- */ .pk-stopka { border-top: 1px solid var(--linia); background: var(--karta); color: var(--tusz-2); font-size: 12.5px; } .pk-stopka-in { max-width: var(--wrap); margin: 0 auto; padding: 14px 24px; display: flex; gap: 8px 20px; flex-wrap: wrap; align-items: center; } .pk-stopka a { color: var(--tusz-2); } .pk-stopka a:hover { color: var(--nieb); } /* --- strona odmowy dostępu / błędu --------------------------------------- */ .pk-komunikat { max-width: 620px; margin: 60px auto; padding: 0 24px; } .pk-komunikat .karta { padding: 26px 28px; } .pk-komunikat h1 { margin-bottom: 10px; } .pk-komunikat p { margin: 0 0 12px; color: var(--tusz-2); }