RELEASE: ElegantFin v26.09.05

New: Updated README.md with more entries and preview images
dev: update README.md
2026-10-26 17:39:34 +00:00 · 2026-09-04 18:21:41 +05:30 · 2026-09-03 20:30:25 +05:30 · 2026-09-02 20:54:21 +05:30 · 2026-09-02 20:53:58 +05:30 · 2026-09-02 20:49:03 +05:30
9 changed files with 5221 additions and 284 deletions
@@ -128,6 +128,10 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 > 	
 </details>

+<br>
+
+**Note:** On Jellyfin v12, you will need to set `User Settings > Display > Display Mode` to `"Desktop (Legacy)"` on desktop, or `"Mobile (Legacy)"` on mobile. The new (non-legacy) UI is not yet fully supported.
+
 <hr>

 ### 🧩 How to customise this theme?
@@ -158,6 +162,8 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 > - Third, replace `<YOUR-JELLYFIN-SERVER-ADDRESS>` with your Jellyfin server address, for example, `http://192.168.0.1:8096`.
 > - Don't forget the correct http or https in your domain.
 > - You can also modify the parameters, for example blur size or the resolution, according to your liking.
+> - You can also change the text shown on the login button by adding `--loginPageText: "placeholder";` line to the same `:root` block.
+> - Replace `"placeholder"` with the text of your choice.
 > - Once done, save and refresh your apps and webpages.

 </details>
