From 93caa5b36d03748294f75a08bde401337839c0f6 Mon Sep 17 00:00:00 2001
From: nuttylmao <nuttylmao@gmail.com>
Date: Thu, 27 Mar 2025 04:27:47 +1100
Subject: [PATCH] Add support for custom background colors

---
 horizontal-chat/index.html             |  1 +
 horizontal-chat/script.js              | 10 ++++++++++
 horizontal-chat/settings/settings.json | 19 +++++++++++++++++++
 horizontal-chat/style.css              | 17 ++++++++++++++---
 4 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/horizontal-chat/index.html b/horizontal-chat/index.html
index 3dcfc33..12121ad 100644
--- a/horizontal-chat/index.html
+++ b/horizontal-chat/index.html
@@ -13,6 +13,7 @@
 		<ul id="messageList">
 		</ul>
 		<div id="alertBox"></div>
+		<div id="background"></div>
 		<div id="IPutThisHereSoICanCalculateHowBigEachMessageIsSupposedToBeBeforeIAddItToTheMessageList">			
 		</div>
 	</div>
diff --git a/horizontal-chat/script.js b/horizontal-chat/script.js
index 0e7f879..fb229f3 100644
--- a/horizontal-chat/script.js
+++ b/horizontal-chat/script.js
@@ -26,6 +26,8 @@ const showUsername = GetBooleanParam("showUsername", true);
 const showMessage = GetBooleanParam("showMessage", true);
 const font = urlParams.get("font") || "";
 const fontSize = urlParams.get("fontSize") || "18";
+const background = urlParams.get("background") || "#000000";
+const opacity = urlParams.get("opacity") || "0.5";
 
 const hideAfter = GetIntParam("hideAfter") || 0;
 const excludeCommands = GetBooleanParam("excludeCommands", true);
@@ -49,6 +51,14 @@ const showStreamElementsTips = GetBooleanParam("showStreamElementsTips", true);
 document.body.style.fontFamily = font;
 document.body.style.fontSize = `${fontSize}px`;
 
+// Set the background color
+const opacity255 = Math.round(parseFloat(opacity) * 255);
+let hexOpacity = opacity255.toString(16);
+if (hexOpacity.length < 2) {
+	hexOpacity = "0" + hexOpacity;
+}
+document.documentElement.style.setProperty('--background', `${background}${hexOpacity}`);
+
 // Get a list of chatters to ignore
 const ignoreUserList = ignoreChatters.split(',').map(item => item.trim().toLowerCase()) || [];
 
diff --git a/horizontal-chat/settings/settings.json b/horizontal-chat/settings/settings.json
index 6ba5d62..776d21c 100644
--- a/horizontal-chat/settings/settings.json
+++ b/horizontal-chat/settings/settings.json
@@ -74,6 +74,25 @@
 			"defaultValue": 18,
 			"group": "Appearance"
 		},
+		{
+			"id": "background",
+			"label": "Background",
+			"description": "",
+			"type": "color",
+			"defaultValue": "#000000",
+			"group": "Appearance"
+		},
+		{
+			"id": "opacity",
+			"label": "Background Opacity",
+			"description": "",
+			"type": "number",
+			"defaultValue": "0.85",
+			"min": 0,
+			"max": 1,
+			"step": ".01",
+			"group": "Appearance"
+		},
 		{
 			"id": "hideAfter",
 			"label": "Hide After",
diff --git a/horizontal-chat/style.css b/horizontal-chat/style.css
index 8129eb6..0daa751 100644
--- a/horizontal-chat/style.css
+++ b/horizontal-chat/style.css
@@ -62,12 +62,23 @@ html {
 	line-height: 1.7em;
 	width: 100%;
 	text-align: center;
-	bottom: calc(-1 * var(--margin) - 2em);
+}
+
+#background {
+	position: absolute;
+	bottom: 0;
+	right: 50%;
+	transform: translateX(50%);
+	width: 100%;
+	height: 1.7em;
+	background: var(--background);
+	bottom: calc(-1 * var(--margin));
+	z-index: -100;
 }
 
 @keyframes showAlertBox {
 	0% {
-		bottom: calc(-1 * var(--margin) - 2em);
+		bottom: calc(-1 * var(--margin) - 1.7em);
 	}
 	100% {
 		bottom: 0px;
@@ -79,7 +90,7 @@ html {
 		bottom: 0px;
 	}
 	100% {
-		bottom: calc(-1 * var(--margin) - 2em);
+		bottom: calc(-1 * var(--margin) - 1.7em);
 	}
 }