RELEASE: ElegantFin v26.06.06

Fix: Brought back small padding around cards on phones to account for multi-selection checkbox outline
Merge branch 'main' of https://github.com/lscambo13/ElegantFin
2026-10-26 17:39:34 +00:00 · 2026-06-06 23:59:34 +05:30 · 2026-06-06 23:53:31 +05:30 · 2026-06-06 23:39:55 +05:30 · 2026-06-06 23:32:19 +05:30 · 2026-06-06 22:56:59 +05:30
15 changed files with 6512 additions and 95 deletions
@@ -1,2 +1,9 @@
 /tmp.txt
 /commits.csv
+/node_modules
+/Theme/mod.css
+/Theme/ElegantFin-theme-nightly-min.css
+/Theme/assets/add-ons/custom-media-covers-nightly-min.css
+/Theme/assets/add-ons/media-bar-plugin-support-nightly-min.css
+/Theme/assets/add-ons/seamless-fork-compatibility-nightly.css
+/Theme/assets/add-ons/seamless-fork-compatibility-nightly-min.css
@@ -156,10 +156,10 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 - Don't forget the correct http or https in your domain.
 - You can also modify the parameters, for example blur size or the resolution, according to your liking.
 - Once done, save and refresh your apps and webpages.
-</details>
+      </details>

 <details>
-  <summary><i>3. Enable extra overlay buttons on cards on desktop</i></summary>
+  <summary><i>3. Enable or disable extra overlay buttons on cards on desktop</i></summary>

  <img width="400" height="auto" alt="image" src="https://github.com/user-attachments/assets/cb8479c2-c577-4d54-a567-697f54291a3b" />

@@ -169,8 +169,9 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
      --extraCardButtonsVisibility: block;
    }
    ```
-   To hide them again, simply remove this code block or replace `block` with `none`.
-</details>
+- To hide the three-dot button that shows up next to these buttons, also include `--menuButtonVisibility: none;` in `:root{}`
+- To undo these changes, simply remove this code block or switch between `block` and `none`.
+      </details>

 <details>
  <summary><i>4. Place the overlay play button at the center of cards on desktop</i></summary>
@@ -184,7 +185,7 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
    }
    ```
 - To undo this change, simply remove this code block or replace `50%` with `2.8em`.
-</details>
+      </details>

 <details>
  <summary><i>5. Disable the card shinning effect on hover on desktop</i></summary>
@@ -200,7 +201,7 @@ https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd
 ```

 - To undo this change, simply remove this code block or replace `none` with `""`.
-</details>
+      </details>

 <details>
  <summary><i>6. Enable labels below library cards</i></summary>
@@ -216,7 +217,7 @@ https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd
 ```

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

 <details>
  <summary><i>7. Enable alternative style for the Media Bar plugin</i></summary>
@@ -230,7 +231,7 @@ https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd
 ```

 - To undo this change, simply remove this code block.
-</details>
+      </details>

 <details>
  <summary><i>8. Switch between different app bar styles</i></summary>
@@ -249,7 +250,7 @@ https://github.com/user-attachments/assets/b5868cd2-8df9-490d-a2b6-4386c6ddcd56
 ```

 - To undo this change, simply remove this code block.
-</details>
+      </details>

 <details>
  <summary><i>9. Change to alternative color themes</i></summary>
@@ -258,13 +259,30 @@ https://github.com/user-attachments/assets/b5868cd2-8df9-490d-a2b6-4386c6ddcd56

 - 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>
+      </details>
+
+<details>
+  <summary><i>10. Increase the size of Continue Watching cards so that they stand out</i></summary>
+
+<img width="640" height="auto" alt="image" src="https://github.com/user-attachments/assets/2222d5b1-00d8-4859-90fb-eeb14d488bbd" />
+
+- You can adjust their scaling `--resumeCardScale`.
+- Use any values over 1.0 to make them bigger.
+
+```
+:root{
+  --resumeCardScale: 1.25;
+}
+```
+
+- To undo this change, simply remove this code block or set the value back to `1`.
+      </details>

 <hr>

 ### 🆗 Tested on

-   Jellyfin Server v10.11.5
+- Jellyfin Server v10.11.10
 - Microsoft Edge (Chromium)
 - Jellyfin Android App v2.6.3

@@ -273,12 +291,13 @@ https://github.com/user-attachments/assets/b5868cd2-8df9-490d-a2b6-4386c6ddcd56
 ### 🛠️ Troubleshooting

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

 - Check the version number at the bottom in the Settings screen.
-   It should be something like `ElegantFin v25.XX.XX`.
+- It should be something like `ElegantFin v26.YY.ZZ`.
+
+<img width="640" height="auto" alt="image" src="https://github.com/user-attachments/assets/c697f508-16db-4b1a-bfac-123decd943fa" />

