Smartcraft-Media-Tech/nutty-tools
1
0
Fork 0
mirror of https://github.com/nuttylmao/nutty.gg.git synced 2026-09-19 04:00:59 -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"> <div id="mainContainer" class="slide-fade">
<ul id="messageList"> <ul id="messageList">
</ul> </ul>
<div id="alertBox"></div> <div id="alertBox">
<div id="alertBoxContent"></div>
</div>
<div id="background"></div> <div id="background"></div>
<ul id="IPutThisHereSoICanCalculateHowBigEachMessageIsSupposedToBeBeforeIAddItToTheMessageList"> <ul id="IPutThisHereSoICanCalculateHowBigEachMessageIsSupposedToBeBeforeIAddItToTheMessageList">
</ul> </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 messageListDiv = document.querySelector("#messageList");
const backgroundDiv = document.querySelector("#background"); const backgroundDiv = document.querySelector("#background");
const alertBoxDiv = document.querySelector("#alertBox"); const alertBoxDiv = document.querySelector("#alertBox");
const alertBoxContent = document.querySelector("#alertBoxContent");
// Set the message text // Set the message text
alertBoxDiv.innerHTML = message; alertBoxContent.innerHTML = message;
// Set the background // Set the background
alertBoxDiv.classList.add(background); alertBoxDiv.classList.add(background);
// Start the animation // Start the animation
widgetLocked = true; widgetLocked = true;
messageListDiv.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'; // backgroundDiv.style.animation = 'hideAlertBox 0.5s ease-in-out forwards';
alertBoxDiv.style.animation = 'showAlertBox 0.5s ease-in-out forwards'; alertBoxDiv.style.animation = 'showAlertBox 0.5s ease-in-out forwards';
// To stop the animation (remove the animation property): // To stop the animation (remove the animation property):
setTimeout(() => { setTimeout(() => {
messageListDiv.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'; // backgroundDiv.style.animation = 'showAlertBox 0.5s ease-in-out forwards';
alertBoxDiv.style.animation = 'hideAlertBox 0.5s ease-in-out forwards'; alertBoxDiv.style.animation = 'hideAlertBox 0.5s ease-in-out forwards';
setTimeout(() => { setTimeout(() => {
alertBoxDiv.classList = ''; alertBoxDiv.classList = '';
horizontal-chat/style.css
+20 -47
View File
@@ -62,11 +62,18 @@ html {
transform: translateX(50%); transform: translateX(50%);
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
width: 100%;
height: 1.7em;
display: flex;
align-items: flex-end;
justify-content: center;
}
#alertBoxContent {
font-weight: 700; font-weight: 700;
line-height: 1.7em; line-height: 1.7em;
width: 100%;
text-align: center; text-align: center;
/* background-color: red; */
} }
#background { #background {
@@ -222,51 +229,51 @@ li {
/*****************/ /*****************/
.announcementBlue { .announcementBlue {
background: linear-gradient(#03d3d7BF, #8d49feBF) !important; background: linear-gradient(#03d3d7, #8d49fe) !important;
} }
.announcementGreen { .announcementGreen {
background: linear-gradient(#01da86BF, #55bee4BF) !important; background: linear-gradient(#01da86, #55bee4) !important;
} }
.announcementOrange { .announcementOrange {
background: linear-gradient(#feb419BF, #e1df00BF) !important; background: linear-gradient(#feb419, #e1df00) !important;
} }
.announcementPurple { .announcementPurple {
background: linear-gradient(#9548ffBF, #fc74e6BF) !important; background: linear-gradient(#9548ff, #fc74e6) !important;
} }
.twitch { .twitch {
background: linear-gradient(#6d5ca1bf, #9146ffBF) !important; background: linear-gradient(#6d5ca1, #9146ff) !important;
} }
.youtube { .youtube {
background: linear-gradient(#FF6C60BF, #FF0707BF) !important; background: linear-gradient(#FF6C60, #FF0707) !important;
} }
.streamlabs { .streamlabs {
background: linear-gradient(#73dabbbf, #397765bf) !important; background: linear-gradient(#73dabb, #397765) !important;
} }
.streamelements { .streamelements {
background: linear-gradient(#263b8abf, #0a112abf) !important; background: linear-gradient(#263b8a, #0a112a) !important;
} }
.patreon { .patreon {
background: linear-gradient(#c76633bf, #fd5e0abf) !important; background: linear-gradient(#c76633, #fd5e0a) !important;
} }
.kofi { .kofi {
background: linear-gradient(#54c7eebf, #08c2ffbf) !important; background: linear-gradient(#54c7ee, #08c2ff) !important;
} }
.tipeeeStream { .tipeeeStream {
background: linear-gradient(#120e23bf, #5d192abf) !important; background: linear-gradient(#120e23, #5d192a) !important;
} }
.fourthwall { .fourthwall {
background: linear-gradient(#466edbbf, #1c56f5bf) !important; background: linear-gradient(#466edb, #1c56f5) !important;
} }
.blank { .blank {
@@ -310,37 +317,3 @@ li {
background-color: #D12025; 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;
}
*/