New: Updated Material Symbols to latest version

Fix: Added left padding to disc headings in music lists
Fix: Multi-selection checkboxes were not covering the cards fully because of minification
2026-10-26 17:39:34 +00:00 · 2026-06-05 22:58:57 +05:30 · 2026-06-05 22:57:44 +05:30 · 2026-06-05 22:56:27 +05:30 · 2026-06-05 22:37:30 +05:30 · 2026-06-05 22:27:59 +05:30
29 changed files with 11744 additions and 1001 deletions
@@ -7,6 +7,11 @@ assignees: ''

 ---

+**Checklist**
+- [ ] I have read the README.md 
+- [ ] I have searched through the other open and closed issues using the GitHub search bar
+- [ ] I have made sure that my issue is not a duplicate
+
 **Describe the bug**
 A clear and concise description of what the bug is.

@@ -17,18 +22,18 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.

 **ElegantFin:**
- - Version [e.g. 24.12.11]
+ - Version [e.g. 24.12.01]

 **Jellyfin Server:**
- - Version [e.g. 10.10.7]
+ - Version [e.g. 10.10.3]

-**Desktop (please complete the following information):**
- - OS: [e.g. iOS]
+**Desktop:**
+ - OS: [e.g. Windows]
 - Browser: [e.g. chrome, safari]
 - Browser Version: [e.g. 22]
 - Screen Resolution [e.g. 1920x1080]

-**Smartphone or TV (please complete the following information):**
+**Smartphone or TV:**
 - Device: [e.g. iPhone6]
 - OS: [e.g. iOS8.1]
 - Browser: [e.g. stock browser, safari]
@@ -36,5 +41,7 @@ If applicable, add screenshots to help explain your problem.
 - Jellyfin App Version: 


-**Additional context**
-Add any other context about the problem here.
+**Are you using any plugins or extra CSS configuration**
+- Add any third-party plugins or CSS configuration you use.
+- [e.g. Media Bar, Custom Tabs etc]
+- [e.g. other custom css modifications]
@@ -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
@@ -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">

-# ⭐ 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.
+<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
+
+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,84 +39,81 @@ 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>      |
+| 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="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>   |

 </details>

 <details>
  <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>   |
+| 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/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="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>     |

 </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>

-	@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/ElegantFin-jellyfin-theme-build-latest-minified.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. Select General tab from the side bar.
-3. Scroll down to find Custom CSS code box under Branding section.
+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
-</details>
+ </details>

 <details>
  <summary><i>Detailed steps for client-side implementation</i></summary>
@@ -108,8 +122,7 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 2. Scroll down to find Custom CSS code box.
 3. Paste the custom css in Custom CSS code box.
 4. Click save.
-</details>
-
+ </details>

 <hr>

@@ -130,132 +143,167 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 <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

- 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.
+- 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:8097`.
+    ```
+    :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>

 <details>
  <summary><i>3. Enable 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" />

-
 - 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;
-  }
-  ```
+    ```
+    :root{
+      --extraCardButtonsVisibility: block;
+    }
+    ```
 - To hide them again, simply remove this code block or replace `block` with `none`.
-</details>
+      </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" />

-
 - 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%;
-  }
-  ```
+    ```
+    :root{
+      --overlayPlayButtonPosition: 50%;
+    }
+    ```
 - To undo this change, simply remove this code block or replace `50%` with `2.8em`.
-</details>
+      </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

- 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.
+- 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.
+
 ```
  :root{
    --cardHoverEffect: none;
  }
 ```
+
 - To undo this change, simply remove this code block or replace `none` with `""`.
-</details>
+      </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" />

-
 - 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>

 <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" />

+- 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.

- 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>
+      </details>
+
+<details>
+  <summary><i>8. Switch between different app bar styles</i></summary>
+
+https://github.com/user-attachments/assets/b5868cd2-8df9-490d-a2b6-4386c6ddcd56
+
+- You can switch between these using `--appBarHeight`.
+- Use 5em to enable the fading app bar (seamless) (default);
+- Or, use 4.6em to get the solid app bar (cleaner with border)
+
+```
+:root{
+  /* example */
+  --appBarHeight: 4.6em;
+}
+```
+
+- To undo this change, simply remove this 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.
+- You can also experiment and share your own take there if you wish.
+      </details>

 <hr>

 ### 🆗 Tested on
- Jellyfin Server v10.10.7
+
+- Jellyfin Server v10.11.10
 - Microsoft Edge (Chromium)
 - Jellyfin Android App v2.6.3

-Note: Support for v10.11.0 is a work in progress
-
 <hr>

 ### 🛠️ Troubleshooting
+
 <details>
  <summary>1️⃣ - <i>How do I check if I am using the latest version of ElegantFin?</i></summary>

- To make sure that you are using the latest version of ElegantFin, check the version number at the bottom in the Dashboard screen. 
- It should be something like ElegantFin v25.07.XX
+- Check the version number at the bottom in the Settings screen.
+- It should be something like `ElegantFin v25.XX.XX`.
+
+        <img width="380" height="300" alt="image" src="https://github.com/user-attachments/assets/aecca6f5-7bd3-4057-9131-aa60b3becbaf" />
+
 </details>

 <details>
  <summary>2️⃣ - <i>I see that a newer version is available, but I have not received it yet. Why?</i></summary>

