RELEASE: ElegantFin v25.11.25

Fix: Optimized performance a bit
Fix: TYPO!! #205
2025-12-27 22:37:47 +00:00 · 2025-11-24 22:06:51 +05:30 · 2025-11-24 21:04:17 +05:30 · 2025-11-24 19:07:46 +05:30 · 2025-11-23 23:59:59 +05:30 · 2025-11-23 21:32:37 +05:30
18 changed files with 5175 additions and 719 deletions
--- a/README.md
+++ b/README.md
@@ -205,7 +205,7 @@ https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd
 </details>

 <details>
-  <summary><i>7. Enable experimental support for the Media Bar plugin</i></summary>
+  <summary><i>7. Enable alternative style for the Media Bar plugin</i></summary>

  <img width="640" height="auto" alt="image" src="https://github.com/user-attachments/assets/3e88e270-40f9-48ba-8173-f65b94344f8d" />

@@ -217,6 +217,23 @@ https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd
 - To undo this change, simply remove this code block.
 </details>

+<details>
+  <summary><i>8. Switch between different app bar styles</i></summary>
+
+  https://github.com/user-attachments/assets/b5868cd2-8df9-490d-a2b6-4386c6ddcd56
+
+- You can switch between these using `--appBarHeight`.
+- Use 5em to enable the fading app bar (seamless) (default);
+- Or, use 4.6em to get the solid app bar (cleaner with border)
+```
+:root{
+  /* example */
+  --appBarHeight: 4.6em;
+}
+```
+- To undo this change, simply remove this code block.
+</details>
+
 <hr>

 ### 🆗 Tested on 
@@ -231,7 +248,10 @@ https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd
  <summary>1️⃣ - <i>How do I check if I am using the latest version of ElegantFin?</i></summary>

 - Check the version number at the bottom in the Settings screen. 
- It should be something like `ElegantFin v25.10.XX`.
+- It should be something like `ElegantFin v25.XX.XX`.
+
+  <img width="380" height="300" alt="image" src="https://github.com/user-attachments/assets/aecca6f5-7bd3-4057-9131-aa60b3becbaf" />
+
 </details>

 <details>
@@ -241,7 +261,7 @@ https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd
 - Once that cache is updated, the new version will be loaded automatically. 
 - There are multiple ways to clear the cache depending on your OS, smartphone or TV. Look online if you don't know.
 - On the web version, you can force a hard refresh of the page using CTRL + F5.
- On apps, try signing out and back in again. OR in case of Jellyfin Media Player on windows, you might need to delete the cache folder. That should definitely pull the latest version.
+- On apps, try signing out and back in again. OR in case of Jellyfin Media Player on windows, you might need to delete the cache folder.
 </details>

 <details>
