> ## 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.

# Селекторы и оформление компонентов

> Как находить элементы в DOM лаунчера и оформлять страницы, компоненты и состояния через CSS.

## Как найти нужный элемент

### Порядок выбора адреса

Начинайте с инспектора: **Alt+Shift+C**, затем **Alt+клик** по нужному элементу и копирование селектора. Это работает и с портальными окнами. Закройте инспектор, когда закончите: Alt+клик в его режиме специально перехватывает обычное действие.

Для понятного контейнера удобно использовать ID (`#launcher-sidebar`) или `data-component`. Для точного места — `data-ui`. Для стандартных элементов управления — `data-slot`. У динамических адресов и библиотечных узлов проверяйте действительную разметку.

| Адрес | Что выбирает | Ограничение |
| - | - | - |
| `#launcher-root` | Оболочка под верхней панелью | Не включает все порталы в body |
| `#launcher-content[data-page="builds"]` | Контейнер открытого раздела сборок | Существует с этим значением только на соответствующей странице |
| `[data-component="build-card"]` | Все карточки/строки сборок с этим маркером | Не один выбранный экземпляр |
| `[data-ui="sidebar-button-1"]` | Шаблон кнопки навигации | Повторяется для пунктов; уточняйте ID или data-active |
| `.sidebar-item-btn[data-active="true"]` | Активная кнопка навигации | Значение атрибута — строка `true` |
| `[data-slot="select-content"]` | Выпадающая панель Select | Обычно портал вне страницы |
| `[data-slot="checkbox"][data-state="checked"]` | Отмеченный Radix Checkbox | Это не обязательно input с :checked |
| `[data-window="settings-settings-themes-window-1"]` | Слой подтверждения удаления темы | У ModalLayer адрес стоит на затемнении, не на внутренней панели |

