dev: update README.md

- this fixes the credits table, clear logo position and music artist page

.gitignore

@@ -1,2 +1,9 @@
 /tmp.txt
 /commits.csv
+/node_modules
+/Theme/mod.css
+/Theme/ElegantFin-theme-nightly-min.css
+/Theme/assets/add-ons/custom-media-covers-nightly-min.css
+/Theme/assets/add-ons/media-bar-plugin-support-nightly-min.css
+/Theme/assets/add-ons/seamless-fork-compatibility-nightly.css
+/Theme/assets/add-ons/seamless-fork-compatibility-nightly-min.css

.prettierrc

@@ -0,0 +1 @@
+{ "useTabs": false, "tabWidth": 4, "printWidth": 120 }

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true
+}

README.md

@@ -1,15 +1,32 @@
 <!-- Banner Image -->
-<img src="https://github.com/lscambo13/ElegantFin/blob/main/Theme/assets/img/banner.png?raw=true" alt="ElegantFin Theme for Jellyfin - Banner">
+<img src="Theme/assets/img/banner.png?raw=true" alt="ElegantFin Theme for Jellyfin - Banner">
+
+<div align="center">
+  <a href="https://www.jsdelivr.com/package/gh/lscambo13/ElegantFin">
+    <img
+      src="https://img.shields.io/jsdelivr/gh/hm/lscambo13/ElegantFin?style=flat&logo=jsdelivr&logoColor=%23f65e34&label=jsDelivr%20Hits&labelColor=white&color=%23f65e34"
+      alt="jsDelivr Requests"
+    />
+  </a>
+  <br>
+  <a href="https://github.com/lscambo13/ElegantFin/stargazers">
+    <img
+      src="https://img.shields.io/github/stars/lscambo13/ElegantFin?style=flat&logo=github&logoColor=%231f2328&label=GitHub%20Stars&labelColor=white&color=%231f2328"
+      alt="GitHub Repo stars"
+    />
+  </a>
+</div>
+
+## ⭐ ElegantFin Theme
 
-# ⭐ ElegantFin Theme
 This is a Jellyfin theme inspired from Jellyseerr to improve the overall look and experience with various fixes to the UI/UX. It gives Jellyfin a fresh, modern look, and it aims to work on mobile, desktop, and TV, with just one import.
 
-
 #### **Author:** [lscambo13](https://github.com/lscambo13)
 
 <hr>
 
 ### ✨ Key Features
+
 - modern layouts and color tones
 - new and improved animations on most elements
 - rounded corners and even spacing everywhere
@@ -22,33 +39,34 @@ This is a Jellyfin theme inspired from Jellyseerr to improve the overall look an
 <hr>
 
 ### 🖼️ Theme Showcase
+
 Captured on ElegantFin v25.08.02
 
 <details>
   <summary> 💻 <i>Desktop and </i>📱 <i>Mobile Screenshots</i></summary>
 
 | Desktop                                                                                                                                                            | Mobile                                                                                                                     |
-| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/desktop/21.%20Login%20Page.webp?raw=true"><br><strong>Login Page</strong></div>         | <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/mobile/21.%20Login%20Page.webp?raw=true"></div>         |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/desktop/1.%20Homepage.webp?raw=true"><br><strong>Homepage</strong></div>             | <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/mobile/1.%20Homepage.webp?raw=true"></div>             |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/desktop/2.%20Movies%20Library.webp?raw=true"><br><strong>Movies Library</strong></div> | <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/mobile/2.%20Movies%20Library.webp?raw=true"></div>     |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/desktop/4.%20Movie%20Page.webp?raw=true"><br><strong>Movie Page</strong></div>         | <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/mobile/4.%20Movie%20Page.webp?raw=true"></div>         |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/desktop/12.%20Movie%20Details.webp?raw=true"><br><strong>Movie Details</strong></div> | <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/mobile/12.%20Movie%20Details.webp?raw=true"></div>     |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/desktop/11.%20TV%20Show%20Page.webp?raw=true"><br><strong>TV Show Page</strong></div> | <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/mobile/11.%20TV%20Show%20Page.webp?raw=true"></div>    |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/desktop/18.%20TV%20Episode%20Page.webp?raw=true"><br><strong>TV Episode Page</strong></div> | <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/mobile/18.%20TV%20Episode%20Page.webp?raw=true"></div> |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/desktop/16.%20TV%20Show%20Seasons.webp?raw=true"><br><strong>TV Show Seasons</strong></div> | <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/mobile/16.%20TV%20Show%20Seasons.webp?raw=true"></div> |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/desktop/9.%20Web%20Player.webp?raw=true"><br><strong>Web Player</strong></div>         | <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/mobile/9.%20Web%20Player.webp?raw=true"></div>         |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/desktop/17.%20Cast%20Page.webp?raw=true"><br><strong>Cast Page</strong></div>          | <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/mobile/17.%20Cast%20Page.webp?raw=true"></div>         |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/desktop/14.%20Artist%20Page.webp?raw=true"><br><strong>Artist Page</strong></div>       | <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/mobile/14.%20Artist%20Page.webp?raw=true"></div>       |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/desktop/15.%20Music%20Player.webp?raw=true"><br><strong>Music Player</strong></div>     | <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/mobile/15.%20Music%20Player.webp?raw=true"></div>      |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/desktop/13.%20Book%20Page.webp?raw=true"><br><strong>Book Page</strong></div>          | <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/mobile/13.%20Book%20Page.webp?raw=true"></div>         |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/desktop/3.%20Sidebar.webp?raw=true"><br><strong>Sidebar</strong></div>                | <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/mobile/3.%20Sidebar.webp?raw=true"></div>              |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/desktop/5.%20Extra%20Dialog.webp?raw=true"><br><strong>Extra Dialog</strong></div>     | <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/mobile/5.%20Extra%20Dialog.webp?raw=true"></div>       |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/desktop/6.%20Settings%20Page.webp?raw=true"><br><strong>Settings Page</strong></div>   | <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/mobile/6.%20Settings%20Page.webp?raw=true"></div>      |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/desktop/7.%20Metadata%20Menu.webp?raw=true"><br><strong>Metadata Menu</strong></div>   | <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/mobile/7.%20Metadata%20Menu.webp?raw=true"></div>      |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/desktop/8.%20Dashboard%20Settings.webp?raw=true"><br><strong>Dashboard Settings</strong></div> | <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/mobile/8.%20Dashboard%20Settings.webp?raw=true"></div> |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/desktop/19.%20Live%20TV%20Page.webp?raw=true"><br><strong>Live TV Page</strong></div>   | <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/mobile/19.%20Live%20TV%20Page.webp?raw=true"></div>    |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/desktop/20.%20Live%20TV%20Guide.webp?raw=true"><br><strong>Live TV Guide</strong></div> | <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/mobile/20.%20Live%20TV%20Guide.webp?raw=true"></div>   |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/desktop/21.%20Login%20Page.webp?raw=true"><br><strong>Login Page</strong></div>                | <div align="center"><img src="Previews/previews-v25.08.02/optimized/mobile/21.%20Login%20Page.webp?raw=true"></div>        |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/desktop/1.%20Homepage.webp?raw=true"><br><strong>Homepage</strong></div>                       | <div align="center"><img src="Previews/previews-v25.08.02/optimized/mobile/1.%20Homepage.webp?raw=true"></div>             |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/desktop/2.%20Movies%20Library.webp?raw=true"><br><strong>Movies Library</strong></div>         | <div align="center"><img src="Previews/previews-v25.08.02/optimized/mobile/2.%20Movies%20Library.webp?raw=true"></div>     |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/desktop/4.%20Movie%20Page.webp?raw=true"><br><strong>Movie Page</strong></div>                 | <div align="center"><img src="Previews/previews-v25.08.02/optimized/mobile/4.%20Movie%20Page.webp?raw=true"></div>         |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/desktop/12.%20Movie%20Details.webp?raw=true"><br><strong>Movie Details</strong></div>          | <div align="center"><img src="Previews/previews-v25.08.02/optimized/mobile/12.%20Movie%20Details.webp?raw=true"></div>     |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/desktop/11.%20TV%20Show%20Page.webp?raw=true"><br><strong>TV Show Page</strong></div>          | <div align="center"><img src="Previews/previews-v25.08.02/optimized/mobile/11.%20TV%20Show%20Page.webp?raw=true"></div>    |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/desktop/18.%20TV%20Episode%20Page.webp?raw=true"><br><strong>TV Episode Page</strong></div>    | <div align="center"><img src="Previews/previews-v25.08.02/optimized/mobile/18.%20TV%20Episode%20Page.webp?raw=true"></div> |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/desktop/16.%20TV%20Show%20Seasons.webp?raw=true"><br><strong>TV Show Seasons</strong></div>    | <div align="center"><img src="Previews/previews-v25.08.02/optimized/mobile/16.%20TV%20Show%20Seasons.webp?raw=true"></div> |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/desktop/9.%20Web%20Player.webp?raw=true"><br><strong>Web Player</strong></div>                 | <div align="center"><img src="Previews/previews-v25.08.02/optimized/mobile/9.%20Web%20Player.webp?raw=true"></div>         |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/desktop/17.%20Cast%20Page.webp?raw=true"><br><strong>Cast Page</strong></div>                  | <div align="center"><img src="Previews/previews-v25.08.02/optimized/mobile/17.%20Cast%20Page.webp?raw=true"></div>         |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/desktop/14.%20Artist%20Page.webp?raw=true"><br><strong>Artist Page</strong></div>              | <div align="center"><img src="Previews/previews-v25.08.02/optimized/mobile/14.%20Artist%20Page.webp?raw=true"></div>       |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/desktop/15.%20Music%20Player.webp?raw=true"><br><strong>Music Player</strong></div>            | <div align="center"><img src="Previews/previews-v25.08.02/optimized/mobile/15.%20Music%20Player.webp?raw=true"></div>      |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/desktop/13.%20Book%20Page.webp?raw=true"><br><strong>Book Page</strong></div>                  | <div align="center"><img src="Previews/previews-v25.08.02/optimized/mobile/13.%20Book%20Page.webp?raw=true"></div>         |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/desktop/3.%20Sidebar.webp?raw=true"><br><strong>Sidebar</strong></div>                         | <div align="center"><img src="Previews/previews-v25.08.02/optimized/mobile/3.%20Sidebar.webp?raw=true"></div>              |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/desktop/5.%20Extra%20Dialog.webp?raw=true"><br><strong>Extra Dialog</strong></div>             | <div align="center"><img src="Previews/previews-v25.08.02/optimized/mobile/5.%20Extra%20Dialog.webp?raw=true"></div>       |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/desktop/6.%20Settings%20Page.webp?raw=true"><br><strong>Settings Page</strong></div>           | <div align="center"><img src="Previews/previews-v25.08.02/optimized/mobile/6.%20Settings%20Page.webp?raw=true"></div>      |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/desktop/7.%20Metadata%20Menu.webp?raw=true"><br><strong>Metadata Menu</strong></div>           | <div align="center"><img src="Previews/previews-v25.08.02/optimized/mobile/7.%20Metadata%20Menu.webp?raw=true"></div>      |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/desktop/8.%20Dashboard%20Settings.webp?raw=true"><br><strong>Dashboard Settings</strong></div> | <div align="center"><img src="Previews/previews-v25.08.02/optimized/mobile/8.%20Dashboard%20Settings.webp?raw=true"></div> |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/desktop/19.%20Live%20TV%20Page.webp?raw=true"><br><strong>Live TV Page</strong></div>          | <div align="center"><img src="Previews/previews-v25.08.02/optimized/mobile/19.%20Live%20TV%20Page.webp?raw=true"></div>    |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/desktop/20.%20Live%20TV%20Guide.webp?raw=true"><br><strong>Live TV Guide</strong></div>        | <div align="center"><img src="Previews/previews-v25.08.02/optimized/mobile/20.%20Live%20TV%20Guide.webp?raw=true"></div>   |
 
 </details>
 
@@ -56,60 +74,63 @@ Captured on ElegantFin v25.08.02
   <summary> 📺 <i>TV Screenshots</i></summary>
 
 | TV View                                                                                                                                                    |
-| ------------------------------------------------------------------------------------------------------------- |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/tv/21.%20Login%20Page.webp?raw=true"><br><strong>Login Page</strong></div>         |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/tv/1.%20Homepage.webp?raw=true"><br><strong>Homepage</strong></div>             |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/tv/2.%20Movies%20Library.webp?raw=true"><br><strong>Movies Library</strong></div> |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/tv/4.%20Movie%20Page.webp?raw=true"><br><strong>Movie Page</strong></div>         |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/tv/5.%20Extra%20Dialog.webp?raw=true"><br><strong>Extra Dialog</strong></div>     |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/tv/6.%20Settings%20Page.webp?raw=true"><br><strong>Settings Page</strong></div>   |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/tv/9.%20Web%20Player.webp?raw=true"><br><strong>Web Player</strong></div>         |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/tv/11.%20TV%20Show%20Page.webp?raw=true"><br><strong>TV Show Page</strong></div> |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/tv/12.%20Movie%20Details.webp?raw=true"><br><strong>Movie Details</strong></div> |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/tv/13.%20Book%20Page.webp?raw=true"><br><strong>Book Page</strong></div>         |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/tv/14.%20Artist%20Page.webp?raw=true"><br><strong>Artist Page</strong></div>     |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/tv/15.%20Music%20Player.webp?raw=true"><br><strong>Music Player</strong></div>   |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/tv/16.%20TV%20Show%20Seasons.webp?raw=true"><br><strong>TV Show Seasons</strong></div> |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/tv/17.%20Cast%20Page.webp?raw=true"><br><strong>Cast Page</strong></div>         |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/tv/18.%20TV%20Episode%20Page.webp?raw=true"><br><strong>TV Episode Page</strong></div> |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/tv/19.%20Live%20TV%20Page.webp?raw=true"><br><strong>Live TV Page</strong></div> |
-| <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/tv/20.%20Live%20TV%20Guide.webp?raw=true"><br><strong>Live TV Guide</strong></div> |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/tv/21.%20Login%20Page.webp?raw=true"><br><strong>Login Page</strong></div>             |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/tv/1.%20Homepage.webp?raw=true"><br><strong>Homepage</strong></div>                    |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/tv/2.%20Movies%20Library.webp?raw=true"><br><strong>Movies Library</strong></div>      |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/tv/4.%20Movie%20Page.webp?raw=true"><br><strong>Movie Page</strong></div>              |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/tv/5.%20Extra%20Dialog.webp?raw=true"><br><strong>Extra Dialog</strong></div>          |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/tv/6.%20Settings%20Page.webp?raw=true"><br><strong>Settings Page</strong></div>        |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/tv/9.%20Web%20Player.webp?raw=true"><br><strong>Web Player</strong></div>              |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/tv/11.%20TV%20Show%20Page.webp?raw=true"><br><strong>TV Show Page</strong></div>       |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/tv/12.%20Movie%20Details.webp?raw=true"><br><strong>Movie Details</strong></div>       |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/tv/13.%20Book%20Page.webp?raw=true"><br><strong>Book Page</strong></div>               |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/tv/14.%20Artist%20Page.webp?raw=true"><br><strong>Artist Page</strong></div>           |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/tv/15.%20Music%20Player.webp?raw=true"><br><strong>Music Player</strong></div>         |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/tv/16.%20TV%20Show%20Seasons.webp?raw=true"><br><strong>TV Show Seasons</strong></div> |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/tv/17.%20Cast%20Page.webp?raw=true"><br><strong>Cast Page</strong></div>               |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/tv/18.%20TV%20Episode%20Page.webp?raw=true"><br><strong>TV Episode Page</strong></div> |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/tv/19.%20Live%20TV%20Page.webp?raw=true"><br><strong>Live TV Page</strong></div>       |
+| <div align="center"><img src="Previews/previews-v25.08.02/optimized/tv/20.%20Live%20TV%20Guide.webp?raw=true"><br><strong>Live TV Guide</strong></div>     |
 
 </details>
 
