From fe01beda67836ad9449a0926e8bb251d816c901b Mon Sep 17 00:00:00 2001
From: HighImKevin <kevinjohncampbell@gmail.com>
Date: Wed, 16 Sep 2026 00:05:37 -0400
Subject: [PATCH] Improve Spotlight metadata styles and fix the Studios rows
 not getting a row-hue css var for dynamic background colors

---
 scripts/cardBuilder.css | 17 ++++++++++++++++-
 scripts/cardBuilder.js  | 11 ++++++++---
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/scripts/cardBuilder.css b/scripts/cardBuilder.css
index 4852b18..33f07d2 100644
--- a/scripts/cardBuilder.css
+++ b/scripts/cardBuilder.css
@@ -124,7 +124,7 @@
 	backface-visibility: hidden;
 	-webkit-backface-visibility: hidden;
 	transform-origin: center center;
-	animation: var(--spotlight-slide-animation, kenBurnsZoomIn) 20s linear both;
+	animation: var(--spotlight-slide-animation, kenBurnsZoomIn) 15s linear both;
 }
 
 /* Single backdrop (when tileCount is 1 or only one image) */
@@ -1731,6 +1731,10 @@
 	margin-left: 0px !important;
 	margin-right: 0px !important;
 	width: auto !important;
+	position: relative !important;
+	top: initial !important;
+	left: initial !important;
+	transform: unset !important;
 }
 
 .spotlight-section:not(.hide) .emby-tab-button {
@@ -4016,3 +4020,14 @@
 .custom-scroller-container .emby-scrollbuttons:has(:first-child[disabled]):has(:last-child[disabled]) {
 	display: none;
 }
+
+.missingIndicator,
+.unairedIndicator {
+	background: #c33;
+	border-radius: 100em;
+	color: #fff;
+	font-size: 84%;
+	font-weight: 500;
+	margin: 0 0.25em;
+	padding: 0.25em 0.5em;
+}
diff --git a/scripts/cardBuilder.js b/scripts/cardBuilder.js
index dff3f49..841378e 100644
--- a/scripts/cardBuilder.js
+++ b/scripts/cardBuilder.js
@@ -3801,7 +3801,7 @@
                     sectionTitleEl = titleLink;
                 } else {
                     sectionTitleEl = document.createElement('div');
-                    sectionTitleEl.className = 'emby-tab-button emby-tab-button-active';
+                    sectionTitleEl.className = 'emby-tab-button emby-tab-button-active emby-button-foreground';
                     sectionTitleEl.textContent = title;
                 }
 
@@ -3992,7 +3992,7 @@
             // icon: optional Material Icons name (e.g. 'schedule') - same pattern as genres/director/writer
             function createMetadataItem(content, tag = 'span', extraClasses = '', icon = null) {
                 const group = document.createElement('div');
-                group.className = 'headerTabs sectionTabs';
+                group.className = 'headerTabs sectionTabs emby-tabs-slider';
                 const item = document.createElement(tag);
                 item.className = 'emby-tab-button emby-button-foreground' + (extraClasses ? ' ' + extraClasses : '');
                 if (icon) item.setAttribute('data-icon', icon);
@@ -4052,7 +4052,7 @@
             // linkType: 'person' | 'genre' | 'studio' | null - when set, create links
             function createTruncatedList(label, items, maxItems = 3, isPeople = false, icon = null, linkType = null) {                
                 const container = document.createElement('div');
-                container.className = 'spotlight-truncated-list headerTabs sectionTabs';
+                container.className = 'spotlight-truncated-list headerTabs sectionTabs emby-tabs-slider';
                 container.setAttribute('data-label', label);
                 if (icon) container.setAttribute('data-icon', icon);
 
@@ -6307,6 +6307,11 @@
             verticalSection.setAttribute('data-card-format', cardFormat);
         }
 
+        // If the query is using the /Genres or /Studios paths, set the row hue to a random color
+        if (sectionConfig?.queries?.some(query => typeof query.path === 'string' && (query.path.includes('/Genres') || query.path.includes('/Studios')))) {
+            verticalSection.style.setProperty('--row-hue', `${Math.floor(Math.random() * 360)}deg`);
+        }
+
         // Create section title
         const sectionTitleContainer = document.createElement('div');
         sectionTitleContainer.className = 'sectionTitleContainer sectionTitleContainer-cards padded-left';