Two small CSS snippets for the new Spotlight

[SoliFlix 12]

Ken Burns Zoom:
Applies a slow, continuously looping zoom-in/zoom-out effect to the Fokus/Spotlight backdrop image, giving it subtle motion instead of sitting completely still.

/* Emby Fokus/Spotlight – Ken-Burns-Zoom-Schleife */
.spotlightCard .cardContent,
.spotlightCard .cardImageContainer {
    overflow: hidden;
}

.spotlightCard .spotlightCardImage {
    animation: spotlightKenBurns 10s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes spotlightKenBurns {
    from { transform: scale(1) translate3d(0, 0, 0); }
    to   { transform: scale(1.12) translate3d(-1.5%, -1.5%, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .spotlightCard .spotlightCardImage { animation: none; }
}

 

Vignette:
Adds a soft dark gradient fade around the edges of the Fokus/Spotlight banner so the backdrop image blends into the page instead of ending in a hard rectangle.

/* Emby Fokus/Spotlight – Vignette */
.spotlightCard .cardContent,
.spotlightCard .cardImageContainer {
    z-index: 1;
}
.spotlightCard .cardFooter,
.spotlightCard .innerCardFooter {
    z-index: 2;
}

.spotlightCard .cardContent::before,
.spotlightCard .cardImageContainer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom,
        rgba(30,30,30,1) 0%, rgba(30,30,30,1) 1%, rgba(30,30,30,1) 2%, rgba(30,30,30,.99) 3%,
        rgba(30,30,30,.97) 4%, rgba(30,30,30,.95) 5%, rgba(30,30,30,.9) 8%, rgba(30,30,30,.85) 10%,
        rgba(30,30,30,.75) 15%, rgba(30,30,30,.6) 20%, rgba(30,30,30,.4) 25%, rgba(30,30,30,.2) 35%,
        transparent 50%,
        rgba(30,30,30,.2) 65%, rgba(30,30,30,.4) 75%, rgba(30,30,30,.6) 80%, rgba(30,30,30,.75) 85%,
        rgba(30,30,30,.85) 90%, rgba(30,30,30,.9) 92%, rgba(30,30,30,.95) 95%, rgba(30,30,30,.97) 96%,
        rgba(30,30,30,.99) 97%, rgba(30,30,30,1) 98%, rgba(30,30,30,1) 99%, rgba(30,30,30,1) 100%
    );
}

.spotlightCard .cardContent::after,
.spotlightCard .cardImageContainer::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to right,
        rgba(30,30,30,1) 0%, rgba(30,30,30,1) 1%, rgba(30,30,30,1) 2%, rgba(30,30,30,.99) 3%,
        rgba(30,30,30,.97) 4%, rgba(30,30,30,.95) 5%, rgba(30,30,30,.9) 8%, rgba(30,30,30,.85) 10%,
        rgba(30,30,30,.75) 15%, rgba(30,30,30,.6) 20%, rgba(30,30,30,.4) 25%, rgba(30,30,30,.2) 35%,
        transparent 50%, transparent 60%,
        rgba(30,30,30,.2) 72%, rgba(30,30,30,.4) 80%, rgba(30,30,30,.6) 84%, rgba(30,30,30,.75) 88%,
        rgba(30,30,30,.85) 92%, rgba(30,30,30,.9) 94%, rgba(30,30,30,.95) 96%, rgba(30,30,30,.97) 97%,
        rgba(30,30,30,.99) 98%, rgba(30,30,30,1) 99%, rgba(30,30,30,1) 100%
    );
}

 

only works in the web app...

Edited 26 minutes ago by SoliFlix
small change...