-    <img width="380" height="300" alt="image" src="https://github.com/user-attachments/assets/aecca6f5-7bd3-4057-9131-aa60b3becbaf" />

 </details>

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

 <details>
  <summary>3️⃣ - <i>Why do I notice visual bugs and inconsistencies on Jellyfin Media Player?</i></summary>

 - JMP is based on Qt 5.x which uses a very outdated web engine. It does not support many new CSS features, so it is unsupported.
 - [Jellyfin Desktop](https://github.com/jellyfin/jellyfin-desktop) is the new official client moving forward. It seems to be in testing right now. Use it for better compatibility or use the web app instead.
-</details>
+  </details>

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

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

 <details>
  <summary>5️⃣ - <i>All the icons on my LG TV seem to be broken. How to fix them?</i></summary>
@@ -329,7 +348,7 @@ https://github.com/user-attachments/assets/b5868cd2-8df9-490d-a2b6-4386c6ddcd56
  <summary>7️⃣ - <i>When can I expect another update?</i></summary>

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

 <hr>

@@ -1,2 +1 @@
-/* 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
+/*! ElegantFin Theme v26.06.06 for Jellyfin by lscambo13 */@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");:root{--activeColor:#775bf4;--activeColorAlpha:rgba(119,91,244,.9);--appBarHeight:5em;--artistClearLogoVisibility:block;--artistPageBackground:unset;--artistTitleVisibility:none;--backdropTrimFromTop:10%;--backgroundAlphaOverlay:linear-gradient(180deg,var(--darkerGradientPointAlpha) 80%,transparent);--backgroundGradient:linear-gradient(0deg,var(--darkerGradientPoint) 35%,var(--lighterGradientPoint));--blurDefault:blur(5px);--blurLarge:blur(10px);--blurLargest:blur(20px);--blurSmallest:blur(2px);--borderColor:#47505c;--borderWidth:0.06em;--borderWidthDouble:0.12em;--bottomOSDGradient:linear-gradient(0deg,rgba(0,0,0,.8),45%,transparent);--btnDeleteBorderColor:#d95454;--btnDeleteColor:#a91d1d;--btnMiniPlayBorderColor:#32a769;--btnMiniPlayColor:#299a5d;--btnSubmitBorderColor:#756fe2;--btnSubmitColor:#3d36b2;--cardBackgroundGradient:linear-gradient(0deg,var(--darkerGradientPoint),25%,var(--lighterGradientPoint));--cardFooterGradient:linear-gradient(0deg,rgba(0,0,0,.9),40%,transparent);--cardHoverEffect:"";--checkboxCheckedBgColor:#4f46e5;--clearLogoVisibility:block;--darkerBorderColor:#31373f;--darkerGradientPoint:#111827;--darkerGradientPointAlpha:rgba(17,24,39,.85);--defaultBorder:var(--borderWidth) solid var(--borderColor);--defaultLighterBorder:var(--borderWidth) solid var(--lighterBorderColor);--dimTextColor:#9ca3af;--drawerColor:rgba(30,40,54,.9);--elegantFinFooterText:"ElegantFin v26.06.06";--extraCardButtonsVisibility:none;--gradientPointAlpha:rgba(29,38,53,.3);--headerBackground:var(--headerColorGradient);--headerBlurLayerVisibility:"";--headerBlurMask:linear-gradient(180deg,#fff 50%,85%,transparent);--headerColor:rgba(30,40,54,.8);--headerColorGradient:linear-gradient(180deg,rgba(30,40,54,.95) 30%,55%,transparent 90%);--headerColorGradientAlt:linear-gradient(180deg,#1e2836,70%,transparent);--highlightOutlineColor:#2563eb;--hoverGradientH:linear-gradient(90deg,transparent,hsla(0,0%,100%,.35) 45%,hsla(0,0%,100%,.35) 55%,transparent);--hoverGradientV:linear-gradient(0deg,transparent,hsla(0,0%,100%,.35) 45%,hsla(0,0%,100%,.35) 55%,transparent);--iconPack:"Material Symbols Rounded";--itemBackdropMask:linear-gradient(180deg,rgba(0,0,0,.8),75%,transparent);--itemColumnGap:1em;--itemOriginalTitleVisibility:block;--itemTitleVisibility:none;--largeRadius:1em;--largerRadius:1.25em;--libraryLabelVisibility:none;--lighterBorderColor:hsla(0,0%,100%,.2);--lighterGradientPoint:#1d2635;--lighterGradientPointAlpha:rgba(29,38,53,.85);--loginPageBgUrl:url();--loginPageText:"Sign in to continue";--menuButtonVisibility:block;--minEpisodeCardWidth:26em;--miniOverlayButtonVisibility:block;--osdSeekBarBufferedColorAlpha:hsla(0,0%,50%,.5);--osdSeekBarPlayedColor:var(--textColor);--osdSeekBarThumbColor:#fff;--overlayPlayButtonPosition:2.8em;--resumeCardScale:1;--selectorBackgroundColor:#374151;--selectorBackgroundColorAlpha:rgba(55,65,81,.5);--shadow:0.1em 0.1em 0.15em rgba(0,0,0,.3);--sidePadding:3.3%;--smallerRadius:0.375em;--smallRadius:0.5em;--tableBodyColor:#1f2937;--textColor:#d1d5db;--topOSDGradient:linear-gradient(180deg,rgba(0,0,0,.8),45%,transparent);--uiAccentColor:#756fe2;color-scheme:dark}html{font-family:Inter,sans-serif;font-optical-sizing:auto;font-style:normal;font-weight:425;-webkit-tap-highlight-color:transparent!important}body{--clearLogoBottomSpace:11em;--primaryItemPageNegativeSpace:14vh;--secondaryItemPageNegativeSpace:60vh}select{text-overflow:ellipsis}.layout-desktop>body:has(>audio[src]){--primaryItemPageNegativeSpace:calc(14vh + 5em);--secondaryItemPageNegativeSpace:calc(60vh + 5em)}.layout-mobile{--blurLargest:blur(12px);--headerBlurMask:linear-gradient(180deg,#fff 60%,90%,transparent);--headerColorGradient:var(--headerColorGradientAlt);--itemColumnGap:0.5em}.layout-mobile>body{--secondaryItemPageNegativeSpace:45vh}@font-face{font-family:Material Symbols Rounded Minimal;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/l/font?kit=sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjzarESMdAUY9qjb3u1M7e05tMSFFiwiIx7ihGnzWmz-lkbsBJUso54WUKiEWtV5-yu0mchXaMnO1vqpcxiqEd46a1XUtwWncyNNmxYr8hocRsPBG56BqeEkny0qMU_aSz_M2MYR8p9qc8uUfT0rnccAg__qWWJGuzJMRCBsajdQcef&skey=70ddea8fe54d532e&v=v346) format("woff2")}@font-face{font-family:Material Symbols Rounded;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/s/materialsymbolsrounded/v346/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2) format("woff2")}.material-icons{direction:ltr;display:inline-block;font-family:var(--iconPack),Material Icons!important;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;font-style:normal;font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 48;font-weight:400;letter-spacing:normal;line-height:1;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision;text-transform:none;vertical-aliLine truncated
@@ -1,4 +1,4 @@
-/* ElegantFin Theme for Jellyfin by lscambo13 */
+/*! ElegantFin Theme Nightly for Jellyfin by lscambo13 */

 /* Add-ons: Uncomment to enable */
 /* @import url(./assets/add-ons/media-bar-plugin-support-nightly.css); */
@@ -55,6 +55,7 @@
    /* textures */
    --backgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint) 35%, var(--lighterGradientPoint));
    --cardBackgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint), 25%, var(--lighterGradientPoint));
+    --backgroundAlphaOverlay: linear-gradient(180deg, var(--darkerGradientPointAlpha) 80%, transparent);
    --headerColorGradient: linear-gradient(180deg, rgba(30, 40, 54, 0.95) 30%, 55%, transparent 90%);
    --headerColorGradientAlt: linear-gradient(180deg, rgba(30, 40, 54, 1), 70%, transparent);
    --headerBlurMask: linear-gradient(180deg, white 50%, 85%, transparent);
@@ -66,15 +67,15 @@
    --hoverGradientV: linear-gradient(
        0deg,
        transparent,
-        rgb(255 255 255 / 100%) 45%,
-        rgb(255 255 255 / 100%) 55%,
+        rgb(255 255 255 / 35%) 45%,
+        rgb(255 255 255 / 35%) 55%,
        transparent
    );
    --hoverGradientH: linear-gradient(
        90deg,
        transparent,
-        rgb(255 255 255 / 100%) 45%,
-        rgb(255 255 255 / 100%) 55%,
+        rgb(255 255 255 / 35%) 45%,
+        rgb(255 255 255 / 35%) 55%,
        transparent
    );

@@ -118,14 +119,19 @@
       use 50% to place it at the center of a card */
    --overlayPlayButtonPosition: 2.8em;

-    /* use 'Material Icons Round' for the new icons [default]; 
-       use 'Material Icons' to revert to old icons */
-    --iconPack: "Material Symbols Rounded", Material Icons;
+    /* use 'Material Symbols Rounded' for the new icons (~5mb) [default]; 
+       use 'Material Symbols Rounded Minimal' to reduce bandwidth usage (~115kb) (may break compatibility with plugins);
+       use 'Material Icons' to revert to stock Jellyfin icons */
+    --iconPack: "Material Symbols Rounded";

    /* none: hides the watched and mark favorite buttons on hover [default];
-       block: makes them visible use block */
+       block: makes them visible */
    --extraCardButtonsVisibility: none;

+    /* block: makes the three-dot menu button visible [default];
+       none: hides the three-dot menu button on hover */
+    --menuButtonVisibility: block;
+
    /* block: keeps the original (foreign) title visible if it is available [default];
       none: always hides the original title of Movie/TV */
    --itemOriginalTitleVisibility: block;
@@ -142,6 +148,18 @@
       block: makes the title always visible */
    --itemTitleVisibility: none;

+    /* block: shows the music artist clear logo if it is available [default];
+       none: makes the music artist clear logo always hidden */
+    --artistClearLogoVisibility: block;
+
+    /* none: makes the music artist title always hidden [default];
+       block: shows the text-based music artist title */
+    --artistTitleVisibility: none;
+
+    /* unset: makes the artist background dim for better clear logo visibility on desktops [default]; 
+       none: makes the music artist page background fully visible */
+    --artistPageBackground: unset;
+
    /* block: shows the mini play or three-dot button on cards only on mobile [default]; 
       none: makes them always hidden only on mobile */
    --miniOverlayButtonVisibility: block;
