mirror of
https://gitlab.com/vyla-entertainment/home-frontend.git
synced 2026-11-14 14:07:20 -05:00
77 lines
1.7 KiB
CSS
77 lines
1.7 KiB
CSS
.showcase-viewport {
|
|
overflow: hidden;
|
|
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
|
|
mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
|
|
}
|
|
|
|
.showcase-track {
|
|
display: flex;
|
|
width: max-content;
|
|
gap: clamp(0.75rem, 1.5vw, 1.25rem);
|
|
transform: translate3d(var(--showcase-x, 0px), 0, 0);
|
|
will-change: transform;
|
|
}
|
|
|
|
.showcase-item {
|
|
flex: 0 0 auto;
|
|
width: clamp(220px, 22vw, 280px);
|
|
opacity: 0;
|
|
transition: opacity var(--duration-base) ease;
|
|
}
|
|
|
|
.showcase-item.loaded {
|
|
opacity: 1;
|
|
}
|
|
|
|
.showcase-card {
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
aspect-ratio: 16 / 9;
|
|
border-radius: var(--radius-md);
|
|
overflow: hidden;
|
|
background: var(--color-border);
|
|
cursor: pointer;
|
|
border: none;
|
|
padding: 0;
|
|
transition: transform var(--duration-base) var(--ease-standard);
|
|
}
|
|
|
|
.showcase-thumb {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
transition: filter var(--duration-base) ease;
|
|
}
|
|
|
|
.showcase-card:hover .showcase-thumb {
|
|
filter: brightness(0.7);
|
|
}
|
|
|
|
.showcase-play {
|
|
position: absolute;
|
|
inset: 0;
|
|
margin: auto;
|
|
width: 46px;
|
|
height: 46px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--radius-pill);
|
|
background: rgba(0, 0, 0, 0.55);
|
|
color: #fff;
|
|
pointer-events: none;
|
|
transition: background var(--duration-fast) ease, transform var(--duration-fast) ease;
|
|
}
|
|
|
|
.showcase-card:hover .showcase-play {
|
|
background: rgba(0, 0, 0, 0.75);
|
|
transform: scale(1.08);
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.showcase-item {
|
|
width: clamp(200px, 62vw, 260px);
|
|
}
|
|
} |