/*
* styles.css
* random_stats.loonix.dev
*
* Один файл на всю панель. Сборки нет, импортов нет: браузер тянет ровно один
* CSS, и порядок правил в нём — единственный порядок, который существует.
*
* ЧТО ЗДЕСЬ ЛЕЖИТ И В КАКОМ ПОРЯДКЕ
* 1. Токены (:root) — цвета, отступы, скругления, тени.
* 2. Сброс и основа — body, типографика, ссылки, фокус.
* 3. Каркас — .container, .page, .page-head, сетки.
* 4. Шапка и навигация — размётку ставит js/nav.js, не страницы.
* 5. Карточки и показатели — .card, .stat-card, .kv, .bar-list.
* 6. Таблицы — .table-wrap, .table, .stack-on-phone.
* 7. Формы — .field, .input, .select, .textarea, .check.
* 8. Кнопки — .btn и его разновидности.
* 9. Бейджи и чипы — .badge, .chip.
* 10. Модалки, тосты — размётку ставит js/utils.js.
* 11. Пагинация, пусто, скелетон.
* 12. Экран входа.
* 13. Мелкие утилиты.
* 14. Холст рисунка — редактор рисунка бота на вкладке «Крокодил».
* 15. Модерация рекламы — пояснения к метрикам, блок трассировки.
* 16. Узкий экран (@media).
*
* ПОЧЕМУ ТЁМНАЯ ТЕМА БЕЗ ПЕРЕКЛЮЧАТЕЛЯ. Панель — рабочий инструмент одного
* человека, а не продукт: светлая тема означала бы вторую полную палитру,
* которую придётся править парой в каждой правке, и ошибку контраста в той
* половине, которую не смотрят. `color-scheme: dark` ниже заодно перекрашивает
* системные части браузера (полосы прокрутки, календарь в `input[type=date]`,
* выпадающий список `select`): без него они остаются белыми и бьют по глазам
* посреди тёмной страницы.
*
* ПОЧЕМУ ВЕЗДЕ ПЕРЕМЕННЫЕ, А НЕ ЦВЕТА. Страницы пишут разные люди (и разные
* агенты) параллельно. Захардкоженный `#1c222d` в чужой странице живёт вечно
* и расходится с остальными при первой же правке палитры; переменная — нет.
* Правило простое: в разметке страниц цветов быть не должно совсем, только
* классы отсюда.
*
* ИМЕНОВАНИЕ. Плоское, через дефис: `.stat-card`, `.stat-value`, `.card-head`.
* Без БЭМ с двойными подчёркиваниями — панель маленькая, вложенности на три
* уровня здесь не бывает, а читать короче.
*/
/* ============================================================
1. Токены
============================================================ */
:root {
color-scheme: dark;
/* Плоскости. От самой дальней (фон страницы) к самой ближней (модалка).
Разница между соседними намеренно маленькая: панель состоит из таблиц,
и контрастные ступени превращали бы страницу в лестницу. Границы
(--border) отделяют лучше, чем перепад яркости. */
--bg: #0e1117;
--surface: #151a23;
--surface-2: #1b212c;
--surface-3: #222936;
--border: #262e3c;
--border-strong: #34405280;
/* Текст. Три ступени, больше не нужно: основной, приглушённый (подписи,
вторые строки) и совсем блёклый (плейсхолдеры, «нет данных»). */
--text: #e7ecf3;
--text-dim: #9aa7b8;
--text-faint: #6c7889;
/* Смыслы. Каждый цвет идёт парой: сам цвет для текста и «слабый» для
подложки бейджа. Слабый задан через rgba, а не отдельным hex, — он обязан
ложиться на любую из плоскостей выше и не выглядеть заплаткой. */
--accent: #4c8dff;
--accent-hover: #6ea2ff;
--accent-weak: rgba(76, 141, 255, 0.14);
--ok: #3ecf8e;
--ok-weak: rgba(62, 207, 142, 0.14);
--warn: #e2a83c;
--warn-weak: rgba(226, 168, 60, 0.14);
--danger: #f3706e;
--danger-hover: #ff8583;
--danger-weak: rgba(243, 112, 110, 0.14);
--gold: #d9a441;
--gold-weak: rgba(217, 164, 65, 0.16);
--radius-sm: 6px;
--radius: 10px;
--radius-lg: 14px;
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
--shadow-3: 0 24px 60px rgba(0, 0, 0, 0.55);
/* Обводка фокуса — одна на всю панель. Отдельной переменной, потому что
повторяется в десятке мест, и разъехавшийся фокус выглядит как
недоделанная страница. */
--focus-ring: 0 0 0 3px rgba(76, 141, 255, 0.35);
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* Моноширинный — для UUID, версий, кодов стран и JSON. У пропорционального
шрифта «l», «1» и «I» неразличимы, а идентификаторы отсюда переносят
руками в консоль и в запросы. */
--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
/* Высота шапки. Нужна не только шапке: липкая шапка перекрывает якорь,
на который ведёт ссылка, и `scroll-margin-top` считается от этого числа. */
--header-h: 56px;
}
/* ============================================================
2. Сброс и основа
============================================================ */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
/* Прокрутка к якорю не должна прятать цель под липкой шапкой. */
scroll-padding-top: calc(var(--header-h) + 12px);
}
/* Страница, с которой уже уводят. Класс вешает `leaveTo` из js/auth.js.
Присваивание `location.href` переход не совершает, а только назначает: до
того как он уйдёт, браузер успевает дорисовать и выполнить инлайновые
скрипты страницы. Человек без пропуска секунду смотрит на каркас защищённого
экрана. Правило гасит его на это время.
Гасим , а фон на это время задаём самому : спрятанное тело
перестаёт быть источником фона страницы, и без второго правила на месте
тёмной панели мигал бы белый лист. */
html.auth-gate {
background: var(--bg);
}
html.auth-gate body {
display: none;
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font);
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
/* Цифры в таблицах должны стоять столбиком: без табличных цифр колонка
«1 204 / 998 / 12» пляшет по ширине от строки к строке. */
font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4 {
margin: 0;
font-weight: 600;
line-height: 1.25;
}
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
p { margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }
a {
color: var(--accent);
text-decoration: none;
}
a:hover {
color: var(--accent-hover);
text-decoration: underline;
}
code, pre, .mono {
font-family: var(--mono);
font-size: 0.92em;
}
/* Фокус показываем только тем, кто ходит с клавиатуры: `:focus-visible`,
а не `:focus`. Кольцо вокруг только что нажатой мышью кнопки читается как
«кнопка залипла», и первое, что делают, — убирают `outline` совсем, вместе
с доступностью для клавиатуры. */
:focus { outline: none; }
:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
border-radius: var(--radius-sm);
}
::selection {
background: var(--accent-weak);
color: var(--text);
}
/* ============================================================
3. Каркас страницы
============================================================
Каждая страница панели выглядит так:
шапку рисует js/nav.js
Пользователи
…
… кнопки …
… карточки, таблицы …
*/
.container {
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: 0 20px;
}
.page {
padding-top: 24px;
padding-bottom: 64px;
}
.page-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 20px;
}
.page-title {
font-size: 22px;
}
.page-subtitle {
margin: 4px 0 0;
color: var(--text-dim);
font-size: 13px;
}
.page-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
/* Сетки. `auto-fit` + `minmax` вместо media-запросов на каждую сетку: колонки
считает браузер по фактической ширине, и сетка одинаково правильно ведёт
себя внутри узкой карточки и во всю страницу. */
.grid {
display: grid;
gap: 16px;
}
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stack {
display: flex;
flex-direction: column;
gap: 16px;
}
.stack-sm { gap: 8px; }
.row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.spacer { flex: 1 1 auto; }
/* ============================================================
4. Шапка и навигация
Размётку ставит js/nav.js — целиком, включая ссылки, кнопку «Выйти»,
кнопку-гамбургер и подложку. В HTML страницы стоит только пустой
. Повторённый в четырёх страницах блок шапки
через месяц повторён в четырёх РАЗНЫХ видах.
============================================================ */
.app-header {
position: sticky;
top: 0;
z-index: 40;
/* Фон НЕПРОЗРАЧНЫЙ, и никакого `backdrop-filter` здесь быть не должно.
Полупрозрачная шапка с размытием выглядит лучше ровно до того момента, пока
не откроют выдвижное меню: `backdrop-filter` (как `filter` и `transform`)
делает элемент содержащим блоком для ВСЕХ `position: fixed` внутри него,
а внутри шапки лежат и ящик, и его подложка. Ящик с `top: 56px; bottom: 0`
начинает считаться от шапки высотой 56 пикселей — то есть схлопывается
в полоску, — а подложка вместо страницы затемняет одну шапку. Ломается
это молча и только на узком экране: на мониторе всё выглядит как задумано.
Липкая шапка при этом всё равно заводит свой контекст наложения (sticky
с z-index), и это как раз то, что нужно: тройка «подложка, ящик, кнопка»
складывается внутри шапки и целиком лежит поверх страницы. Разница в том,
что контекст наложения не трогает `position: fixed`, а содержащий блок —
трогает. */
background: var(--surface);
border-bottom: 1px solid var(--border);
}
.app-header-bar {
display: flex;
align-items: center;
gap: 14px;
min-height: var(--header-h);
}
.app-brand {
display: flex;
align-items: baseline;
gap: 8px;
color: var(--text);
font-weight: 650;
font-size: 15px;
white-space: nowrap;
flex-shrink: 0;
}
.app-brand:hover {
color: var(--text);
text-decoration: none;
}
.app-brand-tag {
color: var(--text-faint);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.app-nav {
display: flex;
align-items: center;
gap: 2px;
flex: 1 1 auto;
min-width: 0;
}
.nav-link {
display: block;
padding: 7px 12px;
border-radius: var(--radius-sm);
color: var(--text-dim);
font-size: 14px;
font-weight: 500;
white-space: nowrap;
transition: background 0.12s, color 0.12s;
}
.nav-link:hover {
background: var(--surface-2);
color: var(--text);
text-decoration: none;
}
.nav-link.active {
background: var(--accent-weak);
color: var(--accent);
}
.nav-toggle {
display: none; /* включается в @media; nav.js по этому и узнаёт ширину экрана */
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface-2);
color: var(--text);
cursor: pointer;
flex-shrink: 0;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
display: block;
width: 16px;
height: 2px;
border-radius: 2px;
background: currentColor;
}
.nav-toggle-bars {
position: relative;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
content: "";
position: absolute;
left: 0;
}
.nav-toggle-bars::before { top: -5px; }
.nav-toggle-bars::after { top: 5px; }
/* Подложка затемняет ВСЁ, включая саму шапку, и это не небрежность. Полоска
справа от открытого ящика — то самое место, куда тыкают, чтобы его закрыть,
а в этой полоске стоит «Выйти». Незатемнённая и живая кнопка выхода означала
бы, что привычный жест «закрыть меню» выкидывает из панели. */
.nav-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 1;
/* Палец по подложке не должен листать страницу под ней: `overflow: hidden`
на теле на iOS касания надёжно не держит. */
touch-action: none;
}
.logout-btn {
flex-shrink: 0;
}
/* Полоска «пропуск скоро кончится». Разметку ставит js/nav.js, там же лежит
и объяснение, зачем внутри два текста.
Главное здесь — полоска НИКОГДА не переносится и не растит шапку. Шапка это
одна строка в 56 пикселей, и от этого же числа отсчитывается верх выдвижного
ящика (`.app-nav { top: var(--header-h) }`): переносом на вторую строку
ломается не только шапка, но и меню под ней. Поэтому `nowrap`, а лишнее
обрезается многоточием — на самом узком экране останется «Пропуск…», но
строка будет одна, а рядом с полоской не будут наезжать друг на друга
название панели и «Выйти».
`display: inline-block` перебивает `inline-flex` от `.chip`: многоточие
работает в блочном контейнере, а не во флексе. */
.pass-warning {
display: inline-block;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* На широком экране показан длинный текст, короткий спрятан. Меняются местами
в @media внизу файла. */
.pass-warning-short {
display: none;
}
/* ============================================================
5. Карточки, показатели, пары «ключ — значение», распределения
============================================================
Заголовок
…
…
*/
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-1);
}
.card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
border-bottom: 1px solid var(--border);
}
.card-title {
font-size: 15px;
font-weight: 600;
}
.card-subtitle {
margin: 2px 0 0;
color: var(--text-dim);
font-size: 12px;
}
.card-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.card-body {
padding: 18px;
}
/* Таблицу кладут в карточку БЕЗ `.card-body`: рамка карточки уже очертила
блок, и второй отступ вокруг таблицы превращает её в узкую полосу
посередине. Нижние углы скругляем, чтобы последняя строка не вылезала
за скруглённый край карточки. */
.card > .table-wrap {
border-radius: 0 0 var(--radius) var(--radius);
}
/* А если под таблицей стоит пагинация — скруглять надо её, не таблицу. */
.card > .table-wrap:not(:last-child) {
border-radius: 0;
}
.card-foot {
padding: 12px 18px;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.card-note {
color: var(--text-dim);
font-size: 12px;
}
/* Плитка показателя. Значение крупное, подпись мелкая сверху — читают их
именно в этом порядке: сначала «сколько», потом «чего». */
.stat-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 16px;
box-shadow: var(--shadow-1);
}
.stat-label {
color: var(--text-dim);
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.stat-value {
margin-top: 6px;
font-size: 26px;
font-weight: 650;
line-height: 1.1;
}
.stat-hint {
margin-top: 4px;
color: var(--text-faint);
font-size: 12px;
}
/* Пары «ключ — значение»: карточка пользователя, сводка рассылки.
Сетка, а не таблица: колонка ключей выравнивается сама, а на телефоне
пара складывается в две строки одним правилом в @media. */
.kv {
display: grid;
grid-template-columns: minmax(120px, max-content) 1fr;
gap: 8px 16px;
align-items: baseline;
}
.kv-key {
color: var(--text-dim);
font-size: 13px;
}
.kv-value {
min-width: 0;
word-break: break-word;
}
/* Распределения из /stats: по платформам, странам, языкам. Полоска рисуется
шириной вложенного .bar-fill — её ставит страница через style="width:NN%",
это единственное место, где инлайновый стиль оправдан: число приходит
из данных и классом не выражается. */
.bar-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.bar-row {
display: grid;
grid-template-columns: minmax(90px, 140px) 1fr minmax(56px, auto);
gap: 12px;
align-items: center;
}
.bar-label {
color: var(--text-dim);
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bar-track {
height: 8px;
border-radius: 999px;
background: var(--surface-3);
overflow: hidden;
}
.bar-fill {
height: 100%;
border-radius: 999px;
background: var(--accent);
}
.bar-value {
font-size: 13px;
text-align: right;
color: var(--text);
}
/* ============================================================
6. Таблицы
============================================================
Кто
Сколько
…
…
`data-label` на КАЖДОЙ ячейке обязателен: на телефоне таблица разбирается
на карточки, шапки там нет, и без подписи остаётся столбик значений без
имён. См. `.stack-on-phone` в разделе 14.
*/
.table-wrap {
/* Горизонтальная прокрутка живёт здесь, а не у body. Таблица на девять
колонок шире телефона всегда, и если её не запереть, вбок уезжает вся
страница вместе с шапкой. */
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.table th,
.table td {
padding: 10px 14px;
text-align: left;
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.table thead th {
position: sticky;
top: 0;
z-index: 1;
background: var(--surface-2);
color: var(--text-dim);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
}
.table tbody tr:last-child td {
border-bottom: none;
}
.table tbody tr:hover td {
background: var(--surface-2);
}
.table-compact th,
.table-compact td {
padding: 7px 12px;
}
/* Строка-ссылка. Курсор обязателен: без него по строке не догадаются нажать. */
.table tr.is-clickable {
cursor: pointer;
}
.table tr.is-danger td {
background: var(--danger-weak);
}
/* Колонка с числами — вправо: так разряды выстраиваются друг под другом
и «1 204» против «998» сравниваются глазом без чтения. */
.table .num,
.num {
text-align: right;
font-variant-numeric: tabular-nums;
}
.table .col-actions {
width: 1%;
white-space: nowrap;
text-align: right;
}
.row-actions {
display: inline-flex;
gap: 6px;
justify-content: flex-end;
}
/* ============================================================
7. Формы
============================================================
*/
.form {
display: flex;
flex-direction: column;
gap: 14px;
}
/* Ряд полей. `auto-fit` держит поля в ряд, пока каждому хватает 220 пикселей,
и переносит их, когда перестаёт, — без единого media-запроса и одинаково
в модалке и во всю ширину страницы. */
.form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
}
.field {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.field-label {
color: var(--text-dim);
font-size: 13px;
font-weight: 500;
}
.field-hint {
color: var(--text-faint);
font-size: 12px;
}
.field-error {
color: var(--danger);
font-size: 12px;
}
.input,
.select,
.textarea {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface-2);
color: var(--text);
font-family: inherit;
font-size: 14px;
line-height: 1.4;
transition: border-color 0.12s, box-shadow 0.12s;
}
.textarea {
min-height: 96px;
resize: vertical;
}
.input::placeholder,
.textarea::placeholder {
color: var(--text-faint);
}
.input:focus,
.select:focus,
.textarea:focus {
border-color: var(--accent);
box-shadow: var(--focus-ring);
}
.input:disabled,
.select:disabled,
.textarea:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.input.is-invalid,
.select.is-invalid,
.textarea.is-invalid {
border-color: var(--danger);
}
/* Стрелка у select нарисована фоном, а не полагается на системный вид:
у нативной стрелки в тёмной теме на части браузеров остаётся светлая
подложка. */
.select {
appearance: none;
-webkit-appearance: none;
padding-right: 32px;
background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}
.check {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 14px;
user-select: none;
}
.check input[type="checkbox"],
.check input[type="radio"] {
width: 16px;
height: 16px;
accent-color: var(--accent);
cursor: pointer;
margin: 0;
}
.form-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
/* Панель над таблицей: поиск, фильтры, кнопки. */
.toolbar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.toolbar .input,
.toolbar .select {
width: auto;
min-width: 200px;
}
.search-input {
flex: 1 1 260px;
max-width: 380px;
}
/* Переключатель фильтров (all | premium | manual | store | blocked | free). */
.filter-tabs,
.tabs {
display: inline-flex;
gap: 2px;
padding: 3px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
flex-wrap: wrap;
}
.filter-tab,
.tab {
padding: 6px 12px;
border: none;
border-radius: 5px;
background: transparent;
color: var(--text-dim);
font-family: inherit;
font-size: 13px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
}
.filter-tab:hover,
.tab:hover {
color: var(--text);
}
.filter-tab.active,
.tab.active {
background: var(--surface-3);
color: var(--text);
}
.tab-panel[hidden] {
display: none;
}
/* ============================================================
8. Кнопки
============================================================
`.btn` сам по себе — вторичная кнопка. Так чаще всего и нужно: главная
на экране одна, остальные её обрамляют. `.btn-primary` добавляют осознанно.
*/
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 14px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface-2);
color: var(--text);
font-family: inherit;
font-size: 14px;
font-weight: 500;
line-height: 1.3;
white-space: nowrap;
cursor: pointer;
transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.btn:hover {
background: var(--surface-3);
border-color: var(--border-strong);
text-decoration: none;
color: var(--text);
}
.btn-primary {
background: var(--accent);
border-color: var(--accent);
color: #08111f;
font-weight: 600;
}
.btn-primary:hover {
background: var(--accent-hover);
border-color: var(--accent-hover);
color: #08111f;
}
.btn-danger {
background: var(--danger-weak);
border-color: transparent;
color: var(--danger);
}
.btn-danger:hover {
background: var(--danger);
border-color: var(--danger);
color: #1a0708;
}
.btn-ghost {
background: transparent;
border-color: transparent;
color: var(--text-dim);
}
.btn-ghost:hover {
background: var(--surface-2);
color: var(--text);
}
.btn-sm {
padding: 5px 10px;
font-size: 13px;
}
.btn-block {
width: 100%;
}
/* Кнопка-иконка: «скопировать», «закрыть». Квадратная, без текста. */
.btn-icon {
width: 30px;
height: 30px;
padding: 0;
font-size: 14px;
}
/* Занятая и недоступная кнопка. СТОИТ ПОСЛЕДНЕЙ В РАЗДЕЛЕ, и это обязательно:
`.btn-primary:hover` весит ровно столько же (класс + псевдокласс), а `:hover`
на выключенной кнопке браузеры продолжают применять — стой это правило выше,
наведённая мышь возвращала бы заблокированной кнопке её обычный вид.
Гасим ФОН И ЦВЕТ, а не всю кнопку `opacity`. Прозрачность разбавляет и
подпись: тёмный текст `.btn-primary` (#08111f) на полупрозрачном синем даёт
контраст около 1.6:1 — «Проверяем…» на кнопке входа превращается в пятно
ровно тогда, когда человек ждёт от неё ответа. Заблокированная кнопка обязана
читаться: она и есть единственное сообщение о том, что запрос идёт.
Серый вместо цвета — сам по себе понятный знак «сейчас нельзя»: главная
кнопка теряет заливку, опасная — красноту, и перепутать состояния нечем. */
.btn:disabled,
.btn[disabled],
.btn.is-loading,
.btn:disabled:hover,
.btn[disabled]:hover,
.btn.is-loading:hover {
background: var(--surface-2);
border-color: var(--border);
color: var(--text-dim);
cursor: not-allowed;
}
/* ============================================================
9. Бейджи и чипы
============================================================
Смысловые бейджи заведены отдельными классами (`.badge-premium`,
`.badge-blocked`, …) намеренно. Четыре страницы будут показывать одни и те
же признаки пользователя, и без готового имени каждая покрасит их по-своему:
«ручная выдача» окажется зелёной на одной странице и жёлтой на другой.
*/
.badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 8px;
border-radius: 999px;
background: var(--surface-3);
color: var(--text-dim);
font-size: 12px;
font-weight: 600;
line-height: 1.6;
white-space: nowrap;
}
.badge-ok { background: var(--ok-weak); color: var(--ok); }
.badge-warn { background: var(--warn-weak); color: var(--warn); }
.badge-danger { background: var(--danger-weak); color: var(--danger); }
.badge-info { background: var(--accent-weak); color: var(--accent); }
.badge-muted { background: var(--surface-3); color: var(--text-faint); }
/* Прикладные имена. Меняется цвет признака — меняется здесь, в одном месте. */
.badge-premium { background: var(--gold-weak); color: var(--gold); }
.badge-store { background: var(--accent-weak); color: var(--accent); }
.badge-manual { background: var(--warn-weak); color: var(--warn); }
.badge-blocked { background: var(--danger-weak); color: var(--danger); }
.badge-free { background: var(--surface-3); color: var(--text-faint); }
.chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 8px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface-2);
color: var(--text-dim);
font-size: 12px;
}
/* Сообщение во всю ширину блока: ошибка загрузки, предупреждение перед
опасным действием, подтверждение отправки. */
.alert {
padding: 10px 14px;
border: 1px solid var(--border);
border-left-width: 3px;
border-radius: var(--radius-sm);
background: var(--surface-2);
font-size: 14px;
}
.alert-error { border-left-color: var(--danger); color: var(--danger); background: var(--danger-weak); }
.alert-ok { border-left-color: var(--ok); color: var(--ok); background: var(--ok-weak); }
.alert-warn { border-left-color: var(--warn); color: var(--warn); background: var(--warn-weak); }
.alert-info { border-left-color: var(--accent); color: var(--text); background: var(--accent-weak); }
.alert:empty {
display: none; /* пустой контейнер ошибки не должен занимать место */
}
/* Блок с JSON: payload в журнале действий, тело ответа. */
.code-block {
margin: 0;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg);
color: var(--text-dim);
font-family: var(--mono);
font-size: 12px;
line-height: 1.5;
overflow-x: auto;
white-space: pre-wrap;
word-break: break-word;
}
/* ============================================================
10. Модальные окна и тосты
============================================================
Размётку ставит js/utils.js (`showModal`, `confirmDialog`, `toast`), руками
её не пишут. Классы описаны здесь, чтобы содержимое модалки, которое страница
передаёт в `showModal`, знало, во что оно попадёт:
…
… сюда уходит содержимое страницы …
… кнопки …
*/
.modal-backdrop {
position: fixed;
inset: 0;
z-index: 100;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(4, 7, 12, 0.7);
}
.modal-backdrop.is-open {
display: flex;
}
.modal {
width: 100%;
max-width: 520px;
/* Высоту ограничиваем окном, а не содержимым: длинный список языков рассылки
иначе уезжает за нижний край, вместе с кнопкой «Отправить».
Двумя строками, и вторая важнее первой. На телефоне `100vh` — это высота
окна БЕЗ адресной строки, то есть заведомо больше того, что видно: модалка
ровно на `100vh` вылезает за нижний край на высоту этой самой строки, а
вылезает у неё как раз подвал с кнопками «Отмена» и «Заблокировать».
Дотянуться до них нельзя — страница под модалкой не листается (`is-locked`),
а сама модалка прокручивает только тело. `100dvh` считает по тому, что
видно сейчас. Первая строка остаётся для браузеров, которые про `dvh`
не знают: там правило просто не применится и возьмётся прежнее. */
max-height: calc(100vh - 40px);
max-height: calc(100dvh - 40px);
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-3);
}
.modal-wide { max-width: 760px; }
.modal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 18px;
border-bottom: 1px solid var(--border);
}
.modal-title {
font-size: 16px;
font-weight: 600;
}
.modal-body {
padding: 18px;
overflow-y: auto; /* прокручивается тело, шапка и кнопки остаются на месте */
}
.modal-foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding: 14px 18px;
border-top: 1px solid var(--border);
flex-wrap: wrap;
}
/* Пока открыта модалка, страница под ней не листается: иначе прокрутка колесом
над затемнением уводит список, и, закрыв окно, человек оказывается в другом
месте таблицы. Тот же класс вешает на body выдвижное меню в nav.js. */
body.is-locked {
overflow: hidden;
}
/* Тосты. Стопку создаёт utils.js один раз на страницу. */
.toast-stack {
position: fixed;
z-index: 200;
right: 16px;
bottom: 16px;
display: flex;
flex-direction: column;
gap: 8px;
/* Стопка растянута по ширине экрана ради телефона, но кликам не мешает:
ловят их сами тосты (`pointer-events: auto`). */
max-width: min(380px, calc(100vw - 32px));
pointer-events: none;
}
.toast {
pointer-events: auto;
display: flex;
align-items: flex-start;
gap: 10px;
padding: 11px 14px;
border: 1px solid var(--border);
border-left-width: 3px;
border-radius: var(--radius-sm);
background: var(--surface-3);
color: var(--text);
font-size: 14px;
box-shadow: var(--shadow-2);
animation: toast-in 0.16s ease-out;
}
.toast-ok { border-left-color: var(--ok); }
.toast-error { border-left-color: var(--danger); }
.toast-info { border-left-color: var(--accent); }
.toast-text {
flex: 1 1 auto;
min-width: 0;
word-break: break-word;
}
.toast-close {
flex-shrink: 0;
border: none;
background: transparent;
color: var(--text-faint);
font-size: 14px;
line-height: 1;
padding: 2px;
cursor: pointer;
}
.toast-close:hover { color: var(--text); }
.toast.is-leaving {
animation: toast-out 0.16s ease-in forwards;
}
@keyframes toast-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
@keyframes toast-out {
from { opacity: 1; transform: none; }
to { opacity: 0; transform: translateY(8px); }
}
/* ============================================================
11. Пагинация, пустое состояние, скелетон
============================================================ */
/* Размётку рисует `renderPagination` из utils.js. */
.pagination {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
padding: 12px 18px;
border-top: 1px solid var(--border);
}
.pagination-status {
color: var(--text-dim);
font-size: 13px;
}
.pagination-controls {
display: flex;
align-items: center;
gap: 6px;
}
.empty-state {
padding: 40px 20px;
text-align: center;
color: var(--text-dim);
}
.empty-state-title {
color: var(--text);
font-size: 15px;
font-weight: 600;
margin-bottom: 4px;
}
.empty-state-text {
font-size: 13px;
margin-bottom: 14px;
}
.empty-state-text:last-child {
margin-bottom: 0;
}
/* Скелетон — не украшение. Между запросом и ответом проходит полсекунды-секунда,
и пустая страница в этот момент неотличима от сломанной: человек жмёт
«обновить» и запускает второй запрос. Серая заготовка нужной формы говорит
«данные едут» без единого слова.
Разметку ставит `showSkeleton` из utils.js. */
.skeleton {
position: relative;
overflow: hidden;
border-radius: var(--radius-sm);
background: var(--surface-2);
}
.skeleton::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
animation: skeleton-shimmer 1.2s infinite;
}
.skeleton-line {
height: 12px;
margin: 6px 0;
}
.skeleton-title {
height: 18px;
width: 40%;
margin-bottom: 12px;
}
.skeleton-w-25 { width: 25%; }
.skeleton-w-40 { width: 40%; }
.skeleton-w-60 { width: 60%; }
.skeleton-w-80 { width: 80%; }
.skeleton-rows {
padding: 14px 18px;
}
@keyframes skeleton-shimmer {
to { transform: translateX(100%); }
}
/* Кто просил меньше движения — тому меньше движения. Мерцающий скелетон
и выезжающие тосты для части людей это не «живо», а физически неприятно. */
@media (prefers-reduced-motion: reduce) {
.skeleton::after { animation: none; }
.toast { animation: none; }
.toast.is-leaving { animation: none; opacity: 0; }
/* Выезжающий сбоку ящик — ровно тот вид движения, от которого укачивает.
Убираем плавность, но не `visibility`: без неё закрытый ящик остаётся
невидимой плёнкой поверх страницы и ловит нажатия. */
.app-nav,
.app-nav.nav-open { transition: none; }
* { transition-duration: 0.01ms !important; }
}
/* Строка «идёт загрузка» там, где скелетон избыточен. */
.spinner {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid var(--border-strong);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 0.7s linear infinite;
vertical-align: -2px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* ============================================================
12. Экран входа
============================================================ */
.login-wrap {
/* Та же пара, что у модалки: `100vh` на телефоне выше видимой части окна,
и форма входа оказывается не по центру, а с прокруткой — на экране, где
всего два поля и кнопка. */
min-height: 100vh;
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.login-box {
width: 100%;
max-width: 380px;
padding: 28px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-2);
}
.login-title {
font-size: 20px;
margin-bottom: 4px;
}
.login-subtitle {
color: var(--text-dim);
font-size: 13px;
margin-bottom: 20px;
}
.login-form {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 16px;
}
/* Поле кода: шесть цифр в разрядку. Разрядка здесь не для красоты — она
разбивает набранное на различимые знаки, и опечатка в шестизначном коде
видна до нажатия кнопки. */
.code-input {
font-family: var(--mono);
font-size: 20px;
letter-spacing: 0.32em;
text-align: center;
}
.login-hint {
margin-top: 18px;
color: var(--text-faint);
font-size: 12px;
line-height: 1.5;
}
/* ============================================================
13. Мелкие утилиты
============================================================ */
.muted { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.tone-ok { color: var(--ok); }
.tone-warn { color: var(--warn); }
.tone-danger{ color: var(--danger); }
.tone-accent{ color: var(--accent); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.full-width { width: 100%; }
.hidden { display: none !important; }
/* Обрезка длинной строки многоточием. Работает только когда у элемента есть
ограничение по ширине, поэтому `max-width` задают на месте. */
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Идентификатор: UUID, originalTransactionID, productID. Моноширинный
и мельче — это служебная строка, которую копируют, а не читают. */
.id-cell {
font-family: var(--mono);
font-size: 12px;
color: var(--text-dim);
}
/* Прочерк вместо пустого значения. Пустая ячейка выглядит как недогрузившаяся;
прочерк говорит «данных нет и не будет». Ставит его formatters из utils.js. */
.dash {
color: var(--text-faint);
}
/* Видно только экранному диктору: подписи к полям, у которых на экране вместо
подписи стоит иконка. */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* ============================================================
14. Холст рисунка
============================================================
Редактор рисунка бота: модалка со вкладки «Крокодил», в которой рисуют
слово от руки. Размётку ставит js/page-crocodile.js, здесь только внешность.
Библиотеки для рисования здесь нет и завести её нельзя: строгая политика
разрешает скрипты только со своего домена, и подключённая со стороны она
не загрузится молча — модалка откроется пустой, без единого слова на экране.
Всё рисование — обычный `