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:
@@ -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 => {
|
||||
|
||||
Reference in New Issue
Block a user