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

190 lines
4.5 KiB
SCSS
Raw Normal View History

#conversejs.theme-peertube {
2022-01-03 16:03:16 +00:00
.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
}
}
2021-11-23 15:10:02 +00:00
.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);
}
}
2021-11-23 15:10:02 +00:00
converse-chat-toolbar {
border-top: none !important; // removing border, to avoid confusing the toolbar with an input field.
2021-11-23 15:10:02 +00:00
color: var(--peertube-main-foreground);
background-color: var(--peertube-main-background);
}
2021-11-30 17:57:58 +00:00
// Fixing emoji colors for some emoji like «motorcycle»
converse-emoji-picker {
.emoji-picker {
.insert-emoji {
a {
color: currentcolor;
2021-11-30 17:57:58 +00:00
}
}
}
.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;
2021-11-30 17:57:58 +00:00
}
&.picked {
color: var(--peertube-main-foreground);
background-color: var(--peertube-main-background);
a {
color: currentcolor;
2021-11-30 17:57:58 +00:00
}
}
&.selected a,
&:hover a {
color: var(--peertube-grey-foreground);
background-color: var(--peertube-grey-background);
}
}
}
}
}
2021-11-23 15:10:02 +00:00
}
.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.
@media screen and (max-width: 250px) {
.message {
&.chat-msg {
.chat-msg__content {
2021-11-23 14:21:02 +00:00
margin-left: 0.5em;
width: 100%;
}
&.chat-msg--followup {
&.chat-msg--with-avatar .chat-msg__content {
margin-left: 0.5em;
}
}
2022-01-03 15:10:57 +00:00
.chat-msg__avatar,
converse-avatar {
display: none;
}
2021-11-23 14:21:02 +00:00
.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%;
}
}
}
}
}
}