@@ -174,7 +180,7 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 >     }
 >     ```
 > - To hide the three-dot button that shows up next to these buttons, also include `--menuButtonVisibility: none;` in `:root{}`
-> - To undo these changes, simply remove this code block or switch between `block` and `none`.
+> - To undo these changes, simply remove the code block or switch between `block` and `none`.

 </details>

@@ -241,16 +247,26 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 
 > 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)
+> - There are three app bar styles to choose from: seamless (default), solid, and fully transparent.
+> - No action is needed for the seamless style, it is the default and shows a frosted blur effect.
+> - To enable the solid app bar style (cleaner with a visible border), copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
 > 	```css
 > 	:root{
-> 	  /* example */
-> 	  --appBarHeight: 4.6em;
+> 	  --appBarSeamlessBlur: none;
+> 	  --appBarBlurStrength: var(--blurLargest);
+> 	  --appBarColor: var(--headerColor);
+> 	  --appBarBorder: var(--defaultBorder);
+> 	  --appBarTabsPadding: 0;
 > 	}
 > 	```
-> - To undo this change, simply remove this code block.
+> - To enable the fully transparent app bar style, copy and paste only the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
+> 	```css
+> 	:root{
+> 	  --appBarSeamlessBlur: none;
+> 	  --appBarColor: transparent;
+> 	}
+> 	```
+> - To undo these changes, simply remove the code block.
 
 </details>

@@ -259,7 +275,7 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 
 >   <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.
+> - Check out the [the theme Playground page](https://github.com/lscambo13/ElegantFin/discussions/221) for different color themes created by other users.
 > - You can also experiment and share your own take there if you wish.
 
 </details>
@@ -280,6 +296,98 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 
 </details>

+<details>
+  <summary><i>11. Toggle the title and logo elements on media pages</i></summary>
+ 
+> - Caution: These options control which elements appear on movie, TV show, and artist detail pages. They are meant for experienced users, so please do not randomly enable or disable them unless you know what you are doing.
+> - These variables control the visibility of the original title, clear logo, and main title on movie/TV show and artist detail pages.
+> 	```css
+> 	:root{
+> 	  /* Movie & TV Pages */
+> 	  --itemOriginalTitleVisibility: block; /* block: show the original title if available [default]; none: always hide it */
+> 	  --clearLogoVisibility: block; /* block: show the clear logo if available [default]; none: always hide it */
+> 	  --itemTitleVisibility: none; /* none: hide the main title if its logo is available [default]; block: always show it */
+> 
+> 	  /* Music Pages */
+> 	  --artistClearLogoVisibility: block; /* block: show the artist clear logo if available [default]; none: always hide it */
+> 	  --artistTitleVisibility: none; /* none: hide the artist title [default]; block: always show it */
+> 	  --artistPageBackground: unset; /* unset: dim the artist background for better clear logo visibility on desktops [default]; none: show it fully */
+> 	}
+> 	```
+> - To undo these changes, simply remove the variables you added or set the values back to their defaults shown above.
+ 
+</details>
+
+<details>
+  <summary><i>12. Toggle the visibility of some UI elements on mobile</i></summary>
+
+> <img width="640" height="auto" alt="image" src="https://github.com/user-attachments/assets/c11a1d94-9b56-419a-93df-5a6a43ec00c1" />
+>
+> - These variables control the visibility of small UI elements that show up on phones and small screens.
+>     ```css
+>     :root {
+>         --miniOverlayButtonVisibility: block; /* block: show the mini play or three-dot button on cards on mobile [default]; none: always hide them on mobile */
+>         --endsAtVisibility: block; /* block: show the 'Ends at...' time indicator on phones [default]; none: always hide it on phones */
+>         --criticsRatingVisibility: none; /* none: hide the critics tomato rating on phones [default]; block: show it on phones */
+>     }
+>     ```
+> - To undo these changes, simply remove the variables you added or set the values back to their defaults shown above.
+
+</details>
+
+<details>
+  <summary><i>13. Adjust component sizes (advanced)</i></summary>
+ 
+> - Caution: Changing these values may break the layout on different screen sizes, so please only adjust them if you are comfortable with CSS.
+> - These variables control the standard corner radius, border, and spacing values used throughout the theme.
+> 	```css
+> 	:root{
+>     /* Corner radius */
+> 	  --largerRadius: 1.25em; 
+> 	  --largeRadius: 1em; 
+> 	  --smallRadius: 0.5em; 
+> 	  --smallerRadius: 0.375em;
+>
+>     /* Border thickness */
+> 	  --borderWidth: 0.06em; 
+> 	  --borderWidthDouble: 0.12em; 
+> 	}
+> 	```
+> - To undo these changes, simply remove the variables you added or set the values back to their defaults shown above.
+ 
+</details>
+
+<details>
+  <summary><i>14. Switch between IMDb and TMDB star colors</i></summary>
+
+> <img width="1066" height="207" alt="star" src="https://github.com/user-attachments/assets/6ddc2ab6-5ea5-45bb-82a8-9256e594e410" />
+>
+> - Star rating icon in ElegantFin uses the TMDB colors by default, since that is where the rating is sourced from.
+> - To switch them to the gold IMDb colors, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
+>     ```css
+>     .starIcon {
+>         --colors: var(--imdb);
+>     }
+>     ```
+> - To go back to the TMDB colors, replace `var(--imdb)` with `var(--tmdb)` or simply remove the code block.
+
+</details>
+
+<details>
+  <summary><i>15. Switch between Light and Dark modes</i></summary>
+
+| Desktop                                                                                                                                         | Mobile                                                                                                                |
+| ----------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
+| <div align="center"><img src="https://github.com/user-attachments/assets/3483bca2-bc5f-4444-a815-51b27a38c4eb"><br><strong>Dark</strong></div>  | <div align="center"><img src="https://github.com/user-attachments/assets/f3c9d4e2-7e72-498e-ad3b-d1db0fcecd19"></div> |
+| <div align="center"><img src="https://github.com/user-attachments/assets/a300fc79-c2c4-40bd-a18b-c0a45e381082"><br><strong>Light</strong></div> | <div align="center"><img src="https://github.com/user-attachments/assets/9f1d80df-dcdb-4088-a3e6-15ed4209f3ee"></div> |
+
+> - ElegantFin now comes with a dark by default, but an alternative light mode is also available
+> - To switch between these modes, go to `User Settings > Display > Theme` and select either **Dark** or **Light**.
+> - The "Theme" setting above is **not** to be confused with the "Server Dashboard Theme" in the Dashboard, which is **not supported**.
+> - Only the Light and Dark theme options are supported, and Jellyfin does not automatically switch between them, so you have to change it manually.
+
+</details>
+
 <hr>

 ### 🆗 Tested on
@@ -317,7 +425,7 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
  <summary>3️⃣ - <i>Why do I notice visual bugs and inconsistencies on Jellyfin Media Player?</i></summary>
 
 > - JMP is based on Qt 5.x which uses a very outdated web engine. It does not support many new CSS features, so it is unsupported.
-> - [Jellyfin Desktop](https://github.com/jellyfin/jellyfin-desktop) is the new official client moving forward. It seems to be in testing right now. Use it for better compatibility or use the web app instead.
+> - You might want to try [Jellium Desktop](https://github.com/andrewrabert/jellium-desktop) which is an unofficial client, and it is still in testing right now.
 
 </details>

@@ -345,7 +453,8 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
 <details>
  <summary>6️⃣ - <i>How do I report bugs/issues?</i></summary>
 
-> - 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.
+> - First check [issues](https://github.com/lscambo13/ElegantFin/issues?q=is%3Aissue) and [discussions](https://github.com/lscambo13/ElegantFin/discussions?discussions_q=) to see whether a similar issue has been reported already. If it exists, upvote and comment there to let me know.
+> - Before reporting a bug, make sure the issue is not caused by a plugin. Temporarily disable your plugins, or remove any plugin add-on CSS, to see if the issue persists.
 > - Alternatively, create a new issue [here](https://github.com/lscambo13/ElegantFin/issues/new/choose).
 
 </details>
@@ -1 +1 @@
-/*! ElegantFin Theme v26.06.06 for Jellyfin by lscambo13 */@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");:root{--activeColor:#775bf4;--activeColorAlpha:rgba(119,91,244,.9);--appBarHeight:5em;--artistClearLogoVisibility:block;--artistPageBackground:unset;--artistTitleVisibility:none;--backdropTrimFromTop:10%;--backgroundAlphaOverlay:linear-gradient(180deg,var(--darkerGradientPointAlpha) 80%,transparent);--backgroundGradient:linear-gradient(0deg,var(--darkerGradientPoint) 35%,var(--lighterGradientPoint));--blurDefault:blur(5px);--blurLarge:blur(10px);--blurLargest:blur(20px);--blurSmallest:blur(2px);--borderColor:#47505c;--borderWidth:0.06em;--borderWidthDouble:0.12em;--bottomOSDGradient:linear-gradient(0deg,rgba(0,0,0,.8),45%,transparent);--btnDeleteBorderColor:#d95454;--btnDeleteColor:#a91d1d;--btnMiniPlayBorderColor:#32a769;--btnMiniPlayColor:#299a5d;--btnSubmitBorderColor:#756fe2;--btnSubmitColor:#3d36b2;--cardBackgroundGradient:linear-gradient(0deg,var(--darkerGradientPoint),25%,var(--lighterGradientPoint));--cardFooterGradient:linear-gradient(0deg,rgba(0,0,0,.9),40%,transparent);--cardHoverEffect:"";--checkboxCheckedBgColor:#4f46e5;--clearLogoVisibility:block;--darkerBorderColor:#31373f;--darkerGradientPoint:#111827;--darkerGradientPointAlpha:rgba(17,24,39,.85);--defaultBorder:var(--borderWidth) solid var(--borderColor);--defaultLighterBorder:var(--borderWidth) solid var(--lighterBorderColor);--dimTextColor:#9ca3af;--drawerColor:rgba(30,40,54,.9);--elegantFinFooterText:"ElegantFin v26.06.06";--extraCardButtonsVisibility:none;--gradientPointAlpha:rgba(29,38,53,.3);--headerBackground:var(--headerColorGradient);--headerBlurLayerVisibility:"";--headerBlurMask:linear-gradient(180deg,#fff 50%,85%,transparent);--headerColor:rgba(30,40,54,.8);--headerColorGradient:linear-gradient(180deg,rgba(30,40,54,.95) 30%,55%,transparent 90%);--headerColorGradientAlt:linear-gradient(180deg,#1e2836,70%,transparent);--highlightOutlineColor:#2563eb;--hoverGradientH:linear-gradient(90deg,transparent,hsla(0,0%,100%,.35) 45%,hsla(0,0%,100%,.35) 55%,transparent);--hoverGradientV:linear-gradient(0deg,transparent,hsla(0,0%,100%,.35) 45%,hsla(0,0%,100%,.35) 55%,transparent);--iconPack:"Material Symbols Rounded";--itemBackdropMask:linear-gradient(180deg,rgba(0,0,0,.8),75%,transparent);--itemColumnGap:1em;--itemOriginalTitleVisibility:block;--itemTitleVisibility:none;--largeRadius:1em;--largerRadius:1.25em;--libraryLabelVisibility:none;--lighterBorderColor:hsla(0,0%,100%,.2);--lighterGradientPoint:#1d2635;--lighterGradientPointAlpha:rgba(29,38,53,.85);--loginPageBgUrl:url();--loginPageText:"Sign in to continue";--menuButtonVisibility:block;--minEpisodeCardWidth:26em;--miniOverlayButtonVisibility:block;--osdSeekBarBufferedColorAlpha:hsla(0,0%,50%,.5);--osdSeekBarPlayedColor:var(--textColor);--osdSeekBarThumbColor:#fff;--overlayPlayButtonPosition:2.8em;--resumeCardScale:1;--selectorBackgroundColor:#374151;--selectorBackgroundColorAlpha:rgba(55,65,81,.5);--shadow:0.1em 0.1em 0.15em rgba(0,0,0,.3);--sidePadding:3.3%;--smallerRadius:0.375em;--smallRadius:0.5em;--tableBodyColor:#1f2937;--textColor:#d1d5db;--topOSDGradient:linear-gradient(180deg,rgba(0,0,0,.8),45%,transparent);--uiAccentColor:#756fe2;color-scheme:dark}html{font-family:Inter,sans-serif;font-optical-sizing:auto;font-style:normal;font-weight:425;-webkit-tap-highlight-color:transparent!important}body{--clearLogoBottomSpace:11em;--primaryItemPageNegativeSpace:14vh;--secondaryItemPageNegativeSpace:60vh}select{text-overflow:ellipsis}.layout-desktop>body:has(>audio[src]){--primaryItemPageNegativeSpace:calc(14vh + 5em);--secondaryItemPageNegativeSpace:calc(60vh + 5em)}.layout-mobile{--blurLargest:blur(12px);--headerBlurMask:linear-gradient(180deg,#fff 60%,90%,transparent);--headerColorGradient:var(--headerColorGradientAlt);--itemColumnGap:0.5em}.layout-mobile>body{--secondaryItemPageNegativeSpace:45vh}@font-face{font-family:Material Symbols Rounded Minimal;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/l/font?kit=sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjzarESMdAUY9qjb3u1M7e05tMSFFiwiIx7ihGnzWmz-lkbsBJUso54WUKiEWtV5-yu0mchXaMnO1vqpcxiqEd46a1XUtwWncyNNmxYr8hocRsPBG56BqeEkny0qMU_aSz_M2MYR8p9qc8uUfT0rnccAg__qWWJGuzJMRCBsajdQcef&skey=70ddea8fe54d532e&v=v346) format("woff2")}@font-face{font-family:Material Symbols Rounded;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/s/materialsymbolsrounded/v346/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2) format("woff2")}.material-icons{direction:ltr;display:inline-block;font-family:var(--iconPack),Material Icons!important;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;font-style:normal;font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 48;font-weight:400;letter-spacing:normal;line-height:1;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision;text-transform:none;vertical-aliLine truncated
+/*! ElegantFin Theme v26.09.05 for Jellyfin by lscambo13 */@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");@font-face{font-family:Material Symbols Rounded Minimal;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/l/font?kit=sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjzarESMdAUY9qjb3u1M7e05tMSFFiwiIx7ihGnzWmz-lkbjBJUko54uQNlqhKP2qww7THOuDASqI-hkRJowUB4AMXqmksLbVSypWpZCoCuR4ppEVE-Vm2EBGaEWVT1QQVqin1CJL8x-Ze-xGUuG3wq4dfIUCyyVOwlP0NhUaux0cITqh7BYw&skey=70ddea8fe54d532e&v=v362) format("woff2")}@font-face{font-family:Material Symbols Rounded;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/s/materialsymbolsrounded/v362/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2) format("woff2")}:root{--elegantFinFooterText:"ElegantFin v26.09.05";font-family:Inter,sans-serif;font-optical-sizing:auto;font-style:normal;font-weight:425;-webkit-tap-highlight-color:transparent!important;--fill:1;--wght:400;--grad:0;--opsz:30;color:var(--textColor);color-scheme:dark;--largerRadius:1.25em;--largeRadius:1em;--smallRadius:0.5em;--smallerRadius:0.375em;--borderWidth:0.06em;--borderWidthDouble:0.12em;--defaultBorder:var(--borderWidth) solid var(--borderColor);--defaultLighterBorder:var(--borderWidth) solid var(--lighterBorderColor);--sidePadding:3.3%;--itemColumnGap:1em;--minEpisodeCardWidth:26em;--appBarHeight:5em;--blurSmallest:blur(2px);--blurDefault:blur(5px);--blurLarge:blur(10px);--blurLargest:blur(20px);--darkerGradientPoint:#111827;--darkerGradientPointAlpha:rgba(17,24,39,.85);--lighterGradientPoint:#1d2635;--lighterGradientPointAlpha:rgba(29,38,53,.85);--gradientPointAlpha:rgba(29,38,53,.3);--headerColor:rgba(30,40,54,.8);--drawerColor:rgba(30,40,54,.9);--borderColor:#47505c;--darkerBorderColor:#31373f;--lighterBorderColor:hsla(0,0%,100%,.2);--selectorBackgroundColor:#384252;--selectorBackgroundColorAlpha:rgba(56,66,82,.5);--textColor:#d1d5db;--dimTextColor:#9ca3af;--fullContrastColor:#fff;--zeroContrastColor:#000;--svgIconFilter:none;--clearLogoFilter:none;--accentColor:#5d55e7;--accentHoverColor:#756fe2;--semiTransparentAccentColor:hsla(0,0%,100%,.125);--btnPlayColor:var(--textColor);--btnPlayBorderColor:var(--borderColor);--btnMiniPlayColor:#299a5d;--btnMiniPlayBorderColor:#32a769;--btnDeleteColor:#a91d1d;--btnDeleteBorderColor:#d95454;--btnSubmitColor:#3d36b2;--btnSubmitBorderColor:#756fe2;--checkboxCheckedBgColor:#4f46e5;--highlightOutlineColor:#2563eb;--hoverBackgroundColor:var(--textColor);--hoverTabBackgroundColor:hsla(0,0%,100%,.9);--hoverTextColor:#fff;--activeBackgroundColor:var(--semiTransparentAccentColor);--activeTextColor:#fff;--cardHoverBorderColor:#fff;--cardResumeProgressColor:var(--textColor);--multiSelectOverlayColor:rgba(0,0,0,.8);--dividerColor:hsla(0,0%,100%,.05);--textareaBackgroundColor:var(--selectorBackgroundColor);--tableBodyColor:#1f2937;--osdSeekBarPlayedColor:var(--textColor);--osdSeekBarBufferedColorAlpha:hsla(0,0%,50%,.5);--osdSeekBarThumbColor:#fff;--backgroundGradient:linear-gradient(0deg,var(--darkerGradientPoint) 35%,var(--lighterGradientPoint));--cardBackgroundGradient:linear-gradient(0deg,var(--darkerGradientPoint),25%,var(--lighterGradientPoint));--backgroundAlphaOverlay:linear-gradient(180deg,var(--darkerGradientPointAlpha) 80%,transparent);--headerColorGradient:linear-gradient(180deg,rgba(30,40,54,.95) 30%,55%,transparent 90%);--headerColorGradientAlt:linear-gradient(180deg,#1e2836,70%,transparent);--headerBlurMask:linear-gradient(180deg,#fff 50%,85%,transparent);--cardFooterGradient:linear-gradient(0deg,hsla(0,0%,5%,.95),40%,transparent);--topOSDGradient:linear-gradient(180deg,rgba(0,0,0,.8),45%,transparent);--bottomOSDGradient:linear-gradient(0deg,rgba(0,0,0,.8),45%,transparent);--hoverGradientV:linear-gradient(0deg,transparent,hsla(0,0%,100%,.35) 45%,hsla(0,0%,100%,.35) 55%,transparent);--hoverGradientH:linear-gradient(90deg,transparent,hsla(0,0%,100%,.35) 45%,hsla(0,0%,100%,.35) 55%,transparent);--itemBackdropMask:linear-gradient(180deg,rgba(0,0,0,.8),75%,transparent);--shadow:0.1em 0.1em 0.15em rgba(0,0,0,.3);--cardShadow:0 1px 6px 0px rgba(0,0,0,.3);--iconShadow:0px 0px 2px rgba(0,0,0,.8),1px 1px 0px rgba(0,0,0,.5);--headerBackground:var(--headerColorGradient);--loginPageBgUrl:url();--loginPageText:"Sign in to continue";--overlayPlayButtonPosition:2.8em;--iconPack:"Material Symbols Rounded";--extraCardButtonsVisibility:none;--menuButtonVisibility:block;--itemOriginalTitleVisibility:block;--libraryLabelVisibility:none;--clearLogoVisibility:block;--itemTitleVisibility:none;--artistClearLogoVisibility:block;--artistTitleVisibility:none;--artistPageBackground:unset;--miniOverlayButtonVisibility:block;--endsAtVisibility:block;--criticsRatingVisibility:none;--cardHoverEffect:"";--backdropTrimFromTop:10%;--resumeCardScale:1}:root[data-theme=light]{color-scheme:light;--fill:0;--darkerGradientPoint:#f2f2f2;--darkerGradientPointAlpha:hsla(0,0%,95%,.85);--lighterGradientPoiLine truncated
@@ -1 +1 @@
-/*! Add-on: Custom Media Covers v26.06.06 for the ElegantFin Theme for Jellyfin by lscambo13 */:root{--colorOverlayAnimeCover:#bdcb63;--colorOverlayBooksCover:#a64446;--colorOverlayBoxsetsCover:#dbb435;--colorOverlayFoldersCover:#ad3c71;--colorOverlayHomevideosCover:#275ab9;--colorOverlayLivetvCover:#11629f;--colorOverlayMixedCover:#c23a3a;--colorOverlayMoviesCover:#c16768;--colorOverlayMusicCover:#0b5d48;--colorOverlayPlaylistsCover:#763dd8;--colorOverlayRecordedmoviesCover:#343434;--colorOverlayRecordedtvCover:#78641c;--colorOverlaySportsCover:#e97e3c;--colorOverlayTvshowsCover:#8c952b;--urlAnimeCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/anime.webp);--urlBooksCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/books.webp);--urlBoxsetsCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/boxsets.webp);--urlFoldersCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/folders.webp);--urlHomevideosCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/homevideos.webp);--urlLivetvCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/livetv.webp);--urlMixedCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/mixed.webp);--urlMoviesCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/movies.webp);--urlMusicCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/music.webp);--urlPlaylistsCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/playlists.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);--urlSportsCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/sports.webp);--urlTvshowsCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/tvshows.webp)}[data-type=CollectionFolder] .cardContent,[data-type=CollectionFolder] .defaultCardBackground,[data-type=UserView] .cardContent,[data-type=UserView] .defaultCardBackground{background-blend-mode:multiply;background-position:50%!important;background-size:cover!important;filter:contrast(.85)}.layout-tv [data-type=CollectionFolder]:before,.layout-tv [data-type=UserView]:before,[data-type=CollectionFolder] .cardContent:before,[data-type=UserView] .cardContent:before{color:#fff;content:attr(aria-label);font-family:Noto Sans;font-size:clamp(1em,max(2.5vh,2vw),2em);font-weight:800;position:absolute;text-align:center;white-space:normal;width:94%}.layout-tv [data-type=CollectionFolder]:before,.layout-tv [data-type=UserView]:before{align-content:center;bottom:0;display:grid;top:0;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-type=CollectionFolder][data-prefix=MIX] .cardContent{background-color:var(--colorOverlayMixedCover)!important;background-image:var(--urlMixedCover)!important}[dLine truncated
+/*! Add-on: Custom Media Covers v26.09.05 for the ElegantFin Theme for Jellyfin by lscambo13 */:root{--colorOverlayMoviesCover:#c16768;--colorOverlayTvshowsCover:#8c952b;--colorOverlayLivetvCover:#11629f;--colorOverlayPlaylistsCover:#763dd8;--colorOverlayBoxsetsCover:#dbb435;--colorOverlayMusicCover:#0b5d48;--colorOverlayHomevideosCover:#275ab9;--colorOverlayBooksCover:#a64446;--colorOverlayFoldersCover:#ad3c71;--colorOverlayMixedCover:#c23a3a;--colorOverlayRecordedmoviesCover:#343434;--colorOverlayRecordedtvCover:#78641c;--colorOverlayAnimeCover:#bdcb63;--colorOverlaySportsCover:#e97e3c;--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);--urlAnimeCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/anime.webp);--urlSportsCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/sports.webp)}[data-type=CollectionFolder] .cardContent,[data-type=CollectionFolder] .defaultCardBackground,[data-type=UserView] .cardContent,[data-type=UserView] .defaultCardBackground{background-blend-mode:multiply;background-position:50%!important;background-size:cover!important;filter:contrast(.85)}.layout-tv [data-type=CollectionFolder]:before,.layout-tv [data-type=UserView]:before,[data-type=CollectionFolder] .cardContent:before,[data-type=UserView] .cardContent:before{color:#fff;content:attr(aria-label);font-family:Noto Sans;font-size:clamp(1em,max(2.5vh,2vw),2em);font-weight:800;position:absolute;text-align:center;white-space:normal;width:94%}.layout-tv [data-type=CollectionFolder]:before,.layout-tv [data-type=UserView]:before{align-content:center;bottom:0;display:grid;top:0;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-type=CollectionFolder][data-prefix=MIX] .cardContent{background-color:var(--colorOverlayMixedCover)!important;background-image:var(--urlMixedCover)!important}[dLine truncated
@@ -0,0 +1,149 @@
+/*! Add-on: Custom Media Covers v26.09.05 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);
+    --colorOverlayAnimeCover: rgb(189, 203, 99);
+    --colorOverlaySportsCover: rgb(233, 126, 60);
+    --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);
+    --urlAnimeCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/anime.webp);
+    --urlSportsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/sports.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-type="CollectionFolder"][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-type="CollectionFolder"][data-prefix="REC"] .cardContent {
+    background-color: var(--colorOverlayRecordedtvCover) !important;
+    background-image: var(--urlRecordedtvCover) !important;
+}
+
+[data-type="CollectionFolder"][data-prefix="ANI"] .cardContent {
+    background-color: var(--colorOverlayAnimeCover) !important;
+    background-image: var(--urlAnimeCover) !important;
+}
+
+[data-type="CollectionFolder"][data-prefix="SPO"] .cardContent {
+    background-color: var(--colorOverlaySportsCover) !important;
+    background-image: var(--urlSportsCover) !important;
+}
@@ -1 +1 @@
-/*! Add-on: Media Bar Plugin Support v26.06.06 for the ElegantFin Theme for Jellyfin by lscambo13 */.detail-button:before,.favorite-button.favorited:before,.favorite-button:before,.play-button:before{font-weight:400}.play-button{font-family:Inter;font-size:1em;font-weight:500;order:1}.detail-button,.favorite-button{order:2}.backdrop,.backdrop-container,.backdrop-overlay{background-color:transparent;mask-image:linear-gradient(180deg,rgba(0,0,0,.85),70%,transparent);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85),70%,transparent)}.backdrop{transform-origin:center left}.rating-value{flex-wrap:wrap;justify-content:center}.age-rating{color:unset;font-family:Archivo Narrow,sans-serif;font-size:.8em}#slides-container{height:62%;left:var(--sidePadding);overflow:visible;position:absolute;top:calc(var(--appBarHeight)*2 + 1.25em);user-select:none;width:calc(100vw - var(--sidePadding)*2)}.slide{border:var(--defaultBorder);border-radius:var(--largerRadius);overflow:hidden;transition:border 0s}.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,.volume-toggle{top:1em!important}.separator-icon{color:var(--dimTextColor);font-size:5px}.dot{background-color:var(--textColor)!important;border-radius:.25em;height:.375em;opacity:.5;transition:width .5s;width:.375em}.dot.active{transform:none;width:2em}@media only screen and (orientation:landscape){.button-container,.dots-container,.genre,.info-container,.plot-container{top:unset}.button-container{bottom:3em}.dots-container{bottom:4.5em}.plot-container{bottom:7em;height:4em}.genre{bottom:12em}.info-container{bottom:14em}.logo-container{align-items:flex-end;max-width:35vw;top:3%}.gradient-overlay{background:linear-gradient(37deg,rgba(0,0,0,.2) 32%,rgb(29 29 29/7%) 47%,rgba(29,29,29,0));mask:none;-webkit-mask:none}}@media only screen and (max-width:767px) and (orientation:portrait){.button-container{bottom:3em}.genre,.tomato-rating{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}.play-button{order:2}}@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%}}
+/*! Add-on: Media Bar Plugin Support v26.09.05 for the ElegantFin Theme for Jellyfin by lscambo13 */.detail-button:before,.favorite-button.favorited:before,.favorite-button:before,.play-button:before{font-weight:400}.play-button{font-family:Inter;font-size:1em;font-weight:500;order:1}.detail-button,.favorite-button{order:2}.backdrop-container,.backdrop-overlay,.backdrop:not(.tmla-mask){background-color:transparent;mask-image:linear-gradient(180deg,rgba(0,0,0,.85),70%,transparent);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85),70%,transparent)}.backdrop:not(.tmla-mask){transform-origin:center left}.rating-value{flex-wrap:wrap;justify-content:center}.age-rating{color:unset;font-family:Archivo Narrow,sans-serif;font-size:.8em}#slides-container{height:62%;left:var(--sidePadding);overflow:visible;position:absolute;top:calc(var(--appBarHeight)*2 + 1.25em);user-select:none;width:calc(100vw - var(--sidePadding)*2)}.slide{border:var(--defaultBorder);border-radius:var(--largerRadius);overflow:hidden;transition:border 0s}.logo-container{top:10vh}.backdrop-container,.backdrop-overlay,.backdrop:not(.tmla-mask){mask-image:none;-webkit-mask-image:none}.backdrop-overlay{background:linear-gradient(0deg,rgba(0,0,0,.85),40%,transparent)}.pause-button,.volume-toggle{top:1em!important}.separator-icon{color:var(--dimTextColor);font-size:5px}.dot{background-color:var(--textColor)!important;border-radius:.25em;height:.375em;opacity:.5;transition:width .5s;width:.375em}.dot.active{transform:none;width:2em}@media only screen and (orientation:landscape){.button-container,.dots-container,.genre,.info-container,.plot-container{top:unset}.button-container{bottom:3em}.dots-container{bottom:4.5em}.plot-container{bottom:7em;height:4em}.genre{bottom:12em}.info-container{bottom:14em}.logo-container{align-items:flex-end;max-width:35vw;top:3%}.gradient-overlay{background:linear-gradient(37deg,rgba(0,0,0,.2) 32%,rgb(29 29 29/7%) 47%,rgba(29,29,29,0));mask:none;-webkit-mask:none}}@media only screen and (max-width:767px) and (orientation:portrait){.button-container{bottom:3em}.genre,.tomato-rating{display:none}.dots-container{bottom:6em}.info-container{bottom:5em}.logo-container{top:calc(100% - 15em)}.backdrop:not(.tmla-mask){transform-origin:center}.left-arrow,.right-arrow{display:none!important}.play-button{order:2}}@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%}}
@@ -0,0 +1,206 @@
+/*! Add-on: Media Bar Plugin Support v26.09.05 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;
+    order: 1;
+}
+
+.detail-button,
+.favorite-button {
+    order: 2;
+}
+
+.backdrop:not(.tmla-mask),
+.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:not(.tmla-mask) {
+    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);
+    user-select: none;
+    position: absolute;
+    left: var(--sidePadding);
+    overflow: visible;
+}
+
+.slide {
+    border: var(--defaultBorder);
+    border-radius: var(--largerRadius);
+    overflow: hidden;
+    transition: border 0s;
+}
+
+.logo-container {
+    top: 10vh;
+}
+
+.backdrop:not(.tmla-mask),
+.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,
+.volume-toggle {
+    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 (orientation: landscape) {
+    .button-container,
+    .dots-container,
+    .plot-container,
+    .genre,
+    .info-container {
+        top: unset;
+    }
+
+    .button-container {
+        bottom: 3em;
+    }
+
+    .dots-container {
+        bottom: 4.5em;
+    }
+
+    .plot-container {
+        height: 4em;
+        bottom: 7em;
+    }
+
+    .genre {
+        bottom: 12em;
+    }
+
+    .info-container {
+        bottom: 14em;
+    }
+
+    .logo-container {
+        top: 3%;
+        align-items: flex-end;
+        max-width: 35vw;
+    }
+
+    .gradient-overlay {
+        mask: none;
+        -webkit-mask: none;
+        background: linear-gradient(37deg, rgb(0 0 0 / 20%) 32%, rgb(29 29 29 / 7%) 47%, rgb(29 29 29 / 0%) 100%);
+    }
+}
+
+@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:not(.tmla-mask) {
+        transform-origin: center;
+    }
+
+    .left-arrow,
+    .right-arrow {
+        display: none !important;
+    }
+
+    .play-button {
+        order: 2;
+    }
+}
+
+@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 */
@@ -6,10 +6,10 @@
        "postcss-cli": "^11.0.1"
    },
    "scripts": {
-        "build:theme": "postcss ./Theme/ElegantFin-theme-nightly.css -o ./Theme/ElegantFin-jellyfin-theme-build-latest-minified.css",
-        "build:covers-addon": "postcss ./Theme/assets/add-ons/custom-media-covers-nightly.css -o ./Theme/assets/add-ons/custom-media-covers-latest-min.css",
-        "build:mediabar-addon": "postcss ./Theme/assets/add-ons/media-bar-plugin-support-nightly.css -o ./Theme/assets/add-ons/media-bar-plugin-support-latest-min.css",
-        "build:release": "npm run build:theme && npm run build:covers-addon && npm run build:mediabar-addon",
+        "minify:theme": "postcss ./Theme/ElegantFin-theme-nightly.css -o ./Theme/ElegantFin-theme-nightly-min.css",
+        "minify:covers-addon": "postcss ./Theme/assets/add-ons/custom-media-covers-nightly.css -o ./Theme/assets/add-ons/custom-media-covers-nightly-min.css",
+        "minify:mediabar-addon": "postcss ./Theme/assets/add-ons/media-bar-plugin-support-nightly.css -o ./Theme/assets/add-ons/media-bar-plugin-support-nightly-min.css",
+        "minify:all": "npm run minify:theme && npm run minify:covers-addon && npm run minify:mediabar-addon",
        "watch:theme": "postcss ./Theme/ElegantFin-theme-nightly.css -o ./Theme/ElegantFin-theme-nightly-min.css --watch --verbose",
        "watch:covers-addon": "postcss ./Theme/assets/add-ons/custom-media-covers-nightly.css -o ./Theme/assets/add-ons/custom-media-covers-nightly-min.css --watch --verbose",
        "watch:mediabar-addon": "postcss ./Theme/assets/add-ons/media-bar-plugin-support-nightly.css -o ./Theme/assets/add-ons/media-bar-plugin-support-nightly-min.css --watch --verbose",
Author	SHA1	Message	Date
lscambo13	5efc1105e9	RELEASE: ElegantFin v26.09.05	2026-09-04 18:21:41 +05:30
lscambo13	e4705ac02b	New: Updated README.md with more entries and preview images	2026-09-03 20:30:25 +05:30
lscambo13	2f9c727a5b	dev: update README.md	2026-09-02 20:54:21 +05:30
lscambo13	c5f3e8804c	dev: update scripts	2026-09-02 20:53:58 +05:30
lscambo13	88e51158ce	New: Updated README.md with updated information and more customisation guides	2026-09-02 20:49:03 +05:30
lscambo13	d26a8e45d7	Fix: Improved compatibility with Jellyfin 12 Legacy UI - this fixes the credits table, clear logo position and music artist page	2026-09-02 19:51:12 +05:30
lscambo13	ed78c9f46a	New: A brand new Light theme and other various changes - this can be enabled from Settings > Display > Theme > Light - the Theme setting is not to be confused with Server Theme - the light theme brings slightly different icons and accents Other Changes - Added hover effect to app bar tabs and buttons - Updated shadows and transition effects on some icons - Added new css vars to make theming easier - Added monospace font variant to time text around seek bars - Removed the container query to fix issues it caused with the app bar - Added an optional way to enable fully transparent app bar - Refactored huge chunks of the code - Removed redundant code - Updated color formats for consistency Breaking Changes - some css var names have changed, so some modifications will stop working. You wil need to use the updated css vars. - app bar cannot be switched between seamless and solid styles with --appBarHeight anymore. You will need to use the code block documented in the :root block to get the solid app bar again.	2026-08-23 20:04:37 +05:30