Полный [CSS\_REFERENCE.md](https://github.com/XneonTeam/Xneon-Launcher/blob/main/docs/CSS_REFERENCE.md) содержит **4064 мест JSX**, **4253 различных статических селекторов** ID/data-атрибутов, **368 записей собственных CSS-селекторов** и **142 класса используемых Tabler-иконок**. Эти категории могут пересекаться: складывать их в число уникальных DOM-элементов нельзя. Список составлен из всего `src/` и `components/`, а не только из заранее подготовленной таблицы.

У каждой записи есть файл, React-компонент, назначение, атрибуты/условия, наличие inline-стилей и пример. В разделе обычного CSS перечислены вложенные селекторы, псевдоэлементы, медиазапросы и текущие свойства. Это статическое подтверждение; проверки каждого узла в работающем лаунчере не проводилось.

### Динамические узлы и порталы

Карточки циклов имеют общий селектор шаблона. Не используйте `:nth-child(3)` как постоянный адрес конкретной сборки: сортировка, фильтр и группировка изменят её место. Выбор должен опираться на реально присутствующий атрибут или контекст.

`#launcher-content` имеет `data-page` со значениями `home`, `builds`, `logs`, `agent`, `stats`, `settings`, `accounts`, `cloud`, `servers`, `skins`. Страница обычно монтируется при открытии, часть разделов загружается лениво. CSS не создаёт ещё не загруженный элемент и не открывает меню.

`ModalLayer` и Radix Dialog/Select используют порталы. Поэтому правило `#launcher-content [data-slot="dialog-content"]` может ничего не найти. Для окна выбирайте его собственный маркер. `data-slot="modal-content"` у общей обёртки ModalLayer имеет `display: contents`: фон и радиус лучше задавать панели внутри неё, найденной инспектором.

Tailwind-классы с `:` или `/` требуют CSS-экранирования и хуже подходят как адрес. Полный список утилит не является стабильным справочником компонентов. Используйте именованные маркеры и узкую область действия.

## Оформление страниц и компонентов

Все фрагменты раздела вставляются ниже первого `:root` в CSS-редакторе, затем применяются и сохраняются. Удаление соответствующего фрагмента отменяет его действие. Основные переменные указаны как типичные потребители; отдельные дочерние элементы могут использовать свои цвета. Детальные адреса дочерних элементов — в [справочнике](https://github.com/XneonTeam/Xneon-Launcher/blob/main/docs/CSS_REFERENCE.md).

### Оболочка, фон и верхняя панель

`Launcher` в [launcher.tsx](https://github.com/XneonTeam/Xneon-Launcher/blob/main/components/launcher/launcher.tsx) содержит `#launcher-root`, `#launcher-main`, `#launcher-content`. Основные цвета — `--background`, `--foreground`. Сохраняйте ограничения высоты и прокрутки. `TitleBar` в [src/TitleBar.tsx](https://github.com/XneonTeam/Xneon-Launcher/blob/main/src/TitleBar.tsx) — HTML-шапка `#launcher-titlebar`, а не системная рамка Windows. Она использует `--sidebar`, `--sidebar-border` и область перетаскивания Electron; у кнопок есть `no-drag`.

```css theme={null}
#launcher-titlebar {
  border-bottom-color: #38445d;
}

#launcher-main {
  color: var(--foreground);
}
```

Не переопределяйте глобально `-webkit-app-region`: шапка может перестать перетаскиваться или кнопки перестанут получать клики. Изображение/видео выбирайте через редактор фона; так создаётся `#theme-background` и нужные классы прозрачности. Заставка `#splash` существует только при старте и удаляется после готовности приложения.

### Боковая навигация и подсказки

[sidebar.tsx](https://github.com/XneonTeam/Xneon-Launcher/blob/main/components/launcher/sidebar.tsx): `#launcher-sidebar`, `#sidebar-nav`, `#sidebar-footer`, `.sidebar-item-wrapper`, `.sidebar-item-btn`, `.sidebar-item-indicator`, `.sidebar-tooltip`. Активность выражена `data-active`; подсказка появляется при наведении на группу. Цвета — семейство `--sidebar-*`, подсказки — `--popover` и `--popover-foreground`.

```css theme={null}
.sidebar-item-btn[data-active="true"] {
  background: color-mix(in srgb, var(--sidebar-primary) 22%, transparent);
}

.sidebar-item-btn:focus-visible {
  outline: 2px solid var(--sidebar-ring);
  outline-offset: 2px;
}

.sidebar-tooltip { border-radius: 8px; }
```

Не фиксируйте `opacity: 1` всем индикаторам: неактивные индикаторы тоже присутствуют в DOM. Для пункта настроек можно использовать динамически сформированный, но известный `#sidebar-item-settings`.

### Главная страница, новости и запуск

[home-page.tsx](https://github.com/XneonTeam/Xneon-Launcher/blob/main/components/launcher/home-page.tsx) и [home/](https://github.com/XneonTeam/Xneon-Launcher/tree/main/components/launcher/home): `#home-page-root`, `#home-controls-panel`, `#home-account-card`, `#home-version-card`, `#home-version-select`, `#home-play-button`, `#home-news-container`. Состояния зависят от аккаунта, версии и запуска; кнопка может быть отключена или менять назначение на остановку. Прозрачные поверхности смешивают `--card` с фоном.

```css theme={null}
#home-account-card,
#home-version-card {
  border-color: var(--border);
  box-shadow: 0 4px 18px #00000022;
}

#home-play-button:disabled { opacity: 0.55; }
```

Новости могут появляться после запроса и быть виртуализированы: не все карточки обязательно одновременно в DOM. Статья открывается в отдельном `webview`. Читалка передаёт туда цвета, стили прокрутки и пользовательский CSS из общего редактора; при смене темы оформление статьи обновляется. Один текст подключается в двух документах. Уточняйте селекторы: общее правило для `p` может совпасть и в интерфейсе, и в статье.

### Сборки, экземпляры и их содержимое

[instance/instance-list.tsx](https://github.com/XneonTeam/Xneon-Launcher/blob/main/components/launcher/instance/instance-list.tsx): `[data-component="instance-list"]`, `[data-component="build-group"]`, `[data-component="build-card"]`. Список и сетка используют шаблоны карточек; проверьте оба вида. В [instance/](https://github.com/XneonTeam/Xneon-Launcher/tree/main/components/launcher/instance) также находятся детали сборки, каталоги, моды, ресурспаки, шейдеры, миры, скриншоты, настройки и операции импорта/экспорта.

```css theme={null}
[data-component="build-card"] {
  border-radius: 14px;
  border-color: color-mix(in srgb, var(--border) 80%, var(--primary));
}

[data-component="build-card"]:hover {
  box-shadow: 0 4px 16px #00000022;
}
```

Используйте `--card`, `--muted`, `--foreground`, `--primary`, семантические цвета и адресные правила. Не считайте `:active` признаком выбранной сборки: это краткое нажатие. Кнопки действий могут проявляться через `group-hover`; не скрывайте их и не увеличивайте карточки без проверки виртуализации/прокрутки.

### Кнопки добавления, изменения и удаления

В проекте нет общего обязательного класса `.button` и файла общего `components/ui/button.tsx`. Большинство действий — обычные `<button>` с собственными `data-ui` и Tailwind-классами. Найдите кнопку инспектором; не перекрашивайте все `button` в один цвет, иначе удаление, второстепенное действие и запуск станут неразличимыми.

```css theme={null}
#home-play-button:enabled:hover { filter: brightness(1.05); }
#home-play-button:enabled:active { filter: brightness(0.95); }
```

Цвета опасных действий часто используют `--destructive`, а состояния — `:disabled`, `:focus-visible`, условные классы. Реальная кнопка остаётся под управлением React.

### Поля, поиск и редакторы

Обычные поля находятся в файлах страниц, общий CSS выделяет `input`, `textarea`, `[contenteditable]`, `code`, `pre` как доступные для выделения текста. Многие поля используют `--muted`, `--border`, `--foreground`; `--input` не универсальный фон всех полей. Безопаснее ограничить правило страницей и типом.

```css theme={null}
[data-component="settings-page"] input[type="text"]:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

#theme-css-editor::placeholder { color: var(--muted-foreground); }
```

Второе правило имеет видимый эффект лишь если у поля действительно есть placeholder: псевдоэлемент не создаёт подсказку. Не применяйте текстовые размеры и padding ко всем `input`: среди них есть `range`, `color`, `checkbox`, `file`. В редакторах Prism используются `.token.*` и `--syntax-*`; inline-стиль может задавать собственную гарнитуру.

### Выпадающие списки, переключатели и ползунки

[select.tsx](https://github.com/XneonTeam/Xneon-Launcher/blob/main/components/ui/select.tsx), [checkbox.tsx](https://github.com/XneonTeam/Xneon-Launcher/blob/main/components/ui/checkbox.tsx), [memory-slider.tsx](https://github.com/XneonTeam/Xneon-Launcher/blob/main/components/ui/memory-slider.tsx). Основные маркеры: `[data-slot="select-trigger"]`, `[data-slot="select-content"]`, `[data-slot="select-item"]`, `[data-slot="checkbox"]`, `.launcher-range`. Список может находиться в портале; Checkbox — Radix-компонент с `data-state`.

```css theme={null}
[data-slot="select-content"] {
  border-color: var(--border);
  background: var(--popover);
  color: var(--popover-foreground);
}

[data-slot="checkbox"][data-state="checked"] {
  background: var(--primary);
  border-color: var(--primary);
}

.launcher-range::-webkit-slider-thumb {
  box-shadow: 0 0 6px var(--glow-primary);
}
```

Состояния Select и Checkbox уточняются по DOM; пункты могут иметь `data-disabled`. Часть визуальных переключателей настроек сделана отдельными кнопками с условными классами и не является Checkbox. Не подменяйте служебные значения min/max/current ползунка: они нужны для отображения заполнения.

### Модальные окна, подтверждения, контекстные меню

[modal-layer.tsx](https://github.com/XneonTeam/Xneon-Launcher/blob/main/components/ui/modal-layer.tsx) и [dialog.tsx](https://github.com/XneonTeam/Xneon-Launcher/blob/main/components/ui/dialog.tsx) дают общую основу. Собственные контекстные меню и окна реализованы в файлах страниц: универсального `.context-menu` ожидать не следует. Найдите открытое меню инспектором.

```css theme={null}
[data-slot="dialog-content"] {
  background: var(--card);
  color: var(--card-foreground);
  border-color: var(--border);
  border-radius: 14px;
}
```

Это затронет все Radix-диалоги с этим слотом. Для одного окна добавьте его собственный атрибут. Оставляйте кнопку закрытия, фокус, высоту и скролл. У ModalLayer `data-window` находится на затемнении, у DialogContent — на панели; общего правила для обоих случаев без проверки структуры нет.

### Уведомления, загрузка, ошибки и пустые состояния

[TitleBar.tsx](https://github.com/XneonTeam/Xneon-Launcher/blob/main/src/TitleBar.tsx) содержит центр уведомлений, связанный с `ActivityCenterContext`. Например, `[data-ui="title-bar-div-4"]` — панель, которая существует только когда центр открыт. Alert/confirm, ход установки и ошибки также имеют собственные компоненты в справочнике. Не предполагается универсальный `.toast`.

```css theme={null}
[data-ui="title-bar-div-4"] { border-radius: 16px; }
.progress-indeterminate::after { background: var(--primary); }
.progress-launch::after {
  background: linear-gradient(90deg, var(--primary), var(--accent));
}
```

`progress-indeterminate` означает этап без известного процента, `progress-launch` — ожидание окна игры. Ширина других полос часто задаётся inline по прогрессу операции: не заменяйте её постоянным числом. Пустой список, ошибка сети и загрузка — разные ветви React, их адреса могут отличаться.

### Аккаунты и авторизация

[accounts-page.tsx](https://github.com/XneonTeam/Xneon-Launcher/blob/main/components/launcher/accounts-page.tsx): `[data-component="accounts-page"]`, `[data-component="account-card"]`, окна добавления/редактирования аккаунта и связанные диалоги. Палитра действует на DOM лаунчера; внешнее окно авторизации провайдера оформляется отдельно.

```css theme={null}
[data-component="account-card"] {
  border-radius: 14px;
  border-color: var(--border);
}
```

Проверьте активный аккаунт, недоступный токен, длинный ник и пустой список. Изменение видимости строки не удаляет аккаунт и не отключает авторизацию.

### Скины: избранное и библиотека

[skins-page.tsx](https://github.com/XneonTeam/Xneon-Launcher/blob/main/components/launcher/skins-page.tsx), [skins/](https://github.com/XneonTeam/Xneon-Launcher/tree/main/components/launcher/skins), [laby/](https://github.com/XneonTeam/Xneon-Launcher/tree/main/components/launcher/laby). Общий маркер — `[data-component="skins-page"]`; панель предпросмотра — `[data-component="skin-preview-panel"]`. Есть поиск, фильтры, карточки и состояния загрузки/пустой выдачи.

```css theme={null}
[data-component="skin-preview-panel"] {
  border-color: var(--border);
}

[data-component="skin-preview-panel"] canvas { border-radius: 12px; }
```

CSS меняет рамку, холст и параметры сцены через явный мост. Доступны `--skin-zoom` (0.2–3), `--skin-fov` (20–110), `--skin-global-light` и `--skin-camera-light` (0–3), `--skin-animation-speed` (0–3; системное уменьшение движения останавливает анимацию). Геометрия и текстура остаются данными модели. Сохранение/надевание скина — действие приложения. Цветные свечения используют `--ambient-*` с прозрачностью конкретного компонента.

Пример для реального холста 3D-превью; вставьте его в основной CSS темы. Параметры перечитываются при применении темы и изменении размера окна:

```css theme={null}
[data-ui="ui-skin-viewer-3d-canvas-1"] {
  --skin-zoom: 1.1;
  --skin-fov: 45;
  --skin-global-light: 2;
  --skin-camera-light: 0.8;
  --skin-animation-speed: 0.5;
}
```

Удаление этих объявлений возвращает значения по умолчанию: масштаб 0.9, угол 50°, общий свет 3, свет камеры 0.6, скорость 1. Системное уменьшение движения имеет приоритет над скоростью темы.

### Серверы, консоль, игроки, аддоны и файлы

[servers-page.tsx](https://github.com/XneonTeam/Xneon-Launcher/blob/main/components/launcher/servers-page.tsx), [server-detail-page.tsx](https://github.com/XneonTeam/Xneon-Launcher/blob/main/components/launcher/server-detail-page.tsx), [server/](https://github.com/XneonTeam/Xneon-Launcher/tree/main/components/launcher/server). Маркер списка — `[data-component="server-list-row"]`. Отдельные вкладки содержат консоль, параметры, игроков, аддоны, настройки и файловый менеджер.

```css theme={null}
[data-component="server-list-row"] {
  border-color: var(--border);
  border-radius: 12px;
}

[data-component="server-list-row"]:hover {
  background: color-mix(in srgb, var(--primary) 6%, var(--card));
}
```

Статус сервера, доступные действия и прогресс меняются по данным. Сохраняйте цвета/подписи ошибок и остановки. Не меняйте `white-space`, размеры и `overflow` консоли без проверки длинных строк и ввода команд.

### Логи, статистика, ресурсы и хранилище

[logs-page.tsx](https://github.com/XneonTeam/Xneon-Launcher/blob/main/components/launcher/logs-page.tsx): `[data-component="logs-page"]`, `[data-component="log-row"]`; [stats-page.tsx](https://github.com/XneonTeam/Xneon-Launcher/blob/main/components/launcher/stats-page.tsx): `[data-component="stat-card"]`, `[data-component="daily-chart"]`, `[data-component="ranking-list"]`. Хранилище настраивается в [settings-storage.tsx](https://github.com/XneonTeam/Xneon-Launcher/blob/main/components/launcher/settings/settings-storage.tsx); просмотрщики файлов и редакторы перечислены в общей группе справочника.

```css theme={null}
[data-component="stat-card"] { border-radius: 12px; }
[data-component="log-row"] { border-color: var(--border); }
```

Не считайте все логи HTML-токенами `.log-line`: текущая страница также создаёт строки и цветные фрагменты программно, некоторые цвета — inline. Наличие CSS-правила `.log-line` в глобальном файле не доказывает его использование каждой строкой журнала. График может иметь высоты/цвета в стиле узла; `--chart-*` влияет лишь на фактических потребителей токена.

### Настройки, темы и первоначальная настройка

[settings/index.tsx](https://github.com/XneonTeam/Xneon-Launcher/blob/main/components/launcher/settings/index.tsx) содержит настройки игры и разделы Java, разрешения, версий, хранилища, тем, AI, обновлений, языка/о программе и authlib. Первоначальная настройка живёт в [onboarding/](https://github.com/XneonTeam/Xneon-Launcher/tree/main/components/launcher/onboarding). У карточки темы есть `data-selected` и `data-custom`.

```css theme={null}
[data-component="theme-card"][data-selected="true"] {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
```

Превью темы специально показывает цвета той темы, которую представляет, часто через inline-стили. Глобально заставлять все миниатюры наследовать текущую тему бессмысленно: исчезнут различия между вариантами. Сам редактор — `[data-component="theme-editor"]`, его точные дочерние адреса есть в справочнике.

### Облако и синхронизация

[cloud/](https://github.com/XneonTeam/Xneon-Launcher/tree/main/components/launcher/cloud): провайдеры, файлы, выбор загрузки и импорта. `[data-component="cloud-file-browser"]`, `[data-component="cloud-file-row"]`, `[data-component="upload-choice-modal"]` — подтверждённые контейнеры.

```css theme={null}
[data-component="cloud-file-row"]:hover {
  background: color-mix(in srgb, var(--primary) 7%, var(--card));
}
```

Проверяйте подключённый/неподключённый провайдер, ошибку и загрузку. Сам CSS не подключает облако и не запускает синхронизацию. Внешние страницы авторизации не относятся к этой таблице стилей.

### AI-ассистент

[agent/agent.css](https://github.com/XneonTeam/Xneon-Launcher/blob/main/components/launcher/agent/agent.css) задаёт реальные классы `.agent-page`, `.agent-history`, `.agent-messages`, `.agent-user-bubble`, `.agent-composer`, `.agent-tool`, `.agent-question`, `.agent-composer-popover` и другие. Цвета в основном читаются из общей палитры; есть адаптивные условия и reduced-motion.

```css theme={null}
.agent-page .agent-composer {
  border-color: var(--border);
  border-radius: 18px;
}

.agent-page .agent-tool {
  background: var(--card);
}
```

Меню агента может быть вынесено из `.agent-page`; для него используйте собственный `.agent-composer-popover`. Сохраняйте видимость вопросов, подтверждений инструментов и ошибок. Скрытие запроса CSS не отвечает на него и не отменяет действие.


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