mirror of
https://github.com/lscambo13/ElegantFin.git
synced 2026-10-26 09:39:34 +00:00
Compare commits
4
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
5efc1105e9 | ||
|
|
e4705ac02b | ||
|
|
2f9c727a5b | ||
|
|
c5f3e8804c |
No files matched your search
@@ -277,10 +277,6 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
|
||||
>
|
||||
> - Check out the [the theme Playground page](https://github.com/lscambo13/ElegantFin/discussions/221) for different color themes created by other users.
|
||||
> - You can also experiment and share your own take there if you wish.
|
||||
> - Note: ElegantFin now comes with both a dark and a light theme by default.
|
||||
> - To switch between the dark and light themes, go to `User Settings > Display > Theme` and select either **Dark** or **Light**.
|
||||
> - The "Theme" setting above is **not** to be confused with the "Server Dashboard Theme" in the Dashboard, which is **not supported**.
|
||||
> - Only the Light and Dark theme options are supported, and Jellyfin does not automatically switch between them, so you have to change it manually.
|
||||
|
||||
</details>
|
||||
|
||||
@@ -325,9 +321,11 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
|
||||
<details>
|
||||
<summary><i>12. Toggle the visibility of some UI elements on mobile</i></summary>
|
||||
|
||||
> <img width="640" height="auto" alt="image" src="https://github.com/user-attachments/assets/c11a1d94-9b56-419a-93df-5a6a43ec00c1" />
|
||||
>
|
||||
> - These variables control the visibility of small UI elements that show up on phones and small screens.
|
||||
> ```css
|
||||
> :root{
|
||||
> :root {
|
||||
> --miniOverlayButtonVisibility: block; /* block: show the mini play or three-dot button on cards on mobile [default]; none: always hide them on mobile */
|
||||
> --endsAtVisibility: block; /* block: show the 'Ends at...' time indicator on phones [default]; none: always hide it on phones */
|
||||
> --criticsRatingVisibility: none; /* none: hide the critics tomato rating on phones [default]; block: show it on phones */
|
||||
@@ -340,8 +338,7 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
|
||||
<details>
|
||||
<summary><i>13. Adjust component sizes (advanced)</i></summary>
|
||||
|
||||
> Caution: Changing these values may break the layout on different screen sizes, so please only adjust them if you are comfortable with CSS.
|
||||
>
|
||||
> - Caution: Changing these values may break the layout on different screen sizes, so please only adjust them if you are comfortable with CSS.
|
||||
> - These variables control the standard corner radius, border, and spacing values used throughout the theme.
|
||||
> ```css
|
||||
> :root{
|
||||
@@ -360,6 +357,37 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><i>14. Switch between IMDb and TMDB star colors</i></summary>
|
||||
|
||||
> <img width="1066" height="207" alt="star" src="https://github.com/user-attachments/assets/6ddc2ab6-5ea5-45bb-82a8-9256e594e410" />
|
||||
>
|
||||
> - Star rating icon in ElegantFin uses the TMDB colors by default, since that is where the rating is sourced from.
|
||||
> - To switch them to the gold IMDb colors, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
|
||||
> ```css
|
||||
> .starIcon {
|
||||
> --colors: var(--imdb);
|
||||
> }
|
||||
> ```
|
||||
> - To go back to the TMDB colors, replace `var(--imdb)` with `var(--tmdb)` or simply remove the code block.
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><i>15. Switch between Light and Dark modes</i></summary>
|
||||
|
||||
| Desktop | Mobile |
|
||||
| ----------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
|
||||
| <div align="center"><img src="https://github.com/user-attachments/assets/3483bca2-bc5f-4444-a815-51b27a38c4eb"><br><strong>Dark</strong></div> | <div align="center"><img src="https://github.com/user-attachments/assets/f3c9d4e2-7e72-498e-ad3b-d1db0fcecd19"></div> |
|
||||
| <div align="center"><img src="https://github.com/user-attachments/assets/a300fc79-c2c4-40bd-a18b-c0a45e381082"><br><strong>Light</strong></div> | <div align="center"><img src="https://github.com/user-attachments/assets/9f1d80df-dcdb-4088-a3e6-15ed4209f3ee"></div> |
|
||||
|
||||
> - ElegantFin now comes with a dark by default, but an alternative light mode is also available
|
||||
> - To switch between these modes, go to `User Settings > Display > Theme` and select either **Dark** or **Light**.
|
||||
> - The "Theme" setting above is **not** to be confused with the "Server Dashboard Theme" in the Dashboard, which is **not supported**.
|
||||
> - Only the Light and Dark theme options are supported, and Jellyfin does not automatically switch between them, so you have to change it manually.
|
||||
|
||||
</details>
|
||||
|
||||
<hr>
|
||||
|
||||
### 🆗 Tested on
|
||||
@@ -397,7 +425,7 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
|
||||
<summary>3️⃣ - <i>Why do I notice visual bugs and inconsistencies on Jellyfin Media Player?</i></summary>
|
||||
|
||||
> - JMP is based on Qt 5.x which uses a very outdated web engine. It does not support many new CSS features, so it is unsupported.
|
||||
> - [Jellyfin Desktop](https://github.com/jellyfin/jellyfin-desktop) is the new official client moving forward. It seems to be in testing right now. Use it for better compatibility or use the web app instead.
|
||||
> - You might want to try [Jellium Desktop](https://github.com/andrewrabert/jellium-desktop) which is an unofficial client, and it is still in testing right now.
|
||||
|
||||
</details>
|
||||
|
||||
|
||||
@@ -1 +1 @@
|
||||
/*! ElegantFin Theme v26.06.06 for Jellyfin by lscambo13 */@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");:root{--activeColor:#775bf4;--activeColorAlpha:rgba(119,91,244,.9);--appBarHeight:5em;--artistClearLogoVisibility:block;--artistPageBackground:unset;--artistTitleVisibility:none;--backdropTrimFromTop:10%;--backgroundAlphaOverlay:linear-gradient(180deg,var(--darkerGradientPointAlpha) 80%,transparent);--backgroundGradient:linear-gradient(0deg,var(--darkerGradientPoint) 35%,var(--lighterGradientPoint));--blurDefault:blur(5px);--blurLarge:blur(10px);--blurLargest:blur(20px);--blurSmallest:blur(2px);--borderColor:#47505c;--borderWidth:0.06em;--borderWidthDouble:0.12em;--bottomOSDGradient:linear-gradient(0deg,rgba(0,0,0,.8),45%,transparent);--btnDeleteBorderColor:#d95454;--btnDeleteColor:#a91d1d;--btnMiniPlayBorderColor:#32a769;--btnMiniPlayColor:#299a5d;--btnSubmitBorderColor:#756fe2;--btnSubmitColor:#3d36b2;--cardBackgroundGradient:linear-gradient(0deg,var(--darkerGradientPoint),25%,var(--lighterGradientPoint));--cardFooterGradient:linear-gradient(0deg,rgba(0,0,0,.9),40%,transparent);--cardHoverEffect:"";--checkboxCheckedBgColor:#4f46e5;--clearLogoVisibility:block;--darkerBorderColor:#31373f;--darkerGradientPoint:#111827;--darkerGradientPointAlpha:rgba(17,24,39,.85);--defaultBorder:var(--borderWidth) solid var(--borderColor);--defaultLighterBorder:var(--borderWidth) solid var(--lighterBorderColor);--dimTextColor:#9ca3af;--drawerColor:rgba(30,40,54,.9);--elegantFinFooterText:"ElegantFin v26.06.06";--extraCardButtonsVisibility:none;--gradientPointAlpha:rgba(29,38,53,.3);--headerBackground:var(--headerColorGradient);--headerBlurLayerVisibility:"";--headerBlurMask:linear-gradient(180deg,#fff 50%,85%,transparent);--headerColor:rgba(30,40,54,.8);--headerColorGradient:linear-gradient(180deg,rgba(30,40,54,.95) 30%,55%,transparent 90%);--headerColorGradientAlt:linear-gradient(180deg,#1e2836,70%,transparent);--highlightOutlineColor:#2563eb;--hoverGradientH:linear-gradient(90deg,transparent,hsla(0,0%,100%,.35) 45%,hsla(0,0%,100%,.35) 55%,transparent);--hoverGradientV:linear-gradient(0deg,transparent,hsla(0,0%,100%,.35) 45%,hsla(0,0%,100%,.35) 55%,transparent);--iconPack:"Material Symbols Rounded";--itemBackdropMask:linear-gradient(180deg,rgba(0,0,0,.8),75%,transparent);--itemColumnGap:1em;--itemOriginalTitleVisibility:block;--itemTitleVisibility:none;--largeRadius:1em;--largerRadius:1.25em;--libraryLabelVisibility:none;--lighterBorderColor:hsla(0,0%,100%,.2);--lighterGradientPoint:#1d2635;--lighterGradientPointAlpha:rgba(29,38,53,.85);--loginPageBgUrl:url();--loginPageText:"Sign in to continue";--menuButtonVisibility:block;--minEpisodeCardWidth:26em;--miniOverlayButtonVisibility:block;--osdSeekBarBufferedColorAlpha:hsla(0,0%,50%,.5);--osdSeekBarPlayedColor:var(--textColor);--osdSeekBarThumbColor:#fff;--overlayPlayButtonPosition:2.8em;--resumeCardScale:1;--selectorBackgroundColor:#374151;--selectorBackgroundColorAlpha:rgba(55,65,81,.5);--shadow:0.1em 0.1em 0.15em rgba(0,0,0,.3);--sidePadding:3.3%;--smallerRadius:0.375em;--smallRadius:0.5em;--tableBodyColor:#1f2937;--textColor:#d1d5db;--topOSDGradient:linear-gradient(180deg,rgba(0,0,0,.8),45%,transparent);--uiAccentColor:#756fe2;color-scheme:dark}html{font-family:Inter,sans-serif;font-optical-sizing:auto;font-style:normal;font-weight:425;-webkit-tap-highlight-color:transparent!important}body{--clearLogoBottomSpace:11em;--primaryItemPageNegativeSpace:14vh;--secondaryItemPageNegativeSpace:60vh}select{text-overflow:ellipsis}.layout-desktop>body:has(>audio[src]){--primaryItemPageNegativeSpace:calc(14vh + 5em);--secondaryItemPageNegativeSpace:calc(60vh + 5em)}.layout-mobile{--blurLargest:blur(12px);--headerBlurMask:linear-gradient(180deg,#fff 60%,90%,transparent);--headerColorGradient:var(--headerColorGradientAlt);--itemColumnGap:0.5em}.layout-mobile>body{--secondaryItemPageNegativeSpace:45vh}@font-face{font-family:Material Symbols Rounded Minimal;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/l/font?kit=sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjzarESMdAUY9qjb3u1M7e05tMSFFiwiIx7ihGnzWmz-lkbsBJUso54WUKiEWtV5-yu0mchXaMnO1vqpcxiqEd46a1XUtwWncyNNmxYr8hocRsPBG56BqeEkny0qMU_aSz_M2MYR8p9qc8uUfT0rnccAg__qWWJGuzJMRCBsajdQcef&skey=70ddea8fe54d532e&v=v346) format("woff2")}@font-face{font-family:Material Symbols Rounded;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/s/materialsymbolsrounded/v346/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2) format("woff2")}.material-icons{direction:ltr;display:inline-block;font-family:var(--iconPack),Material Icons!important;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;font-style:normal;font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 48;font-weight:400;letter-spacing:normal;line-height:1;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision;text-transform:none;vertical-aliLine truncated
|
||||
/*! ElegantFin Theme v26.09.05 for Jellyfin by lscambo13 */@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");@font-face{font-family:Material Symbols Rounded Minimal;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/l/font?kit=sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjzarESMdAUY9qjb3u1M7e05tMSFFiwiIx7ihGnzWmz-lkbjBJUko54uQNlqhKP2qww7THOuDASqI-hkRJowUB4AMXqmksLbVSypWpZCoCuR4ppEVE-Vm2EBGaEWVT1QQVqin1CJL8x-Ze-xGUuG3wq4dfIUCyyVOwlP0NhUaux0cITqh7BYw&skey=70ddea8fe54d532e&v=v362) format("woff2")}@font-face{font-family:Material Symbols Rounded;font-style:normal;font-weight:100 700;src:url(https://fonts.gstatic.com/s/materialsymbolsrounded/v362/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2) format("woff2")}:root{--elegantFinFooterText:"ElegantFin v26.09.05";font-family:Inter,sans-serif;font-optical-sizing:auto;font-style:normal;font-weight:425;-webkit-tap-highlight-color:transparent!important;--fill:1;--wght:400;--grad:0;--opsz:30;color:var(--textColor);color-scheme:dark;--largerRadius:1.25em;--largeRadius:1em;--smallRadius:0.5em;--smallerRadius:0.375em;--borderWidth:0.06em;--borderWidthDouble:0.12em;--defaultBorder:var(--borderWidth) solid var(--borderColor);--defaultLighterBorder:var(--borderWidth) solid var(--lighterBorderColor);--sidePadding:3.3%;--itemColumnGap:1em;--minEpisodeCardWidth:26em;--appBarHeight:5em;--blurSmallest:blur(2px);--blurDefault:blur(5px);--blurLarge:blur(10px);--blurLargest:blur(20px);--darkerGradientPoint:#111827;--darkerGradientPointAlpha:rgba(17,24,39,.85);--lighterGradientPoint:#1d2635;--lighterGradientPointAlpha:rgba(29,38,53,.85);--gradientPointAlpha:rgba(29,38,53,.3);--headerColor:rgba(30,40,54,.8);--drawerColor:rgba(30,40,54,.9);--borderColor:#47505c;--darkerBorderColor:#31373f;--lighterBorderColor:hsla(0,0%,100%,.2);--selectorBackgroundColor:#384252;--selectorBackgroundColorAlpha:rgba(56,66,82,.5);--textColor:#d1d5db;--dimTextColor:#9ca3af;--fullContrastColor:#fff;--zeroContrastColor:#000;--svgIconFilter:none;--clearLogoFilter:none;--accentColor:#5d55e7;--accentHoverColor:#756fe2;--semiTransparentAccentColor:hsla(0,0%,100%,.125);--btnPlayColor:var(--textColor);--btnPlayBorderColor:var(--borderColor);--btnMiniPlayColor:#299a5d;--btnMiniPlayBorderColor:#32a769;--btnDeleteColor:#a91d1d;--btnDeleteBorderColor:#d95454;--btnSubmitColor:#3d36b2;--btnSubmitBorderColor:#756fe2;--checkboxCheckedBgColor:#4f46e5;--highlightOutlineColor:#2563eb;--hoverBackgroundColor:var(--textColor);--hoverTabBackgroundColor:hsla(0,0%,100%,.9);--hoverTextColor:#fff;--activeBackgroundColor:var(--semiTransparentAccentColor);--activeTextColor:#fff;--cardHoverBorderColor:#fff;--cardResumeProgressColor:var(--textColor);--multiSelectOverlayColor:rgba(0,0,0,.8);--dividerColor:hsla(0,0%,100%,.05);--textareaBackgroundColor:var(--selectorBackgroundColor);--tableBodyColor:#1f2937;--osdSeekBarPlayedColor:var(--textColor);--osdSeekBarBufferedColorAlpha:hsla(0,0%,50%,.5);--osdSeekBarThumbColor:#fff;--backgroundGradient:linear-gradient(0deg,var(--darkerGradientPoint) 35%,var(--lighterGradientPoint));--cardBackgroundGradient:linear-gradient(0deg,var(--darkerGradientPoint),25%,var(--lighterGradientPoint));--backgroundAlphaOverlay:linear-gradient(180deg,var(--darkerGradientPointAlpha) 80%,transparent);--headerColorGradient:linear-gradient(180deg,rgba(30,40,54,.95) 30%,55%,transparent 90%);--headerColorGradientAlt:linear-gradient(180deg,#1e2836,70%,transparent);--headerBlurMask:linear-gradient(180deg,#fff 50%,85%,transparent);--cardFooterGradient:linear-gradient(0deg,hsla(0,0%,5%,.95),40%,transparent);--topOSDGradient:linear-gradient(180deg,rgba(0,0,0,.8),45%,transparent);--bottomOSDGradient:linear-gradient(0deg,rgba(0,0,0,.8),45%,transparent);--hoverGradientV:linear-gradient(0deg,transparent,hsla(0,0%,100%,.35) 45%,hsla(0,0%,100%,.35) 55%,transparent);--hoverGradientH:linear-gradient(90deg,transparent,hsla(0,0%,100%,.35) 45%,hsla(0,0%,100%,.35) 55%,transparent);--itemBackdropMask:linear-gradient(180deg,rgba(0,0,0,.8),75%,transparent);--shadow:0.1em 0.1em 0.15em rgba(0,0,0,.3);--cardShadow:0 1px 6px 0px rgba(0,0,0,.3);--iconShadow:0px 0px 2px rgba(0,0,0,.8),1px 1px 0px rgba(0,0,0,.5);--headerBackground:var(--headerColorGradient);--loginPageBgUrl:url();--loginPageText:"Sign in to continue";--overlayPlayButtonPosition:2.8em;--iconPack:"Material Symbols Rounded";--extraCardButtonsVisibility:none;--menuButtonVisibility:block;--itemOriginalTitleVisibility:block;--libraryLabelVisibility:none;--clearLogoVisibility:block;--itemTitleVisibility:none;--artistClearLogoVisibility:block;--artistTitleVisibility:none;--artistPageBackground:unset;--miniOverlayButtonVisibility:block;--endsAtVisibility:block;--criticsRatingVisibility:none;--cardHoverEffect:"";--backdropTrimFromTop:10%;--resumeCardScale:1}:root[data-theme=light]{color-scheme:light;--fill:0;--darkerGradientPoint:#f2f2f2;--darkerGradientPointAlpha:hsla(0,0%,95%,.85);--lighterGradientPoiLine truncated
|
||||
File diff suppressed because it is too large.
Load diff
+1
-1
@@ -1 +1 @@
|
||||
/*! Add-on: Custom Media Covers v26.06.06 for the ElegantFin Theme for Jellyfin by lscambo13 */:root{--colorOverlayAnimeCover:#bdcb63;--colorOverlayBooksCover:#a64446;--colorOverlayBoxsetsCover:#dbb435;--colorOverlayFoldersCover:#ad3c71;--colorOverlayHomevideosCover:#275ab9;--colorOverlayLivetvCover:#11629f;--colorOverlayMixedCover:#c23a3a;--colorOverlayMoviesCover:#c16768;--colorOverlayMusicCover:#0b5d48;--colorOverlayPlaylistsCover:#763dd8;--colorOverlayRecordedmoviesCover:#343434;--colorOverlayRecordedtvCover:#78641c;--colorOverlaySportsCover:#e97e3c;--colorOverlayTvshowsCover:#8c952b;--urlAnimeCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/anime.webp);--urlBooksCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/books.webp);--urlBoxsetsCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/boxsets.webp);--urlFoldersCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/folders.webp);--urlHomevideosCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/homevideos.webp);--urlLivetvCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/livetv.webp);--urlMixedCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/mixed.webp);--urlMoviesCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/movies.webp);--urlMusicCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/music.webp);--urlPlaylistsCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/playlists.webp);--urlRecordedmoviesCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/recordedmovies.webp);--urlRecordedtvCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/recordedtv.webp);--urlSportsCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/sports.webp);--urlTvshowsCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/tvshows.webp)}[data-type=CollectionFolder] .cardContent,[data-type=CollectionFolder] .defaultCardBackground,[data-type=UserView] .cardContent,[data-type=UserView] .defaultCardBackground{background-blend-mode:multiply;background-position:50%!important;background-size:cover!important;filter:contrast(.85)}.layout-tv [data-type=CollectionFolder]:before,.layout-tv [data-type=UserView]:before,[data-type=CollectionFolder] .cardContent:before,[data-type=UserView] .cardContent:before{color:#fff;content:attr(aria-label);font-family:Noto Sans;font-size:clamp(1em,max(2.5vh,2vw),2em);font-weight:800;position:absolute;text-align:center;white-space:normal;width:94%}.layout-tv [data-type=CollectionFolder]:before,.layout-tv [data-type=UserView]:before{align-content:center;bottom:0;display:grid;top:0;z-index:1}[data-type=CollectionFolder] .cardImageIcon:not(.quiz):before,[data-type=UserView] .cardImageIcon:not(.quiz):before{display:none}[data-collectiontype=movies] .cardContent{background-color:var(--colorOverlayMoviesCover)!important;background-image:var(--urlMoviesCover)!important}[data-collectiontype=tvshows] .cardContent{background-color:var(--colorOverlayTvshowsCover)!important;background-image:var(--urlTvshowsCover)!important}[data-collectiontype=livetv] .cardContent{background-color:var(--colorOverlayLivetvCover)!important;background-image:var(--urlLivetvCover)!important}[data-collectiontype=music] .cardContent{background-color:var(--colorOverlayMusicCover)!important;background-image:var(--urlMusicCover)!important}[data-collectiontype=homevideos] .cardContent{background-color:var(--colorOverlayHomevideosCover)!important;background-image:var(--urlHomevideosCover)!important}[data-collectiontype=books] .cardContent{background-color:var(--colorOverlayBooksCover)!important;background-image:var(--urlBooksCover)!important}[data-collectiontype=boxsets] .cardContent{background-color:var(--colorOverlayBoxsetsCover)!important;background-image:var(--urlBoxsetsCover)!important}[data-collectiontype=folders] .cardContent{background-color:var(--colorOverlayFoldersCover)!important;background-image:var(--urlFoldersCover)!important}[data-collectiontype=playlists] .cardContent{background-color:var(--colorOverlayPlaylistsCover)!important;background-image:var(--urlPlaylistsCover)!important}[data-type=CollectionFolder][data-prefix=MIX] .cardContent{background-color:var(--colorOverlayMixedCover)!important;background-image:var(--urlMixedCover)!important}[dLine truncated
|
||||
/*! Add-on: Custom Media Covers v26.09.05 for the ElegantFin Theme for Jellyfin by lscambo13 */:root{--colorOverlayMoviesCover:#c16768;--colorOverlayTvshowsCover:#8c952b;--colorOverlayLivetvCover:#11629f;--colorOverlayPlaylistsCover:#763dd8;--colorOverlayBoxsetsCover:#dbb435;--colorOverlayMusicCover:#0b5d48;--colorOverlayHomevideosCover:#275ab9;--colorOverlayBooksCover:#a64446;--colorOverlayFoldersCover:#ad3c71;--colorOverlayMixedCover:#c23a3a;--colorOverlayRecordedmoviesCover:#343434;--colorOverlayRecordedtvCover:#78641c;--colorOverlayAnimeCover:#bdcb63;--colorOverlaySportsCover:#e97e3c;--urlMoviesCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/movies.webp);--urlTvshowsCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/tvshows.webp);--urlLivetvCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/livetv.webp);--urlPlaylistsCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/playlists.webp);--urlBoxsetsCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/boxsets.webp);--urlMusicCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/music.webp);--urlHomevideosCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/homevideos.webp);--urlBooksCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/books.webp);--urlFoldersCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/folders.webp);--urlMixedCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/mixed.webp);--urlRecordedmoviesCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/recordedmovies.webp);--urlRecordedtvCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/recordedtv.webp);--urlAnimeCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/anime.webp);--urlSportsCover:url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/sports.webp)}[data-type=CollectionFolder] .cardContent,[data-type=CollectionFolder] .defaultCardBackground,[data-type=UserView] .cardContent,[data-type=UserView] .defaultCardBackground{background-blend-mode:multiply;background-position:50%!important;background-size:cover!important;filter:contrast(.85)}.layout-tv [data-type=CollectionFolder]:before,.layout-tv [data-type=UserView]:before,[data-type=CollectionFolder] .cardContent:before,[data-type=UserView] .cardContent:before{color:#fff;content:attr(aria-label);font-family:Noto Sans;font-size:clamp(1em,max(2.5vh,2vw),2em);font-weight:800;position:absolute;text-align:center;white-space:normal;width:94%}.layout-tv [data-type=CollectionFolder]:before,.layout-tv [data-type=UserView]:before{align-content:center;bottom:0;display:grid;top:0;z-index:1}[data-type=CollectionFolder] .cardImageIcon:not(.quiz):before,[data-type=UserView] .cardImageIcon:not(.quiz):before{display:none}[data-collectiontype=movies] .cardContent{background-color:var(--colorOverlayMoviesCover)!important;background-image:var(--urlMoviesCover)!important}[data-collectiontype=tvshows] .cardContent{background-color:var(--colorOverlayTvshowsCover)!important;background-image:var(--urlTvshowsCover)!important}[data-collectiontype=livetv] .cardContent{background-color:var(--colorOverlayLivetvCover)!important;background-image:var(--urlLivetvCover)!important}[data-collectiontype=music] .cardContent{background-color:var(--colorOverlayMusicCover)!important;background-image:var(--urlMusicCover)!important}[data-collectiontype=homevideos] .cardContent{background-color:var(--colorOverlayHomevideosCover)!important;background-image:var(--urlHomevideosCover)!important}[data-collectiontype=books] .cardContent{background-color:var(--colorOverlayBooksCover)!important;background-image:var(--urlBooksCover)!important}[data-collectiontype=boxsets] .cardContent{background-color:var(--colorOverlayBoxsetsCover)!important;background-image:var(--urlBoxsetsCover)!important}[data-collectiontype=folders] .cardContent{background-color:var(--colorOverlayFoldersCover)!important;background-image:var(--urlFoldersCover)!important}[data-collectiontype=playlists] .cardContent{background-color:var(--colorOverlayPlaylistsCover)!important;background-image:var(--urlPlaylistsCover)!important}[data-type=CollectionFolder][data-prefix=MIX] .cardContent{background-color:var(--colorOverlayMixedCover)!important;background-image:var(--urlMixedCover)!important}[dLine truncated
|
||||
@@ -0,0 +1,149 @@
|
||||
/*! Add-on: Custom Media Covers v26.09.05 for the ElegantFin Theme for Jellyfin by lscambo13 */
|
||||
|
||||
:root {
|
||||
/* my media library default covers customizations */
|
||||
--colorOverlayMoviesCover: rgb(193, 103, 104);
|
||||
--colorOverlayTvshowsCover: rgb(140, 149, 43);
|
||||
--colorOverlayLivetvCover: rgb(17, 98, 159);
|
||||
--colorOverlayPlaylistsCover: rgb(118, 61, 216);
|
||||
--colorOverlayBoxsetsCover: rgb(219, 180, 53);
|
||||
--colorOverlayMusicCover: rgb(11, 93, 72);
|
||||
--colorOverlayHomevideosCover: rgb(39, 90, 185);
|
||||
--colorOverlayBooksCover: rgb(166, 68, 70);
|
||||
--colorOverlayFoldersCover: rgb(173, 60, 113);
|
||||
--colorOverlayMixedCover: rgb(194, 58, 58);
|
||||
--colorOverlayRecordedmoviesCover: rgb(52, 52, 52);
|
||||
--colorOverlayRecordedtvCover: rgb(120, 100, 28);
|
||||
--colorOverlayAnimeCover: rgb(189, 203, 99);
|
||||
--colorOverlaySportsCover: rgb(233, 126, 60);
|
||||
--urlMoviesCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/movies.webp);
|
||||
--urlTvshowsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/tvshows.webp);
|
||||
--urlLivetvCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/livetv.webp);
|
||||
--urlPlaylistsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/playlists.webp);
|
||||
--urlBoxsetsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/boxsets.webp);
|
||||
--urlMusicCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/music.webp);
|
||||
--urlHomevideosCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/homevideos.webp);
|
||||
--urlBooksCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/books.webp);
|
||||
--urlFoldersCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/folders.webp);
|
||||
--urlMixedCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/mixed.webp);
|
||||
--urlRecordedmoviesCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/recordedmovies.webp);
|
||||
--urlRecordedtvCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/recordedtv.webp);
|
||||
--urlAnimeCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/anime.webp);
|
||||
--urlSportsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/sports.webp);
|
||||
}
|
||||
|
||||
[data-type="CollectionFolder"] .defaultCardBackground,
|
||||
[data-type="UserView"] .defaultCardBackground,
|
||||
[data-type="CollectionFolder"] .cardContent,
|
||||
[data-type="UserView"] .cardContent {
|
||||
filter: contrast(0.85);
|
||||
background-size: cover !important;
|
||||
background-position: 50% !important;
|
||||
background-blend-mode: multiply;
|
||||
}
|
||||
|
||||
[data-type="CollectionFolder"] .cardContent::before,
|
||||
[data-type="UserView"] .cardContent::before {
|
||||
content: attr(aria-label);
|
||||
position: absolute;
|
||||
font-size: clamp(1em, max(2.5vh, 2vw), 2em);
|
||||
font-weight: 800;
|
||||
color: white;
|
||||
font-family: "Noto Sans";
|
||||
text-align: center;
|
||||
width: 94%;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.layout-tv [data-type="CollectionFolder"]::before,
|
||||
.layout-tv [data-type="UserView"]::before {
|
||||
content: attr(aria-label);
|
||||
position: absolute;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
font-size: clamp(1em, max(2.5vh, 2vw), 2em);
|
||||
font-weight: 800;
|
||||
color: white;
|
||||
font-family: "Noto Sans";
|
||||
text-align: center;
|
||||
width: 94%;
|
||||
white-space: normal;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
[data-type="CollectionFolder"] .cardImageIcon:not(.quiz)::before,
|
||||
[data-type="UserView"] .cardImageIcon:not(.quiz)::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-collectiontype="movies"] .cardContent {
|
||||
background-color: var(--colorOverlayMoviesCover) !important;
|
||||
background-image: var(--urlMoviesCover) !important;
|
||||
}
|
||||
|
||||
[data-collectiontype="tvshows"] .cardContent {
|
||||
background-color: var(--colorOverlayTvshowsCover) !important;
|
||||
background-image: var(--urlTvshowsCover) !important;
|
||||
}
|
||||
|
||||
[data-collectiontype="livetv"] .cardContent {
|
||||
background-color: var(--colorOverlayLivetvCover) !important;
|
||||
background-image: var(--urlLivetvCover) !important;
|
||||
}
|
||||
|
||||
[data-collectiontype="music"] .cardContent {
|
||||
background-color: var(--colorOverlayMusicCover) !important;
|
||||
background-image: var(--urlMusicCover) !important;
|
||||
}
|
||||
|
||||
[data-collectiontype="homevideos"] .cardContent {
|
||||
background-color: var(--colorOverlayHomevideosCover) !important;
|
||||
background-image: var(--urlHomevideosCover) !important;
|
||||
}
|
||||
|
||||
[data-collectiontype="books"] .cardContent {
|
||||
background-color: var(--colorOverlayBooksCover) !important;
|
||||
background-image: var(--urlBooksCover) !important;
|
||||
}
|
||||
|
||||
[data-collectiontype="boxsets"] .cardContent {
|
||||
background-color: var(--colorOverlayBoxsetsCover) !important;
|
||||
background-image: var(--urlBoxsetsCover) !important;
|
||||
}
|
||||
|
||||
[data-collectiontype="folders"] .cardContent {
|
||||
background-color: var(--colorOverlayFoldersCover) !important;
|
||||
background-image: var(--urlFoldersCover) !important;
|
||||
}
|
||||
|
||||
[data-collectiontype="playlists"] .cardContent {
|
||||
background-color: var(--colorOverlayPlaylistsCover) !important;
|
||||
background-image: var(--urlPlaylistsCover) !important;
|
||||
}
|
||||
|
||||
[data-type="CollectionFolder"][data-prefix="MIX"] .cardContent {
|
||||
background-color: var(--colorOverlayMixedCover) !important;
|
||||
background-image: var(--urlMixedCover) !important;
|
||||
}
|
||||
|
||||
[data-collectiontype="movies"][data-prefix="REC"] .cardContent {
|
||||
background-color: var(--colorOverlayRecordedmoviesCover) !important;
|
||||
background-image: var(--urlRecordedmoviesCover) !important;
|
||||
}
|
||||
|
||||
[data-type="CollectionFolder"][data-prefix="REC"] .cardContent {
|
||||
background-color: var(--colorOverlayRecordedtvCover) !important;
|
||||
background-image: var(--urlRecordedtvCover) !important;
|
||||
}
|
||||
|
||||
[data-type="CollectionFolder"][data-prefix="ANI"] .cardContent {
|
||||
background-color: var(--colorOverlayAnimeCover) !important;
|
||||
background-image: var(--urlAnimeCover) !important;
|
||||
}
|
||||
|
||||
[data-type="CollectionFolder"][data-prefix="SPO"] .cardContent {
|
||||
background-color: var(--colorOverlaySportsCover) !important;
|
||||
background-image: var(--urlSportsCover) !important;
|
||||
}
|
||||
@@ -1 +1 @@
|
||||
/*! Add-on: Media Bar Plugin Support v26.06.06 for the ElegantFin Theme for Jellyfin by lscambo13 */.detail-button:before,.favorite-button.favorited:before,.favorite-button:before,.play-button:before{font-weight:400}.play-button{font-family:Inter;font-size:1em;font-weight:500;order:1}.detail-button,.favorite-button{order:2}.backdrop,.backdrop-container,.backdrop-overlay{background-color:transparent;mask-image:linear-gradient(180deg,rgba(0,0,0,.85),70%,transparent);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85),70%,transparent)}.backdrop{transform-origin:center left}.rating-value{flex-wrap:wrap;justify-content:center}.age-rating{color:unset;font-family:Archivo Narrow,sans-serif;font-size:.8em}#slides-container{height:62%;left:var(--sidePadding);overflow:visible;position:absolute;top:calc(var(--appBarHeight)*2 + 1.25em);user-select:none;width:calc(100vw - var(--sidePadding)*2)}.slide{border:var(--defaultBorder);border-radius:var(--largerRadius);overflow:hidden;transition:border 0s}.logo-container{top:10vh}.backdrop,.backdrop-container,.backdrop-overlay{mask-image:none;-webkit-mask-image:none}.backdrop-overlay{background:linear-gradient(0deg,rgba(0,0,0,.85),40%,transparent)}.pause-button,.volume-toggle{top:1em!important}.separator-icon{color:var(--dimTextColor);font-size:5px}.dot{background-color:var(--textColor)!important;border-radius:.25em;height:.375em;opacity:.5;transition:width .5s;width:.375em}.dot.active{transform:none;width:2em}@media only screen and (orientation:landscape){.button-container,.dots-container,.genre,.info-container,.plot-container{top:unset}.button-container{bottom:3em}.dots-container{bottom:4.5em}.plot-container{bottom:7em;height:4em}.genre{bottom:12em}.info-container{bottom:14em}.logo-container{align-items:flex-end;max-width:35vw;top:3%}.gradient-overlay{background:linear-gradient(37deg,rgba(0,0,0,.2) 32%,rgb(29 29 29/7%) 47%,rgba(29,29,29,0));mask:none;-webkit-mask:none}}@media only screen and (max-width:767px) and (orientation:portrait){.button-container{bottom:3em}.genre,.tomato-rating{display:none}.dots-container{bottom:6em}.info-container{bottom:5em}.logo-container{top:calc(100% - 15em)}.backdrop{transform-origin:center}.left-arrow,.right-arrow{display:none!important}.play-button{order:2}}@media (min-width:75em){#slides-container{top:calc(var(--appBarHeight) + 1.25em)}.layout-tv #slides-container{top:calc(var(--appBarHeight)*2 + 1.25em)}}@media (min-width:100em){.layout-tv #slides-container{top:calc(var(--appBarHeight) + 1.25em)}}@media only screen and (max-height:767px) and (orientation:landscape){#slides-container{height:57%}.logo-container{top:3%}}
|
||||
/*! Add-on: Media Bar Plugin Support v26.09.05 for the ElegantFin Theme for Jellyfin by lscambo13 */.detail-button:before,.favorite-button.favorited:before,.favorite-button:before,.play-button:before{font-weight:400}.play-button{font-family:Inter;font-size:1em;font-weight:500;order:1}.detail-button,.favorite-button{order:2}.backdrop-container,.backdrop-overlay,.backdrop:not(.tmla-mask){background-color:transparent;mask-image:linear-gradient(180deg,rgba(0,0,0,.85),70%,transparent);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85),70%,transparent)}.backdrop:not(.tmla-mask){transform-origin:center left}.rating-value{flex-wrap:wrap;justify-content:center}.age-rating{color:unset;font-family:Archivo Narrow,sans-serif;font-size:.8em}#slides-container{height:62%;left:var(--sidePadding);overflow:visible;position:absolute;top:calc(var(--appBarHeight)*2 + 1.25em);user-select:none;width:calc(100vw - var(--sidePadding)*2)}.slide{border:var(--defaultBorder);border-radius:var(--largerRadius);overflow:hidden;transition:border 0s}.logo-container{top:10vh}.backdrop-container,.backdrop-overlay,.backdrop:not(.tmla-mask){mask-image:none;-webkit-mask-image:none}.backdrop-overlay{background:linear-gradient(0deg,rgba(0,0,0,.85),40%,transparent)}.pause-button,.volume-toggle{top:1em!important}.separator-icon{color:var(--dimTextColor);font-size:5px}.dot{background-color:var(--textColor)!important;border-radius:.25em;height:.375em;opacity:.5;transition:width .5s;width:.375em}.dot.active{transform:none;width:2em}@media only screen and (orientation:landscape){.button-container,.dots-container,.genre,.info-container,.plot-container{top:unset}.button-container{bottom:3em}.dots-container{bottom:4.5em}.plot-container{bottom:7em;height:4em}.genre{bottom:12em}.info-container{bottom:14em}.logo-container{align-items:flex-end;max-width:35vw;top:3%}.gradient-overlay{background:linear-gradient(37deg,rgba(0,0,0,.2) 32%,rgb(29 29 29/7%) 47%,rgba(29,29,29,0));mask:none;-webkit-mask:none}}@media only screen and (max-width:767px) and (orientation:portrait){.button-container{bottom:3em}.genre,.tomato-rating{display:none}.dots-container{bottom:6em}.info-container{bottom:5em}.logo-container{top:calc(100% - 15em)}.backdrop:not(.tmla-mask){transform-origin:center}.left-arrow,.right-arrow{display:none!important}.play-button{order:2}}@media (min-width:75em){#slides-container{top:calc(var(--appBarHeight) + 1.25em)}.layout-tv #slides-container{top:calc(var(--appBarHeight)*2 + 1.25em)}}@media (min-width:100em){.layout-tv #slides-container{top:calc(var(--appBarHeight) + 1.25em)}}@media only screen and (max-height:767px) and (orientation:landscape){#slides-container{height:57%}.logo-container{top:3%}}
|
||||
@@ -0,0 +1,206 @@
|
||||
/*! Add-on: Media Bar Plugin Support v26.09.05 for the ElegantFin Theme for Jellyfin by lscambo13 */
|
||||
/* this styles the media bar plugin - start */
|
||||
.play-button::before,
|
||||
.detail-button::before,
|
||||
.favorite-button::before,
|
||||
.favorite-button.favorited::before {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.play-button {
|
||||
font-family: "Inter";
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.detail-button,
|
||||
.favorite-button {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.backdrop:not(.tmla-mask),
|
||||
.backdrop-container,
|
||||
.backdrop-overlay {
|
||||
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), 70%, rgba(0, 0, 0, 0));
|
||||
-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), 70%, rgba(0, 0, 0, 0));
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.backdrop:not(.tmla-mask) {
|
||||
transform-origin: center left;
|
||||
}
|
||||
|
||||
.rating-value {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.age-rating {
|
||||
font-size: 0.8em;
|
||||
font-family: "Archivo Narrow", sans-serif;
|
||||
color: unset;
|
||||
}
|
||||
|
||||
#slides-container {
|
||||
width: calc(100vw - (2 * var(--sidePadding)));
|
||||
height: 62%;
|
||||
top: calc(var(--appBarHeight) * 2 + 1.25em);
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
left: var(--sidePadding);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.slide {
|
||||
border: var(--defaultBorder);
|
||||
border-radius: var(--largerRadius);
|
||||
overflow: hidden;
|
||||
transition: border 0s;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
top: 10vh;
|
||||
}
|
||||
|
||||
.backdrop:not(.tmla-mask),
|
||||
.backdrop-container,
|
||||
.backdrop-overlay {
|
||||
mask-image: none;
|
||||
-webkit-mask-image: none;
|
||||
}
|
||||
|
||||
.backdrop-overlay {
|
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), 40%, transparent);
|
||||
}
|
||||
|
||||
.pause-button,
|
||||
.volume-toggle {
|
||||
top: 1em !important;
|
||||
}
|
||||
|
||||
.separator-icon {
|
||||
font-size: 5px;
|
||||
color: var(--dimTextColor);
|
||||
}
|
||||
|
||||
.dot {
|
||||
border-radius: 0.25em;
|
||||
width: 0.375em;
|
||||
height: 0.375em;
|
||||
transition: width 0.5s;
|
||||
opacity: 0.5;
|
||||
background-color: var(--textColor) !important;
|
||||
}
|
||||
|
||||
.dot.active {
|
||||
width: 2em;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
@media only screen and (orientation: landscape) {
|
||||
.button-container,
|
||||
.dots-container,
|
||||
.plot-container,
|
||||
.genre,
|
||||
.info-container {
|
||||
top: unset;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
bottom: 3em;
|
||||
}
|
||||
|
||||
.dots-container {
|
||||
bottom: 4.5em;
|
||||
}
|
||||
|
||||
.plot-container {
|
||||
height: 4em;
|
||||
bottom: 7em;
|
||||
}
|
||||
|
||||
.genre {
|
||||
bottom: 12em;
|
||||
}
|
||||
|
||||
.info-container {
|
||||
bottom: 14em;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
top: 3%;
|
||||
align-items: flex-end;
|
||||
max-width: 35vw;
|
||||
}
|
||||
|
||||
.gradient-overlay {
|
||||
mask: none;
|
||||
-webkit-mask: none;
|
||||
background: linear-gradient(37deg, rgb(0 0 0 / 20%) 32%, rgb(29 29 29 / 7%) 47%, rgb(29 29 29 / 0%) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) and (orientation: portrait) {
|
||||
.button-container {
|
||||
bottom: 3em;
|
||||
}
|
||||
|
||||
.tomato-rating,
|
||||
.genre {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dots-container {
|
||||
bottom: 6em;
|
||||
}
|
||||
|
||||
.info-container {
|
||||
bottom: 5em;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
top: calc(100% - 15em);
|
||||
}
|
||||
|
||||
.backdrop:not(.tmla-mask) {
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.left-arrow,
|
||||
.right-arrow {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.play-button {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 75em) {
|
||||
#slides-container {
|
||||
top: calc(var(--appBarHeight) + 1.25em);
|
||||
}
|
||||
|
||||
.layout-tv #slides-container {
|
||||
top: calc(var(--appBarHeight) * 2 + 1.25em);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 100em) {
|
||||
.layout-tv #slides-container {
|
||||
top: calc(var(--appBarHeight) + 1.25em);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 767px) and (orientation: landscape) {
|
||||
#slides-container {
|
||||
height: 57%;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
top: 3%;
|
||||
}
|
||||
}
|
||||
|
||||
/* this styles the media bar plugin - end */
|
||||
+4
-4
@@ -6,10 +6,10 @@
|
||||
"postcss-cli": "^11.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
"build:theme": "postcss ./Theme/ElegantFin-theme-nightly.css -o ./Theme/ElegantFin-jellyfin-theme-build-latest-minified.css",
|
||||
"build:covers-addon": "postcss ./Theme/assets/add-ons/custom-media-covers-nightly.css -o ./Theme/assets/add-ons/custom-media-covers-latest-min.css",
|
||||
"build:mediabar-addon": "postcss ./Theme/assets/add-ons/media-bar-plugin-support-nightly.css -o ./Theme/assets/add-ons/media-bar-plugin-support-latest-min.css",
|
||||
"build:release": "npm run build:theme && npm run build:covers-addon && npm run build:mediabar-addon",
|
||||
"minify:theme": "postcss ./Theme/ElegantFin-theme-nightly.css -o ./Theme/ElegantFin-theme-nightly-min.css",
|
||||
"minify:covers-addon": "postcss ./Theme/assets/add-ons/custom-media-covers-nightly.css -o ./Theme/assets/add-ons/custom-media-covers-nightly-min.css",
|
||||
"minify:mediabar-addon": "postcss ./Theme/assets/add-ons/media-bar-plugin-support-nightly.css -o ./Theme/assets/add-ons/media-bar-plugin-support-nightly-min.css",
|
||||
"minify:all": "npm run minify:theme && npm run minify:covers-addon && npm run minify:mediabar-addon",
|
||||
"watch:theme": "postcss ./Theme/ElegantFin-theme-nightly.css -o ./Theme/ElegantFin-theme-nightly-min.css --watch --verbose",
|
||||
"watch:covers-addon": "postcss ./Theme/assets/add-ons/custom-media-covers-nightly.css -o ./Theme/assets/add-ons/custom-media-covers-nightly-min.css --watch --verbose",
|
||||
"watch:mediabar-addon": "postcss ./Theme/assets/add-ons/media-bar-plugin-support-nightly.css -o ./Theme/assets/add-ons/media-bar-plugin-support-nightly-min.css --watch --verbose",
|
||||
|
||||
Reference in new issue
Block a user