@@ -158,9 +176,9 @@
       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;
+    /* use 1 to keep the size 'Continue Watching' cards normal [default]; 
+       use numbers greater than 1.0 to increase their size (example: 1.25) */
+    --resumeCardScale: 1;
 }

 html {
@@ -197,20 +215,32 @@ select {
    --secondaryItemPageNegativeSpace: 45vh;
 }

-/* Material Icons Round */
+/* Material Symbols Rounded - Minimal */
 /* https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=add,airplay,album,arrow_back,arrow_forward,arrow_upward,audiotrack,autorenew,backspace,book,brightness_high,call_split,cast,check,chevron_left,chevron_right,clear,close,closed_caption,cloud_download,content_copy,dashboard,delete,devices_other,download,drag_handle,dvr,exit_to_app,expand_more,explore,fast_forward,fast_rewind,favorite,fiber_manual_record,fiber_smart_record,file_download,filter_alt,folder,folder_open,forward_30,fullscreen,get_app,groups,home,image,info,info_outline,keyboard,keyboard_arrow_down,keyboard_arrow_left,keyboard_arrow_right,keyboard_arrow_up,keyboard_return,library_add_check,live_tv,local_movies,lock,lyrics,menu,mode_edit,more_vert,movie,music_note,music_video,navigate_before,navigate_next,pause,pause_circle_filled,pause_circle_outline,person,phonelink_lock,photo,photo_album,picture_in_picture_alt,play,play_arrow,play_circle_filled,play_circle_outline,playlist_add,preview,queue,queue_music,quiz,redo,refresh,remove_circle,remove_red_eye,repeat,repeat_one,replay,replay_10,save,schedule,search,settings,shuffle,skip_next,skip_previous,sort_by_alpha,space_bar,star,stop,storage,subtitles,sync,text_decrease,text_increase,theaters,toc,tv,undo,update,video_library,videocam,view_comfy,volume_off,volume_up */
@font-face {
-  font-family: 'Material Symbols Rounded';
+    font-family: "Material Symbols Rounded Minimal";
    font-style: normal;
    font-weight: 100 700;
-  src: url(https://fonts.gstatic.com/l/font?kit=sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjzarESMdAUY9qjb3u1M7e05tMSFFiwiIx7ihGnzWmz-lkbsBJUso54WUKiEWtV5-yu0mchXaMnO1vqpcxiqEd46a1XUtwWncyNNmxYr8hocRsPBG56BqeEkny0qMU_aSz_M2MYR8p9qc8uUfT0rnccAg__qWWJGuzJMRCBsajdQcef&skey=70ddea8fe54d532e&v=v338) format('woff2');
+    src: url(https://fonts.gstatic.com/l/font?kit=sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjzarESMdAUY9qjb3u1M7e05tMSFFiwiIx7ihGnzWmz-lkbsBJUso54WUKiEWtV5-yu0mchXaMnO1vqpcxiqEd46a1XUtwWncyNNmxYr8hocRsPBG56BqeEkny0qMU_aSz_M2MYR8p9qc8uUfT0rnccAg__qWWJGuzJMRCBsajdQcef&skey=70ddea8fe54d532e&v=v346)
+        format("woff2");
+}
+
+/* Material Symbols Rounded - Full */
+/* https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200 */
+@font-face {
+    font-family: "Material Symbols Rounded";
+    font-style: normal;
+    font-weight: 100 700;
+    src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v346/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2)
+        format("woff2");
 }

 .material-icons {
-  font-family: var(--iconPack) !important;
+    font-family:
+        var(--iconPack),
+        Material Icons !important;
    font-weight: normal;
    font-style: normal;
-  font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
@@ -218,9 +248,16 @@ select {
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
-  -webkit-font-feature-settings: 'liga';
+    vertical-align: middle;
+    text-rendering: geometricPrecision;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
-  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 {
@@ -430,31 +467,29 @@ select {

 .cardOverlayContainer:after {
    content: var(--cardHoverEffect);
-    transition: 0.5s;
+    transition: 0.65s;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
-    transform: translateY(-50%) translateX(0);
+    transform: translateY(-100%) translateX(0);
    background: var(--hoverGradientV);
 }

 .card-hoverable:hover .cardOverlayContainer:after {
-    transform: translateY(50%) translateX(0);
-    opacity: 0;
+    transform: translateY(100%) translateX(0);
 }

 .backdropCard.card-hoverable .cardOverlayContainer:after,
 .overflowBackdropCard.card-hoverable .cardOverlayContainer:after {
-    transform: translateY(0) translateX(-50%);
+    transform: translateY(0) translateX(-100%);
    background: var(--hoverGradientH);
 }

 .backdropCard.card-hoverable:hover .cardOverlayContainer:after,
 .overflowBackdropCard.card-hoverable:hover .cardOverlayContainer:after {
-    transform: translateY(0) translateX(50%);
-    opacity: 0;
+    transform: translateY(0) translateX(100%);
 }

 .cardBox:not(.visualCardBox) .cardPadder {
@@ -487,23 +522,23 @@ select {
    color: white;
 }

-.cardOverlayButton-br .cardOverlayButton-hover[data-action="menu"],
-.layout-desktop .listItemButton[data-action="menu"] {
-    display: none;
-}
-
 .layout-desktop .cardOverlayButton-br,
 [dir="ltr"].layout-desktop .cardOverlayButton-br {
-    bottom: 0.75em;
-    right: 0.5em;
-    display: var(--extraCardButtonsVisibility);
+    bottom: 1.2em;
+    right: 0.7em;
    z-index: 1;
+    font-size: 0.8em;
 }

-.layout-desktop .cardOverlayButton-br button {
+.layout-desktop .cardOverlayButton-br > button {
    color: white;
+    display: var(--extraCardButtonsVisibility);
    text-shadow: var(--shadow);
 }
+.cardOverlayButton-br .cardOverlayButton-hover[data-action="menu"],
+.layout-desktop .listItemButton[data-action="menu"] {
+    display: var(--menuButtonVisibility);
+}

 .layout-mobile .cardOverlayButton {
    padding: 1em;
@@ -963,6 +998,7 @@ select {
 }

 .card .cardTextCentered {
+    /* text-align-last: left; */
    text-shadow: 1px 1px 2px hsla(0, 0%, 0%, 0.8);
 }

@@ -1092,13 +1128,13 @@ select {
    padding-left: 0;
 }

-.itemsContainer:not(.editorsChoiceItemsContainer) {
+.itemsContainer:not(.editorsChoiceItemsContainer, .vertical-list) {
    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 {
+.layout-mobile .itemsContainer:not(.editorsChoiceItemsContainer, .vertical-wrap, .vertical-list)::after {
    content: "13";
    color: transparent;
 }
@@ -1256,6 +1292,7 @@ select {
 #itemDetailPage:has(.subtitle) .itemBackdrop,
 #itemDetailPage:has(.musicParentName) .itemBackdrop,
 #itemDetailPage:has(.detailImageContainer .backdropCard) .itemBackdrop,
+#itemDetailPage:has(.detailImageContainer .squareCard) .itemBackdrop,
 #itemDetailPage:has(.detailImageContainer .person) .itemBackdrop,
 #itemDetailPage:has(.detailImageContainer .queue) .itemBackdrop,
 #itemDetailPage:has(.detailImageContainer .book) .itemBackdrop,
@@ -1263,8 +1300,8 @@ select {
    height: calc(100vh - 27vh - var(--secondaryItemPageNegativeSpace));
 }

-#itemDetailPage:has(.detailImageContainer .cardPadder-square:not(.person)) .itemBackdrop {
-    height: calc(100vh - 20vh - var(--secondaryItemPageNegativeSpace));
+#itemDetailPage:has(.detailImageContainer .cardPadder-square > .person) .itemBackdrop {
+    height: calc(100vh - 8vh - var(--secondaryItemPageNegativeSpace));
 }

 .detailLogo {
@@ -1303,6 +1340,10 @@ select {
    top: calc(100vh - 6em - var(--secondaryItemPageNegativeSpace));
 }

+.layout-desktop #itemDetailPage:has(.detailImageContainer .person) .detailLogo {
+    top: calc(100vh - var(--secondaryItemPageNegativeSpace));
+}
+
 .layout-mobile #itemDetailPage:has(.subtitle) .detailLogo {
    top: calc(100vh - 11em - var(--secondaryItemPageNegativeSpace));
 }
@@ -1384,25 +1425,33 @@ select {

 /* this hides the detail logo  when media card is visible */
 #itemDetailPage:has(.detailImageContainer .backdropCard) .detailLogo,
-#itemDetailPage:has(.detailImageContainer .album) .detailLogo,
-#itemDetailPage:has(.detailImageContainer .person) .detailLogo {
+#itemDetailPage:has(.detailImageContainer .album) .detailLogo {
    z-index: 2;
    display: none;
 }

+#itemDetailPage:has(.detailImageContainer .person) .detailLogo {
+    z-index: 2;
+    display: var(--artistClearLogoVisibility);
+}
+
 /* this hides the main media title when the clear logo is available*/
 .detailLogo:not(.hide) ~ .detailPageWrapperContainer .nameContainer h1 {
    z-index: 2;
    display: var(--itemTitleVisibility);
 }

+.detailImageContainer:has(.squareCard .person) ~ .nameContainer h1 {
+    display: var(--artistTitleVisibility);
+}
+
 /* this shows the main media title and the poster when the clear logo is unavailable*/
 .detailLogo.hide ~ .detailPageWrapperContainer .nameContainer h1 {
    display: block !important;
 }

-.detailImageContainer:has(.backdropCard, .squareCard) ~ .nameContainer h1,
-.detailImageContainer:has(.cardImageIcon.person) ~ .nameContainer h1 {
+.detailImageContainer:has(.backdropCard) ~ .nameContainer h1,
+.detailImageContainer:has(.album) ~ .nameContainer h1 {
    display: block !important;
 }

@@ -1440,7 +1489,11 @@ select {

 #itemDetailPage:has(.subtitle),
 #itemDetailPage:has(.musicParentName) {
-    background: linear-gradient(180deg, var(--darkerGradientPointAlpha) 80%, transparent);
+    background: var(--backgroundAlphaOverlay);
+}
+
+#itemDetailPage:has(.detailImageContainer .cardPadder-square > .person) {
+    background: var(--artistPageBackground, var(--backgroundAlphaOverlay));
 }

 .layout-mobile #itemDetailPage:has(.detailImageContainer .backdropCard) .itemBackdrop,
@@ -1737,9 +1790,9 @@ progress + span {

 .mdl-slider::-webkit-slider-thumb {
    background: var(--osdSeekBarThumbColor);
-    width: 4px !important;
+    width: 0.4em !important;
    height: 0.4em !important;
-    border-radius: 0em;
+    border-radius: 0.4em;
 }

 .sliderContainer:hover .mdl-slider::-webkit-slider-thumb {
@@ -1757,8 +1810,27 @@ progress + span {
    transform: scale(1) scaleY(1.25);
 }

+/* These Firefox thumb styles are separate because combining them breaks the effect from chrome */
 .mdl-slider::-moz-range-thumb {
    background: var(--osdSeekBarThumbColor);
+    width: 0.4em !important;
+    height: 0.4em !important;
+    border-radius: 0.4em;
+}
+
+.sliderContainer:hover .mdl-slider::-moz-range-thumb {
+    width: 0.2em !important;
+    height: 0.8em !important;
+    border-radius: 0.2em;
+    transform: scale(1);
+}
+
+.sliderContainer:active .mdl-slider::-moz-range-thumb,
+.mdl-slider.show-focus:focus::-moz-range-thumb {
+    width: 0.2em !important;
+    height: 0.8em !important;
+    border-radius: 0.2em;
+    transform: scale(1) scaleY(1.25);
 }

 .sliderMarkerContainer {
@@ -1834,14 +1906,6 @@ progress + span {
    font-size: 2em;
 }

-.nowPlayingBar .playPauseButton {
-    font-size: 2em;
-}
-
-.nowPlayingInfoContainer .btnPlayPause {
-    font-size: 3em;
-}
-
 .osdControls {
    display: flex;
    flex-direction: column-reverse;
@@ -1950,7 +2014,9 @@ progress + span {

 .overview-expand.emby-button:after {
    content: "keyboard_arrow_down";
-    font-family: var(--iconPack);
+    font-family:
+        var(--iconPack),
+        Material Icons;
    font-feature-settings: "liga";
    background: var(--selectorBackgroundColor);
    border-radius: 50%;
@@ -2087,6 +2153,8 @@ progress + span {
    background: var(--lighterGradientPoint);
    border-bottom: var(--defaultBorder);
    backdrop-filter: var(--blurLarge);
+    height: 3.5em;
+    padding-top: max(env(safe-area-inset-top), var(--safe-area-inset-top));
 }

 .selectionCommandsPanel > h1 {
@@ -2132,7 +2200,7 @@ progress + span {
 }

 .overflowBackdropCard .cardText-first + .itemSelectionPanel > .checkboxContainer {
-    height: calc(100% - 0em);
+    height: 100%;
 }

 .checkboxContainer .emby-checkbox:checked + span + .checkboxOutline.multiSelectCheckboxOutline {
@@ -2160,7 +2228,7 @@ progress + span {

 .cardFooter + .itemSelectionPanel > .checkboxContainer,
 .cardScalable + .itemSelectionPanel > .checkboxContainer {
-    height: calc(100% - 0em);
+    height: 100%;
 }

 .checkboxOutline.multiSelectCheckboxOutline {
@@ -2701,9 +2769,9 @@ div[data-role="controlgroup"] a.ui-btn-active {
    margin-bottom: 1.5em;
 }

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

 .detailPageContent {
    gap: 1em;
@@ -2740,6 +2808,7 @@ div[data-role="controlgroup"] a.ui-btn-active {
 .trackSelections .selectContainer {
    max-width: unset !important;
    align-items: baseline;
+    /* margin: 0.25em !important; */
 }

 .selectArrowContainer {
@@ -2953,12 +3022,16 @@ div[data-role="controlgroup"] a.ui-btn-active {
    padding-right: 0 !important;
 }

+.vertical-list > .listGroupHeader {
+    padding-left: 0.5ch;
+}
+
 .listPaging > span {
    padding: 0 0.5em;
 }

 .layout-mobile #myPreferencesMenuPage {
-    padding-top: 3.75em !important;
+    padding-top: var(--appBarHeight) !important;
 }

 .headerUserButton {
@@ -3015,7 +3088,7 @@ div[data-role="controlgroup"] a.ui-btn-active {

 .sectionTitleTextButton > * {
    text-align: left;
-    /* !important are needed for proper alignment on phones */
+    /* the !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 */
@@ -3451,7 +3524,7 @@ table:not(.MuiTable-root.MuiTable-stickyHeader) {
 }

 ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
-    /* ! Don't change these units. They are rem because that is standard for MUI */
+    /* Don't change these units. They are rem because that is standard for MUI */
    gap: 0.5rem;
 }

@@ -3677,6 +3750,14 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
    aspect-ratio: 1 / 1;
 }

+.nowPlayingBar .playPauseButton {
+    font-size: 2em;
+}
+
+.nowPlayingInfoContainer .btnPlayPause {
+    font-size: 3em;
+}
+
 .nowPlayingBar .nowPlayingImage {
    background-size: cover;
    border-radius: var(--smallerRadius);
@@ -3861,7 +3942,9 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
 }

 .noHomeButtonHeader .emby-tab-button:before {
-    font-family: var(--iconPack);
+    font-family:
+        var(--iconPack),
+        Material Icons;
    font-feature-settings: "liga";
    /* padding-inline-end: 0.5ch; */
    font-size: 1.2em;
@@ -4000,6 +4083,11 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
    }
 }

+.skinHeader {
+    /* this is for testing a fix for iOS  */
+    padding-top: max(env(safe-area-inset-top), var(--safe-area-inset-top)) !important;
+}
+
 .nowPlayingPage {
    background: linear-gradient(var(--darkerGradientPointAlpha), transparent);
 }
@@ -1,2 +1 @@
-/* Add-on: Custom media covers v25.11.25 for the ElegantFin Theme for Jellyfin by lscambo13 */
-:root{--colorOverlayMoviesCover:rgb(193,103,104);--colorOverlayTvshowsCover:rgb(140,149,43);--colorOverlayLivetvCover:rgb(17,98,159);--colorOverlayPlaylistsCover:rgb(118,61,216);--colorOverlayBoxsetsCover:rgb(219,180,53);--colorOverlayMusicCover:rgb(11,93,72);--colorOverlayHomevideosCover:rgb(39,90,185);--colorOverlayBooksCover:rgb(166,68,70);--colorOverlayFoldersCover:rgb(173,60,113);--colorOverlayMixedCover:rgb(194,58,58);--colorOverlayRecordedmoviesCover:rgb(52,52,52);--colorOverlayRecordedtvCover:rgb(120,100,28);--urlMoviesCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/movies.webp);--urlTvshowsCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/tvshows.webp);--urlLivetvCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/livetv.webp);--urlPlaylistsCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/playlists.webp);--urlBoxsetsCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/boxsets.webp);--urlMusicCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/music.webp);--urlHomevideosCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/homevideos.webp);--urlBooksCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/books.webp);--urlFoldersCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/folders.webp);--urlMixedCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/mixed.webp);--urlRecordedmoviesCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/recordedmovies.webp);--urlRecordedtvCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/recordedtv.webp)}[data-type="CollectionFolder"] .defaultCardBackground,[data-type="UserView"] .defaultCardBackground,[data-type="CollectionFolder"] .cardContent,[data-type="UserView"] .cardContent{filter:contrast(.85);background-size:cover!important;background-position:50%!important;background-blend-mode:multiply}[data-type="CollectionFolder"] .cardContent::before,[data-type="UserView"] .cardContent::before{content:attr(aria-label);position:absolute;font-size:clamp(1em,max(2.5vh,2vw),2em);font-weight:800;color:white;font-family:"Noto Sans";text-align:center;width:94%;white-space:normal}.layout-tv [data-type="CollectionFolder"]::before,.layout-tv [data-type="UserView"]::before{content:attr(aria-label);position:absolute;display:grid;align-content:center;top:0;bottom:0;font-size:clamp(1em,max(2.5vh,2vw),2em);font-weight:800;color:white;font-family:"Noto Sans";text-align:center;width:94%;white-space:normal;z-index:1}[data-type="CollectionFolder"] .cardImageIcon:not(.quiz)::before,[data-type="UserView"] .cardImageIcon:not(.quiz)::before{display:none}[data-collectiontype="movies"] .cardContent{background-color:var(--colorOverlayMoviesCover)!important;background-image:var(--urlMoviesCover)!important}[data-collectiontype="tvshows"] .cardContent{background-color:var(--colorOverlayTvshowsCover)!important;background-image:var(--urlTvshowsCover)!important}[data-collectiontype="livetv"] .cardContent{background-color:var(--colorOverlayLivetvCover)!important;background-image:var(--urlLivetvCover)!important}[data-collectiontype="music"] .cardContent{background-color:var(--colorOverlayMusicCover)!important;background-image:var(--urlMusicCover)!important}[data-collectiontype="homevideos"] .cardContent{background-color:var(--colorOverlayHomevideosCover)!important;background-image:var(--urlHomevideosCover)!important}[data-collectiontype="books"] .cardContent{background-color:var(--colorOverlayBooksCover)!important;background-image:var(--urlBooksCover)!important}[data-collectiontype="boxsets"] .cardContent{background-color:var(--colorOverlayBoxsetsCover)!important;background-image:var(--urlBoxsetsCover)!important}[data-collectiontype="folders"] .cardContent{background-color:var(--colorOverlayFoldersCover)!important;background-image:var(--urlFoldersCover)!important}[data-collectiontype="playlists"] .cardContent{background-color:var(--colorOverlayPlaylistsCover)!important;background-image:var(--urlPlaylistsCover)!important}[data-prefix="MIX"] .cardContent{background-color:var(--colorOverlayMixedCover)!important;background-image:var(--urlMixedCover)!important}[data-collectiontype="movies"][data-prefix="REC"] .cardContent{background-color:var(--colorOverlayRecordedmoviesCover)!important;background-image:var(--urlRecordedmoviesCover)!important}[data-prefix="REC"] .cardContent{background-Line truncated
+/*! Add-on: Custom Media Covers v26.06.06 for the ElegantFin Theme for Jellyfin by lscambo13 */:root{--colorOverlayAnimeCover:#bdcb63;--colorOverlayBooksCover:#a64446;--colorOverlayBoxsetsCover:#dbb435;--colorOverlayFoldersCover:#ad3c71;--colorOverlayHomevideosCover:#275ab9;--colorOverlayLivetvCover:#11629f;--colorOverlayMixedCover:#c23a3a;--colorOverlayMoviesCover:#c16768;--colorOverlayMusicCover:#0b5d48;--colorOverlayPlaylistsCover:#763dd8;--colorOverlayRecordedmoviesCover:#343434;--colorOverlayRecordedtvCover:#78641c;--colorOverlaySportsCover:#e97e3c;--colorOverlayTvshowsCover:#8c952b;--urlAnimeCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/anime.webp);--urlBooksCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/books.webp);--urlBoxsetsCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/boxsets.webp);--urlFoldersCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/folders.webp);--urlHomevideosCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/homevideos.webp);--urlLivetvCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/livetv.webp);--urlMixedCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/mixed.webp);--urlMoviesCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/movies.webp);--urlMusicCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/music.webp);--urlPlaylistsCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/playlists.webp);--urlRecordedmoviesCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/recordedmovies.webp);--urlRecordedtvCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/recordedtv.webp);--urlSportsCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/sports.webp);--urlTvshowsCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/tvshows.webp)}[data-type=CollectionFolder] .cardContent,[data-type=CollectionFolder] .defaultCardBackground,[data-type=UserView] .cardContent,[data-type=UserView] .defaultCardBackground{background-blend-mode:multiply;background-position:50%!important;background-size:cover!important;filter:contrast(.85)}.layout-tv [data-type=CollectionFolder]:before,.layout-tv [data-type=UserView]:before,[data-type=CollectionFolder] .cardContent:before,[data-type=UserView] .cardContent:before{color:#fff;content:attr(aria-label);font-family:Noto Sans;font-size:clamp(1em,max(2.5vh,2vw),2em);font-weight:800;position:absolute;text-align:center;white-space:normal;width:94%}.layout-tv [data-type=CollectionFolder]:before,.layout-tv [data-type=UserView]:before{align-content:center;bottom:0;display:grid;top:0;z-index:1}[data-type=CollectionFolder] .cardImageIcon:not(.quiz):before,[data-type=UserView] .cardImageIcon:not(.quiz):before{display:none}[data-collectiontype=movies] .cardContent{background-color:var(--colorOverlayMoviesCover)!important;background-image:var(--urlMoviesCover)!important}[data-collectiontype=tvshows] .cardContent{background-color:var(--colorOverlayTvshowsCover)!important;background-image:var(--urlTvshowsCover)!important}[data-collectiontype=livetv] .cardContent{background-color:var(--colorOverlayLivetvCover)!important;background-image:var(--urlLivetvCover)!important}[data-collectiontype=music] .cardContent{background-color:var(--colorOverlayMusicCover)!important;background-image:var(--urlMusicCover)!important}[data-collectiontype=homevideos] .cardContent{background-color:var(--colorOverlayHomevideosCover)!important;background-image:var(--urlHomevideosCover)!important}[data-collectiontype=books] .cardContent{background-color:var(--colorOverlayBooksCover)!important;background-image:var(--urlBooksCover)!important}[data-collectiontype=boxsets] .cardContent{background-color:var(--colorOverlayBoxsetsCover)!important;background-image:var(--urlBoxsetsCover)!important}[data-collectiontype=folders] .cardContent{background-color:var(--colorOverlayFoldersCover)!important;background-image:var(--urlFoldersCover)!important}[data-collectiontype=playlists] .cardContent{background-color:var(--colorOverlayPlaylistsCover)!important;background-image:var(--urlPlaylistsCover)!important}[data-type=CollectionFolder][data-prefix=MIX] .cardContent{background-color:var(--colorOverlayMixedCover)!important;background-image:var(--urlMixedCover)!important}[dLine truncated
@@ -1,4 +1,4 @@
-/* Add-on: Custom media covers nightly for the ElegantFin Theme for Jellyfin by lscambo13 */
+/*! Add-on: Custom Media Covers Nightly for the ElegantFin Theme for Jellyfin by lscambo13 */

 :root {
    /* my media library default covers customizations */
@@ -0,0 +1,149 @@
+/*! Add-on: Custom Media Covers v26.06.06 for the ElegantFin Theme for Jellyfin by lscambo13 */
+
+:root {
+    /* my media library default covers customizations */
+    --colorOverlayMoviesCover: rgb(193, 103, 104);
+    --colorOverlayTvshowsCover: rgb(140, 149, 43);
+    --colorOverlayLivetvCover: rgb(17, 98, 159);
+    --colorOverlayPlaylistsCover: rgb(118, 61, 216);
+    --colorOverlayBoxsetsCover: rgb(219, 180, 53);
+    --colorOverlayMusicCover: rgb(11, 93, 72);
+    --colorOverlayHomevideosCover: rgb(39, 90, 185);
+    --colorOverlayBooksCover: rgb(166, 68, 70);
+    --colorOverlayFoldersCover: rgb(173, 60, 113);
+    --colorOverlayMixedCover: rgb(194, 58, 58);
+    --colorOverlayRecordedmoviesCover: rgb(52, 52, 52);
+    --colorOverlayRecordedtvCover: rgb(120, 100, 28);
+    --colorOverlayAnimeCover: rgb(189, 203, 99);
+    --colorOverlaySportsCover: rgb(233, 126, 60);
+    --urlMoviesCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/movies.webp);
+    --urlTvshowsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/tvshows.webp);
+    --urlLivetvCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/livetv.webp);
+    --urlPlaylistsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/playlists.webp);
+    --urlBoxsetsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/boxsets.webp);
+    --urlMusicCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/music.webp);
+    --urlHomevideosCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/homevideos.webp);
+    --urlBooksCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/books.webp);
+    --urlFoldersCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/folders.webp);
+    --urlMixedCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/mixed.webp);
+    --urlRecordedmoviesCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/recordedmovies.webp);
+    --urlRecordedtvCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/recordedtv.webp);
+    --urlAnimeCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/anime.webp);
+    --urlSportsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/sports.webp);
+}
+
+[data-type="CollectionFolder"] .defaultCardBackground,
+[data-type="UserView"] .defaultCardBackground,
+[data-type="CollectionFolder"] .cardContent,
+[data-type="UserView"] .cardContent {
+    filter: contrast(0.85);
+    background-size: cover !important;
+    background-position: 50% !important;
+    background-blend-mode: multiply;
+}
+
+[data-type="CollectionFolder"] .cardContent::before,
+[data-type="UserView"] .cardContent::before {
+    content: attr(aria-label);
+    position: absolute;
+    font-size: clamp(1em, max(2.5vh, 2vw), 2em);
+    font-weight: 800;
+    color: white;
+    font-family: "Noto Sans";
+    text-align: center;
+    width: 94%;
+    white-space: normal;
+}
+
+.layout-tv [data-type="CollectionFolder"]::before,
+.layout-tv [data-type="UserView"]::before {
+    content: attr(aria-label);
+    position: absolute;
+    display: grid;
+    align-content: center;
+    top: 0;
+    bottom: 0;
+    font-size: clamp(1em, max(2.5vh, 2vw), 2em);
+    font-weight: 800;
+    color: white;
+    font-family: "Noto Sans";
+    text-align: center;
+    width: 94%;
+    white-space: normal;
+    z-index: 1;
+}
+
+[data-type="CollectionFolder"] .cardImageIcon:not(.quiz)::before,
+[data-type="UserView"] .cardImageIcon:not(.quiz)::before {
+    display: none;
+}
+
+[data-collectiontype="movies"] .cardContent {
+    background-color: var(--colorOverlayMoviesCover) !important;
+    background-image: var(--urlMoviesCover) !important;
+}
+
+[data-collectiontype="tvshows"] .cardContent {
+    background-color: var(--colorOverlayTvshowsCover) !important;
+    background-image: var(--urlTvshowsCover) !important;
+}
+
+[data-collectiontype="livetv"] .cardContent {
+    background-color: var(--colorOverlayLivetvCover) !important;
+    background-image: var(--urlLivetvCover) !important;
+}
+
+[data-collectiontype="music"] .cardContent {
+    background-color: var(--colorOverlayMusicCover) !important;
+    background-image: var(--urlMusicCover) !important;
+}
+
+[data-collectiontype="homevideos"] .cardContent {
+    background-color: var(--colorOverlayHomevideosCover) !important;
+    background-image: var(--urlHomevideosCover) !important;
+}
+
+[data-collectiontype="books"] .cardContent {
+    background-color: var(--colorOverlayBooksCover) !important;
+    background-image: var(--urlBooksCover) !important;
+}
+
+[data-collectiontype="boxsets"] .cardContent {
+    background-color: var(--colorOverlayBoxsetsCover) !important;
+    background-image: var(--urlBoxsetsCover) !important;
+}
+
+[data-collectiontype="folders"] .cardContent {
+    background-color: var(--colorOverlayFoldersCover) !important;
+    background-image: var(--urlFoldersCover) !important;
+}
+
+[data-collectiontype="playlists"] .cardContent {
+    background-color: var(--colorOverlayPlaylistsCover) !important;
+    background-image: var(--urlPlaylistsCover) !important;
+}
+
+[data-type="CollectionFolder"][data-prefix="MIX"] .cardContent {
+    background-color: var(--colorOverlayMixedCover) !important;
+    background-image: var(--urlMixedCover) !important;
+}
+
+[data-collectiontype="movies"][data-prefix="REC"] .cardContent {
+    background-color: var(--colorOverlayRecordedmoviesCover) !important;
+    background-image: var(--urlRecordedmoviesCover) !important;
+}
+
+[data-type="CollectionFolder"][data-prefix="REC"] .cardContent {
+    background-color: var(--colorOverlayRecordedtvCover) !important;
+    background-image: var(--urlRecordedtvCover) !important;
+}
+
+[data-type="CollectionFolder"][data-prefix="ANI"] .cardContent {
+    background-color: var(--colorOverlayAnimeCover) !important;
+    background-image: var(--urlAnimeCover) !important;
+}
+
+[data-type="CollectionFolder"][data-prefix="SPO"] .cardContent {
+    background-color: var(--colorOverlaySportsCover) !important;
+    background-image: var(--urlSportsCover) !important;
+}
@@ -1,2 +1 @@
-/* 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%}}
+/*! Add-on: Media Bar Plugin Support v26.06.06 for the ElegantFin Theme for Jellyfin by lscambo13 */.detail-button:before,.favorite-button.favorited:before,.favorite-button:before,.play-button:before{font-weight:400}.play-button{font-family:Inter;font-size:1em;font-weight:500;order:1}.detail-button,.favorite-button{order:2}.backdrop,.backdrop-container,.backdrop-overlay{background-color:transparent;mask-image:linear-gradient(180deg,rgba(0,0,0,.85),70%,transparent);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85),70%,transparent)}.backdrop{transform-origin:center left}.rating-value{flex-wrap:wrap;justify-content:center}.age-rating{color:unset;font-family:Archivo Narrow,sans-serif;font-size:.8em}#slides-container{height:62%;left:var(--sidePadding);overflow:visible;position:absolute;top:calc(var(--appBarHeight)*2 + 1.25em);user-select:none;width:calc(100vw - var(--sidePadding)*2)}.slide{border:var(--defaultBorder);border-radius:var(--largerRadius);overflow:hidden;transition:border 0s}.logo-container{top:10vh}.backdrop,.backdrop-container,.backdrop-overlay{mask-image:none;-webkit-mask-image:none}.backdrop-overlay{background:linear-gradient(0deg,rgba(0,0,0,.85),40%,transparent)}.pause-button,.volume-toggle{top:1em!important}.separator-icon{color:var(--dimTextColor);font-size:5px}.dot{background-color:var(--textColor)!important;border-radius:.25em;height:.375em;opacity:.5;transition:width .5s;width:.375em}.dot.active{transform:none;width:2em}@media only screen and (orientation:landscape){.button-container,.dots-container,.genre,.info-container,.plot-container{top:unset}.button-container{bottom:3em}.dots-container{bottom:4.5em}.plot-container{bottom:7em;height:4em}.genre{bottom:12em}.info-container{bottom:14em}.logo-container{align-items:flex-end;max-width:35vw;top:3%}.gradient-overlay{background:linear-gradient(37deg,rgba(0,0,0,.2) 32%,rgb(29 29 29/7%) 47%,rgba(29,29,29,0));mask:none;-webkit-mask:none}}@media only screen and (max-width:767px) and (orientation:portrait){.button-container{bottom:3em}.genre,.tomato-rating{display:none}.dots-container{bottom:6em}.info-container{bottom:5em}.logo-container{top:calc(100% - 15em)}.backdrop{transform-origin:center}.left-arrow,.right-arrow{display:none!important}.play-button{order:2}}@media (min-width:75em){#slides-container{top:calc(var(--appBarHeight) + 1.25em)}.layout-tv #slides-container{top:calc(var(--appBarHeight)*2 + 1.25em)}}@media (min-width:100em){.layout-tv #slides-container{top:calc(var(--appBarHeight) + 1.25em)}}@media only screen and (max-height:767px) and (orientation:landscape){#slides-container{height:57%}.logo-container{top:3%}}
@@ -1,4 +1,4 @@
-/* Add-on: Media Bar plugin support nightly for the ElegantFin Theme for Jellyfin by lscambo13 */
+/*! Add-on: Media Bar Plugin Support Nightly for the ElegantFin Theme for Jellyfin by lscambo13 */
 /* this styles the media bar plugin - start */
 .play-button::before,
 .detail-button::before,
