
`;
- // Render sticker
- stickerInstance.querySelector("#stickerImg").src = FindFirstImageUrl(data);
- stickerInstance.querySelector("#stickerLabel").innerText = `${data.user.name} sent a Super Sticker (${data.amount})`;
+ avatarDiv.innerHTML = stickerImage;
+ titleDiv.innerHTML = `${user} sent a Super Sticker (${amount})`;
- contentDiv.appendChild(stickerInstance);
-
- AddMessageItem(instance, data.eventId);
+ AddMessageItem(instance);
}
function YouTubeNewSponsor(data) {
@@ -2104,7 +2104,7 @@ async function KickChatMessage(data) {
const replyUser = data.metadata.original_sender.username;
const replyMsg = data.metadata.original_message.content;
- replyDiv.style.display = 'block';
+ replyDiv.style.display = 'inline-block';
replyUserDiv.innerText = replyUser;
replyMsgDiv.innerHTML = replaceEmotes(replyMsg);;
}
diff --git a/multichat-overlay/style.css b/multichat-overlay/style.css
index 9f36798..143748c 100644
--- a/multichat-overlay/style.css
+++ b/multichat-overlay/style.css
@@ -126,10 +126,14 @@ li {
}
.avatar {
- height: 2em;
- margin: 1px;
- transform: translate(0px, 0.25em);
- border-radius: 50%;
+ width: 2em; /* Set width equal to height */
+ height: 2em;
+ margin: 1px;
+ transform: translate(0px, 0.25em);
+ border-radius: 50%;
+ object-fit: cover; /* Crop to fill the circle */
+ overflow: hidden; /* Ensure no overflow outside the circle */
+ display: inline-block; /* Just in case */
}
.timestamp,
@@ -196,8 +200,9 @@ li {
#reply {
display: none;
overflow: hidden;
- white-space: nowrap;
+ white-space: normal; /* Allow line wrapping */
text-overflow: ellipsis;
+ word-break: break-word; /* Break long words if necessary */
font-size: 0.7em;
opacity: 0.5;
}
@@ -213,17 +218,10 @@ li {
border-radius: var(--border-radius);
}
-#youtubeSuperSticker {
- display: block;
-}
-
-#sticker-img {
- height: 5em;
-}
-
-#stickerLabel {
- text-align: center;
- font-weight: 700;
+.youtube-super-sticker {
+ height: 2em;
+ margin: 1px;
+ transform: translate(0px, 0.25em);
}
.tiktok-gift {