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

Refactor z-index values and optimize CSS properties for various seasonal styles; enhance performance with will-change property [skip ci]

Browse Source
This commit is contained in:
CodeDevMLH
2026-02-27 03:53:05 +01:00
parent f14785c54a
commit 73f9be91ef
11 changed files with 210 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,68 +1,66 @@
.resurrection-container {
display: block;
position: fixed;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
contain: layout paint;
}
.resurrection-symbol {
position: fixed;
z-index: 15;
top: 0;
translate: 0 -15vh;
user-select: none;
-webkit-user-select: none;
cursor: default;
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 {
z-index: 15;
height: auto;
width: 56px;
opacity: 0.95;
filter: drop-shadow(0 0 8px rgba(255, 215, 130, 0.5));
}
@media (max-width: 768px) {
.resurrection-symbol img {
width: 42px;
}
}
@keyframes resurrection-fall {
0% {
transform: translate3d(0, -15vh, 0);
}
100% {
transform: translate3d(0, 105vh, 0);
}
}
@keyframes resurrection-sway {
0%,
100% {
transform: translateX(0);
}
50% {
transform: translateX(65px);
}
}
.resurrection-container {
display: block;
position: fixed;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
contain: layout paint;
}
.resurrection-symbol {
position: fixed;
z-index: 15;
top: 0;
translate: 0 -15vh;
user-select: none;
cursor: default;
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 {
z-index: 15;
height: auto;
width: 56px;
opacity: 0.95;
filter: drop-shadow(0 0 8px rgba(255, 215, 130, 0.5));
}
@media (max-width: 768px) {
.resurrection-symbol img {
width: 42px;
}
}
@keyframes resurrection-fall {
0% {
transform: translate3d(0, -15vh, 0);
}
100% {
transform: translate3d(0, 105vh, 0);
}
}
@keyframes resurrection-sway {
0%,
100% {
transform: translateX(0);
}
50% {
transform: translateX(65px);
}