gpttemp

code/public/static/css/modules/detail_main/cover.css

@@ -0,0 +1,101 @@
+/* ===================== 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;
+}