dev: updated documentation

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

Theme/ElegantFin-theme-nightly.css

@@ -1,7 +1,7 @@
 /* ElegantFin Theme for Jellyfin by lscambo13 */
 
 /* Add-ons: Uncomment to enable */
-/* @import url(./assets/add-ons/extras-media-bar-nightly.css); */
+/* @import url(./assets/add-ons/media-bar-plugin-support-nightly.css); */
 /* @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css"); */
 
 /* Inter Font Family */
@@ -16,6 +16,7 @@
     --darkerGradientPointAlpha: rgba(17, 24, 39, 0.85);
     --lighterGradientPoint: #1d2635;
     --lighterGradientPointAlpha: rgba(29, 38, 53, 0.85);
+    --gradientPointAlpha: rgba(29, 38, 53, 0.3);
     --headerColor: rgba(30, 40, 54, 0.8);
     --drawerColor: rgba(30, 40, 54, 0.9);
 
@@ -90,8 +91,10 @@
 
     --sidePadding: 3.3%;
     --itemColumnGap: 1em;
+
     --primaryItemPageNegativeSpace: 14vh;
-    --secondaryItemPageNegativeSpace: 35vh;
+    --secondaryItemPageNegativeSpace: 60vh;
+    --clearLogoBottomSpace: 11em;
 
     --blurSmallest: blur(2px);
     --blurDefault: blur(5px);
@@ -171,6 +174,7 @@ html {
     --headerColorGradient: var(--headerColorGradientAlt);
     --blurLargest: blur(12px);
     --headerBlurMask: linear-gradient(180deg, white 60%, 90%, transparent);
+    --secondaryItemPageNegativeSpace: 45vh;
 }
 
 /* Material Icons Round */
@@ -205,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 {
@@ -501,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;
 }
@@ -936,10 +1012,10 @@ html {
     background-color: transparent;
 }
 
-/* this removes the extra large left paading on 10.11.0 */
+/* this removes the extra large left padding on 10.11.0 */
 .detailPagePrimaryContainer>.detailPagePrimaryContent,
 [dir=ltr] .detailPagePrimaryContainer>.detailRibbon,
-/* this removes the extra large left paading on pre-10.11.0 */
+/* this removes the extra large left padding on pre-10.11.0 */
 [dir=ltr] .detailPagePrimaryContainer.detailRibbon {
     padding-left: var(--sidePadding);
 }
@@ -1000,6 +1076,7 @@ html {
     margin: 0 calc(-1 * var(--sidePadding));
     padding: 0 var(--sidePadding);
     padding-left: calc(var(--sidePadding) - 0.375em);
+    /* mask-image: linear-gradient(90deg, transparent, white var(--sidePadding), white calc(100vw - var(--sidePadding)), transparent); */
 }
 
 .layout-desktop .emby-scroller-container,
