Темы

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

Контейнеры

Основные переменные

В таблице описаны переменные, влияющие на весь интерфейс чата в целом

Наименование	Предназначение
--container-color
--container-font-family
--container-font-weight

Скроллбар

Наименование	Предназначение
--scrollbar-bg
--scrollbar-thumb-bg

Float Container

Наименование	Предназначение
--float-container-border-radius
--float-container-border-radius-header
--float-container-bg
--float-container-box-shadow
--float-container-bg-header
--float-container-title-font-size
--float-container-title-font-weight
--float-container-icon-color

Base Container

Наименование	Предназначение
--base-container-bg

Наименование	Предназначение
--modal-padding
--modal-border-radius
--modal-mask-background
--modal-overlay-shadow
--modal-icon-color
--modal-bg
--modal-icon-font-size

Разметка

Extended Layout

Наименование	Предназначение
--layout-extended-bg
--layout-extended-third-col-bg
--layout-extended-column-border

Base Layout

Наименование	Предназначение
--layout-base-bg
--layout-base-column-border
--layout-base-first-col-bg
--layout-base-second-col-bg

Feed Layout

Наименование	Предназначение
--layout-feed-bg

Компоненты

Chat Panel

Наименование	Предназначение
--chat-panel-bg
--chat-panel-margin
--chat-panel-border-radius
--chat-panel-border
--chat-panel-title-font-size
--chat-panel-title-font-weight
--chat-panel-button-close-font-size
--chat-panel-button-close-color

Наименование	Предназначение
--sidebar-padding-container
--sidebar-bg-container
--sidebar-border
--sidebar-box-shadow
--sidebar-image-width
--sidebar-image-height
--sidebar-image-active-border
--sidebar-row-gap-list
--sidebar-list-fixed-border-top
--sidebar-unread-font-size
--sidebar-unread-font-weight
--sidebar-unread-color
--sidebar-name-font-size
--sidebar-name-font-weight

Chat List

Наименование	Предназначение
--chat-list-fixed-background-color
--chat-list-button-actions-bg
--chat-list-button-actions-width
--chat-list-button-actions-color
--chat-list-items-padding
--chat-list-filter-margin
--chat-list-title-container-padding
--chat-list-title-font-size
--chat-list-title-font-weight

Input

Наименование	Предназначение
--input-background
--input-font-size
--input-font-weight
--input-padding
--input-width
--input-border-radius
--input-transition-duration
--input-text-color
--input-border
--input-placeholder-color
--input-hover-border-color
--input-focus-border-color

Chat Input

Наименование	Предназначение
--chat-input-container-bg
--chat-input-icon-color
--chat-input-icon-color-disabled
--chat-input-icon-font-size

File Uploader

Наименование	Предназначение
--file-uploader-icon-color

File Preview

Наименование	Предназначение
--file-preview-container-border

Chat Item

Наименование	Предназначение
--chat-item-padding-container
--chat-item-background-color
--chat-item-message-status-font-size
--chat-item-message-status-color-received
--chat-item-message-status-color-read
--chat-item-message-status-font-weight
--chat-item-menu-button-color-hover

Информация о чате

Наименование	Предназначение
--chat-item-border-radius
--chat-item-selected-color
--dialog-item-selected-color
--chat-item-last-message-color
--chat-item-last-message-font-weight
--chat-item-last-message-font-size
--chat-item-name-font-weight
--chat-item-name-font-size

Детали чата

Наименование	Предназначение
--chat-item-details-color
--chat-item-unread-color
--chat-item-unread-bg
--chat-item-unread-font-size
--chat-item-unread-font-weight
--chat-item-time-color
--chat-item-time-font-weight
--chat-item-time-font-size

Feed Found Item

Наименование	Предназначение
--feed-found-item-padding-container
--feed-found-item-border-radius
--feed-found-item-color
--feed-found-item-selected-color
--feed-found-item-hovered-color
--feed-found-item-message-color
--feed-found-item-message-font-weight
--feed-found-item-message-font-size
--feed-found-item-name-font-weight
--feed-found-item-time-color
--feed-found-item-time-font-weight
--feed-found-item-time-font-size

Chat Info

Наименование	Предназначение
--chat-info-padding
--chat-info-font-weight-time
--chat-info-font-weight-title
--chat-info-font-size-title
--chat-info-border-radius
--chat-info-border
--chat-info-time-color
--chat-info-time-font-size
--chat-info-actions-font-size
--chat-info-actions-color

Feed

Наименование	Предназначение
--feed-button-down-bg
--feed-button-down-uread-color
--feed-button-down-uread-bg
--feed-button-down-icon-color
--feed-button-down-icon-font-size

Message Keyboard

Наименование	Предназначение
--keyboard-background-color
--keyboard-border
--keyboard-shadow-color
--keyboard-font-size

Наименование	Предназначение
--context-menu-background
--context-menu-box-shadow-color
--context-menu-border

Наименование	Предназначение
--button-context-menu-color
--button-context-menu-icon-font-size
--button-context-menu-disabled-color

Channel Selector

Наименование	Предназначение
--channel-selector-title-font-weight
--channel-selector-title-font-size
--channel-selector-img-resolution

Наименование	Предназначение
--tooltip-text-color
--tooltip-bg-color

Template Selector

