@brilo/base-blocks 0.1.42 → 0.1.43

package/src/blocks/sections/base-section/types.ts

@@ -56,6 +56,13 @@ export interface BackgroundImage {
   overlay?: BackgroundImageOverlay
 }
 
+export interface Border {
+  top: {width: number; color: string; style: string}
+  bottom: {width: number; color: string; style: string}
+  left: {width: number; color: string; style: string}
+  right: {width: number; color: string; style: string}
+}
+
 export interface BaseBlockAttributes extends Record<string, unknown> {
   id: string
   spacing: {
@@ -72,9 +79,10 @@ export interface BaseBlockAttributes extends Record<string, unknown> {
     }
   }
   backgroundImage: BackgroundImage
+  border: Border
 }
 
-export type ExcludableBaseAttr = 'spacing' | 'background' | 'id' | 'decorations' | 'decoration' | 'backgroundImage'
+export type ExcludableBaseAttr = 'spacing' | 'background' | 'id' | 'decorations' | 'decoration' | 'backgroundImage' | 'border'
 
 export interface BaseSectionOptions<TExtra extends Record<string, unknown> = Record<string, never>> extends BriloBlockType {
   supports?: BlockConfiguration['supports']

package/src/blocks/share/share/index.ts

@@ -5,4 +5,5 @@ import type {ShareOptions} from './types'
 
 export const shareDefaults: ShareOptions = {
   name: 'brilo/share',
+  parent: ['brilo/base-section'],
 }

package/src/blocks/signpost/signpost-group/constants.ts

@@ -22,3 +22,26 @@ export const PADDING_MARKS = [
   {value: 1.5, label: '1.5'},
   {value: 2, label: '2'},
 ] as const
+
+export const DEFAULT_IMAGE_CLIP_PATHS = [
+  {value: 'none', label: __('Žádný', 'brilo-blocks')},
+  {value: 'circle', label: __('Kruh', 'brilo-blocks')},
+  {value: 'triangle', label: __('Trojúhelník', 'brilo-blocks')},
+  {value: 'rhombus', label: __('Kosočtverec', 'brilo-blocks')},
+  {value: 'octagon', label: __('Osmiúhelník', 'brilo-blocks')},
+  {value: 'bevel', label: __('Zkosený', 'brilo-blocks')},
+  {value: 'rabbet', label: __('Drážkovaný', 'brilo-blocks')},
+  {value: 'parallelogram', label: __('Rovnoběžník', 'brilo-blocks')},
+] as const
+
+// Frontend reads the shapes from the theme's --shape-* tokens; the editor has no
+// access to them, so the same geometry is inlined here for the preview CSS var.
+export const IMAGE_CLIP_PATH_VALUES: Record<string, string> = {
+  circle: 'circle(50% at 50% 50%)',
+  triangle: 'polygon(50% 0%, 0% 100%, 100% 100%)',
+  rhombus: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)',
+  octagon: 'polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%)',
+  bevel: 'polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%)',
+  rabbet: 'polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%)',
+  parallelogram: 'polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%)',
+}

package/src/blocks/signpost/signpost-group/edit.tsx

