Дизайн-код админки СКН

Версия 1.1, 2 ноября 2026. Область действия — /adminka.

Публичная документация разработчика: sakonews.ru/design/?doc=admin. Исходник доступен по адресу sakonews.ru/docs/admin-design-code.md. Код публичного сайта опубликован отдельно в этом же справочнике.

Характер и источник правил

«Графит»: редакционный рабочий инструмент с матовыми поверхностями, мягким светом и точным контуром. Тёмная тема — графит и светлый лаймовый акцент, светлая — бумажный фон и оливковый акцент. Декоративные градиенты и разноцветные эмоджи в интерфейсе не используются.

Канонические значения находятся в manager/css/admin-design-system.css, поведение — в manager/js/admin-design-system.js. Этот слой подключается после старых модулей. Зафиксированные !important в геометрии контролов — временный адаптер к историческим inline-стилям; новые компоненты используют токены и не добавляют локальных переопределений. При переносе старого компонента его дублирующие правила удаляются.

Типографика и сетка

• Шрифт: локальный PT Sans. Поля, кнопки, таблицы и подписи наследуют один шрифт.
• Основной текст — 14 px / 1.5; поля — 14 px; кнопки — 13 px; подписи и вспомогательный текст — 12 px.
• H1 — 22 px / 1.2, 700; H2 — 20 px / 1.3; H3 — 16 px / 1.4. На телефоне H1 — 19 px.
• Базовый шаг — 4 px. Отступы: 4, 8, 12, 16, 24, 32 px. Горизонтальный отступ рабочей области — 24 px, на узких экранах — 16 / 12 px.
• Контейнер: фон --ui-surface, рамка --ui-line 1 px, радиус 10 px, внутренний отступ 24 px (16 px на телефоне). Сходные контейнеры не получают индивидуальных теней и скруглений.

Хэдер — центр команд текущего раздела / сущности

Все разделы используют templates/admin-header.tpl. Высота — 88 px; на телефоне — 116 px с отдельной строкой команд. Добавление кнопок не меняет высоту хедера.

Слева: название и метаданные/статусы. Справа: возврат, просмотр, специальные действия, основное сохранение. Редактор не встраивает кнопки в H1. При длинной форме нижнее сохранение допустимо как повтор верхнего. Сворачивание навигации сохраняет хэдер доступным.

Контракт PHP:

$pageTitle = 'Редактирование страницы';
$headerMeta = [['label' => 'Опубликована', 'class' => 'status-active']];
$headerActions = [
    ['url' => '/adminka?action=pages', 'label' => 'Назад', 'icon' => 'arrow-left', 'class' => 'btn'],
    ['type' => 'button', 'label' => 'Сохранить', 'icon' => 'save', 'class' => 'btn btn-primary',
     'attrs' => ['type' => 'submit', 'form' => 'page-form', 'name' => 'save_page', 'value' => '1']],
];
include __DIR__ . '/admin-header.tpl';

Дополнительно: headerSubtitle, icon_only, optional_label, attrs. HTML статуса разрешён только через явный headerMeta[].html из доверенного шаблона. Обычные подписи экранируются.

Контролы и иерархия

В смысловой группе применяется один размер. Верхнее сохранение — единственная основная кнопка группы; AI-действия второстепенные. Текст кнопок не переносится. У иконки без видимой подписи обязательны aria-label и подсказка title.

Список воспринимается как матовая поверхность с отдельными зонами прикосновения: без ховера иконка спокойная, при наведении получает мягкое гнездо и светлый контур; при нажатии слегка утапливается. Цвет добавленной в очередь новости показывает состояние, а не декоративное отличие.

Single-select использует общий кастомный listbox. Исходный select сохраняет имя, значение, required, disabled и обработчики формы. Клавиши: стрелки, Home/End, Enter/Space, Escape, набор первых букв. Меню портируется в body, чтобы не обрезаться контейнером. Multiple/size-select, inline-редактор таблицы и явный data-native-select сохраняют специальное поведение.

Состояния и подсветка

• Hover — изменение поверхности/контура; текст не прыгает, размер не меняется.
• Active — смещение 1 px и мягкая внутренняя тень; для списков дополнительно scale .96.
• Keyboard focus — акцентный контур 2 px с отступом 3 px. У поля — акцентная рамка и кольцо.
• Selected / expanded — акцентный текст и приглушённый акцентный фон. Выбранная строка подсвечена целиком.
• Disabled — opacity .4, запрет на анимацию нажатия.
• Ошибка — семантический красный плюс текст. Успех — зелёный, ожидание — янтарный, справка — голубой.
• Модалки — единый фон, радиус 14 px, отступ 24 px, тёмный backdrop с blur 6 px. Выпадающие меню — тот же набор токенов и тень.
• Анимации — 160–180 ms; prefers-reduced-motion отключает движение.

Новости

• Фильтр закрыт при входе; кнопка-лупа находится в хэдере и показывает активность фильтров. Нажатие раскрывает панель под хэдером, повторное нажатие, Escape или клик вне панели закрывают её. Выбранные фильтры остаются в GET-параметрах.
• Поля и две кнопки фильтра составляют одну строку. На узком экране строка прокручивается горизонтально, без переноса отдельных кнопок.
• Панель массовых действий появляется снизу при выделении хотя бы одной новости, показывает счётчик и позволяет снять выбор. В пустом состоянии она не занимает рабочую область.
• Колонки «Дата» и «Подача» убраны из списка. «Добавлена» сохраняется. Даты и подача в данных не удаляются.

Редактор новости

Общие компоненты дополняет manager/css/admin-news-editor.css. Это композиция существующих полей, а не отдельная визуальная тема.

• Основная вкладка: материал занимает большую колонку, параметры источника — меньшую; пропорция 2:1. Внутри каждой колонки поля выстраиваются по общей сетке без разрозненных локальных ширин.
• Название, описание и основной текст образуют последовательную редакционную группу. Даты и источник — самостоятельный служебный блок. Подписи и подсказки используют одни размеры и отступы.
• Вкладка подготовки делится на повествовательные поля и блок для подкаста. На узком экране все колонки переходят в одну в том же порядке.
• Галерея, формы добавления изображения/видео, хронология и журнал ИИ используют одинаковые поверхности, заголовки секций, контуры и шаги отступов.
• Превью медиа сохраняют соотношение сторон; служебные действия не перекрывают содержимое. Прогресс загрузки и выполнения ИИ использует семантические состояния общего дизайн-кода.
• При изменении раскладки сохраняются имена, идентификаторы, форма отправки, обработчики и содержимое полей.

Иконки и развитие системы

Собственный набор SKN Cutline: manager/assets/admin-icons.svg, реестр и PHP helper — manager/ui-icons.php, JS — manager/js/admin-icons.js. См. docs/admin-icons.md. Новый символ добавляется в sprite и реестр, затем используется по смысловому ключу. Не заменять эмоджи в данных, текстах новостей и пользовательском вводе.

Новое правило сначала добавляется сюда и в общий компонент, затем применяется к разделам. Нельзя создавать локальный вариант уже существующей кнопки, подписи, статуса или контейнера без обоснованной новой роли.