New: Allowed clear logos to be visible on older browsers

New: Allowed desktop users to configure how much of the backdrop is cropped from the top
Fix: Frosted effect on page backdrops had stopped working on mobile
2025-09-18 12:40:16 +00:00 · 2025-09-12 08:08:25 -07:00 · 2025-09-12 07:57:11 -07:00 · 2025-09-09 10:31:57 -07:00 · 2025-09-09 10:09:09 -07:00 · 2025-09-09 09:14:32 -07:00
13 changed files with 4389 additions and 213 deletions
--- a/README.md
+++ b/README.md
@@ -118,7 +118,8 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 <details>
  <summary><i>1. Custom media covers for user media libraries</i></summary>

- [Previews](https://github.com/lscambo13/ElegantFin/blob/main/custom-media-covers.md#%EF%B8%8F-presets-modify-these-styles-according-to-your-own-liking)
+<img width="640" height="auto" alt="image" src="https://github.com/user-attachments/assets/05eb7cb6-3ac9-444b-8988-9776e0815664" />
+
 - Read more about this experimental add-on [here](https://github.com/lscambo13/ElegantFin/blob/main/custom-media-covers.md)

 </details>
@@ -126,7 +127,10 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 <details>
  <summary><i>2. Custom background image for the login page</i></summary>

- [Preview](https://user-images.githubusercontent.com/16425113/129554147-6ac7ba51-43e7-4c8e-ba77-e646a3ef6b12.jpg)
+<img width="auto" height="350" alt="image" src="https://github.com/user-attachments/assets/70834545-d1cd-4496-975a-4310030dedd9" />
+<img width="auto" height="350" alt="image" src="https://github.com/user-attachments/assets/c3cf2d96-0db0-4acb-bc61-7b08d5445452" />
+
+
 - To enable the background wallpaper on the login screen, first tick the 'Enable the splash screen' option in your Jellyfin Dashboard below the Custom CSS Box.
 - Second, copy and paste the following code at the end in Custom CSS box but don't save yet.
  ```
@@ -143,6 +147,9 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 <details>
  <summary><i>3. Enable extra overlay buttons on cards on desktop</i></summary>

+  <img width="400" height="auto" alt="image" src="https://github.com/user-attachments/assets/cb8479c2-c577-4d54-a567-697f54291a3b" />
+
+
 - To enable 'Mark Played' and 'Add to Favorites' buttons that show up at the bottom right corner of cards while hovering, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
  ```
  :root{
@@ -155,6 +162,9 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 <details>
  <summary><i>4. Place the overlay play button at the center of cards on desktop</i></summary>

+  <img width="400" height="auto" alt="image" src="https://github.com/user-attachments/assets/ebde9db6-cd2f-47b5-bdb9-cee1e9852e2e" />
+
+
 - To bring the mini play button to the center of cards, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
  ```
  :root{
@@ -167,6 +177,8 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 <details>
  <summary><i>5. Disable the card hover effect on desktop</i></summary>

+https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd
+
 - To disable the reflection on cards that shows when hovering over them on desktop, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
 ```
  :root{
@@ -179,6 +191,9 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 <details>
  <summary><i>6. Enable labels below library cards</i></summary>

+  <img width="640" height="auto" alt="image" src="https://github.com/user-attachments/assets/5999a5de-5134-4b02-94aa-6306768a251c" />
+
+
 - To enable text labels under the media library cards, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
 ```
  :root{
@@ -191,6 +206,9 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 <details>
  <summary><i>7. Enable experimental support 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" />
+
+
 - ElegantFin does not support any plugins by default, so to to add external support for [this plugin](https://github.com/IAmParadox27/jellyfin-plugin-media-bar), copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
 ```
 	@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/media-bar-plugin-support-latest-min.css");
@@ -201,8 +219,8 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 <hr>

 ### 🆗 Tested on 
- Jellyfin Server v10.10.6
- Jellyfin Android App v2.6.2
+- Jellyfin Server v10.10.7
+- Jellyfin Android App v2.6.3

 <hr>

--- 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.08.08.css
+++ b/Theme/ElegantFin-theme-v25.08.08.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
@@ -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;
--- a/Theme/assets/add-ons/custom-media-covers-v25.01.25.css
+++ b/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 */
--- a/Theme/assets/add-ons/custom-media-covers-v25.08.02.css
+++ b/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;
+}
--- a/Theme/assets/add-ons/custom-media-covers-v25.08.08.css
+++ b/Theme/assets/add-ons/custom-media-covers-v25.08.08.css
--- 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 +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}}
--- a/Theme/assets/add-ons/media-bar-plugin-support-nightly.css
+++ b/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,29 +41,75 @@
 }

 /* 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;
+    height: 62%;
+    top: calc(1.5 * var(--appBarHeight));
    border: var(--defaultBorder);
    border-radius: var(--largerRadius);
    transition: all .125s, border 0s;
    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,
-.layout-desktop .backdrop-container,
-.layout-desktop .backdrop-overlay {
+.backdrop,
+.backdrop-container,
+.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;
+    }
+}
+
+@media (min-width: 75em) {
+    #slides-container {
+        top: calc(.5 * var(--appBarHeight));
+    }
+}
+
 /* this styles the media bar plugin - end */
--- a/Theme/assets/add-ons/media-bar-plugin-support-v25.08.02.css
+++ b/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;
--- a/Theme/assets/add-ons/media-bar-plugin-support-v25.08.08.css
+++ b/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 */
Author	SHA1	Message	Date
lscambo13	1571e301e0	New: Allowed clear logos to be visible on older browsers	2025-09-12 08:08:25 -07:00
lscambo13	ea12292a77	New: Allowed desktop users to configure how much of the backdrop is cropped from the top Fix: Frosted effect on page backdrops had stopped working on mobile	2025-09-12 07:57:11 -07:00
lscambo13	4a045ef8c9	Fix: Removed the bottom border from the last row in the credits box	2025-09-09 10:31:57 -07:00
lscambo13	8536ee6a90	Fix: Tweaked the app bar frosted effect on mobile and padding on TV	2025-09-09 10:09:09 -07:00
lscambo13	e62de7469c	Fix: Posters for recorded live tv programmes were not visible in the media page	2025-09-09 09:14:32 -07:00
lscambo13	5994dde7a1	New: Updated the card placeholder icon color	2025-09-09 09:09:29 -07:00
lscambo13	309abc2dc3	dev: Disabled some trivial fixes for simplicity	2025-08-22 13:19:50 -07:00
lscambo13	72cc664480	New: ElegantFin version number is now also visible in the Settings page for future compatibility and its visibility on TVs dev: TVs don't have Dashboard settings, so TV users were unable to check the version they were running. Also, in future dashboard theming might not be allowed, so I needed a different place to show the version number for debugging purposes.	2025-08-22 13:04:19 -07:00
lscambo13	10900884e7	Fix: Simplified the way play/resume labels on the play button are rendered to support foreign languages	2025-08-22 12:57:55 -07:00
lscambo13	e47b7813cf	Fix: Simplified the way borders are drawn in the media credits table This eliminates the brief flash of a horizontal line visible when opening a media or cast page on older browsers Fix: Removed the negative bottom margin I added earlier on plot container to avoid overlaps	2025-08-22 12:52:35 -07:00
lscambo13	07fcd74ccd	Fix: Backdrops were too bright/visible on TVs, causing difficulty in text legibility	2025-08-22 12:47:20 -07:00
lscambo13	9d1c26e798	Fix: Cards were misaligned on older browsers Fix: Some cards had blue focus outline on TVs	2025-08-22 12:44:37 -07:00
lscambo13	9679d8db4d	Fix: Prevented the column gap from being applied to the Editor's Choice Plugin	2025-08-19 10:45:45 -07:00
lscambo13	4eb19f2bd3	Fix: Keep the plot expanded on TVs to fix issues with remote navigation	2025-08-19 10:16:59 -07:00
lscambo13	4b8838b1c0	dev: Simplified some selectors	2025-08-19 10:13:21 -07:00
lscambo13	818f755610	New: Updated the README.md with preview videos and images in the customisation section	2025-08-14 12:18:27 -07:00
lscambo13	7372edd10f	Fix: Tweaked the Media Bar top position in relation to the app bar height	2025-08-14 11:50:07 -07:00
lscambo13	24afe0f45c	dev: Reworked the app bar code to make it more manageable	2025-08-14 10:48:12 -07:00
lscambo13	fb57bffd2f	Fix: Positioned the audio and subtitle selection menu closer to the play button on TVs for easier navigation with remote Fix: Reduced the top padding on pages on TVs	2025-08-14 10:31:36 -07:00
lscambo13	dd4e2b392b	Fix: App bar tabs were stick in the expanded state on TVs Fix: Workaround to prevent these tabs from overlapping buttons on TVs	2025-08-14 10:21:06 -07:00
lscambo13	d5bf3ed7ad	Fix: Increased the card sizes on TVs	2025-08-14 10:16:41 -07:00
lscambo13	348495cffb	dev: updated the testing environment	2025-08-11 12:23:43 -07:00
lscambo13	025dbd7c1d	Fix: Prevented the Custom CSS Box from becoming infinitely long and shifting its position randomly upon interaction	2025-08-11 12:23:03 -07:00
lscambo13	00f14e00dd	New: Allow users to easily switch between two App Bar styles using a single var	2025-08-11 12:19:55 -07:00
lscambo13	f9bef351d9	Fix: Fixed the skip intro button alignment according to Jellyfin version 10.10.7	2025-08-08 07:08:45 -07:00
lscambo13	a9aaf0382c	RELEASE: ElegantFin v25.08.08	2025-08-07 12:50:12 -07:00
lscambo13	298670a69e	Fix: Font size in Custom Media Covers add-on should scale more consistently now	2025-08-07 12:34:01 -07:00
lscambo13	6f11dbc715	Fix: Made the backdrop animation a bit lighter on the media item page	2025-08-07 11:33:08 -07:00
lscambo13	f4f78a1bb7	Fix: Tweaked the card sizes a bit more to make them bigger on large displays	2025-08-07 07:12:47 -07:00
lscambo13	8fe01cb54c	dev: code cleanup	2025-08-07 07:11:45 -07:00
lscambo13	86fdfeaf3c	dev: Prevented the play button from shrinking below 10em	2025-08-07 07:10:00 -07:00
lscambo13	e8c4fadd04	Fix: Centered the library items a bit more on mobile	2025-08-07 07:08:17 -07:00
lscambo13	af5de16a41	Fix: Aligned the skip intro button to the viewport	2025-08-07 07:03:37 -07:00
lscambo13	0f897b91cd	Fix: Updated the media bar plugin styling on mobile to match the desktop layout	2025-08-06 10:03:55 -07:00
lscambo13	41c6259e85	Fix: Section tabs were always stuck at bottom of the header on older browsers dev: Simplified the selector	2025-08-06 08:25:28 -07:00
lscambo13	2ac4097966	Fix: Updated the media bar plugin styling on TVs to match the desktop layout	2025-08-06 08:15:40 -07:00
lscambo13	8f19efcc84	Fix: Repositioned the skip button on TVs as a workaround to fix navigation with remote bug: 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	2025-08-06 08:13:10 -07:00
James Corley-Goldberg	6847cad1ce	Fix: add macos compatible fallback fonts for textarea (#64 ) Co-authored-by: lscambo13 <32175188+lscambo13@users.noreply.github.com>	2025-08-05 09:27:36 -07:00
lscambo13	110e628007	dev: updated comments for clarity	2025-08-05 09:13:18 -07:00
lscambo13	867f68992f	dev: Included add-on versions to make debugging easier	2025-08-05 08:49:11 -07:00
lscambo13	21b94b3eae	Fix: Custom Media Covers add-on was still on an older version; it should be the latest now	2025-08-05 08:46:52 -07:00
lscambo13	b6d2bb0379	Fix: Up Next title line was overflowing the dialog container on older browsers	2025-08-05 08:28:17 -07:00
lscambo13	52f993e437	Revert: Rolled back theme video support for now because of issues with the main video player `a3a1765efe`	2025-08-05 07:41:03 -07:00
lscambo13	d7cb89cd8b	Fix: Tweaked the card size scaling to prevent cards from becoming too small at resolutions above 1080p Previously: 7 posters at 1080p resolution 17 posters at 4K resolution Now: 7 posters at 1080p resolution 12 posters at 4K resolution	2025-08-05 07:15:05 -07:00
lscambo13	a3a1765efe	New: Added styling for Theme Videos	2025-08-05 06:38:01 -07:00