From afdc1b396e3e88146006cd707a15b9da4843e1c2 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Sun, 04 Jan 2026 18:34:21 +0000
Subject: [PATCH] Merge branch 'main' of https://github.com/jakevdwerf/jvb
---
src/video/editor.scss | 80 +++++++++++++++++++++++++++++++++++++++
1 files changed, 79 insertions(+), 1 deletions(-)
diff --git a/src/video/editor.scss b/src/video/editor.scss
index 1600218..9218653 100644
--- a/src/video/editor.scss
+++ b/src/video/editor.scss
@@ -1,4 +1,5 @@
.video-cover-editor {
+ position: relative;
min-height: 200px;
background: #f0f0f0;
border: 2px dashed #ccc;
@@ -7,6 +8,7 @@
.video-cover-preview {
position: relative;
width: 100%;
+ min-height: 300px;
img {
width: 100%;
@@ -14,7 +16,82 @@
display: block;
}
- .video-overlay {
+ .video-overlay-preview {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 1);
+ pointer-events: none;
+ }
+
+ .video-cover-content-preview {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ display: flex;
+ z-index: 2;
+ padding: 2rem;
+
+ // Content alignment classes
+ &.align-top-left {
+ align-items: flex-start;
+ justify-content: flex-start;
+ }
+ &.align-top-center {
+ align-items: flex-start;
+ justify-content: center;
+ }
+ &.align-top-right {
+ align-items: flex-start;
+ justify-content: flex-end;
+ }
+ &.align-center-left {
+ align-items: center;
+ justify-content: flex-start;
+ }
+ &.align-center {
+ align-items: center;
+ justify-content: center;
+ }
+ &.align-center-right {
+ align-items: center;
+ justify-content: flex-end;
+ }
+ &.align-bottom-left {
+ align-items: flex-end;
+ justify-content: flex-start;
+ }
+ &.align-bottom-center {
+ align-items: flex-end;
+ justify-content: center;
+ }
+ &.align-bottom-right {
+ align-items: flex-end;
+ justify-content: flex-end;
+ }
+
+ .video-cover-content {
+ width: 100%;
+ max-width: 1200px;
+ color: white;
+ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+
+ // Style inner blocks for better visibility in editor
+ h1, h2, h3, h4, h5, h6 {
+ color: white;
+ }
+
+ p {
+ color: white;
+ }
+ }
+ }
+
+ .video-info {
position: absolute;
bottom: 0;
left: 0;
@@ -23,6 +100,7 @@
color: white;
padding: 10px;
font-size: 14px;
+ z-index: 3;
p {
margin: 0;
--
Gitblit v1.10.0