Minor layout changes

multichat-overlay/index.html

@@ -51,13 +51,17 @@
 
 	<template id="cardTemplate">
 		<div id="card">
-			<label id="header">
+			<div class="message-contents add-this-class-to-the-thing-to-make-all-the-text-centered-vertically-because-that-looks-much-better">
-				<span id="avatar"></span>
+				<div id="avatar"></div>
-				<span id="icon"></span>
+				<div>
-				<span id="title"></span>
+					<label id="header">
-				<br id="line-space">
+						<span id="icon"></span>
-			</label>
+						<span id="title"></span>
-			<span id="content"></span>
+						<br id="line-space">
+					</label>
+					<span id="content"></span>
+				</div>
+			</div>			
 		</div>
 	</template>
 

multichat-overlay/script.js

@@ -25,7 +25,7 @@ const font = urlParams.get("font") || "";
 const fontSize = urlParams.get("fontSize") || "30";
 const lineSpacing = urlParams.get("lineSpacing") || "1.7";
 const background = urlParams.get("background") || "#000000";
-const opacity = urlParams.get("opacity") || "0.85";
+const opacity = urlParams.get("opacity") || "0";
 
 const hideAfter = GetIntParam("hideAfter", 0);
 const excludeCommands = GetBooleanParam("excludeCommands", true);
@@ -422,6 +422,8 @@ async function TwitchChatMessage(data) {
 	const pronounsDiv = instance.querySelector("#pronouns");
 	const usernameDiv = instance.querySelector("#username");
 	const messageDiv = instance.querySelector("#message");
+	
+	// messageContainerDiv.classList.add("bubble");
 
 	// Set First Time Chatter
 	const firstMessage = data.message.firstMessage;
@@ -559,10 +561,6 @@ async function TwitchChatMessage(data) {
 		avatar.classList.add("avatar");
 		avatarDiv.appendChild(avatar);
 	}
-	else
-	{
-		avatarDiv.style.display = 'none';
-	}
 
 	// 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)
@@ -1089,6 +1087,7 @@ function YouTubeMessage(data) {
 	const instance = template.content.cloneNode(true);
 
 	// Get divs
+	const messageContainerDiv = instance.querySelector("#messageContainer");
 	const userInfoDiv = instance.querySelector("#userInfo");
 	const avatarDiv = instance.querySelector("#avatar");
 	const timestampDiv = instance.querySelector("#timestamp");
@@ -1096,6 +1095,8 @@ function YouTubeMessage(data) {
 	const badgeListDiv = instance.querySelector("#badgeList");
 	const usernameDiv = instance.querySelector("#username");
 	const messageDiv = instance.querySelector("#message");
+	
+	// messageContainerDiv.classList.add("bubble");
 
 	// Set timestamp
 	if (showTimestamps) {
@@ -1181,10 +1182,6 @@ function YouTubeMessage(data) {
 		avatar.classList.add("avatar");
 		avatarDiv.appendChild(avatar);
 	}
-	else
-	{
-		avatarDiv.style.display = 'none';
-	}
 
 
 	// Hide the header if the same username sends a message twice in a row
@@ -1968,6 +1965,8 @@ async function KickChatMessage(data) {
 	const pronounsDiv = instance.querySelector("#pronouns");
 	const usernameDiv = instance.querySelector("#username");
 	const messageDiv = instance.querySelector("#message");
+	
+	// messageContainerDiv.classList.add("bubble");
 
 	// Set First Time Chatter
 	const firstMessage = data.firstMessage;
@@ -2098,10 +2097,6 @@ async function KickChatMessage(data) {
 		avatar.classList.add("avatar");
 		avatarDiv.appendChild(avatar);
 	}
-	else
-	{
-		avatarDiv.style.display = 'none';
-	}
 
 	// 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)
@@ -2297,8 +2292,8 @@ async function KickRewardRedeemed(data) {
 	// Set the card background colors
 	cardDiv.classList.add('kick');
 
+	// Render avatars
 	if (showAvatar) {
-		// Render avatars
 		const username = data.user;
 		const avatarURL = await GetAvatar(username, 'kick');
 		const avatar = new Image();
@@ -2339,8 +2334,8 @@ async function KickIncomingRaid(data) {
 	// Set the card background colors
 	cardDiv.classList.add('kick');
 
+	// Render avatars
 	if (showAvatar) {
-		// Render avatars
 		const username = data.user;
 		const avatarURL = await GetAvatar(username, 'kick');
 		const avatar = new Image();
@@ -2509,10 +2504,6 @@ function TikTokChat(data) {
 		avatar.classList.add("avatar");
 		avatarDiv.appendChild(avatar);
 	}
-	else
-	{
-		avatarDiv.style.display = 'none';
-	}
 
 	// 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/settings/settings.json

@@ -97,7 +97,7 @@
 			"label": "Background Opacity",
 			"description": "",
 			"type": "number",
-			"defaultValue": "0.90",
+			"defaultValue": "0.00",
 			"min": 0,
 			"max": 1,
 			"step": ".01",

multichat-overlay/style.css

@@ -93,8 +93,15 @@ li {
 	font-size: 0.7em;
 }
 
+.bubble {
+	background: #000000bf !important;
+	padding: 0.5em 1em;
+	border-radius: var(--border-radius);
+}
+
 .highlightMessage {
-	background: #adadad46;
+	/* background: #adadad46 !important; */
+	background: #414141bf !important;
 	padding: 0.5em 1em;
 	border-radius: var(--border-radius);
 }
@@ -102,13 +109,21 @@ li {
 .message-contents {
 	display: flex;
 	flex-direction: row;
-	gap: 1em;
+	gap: 0.5em;
+}
+
+.add-this-class-to-the-thing-to-make-all-the-text-centered-vertically-because-that-looks-much-better {
+	align-items: center;
 }
 
 #avatar {
 	width: 2em;
 }
 
+#avatar:empty {
+	display: none;
+}
+
 .avatar {
 	height: 2em;
 	margin: 1px;