Fix: Prevented long section headings from breaking into another line on the homepage on phones

New: Updated styling for the Media Bar support add-on
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
2026-02-11 08:45:11 +00:00 · 2025-12-30 23:08:46 +05:30 · 2025-12-30 23:05:06 +05:30 · 2025-12-30 21:38:02 +05:30 · 2025-12-29 00:56:39 +05:30 · 2025-12-29 00:33:31 +05:30
11 changed files with 4699 additions and 290 deletions
--- a/README.md
+++ b/README.md
@@ -1,15 +1,32 @@
 <!-- Banner Image -->
 <img src="https://github.com/lscambo13/ElegantFin/blob/main/Theme/assets/img/banner.png?raw=true" alt="ElegantFin Theme for Jellyfin - Banner">

-# ⭐ ElegantFin Theme
-This is a Jellyfin theme inspired from Jellyseerr to improve the overall look and experience with various fixes to the UI/UX. It gives Jellyfin a fresh, modern look, and it aims to work on mobile, desktop, and TV, with just one import.
+<div align="center">
+  <a href="https://www.jsdelivr.com/package/gh/lscambo13/ElegantFin">
+    <img
+      src="https://img.shields.io/jsdelivr/gh/hm/lscambo13/ElegantFin?style=flat&logo=jsdelivr&logoColor=%23f65e34&label=jsDelivr%20Hits&labelColor=white&color=%23f65e34"
+      alt="jsDelivr Requests"
+    />
+  </a>
+  <br>
+  <a href="https://github.com/lscambo13/ElegantFin/stargazers">
+    <img
+      src="https://img.shields.io/github/stars/lscambo13/ElegantFin?style=flat&logo=github&logoColor=%231f2328&label=GitHub%20Stars&labelColor=white&color=%231f2328"
+      alt="GitHub Repo stars"
+    />
+  </a>
+</div>

+## ⭐ ElegantFin Theme
+
+This is a Jellyfin theme inspired from Jellyseerr to improve the overall look and experience with various fixes to the UI/UX. It gives Jellyfin a fresh, modern look, and it aims to work on mobile, desktop, and TV, with just one import.

 #### **Author:** [lscambo13](https://github.com/lscambo13)

 <hr>

 ### ✨ Key Features
+
 -   modern layouts and color tones
 -   new and improved animations on most elements
 -   rounded corners and even spacing everywhere
@@ -22,13 +39,14 @@ This is a Jellyfin theme inspired from Jellyseerr to improve the overall look an
 <hr>

 ### 🖼️ Theme Showcase
+
 Captured on ElegantFin v25.08.02

 <details>
  <summary> 💻 <i>Desktop and </i>📱 <i>Mobile Screenshots</i></summary>

 | Desktop                                                                                                                                                                                                              | Mobile                                                                                                                                                                       |
-| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/desktop/21.%20Login%20Page.webp?raw=true"><br><strong>Login Page</strong></div>                | <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/mobile/21.%20Login%20Page.webp?raw=true"></div>        |
 | <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/desktop/1.%20Homepage.webp?raw=true"><br><strong>Homepage</strong></div>                       | <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/mobile/1.%20Homepage.webp?raw=true"></div>             |
 | <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/desktop/2.%20Movies%20Library.webp?raw=true"><br><strong>Movies Library</strong></div>         | <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/mobile/2.%20Movies%20Library.webp?raw=true"></div>     |
@@ -56,7 +74,7 @@ Captured on ElegantFin v25.08.02
  <summary> 📺 <i>TV Screenshots</i></summary>

 | TV View                                                                                                                                                                                                      |
-| ------------------------------------------------------------------------------------------------------------- |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/tv/21.%20Login%20Page.webp?raw=true"><br><strong>Login Page</strong></div>             |
 | <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/tv/1.%20Homepage.webp?raw=true"><br><strong>Homepage</strong></div>                    |
 | <div align="center"><img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/previews-v25.08.02/optimized/tv/2.%20Movies%20Library.webp?raw=true"><br><strong>Movies Library</strong></div>      |
@@ -77,12 +95,8 @@ Captured on ElegantFin v25.08.02

 </details>

-
-
-
 https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390

-
 <hr>

 ### 👇 How to install/setup this theme?
