Собственные темы оформления на CSS (Theme Library)

Собственная тема оформления на CSS перекрашивает все приложение Marinara. В разделе Theme Library (библиотека тем оформления) темы можно создавать, импортировать, экспортировать и переключать. В этом руководстве также перечислены переменные и классы CSS, которыми может пользоваться тема, и объяснено, как темы оформления сочетаются с Card CSS. Чтобы быстро изменить вид без CSS, см. Готовые стили окон чата.

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

1. На сервере задайте ADMIN_SECRET в файле .env.
2. В приложении откройте Settings → Advanced → Admin Access (настройки → дополнительно → доступ администратора) и введите то же значение.

См. Настройки сервера: справочник и руководство Удаленный доступ: вход и список разрешенных адресов. Чтобы включить тему, которую вам передали, перейдите к разделу Включение темы оформления.

Что такое собственная тема оформления

CSS (сокращение от Cascading Style Sheets) – это код, задающий цвета, рамки и отступы. Тема оформления – это блок CSS, который может менять фон страницы, акцентный цвет, карточки, рамки, текст и многое другое.

Темы оформления хранятся в разделе Theme Library на вашем сервере Marinara, поэтому они синхронизируются на каждом устройстве, подключенном к тому же серверу. Большинство остальных настроек оформления остаются на одном устройстве. Активной может быть только одна тема оформления, а держать в библиотеке можно сколько угодно тем.

Где найти раздел Theme Library

1. Откройте панель Settings.
2. Перейдите на вкладку Addons (дополнения).
3. Найдите раздел Theme Library.

Создание темы оформления

1. В разделе Theme Library нажмите кнопку Create Theme (создать тему оформления).
2. Введите название в поле для названия (его подсказка в поле читается "Theme name...").
3. Напишите или вставьте CSS в большое текстовое поле.
4. Оставьте переключатель Preview (предпросмотр) включенным, чтобы видеть изменения сразу во время набора. Выключите его, чтобы остановить живой предпросмотр.
5. Нажмите кнопку Save (сохранить).

Новая тема оформления начинается с шаблона, в котором самые ходовые переменные перечислены в виде закомментированных примеров. Снимите знаки комментария и подставьте свои значения. Совсем новая тема оформления включается при сохранении, и появляется сообщение: Theme "My Theme" saved and activated.

Чтобы поправить тему оформления позже, найдите ее в списке Installed Themes (установленные темы), нажмите значок с кодом (всплывающая подсказка Edit theme CSS), внесите правки и нажмите Save. Правка не меняет того, какая тема активна.

Импорт и экспорт тем оформления

Как импортировать тему оформления:

1. Нажмите кнопку Import File (импортировать файл) в разделе Theme Library.
2. Выберите файл .css или .json.
3. Прочитайте сообщение. В нем сказано, сколько тем оформления импортировано, сколько пропущено и сколько не удалось импортировать.

Файл .css превращается в одну тему оформления, название берется из имени файла. Файл .json может содержать одну или несколько тем. Файл, экспортированный из Marinara, импортируйте как есть или напишите небольшой файл сами:

{ "name": "My Theme", "css": "..." }

Импортированные темы оформления сами по себе не включаются. Тема с таким же названием и таким же CSS, как у темы, которая уже есть на сервере, пропускается.

Чтобы экспортировать тему оформления, нажмите значок выгрузки (всплывающая подсказка Export theme) в ее строке в списке Installed Themes. Marinara скачивает файл .json, который можно импортировать в другом месте.

Включение темы оформления

В списке Installed Themes показаны все темы оформления, а сверху стоит пункт Default Theme (тема по умолчанию).

1. Нажмите на название темы оформления, чтобы сделать ее активной. Активную тему отмечает галочка.
2. Нажмите Default Theme, чтобы отключить собственное оформление и вернуть встроенный вид.

Кнопка Reset Appearance (сбросить оформление) вверху раздела App Style (стиль приложения) в Settings → Appearance (настройки → оформление) тоже отключает активную тему оформления.

Чтобы удалить тему оформления, нажмите значок корзины (всплывающая подсказка Remove theme) и подтвердите действие в окне Delete Theme. CSS этой темы удаляется с сервера безвозвратно.

Если не сработало: когда приложение выглядит неправильно, проверьте и активную тему оформления, и Card CSS в чате, если он есть. См. Темы оформления и Card CSS.

Готовые стили окон чата

Перед началом: CSS здесь не нужен.

1. Откройте Settings → Appearance → App (настройки → оформление → приложение).
2. Внизу раздела App Style найдите Chat widget style (стиль виджетов чата).
3. Выберите стиль.

У каждого стиля свой шрифт; каждый работает в светлом и темном режимах и вместе оформляет кнопки, окна и раскрывающиеся разделы. Выбор стиля сбрасывает Font (шрифт), Shape (форма) и все три цвета. Расположение окон сохраняется.

Отдельно можно изменить следующее:

