2f9ede3993
add gradient background media placeholder for empty states update video to use 0.18s ease opacity fade-in transition add videoReady state to track when video is ready to display adjust z-indexes for correct media layer stacking fix video rendering condition and add state reset watchers update template media container background color
201 lines
3.8 KiB
SCSS
201 lines
3.8 KiB
SCSS
.template-card {
|
|
position: relative;
|
|
flex: 0 0 var(--template-card-width, 318px);
|
|
width: var(--template-card-width, 318px);
|
|
height: var(--template-card-height, 494px);
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
border-radius: var(--template-card-radius, 28px);
|
|
color: #ffffff;
|
|
text-align: left;
|
|
box-shadow: 0 3px 8px rgba(24, 37, 50, 0.12);
|
|
opacity: 0.82;
|
|
transition:
|
|
box-shadow 0.2s ease,
|
|
opacity 0.2s ease;
|
|
}
|
|
|
|
.template-card.is-active {
|
|
border-color: rgba(255, 255, 255, 0.34);
|
|
box-shadow: 0 5px 12px rgba(24, 37, 50, 0.16);
|
|
opacity: 1;
|
|
}
|
|
|
|
.template-card.is-postcard .template-copy {
|
|
background:
|
|
linear-gradient(
|
|
180deg,
|
|
rgba(255, 255, 255, 0.06),
|
|
rgba(255, 255, 255, 0) 34%
|
|
),
|
|
linear-gradient(180deg, #0a4d46, #082226);
|
|
}
|
|
|
|
.template-card.is-postcard .template-copy::before {
|
|
background: linear-gradient(180deg, rgba(10, 77, 70, 0), #0a4d46);
|
|
}
|
|
|
|
.template-media {
|
|
position: relative;
|
|
flex: 0 0 var(--template-card-media-height, 358px);
|
|
height: var(--template-card-media-height, 358px);
|
|
overflow: hidden;
|
|
background: #0a4d46;
|
|
}
|
|
|
|
.template-media-placeholder,
|
|
.template-image,
|
|
.template-video {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.template-media-placeholder {
|
|
background:
|
|
radial-gradient(
|
|
90% 48% at 50% 30%,
|
|
rgba(255, 255, 255, 0.12),
|
|
rgba(255, 255, 255, 0) 70%
|
|
),
|
|
linear-gradient(160deg, #17383a 0%, #0f7069 58%, #0a4d46 100%);
|
|
}
|
|
|
|
.template-image {
|
|
z-index: 1;
|
|
}
|
|
|
|
.template-video {
|
|
z-index: 2;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.18s ease;
|
|
}
|
|
|
|
.template-video.is-ready {
|
|
opacity: 1;
|
|
}
|
|
|
|
.template-media-shade {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 3;
|
|
background:
|
|
radial-gradient(
|
|
92% 45% at 50% 28%,
|
|
rgba(255, 255, 255, 0.08),
|
|
rgba(255, 255, 255, 0) 62%
|
|
),
|
|
linear-gradient(
|
|
180deg,
|
|
rgba(4, 22, 24, 0),
|
|
rgba(4, 22, 24, 0.02) 58%,
|
|
rgba(4, 22, 24, 0.24)
|
|
);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.template-copy {
|
|
position: relative;
|
|
flex: 0 0 var(--template-card-copy-height, 136px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
padding: 15px 18px 14px;
|
|
background:
|
|
linear-gradient(
|
|
180deg,
|
|
rgba(255, 255, 255, 0.06),
|
|
rgba(255, 255, 255, 0) 34%
|
|
),
|
|
linear-gradient(180deg, #0f7069, #092128);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.template-copy::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: -34px;
|
|
height: 34px;
|
|
background: linear-gradient(180deg, rgba(15, 112, 105, 0), #0f7069);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.template-badge {
|
|
position: absolute;
|
|
top: 14px;
|
|
right: 18px;
|
|
height: 24px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0 9px;
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, 0.16);
|
|
color: rgba(255, 255, 255, 0.9);
|
|
font-size: 10px;
|
|
line-height: 24px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.template-title {
|
|
width: 178px;
|
|
color: #ffffff;
|
|
font-size: 17px;
|
|
line-height: 22px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.template-desc {
|
|
width: 178px;
|
|
margin-top: 4px;
|
|
color: rgba(255, 255, 255, 0.76);
|
|
font-size: 11px;
|
|
line-height: 15px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.template-note {
|
|
max-width: 172px;
|
|
margin-top: 5px;
|
|
color: rgba(255, 255, 255, 0.86);
|
|
font-size: 9px;
|
|
line-height: 13px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.template-select {
|
|
position: absolute;
|
|
right: 16px;
|
|
bottom: 16px;
|
|
min-width: 108px;
|
|
height: 40px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0;
|
|
padding: 0 16px;
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
color: #172033;
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.template-select::after {
|
|
border: 0;
|
|
}
|