@@ -129,7 +129,7 @@
    }

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

 This is a Jellyfin add-on that allows you to customise My Media cover arts. This is an experimental feature, so limited support will be provided.

@@ -54,6 +54,8 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
    --colorOverlayMixedCover: transparent;
    --colorOverlayRecordedmoviesCover: transparent;
    --colorOverlayRecordedtvCover: transparent;
+    --colorOverlayAnimeCover: transparent;
+    --colorOverlaySportsCover: transparent;
    --urlMoviesCover: transparent;
    --urlTvshowsCover: transparent;
    --urlLivetvCover: transparent;
@@ -66,6 +68,8 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
    --urlMixedCover: transparent;
    --urlRecordedmoviesCover: transparent;
    --urlRecordedtvCover: transparent;
+    --urlAnimeCover: transparent;
+    --urlSportsCover: transparent;
 }
 ```

@@ -89,6 +93,8 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
    --colorOverlayMixedCover: transparent;
    --colorOverlayRecordedmoviesCover: transparent;
    --colorOverlayRecordedtvCover: transparent;
+    --colorOverlayAnimeCover: transparent;
+    --colorOverlaySportsCover: transparent;
    --urlMoviesCover: var(--cardBackgroundGradient);
    --urlTvshowsCover: var(--cardBackgroundGradient);
    --urlLivetvCover: var(--cardBackgroundGradient);
@@ -101,6 +107,8 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
    --urlMixedCover: var(--cardBackgroundGradient);
    --urlRecordedmoviesCover: var(--cardBackgroundGradient);
    --urlRecordedtvCover: var(--cardBackgroundGradient);
+    --urlAnimeCover: var(--cardBackgroundGradient);
+    --urlSportsCover: var(--cardBackgroundGradient);
 }
 ```

