4 Commits

Author SHA1 Message Date
lscambo13
ad40935eb7 New: Login screen supports slideshows now 2025-01-14 10:02:48 -08:00
lscambo13
239c8da1c9 dev: Fixes to background scaling, font sizes, excess overflow 2025-01-05 22:43:12 +05:30
lscambo13
3403f9b20a dev: Trying to match the login page with Jellyseerr even more closely 2025-01-05 22:17:11 +05:30
lscambo13
86d1633ba4 dev: Modifying login page 2025-01-05 19:25:23 +05:30
45 changed files with 363 additions and 6310 deletions

View File

@@ -1,226 +0,0 @@
# 🧩 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>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 727 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 200 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 MiB

After

Width:  |  Height:  |  Size: 1.5 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1006 KiB

After

Width:  |  Height:  |  Size: 958 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 892 KiB

After

Width:  |  Height:  |  Size: 582 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 144 KiB

After

Width:  |  Height:  |  Size: 126 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 145 KiB

After

Width:  |  Height:  |  Size: 132 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 203 KiB

After

Width:  |  Height:  |  Size: 200 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 MiB

After

Width:  |  Height:  |  Size: 915 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 727 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 958 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 582 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 126 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 132 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 200 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 915 KiB

View File

@@ -12,7 +12,6 @@ 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>
@@ -25,7 +24,7 @@ https://github.com/user-attachments/assets/7a492f89-9c82-4038-a07a-a9a59e4f8eef
### 🖼️ Previews
<details>
<summary><i>Click here to reveal (last updated: 2025-01-19)</i></summary>
<summary><i>Click here to reveal</i></summary>
<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:360px;height:auto;"></img>
@@ -67,12 +66,6 @@ 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
@@ -86,7 +79,7 @@ https://github.com/user-attachments/assets/7a492f89-9c82-4038-a07a-a9a59e4f8eef
<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 v25.03.XX
- It should be something like ElegantFin v24.12.XX
</details>
<details>
@@ -103,24 +96,11 @@ https://github.com/user-attachments/assets/7a492f89-9c82-4038-a07a-a9a59e4f8eef
<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>All the icons on my LG TV seem to be broken. How to fix?</i></summary>
- It seems that modern Material Icons which this theme uses are [not compatible on some WebOS TVs](https://github.com/lscambo13/ElegantFin/issues/39). There is a [huge similar thread](https://www.reddit.com/r/youtubetv/comments/e27go3/chinese_symbols_instead_of_icons_on_lg_tv/) about this.
- This bug can be fixed by using the older icons, so I have implemented the following workaround to bring back older, supported icons.
- Simply add the following code at the end in Custom CSS box and save, then refresh your apps and webpages:
```
:root{
--iconPack: 'Material Icons';
}
```
</details>
<details>
<summary>5⃣ - <i>How do I report bugs/issues?</i></summary>
<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).
@@ -128,7 +108,7 @@ https://github.com/user-attachments/assets/7a492f89-9c82-4038-a07a-a9a59e4f8eef
</details>
<details>
<summary>6️⃣ - <i>When can I expect another update?</i></summary>
<summary>5️⃣ - <i>When can I expect another update?</i></summary>
- 🤷
</details>

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -1 +0,0 @@
: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}

View File

@@ -1,171 +0,0 @@
/* 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;
}

View File

@@ -1,171 +0,0 @@
/* 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;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 82 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 413 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 485 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.0 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 790 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 383 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 330 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 547 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 83 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 84 KiB