- If Dashboard footer shows an old version, it means that your app is still using an old cache.
- Once that cache is updated, the new version will be loaded. 
- To get the latest version, you will need to clear cache. There are multiple ways to do it.
- On web version, 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.
-</details>
+- 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.
-</details>
+- 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.
-</details>
+      </details>

 <details>
  <summary>5️⃣ - <i>All the icons on my LG TV seem to be broken. How to fix them?</i></summary>
@@ -263,13 +311,12 @@ Note: Support for v10.11.0 is a work in progress
 - 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:
-  
-  ```
-  :root{
-    --iconPack: 'Material Icons';
-  }
-  ```
-</details>
+    ```
+    :root{
+      --iconPack: 'Material Icons';
+    }
+    ```
+  </details>

 <details>
  <summary>6️⃣ - <i>How do I report bugs/issues?</i></summary>
@@ -277,13 +324,12 @@ Note: Support for v10.11.0 is a work in progress
 - 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).

-
 </details>
 <details>
  <summary>7️⃣ - <i>When can I expect another update?</i></summary>

 - 🤷
-</details>
+      </details>

 <hr>

@@ -291,8 +337,12 @@ Note: Support for v10.11.0 is a work in progress

 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).
-
@@ -1,2 +1,2 @@
-/* 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 v25.12.31 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.12.31";color-scheme:dark;--darkerGradientPoint:#111827;--darkerGradientPointAlpha:rgba(17,24,39,.85);--lighterGradientPoint:#1d2635;--lighterGradientPointAlpha:rgba(29,38,53,.85);--gradientPointAlpha:rgba(29,38,53,.3);--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;--minEpisodeCardWidth:26em;--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;--itemOriginalTitleVisibility:block;--libraryLabelVisibility:none;--clearLogoVisibility:block;--itemTitleVisibility:none;--miniOverlayButtonVisibility:block;--cardHoverEffect:"";--appBarHeight:5em;--backdropTrimFromTop:10%}html{font-family:"Inter",sans-serif;font-optical-sizing:auto;font-weight:425;font-style:normal;-webkit-tap-highlight-color:transparent!important}body{--primaryItemPageNegativeSpace:14vh;--secondaryItemPageNegativeSpace:60vh;--clearLogoBottomSpace:11em}.layout-desktop>body:has(>audio[src]){--primaryItemPageNegativeSpace:calc(14vh + 5em);--secondaryItemPageNegativeSpace:calc(60vh + 5em)}.layout-mobile{--itemColumnGap:0;--headerColorGradient:var(--headerColorGradientAlt);--blurLargest:blur(12px);--headerBlurMask:linear-gradient(180deg,white 60%,90%,transparent)}.layout-mobile>body{--secondaryItemPageNegativeSpace:45vh}@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{content:"\e88e";font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 48}.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:100%;width:-webkit-fill-available;justify-content:center;font-weight:600}::selection{background:var(--activeColorAlpha)}.cardImageIcon{color:vLine truncated
@@ -1,2 +1,2 @@
-/* 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 v25.11.25 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);--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(.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-Line truncated
@@ -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 */
@@ -11,6 +11,11 @@
    --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);
@@ -20,169 +25,125 @@
    --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);
 }

-.card-withuserdata[data-isfolder="true"] .cardImageContainer.defaultCardBackground {
+[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;
 }

-.card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"], [data-type="Series"], [data-type="Folder"], [data-type="Season"], [data-type="Playlist"]) .cardImageContainer.cardContent::before {
+[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);
-    margin-bottom: .175em;
+    font-size: clamp(1em, max(2.5vh, 2vw), 2em);
    font-weight: 800;
    color: white;
-    font-family: 'Noto Sans';
+    font-family: "Noto Sans";
    text-align: center;
+    width: 94%;
+    white-space: normal;
 }

-.card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"], [data-type="Series"], [data-type="Folder"]) .cardImageIcon.material-icons:not(.quiz)::before {
+.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;
 }

