Дизайн домена [wiki.qeng.org]

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
====== Дизайн домена ======

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

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

===== Тема =====

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

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

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

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

===== Как устроена студия =====

{{ :admin_main:domain_design_studio.png?800 |Студия дизайна: экраны и слоты сверху, редактор слева, витрина справа}}

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

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

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

^ Экран ^ Слоты ^
| Меню | Меню (HTML) |
| Сайт | Шапка (HTML), Подвал (HTML), CSS |
| Игра | Шапка в игре (HTML), CSS: светлая тема, CSS: тёмная тема |

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

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

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

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

===== Токены =====

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

<code CSS>
:root {
  --qeng-body-bg: #050505;
}
</code>

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

{{ :admin_main:domain_design_tokens.png?800 |«Токены темы»: справочник имён, которые движок красит сам}}

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

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

===== Инспектор и контраст =====

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

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

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

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

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

===== Черновик, сохранение, история =====

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

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

===== Чего тема не красит =====

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

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

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

===== День и ночь в игре =====

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

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

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

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

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

Если тему надо навязать на одном уровне — это делается скриптом задания: [[authors_main:task_editor:advanced:page_elements|Элементы страницы задания]].

===== Смотрите также =====

  * [[admin_main:dark_example|Тёмное оформление правилами]] — как это делали до тем; пример остался.
  * [[admin_main:domain_menu|Настройка меню домена]]
  * [[admin_main:domain_pages|Страницы домена]]
  * [[admin_main:domain_localization|Перевод домена]]