mirror of
https://github.com/owncast/owncast.git
synced 2024-11-25 14:20:54 +03:00
661eedc03a
* only consider short-heights when not smallscreen; hide status bar when small screen, but leave shadow; * fix max char counting bugs with paste, yet be still be able to use modifier keys even when max chars reached * rmeove 'chat' button; move into textarea * use image for emoji picker for sizing consitency * cleanup unused things * - totally unecessary emoji picker style improvements - totally necessary doctype added to emoji picker so it shows up more stable-y on mobile views * more stable layout positioning for chat panel without hacky margins, so that the bottom of the message list will always be on top of the form input, and not behind it at any point. * hide header on touch screens when screns are small and screen height is short (possibly when keyboard is up), so that there's more visibliity to see messages. this only works on chrome, not ios safari right now, due to the position: fixed of things. * move char counting to keyup instead * address message text horiz overflow (#157) * dont jumpToBottom if user has scrolled about 200px from the bottom (#101) * scroll to bottom on resize too * cleanup * revert test bool * typo * re-readjust short-wide case again * - add focus to input field after emoji is selected, put cursor at end - instead of smooth scrolling to bottom, just jump there.
193 lines
3.2 KiB
CSS
193 lines
3.2 KiB
CSS
/* some base styles for chat and messaging components */
|
|
|
|
#chat-container {
|
|
position: fixed;
|
|
z-index: 9;
|
|
top: var(--header-height);
|
|
right: 0;
|
|
width: var(--right-col-width);
|
|
|
|
height: calc(100vh - 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: .25rem;
|
|
}
|
|
|
|
#message-input .emoji {
|
|
width: 2.2rem;
|
|
padding: .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.0;
|
|
}
|
|
|
|
#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.owncast {
|
|
--secondary-text-color: rgba(255,255,255,.5);
|
|
--category-button-color: rgba(255,255,255,.5);
|
|
|
|
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: rgba(0,0,0,.2);
|
|
box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.emoji-picker__emojis::-webkit-scrollbar-thumb {
|
|
background-color: rgba(0,0,0,.45);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
|
|
/******************************/
|
|
|
|
.message-avatar {
|
|
height: 3.0em;
|
|
width: 3.0em;
|
|
}
|
|
.message-avatar img {
|
|
max-width: unset;
|
|
height: 3.0em;
|
|
width: 3.0em;
|
|
padding: 5px;
|
|
}
|
|
|
|
|
|
|
|
/* MESSAGE TEXT HTML */
|
|
/* MESSAGE TEXT HTML */
|
|
/* MESSAGE TEXT HTML */
|
|
.message-text {
|
|
word-break: break-word;
|
|
}
|
|
.message-text a {
|
|
color: #7F9CF5; /* indigo-400 */
|
|
}
|
|
.message-text a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.message-text img {
|
|
display: inline;
|
|
padding-left: 0 .25rem;
|
|
}
|
|
|
|
|
|
|
|
.message-text .emoji {
|
|
width: 3rem;
|
|
padding: .25rem
|
|
}
|
|
|
|
.message-text code {
|
|
font-family: monospace;
|
|
background-color:darkslategrey;
|
|
padding: .25rem;
|
|
}
|
|
|
|
.message-text .chat-embed {
|
|
width: 100%;
|
|
border-radius: .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 */
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|