-
-
-
 https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 
-
 <hr>
 
 ### 👇 How to install/setup this theme?
 
 <b>Paste the following in Custom CSS code box:</b>
 
+```css
 @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/ElegantFin-jellyfin-theme-build-latest-minified.css");
+```
 
 <details>
   <summary><i>Detailed steps for server-side implementation</i></summary>
  
-1. Open Dashboard from Administration tab in Settings.
-2. From the side bar, select the Branding tab if you are on Jellyfin 10.11.X or the General tab on older version.
-3. Scroll down to find Custom CSS code box.
-4. Paste the custom css in Custom CSS code box.
-5. Click save
+> 1. Open Dashboard from Administration tab in Settings.
+> 2. From the side bar, select the Branding tab if you are on Jellyfin 10.11 or above.
+> 3. Scroll down to find Custom CSS code box.
+> 4. Paste the custom css in Custom CSS code box.
+> 5. Click save
+ 
 </details>
 
 <details>
   <summary><i>Detailed steps for client-side implementation</i></summary>
  	
-1. Open Display tab in Settings.
-2. Scroll down to find Custom CSS code box.
-3. Paste the custom css in Custom CSS code box.
-4. Click save.
+> 1. Open Display tab in Settings.
+> 2. Scroll down to find Custom CSS code box.
+> 3. Paste the custom css in Custom CSS code box.
+> 4. Click save.
+> 	
 </details>
 
+<br>
+
+**Note:** On Jellyfin v12, you will need to set `User Settings > Display > Display Mode` to `"Desktop (Legacy)"` on desktop, or `"Mobile (Legacy)"` on mobile. The new (non-legacy) UI is not yet fully supported.
 
 <hr>
 
@@ -118,170 +139,302 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 <details>
   <summary><i>1. Custom media covers for user media libraries</i></summary>
 
