peertube-plugin-livechat/conversejs/custom/shared/styles/livechat.scss

92 lines
1.9 KiB
SCSS
Raw Normal View History

@import "./variables";
@import "shared/styles/index";
@import "./peertubetheme";
2021-11-09 09:34:34 +00:00
body.livechat-iframe #conversejs .chat-head {
// Hidding the chat-head when the plugin is displayed in an iframe.
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 {
.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;
}
}
2022-01-07 18:20:28 +00:00
// Viewer mode
.livechat-viewer-mode-nick {
display: none;
}
body[livechat-viewer-mode="on"] {
.livechat-viewer-mode-nick {
display: initial;
2022-01-07 18:57:42 +00:00
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.
}
2022-01-07 18:57:42 +00:00
}
2022-01-07 18:20:28 +00:00
}
2022-01-07 18:28:07 +00:00
converse-muc-bottom-panel {
>:not(.livechat-viewer-mode-nick) {
display: none;
}
2022-01-07 18:20:28 +00:00
}
}
// Transparent mode
body.livechat-transparent {
2022-08-07 10:40:18 +00:00
// --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 {
2022-08-07 10:40:18 +00:00
background-color: rgba(0 0 0 / 0%) !important;
}
// Hide the background_logo
#conversejs-bg {
display: none !important;
}
}