• Font и Shape следуют стилю (Preset font, Preset shape), пока вы не выберете другие значения.
• Border & Buttons Color (цвет рамок и кнопок) меняет контуры и значки кнопок. Значки используют первый цвет градиента.
• Background Color (цвет фона) заполняет кнопки, окна, раскрывающиеся разделы и поля редактирования.
• Text Color (цвет текста) меняет текст виджетов. Градиент виден на заголовках и подписях, а поля редактирования используют первый цвет.

Для каждого цвета есть поле выбора сплошного цвета и вариант с градиентом. Reset color (сбросить цвет) рядом с настройкой снова включает светлые или темные цвета стиля. Декоративные эмблемы сохраняют исходные цвета.

Перенос стиля на чат

Три переключателя под полями выбора цвета распространяют стиль дальше. Изначально каждый выключен и работает независимо от остальных. Выключение переключателя возвращает обычное оформление чата для соответствующей части, а выбор другого стиля не меняет состояние переключателей.

Кнопки истории (Load More, Show older) подчиняются переключателям так же, как остальные элементы управления чатом. В Game Mode переключатели также действуют на побочные реплики, виджеты HUD, панель карты, листы персонажей, журналы, инвентарь, боевые панели и диалоговые окна. Professor Mari тоже может создавать собственные темы для этих областей.

Собственная тема оформления по-прежнему может переопределять стили. Переменные окон и разделов, перечисленные ниже, имеют приоритет над цветами стиля. Используйте --mari-window-font-family для шрифта окна, --mari-drawer-radius для углов разделов и --mari-window-ornament: none, чтобы скрыть украшение заголовка. Чтобы убрать все украшения стиля, сначала выберите Default.

Темы оформления и Card CSS

В приложении Marinara есть два способа добавить собственный CSS, и оба могут действовать одновременно.

• Собственная тема оформления перекрашивает все приложение. Ей разрешено переопределять основные переменные Marinara, использовать !important и position: fixed.
• Card CSS встраивается в карточку персонажа или персоны и включается отдельно в каждом чате. Он очищается строже: не может переопределять основные переменные, !important из него вырезается, а position: fixed превращается в position: absolute. Он оформляет сообщения чата, а не все приложение. См. Руководство по оформлению карточек через Card CSS.

Ограничения размера и названия

Название темы оформления вмещает до 200 символов. CSS вмещает до 256 KiB, причем считаются байты в кодировке UTF-8. Тему крупнее этого предела приложение отклоняет при сохранении или импорте. Кроме того, CSS собственной темы оформления перед запуском проходит очистку: стили, которые подгружают файл с другого сайта, не работают. Вместо этого встройте картинку или шрифт в виде URI data:.

Справочник по переменным CSS

В редакторе тем оформления есть сворачиваемый блок CSS Variable Reference. Раскройте его, чтобы увидеть самые полезные переменные, значения которых можно переопределить. Тема оформления меняет вид приложения, задавая эти переменные в блоке :root. В справочнике перечислены такие переменные:

Тема оформления может задать любую переменную CSS, которую использует Marinara, а не только эти. У некоторых эффектов есть свои переменные. Например, --marinara-theme-accent-pulse: enabled запрашивает анимацию пульсации акцента.

Оформление окон и разделов чата

На компьютере Chat Settings (настройки чата) открывается как перемещаемое окно. Его сворачиваемые разделы называются drawers. Раздел можно вынести в отдельное окно, а затем свернуть в маленькую перемещаемую кнопку, которая называется bubble.

Эти окна и кнопки используются и для других инструментов чата: Game controls, Session, Volume, Game Assets, связанных чатов и элементов управления пакетами. На телефоне большинство окон открывается панелями на всю ширину; Echo Chamber остается компактным окном, которое можно перемещать и растягивать. Инструменты, вынесенные из Chat Settings, находятся в перемещаемом меню Chat tools (инструменты чата) с тремя точками; кнопки трекеров остаются отдельно.

Классы, атрибуты данных и переменные ниже позволяют теме оформления вместе менять эти части интерфейса. Правила вашей темы переопределяют значения по умолчанию без !important.

Классы

Атрибуты данных

