You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
184 lines
3.2 KiB
184 lines
3.2 KiB
/* 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); |
|
--hover-color: rgba(255,255,255,.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; |
|
} |
|
|
|
/* 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 { |
|
position: relative; |
|
top: -5px; |
|
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 */ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|