Оформлення

Стилі CSS

Щоб додати власні класи CSS або змінити стилі існуючих елементів, відредагуйте файл resources/styles/custom.css. Він містить перелік існуючих класів елементів інтерфейсу, які можна модифікувати.

Щоб застосувати власний клас CSS до сцени або до виборів, використовуйте тег #CLASS для параграфу чи вибору:

# CLASS: classname

Щоб застосувати власний клас CSS до окремих елементів, використовуйте тег розмітки [css]:

Цей текст [css class="your_css_class"]стилізовано[/css].

Тег розмітки [css] має такі атрибути:

Атрибут	Опис
css="classname"	Застосовує клас CSS до тексту.
style="CSS style string"	Застосовує стиль CSS до тексту.

Ви можете вказати декілька класів для елементу, розділивши їх пробілами.

Цей приклад показує, як вказувати класи для сцени, виборів та тексту.

resources/styles/custom.css

.scene_combat {
  border: 3px solid #990000;
  padding: 1em;
}

.choice_attack {
  color: #FF0000;
  font-weight: bold;
}

.underlined {
  text-decoration: underline;
}

root/game/story.ink

=== combat
# CLASS: scene_combat
Ваш ворог [css class="underlined"]чекає[/css].
+ [Атакувати# CLASS: choice_attack] -> combat_attack
+ [Захищатися] -> combat_defend
+ [Ухилитися] -> combat_evade

Теми

Щоб додати нову тему оформлення, створіть JSON-файл в каталозі resources/themes з такою структурою:

{
  "name": "custom",
  "theme": {
    "bg-color": "#FCFCFC",
    "fg-color": "#5D576B",
    "shade-color": "rgba(0, 0, 0, 0.1)",
    "font-color": "#333333",
    "accent-bg-color": "#FCFCFC",
    "accent-fg-color": "#F7567C",
    "accent-inverse-color": "#FCFCFC",
    "border-radius": "0.5rem",
    "border-radius-inline": "0.25rem"
  }
}

Параметр теми	Опис
name	Назва теми.
bg-color	Фоновий колір застосунку.
fg-color	Основний колір елементів керування.
shade-color	Тінь та виділення.
font-color	Колір тексту застосунку та гри.
accent-bg-color	Фоновий акцентний колір.
accent-fg-color	Акцентний колір.
accent-inverse-color	Колір активних акцентних елементів (accent-fg-color використовується як фоновий).
border-radius	Закруглення кутів варіантів виборів, модальних вікон та прямокутників.
border-radius-inline	Закруглення кутів кнопок.

інформація

Ви можете використовувати будь-які коректні значення CSS для параметрів теми.

Шрифти

До складу Атраменту входять чотири шрифти: Fira Sans, Lora, Merryweather, and OpenDyslexic. Гравець може обирати шрифт для тексту гри, окрім елементів, де шрифт явно вказаний.

Додати чи прибрати шрифт

Щоб додати шрифт до застосунку, створіть новий каталог в каталозі resources/fonts з такими файлами:

• index.js з таким змістом:

import('./index.css');
export default {
  name: 'Назва шрифта', // як він відображається в налаштуваннях
  fallback: 'sans-serif', // якщо шрифт не завантажиться, використати цей
};

• index.css з необхідними директивами @font-face
• файли шрифту, вказані в index.css.

Щоб прибрати шрифт з застосунку, видаліть каталог з цим шрифтом з каталогу resources/fonts.