Наименование	Предназначение
--template-selector-bg
--template-selector-shadow-color
--template-selector-border
--template-selector-item-hover
--template-selector-item-selected
--template-selector-item-text-font-size
--template-selector-item-text-font-weight
--template-selector-item-title-font-size
--template-selector-item-title-font-weight
--template-selector-button-close-font-size
--template-selector-button-close-color
--template-selector-plug-font-size
--template-selector-preview-bg
--template-selector-preview-text-font-size
--template-selector-preview-time-font-size
--template-selector-button-paste-bg
--template-selector-button-paste-color
--template-selector-button-paste-font-size
--template-selector-button-add-font-size
--template-selector-button-cancel-font-size
--variable-placeholder-empty-color
--variable-placeholder-filled-color

WABA Attachment section

Наименование	Предназначение
--attachment-section-color
--attachment-section-hover-color
--attachment-section-error-color
--attachment-section-error-border
--attachment-section-error-font-size
--attachment-section-title-font-size
--attachment-section-title-font-weight
--attachment-section-title-color
--attachment-section-info-font-size
--attachment-section-info-font-weight
--attachment-section-info-color

WABA Quick Reply Buttons

Наименование	Предназначение
--quick-reply-buttons-font-size
--quick-reply-buttons-font-weight
--quick-reply-buttons-color

WABA Separated Quick Buttons

Наименование	Предназначение
--separated-quick-buttons-bg-color
--separated-quick-buttons-border
--separated-quick-buttons-title-font-size
--separated-quick-buttons-title-font-weight
--separated-quick-buttons-action-font-size
--separated-quick-buttons-action-font-weight
--semitransparent-overlay-bg-color

Сообщение

Общие переменные

Наименование	Предназначение
--base-message-right-bg
--base-message-left-bg
--base-message-text-font-size
--base-message-time-font-size
--base-message-time-color
--base-message-remaining-time-font-size
--base-message-status-font-size
--base-message-status-color-received
--base-message-status-color-read
--base-message-status-font-weight
--base-message-views-font-size
--base-message-views-icon-font-size
--base-message-views-color
--base-message-subtext-color
--base-message-subtext-font-size
--base-message-subtext-font-weight
--base-message-menu-button-font-size
--base-message-menu-button-color
--base-message-menu-button-hover-color
--base-message-margin

Сообщение в фокусе

Наименование	Предназначение
--focused-message-color
--focused-message-background-color
--focused-message-box-shadow-color

Ответ на сообщение

Наименование	Предназначение
--reply-message-text-font-size
--reply-message-right-bg
--reply-message-left-bg
--reply-message-color
--reply-message-before-bg
--reply-message-border

Предпросмотр ссылки

Наименование	Предназначение
--link-preview-right-bg
--link-preview-left-bg
--link-preview-before-bg

Аудио сообщение

Наименование	Предназначение
--audio-message-button-icon-color
--audio-message-button-icon-bg-color
--audio-message-button-icon-font-size
--audio-message-download-button-color
--audio-message-download-button-font-weight
--audio-message-download-button-font-size
--audio-message-speed-button-font-size
--audio-message-speed-button-font-weight
--audio-message-speed-button-selected-font-weight
--audio-message-transcript-color
--audio-message-transcript-delimiter-color
--audio-message-pbc-background-color
--audio-message-pb-background-color

/* progress-bar-container -> pbc / / progress-bar -> pb */

Звонок

Наименование	Предназначение
--call-message-title-font-size
--call-message-title-font-weight
--call-message-phone-icon-bg-color
--call-message-phone-icon-color
--call-message-phone-icon-font-size
--call-message-duration-font-size
--call-message-duration-color
--call-message-download-button-color
--call-message-download-button-font-weight
--call-message-download-button-font-size
--call-message-transcription-start-symbol-bg-color
--call-message-transcription-text-font-size
--call-message-transcription-time-color

Набор сообщения

Наименование	Предназначение
--typing-message-shadow-color

Сообщение-дата

Наименование	Предназначение
--date-message-color
--date-message-bg
--date-message-font-size
--date-message-font-weight
--date-message-border

Сообщение с файлом

Наименование	Предназначение
--file-message-icon-color
--file-message-text-color
--file-message-download-button-color
--file-message-download-button-font-weight
--file-message-download-button-font-size

Сообщение с изображением

Наименование	Предназначение
--image-message-info-color
--image-message-info-bg-color
--image-message-download-button-font-size

Сообщение с видео

Наименование	Предназначение
--video-message-info-color
--video-message-info-bg-color
--video-message-download-button-font-size

Системное сообщение

Наименование	Предназначение
--system-message-bg-color
--system-message-font-size
--system-message-color

Темы ​

Контейнеры ​

Основные переменные ​

Скроллбар ​

Float Container ​

Base Container ​

Modal Container ​

Разметка ​

Extended Layout ​

Base Layout ​

Feed Layout ​

Компоненты ​

Chat Panel ​

Sidebar ​

Chat List ​

Input ​

Chat Input ​

File Uploader ​

File Preview ​

Chat Item ​

Информация о чате ​

Детали чата ​

Feed Found Item ​

Chat Info ​

Feed ​

Message Keyboard ​

Context Menu ​

Button Context Menu ​

Channel Selector ​

Tooltip ​

Template Selector ​

WABA Attachment section ​

WABA Quick Reply Buttons ​

WABA Separated Quick Buttons ​

Сообщение ​

Общие переменные ​

Сообщение в фокусе ​

Ответ на сообщение ​

Предпросмотр ссылки ​

Аудио сообщение ​

Звонок ​

Набор сообщения ​

Сообщение-дата ​

Сообщение с файлом ​

Сообщение с изображением ​

Сообщение с видео ​

Системное сообщение ​