owncast/webroot/styles/chat.css
Aral Balkan 2409cab5b6
Closes #910: make transparency of message bubbles overridable via CSS (#911)
* Closes #910: make transparency of message bubbles overridable via CSS

* Fix CSS variable declaration
2021-04-11 14:08:06 -07:00

191 lines
3.6 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: 2rem;
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 {
color: #ffffff;
text-shadow: 0px 1px #0a0a0a75;
font-size: 0.95rem;
}
.message-text a:hover {
text-decoration: underline;
}
.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 .youtube-embed {
width: 90%;
height: auto;
}
/* MESSAGE TEXT CONTENT */
/* MESSAGE TEXT CONTENT */
/* MESSAGE TEXT CONTENT */
/* MESSAGE TEXT CONTENT */