@@ -127,6 +135,8 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
    --colorOverlayMixedCover: rgb(194, 58, 58);
    --colorOverlayRecordedmoviesCover: rgb(52, 52, 52);
    --colorOverlayRecordedtvCover: rgb(120, 100, 28);
+    --colorOverlayAnimeCover: rgb(189, 203, 99);
+    --colorOverlaySportsCover: rgb(233, 126, 60);
    --urlMoviesCover: linear-gradient(0deg, #313131, #585858 25%);
    --urlTvshowsCover: linear-gradient(0deg, #313131, #585858 25%);
    --urlLivetvCover: linear-gradient(0deg, #313131, #585858 25%);
@@ -139,6 +149,8 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
    --urlMixedCover: linear-gradient(0deg, #313131, #585858 25%);
    --urlRecordedmoviesCover: linear-gradient(0deg, #313131, #585858 25%);
    --urlRecordedtvCover: linear-gradient(0deg, #313131, #585858 25%);
+    --urlAnimeCover: linear-gradient(0deg, #313131, #585858 25%);
+    --urlSportsCover: linear-gradient(0deg, #313131, #585858 25%);
 }
 ```

@@ -187,6 +199,8 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
    --colorOverlayMixedCover: rgb();
    --colorOverlayRecordedmoviesCover: rgb();
    --colorOverlayRecordedtvCover: rgb();
+    --colorOverlayAnimeCover: rgb();
+    --colorOverlaySportsCover: rgb();

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

@@ -201,6 +215,8 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
    --urlMixedCover: url();
    --urlRecordedmoviesCover: url();
    --urlRecordedtvCover: url();
+    --urlAnimeCover: url();
+    --urlSportsCover: url();

 }

@@ -245,7 +261,3 @@ Suppose you want to modify the Live TV cover art. You'll have to modify the vari
 4. Click save.
 </details>

-
-<hr>
-
-```
@@ -0,0 +1,18 @@
+{
+    "devDependencies": {
+        "css-declaration-sorter": "^7.4.0",
+        "cssnano": "^8.0.1",
+        "postcss": "^8.5.15",
+        "postcss-cli": "^11.0.1"
+    },
+    "scripts": {
+        "build:theme": "postcss ./Theme/ElegantFin-theme-nightly.css -o ./Theme/ElegantFin-jellyfin-theme-build-latest-minified.css",
+        "build:covers-addon": "postcss ./Theme/assets/add-ons/custom-media-covers-nightly.css -o ./Theme/assets/add-ons/custom-media-covers-latest-min.css",
+        "build:mediabar-addon": "postcss ./Theme/assets/add-ons/media-bar-plugin-support-nightly.css -o ./Theme/assets/add-ons/media-bar-plugin-support-latest-min.css",
+        "build:release": "npm run build:theme && npm run build:covers-addon && npm run build:mediabar-addon",
+        "watch:theme": "postcss ./Theme/ElegantFin-theme-nightly.css -o ./Theme/ElegantFin-theme-nightly-min.css --watch --verbose",
+        "watch:covers-addon": "postcss ./Theme/assets/add-ons/custom-media-covers-nightly.css -o ./Theme/assets/add-ons/custom-media-covers-nightly-min.css --watch --verbose",
+        "watch:mediabar-addon": "postcss ./Theme/assets/add-ons/media-bar-plugin-support-nightly.css -o ./Theme/assets/add-ons/media-bar-plugin-support-nightly-min.css --watch --verbose",
+        "watch:fixes-addon": "postcss ./Theme/assets/add-ons/seamless-fork-compatibility-nightly.css -o ./Theme/assets/add-ons/seamless-fork-compatibility-nightly-min.css --watch --verbose"
+    }
+}
@@ -0,0 +1,22 @@
+const cssDeclarationSorter = require('css-declaration-sorter');
+const cssnano = require('cssnano');
+
+module.exports = {
+	plugins: [
+		cssDeclarationSorter({
+			keepOverrides: true,
+			order: (a, b) => {
+				const aVar = a.startsWith('--');
+				const bVar = b.startsWith('--');
+
+				if (aVar && !bVar) return -1;
+				if (!aVar && bVar) return 1;
+
+				return a.localeCompare(b);
+			},
+		}),
+		cssnano({
+			preset: 'default',
+		}),
+	],
+};
Author	SHA1	Message	Date
lscambo13	c8ef5af7de	RELEASE: ElegantFin v26.06.06	2026-06-06 23:59:34 +05:30
lscambo13	61bf0407f1	Fix: Brought back small padding around cards on phones to account for multi-selection checkbox outline	2026-06-06 23:53:31 +05:30
lscambo13	a2a05e1ab6	Merge branch 'main' of https://github.com/lscambo13/ElegantFin	2026-06-06 23:39:55 +05:30
lscambo13	9c24801ff9	Docs: Update README for clarity and new customisation options	2026-06-06 23:32:19 +05:30
lscambo13	7f9aec6672	Docs: Add anime and sports cover properties to custom media covers add-on documentation	2026-06-06 22:56:59 +05:30
lscambo13	d337d1c7c0	Fix: Clear logos in the media-bar add-on were overlapping metadata at low resolutions	2026-06-06 21:36:20 +05:30
lscambo13	835d6a0fbd	New: Updated Material Symbols to latest version	2026-06-05 22:58:57 +05:30
lscambo13	1fe0bfb13f	Fix: Added left padding to disc headings in music lists	2026-06-05 22:57:44 +05:30
lscambo13	3b4f966833	Fix: Multi-selection checkboxes were not covering the cards fully because of minification dev: updated calc() functions to prevent issues caused by minification	2026-06-05 22:56:27 +05:30
lscambo13	ba0aabd07b	dev: use cssnano, postcss, postcss-cli and css-declaration-sorter packages for more control over minification dev: exclude some files dev: sort declarations alphabetically during minification	2026-06-05 22:37:30 +05:30
lscambo13	9972862b5e	Fix: Added safe insets for #233	2026-06-05 22:27:59 +05:30
lscambo13	6ba7bf37dd	dev: updated comments for clarity	2026-06-04 22:55:49 +05:30
lscambo13	b216efa4e4	Fix: Removed hardcoded padding value	2026-06-04 22:00:34 +05:30
lscambo13	5faa8f8d07	New: Disabled enlarged 'continue watching' cards by default; they can be enabled using --resumeCardScale	2026-06-04 21:07:25 +05:30
lscambo13	a6365ea3c7	dev: rearranged some code	2026-06-04 20:54:30 +05:30
lscambo13	115cb68b7a	New: the three-dot menu button can now be toggled on or off	2026-06-04 20:50:35 +05:30
lscambo13	a20a4a18c7	Fix: Potential fix for #233	2026-06-04 20:48:47 +05:30
lscambo13	a2de79b1e3	Update tested version of Jellyfin Server to v10.11.10	2026-05-29 07:25:19 +05:30
lscambo13	8ff232ece0	Fix: Simplified the card hover overlay animation	2026-05-25 21:08:28 +05:30
lscambo13	45273ab2cd	Fix: Added icon fallback to prevent the flash of invisible text	2026-05-25 21:06:43 +05:30
lscambo13	0f5925c429	New: Updated seek bar thumbs, and fixed their functionality on Firefox	2026-05-24 14:33:57 +05:30
lscambo13	47783d848d	Fix: Exclude gap from vertical music lists	2026-05-24 14:26:47 +05:30
lscambo13	2e61005bde	Fix: Exclude vertical lists from `4615ef4dcc`	2026-05-23 21:25:47 +05:30
lscambo13	0863886a23	dev: updated formatting	2026-05-23 21:09:05 +05:30
lscambo13	d1c4cdf371	Fix: Some details tables were overflowing for some reason on phones	2026-05-23 21:05:41 +05:30
lscambo13	5a4ce02efc	Fix: Restored the three-dot button permanently because newer Jellyfin versions disable the right-click context menu	2026-05-23 20:55:30 +05:30
lscambo13	42e962c6a3	Fix: Removed fixed font-size to prevent issues with indicator icons, and restored some compatibility properties	2026-05-23 20:51:56 +05:30
lscambo13andAhmed Hamdy	d0da93dd8a	New: Replaced music artist names with clear logos #273 - This can be configured using css variables - Rearranged code for better manageability Co-authored-by: Ahmed Hamdy <AhmedRadwan4@users.noreply.github.com>	2026-05-23 20:26:47 +05:30
lscambo13	a85a8127c4	Fix: Hover overlay gets stuck on latest Jellyfin versions; this workaround hides it	2026-05-23 20:10:34 +05:30
lscambo13	e6eeba4b54	Fix: Made the new minimal icons optional This prevents breaking compatibility with some plugins New: Updated to a newer version of Material Symbols Fix: Added fallback to the stock icons for edge-cases	2026-05-23 20:05:47 +05:30