1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-12-23 09:40:49 +03:00
owncast/webroot/styles/chat.css

357 lines
6.7 KiB
CSS

/* 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;
position: absolute; /* Fixes firefox positioning caret on the right */
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: 15px;
margin-right: 5px;
}
.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;
}