From b9e9b60142d1382deed85879b876c202806c96ba Mon Sep 17 00:00:00 2001
From: nuttylmao <nuttylmao@gmail.com>
Date: Tue, 6 May 2025 21:24:43 +1000
Subject: [PATCH] Slight animation adjustments + removed opacity from alert
 background

---
 horizontal-chat/index.html |  4 ++-
 horizontal-chat/script.js  | 11 +++---
 horizontal-chat/style.css  | 69 ++++++++++++--------------------------
 3 files changed, 30 insertions(+), 54 deletions(-)

diff --git a/horizontal-chat/index.html b/horizontal-chat/index.html
index ad31add..46b7d19 100644
--- a/horizontal-chat/index.html
+++ b/horizontal-chat/index.html
@@ -12,7 +12,9 @@
 	<div id="mainContainer" class="slide-fade">
 		<ul id="messageList">
 		</ul>
-		<div id="alertBox"></div>
+		<div id="alertBox">
+			<div id="alertBoxContent"></div>
+		</div>
 		<div id="background"></div>
 		<ul id="IPutThisHereSoICanCalculateHowBigEachMessageIsSupposedToBeBeforeIAddItToTheMessageList">			
 		</ul>
diff --git a/horizontal-chat/script.js b/horizontal-chat/script.js
index bcf9fed..48a2571 100644
--- a/horizontal-chat/script.js
+++ b/horizontal-chat/script.js
@@ -1203,23 +1203,24 @@ function ShowAlert(message, background = null, duration = animationDuration) {
 	const messageListDiv = document.querySelector("#messageList");
 	const backgroundDiv = document.querySelector("#background");
 	const alertBoxDiv = document.querySelector("#alertBox");
+	const alertBoxContent = document.querySelector("#alertBoxContent");
 
 	// Set the message text
-	alertBoxDiv.innerHTML = message;
+	alertBoxContent.innerHTML	 = message;
 
 	// Set the background
 	alertBoxDiv.classList.add(background);
 
 	// Start the animation
 	widgetLocked = true;
-	messageListDiv.style.animation = 'hideAlertBox 0.5s ease-in-out forwards';
-	backgroundDiv.style.animation = 'hideAlertBox 0.5s ease-in-out forwards';
+	// messageListDiv.style.animation = 'hideAlertBox 0.5s ease-in-out forwards';
+	// backgroundDiv.style.animation = 'hideAlertBox 0.5s ease-in-out forwards';
 	alertBoxDiv.style.animation = 'showAlertBox 0.5s ease-in-out forwards';
 
 	// To stop the animation (remove the animation property):
 	setTimeout(() => {
-		messageListDiv.style.animation = 'showAlertBox 0.5s ease-in-out forwards';
-		backgroundDiv.style.animation = 'showAlertBox 0.5s ease-in-out forwards';
+		// messageListDiv.style.animation = 'showAlertBox 0.5s ease-in-out forwards';
+		// backgroundDiv.style.animation = 'showAlertBox 0.5s ease-in-out forwards';
 		alertBoxDiv.style.animation = 'hideAlertBox 0.5s ease-in-out forwards';
 		setTimeout(() => {
 			alertBoxDiv.classList = '';
diff --git a/horizontal-chat/style.css b/horizontal-chat/style.css
index df354b7..d704677 100644
--- a/horizontal-chat/style.css
+++ b/horizontal-chat/style.css
@@ -62,11 +62,18 @@ html {
 	transform: translateX(50%);
 	overflow: hidden;
 	white-space: nowrap;
+	width: 100%;
+	height: 1.7em;
+	display: flex;
+	align-items: flex-end;
+	justify-content: center;
+}
 
+#alertBoxContent {
 	font-weight: 700;
 	line-height: 1.7em;
-	width: 100%;
 	text-align: center;
+	/* background-color: red; */
 }
 
 #background {
@@ -222,51 +229,51 @@ li {
 /*****************/
 
 .announcementBlue {
-	background: linear-gradient(#03d3d7BF, #8d49feBF) !important;
+	background: linear-gradient(#03d3d7, #8d49fe) !important;
 }
 
 .announcementGreen {
-	background: linear-gradient(#01da86BF, #55bee4BF) !important;
+	background: linear-gradient(#01da86, #55bee4) !important;
 }
 
 .announcementOrange {
-	background: linear-gradient(#feb419BF, #e1df00BF) !important;
+	background: linear-gradient(#feb419, #e1df00) !important;
 }
 
 .announcementPurple {
-	background: linear-gradient(#9548ffBF, #fc74e6BF) !important;
+	background: linear-gradient(#9548ff, #fc74e6) !important;
 }
 
 .twitch {
-	background: linear-gradient(#6d5ca1bf, #9146ffBF) !important;
+	background: linear-gradient(#6d5ca1, #9146ff) !important;
 }
 
 .youtube {
-	background: linear-gradient(#FF6C60BF, #FF0707BF) !important;
+	background: linear-gradient(#FF6C60, #FF0707) !important;
 }
 
 .streamlabs {
-	background: linear-gradient(#73dabbbf, #397765bf) !important;
+	background: linear-gradient(#73dabb, #397765) !important;
 }
 
 .streamelements {
-	background: linear-gradient(#263b8abf, #0a112abf) !important;
+	background: linear-gradient(#263b8a, #0a112a) !important;
 }
 
 .patreon {
-	background: linear-gradient(#c76633bf, #fd5e0abf) !important;
+	background: linear-gradient(#c76633, #fd5e0a) !important;
 }
 
 .kofi {
-	background: linear-gradient(#54c7eebf, #08c2ffbf) !important;
+	background: linear-gradient(#54c7ee, #08c2ff) !important;
 }
 
 .tipeeeStream {
-	background: linear-gradient(#120e23bf, #5d192abf) !important;
+	background: linear-gradient(#120e23, #5d192a) !important;
 }
 
 .fourthwall {
-	background: linear-gradient(#466edbbf, #1c56f5bf) !important;
+	background: linear-gradient(#466edb, #1c56f5) !important;
 }
 
 .blank {
@@ -309,38 +316,4 @@ li {
 	100% {
 		background-color: #D12025;
 	}
-}
-
-/*
-#message {
-	display: none;
-}
-
-#username {
-	display: none;
-}
-
-#colon-separator {
-	display: none;
-}
-
-#avatar {
-	display: none;
-}
-
-#platform {
-	display: none;
-}
-
-#badgeList {
-	display: none;
-}
-
-#timestamp {
-	display: none;
-}
-
-#pronouns {
-	display: none;
-}
-*/
\ No newline at end of file
+}
\ No newline at end of file