mirror of
https://github.com/ranaldsgift/KefinTweaks.git
synced 2026-11-05 15:52:47 +01:00
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:
+16
-1
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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';
|
||||
|
||||
Reference in New Issue
Block a user