jyapayne/streamer-widgets
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make the twitch chat widget more configurable

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2026-01-07 13:44:25 -07:00
commit 1218e601ae
5 changed files with 509 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

52
app/assets/web/widgets/livechat/style.css
View file

@ -43,6 +43,40 @@ body.theme-dark .chat-message {
background: rgba(0, 0, 0, 0.6);
}
/* Font size options */
body.font-small {
--chat-font-size: 12px;
--chat-username-size: 12px;
--chat-badge-size: 14px;
--chat-emote-size: 20px;
}
body.font-medium {
--chat-font-size: 14px;
--chat-username-size: 14px;
--chat-badge-size: 16px;
--chat-emote-size: 24px;
}
body.font-large {
--chat-font-size: 18px;
--chat-username-size: 18px;
--chat-badge-size: 20px;
--chat-emote-size: 32px;
}
body.font-xlarge {
--chat-font-size: 24px;
--chat-username-size: 24px;
--chat-badge-size: 26px;
--chat-emote-size: 40px;
}
/* Hide timestamp option */
body.hide-time .timestamp {
display: none;
}
#chat-container {
width: 100vw;
height: 100vh;
@ -53,7 +87,7 @@ body.theme-dark .chat-message {
#chat-messages {
flex: 1;
overflow-y: auto;
overflow-y: hidden;
overflow-x: hidden;
display: flex;
flex-direction: column;
@ -168,8 +202,8 @@ body.direction-up .chat-message {
}
.badge {
width: 18px;
height: 18px;
width: var(--chat-badge-size, 18px);
height: var(--chat-badge-size, 18px);
display: inline-flex;
align-items: center;
justify-content: center;
@ -190,19 +224,19 @@ body.direction-up .chat-message {
.username {
font-weight: bold;
font-size: 14px;
font-size: var(--chat-username-size, 14px);
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}
.timestamp {
font-size: 11px;
font-size: calc(var(--chat-font-size, 14px) * 0.8);
color: #aaa;
opacity: 0.8;
}
/* Message text */
.message-text {
font-size: 14px;
font-size: var(--chat-font-size, 14px);
line-height: 1.4;
word-wrap: break-word;
overflow-wrap: break-word;
@ -213,8 +247,10 @@ body.direction-up .chat-message {
display: inline-block;
vertical-align: middle;
margin: 0 2px;
max-height: 28px;
max-width: 28px;
height: var(--chat-emote-size, 28px);
width: auto;
max-width: calc(var(--chat-emote-size, 28px) * 3);
object-fit: contain;
image-rendering: pixelated;
}