-<img width="640" height="auto" alt="image" src="https://github.com/user-attachments/assets/05eb7cb6-3ac9-444b-8988-9776e0815664" />
-
-- Read more about this experimental add-on [here](https://github.com/lscambo13/ElegantFin/blob/main/custom-media-covers.md)
+> <img width="640" height="auto" alt="image" src="https://github.com/user-attachments/assets/05eb7cb6-3ac9-444b-8988-9776e0815664" />
+>
+> - Read more about this experimental add-on [here](custom-media-covers.md)
 
 </details>
 
 <details>
   <summary><i>2. Custom background image for the login page</i></summary>
 
-<img width="auto" height="350" alt="image" src="https://github.com/user-attachments/assets/70834545-d1cd-4496-975a-4310030dedd9" />
-<img width="auto" height="350" alt="image" src="https://github.com/user-attachments/assets/c3cf2d96-0db0-4acb-bc61-7b08d5445452" />
+> <img width="auto" height="350" alt="image" src="https://github.com/user-attachments/assets/70834545-d1cd-4496-975a-4310030dedd9" />
+> <img width="auto" height="350" alt="image" src="https://github.com/user-attachments/assets/c3cf2d96-0db0-4acb-bc61-7b08d5445452" />
+>
+> - Note: this customisation is not needed on Jellyfin 10.11.X anymore
+> - On older Jellyfin versions, to enable the background wallpaper on the login screen, first tick the 'Enable the splash screen' option in your Jellyfin Dashboard below the Custom CSS Box.
+> - Second, copy and paste the following code at the end in Custom CSS box but don't save yet.
+>     ```css
+>     :root {
+>         --loginPageBgUrl: url("<YOUR-JELLYFIN-SERVER-ADDRESS>/Branding/Splashscreen?format=webp&foregroundLayer=1&quality=33&width=3840&height=2160&blur=2");
+>     }
+>     ```
+> - Third, replace `<YOUR-JELLYFIN-SERVER-ADDRESS>` with your Jellyfin server address, for example, `http://192.168.0.1:8096`.
+> - Don't forget the correct http or https in your domain.
+> - You can also modify the parameters, for example blur size or the resolution, according to your liking.
+> - You can also change the text shown on the login button by adding `--loginPageText: "placeholder";` line to the same `:root` block.
+> - Replace `"placeholder"` with the text of your choice.
+> - Once done, save and refresh your apps and webpages.
 
-- Note: this customisation is not needed on Jellyfin 10.11.X anymore
-
-- On older Jellyfin versions, to enable the background wallpaper on the login screen, first tick the 'Enable the splash screen' option in your Jellyfin Dashboard below the Custom CSS Box.
-- Second, copy and paste the following code at the end in Custom CSS box but don't save yet.
-  ```
-  :root{
-    --loginPageBgUrl: url("<YOUR-JELLYFIN-SERVER-ADDRESS>/Branding/Splashscreen?format=webp&foregroundLayer=1&quality=33&width=3840&height=2160&blur=2");
-  }
-  ```
-- Third, replace `<YOUR-JELLYFIN-SERVER-ADDRESS>` with your Jellyfin server address, for example, `http://192.168.0.1:8096`.
-- Don't forget the correct http or https in your domain.
-- You can also modify the parameters, for example blur size or the resolution, according to your liking.
-- Once done, save and refresh your apps and webpages.
 </details>
 
 <details>
-  <summary><i>3. Enable extra overlay buttons on cards on desktop</i></summary>
+  <summary><i>3. Enable or disable extra overlay buttons on cards on desktop</i></summary>
 
-  <img width="400" height="auto" alt="image" src="https://github.com/user-attachments/assets/cb8479c2-c577-4d54-a567-697f54291a3b" />
+> <img width="400" height="auto" alt="image" src="https://github.com/user-attachments/assets/cb8479c2-c577-4d54-a567-697f54291a3b" />
+>
+> - To enable 'Mark Played' and 'Add to Favorites' buttons that show up at the bottom right corner of cards while hovering, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
+>     ```css
+>     :root {
+>         --extraCardButtonsVisibility: block;
+>     }
+>     ```
+> - To hide the three-dot button that shows up next to these buttons, also include `--menuButtonVisibility: none;` in `:root{}`
+> - To undo these changes, simply remove the code block or switch between `block` and `none`.
 
-
-- To enable 'Mark Played' and 'Add to Favorites' buttons that show up at the bottom right corner of cards while hovering, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
-  ```
-  :root{
-    --extraCardButtonsVisibility: block;
-  }
-  ```
-- To hide them again, simply remove this code block or replace `block` with `none`.
 </details>
 
 <details>
   <summary><i>4. Place the overlay play button at the center of cards on desktop</i></summary>
  
-  <img width="400" height="auto" alt="image" src="https://github.com/user-attachments/assets/ebde9db6-cd2f-47b5-bdb9-cee1e9852e2e" />
+>  <img width="400" height="auto" alt="image" src="https://github.com/user-attachments/assets/ebde9db6-cd2f-47b5-bdb9-cee1e9852e2e" />
+> 
+> - To bring the mini play button to the center of cards, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
+> 	```css
+> 	:root{
+> 	  --overlayPlayButtonPosition: 50%;
+> 	}
+> 	```
+> - To undo this change, simply remove this code block or replace `50%` with `2.8em`.
    
-
-- To bring the mini play button to the center of cards, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
-  ```
-  :root{
-    --overlayPlayButtonPosition: 50%;
-  }
-  ```
-- To undo this change, simply remove this code block or replace `50%` with `2.8em`.
 </details>
 
 <details>
-  <summary><i>5. Disable the card hover effect on desktop</i></summary>
+  <summary><i>5. Disable the card shinning effect on hover on desktop</i></summary>
  
-https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd
+> https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd
+> 
+> - To disable the shine on cards that shows when hovering over them on desktop, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
+> 	```css
+> 	:root{
+> 	  --cardHoverEffect: none;
+> 	}
+> 	```
+> - To undo this change, simply remove this code block or replace `none` with `""`.
    
-- To disable the reflection on cards that shows when hovering over them on desktop, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
-```
-  :root{
-    --cardHoverEffect: none;
-  }
-```
-- To undo this change, simply remove this code block or replace `none` with `""`.
 </details>
 
 <details>
   <summary><i>6. Enable labels below library cards</i></summary>
  
-  <img width="640" height="auto" alt="image" src="https://github.com/user-attachments/assets/5999a5de-5134-4b02-94aa-6306768a251c" />
+> <img width="640" height="auto" alt="image" src="https://github.com/user-attachments/assets/5999a5de-5134-4b02-94aa-6306768a251c" />
+> 
+> - To enable text labels under the media library cards, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
+> 	```css
+> 	:root{
+> 	--libraryLabelVisibility: block;
+> 	}
+> 	```
+> - To undo this change, simply remove this code block or replace `block` with `none`.
  
-
-- To enable text labels under the media library cards, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
-```
-  :root{
-    --libraryLabelVisibility: block;
-  }
-```
-- To undo this change, simply remove this code block or replace `block` with `none`.
 </details>
 
 <details>
-  <summary><i>7. Enable experimental support for the Media Bar plugin</i></summary>
+  <summary><i>7. Enable alternative style for the Media Bar plugin</i></summary>
  
-  <img width="640" height="auto" alt="image" src="https://github.com/user-attachments/assets/3e88e270-40f9-48ba-8173-f65b94344f8d" />
+> <img width="640" height="auto" alt="image" src="https://github.com/user-attachments/assets/3e88e270-40f9-48ba-8173-f65b94344f8d" />
+> 
+> - ElegantFin does not support any plugins by default, so to to add external support for [this plugin](https://github.com/IAmParadox27/jellyfin-plugin-media-bar), copy and paste the following code right after the main import in Custom CSS box, click save and finally refresh your app/webpage.
+>   ```css
+>   @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/media-bar-plugin-support-latest-min.css");
+>   ```
+> - To undo this change, simply remove this code block.
    
+</details>
+
+<details>
+  <summary><i>8. Switch between different app bar styles</i></summary>
+ 
+> https://github.com/user-attachments/assets/b5868cd2-8df9-490d-a2b6-4386c6ddcd56
+> 
+> - There are three app bar styles to choose from: seamless (default), solid, and fully transparent.
+> - No action is needed for the seamless style, it is the default and shows a frosted blur effect.
+> - To enable the solid app bar style (cleaner with a visible border), copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
+> 	```css
+> 	:root{
+> 	  --appBarSeamlessBlur: none;
+> 	  --appBarBlurStrength: var(--blurLargest);
+> 	  --appBarColor: var(--headerColor);
+> 	  --appBarBorder: var(--defaultBorder);
+> 	  --appBarTabsPadding: 0;
+> 	}
+> 	```
+> - To enable the fully transparent app bar style, copy and paste only the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
+> 	```css
+> 	:root{
+> 	  --appBarSeamlessBlur: none;
+> 	  --appBarColor: transparent;
+> 	}
+> 	```
+> - To undo these changes, simply remove the code block.
+ 
+</details>
+
+<details>
+  <summary><i>9. Change to alternative color themes</i></summary>
+ 
+>   <img width="640" height="auto" alt="image" src="https://github.com/user-attachments/assets/0cab75aa-8fcd-4174-b0db-cc533b724bca" />
+> 
+> - Check out the [the theme Playground page](https://github.com/lscambo13/ElegantFin/discussions/221) for different color themes created by other users.
+> - You can also experiment and share your own take there if you wish.
+> - Note: ElegantFin now comes with both a dark and a light theme by default. 
+> - To switch between the dark and light themes, go to `User Settings > Display > Theme` and select either **Dark** or **Light**.
+> - The "Theme" setting above is **not** to be confused with the "Server Dashboard Theme" in the Dashboard, which is **not supported**.
+> - Only the Light and Dark theme options are supported, and Jellyfin does not automatically switch between them, so you have to change it manually.
+ 
+</details>
+
+<details>
+  <summary><i>10. Increase the size of Continue Watching cards so that they stand out</i></summary>
+ 
+> <img width="640" height="auto" alt="image" src="https://github.com/user-attachments/assets/2222d5b1-00d8-4859-90fb-eeb14d488bbd" />
+> 
+> - You can adjust their scaling `--resumeCardScale`.
+> - Use any values over 1.0 to make them bigger.
+> 	```css
+> 	:root{
+> 	  --resumeCardScale: 1.25;
+> 	}
+> 	```
+> - To undo this change, simply remove this code block or set the value back to `1`.
+ 
+</details>
+
+<details>
+  <summary><i>11. Toggle the title and logo elements on media pages</i></summary>
+ 
+> - Caution: These options control which elements appear on movie, TV show, and artist detail pages. They are meant for experienced users, so please do not randomly enable or disable them unless you know what you are doing.
+> - These variables control the visibility of the original title, clear logo, and main title on movie/TV show and artist detail pages.
+> 	```css
+> 	:root{
+> 	  /* Movie & TV Pages */
+> 	  --itemOriginalTitleVisibility: block; /* block: show the original title if available [default]; none: always hide it */
+> 	  --clearLogoVisibility: block; /* block: show the clear logo if available [default]; none: always hide it */
+> 	  --itemTitleVisibility: none; /* none: hide the main title if its logo is available [default]; block: always show it */
+> 
+> 	  /* Music Pages */
+> 	  --artistClearLogoVisibility: block; /* block: show the artist clear logo if available [default]; none: always hide it */
+> 	  --artistTitleVisibility: none; /* none: hide the artist title [default]; block: always show it */
+> 	  --artistPageBackground: unset; /* unset: dim the artist background for better clear logo visibility on desktops [default]; none: show it fully */
+> 	}
+> 	```
+> - To undo these changes, simply remove the variables you added or set the values back to their defaults shown above.
+ 
+</details>
+
+<details>
+  <summary><i>12. Toggle the visibility of some UI elements on mobile</i></summary>
+ 
+> - These variables control the visibility of small UI elements that show up on phones and small screens.
+> 	```css
+> 	:root{
+> 	  --miniOverlayButtonVisibility: block; /* block: show the mini play or three-dot button on cards on mobile [default]; none: always hide them on mobile */
+> 	  --endsAtVisibility: block; /* block: show the 'Ends at...' time indicator on phones [default]; none: always hide it on phones */
+> 	  --criticsRatingVisibility: none; /* none: hide the critics tomato rating on phones [default]; block: show it on phones */
+> 	}
+> 	```
+> - To undo these changes, simply remove the variables you added or set the values back to their defaults shown above.
+ 
+</details>
+
+<details>
+  <summary><i>13. Adjust component sizes (advanced)</i></summary>
+ 
+> - Caution: Changing these values may break the layout on different screen sizes, so please only adjust them if you are comfortable with CSS.
+> - These variables control the standard corner radius, border, and spacing values used throughout the theme.
+> 	```css
+> 	:root{
+>     /* Corner radius */
+> 	  --largerRadius: 1.25em; 
+> 	  --largeRadius: 1em; 
+> 	  --smallRadius: 0.5em; 
+> 	  --smallerRadius: 0.375em;
+>
+>     /* Border thickness */
+> 	  --borderWidth: 0.06em; 
+> 	  --borderWidthDouble: 0.12em; 
+> 	}
+> 	```
+> - To undo these changes, simply remove the variables you added or set the values back to their defaults shown above.
  
-- ElegantFin does not support any plugins by default, so to to add external support for [this plugin](https://github.com/IAmParadox27/jellyfin-plugin-media-bar), copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
-```
-	@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/media-bar-plugin-support-latest-min.css");
-```
-- To undo this change, simply remove this code block.
 </details>
 
 <hr>
 
 ### 🆗 Tested on
-- Jellyfin Server v10.11.1
+
+- Jellyfin Server v10.11.11
 - Microsoft Edge (Chromium)
 - Jellyfin Android App v2.6.3
 
 <hr>
 
 ### 🛠️ Troubleshooting
-<details>
-  <summary>1️⃣ - <i>How do I check if I am using the latest version of ElegantFin?</i></summary>
 
-- Check the version number at the bottom in the Settings screen. 
-- It should be something like `ElegantFin v25.10.XX`.
+<details>
+  <summary>1️⃣ - <i>How do I check which version of ElegantFin I am using?</i></summary>
+ 
+> - Check the version number at the bottom in the Settings screen.
+> - It should be something like `ElegantFin v26.YY.ZZ`.
+> 
+> <img width="640" height="auto" alt="image" src="https://github.com/user-attachments/assets/c697f508-16db-4b1a-bfac-123decd943fa" />
+ 
 </details>
 
 <details>
   <summary>2️⃣ - <i>I see that a newer version is available, but I have not received it yet. Why?</i></summary>
  
-- If the Settings footer shows an old version, it means that you are still using an old cache.
-- Once that cache is updated, the new version will be loaded automatically. 
-- There are multiple ways to clear the cache depending on your OS, smartphone or TV. Look online if you don't know.
-- On the web version, you can force a hard refresh of the page using CTRL + F5.
-- On apps, try signing out and back in again. OR in case of Jellyfin Media Player on windows, you might need to delete the cache folder. That should definitely pull the latest version.
+> - If the Settings footer shows an old version, it means that you are still using an old cache.
+> - Once that cache is updated, the new version will be loaded automatically.
+> - There are multiple ways to clear the cache depending on your OS, smartphone or TV. Look online if you don't know.
+> - On the web version, you can force a hard refresh of the page using CTRL + F5.
+> - On apps, try signing out and back in again. OR in case of Jellyfin Media Player on windows, you might need to delete the cache folder.
+ 
 </details>
 
 <details>
   <summary>3️⃣ - <i>Why do I notice visual bugs and inconsistencies on Jellyfin Media Player?</i></summary>
  
-- As of version 1.12.0, JMP is based on Qt 5.x which uses a very outdated web engine, so it does not support many new CSS features. Once a new version based on Qt 6.x is released, most issues should automatically be resolved. Until then, JMP is unsupported and I recommend using the web app instead.
+> - JMP is based on Qt 5.x which uses a very outdated web engine. It does not support many new CSS features, so it is unsupported.
+> - [Jellyfin Desktop](https://github.com/jellyfin/jellyfin-desktop) is the new official client moving forward. It seems to be in testing right now. Use it for better compatibility or use the web app instead.
+ 
 </details>
 
 <details>
   <summary>4️⃣ - <i>Does it work on the AndroidTV version of the Jellyfin app?</i></summary>
  
-- As of version 0.18.11, the official Jellyfin app on the AndroidTVs does not support css themes, but the Android mobile phone app supports them. The WebOS version of the app seems to be based on the mobile phone version, so it supports the theme just fine.
+> - As of version 0.18.11, the official Jellyfin app on the AndroidTVs does not support css themes, but the Android mobile phone app supports them. The WebOS version of the app seems to be based on the mobile phone version, so it supports the theme just fine.
+ 
 </details>
 
 <details>
   <summary>5️⃣ - <i>All the icons on my LG TV seem to be broken. How to fix them?</i></summary>
  
-- It seems that modern Material Icons which this theme uses are [not compatible on some WebOS TVs](https://github.com/lscambo13/ElegantFin/issues/39). There is a [huge similar thread](https://www.reddit.com/r/youtubetv/comments/e27go3/chinese_symbols_instead_of_icons_on_lg_tv/) about this.
-- This bug can be fixed by using the older icons, so I have implemented the following workaround to bring back older, supported icons.
-- Simply add the following code at the end in Custom CSS box and save, then refresh your apps and webpages:
+> - It seems that modern Material Icons which this theme uses are [not compatible on some WebOS TVs](https://github.com/lscambo13/ElegantFin/issues/39). There is a [huge similar thread](https://www.reddit.com/r/youtubetv/comments/e27go3/chinese_symbols_instead_of_icons_on_lg_tv/) about this.
+> - This bug can be fixed by using the older icons, so I have implemented the following workaround to bring back older, supported icons.
+> - Simply add the following code at the end in Custom CSS box and save, then refresh your apps and webpages:
+>     ```css
+>     :root{
+>       --iconPack: 'Material Icons';
+>     }
+>     ```
  
-  ```
-  :root{
-    --iconPack: 'Material Icons';
-  }
-  ```
 </details>
 
 <details>
   <summary>6️⃣ - <i>How do I report bugs/issues?</i></summary>
  
-- First check [here](https://github.com/lscambo13/ElegantFin/issues?q=) whether a similar issue has been reported already. If it exists, upvote and comment there to let me know. 
-- Alternatively, create a new issue [here](https://github.com/lscambo13/ElegantFin/issues/new/choose).
-
+> - First check [issues](https://github.com/lscambo13/ElegantFin/issues?q=is%3Aissue) and [discussions](https://github.com/lscambo13/ElegantFin/discussions?discussions_q=) to see whether a similar issue has been reported already. If it exists, upvote and comment there to let me know.
+> - Before reporting a bug, make sure the issue is not caused by a plugin. Temporarily disable your plugins, or remove any plugin add-on CSS, to see if the issue persists.
+> - Alternatively, create a new issue [here](https://github.com/lscambo13/ElegantFin/issues/new/choose).
  
 </details>
+
 <details>
   <summary>7️⃣ - <i>When can I expect another update?</i></summary>
  
-- 🤷
+> - 🤷
+
 </details>
 
 <hr>
@@ -290,8 +443,12 @@ https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd
 
 Please read the [Contributor Guidelines](./CONTRIBUTING.md) before opening pull requests.
 
+This is a hobby project. If it helped you, your support really means a lot.
+
+[![Buy me a coffee](https://img.buymeacoffee.com/button-api/?text=Buy%20me%20a%20coffee&emoji=☕&slug=lscambo13&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff)](https://www.buymeacoffee.com/lscambo13)
+
+<hr>
 
 ### 🙏 Feedback Appreciated
 
 Please use the right template when creating an [issue](https://github.com/lscambo13/ElegantFin/issues/new/choose) to [report bugs](https://github.com/lscambo13/ElegantFin/issues/new?template=bug_report.md) or [provide suggestions](https://github.com/lscambo13/ElegantFin/issues/new?template=feature_request.md).
-

Theme/ElegantFin-jellyfin-theme-build-latest-minified.css

@@ -1,2 +1 @@
-/* ElegantFin Theme v25.10.27 for Jellyfin by lscambo13 */
- @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');:root{--elegantFinFooterText:"ElegantFin v25.10.27";color-scheme:dark;--darkerGradientPoint:#111827;--darkerGradientPointAlpha:rgba(17,24,39,.85);--lighterGradientPoint:#1d2635;--lighterGradientPointAlpha:rgba(29,38,53,.85);--headerColor:rgba(30,40,54,.8);--drawerColor:rgba(30,40,54,.9);--borderColor:hsl(214,13%,32%);--darkerBorderColor:hsl(214,13%,22%);--lighterBorderColor:hsla(0,0%,100%,.2);--selectorBackgroundColor:rgb(55,65,81);--selectorBackgroundColorAlpha:rgba(55,65,81,.5);--activeColorAlpha:rgba(119,91,244,.9);--activeColor:rgb(119,91,244);--osdSeekBarPlayedColor:var(--textColor);--osdSeekBarBufferedColorAlpha:rgba(128,128,128,.5);--osdSeekBarThumbColor:white;--tableBodyColor:rgb(31 41 55 / 1);--uiAccentColor:rgb(117 111 226);--btnMiniPlayColor:rgb(41 154 93);--btnMiniPlayBorderColor:rgb(50,167,105);--btnDeleteColor:rgb(169,29,29);--btnDeleteBorderColor:rgb(217,84,84);--btnSubmitColor:rgb(61,54,178);--btnSubmitBorderColor:rgb(117 111 226);--checkboxCheckedBgColor:rgb(79,70,229);--highlightOutlineColor:rgb(37,99,235);--defaultBorder:var(--borderWidth) solid var(--borderColor);--defaultLighterBorder:var(--borderWidth) solid var(--lighterBorderColor);--textColor:rgb(209,213,219);--dimTextColor:rgb(156,163,175);--backgroundGradient:linear-gradient(0deg,var(--darkerGradientPoint) 35%,var(--lighterGradientPoint));--cardBackgroundGradient:linear-gradient(0deg,var(--darkerGradientPoint),25%,var(--lighterGradientPoint));--headerColorGradient:linear-gradient(180deg,rgba(30,40,54,.95) 30%,55%,transparent 90%);--headerColorGradientAlt:linear-gradient(180deg,rgba(30,40,54,1),70%,transparent);--headerBlurMask:linear-gradient(180deg,white 50%,85%,transparent);--cardFooterGradient:linear-gradient(0deg,rgb(0 0 0 / 90%),40%,transparent);--topOSDGradient:linear-gradient(180deg,hsla(0,0%,0%,.8),45%,hsla(0,0%,0%,0));--bottomOSDGradient:linear-gradient(0deg,hsla(0,0%,0%,.8),45%,hsla(0,0%,0%,0));--hoverGradientV:linear-gradient(0deg,transparent,rgb(255 255 255 / 100%) 45%,rgb(255 255 255 / 100%) 55%,transparent);--hoverGradientH:linear-gradient(90deg,transparent,rgb(255 255 255 / 100%) 45%,rgb(255 255 255 / 100%) 55%,transparent);--itemBackdropMask:linear-gradient(180deg,rgba(0,0,0,.8),75%,transparent);--largerRadius:1.25em;--largeRadius:1em;--smallRadius:.5em;--smallerRadius:.375em;--borderWidth:.06em;--borderWidthDouble:.12em;--sidePadding:3.3%;--itemColumnGap:1em;--primaryItemPageNegativeSpace:12vh;--secondaryItemPageNegativeSpace:35vh;--blurSmallest:blur(2px);--blurDefault:blur(5px);--blurLarge:blur(10px);--blurLargest:blur(20px);--shadow:.1em .1em .15em hsla(0,0%,0%,.3);--headerBlurLayerVisibility:"";--headerBackground:var(--headerColorGradient);--loginPageBgUrl:url("");--loginPageText:"Sign in to continue";--overlayPlayButtonPosition:2.8em;--iconPack:'Material Icons Round',Material Icons;--extraCardButtonsVisibility:none;--libraryLabelVisibility:none;--cardHoverEffect:"";--appBarHeight:5em;--backdropPositionY:50%}html{font-family:"Inter",serif;font-optical-sizing:auto;font-weight:425;font-style:normal;-webkit-tap-highlight-color:transparent!important}.layout-mobile{--itemColumnGap:0;--headerColorGradient:var(--headerColorGradientAlt);--blurLargest:blur(12px);--headerBlurMask:linear-gradient(180deg,white 60%,90%,transparent)}@font-face{font-family:'Material Icons Round';font-style:normal;font-weight:100 700;font-display:swap;src:url(https://fonts.gstatic.com/s/materialsymbolsrounded/v267/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2) format('woff2')}.material-icons{font-family:var(--iconPack)!important;font-weight:normal;font-style:normal;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;line-height:1;vertical-align:middle;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 48}.material-icons.info_outline:before{font-family:Material Icons}.dashboardFooter{font-family:"Noto Sans",serif;transition:transform 50ms}#myPreferencesMenuPage>div:after,.dashboardFooter::after{content:var(--elegantFinFooterText);font-size:.8em;color:var(--borderColor);display:inline-grid;width:-webkit-fill-available;justify-content:center;font-weight:600}::selection{background:var(--activeColorAlpha)}.cardImageIcon{color:var(--borderColor)}.cardPadder .cardImageIcon{color:var(--selectorBackgroundColorAlpha)}.card:focus .cardBox.visualCardBox,.card:focus .cardBox:not(.visualCardBox) .cardScalable{border-color:white!important}.mdl-radio__focus-circle,.mdl-radio.show-focus .mdl-radio__button:focus+.mdl-radio__circles .mdl-radio__outer-circle,.mdl-radio.show-focus .mdl-radio__button:focus+.mdl-radio__circles .mdl-radio__inner-circle{background:var(--uiAccentColor);color:var(--uiAccentColor)}.emby-button.shoLine truncated
+/*! ElegantFin Theme v26.06.06 for Jellyfin by lscambo13 */@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");:root{--activeColor:#775bf4;--activeColorAlpha:rgba(119,91,244,.9);--appBarHeight:5em;--artistClearLogoVisibility:block;--artistPageBackground:unset;--artistTitleVisibility:none;--backdropTrimFromTop:10%;--backgroundAlphaOverlay:linear-gradient(180deg,var(--darkerGradientPointAlpha) 80%,transparent);--backgroundGradient:linear-gradient(0deg,var(--darkerGradientPoint) 35%,var(--lighterGradientPoint));--blurDefault:blur(5px);--blurLarge:blur(10px);--blurLargest:blur(20px);--blurSmallest:blur(2px);--borderColor:#47505c;--borderWidth:0.06em;--borderWidthDouble:0.12em;--bottomOSDGradient:linear-gradient(0deg,rgba(0,0,0,.8),45%,transparent);--btnDeleteBorderColor:#d95454;--btnDeleteColor:#a91d1d;--btnMiniPlayBorderColor:#32a769;--btnMiniPlayColor:#299a5d;--btnSubmitBorderColor:#756fe2;--btnSubmitColor:#3d36b2;--cardBackgroundGradient:linear-gradient(0deg,var(--darkerGradientPoint),25%,var(--lighterGradientPoint));--cardFooterGradient:linear-gradient(0deg,rgba(0,0,0,.9),40%,transparent);--cardHoverEffect:"";--checkboxCheckedBgColor:#4f46e5;--clearLogoVisibility:block;--darkerBorderColor:#31373f;--darkerGradientPoint:#111827;--darkerGradientPointAlpha:rgba(17,24,39,.85);--defaultBorder:var(--borderWidth) solid var(--borderColor);--defaultLighterBorder:var(--borderWidth) solid var(--lighterBorderColor);--dimTextColor:#9ca3af;--drawerColor:rgba(30,40,54,.9);--elegantFinFooterText:"ElegantFin v26.06.06";--extraCardButtonsVisibility:none;--gradientPointAlpha:rgba(29,38,53,.3);--headerBackground:var(--headerColorGradient);--headerBlurLayerVisibility:"";--headerBlurMask:linear-gradient(180deg,#fff 50%,85%,transparent);--headerColor:rgba(30,40,54,.8);--headerColorGradient:linear-gradient(180deg,rgba(30,40,54,.95) 30%,55%,transparent 90%);--headerColorGradientAlt:linear-gradient(180deg,#1e2836,70%,transparent);--highlightOutlineColor:#2563eb;--hoverGradientH:linear-gradient(90deg,transparent,hsla(0,0%,100%,.35) 45%,hsla(0,0%,100%,.35) 55%,transparent);--hoverGradientV:linear-gradient(0deg,transparent,hsla(0,0%,100%,.35) 45%,hsla(0,0%,100%,.35) 55%,transparent);--iconPack:"Material Symbols Rounded";--itemBackdropMask:linear-gradient(180deg,rgba(0,0,0,.8),75%,transparent);--itemColumnGap:1em;--itemOriginalTitleVisibility:block;--itemTitleVisibility:none;--largeRadius:1em;--largerRadius:1.25em;--libraryLabelVisibility:none;--lighterBorderColor:hsla(0,0%,100%,.2);--lighterGradientPoint:#1d2635;--lighterGradientPointAlpha:rgba(29,38,53,.85);--loginPageBgUrl:url();--loginPageText:"Sign in to continue";--menuButtonVisibility:block;--minEpisodeCardWidth:26em;--miniOverlayButtonVisibility:block;--osdSeekBarBufferedColorAlpha:hsla(0,0%,50%,.5);--osdSeekBarPlayedColor:var(--textColor);--osdSeekBarThumbColor:#fff;--overlayPlayButtonPosition:2.8em;--resumeCardScale:1;--selectorBackgroundColor:#374151;--selectorBackgroundColorAlpha:rgba(55,65,81,.5);--shadow:0.1em 0.1em 0.15em rgba(0,0,0,.3);--sidePadding:3.3%;--smallerRadius:0.375em;--smallRadius:0.5em;--tableBodyColor:#1f2937;--textColor:#d1d5db;--topOSDGradient:linear-gradient(180deg,rgba(0,0,0,.8),45%,transparent);--uiAccentColor:#756fe2;color-scheme:dark}html{font-family:Inter,sans-serif;font-optical-sizing:auto;font-style:normal;font-weight:425;-webkit-tap-highlight-color:transparent!important}body{--clearLogoBottomSpace:11em;--primaryItemPageNegativeSpace:14vh;--secondaryItemPageNegativeSpace:60vh}select{text-overflow:ellipsis}.layout-desktop>body:has(>audio[src]){--primaryItemPageNegativeSpace:calc(14vh + 5em);--secondaryItemPageNegativeSpace:calc(60vh + 5em)}.layout-mobile{--blurLargest:blur(12px);--headerBlurMask:linear-gradient(180deg,#fff 60%,90%,transparent);--headerColorGradient:var(--headerColorGradientAlt);--itemColumnGap:0.5em}.layout-mobile>body{--secondaryItemPageNegativeSpace:45vh}@font-face{font-family:Material Symbols Rounded Minimal;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/l/font?kit=sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjzarESMdAUY9qjb3u1M7e05tMSFFiwiIx7ihGnzWmz-lkbsBJUso54WUKiEWtV5-yu0mchXaMnO1vqpcxiqEd46a1XUtwWncyNNmxYr8hocRsPBG56BqeEkny0qMU_aSz_M2MYR8p9qc8uUfT0rnccAg__qWWJGuzJMRCBsajdQcef&skey=70ddea8fe54d532e&v=v346) format("woff2")}@font-face{font-family:Material Symbols Rounded;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/s/materialsymbolsrounded/v346/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2) format("woff2")}.material-icons{direction:ltr;display:inline-block;font-family:var(--iconPack),Material Icons!important;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;font-style:normal;font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 48;font-weight:400;letter-spacing:normal;line-height:1;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision;text-transform:none;vertical-aliLine truncated

Theme/assets/add-ons/custom-media-covers-latest-min.css

@@ -1,2 +1 @@
-/* Add-on: Custom media covers v25.08.08 for the ElegantFin Theme for Jellyfin by lscambo13 */
-:root{--colorOverlayMoviesCover:rgb(193,103,104);--colorOverlayTvshowsCover:rgb(140,149,43);--colorOverlayLivetvCover:rgb(17,98,159);--colorOverlayPlaylistsCover:rgb(118,61,216);--colorOverlayBoxsetsCover:rgb(219,180,53);--colorOverlayMusicCover:rgb(11,93,72);--colorOverlayHomevideosCover:rgb(39,90,185);--colorOverlayBooksCover:rgb(166,68,70);--colorOverlayFoldersCover:rgb(173,60,113);--urlMoviesCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/movies.webp);--urlTvshowsCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/tvshows.webp);--urlLivetvCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/livetv.webp);--urlPlaylistsCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/playlists.webp);--urlBoxsetsCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/boxsets.webp);--urlMusicCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/music.webp);--urlHomevideosCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/homevideos.webp);--urlBooksCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/books.webp);--urlFoldersCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/folders.webp)}.card-withuserdata[data-isfolder="true"] .cardImageContainer.defaultCardBackground{filter:contrast(.85);background-size:cover!important;background-position:50%!important;background-blend-mode:multiply}.card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"],[data-type="Series"],[data-type="Folder"],[data-type="Season"],[data-type="Playlist"]) .cardImageContainer.cardContent::before{position:absolute;font-size:clamp(1em,max(2.5vh,2vw),2.5em);margin-bottom:.175em;font-weight:800;color:white;font-family:'Noto Sans';text-align:center}.card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"],[data-type="Series"],[data-type="Folder"]) .cardImageIcon.material-icons:not(.quiz)::before{display:none}div[data-collectiontype="movies"] .cardImageContainer.cardContent{background:var(--colorOverlayMoviesCover)!important;background-image:var(--urlMoviesCover)!important}div[data-collectiontype="tvshows"] .cardImageContainer.cardContent{background:var(--colorOverlayTvshowsCover)!important;background-image:var(--urlTvshowsCover)!important}div[data-collectiontype="livetv"] .cardImageContainer.cardContent{background:var(--colorOverlayLivetvCover)!important;background-image:var(--urlLivetvCover)!important}div[data-collectiontype="music"] .cardImageContainer.cardContent{background:var(--colorOverlayMusicCover)!important;background-image:var(--urlMusicCover)!important}div[data-collectiontype="homevideos"] .cardImageContainer.cardContent{background:var(--colorOverlayHomevideosCover)!important;background-image:var(--urlHomevideosCover)!important}div[data-collectiontype="books"] .cardImageContainer.cardContent{background:var(--colorOverlayBooksCover)!important;background-image:var(--urlBooksCover)!important}div[data-collectiontype="boxsets"] .cardImageContainer.cardContent{background:var(--colorOverlayBoxsetsCover)!important;background-image:var(--urlBoxsetsCover)!important}div[data-collectiontype="folders"] .cardImageContainer.cardContent{background:var(--colorOverlayFoldersCover)!important;background-image:var(--urlFoldersCover)!important}div[data-collectiontype="playlists"] .cardImageContainer.cardContent{background:var(--colorOverlayPlaylistsCover)!important;background-image:var(--urlPlaylistsCover)!important}.card-withuserdata[data-isfolder="true"] .cardImageContainer.cardContent{filter:contrast(.85);background-size:cover!important;background-position:50%!important;background-blend-mode:multiply}div[data-collectiontype="movies"] .cardImageContainer.cardContent::before{content:"Movies"}div[data-collectiontype="tvshows"] .cardImageContainer.cardContent::before{content:"TV Shows"}div[data-collectiontype="livetv"] .cardImageContainer.cardContent::before{content:"Live TV"}div[data-collectiontype="music"] .cardImageContainer.cardContent::before{content:"Music"}div[data-collectiontype="homevideos"] .cardImageContainer.cardContent::before{content:"Home Videos"}div[data-collectiontype="books"] .cardImageContainer.cardContent::before{content:"Books"}div[data-collectiontype="boxsets"] .cardImageContainer.cardContent::before{content:"Collections"}div[data-collectiontype="folders"] .cardImageContainer.cardContent::before{content:"Folders"}div[data-collectiontype="playlists"] .cardImageContainer.cardContent::before{content:"Playlists"}.card-withuserdata[data-isfolder="true"] .cardImageContainer.cardContent{filteLine truncated
+/*! Add-on: Custom Media Covers v26.06.06 for the ElegantFin Theme for Jellyfin by lscambo13 */:root{--colorOverlayAnimeCover:#bdcb63;--colorOverlayBooksCover:#a64446;--colorOverlayBoxsetsCover:#dbb435;--colorOverlayFoldersCover:#ad3c71;--colorOverlayHomevideosCover:#275ab9;--colorOverlayLivetvCover:#11629f;--colorOverlayMixedCover:#c23a3a;--colorOverlayMoviesCover:#c16768;--colorOverlayMusicCover:#0b5d48;--colorOverlayPlaylistsCover:#763dd8;--colorOverlayRecordedmoviesCover:#343434;--colorOverlayRecordedtvCover:#78641c;--colorOverlaySportsCover:#e97e3c;--colorOverlayTvshowsCover:#8c952b;--urlAnimeCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/anime.webp);--urlBooksCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/books.webp);--urlBoxsetsCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/boxsets.webp);--urlFoldersCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/folders.webp);--urlHomevideosCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/homevideos.webp);--urlLivetvCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/livetv.webp);--urlMixedCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/mixed.webp);--urlMoviesCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/movies.webp);--urlMusicCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/music.webp);--urlPlaylistsCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/playlists.webp);--urlRecordedmoviesCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/recordedmovies.webp);--urlRecordedtvCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/recordedtv.webp);--urlSportsCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/sports.webp);--urlTvshowsCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/tvshows.webp)}[data-type=CollectionFolder] .cardContent,[data-type=CollectionFolder] .defaultCardBackground,[data-type=UserView] .cardContent,[data-type=UserView] .defaultCardBackground{background-blend-mode:multiply;background-position:50%!important;background-size:cover!important;filter:contrast(.85)}.layout-tv [data-type=CollectionFolder]:before,.layout-tv [data-type=UserView]:before,[data-type=CollectionFolder] .cardContent:before,[data-type=UserView] .cardContent:before{color:#fff;content:attr(aria-label);font-family:Noto Sans;font-size:clamp(1em,max(2.5vh,2vw),2em);font-weight:800;position:absolute;text-align:center;white-space:normal;width:94%}.layout-tv [data-type=CollectionFolder]:before,.layout-tv [data-type=UserView]:before{align-content:center;bottom:0;display:grid;top:0;z-index:1}[data-type=CollectionFolder] .cardImageIcon:not(.quiz):before,[data-type=UserView] .cardImageIcon:not(.quiz):before{display:none}[data-collectiontype=movies] .cardContent{background-color:var(--colorOverlayMoviesCover)!important;background-image:var(--urlMoviesCover)!important}[data-collectiontype=tvshows] .cardContent{background-color:var(--colorOverlayTvshowsCover)!important;background-image:var(--urlTvshowsCover)!important}[data-collectiontype=livetv] .cardContent{background-color:var(--colorOverlayLivetvCover)!important;background-image:var(--urlLivetvCover)!important}[data-collectiontype=music] .cardContent{background-color:var(--colorOverlayMusicCover)!important;background-image:var(--urlMusicCover)!important}[data-collectiontype=homevideos] .cardContent{background-color:var(--colorOverlayHomevideosCover)!important;background-image:var(--urlHomevideosCover)!important}[data-collectiontype=books] .cardContent{background-color:var(--colorOverlayBooksCover)!important;background-image:var(--urlBooksCover)!important}[data-collectiontype=boxsets] .cardContent{background-color:var(--colorOverlayBoxsetsCover)!important;background-image:var(--urlBoxsetsCover)!important}[data-collectiontype=folders] .cardContent{background-color:var(--colorOverlayFoldersCover)!important;background-image:var(--urlFoldersCover)!important}[data-collectiontype=playlists] .cardContent{background-color:var(--colorOverlayPlaylistsCover)!important;background-image:var(--urlPlaylistsCover)!important}[data-type=CollectionFolder][data-prefix=MIX] .cardContent{background-color:var(--colorOverlayMixedCover)!important;background-image:var(--urlMixedCover)!important}[dLine truncated

Theme/assets/add-ons/custom-media-covers-nightly.css

@@ -1,4 +1,4 @@
-/* Add-on: Custom media covers nightly for the ElegantFin Theme for Jellyfin by lscambo13 */
+/*! Add-on: Custom Media Covers Nightly for the ElegantFin Theme for Jellyfin by lscambo13 */
 
 :root {
     /* my media library default covers customizations */
@@ -14,6 +14,8 @@
     --colorOverlayMixedCover: rgb(194, 58, 58);
     --colorOverlayRecordedmoviesCover: rgb(52, 52, 52);
     --colorOverlayRecordedtvCover: rgb(120, 100, 28);
+    --colorOverlayAnimeCover: rgb(189, 203, 99);
+    --colorOverlaySportsCover: rgb(233, 126, 60);
     --urlMoviesCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/movies.webp);
     --urlTvshowsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/tvshows.webp);
     --urlLivetvCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/livetv.webp);
@@ -26,6 +28,8 @@
     --urlMixedCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/mixed.webp);
     --urlRecordedmoviesCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/recordedmovies.webp);
     --urlRecordedtvCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/recordedtv.webp);
