From dd4725b28bf2ebbae75eddbbed031b4c78ddc907 Mon Sep 17 00:00:00 2001 From: lscambo13 Date: Thu, 24 Jul 2025 09:33:09 -0700 Subject: [PATCH] Fix: Added fallback to default Material Icons in case the internet is unreachable dev: Allowed more aspects to be configured using variables dev: Added more detailed comments to guide users dev: Removed the scale factor from the extra overlay buttons dev: code cleanup --- Theme/ElegantFin-theme-nightly.css | 76 +++++++++++++----------------- 1 file changed, 34 insertions(+), 42 deletions(-) diff --git a/Theme/ElegantFin-theme-nightly.css b/Theme/ElegantFin-theme-nightly.css index d14a63a..4e36ad9 100644 --- a/Theme/ElegantFin-theme-nightly.css +++ b/Theme/ElegantFin-theme-nightly.css @@ -55,6 +55,7 @@ --backgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint) 35%, var(--lighterGradientPoint)); --cardBackgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint), 25%, var(--lighterGradientPoint)); --headerColorGradient: linear-gradient(180deg, rgba(30, 40, 54, .95) 30%, 55%, transparent 90%); + --headerColorGradientAlt: linear-gradient(180deg, rgba(30, 40, 54, .95) 30%, 55%, transparent 90%); --headerBlurMask: linear-gradient(180deg, white 50%, 85%, transparent); --cardFooterGradient: linear-gradient(0deg, rgb(0 0 0 / 90%), 40%, transparent); @@ -64,14 +65,8 @@ --hoverGradientV: linear-gradient(0deg, transparent, rgb(255 255 255 / 100%) 45%, rgb(255 255 255 / 100%) 55%, transparent); --hoverGradientH: linear-gradient(90deg, transparent, rgb(255 255 255 / 100%) 45%, rgb(255 255 255 / 100%) 55%, transparent); - /* --ditheringMask: url(https://grainy-gradients.vercel.app/noise.svg); */ --itemBackdropMask: linear-gradient(180deg, rgba(0, 0, 0, .8), 75%, transparent); - /* login page customizations */ - /* --loginPageBgUrl: url("/Branding/Splashscreen?format=webp&foregroundLayer=1&quality=33&width=3840&height=2160&blur=2"); */ - --loginPageBgUrl: url(""); - --loginPageText: "Sign in to continue"; - /* standard component sizes */ --largerRadius: 1.25em; --largeRadius: 1em; @@ -85,23 +80,45 @@ --primaryItemPageNegativeSpace: 15vh; --secondaryItemPageNegativeSpace: 35vh; - - /* Set to 50% to center the play button in the overlay. */ - --overlayPlayButtonPosition: 2.8em; - --blurSmallest: blur(2px); --blurDefault: blur(5px); --blurLarge: blur(10px); --blurLargest: blur(20px); - /* --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); */ --shadow: .1em .1em .15em hsla(0, 0%, 0%, .3); - /* to revert to old icons, use 'Material Icons'*/ - --iconPack: 'Material Icons Round'; + /* use "" to enable a fancy blur behind the app header / top bar [default]; + use none (without quotes) to disable it */ + --headerBlurLayerVisibility: ""; + /* use --headerColorGradient if the above is enabled [default]; + use --headerColorGradientAlt otherwise */ + --headerColorBase: var(--headerColorGradient); + + /* fill out YOUR-JELLYFIN-SERVER-ADDRESS with a relevant host address; + url("/Branding/Splashscreen?format=webp&foregroundLayer=1&quality=33&width=3840&height=2160&blur=2"); */ + --loginPageBgUrl: url(""); + --loginPageText: "Sign in to continue"; + + /* use 2.8em keep the overlay play button at bottom-left corner [default]; + use 50% to place it at the center of a card */ + --overlayPlayButtonPosition: 2.8em; + + /* use 'Material Icons Round' for the new icons [default]; + use 'Material Icons' to revert to old icons */ + --iconPack: 'Material Icons Round', Material Icons; + + /* none: hides the watched and mark favorite buttons on hover [default]; + block: makes them visible use block */ --extraCardButtonsVisibility: none; + + /* none: hides the media library card labels [default]; + block: makes them visible */ --libraryLabelVisibility: none; + + /* use "" to enable the card hover effect [default]; + use none (without quotes) to disable it */ + --cardHoverEffect: ""; } html { @@ -339,7 +356,7 @@ html { } .card.card-hoverable .cardOverlayContainer:after { - content: ""; + content: var(--cardHoverEffect); transition: .5s; position: absolute; top: 0; @@ -407,7 +424,6 @@ html { bottom: .75em; right: .5em; display: var(--extraCardButtonsVisibility); - transform: scale(.85); z-index: 1; } @@ -1200,17 +1216,6 @@ html, .backdropContainer { background-color: var(--darkerGradientPoint); background: var(--backgroundGradient); - - /* background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1799 1799' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"), var(--backgroundGradient); - background-blend-mode: overlay, darken; */ - - /* background-color: hsla(220, 50%, 10%, 1); - background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1799 1799' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"), radial-gradient(circle at 85% 65%, hsla(230, 60%, 14%, 1) 10%, transparent 70%), radial-gradient(circle at 45% 40%, hsla(210, 40%, 10%, 1) 8%, transparent 75%), radial-gradient(circle at 20% 20%, hsla(240, 30%, 25%, 1) 6%, transparent 65%); - background-blend-mode: overlay, normal, normal, normal; */ - - /* background-color: hsla(0, 0%, 8%, 1); - background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1799 1799' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"), radial-gradient(circle at 85% 75%, hsla(0, 0%, 18%, 1) 8%, transparent 65%), radial-gradient(circle at 20% 40%, hsla(0, 0%, 15%, 1) 6%, transparent 70%), radial-gradient(circle at 60% 30%, hsla(0, 0%, 10%, 1) 10%, transparent 75%); - background-blend-mode: overlay, normal, normal, normal; */ } .backdropImage:after, @@ -1233,7 +1238,6 @@ html, .backdropImage:before { transform: scale(1.1); - height: -webkit-fill-available; filter: var(--blurLargest); } @@ -3405,29 +3409,17 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { background: var(--topOSDGradient); } -/* this is the default header, visible in home and libraries */ -.skinHeader-blurred:not(.osdHeader) { - /* backdrop-filter: var(--blurDefault); */ - /* background-color: var(--headerColor); */ - /* border: var(--defaultBorder); */ - /* border-width: 0 0 var(--borderWidth) 0; */ - /* border-color: transparent; */ - /* transition: .5s ease-in-out; */ - /* transition-property: background-color, backdrop-filter, transform, border-width; */ -} - .headroom { transition: transform .5s; } +/* this is the default header, visible in home and libraries */ .skinHeader-blurred:not(.osdHeader) { backdrop-filter: none; background-color: transparent; border: none; border-width: 0 0 var(--borderWidth) 0; - /* transition: .5s ease-in-out; */ - /* transition-property: background-color, backdrop-filter, transform, border-width; */ - background: var(--headerColorGradient); + background: var(--headerColorBase); padding-top: .75em; } @@ -3440,7 +3432,7 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { } .skinHeader-blurred:not(.osdHeader):not(.semiTransparent)::after { - content: ""; + content: var(--headerBlurLayerVisibility); position: absolute; top: 0; bottom: 0;