Fix: Removed temporary workarounds for sizing cards on phones

New: Added ellipsis to drop-down menus
Fix: Typo
2026-10-26 17:39:34 +00:00 · 2026-03-29 19:36:27 +05:30 · 2026-03-29 19:30:52 +05:30 · 2026-03-29 19:28:57 +05:30 · 2026-03-29 19:25:11 +05:30 · 2026-03-27 20:23:06 +05:30
8 changed files with 4720 additions and 322 deletions
@@ -1,95 +1,109 @@
 <!-- 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
- stylish borders, hover effects and shadows
- neat layout that puts important stuff up front
- reduced unnecessary clutter
- various fixes to improve the user experience
- same clean design across phone, desktop, and TV
+### ✨ Key Features
+
+-   modern layouts and color tones
+-   new and improved animations on most elements
+-   rounded corners and even spacing everywhere
+-   stylish borders, hover effects and shadows
+-   neat layout that puts important stuff up front
+-   reduced unnecessary clutter
+-   various fixes to improve the user experience
+-   same clean design across phone, desktop, and TV

 <hr>

-### 🖼️ Theme Showcase 
+### 🖼️ 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? 
+### 👇 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>
@@ -99,7 +113,7 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 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,19 +122,18 @@ 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>

-### 🧩 How to customise this theme? 
+### 🧩 How to customise this theme?

 <details>
  <summary><i>1. Custom media covers for user media libraries</i></summary>

 <img width="640" height="auto" alt="image" src="https://github.com/user-attachments/assets/05eb7cb6-3ac9-444b-8988-9776e0815664" />

