Added custom styling for moderators and subscribers

horizontal-chat/script.js

@@ -591,6 +591,17 @@ async function TwitchChatMessage(data) {
 		avatarDiv.appendChild(avatar);
 	}
 
+	// Custom styling for subs
+	if (data.message.subscriber) {
+		usernameDiv.classList.add('sub-glow')
+	}
+
+	// Custom styling for mods
+	// 3 = Moderator
+	if (role == 3) {
+		usernameDiv.classList.add('moderator-glow')
+	}
+
 	// Hide the header if the same username sends a message twice in a row
 	const messageList = document.getElementById("messageList");
 	if (groupConsecutiveMessages && messageList.children.length > 0) {
@@ -939,6 +950,17 @@ function YouTubeMessage(data) {
 		avatarDiv.appendChild(avatar);
 	}
 
+	// Custom styling for subs
+	if (data.user.isSponsor) {
+		usernameDiv.classList.add('sub-glow')
+	}
+
+	// Custom styling for mods
+	// 3 = Moderator
+	if (data.user.isModerator) {
+		usernameDiv.classList.add('moderator-glow')
+	}
+
 	// Hide the header if the same username sends a message twice in a row
 	const messageList = document.getElementById("messageList");
 	if (groupConsecutiveMessages && messageList.children.length > 0) {

horizontal-chat/style.css

@@ -114,7 +114,7 @@ html {
 
 li {
 	list-style: none;
-	overflow: hidden;
+	/* overflow: hidden; */
 	max-width: 0px;
 	transition: all 1s ease-in-out;
 }

multichat-overlay/script.js

@@ -690,6 +690,17 @@ async function TwitchChatMessage(data) {
 		avatarDiv.appendChild(avatar);
 	}
 
+	// Custom styling for subs
+	if (data.message.subscriber) {
+		usernameDiv.classList.add('sub-glow')
+	}
+
+	// Custom styling for mods
+	// 3 = Moderator
+	if (role == 3) {
+		usernameDiv.classList.add('moderator-glow')
+	}
+
 	// Hide the header if the same username sends a message twice in a row
 	// EXCEPT when the scroll direction is set to reverse (scrollDirection == 2)
 	const messageList = document.getElementById("messageList");
@@ -1334,6 +1345,16 @@ async function YouTubeMessage(data) {
 		avatarDiv.appendChild(avatar);
 	}
 
+	// Custom styling for subs
+	if (data.user.isSponsor) {
+		usernameDiv.classList.add('sub-glow')
+	}
+
+	// Custom styling for mods
+	// 3 = Moderator
+	if (data.user.isModerator) {
+		usernameDiv.classList.add('moderator-glow')
+	}
 
 	// Hide the header if the same username sends a message twice in a row
 	// EXCEPT when the scroll direction is set to reverse (scrollDirection == 2)

multichat-overlay/style.css

@@ -60,7 +60,7 @@ html {
 
 li {
 	list-style: none;
-	overflow: hidden;
+	/* overflow: hidden; */
 	max-height: 0;
 	margin: 10px 0px 0px 0px;
 	transition: all 1s ease-in-out;