> ## Documentation Index
> Fetch the complete documentation index at: https://docs.xneon.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Цвета, шрифты, состояния и анимации

> Как управлять цветами, шрифтами, состояниями элементов и анимациями в темах Xneon Launcher.

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

`color` — цвет текста/унаследованной SVG-иконки, `background` — поверхность под ним, `border-color` — линия по краю. Даже одинаковый HEX выглядит по-разному на светлой и тёмной поверхности.

| Запись | Значение | Пример |
| - | - | - |
| HEX | Красный, зелёный, синий в шестнадцатеричной записи | `#a5b4fc` |
| Короткий HEX | Каждая цифра удваивается | `#abc` = `#aabbcc` |
| HEX с альфой | Последние две цифры задают непрозрачность: 00…ff | `#a5b4fc66` — около 40% |
| RGB/RGBA | Каналы 0…255 и необязательная альфа | `rgb(165 180 252 / 0.4)` |
| HSL/HSLA | Тон, насыщенность, светлота, альфа | `hsl(230 94% 82% / 0.4)` |
| OKLCH | Светлота, насыщенность, тон; используется в базе | `oklch(0.65 0.22 40)` |

Цвет с альфой смешивается с тем, что позади. `opacity: 0.5` делает полупрозрачным весь узел вместе с текстом и потомками. Для стеклянного фона используйте альфу цвета, `color-mix()` или отдельный декоративный слой.

Согласованная тёмная палитра есть в Midnight, светлая — в рецепте выше. В обоих случаях начинайте с фона и основного текста, затем добавьте карточки, границы, второстепенные подписи, акценты и их контрастный текст. Проверьте реальную читаемость мелких подписей, отключённых кнопок и текста на градиенте. Разные оттенки похожей яркости часто плохо разделяются, даже если выглядят красиво на большой плашке.

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

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

| Свойство | Простое объяснение | Что учитывать в лаунчере |
| - | - | - |
| `font-family` | Список гарнитур по порядку поиска | Название не загружает файл шрифта |
| `font-size` | Размер букв | Корневой размер влияет и на rem-размеры Tailwind |
| `font-weight` | Толщина | Нужное начертание может отсутствовать в файле |
| `line-height` | Высота строки | Малое значение обрезает/сближает строки |
| `letter-spacing` | Расстояние между буквами | Большое значение удлиняет кнопки |
| `width`, `height` | Ширина и высота | Фиксированный размер может не вместить перевод |
| `min-width`, `max-width` | Нижняя/верхняя граница ширины | `min-width: 0` часто нужен сжимаемому flex-элементу |
| `margin`, `padding` | Отступ снаружи / внутри | Меняют занимаемое место |
| `display` | Способ размещения | `none` убирает элемент из раскладки |
| `flex`, `grid` | Раскладка в линию/колонку или сетку | Нельзя произвольно менять без понимания дочерних узлов |
| `gap` | Промежутки между элементами | Работает в подходящей раскладке |
| `position` | Позиционирование | absolute/fixed исключает узел из обычного потока |
| `overflow` | Что делать с выходящим содержимым | hidden обрезает, auto позволяет прокрутку |
| `box-sizing` | Что включено в размер | border-box включает padding и рамку |
| `border`, `border-radius` | Граница и скругление | Радиус не всегда обрезает дочернюю картинку |
| `box-shadow` | Тень | Большое размытие на многих карточках нагружает отрисовку |
| `opacity` | Прозрачность всего элемента | Влияет и на текст; не отключает действие |
| `z-index` | Порядок слоёв в своём контексте | Большое число не позволяет выйти из любого родительского контекста |

В визуальном редакторе размер шрифта ограничен 11–20px; обычный старт — 16px. Через произвольный CSS можно выйти за эти границы, но интерфейс может перестать помещаться. Изначальный минимум главного окна — 960×640, начальный размер — 1280×800. Проверьте минимум, длинные подписи и увеличенный масштаб.

Для первой правки лучше менять отдельный текст, а не весь корень:

```css theme={null}
.agent-page .agent-empty h2 {
  font-size: 24px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
```

