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

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

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

Начинайте с инспектора: 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 содержит 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-редакторе, затем применяются и сохраняются. Удаление соответствующего фрагмента отменяет его действие. Основные переменные указаны как типичные потребители; отдельные дочерние элементы могут использовать свои цвета. Детальные адреса дочерних элементов — в справочнике.

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

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

#launcher-titlebar {
  border-bottom-color: #38445d;
}

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

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

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

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.

.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 и home/: #home-page-root, #home-controls-panel, #home-account-card, #home-version-card, #home-version-select, #home-play-button, #home-news-container. Состояния зависят от аккаунта, версии и запуска; кнопка может быть отключена или менять назначение на остановку. Прозрачные поверхности смешивают --card с фоном.

#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: [data-component="instance-list"], [data-component="build-group"], [data-component="build-card"]. Список и сетка используют шаблоны карточек; проверьте оба вида. В instance/ также находятся детали сборки, каталоги, моды, ресурспаки, шейдеры, миры, скриншоты, настройки и операции импорта/экспорта.

[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 в один цвет, иначе удаление, второстепенное действие и запуск станут неразличимыми.

#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 не универсальный фон всех полей. Безопаснее ограничить правило страницей и типом.

[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, checkbox.tsx, memory-slider.tsx. Основные маркеры: [data-slot="select-trigger"], [data-slot="select-content"], [data-slot="select-item"], [data-slot="checkbox"], .launcher-range. Список может находиться в портале; Checkbox — Radix-компонент с data-state.

[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 и dialog.tsx дают общую основу. Собственные контекстные меню и окна реализованы в файлах страниц: универсального .context-menu ожидать не следует. Найдите открытое меню инспектором.

[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 содержит центр уведомлений, связанный с ActivityCenterContext. Например, [data-ui="title-bar-div-4"] — панель, которая существует только когда центр открыт. Alert/confirm, ход установки и ошибки также имеют собственные компоненты в справочнике. Не предполагается универсальный .toast.

[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: [data-component="accounts-page"], [data-component="account-card"], окна добавления/редактирования аккаунта и связанные диалоги. Палитра действует на DOM лаунчера; внешнее окно авторизации провайдера оформляется отдельно.

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

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

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

skins-page.tsx, skins/, laby/. Общий маркер — [data-component="skins-page"]; панель предпросмотра — [data-component="skin-preview-panel"]. Есть поиск, фильтры, карточки и состояния загрузки/пустой выдачи.

[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 темы. Параметры перечитываются при применении темы и изменении размера окна:

[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, server-detail-page.tsx, server/. Маркер списка — [data-component="server-list-row"]. Отдельные вкладки содержат консоль, параметры, игроков, аддоны, настройки и файловый менеджер.

[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: [data-component="logs-page"], [data-component="log-row"]; stats-page.tsx: [data-component="stat-card"], [data-component="daily-chart"], [data-component="ranking-list"]. Хранилище настраивается в settings-storage.tsx; просмотрщики файлов и редакторы перечислены в общей группе справочника.

[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 содержит настройки игры и разделы Java, разрешения, версий, хранилища, тем, AI, обновлений, языка/о программе и authlib. Первоначальная настройка живёт в onboarding/. У карточки темы есть data-selected и data-custom.

[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/: провайдеры, файлы, выбор загрузки и импорта. [data-component="cloud-file-browser"], [data-component="cloud-file-row"], [data-component="upload-choice-modal"] — подтверждённые контейнеры.

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

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

AI-ассистент

agent/agent.css задаёт реальные классы .agent-page, .agent-history, .agent-messages, .agent-user-bubble, .agent-composer, .agent-tool, .agent-question, .agent-composer-popover и другие. Цвета в основном читаются из общей палитры; есть адаптивные условия и reduced-motion.

.agent-page .agent-composer {
  border-color: var(--border);
  border-radius: 18px;
}

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

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

Начало работы

Игра

Серверы

Аккаунт и данные

Темы оформления

Справка