+    --urlAnimeCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/anime.webp);
+    --urlSportsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/sports.webp);
 }
 
 [data-type="CollectionFolder"] .defaultCardBackground,
@@ -40,8 +44,9 @@
 
 [data-type="CollectionFolder"] .cardContent::before,
 [data-type="UserView"] .cardContent::before {
+    content: attr(aria-label);
     position: absolute;
-    font-size: clamp(1em, max(2.5vh, 2vw), 2.5em);
+    font-size: clamp(1em, max(2.5vh, 2vw), 2em);
     font-weight: 800;
     color: white;
     font-family: "Noto Sans";
@@ -50,6 +55,24 @@
     white-space: normal;
 }
 
+.layout-tv [data-type="CollectionFolder"]::before,
+.layout-tv [data-type="UserView"]::before {
+    content: attr(aria-label);
+    position: absolute;
+    display: grid;
+    align-content: center;
+    top: 0;
+    bottom: 0;
+    font-size: clamp(1em, max(2.5vh, 2vw), 2em);
+    font-weight: 800;
+    color: white;
+    font-family: "Noto Sans";
+    text-align: center;
+    width: 94%;
+    white-space: normal;
+    z-index: 1;
+}
+
 [data-type="CollectionFolder"] .cardImageIcon:not(.quiz)::before,
 [data-type="UserView"] .cardImageIcon:not(.quiz)::before {
     display: none;
@@ -100,7 +123,7 @@
     background-image: var(--urlPlaylistsCover) !important;
 }
 
