Fix: Improved compatibility with older browsers that don't support 'aspect-ratio'

Fix: Added line wrap to prevent long library names from overflowing
dev: Simplified the code

Theme/ElegantFin-theme-nightly.css

@@ -95,6 +95,7 @@
     --primaryItemPageNegativeSpace: 14vh;
     --secondaryItemPageNegativeSpace: 60vh;
     --clearLogoBottomSpace: 11em;
+    --minEpisodeCardWidth: 26em;
 
     --blurSmallest: blur(2px);
     --blurDefault: blur(5px);
@@ -511,18 +512,11 @@ html {
 .layout-desktop .detailSection > #listChildrenCollapsible .vertical-list,
 .layout-desktop .detailPageContent > #childrenCollapsible .vertical-list {
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(auto-fill, minmax(min(var(--minEpisodeCardWidth), 100%), 1fr));
     gap: var(--itemColumnGap);
 }
 
-@media (max-width: 100em) {
-    .layout-desktop .detailSection > #listChildrenCollapsible .vertical-list,
-    .layout-desktop .detailPageContent > #childrenCollapsible .vertical-list {
-        grid-template-columns: repeat(3, 1fr);
-    }
-}
-
-@media (max-width: 64em) {
+/* @media (max-width: 64em) {
     .layout-desktop .listItemImage-large {
         width: 100%;
     }
@@ -530,14 +524,7 @@ html {
     .layout-desktop .detailPageContent > #childrenCollapsible .vertical-list {
         grid-template-columns: repeat(2, 1fr);
     }
-}
-
-@media (max-width: 40em) {
-    .layout-desktop .detailSection > #listChildrenCollapsible .vertical-list,
-    .layout-desktop .detailPageContent > #childrenCollapsible .vertical-list {
-        grid-template-columns: repeat(1, 1fr);
-    }
-}
+} */
 
 .layout-desktop .listItem-largeImage {
     display: grid;
@@ -560,6 +547,7 @@ html {
     order: 1;
     grid-column: 1 / -1;
     height: max-content;
+    min-height: 15em;
     width: 100%;
     aspect-ratio: 16 / 9;
     /* margin: 0 !important; */

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

@@ -11,6 +11,9 @@
     --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);
@@ -20,169 +23,99 @@
     --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);
 }
 
