diff --git a/assets/src/css/_cta-card.scss b/assets/src/css/_cta-card.scss new file mode 100644 index 000000000..eb0dd18a6 --- /dev/null +++ b/assets/src/css/_cta-card.scss @@ -0,0 +1,330 @@ +// ============================================ +// GoDAM CTA Card Styles - Shared Component +// Used in both video editor and frontend +// ============================================ + +// Variables +$cta-color-white: #fff !default; +$cta-color-black: #000 !default; +$cta-color-gray: #666 !default; +$cta-color-gray-light: #f0f0f0 !default; +$cta-color-gray-lighter: #f2f2f2 !default; + +$cta-border-radius-sm: 0.25rem !default; + +$cta-spacing-xs: 0.5rem !default; +$cta-spacing-sm: 0.75rem !default; +$cta-spacing-md: 1rem !default; + +$cta-font-size-sm: 0.875rem !default; +$cta-font-size-base: 1rem !default; +$cta-font-size-md: 1.125rem !default; +$cta-font-size-lg: 1.25rem !default; + +$cta-card-max-width: 700px !default; +$cta-card-max-width-vertical: 400px !default; + +// ============================================ +// Overlay Container +// ============================================ +.godam-cta-overlay-container { + display: flex; + justify-content: center; + align-items: safe center; // Automatically switches to 'start' when content overflows + width: 100%; + height: 100%; + overflow: auto; + container-type: inline-size; + container-name: cta-container; +} + +// ============================================ +// Base Card Styles +// ============================================ +.godam-cta-card { + max-width: $cta-card-max-width; + width: 95%; + height: fit-content; + margin: $cta-spacing-md; + background-color: $cta-color-white; + border-radius: $cta-border-radius-sm; + position: relative; + overflow: hidden; + + // ============================================ + // Layout Variants + // ============================================ + + // Layout: Text Left, Image Right (Full Height) + &.card-layout--text-imagecover { + display: grid; + grid-template-columns: calc(100% - 1rem - var(--image-width, 50%)) var(--image-width, 50%); + gap: $cta-spacing-md; + + .godam-cta-card-image { + height: 100%; + } + } + + // Layout: Image Left, Text Right (Full Height) + &.card-layout--imagecover-text { + display: grid; + grid-template-columns: var(--image-width, 50%) calc(100% - 1rem - var(--image-width, 50%)); + gap: $cta-spacing-md; + + .godam-cta-card-image { + height: 100%; + order: -1; + } + } + + // Layout: Text Left, Image Right (Half Height) + &.card-layout--text-image { + display: grid; + grid-template-columns: calc(100% - 1rem - var(--image-width, 50%)) var(--image-width, 50%); + gap: $cta-spacing-md; + align-items: center; + + .godam-cta-card-image { + padding-right: $cta-spacing-md; + padding-top: $cta-spacing-md; + padding-bottom: $cta-spacing-md; + } + } + + // Layout: Image Left, Text Right (Half Height) + &.card-layout--image-text { + display: grid; + grid-template-columns: var(--image-width, 50%) calc(100% - 1rem - var(--image-width, 50%)); + gap: $cta-spacing-md; + align-items: center; + + .godam-cta-card-image { + order: -1; + padding-left: $cta-spacing-md; + padding-top: $cta-spacing-md; + padding-bottom: $cta-spacing-md; + } + } + + // Layout: Image Top, Text Bottom + &.card-layout--image-top { + display: flex; + flex-direction: column; + max-width: $cta-card-max-width-vertical; + + .godam-cta-card-image { + order: -1; + } + } + + // Layout: Text Top, Image Bottom + &.card-layout--image-bottom { + display: flex; + flex-direction: column; + max-width: $cta-card-max-width-vertical; + } + + // Layout: Image Background + &.card-layout--image-background { + display: flex; + flex-direction: column; + position: relative; + + .godam-cta-card-image-bg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-size: cover; + background-position: center; + z-index: 0; + } + } + + // Layout: Text Only + &.desktop-text-only { + display: flex; + flex-direction: column; + } +} + +// ============================================ +// Card Image Components +// ============================================ +.godam-cta-card-image { + + img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: $cta-border-radius-sm; + } +} + +.godam-cta-card-image-placeholder { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: $cta-border-radius-sm; + display: flex; + align-items: center; + justify-content: center; + background-color: $cta-color-gray-light; + color: $cta-color-gray; + min-height: 200px; +} + +// ============================================ +// Card Content +// ============================================ +.godam-cta-card-content { + display: flex; + flex-direction: column; + justify-content: center; + + padding: $cta-spacing-md; + + .godam-cta-card.card-layout--image-background & { + position: relative; + z-index: 1; + background: rgba($cta-color-white, 0.85); + } + + .card-title { + margin-top: 0; + margin-bottom: $cta-spacing-sm; + font-size: $cta-font-size-lg; + font-weight: 600; + line-height: 1.4; + } + + .card-description { + margin-top: 0; + margin-bottom: $cta-spacing-sm; + font-size: 0.9375rem; + color: $cta-color-gray; + line-height: 1.5; + } + + .btns { + display: flex; + gap: 12px; + flex-wrap: wrap; + } +} + +// ============================================ +// CTA Buttons +// ============================================ +.godam-cta-btn { + padding: 12px 16px; + border: none; + border-radius: $cta-border-radius-sm; + background-color: $cta-color-black; + color: $cta-color-white; + cursor: pointer; + font-size: $cta-font-size-base; + text-decoration: none; + display: inline-block; + transition: opacity 0.2s; + + &:hover { + opacity: 0.9; + color: $cta-color-white; + } +} + +.godam-cta-btn-secondary { + padding: 12px 16px; + border: none; + border-radius: $cta-border-radius-sm; + background-color: $cta-color-gray-lighter; + color: $cta-color-black; + cursor: pointer; + font-size: $cta-font-size-base; + text-decoration: none; + display: inline-block; +} + +// ============================================ +// Container Query Responsive +// ============================================ + +// Medium containers (≤600px) +@container cta-container (max-width: 600px) { + + .godam-cta-card { + gap: 0 !important; + + &.card-layout--text-imagecover, + &.card-layout--imagecover-text, + &.card-layout--text-image, + &.card-layout--image-text { + grid-template-columns: 1fr; + } + + &.card-layout--text-image { + + .godam-cta-card-image { + padding: 1rem; + padding-top: 0; + } + } + + &.card-layout--image-text { + + .godam-cta-card-image { + padding: 1rem; + padding-bottom: 0; + } + } + + width: 95%; + } + + .godam-cta-card-content { + + .card-title { + font-size: $cta-font-size-md; + line-height: 1.4; + } + + .card-description { + font-size: $cta-font-size-sm; + line-height: 1.5; + } + } +} + +// Extra small containers (≤400px) +@container cta-container (max-width: 400px) { + + .godam-cta-card { + width: 98%; + margin: $cta-spacing-xs; + } + + .godam-cta-card-content { + padding: $cta-spacing-sm; + + .card-title { + font-size: $cta-font-size-base; + line-height: 1.4; + margin-bottom: $cta-spacing-xs; + } + + .card-description { + font-size: 0.8125rem; + line-height: 1.5; + margin-bottom: $cta-spacing-xs; + } + } + + .godam-cta-btn { + padding: 10px 14px; + font-size: $cta-font-size-sm; + } +} + diff --git a/assets/src/css/godam-player.scss b/assets/src/css/godam-player.scss index cf1808ec4..705be2d9f 100644 --- a/assets/src/css/godam-player.scss +++ b/assets/src/css/godam-player.scss @@ -12,6 +12,9 @@ // Video engagement styles. @use "./video-engagement"; +// CTA Card styles - Shared component (also used in video editor) +@use './cta-card'; + .rtgodam-video-caption { margin-bottom: 1em; diff --git a/inc/helpers/custom-functions.php b/inc/helpers/custom-functions.php index 50ddc9e9b..3e9f2fca7 100644 --- a/inc/helpers/custom-functions.php +++ b/inc/helpers/custom-functions.php @@ -157,7 +157,7 @@ function rtgodam_fetch_overlay_media_url( $media_id ) { * @param array $layer Associative array containing CTA details: * - 'image' (int): Media ID for the image. * - 'imageUrlExt' (string): External URL for the image (GoDAM hosted). - * - 'imageCtaOrientation' (string): Orientation of the CTA ('portrait' or other). + * - 'cardLayout' (string): Layout type for the CTA card. * - 'imageOpacity' (float): Opacity of the image (default is 1). * - 'imageText' (string): Heading text for the CTA. * - 'imageDescription' (string): Description text for the CTA. @@ -169,53 +169,126 @@ function rtgodam_fetch_overlay_media_url( $media_id ) { */ function rtgodam_image_cta_html( $layer ) { // Determine if the image is a GoDAM hosted media. - $is_godam_media = is_string( $layer['image'] ) && strpos( $layer['image'], 'godam_' ) === 0; + $is_godam_media = isset( $layer['image'] ) && is_string( $layer['image'] ) && str_starts_with( $layer['image'], 'godam_' ); if ( $is_godam_media && ! empty( $layer['imageUrlExt'] ) ) { $image_url = $layer['imageUrlExt']; } else { - $image_url = rtgodam_fetch_overlay_media_url( $layer['image'] ); - } - - // Ensure $layer is an associative array and has required fields. - $orientation_class = isset( $layer['imageCtaOrientation'] ) && 'portrait' === $layer['imageCtaOrientation'] - ? 'vertical-image-cta-container' - : 'image-cta-container'; - - $image_opacity = isset( $layer['imageOpacity'] ) ? $layer['imageOpacity'] : 1; - $image_text = isset( $layer['imageText'] ) ? $layer['imageText'] : ''; - $image_description = isset( $layer['imageDescription'] ) ? $layer['imageDescription'] : ''; - $image_link = isset( $layer['imageLink'] ) ? $layer['imageLink'] : '/'; - $cta_background_color = isset( $layer['imageCtaButtonColor'] ) ? $layer['imageCtaButtonColor'] : '#eeab95'; - $cta_button_text = ! empty( $layer['imageCtaButtonText'] ) ? $layer['imageCtaButtonText'] : 'Buy Now'; // Null coalescing with empty check. - $image_box = "
" . __( 'No Image', 'godam' ) . '
'; - - if ( ! empty( $image_url ) ) { - $image_box = "\"CTA"; - } - - return " -
-
-
- {$image_box} -
- " . ( ! empty( $image_text ) ? "

