Video thumbnail generation

assets/style.css

@@ -24,6 +24,8 @@
     --link-hover: #d6d24d;
     --danger: #c40141;
     --danger-hover: #d03467;
+    /* Translucent scrim for badges/overlays sitting on top of media. */
+    --overlay: rgba(0, 0, 0, 0.55);
 
     --border: 1px solid var(--secondary);
     --border-dashed: 1px dashed var(--secondary);
@@ -484,6 +486,24 @@ button.fab { display: none; }
     display: block;
     background: var(--bg) url("/_/icons/thumb-placeholder.svg") center/2rem no-repeat;
 }
+/* Wrapper so a video tile can overlay a play badge on its extracted frame. */
+.thumb-media { position: relative; display: block; }
+.thumb-play {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    padding-left: 0.15rem;
+    border-radius: 50%;
+    background: var(--overlay);
+    color: var(--text);
+    pointer-events: none;
+}
 .thumb-icon {
     height: 150px;
     display: flex;