/* * Velius — токены оформления кабинета. * * Копия panel/styles/tokens.css, а тот собран из андроид-клиента * (VeliusClient/android/app/src/main/res/values/colors.xml и dimens.xml). * Это не «похожая палитра», а те же самые числа: человек, у которого на * телефоне стоит клиент, открывает кабинет из бота и обязан увидеть один * продукт, а не два похожих. * * **Источник правды — ресурсы андроида.** Меняется цвет или радиус — правится * там, потом здесь и в панели. Копия, а не общий файл, потому что панель * вшита в бинарник ядра, а кабинет раздаётся статикой с другой машины: общего * места, откуда их можно было бы взять обоим, просто нет. * * Материал: полупрозрачное белое на глубоком нейтральном фоне. Карточка — 4 % * белого, строка на ней — 6 %. Числа маленькие намеренно: на почти чёрном фоне * этого хватает, чтобы поверхность читалась, и не хватает, чтобы она начала * спорить с содержимым. * * Чего здесь нет и почему (правила клиента, они же теперь и наши): * — градиентов в заливках: плоскому экрану нечем изображать изогнутую * поверхность, и градиент читается как заливка из редактора; * — бликов у верхней кромки: это нарисованная фаска, а не свет; * — цветных сияний на пол-экрана: то же самое, только крупнее; * — второго акцента: он немедленно читается как несогласованность. */ :root { color-scheme: dark; /* --- Подложка ------------------------------------------------------- * Ровный фон дороже еле заметного градиента: сияния выключены тем же * способом, что и в клиенте, — прозрачным цветом, чтобы разметка, которая * их ещё упоминает, ничего не рисовала. */ --bg-base: #0d0e12; --bg-veil: #101116; --bg-aurora-1: rgba(255, 255, 255, 0); --bg-aurora-2: rgba(0, 0, 0, 0); --bg-aurora-3: rgba(0, 0, 0, 0); /* --- Поверхности ---------------------------------------------------- * Три глубины: карточка, строка на карточке, панель поверх экрана. * * Заливки — как в клиенте. Кайма первой глубины сильнее клиентской (.12 * против .06), и это осознанное расхождение: на телефоне карточек видно * две-три, а здесь десяток разом, и на большом экране слабая кайма * сливается в один серый ковёр — границу блока приходится угадывать. */ --glass-1-fill: rgba(255, 255, 255, 0.04); --glass-1-edge: rgba(255, 255, 255, 0.12); --glass-2-fill: rgba(255, 255, 255, 0.06); --glass-2-edge: rgba(255, 255, 255, 0.12); --glass-3-fill: rgba(26, 27, 33, 0.94); --glass-3-edge: rgba(255, 255, 255, 0.14); --glass-blur: 18px; --glass-blur-strong: 32px; --glass-saturate: 120%; /* Блики выключены: см. шапку. Токены оставлены, потому что на них ссылаются * правила ниже, и удалять их пришлось бы вместе с ними. */ --specular-top: rgba(255, 255, 255, 0); --specular-bottom: rgba(0, 0, 0, 0); /* Теней в тёмной теме нет: на почти чёрном они не видны, а объявленные * «на всякий случай» дают грязь по краям карточек. */ --shadow-sm: none; --shadow-md: none; --shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, 0.8); --shadow-glow: 0 0 0 1px rgba(129, 140, 248, 0.28); /* --- Текст ----------------------------------------------------------- */ --ink: #edeef2; --ink-soft: #8e9099; --ink-dim: #5f616b; --ink-invert: #0d0e12; /* --- Акцент ---------------------------------------------------------- * Индиго, а не ярко-синий: на почти чёрном насыщенный лазурный светится как * неон, а приглушённый индиго остаётся цветом, а не подсветкой. * * Ролей две, и путать их нельзя. --accent — то, чем красят текст, значки и * тонкие линии: он должен читаться на подложке. --accent-strong — заливка * кнопки, на ней лежит белый --accent-ink. Светлый индиго под белым текстом * дал бы 3:1, тёмный под цветным текстом на фоне — столько же. */ --accent: #818cf8; --accent-lift: #818cf8; --accent-strong: #4f46e5; --accent-deep: #4338ca; --accent-soft: rgba(79, 70, 229, 0.18); --accent-ink: #ffffff; --ok: #34d399; --ok-soft: rgba(52, 211, 153, 0.14); --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, 0.14); --danger: #fb7185; --danger-soft: rgba(251, 113, 133, 0.14); --muted-soft: rgba(255, 255, 255, 0.08); --outline-strong: rgba(255, 255, 255, 0.15); --ripple: rgba(255, 255, 255, 0.08); --scrim: rgba(0, 0, 0, 0.65); --sheet-fill: rgba(26, 27, 33, 0.98); /* --- Тоны плиток ----------------------------------------------------- * Значок каждой строки и каждого раздела лежит на своей плитке. Цвет не * декоративный: он держит взгляд, когда список длинный, и по нему пункт * находят второй раз, не читая названия. * * Пар восемь, и они закреплены за смыслом, а не раздаются по порядку: * синее — про сеть, зелёное — про исправность, янтарное — про питание и * запуск, розовое — про запреты, лиловое — про подмену и маскировку, * бирюзовое — про данные, серое — про служебное, индиго — про своё. */ --tone-indigo: #818cf8; --tone-indigo-bg: rgba(129, 140, 248, 0.24); --tone-blue: #60a5fa; --tone-blue-bg: rgba(96, 165, 250, 0.24); --tone-teal: #2dd4bf; --tone-teal-bg: rgba(45, 212, 191, 0.24); --tone-green: #4ade80; --tone-green-bg: rgba(74, 222, 128, 0.24); --tone-amber: #fbbf24; --tone-amber-bg: rgba(251, 191, 36, 0.24); --tone-rose: #fb7185; --tone-rose-bg: rgba(251, 113, 133, 0.24); --tone-violet: #c084fc; --tone-violet-bg: rgba(192, 132, 252, 0.24); --tone-slate: #94a3b8; --tone-slate-bg: rgba(148, 163, 184, 0.24); /* --- Геометрия ------------------------------------------------------- * Радиусы и шаги отступов — те же, что в клиенте. Отступы идут 6/10/16/24/36: * соседние значения различимы на глаз, но не дают «почти одинаковых» * вариантов, между которыми пришлось бы выбирать. * * --r-md — единственный радиус для всего, что лежит на подложке: карточек, * полей, панелей. Разнобой 12/16/20 глаз замечает как небрежность, даже * когда не может назвать причину. 18, а не 22: на широкой карточке крупное * скругление тянет форму к капсуле, а капсула вместо карточки — примета * начала десятых. */ --r-xs: 6px; --r-sm: 10px; --r-md: 18px; --r-lg: 18px; --r-tile: 12px; --r-chip: 10px; --r-xl: 24px; --r-pill: 999px; --gap-xs: 6px; --gap-sm: 10px; --gap: 16px; --gap-lg: 24px; --gap-xl: 36px; /* Промежуток между карточками — свой, и он меньше шага отступов: 14 против * 16. Это не оплошность, а число из клиента (dimens.xml, card_gap): карточки * стоят стопкой и разделены ещё и каймой, поэтому полный шаг между ними * читается как дыра. */ --gap-card: 14px; /* Кабинет — одна колонка телефонной ширины, и на большом экране тоже: это * тот же продукт, что в телефоне, а не его «настольная версия». Растянутый * на монитор список из трёх строк выглядит пустым, а не просторным. */ --content-max: 560px; --stroke: 1px; /* Нижняя панель — из клиента: высота 58, отступ 5, радиус 22 снаружи и 17 * внутри (22 минус отступ). Несимметричное скругление вложенной формы * заметно даже тем, кто не может назвать причину. */ --nav-h: 58px; --nav-pad: 5px; --nav-r: 22px; --nav-tab-r: 17px; /* Плитка значка в строке: 36 и радиус 10 — те же, что у строки режима на * главной клиента. */ --tile: 36px; --r-tile-sm: 10px; /* --- Окно мини-приложения --------------------------------------------- * Внутри Telegram ни одна привычная величина не значит того же, что в * браузере, и полагаться на них нельзя. * * `env(safe-area-inset-*)` возвращает нули: вебвью не корневой вид, и про * чёлку с полосой жестов он не знает. Свои поля мессенджер присылает * событиями — telegram.js складывает поля устройства с полями интерфейса * Telegram и кладёт сюда. Берётся большее из двух источников: панель обязана * разойтись и с тем и с другим, а какой из них сегодня ненулевой, зависит от * клиента. * * `100dvh` — высота всего листа, а не видимой его части: пока лист не * раскрыт, страница получает полную высоту, а показывают из неё половину. * --vp-stable-h — сколько видно на самом деле, --vp-gap — сколько скрыто * внизу; на него приподнимается всё, что прибито к низу экрана, иначе оно * оказывается за краем. */ --safe-top: max(env(safe-area-inset-top, 0px), var(--tg-inset-top, 0px)); --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-inset-bottom, 0px)); --vp-h: 100dvh; --vp-stable-h: 100dvh; --vp-gap: 0px; /* --- Движение -------------------------------------------------------- * Поверхность должна оседать, а не щёлкать. Длительности короткие: панель — * рабочий инструмент, и анимация здесь подсказывает, что откуда взялось, а * не показывает себя. */ /* Ход один на всё: переходы экранов, появление карточек, смену вкладок. * Значения из клиента (res/anim/velius_ease.xml и длительности переходов): * замедление к концу, без обратного хода. Разные кривые в одном продукте * читаются как несогласованность, даже когда их нельзя назвать. */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 130ms; --dur: 220ms; --dur-screen: 260ms; --dur-slow: 380ms; --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Consolas, monospace; } /* Светлая тема: чистый фон, белые карточки, тень вместо каймы. * * На светлом полупрозрачность не работает — она даёт серую муть вместо * воздуха. Поэтому карточка непрозрачно белая, а отделяет её от фона очень * мягкая тень: примерно то же, что делают системные экраны iOS. */ :root[data-theme="light"] { color-scheme: light; --bg-base: #f6f7f9; --bg-veil: #ffffff; --bg-aurora-1: rgba(0, 0, 0, 0.04); --bg-aurora-2: rgba(0, 0, 0, 0); --bg-aurora-3: rgba(0, 0, 0, 0); --glass-1-fill: #ffffff; --glass-1-edge: rgba(0, 0, 0, 0.08); --glass-2-fill: #ffffff; --glass-2-edge: rgba(0, 0, 0, 0.09); --glass-3-fill: #ffffff; --glass-3-edge: rgba(0, 0, 0, 0.12); --specular-top: rgba(255, 255, 255, 0); --specular-bottom: rgba(0, 0, 0, 0); /* Карточку отделяет не тень, а то, что она белее фона. Тень лишь не даёт * краю потеряться. */ --shadow-sm: 0 1px 2px rgba(11, 12, 20, 0.06); --shadow-md: 0 2px 8px -2px rgba(11, 12, 20, 0.1); --shadow-lg: 0 18px 44px -20px rgba(11, 12, 20, 0.28); --shadow-glow: 0 0 0 1px rgba(79, 70, 229, 0.3); --ink: #0b0c10; --ink-soft: #6a6c75; --ink-dim: #9b9da6; --ink-invert: #ffffff; --accent: #4f46e5; --accent-lift: #6366f1; --accent-strong: #4338ca; --accent-deep: #3730a3; --accent-soft: rgba(67, 56, 202, 0.09); --accent-ink: #ffffff; --ok: #059669; --ok-soft: rgba(5, 150, 105, 0.1); --warn: #b45309; --warn-soft: rgba(180, 83, 9, 0.1); --danger: #dc2626; --danger-soft: rgba(220, 38, 38, 0.1); --muted-soft: rgba(0, 0, 0, 0.06); --outline-strong: rgba(0, 0, 0, 0.12); --ripple: rgba(0, 0, 0, 0.07); --scrim: rgba(0, 0, 0, 0.35); --sheet-fill: #ffffff; /* Те же роли, но на две ступени темнее: светлые варианты тёмной темы на * белом выцветают до пастели и перестают различаться между собой. */ --tone-indigo: #4f46e5; --tone-indigo-bg: rgba(79, 70, 229, 0.15); --tone-blue: #2563eb; --tone-blue-bg: rgba(37, 99, 235, 0.15); --tone-teal: #0d9488; --tone-teal-bg: rgba(13, 148, 136, 0.15); --tone-green: #16a34a; --tone-green-bg: rgba(22, 163, 74, 0.15); --tone-amber: #b45309; --tone-amber-bg: rgba(180, 83, 9, 0.15); --tone-rose: #e11d48; --tone-rose-bg: rgba(225, 29, 72, 0.15); --tone-violet: #7c3aed; --tone-violet-bg: rgba(124, 58, 237, 0.15); --tone-slate: #475569; --tone-slate-bg: rgba(71, 85, 105, 0.15); } /* Кто попросил систему успокоиться, получает спокойную панель: без всплытия, * мерцания и пружины. Переходы прозрачности остаются — они несут смысл. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }