Add support for custom background colors

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>

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()) || [];
 

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",

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);
 	}
 }