feat: styles for emotes and badges

2 files changed, 16 insertions, 1 deletions

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