RELEASE: ElegantFin v25.08.08

dev: Simplified the selector

Theme/ElegantFin-theme-nightly.css

@@ -66,6 +66,7 @@
     --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);
+    /* --themeVideoPlayerMask: linear-gradient(180deg, rgba(0, 0, 0, 1), 85%, transparent); */
 
     /* standard component sizes */
     --largerRadius: 1.25em;
@@ -477,118 +478,167 @@ html {
     --cardCount: 2;
 }
 
-/* if the window width is equal to or more than (at minimum) 220em then the code in the query will trigger */
+/* if the window width is equal to or more than (at minimum) 300em then the code in the query will trigger */
-/* 25 posters, 22 thumbs */
+/* 16 posters, 12 thumbs */
-@media (min-width: 220em) {
+@media (min-width: 300em) {
 
     .portraitCard,
     .squareCard {
-        --cardCount: 25;
+        --cardCount: 16;
     }
 
     .overflowPortraitCard,
     .overflowSquareCard {
-        --cardCount: 24;
+        --cardCount: 15;
     }
 
     .squareCard:has(.cardFooter) {
-        --cardCount: 22;
+        --cardCount: 12;
     }
 
     .backdropCard {
-        --cardCount: 22;
+        --cardCount: 12;
     }
 
     .overflowBackdropCard {
-        --cardCount: 21;
+        --cardCount: 11;
     }
 }
 
-/* if the window width is equal to or less than (at maximum) 220em then the code in the query will trigger */
+/* if the window width is equal to or less than (at maximum) 300em then the code in the query will trigger */
-/* 21 posters, 18 thumbs */
+/* 15 posters, 11 thumbs */
+@media (max-width: 300em) {
+
+    .portraitCard,
+    .squareCard {
+        --cardCount: 15;
+    }
+
+    .overflowPortraitCard,
+    .overflowSquareCard {
+        --cardCount: 14;
+    }
+
+    .squareCard:has(.cardFooter) {
+        --cardCount: 11;
+    }
+
+    .backdropCard {
+        --cardCount: 11;
+    }
+
+    .overflowBackdropCard {
+        --cardCount: 10;
+    }
+}
+
+/* 14 posters, 10 thumbs */
+@media (max-width: 270em) {
+
+    .portraitCard,
+    .squareCard {
+        --cardCount: 14;
+    }
+
+    .overflowPortraitCard,
+    .overflowSquareCard {
+        --cardCount: 13;
+    }
+
+    .squareCard:has(.cardFooter) {
+        --cardCount: 10;
+    }
+
+    .backdropCard {
+        --cardCount: 10;
+    }
+
+    .overflowBackdropCard {
+        --cardCount: 9;
+    }
+}
+
+/* 13 posters, 10 thumbs */
+@media (max-width: 240em) {
+
+    .portraitCard,
+    .squareCard {
+        --cardCount: 13;
+    }
+
+    .overflowPortraitCard,
+    .overflowSquareCard {
+        --cardCount: 12;
+    }
+
+    .squareCard:has(.cardFooter) {
+        --cardCount: 10;
+    }
+
+    .backdropCard {
+        --cardCount: 10;
+    }
+
+    .overflowBackdropCard {
+        --cardCount: 9;
+    }
+}
+
+/* 12 posters, 9 thumbs, 4K*/
 @media (max-width: 220em) {
 
     .portraitCard,
     .squareCard {
-        --cardCount: 21;
+        --cardCount: 12;
     }
 
     .overflowPortraitCard,
     .overflowSquareCard {
-        --cardCount: 20;
+        --cardCount: 11;
     }
 
     .squareCard:has(.cardFooter) {
-        --cardCount: 18;
+        --cardCount: 9;
     }
 
     .backdropCard {
-        --cardCount: 18;
+        --cardCount: 9;
     }
 
     .overflowBackdropCard {
-        --cardCount: 17;
+        --cardCount: 8;
     }
 }
 
-/* if the window width is equal to or less than (at maximum) 200em then the code in the query will trigger */
+/* 11 posters, 9 thumbs */
-/* 17 posters, 14 thumbs */
 @media (max-width: 200em) {
 
     .portraitCard,
     .squareCard {
-        --cardCount: 17;
+        --cardCount: 11;
     }
 
     .overflowPortraitCard,
     .overflowSquareCard {
-        --cardCount: 16;
+        --cardCount: 10;
     }
 
     .squareCard:has(.cardFooter) {
-        --cardCount: 14;
+        --cardCount: 9;
     }
 
     .backdropCard {
-        --cardCount: 14;
+        --cardCount: 9;
     }
 
     .overflowBackdropCard {
-        --cardCount: 13;
+        --cardCount: 8;
     }
 }
 
-/* if the window width is equal to or less than (at maximum) 170em then the code in the query will trigger */
+/* 10 posters, 8 thumbs */
-/* 14 posters, 10 thumbs */
 @media (max-width: 170em) {
 
-    .portraitCard,
-    .squareCard {
-        --cardCount: 14;
-    }
-
-    .overflowPortraitCard,
-    .overflowSquareCard {
-        --cardCount: 13;
-    }
-
-    .squareCard:has(.cardFooter) {
-        --cardCount: 10;
-    }
-
-    .backdropCard {
-        --cardCount: 10;
-    }
-
-    .overflowBackdropCard {
-        --cardCount: 9;
-    }
-}
-
-/* if the window width is equal to or less than (at maximum) 150em then the code in the query will trigger */
-/* 10 posters, 7 thumbs */
-@media (max-width: 150em) {
-
     .portraitCard,
     .squareCard {
         --cardCount: 10;
@@ -600,7 +650,7 @@ html {
     }
 
     .squareCard:has(.cardFooter) {
-        --cardCount: 8;
+        --cardCount: 9;
     }
 
     .backdropCard {
@@ -612,7 +662,33 @@ html {
     }
 }
 
-/* 8 posters, 7 thumbs */
+/* 9 posters, 7 thumbs */
+@media (max-width: 140em) {
+
+    .portraitCard,
+    .squareCard {
+        --cardCount: 9;
+    }
+
+    .overflowPortraitCard,
+    .overflowSquareCard {
+        --cardCount: 8;
+    }
+
+    .squareCard:has(.cardFooter) {
+        --cardCount: 7;
+    }
+
+    .backdropCard {
+        --cardCount: 7;
+    }
+
+    .overflowBackdropCard {
+        --cardCount: 6;
+    }
+}
+
+/* 8 posters, 7 thumbs, 1080p */
 @media (max-width: 120em) {
 
     .portraitCard,
@@ -644,9 +720,7 @@ html {
     .portraitCard,
     .squareCard,
     .overflowPortraitCard,
-    .overflowSquareCard,
+    .overflowSquareCard {
-    .squareCard:has(.cardFooter),
-    .backdropCard {
         --cardCount: 7;
     }
 
@@ -679,7 +753,7 @@ html {
 
     .overflowBackdropCard,
     .backdropCard {
-        --cardCount: 5;
+        --cardCount: 4;
     }
 }
 
@@ -1010,6 +1084,24 @@ html {
     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;
 }
@@ -1020,7 +1112,7 @@ html {
     top: -30%;
     -webkit-mask: var(--itemBackdropMask);
     mask: var(--itemBackdropMask);
-    animation: animMoveDown 1s ease-out forwards;
+    animation: animMoveDown .5s ease-out forwards;
     height: 45vh;
 }
 
@@ -1168,7 +1260,7 @@ html {
 
 .layout-mobile #itemDetailPage:has(.detailImageContainer .card.backdropCard) .itemBackdrop,
 .layout-mobile #itemDetailPage:has(.detailImageContainer .card .cardImageIcon.album) .itemBackdrop {
-    animation: animMoveDownSecondaryPage 1s ease-out forwards;
+    animation: animMoveDownSecondaryPage .5s ease-out forwards;
 }
 
 .layout-mobile .cardImageIcon {
@@ -1293,21 +1385,19 @@ html,
 
 @keyframes animScaleUp {
     from {
-        transform: scale(1) translateY(-2.5%);
+        transform: translateY(-2.5%);
         opacity: 0;
-        filter: var(--blurLarge);
     }
 
     to {
-        transform: scale(1) translateY(0%);
+        transform: translateY(0%);
         opacity: 1;
-        filter: blur(0);
     }
 }
 
 .backdropImageFadeIn {
     transform-origin: bottom center;
-    animation: animScaleUp 1s ease-out forwards;
+    animation: animScaleUp .5s ease-out forwards;
 }
 
 .appfooter {
@@ -2116,7 +2206,7 @@ div[data-type="PhotoAlbum"] .play_arrow:before {
     border-radius: 3em;
     border-color: var(--borderColor);
     height: 3em;
-    width: 10em;
+    min-width: 10em;
     margin-right: .5em !important;
 }
 
@@ -2567,7 +2657,7 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .layout-mobile .padded-right-withalphapicker {
-    padding-left: 3.5%;
+    padding-left: 4.5%;
     padding-right: 6.5%;
 }
 
@@ -2681,7 +2771,7 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .upNextDialog-title {
-    white-space: wrap;
+    white-space: pre-wrap;
     width: unset;
 }
 
@@ -2697,6 +2787,16 @@ div[data-role=controlgroup] a.ui-btn-active {
 .skip-button {
     background-color: whitesmoke;
     box-shadow: var(--shadow);
+    bottom: 25%;
+    right: var(--sidePadding);
+}
+
+/* this workaround allows the skip button get focused correctly on TVs using remote navigation*/
+/* issue: back button can no longer be focused correctly when this button is focused, 
+but that is a non-issue because users can use the back button on their remotes */
+.layout-tv .skip-button {
+    right: unset;
+    left: var(--sidePadding);
 }
 
 .skip-button:hover {
@@ -2794,7 +2894,7 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .emby-textarea {
-    font-family: consolas;
+    font-family: consolas, monaco, monospace;
 }
 
 .emby-select-withcolor,
@@ -3347,7 +3447,6 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
     backdrop-filter: none;
     background-color: transparent;
     border: none;
-    border-width: 0 0 var(--borderWidth) 0;
     background: var(--headerBackground);
     padding-top: .75em;
 }
@@ -3373,6 +3472,11 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
     z-index: -1;
 }
 
+.headerTabs.sectionTabs {
+    margin: 0;
+    height: 6em;
+}
+
 /* this is the transparent header, visible in main media page */
 .skinHeader-withBackground.semiTransparent {
     --headerBackground: none;
@@ -3381,16 +3485,6 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
     border: none;
 }
 
-/* this is the semi transparent header without, visible when backdrops setting is on */
-/* .backgroundContainer.withBackdrop~div .skinHeader-blurred:not(.osdHeader):not(.semiTransparent),
-.backgroundContainer.withBackdrop~div .skinHeader-blurred:not(.semiTransparent)::after,
-.backgroundContainer.withBackdrop~div .skinHeader-blurred:not(.osdHeader)::after {
-    --headerBackground: var(--headerColorGradientAlt);
-    backdrop-filter: none;
-    background-color: transparent;
-    border: none;
-} */
-
 .skinHeader.headroom:not(.osdHeader, .noHomeButtonHeader):has(.pageTitle:empty)::after,
 .skinHeader.headroom:not(.osdHeader, .noHomeButtonHeader):has(.pageTitle:empty) {
     --headerBackground: none;
@@ -3431,11 +3525,6 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
     font-variation-settings: 'FILL' 0;
 }
 
-.headerTabs.sectionTabs {
-    margin: 0;
-    height: 6em;
-}
-
 .layout-tv .sectionTabs .emby-tabs.smoothScrollX {
     overflow: visible !important;
 }
@@ -3472,7 +3561,9 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
 }
 
 @media (min-width: 75em) {
-    .sectionTabs:not(.layout-tv .sectionTabs) {
+
+    .layout-desktop .sectionTabs,
+    .layout-mobile .sectionTabs {
         -webkit-align-items: center;
         align-items: center;
         -webkit-align-self: center;
@@ -3507,3 +3598,22 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
 .remoteControlContent {
     padding: 0 var(--sidePadding) !important;
 }
+
+/* Uncomment this to bring back the original ElegantFin header design - start */
+
+/* .skinHeader-blurred:not(.osdHeader):not(.semiTransparent) {
+    backdrop-filter: var(--blurLarge);
+    background: var(--headerColor);
+    border: var(--defaultBorder);
+    border-width: 0 0 var(--borderWidth) 0;
+}
+
+.skinHeader-blurred:not(.osdHeader):not(.semiTransparent)::after {
+    content: none;
+}
+
+.headerTabs.sectionTabs {
+    height: 4em;
+} */
+
+/* Uncomment this to bring back the original ElegantFin header design - end */

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

@@ -1,4 +1,4 @@
-/* Add-on: Custom media covers for the ElegantFin Theme for Jellyfin by lscambo13 */
+/* Add-on: Custom media covers nightly for the ElegantFin Theme for Jellyfin by lscambo13 */
 
 :root {
     /* my media library default covers customizations */
@@ -31,7 +31,7 @@
 
 .card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"], [data-type="Series"], [data-type="Folder"], [data-type="Season"], [data-type="Playlist"]) .cardImageContainer.cardContent::before {
     position: absolute;
-    font-size: 3.5vh;
+    font-size: clamp(1em, max(2.5vh, 2vw), 2.5em);
     margin-bottom: .175em;
     font-weight: 800;
     color: white;

Theme/assets/add-ons/custom-media-covers-v25.01.25.css

@@ -1,4 +1,4 @@
-/* Add-on: Custom media covers for the ElegantFin Theme for Jellyfin by lscambo13 */
+/* Add-on: Custom media covers v25.01.25 for the ElegantFin Theme for Jellyfin by lscambo13 */
 
 :root{
     /* my media library default covers customizations */

Theme/assets/add-ons/custom-media-covers-v25.08.02.css

@@ -0,0 +1,188 @@
+/* Add-on: Custom media covers v25.08.02 for the ElegantFin Theme for Jellyfin by lscambo13 */
+
+:root {
+    /* my media library default covers customizations */
+    --colorOverlayMoviesCover: rgb(193, 103, 104);
+    --colorOverlayTvshowsCover: rgb(140, 149, 43);
+    --colorOverlayLivetvCover: rgb(17, 98, 159);
+    --colorOverlayPlaylistsCover: rgb(118, 61, 216);
+    --colorOverlayBoxsetsCover: rgb(219, 180, 53);
+    --colorOverlayMusicCover: rgb(11, 93, 72);
+    --colorOverlayHomevideosCover: rgb(39, 90, 185);
+    --colorOverlayBooksCover: rgb(166, 68, 70);
+    --colorOverlayFoldersCover: rgb(173, 60, 113);
+    --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);
+    --urlPlaylistsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/playlists.webp);
+    --urlBoxsetsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/boxsets.webp);
+    --urlMusicCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/music.webp);
+    --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);
+}
+
+.card-withuserdata[data-isfolder="true"] .cardImageContainer.defaultCardBackground {
+    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 {
+    position: absolute;
+    font-size: 3.5vh;
+    margin-bottom: .175em;
+    font-weight: 800;
+    color: white;
+    font-family: 'Noto Sans';
+    text-align: center;
+}
+
+.card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"], [data-type="Series"], [data-type="Folder"]) .cardImageIcon.material-icons:not(.quiz)::before {
+    display: none;
+}
+
+/* These show up when no image is set */
+
+/* div[data-collectiontype="movies"] .cardImageContainer.defaultCardBackground {
+    background: var(--colorOverlayMoviesCover) !important;
+    background-image: var(--urlMoviesCover) !important;
+}
+
+div[data-collectiontype="tvshows"] .cardImageContainer.defaultCardBackground {
+    background: var(--colorOverlayTvshowsCover) !important;
+    background-image: var(--urlTvshowsCover) !important;
+}
+
+div[data-collectiontype="livetv"] .cardImageContainer.defaultCardBackground {
+    background: var(--colorOverlayLivetvCover) !important;
+    background-image: var(--urlLivetvCover) !important;
+}
+
+div[data-collectiontype="music"] .cardImageContainer.defaultCardBackground {
+    background: var(--colorOverlayMusicCover) !important;
+    background-image: var(--urlMusicCover) !important;
+}
+
+div[data-collectiontype="homevideos"] .cardImageContainer.defaultCardBackground {
+    background: var(--colorOverlayHomevideosCover) !important;
+    background-image: var(--urlHomevideosCover) !important;
+}
+
+div[data-collectiontype="books"] .cardImageContainer.defaultCardBackground {
+    background: var(--colorOverlayBooksCover) !important;
+    background-image: var(--urlBooksCover) !important;
+}
+
+div[data-collectiontype="boxsets"] .cardImageContainer.defaultCardBackground {
+    background: var(--colorOverlayBoxsetsCover) !important;
+    background-image: var(--urlBoxsetsCover) !important;
+}
+
+div[data-collectiontype="folders"] .cardImageContainer.defaultCardBackground {
+    background: 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;
+    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;
+}
+
+div[data-collectiontype="movies"] .cardImageContainer.cardContent::before {
+    content: "Movies";
+}
+
+div[data-collectiontype="tvshows"] .cardImageContainer.cardContent::before {
+    content: "TV Shows";
+}
+
+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;
+}

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

@@ -1 +1,2 @@
-.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,.favorite-button.favorited::before{font-weight:400;}.play-button{font-family:'Inter';font-size:1em;font-weight:500;}.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));background-color:transparent;}.backdrop{transform-origin:center left;}.layout-desktop #slides-container{width:calc(100vw - (2 * var(--sidePadding)));height:60%;top:8em;border:var(--defaultBorder);border-radius:var(--largerRadius);transition:all .125s,border 0s;user-select:none;}.layout-desktop .logo-container{top:10vh;}.layout-desktop .backdrop,.layout-desktop .backdrop-container,.layout-desktop .backdrop-overlay{mask-image:none;-webkit-mask-image:none;}.layout-desktop .backdrop-overlay{background:linear-gradient(0deg,rgba(0,0,0,.85),40%,transparent);}
+/* Add-on: Media Bar plugin support v25.08.08 for the ElegantFin Theme for Jellyfin by lscambo13 */
+ .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,.favorite-button.favorited::before{font-weight:400}.play-button{font-family:'Inter';font-size:1em;font-weight:500}.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));background-color:transparent}.backdrop{transform-origin:center left}.rating-value{flex-wrap:wrap;justify-content:center}.age-rating{font-size:.8em}#slides-container{width:calc(100vw - (2 * var(--sidePadding)));height:60%;top:8em;border:var(--defaultBorder);border-radius:var(--largerRadius);transition:all .125s,border 0s;user-select:none}.layout-tv #slides-container{top:0}.layout-mobile #slides-container{top:10em}.logo-container{top:10vh}.backdrop,.backdrop-container,.backdrop-overlay{mask-image:none;-webkit-mask-image:none}.backdrop-overlay{background:linear-gradient(0deg,rgba(0,0,0,.85),40%,transparent)}@media only screen and (max-width:767px) and (orientation:portrait){.button-container{top:calc(50% + 20vh);transform:translateX(-50%) scale(.8)}.info-container{}.tomato-rating{display:none}.dots-container{top:calc(50% + 19vh)}.backdrop{transform-origin:center}}

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

@@ -1,3 +1,4 @@
+/* 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;
@@ -40,7 +41,16 @@
 }
 
 /* this is my own take */
-.layout-desktop #slides-container {
+.rating-value {
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.age-rating {
+    font-size: 0.8em;
+}
+
+#slides-container {
     width: calc(100vw - (2 * var(--sidePadding)));
     height: 60%;
     top: 8em;
@@ -50,19 +60,50 @@
     user-select: none;
 }
 
-.layout-desktop .logo-container {
+.layout-tv #slides-container {
+    top: 0em;
+}
+
+.layout-mobile #slides-container {
+    top: 10em;
+}
+
+.logo-container {
     top: 10vh;
 }
 
-.layout-desktop .backdrop,
+.backdrop,
-.layout-desktop .backdrop-container,
+.backdrop-container,
-.layout-desktop .backdrop-overlay {
+.backdrop-overlay {
     mask-image: none;
     -webkit-mask-image: none;
 }
 
-.layout-desktop .backdrop-overlay {
+.backdrop-overlay {
     background: linear-gradient(0deg, rgba(0, 0, 0, .85), 40%, transparent);
 }
 
+@media only screen and (max-width: 767px) and (orientation: portrait) {
+    .button-container {
+        top: calc(50% + 20vh);
+        transform: translateX(-50%) scale(0.8);
+    }
+
+    .info-container {
+        /* top: calc(50% + 6vh); */
+    }
+
+    .tomato-rating {
+        display: none;
+    }
+
+    .dots-container {
+        top: calc(50% + 19vh);
+    }
+
+    .backdrop {
+        transform-origin: center;
+    }
+}
+
 /* this styles the media bar plugin - end */

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

@@ -1,3 +1,5 @@
+/* Add-on: Media Bar plugin support v25.08.02 for the ElegantFin Theme for Jellyfin by lscambo13 */
+
 /* this styles the media bar plugin - start */
 .button-container {
     align-items: center;

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

@@ -0,0 +1,109 @@
+/* Add-on: Media Bar plugin support v25.08.08 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,
+.favorite-button.favorited::before {
+    font-weight: 400;
+}
+
+.play-button {
+    font-family: 'Inter';
+    font-size: 1em;
+    font-weight: 500;
+}
+
+.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));
+    background-color: transparent;
+}
+
+.backdrop {
+    transform-origin: center left;
+}
+
+/* this is my own take */
+.rating-value {
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.age-rating {
+    font-size: 0.8em;
+}
+
+#slides-container {
+    width: calc(100vw - (2 * var(--sidePadding)));
+    height: 60%;
+    top: 8em;
+    border: var(--defaultBorder);
+    border-radius: var(--largerRadius);
+    transition: all .125s, border 0s;
+    user-select: none;
+}
+
+.layout-tv #slides-container {
+    top: 0em;
+}
+
+.layout-mobile #slides-container {
+    top: 10em;
+}
+
+.logo-container {
+    top: 10vh;
+}
+
+.backdrop,
+.backdrop-container,
+.backdrop-overlay {
+    mask-image: none;
+    -webkit-mask-image: none;
+}
+
+.backdrop-overlay {
+    background: linear-gradient(0deg, rgba(0, 0, 0, .85), 40%, transparent);
+}
+
+@media only screen and (max-width: 767px) and (orientation: portrait) {
+    .button-container {
+        top: calc(50% + 20vh);
+        transform: translateX(-50%) scale(0.8);
+    }
+
+    .info-container {
+        /* top: calc(50% + 6vh); */
+    }
+
+    .tomato-rating {
+        display: none;
+    }
+
+    .dots-container {
+        top: calc(50% + 19vh);
+    }
+
+    .backdrop {
+        transform-origin: center;
+    }
+}
+
+/* this styles the media bar plugin - end */