Smartcraft-Media-Tech/nutty-tools
1
0
Fork 0
mirror of https://github.com/nuttylmao/nutty.gg.git synced 2026-09-18 19:50:58 -04:00
Code Issues Packages Projects Releases Wiki Activity

Slight animation adjustments + removed opacity from alert background

Browse Source
This commit is contained in:
nuttylmao
2025-05-06 21:24:43 +10:00
parent a446ebb005
commit b9e9b60142
3 changed files with 30 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
horizontal-chat/index.html
+3 -1
View File
@@ -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>
horizontal-chat/script.js
+6 -5
View File
@@ -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 = '';
horizontal-chat/style.css
+21 -48
View File
@@ -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;
}
*/
}