/* Токены интерфейса v2 (docs/UI-GUIDE.md, разделы 2–3). Основа — дизайн-система GBM Studio v3 владельца, переведённая в тёмную тему «как инвентарь»: тёмные сплошные окна (без прозрачности, владелец 17.10.2026; телефон и планшет — своя светлая тема, device.css), светлый текст, один синий акцент. Компоненты берут цвета, тени, радиусы и шрифты только отсюда; старые имена (--rp-bg, --rp-accent…) оставлены алиасами, чтобы экраны прошлых версий не сломались. Без backdrop-filter: в игре (CEF) он рисует чёрный прямоугольник. */ :root { /* масштаб интерфейса (utils/uiScale.ts пишет его на ) и доли экрана в px вёрстки: внутри body vw/vh не годятся — они от настоящего экрана, а body растянут в --rp-scale раз. Вместо 50vw — calc(50 * var(--rp-vw)) */ --rp-scale: 1; --rp-vw: calc(1vw / var(--rp-scale)); --rp-vh: calc(1vh / var(--rp-scale)); /* шрифты: Manrope — текст, Unbounded — заголовки окон, Spline Sans Mono — цифры (fonts.css) */ --rp-font: 'Manrope', 'Segoe UI', system-ui, sans-serif; --rp-font-display: 'Unbounded', 'Manrope', 'Segoe UI', sans-serif; --rp-font-mono: 'Spline Sans Mono', 'Consolas', monospace; --rp-font-size: 14px; --rp-fs-title: 15px; /* заголовок плитки, UI 700 */ --rp-fs-body: 14px; /* базовый текст */ --rp-fs-ui: 13px; /* кнопки, строки списка, имена */ --rp-fs-sub: 12.5px; /* поясняющий текст */ --rp-fs-caption: 11.5px; /* чипы, подписи */ --rp-fs-micro: 10.5px; /* микро-подписи капсом */ --rp-fs-display-m: 19px; /* заголовок окна */ --rp-fs-display-l: 29px; --rp-lh: 1.45; --rp-track-caps: 0.09em; /* поверхности: сплошные, без прозрачности (затемнение позади окна — у самих окон). canvas — рама окна и полоса G, surface — карточки и плитки внутри (чуть светлее) */ --rp-backdrop: #0A0C10; --rp-canvas: #12161F; --rp-canvas-deep: rgba(255, 255, 255, 0.05); --rp-canvas-groove: rgba(255, 255, 255, 0.14); --rp-surface: #181E2C; --rp-surface-2: rgba(255, 255, 255, 0.06); --rp-well: rgba(0, 0, 0, 0.28); /* утопленная полоса фактов, поле ввода */ --rp-hover: rgba(255, 255, 255, 0.08); --rp-ink: #F3F5F9; --rp-ink-2: #C5CCD8; --rp-ink-3: #8E97AB; --rp-hairline: rgba(255, 255, 255, 0.10); --rp-edge: rgba(255, 255, 255, 0.22); --rp-divider: rgba(255, 255, 255, 0.08); /* один синий: «нажми здесь» — главная кнопка, выбранное, акцентная клавиша. Больше нигде */ --rp-blue: #066AFE; --rp-blue-deep: #A8D8FF; /* ссылки и выбранное на тёмном */ --rp-navy: #001E5B; --rp-navy-soft: #C9D6EC; --rp-navy-mute: #8FA3C6; --rp-cloud: #00B3FF; --rp-wash: rgba(6, 106, 254, 0.20); --rp-wash-2: rgba(6, 106, 254, 0.34); --rp-progress-2: #B6D4FF; --rp-progress-4: #3988FE; --rp-grad-action: linear-gradient(180deg, #287FFE, #055BEF); --rp-grad-next: linear-gradient(135deg, rgba(6, 106, 254, 0.22) 0%, rgba(6, 106, 254, 0.12) 100%); --rp-grad-facts: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)); /* семантика: состояние — тинт и слово, не рамка. done — зелёный, owed — амбер, over — красный */ --rp-done: #9BE8B7; --rp-done-fill: #2E844A; --rp-done-tint: rgba(46, 132, 74, 0.26); --rp-owed: #FFD08A; --rp-owed-fill: #DD7A01; --rp-owed-tint: rgba(221, 122, 1, 0.26); --rp-owed-row: rgba(221, 122, 1, 0.14); --rp-over: #FF8A94; --rp-over-fill: #BA0517; --rp-over-tint: rgba(186, 5, 23, 0.30); --rp-load-ok-bar: #85C49A; --rp-load-tight-bar: #EBB061; --rp-load-over-bar: #E88E86; --rp-load-cap: rgba(255, 255, 255, 0.4); --rp-staff: #824EB1; /* служебный фиолетовый: админ-режимы, F5 */ /* донат (меню F4, кейсы): редкость приза — как цвет фракции, свой смысл, не «нажми» и не семантика состояния; gold — корона Prime и премиум-ветки battle pass (только значок и подпись, не заливки) */ --rp-rar-common: #B0C3D9; --rp-rar-rare: #6F8BFF; --rp-rar-mythic: #A67BFF; --rp-rar-epic: #F06A84; --rp-rar-legendary: #F5C542; --rp-gold: #F2C14E; /* чат: цвет говорит канал */ --rp-chat-say: #FFFFFF; --rp-chat-me: #D8C6FF; --rp-chat-whisper: #BFD4F2; --rp-chat-shout: #FFF0B3; --rp-chat-ooc: #AEBBCF; --rp-chat-admin: #E9D2FF; --rp-chat-news: #A8D8FF; --rp-chat-ann: #FFD08A; --rp-chat-faction: #A6EBD9; /* фракционный чат /f (#713): мятный — свой, не семантика «успех» */ --rp-chat-sys: #C3CFE0; /* форма */ --rp-r-s: 10px; --rp-r-m: 14px; --rp-r-l: 20px; --rp-r-xl: 26px; --rp-r-win: 22px; --rp-r-pill: 999px; --rp-sp-1: 4px; --rp-sp-2: 8px; --rp-sp-3: 12px; --rp-sp-4: 16px; --rp-sp-5: 20px; --rp-sp-6: 24px; /* тени чёрные (на тёмном navy-тень не видна); inset — утопленное; blue — главная кнопка */ --rp-sh-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.3); --rp-sh-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 26px rgba(0, 0, 0, 0.4); --rp-sh-3: 0 2px 4px rgba(0, 0, 0, 0.35), 0 18px 44px rgba(0, 0, 0, 0.5); --rp-inset: inset 0 1.5px 3px rgba(0, 0, 0, 0.45); --rp-sh-active: 0 1px 2px rgba(0, 0, 0, 0.35), 0 3px 8px rgba(0, 0, 0, 0.35); --rp-sh-blue: 0 2px 4px rgba(6, 106, 254, 0.22), 0 8px 18px rgba(6, 106, 254, 0.26); --rp-focus-ring: 0 0 0 2px rgba(9, 13, 22, 0.9), 0 0 0 4px var(--rp-blue); /* текст прямо на кадре: белый с тенью, без пилюль */ --rp-hud-shadow: 0 1px 2px rgba(0, 30, 91, 0.55), 0 0 14px rgba(0, 30, 91, 0.35); /* движение: быстро успокаивается */ --rp-dur-1: 120ms; --rp-dur-2: 180ms; --rp-dur-3: 260ms; --rp-ease: cubic-bezier(0.2, 0.7, 0.3, 1); --rp-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --rp-ease-lift: cubic-bezier(0.34, 1.36, 0.44, 1); /* кино-разговор с НПС (#1650, спецификация канваса Claude Design): цвет и свет НПС присылает сервер и ставит на корень сцены (components/cine/cine.css). Размеры под 1920×1080 */ --rp-cine-npc: #FFE9C2; /* цвет НПС: имя, титр, волна. Не «нажми» и не состояние */ --rp-cine-npc-glow: rgba(255, 233, 194, 0.34); /* свет за титром */ --rp-cine-bar: 136px; /* леттербокс 2,39:1 */ --rp-cine-bar-thin: 48px; /* «Субтитры на кадре» (направление Б) */ --rp-cine-bar-bg: #0A0C10; --rp-cine-fade: 360px; /* затемнение низа кадра */ --rp-cine-fade-a: 0.92; --rp-cine-shade-a: 0.72; /* затемнение под ответами справа */ --rp-cine-vignette: 0.45; --rp-cine-title: 64px; --rp-cine-role: 22px; --rp-cine-banner: 72px; /* надпись момента: «Новое задание», «Путь крайма» */ --rp-cine-result: 40px; /* итог одной строкой */ --rp-cine-speaker: 18px; --rp-cine-sub: 30px; /* субтитры M; S/M/L = 24/30/36 */ --rp-cine-sub-lh: 1.3; --rp-cine-sub-w: 900px; --rp-cine-sub-plate: 0; /* подложка субтитров 0..1 (настройка игрока) */ --rp-cine-word-dim: 0.55; /* ещё не сказанные слова */ --rp-cine-answer: 22px; --rp-cine-answer-w: 600px; --rp-cine-answer-shift: 12px; --rp-cine-key: 36px; --rp-cine-key-lg: 48px; --rp-cine-shift: 12px; /* сдвиг появления; «Меньше движения»: 0 */ --rp-cine-dur-bars: 400ms; --rp-cine-dur-title: 500ms; --rp-cine-dur-fade: 300ms; --rp-cine-stagger: 40ms; --rp-cine-hold: 1000ms; /* удержание Enter: необратимый выбор */ --rp-cine-skip-hold: 600ms; /* удержание Пробела: пропуск */ --rp-cine-timer: 10s; /* ---- алиасы прошлых версий: старые экраны (планшет, телефон, магазины, инвентарь) берут цвета отсюда ---- */ --rp-bg: var(--rp-canvas); --rp-bg-raised: var(--rp-surface); --rp-bg-hover: var(--rp-hover); --rp-border: var(--rp-hairline); --rp-text: var(--rp-ink); --rp-text-muted: var(--rp-ink-3); --rp-accent: var(--rp-blue); --rp-accent-rgb: 6, 106, 254; /* --rp-blue тройкой для rgba(): color-mix() в CEF FiveM нет */ --rp-accent-deep: var(--rp-blue-deep); /* акцент текстом на подложке */ --rp-accent-text: #ffffff; --rp-success: var(--rp-done); --rp-warning: var(--rp-owed); --rp-danger: var(--rp-over); --rp-info: var(--rp-blue-deep); --rp-chat-action: var(--rp-chat-me); --rp-radius: var(--rp-r-s); --rp-radius-sm: 8px; --rp-gap: 8px; --rp-shadow: var(--rp-sh-3); --rp-speed: var(--rp-dur-1); } /* ---- сплошные поверхности без прозрачности (F2, #1773; владелец 21.10.2026: «дизайн v2 у планшета админа, только без прозрачностей») ---- Те же уровни, что белые и цветные слои v2 выше (rgba поверх --rp-surface), но готовым сплошным цветом: внутри окна ничего не просвечивает. Затемнение позади окна (скрим) остаётся — так у всех окон v2 (UI-GUIDE, раздел 2). */ :root { --rp-solid-1: #1F2532; /* белый 3 % — едва приподнятое */ --rp-solid-2: #262C39; /* белый 5–6 % — строка, ячейка, поле на карточке */ --rp-solid-3: #2A303D; /* белый 8–9 % — наведение, чип, разделитель */ --rp-solid-4: #2F3541; /* белый 10 % — вторичная кнопка, тонкая линия */ --rp-solid-5: #363B47; /* белый 12–14 % — выбранная вкладка, наведение кнопки */ --rp-solid-6: #3D424E; /* белый 16–18 % — наведение вторичной, выключенный переключатель */ --rp-solid-7: #4B505A; /* белый 22 % — край */ --rp-solid-well: #10141C; /* чёрный 28–35 % — утопленное: поле ввода, полоса фактов */ --rp-solid-well-2: #0C1017; /* чёрный 40 % — поле в фокусе */ --rp-solid-wash: #142D56; /* синий 20 % — выбранное */ --rp-solid-wash-2: #123873; /* синий 34 % */ --rp-solid-ring: #3988FE; /* обводка выбранного (вместо синего 55 %) */ --rp-solid-done-tint: #1E3934; --rp-solid-owed-tint: #4B3621; --rp-solid-owed-row: #342B26; --rp-solid-over-tint: #491726; --rp-solid-staff: #312F57; /* служебный фиолетовый 50 % — аватар администрации */ --rp-solid-scroll: #3D424E; /* скелетон ленивой подгрузки (#1868, ui/UiSkeleton.vue): сплошные, без прозрачности — блок, блик бегущей волны и подложка строки. Светлые темы (.ios-theme, .fx, сайты со своей палитрой) переопределяют эти три у себя */ --rp-skel: var(--rp-solid-4); --rp-skel-hi: var(--rp-solid-6); --rp-skel-row: var(--rp-solid-2); } /* .rp-solid — корень окна без прозрачностей (рама F2): токены v2 со слоями здесь сплошные, кит (components/ui) берёт их через --rp-fill-* (вне .rp-solid у кита прежние слои) */ .rp-solid { --rp-canvas-deep: var(--rp-solid-2); --rp-canvas-groove: var(--rp-solid-5); --rp-surface-2: var(--rp-solid-2); --rp-well: var(--rp-solid-well); --rp-hover: var(--rp-solid-3); --rp-hairline: var(--rp-solid-4); --rp-edge: var(--rp-solid-7); --rp-divider: var(--rp-solid-3); --rp-wash: var(--rp-solid-wash); --rp-wash-2: var(--rp-solid-wash-2); --rp-grad-next: var(--rp-solid-wash); --rp-grad-facts: var(--rp-solid-2); --rp-done-tint: var(--rp-solid-done-tint); --rp-owed-tint: var(--rp-solid-owed-tint); --rp-owed-row: var(--rp-solid-owed-row); --rp-over-tint: var(--rp-solid-over-tint); --rp-load-cap: #747880; --rp-bg-hover: var(--rp-solid-3); --rp-border: var(--rp-solid-4); --rp-fill-btn: var(--rp-solid-4); --rp-fill-btn-hover: var(--rp-solid-6); --rp-fill-off: var(--rp-solid-2); --rp-fill-chip: var(--rp-solid-4); --rp-fill-list-hover: var(--rp-solid-3); --rp-fill-field-focus: var(--rp-solid-well-2); --rp-fill-close-hover: var(--rp-solid-5); --rp-fill-edit: var(--rp-solid-wash); } .rp-solid ::-webkit-scrollbar-thumb { background: var(--rp-solid-scroll); background-clip: padding-box; } .rp-solid ::-webkit-scrollbar-thumb:hover { background: var(--rp-blue); background-clip: padding-box; }