21254 youtube media player

2026-02-04 11:22:11 +00:00
parent ec067e62a5
commit 53540911cc
4 changed files with 774 additions and 12 deletions
@@ -3164,4 +3164,108 @@ ul.subFieldList {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    line-height: 1.4;
+}
+
+#case-media {
+    .videoWrapper {
+        position: relative;
+        padding-bottom: 56.25%;
+        height: 0;
+        overflow: hidden;
+        border: 1px solid #b1b4b6;
+        border-radius: 4px;
+    }
+
+    .videoWrapper iframe {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    .videoTabButton {
+        width: 100%;
+        text-align: left;
+        background: transparent;
+        border: 1px solid #b1b4b6;
+        border-radius: 4px;
+        padding: 10px 12px;
+        cursor: pointer;
+    }
+
+    .videoTabButton:hover {
+        background: #f3f2f1;
+    }
+
+    .videoTabButton.active {
+        border-color: #1d70b8;
+        box-shadow: inset 0 0 0 1px #1d70b8;
+        background: #eef4ff;
+    }
+
+    .videoTabContent {
+        display: flex;
+        gap: 12px;
+        align-items: center;
+    }
+
+    .thumbnailWrapper {
+        position: relative;
+        width: 120px;
+        flex-shrink: 0;
+    }
+
+    .videoThumbnail {
+        width: 100%;
+        aspect-ratio: 16 / 9;
+        object-fit: cover;
+        border-radius: 4px;
+        border: 1px solid #b1b4b6;
+        background: #000;
+    }
+
+    .playIcon {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 32px;
+        color: white;
+        text-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
+        pointer-events: none;
+    }
+
+    .durationBadge {
+        position: absolute;
+        bottom: 6px;
+        right: 6px;
+        background: rgba(0, 0, 0, 0.8);
+        color: white;
+        font-size: 12px;
+        padding: 2px 6px;
+        border-radius: 3px;
+    }
+
+    .watchedBadge {
+        position: absolute;
+        top: 6px;
+        left: 6px;
+        background: #00703c;
+        color: white;
+        font-size: 11px;
+        padding: 2px 6px;
+        border-radius: 3px;
+    }
+
+    .videoTitle {
+        font-weight: 600;
+    }
+
+    @media (max-width: 40.0625em) {
+        .thumbnailWrapper {
+            width: 90px;
+        }
+    }
 }