| | |
| | | /* editor.scss */ |
| | | .video-cover-editor { |
| | | position: relative; |
| | | min-height: 200px; |
| | | background: #f0f0f0; |
| | | border: 2px dashed #ccc; |
| | |
| | | .video-cover-preview { |
| | | position: relative; |
| | | width: 100%; |
| | | min-height: 300px; |
| | | |
| | | img { |
| | | width: 100%; |
| | |
| | | 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; |
| | |
| | | color: white; |
| | | padding: 10px; |
| | | font-size: 14px; |
| | | z-index: 3; |
| | | |
| | | p { |
| | | margin: 0; |