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 @@
-
+
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