RELEASE: ElegantFin v25.01.25

New: Modified the style a bit

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,36 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**ElegantFin:**
+ - Version [e.g. 24.12.11]
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+ - Screen Resolution [e.g. 1920x1080]
+
+**Smartphone or TV (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/pull_request_template.md

@@ -0,0 +1,28 @@
+# Description
+
+Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context.
+
+Fixes # (issue)
+
+## Type of change
+
+- [ ] Bug fix
+- [ ] New feature 
+
+# How Has This Been Tested?
+
+Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration.
+
+**Test Configuration**:
+* Jellyfin server version:
+* Jellyfin client:
+* Client browser name and version:
+* Device:
+
+# Checklist:
+
+- [ ] I have performed a self-review of my own code
+- [ ] I have commented my code in hard-to-understand areas
+- [ ] I have included relevant comparison screenshots where nececssary
+- [ ] I have tested my changes on the TV layout and Default layout of Jellyfin
+- [ ] I have also tested my changes on multiple devices and screen sizes

.gitignore

@@ -0,0 +1 @@
+/tmp.txt

Add-Ons.md

@@ -0,0 +1,226 @@
+# 🧩 Add-on:  Custom media covers for ElegantFin
+This is a Jellyfin add-on that allows you to customise My Media cover arts. This is an experimental feature, so limited support will be provided.
+
+#### **Author:** [lscambo13](https://github.com/lscambo13)
+
+<hr>
+
+### 🖼️ Presets: Modify these styles according to your own liking 
+
+<details>
+  <summary><i>This is how the covers look without this add-on.</i></summary>
+
+![Screenshot 2025-01-19 191836](https://github.com/user-attachments/assets/49425368-cfe3-4c3b-9533-eb18b64c84d6)
+
+</details>
+
+<details>
+  <summary><i>This is how they look with this add-on, by default.</i></summary>
+	
+![image](https://github.com/user-attachments/assets/5284af32-3b2e-4150-938c-f6d0fdfddf06)
+
+```
+@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");
+```
+
+</details>
+
+<details>
+  <summary><i>You can also change these covers.</i></summary>
+	
+![Screenshot 2025-01-19 192015](https://github.com/user-attachments/assets/11719ef1-36ca-46e9-8030-b464a5ae5b79)
+
+</details>
+
+<details>
+  <summary><i>You can achieve a minimal design too.</i></summary>
+
+![Screenshot 2025-01-19 192133](https://github.com/user-attachments/assets/daaefe74-d3a9-4bb4-8389-9605a4364372)
+
+```
+@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");
+
+:root{
+    --colorOverlayMoviesCover: transparent;
+    --colorOverlayTvshowsCover: transparent;
+    --colorOverlayLivetvCover: transparent;
+    --colorOverlayPlaylistsCover: transparent;
+    --colorOverlayBoxsetsCover: transparent;
+    --colorOverlayMusicCover: transparent;
+    --colorOverlayHomevideosCover: transparent;
+    --colorOverlayBooksCover: transparent;
+    --colorOverlayFoldersCover: transparent;
+    --urlMoviesCover: transparent;
+    --urlTvshowsCover: transparent;
+    --urlLivetvCover: transparent;
+    --urlPlaylistsCover: transparent;
+    --urlBoxsetsCover: transparent;
+    --urlMusicCover: transparent;
+    --urlHomevideosCover: transparent;
+    --urlBooksCover: transparent;
+    --urlFoldersCover: transparent;
+}
+```
+
+<hr>
+
+![Screenshot 2025-01-19 192505](https://github.com/user-attachments/assets/256718f2-67ca-4fbd-8407-e41803380174)
+
+```
+@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");
+
+:root{
+    --colorOverlayMoviesCover: transparent;
+    --colorOverlayTvshowsCover: transparent;
+    --colorOverlayLivetvCover: transparent;
+    --colorOverlayPlaylistsCover: transparent;
+    --colorOverlayBoxsetsCover: transparent;
+    --colorOverlayMusicCover: transparent;
+    --colorOverlayHomevideosCover: transparent;
+    --colorOverlayBooksCover: transparent;
+    --colorOverlayFoldersCover: transparent;
+    --urlMoviesCover: var(--cardBackgroundGradient);
+    --urlTvshowsCover: var(--cardBackgroundGradient);
+    --urlLivetvCover: var(--cardBackgroundGradient);
+    --urlPlaylistsCover: var(--cardBackgroundGradient);
+    --urlBoxsetsCover: var(--cardBackgroundGradient);
+    --urlMusicCover: var(--cardBackgroundGradient);
+    --urlHomevideosCover: var(--cardBackgroundGradient);
+    --urlBooksCover: var(--cardBackgroundGradient);
+    --urlFoldersCover: var(--cardBackgroundGradient);
+}
+```
+
+</details>
+
+<details>
+  <summary><i>Need something in between?</i></summary>
+
+![image](https://github.com/user-attachments/assets/6975a5ef-4824-4807-9afa-434fc3ebaf6f)
+
+
+```
+@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");
+
+:root{
+    --colorOverlayMoviesCover: rgb(193, 103, 104);
+    --colorOverlayTvshowsCover: rgb(140, 149, 43);
+    --colorOverlayLivetvCover: rgb(17, 98, 159);
+    --colorOverlayPlaylistsCover: rgb(118, 61, 216);
+    --colorOverlayBoxsetsCover: rgb(219, 180, 53);
+    --colorOverlayMusicCover: rgb(11, 93, 72);
+    --colorOverlayHomevideosCover: rgb(39, 90, 185);
+    --colorOverlayBooksCover: rgb(166, 68, 70);
+    --colorOverlayFoldersCover: rgb(173, 60, 113);
+    --urlMoviesCover: linear-gradient(0deg, #313131, #585858 25%);
+    --urlTvshowsCover: linear-gradient(0deg, #313131, #585858 25%);
+    --urlLivetvCover: linear-gradient(0deg, #313131, #585858 25%);
+    --urlPlaylistsCover: linear-gradient(0deg, #313131, #585858 25%);
+    --urlBoxsetsCover: linear-gradient(0deg, #313131, #585858 25%);
+    --urlMusicCover: linear-gradient(0deg, #313131, #585858 25%);
+    --urlHomevideosCover: linear-gradient(0deg, #313131, #585858 25%);
+    --urlBooksCover: linear-gradient(0deg, #313131, #585858 25%);
+    --urlFoldersCover: linear-gradient(0deg, #313131, #585858 25%);
+}
+```
+
+</details>
+
+<hr>
+
+### 👇 How to enable this add-on? 
+
+- Paste the following at the end in Custom CSS code box:
+
+```
+@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");
+```
+
+<hr>
+
+### ⚙️ How to configure this add-on? 
+
+- Remember, you do not need to configure anything if you're happy with the default set of images.
+
+
+
+<details>
+  <summary><i>Click here to reveal.</i></summary>
+	
+- To configure your theme to use the custom images, you'll need to input a URL pointing to an image in variables starting with '--url' and an overlay color in variables starting with '--color'.
+	
+- The ideal Jellyfin cover sizes are `960px x 540px`, and the colors can be in rgb format i.e. `rbg(128, 128, 128)`.
+  
+- Below are all the configurable variables, but you should remove the entries you do not intend to modify:
+ 
+```
+
+:root{
+
+    <!-- overlay colors; change according to your image. -->
+
+    --colorOverlayMoviesCover: rgb();
+    --colorOverlayTvshowsCover: rgb();
+    --colorOverlayLivetvCover: rgb();
+    --colorOverlayPlaylistsCover: rgb();
+    --colorOverlayBoxsetsCover: rgb();
+    --colorOverlayMusicCover: rgb();
+    --colorOverlayHomevideosCover: rgb();
+    --colorOverlayBooksCover: rgb();
+    --colorOverlayFoldersCover: rgb();
+
+    <!-- cover images; input the url pointing to an image. -->
+
+    --urlMoviesCover: url();
+    --urlTvshowsCover: url();
+    --urlLivetvCover: url();
+    --urlBoxsetsCover: url();
+    --urlMusicCover: url();
+    --urlHomevideosCover: url();
+    --urlBooksCover: url();
+    --urlFoldersCover: url();
+
+}
+```
+</details>
+
+<hr>
+
+
+### 🆗 Read this example:
+Suppose you want to modify the Live TV cover art. You'll have to modify the variables named `--colorOverlayLivetvCover` and `--urlLivetvCover`, so that your final configuration will look something like this:
+
+```
+@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");
+
+:root{
+    --colorOverlayLivetvCover: rgb(39, 68, 185);
+    --urlLivetvCover: url(https://artworks.thetvdb.com/banners/fanart/original/71663-33.jpg);
+}
+
+```
+
+<hr>
+
+<details>
+  <summary><i>Detailed steps for server-side implementation</i></summary>
+
+1. Open Dashboard from Administration tab in Settings.
+2. Select General tab from the side bar.
+3. Scroll down to find Custom CSS code box under Branding section.
+4. Paste the custom css in Custom CSS code box.
+5. Click save
+</details>
+
+<details>
+  <summary><i>Detailed steps for client-side implementation</i></summary>
+
+1. Open Display tab in Settings.
+2. Scroll down to find Custom CSS code box.
+3. Paste the custom css in Custom CSS code box.
+4. Click save.
+</details>
+
+
+<hr>
+

README.md

@@ -12,6 +12,7 @@ This is a Jellyfin theme inspired from JellySeerr to improve the overall look an
 - reduced clutter by hiding unimportant buttons and elements
 - overall rounded design
 - stylish borders, hover effects and shadows
+- various fixes to the user experience
 
 <hr>
 
@@ -24,17 +25,17 @@ https://github.com/user-attachments/assets/7a492f89-9c82-4038-a07a-a9a59e4f8eef
 ### 🖼️ Previews
 
 <details>
-  <summary><i>Click here to reveal</i></summary>
+  <summary><i>Click here to reveal (last updated: 2025-01-19)</i></summary>
   
-<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/1.%20Homepage.png" style="width:480px;height:auto;"></img>
+<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/1.%20Homepage.png" style="width:360px;height:auto;"></img>
-<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/2.%20Movies%20Library.png" style="width:480px;height:auto;"></img>
+<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/2.%20Movies%20Library.png" style="width:360px;height:auto;"></img>
-<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/3.%20Sidebar.png" style="width:480px;height:auto;"></img>
+<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/3.%20Sidebar.png" style="width:360px;height:auto;"></img>
-<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/4.%20Movie%20Page.png" style="width:480px;height:auto;"></img>
+<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/4.%20Movie%20Page.png" style="width:360px;height:auto;"></img>
-<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/5.%20Extra%20Dialog.png" style="width:480px;height:auto;"></img>
+<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/5.%20Extra%20Dialog.png" style="width:360px;height:auto;"></img>
-<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/6.%20Settings%20Page.png" style="width:480px;height:auto;"></img>
+<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/6.%20Settings%20Page.png" style="width:360px;height:auto;"></img>
-<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/7.%20Metadata%20Menu.png" style="width:480px;height:auto;"></img>
+<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/7.%20Metadata%20Menu.png" style="width:360px;height:auto;"></img>
-<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/8.%20Dashboard%20Settings.png" style="width:480px;height:auto;"></img>
+<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/8.%20Dashboard%20Settings.png" style="width:360px;height:auto;"></img>
-<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/9.%20Web%20Player.png" style="width:480px;height:auto;"></img>
+<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/9.%20Web%20Player.png" style="width:360px;height:auto;"></img>
 
 </details>
 
@@ -66,6 +67,12 @@ https://github.com/user-attachments/assets/7a492f89-9c82-4038-a07a-a9a59e4f8eef
 </details>
 
 
+<hr>
+
+### 🧩 How to customise this theme? 
+- Documentation yet to be added. Help needed.
+- [Experimental add-ons](https://github.com/lscambo13/ElegantFin/blob/main/Add-Ons.md)
+
 <hr>
 
 ### 🆗 Tested on 
@@ -74,5 +81,46 @@ https://github.com/user-attachments/assets/7a492f89-9c82-4038-a07a-a9a59e4f8eef
 
 <hr>
 
+### 🛠️ Troubleshooting 
+<details>
+  <summary>1️⃣ - <i>How do I check if I am using the latest version on ElegantFin?</i></summary>
+
+- To make sure that you are using the latest version of ElegantFin, check the version number at the bottom in the Dashboard screen. 
+- It should be something like ElegantFin v24.12.XX
+</details>
+
+<details>
+  <summary>2️⃣ - <i>I see that a newer version is available, but I have not received it yet. Why?</i></summary>
+
+- If Dashboard footer shows an old version, it means that your app is still using an old cache.
+- Once that cache is updated, the new version will be loaded. 
+- To get the latest version, you will need to clear cache. There are multiple ways to do it.
+- On web version, 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.
+</details>
+
+<details>
+  <summary>3️⃣ - <i>Why do I notice visual bugs and inconsistencies on Jellyfin Media Player?</i></summary>
+
+- Currently JMP uses Qt 5.x which uses an outdated web engine, so many new CSS features do not work. Once they release a new version based on Qt 6.x, most issues should automatically be resolved. Until then, I advise using the web app instead.
+- Are you not using JMP and still facing issues? See the 4th point below.
+</details>
+
+<details>
+  <summary>4️⃣ - <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. 
+- Alternatively, create a new issue [here](https://github.com/lscambo13/ElegantFin/issues/new/choose).
+
+
+</details>
+<details>
+  <summary>5️⃣ - <i>When can I expect another update?</i></summary>
+
+- 🤷
+</details>
+
+<hr>
+
 
 ## 🙏 FEEDBACK APPRECIATED

Theme/ElegantFin-theme-v24.12.11.css

@@ -0,0 +1,837 @@
+/* ElegantFin Theme for Jellyfin by lscambo13 */
+
+@import url("https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/round.css");
+
+:root {
+    /* outline: 0px dotted red !important; */
+    --darkerGradientPoint: #111827;
+    --lighterGradientPoint: #1d2635;
+    --borderColor: rgba(75, 85, 99, 0.9);
+    --headerColor: rgba(30, 40, 54, 0.8);
+    --drawerColor: rgba(30, 40, 54, 0.9);
+    --lighterBorderColor: rgb(255 255 255 / 20%);
+    --selectorBackgroundColor: rgb(55, 65, 81);
+    --btnSubmitColor: rgb(61, 54, 178);
+    --btnSubmitBorderColor: rgb(117 111 226);
+    --checkboxCheckedBgColor: rgb(79, 70, 229);
+    --backgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint) 35%, var(--lighterGradientPoint));
+    --cardBackgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint), var(--lighterGradientPoint) 25%);
+    --hoverGradient: linear-gradient(130deg, rgb(255 255 255 / 20%) 20%, rgb(255 255 255 / 10%) 40%);
+}
+
+html {
+    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+.dashboardFooter::after {
+    content: "ElegantFin v24.12.11";
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: .6em;
+    opacity: .5;
+}
+
+.itemsContainer,
+.vertical-list {
+    /* gap: .75em; */
+}
+
+.card {
+    margin: .375em;
+}
+
+[dir=ltr] .itemsContainer>.card>.cardBox {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.vertical-wrap {
+    justify-content: flex-start !important;
+}
+
+.countIndicator,
+.fullSyncIndicator,
+.mediaSourceIndicator {
+    background: rgb(31, 80, 189);
+    border: var(--lighterBorderColor) solid 1px;
+}
+
+.playedIndicator {
+    background: rgb(34, 197, 94);
+    border: var(--lighterBorderColor) solid 1px;
+}
+
+.cardScalable {
+    border-radius: 1em;
+    border: var(--borderColor) solid 1px !important;
+    overflow: hidden !important;
+    transition: 125ms transform;
+}
+
+.card:hover .cardScalable {
+    /* transform: translateY(-4px); */
+    /* box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 4px 0px; */
+}
+
+.cardImageContainer {
+    border-radius: 1em !important
+}
+
+.cardOverlayContainer {
+    border-radius: 1em !important;
+    border: solid rgb(255 255 255 / 65%) .1em;
+    mix-blend-mode: plus-lighter;
+    background: var(--hoverGradient);
+}
+
+.cardBox:not(.visualCardBox) .cardPadder {
+    background-color: var(--lighterGradientPoint);
+    border-radius: 1em;
+}
+
+.cardOverlayContainer>.cardOverlayFab-primary {
+    display: none;
+}
+
+
+@media (min-width: 31.25em) {
+
+    .portraitCard,
+    .smallBackdropCard,
+    .squareCard {
+        /* width: 33.3333333333% !important; */
+        width: 30% !important;
+    }
+}
+
+@media (min-width: 43.75em) {
+
+    .portraitCard,
+    .squareCard {
+        /* width: 25% !important; */
+        width: 23% !important;
+    }
+}
+
+@media (min-width: 50em) {
+
+    .portraitCard,
+    .squareCard {
+        /* width: 20% !important; */
+        width: 23% !important;
+    }
+}
+
+@media (min-width: 25em) {
+    .backdropCard {
+        /* width: 50%; */
+        width: 49%;
+    }
+}
+
+@media (min-width: 48.125em) {
+    .backdropCard {
+        /* width: 33.3333333333%; */
+        width: 32%;
+    }
+}
+
+.detailLogo {
+    display: none;
+}
+
+h1 {
+    font-size: 3em;
+}
+
+.detailPagePrimaryContainer {
+    align-content: space-between;
+    align-items: stretch;
+    justify-content: end;
+    flex-direction: column;
+}
+
+.portraitCard {
+    min-width: 5em;
+    width: 30%;
+    max-width: 15em;
+}
+
+.headerHomeButton,
+.cardOverlayButton {
+    display: none;
+}
+
+/* hide sync button on home screen */
+.skinHeader.noHomeButtonHeader .headerSyncButton {
+    display: none;
+}
+
+/* display sync button when not on home screen */
+.skinHeader:not(.noHomeButtonHeader) .headerSyncButton {
+    /* display: block; */
+}
+
+/* hide search button when not on home screen */
+.skinHeader:not(.noHomeButtonHeader) .headerSearchButton {
+    /* display: none; */
+}
+
+.pageTitle {
+    height: 1.5em;
+}
+
+.paper-icon-button-light>.material-icons {
+    font-size: 1.25em;
+}
+
+.detailRibbon {
+    background-color: transparent;
+}
+
+.detailPageWrapperContainer {
+    padding-top: 30vh;
+    background: linear-gradient(0deg, var(--darkerGradientPoint) 85%, transparent);
+    margin-top: -40vh;
+}
+
+@media (orientation: portrait) and (max-width: 40em) {
+    .layout-mobile .itemBackdrop {
+        height: 40vh;
+        opacity: .35;
+    }
+}
+
+.itemBackdrop {
+    height: 45vh;
+}
+
+h2 {
+    font-size: 1.25em;
+}
+
+h1,
+h2 {
+    font-weight: 600;
+}
+
+.tagline {
+    font-size: 1.3em;
+    font-style: italic;
+    font-weight: 400;
+    margin-bottom: 0;
+}
+
+.nowPlayingPlaylist,
+.nowPlayingContextMenu,
+html {
+    background: var(--backgroundGradient)
+}
+
+.backgroundContainer:not(.withBackdrop) {
+    background: var(--backgroundGradient)
+}
+
+.backgroundContainer.withBackdrop {
+    opacity: .9375;
+    background: var(--backgroundGradient)
+}
+
+.skinHeader-blurred:not(.osdHeader) {
+    background-color: var(--headerColor) !important;
+    backdrop-filter: blur(5px) !important;
+}
+
+.headroom--unpinned {
+    -webkit-transform: translateY(-3.5em);
+    transform: translateY(-3.5em);
+}
+
+.skinHeader:not(.osdHeader) {
+    border-style: solid;
+    border-width: 0 0 1px 0;
+    border-color: var(--borderColor);
+    transition: all .375s ease-in-out;
+}
+
+.itemProgressBar {
+    background-color: rgb(123 123 123 / 30%) !important;
+    height: .2em;
+    overflow: hidden;
+    border-radius: 1em;
+}
+
+.itemProgressBarForeground {
+    border-radius: 1em;
+    background-color: rgb(214 144 255 / 65%)
+}
+
+.selectLabel {
+    max-height: 2em;
+}
+
+.layout-mobile .mainDetailButtons {
+    margin-top: 2em;
+}
+
+.emby-select-withcolor,
+.emby-select,
+.emby-input,
+.emby-textarea {
+    background-color: var(--selectorBackgroundColor);
+    border: var(--lighterBorderColor) solid 1px;
+    border-radius: .5em;
+    padding: .5em !important;
+}
+
+.searchfields-txtSearch {
+    border-radius: 4em;
+}
+
+.btnPlay {
+    background-color: rgba(255, 255, 255, 0.05);
+    /* border-radius: .5em 0em 0em .5em; */
+    border: solid var(--lighterBorderColor) 1px;
+}
+
+.searchfields-icon {
+    padding: .125em;
+    /* margin: 0 !important; */
+    margin-right: .25em;
+    margin-bottom: 0;
+    border-radius: 1em;
+    background-color: rgba(255, 255, 255, 0.05);
+    /* border-radius: .5em 0em 0em .5em; */
+    border: solid var(--lighterBorderColor) 1px;
+}
+
+.btnPlay>.detailButton-content {
+    -webkit-align-items: unset;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-direction: unset;
+    flex-direction: unset;
+    -webkit-justify-content: unset;
+    align-content: unset;
+    justify-content: flex-start;
+}
+
+
+.btnPlay>.detailButton-content::after {
+    padding-left: .25em;
+    content: "Play";
+}
+
+
+/* 
+.btnMoreCommands{
+    border-radius: 0em .5em .5em 0em;
+    border: solid var(--lighterBorderColor) 1px;
+}
+
+.btnUserRating,.btnCancelSeriesTimer,.btnShuffle,.btnInstantMix,.btnPlayTrailer,.btnPlaystate,.btnReplay{
+    border-radius: 0em 0em 0em 0em;
+    border: solid var(--lighterBorderColor) 1px;
+} */
+
+
+.mainDrawer,
+.drawer-open {
+    background-color: var(--drawerColor);
+    border-right: solid var(--borderColor) 1px;
+    backdrop-filter: blur(8px);
+}
+
+.mediaInfoOfficialRating {
+    border-radius: .5em;
+    font-size: 66%;
+    margin: 0em 1em .25em 0em !important;
+    padding: 0em 0.5em;
+    background: transparent !important;
+    border: solid 1px var(--borderColor);
+}
+
+.detailButton {
+    border-radius: .5em;
+    border: solid var(--lighterBorderColor) 1px;
+    padding: .5em .5em !important;
+    margin: 0.125em !important;
+}
+
+.button-flat:hover {
+    color: unset;
+    background-color: rgba(255, 255, 255, 0.2);
+}
+
+.playstatebutton-icon-played {
+    color: rgb(34, 197, 94);
+}
+
+.itemDetailsGroup {
+    border: solid var(--borderColor) 1px;
+    margin-top: 1.5em;
+    border-radius: .5em;
+    /* margin: .5em 1em; */
+}
+
+.itemDetailsGroup>div:not(:last-child) {
+    border-bottom: solid var(--borderColor) 1px;
+}
+
+.detailsGroupItem {
+    margin: 0 !important;
+    justify-content: space-between;
+    padding: 0.5em 0.9em;
+    align-items: baseline;
+}
+
+.detailsGroupItem>.label {
+    font-weight: 600;
+    flex-basis: 6em;
+}
+
+.detailsGroupItem>.content>a {
+    font-weight: 400;
+    text-align: end;
+}
+
+.detailsGroupItem>.content {
+    text-align: end;
+}
+
+.genresGroup,
+.directorsGroup,
+.writersGroup {
+    /* border-bottom: solid var(--borderColor) 1px; */
+}
+
+.itemTags,
+.itemTags>a {
+    display: none;
+    font-size: unset !important;
+    font-weight: 200;
+}
+
+.detail-clamp-text {
+    text-align: start;
+}
+
+.itemMiscInfo {
+    align-items: flex-end !important;
+}
+
+.innerCardFooter,
+.chapterThumbTextContainer {
+    background: transparent;
+    /* display: flex; */
+    font-weight: 500;
+    text-shadow: 1px 1px 0px black;
+    padding: 1em;
+    width: auto;
+}
+
+.centerMessage {
+    width: unset;
+}
+
+
+.dialogContainer {
+    margin: .33em;
+}
+
+.dialog {
+    backdrop-filter: blur(5px);
+    background-color: var(--drawerColor);
+    border-radius: 1em !important;
+    border: solid var(--borderColor) 1px;
+}
+
+.dialogBackdropOpened {
+    opacity: .66;
+}
+
+.actionSheetContent>h1 {
+    font-size: unset;
+}
+
+.collapseContent {
+    background-color: unset !important;
+    backdrop-filter: unset !important;
+}
+
+.selectionCommandsPanel {
+    background: var(--lighterGradientPoint);
+    border-bottom: solid var(--borderColor) 1px;
+    backdrop-filter: blur(10px);
+}
+
+.selectionCommandsPanel>h1 {
+    font-size: large;
+}
+
+.itemSelectionPanel {
+    border: unset;
+    background-color: transparent;
+}
+
+/* .emby-checkbox:checked+span+.checkboxOutline {
+    background-color: var(--checkboxCheckedBgColor);
+    border-color: var(--checkboxCheckedBgColor);
+} */
+
+.emby-checkbox:checked+span+.checkboxOutline {
+    border-radius: .375em !important;
+    box-shadow: inset 0em 7em 10em 20px rgba(0, 0, 0, 0.8);
+    background: transparent;
+    border-color: white;
+    border-style: groove;
+    border-width: 2px;
+}
+
+.checkboxOutline {
+    /* background-color: rgb(255, 255, 255); */
+    top: unset;
+    height: 1.3em;
+    width: 1.3em;
+    border-radius: .375em;
+}
+
+
+.itemSelectionPanel .material-icons.check:before {
+    font-size: 4em;
+    color: #ffffff;
+    padding: .25em;
+}
+
+.cardText-first+.itemSelectionPanel>.checkboxContainer {
+    /* height: calc(100% - 3em); */
+    height: calc(100% - 1.75em);
+}
+
+.cardText-first+.itemSelectionPanel>.checkboxContainer>.emby-checkbox:checked+span+.checkboxOutline {
+    border-radius: 1em !important;
+}
+
+.cardText-secondary+.itemSelectionPanel>.checkboxContainer>.emby-checkbox:checked+span+.checkboxOutline {
+    border-radius: 1em !important;
+}
+
+.cardText-secondary+.itemSelectionPanel>.checkboxContainer {
+    /* height: calc(100% - 3em); */
+    height: calc(100% - 3.125em);
+}
+
+.cardScalable+.itemSelectionPanel>.checkboxContainer>.emby-checkbox:checked+span+.checkboxOutline {
+    border-radius: 1em !important;
+}
+
+.cardScalable+.itemSelectionPanel>.checkboxContainer {
+    /* height: calc(100% - 3em); */
+    height: calc(100% - 0em);
+}
+
+.checkboxOutline.multiSelectCheckboxOutline {
+    border-radius: 1em;
+    border-width: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.cardIndicators {
+    -webkit-align-items: center;
+    /* padding: 1em; */
+    top: .2em;
+}
+
+.indicator {
+    /* background: rgb(146 146 146 / 20%); */
+    border: solid rgb(124 124 124 / 50%) 1px;
+    /* padding: .1em; */
+    border-radius: 100em;
+}
+
+.defaultCardBackground,
+.cardScalable {
+    background: var(--cardBackgroundGradient) !important;
+}
+
+.listItemImage {
+    border-radius: .5em;
+}
+
+.emby-button.block,
+.button-alt,
+.raised,
+#btnDeleteImage,
+.dashboardActionsContainer>.emby-button {
+    color: #fff;
+    border-radius: .5em;
+    background: var(--lighterGradientPoint);
+    border: solid var(--borderColor) 1px;
+}
+
+.fab {
+    color: #fff;
+    background: var(--lighterGradientPoint);
+    border: solid var(--borderColor) 1px;
+}
+
+.raised:focus {
+    background: var(--lighterGradientPoint);
+    filter: brightness(1.25);
+}
+
+.raised:hover,
+.emby-button:hover {
+    filter: brightness(1.2) !important;
+}
+
+.localnav>.emby-button {
+    background: var(--lighterGradientPoint) !important;
+    color: #fff;
+    padding: .8em .8em;
+}
+
+div[data-role=controlgroup] a.ui-btn-active {
+    background: var(--selectorBackgroundColor) !important;
+    color: #fff !important;
+}
+
+#btnDeleteImage,
+.button-delete {
+    background: rgb(169, 29, 29);
+    border: solid rgb(217, 84, 84) 1px;
+}
+
+.button-submit {
+    background: var(--btnSubmitColor) !important;
+    border: solid var(--btnSubmitBorderColor) 1px !important;
+}
+
+.collapseContent,
+.formDialogFooter:not(.formDialogFooter-clear),
+.formDialogHeader:not(.formDialogHeader-clear) {
+    background-color: var(--headerColor);
+    backdrop-filter: blur(5px);
+}
+
+.visualCardBox,
+.paperList {
+    background-color: var(--headerColor) !important;
+    border-radius: 1em !important;
+    border: solid var(--borderColor) 1px !important;
+    box-shadow: unset !important;
+    /* backdrop-filter: blur(5px); */
+}
+
+.paperList {
+    padding: .4em;
+}
+
+.serverInfo {
+    padding: 1em;
+}
+
+.serverInfo>:nth-child(2n) {
+    -webkit-flex: 1 0 60%;
+    flex: 1 0 60%;
+}
+
+.listItemIcon:not(.listItemIcon-transparent) {
+    background-color: var(--lighterGradientPoint) !important;
+}
+
+.readOnlyContent {
+    flex-direction: column !important;
+}
+
+.MuiAppBar-root {
+    background: var(--headerColor);
+    backdrop-filter: blur(5px);
+    border-bottom: solid var(--borderColor) 1px;
+}
+
+.MuiDrawer-paper {
+    background: var(--drawerColor);
+    backdrop-filter: blur(5px);
+    border-right: solid var(--borderColor) 1px;
+}
+
+[dir=ltr] .navMenuOption {
+    padding: .75em 1em !important;
+    /* padding: 1.25em 0.25em 0.25em 1.5em !important; */
+}
+
+[dir=ltr] .listItem:not(.actionSheetMenuItem) {
+    /* padding: .75em 1em !important; */
+    padding: 0.25em 0.25em 0.25em 1.5em !important;
+}
+
+.actionSheetContent {
+    padding: .4em !important;
+}
+
+.navMenuOption {
+    border-radius: .5em !important;
+    margin: .5em 1em !important;
+}
+
+.listItem:hover,
+.navMenuOption:hover {
+    background: rgba(255, 255, 255, 0.125);
+    border-radius: .8em;
+}
+
+.navMenuOption-selected {
+    background-color: rgb(201 143 255 / 42%) !important;
+    border: solid rgb(255 255 255 / 20%) 1px;
+}
+
+.noBackdropTransparency .detailPageSecondaryContainer {
+    background-color: transparent;
+}
+
+.detailSection {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+    max-width: unset !important;
+}
+
+.detailPageContent {
+    gap: 1em;
+}
+
+.trackSelections {
+    order: 2;
+    max-width: unset !important;
+}
+
+.detailsGroupItem,
+.trackSelections .selectContainer {
+    /*flex-direction: column;*/
+    max-width: unset !important;
+    align-items: center;
+}
+
+.trackSelectionFieldContainer>.selectArrowContainer {
+    top: .5em;
+}
+
+.selectArrowContainer {
+    /* top: .5em; */
+    opacity: .5;
+}
+
+.detailSectionContent {
+    order: 1;
+}
+
+.itemDetailsGroup {
+    order: 3;
+}
+
+.sliderBubble {
+    border-radius: 1em;
+    border: solid 1px var(--borderColor);
+    overflow: hidden;
+}
+
+.listItem-border {
+    border-color: transparent !important;
+}
+
+.alphaPickerButton {
+    font-family: monospace;
+    margin: .15em;
+    color: rgba(255, 255, 255, 0.25);
+}
+
+.alphaPickerButton-selected {
+    color: rgba(255, 255, 255, 1);
+}
+
+.alphaPicker-vertical {
+    height: 70%;
+}
+
+.alphaPicker {
+    justify-content: center;
+}
+
+[dir=ltr] .padded-left.vertical-wrap {
+    padding-left: 5% !important;
+}
+
+[dir=ltr] .padded-right.vertical-wrap {
+    padding-right: 5% !important;
+}
+
+.paging {
+    padding-inline: 1em;
+}
+
+.smallBackdropCard,
+.squareCard {
+    width: 47%;
+}
+
+.layout-mobile #myPreferencesMenuPage {
+    padding-top: 3.75em !important;
+}
+
+.headerUserButton {
+    width: 2em;
+    height: 2em;
+    margin-inline-end: 1em;
+    border: solid var(--borderColor) 1px;
+}
+
+.MuiAvatar-circular {
+    width: 1.5em;
+    height: 1.5em;
+    /* margin-inline-end: .5em; */
+    border: solid var(--borderColor) 1px;
+}
+
+.dashboardDocument .content-primary {
+    padding-top: 4.25rem;
+}
+
+.editorNode {
+    display: flex;
+    align-items: center;
+}
+
+.metadataSidebarIcon {
+    color: #6c7bab;
+}
+
+.sectionTitleTextButton {
+    padding-inline: .5em;
+}
+
+.sectionTitleTextButton>* {
+    padding: .3em 0 !important;
+    margin: 0 0 !important;
+}
+
+.sectionTitleTextButton>.material-icons::before {
+    border: solid 1px;
+    border-radius: 1em;
+    font-size: .7em;
+    line-height: 1.4em;
+    font-weight: 600;
+    margin-inline-start: .5em;
+}
+
+.backdropCard,
+.bannerCard {
+    width: 46%;
+}
+
+.toast {
+    background: var(--headerColor);
+    border: solid 1px var(--borderColor);
+    border-radius: .5em;
+    backdrop-filter: blur(1em);
+}

Theme/assets/add-ons/custom-media-covers-latest-min.css

@@ -0,0 +1 @@
+:root{--colorOverlayMoviesCover:rgb(193,103,104);--colorOverlayTvshowsCover:rgb(140,149,43);--colorOverlayLivetvCover:rgb(17,98,159);--colorOverlayPlaylistsCover:rgb(118,61,216);--colorOverlayBoxsetsCover:rgb(219,180,53);--colorOverlayMusicCover:rgb(11,93,72);--colorOverlayHomevideosCover:rgb(39,90,185);--colorOverlayBooksCover:rgb(166,68,70);--colorOverlayFoldersCover:rgb(173,60,113);--urlMoviesCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/movies.webp);--urlTvshowsCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/tvshows.webp);--urlLivetvCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/livetv.webp);--urlPlaylistsCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/playlists.webp);--urlBoxsetsCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/boxsets.webp);--urlMusicCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/music.webp);--urlHomevideosCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/homevideos.webp);--urlBooksCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/books.webp);--urlFoldersCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/folders.webp)}.card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"],[data-type="Series"],[data-type="Folder"]) .cardImageIcon.material-icons:not(.quiz)::before{display:none}div[data-collectiontype="movies"] .cardImageContainer.cardContent{background:var(--colorOverlayMoviesCover)!important;background-image:var(--urlMoviesCover)!important}div[data-collectiontype="tvshows"] .cardImageContainer.cardContent{background:var(--colorOverlayTvshowsCover)!important;background-image:var(--urlTvshowsCover)!important}div[data-collectiontype="livetv"] .cardImageContainer.cardContent{background:var(--colorOverlayLivetvCover)!important;background-image:var(--urlLivetvCover)!important}div[data-collectiontype="music"] .cardImageContainer.cardContent{background:var(--colorOverlayMusicCover)!important;background-image:var(--urlMusicCover)!important}div[data-collectiontype="homevideos"] .cardImageContainer.cardContent{background:var(--colorOverlayHomevideosCover)!important;background-image:var(--urlHomevideosCover)!important}div[data-collectiontype="books"] .cardImageContainer.cardContent{background:var(--colorOverlayBooksCover)!important;background-image:var(--urlBooksCover)!important}div[data-collectiontype="boxsets"] .cardImageContainer.cardContent{background:var(--colorOverlayBoxsetsCover)!important;background-image:var(--urlBoxsetsCover)!important}div[data-collectiontype="folders"] .cardImageContainer.cardContent{background:var(--colorOverlayFoldersCover)!important;background-image:var(--urlFoldersCover)!important}div[data-collectiontype="playlists"] .cardImageContainer.cardContent{background:var(--colorOverlayPlaylistsCover)!important;background-image:var(--urlPlaylistsCover)!important}.card-withuserdata[data-isfolder="true"] .cardImageContainer.cardContent{filter:contrast(.85);background-size:cover!important;background-position:50%!important;background-blend-mode:multiply}div[data-collectiontype="movies"] .cardImageContainer.cardContent::before{content:"Movies"}div[data-collectiontype="tvshows"] .cardImageContainer.cardContent::before{content:"TV Shows"}div[data-collectiontype="livetv"] .cardImageContainer.cardContent::before{content:"Live TV"}div[data-collectiontype="music"] .cardImageContainer.cardContent::before{content:"Music"}div[data-collectiontype="homevideos"] .cardImageContainer.cardContent::before{content:"Home Videos"}div[data-collectiontype="books"] .cardImageContainer.cardContent::before{content:"Books"}div[data-collectiontype="boxsets"] .cardImageContainer.cardContent::before{content:"Collections"}div[data-collectiontype="folders"] .cardImageContainer.cardContent::before{content:"Folders"}div[data-collectiontype="playlists"] .cardImageContainer.cardContent::before{content:"Playlists"}.card-withuserdata[data-isfolder="true"] .cardImageContainer.cardContent{filter:contrast(.85);background-size:cover!important;background-position:50%!important;background-blend-mode:multiply}