{$image_text}

" : '' ) . ' - ' . ( ! empty( $image_description ) ? "

{$image_description}

" : '' ) . " - - {$cta_button_text} - -
-
-
-
- "; + $image_url = rtgodam_fetch_overlay_media_url( isset( $layer['image'] ) ? $layer['image'] : 0 ); + } + + // Define allowed layouts for validation. + $allowed_layouts = array( + 'card-layout--text-imagecover', + 'card-layout--text-image', + 'card-layout--image-bottom', + 'card-layout--image-background', + 'card-layout--imagecover-text', + 'card-layout--image-text', + 'card-layout--image-top', + 'desktop-text-only', + ); + + // Backward compatibility: determine default layout based on imageCtaOrientation. + $default_layout = 'card-layout--image-text'; + if ( isset( $layer['imageCtaOrientation'] ) && 'landscape' !== $layer['imageCtaOrientation'] ) { + $default_layout = 'card-layout--image-top'; + } + + $layout = isset( $layer['cardLayout'] ) && in_array( $layer['cardLayout'], $allowed_layouts, true ) + ? $layer['cardLayout'] + : $default_layout; + + $has_image = ! empty( $image_url ); + $image_opacity = isset( $layer['imageOpacity'] ) ? floatval( $layer['imageOpacity'] ) : 1; + $image_width = isset( $layer['imageWidth'] ) ? absint( $layer['imageWidth'] ) : 50; + $image_text = isset( $layer['imageText'] ) ? sanitize_text_field( $layer['imageText'] ) : ''; + $image_description = isset( $layer['imageDescription'] ) ? sanitize_text_field( $layer['imageDescription'] ) : ''; + $image_link = isset( $layer['imageLink'] ) ? $layer['imageLink'] : '#'; + $cta_background_color = isset( $layer['imageCtaButtonColor'] ) ? sanitize_hex_color( $layer['imageCtaButtonColor'] ) : '#EEAB95'; + $cta_button_text = ! empty( $layer['imageCtaButtonText'] ) ? sanitize_text_field( $layer['imageCtaButtonText'] ) : __( 'Check now', 'godam' ); + + // Ensure opacity is within valid range. + $image_opacity = max( 0, min( 1, $image_opacity ) ); + + // Ensure width is within valid range. + $image_width = max( 0, min( 100, $image_width ) ); + + // If no image is provided, force text-only layout on frontend. + if ( ! $has_image ) { + $layout = 'desktop-text-only'; + } + + // Generate image element. + if ( $has_image ) { + $image_element = sprintf( + '%s', + esc_url( $image_url ), + esc_attr__( 'CTA Card Image', 'godam' ), + esc_attr( $image_opacity ) + ); + } else { + $image_element = sprintf( + '
%s
', + esc_attr( $image_opacity ), + esc_html__( 'No Image', 'godam' ) + ); + } + + // Generate content element. + $content_element = '
'; + + if ( ! empty( $image_text ) ) { + $content_element .= sprintf( '