-/* These show up when no image is set */
-
-/* div[data-collectiontype="movies"] .cardImageContainer.defaultCardBackground {
-    background: var(--colorOverlayMoviesCover) !important;
+[data-collectiontype="movies"] .cardContent {
+    background-color: var(--colorOverlayMoviesCover) !important;
    background-image: var(--urlMoviesCover) !important;
 }

-div[data-collectiontype="tvshows"] .cardImageContainer.defaultCardBackground {
-    background: var(--colorOverlayTvshowsCover) !important;
+[data-collectiontype="tvshows"] .cardContent {
+    background-color: var(--colorOverlayTvshowsCover) !important;
    background-image: var(--urlTvshowsCover) !important;
 }

-div[data-collectiontype="livetv"] .cardImageContainer.defaultCardBackground {
-    background: var(--colorOverlayLivetvCover) !important;
+[data-collectiontype="livetv"] .cardContent {
+    background-color: var(--colorOverlayLivetvCover) !important;
    background-image: var(--urlLivetvCover) !important;
 }

-div[data-collectiontype="music"] .cardImageContainer.defaultCardBackground {
-    background: var(--colorOverlayMusicCover) !important;
+[data-collectiontype="music"] .cardContent {
+    background-color: var(--colorOverlayMusicCover) !important;
    background-image: var(--urlMusicCover) !important;
 }

-div[data-collectiontype="homevideos"] .cardImageContainer.defaultCardBackground {
-    background: var(--colorOverlayHomevideosCover) !important;
+[data-collectiontype="homevideos"] .cardContent {
+    background-color: var(--colorOverlayHomevideosCover) !important;
    background-image: var(--urlHomevideosCover) !important;
 }

-div[data-collectiontype="books"] .cardImageContainer.defaultCardBackground {
-    background: var(--colorOverlayBooksCover) !important;
+[data-collectiontype="books"] .cardContent {
+    background-color: var(--colorOverlayBooksCover) !important;
    background-image: var(--urlBooksCover) !important;
 }

-div[data-collectiontype="boxsets"] .cardImageContainer.defaultCardBackground {
-    background: var(--colorOverlayBoxsetsCover) !important;
+[data-collectiontype="boxsets"] .cardContent {
+    background-color: var(--colorOverlayBoxsetsCover) !important;
    background-image: var(--urlBoxsetsCover) !important;
 }

-div[data-collectiontype="folders"] .cardImageContainer.defaultCardBackground {
-    background: var(--colorOverlayFoldersCover) !important;
+[data-collectiontype="folders"] .cardContent {
+    background-color: var(--colorOverlayFoldersCover) !important;
    background-image: var(--urlFoldersCover) !important;
 }

-div[data-collectiontype="playlists"] .cardImageContainer.defaultCardBackground {
-    background: var(--colorOverlayPlaylistsCover) !important;
-    background-image: var(--urlPlaylistsCover) !important;
-} */
-
-/* These are the front facing images */
-
-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;
+[data-collectiontype="playlists"] .cardContent {
+    background-color: var(--colorOverlayPlaylistsCover) !important;
    background-image: var(--urlPlaylistsCover) !important;
 }

-.card-withuserdata[data-isfolder="true"] .cardImageContainer.cardContent {
-    filter: contrast(0.85);
-    background-size: cover !important;
-    background-position: 50% !important;
-    background-blend-mode: multiply;
+[data-type="CollectionFolder"][data-prefix="MIX"] .cardContent {
+    background-color: var(--colorOverlayMixedCover) !important;
+    background-image: var(--urlMixedCover) !important;
 }

-div[data-collectiontype="movies"] .cardImageContainer.cardContent::before {
-    content: "Movies";
+[data-collectiontype="movies"][data-prefix="REC"] .cardContent {
+    background-color: var(--colorOverlayRecordedmoviesCover) !important;
+    background-image: var(--urlRecordedmoviesCover) !important;
 }

-div[data-collectiontype="tvshows"] .cardImageContainer.cardContent::before {
-    content: "TV Shows";
+[data-type="CollectionFolder"][data-prefix="REC"] .cardContent {
+    background-color: var(--colorOverlayRecordedtvCover) !important;
+    background-image: var(--urlRecordedtvCover) !important;
 }

-div[data-collectiontype="livetv"] .cardImageContainer.cardContent::before {
-    content: "Live TV";
+[data-type="CollectionFolder"][data-prefix="ANI"] .cardContent {
+    background-color: var(--colorOverlayAnimeCover) !important;
+    background-image: var(--urlAnimeCover) !important;
 }

-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 {
-    filter: contrast(0.85);
-    background-size: cover !important;
-    background-position: 50% !important;
-    background-blend-mode: multiply;
+[data-type="CollectionFolder"][data-prefix="SPO"] .cardContent {
+    background-color: var(--colorOverlaySportsCover) !important;
+    background-image: var(--urlSportsCover) !important;
 }
@@ -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;
+}
@@ -1,2 +1,2 @@
-/* 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 v25.12.31 for the ElegantFin Theme for Jellyfin by lscambo13 */
+ .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;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 .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,.85),40%,transparent)}.pause-button{top:1em!important}.separator-icon{font-size:5px;color:var(--dimTextColor)}.dot{border-radius:.25em;width:.375em;height:.375em;transition:width .5s;opacity:.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%}}
@@ -1,20 +1,5 @@
-/* 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 */
-.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,
@@ -23,16 +8,22 @@
 }

 .play-button {
-    font-family: 'Inter';
+    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, .85), 70%, rgba(0, 0, 0, 0));
-    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), 70%, rgba(0, 0, 0, 0));
+    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;
 }

@@ -40,7 +31,6 @@
    transform-origin: center left;
 }