Theme/assets/add-ons/custom-media-covers-nightly.css

@@ -0,0 +1,171 @@
+/* Add-on: Custom media covers for the ElegantFin Theme for Jellyfin by lscambo13 */
+
+:root{
+    /* my media library default covers customizations */
+    --colorOverlayMoviesCover: rgb(193, 103, 104);
+    --colorOverlayTvshowsCover: rgb(140, 149, 43);
+    --colorOverlayLivetvCover: rgb(17, 98, 159);
+    --colorOverlayPlaylistsCover: rgb(118, 61, 216);
+    --colorOverlayBoxsetsCover: rgb(219, 180, 53);
+    --colorOverlayMusicCover: rgb(11, 93, 72);
+    --colorOverlayHomevideosCover: rgb(39, 90, 185);
+    --colorOverlayBooksCover: rgb(166, 68, 70);
+    --colorOverlayFoldersCover: rgb(173, 60, 113);
+    --urlMoviesCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/movies.webp);
+    --urlTvshowsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/tvshows.webp);
+    --urlLivetvCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/livetv.webp);
+    --urlPlaylistsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/playlists.webp);
+    --urlBoxsetsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/boxsets.webp);
+    --urlMusicCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/music.webp);
+    --urlHomevideosCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/homevideos.webp);
+    --urlBooksCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/books.webp);
+    --urlFoldersCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/folders.webp);
+}
+
+.card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"],[data-type="Series"],[data-type="Folder"]) .cardImageIcon.material-icons:not(.quiz)::before{
+    display: none;
+} 
+
+/* These show up when no image is set */
+
+/* div[data-collectiontype="movies"] .cardImageContainer.defaultCardBackground {
+    background: var(--colorOverlayMoviesCover) !important;
+    background-image: var(--urlMoviesCover) !important;
+}
+
+div[data-collectiontype="tvshows"] .cardImageContainer.defaultCardBackground {
+    background: var(--colorOverlayTvshowsCover) !important;
+    background-image: var(--urlTvshowsCover) !important;
+}
+
+div[data-collectiontype="livetv"] .cardImageContainer.defaultCardBackground {
+    background: var(--colorOverlayLivetvCover) !important;
+    background-image: var(--urlLivetvCover) !important;
+}
+
+div[data-collectiontype="music"] .cardImageContainer.defaultCardBackground {
+    background: var(--colorOverlayMusicCover) !important;
+    background-image: var(--urlMusicCover) !important;
+}
+
+div[data-collectiontype="homevideos"] .cardImageContainer.defaultCardBackground {
+    background: var(--colorOverlayHomevideosCover) !important;
+    background-image: var(--urlHomevideosCover) !important;
+}
+
+div[data-collectiontype="books"] .cardImageContainer.defaultCardBackground {
+    background: var(--colorOverlayBooksCover) !important;
+    background-image: var(--urlBooksCover) !important;
+}
+
+div[data-collectiontype="boxsets"] .cardImageContainer.defaultCardBackground {
+    background: var(--colorOverlayBoxsetsCover) !important;
+    background-image: var(--urlBoxsetsCover) !important;
+}
+
+div[data-collectiontype="folders"] .cardImageContainer.defaultCardBackground {
+    background: var(--colorOverlayFoldersCover) !important;
+    background-image: var(--urlFoldersCover) !important;
+}
+
+div[data-collectiontype="playlists"] .cardImageContainer.defaultCardBackground {
+    background: var(--colorOverlayPlaylistsCover) !important;
+    background-image: var(--urlPlaylistsCover) !important;
+} */
+
+/* These are the front facing images */
+
+div[data-collectiontype="movies"] .cardImageContainer.cardContent {
+    background: var(--colorOverlayMoviesCover) !important;
+    background-image: var(--urlMoviesCover) !important;
+}
+
+div[data-collectiontype="tvshows"] .cardImageContainer.cardContent {
+    background: var(--colorOverlayTvshowsCover) !important;
+    background-image: var(--urlTvshowsCover) !important;
+}
+
+div[data-collectiontype="livetv"] .cardImageContainer.cardContent {
+    background: var(--colorOverlayLivetvCover) !important;
+    background-image: var(--urlLivetvCover) !important;
+}
+
+div[data-collectiontype="music"] .cardImageContainer.cardContent {
+    background: var(--colorOverlayMusicCover) !important;
+    background-image: var(--urlMusicCover) !important;
+}
+
+div[data-collectiontype="homevideos"] .cardImageContainer.cardContent {
+    background: var(--colorOverlayHomevideosCover) !important;
+    background-image: var(--urlHomevideosCover) !important;
+}
+
+div[data-collectiontype="books"] .cardImageContainer.cardContent {
+    background: var(--colorOverlayBooksCover) !important;
+    background-image: var(--urlBooksCover) !important;
+}
+
+div[data-collectiontype="boxsets"] .cardImageContainer.cardContent {
+    background: var(--colorOverlayBoxsetsCover) !important;
+    background-image: var(--urlBoxsetsCover) !important;
+}
+
+div[data-collectiontype="folders"] .cardImageContainer.cardContent {
+    background: var(--colorOverlayFoldersCover) !important;
+    background-image: var(--urlFoldersCover) !important;
+}
+
+div[data-collectiontype="playlists"] .cardImageContainer.cardContent {
+    background: var(--colorOverlayPlaylistsCover) !important;
+    background-image: var(--urlPlaylistsCover) !important;
+}
+
+.card-withuserdata[data-isfolder="true"] .cardImageContainer.cardContent {
+    filter: contrast(0.85);
+    background-size: cover !important;
+    background-position: 50% !important;
+    background-blend-mode: multiply;
+}
+
+div[data-collectiontype="movies"] .cardImageContainer.cardContent::before {
+    content: "Movies";
+}
+
+div[data-collectiontype="tvshows"] .cardImageContainer.cardContent::before {
+    content: "TV Shows";
+}
+
+div[data-collectiontype="livetv"] .cardImageContainer.cardContent::before {
+    content: "Live TV";
+}
+
+div[data-collectiontype="music"] .cardImageContainer.cardContent::before {
+    content: "Music";
+}
+
+div[data-collectiontype="homevideos"] .cardImageContainer.cardContent::before {
+    content: "Home Videos";
+}
+
+div[data-collectiontype="books"] .cardImageContainer.cardContent::before {
+    content: "Books";
+}
+
+div[data-collectiontype="boxsets"] .cardImageContainer.cardContent::before {
+    content: "Collections";
+}
+
+div[data-collectiontype="folders"] .cardImageContainer.cardContent::before {
+    content: "Folders";
+}
+
+div[data-collectiontype="playlists"] .cardImageContainer.cardContent::before {
+    content: "Playlists";
+}
+
+.card-withuserdata[data-isfolder="true"] .cardImageContainer.cardContent {
+    filter: contrast(0.85);
+    background-size: cover !important;
+    background-position: 50% !important;
+    background-blend-mode: multiply;
+}