@@ -110,7 +124,6 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 4. Click save.
 </details>

-
 <hr>

 ### 🧩 How to customise this theme?
@@ -150,7 +163,6 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390

  <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{
@@ -165,7 +177,6 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390

  <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{
@@ -181,11 +192,13 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 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{
    --cardHoverEffect: none;
  }
 ```
+
 -   To undo this change, simply remove this code block or replace `none` with `""`.
 </details>

@@ -194,44 +207,79 @@ https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd

  <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{
    --libraryLabelVisibility: block;
  }
 ```
+
 -   To undo this change, simply remove this code block or replace `block` with `none`.
 </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" />

-
 -   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");
 ```
+
 -   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>
+
+<details>
+  <summary><i>9. Change to alternative color themes</i></summary>
+
+  <img width="640" height="auto" alt="image" src="https://github.com/user-attachments/assets/0cab75aa-8fcd-4174-b0db-cc533b724bca" />
+
+-   Check out the [the theme Playground page](https://github.com/lscambo13/ElegantFin/discussions/221) for different color themes.
+-   You can also experiment and share your own take there if you wish.
+</details>
+
 <hr>

 ### 🆗 Tested on
- Jellyfin Server v10.11.1
+
+-   Jellyfin Server v10.11.5
 -   Microsoft Edge (Chromium)
 -   Jellyfin Android App v2.6.3

 <hr>

 ### 🛠️ Troubleshooting
+
 <details>
  <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 +289,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>
@@ -262,7 +310,6 @@ https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd
 -   It seems that modern Material Icons which this theme uses are [not compatible on some WebOS TVs](https://github.com/lscambo13/ElegantFin/issues/39). There is a [huge similar thread](https://www.reddit.com/r/youtubetv/comments/e27go3/chinese_symbols_instead_of_icons_on_lg_tv/) about this.
 -   This bug can be fixed by using the older icons, so I have implemented the following workaround to bring back older, supported icons.
 -   Simply add the following code at the end in Custom CSS box and save, then refresh your apps and webpages:
-  
    ```
    :root{
      --iconPack: 'Material Icons';
@@ -276,7 +323,6 @@ https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd
 -   First check [here](https://github.com/lscambo13/ElegantFin/issues?q=) whether a similar issue has been reported already. If it exists, upvote and comment there to let me know.
 -   Alternatively, create a new issue [here](https://github.com/lscambo13/ElegantFin/issues/new/choose).

-
 </details>
 <details>
  <summary>7️⃣ - <i>When can I expect another update?</i></summary>
@@ -290,8 +336,6 @@ https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd

 Please read the [Contributor Guidelines](./CONTRIBUTING.md) before opening pull requests.

-
 ### 🙏 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).
-
--- 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
@@ -92,9 +92,7 @@
    --sidePadding: 3.3%;
    --itemColumnGap: 1em;

-    --primaryItemPageNegativeSpace: 14vh;
-    --secondaryItemPageNegativeSpace: 60vh;
-    --clearLogoBottomSpace: 11em;
+    --minEpisodeCardWidth: 26em;

    --blurSmallest: blur(2px);
    --blurDefault: blur(5px);
@@ -156,9 +154,9 @@
       use 4.6em to get the solid app bar (cleaner with border) */
    --appBarHeight: 5em;

-    /* use 50% to crop the top of the backdrop image slightly (recommended) [default]; 
-       use 0% to prevent the cropping from top, or choose between 0% and 100% according to your preference */
-    --backdropPositionY: 50%;
+    /* use 10% to crop the top 10% of a backdrop image on a 16:9 screen (recommended) [default]; 
+       use a figure between 0% and 20% according to your liking */
+    --backdropTrimFromTop: 10%;
 }

 html {
@@ -169,11 +167,25 @@ html {
    -webkit-tap-highlight-color: transparent !important;
 }

+body {
+    --primaryItemPageNegativeSpace: 14vh;
+    --secondaryItemPageNegativeSpace: 60vh;
+    --clearLogoBottomSpace: 11em;
+}
+
+.layout-desktop > body:has(> audio[src]) {
+    --primaryItemPageNegativeSpace: calc(14vh + 5em);
+    --secondaryItemPageNegativeSpace: calc(60vh + 5em);
+}
+
 .layout-mobile {
    --itemColumnGap: 0;
    --headerColorGradient: var(--headerColorGradientAlt);
    --blurLargest: blur(12px);
    --headerBlurMask: linear-gradient(180deg, white 60%, 90%, transparent);
+}
+
+.layout-mobile > body {
    --secondaryItemPageNegativeSpace: 45vh;
 }

@@ -391,7 +403,7 @@ html {
    background: rgba(255, 255, 255, 0.05);
 }

-.card-hoverable .cardOverlayContainer:after {
+.cardOverlayContainer:after {
    content: var(--cardHoverEffect);
    transition: 0.5s;
    position: absolute;
@@ -493,7 +505,7 @@ html {
    color: white;
 }

-.cardOverlayContainer:has(.cardOverlayButton:hover) {
+.cardOverlayContainer:has(> button:hover) {
    backdrop-filter: var(--blurDefault);
 }

@@ -508,37 +520,13 @@ html {

 /* episode grid start */

-.layout-desktop .detailSection > #listChildrenCollapsible .vertical-list,
-.layout-desktop .detailPageContent > #childrenCollapsible .vertical-list {
+@supports (display: revert) {
+    .layout-desktop .vertical-list:has(.listItem-largeImage) {
        display: grid;
-    grid-template-columns: repeat(4, 1fr);
+        grid-template-columns: repeat(auto-fill, minmax(min(var(--minEpisodeCardWidth), 100%), 1fr));
        gap: var(--itemColumnGap);
    }

-@media (max-width: 100em) {
-    .layout-desktop .detailSection > #listChildrenCollapsible .vertical-list,
-    .layout-desktop .detailPageContent > #childrenCollapsible .vertical-list {
-        grid-template-columns: repeat(3, 1fr);
-    }
-}
-
-@media (max-width: 64em) {
-    .layout-desktop .listItemImage-large {
-        width: 100%;
-    }
-    .layout-desktop .detailSection > #listChildrenCollapsible .vertical-list,
-    .layout-desktop .detailPageContent > #childrenCollapsible .vertical-list {
-        grid-template-columns: repeat(2, 1fr);
-    }
-}
-
-@media (max-width: 40em) {
-    .layout-desktop .detailSection > #listChildrenCollapsible .vertical-list,
-    .layout-desktop .detailPageContent > #childrenCollapsible .vertical-list {
-        grid-template-columns: repeat(1, 1fr);
-    }
-}
-
    .layout-desktop .listItem-largeImage {
        display: grid;
        margin-bottom: 0 !important;
@@ -560,9 +548,9 @@ html {
        order: 1;
        grid-column: 1 / -1;
        height: max-content;
+        min-height: 15em;
        width: 100%;
        aspect-ratio: 16 / 9;
-    /* margin: 0 !important; */
        box-sizing: border-box;
    }

@@ -579,6 +567,7 @@ html {
        grid-column: 3;
        align-self: center;
    }
+}

 /* episode grid end */

@@ -1074,7 +1063,6 @@ html {
 #itemDetailPage .emby-scroller,
 #itemDetailPage .scrollX {
    margin: 0 calc(-1 * var(--sidePadding));
-    padding: 0 var(--sidePadding);
    padding-left: calc(var(--sidePadding) - 0.375em);
    /* mask-image: linear-gradient(90deg, transparent, white var(--sidePadding), white calc(100vw - var(--sidePadding)), transparent); */
 }
@@ -1086,10 +1074,14 @@ html {
 }

 .emby-scroller,
-.hiddenScrollX.scrollX {
+.scrollX {
    padding-left: calc(var(--sidePadding) - 0.375em);
 }

+.sectionTabs .scrollX {
+    padding-left: 0;
+}
+
 .itemsContainer:not(.editorsChoiceItemsContainer) {
    column-gap: var(--itemColumnGap);
 }
@@ -1104,11 +1096,6 @@ html {
    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;
@@ -1264,7 +1251,7 @@ html {
 }

 #itemDetailPage:has(.detailImageContainer .cardPadder-square:not(.person)) .itemBackdrop {
-    height: calc(100vh - 27vh - var(--secondaryItemPageNegativeSpace));
+    height: calc(100vh - 20vh - var(--secondaryItemPageNegativeSpace));
 }

 .detailLogo {
@@ -1330,7 +1317,7 @@ html {

 .layout-tv .detailImageContainer .card {
    width: 25vw !important;
-    display: grid !important;
+    display: block !important;
    position: fixed !important;
    top: 0;
    bottom: 0;
@@ -1515,7 +1502,7 @@ html,
 }

 .backdropImage {
-    background-position-y: var(--backdropPositionY);
+    background-position-y: clamp(0%, calc(var(--backdropTrimFromTop) * 5), 100%);
 }

 .backdropImage:after,
@@ -2199,10 +2186,6 @@ progress + span {
    }
 }

-.layout-tv .emby-checkbox:focus + span + .checkboxOutline {
-    transform: scale(1.75);
-}
-
 .cardIndicators {
    -webkit-align-items: center;
    align-items: center;
@@ -2906,9 +2889,9 @@ div[data-role="controlgroup"] a.ui-btn-active {
    padding-right: var(--sidePadding) !important;
 }

-.paddded-left {
+/* .padded-left {
    padding-left: var(--sidePadding) !important;
-}
+} */

 .layout-mobile .padded-right-withalphapicker {
    padding-left: 4.5%;
@@ -2988,8 +2971,13 @@ div[data-role="controlgroup"] a.ui-btn-active {
 }

 .sectionTitleTextButton > * {
-    padding: 0.3em 0 !important;
-    margin: 0 0 !important;
+    text-align: left;
+    padding: 0.3em 0;
+    /* margin: 0 0 !important; */
+    /* this prevents long library names from breaking into another line */
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }

 .dashboardSection .sectionTitleTextButton > .material-icons,
@@ -3287,18 +3275,13 @@ div[data-role="controlgroup"] a.ui-btn-active {
    display: var(--itemOriginalTitleVisibility);
 }

-.channelPrograms + .channelPrograms,
-.guide-channelHeaderCell + .guide-channelHeaderCell {
-    margin-top: 0;
-}
-
 .channelPrograms,
-.guide-channelHeaderCell,
 .programCell {
    border-color: transparent;
    /* this disables the 'color coded backgrounds' */
    background-color: transparent !important;
    border-radius: var(--smallRadius);
+    height: 4.42em;
 }

 .guideProgramName {
@@ -3320,24 +3303,40 @@ div[data-role="controlgroup"] a.ui-btn-active {
    padding: 0;
 }

-.guideChannelImage {
-    background-color: rgba(255, 255, 255, 0.05);
-    bottom: 0.35em;
-    right: 0.35em;
-    top: 0.35em;
-    width: calc(100% - 0.7em);
-    border-radius: var(--smallerRadius);
+.layout-mobile .guideChannelImage {
+    background-position: center;
+    width: calc(100% - var(--sidePadding));
+    right: 0;
+}
+
+.guide-channelHeaderCell {
+    background-color: rgba(255, 255, 255, 0.125);
+    margin: 0.35em 0.7em 0.7em 0.7em;
+    width: auto;
+    height: calc(4.42em - 0.7em);
+    border-radius: var(--smallRadius);
+}
+
+.guideChannelNumber {
+    font-size: 1em;
 }

 #guideTab {
    padding-top: 3em !important;
 }

-.guide-channelHeaderCell:focus,
-.programCell:focus {
+.guide-channelHeaderCell:focus {
    background-color: var(--highlightOutlineColor) !important;
 }

+.programCell:focus {
+    background-color: transparent !important;
+}
+
+.programCell:focus > .guideProgramName {
+    background-color: var(--highlightOutlineColor);
+}
+
 .emby-select-iconbutton {
    background-color: var(--selectorBackgroundColor);
    border: var(--defaultLighterBorder);
@@ -3750,12 +3749,12 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
    padding: 0;
 }

-.headerTabs.sectionTabs {
-    display: grid;
+.sectionTabs {
+    display: inline-grid;
    height: var(--appBarHeight);
 }

-.layout-mobile .headerTabs.sectionTabs {
+.layout-mobile .sectionTabs {
    align-content: center;
 }

@@ -3801,7 +3800,7 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
    padding: 0 0.5em;
 }

-/* this prevents the section tabs from hiding all the way up */
+/* this prevents the section tabs from hiding all the way up on phones (not-tablets)*/
 .headroom--unpinned {
    -webkit-transform: translateY(calc(-1 * var(--appBarHeight) - var(--borderWidth)));
    transform: translateY(calc(-1 * var(--appBarHeight) - var(--borderWidth)));
@@ -3826,14 +3825,7 @@ 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;
-}
-
-.headerTabs.sectionTabs .emby-tab-button {
+.sectionTabs .emby-tab-button {
    display: inline-flex;
    margin: 0.25em 0.5em;
    padding: 0 1.25em;
@@ -3844,18 +3836,15 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
    background-color: var(--darkerGradientPointAlpha);
 }

-.headerTabs.sectionTabs .emby-tab-button-active {
+.sectionTabs .emby-tab-button-active {
    margin: 0.25em 0.5em;
    color: black;
    background-color: var(--textColor);
 }

-.layout-mobile .headerTabs.sectionTabs .emby-tab-button:first-child {
-    margin-left: var(--sidePadding);
-}
-
-.layout-mobile .headerTabs.sectionTabs .emby-tab-button:last-child {
-    margin-right: var(--sidePadding);
+/* 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) {
@@ -3866,14 +3855,28 @@ 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 */
-    .libraryPage:not(.noSecondaryNavPage):not(.layout-tv .libraryPage) {
-        padding-top: 6.8em !important;
+    /* this reduces page top padding when section tabs are collapsed */
+    .libraryPage:not(.noSecondaryNavPage) {
+        padding-top: calc(var(--appBarHeight) + 0.5em) !important;
+    }
+
+    /* this fixes the header like on desktop on larger tablet screens */
+    .headroom--unpinned {
+        -webkit-transform: translateY(0);
+        transform: translateY(0);
+    }
+}
+
+@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;
    }
 }

@@ -3882,16 +3885,27 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
    .sectionTabs {
        font-size: 100%;
    }
+
+    /* this keeps the section tabs expanded on TVs under 100em width */
+    .layout-tv .sectionTabs {
+        margin-top: unset;
    }

-/* 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 */
+    /* this increases page top padding when section tabs are expanded on TVs*/
    .layout-tv .libraryPage:not(.noSecondaryNavPage) {
-    padding-top: 6em !important;
+        padding-top: calc(var(--appBarHeight) * 2 + 0.5em) !important;
+    }
+}
+
+@media (max-width: 75em) {
+    /* these margins are applied only on phones, not tablets*/
+    .layout-mobile .sectionTabs .emby-tab-button:first-child {
+        margin-left: var(--sidePadding);
+    }
+
+    .layout-mobile .sectionTabs .emby-tab-button:last-child {
+        margin-right: var(--sidePadding);
+    }
 }

 .layout-tv .headerLeft {
@@ -3900,7 +3914,7 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
 }

 /* this allows switching between the header styles easily */
-#reactRoot > div:nth-of-type(3) {
+#reactRoot > div:nth-child(3) {
    container-name: skinHeader;
    container-type: size;
    height: var(--appBarHeight);
@@ -3929,22 +3943,13 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
        z-index: -1;
    }

-    .layout-mobile .headerTop {
-        height: calc(var(--appBarHeight) - 1em);
-    }
-
-    .headerTabs.sectionTabs {
+    .sectionTabs {
        padding-bottom: 1.5em;
    }

-    .layout-mobile .headerTabs.sectionTabs {
+    .layout-mobile .sectionTabs {
        align-content: center;
    }
-
-    .headroom--unpinned {
-        -webkit-transform: translateY(calc(-0.75 * var(--appBarHeight) - var(--borderWidth)));
-        transform: translateY(calc(-0.75 * var(--appBarHeight) - var(--borderWidth)));
-    }
 }

 .nowPlayingPage {
@@ -3956,6 +3961,8 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
    background: linear-gradient(transparent, var(--darkerGradientPointAlpha) 20em);
 }

+/* performance improvements fot low-end TVs - start */
+
 /* .layout-tv *,
 .layout-tv *::before,
 .layout-tv *::after {
@@ -3977,11 +3984,28 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
    display: none !important;
 } */

+/* .layout-tv .emby-checkbox:focus + span + .checkboxOutline {
+    transform: scale(1.75);
+} */
+
 .layout-tv .show-focus:focus,
-.layout-tv .show-animation:focus {
+.layout-tv .show-animation:focus,
+.emby-select-focusscale:focus {
    transform: none !important;
 }

+.layout-tv .focuscontainer,
+.layout-tv .backdropImage {
+    animation-duration: 0s !important;
+    backdrop-filter: none;
+}
+
+.card.show-animation .cardBox {
+    transition: transform 0.05s ease-out, -webkit-transform 0.05s ease-out;
+}
+
+/* performance improvements fot low-end TVs - end */
+
 /* basic styling for the Media Bar Plugin - start
 for extended styling, use the add-on */

--- 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
@@ -40,8 +40,9 @@

 [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);
+    font-size: clamp(1em, max(2.5vh, 2vw), 2em);
    font-weight: 800;
    color: white;
    font-family: "Noto Sans";
@@ -50,6 +51,24 @@
    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;
@@ -114,8 +133,3 @@
    background-color: var(--colorOverlayRecordedtvCover) !important;
    background-image: var(--urlRecordedtvCover) !important;
 }
-
-[data-type="CollectionFolder"] .cardContent::before,
-[data-type="UserView"] .cardContent::before {
-    content: attr(aria-label);
-}
--- 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
@@ -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,84 @@
    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);
+.pause-button {
+    top: 1em !important;
 }

-    .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);
+    }
+}
+
+@media only screen and (max-height: 767px) and (orientation: landscape) {
+    #slides-container {
+        height: 57%;
+    }
+
+    .logo-container {
+        top: 3%;
    }
 }

--- 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/workspace.code-workspace
+++ b/workspace.code-workspace
@@ -9,5 +9,9 @@
        "editor.formatOnSave": true,
        "prettier.useTabs": false,
        "prettier.printWidth": 120,
+        "cSpell.words": [
+            "Jellyfin",
+            "Jellyseerr"
+        ],
    }
 }
Author	SHA1	Message	Date
lscambo13	756e4a181b	Fix: Prevented long section headings from breaking into another line on the homepage on phones	2025-12-30 23:08:46 +05:30
lscambo13	a3e52a43de	New: Updated styling for the Media Bar support add-on 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	2025-12-30 23:05:06 +05:30
lscambo13	8112d4401b	Fix: Improved responsiveness of header tabs and page padding - Prevented header tabs from shifting up too early on TVs - Updated the page padding-top to adjust in sync with header tabs position - Made the page top padding aware of the header height to prevent overlaps	2025-12-30 21:38:02 +05:30
lscambo13	c665c54f53	dev: updated the readme.md file	2025-12-29 00:56:39 +05:30
lscambo13	af6d340e8e	dev: updated the customisation section	2025-12-29 00:33:31 +05:30
lscambo13	fa0cf75972	dev: possible fix for #196 #192 #163	2025-12-28 22:45:01 +05:30
lscambo13	ec7b63b431	Merge branch 'main' of https://github.com/lscambo13/ElegantFin	2025-12-28 22:21:43 +05:30
lscambo13	0f8474eccd	New: Stop hiding the header on scroll on tablets to match the desktop layout behavior	2025-12-28 22:21:21 +05:30
lscambo13	4083a7a0b9	Fix: Header tabs were being cut-off on tablet screens #220	2025-12-28 22:19:00 +05:30
lscambo13	8f27df07bc	dev: simplified some selectors	2025-12-28 22:13:59 +05:30
lscambo13	6a11b9cb60	Fix: Header tabs were sightly off-center on phones/tablets due to an unintentional left padding	2025-12-28 22:11:19 +05:30
lscambo13	c972bb0a48	Update header level in README.md Change header level for the ElegantFin Theme section.	2025-12-24 07:46:06 +05:30
lscambo13	bf4241a700	Fix: Posters were not visible on some older TVs Thanks to @BullenMoore https://github.com/lscambo13/ElegantFin/issues/182#issuecomment-3678911997	2025-12-21 22:14:22 +05:30
lscambo13	1fe65b63e6	Fix: Reworked Live TV cells to fix issues with cover overlap. focus color and height	2025-12-21 20:50:25 +05:30
lscambo13	872ac32747	Fix: Grid layout was unintentionally being applied on all layouts #217	2025-12-21 20:43:16 +05:30
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