From 8df35446c1b4c549d46c11dcbeaa0d108820b23a Mon Sep 17 00:00:00 2001
From: ilotterytea <iltsu@alright.party>
Date: Sun, 26 Oct 2025 01:00:01 +0500
Subject: feat: styles for emotes and badges

---
 scripts/chat.js |  3 ++-
 style.css       | 14 ++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/scripts/chat.js b/scripts/chat.js
index 6f48a6b..a5ecafc 100644
--- a/scripts/chat.js
+++ b/scripts/chat.js
@@ -57,6 +57,7 @@ function addMessage(message) {
                 const badgeImg = document.createElement("img");
                 badgeImg.src = badges[b];
                 badgeImg.loading = 'lazy';
+                badgeImg.classList.add("badge");
                 elem.append(badgeImg);
             }
         }
@@ -75,7 +76,7 @@ function addMessage(message) {
     let msgWords = message.params[1].split(" ");
     for (let i = 0; i < msgWords.length; i++) {
         if (msgWords[i] in emotes) {
-            msgWords[i] = `<img src="${emotes[msgWords[i]]}" loading="lazy" alt="${msgWords[i]}" />`;
+            msgWords[i] = `<img src="${emotes[msgWords[i]]}" loading="lazy" alt="${msgWords[i]}" class="emote" />`;
         }
     }
     
diff --git a/style.css b/style.css
index 32f689f..44e5182 100644
--- a/style.css
+++ b/style.css
@@ -33,6 +33,20 @@
     background: var(--message-background-alt);
 }
 
+.message .badge,
+.message .emote {
+    height: 18px;
+}
+
+.message img {
+    vertical-align: middle;
+    margin: 0 2px;
+}
+
+.message img:first-child {
+    margin-left: 0;
+}
+
 .message:last-child {
     border-bottom: none;
 }
\ No newline at end of file
-- 
cgit v1.2.3