Improve Spotlight metadata styles and fix the Studios rows not getting a row-hue css var for dynamic background colors

This commit is contained in:
HighImKevin
2026-09-16 00:05:37 -04:00
parent 05d354355c
commit fe01beda67
2 changed files with 24 additions and 4 deletions
+16 -1
View File
@@ -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;
}
+8 -3
View File
@@ -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';