• data-window задает имя окна и его кнопки: chat-settings, trackers, окна управления control:game, control:session, control:volume, control:assets, control:connected-chat, control:package:<package> и control:beholder:<package>, а также drawer:<window>:<drawer> для вынесенного раздела, например drawer:chat-settings:chat-name.
• data-drawer задает имя раздела, например chat-name. Некоторые имена начинаются с режима чата, как roleplay-agents или conversation-agents. Трекеры используют tracker-world, tracker-persona, tracker-characters, tracker-quests, tracker-inventory, tracker-custom и agent-activity.
• data-presentation имеет значение "window" у окна на компьютере или "sheet" у панели на телефоне.
• data-pinned и data-locked имеют значение "true", пока окно закреплено или заблокировано.
• data-window-control задает имя кнопки в строке заголовка: "pin", "lock", "close" или "put-back". У нажатой кнопки закрепления или блокировки также есть aria-pressed="true".
• data-chat-settings-control отмечает дополнительные кнопки строки заголовка Chat Settings: "reset-view", "favorite-layout" и "tracker-panel". У звездочки избранного есть aria-pressed="true" и заполненный значок, когда текущее расположение совпадает с сохраненным избранным.
• data-edge имеет значение "n", "s", "e", "w", "ne", "nw", "se" или "sw" на соответствующем участке для изменения размера.
• У кнопки раскрытого раздела внутри .mari-drawer__header есть aria-expanded="true".
• data-drawer-control="pop-out" отмечает кнопку переноса раздела в отдельное окно.
• data-outside="true" отмечает предпросмотр перетаскивания достаточно далеко за пределами окна, чтобы при отпускании создать отдельное окно.
• data-axis имеет значение "x" у вертикальной линии выравнивания и "y" у горизонтальной.
• data-detached имеет значение "true", когда раздел показан в своем окне, и у окна, и у раздела внутри него. Окно вынесенного раздела получает имя data-window="drawer:<window>:<drawer>", например data-window="drawer:chat-settings:chat-name", а data-drawer-host задает имя исходного окна.
• data-dragging имеет значение "true" у раздела, пока вы перетаскиваете его заголовок, а data-drop-target имеет значение "true" у окна, над которым вы держите вынесенный раздел для возврата.
• У кнопки окна есть data-window этого окна и data-minimized="true", например .mari-window-bubble[data-window="control:volume"]. Окна управления называются control:game, control:session, control:volume, control:assets, control:connected-chat, control:package:<package> и control:beholder:<package>. Во время перетаскивания кнопки ее data-dragging имеет значение "true". Кнопка, которая вместо значка показывает обновляемую сводку, например свернутый трекер World State, имеет data-banner="true" и растягивается по ширине сводки.
• У заблокированной кнопки есть data-locked="true", в том числе у кнопки Chat Settings. Она по-прежнему открывает окно, но не перемещается, пока окно не разблокировано. Селектор .mari-window-bubble[data-locked="true"] позволяет оформить такие кнопки иначе.
• На телефоне окна и их немного увеличенные кнопки имеют data-presentation="sheet". Кнопка Tracker Panel – .mari-window-bubble[data-tracker-panel-toggle="bubble"].
• Кнопка Chat Settings тоже относится к bubble: .mari-window-bubble[data-chat-settings-button]. Пока Chat Settings открыто, у нее есть data-open="true".
• Вынесенный раздел сворачивается в кнопку с data-drawer-host (исходным окном). Кнопка Put back в его окне – [data-window-control="put-back"].

Переменные

Если переменная не задана, используются общие цвета элементов управления чатом. Поэтому теме достаточно задать только те значения, которые нужно изменить.

Задайте переменную в :root, чтобы изменить все окна, или в селекторе, чтобы изменить одно:

:root {
  --mari-window-radius: 0.5rem;
  --mari-window-bubble-bg: #3b0764;
}

[data-window="chat-settings"] .mari-drawer[data-drawer="chat-name"] {
  --mari-drawer-border: transparent;
}

Оформление сообщений, полей ввода и элементов управления чатом

Три переключателя Apply preset также позволяют собственной теме использовать оформление виджетов в остальной части чата. Тема может переопределить каждую часть с помощью переменных ниже. Если не хотите писать CSS сами, попросите Professor Mari создать подходящую тему чата.

Например, при включенных Apply preset font и Apply preset colors:

:root {
  --mari-chat-font-family: Georgia, serif;
  --mari-chat-bg: #251e29;
  --mari-chat-text: #f4e8dc;
  --mari-chat-border: linear-gradient(100deg, #d6aa66, #dda0b2);
}

Незаданные переменные следуют настройкам виджетов и пресету. Чтобы переменные применялись через встроенное оформление, соответствующий переключатель должен быть включен. Сообщения Conversation сохраняют свою форму даже при включенном Apply preset shape. Собственные темы также могут обращаться к классам напрямую; не обрезайте декоративными формами контуры фокуса, меню и содержимое сообщений.

На телефоне меню с тремя точками раскрывается в круглые кнопки. Его кнопка открытия – [data-chat-tools-menu-button], раскрытый столбец – [data-chat-tools-menu], а атрибут data-chat-tools-menu-item каждого элемента списка содержит ID его окна. Кнопки инструментов используют .mari-window-bubble.mari-chat-tools-button и data-chat-tools-menu-tool с тем же ID. У столбца нет оконной рамки; кнопки используют цвета виджетов и выбранный размер кнопок независимо от трех переключателей для остальной части чата, сохраняя круглую форму.

Смежные руководства

• Руководство по оформлению карточек через Card CSS
• Настройки оформления
• Настройки сервера: справочник
• Удаленный доступ: вход и список разрешенных адресов