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

@@ -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("<YOUR-JELLYFIN-SERVER-ADDRESS>/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("<YOUR-JELLYFIN-SERVER-ADDRESS>/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;