/* ========================================================= KOPIA Z pc_admin/css/tokens.css — NIE EDYTUJ TEGO PLIKU ========================================================= Źródło: repozytorium serwera FiveM, commit c609d474 Odświeżenie: node scripts/sync-design.mjs <ścieżka-do-pc_admin> Zmiany rób PO STRONIE GRY. Tutaj i tak zostaną nadpisane przy następnej synchronizacji, a rozjazd systemu projektowego to dokładnie ten problem, który ten skrypt ma likwidować (web/README.md, punkt 3 parytetu). Styl WŁASNY strony (pasek boczny, belka, widoki) siedzi w site.css. ========================================================= */ /* ========================================================= PC ADMIN — TOKENY · design system „PÓŁMROK” ========================================================= Źródło prawdy: C:\Users\andre\OneDrive\Desktop\UI KIT\polmrok-ui-kit.html Ten plik ładuje się PIERWSZY. Nic poza nim nie definiuje kolorów. CEF 103 (FiveM NUI) — ZAKAZANE: color-mix(), :has(), zagnieżdżanie, text-wrap:balance. Każdą mieszankę koloru wpisujemy jako gotowe rgba(). ── Odstępstwa od kitu, świadome (rozdz. 00 „to punkt wyjścia, nie klatka”): 1. --panel-3 — kit ma dwa poziomy powierzchni, panel admina potrzebuje trzeciego (wiersz w karcie w sekcji). 2. --dim — kit ma --txt i --mut; tabela z 3 poziomami ważności potrzebuje stopnia pośredniego. 3. --sidebar — kit (rozdz. 10) każe dać pasek boczny „o stopień ciemniejszy od treści”, ale nie podaje wartości. Wyliczone między --bg a --panel. 4. skala typografii — kit jest dokumentem webowym (body 15/1.65). Okno w grze ma ~1216×660 px, więc skala jest przeskalowana w dół do 7 stopni CAŁKOWITYCH (żadnych 11.5 / 12.5 / 13.5 px). 5. wysokości wierszy 36/44/52 zamiast kitowych 48–56 — gęstość jest w kicie „miękka”, a to jest narzędzie robocze, nie HUD. ========================================================= */ /* ── CZCIONKI — LOKALNIE (UI Kit EnviRP: bez Google Fonts w grze) ────────── Te same pliki co pc_ui/html/fonts. Ścieżka `../fonts/` działa po obu stronach: w grze css/ → pc_admin/fonts, na stronie assets/css/ → assets/fonts (sync-design.mjs kopiuje ten plik 1:1). Inter nie ma tu 400 — przeglądarka bierze 500, tak jak w pc_ui. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-500.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-600.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-700.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/inter-800.woff2') format('woff2'); } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/archivo-700.woff2') format('woff2'); } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/archivo-800.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jetbrains-mono-400.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/jetbrains-mono-600.woff2') format('woff2'); } /* Krój plakietek: Archivo 800 z wyrównanymi metrykami, żeby wersaliki stały optycznie na środku plakietki o stałej wysokości (jak pc_banking, pc_ui). */ @font-face { font-family: 'Archivo Caps'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/archivo-800.woff2') format('woff2'); ascent-override: 84.35%; descent-override: 15.65%; line-gap-override: 0%; } :root { /* ── BAZA — materiał UI Kit EnviRP (koncept A, właściciel 28.10.2026) ── Sekcje (#121823) leżą na tle okna (#0D1118), a wiersze i pola w sekcjach to ciemniejsze „studnie” (#0D1118) — odwrotnie niż w Półmroku, gdzie element w karcie był jaśniejszy od karty. Nazwy tokenów zostają, bo wskazują na nie tysiące reguł widoków; zmieniły się tylko wartości. */ --bg: #0D1118; /* fill: tło okna i treści */ --panel: #121823; /* fill2: sekcja, karta */ --panel-2: #0D1118; /* studnia: wiersz, pole, kafel W sekcji */ --panel-3: #1F2533; /* sink: rynienka paska, awatar, dymek */ --sidebar-bg: #0D1118; /* pasek boczny (górę rozjaśnia gradient okna) */ --top: #161C28; /* jaśniejsza góra gradientu okna */ --panel-fill: rgba(18,24,35,.97); /* karty pływające (modal, lista) */ --row-hover: #1F2533; /* hover wiersza listy */ --av-bg: linear-gradient(135deg, #2A3550, #1A2030); /* awatar z inicjałami (koncept A) */ --line: #232B3A; /* obwódka sekcji, studni, pól */ --line-strong: #2A3243; /* edge: obrys karty pływającej, separacja */ --line-hover: #3A4254; /* Ciemny klawisz z UI Kit (zr-pausemenu .rank-refresh): przycisk z samą ikoną (odśwież, zamknij, − +) i kafel ikony stanu pustego. */ --key: #232B3A; --key-hover: #2C3546; --txt: #F1F4F9; /* tytuły, liczby */ --txt-rest: #C9D1DD; /* treść, etykiety (txt2 w kicie) */ --dim: #B4BECC; /* stopień pośredni między txt2 a mut */ --mut: #8D98AC; /* podpisy, opisy */ --mut-deep: #5C6679; /* off: wyłączone, placeholder */ /* ── AKCENT — NIEBIESKI. Jedyny kolor „kliknij mnie”. ──── */ --blue: #4DA3FF; --blue-m: #275685; --blue-d: #0F1E33; --blue-10: rgba(77,163,255,.10); --blue-16: rgba(77,163,255,.16); --blue-26: rgba(77,163,255,.26); --blue-38: rgba(77,163,255,.38); --blue-55: rgba(77,163,255,.55); /* ── STATUSY. Nigdy jako kolor interakcji. ─────────────── */ --red: #FF4D5E; --red-m: #7E2934; --red-d: #2A1116; --grn: #8CF04F; --grn-m: #41722B; --grn-d: #14230D; --org: #FFA22E; --org-m: #7E4C1D; --org-d: #291B0C; /* Kit nie ma cyjanu: „info” to niebieski serwera (ID, czas, „Ty”). Nazwa --cyn zostaje, bo czyta ją kilkadziesiąt reguł widoków. */ --cyn: #4DA3FF; --cyn-m: #275685; --cyn-d: #0F1E33; --vio: #BE8CFF; /* organizacja (kit) */ --gold: #FFC83D; /* 1. miejsce, korona */ --silver: #C4CEDE; /* 2. miejsce (podium z kitu) */ --bronze: #DE8D5C; /* 3. miejsce (podium z kitu) */ --wht: #EAF0F8; --wht-m: #5C6674; --wht-d: #22262E; --red-10: rgba(255,77,94,.10); --red-26: rgba(255,77,94,.26); --grn-10: rgba(140,240,79,.10); --grn-26: rgba(140,240,79,.26); --org-10: rgba(255,162,46,.10); --org-26: rgba(255,162,46,.26); --cyn-10: rgba(77,163,255,.10); --cyn-26: rgba(77,163,255,.26); --wht-10: rgba(234,240,248,.08); --wht-26: rgba(234,240,248,.20); /* ── PRZEPIS „RDZEŃ” — WERSJA KANONICZNA (kit, sekcja v1.4) ── Kit ma dwa opisy tego kafla. Rozdział 03 liczy go przez color-mix() i to jest wersja przeglądarkowa — w CEF 103 nie działa. Sekcja v1.4 podaje wersję WDROŻONĄ w pc_ui i sam kit nazywa ją lepszą: kolor = background-color: rgb() światło = dwa nakładkowe radiale (--core-hi szczyt, --core-lo docisk) ikona = --core-ink, jeden ciemny tusz dla KAŻDEGO wariantu Dzięki temu cały wariant przemalowuje jeden token z trzema kanałami, zamiast czterech kompletów reguł. */ --core-hi: radial-gradient(120% 120% at 50% 24%, rgba(255,255,255,.60), rgba(255,255,255,0) 47%); --core-lo: radial-gradient(140% 130% at 50% 126%, rgba(0,0,0,.45), rgba(0,0,0,0) 62%); --core-ink: #080B12; /* Matowy kafel ikony przy tytule (zasada 7 systemu). */ --icon-tile: #1A2230; --icon-ink: #9AB4D3; /* Jaśniejsze odcienie rodzin — akcent zmieszany z bielą 72/28, policzony na sztywno (CEF 103 nie zna color-mix()). NIE służą do kafla „Rdzeń” (ten składa światło radialami), tylko jako KOLOR TEKSTU na ciemnym tle: wyrazista rodzina bywa za ciemna na 10-11 px, np. w mapie kolorów kategorii logów. Nazwa historyczna, bo używa jej css/views/logs.css. */ --gem-blue: #7FBDFF; --gem-red: #FF7F8B; --gem-grn: #ACF480; --gem-org: #FFBC69; --gem-cyn: #7FBDFF; --gem-wht: #F0F4FA; --blue-rgb: 77,163,255; --grn-rgb: 140,240,79; --org-rgb: 255,162,46; --red-rgb: 255,77,94; --cyn-rgb: 77,163,255; --vio-rgb: 190,140,255; --gold-rgb: 255,200,61; --mut-rgb: 141,152,172; --wht-rgb: 234,240,248; /* Płyty przycisków akcji (kit v1.4, .request-btn) */ --plate-accept: linear-gradient(180deg, #3E8FE6, #2764A8); --plate-danger: linear-gradient(180deg, #D6414F, #8F2733); /* Materiał panelu (kit, .speedo-cluster) */ --panel-shadow: 0 14px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05); --panel-shadow-sm: 0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04); --sink: inset 0 2px 5px rgba(0,0,0,.6); --ink: var(--core-ink); /* Aliasy: w recepturze kanonicznej tusz jest JEDEN dla wszystkich wariantów (to właśnie ją upraszcza). Nazwy per-kolor zostają, bo pisze do nich kod widoków — wszystkie wskazują na ten sam --core-ink. */ --ink-blue: var(--core-ink); --ink-red: var(--core-ink); --ink-grn: var(--core-ink); --ink-org: var(--core-ink); --ink-cyn: var(--core-ink); --ink-wht: var(--core-ink); /* ── TYPOGRAFIA ───────────────────────────────────────── */ /* Archivo 800 w tytułach i dużych liczbach, Inter w treści (UI Kit EnviRP, koncept A z 28.10.2026). Plakietki mają własny krój z wyrównanymi metrykami. */ --font-display: 'Archivo', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-caps: 'Archivo Caps', 'Archivo', Inter, system-ui, sans-serif; --font-ui: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; /* SKALA TEKSTU — 8 stopni, nazwy semantyczne. Poza tą listą NIE MA rozmiarów fontu w projekcie. (Stan przed refaktorem: 29 różnych wartości literalnych, w tym połówki pikseli — to był główny powód, dla którego „nie wiadomo gdzie patrzeć”.) */ /* Od 28.10.2026 równy --fs-meta: na ekranie nic nie schodzi poniżej 11 px (UI Kit EnviRP). 10 px w CEF przy skali okna było nieczytelne. */ --fs-micro: 11px; /* mono: eyebrow, nagłówek kolumny, mikro-meta */ --fs-meta: 11px; /* meta pod wartością, badge, znacznik czasu */ --fs-dense: 12px; /* gęsty tekst drugoplanowy: chipy, podpisy w liście */ --fs-body: 13px; /* DOMYŚLNY: treść, wiersze, przyciski, inputy */ --fs-title: 15px; /* tytuł karty, nazwa w wierszu głównym */ --fs-kpi: 18px; /* liczba KPI wewnątrz sekcji */ --fs-page: 22px; /* tytuł strony (Archivo 800) */ --fs-hero: 26px; /* liczba-bohater w kaflu bento (mniejsza od tytułu strony) */ --fs-heading: 28px; /* tytuł strony w nagłówku widoku */ /* Ikony NIE podlegają skali tekstu — mają własną. */ --ic-xxs: 9px; /* ikonka wewnątrz badge'a / znak zapytania tooltipa */ --ic-xs: 11px; --ic-sm: 13px; --ic-md: 16px; --ic-lg: 22px; --ic-xl: 28px; --ic-art: 34px; /* ikona pustego stanu */ --lh-tight: 1.15; /* display */ --lh-snug: 1.35; /* wiersze, etykiety */ --lh-body: 1.55; /* akapity, wiadomości */ --fw-reg: 400; --fw-med: 500; --fw-sem: 600; --fw-bold: 700; --fw-black: 800; /* wyłącznie Archivo w tytule strony / liczbie-bohaterze */ --ls-mono: .12em; /* identyfikatory mono w wersalikach (SSN, slot) */ --ls-eyebrow: .08em; /* etykieta w wersalikach: Inter 700 (UI Kit) */ /* ── ODSTĘPY — jedna skala ────────────────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; /* ── ZAOKRĄGLENIA — kit: 10 / 14 / 18 ─────────────────── */ --r-xs: 6px; /* token, mikro-pigułka */ --r-s: 10px; --r-m: 14px; --r-l: 18px; --r-pill: 999px; /* ── WYSOKOŚCI KONTROLEK I WIERSZY ────────────────────── */ --h-ctl-sm: 28px; /* przycisk sm, chip */ --h-ctl: 34px; /* input, select, przycisk, pole wyszukiwania */ --h-row-sm: 36px; /* gęsty wiersz listy */ --h-row: 44px; /* wiersz standardowy */ --h-row-lg: 52px; /* wiersz główny (gracz, ticket) */ /* ── UKŁAD OKNA ───────────────────────────────────────── */ --app-w: min(1720px, 95vw); --app-h: min(960px, 92vh); --sidebar-w: 244px; /* kit rozdz. 10: 72 albo 240, nic pomiędzy */ --sidebar-w-c: 72px; --topbar-h: 60px; /* belka górna; blok logo w pasku bocznym ma tę samą wysokość */ --pad-window: var(--s-5); /* kit: padding treści okna = 24 */ /* Szerokość szyny bocznej. MUSI być zwykłą długością, nie clamp() — szyna zwija się z animacją, a Chromium nie interpoluje między clamp() a wartością w px (tranzycja nie ruszała z miejsca). Responsywność załatwiają dwa media query niżej: to samo zachowanie, animowalne. */ --rail: 300px; --rail-min: 34px; /* szerokość zwiniętego paska */ /* ── CIEŃ / POŚWIATA ──────────────────────────────────── */ --sh-1: 0 1px 2px rgba(0,0,0,.35); --sh-2: 0 8px 28px rgba(0,0,0,.45); --sh-win: 0 24px 80px rgba(0,0,0,.60); --glow-blue: 0 0 16px var(--blue-26); --inset-top: inset 0 1px 0 rgba(255,255,255,.06); /* ── RUCH — jeden komplet krzywych na cały serwer (kit, rozdz. 12) ── */ --e-in: cubic-bezier(.16, 1, .3, 1); /* wejście panelu .26s */ --e-size: cubic-bezier(.22, 1, .36, 1); /* zmiana wysokości .28s */ --e-out: cubic-bezier(.55, 0, .68, .19); /* wyjście .16–.22s */ --e-hud: cubic-bezier(.4, 0, .2, 1); /* przesunięcia .45s */ --ease: var(--e-size); --ease-out: var(--e-in); --t-fast: .15s; /* hover — kit: .15s, zwykły ease wystarczy */ --t-base: .22s; --t-slow: .28s; /* Wejście i wyjście „rzeczy”: okno panelu, modal, bloki widoku. Wyjście jest krótsze i płytsze od wejścia (kit, rozdz. 12) — okno ma zniknąć, a nie odjechać. js/core/motion.js czyta --t-enter, --m-step i --m-rise stąd, więc czasy kaskady w JS i w CSS nie mogą się rozjechać. */ --t-enter: .34s; --t-exit: .16s; --m-step: 28ms; /* odstęp między kolejnymi blokami kaskady */ --m-rise: 10px; /* skąd podjeżdża blok przy wejściu */ /* ======================================================= WARSTWA ZGODNOŚCI — stare nazwy z poprzedniego motywu. Zostają, bo wskazuje na nie ~5 tys. linii reguł widoków; wartości są już PÓŁMROKOWE, więc podmiana jest natychmiastowa. Nowy kod używa nazw z sekcji wyżej. ======================================================= */ --bg-elev: var(--sidebar-bg); --border: var(--line-strong); --border-soft: var(--line); --ring: var(--line-hover); --text: var(--txt); --text-dim: var(--dim); --text-mute: var(--mut); --accent: var(--blue); --accent-2: var(--blue-m); --accent-soft: var(--blue-10); --accent-ring: var(--blue-38); --ok: var(--grn); --warn: var(--org); --err: var(--red); --info: var(--cyn); --info-soft: var(--cyn-10); --info-ring: var(--cyn-26); --fs-1: var(--fs-meta); --fs-2: var(--fs-dense); --fs-3: var(--fs-body); --fs-4: var(--fs-title); --fs-5: var(--fs-title); --fs-6: var(--fs-kpi); --fs-7: var(--fs-page); --fs-lead: var(--fs-page); --fw-body: var(--fw-reg); --fw-med-l: var(--fw-med); --fw-strong: var(--fw-bold); --space-1: var(--s-1); --space-2: var(--s-2); --space-3: var(--s-3); --space-4: var(--s-4); --space-5: var(--s-5); --space-6: var(--s-6); --space-7: var(--s-7); --radius: var(--r-m); --radius-sm: var(--r-s); --radius-lg: var(--r-l); --shadow-1: var(--sh-1); --shadow-2: var(--sh-2); } /* Szyna boczna — to, co wcześniej robił clamp(280px, 22%, 360px). Rozbite na progi, bo wartość musi zostać zwykłą długością: szyna zwija się z animacją, a clamp() nie interpoluje z px. */ @media (min-width: 1600px) { :root { --rail: 340px; } } @media (max-width: 1200px) { :root { --rail: 268px; } }