/* ============================================================ Apex Line — общая система оформления. Подключается и порталом (тёмный фон), и админкой (светлый). Один и тот же набор имён работает на обоих фонах: компонент пишется один раз через --bg / --surface / --text / --accent, а ground-класс на решает, какие это будут цвета. портал, страница подписки админка Нейтрали холодные (уведены в синеву), потому что акцент — фиолетовый. Тёплые серые рядом с ним дают грязь. ============================================================ */ :root { /* ── Акцент. Одинаков на обоих фонах ── */ --violet: #7350F5; /* заливки, кнопки */ --violet-lift: #9B85FF; /* ховер, текст на тёмном */ --violet-deep: #5B3AD9; --violet-hover: #6340E0; /* текст на светлом: на белом #7350F5 еле тянет */ --violet-ink: #FFFFFF; /* что пишем поверх заливки */ /* ── Смысловые цвета ── */ --amber: #F0B44A; /* деньги и предупреждения */ --danger: #FF6B6B; --success: #5FD98A; /* ── Радиусы ── */ --r-lg: 14px; --r-md: 10px; --r-sm: 7px; /* ── Шрифты ── */ --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif; --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; --mono: var(--font-mono); /* старое имя, пока используется в шаблонах */ /* ── Тени ── */ --shadow-sm: 0 1px 3px rgba(10, 10, 20, .08); --shadow-md: 0 8px 24px rgba(10, 10, 20, .10); --shadow-lg: 0 18px 44px rgba(10, 10, 20, .14); } /* ── Тёмный фон: портал, страница подписки ── */ .apex-dark { --bg: #0A0A0E; --bg-tint: #0E0E14; --surface: #14141C; --surface-2: #1C1C26; --sunken: rgba(0, 0, 0, .28); --line: rgba(230, 230, 245, .09); --line-lift: rgba(230, 230, 245, .17); --line-soft: rgba(230, 230, 245, .05); --text: #E8E8F0; --muted: #8A8A9C; --faint: #56566A; /* акцент в контексте фона */ --accent: var(--violet); --accent-text: var(--violet-lift); --accent-ink: var(--violet-ink); --accent-hover: var(--violet-hover); --accent-08: rgba(115, 80, 245, .10); --accent-14: rgba(115, 80, 245, .18); --accent-24: rgba(115, 80, 245, .30); --accent-glow: rgba(115, 80, 245, .45); --amber-text: var(--amber); --danger-text: var(--danger); --success-text: var(--success); --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5); --shadow-md: 0 8px 24px rgba(0, 0, 0, .45); --shadow-lg: 0 18px 44px rgba(0, 0, 0, .55); } /* ── Светлый фон: админка ── */ .apex-light { --bg: #F6F6FA; --bg-tint: #FFFFFF; --surface: #FFFFFF; --surface-2: #F1F1F7; --sunken: #FAFAFD; --line: rgba(22, 22, 34, .10); --line-lift: rgba(22, 22, 34, .20); --line-soft: rgba(22, 22, 34, .05); --text: #16161F; --muted: #61616F; --faint: #9292A2; --accent: var(--violet); --accent-text: var(--violet-deep); --accent-ink: var(--violet-ink); --accent-hover: var(--violet-hover); --accent-08: rgba(115, 80, 245, .07); --accent-14: rgba(115, 80, 245, .13); --accent-24: rgba(115, 80, 245, .24); --accent-glow: rgba(115, 80, 245, .30); /* на белом насыщенные пастельные не читаются — берём глубже */ --amber-text: #B77400; --danger-text: #C93030; --success-text: #17845A; } /* ============================================================ Общие примитивы ============================================================ */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); letter-spacing: -.01em; } h1, h2, h3, h4, .display { font-family: var(--font-display); letter-spacing: -.03em; text-wrap: balance; } ::selection { background: var(--accent); color: var(--accent-ink); } /* Цифры в колонках должны стоять столбиком */ .tabular, .table td, .table th, .stat-value { font-variant-numeric: tabular-nums; } /* Надпись-рубрика над блоком */ .section-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .section-label::before { content: ""; width: 6px; height: 6px; background: var(--accent); display: inline-block; flex: none; transform: rotate(45deg); } /* Знак: линия маршрута, выходящая на пик */ /* fill/stroke наследуются, поэтому задаём их на самом : правило вида .apex-mark path в теневое содержимое не попадает. */ .apex-mark { display: inline-block; vertical-align: middle; flex: none; fill: none; stroke: currentColor; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; } .apex-logo { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; } .apex-logo:hover { color: var(--text); } .apex-logo .apex-mark { color: var(--accent-text); } .text-accent { color: var(--accent-text); } .text-amber { color: var(--amber-text); } .mono { font-family: var(--font-mono); letter-spacing: 0; } @keyframes apex-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .reveal { animation: apex-rise .55s cubic-bezier(.22,.61,.36,1) backwards; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ============================================================ Мост к Bootstrap Админка написана его классами (badge bg-success, btn-primary, alert-info). Переопределяем переменные 5.3 один раз — и все страницы разом переходят на палитру Apex Line. Файл подключается ПОСЛЕ bootstrap.min.css, поэтому при равной специфичности выигрывают эти правила. ============================================================ */ :root { /* Заливки под белый текст. Выбраны так, чтобы держать 4.5:1 с белым и читаться и на светлой карточке, и на тёмной поверхности. */ --fill-primary: #7350F5; --fill-primary-h: #6340E0; --fill-success: #17845A; --fill-success-h: #146E4B; --fill-danger: #C93030; --fill-danger-h: #AE2828; --fill-warning: #A06400; --fill-warning-h: #8A5600; --fill-info: #3D6BC4; --fill-info-h: #3459A6; --fill-secondary: #61616F; --fill-secondary-h: #52525E; } /* На тёмном фоне нейтральная заливка должна быть светлее фона, а не темнее */ .apex-dark { --fill-secondary: #3A3A48; --fill-secondary-h: #46465A; } /* ── Базовые переменные Bootstrap ── */ .apex-light, .apex-dark { --bs-body-bg: var(--bg); --bs-body-color: var(--text); --bs-secondary-color: var(--muted); --bs-border-color: var(--line); --bs-border-radius: var(--r-md); --bs-border-radius-sm: var(--r-sm); --bs-border-radius-lg: var(--r-lg); --bs-font-sans-serif: var(--font-body); --bs-body-font-family: var(--font-body); /* Bootstrap 5.3 красит через *-rgb, а не через --bs-link-color: без этих двух строк ссылки остаются синими. */ --bs-link-color: var(--accent-text); --bs-link-hover-color: var(--accent); --bs-link-color-rgb: 91, 58, 217; --bs-link-hover-color-rgb: 115, 80, 245; --bs-emphasis-color: var(--text); --bs-primary: var(--fill-primary); --bs-secondary: var(--fill-secondary); --bs-success: var(--fill-success); --bs-danger: var(--fill-danger); --bs-warning: var(--fill-warning); --bs-info: var(--fill-info); /* .bg-* и .text-* читают именно *-rgb */ --bs-primary-rgb: 115, 80, 245; --bs-secondary-rgb: 97, 97, 111; --bs-success-rgb: 23, 132, 90; --bs-danger-rgb: 201, 48, 48; --bs-warning-rgb: 160, 100, 0; --bs-info-rgb: 61, 107, 196; } .apex-dark { --bs-secondary-rgb: 58, 58, 72; --bs-link-color-rgb: 155, 133, 255; --bs-link-hover-color-rgb: 203, 185, 255; } /* .text-* на светлом фоне: заливочные тона уже достаточно тёмные, отдельного набора не нужно. На тёмном — берём светлые варианты. */ .apex-dark .text-success { color: var(--success) !important; } .apex-dark .text-danger { color: var(--danger) !important; } .apex-dark .text-warning { color: var(--amber) !important; } .apex-dark .text-primary { color: var(--accent-text) !important; } .apex-light .text-muted { color: var(--muted) !important; } /* ── Кнопки ── */ .btn { --bs-btn-border-radius: var(--r-sm); font-weight: 600; } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn-primary { --bs-btn-bg: var(--fill-primary); --bs-btn-border-color: var(--fill-primary); --bs-btn-hover-bg: var(--fill-primary-h); --bs-btn-hover-border-color: var(--fill-primary-h); --bs-btn-active-bg: var(--fill-primary-h); --bs-btn-active-border-color: var(--fill-primary-h); --bs-btn-disabled-bg: var(--fill-primary); --bs-btn-disabled-border-color: var(--fill-primary); --bs-btn-focus-shadow-rgb: 115, 80, 245; } .btn-success { --bs-btn-bg: var(--fill-success); --bs-btn-border-color: var(--fill-success); --bs-btn-hover-bg: var(--fill-success-h); --bs-btn-hover-border-color: var(--fill-success-h); --bs-btn-active-bg: var(--fill-success-h); --bs-btn-active-border-color: var(--fill-success-h); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-bg: var(--fill-success); --bs-btn-disabled-border-color: var(--fill-success); } .btn-danger { --bs-btn-bg: var(--fill-danger); --bs-btn-border-color: var(--fill-danger); --bs-btn-hover-bg: var(--fill-danger-h); --bs-btn-hover-border-color: var(--fill-danger-h); --bs-btn-active-bg: var(--fill-danger-h); --bs-btn-active-border-color: var(--fill-danger-h); --bs-btn-disabled-bg: var(--fill-danger); --bs-btn-disabled-border-color: var(--fill-danger); } .btn-warning { --bs-btn-bg: var(--fill-warning); --bs-btn-border-color: var(--fill-warning); --bs-btn-hover-bg: var(--fill-warning-h); --bs-btn-hover-border-color: var(--fill-warning-h); --bs-btn-active-bg: var(--fill-warning-h); --bs-btn-active-border-color: var(--fill-warning-h); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-bg: var(--fill-warning); --bs-btn-disabled-border-color: var(--fill-warning); --bs-btn-disabled-color: #fff; } .btn-info { --bs-btn-bg: var(--fill-info); --bs-btn-border-color: var(--fill-info); --bs-btn-hover-bg: var(--fill-info-h); --bs-btn-hover-border-color: var(--fill-info-h); --bs-btn-active-bg: var(--fill-info-h); --bs-btn-active-border-color: var(--fill-info-h); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; } .btn-secondary { --bs-btn-bg: var(--fill-secondary); --bs-btn-border-color: var(--fill-secondary); --bs-btn-hover-bg: var(--fill-secondary-h); --bs-btn-hover-border-color: var(--fill-secondary-h); --bs-btn-active-bg: var(--fill-secondary-h);--bs-btn-active-border-color: var(--fill-secondary-h); } /* Контурные кнопки: в админке это «вторичное действие» рядом с основным, поэтому они должны быть тише — нейтральная рамка вместо цветной. */ .btn-outline-secondary { --bs-btn-color: var(--muted); --bs-btn-border-color: var(--line-lift); --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-color: var(--text); --bs-btn-hover-border-color: var(--line-lift); --bs-btn-active-bg: var(--surface-2); --bs-btn-active-color: var(--text); --bs-btn-active-border-color: var(--line-lift); } .btn-outline-primary { --bs-btn-color: var(--accent-text); --bs-btn-border-color: var(--accent-24); --bs-btn-hover-bg: var(--fill-primary); --bs-btn-hover-border-color: var(--fill-primary); --bs-btn-active-bg: var(--fill-primary-h); --bs-btn-active-border-color: var(--fill-primary-h); } .btn-outline-success { --bs-btn-color: var(--success-text); --bs-btn-border-color: color-mix(in srgb, var(--fill-success) 40%, transparent); --bs-btn-hover-bg: var(--fill-success); --bs-btn-hover-border-color: var(--fill-success); --bs-btn-active-bg: var(--fill-success-h); --bs-btn-active-border-color: var(--fill-success-h); } .btn-outline-danger { --bs-btn-color: var(--danger-text); --bs-btn-border-color: color-mix(in srgb, var(--fill-danger) 40%, transparent); --bs-btn-hover-bg: var(--fill-danger); --bs-btn-hover-border-color: var(--fill-danger); --bs-btn-active-bg: var(--fill-danger-h); --bs-btn-active-border-color: var(--fill-danger-h); } .btn-outline-warning { --bs-btn-color: var(--amber-text); --bs-btn-border-color: color-mix(in srgb, var(--fill-warning) 40%, transparent); --bs-btn-hover-bg: var(--fill-warning); --bs-btn-hover-border-color: var(--fill-warning); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--fill-warning-h); --bs-btn-active-border-color: var(--fill-warning-h); --bs-btn-active-color: #fff; } .btn-outline-info { --bs-btn-color: var(--fill-info); --bs-btn-border-color: color-mix(in srgb, var(--fill-info) 40%, transparent); --bs-btn-hover-bg: var(--fill-info); --bs-btn-hover-border-color: var(--fill-info); --bs-btn-active-bg: var(--fill-info-h); --bs-btn-active-border-color: var(--fill-info-h); } /* ── Плашки ── */ /* Плашки статусов стоят в колонках таблиц, поэтому им идёт прямоугольная форма — она держит сетку строки, в отличие от круглой «пилюли». */ .badge { --bs-badge-border-radius: var(--r-sm); --bs-badge-font-weight: 600; letter-spacing: -.005em; } /* ── Сообщения ── */ .alert { --bs-alert-border-radius: var(--r-md); border-width: 1px; } .alert-success { --bs-alert-color: var(--success-text); --bs-alert-bg: color-mix(in srgb, var(--fill-success) 11%, transparent); --bs-alert-border-color: color-mix(in srgb, var(--fill-success) 26%, transparent); --bs-alert-link-color: var(--success-text); } .alert-danger { --bs-alert-color: var(--danger-text); --bs-alert-bg: color-mix(in srgb, var(--fill-danger) 11%, transparent); --bs-alert-border-color: color-mix(in srgb, var(--fill-danger) 26%, transparent); --bs-alert-link-color: var(--danger-text); } .alert-warning { --bs-alert-color: var(--amber-text); --bs-alert-bg: color-mix(in srgb, var(--fill-warning) 11%, transparent); --bs-alert-border-color: color-mix(in srgb, var(--fill-warning) 26%, transparent); --bs-alert-link-color: var(--amber-text); } .alert-info { --bs-alert-color: var(--accent-text); --bs-alert-bg: var(--accent-08); --bs-alert-border-color: var(--accent-24); --bs-alert-link-color: var(--accent-text); } /* ── Формы ── */ .form-control, .form-select { background-color: var(--surface); border-color: var(--line-lift); color: var(--text); border-radius: var(--r-sm); } .form-control:focus, .form-select:focus { background-color: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-14); color: var(--text); } .form-control::placeholder { color: var(--faint); } .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } .form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-14); } .form-switch .form-check-input:focus { border-color: var(--accent); } /* ── Полоса прогресса ── */ .progress { background: var(--surface-2); border-radius: 30px; } .progress-bar { background-color: var(--accent); } /* ── Моноширинные значения ── В таблицах держит id платежа и telegram_id — это данные, а не код, поэтому розовый цвет Bootstrap здесь не к месту. */ code, kbd, samp, .mono-val { font-family: var(--font-mono); font-size: .86em; color: var(--muted); letter-spacing: 0; } /* ── Пагинация ── */ .pagination { --bs-pagination-bg: var(--surface); --bs-pagination-color: var(--accent-text); --bs-pagination-border-color: var(--line); --bs-pagination-hover-bg: var(--accent-08); --bs-pagination-hover-color: var(--accent-text); --bs-pagination-hover-border-color: var(--accent-24); --bs-pagination-focus-bg: var(--accent-08); --bs-pagination-focus-color: var(--accent-text); --bs-pagination-active-bg: var(--accent); --bs-pagination-active-border-color: var(--accent); --bs-pagination-disabled-bg: var(--surface-2); --bs-pagination-disabled-color: var(--faint); --bs-pagination-disabled-border-color: var(--line); } /* ── Таблицы ── */ .table { --bs-table-color: var(--text); --bs-table-bg: transparent; --bs-table-border-color: var(--line); --bs-table-hover-color: var(--text); --bs-table-hover-bg: var(--accent-08); } /* ── Подложки под смысловой цвет ── Заменяют инлайновые пастельные заливки на внутренних страницах. Полупрозрачные, поэтому работают на любой поверхности. */ .tint { border-radius: var(--r-md); border: 1px solid var(--line-lift); background: var(--surface-2); } .tint-accent { background: var(--accent-08); border-color: var(--accent-24); } .tint-success { background: color-mix(in srgb, var(--fill-success) 10%, transparent); border-color: color-mix(in srgb, var(--fill-success) 26%, transparent); } .tint-danger { background: color-mix(in srgb, var(--fill-danger) 10%, transparent); border-color: color-mix(in srgb, var(--fill-danger) 26%, transparent); } .tint-warning { background: color-mix(in srgb, var(--fill-warning) 10%, transparent); border-color: color-mix(in srgb, var(--fill-warning) 26%, transparent); } /* ── Палитра графиков ── Не радуга по умолчанию: ряд ведёт брендовый фиолетовый, остальные подобраны к нему по температуре и различимы между собой на глаз. Читаются и JS'ом — analytics.html берёт их через getComputedStyle, чтобы цвет графиков и цвет интерфейса не разъезжались. */ :root { --chart-1: #7350F5; /* выручка, основной ряд */ --chart-2: #17845A; /* пользователи */ --chart-3: #C98A12; /* платежи */ --chart-4: #C93030; /* отказы */ --chart-5: #0E8A80; /* тест / бирюза */ --chart-6: #3D6BC4; /* индиго */ --chart-7: #7C7C90; /* нейтральный ряд */ } .apex-light { --chart-grid: rgba(22, 22, 34, .06); } .apex-dark { --chart-grid: rgba(230, 230, 245, .08); } /* ============================================================ Таблица-журнал Платежи, пополнения, выводы, уведомления — всё это списки событий, которые просматривают глазами сверху вниз. Задача разметки — расставить вес: что ищут, то и должно быть тяжёлым. ============================================================ */ .table-log { margin: 0; width: 100%; } .table-log thead th { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--faint); background: transparent; border-bottom: 1px solid var(--line); padding: 0 14px 10px; white-space: nowrap; } .table-log tbody td { padding: 13px 14px; border-bottom: 1px solid var(--line-soft, var(--line)); vertical-align: middle; color: var(--text); } .table-log tbody tr:last-child td { border-bottom: 0; } .table-log tbody tr:hover td { background: var(--accent-08); } /* Полоса состояния слева. Нужна, чтобы проблемные строки находились прокруткой, а не чтением каждой ячейки. Успешные намеренно без полосы: если подсветить всё, не выделено ничего. */ .table-log tbody td:first-child { border-left: 3px solid transparent; padding-left: 14px; } .table-log tr.state-warn td:first-child { border-left-color: var(--fill-warning); } .table-log tr.state-bad td:first-child { border-left-color: var(--fill-danger); } .table-log tr.state-idle td:first-child { border-left-color: var(--line-lift); } /* Зелёная полоса — исключение из правила выше. Нужна там, где искомое событие редкое и хорошее: в отчёте по кампании ищут не сбои, а те 10% строк, где человек всё-таки заплатил. */ .table-log tr.state-good td:first-child { border-left-color: var(--fill-success); } /* Две строки в одной ячейке: главное и уточнение */ .cell-main { font-weight: 600; line-height: 1.25; } .cell-sub { font-size: .78rem; color: var(--muted); line-height: 1.3; margin-top: 2px; } .cell-sub.mono { font-family: var(--font-mono); font-size: .72rem; } /* Числовая колонка. Выключка вправо и моноширинные цифры — без этого столбец сумм нельзя сравнить взглядом. */ .cell-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .table-log thead th.cell-num { text-align: right; } .amount { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .amount .cur { font-size: .8em; font-weight: 600; color: var(--muted); margin-left: 2px; } .amount.zero { color: var(--faint); font-weight: 500; } /* Знак суммы несёт смысл: приход и расход должны отличаться до чтения цифры. */ .amount.plus { color: var(--success-text); } .amount.minus { color: var(--danger-text); } .amount .sign { margin-right: 1px; } /* Свободный текст в ячейке: комментарий, причина, примечание. Это содержимое, а не служебное поле, поэтому читаемый размер. */ .cell-note { color: var(--muted); font-size: .85rem; line-height: 1.35; max-width: 340px; } .cell-note.empty { color: var(--faint); } /* Тихая колонка: технические идентификаторы, которые копируют, а не сканируют. */ .cell-quiet { color: var(--muted); font-family: var(--font-mono); font-size: .76rem; } /* Задержка между событиями */ .delay { display: inline-block; font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); background: var(--surface-2); border-radius: var(--r-sm); padding: 2px 8px; white-space: nowrap; } .delay.instant { color: var(--success-text); background: color-mix(in srgb, var(--fill-success) 11%, transparent); } .delay.none { color: var(--faint); background: transparent; padding-left: 0; } /* Сводка над таблицей */ .log-summary { display: flex; flex-wrap: wrap; gap: 28px; padding: 18px 22px; border-bottom: 1px solid var(--line); } .log-summary .item { display: flex; flex-direction: column; gap: 3px; } .log-summary .label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); } .log-summary .value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .log-summary .value.accent { color: var(--accent-text); } /* Пустая таблица */ .log-empty { padding: 54px 20px; text-align: center; color: var(--muted); } .log-empty .bi { font-size: 2rem; color: var(--faint); display: block; margin-bottom: 10px; }