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

Refactor seasonal CSS animations: update positioning and transform properties for autumn, carnival, cherry blossom, christmas, resurrection, and snowflakes styles

Browse Source
This commit is contained in:
CodeDevMLH
2026-02-24 23:58:08 +01:00
parent c66ccf970e
commit 082120b70b
7 changed files with 57 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
Jellyfin.Plugin.Seasonals/Web/autumn.css
View File

@@ -14,7 +14,9 @@
.leaf {
position: fixed;
z-index: 15;
top: -10%;
top: 0;
will-change: transform;
translate: 0 -10vh;
font-size: 1em;
color: #fff;
font-family: Arial, sans-serif;
@@ -41,30 +43,30 @@
@-webkit-keyframes leaf-fall {
0% {
top: -10%;
translate: 0 -10vh;
}
100% {
top: 110%;
translate: 0 100vh;
}
}
@keyframes leaf-fall {
0% {
top: -10%;
translate: 0 -10vh;
}
100% {
top: 110%;
translate: 0 100vh;
}
}
@-webkit-keyframes leaf-shake {
0%, 100% {
-webkit-transform: translateX(0) rotate(var(--rotate-start, -20deg));
transform: translateX(0) rotate(var(--rotate-start, -20deg));
}
50% {
-webkit-transform: translateX(80px) rotate(var(--rotate-end, 20deg));
transform: translateX(80px) rotate(var(--rotate-end, 20deg));
}
}

8
Jellyfin.Plugin.Seasonals/Web/carnival.css
View File

@@ -15,7 +15,7 @@
.carnival-wrapper {
position: fixed;
z-index: 15;
top: -20px;
top: 0;
will-change: transform;
animation-name: carnival-fall;
animation-timing-function: linear;
@@ -34,7 +34,7 @@
.carnival-confetti {
width: 8px;
height: 16px;
background-color: #f0f;
background-color: rgb(0, 0, 0);
will-change: transform;
animation-name: carnival-flutter;
animation-timing-function: linear;
@@ -60,10 +60,10 @@
@keyframes carnival-fall {
0% {
transform: translateY(0);
transform: translate3d(0, -10vh, 0);
}
100% {
transform: translateY(120vh);
transform: translate3d(0, 110vh, 0);
}
}

9
Jellyfin.Plugin.Seasonals/Web/cherryblossom.css
View File

@@ -14,14 +14,15 @@
/* Petals */
.cherryblossom-petal {
position: fixed;
top: -20px;
top: 0;
z-index: 1005;
width: 15px;
height: 10px;
background-color: #ffc0cb;
border-radius: 15px 0px 15px 0px;
will-change: transform, top;
will-change: transform;
translate: 0 -10vh;
animation-name: cherryblossom-fall, cherryblossom-sway;
animation-timing-function: linear, ease-in-out;
animation-iteration-count: infinite, infinite;
@@ -45,8 +46,8 @@
}
@keyframes cherryblossom-fall {
0% { top: -10%; }
100% { top: 110%; }
0% { translate: 0 -10vh; }
100% { translate: 0 110vh; }
}
@keyframes cherryblossom-sway {

15
Jellyfin.Plugin.Seasonals/Web/christmas.css
View File

@@ -14,7 +14,9 @@
.christmas {
position: fixed;
z-index: 15;
top: -10%;
top: 0;
will-change: transform;
translate: 0 -10vh;
font-size: 1em;
color: #fff;
font-family: Arial, sans-serif;
@@ -34,11 +36,11 @@
@-webkit-keyframes christmas-fall {
0% {
top: -10%;
translate: 0 -10vh;
}
100% {
top: 110%;
translate: 0 110vh;
}
}
@@ -46,28 +48,25 @@
0%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
50% {
-webkit-transform: translateX(80px);
transform: translateX(80px);
}
}
@keyframes christmas-fall {
0% {
top: -10%;
translate: 0 -10vh;
}
100% {
top: 110%;
translate: 0 110vh;
}
}
@keyframes christmas-shake {
0%,
100% {
transform: translateX(0);

22
Jellyfin.Plugin.Seasonals/Web/resurrection.css
View File

@@ -14,14 +14,22 @@
.resurrection-symbol {
position: fixed;
z-index: 15;
top: -15%;
top: 0;
translate: 0 -15vh;
user-select: none;
-webkit-user-select: none;
cursor: default;
animation-name: resurrection-fall, resurrection-sway;
animation-timing-function: linear, ease-in-out;
animation-iteration-count: infinite, infinite;
will-change: transform, top;
animation-name: resurrection-fall;
animation-timing-function: linear;
animation-iteration-count: infinite;
will-change: transform;
}
.resurrection-sway-wrapper {
will-change: transform;
animation-name: resurrection-sway;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.resurrection-symbol img {
@@ -40,11 +48,11 @@
@keyframes resurrection-fall {
0% {
top: -15%;
transform: translate3d(0, -15vh, 0);
}
100% {
top: 110%;
transform: translate3d(0, 105vh, 0);
}
}

13
Jellyfin.Plugin.Seasonals/Web/resurrection.js
View File

@@ -52,20 +52,27 @@ function createSymbol(imageSrc, leftPercent, delaySeconds) {
const symbol = document.createElement('div');
symbol.className = 'resurrection-symbol';
const swayWrapper = document.createElement('div');
swayWrapper.className = 'resurrection-sway-wrapper';
const img = document.createElement('img');
img.src = imageSrc;
img.alt = '';
symbol.style.left = `${leftPercent}%`;
symbol.style.animationDelay = `${delaySeconds}s, -${Math.random() * 3}s`;
symbol.style.animationDelay = `${delaySeconds}s`;
if (enableDifferentDuration) {
const fallDuration = Math.random() * 7 + 7;
const swayDuration = Math.random() * 4 + 2;
symbol.style.animationDuration = `${fallDuration}s, ${swayDuration}s`;
symbol.style.animationDuration = `${fallDuration}s`;
swayWrapper.style.animationDuration = `${swayDuration}s`;
}
symbol.appendChild(img);
swayWrapper.style.animationDelay = `${Math.random() * 3}s`;
swayWrapper.appendChild(img);
symbol.appendChild(swayWrapper);
return symbol;
}

14
Jellyfin.Plugin.Seasonals/Web/snowflakes.css
View File

@@ -14,7 +14,9 @@
.snowflake {
position: fixed;
z-index: 15;
top: -10%;
top: 0;
will-change: transform;
translate: 0 -10vh;
font-size: 1em;
color: #fff;
font-family: Arial, sans-serif;
@@ -34,11 +36,11 @@
@-webkit-keyframes snowflakes-fall {
0% {
top: -10%;
translate: 0 -10vh;
}
100% {
top: 110%;
translate: 0 110vh;
}
}
@@ -46,23 +48,21 @@
0%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
50% {
-webkit-transform: translateX(80px);
transform: translateX(80px);
}
}
@keyframes snowflakes-fall {
0% {
top: -10%;
translate: 0 -10vh;
}
100% {
top: 110%;
translate: 0 110vh;
}
}