New: Faster page loading with optimized icon bundle (#288)

* Optimize icon bundle

* Move changes to nightly

README.md

@@ -338,9 +338,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

@@ -120,7 +120,7 @@
 
     /* use 'Material Icons Round' for the new icons [default]; 
        use 'Material Icons' to revert to old icons */
-    --iconPack: "Material Icons Round", Material Icons;
+    --iconPack: "Material Symbols Rounded", Material Icons;
 
     /* none: hides the watched and mark favorite buttons on hover [default];
        block: makes them visible use block */
@@ -157,6 +157,10 @@
     /* use 10% to crop the top 10% of a backdrop image on a 16:9 screen (recommended) [default]; 
        use a figure between 0% and 20% according to your liking */
     --backdropTrimFromTop: 10%;
+
+    /* use numbers greater than 1.0 to increase the size of 'Continue Watching' cards [default: 1.25];
+       use 1.0 to disable this effect */
+    --resumeCardScale: 1.25;
 }
 
 html {
@@ -173,16 +177,20 @@ body {
     --clearLogoBottomSpace: 11em;
 }
 
+select {
+    text-overflow: ellipsis;
+}
+
 .layout-desktop > body:has(> audio[src]) {
     --primaryItemPageNegativeSpace: calc(14vh + 5em);
     --secondaryItemPageNegativeSpace: calc(60vh + 5em);
 }
 
 .layout-mobile {
-    --itemColumnGap: 0;
     --headerColorGradient: var(--headerColorGradientAlt);
     --blurLargest: blur(12px);
     --headerBlurMask: linear-gradient(180deg, white 60%, 90%, transparent);
+    --itemColumnGap: 0.5em;
 }
 
 .layout-mobile > body {
@@ -190,39 +198,38 @@ body {
 }
 
 /* Material Icons Round */
-/* https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200 */
+/* 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-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");
+  font-family: 'Material Symbols Rounded';
+  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');
 }
 
 .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;
+  font-family: var(--iconPack) !important;
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -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 +273,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 +303,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 +324,10 @@ body {
     border: var(--defaultLighterBorder);
 }
 
+.layout-mobile .indicator {
+    font-size: 70%;
+}
+
 .cardScalable {
     border-radius: var(--largeRadius);
     border: var(--darkerBorderColor) solid var(--borderWidthDouble) !important;
@@ -487,8 +512,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 +706,7 @@ body {
     }
 }
 
-/* 12 posters, 9 thumbs, 4K*/
+/* 12 posters, 9 thumbs, 2160p*/
 @media (max-width: 220em) {
     .portraitCard,
     .squareCard {
@@ -697,12 +722,9 @@ body {
         --cardCount: 9;
     }
 
-    .backdropCard {
-        --cardCount: 9;
-    }
-
+    .backdropCard,
     .overflowBackdropCard {
-        --cardCount: 8;
+        --cardCount: 7;
     }
 }
 
@@ -722,16 +744,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 +766,9 @@ body {
         --cardCount: 9;
     }
 
-    .backdropCard {
-        --cardCount: 8;
-    }
-
+    .backdropCard,
     .overflowBackdropCard {
-        --cardCount: 7;
+        --cardCount: 6;
     }
 }
 
@@ -772,12 +788,9 @@ body {
         --cardCount: 7;
     }
 
-    .backdropCard {
-        --cardCount: 7;
-    }
-
+    .backdropCard,
     .overflowBackdropCard {
-        --cardCount: 6;
+        --cardCount: 5;
     }
 }
 
@@ -793,28 +806,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 +838,9 @@ body {
         --cardCount: 6;
     }
 
-    .backdropCard {
-        --cardCount: 6;
-    }
-
+    .backdropCard,
     .overflowBackdropCard {
-        --cardCount: 5;
+        --cardCount: 4;
     }
 }
 
@@ -920,15 +924,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 +946,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 +956,16 @@ body {
     }
 }
 
