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 { .leaf {
position: fixed; position: fixed;
z-index: 15; z-index: 15;
top: -10%; top: 0;
will-change: transform;
translate: 0 -10vh;
font-size: 1em; font-size: 1em;
color: #fff; color: #fff;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
@@ -41,30 +43,30 @@
@-webkit-keyframes leaf-fall { @-webkit-keyframes leaf-fall {
0% { 0% {
top: -10%; translate: 0 -10vh;
} }
100% { 100% {
top: 110%; translate: 0 100vh;
} }
} }
@keyframes leaf-fall { @keyframes leaf-fall {
0% { 0% {
top: -10%; translate: 0 -10vh;
} }
100% { 100% {
top: 110%; translate: 0 100vh;
} }
} }
@-webkit-keyframes leaf-shake { @-webkit-keyframes leaf-shake {
0%, 100% { 0%, 100% {
-webkit-transform: translateX(0) rotate(var(--rotate-start, -20deg)); transform: translateX(0) rotate(var(--rotate-start, -20deg));
} }
50% { 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 { .carnival-wrapper {
position: fixed; position: fixed;
z-index: 15; z-index: 15;
top: -20px; top: 0;
will-change: transform; will-change: transform;
animation-name: carnival-fall; animation-name: carnival-fall;
animation-timing-function: linear; animation-timing-function: linear;
@@ -34,7 +34,7 @@
.carnival-confetti { .carnival-confetti {
width: 8px; width: 8px;
height: 16px; height: 16px;
background-color: #f0f; background-color: rgb(0, 0, 0);
will-change: transform; will-change: transform;
animation-name: carnival-flutter; animation-name: carnival-flutter;
animation-timing-function: linear; animation-timing-function: linear;
@@ -60,10 +60,10 @@
@keyframes carnival-fall { @keyframes carnival-fall {
0% { 0% {
transform: translateY(0); transform: translate3d(0, -10vh, 0);
} }
100% { 100% {
transform: translateY(120vh); transform: translate3d(0, 110vh, 0);
} }
} }

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

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

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

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

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

@@ -14,14 +14,22 @@
.resurrection-symbol { .resurrection-symbol {
position: fixed; position: fixed;
z-index: 15; z-index: 15;
top: -15%; top: 0;
translate: 0 -15vh;
user-select: none; user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
cursor: default; cursor: default;
animation-name: resurrection-fall, resurrection-sway; animation-name: resurrection-fall;
animation-timing-function: linear, ease-in-out; animation-timing-function: linear;
animation-iteration-count: infinite, infinite; animation-iteration-count: infinite;
will-change: transform, top; 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 { .resurrection-symbol img {
@@ -40,11 +48,11 @@
@keyframes resurrection-fall { @keyframes resurrection-fall {
0% { 0% {
top: -15%; transform: translate3d(0, -15vh, 0);
} }
100% { 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'); const symbol = document.createElement('div');
symbol.className = 'resurrection-symbol'; symbol.className = 'resurrection-symbol';
const swayWrapper = document.createElement('div');
swayWrapper.className = 'resurrection-sway-wrapper';
const img = document.createElement('img'); const img = document.createElement('img');
img.src = imageSrc; img.src = imageSrc;
img.alt = ''; img.alt = '';
symbol.style.left = `${leftPercent}%`; symbol.style.left = `${leftPercent}%`;
symbol.style.animationDelay = `${delaySeconds}s, -${Math.random() * 3}s`; symbol.style.animationDelay = `${delaySeconds}s`;
if (enableDifferentDuration) { if (enableDifferentDuration) {
const fallDuration = Math.random() * 7 + 7; const fallDuration = Math.random() * 7 + 7;
const swayDuration = Math.random() * 4 + 2; 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; return symbol;
} }

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

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