mirror of
https://github.com/ranaldsgift/KefinTweaks.git
synced 2026-11-05 15:52:47 +01:00
1437 lines
38 KiB
CSS
1437 lines
38 KiB
CSS
/* Spotlight Section Styles */
|
|
|
|
.spotlight-section {
|
|
position: relative;
|
|
width: calc(100% - (2 * max(env(safe-area-inset-left), 3.3%)));
|
|
margin: 2em 0;
|
|
}
|
|
|
|
.spotlight-banner-container {
|
|
position: relative;
|
|
height: 450px;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* Size variants */
|
|
.spotlight-section[data-size="full"] .spotlight-banner-container {
|
|
height: 94vh !important;
|
|
}
|
|
|
|
.spotlight-items-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.spotlight-item {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: cover;
|
|
background-position: center;
|
|
transition: opacity 0.8s ease-in-out;
|
|
}
|
|
|
|
/* Dual-backdrop background with masked crossfade */
|
|
.spotlight-background-dual {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.spotlight-section[data-layout="Border"] .spotlight-background-dual {
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.spotlight-background-layer {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.spotlight-background-layer img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.spotlight-background-layer img.animate {
|
|
filter: blur(0);
|
|
transform: scale(1);
|
|
transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;
|
|
will-change: transform;
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
.spotlight-background-layer-left img.animate {
|
|
animation: kenBurnsZoomOut 20s ease-out forwards;
|
|
transform-origin: center right;
|
|
}
|
|
.spotlight-background-layer-right img.animate {
|
|
animation: kenBurnsZoomIn 20s ease-out forwards;
|
|
transform-origin: center left;
|
|
}
|
|
|
|
/* Single backdrop (when dual backdrops disabled or only one image) - same pan animation */
|
|
.spotlight-background-single {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.spotlight-background-single img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.spotlight-background-single img.animate {
|
|
animation: kenBurnsZoomIn 15s ease-out forwards;
|
|
will-change: transform;
|
|
backface-visibility: hidden;
|
|
transform-origin: center center;
|
|
}
|
|
|
|
@keyframes kenBurnsZoomIn {
|
|
from {
|
|
transform: scale3d(1, 1, 0);
|
|
}
|
|
to {
|
|
transform: scale3d(1.12, 1.12, 0.1);
|
|
}
|
|
}
|
|
|
|
@keyframes kenBurnsZoomOut {
|
|
from {
|
|
transform: scale3d(1.15, 1.15, 0.1);
|
|
}
|
|
to {
|
|
transform: scale3d(1.02, 1.02, 0);
|
|
}
|
|
}
|
|
|
|
/* Full-screen: start images pre-scaled so they extend past edges from the start (no hard edge before zoom) */
|
|
@keyframes kenBurnsZoomInFullscreen {
|
|
from {
|
|
transform: scale3d(1.08, 1.08, 0);
|
|
}
|
|
to {
|
|
transform: scale3d(1.12, 1.12, 0.1);
|
|
}
|
|
}
|
|
|
|
@keyframes kenBurnsZoomOutFullscreen {
|
|
from {
|
|
transform: scale3d(1.15, 1.15, 0.1);
|
|
}
|
|
to {
|
|
transform: scale3d(1.08, 1.08, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from { opacity: 0; transform: scale3d(1, 1, 1) translateY(30px); }
|
|
to { opacity: 1; transform: scale3d(1, 1, 1) translateY(0); }
|
|
}
|
|
|
|
@keyframes fadeInDown {
|
|
from { opacity: 0; transform: scale3d(1, 1, 1) translateY(-30px); }
|
|
to { opacity: 1; transform: scale3d(1, 1, 1) translateY(0); }
|
|
}
|
|
|
|
@keyframes kenBurnsPanRight {
|
|
from { transform: scale3d(1.1, 1.1, 1) translateX(-2%); }
|
|
to { transform: scale3d(1.1, 1.1, 1) translateX(2%); }
|
|
}
|
|
|
|
@keyframes kenBurnsPanLeft {
|
|
from { transform: scale3d(1.1, 1.1, 1) translateX(2%); }
|
|
to { transform: scale3d(1.1, 1.1, 1) translateX(-2%); }
|
|
}
|
|
|
|
@keyframes kenBurnsPanUp {
|
|
from { transform: scale3d(1.1, 1.1, 1) translateY(2%); }
|
|
to { transform: scale3d(1.1, 1.1, 1) translateY(-2%); }
|
|
}
|
|
|
|
@keyframes kenBurnsDiagonal {
|
|
from { transform: scale3d(1.08, 1.08, 1) translate(-2%, 2%); }
|
|
to { transform: scale3d(1.13, 1.13, 1) translate(2%, -2%); }
|
|
}
|
|
|
|
@keyframes fadeInScale {
|
|
from { opacity: 0; transform: scale3d(0.95, 0.95, 1); }
|
|
to { opacity: 1; transform: scale3d(1, 1, 1); }
|
|
}
|
|
|
|
@keyframes parallaxFloat {
|
|
0%, 100% { transform: scale3d(1, 1, 1) translateY(0); }
|
|
50% { transform: scale3d(1, 1, 1) translateY(-12px); }
|
|
}
|
|
|
|
@keyframes depthPulse {
|
|
0%, 100% { transform: scale3d(1, 1, 1); }
|
|
50% { transform: scale3d(1.03, 1.03, 1); }
|
|
}
|
|
|
|
@keyframes slowRotate {
|
|
from { transform: scale3d(1.15, 1.15, 1) rotate(0deg); }
|
|
to { transform: scale3d(1.15, 1.15, 1) rotate(3deg); }
|
|
}
|
|
|
|
@keyframes breathe {
|
|
0%, 100% { transform: scale3d(1, 1, 1); opacity: 0.9; }
|
|
50% { transform: scale3d(1.04, 1.04, 1); opacity: 1; }
|
|
}
|
|
|
|
@keyframes heatHaze {
|
|
0%, 100% { transform: scale3d(1.05, 1.05, 1) skewX(0deg); }
|
|
25% { transform: scale3d(1.06, 1.06, 1) skewX(0.3deg); }
|
|
75% { transform: scale3d(1.05, 1.05, 1) skewX(-0.3deg); }
|
|
}
|
|
|
|
@keyframes colorWash {
|
|
0% { filter: saturate(1) brightness(1); }
|
|
50% { filter: saturate(1.2) brightness(1.05); }
|
|
100% { filter: saturate(1) brightness(1); }
|
|
}
|
|
|
|
@keyframes vignetteIn {
|
|
from { box-shadow: inset 0 0 0px rgba(0,0,0,0); }
|
|
to { box-shadow: inset 0 0 120px rgba(0,0,0,0.6); }
|
|
}
|
|
|
|
/* Layer masks for elegant crossfade - overlap in center (45-55%) */
|
|
.spotlight-background-layer-left {
|
|
left: 0;
|
|
width: 55%;
|
|
-webkit-mask-image: linear-gradient(
|
|
to right,
|
|
rgba(0, 0, 0, 1) 0%,
|
|
rgba(0, 0, 0, 1) 75%,
|
|
rgba(0, 0, 0, 0.5) 90%,
|
|
rgba(0, 0, 0, 0) 100%
|
|
);
|
|
mask-image: linear-gradient(
|
|
to right,
|
|
rgba(0, 0, 0, 1) 0%,
|
|
rgba(0, 0, 0, 1) 75%,
|
|
rgba(0, 0, 0, 0.5) 90%,
|
|
rgba(0, 0, 0, 0) 100%
|
|
);
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
|
|
.spotlight-background-layer-right {
|
|
right: 0;
|
|
width: 55%;
|
|
-webkit-mask-image: linear-gradient(
|
|
to right,
|
|
rgba(0, 0, 0, 0) 0%,
|
|
rgba(0, 0, 0, 0.5) 10%,
|
|
rgba(0, 0, 0, 1) 25%,
|
|
rgba(0, 0, 0, 1) 100%
|
|
);
|
|
mask-image: linear-gradient(
|
|
to right,
|
|
rgba(0, 0, 0, 0) 0%,
|
|
rgba(0, 0, 0, 0.5) 10%,
|
|
rgba(0, 0, 0, 1) 25%,
|
|
rgba(0, 0, 0, 1) 100%
|
|
);
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
|
|
.spotlight-item[data-index="0"] {
|
|
opacity: 1;
|
|
}
|
|
|
|
.spotlight-item:not([data-index="0"]) {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* Logo section heights per size - fixed to prevent layout shift when sliding between items */
|
|
.spotlight-section { --spotlight-logo-height: 120px; }
|
|
.spotlight-section[data-size="large"] { --spotlight-logo-height: 180px; }
|
|
.spotlight-section[data-size="full"] { --spotlight-logo-height: 240px; }
|
|
|
|
.spotlight-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 45%;
|
|
background: linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.7) 70%, transparent 100%);
|
|
padding: 40px;
|
|
color: white;
|
|
display: grid;
|
|
grid-template-rows: var(--spotlight-logo-height) auto 1fr minmax(48px, auto);
|
|
grid-template-areas: "logo" "metadata" "overview" "buttons";
|
|
align-content: start;
|
|
gap: 1em;
|
|
z-index: 2;
|
|
}
|
|
|
|
.spotlight-overlay .spotlight-logo-section { grid-area: logo; height: var(--spotlight-logo-height); 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.has-title {
|
|
padding: 50px 40px 20px 40px;
|
|
}
|
|
|
|
.spotlight-section-title {
|
|
position: absolute;
|
|
color: white;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
z-index: 10;
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
backdrop-filter: blur(4px);
|
|
letter-spacing: 2px;
|
|
word-spacing: 2px;
|
|
}
|
|
|
|
.spotlight-section-title a {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.spotlight-item-title {
|
|
margin: 0;
|
|
font-size: 3.5em;
|
|
font-weight: bold;
|
|
min-height: 0;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
overflow: hidden;
|
|
}
|
|
.spotlight-item-title:not(h3) {
|
|
height: 100%;
|
|
}
|
|
|
|
.spotlight-item-logo {
|
|
height: 100%;
|
|
max-height: var(--spotlight-logo-height);
|
|
width: 100%;
|
|
object-fit: contain;
|
|
margin: 0;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: left;
|
|
}
|
|
|
|
.spotlight-clearart {
|
|
position: absolute;
|
|
bottom: 0px;
|
|
right: 0px;
|
|
max-height: 70%;
|
|
object-fit: contain;
|
|
z-index: 5;
|
|
opacity: 0.9;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.spotlight-rating-container {
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-justify-content: center;
|
|
justify-content: center;
|
|
vertical-align: middle;
|
|
margin: 0 1em 0 0;
|
|
}
|
|
|
|
.spotlight-rating-star {
|
|
color: #f2b01e;
|
|
font-size: 1.4em;
|
|
height: auto !important;
|
|
margin-right: .125em;
|
|
width: auto !important;
|
|
}
|
|
|
|
.spotlight-rating-value {
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.spotlight-rating-value.na {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.spotlight-metadata-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 12px;
|
|
font-size: 14px;
|
|
opacity: 0.9;
|
|
overflow: visible;
|
|
min-width: 0;
|
|
}
|
|
|
|
.spotlight-metadata-row .itemDetailsGroup,
|
|
.spotlight-metadata-row .sectionTabs {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.spotlight-credits-row .spotlight-truncated-list {
|
|
flex-shrink: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Keep each name on one line (no mid-name wrapping) */
|
|
.spotlight-credits-row .spotlight-person-link,
|
|
.spotlight-credits-row .spotlight-truncated-list .detailsGroupItem > span:not(.spotlight-list-separator):not(.spotlight-truncated-list-label),
|
|
.spotlight-credits-row .spotlight-truncated-list .emby-tab-button > span:not(.spotlight-list-separator):not(.spotlight-truncated-list-label) {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Metadata row icons (end time, etc.) - same pattern as truncated list icons */
|
|
.spotlight-metadata-row .emby-tab-button[data-icon] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
.spotlight-metadata-row .emby-tab-button[data-icon]::before {
|
|
content: attr(data-icon);
|
|
font-family: 'Material Icons';
|
|
font-size: 1.1em;
|
|
margin-right: 6px;
|
|
opacity: 0.9;
|
|
text-transform: none;
|
|
}
|
|
|
|
.spotlight-metadata-row .spotlight-studio {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
.spotlight-metadata-row .spotlight-studio::before {
|
|
content: '\ea40'; /* Material Icons 'apartment' codepoint */
|
|
font-family: 'Material Icons';
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-size: 1.1em;
|
|
margin-right: 6px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.metadata-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: start;
|
|
gap: 8px;
|
|
overflow: visible;
|
|
min-width: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.spotlight-truncated-list {
|
|
font-size: 14px;
|
|
opacity: 0.9;
|
|
position: relative;
|
|
overflow: hidden;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Allow tooltip to escape overflow when present */
|
|
.spotlight-truncated-list:has(.spotlight-truncated-list-tooltip) {
|
|
overflow: visible;
|
|
}
|
|
|
|
/* Tooltip for truncated lists - full list on hover after 1s, no layout shift */
|
|
.spotlight-truncated-list-tooltip {
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 0;
|
|
margin-bottom: 8px;
|
|
padding: 12px 16px;
|
|
background: rgba(0, 0, 0, 0.95);
|
|
color: white;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
max-width: 400px;
|
|
min-width: 200px;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.2s ease;
|
|
z-index: 1000;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
|
word-wrap: break-word;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.spotlight-truncated-list-tooltip-items {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.spotlight-truncated-list-tooltip-item {
|
|
display: block;
|
|
}
|
|
|
|
.spotlight-truncated-list-tooltip.visible {
|
|
opacity: 1;
|
|
pointer-events: auto; /* Allow hovering tooltip to keep it visible */
|
|
}
|
|
|
|
.spotlight-truncated-list-tooltip .spotlight-person-link,
|
|
.spotlight-truncated-list-tooltip .spotlight-genre-link,
|
|
.spotlight-truncated-list-tooltip .spotlight-studio-link {
|
|
color: inherit;
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.spotlight-list-separator {
|
|
opacity: 0.75;
|
|
margin: 0 0.4em;
|
|
user-select: none;
|
|
}
|
|
|
|
/* Overview: shown for all layouts with line clamping to avoid cut-off text */
|
|
.spotlight-overview {
|
|
display: -webkit-box;
|
|
margin: 0;
|
|
font-size: 15px;
|
|
font-style: normal;
|
|
opacity: 0.9;
|
|
line-height: 1.45;
|
|
max-width: 75%;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.spotlight-section[data-size="large"] .spotlight-overview {
|
|
-webkit-line-clamp: 4;
|
|
}
|
|
|
|
.spotlight-section[data-size="full"] .spotlight-overview {
|
|
font-size: 1.05em;
|
|
-webkit-line-clamp: 4;
|
|
}
|
|
|
|
.spotlight-buttons-container {
|
|
display: flex;
|
|
gap: 5px;
|
|
align-items: center;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.spotlight-play-button {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.9);
|
|
color: #000;
|
|
border: none;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.spotlight-play-button:hover {
|
|
background: rgba(255,255,255,1);
|
|
}
|
|
|
|
.spotlight-play-button .material-icons {
|
|
font-size: 28px;
|
|
}
|
|
|
|
.spotlight-watchlist-button {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.2);
|
|
color: white;
|
|
border: 2px solid rgba(255,255,255,0.5);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.spotlight-watchlist-button:hover {
|
|
background: rgba(255,255,255,0.3);
|
|
}
|
|
|
|
.spotlight-watchlist-button.watchlisted {
|
|
border-color: #4CAF50;
|
|
}
|
|
|
|
.spotlight-watchlist-button.watchlisted .material-icons {
|
|
color: #4CAF50;
|
|
}
|
|
|
|
.spotlight-watchlist-button:not(.watchlisted):hover {
|
|
border-color: rgba(255,255,255,0.7);
|
|
}
|
|
|
|
.spotlight-watchlist-button .material-icons {
|
|
font-size: 28px;
|
|
color: white;
|
|
}
|
|
|
|
.spotlight-info-button {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.2);
|
|
color: white;
|
|
border: 2px solid rgba(255,255,255,0.5);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
transition: all 0.2s;
|
|
position: relative;
|
|
}
|
|
|
|
.spotlight-info-button:hover {
|
|
background: rgba(255,255,255,0.3);
|
|
border-color: rgba(255,255,255,0.7);
|
|
}
|
|
|
|
.spotlight-info-button .material-icons {
|
|
font-size: 28px;
|
|
}
|
|
|
|
.spotlight-overview-tooltip {
|
|
position: absolute;
|
|
text-align: left;
|
|
bottom: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
margin-bottom: 12px;
|
|
padding: 16px;
|
|
background: rgba(0,0,0,0.95);
|
|
color: white;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
max-width: 400px;
|
|
min-width: 300px;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.2s;
|
|
z-index: 1000;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.spotlight-info-button:hover .spotlight-overview-tooltip {
|
|
opacity: 1;
|
|
}
|
|
|
|
.spotlight-nav-container {
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 0px;
|
|
display: flex;
|
|
gap: 8px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.spotlight-section[data-layout="Border"] .spotlight-nav-container {
|
|
border-radius: 4px;
|
|
top: 5px !important;
|
|
right: 5px !important;
|
|
}
|
|
|
|
.spotlight-section[data-layout="Border"] .spotlight-section-title {
|
|
border-radius: 4px;
|
|
top: 5px !important;
|
|
left: 5px !important;
|
|
}
|
|
|
|
.spotlight-nav-button {
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
margin: 0 !important;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.spotlight-nav-button:hover {
|
|
background: rgba(255,255,255,0.2);
|
|
}
|
|
|
|
.spotlight-dots {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
gap: 8px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.spotlight-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
border: none;
|
|
background: rgba(255,255,255,0.5);
|
|
cursor: pointer;
|
|
padding: 0;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.spotlight-dot.active {
|
|
background: white;
|
|
}
|
|
|
|
/* Numeric slide state: "N / X" via data attributes */
|
|
.spotlight-dots.spotlight-dots-numeric {
|
|
background: rgb(0 0 0 / 40%);
|
|
border-radius: 5px;
|
|
padding: 0.25rem 0.5rem;
|
|
gap: 0;
|
|
}
|
|
|
|
.spotlight-dots.spotlight-dots-numeric .spotlight-dot {
|
|
display: none;
|
|
}
|
|
|
|
.spotlight-dots.spotlight-dots-numeric::after {
|
|
content: attr(data-index) " / " attr(data-total-items);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.spotlight-genre-link,
|
|
.spotlight-person-link,
|
|
.spotlight-studio-link {
|
|
color: inherit;
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.spotlight-empty-writer-container {
|
|
font-size: 14px;
|
|
opacity: 0.9;
|
|
height: 1em;
|
|
}
|
|
|
|
/* Mobile Styles */
|
|
@media (max-width: 768px) {
|
|
.metadata-container {
|
|
display: none !important;
|
|
}
|
|
|
|
.spotlight-nav-container {
|
|
display: none !important;
|
|
}
|
|
|
|
.spotlight-pause-button {
|
|
display: none !important;
|
|
}
|
|
|
|
.spotlight-clearart {
|
|
display: none !important;
|
|
}
|
|
|
|
.spotlight-overlay {
|
|
width: calc(100% - 2rem);
|
|
padding: 5rem 1rem 3rem !important;
|
|
align-items: center;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
.spotlight-tagline {
|
|
max-height: 2.5em !important;
|
|
-webkit-line-clamp: 1;
|
|
bottom: 60px;
|
|
}
|
|
|
|
.spotlight-item-logo {
|
|
max-width: 100%;
|
|
height: 125px;
|
|
}
|
|
}
|
|
|
|
.skeleton-card {
|
|
margin-bottom: 45px !important;
|
|
}
|
|
|
|
/* 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
|
|
.emby-scrollbuttons.padded-right {
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
color: #fff;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-justify-content: center;
|
|
justify-content: center;
|
|
min-height: 24px;
|
|
min-width: 104px;
|
|
padding-top: .85em;
|
|
position: absolute;
|
|
top: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Blurhash placeholder canvas: fill card image area so it's visible until the real image loads */
|
|
/* .cardScalable {
|
|
position: relative;
|
|
}
|
|
.cardScalable .blurhash-canvas {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
pointer-events: none;
|
|
}
|
|
.cardScalable .blurhash-canvas.lazy-hidden {
|
|
display: none !important;
|
|
} */
|
|
|
|
/* Progressive Section Reveal Animation */
|
|
.cardbuilder-section-reveal {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
|
|
transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* When section enters viewport, trigger animation */
|
|
.cardbuilder-section-reveal.in-viewport {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.show-all-button {
|
|
margin-left: 10px;
|
|
font-size: 12px;
|
|
padding: 4px 8px;
|
|
min-width: auto;
|
|
background: transparent;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
align-self: center;
|
|
border: 1px solid rgba(255, 255, 255, 0.3) !important;
|
|
color: var(--main-text, #fff) !important;
|
|
position: relative;
|
|
display: none; /* Hidden by default */
|
|
}
|
|
|
|
[data-section-id] .sectionTitleContainer {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Show button when section is expandable */
|
|
.emby-scroller-container[data-expandable="true"] .show-all-button {
|
|
display: initial !important;
|
|
}
|
|
|
|
/* Expanded grid view styles */
|
|
.itemsContainer[data-expanded="true"] {
|
|
display: flex !important;
|
|
flex-wrap: wrap !important;
|
|
white-space: normal !important;
|
|
transform: none !important;
|
|
transition: none !important;
|
|
}
|
|
|
|
/* Hide scroll buttons when expanded */
|
|
.emby-scroller-container:has(.itemsContainer[data-expanded="true"]) .emby-scrollbuttons {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Refresh Button Styles */
|
|
.section-refresh-button {
|
|
margin-left: 8px;
|
|
padding: 4px;
|
|
min-width: auto;
|
|
width: 32px;
|
|
height: 32px;
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--main-text, rgba(255, 255, 255, 0.87));
|
|
border-radius: 50%;
|
|
font-size: 18px;
|
|
transition: transform 0.3s ease, color 0.3s ease, background 0.2s ease;
|
|
opacity: 0.65;
|
|
}
|
|
|
|
.section-refresh-button:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/* Spinning animation when refreshing */
|
|
[data-refreshing="true"] .section-refresh-button {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
/* Checkmark state - green color to indicate success */
|
|
.section-refresh-button.check_circle {
|
|
animation: none;
|
|
}
|
|
|
|
/* Smooth transition when changing icons */
|
|
.section-refresh-button.refresh,
|
|
.section-refresh-button.check_circle {
|
|
transition: transform 0.3s ease, color 0.3s ease, background 0.2s ease;
|
|
}
|
|
|
|
/* Fade in/out transitions for icon changes */
|
|
.section-refresh-button::after {
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.section-refresh-button.icon-fade-out::after {
|
|
opacity: 0;
|
|
}
|
|
|
|
.section-refresh-button.icon-fade-in::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
/* Ensure button remains visible when expanded (data-expandable takes precedence, but this ensures it) */
|
|
.emby-scroller-container:has(.itemsContainer[data-expanded="true"]) .show-all-button {
|
|
display: initial !important;
|
|
}
|
|
|
|
/* Borderless layout: full width, no border, negative margins for overlap.
|
|
Banner has NO padding so the background image overflows edge-to-edge; only content is inset. */
|
|
.spotlight-section[data-layout="Borderless"] {
|
|
--spotlight-fullscreen-vertical: 4%;
|
|
--spotlight-fullscreen-horizontal: max(env(safe-area-inset-left), env(safe-area-inset-right), 4%);
|
|
padding: 0;
|
|
width: 100%;
|
|
margin-top: calc(-1 * calc(var(--spotlight-fullscreen-vertical) * 1));
|
|
margin-bottom: calc(-1 * calc(var(--spotlight-fullscreen-vertical) * 2));
|
|
}
|
|
|
|
.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 */
|
|
position: relative;
|
|
/* Wider mask so backdrop fades gradually at top/bottom (no visible solid edge during animation) */
|
|
-webkit-mask-image: linear-gradient(
|
|
to bottom,
|
|
transparent 0%,
|
|
black calc(var(--spotlight-fullscreen-vertical) * 2),
|
|
black calc(100% - calc(var(--spotlight-fullscreen-vertical) * 2)),
|
|
transparent 100%
|
|
);
|
|
mask-image: linear-gradient(
|
|
to bottom,
|
|
transparent 0%,
|
|
black calc(var(--spotlight-fullscreen-vertical) * 2),
|
|
black calc(100% - calc(var(--spotlight-fullscreen-vertical) * 2)),
|
|
transparent 100%
|
|
);
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
-webkit-mask-position: 0 0;
|
|
mask-position: 0 0;
|
|
}
|
|
|
|
/* Dark gradient overlays at top and bottom (like left-side overlay): graceful fade and better visibility when content overlaps */
|
|
.spotlight-section[data-layout="Borderless"] .spotlight-banner-container::before,
|
|
.spotlight-section[data-layout="Borderless"] .spotlight-banner-container::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 22%;
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
}
|
|
|
|
.spotlight-section[data-layout="Borderless"] .spotlight-banner-container::before {
|
|
top: 0;
|
|
background: linear-gradient(
|
|
to bottom,
|
|
rgba(0, 0, 0, 0.85) 0%,
|
|
rgba(0, 0, 0, 0.5) 40%,
|
|
transparent 100%
|
|
);
|
|
}
|
|
|
|
.spotlight-section[data-layout="Borderless"] .spotlight-banner-container::after {
|
|
bottom: 0;
|
|
background: linear-gradient(
|
|
to top,
|
|
rgba(0, 0, 0, 0.85) 0%,
|
|
rgba(0, 0, 0, 0.5) 40%,
|
|
transparent 100%
|
|
);
|
|
}
|
|
|
|
.spotlight-section[data-layout="Borderless"] .spotlight-items-container,
|
|
.spotlight-section[data-layout="Borderless"] .spotlight-item {
|
|
/* Full bleed: fill banner so background extends to edges (and past negative margin) */
|
|
left: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Borderless: base scale so image extends past edges even before animation starts */
|
|
.spotlight-section[data-layout="Borderless"] .spotlight-background-single img,
|
|
.spotlight-section[data-layout="Borderless"] .spotlight-background-layer img {
|
|
transform: scale(1.08);
|
|
}
|
|
|
|
/* Borderless: use pre-scaled animations so image never shows hard edge at top */
|
|
/* .spotlight-section[data-layout="Borderless"] .spotlight-background-single img.animate {
|
|
animation: kenBurnsZoomInFullscreen 20s ease-out forwards;
|
|
}
|
|
.spotlight-section[data-layout="Borderless"] .spotlight-background-layer-left img.animate {
|
|
animation: kenBurnsZoomOutFullscreen 20s ease-out forwards;
|
|
}
|
|
.spotlight-section[data-layout="Borderless"] .spotlight-background-layer-right img.animate {
|
|
animation: kenBurnsZoomInFullscreen 20s ease-out forwards;
|
|
} */
|
|
|
|
/* Overlay: same ~45% width as smaller spotlights for consistent gradient and content area. */
|
|
.spotlight-section[data-layout="Borderless"] .spotlight-overlay {
|
|
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);
|
|
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="full"] .spotlight-overlay {
|
|
align-content: start;
|
|
gap: 1.5em;
|
|
}
|
|
|
|
.spotlight-section[data-layout="Borderless"][data-size="full"] .spotlight-credits-row {
|
|
flex-wrap: nowrap;
|
|
flex-direction: row;
|
|
}
|
|
|
|
|
|
.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.25) var(--spotlight-fullscreen-horizontal);
|
|
}
|
|
|
|
/* Duplicate removed - already defined above for Borderless */
|
|
|
|
.spotlight-section[data-size="full"] .spotlight-item-title {
|
|
width: auto;
|
|
max-width: none;
|
|
font-size: 4rem;
|
|
}
|
|
|
|
/* Duplicate removed - clearart display:none already set for Borderless above */
|
|
|
|
.spotlight-section[data-layout="Borderless"] .spotlight-section-title {
|
|
left: var(--spotlight-fullscreen-horizontal);
|
|
top: calc(var(--spotlight-fullscreen-vertical) * 2.5);
|
|
}
|
|
|
|
.spotlight-section[data-layout="Borderless"] .spotlight-nav-container {
|
|
right: var(--spotlight-fullscreen-horizontal);
|
|
top: calc(var(--spotlight-fullscreen-vertical) * 2.5);
|
|
}
|
|
|
|
.spotlight-section[data-layout="Borderless"] .spotlight-dots {
|
|
bottom: calc(var(--spotlight-fullscreen-vertical) * 4.5);
|
|
}
|
|
|
|
.spotlight-section .spotlight-background-layer img,
|
|
.spotlight-section .spotlight-background-single img {
|
|
object-position: center 0%;
|
|
}
|
|
.spotlight-section[data-layout="Borderless"] .spotlight-clearart {
|
|
display: none;
|
|
}
|
|
|
|
:has(.spotlight-section[data-layout="Borderless"]) .homeSectionsContainer > *:not(.spotlight-section) {
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Tagline at bottom center above navigation dots (all spotlights) - always 1 line max */
|
|
.spotlight-tagline {
|
|
position: absolute !important;
|
|
left: 50%;
|
|
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;
|
|
margin: 0;
|
|
padding: 8px 16px;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
border-radius: 6px;
|
|
z-index: 4;
|
|
pointer-events: none;
|
|
line-height: 1.4;
|
|
}
|
|
.spotlight-tagline > *, .spotlight-section-title > *, .spotlight-nav-container > * {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border-radius: 4px;
|
|
}
|
|
.spotlight-section:not(.hide) .spotlight-tagline p {
|
|
font-weight: initial !important;
|
|
transform: initial !important;
|
|
width: 100%;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
cursor: default;
|
|
}
|
|
|
|
/* Normal and large: tagline above dots (dots at bottom: 20px) */
|
|
.spotlight-section[data-layout="Border"] .spotlight-tagline {
|
|
bottom: 40px;
|
|
}
|
|
|
|
.spotlight-section[data-layout="Borderless"] .spotlight-tagline {
|
|
bottom: calc(var(--spotlight-fullscreen-vertical) * 4.5 + 40px);
|
|
}
|
|
|
|
/* Size full: modern stream-site metadata styles */
|
|
.spotlight-section[data-size="full"] .metadata-container {
|
|
gap: 10px;
|
|
}
|
|
|
|
.spotlight-section[data-size="full"] .spotlight-metadata-row {
|
|
font-size: 15px;
|
|
gap: 10px;
|
|
}
|
|
|
|
/* Full-screen: uniform padding for all metadata pills (year, duration, genres, director, writer, series) */
|
|
/* .spotlight-section[data-size="full"] .spotlight-metadata-row .detailsGroupItem,
|
|
.spotlight-section[data-size="full"] .metadata-container .detailsGroupItem {
|
|
border-radius: 6px;
|
|
background: rgba(255, 255, 255, 0.12);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
} */
|
|
|
|
.spotlight-section[data-size="full"] .spotlight-genre-link {
|
|
display: inline-block;
|
|
transition: background 0.2s, border-color 0.2s;
|
|
}
|
|
|
|
/* Full-screen: director/writer use material icon instead of label text */
|
|
/* Director/writer: always use icon, never show "Directed by"/"Written by" text */
|
|
.spotlight-truncated-list[data-icon] .spotlight-truncated-list-label {
|
|
display: none;
|
|
}
|
|
.spotlight-truncated-list .detailsGroupItem[data-icon],
|
|
.spotlight-truncated-list .emby-tab-button[data-icon] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
.spotlight-truncated-list .detailsGroupItem[data-icon]::before,
|
|
.spotlight-truncated-list .emby-tab-button[data-icon]::before {
|
|
content: attr(data-icon);
|
|
font-family: 'Material Icons';
|
|
font-size: 1.1em;
|
|
margin-right: 6px;
|
|
opacity: 0.9;
|
|
text-transform: none; /* Prevent parent text-transform: capitalize (e.g. .spotlight-series-info) from breaking icon */
|
|
}
|
|
.spotlight-truncated-list[data-icon] .detailsGroupItem[data-icon]::before,
|
|
.spotlight-truncated-list[data-icon] .emby-tab-button[data-icon]::before {
|
|
content: attr(data-icon);
|
|
}
|
|
|
|
/* Director/writer/series info: no extra padding - detailsGroupItem matches other metadata pills */
|
|
.spotlight-section[data-size="full"] .spotlight-truncated-list.itemDetailsGroup:has(>.detailsGroupItem),
|
|
.spotlight-section[data-size="full"] .spotlight-truncated-list.sectionTabs:has(>.emby-tab-button) {
|
|
font-size: large;
|
|
display: flex;
|
|
align-items: center;
|
|
align-self: start;
|
|
}
|
|
|
|
.spotlight-section a:not(:hover) {
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.spotlight-section[data-size="full"] .spotlight-buttons-container {
|
|
margin-top: 0px !important;
|
|
margin-bottom: 0px !important;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: start;
|
|
}
|
|
|
|
.spotlight-section[data-size="full"] .spotlight-item-logo {
|
|
width: 95%;
|
|
}
|
|
|
|
|
|
/* Mobile spotlight: uniform layout TITLE -> gap -> LOGO -> METADATA -> OVERVIEW -> BUTTONS -> DOTS */
|
|
.layout-mobile .spotlight-tagline {
|
|
display: none !important;
|
|
}
|
|
|
|
.layout-mobile .spotlight-overlay {
|
|
width: 100% !important;
|
|
background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.85) 100%) !important;
|
|
padding: 4rem 1rem 4rem 1rem !important;
|
|
align-items: start;
|
|
align-content: start;
|
|
grid-template-rows: auto auto 1fr minmax(48px, auto);
|
|
grid-template-areas: "logo" "metadata" "overview" "buttons";
|
|
gap: 0.75em;
|
|
}
|
|
|
|
/* Gap after TITLE: extra top padding when section has a title */
|
|
.layout-mobile .spotlight-overlay.has-title {
|
|
padding-top: 6rem !important;
|
|
}
|
|
|
|
.layout-mobile .spotlight-section .spotlight-section-title {
|
|
top: 1rem;
|
|
left: 1rem;
|
|
}
|
|
|
|
.layout-mobile .metadata-container {
|
|
display: flex !important;
|
|
}
|
|
|
|
.layout-mobile .spotlight-logo-section {
|
|
height: auto !important;
|
|
min-height: 0 !important;
|
|
}
|
|
|
|
.layout-mobile .spotlight-overview {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.spotlight-series-info {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.spotlight-section[data-size="full"] .metadata-container * {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
/* Native Jellyfin itemDetailsGroup structure for all spotlight metadata */
|
|
.spotlight-section .itemDetailsGroup:has(.detailsGroupItem:not(.hide)),
|
|
.spotlight-section .sectionTabs:has(.emby-tab-button:not(.hide)) {
|
|
margin: 0px !important;
|
|
padding: 0px !important;
|
|
width: initial !important;
|
|
min-width: initial !important;
|
|
}
|
|
.spotlight-section .itemDetailsGroup:not(.hide) .detailsGroupItem,
|
|
.spotlight-section .itemDetailsGroup:not(.hide) .emby-tab-button {
|
|
margin: 0px !important;
|
|
gap: 0px !important;
|
|
}
|
|
|
|
.spotlight-section .spotlight-buttons-container.mainDetailButtons .btnPlay {
|
|
margin-right: 0px !important;
|
|
right: 0px !important;
|
|
}
|
|
|
|
.spotlight-section .spotlight-buttons-container.mainDetailButtons {
|
|
margin-left: 0px !important;
|
|
}
|
|
|
|
.spotlight-section:not(.hide) .headerTabs,
|
|
.spotlight-section:not(.hide) .sectionTabs {
|
|
display: flex !important;
|
|
height: initial !important;
|
|
padding: 0px !important;
|
|
margin-top: 0px !important;
|
|
margin-bottom: 0px !important;
|
|
margin-left: 0px !important;
|
|
margin-right: 0px !important;
|
|
}
|
|
|
|
.spotlight-section:not(.hide) .emby-tab-button {
|
|
height: initial !important;
|
|
padding: 0.5rem 0.5rem !important;
|
|
margin: 0px !important;
|
|
top: initial !important;
|
|
transform: initial !important;
|
|
}
|
|
|
|
.spotlight-section-title.headerTabs.sectionTabs,
|
|
.spotlight-nav-container.headerTabs.sectionTabs {
|
|
position: absolute !important;
|
|
display: flex !important;
|
|
flex-direction: row !important;
|
|
}
|
|
|
|
.spotlight-section[data-layout="Border"] .spotlight-section-title {
|
|
top: 0;
|
|
}
|
|
|
|
.spotlight-nav-buttons-container {
|
|
display: flex !important;
|
|
gap: 8px !important;
|
|
font-size: 1.1rem !important;
|
|
}
|
|
|
|
.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;
|
|
top: initial !important;
|
|
}
|
|
.spotlight-section-title > * {
|
|
font-size: 18px !important;
|
|
}
|
|
|
|
.spotlight-metadata-row *:not(a) {
|
|
cursor: default;
|
|
}
|
|
|
|
.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));
|
|
}
|
|
.spotlight-section[data-layout="Borderless"][data-size="normal"] .spotlight-banner-container {
|
|
height: 33rem;
|
|
}
|
|
|
|
.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: 52rem;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.spotlight-section[data-layout="Borderless"][data-size="normal"] {
|
|
--spotlight-fullscreen-vertical: 3em;
|
|
--spotlight-fullscreen-horizontal: max(env(safe-area-inset-left), env(safe-area-inset-right), 4%);
|
|
}
|
|
.spotlight-section[data-layout="Borderless"][data-size="normal"] .spotlight-section-title {
|
|
left: var(--spotlight-fullscreen-horizontal);
|
|
top: calc(var(--spotlight-fullscreen-vertical) * 1);
|
|
}
|
|
.spotlight-section[data-layout="Borderless"][data-size="normal"] .spotlight-tagline {
|
|
bottom: calc(var(--spotlight-fullscreen-vertical) * 1.5 + 40px);
|
|
}
|
|
.spotlight-section[data-layout="Borderless"][data-size="normal"] .spotlight-dots {
|
|
bottom: calc(var(--spotlight-fullscreen-vertical) * 1.5);
|
|
}
|
|
.spotlight-section[data-layout="Borderless"][data-size="normal"] .spotlight-nav-container {
|
|
right: var(--spotlight-fullscreen-horizontal);
|
|
top: calc(var(--spotlight-fullscreen-vertical) * 1);
|
|
}
|
|
.spotlight-section[data-layout="Borderless"][data-size="normal"] .spotlight-overlay {
|
|
grid-template-rows: var(--spotlight-logo-height) auto auto minmax(48px, auto);
|
|
}
|
|
.spotlight-section[data-size="normal"] .spotlight-overlay {
|
|
grid-template-rows: var(--spotlight-logo-height) auto auto 1fr;
|
|
}
|
|
.spotlight-section[data-size="large"] .spotlight-overlay {
|
|
grid-template-rows: var(--spotlight-logo-height) auto auto 1fr;
|
|
}
|
|
.spotlight-section[data-layout="Border"] .spotlight-overlay {
|
|
padding: 65px 40px 15px 40px;
|
|
}
|
|
.spotlight-section[data-layout="Border"] .spotlight-section-title {
|
|
top: 15px !important;
|
|
left: 40px !important;
|
|
}
|
|
.spotlight-section[data-layout="Border"] .spotlight-nav-container {
|
|
top: 15px !important;
|
|
right: 40px !important;
|
|
}
|
|
.spotlight-section[data-layout="Border"][data-size="normal"] .spotlight-section-title a {
|
|
font-size: 1rem !important;
|
|
}
|
|
.spotlight-section[data-layout="Border"][data-size="normal"] .spotlight-buttons-section {
|
|
align-self: end;
|
|
}
|
|
.spotlight-section[data-layout="Border"] .spotlight-banner-container {
|
|
border: 1px solid rgb(255 255 255 / 10%);
|
|
}
|
|
.spotlight-section[data-layout="Border"][data-size="large"] .spotlight-banner-container {
|
|
height: 40rem;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.spotlight-section[data-layout="Border"][data-size="normal"] .spotlight-overview {
|
|
-webkit-line-clamp: 2;
|
|
} |