--- a/Theme/ElegantFin-jellyfin-theme-build-latest-minified.css
+++ b/Theme/ElegantFin-jellyfin-theme-build-latest-minified.css
--- a/Theme/ElegantFin-theme-nightly.css
+++ b/Theme/ElegantFin-theme-nightly.css
--- a/Theme/ElegantFin-theme-v25.11.25.css
+++ b/Theme/ElegantFin-theme-v25.11.25.css
--- a/Theme/assets/add-ons/custom-media-covers-latest-min.css
+++ b/Theme/assets/add-ons/custom-media-covers-latest-min.css
--- a/Theme/assets/add-ons/custom-media-covers-nightly.css
+++ b/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,113 @@
    --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 {
+    content: attr(aria-label);
    position: absolute;
-    font-size: clamp(1em, max(2.5vh, 2vw), 2.5em);
-    margin-bottom: .175em;
+    font-size: clamp(1em, max(2.5vh, 2vw), 2em);
    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 {
+.layout-tv [data-type="CollectionFolder"]::before,
+.layout-tv [data-type="UserView"]::before {
+    content: attr(aria-label);
+    position: absolute;
+    display: grid;
+    align-content: center;
+    top: 0;
+    bottom: 0;
+    font-size: clamp(1em, max(2.5vh, 2vw), 2em);
+    font-weight: 800;
+    color: white;
+    font-family: "Noto Sans";
+    text-align: center;
+    width: 94%;
+    white-space: normal;
+    z-index: 1;
+}
+
+[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;
-}
--- a/Theme/assets/add-ons/custom-media-covers-v25.11.25.css
+++ b/Theme/assets/add-ons/custom-media-covers-v25.11.25.css
@@ -0,0 +1,135 @@
+/* Add-on: Custom media covers v25.11.25 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);
+    --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);
+    --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);
+    --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);
+}
+
+[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;
+}
+
+[data-type="CollectionFolder"] .cardContent::before,
+[data-type="UserView"] .cardContent::before {
+    content: attr(aria-label);
+    position: absolute;
+    font-size: clamp(1em, max(2.5vh, 2vw), 2em);
+    font-weight: 800;
+    color: white;
+    font-family: "Noto Sans";
+    text-align: center;
+    width: 94%;
+    white-space: normal;
+}
+
+.layout-tv [data-type="CollectionFolder"]::before,
+.layout-tv [data-type="UserView"]::before {
+    content: attr(aria-label);
+    position: absolute;
+    display: grid;
+    align-content: center;
+    top: 0;
+    bottom: 0;
+    font-size: clamp(1em, max(2.5vh, 2vw), 2em);
+    font-weight: 800;
+    color: white;
+    font-family: "Noto Sans";
+    text-align: center;
+    width: 94%;
+    white-space: normal;
+    z-index: 1;
+}
+
+[data-type="CollectionFolder"] .cardImageIcon:not(.quiz)::before,
+[data-type="UserView"] .cardImageIcon:not(.quiz)::before {
+    display: none;
+}
+
+[data-collectiontype="movies"] .cardContent {
+    background-color: var(--colorOverlayMoviesCover) !important;
+    background-image: var(--urlMoviesCover) !important;
+}
+
+[data-collectiontype="tvshows"] .cardContent {
+    background-color: var(--colorOverlayTvshowsCover) !important;
+    background-image: var(--urlTvshowsCover) !important;
+}
+
+[data-collectiontype="livetv"] .cardContent {
+    background-color: var(--colorOverlayLivetvCover) !important;
+    background-image: var(--urlLivetvCover) !important;
+}
+
+[data-collectiontype="music"] .cardContent {
+    background-color: var(--colorOverlayMusicCover) !important;
+    background-image: var(--urlMusicCover) !important;
+}
+
+[data-collectiontype="homevideos"] .cardContent {
+    background-color: var(--colorOverlayHomevideosCover) !important;
+    background-image: var(--urlHomevideosCover) !important;
+}
+
+[data-collectiontype="books"] .cardContent {
+    background-color: var(--colorOverlayBooksCover) !important;
+    background-image: var(--urlBooksCover) !important;
+}
+
+[data-collectiontype="boxsets"] .cardContent {
+    background-color: var(--colorOverlayBoxsetsCover) !important;
+    background-image: var(--urlBoxsetsCover) !important;
+}
+
+[data-collectiontype="folders"] .cardContent {
+    background-color: var(--colorOverlayFoldersCover) !important;
+    background-image: var(--urlFoldersCover) !important;
+}
+
+[data-collectiontype="playlists"] .cardContent {
+    background-color: var(--colorOverlayPlaylistsCover) !important;
+    background-image: var(--urlPlaylistsCover) !important;
+}
+
+[data-prefix="MIX"] .cardContent {
+    background-color: var(--colorOverlayMixedCover) !important;
+    background-image: var(--urlMixedCover) !important;
+}
+
+[data-collectiontype="movies"][data-prefix="REC"] .cardContent {
+    background-color: var(--colorOverlayRecordedmoviesCover) !important;
+    background-image: var(--urlRecordedmoviesCover) !important;
+}
+
+[data-prefix="REC"] .cardContent {
+    background-color: var(--colorOverlayRecordedtvCover) !important;
+    background-image: var(--urlRecordedtvCover) !important;
+}
--- a/Theme/assets/add-ons/media-bar-plugin-support-latest-min.css
+++ b/Theme/assets/add-ons/media-bar-plugin-support-latest-min.css
@@ -1,2 +1,2 @@
-/* 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}}
+/* Add-on: Media Bar plugin support v25.11.25 for the ElegantFin Theme for Jellyfin by lscambo13 */
+ .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:62%;top:var(--appBarHeight);border:var(--defaultBorder);border-radius:var(--largerRadius);transition:all .125s,border 0s;user-select:none}.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)}.tomato-rating{display:none}.dots-container{top:calc(50% + 19vh)}.backdrop{transform-origin:center}}@media (min-width:75em){#slides-container{top:calc(.5 * var(--appBarHeight))}}@media only screen and (max-height:767px) and (orientation:landscape){#slides-container{height:57%}.logo-container{top:3%}}@media only screen and (max-width:767px) and (orientation:portrait){.logo-container{top:50%}}
--- a/Theme/assets/add-ons/media-bar-plugin-support-nightly.css
+++ b/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,8 +80,24 @@

@media (min-width: 75em) {
    #slides-container {
-        top: calc(.5 * var(--appBarHeight));
+        top: calc(0.5 * var(--appBarHeight));
    }
 }

