Оформлення

Стилі 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

Декілька CSS файлів

Якщо в вашому проєкті багато CSS-класів, ви можете розбити їх на декілька файлів в каталозі resources/styles, а потім включити до основного файлу стилів resources/styles/custom.css за допомогою інструкції @import:

resources/styles/custom.css

@import url(first_css_file.css);
@import url(second_css_file.css);

Теми

Щоб додати нову тему оформлення, створіть 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. Гравець може обирати шрифт для тексту гри, окрім елементів, де шрифт явно вказаний.

Додавання шрифтів Google

Щоб додати до застосунку шрифт з сайту Google Fonts, запустіть в терміналі наступну команду, вказавши в лапках назву шрифта, наприклад:

npm run download-google-font "IBM Plex Sans"

Ця команда скачає шрифт в підкаталог resources/fonts з назвою шрифта та створить всі необхідні CSS та JS файли.

Додавання власних шрифтів

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

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

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

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

Видалення шрифтів

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