@@ -4,6 +4,7 @@ import {
   ColorPalette,
   PanelBody,
   RangeControl,
+  SelectControl,
   __experimentalToggleGroupControl as ToggleGroupControl,
   __experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components'
@@ -11,8 +12,17 @@ import {__} from '@wordpress/i18n'
 import clsx from 'clsx'
 import {useGroupBlock} from '~/hooks/useGroupBlock'
 import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
-import {COLUMNS, DEFAULT_SHADOWS, HEADING_LEVELS, PADDING_MARKS, RATIOS, TEXT_ALIGNS} from './constants'
-import type {SignpostGroupAttributes, SignpostGroupOptions, SignpostShadow, SignpostTextAlign} from './types'
+import {
+  COLUMNS,
+  DEFAULT_IMAGE_CLIP_PATHS,
+  DEFAULT_SHADOWS,
+  HEADING_LEVELS,
+  IMAGE_CLIP_PATH_VALUES,
+  PADDING_MARKS,
+  RATIOS,
+  TEXT_ALIGNS,
+} from './constants'
+import type {SignpostGroupAttributes, SignpostGroupOptions, SignpostImageClipPath, SignpostShadow, SignpostTextAlign} from './types'
 
 export function createSignpostGroupEdit(options: SignpostGroupOptions) {
   const exclude = options.exclude ?? []
@@ -24,13 +34,18 @@ export function createSignpostGroupEdit(options: SignpostGroupOptions) {
     attributes: SignpostGroupAttributes
     setAttributes: (a: Partial<SignpostGroupAttributes>) => void
   }) {
-    const {columns, headingLevel, ratio, style, padding} = attributes
+    const {columns, headingLevel, ratio, img, style, padding} = attributes
+    const clipPath = img?.clipPath ?? 'none'
     const {paletteColors} = useTenantColorPalette()
 
     const {blockProps, innerBlocksProps} = useGroupBlock({
       blockClassName: clsx(options.blockClassName ?? 'g-signpost wp-block-section'),
       containerClassName: [options.containerClassName ?? 'u-grid-responsive', `--cols-${columns}`, `--ratio-${ratio.replace(':', '-')}`],
-      containerStyle: {'--grid-max-col-count': columns},
+      containerStyle: {
+        '--grid-max-col-count': columns,
+        // Inherited by every signpost item inside the container.
+        ...(IMAGE_CLIP_PATH_VALUES[clipPath] && {'--signpost-image-clip-path': IMAGE_CLIP_PATH_VALUES[clipPath]}),
+      },
       allowedBlocks: options.allowedBlocks,
       orientation: 'horizontal',
       template: options.template,
@@ -61,6 +76,12 @@ export function createSignpostGroupEdit(options: SignpostGroupOptions) {
                 <ToggleGroupControlOption key={r} value={r} label={r} />
               ))}
             </ToggleGroupControl>
+            <SelectControl<string>
+              label={__('Tvar výřezu obrázku', 'brilo-blocks')}
+              value={clipPath}
+              options={[...DEFAULT_IMAGE_CLIP_PATHS]}
+              onChange={(v) => setAttributes({img: {...img, clipPath: v as SignpostImageClipPath}})}
+            />
             <ToggleGroupControl
               isBlock
               label={__('Úroveň nadpisu položek', 'brilo-blocks')}

package/src/blocks/signpost/signpost-group/factory.tsx

@@ -1,7 +1,7 @@
 import {InnerBlocks} from '@wordpress/block-editor'
 import type {BlockConfiguration} from '@wordpress/blocks'
 import {__} from '@wordpress/i18n'
-import {COLUMNS, DEFAULT_SHADOWS, HEADING_LEVELS, RATIOS, TEXT_ALIGNS} from './constants'
+import {COLUMNS, DEFAULT_IMAGE_CLIP_PATHS, DEFAULT_SHADOWS, HEADING_LEVELS, RATIOS, TEXT_ALIGNS} from './constants'
 import {createSignpostGroupEdit} from './edit'
 import {icon as defaultIcon} from './icon'
 import type {SignpostGroupAttributes, SignpostGroupOptions} from './types'
@@ -27,6 +27,10 @@ export function createSignpostGroupBlock(options: SignpostGroupOptions): BlockCo
       default: HEADING_LEVELS[0],
       enum: [...HEADING_LEVELS],
     },
+    img: {
+      type: 'object',
+      default: {clipPath: DEFAULT_IMAGE_CLIP_PATHS[0].value},
+    },
   }
 
   if (!exclude.includes('colors')) {

package/src/blocks/signpost/signpost-group/types.ts

@@ -1,8 +1,10 @@
 import type {BriloBlockType} from '~/types'
-import type {DEFAULT_SHADOWS, TEXT_ALIGNS} from './constants'
+import type {DEFAULT_IMAGE_CLIP_PATHS, DEFAULT_SHADOWS, TEXT_ALIGNS} from './constants'
 
 export type SignpostShadow = (typeof DEFAULT_SHADOWS)[number]['value']
 
+export type SignpostImageClipPath = (typeof DEFAULT_IMAGE_CLIP_PATHS)[number]['value']
+
 export type SignpostTextAlign = (typeof TEXT_ALIGNS)[number]['value']
 
 export type ExcludableSignpostAttr = 'colors' | 'padding'
@@ -11,6 +13,7 @@ export interface SignpostGroupAttributes extends Record<string, unknown> {
   columns: number
   headingLevel: number
   ratio: string
+  img: {clipPath: SignpostImageClipPath}
   style: {
     shadow: SignpostShadow
     borderColor: string

package/src/blocks/signpost/signpost-item/editor.scss

@@ -21,5 +21,10 @@
     .c-image-picker-control__row {
       flex-direction: column;
     }
+
+    // Set by the parent signpost group on the inner blocks container.
+    .c-image-picker-control__thumb {
+      clip-path: var(--signpost-image-clip-path, none);
+    }
   }
 }

package/src/blocks/step/step-group/edit.tsx

@@ -8,7 +8,7 @@ import {
 import {__} from '@wordpress/i18n'
 import clsx from 'clsx'
 import {useGroupBlock} from '~/hooks/useGroupBlock'
-import {OptionArray} from '~/types'
+import type {OptionArray} from '~/types'
 import type {StepGroupAttributes, StepGroupOptions, StepVariant} from './types'
 import {DEFAULT_VARIANTS} from './constants'
 

package/src/blocks/step/step-group/factory.tsx

@@ -5,7 +5,7 @@ import {DEFAULT_VARIANTS} from './constants'
 import {createStepGroupEdit} from './edit'
 import type {StepGroupAttributes, StepGroupOptions} from './types'
 import {icon} from '~/blocks/step/step-group/icon'
-import {OptionArray} from '~/types'
+import type {OptionArray} from '~/types'
 
 export function createStepGroupBlock<TVariants extends OptionArray = typeof DEFAULT_VARIANTS>(
   options: StepGroupOptions<TVariants>,

package/src/blocks/step/step-group/types.ts

@@ -1,5 +1,5 @@
-import {BriloBlockType, OptionArray} from '~/types'
-import {DEFAULT_VARIANTS} from './constants'
+import type {BriloBlockType, OptionArray} from '~/types'
+import type {DEFAULT_VARIANTS} from './constants'
 
 export type StepVariant = (typeof DEFAULT_VARIANTS)[number]['value']
 

package/src/blocks/step/step-item/types.ts

@@ -1,4 +1,4 @@
-import {BriloBlockType, Icon} from '~/types'
+import type {BriloBlockType, Icon} from '~/types'
 import type {IconType} from '~/components/IconControl'
 
 export interface StepItemAttributes extends Record<string, unknown> {

package/src/blocks/testimonial/testimonial-group/index.ts

@@ -1,7 +1,7 @@
 export type {TestimonialGroupAttributes} from './types'
 export {createTestimonialGroupBlock} from './factory'
 
-import {TestimonialGroupOptions} from './types'
+import type {TestimonialGroupOptions} from './types'
 
 export const testimonialGroupDefaults: TestimonialGroupOptions = {
   name: 'brilo/testimonial-group',

package/src/blocks/testimonial/testimonial-group/types.ts

@@ -1,5 +1,5 @@
 import type {BriloBlockType, OptionArray} from '~/types'
-import {VARIANTS, SIZES} from './constants'
+import type {VARIANTS, SIZES} from './constants'
 
 export type Variant = (typeof VARIANTS)[number]['value']
 export type Size = (typeof SIZES)[number]['value']

package/src/blocks/text-and-form/text-and-form-text-column/edit.tsx

@@ -3,11 +3,14 @@ import {
   PanelBody,
   __experimentalToggleGroupControl as ToggleGroupControl,
   __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+  BaseControl,
+  ColorPalette,
 } from '@wordpress/components'
 import {__} from '@wordpress/i18n'
 import {useGroupBlock} from '~/hooks/useGroupBlock'
 import {DEFAULT_CONTENT_SIZES, DEFAULT_HEADING_STYLES, HEADING_LEVELS} from './constants'
 import type {ContentSizes, HeadingLevels, HeadingStyles, TextAndFormTextColumnAttributes, TextAndFormTextColumnOptions} from './types'
+import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
 
 export function createTextAndFormTextColumnEdit(options: TextAndFormTextColumnOptions) {
   const HEADING_STYLES = options.headingStyles ?? DEFAULT_HEADING_STYLES
@@ -30,9 +33,28 @@ export function createTextAndFormTextColumnEdit(options: TextAndFormTextColumnOp
       layout: {type: 'default'},
     })
 
+    const {paletteColors} = useTenantColorPalette()
+
     return (
       <>
         <InspectorControls>
+          <PanelBody title={__('Overline', 'brilo-blocks')}>
+            <BaseControl label={__('Barva pozadí', 'brilo-blocks')}>
+              <ColorPalette
+                colors={paletteColors}
+                value={header.overline.background || undefined}
+                onChange={(value) => setAttributes({header: {...header, overline: {...header.overline, background: value ?? ''}}})}
+              />
+            </BaseControl>
+            <BaseControl label={__('Barva textu', 'brilo-blocks')}>
+              <ColorPalette
+                colors={paletteColors}
+                value={header.overline.color || undefined}
+                onChange={(value) => setAttributes({header: {...header, overline: {...header.overline, color: value ?? ''}}})}
+              />
+            </BaseControl>
+          </PanelBody>
+
           <PanelBody title={__('Nadpis', 'brilo-blocks')} initialOpen={false}>
             <ToggleGroupControl
               label={__('Úroveň nadpisu', 'brilo-blocks')}
@@ -57,6 +79,7 @@ export function createTextAndFormTextColumnEdit(options: TextAndFormTextColumnOp
               ))}
             </ToggleGroupControl>
           </PanelBody>
+
           <PanelBody title={__('Rozložení', 'brilo-blocks')}>
             <ToggleGroupControl
               label={__('Velikost textu', 'brilo-blocks')}
@@ -74,6 +97,14 @@ export function createTextAndFormTextColumnEdit(options: TextAndFormTextColumnOp
           <RichText
             tagName="span"
             className="g-text-and-form__overline u-text-editable"
+            style={
+              header.overline.color || header.overline.background
+                ? {
+                    ...(header.overline.color ? {color: header.overline.color} : {}),
+                    ...(header.overline.background ? {backgroundColor: header.overline.background} : {}),
+                  }
+                : undefined
+            }
             value={header.overline.title}
             onChange={(value: string) => setAttributes({header: {...header, overline: {title: value}}})}
             placeholder={__('Overline...', 'brilo-blocks')}

package/src/blocks/text-and-form/text-and-form-text-column/editor.scss

@@ -8,12 +8,16 @@
   }
 
   .g-text-and-form__overline {
-    display: block;
-    font-size: 12px;
+    display: inline-flex;
+    font-size: 11px;
     font-weight: 600;
     text-transform: uppercase;
-    letter-spacing: 1px;
-    color: #888;
+    letter-spacing: 1.5px;
+    color: #555;
+    background-color: #f0f0f0;
+    border-radius: 100px;
+    padding: 3px 10px;
+    margin-bottom: 8px;
   }
 
   .g-text-and-form__heading {

package/src/blocks/text-and-form/text-and-form-text-column/factory.tsx

@@ -30,7 +30,7 @@ export function createTextAndFormTextColumnBlock<
         type: 'object',
         default: {
           heading: {title: '', level: HEADING_LEVELS[1], style: headingStyles[1]?.value ?? headingStyles[0].value},
-          overline: {title: ''},
+          overline: {type: 'object', default: {title: '', color: '', background: ''}},
         },
       },
       content: {type: 'object', default: {size: contentSizes[1]?.value ?? contentSizes[0].value}},

package/src/blocks/text-and-form/text-and-form-text-column/types.ts

@@ -9,7 +9,7 @@ export interface TextAndFormTextColumnAttributes<THeadingStyle extends string =
   extends Record<string, unknown> {
   header: {
     heading: {title: string; level: HeadingLevels; style: THeadingStyle}
-    overline: {title: string}
+    overline: {title: string; color?: string; background?: string}
   }
   content: {size: TContentSize}
 }

package/src/blocks/usp/usp-item/types.ts

@@ -1,4 +1,4 @@
-import {BriloBlockType, Icon} from '~/types'
+import type {BriloBlockType, Icon} from '~/types'
 import type {IconType} from '~/components/IconControl'
 import type {ICON_TYPES} from './constants'
 

package/src/blocks/video/video-group/constants.ts

@@ -0,0 +1,11 @@
+import {__} from '@wordpress/i18n'
+
+export const VIDEO_TYPES = [
+  {value: 'youtube', label: __('YouTube', 'brilo-blocks')},
+  {value: 'media', label: __('WP médium', 'brilo-blocks')},
+] as const
+
+export const SIZES = [
+  {value: 'md', label: __('Střední', 'brilo-blocks')},
+  {value: 'lg', label: __('Velký', 'brilo-blocks')},
+] as const

package/src/blocks/video/video-group/edit.tsx

@@ -0,0 +1,158 @@
+import {InspectorControls, MediaUpload, MediaUploadCheck, RichText, useBlockProps} from '@wordpress/block-editor'
+import type {BlockEditProps} from '@wordpress/blocks'
+import {
+  Button,
+  PanelBody,
+  TextControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {SIZES, VIDEO_TYPES} from './constants'
+import type {VideoGroupAttributes, VideoGroupOptions, VideoSize, VideoType} from './types'
+
+function extractYoutubeId(url: string): string | null {
+  const match = url.match(/(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/)
+  return match ? match[1] : null
+}
+
+export function createVideoGroupEdit(_options: VideoGroupOptions) {
+  return function VideoGroupEdit({attributes, setAttributes}: BlockEditProps<VideoGroupAttributes>) {
+    const {type, url, mediaId, caption, size, poster} = attributes
+
+    const youtubeId = type === 'youtube' ? extractYoutubeId(url) : null
+    const youtubeThumbnail = youtubeId ? `https://img.youtube.com/vi/${youtubeId}/maxresdefault.jpg` : null
+
+    const blockProps = useBlockProps({
+      className: clsx('g-video wp-block-section', `--size-${size}`, `--type-${type}`),
+    })
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Typ videa', 'brilo-blocks')}>
+            <ToggleGroupControl
+              label={__('Zdroj', 'brilo-blocks')}
+              value={type}
+              onChange={(value) => setAttributes({type: value as VideoType, url: '', mediaId: 0})}
+              isBlock
+            >
+              {VIDEO_TYPES.map((t) => (
+                <ToggleGroupControlOption key={t.value} value={t.value} label={t.label} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+
+          {type === 'youtube' && (
+            <PanelBody title={__('YouTube', 'brilo-blocks')}>
+              <TextControl
+                label={__('URL videa', 'brilo-blocks')}
+                value={url}
+                onChange={(value) => setAttributes({url: value})}
+                placeholder="https://www.youtube.com/watch?v=..."
+                help={youtubeId ? __('✓ Platné YouTube video', 'brilo-blocks') : url ? __('⚠ Neplatná YouTube URL', 'brilo-blocks') : ''}
+              />
+            </PanelBody>
+          )}
+
+          <PanelBody title={__('Náhledový obrázek', 'brilo-blocks')} initialOpen={false}>
+            <MediaUploadCheck>
+              <MediaUpload
+                onSelect={(media: {url: string; id: number}) => setAttributes({poster: {src: media.url, id: media.id}})}
+                allowedTypes={['image']}
+                value={poster?.id}
+                render={({open}: {open: () => void}) => (
+                  <div className="g-video__poster-control">
+                    {poster?.src ? (
+                      <>
+                        <img src={poster.src} alt="" className="g-video__poster-preview" />
+                        <Button onClick={open} variant="secondary" size="small">
+                          {__('Změnit obrázek', 'brilo-blocks')}
+                        </Button>
+                        <Button onClick={() => setAttributes({poster: {src: '', id: 0}})} variant="tertiary" size="small" isDestructive>
+                          {__('Odebrat', 'brilo-blocks')}
+                        </Button>
+                      </>
+                    ) : (
+                      <Button onClick={open} variant="secondary">
+                        {__('Vybrat náhledový obrázek', 'brilo-blocks')}
+                      </Button>
+                    )}
+                  </div>
+                )}
+              />
+            </MediaUploadCheck>
+          </PanelBody>
+
+          <PanelBody title={__('Rozložení', 'brilo-blocks')} initialOpen={false}>
+            <ToggleGroupControl
+              label={__('Velikost', 'brilo-blocks')}
+              value={size}
+              onChange={(value) => setAttributes({size: value as VideoSize})}
+              isBlock
+            >
+              {SIZES.map((s) => (
+                <ToggleGroupControlOption key={s.value} value={s.value} label={s.label} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          <div className="g-video__media">
+            {type === 'youtube' ? (
+              youtubeThumbnail ? (
+                <div className="g-video__youtube-preview">
+                  <img src={youtubeThumbnail} alt="" />
+                  <div className="g-video__play-icon" />
+                </div>
+              ) : (
+                <div className={clsx('g-video__empty', url && '--invalid')}>
+                  <span className="g-video__empty-label">
+                    {url
+                      ? __('⚠ Neplatná YouTube URL — zkontroluj odkaz', 'brilo-blocks')
+                      : __('Zadej YouTube URL v postranním panelu →', 'brilo-blocks')}
+                  </span>
+                </div>
+              )
+            ) : (
+              <MediaUploadCheck>
+                <MediaUpload
+                  onSelect={(media: {url: string; id: number}) => setAttributes({url: media.url, mediaId: media.id})}
+                  allowedTypes={['video']}
+                  value={mediaId}
+                  render={({open}: {open: () => void}) =>
+                    mediaId ? (
+                      <div className="g-video__media-inner">
+                        <video src={url} poster={poster?.src || undefined}>
+                          <track kind="captions" />
+                        </video>
+                        <Button onClick={open} variant="primary" className="g-video__change-btn">
+                          {__('Změnit video', 'brilo-blocks')}
+                        </Button>
+                      </div>
+                    ) : (
+                      <button type="button" className="g-video__empty" onClick={open}>
+                        <span className="g-video__empty-label">{__('Klikni pro výběr videa z médií', 'brilo-blocks')}</span>
+                      </button>
+                    )
+                  }
+                />
+              </MediaUploadCheck>
+            )}
+          </div>
+
+          <RichText
+            tagName="p"
+            className="g-video__caption u-text-editable"
+            value={caption}
+            onChange={(value) => setAttributes({caption: value})}
+            placeholder={__('Popisek videa...', 'brilo-blocks')}
+            allowedFormats={['core/bold', 'core/italic', 'brilo-blocks/text-color']}
+          />
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/video/video-group/editor.scss

@@ -0,0 +1,105 @@
+.g-video {
+  padding: 8px;
+
+  &.--size-md {
+    max-width: 720px;
+    margin-inline: auto;
+  }
+}
+
+.g-video__media {
+  position: relative;
+  background: #f0f0f0;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.g-video__youtube-preview {
+  position: relative;
+
+  img {
+    width: 100%;
+    display: block;
+  }
+}
+
+.g-video__play-icon {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.2);
+  pointer-events: none;
+
+  &::after {
+    content: "";
+    width: 64px;
+    height: 64px;
+    background: rgba(200, 0, 0, 0.9);
+    border-radius: 12px;
+    clip-path: polygon(30% 20%, 80% 50%, 30% 80%);
+  }
+}
+
+.g-video__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 240px;
+  border: 2px dashed #bbb;
+  border-radius: 4px;
+  cursor: pointer;
+  background: none;
+  width: 100%;
+  padding: 0;
+  font: inherit;
+
+  &.--invalid {
+    border-color: #d63638;
+    background: #fff5f5;
+  }
+}
+
+.g-video__empty-label {
+  color: #888;
+  font-size: 14px;
+
+  .--invalid & {
+    color: #d63638;
+  }
+}
+
+.g-video__media-inner {
+  position: relative;
+
+  video {
+    width: 100%;
+    display: block;
+  }
+}
+
+.g-video__change-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+}
+
+.g-video__caption {
+  margin-top: 8px;
+  color: #555;
+  font-size: 14px;
+  min-height: 1.4em;
+}
+
+.g-video__poster-control {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.g-video__poster-preview {
+  width: 100%;
+  border-radius: 4px;
+  display: block;
+}