Add new CSS modules: Spotlight Controls on Hover, Hide Title if Logo Present. Improve Zesty Theme support

scripts/skinConfig.js

@@ -76,6 +76,11 @@
                 url: 'https://cdn.jsdelivr.net/gh/LitCastVlog/Flow@main/CSS/ScyFlow-AnimatedOverlay.css',
                 enabled: false
             },
+            {
+                name: 'Left Aligned Font / Poster Spacing / Watched Indicators',
+                url: 'https://cdn.jsdelivr.net/gh/LitCastVlog/Flow@main/CSS/ScyFlow-FontTweaks.css',
+                enabled: false
+            },
             {
                 name: 'Wrap Items In Home Sections',
                 url: `${getKefinTweaksRoot()}skins/optional/global/wrapHomeScrollerItems.css`,
@@ -120,6 +125,16 @@
                 name: 'Studio Thumbnails',
                 url: `${getKefinTweaksRoot()}skins/optional/global/studioThumbnails.css`,
                 enabled: false
+            },
+            {
+                name: 'Spotlight Controls On Hover Only',
+                url: `${getKefinTweaksRoot()}skins/optional/global/spotlightControlsOnHover.css`,
+                enabled: false
+            },
+            {
+                name: 'Darken Background Images',
+                url: `${getKefinTweaksRoot()}skins/optional/global/darkenBackgroundImages.css`,
+                enabled: false
             }
         ],
         
@@ -758,11 +773,6 @@
                         name: 'Nyan Progress Bar',
                         url: 'https://cdn.jsdelivr.net/gh/LitCastVlog/Flow@main/CSS/Themes/NyanProgress.css',
                         enabled: false
-                    },
-                    {
-                        name: 'Left Aligned Font / Poster Spacing / Watched Indicators',
-                        url: 'https://cdn.jsdelivr.net/gh/LitCastVlog/Flow@main/CSS/ScyFlow-FontTweaks.css',
-                        enabled: false
                     }
                 ],
                 colorSchemes: [
@@ -1088,12 +1098,14 @@
                         majorServerVersions: [10],
                         urls: [
                             'https://cdn.jsdelivr.net/gh/stpnwf/ZestyTheme@legacy/v10.10/theme.css',
+                            `${getKefinTweaksRoot()}skins/zesty-kefin.css`
                         ]
                     },
                     {
                         majorServerVersions: [11],
                         urls: [
                             'https://cdn.jsdelivr.net/gh/stpnwf/ZestyTheme@latest/theme.css',
+                            `${getKefinTweaksRoot()}skins/zesty-kefin.css`
                         ]
                     },
                 ],

skins/optional/global/darkenBackgroundImages.css

@@ -0,0 +1,3 @@
+#reactRoot > .backgroundContainer.withBackdrop {
+    background-color: rgba(0, 0, 0, .85) !important;
+}

skins/optional/global/hideTitleIfLogoPresent.css

@@ -1,4 +1,4 @@
 /* Hide the title if a logo is present. Use visibility in case skins rely on it for spacing */
-:has(.detailLogo:not(.hide)) .nameContainer {
+:has(.libraryPage:not(.hide) .detailLogo:not(.hide)) .nameContainer {
     visibility: hidden;
 }

skins/optional/global/spotlightControlsOnHover.css

@@ -0,0 +1,8 @@
+.spotlight-section:not(:hover) .spotlight-nav-container {
+  opacity: 0;
+  transition: opacity .1s ease-in-out;
+}
+.spotlight-section:hover .spotlight-nav-container {
+  opacity: 1;
+  transition: opacity .1s ease-in-out;
+}

skins/zesty-kefin.css

@@ -0,0 +1,9 @@
+button.watchlist-icon.detailButton .material-icons {
+    display: none;
+}
+button.watchlist-icon.detailButton::after {
+    content: attr(title);
+}
+.layout-desktop .detailSection {
+    max-width: calc(100vw - 5%);
+}