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

# Медиа, шрифты, инспектор и DevTools

> Особенности Electron, работа с медиа и шрифтами, встроенный инспектор CSS и отладка через DevTools.

## Electron, изображения и шрифты

CSS работает в renderer на Chromium, поставляемом с Electron. Конкретная поддержка свойства определяется этой версией, а не системным браузером. В package.json указан Electron `^43.1.1`; это ограничение зависимости, а не подтверждение версии любого установленного лаунчера.

В dev основной документ открывается с `http://127.0.0.1:5173`, в сборке — через `loadFile` из `dist/index.html`. Vite использует `base: './'`. Для локальных изображений и шрифтов используйте штатный выбор медиа; лаунчер сохраняет их в управляемом хранилище. Импорт `.xntheme` восстанавливает вложенные ресурсы и ссылки на них. Текст, вставленный в редактор, не имеет контекста произвольной папки на диске. Абсолютный веб-путь `/image.png` и путь `C:\\Pictures\\image.png` не являются переносимыми адресами.

### Локальное медиа

Используйте выбор файла в редакторе фона/шрифта. [theme-files.ts](https://github.com/XneonTeam/Xneon-Launcher/blob/main/electron/main/theme-files.ts) копирует разрешённый файл в `theme-media` внутри userData, даёт ему имя SHA-256 и адрес `xnl-theme://asset/<hash>.<ext>`. Не нужно вручную придумывать этот адрес: возьмите возвращённый редактором источник. Протокол выдаёт только разрешённые имена из этой папки, а не произвольные пути диска.

| Вид | Разрешённые расширения выбора файла |
| - | - |
| Изображение | png, jpg, jpeg, webp, gif, avif, bmp, svg |
| Видео | mp4, webm, ogv |
| Шрифт | ttf, otf, woff, woff2 |

Ограничение одного выбираемого файла — 128 МиБ. Разрешённое расширение ещё не гарантирует поддержку любого кодека внутри видео. Прозрачность/затемнение фона ограничены 0…1, размытие медиа — 0…24px. Видео ставится на паузу при скрытом документе или работающем Minecraft; проверка запуска выполняется периодически.

Выбор гарнитуры по имени использует уже установленный шрифт. Выбор файла загружает `FontFace` с именем `XneonThemeFont`. Одного `font-family: "My Font"` недостаточно для загрузки файла. Для собственного `@font-face` нужен доступный URL и поддерживаемый формат; для переносимости удобнее штатный выбор файла.

В CSS допустимы `url()` и `@font-face`, но они подчиняются сетевой политике, доступности ресурса и правилам Chromium. `@import` браузер принимает только в начале таблицы стилей. Сериализатор сохраняет ведущие `@charset`, `@import` и объявления порядка слоёв перед автоматически создаваемым `:root`, поэтому они не теряются при повторном сохранении. Пишите импорты до обычных правил; импорт посреди таблицы остаётся ошибкой CSS.

Специальная строка `--custom-background-video: url(...)` читается JavaScript из текста темы; поддержаны http(s), xnl-theme и data:video. Это не обычная CSS-переменная источника: её переопределение в медиазапросе или закомментированный пример может не соответствовать обычному каскаду, поскольку используется поиск по тексту. Для предсказуемого результата выбирайте видео в визуальном редакторе.

### Иконки и границы документа

Для `svg.icon-tabler`, `svg.tabler-icon`, `svg[data-icon]` глобальный CSS поддерживает `--icon-image`, `--icon-fit` и `--icon-original-opacity`. При замене задайте картинку и скройте исходные контуры на конкретной иконке; после удаления этих объявлений рисунок восстановится. Фоновое изображение не обязано наследовать `currentColor`.

Окна выбора файла и нативные уведомления ОС не являются DOM основного окна. Так же отдельны внешняя OAuth-авторизация, облачные callback-страницы и экспортированный HTML-список модов. Читалка новостей получает сгенерированные цвета и отдельный пользовательский CSS статьи. Тема не меняет оформление Windows и внешнего браузера.

### CSS внутри статьи

Откройте свою тему → CSS. Добавьте правила статьи в общий редактор рядом с правилами интерфейса. Они подключаются и к гостевому документу читалки; отдельного поля нет. Ниже учебный пример для страниц, содержащих `article` и `p`; структура конкретного сайта может отличаться:

```css theme={null}
article {
  font-size: 18px;
  line-height: 1.75;
}

article p {
  color: #dbe7ff !important;
}
```

Для цвета здесь нужен `!important`, поскольку базовая читалка также задаёт важные цвета текста. Основная палитра применяется первой, затем ваши правила. Ведущие импорты выносятся перед базовыми правилами. Правила статьи входят в общий CSS, переносятся `.xntheme` и отключаются переключателем пользовательского CSS. Дополнительные стили статьи из старых архивов также продолжают применяться. После удаления фрагмента и сохранения открытая статья вернётся к базовому оформлению.

## Инспектор и DevTools

### Встроенный инспектор

Кнопка **«Инспектор CSS»** в редакторе включает инструмент выбора элементов. Его также можно включить или выключить сочетанием **Alt+Shift+C** на нужной странице. Инспектор показывает адрес элемента для будущего правила; применение этого правила выполняет [механизм инжекции CSS](https://docs.xneon.org/guide/themes/css-basics.md#архитектура-инжекции).

1. Откройте нужный экран и состояние: например, главную страницу или раскрытое меню. Если редактор закрывает нужный элемент, сначала сохраните тему и закройте редактор, затем включите инспектор через **Alt+Shift+C**.
2. Удерживайте **Alt** и двигайте мышь: рамка подсвечивает элемент. Без Alt можно пользоваться интерфейсом обычным образом, например открывать меню.
3. Нажмите **Alt+клик** по элементу. В панели появится селектор. Такой клик перехватывается инспектором и не запускает действие выбранной кнопки.
4. Отпустите Alt и нажмите кнопку копирования рядом с селектором. Его также можно выделить в поле и скопировать вручную.
5. Закройте инспектор кнопкой в панели или сочетанием **Alt+Shift+C**. Откройте свою тему в режиме CSS, добавьте правило с полученным селектором и нужными свойствами. Нажмите **«Применить CSS»**, затем **«Сохранить»** и проверьте нужный экран.

Инспектор предпочитает точный `data-ui`, ID, `data-component` или `data-slot`, для SVG может уточнить класс иконки и её владельца. Если у элемента нет маркера, выбирается ближайший подходящий предок. Поэтому адрес иногда относится к контейнеру, а не непосредственно к нажатому тексту. У повторяющихся карточек адрес может совпадать: для оформления одной карточки уточните контекст или её атрибуты.

Инспектор копирует **селектор**, а свойства и значения вы задаёте самостоятельно. Он не добавляет правило в тему автоматически. Выбор работает с DOM основного окна; правила статьи внутри webview задаются в том же CSS-редакторе, а для 3D-превью — параметры, описанные в этом руководстве.

Для проверки адреса достаточно временного правила:

```css theme={null}
#home-play-button { outline: 2px solid magenta; }
```

Если рамка видна на нужной кнопке, селектор работает. Удалите диагностическое правило перед публикацией. Если рамки нет, сначала убедитесь, что открыта главная страница, CSS включён и применён.

### Доступность DevTools

[window.ts](https://github.com/XneonTeam/Xneon-Launcher/blob/main/electron/main/window.ts) задаёт `devTools: isDev`; `isDev` определяется как непакованное приложение либо `NODE_ENV === "development"`. В обычной production-сборке DevTools отключены. Меню приложения снимается, собственного обработчика F12 или пункта открытия DevTools в исследованном коде нет. Поэтому руководство не обещает горячую клавишу для готовой сборки.

Для разработки есть подтверждённый механизм в [launch-electron-dev.mjs](https://github.com/XneonTeam/Xneon-Launcher/blob/main/scripts/launch-electron-dev.mjs): переменная `ELECTRON_DEBUG_PORT` открывает remote debugging. Пример PowerShell из корня репозитория при установленных зависимостях:

```powershell theme={null}
$env:ELECTRON_DEBUG_PORT = '9223'
pnpm run dev
```

Затем откройте локальную страницу отладочного порта `http://127.0.0.1:9223` в браузере и выберите документ лаунчера, если браузер предлагает инспекцию. Отладочный порт даёт доступ к приложению: используйте его локально для разработки и уберите переменную после завершения:

```powershell theme={null}
Remove-Item Env:ELECTRON_DEBUG_PORT
```

Это запуск исходников, а не способ включения DevTools в установленной production-сборке. Порт может быть занят, а полный dev-запуск может остановиться на ошибках текущей рабочей копии.

### Проверка стилей в доступных DevTools

1. В Elements включите выбор элемента и нажмите на интересующий узел. Найдите ID, классы, data-атрибуты и родителей.
2. В Styles найдите своё правило. Если его нет — селектор не совпал, CSS не загрузился или узел относится к другому документу.
3. Если объявление перечёркнуто, посмотрите победившее правило, слой, `!important`, inline-style и специфичность. Невалидное значение также может помечаться как ошибка.
4. В Computed найдите конечные `background-color`, `color`, `font-family`, размеры, `overflow`. Разверните свойство, чтобы увидеть источник.
5. Для переменной посмотрите `<html>` и нужного потомка: переменная может быть переопределена ближе к элементу. Проверяйте не только значение переменной, но и свойство, которое должно её читать.
6. Временно измените одно значение в Styles. Если результат верный, перенесите его в редактор темы и сохраните. Изменение только в DevTools не сохраняется как тема.
7. Проверьте наличие `style#theme-base-css` и `style#theme-custom-css` при включённом непустом пользовательском CSS. Если нет пользовательского тега, ищите проблему применения/переключателя, а не специфичности.
8. В Network проверьте ошибку URL изображения/шрифта и доступность ответа. Наличие файла на диске ещё не означает доступность URL из документа.


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