mirror of
https://gitlab.com/vyla-entertainment/home-frontend.git
synced 2026-11-14 08:37:32 -05:00
59 lines
1.1 KiB
CSS
59 lines
1.1 KiB
CSS
.marquee-fade-wrap {
|
|
position: relative;
|
|
}
|
|
|
|
.marquee-fade-wrap::before,
|
|
.marquee-fade-wrap::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: clamp(3rem, 12vw, 10rem);
|
|
z-index: var(--z-marquee-fade);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.marquee-fade-wrap::before {
|
|
left: 0;
|
|
background: linear-gradient(to right, var(--color-bg), transparent);
|
|
}
|
|
|
|
.marquee-fade-wrap::after {
|
|
right: 0;
|
|
background: linear-gradient(to left, var(--color-bg), transparent);
|
|
}
|
|
|
|
.marquee-row {
|
|
overflow: visible;
|
|
width: 100%;
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
.marquee-track {
|
|
display: flex;
|
|
gap: 1rem;
|
|
width: max-content;
|
|
transform: translateZ(0);
|
|
backface-visibility: hidden;
|
|
will-change: transform;
|
|
contain: layout style paint;
|
|
}
|
|
|
|
.marquee-left .marquee-track {
|
|
transform: translateX(var(--marquee-x-1, 0));
|
|
}
|
|
|
|
.marquee-right .marquee-track {
|
|
transform: translateX(var(--marquee-x-2, 0));
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.marquee-track {
|
|
transform: none !important;
|
|
}
|
|
}
|
|
|
|
/* Performance optimization: GPU acceleration */
|
|
.marquee-row {
|
|
will-change: transform;
|
|
} |