Это заголовок пустого состояния агента, подтверждённый `agent.css`. Правило не покажет этот заголовок в чате с сообщениями. Отмена — удалить правило.

> [!WARNING]
>
> Не заменяйте `overflow-hidden` корневой оболочки на `visible` для «починки» отдельного списка. Не меняйте `position` у всех карточек и `z-index` у всех диалогов. Это может перекрыть кнопки, изменить область перетаскивания и нарушить фокус. Исправляйте ближайший виновный контейнер после осмотра DOM.

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

Псевдокласс выбирает состояние или положение узла. Псевдоэлемент обозначает рисуемую часть элемента. Наличие псевдокласса в CSS не создаёт соответствующую функцию.

| Запись | Когда действует | Применимость |
| - | - | - |
| `:hover` | Наведён указатель | Кнопки, строки, карточки |
| `:focus` | Элемент получил фокус | Поля и кнопки |
| `:focus-visible` | Браузер считает нужным показать фокус | Обычно клавиатурная навигация; не убирайте индикацию |
| `:active` | Идёт нажатие | Не означает выбранную вкладку |
| `:disabled` | Поддерживающий disabled элемент отключён | Реальные button/input; не любой div |
| `:checked` | Нативный checkbox/radio отмечен | Для Radix Checkbox используйте data-state |
| `:first-child`, `:last-child` | Узел первый/последний среди детей | Считаются все соседи, не только кнопки |
| `:nth-child(2n)` | Каждый второй ребёнок | Не устойчивый адрес конкретной сборки |
| `::before`, `::after` | Декоративная часть узла | Обычно требует content; занята у полос прогресса |

```css theme={null}
.sidebar-item-btn:hover { color: var(--sidebar-primary); }
.sidebar-item-btn:focus-visible { outline: 2px solid var(--ring); }
#home-play-button:disabled { cursor: not-allowed; }
[data-slot="checkbox"][data-state="checked"] { border-color: var(--primary); }
```

Для выбранного состояния темы есть `data-selected="true"`, для навигации — `data-active="true"`; других одинаковых атрибутов для всех компонентов нет. В меню агента есть, например, `aria-checked="true"`; контекст проверяется в исходнике/инспекторе. Не используйте `[aria-selected="true"]` как универсальный способ выбрать любой активный элемент.

> [!WARNING]
>
> Не заменяйте `content` у `.progress-launch::after` текстовой подписью: этот псевдоэлемент занят движущейся полосой. Псевдоэлементы годятся для декора, но не заменяют доступную подпись и функциональную кнопку.

## Анимации

`transition` плавно меняет свойство между состояниями. `transform` визуально сдвигает/масштабирует элемент, не перераскладывая соседей. `animation` запускает последовательность кадров `@keyframes`. `opacity` часто используется для появления.

В визуальном редакторе **«Эффекты интерфейса» → «Появление элементов»** доступны стандартный вариант, fade, сдвиги, масштаб, размытие, отключение и своя анимация. Длительность ограничена 100–2000 мс. Класс `.settings-content-enter` используется также для содержимого других разделов, а не только настроек.

```css theme={null}
@keyframes theme-content-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
```

Это специальное имя распознаётся парсером темы и включает собственную анимацию. Для другого имени выберите «Своя через CSS» и укажите имя в поле. Не пытайтесь создать анимацию изменения данных: логика ожидания загрузки остаётся в React.

Параметры можно задать в первом `:root`:

```css theme={null}
:root {
  --theme-enter-name: theme-content-enter;
  --theme-enter-duration: 350ms;
  --theme-enter-delay: 40ms;
  --theme-enter-easing: ease-out;
}
```

Задержка используется у `.settings-content-enter-delayed`. `prefers-reduced-motion` — системное предпочтение уменьшить движение. В собственных эффектах учитывайте его:

```css theme={null}
@media (prefers-reduced-motion: reduce) {
  #home-play-button { transition: none; }
}
```

Штатные анимации содержимого и halo учитывают этот запрос; стили агента тоже отключают свои движения. Не все произвольные индикаторы проекта автоматически перестают двигаться. Не обнуляйте глобально анимации загрузки без альтернативной видимой индикации и не анимируйте постоянно размеры/позиции десятков карточек.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.