-/* this is my own take */
 .rating-value {
    flex-wrap: wrap;
    justify-content: center;
@@ -48,24 +38,25 @@

 .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(1.5 * 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 .125s, border 0s;
-    user-select: none;
-}
-
-.layout-tv #slides-container {
-    top: 0em;
-}
-
-.layout-mobile #slides-container {
-    top: 10em;
+    overflow: hidden;
+    transition: border 0s;
 }

 .logo-container {
@@ -80,35 +71,135 @@
 }

 .backdrop-overlay {
-    background: linear-gradient(0deg, rgba(0, 0, 0, .85), 40%, transparent);
+    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: 30%;
+        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 {
-        top: calc(50% + 20vh);
-        transform: translateX(-50%) scale(0.8);
+        bottom: 3em;
    }

-    .info-container {
-        /* top: calc(50% + 6vh); */
-    }
-
-    .tomato-rating {
+    .tomato-rating,
+    .genre {
        display: none;
    }

    .dots-container {
-        top: calc(50% + 19vh);
+        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(.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%;
    }
 }

@@ -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 */
@@ -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 */
@@ -1,4 +1,5 @@
-# 🧩 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.

 #### **Author:** [lscambo13](https://github.com/lscambo13)
@@ -50,6 +51,9 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
    --colorOverlayHomevideosCover: transparent;
    --colorOverlayBooksCover: transparent;
    --colorOverlayFoldersCover: transparent;
+    --colorOverlayMixedCover: transparent;
+    --colorOverlayRecordedmoviesCover: transparent;
+    --colorOverlayRecordedtvCover: transparent;
    --urlMoviesCover: transparent;
    --urlTvshowsCover: transparent;
    --urlLivetvCover: transparent;
@@ -59,6 +63,9 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
    --urlHomevideosCover: transparent;
    --urlBooksCover: transparent;
    --urlFoldersCover: transparent;
+    --urlMixedCover: transparent;
+    --urlRecordedmoviesCover: transparent;
+    --urlRecordedtvCover: transparent;
 }
 ```

@@ -79,6 +86,9 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
    --colorOverlayHomevideosCover: transparent;
    --colorOverlayBooksCover: transparent;
    --colorOverlayFoldersCover: transparent;
+    --colorOverlayMixedCover: transparent;
+    --colorOverlayRecordedmoviesCover: transparent;
+    --colorOverlayRecordedtvCover: transparent;
    --urlMoviesCover: var(--cardBackgroundGradient);
    --urlTvshowsCover: var(--cardBackgroundGradient);
    --urlLivetvCover: var(--cardBackgroundGradient);
@@ -88,6 +98,9 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
    --urlHomevideosCover: var(--cardBackgroundGradient);
    --urlBooksCover: var(--cardBackgroundGradient);
    --urlFoldersCover: var(--cardBackgroundGradient);
+    --urlMixedCover: var(--cardBackgroundGradient);
+    --urlRecordedmoviesCover: var(--cardBackgroundGradient);
+    --urlRecordedtvCover: var(--cardBackgroundGradient);
 }
 ```

@@ -98,7 +111,6 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This

 ![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");

@@ -112,6 +124,9 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
    --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%);
@@ -121,6 +136,9 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
    --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%);
 }
 ```

@@ -130,7 +148,7 @@ 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:

 ```
@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");
@@ -140,9 +158,7 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This

 ### ⚙️ How to configure this add-on?

- Remember, you do not need to configure anything if you're happy with the default set of images.
-
-
+-   Remember, you do not need to configure anything if you're happy with the default set of images.

 <details>
  <summary><i>Click here to reveal.</i></summary>
@@ -168,6 +184,9 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
    --colorOverlayHomevideosCover: rgb();
    --colorOverlayBooksCover: rgb();
    --colorOverlayFoldersCover: rgb();
+    --colorOverlayMixedCover: rgb();
+    --colorOverlayRecordedmoviesCover: rgb();
+    --colorOverlayRecordedtvCover: rgb();

    <!-- cover images; input the url pointing to an image. -->

@@ -179,8 +198,12 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
    --urlHomevideosCover: url();
    --urlBooksCover: url();
    --urlFoldersCover: url();
+    --urlMixedCover: url();
+    --urlRecordedmoviesCover: url();
+    --urlRecordedtvCover: url();

 }
+
 ```
 </details>

@@ -191,11 +214,12 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
 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:

 ```
+
@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);
+--colorOverlayLivetvCover: rgb(39, 68, 185);
+--urlLivetvCover: url(https://artworks.thetvdb.com/banners/fanart/original/71663-33.jpg);
 }

 ```
@@ -224,3 +248,4 @@ Suppose you want to modify the Live TV cover art. You'll have to modify the vari

 <hr>

+```
@@ -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": {
+        "build:theme": "postcss ./Theme/ElegantFin-theme-nightly.css -o ./Theme/ElegantFin-jellyfin-theme-build-latest-minified.css",
+        "build:covers-addon": "postcss ./Theme/assets/add-ons/custom-media-covers-nightly.css -o ./Theme/assets/add-ons/custom-media-covers-latest-min.css",
+        "build:mediabar-addon": "postcss ./Theme/assets/add-ons/media-bar-plugin-support-nightly.css -o ./Theme/assets/add-ons/media-bar-plugin-support-latest-min.css",
+        "build:release": "npm run build:theme && npm run build:covers-addon && npm run build: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"
+    }
+}
@@ -0,0 +1,22 @@
+const cssDeclarationSorter = require('css-declaration-sorter');
+const cssnano = require('cssnano');
+
+module.exports = {
+	plugins: [
+		cssDeclarationSorter({
+			keepOverrides: true,
+			order: (a, b) => {
+				const aVar = a.startsWith('--');
+				const bVar = b.startsWith('--');
+
+				if (aVar && !bVar) return -1;
+				if (!aVar && bVar) return 1;
+
+				return a.localeCompare(b);
+			},
+		}),
+		cssnano({
+			preset: 'default',
+		}),
+	],
+};
@@ -1,8 +1,17 @@
 {
-	"folders": [
-		{
-			"path": "."
-		}
-	],
-	"settings": {}
+    "folders": [
+        {
+            "path": "."
+        }
+    ],
+    "settings": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": true,
+        "prettier.useTabs": false,
+        "prettier.printWidth": 120,
+        "cSpell.words": [
+            "Jellyfin",
+            "Jellyseerr"
+        ],
+    }
 }