-[data-prefix="MIX"] .cardContent {
+[data-type="CollectionFolder"][data-prefix="MIX"] .cardContent {
     background-color: var(--colorOverlayMixedCover) !important;
     background-image: var(--urlMixedCover) !important;
 }
@@ -110,12 +133,17 @@
     background-image: var(--urlRecordedmoviesCover) !important;
 }
 
-[data-prefix="REC"] .cardContent {
+[data-type="CollectionFolder"][data-prefix="REC"] .cardContent {
     background-color: var(--colorOverlayRecordedtvCover) !important;
     background-image: var(--urlRecordedtvCover) !important;
 }
 
-[data-type="CollectionFolder"] .cardContent::before,
-[data-type="UserView"] .cardContent::before {
-    content: attr(aria-label);
+[data-type="CollectionFolder"][data-prefix="ANI"] .cardContent {
+    background-color: var(--colorOverlayAnimeCover) !important;
+    background-image: var(--urlAnimeCover) !important;
+}
+
+[data-type="CollectionFolder"][data-prefix="SPO"] .cardContent {
+    background-color: var(--colorOverlaySportsCover) !important;
+    background-image: var(--urlSportsCover) !important;
 }

Theme/assets/add-ons/custom-media-covers-v25.11.25.css

@@ -0,0 +1,135 @@
+/* Add-on: Custom media covers v25.11.25 for the ElegantFin Theme for Jellyfin by lscambo13 */
+
+:root {
+    /* my media library default covers customizations */
+    --colorOverlayMoviesCover: rgb(193, 103, 104);
+    --colorOverlayTvshowsCover: rgb(140, 149, 43);
+    --colorOverlayLivetvCover: rgb(17, 98, 159);
+    --colorOverlayPlaylistsCover: rgb(118, 61, 216);
+    --colorOverlayBoxsetsCover: rgb(219, 180, 53);
+    --colorOverlayMusicCover: rgb(11, 93, 72);
+    --colorOverlayHomevideosCover: rgb(39, 90, 185);
+    --colorOverlayBooksCover: rgb(166, 68, 70);
+    --colorOverlayFoldersCover: rgb(173, 60, 113);
+    --colorOverlayMixedCover: rgb(194, 58, 58);
+    --colorOverlayRecordedmoviesCover: rgb(52, 52, 52);
+    --colorOverlayRecordedtvCover: rgb(120, 100, 28);
+    --urlMoviesCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/movies.webp);
+    --urlTvshowsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/tvshows.webp);
+    --urlLivetvCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/livetv.webp);
+    --urlPlaylistsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/playlists.webp);
+    --urlBoxsetsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/boxsets.webp);
+    --urlMusicCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/music.webp);
+    --urlHomevideosCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/homevideos.webp);
+    --urlBooksCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/books.webp);
+    --urlFoldersCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/folders.webp);
+    --urlMixedCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/mixed.webp);
+    --urlRecordedmoviesCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/recordedmovies.webp);
+    --urlRecordedtvCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/recordedtv.webp);
+}
+
+[data-type="CollectionFolder"] .defaultCardBackground,
+[data-type="UserView"] .defaultCardBackground,
+[data-type="CollectionFolder"] .cardContent,
+[data-type="UserView"] .cardContent {
+    filter: contrast(0.85);
+    background-size: cover !important;
+    background-position: 50% !important;
+    background-blend-mode: multiply;
+}
+
+[data-type="CollectionFolder"] .cardContent::before,
+[data-type="UserView"] .cardContent::before {
+    content: attr(aria-label);
+    position: absolute;
+    font-size: clamp(1em, max(2.5vh, 2vw), 2em);
+    font-weight: 800;
+    color: white;
+    font-family: "Noto Sans";
+    text-align: center;
+    width: 94%;
+    white-space: normal;
+}
+
+.layout-tv [data-type="CollectionFolder"]::before,
+.layout-tv [data-type="UserView"]::before {
+    content: attr(aria-label);
+    position: absolute;
+    display: grid;
+    align-content: center;
+    top: 0;
+    bottom: 0;
+    font-size: clamp(1em, max(2.5vh, 2vw), 2em);
+    font-weight: 800;
+    color: white;
+    font-family: "Noto Sans";
+    text-align: center;
+    width: 94%;
+    white-space: normal;
+    z-index: 1;
+}
+
+[data-type="CollectionFolder"] .cardImageIcon:not(.quiz)::before,
+[data-type="UserView"] .cardImageIcon:not(.quiz)::before {
+    display: none;
+}
+
+[data-collectiontype="movies"] .cardContent {
+    background-color: var(--colorOverlayMoviesCover) !important;
+    background-image: var(--urlMoviesCover) !important;
+}
+
+[data-collectiontype="tvshows"] .cardContent {
+    background-color: var(--colorOverlayTvshowsCover) !important;
+    background-image: var(--urlTvshowsCover) !important;
+}
+
+[data-collectiontype="livetv"] .cardContent {
+    background-color: var(--colorOverlayLivetvCover) !important;
+    background-image: var(--urlLivetvCover) !important;
+}
+
+[data-collectiontype="music"] .cardContent {
+    background-color: var(--colorOverlayMusicCover) !important;
+    background-image: var(--urlMusicCover) !important;
+}
+
+[data-collectiontype="homevideos"] .cardContent {
+    background-color: var(--colorOverlayHomevideosCover) !important;
+    background-image: var(--urlHomevideosCover) !important;
+}
+
+[data-collectiontype="books"] .cardContent {
+    background-color: var(--colorOverlayBooksCover) !important;
+    background-image: var(--urlBooksCover) !important;
+}
+
+[data-collectiontype="boxsets"] .cardContent {
+    background-color: var(--colorOverlayBoxsetsCover) !important;
+    background-image: var(--urlBoxsetsCover) !important;
+}
+
+[data-collectiontype="folders"] .cardContent {
+    background-color: var(--colorOverlayFoldersCover) !important;
+    background-image: var(--urlFoldersCover) !important;
+}
+
+[data-collectiontype="playlists"] .cardContent {
+    background-color: var(--colorOverlayPlaylistsCover) !important;
+    background-image: var(--urlPlaylistsCover) !important;
+}
+
+[data-prefix="MIX"] .cardContent {
+    background-color: var(--colorOverlayMixedCover) !important;
+    background-image: var(--urlMixedCover) !important;
+}
+
+[data-collectiontype="movies"][data-prefix="REC"] .cardContent {
+    background-color: var(--colorOverlayRecordedmoviesCover) !important;
+    background-image: var(--urlRecordedmoviesCover) !important;
+}
+
+[data-prefix="REC"] .cardContent {
+    background-color: var(--colorOverlayRecordedtvCover) !important;
+    background-image: var(--urlRecordedtvCover) !important;
+}

Theme/assets/add-ons/custom-media-covers-v26.06.06.css

@@ -0,0 +1,149 @@
+/*! Add-on: Custom Media Covers v26.06.06 for the ElegantFin Theme for Jellyfin by lscambo13 */
+
+:root {
+    /* my media library default covers customizations */
+    --colorOverlayMoviesCover: rgb(193, 103, 104);
+    --colorOverlayTvshowsCover: rgb(140, 149, 43);
+    --colorOverlayLivetvCover: rgb(17, 98, 159);
+    --colorOverlayPlaylistsCover: rgb(118, 61, 216);
+    --colorOverlayBoxsetsCover: rgb(219, 180, 53);
+    --colorOverlayMusicCover: rgb(11, 93, 72);
+    --colorOverlayHomevideosCover: rgb(39, 90, 185);
+    --colorOverlayBooksCover: rgb(166, 68, 70);
+    --colorOverlayFoldersCover: rgb(173, 60, 113);
+    --colorOverlayMixedCover: rgb(194, 58, 58);
+    --colorOverlayRecordedmoviesCover: rgb(52, 52, 52);
+    --colorOverlayRecordedtvCover: rgb(120, 100, 28);
+    --colorOverlayAnimeCover: rgb(189, 203, 99);
+    --colorOverlaySportsCover: rgb(233, 126, 60);
+    --urlMoviesCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/movies.webp);
+    --urlTvshowsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/tvshows.webp);
+    --urlLivetvCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/livetv.webp);
+    --urlPlaylistsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/playlists.webp);
+    --urlBoxsetsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/boxsets.webp);
+    --urlMusicCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/music.webp);
+    --urlHomevideosCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/homevideos.webp);
+    --urlBooksCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/books.webp);
+    --urlFoldersCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/folders.webp);
+    --urlMixedCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/mixed.webp);
+    --urlRecordedmoviesCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/recordedmovies.webp);
+    --urlRecordedtvCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/recordedtv.webp);
+    --urlAnimeCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/anime.webp);
+    --urlSportsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/sports.webp);
+}
+
+[data-type="CollectionFolder"] .defaultCardBackground,
+[data-type="UserView"] .defaultCardBackground,
+[data-type="CollectionFolder"] .cardContent,
+[data-type="UserView"] .cardContent {
+    filter: contrast(0.85);
+    background-size: cover !important;
+    background-position: 50% !important;
+    background-blend-mode: multiply;
+}
+
+[data-type="CollectionFolder"] .cardContent::before,
+[data-type="UserView"] .cardContent::before {
+    content: attr(aria-label);
+    position: absolute;
+    font-size: clamp(1em, max(2.5vh, 2vw), 2em);
+    font-weight: 800;
+    color: white;
+    font-family: "Noto Sans";
+    text-align: center;
+    width: 94%;
+    white-space: normal;
+}
+
+.layout-tv [data-type="CollectionFolder"]::before,
+.layout-tv [data-type="UserView"]::before {
+    content: attr(aria-label);
+    position: absolute;
+    display: grid;
+    align-content: center;
+    top: 0;
+    bottom: 0;
+    font-size: clamp(1em, max(2.5vh, 2vw), 2em);
+    font-weight: 800;
+    color: white;
+    font-family: "Noto Sans";
+    text-align: center;
+    width: 94%;
+    white-space: normal;
+    z-index: 1;
+}
+
+[data-type="CollectionFolder"] .cardImageIcon:not(.quiz)::before,
+[data-type="UserView"] .cardImageIcon:not(.quiz)::before {
+    display: none;
+}
+
+[data-collectiontype="movies"] .cardContent {
+    background-color: var(--colorOverlayMoviesCover) !important;
+    background-image: var(--urlMoviesCover) !important;
+}
+
+[data-collectiontype="tvshows"] .cardContent {
+    background-color: var(--colorOverlayTvshowsCover) !important;
+    background-image: var(--urlTvshowsCover) !important;
+}
+
+[data-collectiontype="livetv"] .cardContent {
+    background-color: var(--colorOverlayLivetvCover) !important;
+    background-image: var(--urlLivetvCover) !important;
+}
+
+[data-collectiontype="music"] .cardContent {
+    background-color: var(--colorOverlayMusicCover) !important;
+    background-image: var(--urlMusicCover) !important;
+}
+
+[data-collectiontype="homevideos"] .cardContent {
+    background-color: var(--colorOverlayHomevideosCover) !important;
+    background-image: var(--urlHomevideosCover) !important;
+}
+
+[data-collectiontype="books"] .cardContent {
+    background-color: var(--colorOverlayBooksCover) !important;
+    background-image: var(--urlBooksCover) !important;
+}
+
+[data-collectiontype="boxsets"] .cardContent {
+    background-color: var(--colorOverlayBoxsetsCover) !important;
+    background-image: var(--urlBoxsetsCover) !important;
+}
+
+[data-collectiontype="folders"] .cardContent {
+    background-color: var(--colorOverlayFoldersCover) !important;
+    background-image: var(--urlFoldersCover) !important;
+}
+
+[data-collectiontype="playlists"] .cardContent {
+    background-color: var(--colorOverlayPlaylistsCover) !important;
+    background-image: var(--urlPlaylistsCover) !important;
+}
+
+[data-type="CollectionFolder"][data-prefix="MIX"] .cardContent {
+    background-color: var(--colorOverlayMixedCover) !important;
+    background-image: var(--urlMixedCover) !important;
+}
+
+[data-collectiontype="movies"][data-prefix="REC"] .cardContent {
+    background-color: var(--colorOverlayRecordedmoviesCover) !important;
+    background-image: var(--urlRecordedmoviesCover) !important;
+}
+
+[data-type="CollectionFolder"][data-prefix="REC"] .cardContent {
+    background-color: var(--colorOverlayRecordedtvCover) !important;
+    background-image: var(--urlRecordedtvCover) !important;
+}
+
+[data-type="CollectionFolder"][data-prefix="ANI"] .cardContent {
+    background-color: var(--colorOverlayAnimeCover) !important;
+    background-image: var(--urlAnimeCover) !important;
+}
+
+[data-type="CollectionFolder"][data-prefix="SPO"] .cardContent {
+    background-color: var(--colorOverlaySportsCover) !important;
+    background-image: var(--urlSportsCover) !important;
+}

