Настройка цветов и внешнего вида

Вы можете настроить цвета и внешний вид страницы Owncast в панели администратора через Конфигурация → Общие → Внешний вид. Начните с цветовых селекторов разделов — для них не нужен код. Для более тонкой настройки вы можете написать собственный CSS в редакторе, а приведённый ниже CSS-помощник Owncast сгенерирует отправную точку, которую вы можете вставить.

Если вы хотите углубиться в пользовательский CSS, полезно разбираться в селекторах CSS и в синтаксисе CSS-переменных, но для начала это не обязательно.

CSS-селекторы

Селектор	Описание
header	Элемент заголовка страницы
footer	Элемент нижнего колонтитула страницы
#global-header-text	Текст в заголовке
#offline-banner	Баннер, который появляется, когда трансляция оффлайн
#custom-page-content	Пользовательское содержимое страницы
#notify-button	Кнопка для отображения модального окна уведомлений
#follow-button	Кнопка для отображения модального окна подписки
#followers-collection	Коллекция подписчиков
#modal-container	Контейнер для модальных окон
#chat-container	Контейнер для чата
.chat-message_user	Чат-сообщение от пользователя
.chat-message_system	Чат-сообщение от системы
.chat-message_social	Социальное сообщение из Fediverse
.followers-follower	Один подписчик в коллекции подписчиков

CSS-переменные

Вы можете переопределить значения CSS-переменных вручную, задав их в редакторе CSS в панели администратора. Вы можете найти список названий переменных, которые можно переопределить.

Например, если вы хотите сделать все элементы действий (ссылки, кнопки) красными, границы кнопок зелеными и заменить шрифт тела на serif, вы можете задать следующие CSS-переменные:

:root {
  --theme-color-action: red;
  --theme-color-components-primary-button-border: green;
  --theme-text-body-font-family: serif;
}

Дополнительные селекторы и переменные

Хотя с помощью CSS вы можете нацеливаться на любой элемент на странице, если есть конкретные элементы, которые вам трудно настроить, пожалуйста, откройте issue в репозитории Owncast на GitHub, чтобы мы могли рассмотреть возможность добавления дополнительных селекторов или CSS-переменных для упрощения настройки. Со временем мы, вероятно, также добавим больше вариантов настройки прямо на странице внешнего вида Owncast для распространённых случаев использования. Если вы захотите настроить что-то конкретное, вклад в проект приветствуется!

Плагины оформления и тем

Theme plugins require Owncast v0.3.0

Theme plugins require Owncast 0.3.0 or later.

Плагины также могут стилизовать страницу зрителя. Плагин темы — поддерживаемый способ установить и поделиться готовым оформлением. Ваши настройки на этой странице и стили плагина комбинируются в итоговом результате.

Ваши настройки имеют приоритет. Цвета, которые вы выбираете здесь, и CSS, который вы пишете в редакторе, применяются поверх стилей плагина, поэтому там, где оба затрагивают один и тот же цвет, применяется ваш. Плагин темы служит базой: он изменяет цвета, которые вы не задали сами, а любой цвет, который вы задаёте явно, перекрывает его.

Когда плагин стилизует вашу страницу, эта страница сообщает вам:

• Уведомление вверху указывает название плагина или плагинов, которые в настоящее время применяют стили.
• Каждый цвет, который также задаёт плагин, помечается примечанием also set by <plugin> рядом с его элементом выбора.

Два рычага влияют на итог:

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

CSS-помощник Owncast

Чтобы помочь в настройке цветов Owncast через CSS-переменные и в кастомизации отдельных элементов, используйте приведённый ниже CSS-помощник. Это должно дать вам отправную точку для написания собственного CSS, а не полноценное решение. Выберите цвета с помощью селекторов цвета, при необходимости отредактируйте CSS напрямую, затем скопируйте и вставьте результат в панель администратора Owncast в разделе Конфигурация → Общие → Внешний вид.

Owncat suggests

Вы можете копировать и вставлять свой кастомный CSS и делиться им с другими пользователями Owncast в виде тем!

Owncast Components

Select colors to customize your Owncast instance. The CSS will be generated automatically.

Action Color--theme-color-action

Links, buttons, and interactive elements

Action Hover--theme-color-action-hover

Hover state for interactive elements

Main Background--theme-color-background-main

Primary page background

Header Background--theme-color-background-header

Header section background color

Button Background--theme-color-components-primary-button-background

Primary button background color

Button Text--theme-color-components-primary-button-text

Primary button text color

Button Border--theme-color-components-primary-button-border

Primary button border color

Chat Background--theme-color-components-chat-background

Chat container background

Chat Text--theme-color-components-chat-text

Chat message text color

Chat Input Background--theme-color-components-chat-input-background

Chat input field background

Primary Text--theme-color-palette-0

Main text color

Secondary Text--theme-color-palette-1

Secondary/muted text

Tertiary Text--theme-color-palette-2

Tertiary/disabled text

Headerheader

The main header element

Background

Text

Footerfooter

The main footer element

Background

Text

Header Text#global-header-text

The text in the header

Offline Banner#offline-banner

The banner that appears when the stream is offline

Background

Text

Custom Content#custom-page-content

The custom content of the page

Background

Text

Notify Button#notify-button

Button to display the notify modal

Background

Text

Follow Button#follow-button

Button to display the follow modal

Background

Text

Followers Collection#followers-collection

The collection of followers

Modal Container#modal-container

The container for the modals

Background

Text

Chat Container#chat-container

The container for the chat

User Chat Message.chat-message_user

A user-sent chat message

Background

Text

System Chat Message.chat-message_system

A system-sent chat message

Background

Text

Social Chat Message.chat-message_social

A social message from the Fediverse

Background

Text

Follower Item.followers-follower

A single Follower in the followers collection

Background

Text

Generated CSS