dev: updated documentation

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

Theme/ElegantFin-theme-nightly.css

@@ -209,7 +209,8 @@ html {
 }
 
 .material-icons.info_outline:before {
-    font-family: Material Icons;
+    content: "\e88e";
+    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
 }
 
 .dashboardFooter {
@@ -505,11 +506,82 @@ html {
     font-size: x-small;
 }
 
-.listItem-largeImage[data-type="Episode"] .listViewUserDataButtons {
+/* episode grid start */
+
+.layout-desktop .detailSection > #listChildrenCollapsible .vertical-list,
+.layout-desktop .detailPageContent > #childrenCollapsible .vertical-list {
+    display: grid;
+    grid-template-columns: repeat(4, 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) {
+    .layout-desktop .listItemImage-large {
+        width: 100%;
+    }
+    .layout-desktop .detailSection > #listChildrenCollapsible .vertical-list,
+    .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;
+    margin-bottom: 0 !important;
+}
+
+.layout-desktop .listItem-largeImage > .listItem-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr 2em;
+    order: 1;
+    height: 100%;
+    align-items: start;
+}
+
+.layout-desktop .listItem-largeImage > .listItem-bottomoverview {
+    order: 2;
+}
+
+.layout-desktop .listItem-largeImage .listItemImage-large {
+    order: 1;
+    grid-column: 1 / -1;
+    height: max-content;
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    /* margin: 0 !important; */
+    box-sizing: border-box;
+}
+
+.layout-desktop .listItem-largeImage .listItemBody {
+    order: 2;
+    grid-column: 1 / 3;
+    padding: 1em 0.125em;
+}
+
+.layout-desktop .listItem-largeImage .listViewUserDataButtons {
     flex-direction: column;
     font-size: small;
+    order: 2;
+    grid-column: 3;
+    align-self: center;
 }
 
+/* episode grid end */
+
 .portraitCard {
     min-width: 5em;
 }
@@ -1909,17 +1981,20 @@ progress + span {
     justify-content: center;
 }
 
+.innerCardFooter,
+.chapterCardImageContainer {
+    width: 100%;
+    box-sizing: border-box;
+}
+
 .innerCardFooter,
 .chapterThumbTextContainer {
     background: var(--cardFooterGradient);
     text-shadow: 0.1em 0.1em 0px black;
-    width: 100%;
-    height: 100%;
-    width: -webkit-fill-available;
-    height: -webkit-fill-available;
     padding: 0em 2em 2em 2em;
     align-content: end;
     display: grid;
+    height: 100%;
 }
 
 .chapterCardImageContainer {
@@ -2459,9 +2534,19 @@ div[data-role="controlgroup"] a.ui-btn-active {
     background-color: rgba(255, 255, 255, 0.07);
 }
 
-[dir="ltr"] .listItem:not(.actionSheetMenuItem)[data-type="Episode"] .listItemBodyText:not(.secondary) {
+/* [dir="ltr"] .listItem:not(.actionSheetMenuItem)[data-type="Episode"] .listItemBodyText:not(.secondary) {
     font-size: 1.17em;
     font-weight: 600;
+} */
+
+.listItem-largeImage .listItemBodyText:not(.secondary) {
+    font-size: 1.17em;
+    font-weight: 600;
+    color: var(--textColor);
+}
+
+.listItemBodyText.secondary {
+    color: var(--dimTextColor);
 }
 
 .listItemBody > .listItemBodyText:not(.secondary) {
@@ -3462,13 +3547,23 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
 }
 
 /* this :not() is needed to prevent affecting the mixed media libraries on the home page */
-#homeTab .overflowBackdropCard[data-isfolder="true"]:not(.groupedCard) .cardPadder-overflowBackdrop {
+/* #homeTab .overflowBackdropCard[data-isfolder="true"]:not(.groupedCard) .cardPadder-overflowBackdrop {
     padding-bottom: 50%;
 }
 
 #homeTab .overflowBackdropCard[data-isfolder="true"]:not(.groupedCard) .cardText-first,
 #homeTab .overflowBackdropCard[data-isfolder="true"]:not(.groupedCard) .cardText.cardTextCentered {
     display: var(--libraryLabelVisibility);
+} */
+
+.overflowBackdropCard[data-type="CollectionFolder"] .cardPadder-overflowBackdrop,
+.overflowBackdropCard[data-type="UserView"] .cardPadder-overflowBackdrop {
+    padding-bottom: 50%;
+}
+
+.overflowBackdropCard[data-type="CollectionFolder"] .cardText-first,
+.overflowBackdropCard[data-type="UserView"] .cardText-first {
+    display: var(--libraryLabelVisibility);
 }
 
 .nowPlayingButtonsContainer {

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 */
+[data-collectiontype="movies"] .cardContent {
-
+    background-color: var(--colorOverlayMoviesCover) !important;
-/* div[data-collectiontype="movies"] .cardImageContainer.defaultCardBackground {
-    background: var(--colorOverlayMoviesCover) !important;
     background-image: var(--urlMoviesCover) !important;
 }
 
-div[data-collectiontype="tvshows"] .cardImageContainer.defaultCardBackground {
+[data-collectiontype="tvshows"] .cardContent {
-    background: var(--colorOverlayTvshowsCover) !important;
+    background-color: var(--colorOverlayTvshowsCover) !important;
     background-image: var(--urlTvshowsCover) !important;
 }
 
-div[data-collectiontype="livetv"] .cardImageContainer.defaultCardBackground {
+[data-collectiontype="livetv"] .cardContent {
-    background: var(--colorOverlayLivetvCover) !important;
+    background-color: var(--colorOverlayLivetvCover) !important;
     background-image: var(--urlLivetvCover) !important;
 }
 
-div[data-collectiontype="music"] .cardImageContainer.defaultCardBackground {
+[data-collectiontype="music"] .cardContent {
-    background: var(--colorOverlayMusicCover) !important;
+    background-color: var(--colorOverlayMusicCover) !important;
     background-image: var(--urlMusicCover) !important;
 }
 
-div[data-collectiontype="homevideos"] .cardImageContainer.defaultCardBackground {
+[data-collectiontype="homevideos"] .cardContent {
-    background: var(--colorOverlayHomevideosCover) !important;
+    background-color: var(--colorOverlayHomevideosCover) !important;
     background-image: var(--urlHomevideosCover) !important;
 }
 
-div[data-collectiontype="books"] .cardImageContainer.defaultCardBackground {
+[data-collectiontype="books"] .cardContent {
-    background: var(--colorOverlayBooksCover) !important;
+    background-color: var(--colorOverlayBooksCover) !important;
     background-image: var(--urlBooksCover) !important;
 }
 
-div[data-collectiontype="boxsets"] .cardImageContainer.defaultCardBackground {
+[data-collectiontype="boxsets"] .cardContent {
-    background: var(--colorOverlayBoxsetsCover) !important;
+    background-color: var(--colorOverlayBoxsetsCover) !important;
     background-image: var(--urlBoxsetsCover) !important;
 }
 
-div[data-collectiontype="folders"] .cardImageContainer.defaultCardBackground {
+[data-collectiontype="folders"] .cardContent {
-    background: var(--colorOverlayFoldersCover) !important;
+    background-color: var(--colorOverlayFoldersCover) !important;
     background-image: var(--urlFoldersCover) !important;
 }
 
-div[data-collectiontype="playlists"] .cardImageContainer.defaultCardBackground {
+[data-collectiontype="playlists"] .cardContent {
-    background: var(--colorOverlayPlaylistsCover) !important;
+    background-color: 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;
     background-image: var(--urlPlaylistsCover) !important;
 }
 
-.card-withuserdata[data-isfolder="true"] .cardImageContainer.cardContent {
+[data-prefix="MIX"] .cardContent {
-    filter: contrast(0.85);
+    background-color: var(--colorOverlayMixedCover) !important;
-    background-size: cover !important;
+    background-image: var(--urlMixedCover) !important;
-    background-position: 50% !important;
-    background-blend-mode: multiply;
 }
 
-div[data-collectiontype="movies"] .cardImageContainer.cardContent::before {
+[data-collectiontype="movies"][data-prefix="REC"] .cardContent {
-    content: "Movies";
+    background-color: var(--colorOverlayRecordedmoviesCover) !important;
+    background-image: var(--urlRecordedmoviesCover) !important;
 }
 
-div[data-collectiontype="tvshows"] .cardImageContainer.cardContent::before {
+[data-prefix="REC"] .cardContent {
-    content: "TV Shows";
+    background-color: var(--colorOverlayRecordedtvCover) !important;
+    background-image: var(--urlRecordedtvCover) !important;
 }
 
-div[data-collectiontype="livetv"] .cardImageContainer.cardContent::before {
+[data-type="CollectionFolder"] .cardContent::before,
-    content: "Live TV";
+[data-type="UserView"] .cardContent::before {
+    content: attr(aria-label);
 }
-
-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;
-}

custom-media-covers.md

@@ -1,11 +1,12 @@
-# 🧩 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)
 
 <hr>
 
-### 🖼️ Presets with previews: Modify these styles according to your own liking 
+### 🖼️ Presets with previews: Modify these styles according to your own liking
 
 <details>
   <summary><i>This is how the covers look without this add-on.</i></summary>
@@ -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%);
 }
 ```
 
@@ -128,9 +146,9 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
 
 <hr>
 
-### 👇 How to enable this add-on? 
+### 👇 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");
@@ -138,11 +156,9 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
 
 <hr>
 
-### ⚙️ How to configure this add-on? 
+### ⚙️ 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);
+--colorOverlayLivetvCover: rgb(39, 68, 185);
-    --urlLivetvCover: url(https://artworks.thetvdb.com/banners/fanart/original/71663-33.jpg);
+--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>
 
+```