forked from wurzel/fruitbasket
stream doesn't want to work
This commit is contained in:
root
parent
d7ed57bbdd
commit
9656926a07
287 changed files with 6934 additions and 0 deletions
514
webroot/styles/app.css
Normal file
514
webroot/styles/app.css
Normal file
|
|
@ -0,0 +1,514 @@
|
|||
/*
|
||||
Specific styles for main app layout.
|
||||
May have overrides for other components with own stylesheets.
|
||||
*/
|
||||
|
||||
/* variables */
|
||||
:root {
|
||||
--header-height: 3.5em;
|
||||
--right-col-width: 24em;
|
||||
--video-container-height: calc((9 / 16) * 100vw);
|
||||
--header-bg-color: rgba(20,0,40,1);
|
||||
--user-image-width: 10em;
|
||||
|
||||
--novideo-container-height: 16em;
|
||||
|
||||
--owncast-purple: rgba(120, 113, 255, 1);
|
||||
}
|
||||
|
||||
.no-video,
|
||||
.single-col.no-video {
|
||||
--video-container-height: var(--novideo-container-height);
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 14px;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
#loading-logo {
|
||||
margin-top: 3%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
height: 80vh;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.scrollbar-hidden::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
background: transparent;
|
||||
}
|
||||
.scrollbar-hidden {
|
||||
scrollbar-width: none; /* moz only */
|
||||
}
|
||||
|
||||
#app-container.config-loading {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
button[disabled] {
|
||||
opacity: .5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* accessibility things */
|
||||
.visually-hidden {
|
||||
position: absolute !important;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
white-space: nowrap; /* added line */
|
||||
}
|
||||
|
||||
|
||||
header {
|
||||
height: var(--header-height);
|
||||
background-color: var(--header-bg-color);
|
||||
display: block;
|
||||
}
|
||||
|
||||
#logo-container {
|
||||
background-size: 1.35em;
|
||||
padding: 1.15rem;
|
||||
background-image: url(/img/logo.svg);
|
||||
}
|
||||
|
||||
#chat-toggle {
|
||||
min-width: 3rem;
|
||||
}
|
||||
|
||||
#user-info-change {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.external-action-button {
|
||||
max-width: 250px;
|
||||
}
|
||||
.external-action-button:hover {
|
||||
box-shadow: var(--owncast-purple) 0px 0px 5px;
|
||||
}
|
||||
.external-action-icon {
|
||||
margin: .25em .5em .25em 0;
|
||||
}
|
||||
.external-action-icon img {
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
}
|
||||
.external-action-label {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#fediverse-follow-button-container .external-action-button {
|
||||
border: 2px solid var(--owncast-purple);
|
||||
}
|
||||
|
||||
/* ************************************************ */
|
||||
|
||||
#video-container {
|
||||
height: var(--video-container-height);
|
||||
margin-top: var(--header-height);
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
min-height: 480px;
|
||||
max-height: calc(100vh - var(--header-height) - 3rem);
|
||||
background-size: 30%;
|
||||
}
|
||||
#video-container #video {
|
||||
transition: opacity .5s;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.online #video-container #video {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
#app-container .custom-thumbnail-image {
|
||||
transition: opacity 2s;
|
||||
}
|
||||
|
||||
/* *********** overrides when chat is off ***************************** */
|
||||
.chat-disabled #user-options-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.chat-disabled footer,
|
||||
.chat-hidden footer {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.chat-hidden #chat-toggle {
|
||||
opacity: .75;
|
||||
}
|
||||
|
||||
/* hide chat by default */
|
||||
#chat-container-wrap {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* *********** overrides when chat is on ***************************** */
|
||||
|
||||
.chat {
|
||||
--content-width: calc(100vw - var(--right-col-width));
|
||||
}
|
||||
.chat #chat-container-wrap {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.chat main,
|
||||
.chat footer,
|
||||
.chat #user-content {
|
||||
width: var(--content-width);
|
||||
}
|
||||
|
||||
.user-content-header {
|
||||
width: 100%;
|
||||
}
|
||||
.chat #video-container {
|
||||
height: calc((9 / 16) * var(--content-width));
|
||||
}
|
||||
|
||||
.short-wide.chat #video-container {
|
||||
height: calc(100vh - var(--header-height) - 3rem);
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
/* display `send` button on mobile */
|
||||
.touch-screen #send-message-button{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
/* *********** single col layout ***************************** */
|
||||
|
||||
.single-col {
|
||||
--right-col-width: 0px;
|
||||
--video-container-height: calc((9 / 16) * 100vw);
|
||||
}
|
||||
.single-col main {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 40;
|
||||
}
|
||||
.single-col #chat-container {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.single-col.chat #video-container,
|
||||
.single-col.chat-disabled #video-container,
|
||||
.single-col.chat-hidden #video-container,
|
||||
.single-col #video-container #video,
|
||||
.single-col.chat #video-container #video {
|
||||
width: 100vw;
|
||||
height: var(--video-container-height);
|
||||
min-height: 212px;
|
||||
}
|
||||
.single-col #user-content,
|
||||
.single-col #chat-container-wrap {
|
||||
margin-top: calc(var(--video-container-height) + var(--header-height) + 1rem);
|
||||
}
|
||||
.single-col #user-content .user-content {
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.single-col.chat #user-content {
|
||||
display: none;
|
||||
}
|
||||
.single-col #messages-container {
|
||||
flex-grow: 2;
|
||||
margin-top: calc(var(--video-container-height));
|
||||
}
|
||||
.single-col #message-input-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.single-col #stream-info {
|
||||
height: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.single-col #stream-info span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.single-col #message-input-wrap {
|
||||
max-height: 3em;
|
||||
}
|
||||
|
||||
|
||||
.single-col .user-logo-icons {
|
||||
margin-right: 0;
|
||||
margin-bottom: 1em;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
.single-col.use-fediverse-follow.user-logo-icons {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.single-col .social-list {
|
||||
text-align: left;
|
||||
}
|
||||
.single-col .social-actions {
|
||||
margin-left: 1em;
|
||||
}
|
||||
.single-col .follow-icon-list {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.single-col.use-fediverse-follow #fediverse-button-singlecol {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.single-col #external-actions-container {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-height: 500px) {
|
||||
.single-col.touch-screen:not(.touch-keyboard-active) {
|
||||
--header-height: 0px;
|
||||
}
|
||||
.single-col.touch-screen:not(.touch-keyboard-active) header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/* ************************************************ */
|
||||
|
||||
|
||||
.no-video #video-container {
|
||||
min-height: var(--video-container-height);
|
||||
}
|
||||
|
||||
/* ************************************************ */
|
||||
|
||||
|
||||
@media screen and (max-width: 860px) {
|
||||
:root {
|
||||
--right-col-width: 20em;
|
||||
}
|
||||
#video-container {
|
||||
min-height: 240px;
|
||||
}
|
||||
.instance-title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ************************************************ */
|
||||
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
#user-info-change {
|
||||
width: 75vw;
|
||||
}
|
||||
#user-info-display {
|
||||
max-width: 30vw;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#external-modal-iframe {
|
||||
height: 70vh;
|
||||
}
|
||||
|
||||
|
||||
/**************************
|
||||
Basic Modal Styles
|
||||
**************************/
|
||||
/*
|
||||
External modal styling for use with Micromodal from https://gist.github.com/ghosh/4f94cf497d7090359a5c9f81caf60699
|
||||
See external-action-modal.js
|
||||
*/
|
||||
.modal {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.modal__overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0,0,0,0.75);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.modal__container {
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
padding: 0px;
|
||||
max-width: 740px;
|
||||
min-width: 500px;
|
||||
width: 50%;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.modal__container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.modal__close {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
outline: none;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
.modal__close:before { content: "\2715"; font-size: 1.25rem; }
|
||||
|
||||
@supports (display: flex) {
|
||||
.modal__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height:initial;
|
||||
}
|
||||
.modal__title {
|
||||
position: static;
|
||||
}
|
||||
.modal__close {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
/**************************
|
||||
Modal Animation Style
|
||||
**************************/
|
||||
|
||||
@keyframes mmfadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes mmfadeOut {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes mmslideIn {
|
||||
from { transform: translateY(15%); }
|
||||
to { transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes mmslideOut {
|
||||
from { transform: translateY(0); }
|
||||
to { transform: translateY(-10%); }
|
||||
}
|
||||
|
||||
.micromodal-slide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.micromodal-slide.is-open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.micromodal-slide[aria-hidden="false"] .modal__overlay {
|
||||
animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
|
||||
}
|
||||
|
||||
.micromodal-slide[aria-hidden="false"] .modal__container {
|
||||
animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
|
||||
}
|
||||
|
||||
.micromodal-slide[aria-hidden="true"] .modal__overlay {
|
||||
animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
|
||||
}
|
||||
|
||||
.micromodal-slide[aria-hidden="true"] .modal__container {
|
||||
animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
|
||||
}
|
||||
|
||||
.micromodal-slide .modal__container,
|
||||
.micromodal-slide .modal__overlay {
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
/* Miromodal mobile styling */
|
||||
@media only screen and (min-device-width : 600px) and (max-device-width : 480px) {
|
||||
.modal__container {
|
||||
width: 90% !important;
|
||||
min-width: 90% !important;
|
||||
}
|
||||
@supports (display: flex) {
|
||||
.modal__container {
|
||||
width: 90% !important;
|
||||
min-width: 90% !important;
|
||||
height: 85vh;
|
||||
}
|
||||
}
|
||||
.modal__content {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**************************
|
||||
Tab Bar Base Styles
|
||||
**************************/
|
||||
.tab-bar [role="tab"] {
|
||||
padding: .5rem 1rem;
|
||||
border-radius: .25rem .25rem 0 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
.tab-bar [role="tab"]:hover {
|
||||
background-color: rgba(255,255,255,.35);
|
||||
}
|
||||
.tab-bar [role="tab"][aria-selected="true"] {
|
||||
color: var(--owncast-purple);
|
||||
background-color: white;
|
||||
}
|
||||
.tab-bar [role="tabpanel"] {
|
||||
padding: 1rem 0;
|
||||
border-top: 1px solid var(--header-bg-color);
|
||||
min-height: 15rem;
|
||||
}
|
||||
|
||||
.follower {
|
||||
width: 20vw;
|
||||
max-width: 300px
|
||||
}
|
||||
|
||||
.following-list-follower {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
#follow-loading-spinner-container {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
#follow-loading-spinner {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
357
webroot/styles/chat.css
Normal file
357
webroot/styles/chat.css
Normal file
|
|
@ -0,0 +1,357 @@
|
|||
/* some base styles for chat and messaging components */
|
||||
|
||||
:root {
|
||||
/* Override this in your custom CSS to change the
|
||||
opacity of the message backgrounds. */
|
||||
--message-background-alpha: 0.3;
|
||||
}
|
||||
|
||||
#chat-container {
|
||||
position: fixed;
|
||||
z-index: 9;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: var(--right-col-width);
|
||||
|
||||
height: calc(100vh - var(--header-height));
|
||||
}
|
||||
|
||||
@media screen and (max-width: 729px) {
|
||||
#chat-container {
|
||||
top: var(--header-height);
|
||||
}
|
||||
}
|
||||
|
||||
#message-input-container {
|
||||
width: var(--right-col-width);
|
||||
}
|
||||
|
||||
#message-input-wrap {
|
||||
min-height: 2.5rem;
|
||||
max-height: 5rem;
|
||||
}
|
||||
#message-form-actions {
|
||||
right: 1rem;
|
||||
bottom: 1.88rem;
|
||||
}
|
||||
#emoji-button {
|
||||
height: 1.75rem;
|
||||
width: 1.75rem;
|
||||
}
|
||||
|
||||
#message-form-warning {
|
||||
display: none;
|
||||
}
|
||||
.display-count #message-form-warning {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/******************************/
|
||||
/******************************/
|
||||
|
||||
#message-input img {
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
#message-input .emoji {
|
||||
width: 2.2rem;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
/* If the div is empty then show the placeholder */
|
||||
#message-input:empty:before {
|
||||
content: attr(placeholderText);
|
||||
pointer-events: none;
|
||||
display: block; /* For Firefox */
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* When chat is enabled (contenteditable=true) */
|
||||
#message-input[contenteditable='true']:before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#message-input::selection {
|
||||
background: #d7ddf4;
|
||||
}
|
||||
|
||||
/* When chat is disabled (contenteditable=false) chat input div should appear disabled. */
|
||||
#message-input:disabled,
|
||||
#message-input[contenteditable='false'] {
|
||||
opacity: 0.6;
|
||||
}
|
||||
/******************************/
|
||||
/******************************/
|
||||
|
||||
/******************************/
|
||||
/* EMOJI PICKER OVERRIDES */
|
||||
.emoji-picker__wrapper {
|
||||
margin-top: -30px !important;
|
||||
}
|
||||
.emoji-picker.owncast {
|
||||
--secondary-text-color: rgba(255, 255, 255, 0.5);
|
||||
--category-button-color: rgba(255, 255, 255, 0.5);
|
||||
--hover-color: rgba(255, 255, 255, 0.25);
|
||||
|
||||
background: rgba(26, 32, 44, 1); /* tailwind bg-gray-900 */
|
||||
color: rgba(226, 232, 240, 1); /* tailwind text-gray-300 */
|
||||
border-color: black;
|
||||
font-family: inherit;
|
||||
}
|
||||
.emoji-picker h2 {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.emoji-picker__emoji {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.emoji-picker__emojis::-webkit-scrollbar {
|
||||
background: transparent;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.emoji-picker__emojis::-webkit-scrollbar-track {
|
||||
border-radius: 8px;
|
||||
background-color: black;
|
||||
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.emoji-picker__emojis::-webkit-scrollbar-thumb {
|
||||
background-color: var(--category-button-color);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.emoji-picker__emojis {
|
||||
scrollbar-color: var(--category-button-color) black;
|
||||
}
|
||||
|
||||
.emoji-picker__search {
|
||||
color: rgba(26, 32, 44, 1);
|
||||
}
|
||||
|
||||
/* MESSAGE TEXT HTML */
|
||||
/* MESSAGE TEXT HTML */
|
||||
/* MESSAGE TEXT HTML */
|
||||
.message-text {
|
||||
word-break: break-word;
|
||||
}
|
||||
.message-text a {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
text-decoration-color: rgba(255, 255, 255, 0.25);
|
||||
color: #fff;
|
||||
transition: color .2s;
|
||||
}
|
||||
|
||||
.message-text img {
|
||||
display: inline;
|
||||
padding-left: 0 0.25rem;
|
||||
}
|
||||
|
||||
.message-text .emoji {
|
||||
position: relative;
|
||||
top: -5px;
|
||||
width: 3rem;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.message-text code {
|
||||
font-family: monospace;
|
||||
background-color: darkslategrey;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.message-text .chat-embed {
|
||||
width: 100%;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.message-text .instagram-embed {
|
||||
height: 24rem;
|
||||
}
|
||||
|
||||
.message-text .embedded-image {
|
||||
width: 100%;
|
||||
display: block;
|
||||
/* height: 15rem; */
|
||||
}
|
||||
.message-text ul li {
|
||||
list-style: disc;
|
||||
list-style-position: outside;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
/* MESSAGE TEXT CONTENT */
|
||||
/* MESSAGE TEXT CONTENT */
|
||||
/* MESSAGE TEXT CONTENT */
|
||||
/* MESSAGE TEXT CONTENT */
|
||||
|
||||
|
||||
/* MODERATOR STYLES */
|
||||
/* MODERATOR STYLES */
|
||||
/* MODERATOR STYLES */
|
||||
|
||||
.moderator-flag {
|
||||
display: inline-block;
|
||||
margin-right: .5rem;
|
||||
margin-top: -1px;
|
||||
vertical-align: middle;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.user-icon-flag {
|
||||
display: inline-block;
|
||||
margin-right: .5rem;
|
||||
vertical-align: middle;
|
||||
height: 0.8rem;
|
||||
}
|
||||
|
||||
.moderator-actions-group {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.message.moderatable .moderator-actions-group {
|
||||
opacity: 0;
|
||||
}
|
||||
.message.moderatable:hover .moderator-actions-group {
|
||||
opacity: 1;
|
||||
}
|
||||
.message.moderator-menu-open .moderator-actions-group {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.message.moderatable:focus-within .moderator-actions-group {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.moderator-menu-button {
|
||||
padding: .15rem;
|
||||
height: 1.75rem;
|
||||
width: 1.75rem;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
margin-left: .05rem;
|
||||
font-size: 1rem;
|
||||
border: 1px solid transparent;
|
||||
opacity: .5;
|
||||
}
|
||||
.moderator-menu-button:hover {
|
||||
background-color: rgba(0,0,0,.5);
|
||||
opacity: 1;
|
||||
}
|
||||
.moderator-menu-button:focus {
|
||||
border-color: white;
|
||||
opacity: 1;
|
||||
}
|
||||
.moderator-action {
|
||||
padding: .15rem;
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
margin-left: .05rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.message button:focus,
|
||||
.message button:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.message.moderatable:last-of-type .moderator-actions-menu,
|
||||
.moderator-actions-menu {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: .5rem;
|
||||
z-index: 999;
|
||||
}
|
||||
.message.moderatable:first-of-type .moderator-actions-menu,
|
||||
.message.moderatable:nth-of-type(2) .moderator-actions-menu,
|
||||
.message.moderatable:first-of-type .moderator-more-info-container,
|
||||
.message.moderatable:nth-of-type(2) .moderator-more-info-container {
|
||||
top: 0;
|
||||
bottom: unset;
|
||||
}
|
||||
.message-author {
|
||||
display: flex;
|
||||
height: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.message-author .flair {
|
||||
height: 70%;
|
||||
margin-right: 5px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.moderator-menu-item {
|
||||
font-size: .875rem;
|
||||
position: relative;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.moderator-menu-item:focus {
|
||||
border: 1px solid white;
|
||||
}
|
||||
.moderator-menu-item .moderator-menu-icon {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
font-size: 1.5em;
|
||||
vertical-align: text-bottom;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.moderator-menu-item .menu-icon-hover {
|
||||
display: none;
|
||||
z-index: 2;
|
||||
}
|
||||
.moderator-menu-item:hover .menu-icon-base {
|
||||
display: none;
|
||||
}
|
||||
.moderator-menu-item:hover .menu-icon-hover {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.moderator-more-info-container {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 5;
|
||||
width: calc(var(--right-col-width) - 2rem);
|
||||
}
|
||||
|
||||
.moderator-more-info-message {
|
||||
overflow-y: auto;
|
||||
max-height: 6em;
|
||||
padding: .75rem;
|
||||
}
|
||||
.moderator-more-info-message .text-sm img {
|
||||
display: inline-block;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 729px) {
|
||||
.moderator-more-info-container {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* MODERATOR STYLES */
|
||||
/* MODERATOR STYLES */
|
||||
/* MODERATOR STYLES */
|
||||
|
||||
.action-icon {
|
||||
bottom: -5px;
|
||||
right: -2px;
|
||||
animation: spin 0.4s ease 1.0;
|
||||
animation-fill-mode: forwards;
|
||||
background-color: white;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.federated-action {
|
||||
min-height: 76px;
|
||||
}
|
||||
50
webroot/styles/standalone-chat-readonly.css
Normal file
50
webroot/styles/standalone-chat-readonly.css
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
/*
|
||||
Example/Suggested custom CSS settings to set in OBS.
|
||||
///
|
||||
html { margin: 0px; padding: 20px; background-color: rgba(0,0,0,0.5); font-size: 24px; }
|
||||
///
|
||||
This one will add some space around box, give it a semi-transparent dark background; and increase the overall to a base unit of 24px.
|
||||
|
||||
You may change any of these settings to fit your presentation layout. Note that the overall message text color is white.
|
||||
*/
|
||||
|
||||
/*
|
||||
The styles in this file mostly ovveride those coming from chat.css
|
||||
*/
|
||||
|
||||
/* modify this px number if you want things to be relatively bigger or smaller */
|
||||
#messages-only {}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#messages-only #messages-container {
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
}
|
||||
#messages-only .message-content {
|
||||
text-shadow: 1px 1px 0px rgba(0,0,0,0.25);
|
||||
}
|
||||
#messages-only .message {
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
#messages-only .message-text {
|
||||
font-weight: 400;
|
||||
color: white;
|
||||
}
|
||||
#messages-only .message-text a {
|
||||
color: #fc0;
|
||||
}
|
||||
#messages-only .message-author {
|
||||
color: rgba(20,0,40,1);
|
||||
}
|
||||
|
||||
#messages-only .message-text .chat-embed,
|
||||
#messages-only .message-text .instagram-embed,
|
||||
#messages-only .message-text .embedded-image {
|
||||
max-width: 350px;
|
||||
}
|
||||
16
webroot/styles/standalone-chat-readwrite.css
Normal file
16
webroot/styles/standalone-chat-readwrite.css
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
:root {
|
||||
--header-height: 2em;
|
||||
}
|
||||
|
||||
header{
|
||||
height: var(--header-height);
|
||||
}
|
||||
|
||||
#messages-container {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#chat-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
152
webroot/styles/user-content.css
Normal file
152
webroot/styles/user-content.css
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
.user-content .user-image {
|
||||
min-width: var(--user-image-width);
|
||||
width: var(--user-image-width);
|
||||
height: var(--user-image-width);
|
||||
max-height: var(--user-image-width);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/* .user-social-item {
|
||||
margin-right: .85rem;
|
||||
} */
|
||||
|
||||
.user-social-item .platform-icon {
|
||||
--icon-width: 28px;
|
||||
height: var(--icon-width);
|
||||
width: var(--icon-width);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
EXTRA CUSTOM CONTENT STYLES
|
||||
Assumes markup converted from markdown input.
|
||||
*/
|
||||
|
||||
|
||||
#extra-user-content ul,
|
||||
#extra-user-content ol {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#extra-user-content ol {
|
||||
list-style: decimal;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
#extra-user-content ul {
|
||||
list-style: unset;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
#extra-user-content h1,
|
||||
#extra-user-content h2,
|
||||
#extra-user-content h3,
|
||||
#extra-user-content h4,
|
||||
#extra-user-content h5,
|
||||
#extra-user-content h6 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin: 1.5rem 0 .5rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
|
||||
#extra-user-content h1 {
|
||||
font-size: 2.1rem;
|
||||
}
|
||||
|
||||
#extra-user-content h2 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
#extra-user-content h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
#extra-user-content h4 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
#extra-user-content h5 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
#extra-user-content h6 {
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
#extra-user-content p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#extra-user-content a {
|
||||
color: #0099ff;
|
||||
}
|
||||
|
||||
#extra-user-content li {
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
#extra-user-content li ul,
|
||||
#extra-user-content li ul {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#extra-user-content blockquote {
|
||||
border-left: .25rem solid #bbc;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
#extra-user-content blockquote p {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
#extra-user-content pre,
|
||||
#extra-user-content code {
|
||||
font-family: monospace;
|
||||
font-size: .85rem;
|
||||
background-color: #eee;
|
||||
color: #900;
|
||||
}
|
||||
#extra-user-content pre {
|
||||
margin: 1rem 0;
|
||||
padding: 1rem;
|
||||
max-width: 80%;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
#extra-user-content aside {
|
||||
display: block;
|
||||
float: right;
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
#extra-user-content hr {
|
||||
width: 100%;
|
||||
border-top: 1px solid #666;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#extra-user-content table {
|
||||
border-collapse: collapse;
|
||||
margin: 1em 1rem;
|
||||
border: 1px solid #CCC;
|
||||
}
|
||||
|
||||
#extra-user-content table thead {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
#extra-user-content table thead td {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#extra-user-content table td {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid #CCC;
|
||||
}
|
||||
26
webroot/styles/video-only.css
Normal file
26
webroot/styles/video-only.css
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
/*
|
||||
The styles in this file mostly ovveride those coming from chat.css
|
||||
*/
|
||||
|
||||
/* modify this px number if you want things to be relatively bigger or smaller */
|
||||
#video-only {
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
#video-only #video-container {
|
||||
background-size: 30%;
|
||||
width: 100%;
|
||||
height: calc((9 / 16) * 100vw);
|
||||
position: relative;
|
||||
}
|
||||
#video-only #video-container #video {
|
||||
transition: opacity .5s;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
#video-only .online #video-container #video {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
66
webroot/styles/video.css
Normal file
66
webroot/styles/video.css
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
video.video-js {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
min-height: 100%
|
||||
}
|
||||
|
||||
/* show big play button when paused */
|
||||
.vjs-has-started.vjs-paused .vjs-big-play-button{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.vjs-airplay .vjs-icon-placeholder::before {
|
||||
content: url("../img/airplay.png");
|
||||
}
|
||||
|
||||
.vjs-quality-selector .vjs-icon-placeholder {
|
||||
font-family: VideoJS;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
.vjs-quality-selector .vjs-icon-placeholder::before {
|
||||
content: "\f110";
|
||||
}
|
||||
|
||||
.vjs-big-play-button {
|
||||
z-index: 48;
|
||||
}
|
||||
|
||||
.vjs-loading-spinner {
|
||||
z-index: 49;
|
||||
}
|
||||
|
||||
/*
|
||||
videojs hack!!
|
||||
for some reason, there are cases where a <video class="vjs-tech"> element gets embedded twice.
|
||||
we only want the first one. the second obstructs the layout.
|
||||
Some context here:
|
||||
https://github.com/owncast/owncast/issues/165
|
||||
*/
|
||||
video.vjs-tech:not([src]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
#oc-custom-poster {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Animation time for crossfading between poster thumbs */
|
||||
.custom-thumbnail-image {
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
transition: opacity 2s;
|
||||
}
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue