Fix: Used a different Anime cover to prevent the moire effect

* Added Anime Cover Art

* Added Sports Cover Art

* compressed the images for performance & changed the image urls

README.md

@@ -1,15 +1,32 @@
 <!-- Banner Image -->
 <img src="https://github.com/lscambo13/ElegantFin/blob/main/Theme/assets/img/banner.png?raw=true" alt="ElegantFin Theme for Jellyfin - Banner">
 
-# ⭐ 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,13 +39,14 @@ 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>     |
@@ -56,7 +74,7 @@ Captured on ElegantFin v25.08.02
   <summary> 📺 <i>TV Screenshots</i></summary>
 
 | TV View                                                                                                                                                                                                      |
-| ------------------------------------------------------------------------------------------------------------- |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/tv/21.%20Login%20Page.webp?raw=true"><br><strong>Login Page</strong></div>             |
 | <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/tv/1.%20Homepage.webp?raw=true"><br><strong>Homepage</strong></div>                    |
 | <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/tv/2.%20Movies%20Library.webp?raw=true"><br><strong>Movies Library</strong></div>      |
@@ -77,12 +95,8 @@ Captured on ElegantFin v25.08.02
 
 </details>
 
-
-
-
 https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 
-
 <hr>
 
 ### 👇 How to install/setup this theme?
@@ -110,7 +124,6 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 4. Click save.
  </details>
 
-
 <hr>
 
 ### 🧩 How to customise this theme?
@@ -150,7 +163,6 @@ 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{
@@ -165,7 +177,6 @@ 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{
@@ -181,11 +192,13 @@ 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.
+
 ```
   :root{
     --cardHoverEffect: none;
   }
 ```
+
 -   To undo this change, simply remove this code block or replace `none` with `""`.
 </details>
 
@@ -194,13 +207,14 @@ 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.
+
 ```
   :root{
     --libraryLabelVisibility: block;
   }
 ```
+
 -   To undo this change, simply remove this code block or replace `block` with `none`.
 </details>
 
@@ -209,11 +223,12 @@ 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.
+
 ```
 	@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>
 
@@ -225,25 +240,38 @@ https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd
 -   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.11.1
+
+-   Jellyfin Server v10.11.5
 -   Microsoft Edge (Chromium)
 -   Jellyfin Android App v2.6.3
 
 <hr>
 
 ### 🛠️ Troubleshooting
+
 <details>
   <summary>1️⃣ - <i>How do I check if I am using the latest version of ElegantFin?</i></summary>
 
@@ -282,7 +310,6 @@ https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd
 -   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';
@@ -296,7 +323,6 @@ https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd
 -   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>
@@ -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).
-

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

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

Theme/ElegantFin-theme-nightly.css

@@ -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,16 @@ body {
     }
 }
 
+#homeTab .overflowBackdropCard[data-positionticks],
+.nextUpItems > .card,
+#resumableItems > .card {
+    width: calc(var(--cardWidth) * var(--resumeCardScale)) !important;
+}
+
+.card .cardTextCentered {
+    text-shadow: 1px 1px 2px hsla(0, 0%, 0%, 0.8);
+}
+
 .detailPageWrapperContainer {
     padding-top: unset;
     margin-top: unset;
@@ -1054,17 +1078,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 +1093,23 @@ 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;
+}
+
+/* this is a workaround to add a gap between the last child and the edge of the screen on phones */
+.layout-mobile .itemsContainer:not(.editorsChoiceItemsContainer, .vertical-wrap)::after {
+    content: "13";
+    color: transparent;
 }
 
 .layout-desktop .sectionTitle,
@@ -1088,22 +1117,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;
 }
 
@@ -1160,6 +1175,11 @@ body {
     align-content: flex-end;
 }
 
+.layout-desktop .detailRibbon:has(.person) {
+    min-height: 15vh;
+    align-content: flex-end;
+}
+
 .layout-desktop .detailRibbon {
     height: 100%;
     min-height: 25vh;
@@ -1319,7 +1339,7 @@ body {
 
 .layout-tv .detailImageContainer .card {
     width: 25vw !important;
-    display: grid !important;
+    display: block !important;
     position: fixed !important;
     top: 0;
     bottom: 0;
@@ -1442,15 +1462,16 @@ body {
     font-size: 3.5em;
 }
 
-@media (max-width: 50em) {
 .homeLibraryButton {
-        width: 45.6% !important;
-    }
+    width: min(45%, 12rem);
+    min-width: 15%;
+    margin: 0 !important;
 }
 
+@media (max-width: 50em) {
     .homeLibraryButton {
-    padding-inline-start: 0.25em;
-    min-width: 15%;
+        width: 47.6% !important;
+    }
 }
 
 @media (orientation: portrait) and (max-width: 40em) {
@@ -1795,6 +1816,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 +2021,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 +2032,10 @@ progress + span {
     width: unset;
 }
 
+.noItemsMessage {
+    width: 90%;
+}
+
 .dialog {
     backdrop-filter: var(--blurDefault);
     background-color: var(--drawerColor);
@@ -2199,8 +2228,8 @@ progress + span {
 }
 
 .layout-mobile .cardIndicators {
-    top: 0.2em;
-    right: 0.2em;
+    top: 0.45em;
+    right: 0.5em;
 }
 
 .indicator {
@@ -2303,16 +2332,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 +2387,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 +2629,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 +2653,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 +2705,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 +2881,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 +2923,10 @@ div[data-role="controlgroup"] a.ui-btn-active {
     height: 70%;
 }
 
+.layout-mobile .alphaPicker-vertical {
+    right: 0 !important;
+}
+
 .alphaPicker {
     justify-content: center;
 }
@@ -2891,20 +2944,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 +2999,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 +3016,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 +3044,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 +3088,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 +3329,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 +3357,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 +3496,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 +3803,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 +3854,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 +3870,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 +3879,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 +3890,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 +3909,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 +3939,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 increased top page padding when section tabs are maximised */
-.libraryPage:not(.noSecondaryNavPage) {
-    padding-top: 9.5em !important;
-}
-
-/* this limits top page padding when section tabs always on TVs */
+    /* this increases page top padding when section tabs are expanded on TVs*/
     .layout-tv .libraryPage:not(.noSecondaryNavPage) {
-    padding-top: 6em !important;
+        padding-top: calc(var(--appBarHeight) * 2 + 0.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);
+    }
+
+    .layout-mobile .sectionTabs .emby-tab-button:last-child {
+        margin-right: var(--sidePadding);
+    }
 }
 
 .layout-tv .headerLeft {
@@ -3889,6 +3972,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 +3998,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 +4056,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 */

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

@@ -14,6 +14,8 @@
     --colorOverlayMixedCover: rgb(194, 58, 58);
     --colorOverlayRecordedmoviesCover: rgb(52, 52, 52);
     --colorOverlayRecordedtvCover: rgb(120, 100, 28);
+    --colorOverlayAnimeCover: rgb(189, 203, 99);
+    --colorOverlaySportsCover: rgb(233, 126, 60);
     --urlMoviesCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/movies.webp);
     --urlTvshowsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/tvshows.webp);
     --urlLivetvCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/livetv.webp);
@@ -26,6 +28,8 @@
     --urlMixedCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/mixed.webp);
     --urlRecordedmoviesCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/recordedmovies.webp);
     --urlRecordedtvCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/recordedtv.webp);
+    --urlAnimeCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/anime.webp);
+    --urlSportsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/sports.webp);
 }
 
 [data-type="CollectionFolder"] .defaultCardBackground,
@@ -119,7 +123,7 @@
     background-image: var(--urlPlaylistsCover) !important;
 }
 
-[data-prefix="MIX"] .cardContent {
+[data-type="CollectionFolder"][data-prefix="MIX"] .cardContent {
     background-color: var(--colorOverlayMixedCover) !important;
     background-image: var(--urlMixedCover) !important;
 }
@@ -129,7 +133,17 @@
     background-image: var(--urlRecordedmoviesCover) !important;
 }
 
-[data-prefix="REC"] .cardContent {
+[data-type="CollectionFolder"][data-prefix="REC"] .cardContent {
     background-color: var(--colorOverlayRecordedtvCover) !important;
     background-image: var(--urlRecordedtvCover) !important;
 }
+
+[data-type="CollectionFolder"][data-prefix="ANI"] .cardContent {
+    background-color: var(--colorOverlayAnimeCover) !important;
+    background-image: var(--urlAnimeCover) !important;
+}
+
+[data-type="CollectionFolder"][data-prefix="SPO"] .cardContent {
+    background-color: var(--colorOverlaySportsCover) !important;
+    background-image: var(--urlSportsCover) !important;
+}

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

@@ -1,2 +1,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%}}

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

@@ -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;
 }
 
-    .tomato-rating {
+.separator-icon {
+    font-size: 5px;
+    color: var(--dimTextColor);
+}
+
+.dot {
+    border-radius: 0.25em;
+    width: 0.375em;
+    height: 0.375em;
+    transition: width 0.5s;
+    opacity: 0.5;
+    background-color: var(--textColor) !important;
+}
+
+.dot.active {
+    width: 2em;
+    transform: none;
+}
+
+@media only screen and (orientation: landscape) {
+    .button-container,
+    .dots-container,
+    .plot-container,
+    .genre,
+    .info-container {
+        top: unset;
+    }
+
+    .button-container {
+        bottom: 3em;
+    }
+
+    .dots-container {
+        bottom: 4.5em;
+    }
+
+    .plot-container {
+        height: 4em;
+        bottom: 7em;
+    }
+
+    .genre {
+        bottom: 12em;
+    }
+
+    .info-container {
+        bottom: 14em;
+    }
+
+    .logo-container {
+        top: 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 */

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

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

workspace.code-workspace

@@ -9,5 +9,9 @@
         "editor.formatOnSave": true,
         "prettier.useTabs": false,
         "prettier.printWidth": 120,
+        "cSpell.words": [
+            "Jellyfin",
+            "Jellyseerr"
+        ],
     }
 }