102 lines
1.8 KiB
CSS
102 lines
1.8 KiB
CSS
/* ===================== Cover Base ===================== */
|
|
|
|
.__PFX__-dm-cover {
|
|
position: relative;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.__PFX__-dm-cover-img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.__PFX__-dm-cover-bg {
|
|
width: 100%;
|
|
aspect-ratio: 2 / 3;
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
/* ===================== Overlays ===================== */
|
|
|
|
.__PFX__-dm-cover-badge,
|
|
.__PFX__-dm-cover-score,
|
|
.__PFX__-dm-cover-tag,
|
|
.__PFX__-dm-cover-year,
|
|
.__PFX__-dm-cover-free,
|
|
.__PFX__-dm-cover-top {
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 8px;
|
|
padding: 2px 6px;
|
|
font-size: 12px;
|
|
background: rgba(0,0,0,.6);
|
|
color: #fff;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.__PFX__-dm-cover-score {
|
|
top: auto;
|
|
bottom: 8px;
|
|
left: 8px;
|
|
}
|
|
|
|
.__PFX__-dm-cover-remark {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
font-size: 12px;
|
|
padding: 4px 6px;
|
|
background: rgba(0,0,0,.5);
|
|
color: #fff;
|
|
}
|
|
|
|
.__PFX__-dm-cover-play {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(0,0,0,.35);
|
|
}
|
|
|
|
.__PFX__-dm-cover-play::after {
|
|
content: "▶";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 32px;
|
|
color: #fff;
|
|
}
|
|
|
|
/* ===================== Variant Differences ===================== */
|
|
|
|
.__PFX__-dm-cover.v3,
|
|
.__PFX__-dm-cover.v6,
|
|
.__PFX__-dm-cover.v10,
|
|
.__PFX__-dm-cover.v11,
|
|
.__PFX__-dm-cover.v14 {
|
|
aspect-ratio: 2 / 3;
|
|
}
|
|
|
|
.__PFX__-dm-cover.v8 {
|
|
text-align: center;
|
|
}
|
|
|
|
.__PFX__-dm-cover.v16 .__PFX__-dm-cover-mask {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
to bottom,
|
|
rgba(0,0,0,0),
|
|
rgba(0,0,0,.6)
|
|
);
|
|
}
|
|
|
|
.__PFX__-dm-cover.v18 {
|
|
aspect-ratio: 2 / 3;
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|