CodeDevMLH/Jellyfin-Seasonals-Plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

Enhance space animation: add nebula glow effect, shooting stars, and random space images for improved visual experience

Browse Source
This commit is contained in:
CodeDevMLH
2026-02-26 21:52:48 +01:00
parent 540d7f9baa
commit 6a83981e1d
2 changed files with 162 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
Jellyfin.Plugin.Seasonals/Web/space.css
View File

@@ -10,13 +10,53 @@
contain: strict;
}
.space-bg-glow {
position: absolute;
top: 0; left: 0; width: 100vw; height: 100vh;
background: radial-gradient(circle at 70% 30%, rgba(138, 43, 226, 0.15), transparent 60%),
radial-gradient(circle at 20% 80%, rgba(65, 105, 225, 0.15), transparent 50%);
pointer-events: none;
z-index: 10;
animation: space-nebula-pulse 10s ease-in-out infinite alternate;
}
@keyframes space-nebula-pulse {
0% { opacity: 0.6; }
100% { opacity: 1; }
}
.space-starfield {
position: absolute;
top: 0; left: 0; width: 100vw; height: 100vh;
background: transparent;
z-index: 11;
}
.space-shooting-star {
position: absolute;
width: 250px;
height: 3px;
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
border-radius: 50%;
animation: space-shoot 8s linear infinite;
opacity: 0;
z-index: 12;
}
@keyframes space-shoot {
0% { left: var(--shoot-start-x); top: var(--shoot-start-y); opacity: 1; width: 0; }
5% { width: 300px; }
15% { left: var(--shoot-end-x); top: var(--shoot-end-y); opacity: 0; width: 0; }
100% { left: var(--shoot-end-x); top: var(--shoot-end-y); opacity: 0; width: 0; }
}
.space-symbol {
position: absolute;
animation-timing-function: linear;
animation-iteration-count: infinite;
font-size: 3rem;
opacity: 0.85;
z-index: 9999;
z-index: 20;
}
.space-symbol img {
@@ -35,21 +75,15 @@
.space-star img { width: 3vh; max-width: 30px; }
@keyframes space-drift-right {
0% {
transform: translateX(0) scaleX(-1);
}
100% {
transform: translateX(120vw) scaleX(-1);
}
0% { transform: translateX(-10vw) translateY(0) scaleX(-1); }
50% { transform: translateX(50vw) translateY(-5vh) scaleX(-1); }
100% { transform: translateX(110vw) translateY(0) scaleX(-1); }
}
@keyframes space-drift-left {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-120vw);
}
0% { transform: translateX(10vw) translateY(0); }
50% { transform: translateX(-50vw) translateY(5vh); }
100% { transform: translateX(-110vw) translateY(0); }
}
@keyframes space-slow-spin {