> ## 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. # Основы CSS, применение темы и переменные > Основы CSS, архитектура применения темы в лаунчере и полный обзор переменных палитры. ## Основы CSS ### Правило, селектор, свойство и значение CSS-файл — обычный текст с расширением `.css`. Вот **условный учебный пример**, которого нет в разметке лаунчера: ```css theme={null} .example-card { background-color: #15171c; color: #ffffff; border: 1px solid #30343d; padding: 16px; border-radius: 8px; } ``` `.example-card` — **селектор**, адрес элементов с классом `example-card`. Точка означает класс. Фигурные скобки содержат настройки. Каждая строка — **объявление**: свойство слева от двоеточия и значение справа. Точка с запятой завершает объявление. `background-color` задаёт фон, `color` — текст, `border` — границу толщиной 1 пиксель со сплошной линией заданного цвета. `padding` оставляет 16 пикселей внутри вокруг содержимого. `border-radius` скругляет углы на 8 пикселей. Этот пример ничего не изменит в Xneon Launcher: класса `.example-card` там нет. ### Адреса элементов Следующие селекторы уже относятся к реальному лаунчеру: ```css theme={null} /* ID: решётка, затем точное имя. */ #home-play-button { font-weight: 700; } /* Класс: точка, затем имя. Все кнопки навигации. */ .sidebar-item-btn { border-radius: 10px; } /* Пробел: любой подходящий потомок внутри контейнера. */ #launcher-sidebar .sidebar-item-btn { letter-spacing: 0.02em; } /* Запятая: одинаковое правило для нескольких адресов. */ #home-account-card, #home-version-card { border-color: #38445d; } /* Атрибут: компонент с указанным именем. */ [data-component="build-card"] { border-radius: 14px; } /* Псевдокласс: применяется при наведении. */ .sidebar-item-btn:hover { color: var(--sidebar-primary); } ``` Потомок — элемент внутри другого элемента, в том числе через промежуточные контейнеры. Знак `>` выбирает только непосредственного ребёнка. Например, `.code-editor-wrapper > textarea` относится к многострочному полю непосредственно в обёртке редактора кода. Селектор без пробела `.sidebar-item-btn[data-active="true"]` требует одновременно класс и атрибут на одном узле. ### Переменные CSS-переменная — именованное значение. Её имя начинается с двух дефисов; `var()` подставляет значение в свойство. `:root` выбирает корневой HTML-элемент, от которого переменные наследуются интерфейсом. ```css theme={null} :root { --primary: #91a6ff; } #home-play-button { outline-color: var(--primary); } ``` Объявление переменной не перекрашивает элементы само: они должны читать её через `var()` прямо или через Tailwind-утилиту. Своя переменная допустима, если вы сами её используете. Например, в этом **учебном дополнении** `--my-shadow` придумана автором темы, а ID кнопки — реальный: ```css theme={null} :root { --my-shadow: 0 6px 18px #00000033; } #home-play-button { box-shadow: var(--my-shadow); } ``` ### Оформление небольшого элемента ```css theme={null} #home-play-button { color: #111827; background: linear-gradient(135deg, #a5b4fc, #67e8f9); border: 1px solid #c7d2fe; border-radius: 12px; box-shadow: 0 4px 16px #00000033; letter-spacing: 0.02em; transition: filter 160ms ease-out; } #home-play-button:enabled:hover { filter: brightness(1.06); } ``` Это реальное правило для главной кнопки: градиент плавно смешивает два цвета под углом 135°, тень смещена вниз на 4px и размыта на 16px. `#00000033` — чёрный с прозрачностью. `letter-spacing` меняет расстояние между буквами. `transition` делает изменение фильтра плавным. После вставки проверьте также состояние остановки и загрузки; CSS не меняет их логику. ### Каскад и `!important` Каскад — способ выбрать итоговое значение, когда несколько правил задают одно свойство. В пределах одинакового источника и уровня важности сначала учитываются слои CSS, затем специфичность, затем порядок. Специфичность — «точность адреса»: ID обычно сильнее класса/атрибута/псевдокласса, они сильнее селектора тега. Например, `#launcher-sidebar .sidebar-item-btn` сильнее `.sidebar-item-btn`. При одинаковой специфичности побеждает более позднее правило. Обычный inline-стиль `style="..."` сильнее обычного правила таблицы стилей. `!important` повышает приоритет отдельного объявления; его не следует писать повсюду. У важных объявлений порядок слоёв обращается, поэтому простое увеличение числа ID не решает все конфликты. ```css theme={null} /* Пример точечного переопределения размера inline-редактора. */ #theme-css-editor { font-size: 13px !important; } ``` В `ThemeEditor` размер редактора задаётся inline как 12px, поэтому такой приём имеет конкретную причину. Для переменных обычного CSS темы `!important` обычно не нужен: лаунчер переносит свою базу в предшествующий `