%s

', esc_html( $image_text ) ); + } + + if ( ! empty( $image_description ) ) { + $content_element .= sprintf( '

%s

', esc_html( $image_description ) ); + } + + if ( ! empty( $cta_button_text ) || ! empty( $image_link ) ) { + $content_element .= sprintf( + '
%s
', + esc_url( $image_link ), + esc_attr( $cta_background_color ), + esc_html( $cta_button_text ) + ); + } + + $content_element .= '
'; + + // Handle different layouts. + $card_content = ''; + + if ( 'desktop-text-only' === $layout ) { + // Text only - no image. + $card_content = $content_element; + } elseif ( 'card-layout--image-background' === $layout ) { + // Image background layout. + $card_content = sprintf( + '
%s', + esc_url( $image_url ), + esc_attr( $image_opacity ), + $content_element + ); + } else { + // All other layouts with image element. + $image_content = sprintf( '
%s
', $image_element ); + + // Return based on layout order. + if ( in_array( $layout, array( 'card-layout--text-imagecover', 'card-layout--text-image', 'card-layout--image-bottom' ), true ) ) { + $card_content = $content_element . $image_content; + } else { + $card_content = $image_content . $content_element; + } + } + + return sprintf( + '
%s
', + esc_attr( $layout ), + esc_attr( $image_width ), + $card_content + ); } /** diff --git a/pages/video-editor/components/SidebarLayers.js b/pages/video-editor/components/SidebarLayers.js index abc733845..c3d7cda2b 100644 --- a/pages/video-editor/components/SidebarLayers.js +++ b/pages/video-editor/components/SidebarLayers.js @@ -204,12 +204,12 @@ const SidebarLayers = ( { currentTime, onSelectLayer, onPauseVideo, duration } ) id: uuidv4(), displayTime: currentTime, type, - cta_type: 'text', + cta_type: 'image', + cardLayout: 'card-layout--imagecover-text', text: '', html: '', link: '', allow_skip: true, - imageOpacity: 1, } ) ); break; case 'hotspot': diff --git a/pages/video-editor/components/appearance/Appearance.js b/pages/video-editor/components/appearance/Appearance.js index 56118918f..0e559edad 100644 --- a/pages/video-editor/components/appearance/Appearance.js +++ b/pages/video-editor/components/appearance/Appearance.js @@ -6,7 +6,7 @@ import React, { useEffect } from 'react'; /** * Internal dependencies */ -import '../../video-control.css'; +import '../../video-control.scss'; /** * WordPress dependencies */ diff --git a/pages/video-editor/components/cta/ImageCTA.js b/pages/video-editor/components/cta/ImageCTA.js index 351146900..a9e5f10ee 100644 --- a/pages/video-editor/components/cta/ImageCTA.js +++ b/pages/video-editor/components/cta/ImageCTA.js @@ -7,11 +7,11 @@ import { Button, Notice, - RangeControl, SelectControl, TextareaControl, TextControl, Icon, Tooltip, + RangeControl, } from '@wordpress/components'; import React, { useEffect, useState, useCallback, useRef } from 'react'; import { useDispatch, useSelector } from 'react-redux'; @@ -28,6 +28,76 @@ import ColorPickerButton from '../shared/color-picker/ColorPickerButton.jsx'; */ import { updateLayerField } from '../../redux/slice/videoSlice'; +/** + * Layout SVG Icon Components + */ +const LayoutIcons = { + MediaTextCover: () => ( + + + + + + + ), + TextMediaCover: () => ( + + + + + + + ), + MediaText: () => ( + + + + + + + ), + TextMedia: () => ( + + + + + + + ), + MediaTop: () => ( + + + + + + + ), + MediaBottom: () => ( + + + + + + + ), + TextCoverMedia: () => ( + + + + + + + ), + TextOnly: () => ( + + + + + + + ), +}; + const ImageCTA = ( { layerID } ) => { /** * State to manage the notice message and visibility. @@ -52,17 +122,6 @@ const ImageCTA = ( { layerID } ) => { const restURL = window.godamRestRoute.url || ''; - const imageOrientationOptions = [ - { - label: __( 'Landscape', 'godam' ), - value: 'landscape', - }, - { - label: __( 'Portrait', 'godam' ), - value: 'portrait', - }, - ]; - const openImageCTAUploader = () => { const fileFrame = wp.media( { title: __( 'Select Custom Background Image', 'godam' ), @@ -190,8 +249,63 @@ const ImageCTA = ( { layerID } ) => { [], ); + // Layout options + const layoutOptions = [ + { label: __( 'Image Left, Text Right (Full Height)', 'godam' ), value: 'card-layout--imagecover-text', icon: 'MediaTextCover' }, + { label: __( 'Text Left, Image Right (Full Height)', 'godam' ), value: 'card-layout--text-imagecover', icon: 'TextMediaCover' }, + { label: __( 'Image Left, Text Right', 'godam' ), value: 'card-layout--image-text', icon: 'MediaText' }, + { label: __( 'Text Left, Image Right', 'godam' ), value: 'card-layout--text-image', icon: 'TextMedia' }, + { label: __( 'Image Top, Text Bottom', 'godam' ), value: 'card-layout--image-top', icon: 'MediaTop' }, + { label: __( 'Text Top, Image Bottom', 'godam' ), value: 'card-layout--image-bottom', icon: 'MediaBottom' }, + { label: __( 'Image Background', 'godam' ), value: 'card-layout--image-background', icon: 'TextCoverMedia' }, + { label: __( 'Text Only (No Image)', 'godam' ), value: 'desktop-text-only', icon: 'TextOnly' }, + ]; + + const layoutsWithWidth = [ 'card-layout--text-imagecover', 'card-layout--imagecover-text', 'card-layout--text-image', 'card-layout--image-text' ]; + + // Backward compatibility: determine default layout based on imageCtaOrientation + const getDefaultLayout = () => { + if ( ! layer?.imageCtaOrientation || layer?.imageCtaOrientation === 'landscape' ) { + return 'card-layout--image-text'; + } + return 'card-layout--image-top'; + }; + + const currentLayout = layer?.cardLayout || getDefaultLayout(); + return (
+
+
+ { __( 'Layout', 'godam' ) } +
+
+ { layoutOptions.map( ( layout ) => { + const isSelected = currentLayout === layout.value; + const IconComponent = LayoutIcons[ layout.icon ]; + return ( + + + + ); + } ) } +
+
+
+ { ( selectedImageUrl && layoutsWithWidth?.includes( layer?.cardLayout ) ) && ( + updateField( 'imageWidth', value ) } + min={ 15 } + max={ 85 } + step={ 1 } + help={ __( 'Applies to horizontal layouts only', 'godam' ) } + /> + ) } + { updateField( 'imageText', value ); } } - placeholder={ __( 'Your text', 'godam' ) } + placeholder={ __( 'Add title here', 'godam' ) } /> { onChange={ ( value ) => { updateField( 'imageCtaButtonText', value ); } } - placeholder={ __( 'Buy Now', 'godam' ) } + placeholder={ __( 'Check now', 'godam' ) } />
{ ) }
- - { - updateField( 'imageCtaOrientation', value ); - } } - options={ imageOrientationOptions } - value={ layer.imageCtaOrientation } - /> - -
-
- updateField( 'imageOpacity', value ) } - step={ 0.1 } - value={ layer.imageOpacity ?? 1 } - label={ __( 'Opacity of background image', 'godam' ) } - /> -
-
); }; diff --git a/pages/video-editor/components/layers/CTALayer.js b/pages/video-editor/components/layers/CTALayer.js index 2e237e4cb..d0f5600cc 100644 --- a/pages/video-editor/components/layers/CTALayer.js +++ b/pages/video-editor/components/layers/CTALayer.js @@ -55,6 +55,10 @@ const CTALayer = ( { layerID, goBack, duration } ) => { ); const ctaLayerOptions = [ + { + label: __( 'Card', 'godam' ), + value: 'image', + }, { label: __( 'Text', 'godam' ), value: 'text', @@ -63,10 +67,6 @@ const CTALayer = ( { layerID, goBack, duration } ) => { label: __( 'HTML', 'godam' ), value: 'html', }, - { - label: __( 'Image', 'godam' ), - value: 'image', - }, ]; const handleCTATypeSelect = ( val ) => { @@ -120,31 +120,82 @@ const CTALayer = ( { layerID, goBack, duration } ) => { case 'html': return ; default: - return ; + return ; } }; - const imageCtaHtml = () => { - let imageBox = `
${ __( 'No Image', 'godam' ) }
`; + const renderImageCTA = () => { + const layout = layer?.cardLayout || 'card-layout--text-imagecover'; + const hasImage = imageCtaUrl && imageCtaUrl !== ''; + const opacity = layer?.imageOpacity ?? 1; - if ( imageCtaUrl ) { - imageBox = `CTA ad`; - } + // Image element component + const imageElement = hasImage ? ( + CTA Card + ) : ( +
+ { __( 'No Image', 'godam' ) } +
+ ); - return `${ imageBox } -
- ${ layer?.imageText ? `

${ layer.imageText }

` : '' } - ${ layer?.imageDescription ? `

${ layer.imageDescription }

` : '' } - - ${ layer?.imageCtaButtonText || __( 'Buy Now', 'godam' ) } + // Content element component + const contentElement = ( +
+ { layer?.imageText &&

{ layer.imageText }

} + { layer?.imageDescription &&

{ layer.imageDescription }

} + { ( layer?.imageCtaButtonText || layer?.imageLink ) && ( + `; +
+ ) } +
+ ); + + // Handle different layouts + if ( layout === 'desktop-text-only' ) { + return contentElement; + } + + if ( layout === 'card-layout--image-background' ) { + return ( + <> +
+ { contentElement } + + ); + } + + // All other layouts with image element + const imageContent =
{ imageElement }
; + const textMediaLayerouts = [ 'card-layout--text-imagecover', 'card-layout--text-image', 'card-layout--image-bottom' ]; + + // Return based on layout order + if ( textMediaLayerouts.includes( layout ) ) { + return ( + <> + { contentElement } + { imageContent } + + ); + } + + return ( + <> + { imageContent } + { contentElement } + + ); }; useEffect( () => { @@ -168,33 +219,26 @@ const CTALayer = ( { layerID, goBack, duration } ) => { } }, [ layer?.cta_type, layer?.image ] ); - // Update the HTML only after imageCtaUrl is updated - useEffect( () => { - if ( 'image' === layer?.cta_type ) { - setFormHTML( imageCtaHtml() ); - } - }, [ imageCtaUrl, layer ] ); - return ( <>
-

{ __( 'Call to Action', 'godam' ) }

+ { renderSelectedCTAInputs() } { /* Common settings */ } - + { ) } { layer?.cta_type === 'image' && (
-
-
-
+
+
+ { renderImageCTA() }
diff --git a/pages/video-editor/video-control.css b/pages/video-editor/video-control.css deleted file mode 100644 index 7c9d47f4f..000000000 --- a/pages/video-editor/video-control.css +++ /dev/null @@ -1,130 +0,0 @@ -.hover-control-input-container { - display: flex; - align-content: center; -} - -.toggle-color{ - height: 50px; -} - -.left-align { - left: 3em !important; -} - -.right-align { - left:auto !important; - right:1.5em; -} - -.top-align { - top: 1.5em !important; -} - -.bottom-align { - top:auto !important; - bottom:1.5em; -} - -.vjs-big-play-button { - background-size: 100% 100% !important; -} - -.vjs-control-bar-vertical { - width: 10% !important; - height: 100% !important; - flex-direction: column; - overflow: scroll; -} - -.vjs-control-vertical, .vjs-volume-control-vertical { - height: 6em !important; - width: 6em !important; -} - -.vjs-volume-panel-vertical { - flex-direction: column; -} - -.vjs-volume-vertical { - left: 0 !important; -} - -.components-custom-select-control__item-icon { - display: none; -} - -.image-overlay-text { - font-size: 15px; - background: #fff; - padding: 10px; - border-radius: 12px; -} - -.image-cta-container, .vertical-image-cta-container { - display: flex; - flex-direction: row; - gap: 30px; - max-width: 600px; - background-color: #fff; - align-items: center; - padding: 20px; - - h2 { - font-size: 32px; - font-weight: 700; - } - - p { - color: #8c8c8c; - } -} - -.image-cta-description { - flex-basis: 50%; - border-radius: 0 20px 20px 0; - display: flex; - flex-direction: column; - gap: 0; - align-content: center; - justify-content: center; - padding-left: 0; - - a { - text-decoration: none; - } -} - -.image-cta-btn { - padding: 10px 15px; - border-radius: 4px; - color: #fff; - background-color: #eeab95; - border: none; - font-size: 16px; - text-transform: uppercase; - width: fit-content; - text-align: center; -} - -.image-cta-btn:hover { - color: #fff; -} - -.vertical-image-cta-container { - flex-direction: column; - width: 250px; - border-radius: 36px; - padding-top: 20px; - - img { - border-radius: 25px; - } - - .image-cta-description { - text-align: center; - } - - .image-cta-btn { - margin: 0 auto; - } -} diff --git a/pages/video-editor/video-control.scss b/pages/video-editor/video-control.scss new file mode 100644 index 000000000..efacd5911 --- /dev/null +++ b/pages/video-editor/video-control.scss @@ -0,0 +1,89 @@ +// Video Control Styles - SCSS Version + +// ============================================ +// Variables +// ============================================ +$color-white: #fff; +$color-black: #000; +$color-gray: #666; +$color-gray-light: #f0f0f0; +$color-gray-lighter: #f2f2f2; + +$border-radius-sm: 0.25rem; +$border-radius-md: 12px; + +$spacing-xs: 0.5rem; +$spacing-sm: 0.75rem; +$spacing-md: 1rem; + +$font-size-sm: 0.875rem; +$font-size-base: 1rem; +$font-size-md: 1.125rem; +$font-size-lg: 1.25rem; + +// ============================================ +// Video.js Controls +// ============================================ +.hover-control-input-container { + display: flex; + align-content: center; +} + +.toggle-color { + height: 50px; +} + +.left-align { + left: 3em !important; +} + +.right-align { + left: auto !important; + right: 1.5em; +} + +.top-align { + top: 1.5em !important; +} + +.bottom-align { + top: auto !important; + bottom: 1.5em; +} + +.vjs-big-play-button { + background-size: 100% 100% !important; +} + +.vjs-control-bar-vertical { + width: 10% !important; + height: 100% !important; + flex-direction: column; + overflow: scroll; +} + +.vjs-control-vertical, +.vjs-volume-control-vertical { + height: 6em !important; + width: 6em !important; +} + +.vjs-volume-panel-vertical { + flex-direction: column; +} + +.vjs-volume-vertical { + left: 0 !important; +} + +.components-custom-select-control__item-icon { + display: none; +} + +.image-overlay-text { + font-size: 15px; + background: $color-white; + padding: 10px; + border-radius: $border-radius-md; +} + diff --git a/pages/video-editor/video-editor.scss b/pages/video-editor/video-editor.scss index 3bc88efc1..71c234d40 100644 --- a/pages/video-editor/video-editor.scss +++ b/pages/video-editor/video-editor.scss @@ -1,5 +1,10 @@ @use '../../assets/src/css/variables'; +// ============================================ +// Import CTA Card Styles (Shared Component) +// ============================================ +@use '../../assets/src/css/cta-card'; + .godam-video-editor { padding: 1rem;