-/* this styles the media bar plugin - end */
+@media only screen and (max-height: 767px) and (orientation: landscape) {
+    #slides-container {
+        height: 57%;
+    }
+
+    .logo-container {
+        top: 3%;
+    }
+}
+
+@media only screen and (max-width: 767px) and (orientation: portrait) {
+    .logo-container {
+        top: 50%;
+    }
+}
+
+/* this styles the media bar plugin - end */
--- a/Theme/assets/add-ons/media-bar-plugin-support-v25.11.25.css
+++ b/Theme/assets/add-ons/media-bar-plugin-support-v25.11.25.css
@@ -0,0 +1,103 @@
+/* Add-on: Media Bar plugin support v25.11.25 for the ElegantFin Theme for Jellyfin by lscambo13 */
+/* this styles the media bar plugin - start */
+.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, 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;
+}
+
+.backdrop {
+    transform-origin: center left;
+}
+
+.rating-value {
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.age-rating {
+    font-size: 0.8em;
+}
+
+#slides-container {
+    width: calc(100vw - (2 * var(--sidePadding)));
+    height: 62%;
+    top: var(--appBarHeight);
+    border: var(--defaultBorder);
+    border-radius: var(--largerRadius);
+    transition: all 0.125s, border 0s;
+    user-select: none;
+}
+
+.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, 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);
+    }
+
+    .tomato-rating {
+        display: none;
+    }
+
+    .dots-container {
+        top: calc(50% + 19vh);
+    }
+
+    .backdrop {
+        transform-origin: center;
+    }
+}
+
+@media (min-width: 75em) {
+    #slides-container {
+        top: calc(0.5 * var(--appBarHeight));
+    }
+}
+
+@media only screen and (max-height: 767px) and (orientation: landscape) {
+    #slides-container {
+        height: 57%;
+    }
+
+    .logo-container {
+        top: 3%;
+    }
+}
+
+@media only screen and (max-width: 767px) and (orientation: portrait) {
+    .logo-container {
+        top: 50%;
+    }
+}
+
+/* this styles the media bar plugin - end */
--- a/Theme/assets/img/library-covers/mixed.webp
+++ b/Theme/assets/img/library-covers/mixed.webp
--- a/Theme/assets/img/library-covers/originals/mixed.jpg
+++ b/Theme/assets/img/library-covers/originals/mixed.jpg
--- a/Theme/assets/img/library-covers/originals/recordedmovies.jpg
+++ b/Theme/assets/img/library-covers/originals/recordedmovies.jpg
--- a/Theme/assets/img/library-covers/originals/recordedtv.jpg
+++ b/Theme/assets/img/library-covers/originals/recordedtv.jpg
--- a/Theme/assets/img/library-covers/recordedmovies.webp
+++ b/Theme/assets/img/library-covers/recordedmovies.webp
--- a/Theme/assets/img/library-covers/recordedtv.webp
+++ b/Theme/assets/img/library-covers/recordedtv.webp
--- a/custom-media-covers.md
+++ b/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? 
-
- Remember, you do not need to configure anything if you're happy with the default set of images.
-
+### ⚙️ How to configure this add-on?

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

