src/styles/detail/video.css

@@ -21,10 +21,11 @@
   position: relative;
   overflow: hidden;
   min-width: 0;
-  aspect-ratio: 16 / 9;
   border: 1px solid rgba(88, 103, 121, 0.42);
   border-radius: 8px;
-  background: #000;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 28%),
+    #000;
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.05),
     0 10px 22px rgba(0, 0, 0, 0.32);
@@ -32,25 +33,21 @@
 
 .camera-view__video {
   width: 100%;
-  height: 100%;
+  aspect-ratio: 16 / 9;
   display: block;
   background: #000;
   object-fit: contain;
 }
 
 .camera-view__caption {
-  position: absolute;
-  left: 10px;
-  right: 10px;
-  bottom: 10px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  padding: 8px 10px;
-  border: 1px solid rgba(148, 163, 184, 0.16);
-  border-radius: 6px;
-  background: rgba(2, 6, 23, 0.78);
+  min-height: 38px;
+  padding: 0 10px;
+  border-top: 1px solid rgba(148, 163, 184, 0.16);
+  background: rgba(2, 6, 23, 0.88);
   color: #cbd5e1;
 }