- Read more about this experimental add-on [here](https://github.com/lscambo13/ElegantFin/blob/main/custom-media-covers.md)
+-   Read more about this experimental add-on [here](https://github.com/lscambo13/ElegantFin/blob/main/custom-media-covers.md)

 </details>

@@ -130,19 +143,19 @@ 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
+-   Note: this customisation is not needed on Jellyfin 10.11.X anymore

- On older Jellyfin versions, to enable the background wallpaper on the login screen, first tick the 'Enable the splash screen' option in your Jellyfin Dashboard below the Custom CSS Box.
- Second, copy and paste the following code at the end in Custom CSS box but don't save yet.
-  ```
-  :root{
-    --loginPageBgUrl: url("<YOUR-JELLYFIN-SERVER-ADDRESS>/Branding/Splashscreen?format=webp&foregroundLayer=1&quality=33&width=3840&height=2160&blur=2");
-  }
-  ```
- Third, replace `<YOUR-JELLYFIN-SERVER-ADDRESS>` with your Jellyfin server address, for example, `http://192.168.0.1:8096`.
- Don't forget the correct http or https in your domain.
- You can also modify the parameters, for example blur size or the resolution, according to your liking.
- Once done, save and refresh your apps and webpages.
+-   On older Jellyfin versions, to enable the background wallpaper on the login screen, first tick the 'Enable the splash screen' option in your Jellyfin Dashboard below the Custom CSS Box.
+-   Second, copy and paste the following code at the end in Custom CSS box but don't save yet.
+    ```
+    :root{
+      --loginPageBgUrl: url("<YOUR-JELLYFIN-SERVER-ADDRESS>/Branding/Splashscreen?format=webp&foregroundLayer=1&quality=33&width=3840&height=2160&blur=2");
+    }
+    ```
+-   Third, replace `<YOUR-JELLYFIN-SERVER-ADDRESS>` with your Jellyfin server address, for example, `http://192.168.0.1:8096`.
+-   Don't forget the correct http or https in your domain.
+-   You can also modify the parameters, for example blur size or the resolution, according to your liking.
+-   Once done, save and refresh your apps and webpages.
 </details>

 <details>
@@ -150,14 +163,13 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390

  <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;
-  }
-  ```
- To hide them again, simply remove this code block or replace `block` with `none`.
+-   To enable 'Mark Played' and 'Add to Favorites' buttons that show up at the bottom right corner of cards while hovering, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
+    ```
+    :root{
+      --extraCardButtonsVisibility: block;
+    }
+    ```
+-   To hide them again, simply remove this code block or replace `block` with `none`.
 </details>

 <details>
@@ -165,14 +177,13 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390

  <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%;
-  }
-  ```
- To undo this change, simply remove this code block or replace `50%` with `2.8em`.
+-   To bring the mini play button to the center of cards, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
+    ```
+    :root{
+      --overlayPlayButtonPosition: 50%;
+    }
+    ```
+-   To undo this change, simply remove this code block or replace `50%` with `2.8em`.
 </details>

 <details>
@@ -180,13 +191,15 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390

 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 reflection on cards that shows when hovering over them on desktop, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
+
 ```
  :root{
    --cardHoverEffect: none;
  }
 ```
- To undo this change, simply remove this code block or replace `none` with `""`.
+
+-   To undo this change, simply remove this code block or replace `none` with `""`.
 </details>

 <details>
@@ -194,14 +207,15 @@ https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd

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

- 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`.
+
+-   To undo this change, simply remove this code block or replace `block` with `none`.
 </details>

 <details>
@@ -209,99 +223,111 @@ https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd

  <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 at the end 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.
+
+-   To undo this change, simply remove this code block.
 </details>

 <details>
  <summary><i>8. Switch between different app bar styles</i></summary>

-  https://github.com/user-attachments/assets/b5868cd2-8df9-490d-a2b6-4386c6ddcd56
+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)

- 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.
+
+-   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.11.1
- Microsoft Edge (Chromium)
- Jellyfin Android App v2.6.3
+### 🆗 Tested on
+
+-   Jellyfin Server v10.11.5
+-   Microsoft Edge (Chromium)
+-   Jellyfin Android App v2.6.3

 <hr>

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

- Check the version number at the bottom in the Settings screen. 
- It should be something like `ElegantFin v25.XX.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" />
+    <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 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.
+-   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.
+-   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>

 <details>
  <summary>4️⃣ - <i>Does it work on the AndroidTV version of the Jellyfin app?</i></summary>

- As of version 0.18.11, the official Jellyfin app on the AndroidTVs does not support css themes, but the Android mobile phone app supports them. The WebOS version of the app seems to be based on the mobile phone version, so it supports the theme just fine.
+-   As of version 0.18.11, the official Jellyfin app on the AndroidTVs does not support css themes, but the Android mobile phone app supports them. The WebOS version of the app seems to be based on the mobile phone version, so it supports the theme just fine.
 </details>

 <details>
  <summary>5️⃣ - <i>All the icons on my LG TV seem to be broken. How to fix them?</i></summary>

- It seems that modern Material Icons which this theme uses are [not compatible on some WebOS TVs](https://github.com/lscambo13/ElegantFin/issues/39). There is a [huge similar thread](https://www.reddit.com/r/youtubetv/comments/e27go3/chinese_symbols_instead_of_icons_on_lg_tv/) about this.
- This bug can be fixed by using the older icons, so I have implemented the following workaround to bring back older, supported icons.
- Simply add the following code at the end in Custom CSS box and save, then refresh your apps and webpages:
-  
-  ```
-  :root{
-    --iconPack: 'Material Icons';
-  }
-  ```
-</details>
+-   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>

 <details>
  <summary>6️⃣ - <i>How do I report bugs/issues?</i></summary>

- First check [here](https://github.com/lscambo13/ElegantFin/issues?q=) whether a similar issue has been reported already. If it exists, upvote and comment there to let me know. 
- Alternatively, create a new issue [here](https://github.com/lscambo13/ElegantFin/issues/new/choose).
-
+-   First check [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>

 <hr>
@@ -310,8 +336,12 @@ https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd

 Please read the [Contributor Guidelines](./CONTRIBUTING.md) before opening pull requests.

+This is a hobby project. If it helped you, your support really means a lot.
+
+[![Buy me a coffee](https://img.buymeacoffee.com/button-api/?text=Buy%20me%20a%20coffee&emoji=☕&slug=lscambo13&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff)](https://www.buymeacoffee.com/lscambo13)
+
+<hr>

 ### 🙏 Feedback Appreciated

 Please use the right template when creating an [issue](https://github.com/lscambo13/ElegantFin/issues/new/choose) to [report bugs](https://github.com/lscambo13/ElegantFin/issues/new?template=bug_report.md) or [provide suggestions](https://github.com/lscambo13/ElegantFin/issues/new?template=feature_request.md).
-
@@ -1,2 +1,2 @@
-/* ElegantFin Theme v25.11.25 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.11.25";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:Line 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
@@ -157,6 +157,10 @@
    /* use 10% to crop the top 10% of a backdrop image on a 16:9 screen (recommended) [default]; 
       use a figure between 0% and 20% according to your liking */
    --backdropTrimFromTop: 10%;
+
+    /* use numbers greater than 1.0 to increase the size of 'Continue Watching' cards [default: 1.25];
+       use 1.0 to disable this effect */
+    --resumeCardScale: 1.25;
 }

 html {
@@ -173,16 +177,20 @@ body {
    --clearLogoBottomSpace: 11em;
 }

+select {
+    text-overflow: ellipsis;
+}
+
 .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);
+    --itemColumnGap: 0.5em;
 }

 .layout-mobile > body {
@@ -217,12 +225,20 @@ body {
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga";
-    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48;
+    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;
+    font-variation-settings:
+        "FILL" 0,
+        "wght" 400,
+        "GRAD" 0,
+        "opsz" 48;
 }

 .dashboardFooter {
@@ -266,6 +282,10 @@ body {
    color: var(--uiAccentColor);
 }

+.emby-button {
+    gap: 1ch;
+}
+
 .emby-button.show-focus:focus,
 .paper-icon-button-light.show-focus:focus,
 .emby-tabs .emby-button.show-focus:focus {
@@ -292,10 +312,20 @@ body {
    }
 }

-.vertical-wrap:not(.centered) {
+.vertical-wrap:not(.centered),
+.vertical-wrap.padded-right-withalphapicker,
+.padded-right-withalphapicker > .vertical-wrap {
    justify-content: flex-start !important;
 }

+#episodesTab > .vertical-wrap,
+#studiosTab > .vertical-wrap,
+#channelsTab > .vertical-wrap,
+#recordingsTab > .vertical-wrap,
+#genresTab > .vertical-wrap {
+    justify-content: center !important;
+}
+
 .countIndicator,
 .fullSyncIndicator,
 .mediaSourceIndicator {
@@ -303,6 +333,10 @@ body {
    border: var(--defaultLighterBorder);
 }

+.layout-mobile .indicator {
+    font-size: 70%;
+}
+
 .cardScalable {
    border-radius: var(--largeRadius);
    border: var(--darkerBorderColor) solid var(--borderWidthDouble) !important;
@@ -487,8 +521,8 @@ body {

 .layout-mobile .cardOverlayButton-br,
 [dir="ltr"] .layout-mobile .cardOverlayButton-br {
-    bottom: 0.25em;
-    right: 0.25em;
+    /* bottom: 0.25em;
+    right: 0.25em; */
    display: var(--miniOverlayButtonVisibility);
 }

@@ -521,7 +555,7 @@ body {
 /* episode grid start */

@supports (display: revert) {
-    .vertical-list:has(.listItem-largeImage) {
+    .layout-desktop .vertical-list:has(.listItem-largeImage) {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(var(--minEpisodeCardWidth), 100%), 1fr));
        gap: var(--itemColumnGap);
@@ -681,7 +715,7 @@ body {
    }
 }

-/* 12 posters, 9 thumbs, 4K*/
+/* 12 posters, 9 thumbs, 2160p*/
@media (max-width: 220em) {
    .portraitCard,
    .squareCard {
@@ -697,12 +731,9 @@ body {
        --cardCount: 9;
    }

-    .backdropCard {
-        --cardCount: 9;
-    }
-
+    .backdropCard,
    .overflowBackdropCard {
-        --cardCount: 8;
+        --cardCount: 7;
    }
 }

@@ -722,16 +753,13 @@ body {
        --cardCount: 9;
    }

-    .backdropCard {
-        --cardCount: 9;
-    }
-
+    /* .backdropCard,
    .overflowBackdropCard {
-        --cardCount: 8;
-    }
+        --cardCount: 7;
+    } */
 }

-/* 10 posters, 8 thumbs */
+/* 10 posters, 8 thumbs, 1440p */
@media (max-width: 170em) {
    .portraitCard,
    .squareCard {
@@ -747,12 +775,9 @@ body {
        --cardCount: 9;
    }

-    .backdropCard {
-        --cardCount: 8;
-    }
-
+    .backdropCard,
    .overflowBackdropCard {
-        --cardCount: 7;
+        --cardCount: 6;
    }
 }

@@ -772,12 +797,9 @@ body {
        --cardCount: 7;
    }

-    .backdropCard {
-        --cardCount: 7;
-    }
-
+    .backdropCard,
    .overflowBackdropCard {
-        --cardCount: 6;
+        --cardCount: 5;
    }
 }

@@ -793,28 +815,22 @@ body {
        --cardCount: 7;
    }

-    .layout-tv .portraitCard,
-    .layout-tv .squareCard,
-    .layout-tv .overflowPortraitCard,
-    .layout-tv .overflowSquareCard {
-        --cardCount: 6;
-    }
-
    .squareCard:has(.cardFooter) {
        --cardCount: 6;
    }

-    .backdropCard {
-        --cardCount: 6;
-    }
-
+    .backdropCard,
+    .layout-tv .portraitCard,
+    .layout-tv .squareCard,
+    .layout-tv .overflowPortraitCard,
+    .layout-tv .overflowSquareCard,
    .overflowBackdropCard {
        --cardCount: 5;
    }

    .layout-tv .backdropCard,
    .layout-tv .overflowBackdropCard {
-        --cardCount: 4;
+        --cardCount: 3;
    }
 }

@@ -831,12 +847,9 @@ body {
        --cardCount: 6;
    }

-    .backdropCard {
-        --cardCount: 6;
-    }
-
+    .backdropCard,
    .overflowBackdropCard {
-        --cardCount: 5;
+        --cardCount: 4;
    }
 }

@@ -920,15 +933,16 @@ body {
    }
 }

-.layout-mobile .card {
-    --sidePadding: 5%;
+.cardBox {
+    margin-top: 0;
 }

 .card {
-    --effectiveWidth: calc((99vw - (var(--sidePadding) * 2)));
+    --padding: 0.375em;
+    --effectiveWidth: calc(((100vw - (var(--padding) * 2)) - (var(--sidePadding) * 2)));
    --cardWidth: calc(var(--effectiveWidth) / var(--cardCount) - var(--itemColumnGap));
    width: var(--cardWidth) !important;
-    padding: 0.375em;
+    padding: var(--padding);
    transition: width 0.5s;
    box-sizing: content-box;
 }
@@ -941,7 +955,7 @@ body {
 }

 .layout-mobile .card {
-    --cardWidth: calc(var(--effectiveWidth) / var(--cardCount));
+    --padding: 1px;
 }

 /* this makes the card sizes smaller when phone is in landscape mode */
@@ -951,6 +965,12 @@ body {
    }
 }

+#homeTab .overflowBackdropCard[data-positionticks],
+.nextUpItems > .card,
+#resumableItems > .card {
+    width: calc(var(--cardWidth) * var(--resumeCardScale)) !important;
+}
+
 .detailPageWrapperContainer {
    padding-top: unset;
    margin-top: unset;
@@ -1054,17 +1074,11 @@ body {
    font-size: 1.25em;
 }

-.verticalSection.emby-scroller-container > h2.sectionTitle.sectionTitle-cards {
-    padding-top: 1.25em !important;
-    margin: 0 0 -0.5em 0;
-}
-
 #itemDetailPage .emby-scroller-container,
 #itemDetailPage .emby-scroller,
 #itemDetailPage .scrollX {
    margin: 0 calc(-1 * var(--sidePadding));
-    padding: 0 var(--sidePadding);
-    padding-left: calc(var(--sidePadding) - 0.375em);
+    padding-left: calc(var(--sidePadding));
    /* mask-image: linear-gradient(90deg, transparent, white var(--sidePadding), white calc(100vw - var(--sidePadding)), transparent); */
 }

@@ -1075,12 +1089,17 @@ body {
 }

 .emby-scroller,
-.hiddenScrollX.scrollX {
-    padding-left: calc(var(--sidePadding) - 0.375em);
+.scrollX {
+    padding-left: calc(var(--sidePadding));
+}
+
+.sectionTabs .scrollX {
+    padding-left: 0;
 }

 .itemsContainer:not(.editorsChoiceItemsContainer) {
    column-gap: var(--itemColumnGap);
+    row-gap: 1em;
 }

 .layout-desktop .sectionTitle,
@@ -1088,22 +1107,8 @@ body {
    font-size: 1.5rem !important;
 }

-.sectionTitleContainer-cards {
-    padding-top: 0;
-    margin: 0.75em 0 -0.75em 0;
-}
-
-.layout-mobile :not(.sectionTitleContainer-cards) > .sectionTitle-cards {
-    text-align: left;
-    margin: 0.75em 0 -0.75em 0;
-}
-
 .emby-scrollbuttons,
 [dir="ltr"] .emby-scrollbuttons {
-    padding-top: 1.25em;
-}
-
-.sectionTitleContainer + .emby-scrollbuttons {
    padding-top: 0;
 }

@@ -1319,7 +1324,7 @@ body {

 .layout-tv .detailImageContainer .card {
    width: 25vw !important;
-    display: grid !important;
+    display: block !important;
    position: fixed !important;
    top: 0;
    bottom: 0;
@@ -1442,15 +1447,16 @@ body {
    font-size: 3.5em;
 }

-@media (max-width: 50em) {
-    .homeLibraryButton {
-        width: 45.6% !important;
-    }
+.homeLibraryButton {
+    width: min(45%, 12rem);
+    min-width: 15%;
+    margin: 0 !important;
 }

-.homeLibraryButton {
-    padding-inline-start: 0.25em;
-    min-width: 15%;
+@media (max-width: 50em) {
+    .homeLibraryButton {
+        width: 47.6% !important;
+    }
 }

@media (orientation: portrait) and (max-width: 40em) {
@@ -1795,6 +1801,10 @@ progress + span {
    padding-bottom: 5vh;
 }

+.mainDrawer-scrollContainer > div:first-child {
+    margin-bottom: 1em;
+}
+
 .btnHeaderSave.button-flat {
    color: var(--uiAccentColor) !important;
    gap: 0.3em;
@@ -1996,7 +2006,7 @@ progress + span {
 }

 .layout-mobile .innerCardFooter {
-    padding: 5em 1.5em 1.5em 1.5em;
+    padding: 5em 1em 1.25em 1em;
 }

 .layout-mobile .chapterCardImageContainer + .innerCardFooter {
@@ -2007,6 +2017,10 @@ progress + span {
    width: unset;
 }

+.noItemsMessage {
+    width: 90%;
+}
+
 .dialog {
    backdrop-filter: var(--blurDefault);
    background-color: var(--drawerColor);
@@ -2199,8 +2213,8 @@ progress + span {
 }

 .layout-mobile .cardIndicators {
-    top: 0.2em;
-    right: 0.2em;
+    top: 0.45em;
+    right: 0.5em;
 }

 .indicator {
@@ -2303,16 +2317,28 @@ div[data-type="PhotoAlbum"] .play_arrow:before {
 }

 .detailButton-icon {
-    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
+    font-variation-settings:
+        "FILL" 0,
+        "wght" 400,
+        "GRAD" 0,
+        "opsz" 48;
 }

 .cardScalable .material-icons.check:before {
-    font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 20;
+    font-variation-settings:
+        "FILL" 1,
+        "wght" 700,
+        "GRAD" 0,
+        "opsz" 20;
    transform: scale(1.25);
 }

 .emby-button[title="Favorite"] .material-icons.favorite:before {
-    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20;
+    font-variation-settings:
+        "FILL" 1,
+        "wght" 400,
+        "GRAD" 0,
+        "opsz" 20;
 }

 .detailButton:not(.btnPlay) {
@@ -2346,9 +2372,9 @@ div[data-type="PhotoAlbum"] .play_arrow:before {
    flex-direction: row;
 }

-.btnPlay:not(.formDialogFooterItem):not(.play-button):after {
+.mainDetailButtons > .btnPlay:after {
    content: attr(title);
-    padding: 0 1ch;
+    padding-right: 1ch;
 }

 .btnPlay > .detailButton-content::after {
@@ -2588,7 +2614,7 @@ div[data-role="controlgroup"] a.ui-btn-active {
 .MuiListItem-root > div {
    border: solid transparent var(--borderWidth);
    border-radius: 0.7em;
-    margin: 0.25 0.5em !important;
+    /* margin: 0.25em 0.5em !important; */
 }

 .Mui-selected {
@@ -2612,10 +2638,14 @@ div[data-role="controlgroup"] a.ui-btn-active {
    font-size: unset;
 }

-[dir="ltr"] .actionsheetMenuItemIcon.check {
-    margin: 0 0.45em 0 0.45em !important;
+[dir="ltr"] .actionsheetMenuItemIcon {
+    margin: 0 0.2em 0 0.45em !important;
 }

+/* [dir="ltr"] .actionsheetMenuItemIcon.check {
+    margin: 0 0.45em 0 0.45em !important;
+} */
+
 .actionSheetMenuItem:has(.listItemIcon.check) {
    background-color: var(--activeColor);
 }
@@ -2660,12 +2690,12 @@ div[data-role="controlgroup"] a.ui-btn-active {
    row-gap: 1em;
    column-gap: 3em;
    max-width: unset !important;
-    grid-template-columns: 25% 1fr 1fr 1fr;
+    grid-template-columns: 1.3fr 0.7fr 1fr 1fr;
    margin-bottom: 1.5em;
 }

 .layout-mobile .detailSection {
-    grid-template-columns: 1fr;
+    grid-template-columns: 1fr !important;
 }

 .detailPageContent {
@@ -2836,6 +2866,10 @@ div[data-role="controlgroup"] a.ui-btn-active {
    grid-column: 1 / -1;
 }

+.collectionItems {
+    order: 2;
+}
+
 .programGuideSection:not(.hide) {
    order: -1;
    margin-top: 2em;
@@ -2874,6 +2908,10 @@ div[data-role="controlgroup"] a.ui-btn-active {
    height: 70%;
 }

+.layout-mobile .alphaPicker-vertical {
+    right: 0 !important;
+}
+
 .alphaPicker {
    justify-content: center;
 }
@@ -2891,20 +2929,6 @@ div[data-role="controlgroup"] a.ui-btn-active {
    padding-right: var(--sidePadding) !important;
 }

-/* .padded-left {
-    padding-left: var(--sidePadding) !important;
-} */
-
-.layout-mobile .padded-right-withalphapicker {
-    padding-left: 4.5%;
-    padding-right: 6.5%;
-}
-
-/* test disabled for 10.11.0 */
-/* .detailPagePrimaryContent.padded-right {
-    padding-right: 0 !important;
-} */
-
 [dir="ltr"] .detailPageContent,
 .content-primary {
    padding-left: var(--sidePadding) !important;
@@ -2960,6 +2984,11 @@ div[data-role="controlgroup"] a.ui-btn-active {
    background: var(--selectorBackgroundColor) !important;
 }

+.verticalSection {
+    margin-top: 0.5em;
+    margin-bottom: 1em;
+}
+
 .sectionTitleTextButton {
    padding: 0 0.5em;
 }
@@ -2972,9 +3001,21 @@ div[data-role="controlgroup"] a.ui-btn-active {
    color: white !important;
 }

+.sectionTitleContainer-cards {
+    padding-top: 0;
+    padding-bottom: 0.2em;
+}
+
 .sectionTitleTextButton > * {
+    text-align: left;
+    /* !important are needed for proper alignment on phones */
    padding: 0.3em 0 !important;
    margin: 0 0 !important;
+    /* this prevents long library names from breaking into another line */
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 88vw;
 }

 .dashboardSection .sectionTitleTextButton > .material-icons,
@@ -2988,7 +3029,7 @@ div[data-role="controlgroup"] a.ui-btn-active {
 }

 .sectionTitleTextButton > .material-icons.chevron_right {
-    margin-left: 0.5rem !important;
+    /* margin-left: 0.5rem !important; */
    height: 1.5rem;
    width: 1.5rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23D1D5DB' aria-hidden='true'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12.75 15l3-3m0 0l-3-3m3 3h-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z'%3E%3C/path%3E%3C/svg%3E")
@@ -3032,13 +3073,14 @@ div[data-role="controlgroup"] a.ui-btn-active {
 }

 .skip-button-container {
-    bottom: 25%;
+    bottom: 9rem;
 }

 .skip-button {
-    background-color: whitesmoke;
+    background-color: var(--textColor);
    box-shadow: var(--shadow);
    margin-right: var(--sidePadding);
+    border-radius: 3em;
    color: black;
 }

@@ -3272,18 +3314,13 @@ div[data-role="controlgroup"] a.ui-btn-active {
    display: var(--itemOriginalTitleVisibility);
 }

-.channelPrograms + .channelPrograms,
-.guide-channelHeaderCell + .guide-channelHeaderCell {
-    margin-top: 0;
-}
-
 .channelPrograms,
-.guide-channelHeaderCell,
 .programCell {
    border-color: transparent;
    /* this disables the 'color coded backgrounds' */
    background-color: transparent !important;
    border-radius: var(--smallRadius);
+    height: 4.42em;
 }

 .guideProgramName {
@@ -3305,24 +3342,40 @@ div[data-role="controlgroup"] a.ui-btn-active {
    padding: 0;
 }

-.guideChannelImage {
-    background-color: rgba(255, 255, 255, 0.05);
-    bottom: 0.35em;
-    right: 0.35em;
-    top: 0.35em;
-    width: calc(100% - 0.7em);
-    border-radius: var(--smallerRadius);
+.layout-mobile .guideChannelImage {
+    background-position: center;
+    width: calc(100% - var(--sidePadding));
+    right: 0;
+}
+
+.guide-channelHeaderCell {
+    background-color: rgba(255, 255, 255, 0.125);
+    margin: 0.35em 0.7em 0.7em 0.7em;
+    width: auto;
+    height: calc(4.42em - 0.7em);
+    border-radius: var(--smallRadius);
+}
+
+.guideChannelNumber {
+    font-size: 1em;
 }

 #guideTab {
    padding-top: 3em !important;
 }

-.guide-channelHeaderCell:focus,
-.programCell:focus {
+.guide-channelHeaderCell:focus {
    background-color: var(--highlightOutlineColor) !important;
 }

+.programCell:focus {
+    background-color: transparent !important;
+}
+
+.programCell:focus > .guideProgramName {
+    background-color: var(--highlightOutlineColor);
+}
+
 .emby-select-iconbutton {
    background-color: var(--selectorBackgroundColor);
    border: var(--defaultLighterBorder);
@@ -3428,8 +3481,8 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
    min-height: 100vh;
    padding: 1em;
    overflow-y: auto;
-    background: linear-gradient(to bottom, var(--darkerGradientPointAlpha), var(--lighterGradientPoint)),
-        var(--loginPageBgUrl);
+    background:
+        linear-gradient(to bottom, var(--darkerGradientPointAlpha), var(--lighterGradientPoint)), var(--loginPageBgUrl);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
@@ -3735,12 +3788,12 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
    padding: 0;
 }

-.headerTabs.sectionTabs {
-    display: grid;
+.sectionTabs {
+    display: inline-grid;
    height: var(--appBarHeight);
 }

-.layout-mobile .headerTabs.sectionTabs {
+.layout-mobile .sectionTabs {
    align-content: center;
 }

@@ -3786,7 +3839,7 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
    padding: 0 0.5em;
 }

-/* this prevents the section tabs from hiding all the way up */
+/* this prevents the section tabs from hiding all the way up on phones (not-tablets)*/
 .headroom--unpinned {
    -webkit-transform: translateY(calc(-1 * var(--appBarHeight) - var(--borderWidth)));
    transform: translateY(calc(-1 * var(--appBarHeight) - var(--borderWidth)));
@@ -3802,7 +3855,7 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {

 .noHomeButtonHeader .emby-tab-button:before {
    font-family: "Material Icons Round";
-    padding-inline-end: 0.5ch;
+    /* padding-inline-end: 0.5ch; */
    font-size: 1.2em;
    font-variation-settings: "FILL" 0;
 }
@@ -3811,14 +3864,7 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
    overflow: visible !important;
 }

-.layout-tv .sectionTabs {
-    /* this prevents the section tabs from being off-center in the music library
-     after I set the overflow to visible to fix visual glitches */
-    width: 70%;
-    margin-right: 2em;
-}
-
-.headerTabs.sectionTabs .emby-tab-button {
+.sectionTabs .emby-tab-button {
    display: inline-flex;
    margin: 0.25em 0.5em;
    padding: 0 1.25em;
@@ -3829,18 +3875,15 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
    background-color: var(--darkerGradientPointAlpha);
 }

-.headerTabs.sectionTabs .emby-tab-button-active {
+.sectionTabs .emby-tab-button-active {
    margin: 0.25em 0.5em;
    color: black;
    background-color: var(--textColor);
 }

-.layout-mobile .headerTabs.sectionTabs .emby-tab-button:first-child {
-    margin-left: var(--sidePadding);
-}
-
-.layout-mobile .headerTabs.sectionTabs .emby-tab-button:last-child {
-    margin-right: var(--sidePadding);
+/* this increases page top padding when section tabs are expanded */
+.libraryPage:not(.noSecondaryNavPage) {
+    padding-top: calc(var(--appBarHeight) * 2 + 0.5em) !important;
 }

@media (min-width: 75em) {
@@ -3851,14 +3894,28 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
        align-self: center;
        -webkit-justify-content: center;
        justify-content: center;
+        /* this collapses the section tabs expanded earlier than the default 100em max-width */
        margin-top: calc(-1 * var(--appBarHeight));
        position: relative;
        width: auto;
    }

-    /* this reduces top page padding when section tabs are minimised */
-    .libraryPage:not(.noSecondaryNavPage):not(.layout-tv .libraryPage) {
-        padding-top: 6.8em !important;
+    /* this reduces page top padding when section tabs are collapsed */
+    .libraryPage:not(.noSecondaryNavPage) {
+        padding-top: calc(var(--appBarHeight) + 0.5em) !important;
+    }
+
+    /* this fixes the header like on desktop on larger tablet screens */
+    .headroom--unpinned {
+        -webkit-transform: translateY(0);
+        transform: translateY(0);
+    }
+}
+
+@media (min-width: 100em) {
+    /* this reduces top padding when section tabs are collapsed on TVs */
+    .layout-tv .libraryPage:not(.noSecondaryNavPage) {
+        padding-top: calc(var(--appBarHeight) + 0.5em) !important;
    }
 }

@@ -3867,16 +3924,27 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
    .sectionTabs {
        font-size: 100%;
    }
+
+    /* this keeps the section tabs expanded on TVs under 100em width */
+    .layout-tv .sectionTabs {
+        margin-top: unset;
+    }
+
+    /* this increases page top padding when section tabs are expanded on TVs*/
+    .layout-tv .libraryPage:not(.noSecondaryNavPage) {
+        padding-top: calc(var(--appBarHeight) * 2 + 0.5em) !important;
+    }
 }

-/* this increased top page padding when section tabs are maximised */
-.libraryPage:not(.noSecondaryNavPage) {
-    padding-top: 9.5em !important;
-}
+@media (max-width: 75em) {
+    /* these margins are applied only on phones, not tablets*/
+    .layout-mobile .sectionTabs .emby-tab-button:first-child {
+        margin-left: var(--sidePadding);
+    }

-/* this limits top page padding when section tabs always on TVs */
-.layout-tv .libraryPage:not(.noSecondaryNavPage) {
-    padding-top: 6em !important;
+    .layout-mobile .sectionTabs .emby-tab-button:last-child {
+        margin-right: var(--sidePadding);
+    }
 }

 .layout-tv .headerLeft {
@@ -3889,6 +3957,7 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
    container-name: skinHeader;
    container-type: size;
    height: var(--appBarHeight);
+    max-height: var(--appBarHeight);
 }

@container skinHeader (min-height: 4.9em) {
@@ -3914,22 +3983,13 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
        z-index: -1;
    }

-    .layout-mobile .headerTop {
-        height: calc(var(--appBarHeight) - 1em);
-    }
-
-    .headerTabs.sectionTabs {
+    .sectionTabs {
        padding-bottom: 1.5em;
    }

-    .layout-mobile .headerTabs.sectionTabs {
+    .layout-mobile .sectionTabs {
        align-content: center;
    }
-
-    .headroom--unpinned {
-        -webkit-transform: translateY(calc(-0.75 * var(--appBarHeight) - var(--borderWidth)));
-        transform: translateY(calc(-0.75 * var(--appBarHeight) - var(--borderWidth)));
-    }
 }

 .nowPlayingPage {
@@ -3981,7 +4041,9 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
 }

 .card.show-animation .cardBox {
-    transition: transform 0.05s ease-out, -webkit-transform 0.05s ease-out;
+    transition:
+        transform 0.05s ease-out,
+        -webkit-transform 0.05s ease-out;
 }

 /* performance improvements fot low-end TVs - end */
@@ -1,2 +1,2 @@
-/* Add-on: Media Bar plugin support v25.11.25 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}#slides-container{width:calc(100vw - (2 * var(--sidePadding)));height:62%;top:var(--appBarHeight);border:var(--defaultBorder);border-radius:var(--largerRadius);transition:all .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,.85),40%,transparent)}@media only screen and (max-width:767px) and (orientation:portrait){.button-container{top:calc(50% + 20vh);transform:translateX(-50%) scale(.8)}.tomato-rating{display:none}.dots-container{top:calc(50% + 19vh)}.backdrop{transform-origin:center}}@media (min-width:75em){#slides-container{top:calc(.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%}}
+/* 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%}}
@@ -11,6 +11,12 @@
    font-family: "Inter";
    font-size: 1em;
    font-weight: 500;
+    order: 1;
+}
+
+.detail-button,
+.favorite-button {
+    order: 2;
 }

 .backdrop,
@@ -32,16 +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: var(--appBarHeight);
+    top: calc(var(--appBarHeight) * 2 + 1.25em);
+    user-select: none;
+    position: absolute;
+    left: var(--sidePadding);
+    overflow: visible;
+}
+
+.slide {
    border: var(--defaultBorder);
    border-radius: var(--largerRadius);
-    transition: all 0.125s, border 0s;
-    user-select: none;
+    overflow: hidden;
+    transition: border 0s;
 }

 .logo-container {
@@ -59,28 +74,122 @@
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), 40%, transparent);
 }

-@media only screen and (max-width: 767px) and (orientation: portrait) {
-    .button-container {
-        top: calc(50% + 20vh);
-        transform: translateX(-50%) scale(0.8);
+.pause-button,
+.volume-toggle {
+    top: 1em !important;
+}
+
+.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;
    }

-    .tomato-rating {
+    .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 {
+        bottom: 3em;
+    }
+
+    .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(0.5 * var(--appBarHeight));
+        top: calc(var(--appBarHeight) + 1.25em);
+    }
+
+    .layout-tv #slides-container {
+        top: calc(var(--appBarHeight) * 2 + 1.25em);
+    }
+}
+
+@media (min-width: 100em) {
+    .layout-tv #slides-container {
+        top: calc(var(--appBarHeight) + 1.25em);
    }
 }

@@ -94,10 +203,4 @@
    }
 }

-@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 */
@@ -9,5 +9,9 @@
        "editor.formatOnSave": true,
        "prettier.useTabs": false,
        "prettier.printWidth": 120,
+        "cSpell.words": [
+            "Jellyfin",
+            "Jellyseerr"
+        ],
    }
 }
Author	SHA1	Message	Date
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