Author	SHA1	Message	Date
lscambo13	835d6a0fbd	New: Updated Material Symbols to latest version	2026-06-05 22:58:57 +05:30
lscambo13	1fe0bfb13f	Fix: Added left padding to disc headings in music lists	2026-06-05 22:57:44 +05:30
lscambo13	3b4f966833	Fix: Multi-selection checkboxes were not covering the cards fully because of minification dev: updated calc() functions to prevent issues caused by minification	2026-06-05 22:56:27 +05:30
lscambo13	ba0aabd07b	dev: use cssnano, postcss, postcss-cli and css-declaration-sorter packages for more control over minification dev: exclude some files dev: sort declarations alphabetically during minification	2026-06-05 22:37:30 +05:30
lscambo13	9972862b5e	Fix: Added safe insets for #233	2026-06-05 22:27:59 +05:30
lscambo13	6ba7bf37dd	dev: updated comments for clarity	2026-06-04 22:55:49 +05:30
lscambo13	b216efa4e4	Fix: Removed hardcoded padding value	2026-06-04 22:00:34 +05:30
lscambo13	5faa8f8d07	New: Disabled enlarged 'continue watching' cards by default; they can be enabled using --resumeCardScale	2026-06-04 21:07:25 +05:30
lscambo13	a6365ea3c7	dev: rearranged some code	2026-06-04 20:54:30 +05:30
lscambo13	115cb68b7a	New: the three-dot menu button can now be toggled on or off	2026-06-04 20:50:35 +05:30
lscambo13	a20a4a18c7	Fix: Potential fix for #233	2026-06-04 20:48:47 +05:30
lscambo13	a2de79b1e3	Update tested version of Jellyfin Server to v10.11.10	2026-05-29 07:25:19 +05:30
lscambo13	8ff232ece0	Fix: Simplified the card hover overlay animation	2026-05-25 21:08:28 +05:30
lscambo13	45273ab2cd	Fix: Added icon fallback to prevent the flash of invisible text	2026-05-25 21:06:43 +05:30
lscambo13	0f5925c429	New: Updated seek bar thumbs, and fixed their functionality on Firefox	2026-05-24 14:33:57 +05:30
lscambo13	47783d848d	Fix: Exclude gap from vertical music lists	2026-05-24 14:26:47 +05:30
lscambo13	2e61005bde	Fix: Exclude vertical lists from `4615ef4dcc`	2026-05-23 21:25:47 +05:30
lscambo13	0863886a23	dev: updated formatting	2026-05-23 21:09:05 +05:30
lscambo13	d1c4cdf371	Fix: Some details tables were overflowing for some reason on phones	2026-05-23 21:05:41 +05:30
lscambo13	5a4ce02efc	Fix: Restored the three-dot button permanently because newer Jellyfin versions disable the right-click context menu	2026-05-23 20:55:30 +05:30
lscambo13	42e962c6a3	Fix: Removed fixed font-size to prevent issues with indicator icons, and restored some compatibility properties	2026-05-23 20:51:56 +05:30
lscambo13andAhmed Hamdy	d0da93dd8a	New: Replaced music artist names with clear logos #273 - This can be configured using css variables - Rearranged code for better manageability Co-authored-by: Ahmed Hamdy <AhmedRadwan4@users.noreply.github.com>	2026-05-23 20:26:47 +05:30
lscambo13	a85a8127c4	Fix: Hover overlay gets stuck on latest Jellyfin versions; this workaround hides it	2026-05-23 20:10:34 +05:30
lscambo13	e6eeba4b54	Fix: Made the new minimal icons optional This prevents breaking compatibility with some plugins New: Updated to a newer version of Material Symbols Fix: Added fallback to the stock icons for edge-cases	2026-05-23 20:05:47 +05:30
lscambo13	d8edde6435	Fix: Update README with Jellyfin Media Player information Clarify the status of Jellyfin Media Player and recommend Jellyfin Desktop for better compatibility.	2026-05-19 20:39:03 +05:30
lscambo13	ab93f3b25f	Fix: Update instructions for enabling the add-on	2026-05-19 20:18:14 +05:30
lscambo13	5071cc41c0	Fix: Update README for card hover effect and plugin support	2026-05-19 20:16:18 +05:30
tim-vu	8f25126e04	New: Faster page loading with optimized icon bundle (#288 ) * Optimize icon bundle * Move changes to nightly	2026-05-12 15:28:21 +05:30
lscambo13	de10ccd208	Fix: Used a different Anime cover to prevent the moire effect	2026-04-30 20:38:49 +05:30
lscambo13	ab8b652891	Fix: Used a stronger pattern to avoid mismatches in the media covers add-on #280	2026-04-30 20:34:59 +05:30
Buhbbl	08612ac638	New: Added support for Anime & Sports cover art (#281 ) * Added Anime Cover Art * Added Sports Cover Art * compressed the images for performance & changed the image urls	2026-04-30 07:01:07 +05:30
lscambo13	58f905d127	Fix: Reduced the gap between the cast poster and the title	2026-04-26 15:21:36 +05:30
lscambo13	2ca1553435	New: Added a subtle text-shadow to card titles	2026-04-25 20:45:29 +05:30
lscambo13	4615ef4dcc	Fix: Added a workaround to bring back the gap between the last scrollSlider child and the screen on phones	2026-04-25 20:41:49 +05:30
lscambo13	7fee0798ab	Fix: Removed temporary workarounds for sizing cards on phones	2026-03-29 19:36:27 +05:30
lscambo13	256ef84e02	New: Added ellipsis to drop-down menus	2026-03-29 19:30:52 +05:30
lscambo13	8f85ca720f	Fix: Typo	2026-03-29 19:28:57 +05:30
lscambo13	2180129ba3	New: Updated the media bar add-on for more backdrop visibility on desktops	2026-03-29 19:25:11 +05:30
lscambo13	1bcf1fd374	Fix: Prevented the border style from loading before the slides were ready in the media bar add-on	2026-03-27 20:23:06 +05:30
lscambo13	6ea5d12f7c	New: Reordered the play button in the media bar add-on	2026-03-27 20:20:49 +05:30
lscambo13	4ca034b146	Fix: Tweaked the width of 'My Media (Small)' buttons	2026-03-27 16:45:04 +05:30
lscambo13	4c3a546a73	dev: reworked how cards are sized on phones - this optimises the layout with increased card sizes without altering their count - this allows getting rid of many workarounds for alignment of section headings - this approach uses css 'gap' like on desktop - it also makes the layout more predictable/consistent	2026-03-27 16:44:08 +05:30
lscambo13	8f50558039	New: 'Continue Watching' cards are now bigger than other cards - the scale factor is configurable using '--resumeCardScale'	2026-03-27 16:27:26 +05:30
lscambo13	72289a9091	Fix: Items container in Collections was displayed in the wrong order	2026-03-27 16:20:55 +05:30
lscambo13	582e405207	Fix: Single-column layout wasn't being forced correctly on phones	2026-03-27 16:19:43 +05:30
lscambo13	869168e914	New: Increased margin between the home button and top of the app drawer	2026-03-27 16:18:28 +05:30
lscambo13	58dc3909e6	New: Increased backdrop card sizes on TV and Desktop	2026-03-27 16:09:04 +05:30
lscambo13	a68da7fe93	Fix: Made all indicators consistently small	2026-03-27 16:05:18 +05:30
lscambo13	6c2de4f07a	dev: possible fix for unclickable appbar buttons	2026-03-18 22:24:05 +05:30
lscambo13	137808128e	New: Updated the styling of 'skip' buttons styling on JF 10.11.6	2026-03-18 22:15:55 +05:30
lscambo13	9ca4f0a869	Fix: Prevented false matches to avoid misalignments resulting from the missing 'title' attribute on some buttons	2026-03-18 22:12:26 +05:30
lscambo13	81a4561279	dev: fixed formatting	2026-03-18 22:09:31 +05:30
lscambo13	bb3a1b10a7	New: Tweaked the size and position of indicators and 'continue watching' progress bars for better alignment on phones	2026-03-18 22:07:37 +05:30
lscambo13	7cac78050a	Fix: 'Nothing here' message inside some tabs did not have side margins	2026-03-18 22:05:31 +05:30
lscambo13	60a5b58ebc	Fix: Some library pages were not centered or left-aligned correctly	2026-03-18 21:59:57 +05:30
lscambo13	8fac6f51bf	Fix: Added consistent gap between icon with text inside some buttons i.e. sort button	2026-03-18 21:56:37 +05:30
lscambo13	0c118996a0	Merge pull request #260 from ACertainCoder/fix/media-bar-plugin-volume-toggle Fix: Volume toggle position was not aligned to the play/pause button in the media bar addon	2026-03-18 19:22:08 +05:30
ACertainCoder	1dbf20af69	Apply top margin to volume toggle	2026-03-08 16:28:17 +01:00
lscambo13	62231c0267	HOTFIX: ElegantFin v25.12.31	2025-12-31 21:33:17 +05:30
lscambo13	cc822351ea	Fix: Some section headings got misaligned, so reverted to the original approach	2025-12-31 21:29:19 +05:30
lscambo13	7e1f0aa554	Update README.md	2025-12-31 21:01:35 +05:30
lscambo13	4fb2520a91	RELEASE: ElegantFin v25.12.31	2025-12-31 20:31:06 +05:30
lscambo13	750e9a2d81	dev: added a donation link	2025-12-31 20:12:47 +05:30
lscambo13	a1eb5af67d	dev: Handled some edge-cases for the previous commit (`756e4a181b`)	2025-12-31 20:05:44 +05:30
lscambo13	756e4a181b	Fix: Prevented long section headings from breaking into another line on the homepage on phones	2025-12-30 23:08:46 +05:30
lscambo13	a3e52a43de	New: Updated styling for the Media Bar support add-on Changes: - redesigned the side indicator dots - tweaked the layout specifically for phones and TVs - improved responsiveness on TV layout - made parental rating font consistent with its siblings - positioned it correctly for the experimental layout - positioned the pause button in the top-right corner - updated colors of dot separators - tweaked its distance from the header on small screens	2025-12-30 23:05:06 +05:30
lscambo13	8112d4401b	Fix: Improved responsiveness of header tabs and page padding - Prevented header tabs from shifting up too early on TVs - Updated the page padding-top to adjust in sync with header tabs position - Made the page top padding aware of the header height to prevent overlaps	2025-12-30 21:38:02 +05:30
lscambo13	c665c54f53	dev: updated the readme.md file	2025-12-29 00:56:39 +05:30
lscambo13	af6d340e8e	dev: updated the customisation section	2025-12-29 00:33:31 +05:30
lscambo13	fa0cf75972	dev: possible fix for #196 #192 #163	2025-12-28 22:45:01 +05:30
lscambo13	ec7b63b431	Merge branch 'main' of https://github.com/lscambo13/ElegantFin	2025-12-28 22:21:43 +05:30
lscambo13	0f8474eccd	New: Stop hiding the header on scroll on tablets to match the desktop layout behavior	2025-12-28 22:21:21 +05:30
lscambo13	4083a7a0b9	Fix: Header tabs were being cut-off on tablet screens #220	2025-12-28 22:19:00 +05:30
lscambo13	8f27df07bc	dev: simplified some selectors	2025-12-28 22:13:59 +05:30
lscambo13	6a11b9cb60	Fix: Header tabs were sightly off-center on phones/tablets due to an unintentional left padding	2025-12-28 22:11:19 +05:30
lscambo13	c972bb0a48	Update header level in README.md Change header level for the ElegantFin Theme section.	2025-12-24 07:46:06 +05:30
lscambo13	bf4241a700	Fix: Posters were not visible on some older TVs Thanks to @BullenMoore https://github.com/lscambo13/ElegantFin/issues/182#issuecomment-3678911997	2025-12-21 22:14:22 +05:30
lscambo13	1fe65b63e6	Fix: Reworked Live TV cells to fix issues with cover overlap. focus color and height	2025-12-21 20:50:25 +05:30
lscambo13	872ac32747	Fix: Grid layout was unintentionally being applied on all layouts #217	2025-12-21 20:43:16 +05:30
lscambo13	b218a819da	RELEASE: ElegantFin v25.11.25	2025-11-24 22:06:51 +05:30
lscambo13	c4d04e1709	Fix: Optimized performance a bit	2025-11-24 21:04:17 +05:30
lscambo13	c9839f0848	Fix: TYPO!! #205	2025-11-24 19:07:46 +05:30
lscambo13	779b3449c0	dev: Updated the documentation	2025-11-23 23:59:59 +05:30
lscambo13	53b003dd9e	Fix: Media Bar contents were overlapping on smaller displays	2025-11-23 21:32:37 +05:30
lscambo13	5c915d6ac1	Fix: Disabled or adjusted some animations for improved performance on low-end TVs	2025-11-23 21:08:13 +05:30
lscambo13	2336be539a	Fix: Disabled the new episode grid on older browsers to avoid issues with Music pages	2025-11-23 20:21:37 +05:30
lscambo13	76a5319c97	Fix: Artist page top margin was too low	2025-11-23 20:14:20 +05:30
lscambo13	296263c9d7	dev: Renamed '--backdropPositionY' to a more logical name, '--backdropTrimFromTop'	2025-11-23 20:11:59 +05:30
lscambo13	422a1e185e	New: Shift the media page content up when Now Playing bottom bar is visible	2025-11-23 20:01:20 +05:30
lscambo13	7dcd42f992	Fix: Custom Media Cover titles were not visible on TVs	2025-11-23 19:58:58 +05:30
lscambo13	4e53bd27bc	Fix: Improved compatibility with older browsers that don't support 'aspect-ratio'	2025-11-15 21:40:21 +05:30
lscambo13	86a1e1c74e	Fix: Added responsive Episode card grid to get rid of the media queries	2025-11-15 21:31:16 +05:30
lscambo13	81a118e86e	dev: updated documentation	2025-11-15 20:37:23 +05:30
lscambo13	44e95c42cb	New: Added custom covers for Mixed Media libraries, Recordings and Recorded Movies Fix: Added line wrap to prevent long library names from overflowing dev: Simplified the code	2025-11-15 20:27:46 +05:30
lscambo13	8b1585da89	Fix: Added the missing entries i.e. Playlists, Recorded Movies etc	2025-11-15 20:24:05 +05:30
Mads Kelberg	3d08baecc8	fix: custom background overwrites scaling & position	2025-11-14 11:59:59 +01:00
Mads Kelberg	fe651691e3	refactor: use data label instead of static label	2025-11-13 23:23:08 +01:00
Mads Kelberg	cf67874221	chore: group css and remove duplicate	2025-11-13 23:18:07 +01:00
Mads Kelberg	676a1be4ae	fix: update CSS selectors for CollectionFolder type	2025-11-13 23:13:43 +01:00
lscambo13	9a60e664e5	Fix: Used a higher quality info_outline icon	2025-11-11 23:19:03 +05:30
lscambo13	ab8627eb66	Fix: Thumbnails were slightly off-center in the episode grid	2025-11-11 23:05:24 +05:30
lscambo13	c7abd97dfb	New: Redesigned the episode lists to be 'grid' on desktop	2025-11-11 22:51:58 +05:30
lscambo13	23542f197e	Fix: Used standard colors in episode lists dev: simplified some selectors to improve compatibility with HSS plugin	2025-11-11 22:43:26 +05:30
lscambo13	5641b4c7d6	Fix: Continue watching progress bar and the chapter cards were bugged on Firefox	2025-11-11 22:40:26 +05:30
lscambo13	beaf6415d0	New: Made the clear logo position from bottom configurable on desktop using a variable	2025-11-09 22:48:00 +05:30
lscambo13	a7216ebbdb	New: Updated the Seasons page New: Moved content up on some more pages dev: Live TV icons should be visible now `ee5ad227d0` dev: rearranged the code	2025-11-09 22:36:42 +05:30
lscambo13	cf17fb6538	Fix: Removed the workaround to position the card on top of title	2025-11-09 22:24:39 +05:30
lscambo13	30e0ad5488	Fix: Forgot to include a variable dev: code cleanup	2025-11-09 22:10:44 +05:30
lscambo13	ee5ad227d0	Fix: Playlist square card was not visible dev: simplified some selectors	2025-11-09 22:07:55 +05:30
lscambo13	b5f5a765ea	Fix: Next up section column width kept varying for some reason	2025-11-09 22:03:38 +05:30
lscambo13	864834b5a8	Fix: Reduced the bottom padding from episode title on phones	2025-11-09 22:02:10 +05:30
lscambo13	0243875a8c	Fix: Long words did not break in some cases Fix: Long sentences were overflowing dev: simplified some selectors	2025-11-09 22:01:22 +05:30
lscambo13	87374d3d3e	Fix: Now playing page did not have a background color on desktop	2025-11-09 21:57:38 +05:30
lscambo13	e9bee92007	Fix: Media rating font color and the play button text alignment was incorrect in the Media Bar plugin	2025-11-09 21:56:44 +05:30
lscambo13	10239e818e	dev: updated formatting	2025-11-09 21:48:48 +05:30
lscambo13	af01c3636d	Fix: Improved support for the Media Bar Plugin	2025-11-09 21:48:13 +05:30
lscambo13	17e2fe6940	dev: added Prettier config	2025-11-04 20:53:10 +05:30
lscambo13	69f4540ec5	Fix: Plot info was not aligned to the bottom on older browsers	2025-11-04 20:10:36 +05:30
lscambo13	8f620b489f	Fix: Dark overlay on Continue Watching and Chapter cards did not render correctly on some browsers #130 ? dev: improved compatibility with Firefox	2025-11-04 20:09:46 +05:30
lscambo13	556acc22c5	Fix: Main media buttons were overlapping the plot info in episode pages #169	2025-11-04 19:58:26 +05:30
lscambo13	1e0eaae2a0	Fix: Drop-down menu font style was not applying on Firefox #110	2025-11-04 19:56:56 +05:30
lscambo13	82dd0469d5	dev: Allowed hiding the overlay button on mobile #162	2025-11-03 23:05:45 +05:30
bibi0019	36290112c3	Fix: Ensure Skip Intro Button is readable on jellyfin 10.11 (#165 )	2025-11-03 22:47:37 +05:30
lscambo13	fa6dde9f1b	dev: Allowed text-based titles to be shown using a variable	2025-11-03 22:40:55 +05:30
lscambo13	8575b9b2b4	New: Increased the font size of episode title	2025-11-03 22:34:57 +05:30
lscambo13	bf23c34fbf	Fix: EPG rows were displayed incorrectly on Firefox #164	2025-11-03 22:34:16 +05:30
lscambo13	f7aae10db0	New: Avoid adding empty space if both plot and tagline are empty	2025-11-03 22:32:45 +05:30
lscambo13	349a720cd2	Fix: Tweaked paddings around the track selection menus to be more consistent dev: rearranged code	2025-11-03 22:31:29 +05:30
lscambo13	b9ceded828	Fix: Some scroll buttons were not aligned with their section headings	2025-11-03 22:23:18 +05:30
lscambo13	1647f40140	dev: Allowed clear logos to be hidden using a variable	2025-11-03 22:21:43 +05:30
lscambo13	bfdd8d8576	New: Updated the program list style to match how the songs list in album pages looks	2025-11-03 22:18:37 +05:30
lscambo13	8398ee7058	Fix: Program list was limited to single column	2025-11-03 22:14:11 +05:30
lscambo13	c5dca7ffb3	Fix: Recording button text and icon did not have a gap	2025-11-03 22:11:57 +05:30
lscambo13	be84634dae	Fix: Play button was bugged in dialogs i.e. live tv program	2025-11-03 22:10:46 +05:30
lscambo13	733e091072	Fix: Gradient was scaling poorly on long pages with lots of episodes	2025-11-03 22:07:49 +05:30
lscambo13	42bc537897	New: Allow users to hide the original/foreign media title using a variable	2025-10-29 06:59:01 -07:00
lscambo13	48811065aa	Fix: Attempting to prevent the title from overlapping the clear logo	2025-10-29 06:53:38 -07:00
lscambo13	33afcd750c	Fix: TV Show cards were displayed incorrectly on the home page in Mixed libraries section	2025-10-28 06:25:11 -07:00
lscambo13	d1b4bc1367	dev: updated the bug report template	2025-10-27 11:07:37 -07:00
lscambo13	3b15cabe57	dev: updated the test environment	2025-10-27 10:34:28 -07:00
lscambo13	8c38f33628	dev: Updated the readme.md and bug report template for clarity	2025-10-27 10:20:02 -07:00
lscambo13	6b1c3a67f3	Fix: Removed the excess left padding from collection items so that they align better with the page	2025-10-27 09:00:41 -07:00
lscambo13	1918c9b054	Fix: Collection items were displayed incorrectly on JF 10.11.0	2025-10-27 08:59:26 -07:00