+```
--- a/workspace.code-workspace
+++ b/workspace.code-workspace
@@ -1,8 +1,13 @@
 {
-	"folders": [
-		{
-			"path": "."
-		}
-	],
-	"settings": {}
+    "folders": [
+        {
+            "path": "."
+        }
+    ],
+    "settings": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": true,
+        "prettier.useTabs": false,
+        "prettier.printWidth": 120,
+    }
 }
Author	SHA1	Message	Date
lscambo13	b218a819da	RELEASE: ElegantFin v25.11.25	2025-11-24 22:06:51 +05:30
lscambo13	c4d04e1709	Fix: Optimized performance a bit	2025-11-24 21:04:17 +05:30
lscambo13	c9839f0848	Fix: TYPO!! #205	2025-11-24 19:07:46 +05:30
lscambo13	779b3449c0	dev: Updated the documentation	2025-11-23 23:59:59 +05:30
lscambo13	53b003dd9e	Fix: Media Bar contents were overlapping on smaller displays	2025-11-23 21:32:37 +05:30
lscambo13	5c915d6ac1	Fix: Disabled or adjusted some animations for improved performance on low-end TVs	2025-11-23 21:08:13 +05:30
lscambo13	2336be539a	Fix: Disabled the new episode grid on older browsers to avoid issues with Music pages	2025-11-23 20:21:37 +05:30
lscambo13	76a5319c97	Fix: Artist page top margin was too low	2025-11-23 20:14:20 +05:30
lscambo13	296263c9d7	dev: Renamed '--backdropPositionY' to a more logical name, '--backdropTrimFromTop'	2025-11-23 20:11:59 +05:30
lscambo13	422a1e185e	New: Shift the media page content up when Now Playing bottom bar is visible	2025-11-23 20:01:20 +05:30
lscambo13	7dcd42f992	Fix: Custom Media Cover titles were not visible on TVs	2025-11-23 19:58:58 +05:30
lscambo13	4e53bd27bc	Fix: Improved compatibility with older browsers that don't support 'aspect-ratio'	2025-11-15 21:40:21 +05:30
lscambo13	86a1e1c74e	Fix: Added responsive Episode card grid to get rid of the media queries	2025-11-15 21:31:16 +05:30
lscambo13	81a118e86e	dev: updated documentation	2025-11-15 20:37:23 +05:30
lscambo13	44e95c42cb	New: Added custom covers for Mixed Media libraries, Recordings and Recorded Movies Fix: Added line wrap to prevent long library names from overflowing dev: Simplified the code	2025-11-15 20:27:46 +05:30
lscambo13	8b1585da89	Fix: Added the missing entries i.e. Playlists, Recorded Movies etc	2025-11-15 20:24:05 +05:30
Mads Kelberg	3d08baecc8	fix: custom background overwrites scaling & position	2025-11-14 11:59:59 +01:00
Mads Kelberg	fe651691e3	refactor: use data label instead of static label	2025-11-13 23:23:08 +01:00
Mads Kelberg	cf67874221	chore: group css and remove duplicate	2025-11-13 23:18:07 +01:00
Mads Kelberg	676a1be4ae	fix: update CSS selectors for CollectionFolder type	2025-11-13 23:13:43 +01:00
lscambo13	9a60e664e5	Fix: Used a higher quality info_outline icon	2025-11-11 23:19:03 +05:30
lscambo13	ab8627eb66	Fix: Thumbnails were slightly off-center in the episode grid	2025-11-11 23:05:24 +05:30
lscambo13	c7abd97dfb	New: Redesigned the episode lists to be 'grid' on desktop	2025-11-11 22:51:58 +05:30
lscambo13	23542f197e	Fix: Used standard colors in episode lists dev: simplified some selectors to improve compatibility with HSS plugin	2025-11-11 22:43:26 +05:30
lscambo13	5641b4c7d6	Fix: Continue watching progress bar and the chapter cards were bugged on Firefox	2025-11-11 22:40:26 +05:30
lscambo13	beaf6415d0	New: Made the clear logo position from bottom configurable on desktop using a variable	2025-11-09 22:48:00 +05:30
lscambo13	a7216ebbdb	New: Updated the Seasons page New: Moved content up on some more pages dev: Live TV icons should be visible now `ee5ad227d0` dev: rearranged the code	2025-11-09 22:36:42 +05:30
lscambo13	cf17fb6538	Fix: Removed the workaround to position the card on top of title	2025-11-09 22:24:39 +05:30
lscambo13	30e0ad5488	Fix: Forgot to include a variable dev: code cleanup	2025-11-09 22:10:44 +05:30
lscambo13	ee5ad227d0	Fix: Playlist square card was not visible dev: simplified some selectors	2025-11-09 22:07:55 +05:30
lscambo13	b5f5a765ea	Fix: Next up section column width kept varying for some reason	2025-11-09 22:03:38 +05:30
lscambo13	864834b5a8	Fix: Reduced the bottom padding from episode title on phones	2025-11-09 22:02:10 +05:30
lscambo13	0243875a8c	Fix: Long words did not break in some cases Fix: Long sentences were overflowing dev: simplified some selectors	2025-11-09 22:01:22 +05:30
lscambo13	87374d3d3e	Fix: Now playing page did not have a background color on desktop	2025-11-09 21:57:38 +05:30
lscambo13	e9bee92007	Fix: Media rating font color and the play button text alignment was incorrect in the Media Bar plugin	2025-11-09 21:56:44 +05:30
lscambo13	10239e818e	dev: updated formatting	2025-11-09 21:48:48 +05:30
lscambo13	af01c3636d	Fix: Improved support for the Media Bar Plugin	2025-11-09 21:48:13 +05:30
lscambo13	17e2fe6940	dev: added Prettier config	2025-11-04 20:53:10 +05:30
lscambo13	69f4540ec5	Fix: Plot info was not aligned to the bottom on older browsers	2025-11-04 20:10:36 +05:30
lscambo13	8f620b489f	Fix: Dark overlay on Continue Watching and Chapter cards did not render correctly on some browsers #130 ? dev: improved compatibility with Firefox	2025-11-04 20:09:46 +05:30
lscambo13	556acc22c5	Fix: Main media buttons were overlapping the plot info in episode pages #169	2025-11-04 19:58:26 +05:30
lscambo13	1e0eaae2a0	Fix: Drop-down menu font style was not applying on Firefox #110	2025-11-04 19:56:56 +05:30
lscambo13	82dd0469d5	dev: Allowed hiding the overlay button on mobile #162	2025-11-03 23:05:45 +05:30
bibi0019	36290112c3	Fix: Ensure Skip Intro Button is readable on jellyfin 10.11 (#165 )	2025-11-03 22:47:37 +05:30
lscambo13	fa6dde9f1b	dev: Allowed text-based titles to be shown using a variable	2025-11-03 22:40:55 +05:30
lscambo13	8575b9b2b4	New: Increased the font size of episode title	2025-11-03 22:34:57 +05:30
lscambo13	bf23c34fbf	Fix: EPG rows were displayed incorrectly on Firefox #164	2025-11-03 22:34:16 +05:30
lscambo13	f7aae10db0	New: Avoid adding empty space if both plot and tagline are empty	2025-11-03 22:32:45 +05:30
lscambo13	349a720cd2	Fix: Tweaked paddings around the track selection menus to be more consistent dev: rearranged code	2025-11-03 22:31:29 +05:30
lscambo13	b9ceded828	Fix: Some scroll buttons were not aligned with their section headings	2025-11-03 22:23:18 +05:30
lscambo13	1647f40140	dev: Allowed clear logos to be hidden using a variable	2025-11-03 22:21:43 +05:30
lscambo13	bfdd8d8576	New: Updated the program list style to match how the songs list in album pages looks	2025-11-03 22:18:37 +05:30
lscambo13	8398ee7058	Fix: Program list was limited to single column	2025-11-03 22:14:11 +05:30
lscambo13	c5dca7ffb3	Fix: Recording button text and icon did not have a gap	2025-11-03 22:11:57 +05:30
lscambo13	be84634dae	Fix: Play button was bugged in dialogs i.e. live tv program	2025-11-03 22:10:46 +05:30
lscambo13	733e091072	Fix: Gradient was scaling poorly on long pages with lots of episodes	2025-11-03 22:07:49 +05:30
lscambo13	42bc537897	New: Allow users to hide the original/foreign media title using a variable	2025-10-29 06:59:01 -07:00
lscambo13	48811065aa	Fix: Attempting to prevent the title from overlapping the clear logo	2025-10-29 06:53:38 -07:00
lscambo13	33afcd750c	Fix: TV Show cards were displayed incorrectly on the home page in Mixed libraries section	2025-10-28 06:25:11 -07:00