Skip to main content

Цвета и согласованная палитра

color — цвет текста/унаследованной SVG-иконки, background — поверхность под ним, border-color — линия по краю. Даже одинаковый HEX выглядит по-разному на светлой и тёмной поверхности. Цвет с альфой смешивается с тем, что позади. opacity: 0.5 делает полупрозрачным весь узел вместе с текстом и потомками. Для стеклянного фона используйте альфу цвета, color-mix() или отдельный декоративный слой. Согласованная тёмная палитра есть в Midnight, светлая — в рецепте выше. В обоих случаях начинайте с фона и основного текста, затем добавьте карточки, границы, второстепенные подписи, акценты и их контрастный текст. Проверьте реальную читаемость мелких подписей, отключённых кнопок и текста на градиенте. Разные оттенки похожей яркости часто плохо разделяются, даже если выглядят красиво на большой плашке. Ошибки, предупреждения, информация и успех должны отличаться не только цветом: сохраняйте подписи и иконки. В базовой теме статусы могут следовать акцентам; для устойчивой семантики задайте их в расширенных настройках и проверьте все страницы.

Шрифты, размеры и расположение

В визуальном редакторе размер шрифта ограничен 11–20px; обычный старт — 16px. Через произвольный CSS можно выйти за эти границы, но интерфейс может перестать помещаться. Изначальный минимум главного окна — 960×640, начальный размер — 1280×800. Проверьте минимум, длинные подписи и увеличенный масштаб. Для первой правки лучше менять отдельный текст, а не весь корень:
Это заголовок пустого состояния агента, подтверждённый agent.css. Правило не покажет этот заголовок в чате с сообщениями. Отмена — удалить правило.
Не заменяйте overflow-hidden корневой оболочки на visible для «починки» отдельного списка. Не меняйте position у всех карточек и z-index у всех диалогов. Это может перекрыть кнопки, изменить область перетаскивания и нарушить фокус. Исправляйте ближайший виновный контейнер после осмотра DOM.

Состояния элементов

Псевдокласс выбирает состояние или положение узла. Псевдоэлемент обозначает рисуемую часть элемента. Наличие псевдокласса в CSS не создаёт соответствующую функцию.
Для выбранного состояния темы есть data-selected="true", для навигации — data-active="true"; других одинаковых атрибутов для всех компонентов нет. В меню агента есть, например, aria-checked="true"; контекст проверяется в исходнике/инспекторе. Не используйте [aria-selected="true"] как универсальный способ выбрать любой активный элемент.
Не заменяйте content у .progress-launch::after текстовой подписью: этот псевдоэлемент занят движущейся полосой. Псевдоэлементы годятся для декора, но не заменяют доступную подпись и функциональную кнопку.

Анимации

transition плавно меняет свойство между состояниями. transform визуально сдвигает/масштабирует элемент, не перераскладывая соседей. animation запускает последовательность кадров @keyframes. opacity часто используется для появления. В визуальном редакторе «Эффекты интерфейса» → «Появление элементов» доступны стандартный вариант, fade, сдвиги, масштаб, размытие, отключение и своя анимация. Длительность ограничена 100–2000 мс. Класс .settings-content-enter используется также для содержимого других разделов, а не только настроек.
Это специальное имя распознаётся парсером темы и включает собственную анимацию. Для другого имени выберите «Своя через CSS» и укажите имя в поле. Не пытайтесь создать анимацию изменения данных: логика ожидания загрузки остаётся в React. Параметры можно задать в первом :root:
Задержка используется у .settings-content-enter-delayed. prefers-reduced-motion — системное предпочтение уменьшить движение. В собственных эффектах учитывайте его:
Штатные анимации содержимого и halo учитывают этот запрос; стили агента тоже отключают свои движения. Не все произвольные индикаторы проекта автоматически перестают двигаться. Не обнуляйте глобально анимации загрузки без альтернативной видимой индикации и не анимируйте постоянно размеры/позиции десятков карточек.