Add new seasonal themes: implement Frost, Film Noir, Oscar, Mario Day, Star Wars, Oktoberfest, Friday the 13th, Eid, Sports, Olympia, Space, Underwater, and Birthday options in configuration

This commit is contained in:
CodeDevMLH
2026-02-24 23:39:49 +01:00
parent 9b8a563e43
commit be4313d776

View File

@@ -154,6 +154,7 @@
border-radius: 8px;
aspect-ratio: 2/3;
position: relative;
z-index: 6;
overflow: hidden;
}
@@ -175,7 +176,7 @@
background: rgba(0, 164, 220, 0.15);
border-top: 1px solid rgba(0, 164, 220, 0.3);
padding: 0.5em 1.5em;
z-index: 199;
z-index: -1;
font-size: 0.8em;
color: #aaa;
text-align: center;
@@ -190,7 +191,7 @@
<body>
<!-- Mock Header -->
<div class="skinHeader">
<div class="skinHeader skinHeader-withBackground">
<div class="skinHeader-content">
<span>Jellyfin</span>
</div>
@@ -239,6 +240,7 @@
<option value="snowstorm">Snowstorm</option>
<option value="fireworks">Fireworks</option>
<option value="halloween">Halloween</option>
<option value="legacyhalloween">Legacy Halloween</option>
<option value="hearts">Hearts</option>
<option value="christmas">Christmas</option>
<option value="santa">Santa</option>
@@ -255,6 +257,19 @@
<option value="pride">Pride</option>
<option value="rain">Rain</option>
<option value="storm">Storm (Epilepsy Warning!)</option>
<option value="frost">Frost / Ice</option>
<option value="filmnoir">Film-Noir</option>
<option value="oscar">Oscar Awards</option>
<option value="marioday">Mario Day</option>
<option value="starwars">Star Wars Day</option>
<option value="oktoberfest">Oktoberfest</option>
<option value="friday13">Friday the 13th</option>
<option value="eid">Eid al-Fitr</option>
<option value="sports">Sports / Football</option>
<option value="olympia">Olympia / Games</option>
<option value="space">Space / Sci-Fi</option>
<option value="underwater">Underwater</option>
<option value="birthday">Birthday</option>
<option value="custom">⚙ Custom (Local Files)</option>
</select>
@@ -331,6 +346,7 @@
snowstorm: { css: 'snowstorm.css', js: 'snowstorm.js', container: 'snowstorm-container' },
fireworks: { css: 'fireworks.css', js: 'fireworks.js', container: 'fireworks' },
halloween: { css: 'halloween.css', js: 'halloween.js', container: 'halloween-container' },
legacyhalloween: { css: 'legacyhalloween.css', js: 'legacyhalloween.js', container: 'legacyhalloween-container' },
hearts: { css: 'hearts.css', js: 'hearts.js', container: 'hearts-container' },
christmas: { css: 'christmas.css', js: 'christmas.js', container: 'christmas-container' },
santa: { css: 'santa.css', js: 'santa.js', container: 'santa-container' },
@@ -347,6 +363,19 @@
pride: { css: 'pride.css', js: 'pride.js', container: 'pride-container' },
rain: { css: 'rain.css', js: 'rain.js', container: 'rain-container' },
storm: { css: 'storm.css', js: 'storm.js', container: 'storm-container' },
frost: { css: 'frost.css', js: 'frost.js', container: 'frost-container' },
filmnoir: { css: 'filmnoir.css', js: 'filmnoir.js', container: 'filmnoir-container' },
oscar: { css: 'oscar.css', js: 'oscar.js', container: 'oscar-container' },
marioday: { css: 'marioday.css', js: 'marioday.js', container: 'marioday-container' },
starwars: { css: 'starwars.css', js: 'starwars.js', container: 'starwars-container' },
oktoberfest: { css: 'oktoberfest.css', js: 'oktoberfest.js', container: 'oktoberfest-container' },
friday13: { css: 'friday13.css', js: 'friday13.js', container: 'friday13-container' },
eid: { css: 'eid.css', js: 'eid.js', container: 'eid-container' },
sports: { css: 'sports.css', js: 'sports.js', container: 'sports-container' },
olympia: { css: 'olympia.css', js: 'olympia.js', container: 'olympia-container' },
space: { css: 'space.css', js: 'space.js', container: 'space-container' },
underwater: { css: 'underwater.css', js: 'underwater.js', container: 'underwater-container' },
birthday: { css: 'birthday.css', js: 'birthday.js', container: 'birthday-container' }
};
const select = document.getElementById('theme-select');
@@ -370,13 +399,16 @@
// Remove any theme-created containers on body
const knownContainers = [
'.snowfall-container', '.snowflakes', '.snowstorm-container',
'.fireworks', '.halloween-container', '.hearts-container',
'.christmas-container', '.santa-container', '.autumn-container',
'.fireworks', '.halloween-container', '.legacyhalloween-container', '.hearts-container',
'.christmas-container', '.santa-container', '.autumn-container',
'.easter-container', '.resurrection-container', '.spring-container',
'.summer-container', '.carnival-container', '.cherryblossom-container',
'.earthday-container', '.eurovision-container', '.piday-container',
'.pride-container', '.rain-container', '.storm-container'
'.pride-container', '.rain-container', '.storm-container',
'.frost-container', '.filmnoir-container', '.oscar-container',
'.marioday-container', '.starwars-container', '.oktoberfest-container',
'.friday13-container', '.eid-container', '.sports-container',
'.olympia-container', '.space-container', '.underwater-container', '.birthday-container'
];
knownContainers.forEach(sel => {
document.querySelectorAll(sel).forEach(el => {