98 lines
2.7 KiB
SCSS
98 lines
2.7 KiB
SCSS
/*
|
|
* SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
|
|
*
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
*/
|
|
|
|
#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%);
|
|
}
|
|
}
|
|
|
|
/* 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 px height limit for converse-muc and converse-root is
|
|
always higher than livechat-viewer-mode-content max size.
|
|
Note: We also must ensure that when the user has choosen its nickname, and there is an
|
|
ongoing poll, the user can see the chat when the poll is folded.
|
|
*/
|
|
#peertube-plugin-livechat-container converse-root {
|
|
display: block;
|
|
border: 1px solid black;
|
|
min-height: max(30vh, 300px); // Always at least 200px, and ideally at least 30% of viewport.
|
|
height: 100%;
|
|
min-width: min(400px, 25vw);
|
|
|
|
converse-muc {
|
|
min-height: max(30vh, 300px);
|
|
}
|
|
|
|
@media screen and (orientation: portrait) and (max-width: 767px) {
|
|
/* On small screen, and when portrait mode, we are giving the chat more vertical space.
|
|
It should go under the video.
|
|
*/
|
|
min-height: max(58vh, 300px);
|
|
|
|
converse-muc {
|
|
min-height: max(58vh, 300px);
|
|
}
|
|
}
|
|
}
|
|
|
|
// /* Media query for mobile devices */
|
|
// @media only screen and (max-width: 767px) {
|
|
// #peertube-plugin-livechat-container converse-root {
|
|
// converse-muc {
|
|
// min-height: 58vh;
|
|
// /* 100vh - 30vh for video = 70vh remaining */
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// /* Media query for tablets in portrait mode */
|
|
// @media only screen and (min-width: 768px) and (max-width: 1023px) {
|
|
// #peertube-plugin-livechat-container converse-root {
|
|
// converse-muc {
|
|
// min-height: 25vh;
|
|
// /* Slightly less to account for other elements */
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// /* Media query for tablets in landscape mode */
|
|
// @media only screen and (min-width: 1024px) and (max-width: 1279px) {
|
|
// #peertube-plugin-livechat-container converse-root {
|
|
// converse-muc {
|
|
// min-height: 25vh;
|
|
// /* Assuming more height can be used */
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
/* Media query for desktops */
|
|
@media only screen and (min-width: 1280px) {
|
|
#peertube-plugin-livechat-container converse-root {
|
|
converse-muc {
|
|
height: inherit;
|
|
/* Full desktop experience */
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* custom toolbar CSS */
|
|
|
|
.send-button {
|
|
border-radius: 0.25rem !important;
|
|
}
|
|
|
|
.send-button:hover {
|
|
background-color: #0067c1 !important;
|
|
} |