/* Токены темы Bounty — копия значений из docs/themes.md. * * Это НЕ самостоятельный источник цвета: новый цвет сначала появляется в * документе, потом здесь. Иначе панель, веб и мобильные разъезжаются, и * «фирменный закат» становится тремя разными закатами. * * Тема переключается атрибутом `data-theme="dark"` на . * Системную настройку НЕ читаем нигде (docs/themes.md §1, правило 1): * сервис выглядит одинаково у всех, и скриншоты в поддержке совпадают с тем, * что человек видит на экране. */ :root { /* Нейтральные — светлая тема (основная) */ --bg: #ffffff; --surface: #f6f8fa; --surface2: #ffffff; --surface3: #eef1f5; --text: #0b1220; --text2: #5a6675; --text3: #8a94a3; --border: #e5e9ef; --border2: #d5dbe3; --overlay: rgba(11, 18, 32, 0.45); /* Подложка просмотра документа и видоискателя сканера. ОДНА И ТА ЖЕ в обеих темах: скан паспорта на белом фоне сливается со страницей, и края документа перестают быть видны — а именно по краям чаще всего и обрезают то, что должно быть на снимке (docs/themes.md §2) */ --viewer-bg: #14181d; /* Не цвет интерфейса, а сообщение браузеру, каким рисовать СВОЁ: стрелку `select`, галочку чекбокса, полосу прокрутки, встроенный календарь. Без него в тёмной теме родные элементы остаются светлыми, и белая полоса прокрутки вдоль чёрной страницы читается как незагрузившийся стиль */ color-scheme: light; /* Тени живут только в светлой теме */ --shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.06); --shadow-md: 0 4px 16px rgba(11, 18, 32, 0.08); --shadow-lg: 0 12px 32px rgba(11, 18, 32, 0.12); --shadow-brand: 0 8px 24px rgba(226, 88, 47, 0.28); /* Бренд — закат над Андаманским морем (Р-100). Заливка одинакова в обеих темах, чернила у каждой свои: коралл на белом и коралл на чёрном — это разные светлоты, иначе текст либо тускнеет, либо слепит */ --brand: #e2582f; --brand-ink: #b8431f; --accent: #8a4bb0; --accent-ink: #7a3f9c; /* Сумерки после заката. Живут только в градиенте: отдельной заливкой этот синий выглядит холодным и спорит с кораллом */ --dusk: #4a4e8f; /* Чернила ПОВЕРХ градиента. Не переопределяются в тёмной теме намеренно: сам градиент одинаков в обеих, значит и текст на белой кнопке поверх него обязан быть одинаковым. Светлый коралл тёмной темы дал бы на белой плашке контраст 2,4:1 — нечитаемо */ --gradient-ink: #b8431f; --gold: #f5a524; --gold-ink: #b45309; /* Статусы */ --success: #16a34a; --success-ink: #15803d; --warning: #f59e0b; --warning-ink: #b45309; --error: #ef4444; --error-ink: #dc2626; --info: #3b82f6; --info-ink: #2563eb; /* Плашки статусов: 12 % от насыщенного цвета — приём один на обе темы */ --success-bg: rgba(22, 163, 74, 0.12); --warning-bg: rgba(245, 158, 11, 0.12); --error-bg: rgba(239, 68, 68, 0.12); --info-bg: rgba(59, 130, 246, 0.12); --brand-bg: rgba(226, 88, 47, 0.12); /* Деньги, прошедшие мимо сервиса (Р-164): наличная доплата партнёру. Сиреневый, а не зелёный и не серый: зелёный в чеках уже означает «оплачено через нас», а серый — «снято». Третий смысл требует третьего цвета, иначе отчёт читается неверно молча */ --accent-bg: rgba(138, 75, 176, 0.12); /* Градиент бренда: направление всегда 135°. Четыре точки, а не две — закат это переход, и на двух он выглядит просто оранжевым пятном */ --gradient-brand: linear-gradient(135deg, #f7a24b 0%, #ef6b45 42%, #d2417a 72%, #4a4e8f 100%); --gradient-border: linear-gradient(135deg, #f7a24b 0%, #ef6b45 42%, #d2417a 72%, #4a4e8f 100%); --gradient-stay: linear-gradient(135deg, #f7a24b, #e2582f); --gradient-experience: linear-gradient(135deg, #ffd27a, #f5a524); --gradient-service: linear-gradient(135deg, #b06bd1, #6d4e9c); --gradient-gold: linear-gradient(135deg, #ffd27a, #f5a524); /* Мягкая подложка: заметна, но не спорит с текстом поверх */ --gradient-soft: linear-gradient(135deg, rgba(247, 162, 75, .16), rgba(210, 65, 122, .16)); --gradient-hero: linear-gradient(150deg, #f7a24b, #d2417a 55%, #4a4e8f); /* Сетка и форма (docs/design.md) */ --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --gap: 16px; --header-height: 56px; --sidebar-width: 232px; } :root[data-theme="dark"] { --bg: #000000; --surface: #0d1014; --surface2: #14181e; --surface3: #1b2027; --text: #f4f7fa; --text2: #98a3b2; --text3: #6b7684; --border: #232830; --border2: #2e353f; --overlay: rgba(0, 0, 0, 0.65); color-scheme: dark; /* В тёмной теме теней нет: тень на чёрном не видна, а попытка её усилить даёт грязный ореол. Глубину набирают surface2/surface3 и бордеры */ --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-brand: 0 8px 24px rgba(226, 88, 47, 0.22); --brand-ink: #ff9670; --accent-ink: #c9a3e8; --gold-ink: #fbbf24; --success-ink: #4ade80; --warning-ink: #fbbf24; --error-ink: #ff6b6b; --info-ink: #93c5fd; } /* ==================================================================== */ /* КОНСОЛЬ КАБИНЕТОВ (Р-189, Р-191) */ /* ==================================================================== */ /* Рабочая колонка кабинета: до 1320 px на мониторе, дальше по ширине окна. * `--shell` — ПРЕДЕЛ, а не фиксированная величина (Р-191): на 4K колонка * стоит по центру и не растягивается, на ноутбуке занимает всё, на планшете * и телефоне сжимается вместе с полями. * * Брейкпоинты — бутстраповские (576 / 768 / 992 / 1200 / 1400), чтобы наши * правила и его утилиты ломались в одних и тех же местах, а не в соседних. * * Токены лежат здесь, а не в `ui.css` кабинетов, потому что `tokens.css` — * ОДИН файл в пяти копиях (три панели, web, simbank), и расходиться копии * не имеют права: это проверяется `md5sum` (docs/panels-ui.md). */ :root { --shell: 1320px; /* предел ширины рабочей колонки */ --shell-pad: 24px; /* поля колонки; на узких экранах меньше */ --head-a: 54px; /* верхняя полоса: бренд, язык, тема, вошедший */ --head-b: 46px; /* строка разделов */ --head-h: 100px; /* сумма — на неё липнут шапки таблиц */ --radius-xs: 6px; /* Заливка ГЛАВНОЙ кнопки. Отдельный градиент, а не `--gradient-brand`: закат начинается с #f7a24b, и белый текст на нём даёт контраст 2,4:1 — кнопка «Сохранить» читалась бы только на своей правой половине. Здесь оба конца тёмные: белый на #c74a24 это 5,0:1, на #9c3a24 — 6,6:1 */ --gradient-action: linear-gradient(135deg, #c74a24 0%, #9c3a24 100%); /* Тонкая фирменная линия: подчёркивание текущего раздела, верхний кант карточки-акцента. Тот же закат, но высотой 2–3 px, где светлый конец ничего не портит */ --gradient-line: linear-gradient(90deg, #f7a24b 0%, #ef6b45 38%, #d2417a 70%, #4a4e8f 100%); /* Подложка липкой шапки: почти непрозрачная, чтобы прокручиваемая таблица не просвечивала сквозь строку разделов */ --head-bg: rgba(255, 255, 255, 0.92); --head-shadow: 0 1px 0 var(--border), 0 6px 20px rgba(11, 18, 32, 0.06); /* Подсветка строки таблицы под курсором */ --row-hover: rgba(226, 88, 47, 0.06); /* Тень у края прокручиваемой таблицы. Отдельный токен, а не `--overlay`: на чёрном фоне тёмная тень не видна вовсе, и колонка, обрезанная по краю карточки, читается как «данные кончились» */ --scroll-shade: rgba(11, 18, 32, 0.18); } :root[data-theme="dark"] { --head-bg: rgba(0, 0, 0, 0.92); --head-shadow: 0 1px 0 var(--border); --row-hover: rgba(226, 88, 47, 0.10); --scroll-shade: rgba(255, 255, 255, 0.16); } /* Поля колонки на узких экранах. 12 px по краям плюс отступ карточки — это уже 24 px от края стекла до текста; меньше делать нельзя: строка, упирающаяся в край, читается как обрезанная */ @media (max-width: 991.98px) { :root { --shell-pad: 16px; } } @media (max-width: 575.98px) { :root { --shell-pad: 12px; /* Строки разделов на телефоне нет — она уезжает в выдвижное меню, и липкой остаётся только верхняя полоса */ --head-h: 54px; } }