185 lines
4.6 KiB
SCSS
185 lines
4.6 KiB
SCSS
#conversejs.theme-peertube {
|
|
.dropdown-menu {
|
|
// Fixing all dropdown colors
|
|
--text-color: #212529; // default bootstrap color for dropdown-items
|
|
--text-color-lighten-15-percent: #8c8c8c; // default ConverseJS theme color
|
|
|
|
background-color: #fff; // this is the default bootstrap color, used by ConverseJS
|
|
|
|
a,
|
|
i,
|
|
button {
|
|
--text-color: #212529; // default bootstrap color for dropdown-items
|
|
|
|
color: #212529; // default bootstrap color for dropdown-items
|
|
}
|
|
}
|
|
|
|
.chatbox {
|
|
// Slow mode info box
|
|
.livechat-slow-mode-info-box {
|
|
border: 1px dashed var(--peertube-menu-background);
|
|
color: var(--peertube-main-foreground);
|
|
background-color: var(--peertube-main-background);
|
|
|
|
.livechat-hide-slow-mode-info-box {
|
|
cursor: pointer;
|
|
font-size: var(--font-size-small);
|
|
}
|
|
}
|
|
|
|
converse-chat-toolbar {
|
|
border-top: none !important; // removing border, to avoid confusing the toolbar with an input field.
|
|
color: var(--peertube-main-foreground);
|
|
background-color: var(--peertube-main-background);
|
|
}
|
|
|
|
// Fixing emoji colors for some emoji like «motorcycle»
|
|
converse-emoji-picker {
|
|
.emoji-picker {
|
|
.insert-emoji {
|
|
a {
|
|
color: currentcolor;
|
|
}
|
|
}
|
|
}
|
|
|
|
.emoji-picker__header {
|
|
color: var(--peertube-main-background);
|
|
background-color: var(--peertube-main-foreground);
|
|
|
|
ul {
|
|
.emoji-category {
|
|
color: var(--peertube-main-background);
|
|
background-color: var(--peertube-main-foreground);
|
|
|
|
a {
|
|
color: currentcolor;
|
|
}
|
|
|
|
&.picked {
|
|
color: var(--peertube-main-foreground);
|
|
background-color: var(--peertube-main-background);
|
|
|
|
a {
|
|
color: currentcolor;
|
|
}
|
|
}
|
|
|
|
&.selected a,
|
|
&:hover a {
|
|
color: var(--peertube-grey-foreground);
|
|
background-color: var(--peertube-grey-background);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-content {
|
|
background-color: var(--peertube-main-background);
|
|
|
|
.close {
|
|
color: var(--peertube-main-foreground);
|
|
}
|
|
}
|
|
|
|
.button-cancel,
|
|
.btn-secondary,
|
|
.badge-secondary {
|
|
color: var(--peertube-grey-foreground);
|
|
background-color: var(--peertube-grey-background);
|
|
}
|
|
|
|
form {
|
|
&.converse-form {
|
|
background-color: var(--peertube-main-background);
|
|
}
|
|
}
|
|
|
|
.form-control {
|
|
/* Cancelling some bootstrap stuff */
|
|
border-color: var(--chatroom-head-bg-color);
|
|
box-shadow: none;
|
|
|
|
&:focus {
|
|
border-color: var(--chatroom-head-bg-color);
|
|
outline: 2px solid var(--chatroom-head-bg-color);
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.chatroom .box-flyout .chatroom-body .chatroom-form-container {
|
|
background-color: var(--peertube-main-background);
|
|
}
|
|
|
|
.list-group-item {
|
|
color: var(--peertube-main-foreground);
|
|
background-color: var(--peertube-main-background);
|
|
}
|
|
|
|
.chat-msg__text {
|
|
// spoiler content more visible.
|
|
&.spoiler {
|
|
color: var(--peertube-grey-foreground) !important;
|
|
background-color: var(--peertube-grey-background) !important;
|
|
}
|
|
|
|
// underline links in chat messages
|
|
a[href] {
|
|
text-decoration: underline;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.correcting {
|
|
// Fix color/background-color for correcting messages and textareas
|
|
color: var(--peertube-grey-foreground) !important;
|
|
background-color: var(--peertube-grey-background) !important;
|
|
}
|
|
|
|
.suggestion-box__results {
|
|
// To make the autocompletes results more readable, adding a border (orange for the default theme)
|
|
border-color: var(--peertube-button-background);
|
|
}
|
|
|
|
// hidding avatars when screen width is not big enough.
|
|
// FIXME: how to apply this when the chat is beside video without iframe? (2024-04-02)
|
|
@media screen and (max-width: 250px) {
|
|
.message {
|
|
&.chat-msg {
|
|
.chat-msg__content {
|
|
margin-left: 0.5em;
|
|
width: 100%;
|
|
}
|
|
|
|
&.chat-msg--followup {
|
|
&.chat-msg--with-avatar .chat-msg__content {
|
|
margin-left: 0.5em;
|
|
}
|
|
}
|
|
|
|
.chat-msg__avatar,
|
|
converse-avatar {
|
|
display: none;
|
|
}
|
|
|
|
.chat-msg__body {
|
|
margin-left: 1em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Bigger occupants sidebar when width is not big enough.
|
|
@media screen and (max-width: 576px) {
|
|
.chatroom .box-flyout .chatroom-body .occupants {
|
|
min-width: 50%;
|
|
}
|
|
}
|
|
}
|