Theme/assets/add-ons/media-bar-plugin-support-latest-min.css

@@ -1,2 +1 @@
-/* Add-on: Media Bar plugin support v25.08.08 for the ElegantFin Theme for Jellyfin by lscambo13 */
- .button-container{align-items:center}.favorite-button{background:none;color:var(--textColor)}.detail-button:hover,.favorite-button:hover{background:var(--dimTextColor);color:black}.play-button::before,.detail-button::before,.favorite-button::before,.favorite-button.favorited::before{font-weight:400}.play-button{font-family:'Inter';font-size:1em;font-weight:500}.backdrop,.backdrop-container,.backdrop-overlay{mask-image:linear-gradient(180deg,rgba(0,0,0,.85),70%,rgba(0,0,0,0));-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85),70%,rgba(0,0,0,0));background-color:transparent}.backdrop{transform-origin:center left}.rating-value{flex-wrap:wrap;justify-content:center}.age-rating{font-size:.8em}#slides-container{width:calc(100vw - (2 * var(--sidePadding)));height:60%;top:8em;border:var(--defaultBorder);border-radius:var(--largerRadius);transition:all .125s,border 0s;user-select:none}.layout-tv #slides-container{top:0}.layout-mobile #slides-container{top:10em}.logo-container{top:10vh}.backdrop,.backdrop-container,.backdrop-overlay{mask-image:none;-webkit-mask-image:none}.backdrop-overlay{background:linear-gradient(0deg,rgba(0,0,0,.85),40%,transparent)}@media only screen and (max-width:767px) and (orientation:portrait){.button-container{top:calc(50% + 20vh);transform:translateX(-50%) scale(.8)}.info-container{}.tomato-rating{display:none}.dots-container{top:calc(50% + 19vh)}.backdrop{transform-origin:center}}
+/*! Add-on: Media Bar Plugin Support v26.06.06 for the ElegantFin Theme for Jellyfin by lscambo13 */.detail-button:before,.favorite-button.favorited:before,.favorite-button:before,.play-button:before{font-weight:400}.play-button{font-family:Inter;font-size:1em;font-weight:500;order:1}.detail-button,.favorite-button{order:2}.backdrop,.backdrop-container,.backdrop-overlay{background-color:transparent;mask-image:linear-gradient(180deg,rgba(0,0,0,.85),70%,transparent);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85),70%,transparent)}.backdrop{transform-origin:center left}.rating-value{flex-wrap:wrap;justify-content:center}.age-rating{color:unset;font-family:Archivo Narrow,sans-serif;font-size:.8em}#slides-container{height:62%;left:var(--sidePadding);overflow:visible;position:absolute;top:calc(var(--appBarHeight)*2 + 1.25em);user-select:none;width:calc(100vw - var(--sidePadding)*2)}.slide{border:var(--defaultBorder);border-radius:var(--largerRadius);overflow:hidden;transition:border 0s}.logo-container{top:10vh}.backdrop,.backdrop-container,.backdrop-overlay{mask-image:none;-webkit-mask-image:none}.backdrop-overlay{background:linear-gradient(0deg,rgba(0,0,0,.85),40%,transparent)}.pause-button,.volume-toggle{top:1em!important}.separator-icon{color:var(--dimTextColor);font-size:5px}.dot{background-color:var(--textColor)!important;border-radius:.25em;height:.375em;opacity:.5;transition:width .5s;width:.375em}.dot.active{transform:none;width:2em}@media only screen and (orientation:landscape){.button-container,.dots-container,.genre,.info-container,.plot-container{top:unset}.button-container{bottom:3em}.dots-container{bottom:4.5em}.plot-container{bottom:7em;height:4em}.genre{bottom:12em}.info-container{bottom:14em}.logo-container{align-items:flex-end;max-width:35vw;top:3%}.gradient-overlay{background:linear-gradient(37deg,rgba(0,0,0,.2) 32%,rgb(29 29 29/7%) 47%,rgba(29,29,29,0));mask:none;-webkit-mask:none}}@media only screen and (max-width:767px) and (orientation:portrait){.button-container{bottom:3em}.genre,.tomato-rating{display:none}.dots-container{bottom:6em}.info-container{bottom:5em}.logo-container{top:calc(100% - 15em)}.backdrop{transform-origin:center}.left-arrow,.right-arrow{display:none!important}.play-button{order:2}}@media (min-width:75em){#slides-container{top:calc(var(--appBarHeight) + 1.25em)}.layout-tv #slides-container{top:calc(var(--appBarHeight)*2 + 1.25em)}}@media (min-width:100em){.layout-tv #slides-container{top:calc(var(--appBarHeight) + 1.25em)}}@media only screen and (max-height:767px) and (orientation:landscape){#slides-container{height:57%}.logo-container{top:3%}}

Theme/assets/add-ons/media-bar-plugin-support-nightly.css

@@ -1,4 +1,4 @@
-/* Add-on: Media Bar plugin support nightly for the ElegantFin Theme for Jellyfin by lscambo13 */
+/*! Add-on: Media Bar Plugin Support Nightly for the ElegantFin Theme for Jellyfin by lscambo13 */
 /* this styles the media bar plugin - start */
 .play-button::before,
 .detail-button::before,
@@ -11,9 +11,15 @@
     font-family: "Inter";
     font-size: 1em;
     font-weight: 500;
+    order: 1;
 }
 
-.backdrop,
+.detail-button,
+.favorite-button {
+    order: 2;
+}
+
+.backdrop:not(.tmla-mask),
 .backdrop-container,
 .backdrop-overlay {
     mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), 70%, rgba(0, 0, 0, 0));
@@ -21,7 +27,7 @@
     background-color: transparent;
 }
 
-.backdrop {
+.backdrop:not(.tmla-mask) {
     transform-origin: center left;
 }
 
@@ -32,23 +38,32 @@
 
 .age-rating {
     font-size: 0.8em;
+    font-family: "Archivo Narrow", sans-serif;
+    color: unset;
 }
 
 #slides-container {
     width: calc(100vw - (2 * var(--sidePadding)));
     height: 62%;
-    top: var(--appBarHeight);
+    top: calc(var(--appBarHeight) * 2 + 1.25em);
+    user-select: none;
+    position: absolute;
+    left: var(--sidePadding);
+    overflow: visible;
+}
+
+.slide {
     border: var(--defaultBorder);
     border-radius: var(--largerRadius);
-    transition: all 0.125s, border 0s;
-    user-select: none;
+    overflow: hidden;
+    transition: border 0s;
 }
 
 .logo-container {
     top: 10vh;
 }
 
-.backdrop,
+.backdrop:not(.tmla-mask),
 .backdrop-container,
 .backdrop-overlay {
     mask-image: none;
@@ -59,28 +74,132 @@
     background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), 40%, transparent);
 }
 
-@media only screen and (max-width: 767px) and (orientation: portrait) {
-    .button-container {
-        top: calc(50% + 20vh);
-        transform: translateX(-50%) scale(0.8);
+.pause-button,
+.volume-toggle {
+    top: 1em !important;
 }
 
-    .tomato-rating {
+.separator-icon {
+    font-size: 5px;
+    color: var(--dimTextColor);
+}
+
+.dot {
+    border-radius: 0.25em;
+    width: 0.375em;
+    height: 0.375em;
+    transition: width 0.5s;
+    opacity: 0.5;
+    background-color: var(--textColor) !important;
+}
+
+.dot.active {
+    width: 2em;
+    transform: none;
+}
+
+@media only screen and (orientation: landscape) {
+    .button-container,
+    .dots-container,
+    .plot-container,
+    .genre,
+    .info-container {
+        top: unset;
+    }
+
+    .button-container {
+        bottom: 3em;
+    }
+
+    .dots-container {
+        bottom: 4.5em;
+    }
+
+    .plot-container {
+        height: 4em;
+        bottom: 7em;
+    }
+
+    .genre {
+        bottom: 12em;
+    }
+
+    .info-container {
+        bottom: 14em;
+    }
+
+    .logo-container {
+        top: 3%;
+        align-items: flex-end;
+        max-width: 35vw;
+    }
+
+    .gradient-overlay {
+        mask: none;
+        -webkit-mask: none;
+        background: linear-gradient(37deg, rgb(0 0 0 / 20%) 32%, rgb(29 29 29 / 7%) 47%, rgb(29 29 29 / 0%) 100%);
+    }
+}
+
+@media only screen and (max-width: 767px) and (orientation: portrait) {
+    .button-container {
+        bottom: 3em;
+    }
+
+    .tomato-rating,
+    .genre {
         display: none;
     }
 
     .dots-container {
-        top: calc(50% + 19vh);
+        bottom: 6em;
     }
 
-    .backdrop {
+    .info-container {
+        bottom: 5em;
+    }
+
+    .logo-container {
+        top: calc(100% - 15em);
+    }
+
+    .backdrop:not(.tmla-mask) {
         transform-origin: center;
     }
+
+    .left-arrow,
+    .right-arrow {
+        display: none !important;
+    }
+
+    .play-button {
+        order: 2;
+    }
 }
 
 @media (min-width: 75em) {
     #slides-container {
-        top: calc(0.5 * var(--appBarHeight));
+        top: calc(var(--appBarHeight) + 1.25em);
+    }
+
+    .layout-tv #slides-container {
+        top: calc(var(--appBarHeight) * 2 + 1.25em);
+    }
+}
+
+@media (min-width: 100em) {
+    .layout-tv #slides-container {
+        top: calc(var(--appBarHeight) + 1.25em);
+    }
+}
+
+@media only screen and (max-height: 767px) and (orientation: landscape) {
+    #slides-container {
+        height: 57%;
+    }
+
+    .logo-container {
+        top: 3%;
     }
 }
 

Theme/assets/add-ons/media-bar-plugin-support-v25.11.25.css

@@ -0,0 +1,103 @@
+/* Add-on: Media Bar plugin support v25.11.25 for the ElegantFin Theme for Jellyfin by lscambo13 */
+/* this styles the media bar plugin - start */
+.play-button::before,
+.detail-button::before,
+.favorite-button::before,
+.favorite-button.favorited::before {
+    font-weight: 400;
+}
+
+.play-button {
+    font-family: "Inter";
+    font-size: 1em;
+    font-weight: 500;
+}
+
+.backdrop,
+.backdrop-container,
+.backdrop-overlay {
+    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), 70%, rgba(0, 0, 0, 0));
+    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), 70%, rgba(0, 0, 0, 0));
+    background-color: transparent;
+}
+
+.backdrop {
+    transform-origin: center left;
+}
+
+.rating-value {
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.age-rating {
+    font-size: 0.8em;
+}
+
+#slides-container {
+    width: calc(100vw - (2 * var(--sidePadding)));
+    height: 62%;
+    top: var(--appBarHeight);
+    border: var(--defaultBorder);
+    border-radius: var(--largerRadius);
+    transition: all 0.125s, border 0s;
+    user-select: none;
+}
+
+.logo-container {
+    top: 10vh;
+}
+
+.backdrop,
+.backdrop-container,
+.backdrop-overlay {
+    mask-image: none;
+    -webkit-mask-image: none;
+}
+
+.backdrop-overlay {
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), 40%, transparent);
+}
+
+@media only screen and (max-width: 767px) and (orientation: portrait) {
+    .button-container {
+        top: calc(50% + 20vh);
+        transform: translateX(-50%) scale(0.8);
+    }
+
+    .tomato-rating {
+        display: none;
+    }
+
+    .dots-container {
+        top: calc(50% + 19vh);
+    }
+
+    .backdrop {
+        transform-origin: center;
+    }
+}
+
+@media (min-width: 75em) {
+    #slides-container {
+        top: calc(0.5 * var(--appBarHeight));
+    }
+}
+
+@media only screen and (max-height: 767px) and (orientation: landscape) {
+    #slides-container {
+        height: 57%;
+    }
+
+    .logo-container {
+        top: 3%;
+    }
+}
+
+@media only screen and (max-width: 767px) and (orientation: portrait) {
+    .logo-container {
+        top: 50%;
+    }
+}
+
+/* this styles the media bar plugin - end */

Theme/assets/add-ons/media-bar-plugin-support-v25.12.31.css

