Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
ad40935eb7 | ||
|
|
239c8da1c9 | ||
|
|
3403f9b20a | ||
|
|
86d1633ba4 |
No files matched your search
@@ -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>
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary><i>This is how they look with this add-on, by default.</i></summary>
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
```
|
|
||||||
@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>
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary><i>You can achieve a minimal design too.</i></summary>
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
```
|
|
||||||
@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>
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
```
|
|
||||||
@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>
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
|
|
||||||
```
|
|
||||||
@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>
|
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 727 KiB |
|
Before Width: | Height: | Size: 200 KiB |
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 1.5 MiB |
|
Before Width: | Height: | Size: 1006 KiB After Width: | Height: | Size: 958 KiB |
|
Before Width: | Height: | Size: 892 KiB After Width: | Height: | Size: 582 KiB |
|
Before Width: | Height: | Size: 144 KiB After Width: | Height: | Size: 126 KiB |
|
Before Width: | Height: | Size: 145 KiB After Width: | Height: | Size: 132 KiB |
|
Before Width: | Height: | Size: 203 KiB After Width: | Height: | Size: 200 KiB |
|
Before Width: | Height: | Size: 1.7 MiB After Width: | Height: | Size: 915 KiB |
|
Before Width: | Height: | Size: 727 KiB |
|
Before Width: | Height: | Size: 1.5 MiB |
|
Before Width: | Height: | Size: 958 KiB |
|
Before Width: | Height: | Size: 582 KiB |
|
Before Width: | Height: | Size: 126 KiB |
|
Before Width: | Height: | Size: 132 KiB |
|
Before Width: | Height: | Size: 200 KiB |
|
Before Width: | Height: | Size: 915 KiB |
@@ -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
|
- reduced clutter by hiding unimportant buttons and elements
|
||||||
- overall rounded design
|
- overall rounded design
|
||||||
- stylish borders, hover effects and shadows
|
- stylish borders, hover effects and shadows
|
||||||
- various fixes to the user experience
|
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
@@ -25,7 +24,7 @@ https://github.com/user-attachments/assets/7a492f89-9c82-4038-a07a-a9a59e4f8eef
|
|||||||
### 🖼️ Previews
|
### 🖼️ Previews
|
||||||
|
|
||||||
<details>
|
<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/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>
|
<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>
|
</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>
|
<hr>
|
||||||
|
|
||||||
### 🆗 Tested on
|
### 🆗 Tested on
|
||||||
|
|||||||
@@ -1,2 +1,2 @@
|
|||||||
/* ElegantFin Theme v25.01.25 for Jellyfin by lscambo13 */
|
/* ElegantFin Theme v25.01.03 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 Icons Round';font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/s/materialsymbolsrounded/v222/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2) format('woff2');}:root{--elegantFinFooterText:"ElegantFin v25.01.25";--darkerGradientPoint:#111827;--darkerGradientPointAlpha:rgba(17,24,39,.85);--lighterGradientPoint:#1d2635;--borderColor:rgb(71,80,92);--lighterBorderColor:rgb(255 255 255 / 20%);--headerColor:rgba(30,40,54,.8);--drawerColor:rgba(30,40,54,.9);--selectorBackgroundColor:rgb(55,65,81);--btnDeleteColor:rgb(169,29,29);--btnDeleteBorderColor:rgb(217,84,84);--btnSubmitColor:rgb(61,54,178);--btnSubmitBorderColor:rgb(117 111 226);--checkboxCheckedBgColor:rgb(79,70,229);--highlightOutlineColor:rgb(37,99,235);--textColor:rgb(209,213,219);--dimTextColor:rgb(156,163,175);--activeColorAlpha:rgb(144,81,169 / 40%);--activeColor:rgb(144,81,169);--tableBodyColor:rgb(31 41 55 / 1);--backgroundGradient:linear-gradient(0deg,var(--darkerGradientPoint) 35%,var(--lighterGradientPoint));--cardBackgroundGradient:linear-gradient(0deg,var(--darkerGradientPoint),var(--lighterGradientPoint) 25%);--hoverGradientA:linear-gradient(130deg,rgb(255 255 255 / 35%) 20%,rgb(255 255 255 / 15%) 40%);--hoverGradientB:radial-gradient(100% 250% at 90% 190%,rgba(255,255,255,.15) 85%,rgba(255,255,255,.33) 100%);--shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2);--largerRadius:1.25em;--largeRadius:1em;--smallRadius:.5em;--smallerRadius:.375em;--borderWidth:.075em;--defaultBorder:var(--borderWidth) solid var(--borderColor);--defaultLighterBorder:var(--borderWidth) solid var(--lighterBorderColor);--loginPageBgUrl:url("");--loginPageText:"Sign in to continue";--blurSmallest:blur(2px);--blurDefault:blur(5px);--blurLarge:blur(10px);--blurLargest:blur(20px);}html{font-family:"Inter",serif;font-optical-sizing:auto;font-weight:425;font-style:normal;-webkit-tap-highlight-color:transparent!important;}.dashboardFooter{font-family:"Noto Sans",serif;transition:transform 50ms;}.dashboardFooter::after{content:var(--elegantFinFooterText);font-size:.8em;color:#4e4e60;}.material-icons{font-family:'Material Icons Round'!important;font-weight:normal;font-style:normal;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}.material-icons.info_outline:before{font-family:Material Icons;}::selection{background:var(--activeColorAlpha);}.cardImageIcon{color:var(--borderColor);}.card{padding:.375em;}.card:focus .cardBox:not(.visualCardBox) .cardScalable{border-color:var(--highlightOutlineColor)!important;filter:brightness(1.125);}.emby-button.show-focus:focus,.paper-icon-button-light.show-focus:focus{background-color:var(--highlightOutlineColor)!important;color:#fff;}.emby-tabs .emby-button.show-focus:focus{outline:none!important;color:#fff;background-color:var(--highlightOutlineColor)!important;}[dir=ltr] .itemsContainer>.card>.cardBox{margin-left:auto;margin-right:auto;}.vertical-wrap:not(.centered){justify-content:flex-start!important;}.countIndicator,.fullSyncIndicator,.mediaSourceIndicator{background:rgb(31,80,189);border:var(--defaultLighterBorder);}.cardScalable{border-radius:var(--largeRadius);border:var(--borderColor) solid calc(2 * var(--borderWidth))!important;overflow:hidden!important;transition:transform 125ms;}.layout-mobile .cardScalable{border:var(--defaultBorder)!important;}.cardImageContainer{transition:transform .375s;}.cardImageContainer>.cardDefaultText{font-size:2em;padding-top:1.5em;color:transparent;white-space:pre;}.cardImageContainer>.cardDefaultText::before{content:"?\A";color:var(--borderColor);}.card.card-hoverable:hover .cardScalable{border-color:var(--textColor)!important;}.card.card-hoverable:hover .cardImageContainer{transform:scale(1.025);filter:brightness(1.125);}.card.card-hoverable .itemSelectionPanel{transition:transform .125s;}.card.card-hoverable:hover .cardScalable,.card.card-hoverable:hover .itemSelectionPanel{transform:scale(1.02);}.card.card-hoverable .cardScalable:active{transition:transform .075s;transform:scale(1);}.cardScalable:has(.cardOverlayContainer .cardOverlayButton:hover)>.cardImageContainer{transform:scale(1);}.cardOverlayContainer{transition:.25s;background:var(--hoverGradientA);background-size:200%;background-position-x:100%;}.layout-desktop .card.card-hoverable:hover .cardOverlayContainer{background-position-x:0;}.cardBox:not(.visualCardBox) .cardPadder{background-color:var(--lighterGradientPoint);}.cardOverlayContainer>.cardOverlayFab-primary{left:unset;margin-left:unset;margin-top:unset;top:unset;right:1.25em;bottom:1.25em;}.carLine truncated
|
@import url("https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/round.css");@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{--darkerGradientPoint:#111827;--darkerGradientPointAlpha:rgba(17,24,39,.85);--lighterGradientPoint:#1d2635;--borderColor:rgb(71,80,92);--headerColor:rgba(30,40,54,.8);--drawerColor:rgba(30,40,54,.9);--lighterBorderColor:rgb(255 255 255 / 20%);--selectorBackgroundColor:rgb(55,65,81);--btnDeleteColor:rgb(169,29,29);--btnDeleteBorderColor:rgb(217,84,84);--btnSubmitColor:rgb(61,54,178);--btnSubmitBorderColor:rgb(117 111 226);--checkboxCheckedBgColor:rgb(79,70,229);--highlightOutlineColor:rgb(37,99,235);--textColor:rgb(209,213,219);--dimTextColor:rgb(156,163,175);--activeColorAlpha:rgb(201 143 255 / 40%);--activeColor:rgb(119 82 153);--tableBodyColor:rgb(31 41 55 / 1);--backgroundGradient:linear-gradient(0deg,var(--darkerGradientPoint) 35%,var(--lighterGradientPoint));--cardBackgroundGradient:linear-gradient(0deg,var(--darkerGradientPoint),var(--lighterGradientPoint) 25%);--hoverGradientA:linear-gradient(130deg,rgb(255 255 255 / 35%) 20%,rgb(255 255 255 / 15%) 40%);--hoverGradientB:radial-gradient(100% 250% at 90% 190%,rgba(255,255,255,.15) 85%,rgba(255,255,255,.33) 100%);--largerRadius:1.25em;--largeRadius:1em;--smallRadius:.5em;--smallerRadius:.375em;--borderWidth:.075em;}html{font-family:"Inter",serif;font-optical-sizing:auto;font-weight:425;font-style:normal;}.dashboardFooter{font-family:Noto Sans;transition:transform 50ms;}.dashboardFooter::after{content:"ElegantFin v25.01.03";font-size:.8em;color:#4e4e60;}.card{padding:.375em;}.card:focus .cardBox:not(.visualCardBox) .cardScalable{border-radius:var(--largerRadius)!important;border:solid rgba(0,0,0,1) var(--borderWidth)!important;outline:var(--borderWidth) rgba(255,255,255,1) solid;transition:border .1s;filter:brightness(1.125);}.emby-button.show-focus:focus,.paper-icon-button-light.show-focus:focus{background:#2f3a53;outline:var(--borderWidth) rgb(255 255 255) solid!important;outline-offset:calc(-1*var(--borderWidth));color:#fff;transition:outline 0s,border 0s;}.emby-tabs .emby-button.show-focus:focus{outline:.05em rgb(255 255 255) solid!important;outline-offset:-1em;color:#fff;border-radius:var(--largerRadius);}[dir=ltr] .itemsContainer>.card>.cardBox{margin-left:auto;margin-right:auto;}.vertical-wrap:not(.centered){justify-content:flex-start!important;}.countIndicator,.fullSyncIndicator,.mediaSourceIndicator{background:rgb(31,80,189);border:var(--lighterBorderColor) solid var(--borderWidth);}.playedIndicator{background:rgb(34,197,94);border:var(--lighterBorderColor) solid var(--borderWidth);}.cardScalable{border-radius:var(--largeRadius);border:var(--borderColor) solid calc(2 * var(--borderWidth))!important;overflow:hidden!important;transition:125ms transform;}.layout-mobile .cardScalable{border:var(--borderColor) solid var(--borderWidth)!important;}.cardImageContainer{transition:transform .375s;}.card.card-hoverable:hover .cardScalable{border-color:var(--textColor)!important;}.card.card-hoverable:hover .cardImageContainer{transform:scale(1.025);}.card.card-hoverable:hover .itemSelectionPanel{transform:scale(1.025);}.cardOverlayContainer{transition:.25s;background:var(--hoverGradientA);background-size:200%;background-position-x:100%;}.layout-desktop .card.card-hoverable:hover .cardOverlayContainer{background-position-x:0;}.cardBox:not(.visualCardBox) .cardPadder{background-color:var(--lighterGradientPoint);}.cardOverlayContainer>.cardOverlayFab-primary{left:unset;margin-left:unset;margin-top:unset;top:unset;right:1.25em;bottom:1.25em;}.cardOverlayContainer>.cardOverlayFab-primary,.listItemImageButton{background-color:rgba(0,0,0,.9);color:var(--textColor);border:solid var(--borderColor) var(--borderWidth);font-size:75%;}.cardOverlayContainer>.cardOverlayFab-primary:hover,.listItemImageButton:hover{background-color:rgba(0,0,0,.75)!important;}.layout-desktop .cardOverlayButton-br{display:none;}.layout-mobile .portraitCard .cardOverlayButton-br,.layout-mobile .backdropCard .cardOverlayButton-br{display:none;}.cardOverlayContainer:has(.cardOverlayButton:hover){backdrop-filter:blur(.25em);}.cardScalable:has(.cardOverlayContainer .cardOverlayButton:hover)>.cardImageContainer{transform:scale(1);}.card.card-hoverable:hover .cardScalable{transform:scale(1.02);}.listViewUserDataButtons{flex-direction:column;padding-inline-end:.75em;padding-inline-start:1em;}.smallBackdropCard,.squareCard,.backdropCard,.bannerCard{width:46%;max-width:18em;}@media (min-width:31.25em){.portraitCard,.smallBackdropCard,.squareCard{width:30%!important}}@media (min-width:43.75em){.portraitCard,.squareCard{width:23%!important}}@media (min-width:50em){.portraitCard,.squareCard{width:23%!important}}@media (min-width:25em){.backdropCard{width:46%}}@media (min-width:48.125em){.backdropCard{width:31%}}.detailLogo{display:none;}h1{font-size:3em;}.detailPageWrapperContainer{padding-top:unseLine truncated
|
||||||
@@ -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}
|
|
||||||
@@ -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;
|
|
||||||
}
|
|
||||||
@@ -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;
|
|
||||||
}
|
|
||||||
|
After Width: | Height: | Size: 82 KiB |
|
Before Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 53 KiB |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 9.1 KiB |
|
Before Width: | Height: | Size: 84 KiB |
|
Before Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 413 KiB |
|
Before Width: | Height: | Size: 485 KiB |
|
Before Width: | Height: | Size: 70 KiB |
|
Before Width: | Height: | Size: 2.0 MiB |
|
Before Width: | Height: | Size: 790 KiB |
|
Before Width: | Height: | Size: 383 KiB |
|
Before Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 330 KiB |
|
Before Width: | Height: | Size: 547 KiB |
|
Before Width: | Height: | Size: 83 KiB |
|
Before Width: | Height: | Size: 84 KiB |