@@ -1069,6 +1146,7 @@ html {
     transform: translateY(-0.15em);
     font-weight: 600;
     border: var(--defaultBorder);
+    color: var(--textColor);
 }
 
 .starIcon {
@@ -1088,17 +1166,16 @@ html {
     content: "%";
 }
 
-.layout-desktop .detailRibbon {
-    height: 100%;
-    min-height: 30vh;
-    margin-top: unset;
+.detailRibbon:has(.portraitCard .folder) {
+    min-height: 32vh;
+    align-content: flex-end;
 }
 
-/* test disabled for 10.11.0 */
-/* .layout-desktop [dir=ltr] .detailPagePrimaryContainer,
-.layout-tv [dir=ltr] .detailPagePrimaryContainer {
-    padding-left: var(--sidePadding);
-} */
+.layout-desktop .detailRibbon {
+    height: 100%;
+    min-height: 25vh;
+    margin-top: unset;
+}
 
 @keyframes animMoveDown {
     from {
@@ -1136,9 +1213,63 @@ html {
     }
 }
 
+/* Theme video styling rolled back because jellyfin does not differentiate between the main video player and theme video playback nicely*/
+/* .videoPlayerContainer {
+    position: relative !important;
+    -webkit-mask: var(--themeVideoPlayerMask);
+    mask: var(--themeVideoPlayerMask);
+    height: 90vh;
+}
+
+.layout-mobile .videoPlayerContainer {
+    z-index: 1;
+    height: 35vh;
+}
+
+.videoPlayerContainer>.htmlvideoplayer {
+    width: -webkit-fill-available;
+    object-fit: cover;
+} */
+
+.itemBackdrop {
+    display: block !important;
+}
+
+.layout-desktop .itemBackdrop {
+    height: calc(100vh - 27vh - var(--primaryItemPageNegativeSpace));
+}
+
+.layout-mobile .itemBackdrop {
+    margin-top: 0;
+    position: sticky;
+    top: -30%;
+    -webkit-mask: var(--itemBackdropMask);
+    mask: var(--itemBackdropMask);
+    animation: animMoveDown 0.5s ease-out forwards;
+    height: 45vh;
+}
+
+.layout-tv .itemBackdrop {
+    height: 33vh;
+}
+
+#itemDetailPage:has(.subtitle) .itemBackdrop,
+#itemDetailPage:has(.musicParentName) .itemBackdrop,
+#itemDetailPage:has(.detailImageContainer .backdropCard) .itemBackdrop,
+#itemDetailPage:has(.detailImageContainer .person) .itemBackdrop,
+#itemDetailPage:has(.detailImageContainer .queue) .itemBackdrop,
+#itemDetailPage:has(.detailImageContainer .book) .itemBackdrop,
+#itemDetailPage:has(.detailImageContainer .live_tv) .itemBackdrop {
+    height: calc(100vh - 27vh - var(--secondaryItemPageNegativeSpace));
+}
+
+#itemDetailPage:has(.detailImageContainer .cardPadder-square:not(.person)) .itemBackdrop {
+    height: calc(100vh - 27vh - var(--secondaryItemPageNegativeSpace));
+}
+
 .detailLogo {
     display: var(--clearLogoVisibility);
-    top: calc(100vh - 11em - var(--primaryItemPageNegativeSpace));
+    top: calc(100vh - var(--clearLogoBottomSpace) - var(--primaryItemPageNegativeSpace));
     left: 0;
     width: 40%;
     transform: translateY(-100%);
@@ -1159,46 +1290,6 @@ html {
     animation: animMoveUp 1s ease-out forwards;
 }
 
-.itemBackdrop {
-    display: block !important;
-}
-
-/* Theme video styling rolled back because jellyfin does not differentiate between the main video player and theme video playback nicely*/
-/* .videoPlayerContainer {
-    position: relative !important;
-    -webkit-mask: var(--themeVideoPlayerMask);
-    mask: var(--themeVideoPlayerMask);
-    height: 90vh;
-}
-
-.layout-mobile .videoPlayerContainer {
-    z-index: 1;
-    height: 35vh;
-}
-
-.videoPlayerContainer>.htmlvideoplayer {
-    width: -webkit-fill-available;
-    object-fit: cover;
-} */
-
-.layout-desktop .itemBackdrop {
-    height: calc(100vh - 32vh - var(--primaryItemPageNegativeSpace)) !important;
-}
-
-.layout-mobile .itemBackdrop {
-    margin-top: 0;
-    position: sticky;
-    top: -30%;
-    -webkit-mask: var(--itemBackdropMask);
-    mask: var(--itemBackdropMask);
-    animation: animMoveDown 0.5s ease-out forwards;
-    height: 45vh;
-}
-
-.layout-mobile #itemDetailPage:has(.detailLogo.hide) .itemBackdrop {
-    margin-bottom: -10vh;
-}
-
 .layout-tv .detailLogo {
     display: var(--clearLogoVisibility);
     height: 20vh;
@@ -1208,22 +1299,16 @@ html {
     margin: auto 5vw;
 }
 
-.layout-tv .itemBackdrop {
-    height: 33vh;
+#itemDetailPage:has(.subtitle) .detailLogo {
+    top: calc(100vh - 6em - var(--secondaryItemPageNegativeSpace));
 }
 
-/* .detailImageContainer.padded-left {
-    padding-left: 0;
-} */
-
-/* .layout-tv .detailImageContainer .card {
-    padding-left: var(--sidePadding);
-
-    position: fixed;
-} */
+.layout-mobile #itemDetailPage:has(.subtitle) .detailLogo {
+    top: calc(100vh - 11em - var(--secondaryItemPageNegativeSpace));
+}
 
 .layout-desktop .detailImageContainer .card {
-    position: absolute !important;
+    position: relative !important;
     width: 22vh !important;
     float: none;
     left: 0 !important;
@@ -1232,12 +1317,6 @@ html {
     margin: auto;
     margin-bottom: 0;
     place-self: center;
-    transform: translateY(-80%);
-}
-
-.layout-desktop .detailImageContainer .backdropCard,
-.layout-desktop .detailImageContainer .squareCard {
-    transform: translateY(-100%);
 }
 
 .detailImageContainer .card.backdropCard {
@@ -1303,11 +1382,10 @@ html {
     margin-top: 0.5em;
 }
 
-/* this hides the media card when detail logo is visible */
-.detailImageContainer .card:not(.portraitCard):has(.cardImageIcon.person),
-#itemDetailPage:has(.detailImageContainer .card.backdropCard) .detailLogo,
-#itemDetailPage:has(.detailImageContainer .cardImageIcon.album) .detailLogo,
-#itemDetailPage:has(.detailImageContainer .cardImageIcon.person) .detailLogo {
+/* 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 {
     z-index: 2;
     display: none;
 }
@@ -1344,31 +1422,30 @@ html {
     background-color: var(--lighterGradientPointAlpha);
 }
 
-/* this shows the poster in the cast, book and music pages */
-.detailImageContainer .card:has(.book, .person, .album),
-.detailImageContainer .card.backdropCard:has(.tv),
-.detailImageContainer .card.backdropCard:has(.movie),
-.detailImageContainer .card.backdropCard:has(.live_tv) {
+/* this shows the poster in the cast, book, live tv and other pages */
+.detailImageContainer > .backdropCard,
+.detailImageContainer > .squareCard,
+.detailImageContainer > .card:has(.book),
+.detailImageContainer > .card:has(.person),
+.detailImageContainer > .card:has(.album),
+.detailImageContainer > .card:has(.queue),
+.detailImageContainer > .card:has(.live_tv) {
     display: block;
 }
 
-/* This reduces the top padding in the cast, live tv, episode, song, album and artist pages i.e. shifts up page content */
-#itemDetailPage:has(.detailImageContainer .cardImageIcon.person, .detailImageContainer .cardImageIcon.book)
-    .itemBackdrop,
-#itemDetailPage:has(.detailImageContainer .cardImageIcon.album) .itemBackdrop,
-#itemDetailPage:has(.detailImageContainer .backdropCard .cardImageIcon.tv) .itemBackdrop,
-#itemDetailPage:has(.detailImageContainer .squareCard) .itemBackdrop,
-#itemDetailPage:has(.detailImageContainer .cardImageIcon.live_tv) .itemBackdrop {
-    height: calc(100vh - 32vh - var(--secondaryItemPageNegativeSpace)) !important;
+/* this hides artist's poster */
+.detailImageContainer .squareCard:has(.person) {
+    display: none;
 }
 
-#itemDetailPage:has(.detailImageContainer .card.backdropCard),
-#itemDetailPage:has(.detailImageContainer .card .cardImageIcon.album) {
+#itemDetailPage:has(.subtitle),
+#itemDetailPage:has(.musicParentName) {
     background: linear-gradient(180deg, var(--darkerGradientPointAlpha) 80%, transparent);
 }
 
-.layout-mobile #itemDetailPage:has(.detailImageContainer .card.backdropCard) .itemBackdrop,
-.layout-mobile #itemDetailPage:has(.detailImageContainer .card .cardImageIcon.album) .itemBackdrop {
+.layout-mobile #itemDetailPage:has(.detailImageContainer .backdropCard) .itemBackdrop,
+.layout-mobile #itemDetailPage:has(.subtitle) .itemBackdrop,
+.layout-mobile #itemDetailPage:has(.musicParentName) .itemBackdrop {
     animation: animMoveDownSecondaryPage 0.5s ease-out forwards;
 }
 
@@ -1904,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 {
@@ -2281,7 +2361,7 @@ div[data-type="PhotoAlbum"] .play_arrow:before {
     flex-direction: row;
 }
 
-.btnPlay:not(.formDialogFooterItem):after {
+.btnPlay:not(.formDialogFooterItem):not(.play-button):after {
     content: attr(title);
     padding: 0 1ch;
 }
@@ -2454,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) {
@@ -2585,7 +2675,7 @@ div[data-role="controlgroup"] a.ui-btn-active {
     row-gap: 1em;
     column-gap: 3em;
     max-width: unset !important;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-columns: 25% 1fr 1fr 1fr;
     margin-bottom: 1.5em;
 }
 
@@ -3140,35 +3230,41 @@ div[data-role="controlgroup"] a.ui-btn-active {
     flex-direction: row-reverse;
 }
 
-.infoWrapper h1.itemName,
-.infoWrapper h1.parentName {
+.nameContainer > h3,
+.nameContainer > h1 {
+    word-break: break-word;
+    overflow: hidden;
+}
+
+.nameContainer > h1.itemName,
+.nameContainer > h1.parentName {
     font-size: 4em;
     white-space: pre-wrap;
     padding-bottom: 0.5ch;
     color: white;
 }
 
-.infoWrapper h1.itemName,
-.infoWrapper h1.parentName,
-.infoWrapper h1.itemName a,
-.infoWrapper h1.parentName a {
+.nameContainer > h1.itemName,
+.nameContainer > h1.parentName,
+.nameContainer > h1.itemName a,
+.nameContainer > h1.parentName a {
     font-weight: 200;
 }
 
-.infoWrapper h1.itemName bdi,
-.infoWrapper h1.parentName bdi,
-.infoWrapper h1.itemName a,
-.infoWrapper h1.parentName a {
-    /* overflow: hidden; */
+.nameContainer > h1.itemName bdi,
+.nameContainer > h1.parentName bdi,
+.nameContainer > h1.itemName a,
+.nameContainer > h1.parentName a {
+    overflow: hidden;
     display: -webkit-box !important;
     -webkit-line-clamp: 3;
     line-clamp: 3;
     -webkit-box-orient: vertical;
 }
 
-.layout-mobile .infoWrapper h1.itemName,
-.layout-mobile .infoWrapper h1.parentName,
-.layout-mobile .infoWrapper h1.parentNameLast {
+.layout-mobile .nameContainer > h1.itemName,
+.layout-mobile .nameContainer > h1.parentName,
+.layout-mobile .nameContainer > h1.parentNameLast {
     font-size: 2em;
     word-wrap: break-word;
     padding-bottom: 0ch;
@@ -3181,6 +3277,7 @@ div[data-role="controlgroup"] a.ui-btn-active {
 
 .layout-mobile .subtitle {
     font-size: 1.5em;
+    padding-bottom: 0.5em;
 }
 
 .itemName.originalTitle {
@@ -3450,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 {
@@ -3840,8 +3947,13 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
     }
 }
 
+.nowPlayingPage {
+    background: linear-gradient(var(--darkerGradientPointAlpha), transparent);
+}
+
 .remoteControlContent {
     padding: 0 var(--sidePadding) !important;
+    background: linear-gradient(transparent, var(--darkerGradientPointAlpha) 20em);
 }
 
 /* .layout-tv *,
@@ -3869,3 +3981,41 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
 .layout-tv .show-animation:focus {
     transform: none !important;
 }
+
+/* basic styling for the Media Bar Plugin - start
+for extended styling, use the add-on */
+
+#slides-container {
+    top: calc(-0.5 * var(--appBarHeight));
+}
+
+.backdrop-overlay {
+    background: linear-gradient(
+        var(--lighterGradientPoint),
+        var(--gradientPointAlpha),
+        60%,
+        var(--darkerGradientPointAlpha)
+    );
+}
+
+.plot {
+    color: var(--textColor);
+    text-shadow: 1px 1px var(--lighterGradientPointAlpha);
+}
+
+.button-container {
+    align-items: center;
+}
+
+.favorite-button {
+    background: none;
+    color: var(--textColor);
+}
+
+.detail-button:hover,
+.favorite-button:hover {
+    background: var(--dimTextColor);
+    color: black;
+}
+
+/* basic styling for the Media Bar Plugin - end */

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);
 }

Theme/assets/add-ons/media-bar-plugin-support-nightly.css

@@ -1,20 +1,5 @@
 /* Add-on: Media Bar plugin support nightly for the ElegantFin Theme for Jellyfin by lscambo13 */
 /* this styles the media bar plugin - start */
-.button-container {
-    align-items: center;
-}
-
-.favorite-button {
-    background: none;
-    color: var(--textColor);
-}
-
-.detail-button:hover,
-.favorite-button:hover {
-    background: var(--dimTextColor);
-    color: black;
-}
-
 .play-button::before,
 .detail-button::before,
 .favorite-button::before,
@@ -23,7 +8,7 @@
 }
 
 .play-button {
-    font-family: 'Inter';
+    font-family: "Inter";
     font-size: 1em;
     font-weight: 500;
 }
@@ -31,8 +16,8 @@
 .backdrop,
 .backdrop-container,
 .backdrop-overlay {
-    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), 70%, rgba(0, 0, 0, 0));
-    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), 70%, rgba(0, 0, 0, 0));
+    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), 70%, rgba(0, 0, 0, 0));
+    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), 70%, rgba(0, 0, 0, 0));
     background-color: transparent;
 }
 