@@ -0,0 +1,147 @@
+/* Add-on: Media Bar plugin support 25.12.31 for the ElegantFin Theme for Jellyfin by lscambo13 */
+/* this styles the media bar plugin - start */
+.play-button::before,
+.detail-button::before,
+.favorite-button::before,
+.favorite-button.favorited::before {
+    font-weight: 400;
+}
+
+.play-button {
+    font-family: "Inter";
+    font-size: 1em;
+    font-weight: 500;
+}
+
+.backdrop,
+.backdrop-container,
+.backdrop-overlay {
+    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), 70%, rgba(0, 0, 0, 0));
+    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), 70%, rgba(0, 0, 0, 0));
+    background-color: transparent;
+}
+
+.backdrop {
+    transform-origin: center left;
+}
+
+.rating-value {
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.age-rating {
+    font-size: 0.8em;
+    font-family: "Archivo Narrow", sans-serif;
+    color: unset;
+}
+
+#slides-container {
+    width: calc(100vw - (2 * var(--sidePadding)));
+    height: 62%;
+    top: calc(var(--appBarHeight) * 2 + 1.25em);
+    border: var(--defaultBorder);
+    border-radius: var(--largerRadius);
+    transition: all 0.125s, border 0s;
+    user-select: none;
+    position: absolute;
+    left: var(--sidePadding);
+}
+
+.logo-container {
+    top: 10vh;
+}
+
+.backdrop,
+.backdrop-container,
+.backdrop-overlay {
+    mask-image: none;
+    -webkit-mask-image: none;
+}
+
+.backdrop-overlay {
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), 40%, transparent);
+}
+
+.pause-button {
+    top: 1em !important;
+}
+
+.separator-icon {
+    font-size: 5px;
+    color: var(--dimTextColor);
+}
+
+.dot {
+    border-radius: 0.25em;
+    width: 0.375em;
+    height: 0.375em;
+    transition: width 0.5s;
+    opacity: 0.5;
+    background-color: var(--textColor) !important;
+}
+
+.dot.active {
+    width: 2em;
+    transform: none;
+}
+
+@media only screen and (max-width: 767px) and (orientation: portrait) {
+    .button-container {
+        bottom: 3em;
+    }
+
+    .tomato-rating,
+    .genre {
+        display: none;
+    }
+
+    .dots-container {
+        bottom: 6em;
+    }
+
+    .info-container {
+        bottom: 5em;
+    }
+
+    .logo-container {
+        top: calc(100% - 15em);
+    }
+
+    .backdrop {
+        transform-origin: center;
+    }
+
+    .left-arrow,
+    .right-arrow {
+        display: none !important;
+    }
+}
+
+@media (min-width: 75em) {
+    #slides-container {
+        top: calc(var(--appBarHeight) + 1.25em);
+    }
+
+    .layout-tv #slides-container {
+        top: calc(var(--appBarHeight) * 2 + 1.25em);
+    }
+}
+
+@media (min-width: 100em) {
+    .layout-tv #slides-container {
+        top: calc(var(--appBarHeight) + 1.25em);
+    }
+}
+
+@media only screen and (max-height: 767px) and (orientation: landscape) {
+    #slides-container {
+        height: 57%;
+    }
+
+    .logo-container {
+        top: 3%;
+    }
+}
+
+/* this styles the media bar plugin - end */

Theme/assets/add-ons/media-bar-plugin-support-v26.06.06.css

@@ -0,0 +1,206 @@
+/*! Add-on: Media Bar Plugin Support v26.06.06 for the ElegantFin Theme for Jellyfin by lscambo13 */
+/* this styles the media bar plugin - start */
+.play-button::before,
+.detail-button::before,
+.favorite-button::before,
+.favorite-button.favorited::before {
+    font-weight: 400;
+}
+
+.play-button {
+    font-family: "Inter";
+    font-size: 1em;
+    font-weight: 500;
+    order: 1;
+}
+
+.detail-button,
+.favorite-button {
+    order: 2;
+}
+
+.backdrop,
+.backdrop-container,
+.backdrop-overlay {
+    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), 70%, rgba(0, 0, 0, 0));
+    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), 70%, rgba(0, 0, 0, 0));
+    background-color: transparent;
+}
+
+.backdrop {
+    transform-origin: center left;
+}
+
+.rating-value {
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.age-rating {
+    font-size: 0.8em;
+    font-family: "Archivo Narrow", sans-serif;
+    color: unset;
+}
+
+#slides-container {
+    width: calc(100vw - (2 * var(--sidePadding)));
+    height: 62%;
+    top: calc(var(--appBarHeight) * 2 + 1.25em);
+    user-select: none;
+    position: absolute;
+    left: var(--sidePadding);
+    overflow: visible;
+}
+
+.slide {
+    border: var(--defaultBorder);
+    border-radius: var(--largerRadius);
+    overflow: hidden;
+    transition: border 0s;
+}
+
+.logo-container {
+    top: 10vh;
+}
+
+.backdrop,
+.backdrop-container,
+.backdrop-overlay {
+    mask-image: none;
+    -webkit-mask-image: none;
+}
+
+.backdrop-overlay {
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), 40%, transparent);
+}
+
+.pause-button,
+.volume-toggle {
+    top: 1em !important;
+}
+
+.separator-icon {
+    font-size: 5px;
+    color: var(--dimTextColor);
+}
+
+.dot {
+    border-radius: 0.25em;
+    width: 0.375em;
+    height: 0.375em;
+    transition: width 0.5s;
+    opacity: 0.5;
+    background-color: var(--textColor) !important;
+}
+
+.dot.active {
+    width: 2em;
+    transform: none;
+}
+
+@media only screen and (orientation: landscape) {
+    .button-container,
+    .dots-container,
+    .plot-container,
+    .genre,
+    .info-container {
+        top: unset;
+    }
+
+    .button-container {
+        bottom: 3em;
+    }
+
+    .dots-container {
+        bottom: 4.5em;
+    }
+
+    .plot-container {
+        height: 4em;
+        bottom: 7em;
+    }
+
+    .genre {
+        bottom: 12em;
+    }
+
+    .info-container {
+        bottom: 14em;
+    }
+
+    .logo-container {
+        top: 3%;
+        align-items: flex-end;
+        max-width: 35vw;
+    }
+
+    .gradient-overlay {
+        mask: none;
+        -webkit-mask: none;
+        background: linear-gradient(37deg, rgb(0 0 0 / 20%) 32%, rgb(29 29 29 / 7%) 47%, rgb(29 29 29 / 0%) 100%);
+    }
+}
+
+@media only screen and (max-width: 767px) and (orientation: portrait) {
+    .button-container {
+        bottom: 3em;
+    }
+
+    .tomato-rating,
+    .genre {
+        display: none;
+    }
+
+    .dots-container {
+        bottom: 6em;
+    }
+
+    .info-container {
+        bottom: 5em;
+    }
+
+    .logo-container {
+        top: calc(100% - 15em);
+    }
+
+    .backdrop {
+        transform-origin: center;
+    }
+
+    .left-arrow,
+    .right-arrow {
+        display: none !important;
+    }
+
+    .play-button {
+        order: 2;
+    }
+}
+
+@media (min-width: 75em) {
+    #slides-container {
+        top: calc(var(--appBarHeight) + 1.25em);
+    }
+
+    .layout-tv #slides-container {
+        top: calc(var(--appBarHeight) * 2 + 1.25em);
+    }
+}
+
+@media (min-width: 100em) {
+    .layout-tv #slides-container {
+        top: calc(var(--appBarHeight) + 1.25em);
+    }
+}
+
+@media only screen and (max-height: 767px) and (orientation: landscape) {
+    #slides-container {
+        height: 57%;
+    }
+
+    .logo-container {
+        top: 3%;
+    }
+}
+
+/* this styles the media bar plugin - end */

custom-media-covers.md

@@ -1,4 +1,4 @@
-# 🧩 Add-on: Custom media covers for ElegantFin
+# 🧩 Add-on: Custom Media Covers for ElegantFin
 
 This is a Jellyfin add-on that allows you to customise My Media cover arts. This is an experimental feature, so limited support will be provided.
 
@@ -11,136 +11,149 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
 <details>
   <summary><i>This is how the covers look without this add-on.</i></summary>
 
