1ceb37da2c
focus was lost when textarea got disabled, so it could trigger some Peertube events if the user type some text.
133 lines
2.9 KiB
SCSS
133 lines
2.9 KiB
SCSS
@import "./variables";
|
|
@import "shared/styles/index";
|
|
@import "./peertubetheme";
|
|
|
|
body.livechat-iframe,
|
|
#peertube-plugin-livechat-container {
|
|
#conversejs .chat-head {
|
|
// Hidding the chat-head when the plugin is displayed in an iframe or besides a video.
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#conversejs-bg {
|
|
// We are using a custom template that differs from the original, this is required.
|
|
.converse-brand__heading {
|
|
img {
|
|
margin-top: 0.3em;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Readonly mode
|
|
body.livechat-readonly #conversejs {
|
|
/* stylelint-disable-next-line no-descending-specificity */
|
|
.chat-head,
|
|
.bottom-panel,
|
|
converse-message-actions,
|
|
converse-muc-sidebar {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
body.livechat-readonly.livechat-noscroll {
|
|
converse-chat-content {
|
|
overflow-y: hidden !important;
|
|
}
|
|
|
|
.message.separator,
|
|
.message.date-separator {
|
|
// also hide separators (new day, new message)
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// Viewer mode
|
|
.livechat-viewer-mode-nick {
|
|
display: none;
|
|
}
|
|
|
|
body[livechat-viewer-mode="on"] {
|
|
.livechat-viewer-mode-nick {
|
|
display: initial;
|
|
|
|
form {
|
|
display: flex !important;
|
|
flex-flow: row wrap !important;
|
|
padding-bottom: 0.5em !important;
|
|
border-top: var(--chatroom-separator-border-bottom) !important;
|
|
gap: 10px;
|
|
align-items: baseline;
|
|
|
|
label {
|
|
color: var(--text-color); // fix converseJs css that breaks this label color.
|
|
}
|
|
}
|
|
}
|
|
|
|
converse-muc-bottom-panel {
|
|
>:not(.livechat-viewer-mode-nick) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Transparent mode
|
|
body.livechat-transparent {
|
|
// --peertube-main-background: rgba(0 0 0 / 0%) !important;
|
|
// --peertube-menu-background: rgba(0 0 0 / 0%) !important;
|
|
|
|
&.converse-fullscreen {
|
|
background-color: var(--livechat-transparent) !important;
|
|
}
|
|
|
|
.chat-body,
|
|
.conversejs .chatroom .box-flyout,
|
|
.conversejs .chatbox .chat-content,
|
|
.conversejs .chatbox .chat-content .chat-content__notifications {
|
|
background-color: rgba(0 0 0 / 0%) !important;
|
|
}
|
|
|
|
// Hide the background_logo
|
|
#conversejs-bg {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* Chat directly embedded in Peertube */
|
|
body.converse-embedded {
|
|
.conversejs .modal {
|
|
// modal z-index = use same z-index as Peertube (see Peertube _variables.scss)
|
|
z-index: 19000;
|
|
}
|
|
|
|
.modal-backdrop {
|
|
// must be just under .modal.
|
|
z-index: 18999;
|
|
}
|
|
}
|
|
|
|
/* Chat embedded in a full client page. */
|
|
.livechat-embed-fullpage {
|
|
converse-root {
|
|
display: block;
|
|
height: 90vh;
|
|
min-height: 400px;
|
|
}
|
|
}
|
|
|
|
.livechat-embed-fullpage,
|
|
#peertube-plugin-livechat-container {
|
|
converse-muc-message-form {
|
|
// For an unknown reason, message field in truncated... so adding a bottom margin.
|
|
margin-bottom: 6px;
|
|
}
|
|
}
|
|
|
|
.conversejs {
|
|
// Fix: for the slow mode, we use readonly instead of disabled, we must apply same CSS as ConverseJS.
|
|
textarea:read-only {
|
|
background-color: var(--chat-textarea-disabled-bg-color) !important;
|
|
}
|
|
}
|