+#homeTab .overflowBackdropCard[data-positionticks],
+.nextUpItems > .card,
+#resumableItems > .card {
+    width: calc(var(--cardWidth) * var(--resumeCardScale)) !important;
+}
+
+.card .cardTextCentered {
+    text-shadow: 1px 1px 2px hsla(0, 0%, 0%, 0.8);
+}
+
 .detailPageWrapperContainer {
     padding-top: unset;
     margin-top: unset;
@@ -1054,16 +1069,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,7 +1085,7 @@ body {
 
 .emby-scroller,
 .scrollX {
-    padding-left: calc(var(--sidePadding) - 0.375em);
+    padding-left: calc(var(--sidePadding));
 }
 
 .sectionTabs .scrollX {
@@ -1084,6 +1094,13 @@ body {
 
 .itemsContainer:not(.editorsChoiceItemsContainer) {
     column-gap: var(--itemColumnGap);
+    row-gap: 1em;
+}
+
+/* this is a workaround to add a gap between the last child and the edge of the screen on phones */
+.layout-mobile .itemsContainer:not(.editorsChoiceItemsContainer, .vertical-wrap)::after {
+    content: "13";
+    color: transparent;
 }
 
 .layout-desktop .sectionTitle,
@@ -1093,10 +1110,6 @@ body {
 
 .emby-scrollbuttons,
 [dir="ltr"] .emby-scrollbuttons {
-    padding-top: 1.25em;
-}
-
-.sectionTitleContainer + .emby-scrollbuttons {
     padding-top: 0;
 }
 
@@ -1153,6 +1166,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;
@@ -1435,15 +1453,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) {
@@ -1788,6 +1807,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 +1949,9 @@ progress + span {
 }
 
 .overview-expand.emby-button:after {
-    content: "\e313";
-    font-family: "Material Icons";
+    content: "keyboard_arrow_down";
+    font-family: var(--iconPack);
+    font-feature-settings: "liga";
     background: var(--selectorBackgroundColor);
     border-radius: 50%;
     width: 1.5em;
@@ -1989,7 +2013,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 +2024,10 @@ progress + span {
     width: unset;
 }
 
+.noItemsMessage {
+    width: 90%;
+}
+
 .dialog {
     backdrop-filter: var(--blurDefault);
     background-color: var(--drawerColor);
@@ -2192,8 +2220,8 @@ progress + span {
 }
 
 .layout-mobile .cardIndicators {
-    top: 0.2em;
-    right: 0.2em;
+    top: 0.45em;
+    right: 0.5em;
 }
 
 .indicator {
@@ -2233,16 +2261,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 +2324,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 +2379,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 +2406,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 +2621,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 +2645,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,12 +2697,12 @@ div[data-role="controlgroup"] a.ui-btn-active {
     row-gap: 1em;
     column-gap: 3em;
     max-width: unset !important;
-    grid-template-columns: 25% 1fr 1fr 1fr;
+    grid-template-columns: 1.3fr 0.7fr 1fr 1fr;
     margin-bottom: 1.5em;
 }
 
 .layout-mobile .detailSection {
-    grid-template-columns: 1fr;
+    grid-template-columns: 1fr !important;
 }
 
 .detailPageContent {
@@ -2829,6 +2873,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 +2915,10 @@ div[data-role="controlgroup"] a.ui-btn-active {
     height: 70%;
 }
 
+.layout-mobile .alphaPicker-vertical {
+    right: 0 !important;
+}
+
 .alphaPicker {
     justify-content: center;
 }
@@ -2884,20 +2936,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 +2991,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 +3010,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 +3025,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 +3036,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 +3080,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 +3488,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 +3853,17 @@ 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);
+    font-feature-settings: "liga";
+    /* padding-inline-end: 0.5ch; */
     font-size: 1.2em;
     font-variation-settings: "FILL" 0;
 }
@@ -3925,6 +3965,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 +4049,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) {