CSS refactoring.
This commit is contained in:
John Livingston
@ -4,195 +4,9 @@
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
@use "style/elements/share-chat.scss";
|
||||
|
||||
#peertube-plugin-livechat-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
// Bigger occupants sidebar when embedded near a video.
|
||||
.chatroom .box-flyout .chatroom-body .occupants {
|
||||
min-width: min(200px, 50%);
|
||||
}
|
||||
}
|
||||
|
||||
.peertube-plugin-livechat-buttons,
|
||||
.livechat-mini-muc-bar-buttons {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: flex-end;
|
||||
padding-right: 12px !important; // to avoid being under the window scrollbar.
|
||||
}
|
||||
|
||||
.peertube-plugin-livechat-button {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 36px !important;
|
||||
margin: 5px !important;
|
||||
padding: 2px !important;
|
||||
|
||||
svg {
|
||||
height: auto; // override .peertube-button-link
|
||||
}
|
||||
}
|
||||
|
||||
.peertube-plugin-livechat-buttons-open,
|
||||
.livechat-mini-muc-bar-buttons {
|
||||
.peertube-plugin-livechat-button {
|
||||
height: 18px !important;
|
||||
margin: 2px !important;
|
||||
padding: 1px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.peertube-plugin-livechat-buttons-cloned {
|
||||
// Hiding buttons when cloned by the ConverseJS mini-muc-head plugin.
|
||||
display: none;
|
||||
}
|
||||
|
||||
[peertube-plugin-livechat-state="initializing"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[peertube-plugin-livechat-state="open"] .peertube-plugin-livechat-button-open {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[peertube-plugin-livechat-state="closed"] {
|
||||
.peertube-plugin-livechat-button-promote,
|
||||
.peertube-plugin-livechat-button-close {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
[peertube-plugin-livechat-state]:not([peertube-plugin-livechat-state="open"]) {
|
||||
.peertube-plugin-livechat-multi-button-main {
|
||||
border-top-right-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.peertube-plugin-livechat-multi-button-secondary {
|
||||
border-radius: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
border-left: 1px solid currentcolor;
|
||||
}
|
||||
|
||||
.peertube-plugin-livechat-multi-button-last-secondary {
|
||||
border-top-left-radius: 0 !important;
|
||||
border-bottom-left-radius: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
border-left: 1px solid currentcolor;
|
||||
}
|
||||
}
|
||||
|
||||
/* Note: livechat-viewer-mode-content (the form where anonymous users can
|
||||
choose nickname or log in with external account), can be something like
|
||||
~180px height (at time of writing).
|
||||
We must ensure that the 200px limit for converse-muc and converse-root is
|
||||
always higher than livechat-viewer-mode-content max size.
|
||||
*/
|
||||
#peertube-plugin-livechat-container converse-root {
|
||||
display: block;
|
||||
border: 1px solid black;
|
||||
min-height: max(30vh, 200px); // Always at least 200px, and ideally at least 30% of viewport.
|
||||
height: 100%;
|
||||
|
||||
converse-muc {
|
||||
min-height: max(30vh, 200px);
|
||||
}
|
||||
}
|
||||
|
||||
.peertube-plugin-livechat-experimental,
|
||||
.peertube-plugin-livechat-warning {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
livechat-error,
|
||||
.peertube-plugin-livechat-error {
|
||||
color: red;
|
||||
}
|
||||
|
||||
table.peertube-plugin-livechat-prosody-list-rooms {
|
||||
border: 1px solid black;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
table.peertube-plugin-livechat-prosody-list-rooms tr:nth-child(odd) {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
table.peertube-plugin-livechat-prosody-list-rooms tr:nth-child(even) {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
table.peertube-plugin-livechat-prosody-list-rooms th {
|
||||
/* stylelint-disable-next-line custom-property-pattern */
|
||||
background-color: var(--mainHoverColor);
|
||||
border: 1px solid black;
|
||||
/* stylelint-disable-next-line custom-property-pattern */
|
||||
color: var(--mainBackgroundColor);
|
||||
padding: 4px 5px;
|
||||
}
|
||||
|
||||
table.peertube-plugin-livechat-prosody-list-rooms td {
|
||||
border: 1px solid #555;
|
||||
color: black;
|
||||
padding: 4px 5px;
|
||||
}
|
||||
|
||||
livechat-spinner,
|
||||
.livechat-spinner {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
div {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin: 20px;
|
||||
/* stylelint-disable-next-line custom-property-pattern */
|
||||
border: 5px solid var(--greyBackgroundColor);
|
||||
/* stylelint-disable-next-line custom-property-pattern */
|
||||
border-bottom-color: var(--mainColor);
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
animation: livechatrotating 1s linear infinite;
|
||||
|
||||
@keyframes livechatrotating {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.peertube-plugin-livechat-error-message {
|
||||
/* display an error block (page not found, ...) */
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
padding-top: 50px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.peertube-plugin-livechat-container {
|
||||
.peertube-plugin-livechat-error-message {
|
||||
max-width: 30vw;
|
||||
}
|
||||
}
|
||||
|
||||
livechat-error {
|
||||
display: block;
|
||||
padding: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
@use "variables";
|
||||
@use "utils";
|
||||
@use "elements/index";
|
||||
@use "video";
|
||||
@use "configuration/configuration";
|
||||
@use "list-rooms/list-rooms.scss";
|
||||
|
||||
Reference in New Issue
Block a user