Update tested version of Jellyfin Server to v10.11.10

- This can be configured using css variables
- Rearranged code for better manageability

Co-authored-by: Ahmed Hamdy <AhmedRadwan4@users.noreply.github.com>

README.md

@@ -156,7 +156,7 @@ 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>
@@ -170,7 +170,7 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
     }
     ```
 - To hide them again, simply remove this code block or replace `block` with `none`.
-</details>
+      </details>
 
 <details>
   <summary><i>4. Place the overlay play button at the center of cards on desktop</i></summary>
@@ -184,14 +184,14 @@ 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 hover effect on desktop</i></summary>
+  <summary><i>5. Disable the card shinning effect on hover on desktop</i></summary>
 
 https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd
 
--   To disable the reflection on cards that shows when hovering over them on desktop, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
+- To disable the shine on cards that shows when hovering over them on desktop, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
 
 ```
   :root{
@@ -200,7 +200,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,21 +216,21 @@ 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>
 
   <img width="640" height="auto" alt="image" src="https://github.com/user-attachments/assets/3e88e270-40f9-48ba-8173-f65b94344f8d" />
 
--   ElegantFin does not support any plugins by default, so to to add external support for [this plugin](https://github.com/IAmParadox27/jellyfin-plugin-media-bar), copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
+- ElegantFin does not support any plugins by default, so to to add external support for [this plugin](https://github.com/IAmParadox27/jellyfin-plugin-media-bar), copy and paste the following code right after the main import in Custom CSS box, click save and finally refresh your app/webpage.
 
 ```
 	@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/media-bar-plugin-support-latest-min.css");
 ```
 
 - To undo this change, simply remove this code block.
-</details>
+      </details>
 
 <details>
   <summary><i>8. Switch between different app bar styles</i></summary>
@@ -249,7 +249,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 +258,13 @@ 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>
 
 <hr>
 
 ### 🆗 Tested on
 
--   Jellyfin Server v10.11.5
+- Jellyfin Server v10.11.10
 - Microsoft Edge (Chromium)
 - Jellyfin Android App v2.6.3
 
@@ -290,19 +290,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>
 
--   As of version 1.12.0, JMP is based on Qt 5.x which uses a very outdated web engine, so it does not support many new CSS features. Once a new version based on Qt 6.x is released, most issues should automatically be resolved. Until then, JMP is unsupported and I recommend using the web app instead.
-</details>
+- JMP is based on Qt 5.x which uses a very outdated web engine. It does not support many new CSS features, so it is unsupported.
+- [Jellyfin Desktop](https://github.com/jellyfin/jellyfin-desktop) is the new official client moving forward. It seems to be in testing right now. Use it for better compatibility or use the web app instead.
+  </details>
 
 <details>
   <summary>4️⃣ - <i>Does it work on the AndroidTV version of the Jellyfin app?</i></summary>
 
 - As of version 0.18.11, the official Jellyfin app on the AndroidTVs does not support css themes, but the Android mobile phone app supports them. The WebOS version of the app seems to be based on the mobile phone version, so it supports the theme just fine.
-</details>
+      </details>
 
 <details>
   <summary>5️⃣ - <i>All the icons on my LG TV seem to be broken. How to fix them?</i></summary>
@@ -328,7 +329,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>
 
@@ -338,9 +339,7 @@ Please read the [Contributor Guidelines](./CONTRIBUTING.md) before opening pull
 
 This is a hobby project. If it helped you, your support really means a lot.
 
-<a href="https://www.buymeacoffee.com/lscambo13">
-  <img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=☕&slug=lscambo13&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=d28456" />
-</a>
+[![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>
 

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

@@ -1,2 +1,2 @@
 /* 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
+ @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

@@ -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,9 +119,10 @@
        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 Icons Round", 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 */
@@ -142,6 +144,18 @@
        block: makes the title always visible */
     --itemTitleVisibility: none;
 
+    /* none: makes the music artist clear logo always hidden [default]; 
+       block: shows the music artist clear logo if it is available */
+    --artistClearLogoVisibility: block;
+
+    /* block: shows the text-based music artist title [default];
+       none: makes the music artist title always hidden */
+    --artistTitleVisibility: none;
+
+    /* none: makes the music artist page background fully visible [default]; 
+       unset: makes the background dim for better clear logo visibility on desktops */
+    --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;
@@ -157,6 +171,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,56 +191,78 @@ 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 {
     --secondaryItemPageNegativeSpace: 45vh;
 }
 
-/* Material Icons Round */
-/* https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200 */
+/* 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 Icons Round";
+    font-family: "Material Symbols Rounded Minimal";
     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)
+    src: url(https://fonts.gstatic.com/l/font?kit=sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjzarESMdAUY9qjb3u1M7e05tMSFFiwiIx7ihGnzWmz-lkbsBJUso54WUKiEWtV5-yu0mchXaMnO1vqpcxiqEd46a1XUtwWncyNNmxYr8hocRsPBG56BqeEkny0qMU_aSz_M2MYR8p9qc8uUfT0rnccAg__qWWJGuzJMRCBsajdQcef&skey=70ddea8fe54d532e&v=v341)
+        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/v341/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;
-    display: inline-block;
     line-height: 1;
-    text-transform: none;
     letter-spacing: normal;
-    word-wrap: normal;
+    text-transform: none;
+    display: inline-block;
     white-space: nowrap;
+    word-wrap: normal;
     direction: ltr;
-    line-height: 1;
     vertical-align: middle;
-    -webkit-font-smoothing: antialiased;
-    text-rendering: optimizeLegibility;
+    text-rendering: geometricPrecision;
     -moz-osx-font-smoothing: grayscale;
-    font-feature-settings: "liga";
-    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48;
+    -webkit-font-feature-settings: "liga";
+    -webkit-font-smoothing: antialiased;
+    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 +306,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 +336,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 +357,10 @@ body {
     border: var(--defaultLighterBorder);
 }
 
+.layout-mobile .indicator {
+    font-size: 70%;
+}
+
 .cardScalable {
     border-radius: var(--largeRadius);
     border: var(--darkerBorderColor) solid var(--borderWidthDouble) !important;
@@ -405,31 +463,29 @@ body {
 
 .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 {
@@ -462,24 +518,27 @@ body {
     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);
 }
 
+/* this keeps the three-dot menu button always visible on desktop because 
+Jellyfin disabled right-click functionality on newer versions */
+.cardOverlayButton-br .cardOverlayButton-hover[data-action="menu"],
+.layout-desktop .listItemButton[data-action="menu"] {
+    display: block;
+}
+
 .layout-mobile .cardOverlayButton {
     padding: 1em;
     font-size: 60%;
@@ -487,8 +546,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);
 }
 
@@ -681,7 +740,7 @@ body {
     }
 }
 
-/* 12 posters, 9 thumbs, 4K*/
+/* 12 posters, 9 thumbs, 2160p*/
 @media (max-width: 220em) {
     .portraitCard,
     .squareCard {
@@ -697,12 +756,9 @@ body {
         --cardCount: 9;
     }
 
-    .backdropCard {
-        --cardCount: 9;
-    }
-
+    .backdropCard,
     .overflowBackdropCard {
-        --cardCount: 8;
+        --cardCount: 7;
     }
 }
 
@@ -722,16 +778,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 +800,9 @@ body {
         --cardCount: 9;
     }
 
-    .backdropCard {
-        --cardCount: 8;
-    }
-
+    .backdropCard,
     .overflowBackdropCard {
-        --cardCount: 7;
+        --cardCount: 6;
     }
 }
 
@@ -772,12 +822,9 @@ body {
         --cardCount: 7;
     }
 
-    .backdropCard {
-        --cardCount: 7;
-    }
-
+    .backdropCard,
     .overflowBackdropCard {
-        --cardCount: 6;
+        --cardCount: 5;
     }
 }
 
@@ -793,28 +840,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 +872,9 @@ body {
         --cardCount: 6;
     }
 
-    .backdropCard {
-        --cardCount: 6;
-    }
-
+    .backdropCard,
     .overflowBackdropCard {
-        --cardCount: 5;
+        --cardCount: 4;
     }
 }
 
@@ -920,15 +958,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 +980,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 +990,17 @@ body {
     }
 }
 
+#homeTab .overflowBackdropCard[data-positionticks],
+.nextUpItems > .card,
+#resumableItems > .card {
+    width: calc(var(--cardWidth) * var(--resumeCardScale)) !important;
+}
+
+.card .cardTextCentered {
+    /* text-align-last: left; */
+    text-shadow: 1px 1px 2px hsla(0, 0%, 0%, 0.8);
+}
+
 .detailPageWrapperContainer {
     padding-top: unset;
     margin-top: unset;
@@ -1054,16 +1104,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-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,15 +1120,22 @@ body {
 
 .emby-scroller,
 .scrollX {
-    padding-left: calc(var(--sidePadding) - 0.375em);
+    padding-left: calc(var(--sidePadding));
 }
 
 .sectionTabs .scrollX {
     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, .vertical-list)::after {
+    content: "13";
+    color: transparent;
 }
 
 .layout-desktop .sectionTitle,
@@ -1093,10 +1145,6 @@ body {
 
 .emby-scrollbuttons,
 [dir="ltr"] .emby-scrollbuttons {
-    padding-top: 1.25em;
-}
-
-.sectionTitleContainer + .emby-scrollbuttons {
     padding-top: 0;
 }
 
@@ -1153,6 +1201,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;
@@ -1238,6 +1291,7 @@ body {
 #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,
@@ -1245,8 +1299,8 @@ body {
     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 {
@@ -1285,6 +1339,10 @@ body {
     top: calc(100vh - 6em - var(--secondaryItemPageNegativeSpace));
 }
 
+.layout-desktop #itemDetailPage:has(.detailImageContainer .person) .detailLogo {
+    top: calc(100vh - 1px - var(--secondaryItemPageNegativeSpace));
+}
+
 .layout-mobile #itemDetailPage:has(.subtitle) .detailLogo {
     top: calc(100vh - 11em - var(--secondaryItemPageNegativeSpace));
 }
@@ -1366,25 +1424,33 @@ body {
 
 /* 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;
 }
 
@@ -1422,7 +1488,11 @@ body {
 
 #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,
@@ -1435,15 +1505,16 @@ body {
     font-size: 3.5em;
 }
 
-@media (max-width: 50em) {
-    .homeLibraryButton {
-        width: 45.6% !important;
-    }
+.homeLibraryButton {
+    width: min(45%, 12rem);
+    min-width: 15%;
+    margin: 0 !important;
 }
 
-.homeLibraryButton {
-    padding-inline-start: 0.25em;
-    min-width: 15%;
+@media (max-width: 50em) {
+    .homeLibraryButton {
+        width: 47.6% !important;
+    }
 }
 
 @media (orientation: portrait) and (max-width: 40em) {
@@ -1718,9 +1789,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 {
@@ -1738,8 +1809,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 {
@@ -1788,6 +1878,10 @@ progress + span {
     padding-bottom: 5vh;
 }
 
+.mainDrawer-scrollContainer > div:first-child {
+    margin-bottom: 1em;
+}
+
 .btnHeaderSave.button-flat {
     color: var(--uiAccentColor) !important;
     gap: 0.3em;
@@ -1926,8 +2020,11 @@ progress + span {
 }
 
 .overview-expand.emby-button:after {
-    content: "\e313";
-    font-family: "Material Icons";
+    content: "keyboard_arrow_down";
+    font-family:
+        var(--iconPack),
+        Material Icons;
+    font-feature-settings: "liga";
     background: var(--selectorBackgroundColor);
     border-radius: 50%;
     width: 1.5em;
@@ -1989,7 +2086,7 @@ progress + span {
 }
 
 .layout-mobile .innerCardFooter {
-    padding: 5em 1.5em 1.5em 1.5em;
+    padding: 5em 1em 1.25em 1em;
 }
 
 .layout-mobile .chapterCardImageContainer + .innerCardFooter {
@@ -2000,6 +2097,10 @@ progress + span {
     width: unset;
 }
 
+.noItemsMessage {
+    width: 90%;
+}
+
 .dialog {
     backdrop-filter: var(--blurDefault);
     background-color: var(--drawerColor);
@@ -2192,8 +2293,8 @@ progress + span {
 }
 
 .layout-mobile .cardIndicators {
-    top: 0.2em;
-    right: 0.2em;
+    top: 0.45em;
+    right: 0.5em;
 }
 
 .indicator {
@@ -2233,16 +2334,16 @@ progress + span {
 }
 
 div[data-type="Book"] .play_arrow:before {
-    content: "\f1c6";
+    content: "book";
     font-size: 85%;
 }
 
 div[data-type="Photo"] .play_arrow:before {
-    content: "\e5d0";
+    content: "photo";
 }
 
 div[data-type="PhotoAlbum"] .play_arrow:before {
-    content: "\e8eb";
+    content: "photo_album";
 }
 
 .emby-button.block,
@@ -2296,16 +2397,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) {
@@ -2339,9 +2452,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 {
@@ -2366,7 +2479,7 @@ div[data-type="PhotoAlbum"] .play_arrow:before {
 }
 
 .mainDetailButtons:has(.detailButton[data-type="Book"]) .btnPlay .material-icons.play_arrow:before {
-    content: "\f1c6";
+    content: "book";
     padding-inline-end: 1ch;
 }
 
@@ -2581,7 +2694,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 {
@@ -2605,10 +2718,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);
 }
@@ -2653,13 +2770,13 @@ 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;
-}
+/* .layout-mobile .detailSection {
+    grid-template-columns: 1fr !important;
+} */
 
 .detailPageContent {
     gap: 1em;
@@ -2696,6 +2813,7 @@ div[data-role="controlgroup"] a.ui-btn-active {
 .trackSelections .selectContainer {
     max-width: unset !important;
     align-items: baseline;
+    /* margin: 0.25em !important; */
 }
 
 .selectArrowContainer {
@@ -2829,6 +2947,10 @@ div[data-role="controlgroup"] a.ui-btn-active {
     grid-column: 1 / -1;
 }
 
+.collectionItems {
+    order: 2;
+}
+
 .programGuideSection:not(.hide) {
     order: -1;
     margin-top: 2em;
@@ -2867,6 +2989,10 @@ div[data-role="controlgroup"] a.ui-btn-active {
     height: 70%;
 }
 
+.layout-mobile .alphaPicker-vertical {
+    right: 0 !important;
+}
+
 .alphaPicker {
     justify-content: center;
 }
@@ -2884,20 +3010,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;
@@ -2953,6 +3065,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;
 }
@@ -2967,7 +3084,7 @@ div[data-role="controlgroup"] a.ui-btn-active {
 
 .sectionTitleContainer-cards {
     padding-top: 0;
-    margin: 0.75em 0 -0.75em 0;
+    padding-bottom: 0.2em;
 }
 
 .sectionTitleTextButton > * {
@@ -2982,11 +3099,6 @@ div[data-role="controlgroup"] a.ui-btn-active {
     max-width: 88vw;
 }
 
-/* this is needed for alignment of non-clickable section headings on phones */
-.layout-mobile div > .sectionTitle-cards {
-    margin: 0.75em 0 -0.75em 0 !important;
-}
-
 .dashboardSection .sectionTitleTextButton > .material-icons,
 .sectionTitleTextButton > .material-icons,
 .dashboardSection .sectionTitleTextButton > .material-icons.material-icons {
@@ -2998,7 +3110,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")
@@ -3042,13 +3154,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;
 }
 
@@ -3449,8 +3562,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;
@@ -3814,16 +3927,19 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
 }
 
 .noHomeButtonHeader .emby-tab-button[data-index="1"]:before {
-    content: "\e87d";
+    content: "favorite";
 }
 
 .noHomeButtonHeader .emby-tab-button[data-index="0"]:before {
-    content: "\e88a";
+    content: "home";
 }
 
 .noHomeButtonHeader .emby-tab-button:before {
-    font-family: "Material Icons Round";
-    padding-inline-end: 0.5ch;
+    font-family:
+        var(--iconPack),
+        Material Icons;
+    font-feature-settings: "liga";
+    /* padding-inline-end: 0.5ch; */
     font-size: 1.2em;
     font-variation-settings: "FILL" 0;
 }
@@ -3925,6 +4041,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) {
@@ -4008,7 +4125,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/ElegantFin-theme-v25.12.31.css

@@ -2983,8 +2983,8 @@ div[data-role="controlgroup"] a.ui-btn-active {
 }
 
 /* this is needed for alignment of non-clickable section headings on phones */
-.layout-mobile div > .sectionTitle-cards {
-    margin: 0.75em 0 -0.75em 0 !important;
+.layout-mobile :not(.sectionTitleContainer-cards) > .sectionTitle-cards {
+    margin: 0.75em 0 -0.75em 0;
 }
 
 .dashboardSection .sectionTitleTextButton > .material-icons,

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

@@ -11,6 +11,12 @@
     font-family: "Inter";
     font-size: 1em;
     font-weight: 500;
+    order: 1;
+}
+
+.detail-button,
+.favorite-button {
+    order: 2;
 }
 
 .backdrop,
@@ -40,12 +46,17 @@
     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);
+    overflow: visible;
+}
+
+.slide {
+    border: var(--defaultBorder);
+    border-radius: var(--largerRadius);
+    overflow: hidden;
+    transition: border 0s;
 }
 
 .logo-container {
@@ -63,7 +74,8 @@
     background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), 40%, transparent);
 }
 
-.pause-button {
+.pause-button,
+.volume-toggle {
     top: 1em !important;
 }
 
@@ -86,6 +98,49 @@
     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;
@@ -116,6 +171,10 @@
     .right-arrow {
         display: none !important;
     }
+
+    .play-button {
+        order: 2;
+    }
 }
 
 @media (min-width: 75em) {

custom-media-covers.md

@@ -148,7 +148,7 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
 
 ### 👇 How to enable this add-on?
 
--   Paste the following at the end in Custom CSS code box:
+-   Paste the following right after the main ElegantFin import in the Custom CSS code box:
 
 ```
 @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");