Theme/assets/add-ons/custom-media-covers-v25.01.25.css

@@ -0,0 +1,171 @@
+/* Add-on: Custom media covers for the ElegantFin Theme for Jellyfin by lscambo13 */
+
+:root{
+    /* my media library default covers customizations */
+    --colorOverlayMoviesCover: rgb(193, 103, 104);
+    --colorOverlayTvshowsCover: rgb(140, 149, 43);
+    --colorOverlayLivetvCover: rgb(17, 98, 159);
+    --colorOverlayPlaylistsCover: rgb(118, 61, 216);
+    --colorOverlayBoxsetsCover: rgb(219, 180, 53);
+    --colorOverlayMusicCover: rgb(11, 93, 72);
+    --colorOverlayHomevideosCover: rgb(39, 90, 185);
+    --colorOverlayBooksCover: rgb(166, 68, 70);
+    --colorOverlayFoldersCover: rgb(173, 60, 113);
+    --urlMoviesCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/movies.webp);
+    --urlTvshowsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/tvshows.webp);
+    --urlLivetvCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/livetv.webp);
+    --urlPlaylistsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/playlists.webp);
+    --urlBoxsetsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/boxsets.webp);
+    --urlMusicCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/music.webp);
+    --urlHomevideosCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/homevideos.webp);
+    --urlBooksCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/books.webp);
+    --urlFoldersCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/folders.webp);
+}
+
+.card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"],[data-type="Series"],[data-type="Folder"]) .cardImageIcon.material-icons:not(.quiz)::before{
+    display: none;
+} 
+
+/* These show up when no image is set */
+
+/* div[data-collectiontype="movies"] .cardImageContainer.defaultCardBackground {
+    background: var(--colorOverlayMoviesCover) !important;
+    background-image: var(--urlMoviesCover) !important;
+}
+
+div[data-collectiontype="tvshows"] .cardImageContainer.defaultCardBackground {
+    background: var(--colorOverlayTvshowsCover) !important;
+    background-image: var(--urlTvshowsCover) !important;
+}
+
+div[data-collectiontype="livetv"] .cardImageContainer.defaultCardBackground {
+    background: var(--colorOverlayLivetvCover) !important;
+    background-image: var(--urlLivetvCover) !important;
+}
+
+div[data-collectiontype="music"] .cardImageContainer.defaultCardBackground {
+    background: var(--colorOverlayMusicCover) !important;
+    background-image: var(--urlMusicCover) !important;
+}
+
+div[data-collectiontype="homevideos"] .cardImageContainer.defaultCardBackground {
+    background: var(--colorOverlayHomevideosCover) !important;
+    background-image: var(--urlHomevideosCover) !important;
+}
+
+div[data-collectiontype="books"] .cardImageContainer.defaultCardBackground {
+    background: var(--colorOverlayBooksCover) !important;
+    background-image: var(--urlBooksCover) !important;
+}
+
+div[data-collectiontype="boxsets"] .cardImageContainer.defaultCardBackground {
+    background: var(--colorOverlayBoxsetsCover) !important;
+    background-image: var(--urlBoxsetsCover) !important;
+}
+
+div[data-collectiontype="folders"] .cardImageContainer.defaultCardBackground {
+    background: var(--colorOverlayFoldersCover) !important;
+    background-image: var(--urlFoldersCover) !important;
+}
+
+div[data-collectiontype="playlists"] .cardImageContainer.defaultCardBackground {
+    background: var(--colorOverlayPlaylistsCover) !important;
+    background-image: var(--urlPlaylistsCover) !important;
+} */
+
+/* These are the front facing images */
+
+div[data-collectiontype="movies"] .cardImageContainer.cardContent {
+    background: var(--colorOverlayMoviesCover) !important;
+    background-image: var(--urlMoviesCover) !important;
+}
+
+div[data-collectiontype="tvshows"] .cardImageContainer.cardContent {
+    background: var(--colorOverlayTvshowsCover) !important;
+    background-image: var(--urlTvshowsCover) !important;
+}
+
+div[data-collectiontype="livetv"] .cardImageContainer.cardContent {
+    background: var(--colorOverlayLivetvCover) !important;
+    background-image: var(--urlLivetvCover) !important;
+}
+
+div[data-collectiontype="music"] .cardImageContainer.cardContent {
+    background: var(--colorOverlayMusicCover) !important;
+    background-image: var(--urlMusicCover) !important;
+}
+
+div[data-collectiontype="homevideos"] .cardImageContainer.cardContent {
+    background: var(--colorOverlayHomevideosCover) !important;
+    background-image: var(--urlHomevideosCover) !important;
+}
+
+div[data-collectiontype="books"] .cardImageContainer.cardContent {
+    background: var(--colorOverlayBooksCover) !important;
+    background-image: var(--urlBooksCover) !important;
+}
+
+div[data-collectiontype="boxsets"] .cardImageContainer.cardContent {
+    background: var(--colorOverlayBoxsetsCover) !important;
+    background-image: var(--urlBoxsetsCover) !important;
+}
+
+div[data-collectiontype="folders"] .cardImageContainer.cardContent {
+    background: var(--colorOverlayFoldersCover) !important;
+    background-image: var(--urlFoldersCover) !important;
+}
+
+div[data-collectiontype="playlists"] .cardImageContainer.cardContent {
+    background: var(--colorOverlayPlaylistsCover) !important;
+    background-image: var(--urlPlaylistsCover) !important;
+}
+
+.card-withuserdata[data-isfolder="true"] .cardImageContainer.cardContent {
+    filter: contrast(0.85);
+    background-size: cover !important;
+    background-position: 50% !important;
+    background-blend-mode: multiply;
+}
+
+div[data-collectiontype="movies"] .cardImageContainer.cardContent::before {
+    content: "Movies";
+}
+
+div[data-collectiontype="tvshows"] .cardImageContainer.cardContent::before {
+    content: "TV Shows";
+}
+
+div[data-collectiontype="livetv"] .cardImageContainer.cardContent::before {
+    content: "Live TV";
+}
+
+div[data-collectiontype="music"] .cardImageContainer.cardContent::before {
+    content: "Music";
+}
+
+div[data-collectiontype="homevideos"] .cardImageContainer.cardContent::before {
+    content: "Home Videos";
+}
+
+div[data-collectiontype="books"] .cardImageContainer.cardContent::before {
+    content: "Books";
+}
+
+div[data-collectiontype="boxsets"] .cardImageContainer.cardContent::before {
+    content: "Collections";
+}
+
+div[data-collectiontype="folders"] .cardImageContainer.cardContent::before {
+    content: "Folders";
+}
+
+div[data-collectiontype="playlists"] .cardImageContainer.cardContent::before {
+    content: "Playlists";
+}
+
+.card-withuserdata[data-isfolder="true"] .cardImageContainer.cardContent {
+    filter: contrast(0.85);
+    background-size: cover !important;
+    background-position: 50% !important;
+    background-blend-mode: multiply;
+}