Дизайн домена

В панели: «Домен» → «Дизайн». Один экран, которым красится весь домен — и обычные страницы, и страница задания в игре.

Раньше оформление собирали, перебивая правила движка по одному: писали в css домена длинный список селекторов и на каждый ставили свой цвет. Теперь у этого есть два слоя попроще — тема и токены, — и свой css пишут уже поверх них, а не вместо них.

Тема — это готовый набор значений, поверх которых ложится ваш css. Выбирается на вкладке «Настройки домена», строка «Тема оформления».

• Без темы — то, как домен выглядел всегда.
• Зелёная
• Dark Purple
• Dark Radix
• Light Radix

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

Тема — это поправка, а не полный набор: чего она не назвала, остаётся от движка. Поэтому «Без темы» — это не «сломано», а «всё по умолчанию».

Верхний ряд — экраны:

• «Меню» — строка ссылок под шапкой, на каждой странице сайта.
• «Сайт» — обычные страницы: главная, список игр, профиль.
• «Игра» — страница задания. Своя тема на светлую и на тёмную.
• «Настройки домена» — title, стартовая страница и выбор темы.

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

Под вкладками — строчка о том, на что ложится открытый слот, и рядом с каждым css-слотом ссылка «Токены темы».

Слева — редактор, справа — витрина. Витрина — не живая страница домена, а образец, собранный студией: у «Сайта» это меню, базовая страница, список игр, статистика, карта кодов и лог ответов (у витрины есть своё оглавление), у «Игры» — контейнер задания, инвентарь, спойлер и алерт. Так сделано нарочно: черновик больше не попадает на настоящие страницы, где его мог бы увидеть кто угодно.

У витрины свои переключатели: «Светлая» / «Тёмная» (только на экране «Игра»), во всю ширину или как на телефоне, и «Перерисовать».

css применяется на каждом нажатии клавиши, без перезагрузки витрины. HTML так не умеет — его собирает сервер, и витрина перерисовывается через паузу после того, как вы перестали печатать.

Токен — это имя цвета (или размера), которым движок пользуется во всех своих правилах: –qeng-body-bg, –qeng-surface-bg, –qeng-accent и ещё несколько сотен. Задали имя — и цвет разошёлся по всем правилам сам, перебивать селекторы не нужно:

:root {
  --qeng-body-bg: #050505;
}

Список открывается ссылкой «Токены темы» рядом с любым css-слотом.

• Имена сгруппированы, и первой стоит палитра — те несколько десятков, которыми описан весь сайт. Обычно хватает её: роли экранов берут цвет из палитры и меняются следом. Раскрывайте остальные группы, только если нужно отвести в сторону что-то одно.
• Квадратик рядом с именем показывает цвет после вашего css, а не значение по умолчанию, — так видно, что вы уже переопределили.
• Группы, к открытому слоту не относящиеся, спрятаны.
• Часть токенов помечена как движковая: их не перебить ничем, и на слотах они не предлагаются вовсе.

Это справочник, а не поле ввода: правите вы по-прежнему css, токены здесь только перечислены.

Над витриной стоит полоса проверки контрастности: «Контрастность: OK (N элементов)» или «N проблем контрастности», стрелки «◀ ▶» по проблемам и «Показать все». Пороги в ней намеренно мягче требований WCAG — это поиск явно нечитаемого, а не аудит доступности.

Кнопка «🔍 Инспектор» включает выбор элемента: щёлкаете по чему угодно в витрине и видите, из какого слоя пришло правило:

• 📄 на странице (inline и <style>),
• 🌐 дизайн домена (ваш css),
• 🎨 тема,
• ⚙️ базовый дизайн qeng (движок),
• 🅱️ Bootstrap.

Кнопка «➕ В редактор» вставляет селектор в открытый слот. На html-слоте она не работает — вставлять правило некуда.

Оба инструмента работают только на css-слоте. Когда открыт html-слот, в витрине крутится ваш html, и она отдаётся в песочнице; инспектор при этом закрывается сам, а полоса контрастности молчит. Это не поломка, а граница безопасности.

• Черновик лежит в вашем браузере. Вернулись на страницу — студия спросит: «Найден несохранённый черновик от … Восстановить его?». Если за это время слот успели изменить на сервере, она назовёт, какой именно, и попросит посмотреть его в списке изменений.
• «Сохранить» сначала показывает окно «Изменения перед сохранением» — построчно, по каждому изменённому слоту. То же окно, что и в редакторе заданий.
• «История (N)» — до 30 последних сохранённых версий, подписаны датой и логином того, кто сохранял.
• Пределы: html-слот — 64 КБ, файл css — 512 КБ. Не влезло — студия скажет, что именно и насколько.

Сломали вёрстку так, что страница не открывается? Добавьте к адресу ?safe — домен покажется совсем без своего оформления и без темы, и студия откроется.

Админские страницы и редакторы на своих страницах оформление домена не берут — ни тему, ни ваш css, ни вашу шапку. Они выглядят одинаково на любом домене; экрана для них в студии нет вовсе.

Две тонкости, о которые проще всего споткнуться:

• Полоса админки над страницами сайта и игры — красится. Не берут оформление админские страницы, а не сама панель.
• Редактор заданий берёт тему только встроенным — когда он открыт прямо на странице игры. На своей отдельной странице он всегда светлый.

Светлый и тёмный режим в игре выбирает игрок — переключателем «Тёмный режим» в меню игры. Это не тема домена и с ней не связано: тема описывает оба режима сразу.

Технически режим — это атрибут на корневом элементе страницы:

:root[data-theme="dark"]  { /* ночь */ }
:root[data-theme="light"] { /* день */ }

Атрибут ставит только страница игры. На страницах сайта его нет вовсе, так что html:not([data-theme]) — это страница сайта, а не день. Правило дня пишется [data-theme=«light»].

В css домена для игры этого обычно писать не надо: у домена светлая и тёмная темы лежат двумя разными слотами, и движок подключает нужный файл сам.

Если тему надо навязать на одном уровне — это делается скриптом задания: Элементы страницы задания.

• Тёмное оформление правилами — как это делали до тем; пример остался.
• Настройка меню домена
• Страницы домена
• Перевод домена