/* ============================================================================ EdgeShift · tokens.css Единственный источник значений для панели управления фронтами. Подключать первым, до components.css и до кода приложения. Правила: 1. В коде приложения НЕТ hex-значений, px-размеров контролов и названий шрифтов — только var(--es-*). 2. Тема задаётся атрибутом на : data-es-theme="light" | "dark". Без атрибута действует системная тема (prefers-color-scheme). 3. Плотность: data-es-density="compact" на — уменьшает контролы и строки таблиц, ничего больше. 4. Слой primitives (--es-c-*) трогать в компонентах нельзя: он существует только чтобы из него собирались семантические токены ниже. ========================================================================== */ /* Шрифты лежат рядом: панель работает в закрытом контуре, а CSP разрешает только собственные ресурсы. Имена семейств те же, что в ките. */ @import url('fonts.css'); /* --------------------------------------------------------------------------- 0. PRIMITIVES — сырая палитра. В компонентах не использовать. Нейтрали холодные, графитовые: это отличает EdgeShift от тёплых серых систем и делает оранжевый акцент единственным тёплым пятном на экране. --------------------------------------------------------------------------- */ :root { --es-c-graphite-00: #ffffff; --es-c-graphite-05: #f8f9fb; --es-c-graphite-10: #f4f5f7; --es-c-graphite-15: #eef0f4; --es-c-graphite-20: #e2e5ea; --es-c-graphite-30: #d1d6de; --es-c-graphite-50: #6b7482; --es-c-graphite-65: #414c5b; --es-c-graphite-85: #272e39; --es-c-graphite-90: #1b212a; --es-c-graphite-93: #161a20; --es-c-graphite-96: #0e1115; --es-c-graphite-ink: #101620; --es-c-orange-60: #d75c15; --es-c-orange-50: #ee6a1f; --es-c-orange-45: #f47b32; --es-c-orange-40: #ff8d4a; --es-c-orange-15: #f6cdae; --es-c-orange-05: #fdf0e7; --es-c-orange-dark-bg: #2b1a0f; --es-c-orange-dark-line: #5a3418; --es-c-green-50: #157f3c; --es-c-green-40: #52d68a; --es-c-green-15: #bfe0cb; --es-c-green-05: #e7f4ec; --es-c-green-dark-bg: #10241a; --es-c-green-dark-line: #1f4a33; --es-c-blue-50: #1f4fd1; --es-c-blue-40: #86a8ff; --es-c-blue-15: #c5d3f7; --es-c-blue-05: #eaeffd; --es-c-blue-dark-bg: #141c31; --es-c-blue-dark-line: #27385f; --es-c-amber-50: #a95b06; --es-c-amber-40: #f5b942; --es-c-amber-15: #f0d7a6; --es-c-amber-05: #fdf3e1; --es-c-amber-dark-bg: #241c0c; --es-c-amber-dark-line: #4d3b12; --es-c-red-50: #b42222; --es-c-red-40: #ff7b7b; --es-c-red-15: #f3c4c1; --es-c-red-05: #fdeceb; --es-c-red-dark-bg: #2b1416; --es-c-red-dark-line: #5a2628; --es-c-red-dark-ink: #230e0e; --es-c-console-light: #131a24; --es-c-console-dark: #0a0e13; --es-c-console-text-light: #d3dbe6; --es-c-console-text-dark: #cdd7e3; --es-c-console-dim-light: #7d8b9d; --es-c-console-dim-dark: #6d7a8c; } /* --------------------------------------------------------------------------- 1. ТИПОГРАФИКА — не зависит от темы. IBM Plex Sans для интерфейса, IBM Plex Mono для данных, которые читают символ за символом: IP, токены, пути, команды, время в журнале. Размеры мелкие намеренно: панель плотная, на экране одновременно пять-шесть карточек и таблица. --------------------------------------------------------------------------- */ :root { --es-font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --es-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Роли. Первое число — размер, второе — интерлиньяж. */ --es-text-h1: 600 19px/1.25 var(--es-font-sans); /* заголовок страницы */ --es-text-h2: 600 13.5px/1.35 var(--es-font-sans); /* заголовок карточки */ --es-text-h3: 600 13px/1.35 var(--es-font-sans); /* заголовок блока внутри карточки */ --es-text-body: 400 12.5px/1.5 var(--es-font-sans);/* таблицы, интерфейсные строки */ --es-text-body-strong: 600 12.5px/1.5 var(--es-font-sans); --es-text-caption: 400 11.5px/1.45 var(--es-font-sans); /* подписи, пояснения под полем */ --es-text-micro: 400 11px/1.4 var(--es-font-sans); /* время, вторичные пометки */ --es-text-metric: 600 24px/1.1 var(--es-font-sans); /* число показателя */ --es-text-metric-sm: 600 20px/1.1 var(--es-font-sans); /* число показателя на 390px */ --es-text-mono: 400 12px/1.5 var(--es-font-mono); /* IP, токен, путь */ --es-text-mono-sm: 400 11.5px/1.7 var(--es-font-mono); /* строка журнала установки */ /* Шапка таблицы — отдельная роль: капс, разрядка, без жирного. */ --es-table-head-size: 10.5px; --es-table-head-weight: 500; --es-table-head-spacing: .06em; --es-table-head-transform: uppercase; --es-tracking-tight: -.01em; /* h1, h2 */ --es-tracking-metric: -.02em; /* крупные числа */ --es-numeric: tabular-nums; /* ОБЯЗАТЕЛЬНО для всех чисел и времени */ } /* --------------------------------------------------------------------------- 2. РАЗМЕРЫ, СЕТКА, РАДИУСЫ, ТЕНИ, МОТИОН — не зависят от темы. --------------------------------------------------------------------------- */ :root { /* Шаг 4px. Промежуточные значения не вводить. */ --es-space-1: 4px; --es-space-2: 6px; --es-space-3: 8px; --es-space-4: 10px; --es-space-5: 12px; --es-space-6: 14px; --es-space-7: 16px; --es-space-8: 20px; --es-space-9: 26px; --es-space-10: 30px; /* Контролы и строки. Меняются плотностью. */ --es-ctl: 34px; /* кнопка, поле, селект — основной размер */ --es-ctl-sm: 26px; /* действие внутри строки таблицы */ --es-ctl-touch: 44px; /* любой контрол на мобильном: поле ввода */ --es-ctl-touch-sm: 32px; /* действие в мобильной карточке-строке */ --es-row: 40px; /* высота строки таблицы */ --es-pill: 21px; /* высота статусной плашки */ --es-badge: 20px; /* высота бейджа типа записи и итога проверки */ /* Каркас */ --es-rail: 220px; /* левое меню */ --es-page-max: 1440px; /* рабочая ширина десктопа */ --es-content-max: 1180px; /* колонка контента без меню */ --es-page-pad-x: 26px; --es-page-pad-y: 22px; --es-card-pad-x: 16px; --es-card-pad-y: 14px; --es-gap-card: 14px; /* между карточками */ --es-gap-field: 12px; /* между полями формы */ --es-bp-mobile: 720px; /* ниже — мобильная раскладка */ /* Радиусы. Четыре значения, больше не вводить. */ --es-radius-card: 10px; --es-radius-modal: 11px; --es-radius-ctl: 8px; --es-radius-ctl-sm: 7px; --es-radius-badge: 5px; --es-radius-pill: 999px; /* ТОЛЬКО статусная плашка */ --es-border-width: 1px; --es-focus-width: 3px; --es-alarm-bar-width: 2px; /* красная полоса слева у тревожной строки */ --es-z-flash: 20; --es-z-modal: 50; /* Мотион. В панели живут только две анимации: «тревога» и «данные живые». */ --es-motion-fast: 120ms; --es-motion-base: 180ms; --es-ease: cubic-bezier(.4, 0, .2, 1); --es-blink-alarm: 1.4s; /* точка «атака?», «установка» */ --es-blink-urgent: 1.2s; /* точка на красной полосе тревоги */ --es-blink-live: 2.4s; /* зелёная точка «обновлено только что» */ --es-poll-interval: 5s; /* частота автообновления данных, справочно */ } /* --------------------------------------------------------------------------- 3. СЕМАНТИКА — СВЕТЛАЯ ТЕМА (по умолчанию) --------------------------------------------------------------------------- */ :root, [data-es-theme='light'] { color-scheme: light; /* Поверхности: фон страницы → карточка → подложка внутри карточки → заливка */ --es-bg: var(--es-c-graphite-10); --es-surface: var(--es-c-graphite-00); --es-surface-2: var(--es-c-graphite-05); --es-surface-3: var(--es-c-graphite-15); --es-border: var(--es-c-graphite-20); /* разделитель, граница карточки */ --es-border-2: var(--es-c-graphite-30); /* граница интерактивного контрола */ --es-text: var(--es-c-graphite-ink); /* основной */ --es-text-2: var(--es-c-graphite-65); /* вторичный текст, тело карточки */ --es-text-3: var(--es-c-graphite-50); /* подписи, время, «списан» */ /* Акцент = действие, ссылка, активный пункт меню. Никогда не статус. */ --es-accent: var(--es-c-orange-50); --es-accent-2: var(--es-c-orange-60); /* наведение */ --es-accent-soft: var(--es-c-orange-05); /* подложка активного пункта меню */ --es-accent-line: var(--es-c-orange-15); /* фокусное кольцо, столбик спарклайна */ --es-on-accent: #ffffff; --es-ok: var(--es-c-green-50); --es-ok-soft: var(--es-c-green-05); --es-ok-line: var(--es-c-green-15); --es-info: var(--es-c-blue-50); --es-info-soft: var(--es-c-blue-05); --es-info-line: var(--es-c-blue-15); --es-warn: var(--es-c-amber-50); --es-warn-soft: var(--es-c-amber-05); --es-warn-line: var(--es-c-amber-15); --es-err: var(--es-c-red-50); --es-err-soft: var(--es-c-red-05); --es-err-line: var(--es-c-red-15); --es-on-err: #ffffff; /* Тёмный блок: журнал установки по SSH, примеры API */ --es-code-bg: var(--es-c-console-light); --es-code-text: var(--es-c-console-text-light); --es-code-dim: var(--es-c-console-dim-light); --es-shadow: 0 1px 2px rgba(16, 22, 32, .05); /* карточка */ --es-shadow-artboard: 0 2px 10px rgba(16, 22, 32, .06); --es-shadow-modal: 0 18px 48px rgba(0, 0, 0, .28); --es-overlay: rgba(10, 14, 19, .55); /* подложка модалки */ --es-focus-ring: 0 0 0 var(--es-focus-width) var(--es-accent-line); --es-focus-ring-danger: 0 0 0 var(--es-focus-width) var(--es-err-line); } /* --------------------------------------------------------------------------- 4. СЕМАНТИКА — ТЁМНАЯ ТЕМА Ключевое отличие от светлой: подложка статуса не светлеет, а темнеет, а сам статусный цвет берётся светлый. Поэтому плашки и полосы читаются в обеих темах без правок в компонентах. --------------------------------------------------------------------------- */ [data-es-theme='dark'] { color-scheme: dark; --es-bg: var(--es-c-graphite-96); --es-surface: var(--es-c-graphite-93); --es-surface-2: var(--es-c-graphite-90); --es-surface-3: #212936; --es-border: var(--es-c-graphite-85); --es-border-2: #39424f; --es-text: #e9edf3; --es-text-2: #b3bdc9; --es-text-3: #8993a1; --es-accent: var(--es-c-orange-45); --es-accent-2: var(--es-c-orange-40); --es-accent-soft: var(--es-c-orange-dark-bg); --es-accent-line: var(--es-c-orange-dark-line); --es-on-accent: #1a0f06; --es-ok: var(--es-c-green-40); --es-ok-soft: var(--es-c-green-dark-bg); --es-ok-line: var(--es-c-green-dark-line); --es-info: var(--es-c-blue-40); --es-info-soft: var(--es-c-blue-dark-bg); --es-info-line: var(--es-c-blue-dark-line); --es-warn: var(--es-c-amber-40); --es-warn-soft: var(--es-c-amber-dark-bg); --es-warn-line: var(--es-c-amber-dark-line); --es-err: var(--es-c-red-40); --es-err-soft: var(--es-c-red-dark-bg); --es-err-line: var(--es-c-red-dark-line); --es-on-err: var(--es-c-red-dark-ink); --es-code-bg: var(--es-c-console-dark); --es-code-text: var(--es-c-console-text-dark); --es-code-dim: var(--es-c-console-dim-dark); --es-shadow: 0 1px 2px rgba(0, 0, 0, .35); --es-shadow-artboard: 0 2px 10px rgba(0, 0, 0, .4); --es-shadow-modal: 0 18px 48px rgba(0, 0, 0, .5); --es-overlay: rgba(4, 6, 9, .68); } /* Системная тема, когда пользователь не выбрал явно. */ @media (prefers-color-scheme: dark) { :root:not([data-es-theme='light']) { color-scheme: dark; --es-bg: var(--es-c-graphite-96); --es-surface: var(--es-c-graphite-93); --es-surface-2: var(--es-c-graphite-90); --es-surface-3: #212936; --es-border: var(--es-c-graphite-85); --es-border-2: #39424f; --es-text: #e9edf3; --es-text-2: #b3bdc9; --es-text-3: #8993a1; --es-accent: var(--es-c-orange-45); --es-accent-2: var(--es-c-orange-40); --es-accent-soft: var(--es-c-orange-dark-bg); --es-accent-line: var(--es-c-orange-dark-line); --es-on-accent: #1a0f06; --es-ok: var(--es-c-green-40); --es-ok-soft: var(--es-c-green-dark-bg); --es-ok-line: var(--es-c-green-dark-line); --es-info: var(--es-c-blue-40); --es-info-soft: var(--es-c-blue-dark-bg); --es-info-line: var(--es-c-blue-dark-line); --es-warn: var(--es-c-amber-40); --es-warn-soft: var(--es-c-amber-dark-bg); --es-warn-line: var(--es-c-amber-dark-line); --es-err: var(--es-c-red-40); --es-err-soft: var(--es-c-red-dark-bg); --es-err-line: var(--es-c-red-dark-line); --es-on-err: var(--es-c-red-dark-ink); --es-code-bg: var(--es-c-console-dark); --es-code-text: var(--es-c-console-text-dark); --es-code-dim: var(--es-c-console-dim-dark); --es-shadow: 0 1px 2px rgba(0, 0, 0, .35); --es-shadow-artboard: 0 2px 10px rgba(0, 0, 0, .4); --es-shadow-modal: 0 18px 48px rgba(0, 0, 0, .5); --es-overlay: rgba(4, 6, 9, .68); } } /* --------------------------------------------------------------------------- 5. ПЛОТНОСТЬ Влияет только на высоты. Шрифты, отступы карточек и радиусы не меняет. --------------------------------------------------------------------------- */ [data-es-density='compact'] { --es-ctl: 30px; --es-ctl-sm: 24px; --es-row: 34px; } /* --------------------------------------------------------------------------- 6. СЕМАНТИЧЕСКИЕ АЛИАСЫ СТАТУСОВ Компонент не выбирает цвет — он выбирает смысл. Если завтра «Резерв» станет зелёным, правка будет здесь, а не в двадцати местах. --------------------------------------------------------------------------- */ :root { /* Состояние фронта */ --es-status-in-dns: var(--es-ok); --es-status-in-dns-soft: var(--es-ok-soft); --es-status-in-dns-line: var(--es-ok-line); --es-status-reserve: var(--es-info); --es-status-reserve-soft: var(--es-info-soft); --es-status-reserve-line: var(--es-info-line); --es-status-creating: var(--es-warn); --es-status-creating-soft: var(--es-warn-soft); --es-status-creating-line: var(--es-warn-line); --es-status-retired: var(--es-text-3); --es-status-retired-soft: var(--es-surface-3); --es-status-retired-line: var(--es-border); --es-status-alarm: var(--es-err); --es-status-alarm-soft: var(--es-err-soft); --es-status-alarm-line: var(--es-err-line); /* Убран из DNS вручную: сам не вернётся и не заменит атакованный */ --es-status-maintenance: var(--es-text-3); --es-status-maintenance-soft: var(--es-surface-3); --es-status-maintenance-line: var(--es-border); /* Уровень события в журнале */ --es-level-info: var(--es-info); --es-level-warn: var(--es-warn); --es-level-error: var(--es-err); /* Состояние сервера сайтов (агент) */ --es-server-ok: var(--es-ok); /* в порядке · сайт подключён · доступ закрыт */ --es-server-problem: var(--es-err); /* есть проблемы · нет связи · сайт не подключён */ --es-server-waiting: var(--es-text-3); /* ждёт агента · пропущен · доступ открыт · наблюдение */ --es-server-command: var(--es-warn); /* выполняется команда · доступ закрывается */ /* Уровень строки проверки сервера (ОК / ИНФО / ВНИМАНИЕ / ОШИБКА) */ --es-tag-min-width: 66px; /* Итог проверки утечек */ --es-verdict-leak: var(--es-err); --es-verdict-warn: var(--es-warn); --es-verdict-info: var(--es-info); /* Приглушённость списанной строки таблицы */ --es-muted-opacity: .55; } /* --------------------------------------------------------------------------- 7. БАЗА ДОКУМЕНТА --------------------------------------------------------------------------- */ html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } body { margin: 0; background: var(--es-bg); color: var(--es-text); font: var(--es-text-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--es-accent); text-decoration: none; } a:hover { color: var(--es-accent-2); text-decoration: underline; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--es-focus-ring); border-radius: var(--es-radius-ctl-sm); } code, kbd, samp, pre { font-family: var(--es-font-mono); } table { border-collapse: collapse; width: 100%; } input, select, button, textarea { font-family: inherit; } /* Числа не должны прыгать при автообновлении раз в 5 секунд. */ .es-num, [data-es-num], td[align='right'] { font-variant-numeric: var(--es-numeric); } /* Две разрешённые анимации системы. */ @keyframes es-blink { 0%, 100% { opacity: 1 } 50% { opacity: .25 } } @keyframes es-spin { to { transform: rotate(360deg) } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }