RELEASE: ElegantFin v25.12.31

Changes:
- redesigned the side indicator dots
- tweaked the layout specifically for phones and TVs
- improved responsiveness on TV layout
- made parental rating font consistent with its siblings
- positioned it correctly for the experimental layout
- positioned the pause button in the top-right corner
- updated colors of dot separators
- tweaked its distance from the header on small screens

README.md

@@ -336,6 +336,14 @@ https://github.com/user-attachments/assets/b5868cd2-8df9-490d-a2b6-4386c6ddcd56
 
 Please read the [Contributor Guidelines](./CONTRIBUTING.md) before opening pull requests.
 
+This is a hobby project. If it helped you, your support really means a lot.
+
+<a href="https://www.buymeacoffee.com/lscambo13">
+  <img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=☕&slug=lscambo13&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=d28456" />
+</a>
+
+<hr>
+
 ### 🙏 Feedback Appreciated
 
 Please use the right template when creating an [issue](https://github.com/lscambo13/ElegantFin/issues/new/choose) to [report bugs](https://github.com/lscambo13/ElegantFin/issues/new?template=bug_report.md) or [provide suggestions](https://github.com/lscambo13/ElegantFin/issues/new?template=feature_request.md).

Theme/ElegantFin-theme-nightly.css

@@ -1091,16 +1091,6 @@ body {
     font-size: 1.5rem !important;
 }
 
-.sectionTitleContainer-cards {
-    padding-top: 0;
-    margin: 0.75em 0 -0.75em 0;
-}
-
-.layout-mobile :not(.sectionTitleContainer-cards) > .sectionTitle-cards {
-    text-align: left;
-    margin: 0.75em 0 -0.75em 0;
-}
-
 .emby-scrollbuttons,
 [dir="ltr"] .emby-scrollbuttons {
     padding-top: 1.25em;
@@ -2975,9 +2965,26 @@ div[data-role="controlgroup"] a.ui-btn-active {
     color: white !important;
 }
 
+.sectionTitleContainer-cards {
+    padding-top: 0;
+    margin: 0.75em 0 -0.75em 0;
+}
+
 .sectionTitleTextButton > * {
+    text-align: left;
+    /* !important are needed for proper alignment on phones */
     padding: 0.3em 0 !important;
     margin: 0 0 !important;
+    /* this prevents long library names from breaking into another line */
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 88vw;
+}
+
+/* this is needed for alignment of non-clickable section headings on phones */
+.layout-mobile div > .sectionTitle-cards {
+    margin: 0.75em 0 -0.75em 0 !important;
 }
 
 .dashboardSection .sectionTitleTextButton > .material-icons,
@@ -3825,13 +3832,6 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
     overflow: visible !important;
 }
 
-.layout-tv .sectionTabs {
-    /* this prevents the section tabs from being off-center in the music library
-     after I set the overflow to visible to fix visual glitches */
-    width: 70%;
-    margin-right: 2em;
-}
-
 .sectionTabs .emby-tab-button {
     display: inline-flex;
     margin: 0.25em 0.5em;
@@ -3849,6 +3849,11 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
     background-color: var(--textColor);
 }
 
+/* this increases page top padding when section tabs are expanded */
+.libraryPage:not(.noSecondaryNavPage) {
+    padding-top: calc(var(--appBarHeight) * 2 + 0.5em) !important;
+}
+
 @media (min-width: 75em) {
     .sectionTabs {
         -webkit-align-items: center;
@@ -3857,14 +3862,15 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
         align-self: center;
         -webkit-justify-content: center;
         justify-content: center;
+        /* this collapses the section tabs expanded earlier than the default 100em max-width */
         margin-top: calc(-1 * var(--appBarHeight));
         position: relative;
         width: auto;
     }
 
-    /* this reduces top page padding when section tabs are minimised */
+    /* this reduces page top padding when section tabs are collapsed */
-    .libraryPage:not(.noSecondaryNavPage):not(.layout-tv .libraryPage) {
+    .libraryPage:not(.noSecondaryNavPage) {
-        padding-top: 6.8em !important;
+        padding-top: calc(var(--appBarHeight) + 0.5em) !important;
     }
 
     /* this fixes the header like on desktop on larger tablet screens */
@@ -3874,11 +3880,28 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
     }
 }
 
+@media (min-width: 100em) {
+    /* this reduces top padding when section tabs are collapsed on TVs */
+    .layout-tv .libraryPage:not(.noSecondaryNavPage) {
+        padding-top: calc(var(--appBarHeight) + 0.5em) !important;
+    }
+}
+
 @media (max-width: 100em) {
     /* this makes the font size consistent */
     .sectionTabs {
         font-size: 100%;
     }
+
+    /* this keeps the section tabs expanded on TVs under 100em width */
+    .layout-tv .sectionTabs {
+        margin-top: unset;
+    }
+
+    /* this increases page top padding when section tabs are expanded on TVs*/
+    .layout-tv .libraryPage:not(.noSecondaryNavPage) {
+        padding-top: calc(var(--appBarHeight) * 2 + 0.5em) !important;
+    }
 }
 
 @media (max-width: 75em) {
@@ -3892,16 +3915,6 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
     }
 }
 
-/* this increased top page padding when section tabs are maximised */
-.libraryPage:not(.noSecondaryNavPage) {
-    padding-top: 9.5em !important;
-}
-
-/* this limits top page padding when section tabs always on TVs */
-.layout-tv .libraryPage:not(.noSecondaryNavPage) {
-    padding-top: 6em !important;
-}
-
 .layout-tv .headerLeft {
     overflow: unset;
     margin: 0em 0.6em;

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

@@ -1,2 +1,2 @@
-/* Add-on: Media Bar plugin support v25.11.25 for the ElegantFin Theme for Jellyfin by lscambo13 */
+/* Add-on: Media Bar plugin support v25.12.31 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%}}
+ .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;font-family:"Archivo Narrow",sans-serif;color:unset}#slides-container{width:calc(100vw - (2 * var(--sidePadding)));height:62%;top:calc(var(--appBarHeight) * 2 + 1.25em);border:var(--defaultBorder);border-radius:var(--largerRadius);transition:all .125s,border 0s;user-select:none;position:absolute;left:var(--sidePadding)}.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)}.pause-button{top:1em!important}.separator-icon{font-size:5px;color:var(--dimTextColor)}.dot{border-radius:.25em;width:.375em;height:.375em;transition:width .5s;opacity:.5;background-color:var(--textColor)!important}.dot.active{width:2em;transform:none}@media only screen and (max-width:767px) and (orientation:portrait){.button-container{bottom:3em}.tomato-rating,.genre{display:none}.dots-container{bottom:6em}.info-container{bottom:5em}.logo-container{top:calc(100% - 15em)}.backdrop{transform-origin:center}.left-arrow,.right-arrow{display:none!important}}@media (min-width:75em){#slides-container{top:calc(var(--appBarHeight) + 1.25em)}.layout-tv #slides-container{top:calc(var(--appBarHeight) * 2 + 1.25em)}}@media (min-width:100em){.layout-tv #slides-container{top:calc(var(--appBarHeight) + 1.25em)}}@media only screen and (max-height:767px) and (orientation:landscape){#slides-container{height:57%}.logo-container{top:3%}}

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

@@ -32,16 +32,20 @@
 
 .age-rating {
     font-size: 0.8em;
+    font-family: "Archivo Narrow", sans-serif;
+    color: unset;
 }
 
 #slides-container {
     width: calc(100vw - (2 * var(--sidePadding)));
     height: 62%;
-    top: var(--appBarHeight);
+    top: calc(var(--appBarHeight) * 2 + 1.25em);
     border: var(--defaultBorder);
     border-radius: var(--largerRadius);
     transition: all 0.125s, border 0s;
     user-select: none;
+    position: absolute;
+    left: var(--sidePadding);
 }
 
 .logo-container {
@@ -59,28 +63,74 @@
     background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), 40%, transparent);
 }
 
-@media only screen and (max-width: 767px) and (orientation: portrait) {
+.pause-button {
-    .button-container {
+    top: 1em !important;
-        top: calc(50% + 20vh);
-        transform: translateX(-50%) scale(0.8);
 }
 
-    .tomato-rating {
+.separator-icon {
+    font-size: 5px;
+    color: var(--dimTextColor);
+}
+
+.dot {
+    border-radius: 0.25em;
+    width: 0.375em;
+    height: 0.375em;
+    transition: width 0.5s;
+    opacity: 0.5;
+    background-color: var(--textColor) !important;
+}
+
+.dot.active {
+    width: 2em;
+    transform: none;
+}
+
+@media only screen and (max-width: 767px) and (orientation: portrait) {
+    .button-container {
+        bottom: 3em;
+    }
+
+    .tomato-rating,
+    .genre {
         display: none;
     }
 
     .dots-container {
-        top: calc(50% + 19vh);
+        bottom: 6em;
+    }
+
+    .info-container {
+        bottom: 5em;
+    }
+
+    .logo-container {
+        top: calc(100% - 15em);
     }
 
     .backdrop {
         transform-origin: center;
     }
+
+    .left-arrow,
+    .right-arrow {
+        display: none !important;
+    }
 }
 
 @media (min-width: 75em) {
     #slides-container {
-        top: calc(0.5 * var(--appBarHeight));
+        top: calc(var(--appBarHeight) + 1.25em);
+    }
+
+    .layout-tv #slides-container {
+        top: calc(var(--appBarHeight) * 2 + 1.25em);
+    }
+}
+
+@media (min-width: 100em) {
+    .layout-tv #slides-container {
+        top: calc(var(--appBarHeight) + 1.25em);
     }
 }
 
@@ -94,10 +144,4 @@
     }
 }
 
-@media only screen and (max-width: 767px) and (orientation: portrait) {
-    .logo-container {
-        top: 50%;
-    }
-}
-
 /* this styles the media bar plugin - end */

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

@@ -0,0 +1,147 @@
+/* Add-on: Media Bar plugin support 25.12.31 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;
+    font-family: "Archivo Narrow", sans-serif;
+    color: unset;
+}
+
+#slides-container {
+    width: calc(100vw - (2 * var(--sidePadding)));
+    height: 62%;
+    top: calc(var(--appBarHeight) * 2 + 1.25em);
+    border: var(--defaultBorder);
+    border-radius: var(--largerRadius);
+    transition: all 0.125s, border 0s;
+    user-select: none;
+    position: absolute;
+    left: var(--sidePadding);
+}
+
+.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);
+}
+
+.pause-button {
+    top: 1em !important;
+}
+
+.separator-icon {
+    font-size: 5px;
+    color: var(--dimTextColor);
+}
+
+.dot {
+    border-radius: 0.25em;
+    width: 0.375em;
+    height: 0.375em;
+    transition: width 0.5s;
+    opacity: 0.5;
+    background-color: var(--textColor) !important;
+}
+
+.dot.active {
+    width: 2em;
+    transform: none;
+}
+
+@media only screen and (max-width: 767px) and (orientation: portrait) {
+    .button-container {
+        bottom: 3em;
+    }
+
+    .tomato-rating,
+    .genre {
+        display: none;
+    }
+
+    .dots-container {
+        bottom: 6em;
+    }
+
+    .info-container {
+        bottom: 5em;
+    }
+
+    .logo-container {
+        top: calc(100% - 15em);
+    }
+
+    .backdrop {
+        transform-origin: center;
+    }
+
+    .left-arrow,
+    .right-arrow {
+        display: none !important;
+    }
+}
+
+@media (min-width: 75em) {
+    #slides-container {
+        top: calc(var(--appBarHeight) + 1.25em);
+    }
+
+    .layout-tv #slides-container {
+        top: calc(var(--appBarHeight) * 2 + 1.25em);
+    }
+}
+
+@media (min-width: 100em) {
+    .layout-tv #slides-container {
+        top: calc(var(--appBarHeight) + 1.25em);
+    }
+}
+
+@media only screen and (max-height: 767px) and (orientation: landscape) {
+    #slides-container {
+        height: 57%;
+    }
+
+    .logo-container {
+        top: 3%;
+    }
+}
+
+/* this styles the media bar plugin - end */