8fc8e3032b
* For anonymous users: new "log in using an external account" dialog, with the "remote Peertube account" options * ConverseJS: using global vars for custom localized string (injected using Webpack)
142 lines
3.0 KiB
SCSS
142 lines
3.0 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-content {
|
|
display: none;
|
|
|
|
form {
|
|
display: flex !important;
|
|
flex-flow: row wrap !important;
|
|
padding-bottom: 0.5em !important;
|
|
border-top: 1px solid var(--chatroom-head-bg-color) !important;
|
|
gap: 10px;
|
|
align-items: baseline;
|
|
|
|
label {
|
|
color: var(--text-color); // fix converseJs css that breaks this label color.
|
|
}
|
|
}
|
|
|
|
hr {
|
|
margin: 0;
|
|
background-color: var(--chatroom-head-bg-color);
|
|
}
|
|
|
|
.livechat-viewer-mode-external-login {
|
|
padding: 2em;
|
|
}
|
|
}
|
|
|
|
body[livechat-viewer-mode="on"] {
|
|
.livechat-viewer-mode-content {
|
|
display: initial;
|
|
}
|
|
|
|
converse-muc-bottom-panel {
|
|
>:not(.livechat-viewer-mode-content) {
|
|
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;
|
|
}
|
|
}
|