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

У панелі: **«Домен» → «Дизайн»**. Один екран, яким фарбується **весь домен** — і звичайні сторінки, і сторінка завдання в грі.

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

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

Тема — це готовий набір значень, поверх яких лягає ваш css. Обирається на вкладці **«Налаштування домену»**, рядок **«Тема оформлення»**.

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

**Тема фарбує домен цілком, а не лише гру.** Один і той самий набір описує і сайт, і гру, і світлий режим, і темний, — тож домен не може опинитися з піщаним днем і кіберпанковою ніччю.

Тема — це **поправка, а не повний набір**: чого вона не назвала, лишається від движка. Тому «Без теми» — це не «зламано», а «все за замовчуванням».

===== Як влаштована студія =====

{{ :admin_main:domain_design_studio_uk.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_uk.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 **домену** для гри цього зазвичай писати не треба: у домену світла і темна теми лежать **двома різними слотами**, і движок підключає потрібний файл сам.

Якщо тему треба нав'язати на одному рівні — це робиться скриптом завдання: [[uk:authors_main:task_editor:advanced:page_elements|Елементи сторінки завдання]].

===== Дивіться також =====

  * [[uk:admin_main:dark_example|Темне оформлення правилами]] — як це робили до тем; приклад лишився.
  * [[uk:admin_main:domain_menu|Налаштування меню домену]]
  * [[uk:admin_main:domain_pages|Сторінки домену]]
  * [[uk:admin_main:domain_localization|Переклад домену]]