From 2ce8973dee7e2a90b3e0d4e8072edc39011465c3 Mon Sep 17 00:00:00 2001 From: HighImKevin Date: Tue, 24 Mar 2026 06:19:52 -0400 Subject: [PATCH] More Spotlight layout improvements and animation fixes --- scripts/cardBuilder.css | 221 +++++++++++++++++++++++++++------------- scripts/cardBuilder.js | 22 ++-- 2 files changed, 159 insertions(+), 84 deletions(-) diff --git a/scripts/cardBuilder.css b/scripts/cardBuilder.css index be06643..8c6204d 100644 --- a/scripts/cardBuilder.css +++ b/scripts/cardBuilder.css @@ -8,7 +8,6 @@ .spotlight-banner-container { position: relative; - height: 450px; overflow: hidden; border-radius: 8px; } @@ -20,17 +19,25 @@ justify-content: center; } +.spotlight-section[data-layout="Border"][data-size="normal"] .spotlight-banner-container { + height: 40vh; +} + /* Size variants */ /* .spotlight-section[data-layout="Borderless"][data-size="full"][data-order="1"] .spotlight-banner-container { height: 94vh !important; } */ +.spotlight-section[data-layout="Borderless"][data-size="normal"] .spotlight-banner-container { + height: 50vh +} + .spotlight-section[data-size="full"] .spotlight-banner-container { height: 94vh !important; } .layout-mobile .spotlight-section[data-size="full"] .spotlight-banner-container { - height: 80vh !important; + height: 85vh !important; } .spotlight-items-container { @@ -306,30 +313,30 @@ mask-size: 100% 100%; } -/* Three-tile: center layer – symmetric soft fade on both edges for seamless left/center and center/right blend */ +/* Three-tile: center layer – symmetric soft fade on both edges for seamless left/center and center/right blend */ .spotlight-background-layer-center { - left: 33.333%; + left: 31.25%; width: 33.334%; -webkit-mask-image: linear-gradient( to right, rgba(0, 0, 0, 0) 0%, - rgba(0, 0, 0, 0.25) 8%, - rgba(0, 0, 0, 0.5) 18%, - rgba(0, 0, 0, 1) 30%, - rgba(0, 0, 0, 1) 70%, - rgba(0, 0, 0, 0.5) 82%, - rgba(0, 0, 0, 0.25) 92%, + rgba(0, 0, 0, 0.25) 5%, + rgba(0, 0, 0, 0.5) 10%, + rgba(0, 0, 0, 1) 15%, + rgba(0, 0, 0, 1) 85%, + rgba(0, 0, 0, 0.5) 90%, + rgba(0, 0, 0, 0.25) 95%, rgba(0, 0, 0, 0) 100% ); mask-image: linear-gradient( to right, rgba(0, 0, 0, 0) 0%, - rgba(0, 0, 0, 0.25) 8%, - rgba(0, 0, 0, 0.5) 18%, - rgba(0, 0, 0, 1) 30%, - rgba(0, 0, 0, 1) 70%, - rgba(0, 0, 0, 0.5) 82%, - rgba(0, 0, 0, 0.25) 92%, + rgba(0, 0, 0, 0.25) 5%, + rgba(0, 0, 0, 0.5) 10%, + rgba(0, 0, 0, 1) 15%, + rgba(0, 0, 0, 1) 85%, + rgba(0, 0, 0, 0.5) 90%, + rgba(0, 0, 0, 0.25) 95%, rgba(0, 0, 0, 0) 100% ); -webkit-mask-size: 100% 100%; @@ -378,8 +385,8 @@ .spotlight-overlay .spotlight-logo-section {grid-area: logo;height: 100%;min-height: 0;display: flex;align-items: flex-end;overflow: hidden;align-content: center;flex-wrap: wrap;} .spotlight-overlay .spotlight-metadata-section { grid-area: metadata; } -.spotlight-overlay .spotlight-overview-section { grid-area: overview; display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; } -.spotlight-overlay .spotlight-buttons-section { grid-area: buttons; display: flex; align-items: center; } +.spotlight-overlay .spotlight-overview-section {grid-area: overview;display: flex;flex-direction: column;justify-content: flex-start;overflow: hidden;gap: 0;} +.spotlight-overlay .spotlight-buttons-section {grid-area: buttons;display: flex;align-items: start;} .spotlight-overlay.has-title { padding: 50px 40px 20px 40px; @@ -395,6 +402,10 @@ word-spacing: 2px; } +.layout-mobile .spotlight-section-title { + letter-spacing: 1px; +} + .spotlight-section-title a { font-size: 1.1rem; } @@ -407,6 +418,15 @@ display: flex; align-items: flex-end; overflow: hidden; + max-height: 100%; +} + +.spotlight-section[data-layout="Borderless"][data-size="normal"] .spotlight-item-title { + font-size: 3rem; +} + +.layout-mobile .spotlight-section[data-layout="Borderless"][data-size="normal"] .spotlight-item-title { + font-size: 2rem; } .spotlight-item-logo { @@ -624,6 +644,7 @@ gap: 5px; align-items: center; margin-top: auto; + position: relative !important; } .spotlight-play-button { @@ -730,12 +751,6 @@ z-index: 10; } -.spotlight-section[data-layout="Border"] .spotlight-nav-container { - border-radius: 4px; - top: 5px !important; - right: 5px !important; -} - .spotlight-nav-button { background: transparent; border: none; @@ -837,7 +852,6 @@ } .spotlight-tagline { - max-height: 2.5em !important; -webkit-line-clamp: 1; bottom: 60px; } @@ -850,7 +864,6 @@ /* Tagline always 1 line - Movie-specific override kept for any edge cases */ [data-item-type="Movie"] .spotlight-tagline { -webkit-line-clamp: 1; - max-height: 2.5em; } // Remove this if we switch back to Jellyfin's default scroll buttons @@ -1017,6 +1030,11 @@ margin-bottom: calc(-1 * calc(var(--spotlight-fullscreen-vertical) * 2)); } +.layout-mobile .spotlight-section[data-layout="Borderless"] { + margin-top: -6rem; + margin-bottom: -6rem; +} + .spotlight-section[data-layout="Borderless"] .spotlight-banner-container { border-radius: 0; /* No padding: background fills full size so image extends edge-to-edge and into overlap zone */ @@ -1099,14 +1117,18 @@ left: 0; width: 45%; z-index: 3; - padding: calc(var(--spotlight-fullscreen-vertical) * 2) var(--spotlight-fullscreen-horizontal) calc(var(--spotlight-fullscreen-vertical) * 2) var(--spotlight-fullscreen-horizontal); - grid-template-rows: var(--spotlight-logo-height) auto 1fr minmax(48px, auto); + grid-template-rows: 1fr auto auto auto; gap: 1.5em; background: linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.7) 70%, transparent 100%); } +.spotlight-section[data-layout="Borderless"][data-size="large"] .spotlight-overlay { + padding: calc(var(--spotlight-fullscreen-vertical) * 1.75) var(--spotlight-fullscreen-horizontal) calc(var(--spotlight-fullscreen-vertical) * 2) var(--spotlight-fullscreen-horizontal); +} + .spotlight-section[data-layout="Borderless"][data-size="full"] .spotlight-overlay { - grid-template-rows: 1fr auto minmax(8em, auto) minmax(48px, auto); + padding: calc(var(--spotlight-fullscreen-vertical) * 2) var(--spotlight-fullscreen-horizontal) calc(var(--spotlight-fullscreen-vertical) * 2) var(--spotlight-fullscreen-horizontal); + grid-template-rows: 1fr auto minmax(6rem, auto) minmax(48px, auto); align-content: center; gap: 1.5em; } @@ -1117,8 +1139,8 @@ } -.spotlight-section[data-layout="Borderless"] .spotlight-overlay.has-title { - padding: calc(var(--spotlight-fullscreen-vertical) * 2) var(--spotlight-fullscreen-horizontal) calc(var(--spotlight-fullscreen-vertical) * 2.5) var(--spotlight-fullscreen-horizontal); +.spotlight-section[data-layout="Borderless"][data-size="full"] .spotlight-overlay.has-title { + padding: calc(var(--spotlight-fullscreen-vertical) * 2.25) var(--spotlight-fullscreen-horizontal) calc(var(--spotlight-fullscreen-vertical) * 2.5) var(--spotlight-fullscreen-horizontal); } /* Duplicate removed - already defined above for Borderless */ @@ -1164,7 +1186,6 @@ transform: translateX(-50%); width: fit-content; max-width: min(85%, 700px); - max-height: 2.5em; text-align: center; font-style: italic; font-size: 1.05em; @@ -1283,10 +1304,22 @@ align-items: start; align-content: start; grid-template-rows: auto auto 1fr minmax(48px, auto); - grid-template-areas: "logo" "metadata" "overview" "buttons"; + grid-template-areas: + "logo" + "metadata" + "overview" + "buttons"; gap: 0.75rem; } +.layout-mobile .spotlight-section[data-layout="Borderless"] .spotlight-overlay { + padding: 9rem 1rem 6rem 1rem !important; +} + +.layout-mobile .spotlight-section[data-layout="Borderless"] .spotlight-section-title-container { + top: 6rem; +} + .layout-mobile .spotlight-section .spotlight-section-title-container { top: 15px; max-width: calc(100% - 2rem); @@ -1295,14 +1328,6 @@ margin: 0 auto !important; } -.layout-mobile .spotlight-section[data-layout="Borderless"] .spotlight-section-title-container { - top: 3rem; -} - -.layout-mobile .spotlight-section[data-layout="Borderless"]:not([data-size="Full"]) .spotlight-section-title-container { - top: 2rem; -} - .layout-mobile .metadata-container { display: flex !important; } @@ -1339,13 +1364,12 @@ } .spotlight-section .spotlight-buttons-container.mainDetailButtons .btnPlay { - margin-right: 0px !important; right: 0px !important; + margin: .3em !important; } .spotlight-section .spotlight-buttons-container.mainDetailButtons { - margin-left: 0px !important; - margin-top: 0px !important; + margin: 0px !important; } .spotlight-section:not(.hide) .headerTabs, @@ -1386,9 +1410,6 @@ .spotlight-section:not(.hide) span.emby-tab-button.emby-tab-button-active:not(:has(a)) { cursor: default; } -.metadata-container *, .spotlight-tagline p { - color: rgba(255, 255, 255, 0.9) !important; -} .spotlight-nav-button span.material-icons { font-size: 24px !important; display: inline-block !important; @@ -1403,27 +1424,25 @@ } .spotlight-section[data-layout="Borderless"][data-size="normal"] { - margin-top: calc(-1 * calc(var(--spotlight-fullscreen-vertical) / 4)); - margin-bottom: calc(-1 * calc(var(--spotlight-fullscreen-vertical) / 4)); + margin-top: calc(-1 * calc(var(--spotlight-fullscreen-vertical) * 2)); + margin-bottom: calc(-1 * calc(var(--spotlight-fullscreen-vertical) * 2)); } .spotlight-section[data-layout="Borderless"][data-size="normal"] .spotlight-banner-container { - height: 45vh; + height: 55vh; } .spotlight-section[data-layout="Borderless"][data-size="normal"] .spotlight-overview-section { display: none !important; } -.spotlight-section[data-layout="Borderless"][data-size="normal"] .spotlight-overlay { -} .spotlight-section[data-layout="Borderless"][data-size="normal"] .spotlight-buttons-section { margin-top: -1.5em; } .spotlight-section[data-layout="Borderless"][data-size="large"] .spotlight-banner-container { - height: 69vh; + height: 72vh; } .spotlight-section[data-layout="Borderless"][data-size="normal"] .spotlight-overlay.has-title { - padding: calc(var(--spotlight-fullscreen-vertical) * 2.25) var(--spotlight-fullscreen-horizontal) calc(var(--spotlight-fullscreen-vertical) * 1.25) var(--spotlight-fullscreen-horizontal); + padding: calc(var(--spotlight-fullscreen-vertical) * 3) var(--spotlight-fullscreen-horizontal) calc(var(--spotlight-fullscreen-vertical) * 2) var(--spotlight-fullscreen-horizontal); } .spotlight-section[data-layout="Borderless"][data-size="normal"] { @@ -1432,7 +1451,7 @@ } .spotlight-section[data-layout="Borderless"][data-size="normal"] .spotlight-section-title-container { left: var(--spotlight-fullscreen-horizontal); - top: calc(var(--spotlight-fullscreen-vertical) * 1); + top: calc(var(--spotlight-fullscreen-vertical) * 1.75); } .spotlight-section[data-layout="Borderless"][data-size="normal"] .spotlight-tagline { bottom: calc(var(--spotlight-fullscreen-vertical) * 1.5 + 40px); @@ -1442,27 +1461,73 @@ } .spotlight-section[data-layout="Borderless"][data-size="normal"] .spotlight-nav-container { right: var(--spotlight-fullscreen-horizontal); - top: calc(var(--spotlight-fullscreen-vertical) * 1); + top: calc(var(--spotlight-fullscreen-vertical) * 2); } .spotlight-section[data-layout="Borderless"][data-size="normal"] .spotlight-overlay { - grid-template-rows: 1fr auto auto minmax(48px, auto); + grid-template-rows: 1fr auto auto auto; } .spotlight-section[data-size="normal"] .spotlight-overlay { grid-template-rows: var(--spotlight-logo-height) auto 1fr auto; } +.spotlight-section[data-layout="Border"][data-size="full"] .spotlight-overlay { + grid-template-rows: 3fr auto minmax(6rem, auto) 1fr; +} +.spotlight-section[data-layout="Border"][data-size="full"] .spotlight-logo-section { + align-self: end; +} +.spotlight-section[data-layout="Border"][data-size="full"] .spotlight-buttons-section { + align-self: start; +} +.spotlight-section[data-layout="Border"][data-size="normal"] .spotlight-overlay { + display: flex; + flex-direction: column; + padding: 75px 40px 25px 40px; +} +.spotlight-section[data-layout="Border"][data-size="normal"] .spotlight-overlay .spotlight-overview-section { + display: none; +} +.layout-mobile .spotlight-section[data-size="normal"] .spotlight-overlay .spotlight-overview-section, +.layout-mobile .spotlight-section[data-size="normal"] .spotlight-overlay .spotlight-metadata-section { + display: none; +} .spotlight-section[data-size="large"] .spotlight-overlay { - grid-template-rows: 35% auto 1fr auto; + grid-template-rows: 2fr auto minmax(auto, 6rem) 1fr; +} +.spotlight-section[data-size="large"] .spotlight-overlay .spotlight-item-logo { + background-position: left bottom; +} +.spotlight-section[data-size="large"] .spotlight-overlay .spotlight-buttons-section { + align-items: start; } .spotlight-section[data-layout="Border"] .spotlight-overlay { padding: 85px 40px 45px 40px; } +.spotlight-section[data-layout="Borderless"][data-size="normal"] .spotlight-overlay { + padding: 85px 40px 45px 40px; +} +.spotlight-section[data-layout="Border"][data-size="large"] .spotlight-overlay { + padding: 100px 40px 45px 40px; +} +.spotlight-section[data-layout="Border"][data-size="full"] .spotlight-overlay { + padding: 110px 40px 85px 40px; +} .spotlight-section[data-layout="Border"] .spotlight-section-title-container { top: 15px; left: 40px; } +.spotlight-section[data-layout="Border"][data-size="large"] .spotlight-section-title-container, +.spotlight-section[data-layout="Border"][data-size="full"] .spotlight-section-title-container { + top: 2rem; + left: 2rem; +} .spotlight-section[data-layout="Border"] .spotlight-nav-container { - top: 15px !important; - right: 40px !important; + top: 15px; + right: 40px; +} +.spotlight-section[data-layout="Border"][data-size="large"] .spotlight-nav-container, +.spotlight-section[data-layout="Border"][data-size="full"] .spotlight-nav-container { + top: 2rem; + right: 2rem; } .spotlight-section[data-layout="Border"][data-size="normal"] .spotlight-section-title a { font-size: 1rem !important; @@ -1471,15 +1536,11 @@ border: 1px solid rgb(255 255 255 / 10%); } .spotlight-section[data-layout="Border"][data-size="large"] .spotlight-banner-container { - height: 40rem; + height: 60vh; } .spotlight-section[data-layout="Border"][data-size="full"] .spotlight-banner-container { - height: 70vh !important; -} - -.spotlight-section[data-layout="Borderless"][data-size="large"] .spotlight-overview { - -webkit-line-clamp: 3; + height: 80vh !important; } .spotlight-section[data-layout="Border"][data-size="normal"] .spotlight-overview { @@ -1536,7 +1597,7 @@ button.show-all-button::after { } .layout-mobile .spotlight-section[data-layout="Borderless"][data-size="full"] .spotlight-overlay { - padding-bottom: 5rem !important; + /* padding-bottom: 5rem !important; */ } .layout-mobile .spotlight-overview-section, @@ -1555,11 +1616,7 @@ button.show-all-button::after { } .layout-mobile .spotlight-section[data-layout="Borderless"] .spotlight-dots { - bottom: 2.5rem !important; -} - -.layout-mobile .spotlight-section[data-layout="Borderless"]:not([data-size="Full"]) .spotlight-dots { - bottom: 1.5rem !important; + bottom: 5rem !important; } .layout-mobile .spotlight-section .spotlight-buttons-container { @@ -1639,12 +1696,14 @@ button.show-all-button::after { display: flex !important; padding: 0 !important; } -.emby-scroller-container[data-card-format="Button"] .cardBox { +.emby-scroller-container[data-card-format="Button"] .card > .cardBox { width: 100%; justify-content: center; flex-direction: column; display: flex; padding: 1rem !important; + margin-right: 0 !important; + margin-left: 0 !important; } .emby-scroller-container[data-card-format="Button"] .card { width: auto !important; @@ -1729,4 +1788,20 @@ button.show-all-button::after { .emby-scroller-container .emby-scrollbuttons:has([data-direction="right"]:disabled):has([data-direction="left"]:disabled) { display: none; +} + +.spotlight-rating-container:hover { + background-color: transparent !important; + cursor: auto; +} + +.emby-scroller-container:has([data-direction="right"]:disabled):has([data-direction="left"]:disabled) button.show-all-button { + display: none; +} + +.spotlight-tagline .emby-tab-button, +.spotlight-nav-container .spotlight-nav-buttons-container, +.spotlight-section-title .emby-tab-button { + background-color: rgb(0 0 0 / 45%); + border-radius: 5px; } \ No newline at end of file diff --git a/scripts/cardBuilder.js b/scripts/cardBuilder.js index 29380a5..a5ddd54 100644 --- a/scripts/cardBuilder.js +++ b/scripts/cardBuilder.js @@ -2161,7 +2161,7 @@ if (viewMoreUrl) { // Create clickable title const titleLink = document.createElement('a'); - titleLink.className = 'emby-tab-button emby-tab-button-active emby-button-foreground'; + titleLink.className = 'emby-tab-button emby-tab-button-active'; titleLink.textContent = title; titleLink.title = 'See All'; titleLink.style.textDecoration = 'none'; @@ -2184,7 +2184,7 @@ } else { // Regular non-clickable title sectionTitleEl = document.createElement('div'); - sectionTitleEl.className = 'emby-tab-button emby-tab-button-active emby-button-foreground'; + sectionTitleEl.className = 'emby-tab-button emby-tab-button-active'; sectionTitleEl.textContent = title; } @@ -2701,7 +2701,7 @@ // Tagline (tagline only) and Overview (separate element) - show/hide via CSS based on spotlight type const taglineEl = document.createElement('p'); - taglineEl.className = 'emby-tab-button'; + taglineEl.className = 'emby-tab-button emby-tab-button-active'; const tagline = (item.Taglines && Array.isArray(item.Taglines) && item.Taglines.length > 0) ? item.Taglines[0] : ''; if (tagline) taglineEl.textContent = tagline; @@ -2819,7 +2819,7 @@ if (rating && typeof rating === 'number') { const ratingContainer = document.createElement('div'); - ratingContainer.className = 'starRatingContainer mediaInfoItem spotlight-rating-container'; + ratingContainer.className = 'emby-button button-flat starRatingContainer mediaInfoItem spotlight-rating-container'; const starIcon = document.createElement('span'); starIcon.className = 'material-icons starIcon star spotlight-rating-star'; @@ -2970,7 +2970,7 @@ const prevButton = document.createElement('button'); prevButton.className = 'spotlight-nav-button spotlight-nav-prev emby-button'; const prevIcon = document.createElement('span'); - prevIcon.className = 'material-icons emby-button-foreground'; + prevIcon.className = 'material-icons'; prevIcon.textContent = 'chevron_left'; prevButton.appendChild(prevIcon); prevButton.addEventListener('click', (e) => { @@ -2982,7 +2982,7 @@ const nextButton = document.createElement('button'); nextButton.className = 'spotlight-nav-button spotlight-nav-next emby-button'; const nextIcon = document.createElement('span'); - nextIcon.className = 'material-icons emby-button-foreground'; + nextIcon.className = 'material-icons'; nextIcon.textContent = 'chevron_right'; nextButton.appendChild(nextIcon); nextButton.addEventListener('click', (e) => { @@ -3007,7 +3007,7 @@ const pauseButton = document.createElement('button'); pauseButton.className = 'spotlight-pause-button spotlight-nav-button emby-button'; const pauseIcon = document.createElement('span'); - pauseIcon.className = 'material-icons emby-button-foreground'; + pauseIcon.className = 'material-icons'; pauseIcon.textContent = 'pause'; pauseButton.appendChild(pauseIcon); pauseButton.addEventListener('click', (e) => { @@ -3084,10 +3084,10 @@ kenBurnsZoomOut: 'scale3d(1.02, 1.02, 1)', kenBurnsZoomInFullscreen: 'scale3d(1.12, 1.12, 1)', kenBurnsZoomOutFullscreen: 'scale3d(1.08, 1.08, 1)', - kenBurnsPanRight: 'scale3d(1.1, 1.1, 1) translateX(2%)', - kenBurnsPanLeft: 'scale3d(1.1, 1.1, 1) translateX(-2%)', - kenBurnsPanUp: 'scale3d(1.1, 1.1, 1) translateY(-2%)', - kenBurnsDiagonal: 'scale3d(1.13, 1.13, 1) translate(2%, -2%)', + kenBurnsPanRight: 'scale3d(1.1, 1.1, 1) translateX(5%)', + kenBurnsPanLeft: 'scale3d(1.1, 1.1, 1) translateX(-5%)', + kenBurnsPanUp: 'scale3d(1.1, 1.1, 1) translateY(-5%)', + kenBurnsDiagonal: 'scale3d(1.13, 1.13, 1) translate(5%, -5%)', fadeInScale: 'scale3d(1, 1, 1)', parallaxFloat: 'scale3d(1, 1, 1) translateY(0)', depthPulse: 'scale3d(1, 1, 1)',