-.card-withuserdata[data-isfolder="true"] .cardImageContainer.defaultCardBackground {
+[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;
 }
 
-.card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"], [data-type="Series"], [data-type="Folder"], [data-type="Season"], [data-type="Playlist"]) .cardImageContainer.cardContent::before {
+[data-type="CollectionFolder"] .cardContent::before,
+[data-type="UserView"] .cardContent::before {
     position: absolute;
     font-size: clamp(1em, max(2.5vh, 2vw), 2.5em);
-    margin-bottom: .175em;
     font-weight: 800;
     color: white;
-    font-family: 'Noto Sans';
+    font-family: "Noto Sans";
     text-align: center;
+    width: 94%;
+    white-space: normal;
 }
 
-.card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"], [data-type="Series"], [data-type="Folder"]) .cardImageIcon.material-icons:not(.quiz)::before {
+[data-type="CollectionFolder"] .cardImageIcon:not(.quiz)::before,
+[data-type="UserView"] .cardImageIcon:not(.quiz)::before {
     display: none;
 }
 
-/* These show up when no image is set */
-
-/* div[data-collectiontype="movies"] .cardImageContainer.defaultCardBackground {
-    background: var(--colorOverlayMoviesCover) !important;
+[data-collectiontype="movies"] .cardContent {
+    background-color: var(--colorOverlayMoviesCover) !important;
     background-image: var(--urlMoviesCover) !important;
 }
 
-div[data-collectiontype="tvshows"] .cardImageContainer.defaultCardBackground {
-    background: var(--colorOverlayTvshowsCover) !important;
+[data-collectiontype="tvshows"] .cardContent {
+    background-color: var(--colorOverlayTvshowsCover) !important;
     background-image: var(--urlTvshowsCover) !important;
 }
 
-div[data-collectiontype="livetv"] .cardImageContainer.defaultCardBackground {
-    background: var(--colorOverlayLivetvCover) !important;
+[data-collectiontype="livetv"] .cardContent {
+    background-color: var(--colorOverlayLivetvCover) !important;
     background-image: var(--urlLivetvCover) !important;
 }
 
-div[data-collectiontype="music"] .cardImageContainer.defaultCardBackground {
-    background: var(--colorOverlayMusicCover) !important;
+[data-collectiontype="music"] .cardContent {
+    background-color: var(--colorOverlayMusicCover) !important;
     background-image: var(--urlMusicCover) !important;
 }
 
-div[data-collectiontype="homevideos"] .cardImageContainer.defaultCardBackground {
-    background: var(--colorOverlayHomevideosCover) !important;
+[data-collectiontype="homevideos"] .cardContent {
+    background-color: var(--colorOverlayHomevideosCover) !important;
     background-image: var(--urlHomevideosCover) !important;
 }
 
-div[data-collectiontype="books"] .cardImageContainer.defaultCardBackground {
-    background: var(--colorOverlayBooksCover) !important;
+[data-collectiontype="books"] .cardContent {
+    background-color: var(--colorOverlayBooksCover) !important;
     background-image: var(--urlBooksCover) !important;
 }
 
-div[data-collectiontype="boxsets"] .cardImageContainer.defaultCardBackground {
-    background: var(--colorOverlayBoxsetsCover) !important;
+[data-collectiontype="boxsets"] .cardContent {
+    background-color: var(--colorOverlayBoxsetsCover) !important;
     background-image: var(--urlBoxsetsCover) !important;
 }
 
-div[data-collectiontype="folders"] .cardImageContainer.defaultCardBackground {
-    background: var(--colorOverlayFoldersCover) !important;
+[data-collectiontype="folders"] .cardContent {
+    background-color: var(--colorOverlayFoldersCover) !important;
     background-image: var(--urlFoldersCover) !important;
 }
 
-div[data-collectiontype="playlists"] .cardImageContainer.defaultCardBackground {
-    background: var(--colorOverlayPlaylistsCover) !important;
-    background-image: var(--urlPlaylistsCover) !important;
-} */
-
-/* These are the front facing images */
-
-div[data-collectiontype="movies"] .cardImageContainer.cardContent {
-    background: var(--colorOverlayMoviesCover) !important;
-    background-image: var(--urlMoviesCover) !important;
-}
-
-div[data-collectiontype="tvshows"] .cardImageContainer.cardContent {
-    background: var(--colorOverlayTvshowsCover) !important;
-    background-image: var(--urlTvshowsCover) !important;
-}
-
-div[data-collectiontype="livetv"] .cardImageContainer.cardContent {
-    background: var(--colorOverlayLivetvCover) !important;
-    background-image: var(--urlLivetvCover) !important;
-}
-
-div[data-collectiontype="music"] .cardImageContainer.cardContent {
-    background: var(--colorOverlayMusicCover) !important;
-    background-image: var(--urlMusicCover) !important;
-}
-
-div[data-collectiontype="homevideos"] .cardImageContainer.cardContent {
-    background: var(--colorOverlayHomevideosCover) !important;
-    background-image: var(--urlHomevideosCover) !important;
-}
-
-div[data-collectiontype="books"] .cardImageContainer.cardContent {
-    background: var(--colorOverlayBooksCover) !important;
-    background-image: var(--urlBooksCover) !important;
-}
-
-div[data-collectiontype="boxsets"] .cardImageContainer.cardContent {
-    background: var(--colorOverlayBoxsetsCover) !important;
-    background-image: var(--urlBoxsetsCover) !important;
-}
-
-div[data-collectiontype="folders"] .cardImageContainer.cardContent {
-    background: var(--colorOverlayFoldersCover) !important;
-    background-image: var(--urlFoldersCover) !important;
-}
-
-div[data-collectiontype="playlists"] .cardImageContainer.cardContent {
-    background: var(--colorOverlayPlaylistsCover) !important;
+[data-collectiontype="playlists"] .cardContent {
+    background-color: var(--colorOverlayPlaylistsCover) !important;
     background-image: var(--urlPlaylistsCover) !important;
 }
 
-.card-withuserdata[data-isfolder="true"] .cardImageContainer.cardContent {
-    filter: contrast(0.85);
-    background-size: cover !important;
-    background-position: 50% !important;
-    background-blend-mode: multiply;
+[data-prefix="MIX"] .cardContent {
+    background-color: var(--colorOverlayMixedCover) !important;
+    background-image: var(--urlMixedCover) !important;
 }
 
-div[data-collectiontype="movies"] .cardImageContainer.cardContent::before {
-    content: "Movies";
+[data-collectiontype="movies"][data-prefix="REC"] .cardContent {
+    background-color: var(--colorOverlayRecordedmoviesCover) !important;
+    background-image: var(--urlRecordedmoviesCover) !important;
 }
 
-div[data-collectiontype="tvshows"] .cardImageContainer.cardContent::before {
-    content: "TV Shows";
+[data-prefix="REC"] .cardContent {
+    background-color: var(--colorOverlayRecordedtvCover) !important;
+    background-image: var(--urlRecordedtvCover) !important;
 }
 
-div[data-collectiontype="livetv"] .cardImageContainer.cardContent::before {
-    content: "Live TV";
-}
-
-div[data-collectiontype="music"] .cardImageContainer.cardContent::before {
-    content: "Music";
-}
-
-div[data-collectiontype="homevideos"] .cardImageContainer.cardContent::before {
-    content: "Home Videos";
-}
-
-div[data-collectiontype="books"] .cardImageContainer.cardContent::before {
-    content: "Books";
-}
-
-div[data-collectiontype="boxsets"] .cardImageContainer.cardContent::before {
-    content: "Collections";
-}
-
-div[data-collectiontype="folders"] .cardImageContainer.cardContent::before {
-    content: "Folders";
-}
-
-div[data-collectiontype="playlists"] .cardImageContainer.cardContent::before {
-    content: "Playlists";
-}
-
-.card-withuserdata[data-isfolder="true"] .cardImageContainer.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);
 }

custom-media-covers.md

@@ -1,4 +1,5 @@
-# 🧩 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.
 
 #### **Author:** [lscambo13](https://github.com/lscambo13)
@@ -50,6 +51,9 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
     --colorOverlayHomevideosCover: transparent;
     --colorOverlayBooksCover: transparent;
     --colorOverlayFoldersCover: transparent;
+    --colorOverlayMixedCover: transparent;
+    --colorOverlayRecordedmoviesCover: transparent;
+    --colorOverlayRecordedtvCover: transparent;
     --urlMoviesCover: transparent;
     --urlTvshowsCover: transparent;
     --urlLivetvCover: transparent;
@@ -59,6 +63,9 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
     --urlHomevideosCover: transparent;
     --urlBooksCover: transparent;
     --urlFoldersCover: transparent;
+    --urlMixedCover: transparent;
+    --urlRecordedmoviesCover: transparent;
+    --urlRecordedtvCover: transparent;
 }
 ```
 
@@ -79,6 +86,9 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
     --colorOverlayHomevideosCover: transparent;
     --colorOverlayBooksCover: transparent;
     --colorOverlayFoldersCover: transparent;
+    --colorOverlayMixedCover: transparent;
+    --colorOverlayRecordedmoviesCover: transparent;
+    --colorOverlayRecordedtvCover: transparent;
     --urlMoviesCover: var(--cardBackgroundGradient);
     --urlTvshowsCover: var(--cardBackgroundGradient);
     --urlLivetvCover: var(--cardBackgroundGradient);
@@ -88,6 +98,9 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
     --urlHomevideosCover: var(--cardBackgroundGradient);
     --urlBooksCover: var(--cardBackgroundGradient);
     --urlFoldersCover: var(--cardBackgroundGradient);
+    --urlMixedCover: var(--cardBackgroundGradient);
+    --urlRecordedmoviesCover: var(--cardBackgroundGradient);
+    --urlRecordedtvCover: var(--cardBackgroundGradient);
 }
 ```
 
@@ -98,7 +111,6 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
 
 ![image](https://github.com/user-attachments/assets/6975a5ef-4824-4807-9afa-434fc3ebaf6f)
 
-
 ```
 @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");
 
@@ -112,6 +124,9 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
     --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: linear-gradient(0deg, #313131, #585858 25%);
     --urlTvshowsCover: linear-gradient(0deg, #313131, #585858 25%);
     --urlLivetvCover: linear-gradient(0deg, #313131, #585858 25%);
@@ -121,6 +136,9 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
     --urlHomevideosCover: linear-gradient(0deg, #313131, #585858 25%);
     --urlBooksCover: linear-gradient(0deg, #313131, #585858 25%);
     --urlFoldersCover: linear-gradient(0deg, #313131, #585858 25%);
+    --urlMixedCover: linear-gradient(0deg, #313131, #585858 25%);
+    --urlRecordedmoviesCover: linear-gradient(0deg, #313131, #585858 25%);
+    --urlRecordedtvCover: linear-gradient(0deg, #313131, #585858 25%);
 }
 ```
 
@@ -130,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 at the end in Custom CSS code box:
 
 ```
 @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");
@@ -140,9 +158,7 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
 
 ### ⚙️ How to configure this add-on?
 
-- Remember, you do not need to configure anything if you're happy with the default set of images.
-
-
+-   Remember, you do not need to configure anything if you're happy with the default set of images.
 
 <details>
   <summary><i>Click here to reveal.</i></summary>
@@ -168,6 +184,9 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
     --colorOverlayHomevideosCover: rgb();
     --colorOverlayBooksCover: rgb();
     --colorOverlayFoldersCover: rgb();
+    --colorOverlayMixedCover: rgb();
+    --colorOverlayRecordedmoviesCover: rgb();
+    --colorOverlayRecordedtvCover: rgb();
 
     <!-- cover images; input the url pointing to an image. -->
 
@@ -179,8 +198,12 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
     --urlHomevideosCover: url();
     --urlBooksCover: url();
     --urlFoldersCover: url();
+    --urlMixedCover: url();
+    --urlRecordedmoviesCover: url();
+    --urlRecordedtvCover: url();
 
 }
+
 ```
 </details>
 
@@ -191,11 +214,12 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
 Suppose you want to modify the Live TV cover art. You'll have to modify the variables named `--colorOverlayLivetvCover` and `--urlLivetvCover`, so that your final configuration will look something like this:
 
 ```
+
 @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");
 
 :root{
-    --colorOverlayLivetvCover: rgb(39, 68, 185);
-    --urlLivetvCover: url(https://artworks.thetvdb.com/banners/fanart/original/71663-33.jpg);
+--colorOverlayLivetvCover: rgb(39, 68, 185);
+--urlLivetvCover: url(https://artworks.thetvdb.com/banners/fanart/original/71663-33.jpg);
 }
 
 ```
@@ -224,3 +248,4 @@ Suppose you want to modify the Live TV cover art. You'll have to modify the vari
 
 <hr>
 
+```