root/jukebox-vibe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

420 Theme: Animierte herumfliegende Brokkoli-Emojis hinzugefügt - Bildschirmschoner-Style mit Bounce-Animation

Browse source
This commit is contained in:
vibe-bot 2025-08-09 01:22:59 +02:00
parent cab74ddf8b
commit 83ac248c60
2 changed files with 103 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

91
web/src/styles.css
View file

@ -75,6 +75,97 @@ body {
animation: cannabis-bg 20s ease infinite;
color: #f0fdf4;
font-family: 'Poppins', ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial;
position: relative;
overflow-x: hidden;
}
/* Floating Broccoli Animation */
[data-theme="420"]::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
/* Broccoli Elements */
[data-theme="420"] .broccoli {
position: fixed;
font-size: 2rem;
opacity: 0.6;
z-index: 1;
pointer-events: none;
animation: float-broccoli 15s linear infinite;
}
[data-theme="420"] .broccoli:nth-child(1) {
top: 10%;
left: 10%;
animation-delay: 0s;
animation-duration: 18s;
}
[data-theme="420"] .broccoli:nth-child(2) {
top: 20%;
right: 15%;
animation-delay: 3s;
animation-duration: 22s;
}
[data-theme="420"] .broccoli:nth-child(3) {
bottom: 25%;
left: 20%;
animation-delay: 6s;
animation-duration: 20s;
}
[data-theme="420"] .broccoli:nth-child(4) {
bottom: 15%;
right: 10%;
animation-delay: 9s;
animation-duration: 25s;
}
[data-theme="420"] .broccoli:nth-child(5) {
top: 50%;
left: 5%;
animation-delay: 12s;
animation-duration: 16s;
}
[data-theme="420"] .broccoli:nth-child(6) {
top: 30%;
right: 5%;
animation-delay: 15s;
animation-duration: 19s;
}
/* Broccoli Bounce Animation */
@keyframes float-broccoli {
0% {
transform: translate(0, 0) rotate(0deg);
}
25% {
transform: translate(100px, -50px) rotate(90deg);
}
50% {
transform: translate(200px, 0px) rotate(180deg);
}
75% {
transform: translate(100px, 50px) rotate(270deg);
}
100% {
transform: translate(0, 0) rotate(360deg);
}
}
/* Ensure content stays above broccoli */
[data-theme="420"] .container {
position: relative;
z-index: 10;
}
@keyframes cannabis-bg {