roland/stream
1
0
Fork 0
forked from Kieran/zap.stream
Code Pull Requests Activity

feat: animated gradient for huge zaps

Browse Source
This commit is contained in:
Alejandro Gomez 2023-07-06 22:00:33 +02:00
parent ad7dc56214
commit d9a6def0cd
No known key found for this signature in database
GPG Key ID: 4DF39E566658C817
2 changed files with 20 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/element/live-chat.css
View File

@ -224,6 +224,24 @@
color: #FF8D2B;
}
.zap-container.big-zap:before {
background: linear-gradient(60deg, #2BD9FF, #8C8DED, #F838D9, #F83838, #FF902B, #DDF838);
animation: animatedgradient 3s ease alternate infinite;
background-size: 300% 300%;
}
@keyframes animatedgradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.zap-content {
margin-top: 8px;
}

3
src/element/live-chat.tsx
View File

@ -155,9 +155,10 @@ function ChatZap({ zap }: { zap: ParsedZap }) {
if (!zap.valid) {
return null;
}
const isBig = zap.amount >= 1_000_000;
return (
<div className="zap-container">
<div className={`zap-container ${isBig ? "big-zap" : ""}`}>
<div className="zap">
<Icon name="zap-filled" className="zap-icon" />
<Profile