@@ -40,7 +25,6 @@
     transform-origin: center left;
 }
 
-/* this is my own take */
 .rating-value {
     flex-wrap: wrap;
     justify-content: center;
@@ -53,21 +37,13 @@
 #slides-container {
     width: calc(100vw - (2 * var(--sidePadding)));
     height: 62%;
-    top: calc(1.5 * var(--appBarHeight));
+    top: var(--appBarHeight);
     border: var(--defaultBorder);
     border-radius: var(--largerRadius);
-    transition: all .125s, border 0s;
+    transition: all 0.125s, border 0s;
     user-select: none;
 }
 
-.layout-tv #slides-container {
-    top: 0em;
-}
-
-.layout-mobile #slides-container {
-    top: 10em;
-}
-
 .logo-container {
     top: 10vh;
 }
@@ -80,7 +56,7 @@
 }
 
 .backdrop-overlay {
-    background: linear-gradient(0deg, rgba(0, 0, 0, .85), 40%, transparent);
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), 40%, transparent);
 }
 
 @media only screen and (max-width: 767px) and (orientation: portrait) {
@@ -89,10 +65,6 @@
         transform: translateX(-50%) scale(0.8);
     }
 
-    .info-container {
-        /* top: calc(50% + 6vh); */
-    }
-
     .tomato-rating {
         display: none;
     }
@@ -108,7 +80,7 @@
 
 @media (min-width: 75em) {
     #slides-container {
-        top: calc(.5 * var(--appBarHeight));
+        top: calc(0.5 * var(--appBarHeight));
     }
 }
 

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>
 
+```