-![Screenshot 2025-01-19 191836](https://github.com/user-attachments/assets/49425368-cfe3-4c3b-9533-eb18b64c84d6)
+> ![Screenshot 2025-01-19 191836](https://github.com/user-attachments/assets/49425368-cfe3-4c3b-9533-eb18b64c84d6)
 
 </details>
 
 <details>
   <summary><i>This is how they look with this add-on, by default.</i></summary>
 	
-![image](https://github.com/user-attachments/assets/5284af32-3b2e-4150-938c-f6d0fdfddf06)
-
-```
-@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");
-```
+> ![image](https://github.com/user-attachments/assets/5284af32-3b2e-4150-938c-f6d0fdfddf06)
+> 
+> ```css
+> @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");
+> ```
 
 </details>
 
 <details>
   <summary><i>You can also change these covers.</i></summary>
 	
-![Screenshot 2025-01-19 192015](https://github.com/user-attachments/assets/11719ef1-36ca-46e9-8030-b464a5ae5b79)
+> ![Screenshot 2025-01-19 192015](https://github.com/user-attachments/assets/11719ef1-36ca-46e9-8030-b464a5ae5b79)
+>
 
 </details>
 
 <details>
   <summary><i>You can achieve a minimal design too.</i></summary>
 
-![Screenshot 2025-01-19 192133](https://github.com/user-attachments/assets/daaefe74-d3a9-4bb4-8389-9605a4364372)
-
-```
-@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");
-
-:root{
-    --colorOverlayMoviesCover: transparent;
-    --colorOverlayTvshowsCover: transparent;
-    --colorOverlayLivetvCover: transparent;
-    --colorOverlayPlaylistsCover: transparent;
-    --colorOverlayBoxsetsCover: transparent;
-    --colorOverlayMusicCover: transparent;
-    --colorOverlayHomevideosCover: transparent;
-    --colorOverlayBooksCover: transparent;
-    --colorOverlayFoldersCover: transparent;
-    --colorOverlayMixedCover: transparent;
-    --colorOverlayRecordedmoviesCover: transparent;
-    --colorOverlayRecordedtvCover: transparent;
-    --urlMoviesCover: transparent;
-    --urlTvshowsCover: transparent;
-    --urlLivetvCover: transparent;
-    --urlPlaylistsCover: transparent;
-    --urlBoxsetsCover: transparent;
-    --urlMusicCover: transparent;
-    --urlHomevideosCover: transparent;
-    --urlBooksCover: transparent;
-    --urlFoldersCover: transparent;
-    --urlMixedCover: transparent;
-    --urlRecordedmoviesCover: transparent;
-    --urlRecordedtvCover: transparent;
-}
-```
-
-<hr>
-
-![Screenshot 2025-01-19 192505](https://github.com/user-attachments/assets/256718f2-67ca-4fbd-8407-e41803380174)
-
-```
-@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");
-
-:root{
-    --colorOverlayMoviesCover: transparent;
-    --colorOverlayTvshowsCover: transparent;
-    --colorOverlayLivetvCover: transparent;
-    --colorOverlayPlaylistsCover: transparent;
-    --colorOverlayBoxsetsCover: transparent;
-    --colorOverlayMusicCover: transparent;
-    --colorOverlayHomevideosCover: transparent;
-    --colorOverlayBooksCover: transparent;
-    --colorOverlayFoldersCover: transparent;
-    --colorOverlayMixedCover: transparent;
-    --colorOverlayRecordedmoviesCover: transparent;
-    --colorOverlayRecordedtvCover: transparent;
-    --urlMoviesCover: var(--cardBackgroundGradient);
-    --urlTvshowsCover: var(--cardBackgroundGradient);
-    --urlLivetvCover: var(--cardBackgroundGradient);
-    --urlPlaylistsCover: var(--cardBackgroundGradient);
-    --urlBoxsetsCover: var(--cardBackgroundGradient);
-    --urlMusicCover: var(--cardBackgroundGradient);
-    --urlHomevideosCover: var(--cardBackgroundGradient);
-    --urlBooksCover: var(--cardBackgroundGradient);
-    --urlFoldersCover: var(--cardBackgroundGradient);
-    --urlMixedCover: var(--cardBackgroundGradient);
-    --urlRecordedmoviesCover: var(--cardBackgroundGradient);
-    --urlRecordedtvCover: var(--cardBackgroundGradient);
-}
-```
+> ![Screenshot 2025-01-19 192133](https://github.com/user-attachments/assets/daaefe74-d3a9-4bb4-8389-9605a4364372)
+>
+> ```css
+> @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");
+>
+> :root {
+>     --colorOverlayMoviesCover: transparent;
+>     --colorOverlayTvshowsCover: transparent;
+>     --colorOverlayLivetvCover: transparent;
+>     --colorOverlayPlaylistsCover: transparent;
+>     --colorOverlayBoxsetsCover: transparent;
+>     --colorOverlayMusicCover: transparent;
+>     --colorOverlayHomevideosCover: transparent;
+>     --colorOverlayBooksCover: transparent;
+>     --colorOverlayFoldersCover: transparent;
+>     --colorOverlayMixedCover: transparent;
+>     --colorOverlayRecordedmoviesCover: transparent;
+>     --colorOverlayRecordedtvCover: transparent;
+>     --colorOverlayAnimeCover: transparent;
+>     --colorOverlaySportsCover: transparent;
+>     --urlMoviesCover: transparent;
+>     --urlTvshowsCover: transparent;
+>     --urlLivetvCover: transparent;
+>     --urlPlaylistsCover: transparent;
+>     --urlBoxsetsCover: transparent;
+>     --urlMusicCover: transparent;
+>     --urlHomevideosCover: transparent;
+>     --urlBooksCover: transparent;
+>     --urlFoldersCover: transparent;
+>     --urlMixedCover: transparent;
+>     --urlRecordedmoviesCover: transparent;
+>     --urlRecordedtvCover: transparent;
+>     --urlAnimeCover: transparent;
+>     --urlSportsCover: transparent;
+> }
+> ```
+>
+> <hr>
+>
+> ![Screenshot 2025-01-19 192505](https://github.com/user-attachments/assets/256718f2-67ca-4fbd-8407-e41803380174)
+>
+> ```css
+> @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");
+>
+> :root {
+>     --colorOverlayMoviesCover: transparent;
+>     --colorOverlayTvshowsCover: transparent;
+>     --colorOverlayLivetvCover: transparent;
+>     --colorOverlayPlaylistsCover: transparent;
+>     --colorOverlayBoxsetsCover: transparent;
+>     --colorOverlayMusicCover: transparent;
+>     --colorOverlayHomevideosCover: transparent;
+>     --colorOverlayBooksCover: transparent;
+>     --colorOverlayFoldersCover: transparent;
+>     --colorOverlayMixedCover: transparent;
+>     --colorOverlayRecordedmoviesCover: transparent;
+>     --colorOverlayRecordedtvCover: transparent;
+>     --colorOverlayAnimeCover: transparent;
+>     --colorOverlaySportsCover: transparent;
+>     --urlMoviesCover: var(--cardBackgroundGradient);
+>     --urlTvshowsCover: var(--cardBackgroundGradient);
+>     --urlLivetvCover: var(--cardBackgroundGradient);
+>     --urlPlaylistsCover: var(--cardBackgroundGradient);
+>     --urlBoxsetsCover: var(--cardBackgroundGradient);
+>     --urlMusicCover: var(--cardBackgroundGradient);
+>     --urlHomevideosCover: var(--cardBackgroundGradient);
+>     --urlBooksCover: var(--cardBackgroundGradient);
+>     --urlFoldersCover: var(--cardBackgroundGradient);
+>     --urlMixedCover: var(--cardBackgroundGradient);
+>     --urlRecordedmoviesCover: var(--cardBackgroundGradient);
+>     --urlRecordedtvCover: var(--cardBackgroundGradient);
+>     --urlAnimeCover: var(--cardBackgroundGradient);
+>     --urlSportsCover: var(--cardBackgroundGradient);
+> }
+> ```
 
 </details>
 
 <details>
   <summary><i>Need something in between?</i></summary>
 
-![image](https://github.com/user-attachments/assets/6975a5ef-4824-4807-9afa-434fc3ebaf6f)
-
-```
-@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");
-
-:root{
-    --colorOverlayMoviesCover: rgb(193, 103, 104);
-    --colorOverlayTvshowsCover: rgb(140, 149, 43);
-    --colorOverlayLivetvCover: rgb(17, 98, 159);
-    --colorOverlayPlaylistsCover: rgb(118, 61, 216);
-    --colorOverlayBoxsetsCover: rgb(219, 180, 53);
-    --colorOverlayMusicCover: rgb(11, 93, 72);
-    --colorOverlayHomevideosCover: rgb(39, 90, 185);
-    --colorOverlayBooksCover: rgb(166, 68, 70);
-    --colorOverlayFoldersCover: rgb(173, 60, 113);
-    --colorOverlayMixedCover: rgb(194, 58, 58);
-    --colorOverlayRecordedmoviesCover: rgb(52, 52, 52);
-    --colorOverlayRecordedtvCover: rgb(120, 100, 28);
-    --urlMoviesCover: linear-gradient(0deg, #313131, #585858 25%);
-    --urlTvshowsCover: linear-gradient(0deg, #313131, #585858 25%);
-    --urlLivetvCover: linear-gradient(0deg, #313131, #585858 25%);
-    --urlPlaylistsCover: linear-gradient(0deg, #313131, #585858 25%);
-    --urlBoxsetsCover: linear-gradient(0deg, #313131, #585858 25%);
-    --urlMusicCover: linear-gradient(0deg, #313131, #585858 25%);
-    --urlHomevideosCover: linear-gradient(0deg, #313131, #585858 25%);
-    --urlBooksCover: linear-gradient(0deg, #313131, #585858 25%);
-    --urlFoldersCover: linear-gradient(0deg, #313131, #585858 25%);
-    --urlMixedCover: linear-gradient(0deg, #313131, #585858 25%);
-    --urlRecordedmoviesCover: linear-gradient(0deg, #313131, #585858 25%);
-    --urlRecordedtvCover: linear-gradient(0deg, #313131, #585858 25%);
-}
-```
+> ![image](https://github.com/user-attachments/assets/6975a5ef-4824-4807-9afa-434fc3ebaf6f)
+>
+> ```css
+> @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");
+>
+> :root {
+>     --colorOverlayMoviesCover: rgb(193, 103, 104);
+>     --colorOverlayTvshowsCover: rgb(140, 149, 43);
+>     --colorOverlayLivetvCover: rgb(17, 98, 159);
+>     --colorOverlayPlaylistsCover: rgb(118, 61, 216);
+>     --colorOverlayBoxsetsCover: rgb(219, 180, 53);
+>     --colorOverlayMusicCover: rgb(11, 93, 72);
+>     --colorOverlayHomevideosCover: rgb(39, 90, 185);
+>     --colorOverlayBooksCover: rgb(166, 68, 70);
+>     --colorOverlayFoldersCover: rgb(173, 60, 113);
+>     --colorOverlayMixedCover: rgb(194, 58, 58);
+>     --colorOverlayRecordedmoviesCover: rgb(52, 52, 52);
+>     --colorOverlayRecordedtvCover: rgb(120, 100, 28);
+>     --colorOverlayAnimeCover: rgb(189, 203, 99);
+>     --colorOverlaySportsCover: rgb(233, 126, 60);
+>     --urlMoviesCover: linear-gradient(0deg, #313131, #585858 25%);
+>     --urlTvshowsCover: linear-gradient(0deg, #313131, #585858 25%);
+>     --urlLivetvCover: linear-gradient(0deg, #313131, #585858 25%);
+>     --urlPlaylistsCover: linear-gradient(0deg, #313131, #585858 25%);
+>     --urlBoxsetsCover: linear-gradient(0deg, #313131, #585858 25%);
+>     --urlMusicCover: linear-gradient(0deg, #313131, #585858 25%);
+>     --urlHomevideosCover: linear-gradient(0deg, #313131, #585858 25%);
+>     --urlBooksCover: linear-gradient(0deg, #313131, #585858 25%);
+>     --urlFoldersCover: linear-gradient(0deg, #313131, #585858 25%);
+>     --urlMixedCover: linear-gradient(0deg, #313131, #585858 25%);
+>     --urlRecordedmoviesCover: linear-gradient(0deg, #313131, #585858 25%);
+>     --urlRecordedtvCover: linear-gradient(0deg, #313131, #585858 25%);
+>     --urlAnimeCover: linear-gradient(0deg, #313131, #585858 25%);
+>     --urlSportsCover: linear-gradient(0deg, #313131, #585858 25%);
+> }
+> ```
 
 </details>
 
@@ -148,9 +161,9 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
 
 ### 👇 How to enable this add-on?
 
--   Paste the following at the end in Custom CSS code box:
+- Paste the following right after the main ElegantFin import in the Custom CSS code box:
 
-```
+```css
 @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");
 ```
 
@@ -163,65 +176,62 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
 <details>
   <summary><i>Click here to reveal.</i></summary>
 	
-- To configure your theme to use the custom images, you'll need to input a URL pointing to an image in variables starting with '--url' and an overlay color in variables starting with '--color'.
+> - To configure your theme to use the custom images, you'll need to input a URL pointing to an image in variables starting with '--url' and an overlay color in variables starting with '--color'.
+> 	
+> - The ideal Jellyfin cover sizes are `960px x 540px`, and the colors can be in rgb format i.e. `rbg(128, 128, 128)`.
+>   
+> - Below are all the configurable variables, but you should remove the entries you do not intend to modify:
+>  
+> ```css
+> :root{
+>     <!-- overlay colors; change according to your image. -->
+>     --colorOverlayMoviesCover: rgb();
+>     --colorOverlayTvshowsCover: rgb();
+>     --colorOverlayLivetvCover: rgb();
+>     --colorOverlayPlaylistsCover: rgb();
+>     --colorOverlayBoxsetsCover: rgb();
+>     --colorOverlayMusicCover: rgb();
+>     --colorOverlayHomevideosCover: rgb();
+>     --colorOverlayBooksCover: rgb();
+>     --colorOverlayFoldersCover: rgb();
+>     --colorOverlayMixedCover: rgb();
+>     --colorOverlayRecordedmoviesCover: rgb();
+>     --colorOverlayRecordedtvCover: rgb();
+>     --colorOverlayAnimeCover: rgb();
+>     --colorOverlaySportsCover: rgb();
+> 
+>     <!-- cover images; input the url pointing to an image. -->
+>     --urlMoviesCover: url();
+>     --urlTvshowsCover: url();
+>     --urlLivetvCover: url();
+>     --urlBoxsetsCover: url();
+>     --urlMusicCover: url();
+>     --urlHomevideosCover: url();
+>     --urlBooksCover: url();
+>     --urlFoldersCover: url();
+>     --urlMixedCover: url();
+>     --urlRecordedmoviesCover: url();
+>     --urlRecordedtvCover: url();
+>     --urlAnimeCover: url();
+>     --urlSportsCover: url();
+> }
+> ```
 
-- The ideal Jellyfin cover sizes are `960px x 540px`, and the colors can be in rgb format i.e. `rbg(128, 128, 128)`.
-  
-- Below are all the configurable variables, but you should remove the entries you do not intend to modify:
- 
-```
-
-:root{
-
-    <!-- overlay colors; change according to your image. -->
-
-    --colorOverlayMoviesCover: rgb();
-    --colorOverlayTvshowsCover: rgb();
-    --colorOverlayLivetvCover: rgb();
-    --colorOverlayPlaylistsCover: rgb();
-    --colorOverlayBoxsetsCover: rgb();
-    --colorOverlayMusicCover: rgb();
-    --colorOverlayHomevideosCover: rgb();
-    --colorOverlayBooksCover: rgb();
-    --colorOverlayFoldersCover: rgb();
-    --colorOverlayMixedCover: rgb();
-    --colorOverlayRecordedmoviesCover: rgb();
-    --colorOverlayRecordedtvCover: rgb();
-
-    <!-- cover images; input the url pointing to an image. -->
-
-    --urlMoviesCover: url();
-    --urlTvshowsCover: url();
-    --urlLivetvCover: url();
-    --urlBoxsetsCover: url();
-    --urlMusicCover: url();
-    --urlHomevideosCover: url();
-    --urlBooksCover: url();
-    --urlFoldersCover: url();
-    --urlMixedCover: url();
-    --urlRecordedmoviesCover: url();
-    --urlRecordedtvCover: url();
-
-}
-
-```
 </details>
 
 <hr>
 
-
 ### 🆗 Read this example:
+
 Suppose you want to modify the Live TV cover art. You'll have to modify the variables named `--colorOverlayLivetvCover` and `--urlLivetvCover`, so that your final configuration will look something like this:
 
-```
-
+```css
 @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");
 
 :root {
     --colorOverlayLivetvCover: rgb(39, 68, 185);
     --urlLivetvCover: url(https://artworks.thetvdb.com/banners/fanart/original/71663-33.jpg);
 }
-
 ```
 
 <hr>
@@ -229,23 +239,20 @@ Suppose you want to modify the Live TV cover art. You'll have to modify the vari
 <details>
   <summary><i>Detailed steps for server-side implementation</i></summary>
 
-1. Open Dashboard from Administration tab in Settings.
-2. Select General tab from the side bar.
-3. Scroll down to find Custom CSS code box under Branding section.
-4. Paste the custom css in Custom CSS code box.
-5. Click save
+> 1. Open Dashboard from Administration tab in Settings.
+> 2. Select General tab from the side bar.
+> 3. Scroll down to find Custom CSS code box under Branding section.
+> 4. Paste the custom css in Custom CSS code box.
+> 5. Click save
+
 </details>
 
 <details>
   <summary><i>Detailed steps for client-side implementation</i></summary>
 
-1. Open Display tab in Settings.
-2. Scroll down to find Custom CSS code box.
-3. Paste the custom css in Custom CSS code box.
-4. Click save.
+> 1. Open Display tab in Settings.
+> 2. Scroll down to find Custom CSS code box.
+> 3. Paste the custom css in Custom CSS code box.
+> 4. Click save.
+
 </details>
-
-
-<hr>
-
-```

package.json

@@ -0,0 +1,18 @@
+{
+    "devDependencies": {
+        "css-declaration-sorter": "^7.4.0",
+        "cssnano": "^8.0.1",
+        "postcss": "^8.5.15",
+        "postcss-cli": "^11.0.1"
+    },
+    "scripts": {
+        "minify:theme": "postcss ./Theme/ElegantFin-theme-nightly.css -o ./Theme/ElegantFin-theme-nightly-min.css",
+        "minify:covers-addon": "postcss ./Theme/assets/add-ons/custom-media-covers-nightly.css -o ./Theme/assets/add-ons/custom-media-covers-nightly-min.css",
+        "minify:mediabar-addon": "postcss ./Theme/assets/add-ons/media-bar-plugin-support-nightly.css -o ./Theme/assets/add-ons/media-bar-plugin-support-nightly-min.css",
+        "minify:all": "npm run minify:theme && npm run minify:covers-addon && npm run minify:mediabar-addon",
+        "watch:theme": "postcss ./Theme/ElegantFin-theme-nightly.css -o ./Theme/ElegantFin-theme-nightly-min.css --watch --verbose",
+        "watch:covers-addon": "postcss ./Theme/assets/add-ons/custom-media-covers-nightly.css -o ./Theme/assets/add-ons/custom-media-covers-nightly-min.css --watch --verbose",
+        "watch:mediabar-addon": "postcss ./Theme/assets/add-ons/media-bar-plugin-support-nightly.css -o ./Theme/assets/add-ons/media-bar-plugin-support-nightly-min.css --watch --verbose",
+        "watch:fixes-addon": "postcss ./Theme/assets/add-ons/seamless-fork-compatibility-nightly.css -o ./Theme/assets/add-ons/seamless-fork-compatibility-nightly-min.css --watch --verbose"
+    }
+}

postcss.config.js

@@ -0,0 +1,13 @@
+const cssDeclarationSorter = require('css-declaration-sorter');
+const cssnano = require('cssnano');
+
+module.exports = {
+	plugins: [
+		cssDeclarationSorter({
+			keepOverrides: true,
+		}),
+		cssnano({
+			preset: 'default',
+		}),
+	],
+};

workspace.code-workspace

@@ -1,13 +1,14 @@
 {
     "folders": [
         {
-            "path": "."
-        }
+            "path": ".",
+        },
     ],
     "settings": {
         "editor.defaultFormatter": "esbenp.prettier-vscode",
         "editor.formatOnSave": true,
         "prettier.useTabs": false,
         "prettier.printWidth": 120,
-    }
+        "cSpell.words": ["Jellyfin", "Jellyseerr"],
+    },
 }