diff --git a/packages/html/src/define/audio/minimal-skin.tailwind.ts b/packages/html/src/define/audio/minimal-skin.tailwind.ts index dec1ea14..53c7af22 100644 --- a/packages/html/src/define/audio/minimal-skin.tailwind.ts +++ b/packages/html/src/define/audio/minimal-skin.tailwind.ts @@ -46,7 +46,7 @@ function getTemplateHTML() { ${renderIcon('play', { class: cn(icon, iconState.play.play) })} ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })} - + Replay Play Pause @@ -59,7 +59,7 @@ function getTemplateHTML() { ${SEEK_TIME} - + Seek backward ${SEEK_TIME} seconds @@ -69,7 +69,7 @@ function getTemplateHTML() { ${SEEK_TIME} - + Seek forward ${SEEK_TIME} seconds @@ -93,7 +93,7 @@ function getTemplateHTML() { - + Toggle playback rate @@ -103,7 +103,7 @@ function getTemplateHTML() { ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })} - + diff --git a/packages/html/src/define/audio/minimal-skin.ts b/packages/html/src/define/audio/minimal-skin.ts index 0e13fc63..7b1abcfb 100644 --- a/packages/html/src/define/audio/minimal-skin.ts +++ b/packages/html/src/define/audio/minimal-skin.ts @@ -29,7 +29,7 @@ function getTemplateHTML() { ${renderIcon('play', { class: 'media-icon media-icon--play' })} ${renderIcon('pause', { class: 'media-icon media-icon--pause' })} - + Replay Play Pause @@ -41,7 +41,7 @@ function getTemplateHTML() { ${SEEK_TIME} - + Seek backward ${SEEK_TIME} seconds @@ -51,7 +51,7 @@ function getTemplateHTML() { ${SEEK_TIME} - + Seek forward ${SEEK_TIME} seconds @@ -75,7 +75,7 @@ function getTemplateHTML() { - + Toggle playback rate @@ -85,7 +85,7 @@ function getTemplateHTML() { ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })} - + diff --git a/packages/html/src/define/audio/skin.tailwind.ts b/packages/html/src/define/audio/skin.tailwind.ts index 16244124..2538a7a0 100644 --- a/packages/html/src/define/audio/skin.tailwind.ts +++ b/packages/html/src/define/audio/skin.tailwind.ts @@ -44,7 +44,7 @@ function getTemplateHTML() { ${renderIcon('play', { class: cn(icon, iconState.play.play) })} ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })} - + Replay Play Pause @@ -57,7 +57,7 @@ function getTemplateHTML() { ${SEEK_TIME} - + Seek backward ${SEEK_TIME} seconds @@ -67,7 +67,7 @@ function getTemplateHTML() { ${SEEK_TIME} - + Seek forward ${SEEK_TIME} seconds @@ -84,7 +84,7 @@ function getTemplateHTML() { - + Toggle playback rate @@ -94,7 +94,7 @@ function getTemplateHTML() { ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })} - + diff --git a/packages/html/src/define/audio/skin.ts b/packages/html/src/define/audio/skin.ts index 19310086..7688bbce 100644 --- a/packages/html/src/define/audio/skin.ts +++ b/packages/html/src/define/audio/skin.ts @@ -28,7 +28,7 @@ function getTemplateHTML() { ${renderIcon('play', { class: 'media-icon media-icon--play' })} ${renderIcon('pause', { class: 'media-icon media-icon--pause' })} - + Replay Play Pause @@ -40,7 +40,7 @@ function getTemplateHTML() { ${SEEK_TIME} - + Seek backward ${SEEK_TIME} seconds @@ -50,7 +50,7 @@ function getTemplateHTML() { ${SEEK_TIME} - + Seek forward ${SEEK_TIME} seconds @@ -67,7 +67,7 @@ function getTemplateHTML() { - + Toggle playback rate @@ -77,7 +77,7 @@ function getTemplateHTML() { ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })} - + diff --git a/packages/html/src/define/video/minimal-skin.tailwind.ts b/packages/html/src/define/video/minimal-skin.tailwind.ts index 84e95f31..77f53ae0 100644 --- a/packages/html/src/define/video/minimal-skin.tailwind.ts +++ b/packages/html/src/define/video/minimal-skin.tailwind.ts @@ -70,7 +70,7 @@ function getTemplateHTML() { ${renderIcon('play', { class: cn(icon, iconState.play.play) })} ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })} - + Replay Play Pause @@ -83,7 +83,7 @@ function getTemplateHTML() { ${SEEK_TIME} - + Seek backward ${SEEK_TIME} seconds @@ -93,7 +93,7 @@ function getTemplateHTML() { ${SEEK_TIME} - + Seek forward ${SEEK_TIME} seconds @@ -117,7 +117,7 @@ function getTemplateHTML() { - + Toggle playback rate @@ -127,7 +127,7 @@ function getTemplateHTML() { ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })} - + @@ -141,7 +141,7 @@ function getTemplateHTML() { ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })} ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })} - + Enable captions Disable captions @@ -151,7 +151,7 @@ function getTemplateHTML() { ${renderIcon('pip', { class: icon })} - + Enter picture-in-picture Exit picture-in-picture @@ -162,7 +162,7 @@ function getTemplateHTML() { ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })} ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })} - + Enter fullscreen Exit fullscreen diff --git a/packages/html/src/define/video/minimal-skin.ts b/packages/html/src/define/video/minimal-skin.ts index c7bc1bee..e60608a4 100644 --- a/packages/html/src/define/video/minimal-skin.ts +++ b/packages/html/src/define/video/minimal-skin.ts @@ -49,7 +49,7 @@ function getTemplateHTML() { ${renderIcon('play', { class: 'media-icon media-icon--play' })} ${renderIcon('pause', { class: 'media-icon media-icon--pause' })} - + Replay Play Pause @@ -61,7 +61,7 @@ function getTemplateHTML() { ${SEEK_TIME} - + Seek backward ${SEEK_TIME} seconds @@ -71,7 +71,7 @@ function getTemplateHTML() { ${SEEK_TIME} - + Seek forward ${SEEK_TIME} seconds @@ -94,7 +94,7 @@ function getTemplateHTML() { - + Toggle playback rate @@ -104,7 +104,7 @@ function getTemplateHTML() { ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })} - + @@ -117,14 +117,14 @@ function getTemplateHTML() { ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })} ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })} - + Toggle captions ${renderIcon('pip', { class: 'media-icon' })} - + Enter picture-in-picture Exit picture-in-picture @@ -133,7 +133,7 @@ function getTemplateHTML() { ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })} ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })} - + Enter fullscreen Exit fullscreen diff --git a/packages/html/src/define/video/skin.tailwind.ts b/packages/html/src/define/video/skin.tailwind.ts index 4837bd93..b3ff30e0 100644 --- a/packages/html/src/define/video/skin.tailwind.ts +++ b/packages/html/src/define/video/skin.tailwind.ts @@ -70,7 +70,7 @@ function getTemplateHTML() { ${renderIcon('play', { class: cn(icon, iconState.play.play) })} ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })} - + Replay Play Pause @@ -83,7 +83,7 @@ function getTemplateHTML() { ${SEEK_TIME} - + Seek backward ${SEEK_TIME} seconds @@ -93,7 +93,7 @@ function getTemplateHTML() { ${SEEK_TIME} - + Seek forward ${SEEK_TIME} seconds @@ -110,7 +110,7 @@ function getTemplateHTML() { - + Toggle playback rate @@ -120,7 +120,7 @@ function getTemplateHTML() { ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })} - + @@ -134,7 +134,7 @@ function getTemplateHTML() { ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })} ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })} - + Enable captions Disable captions @@ -144,7 +144,7 @@ function getTemplateHTML() { ${renderIcon('pip', { class: icon })} - + Enter picture-in-picture Exit picture-in-picture @@ -155,7 +155,7 @@ function getTemplateHTML() { ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })} ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })} - + Enter fullscreen Exit fullscreen diff --git a/packages/html/src/define/video/skin.ts b/packages/html/src/define/video/skin.ts index 30612022..21780e20 100644 --- a/packages/html/src/define/video/skin.ts +++ b/packages/html/src/define/video/skin.ts @@ -51,7 +51,7 @@ function getTemplateHTML() { ${renderIcon('play', { class: 'media-icon media-icon--play' })} ${renderIcon('pause', { class: 'media-icon media-icon--pause' })} - + Replay Play Pause @@ -63,7 +63,7 @@ function getTemplateHTML() { ${SEEK_TIME} - + Seek backward ${SEEK_TIME} seconds @@ -73,7 +73,7 @@ function getTemplateHTML() { ${SEEK_TIME} - + Seek forward ${SEEK_TIME} seconds @@ -90,7 +90,7 @@ function getTemplateHTML() { - + Toggle playback rate @@ -100,7 +100,7 @@ function getTemplateHTML() { ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })} - + @@ -113,7 +113,7 @@ function getTemplateHTML() { ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })} ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })} - + Enable captions Disable captions @@ -121,7 +121,7 @@ function getTemplateHTML() { ${renderIcon('pip', { class: 'media-icon' })} - + Enter picture-in-picture Exit picture-in-picture @@ -130,7 +130,7 @@ function getTemplateHTML() { ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })} ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })} - + Enter fullscreen Exit fullscreen diff --git a/packages/react/src/presets/audio/minimal-skin.tailwind.tsx b/packages/react/src/presets/audio/minimal-skin.tailwind.tsx index c6552d63..20547621 100644 --- a/packages/react/src/presets/audio/minimal-skin.tailwind.tsx +++ b/packages/react/src/presets/audio/minimal-skin.tailwind.tsx @@ -123,7 +123,7 @@ export function MinimalAudioSkinTailwind(props: MinimalAudioSkinProps): ReactNod /> } /> - + @@ -144,7 +144,7 @@ export function MinimalAudioSkinTailwind(props: MinimalAudioSkinProps): ReactNod /> } /> - Seek backward {SEEK_TIME} seconds + Seek backward {SEEK_TIME} seconds @@ -163,7 +163,7 @@ export function MinimalAudioSkinTailwind(props: MinimalAudioSkinProps): ReactNod /> } /> - Seek forward {SEEK_TIME} seconds + Seek forward {SEEK_TIME} seconds @@ -192,7 +192,7 @@ export function MinimalAudioSkinTailwind(props: MinimalAudioSkinProps): ReactNod /> } /> - Toggle playback rate + Toggle playback rate @@ -209,7 +209,7 @@ export function MinimalAudioSkinTailwind(props: MinimalAudioSkinProps): ReactNod /> } /> - + } /> - + @@ -80,9 +80,7 @@ export function MinimalAudioSkin(props: MinimalAudioSkinProps): ReactNode { /> } /> - - Seek backward {SEEK_TIME} seconds - + Seek backward {SEEK_TIME} seconds @@ -101,7 +99,7 @@ export function MinimalAudioSkin(props: MinimalAudioSkinProps): ReactNode { /> } /> - Seek forward {SEEK_TIME} seconds + Seek forward {SEEK_TIME} seconds @@ -130,7 +128,7 @@ export function MinimalAudioSkin(props: MinimalAudioSkinProps): ReactNode { /> } /> - Toggle playback rate + Toggle playback rate @@ -147,7 +145,7 @@ export function MinimalAudioSkin(props: MinimalAudioSkinProps): ReactNode { /> } /> - + diff --git a/packages/react/src/presets/audio/skin.tailwind.tsx b/packages/react/src/presets/audio/skin.tailwind.tsx index afc100ea..e4f3a3d6 100644 --- a/packages/react/src/presets/audio/skin.tailwind.tsx +++ b/packages/react/src/presets/audio/skin.tailwind.tsx @@ -121,7 +121,7 @@ export function AudioSkinTailwind(props: AudioSkinProps): ReactNode { /> } /> - + @@ -142,7 +142,7 @@ export function AudioSkinTailwind(props: AudioSkinProps): ReactNode { /> } /> - Seek backward {SEEK_TIME} seconds + Seek backward {SEEK_TIME} seconds @@ -161,7 +161,7 @@ export function AudioSkinTailwind(props: AudioSkinProps): ReactNode { /> } /> - Seek forward {SEEK_TIME} seconds + Seek forward {SEEK_TIME} seconds @@ -184,7 +184,7 @@ export function AudioSkinTailwind(props: AudioSkinProps): ReactNode { /> } /> - Toggle playback rate + Toggle playback rate @@ -201,7 +201,7 @@ export function AudioSkinTailwind(props: AudioSkinProps): ReactNode { /> } /> - + } /> - + @@ -79,9 +79,7 @@ export function AudioSkin(props: AudioSkinProps): ReactNode { /> } /> - - Seek backward {SEEK_TIME} seconds - + Seek backward {SEEK_TIME} seconds @@ -100,9 +98,7 @@ export function AudioSkin(props: AudioSkinProps): ReactNode { /> } /> - - Seek forward {SEEK_TIME} seconds - + Seek forward {SEEK_TIME} seconds @@ -125,7 +121,7 @@ export function AudioSkin(props: AudioSkinProps): ReactNode { /> } /> - Toggle playback rate + Toggle playback rate @@ -142,7 +138,7 @@ export function AudioSkin(props: AudioSkinProps): ReactNode { /> } /> - + diff --git a/packages/react/src/presets/video/minimal-skin.tailwind.tsx b/packages/react/src/presets/video/minimal-skin.tailwind.tsx index 2f7bb395..8104d7f8 100644 --- a/packages/react/src/presets/video/minimal-skin.tailwind.tsx +++ b/packages/react/src/presets/video/minimal-skin.tailwind.tsx @@ -175,7 +175,7 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod /> } /> - + @@ -196,7 +196,7 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod /> } /> - Seek backward {SEEK_TIME} seconds + Seek backward {SEEK_TIME} seconds @@ -215,7 +215,7 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod /> } /> - Seek forward {SEEK_TIME} seconds + Seek forward {SEEK_TIME} seconds @@ -244,7 +244,7 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod /> } /> - Toggle playback rate + Toggle playback rate @@ -261,7 +261,7 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod /> } /> - + } /> - + @@ -305,7 +305,7 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod /> } /> - + @@ -323,7 +323,7 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod /> } /> - + diff --git a/packages/react/src/presets/video/minimal-skin.tsx b/packages/react/src/presets/video/minimal-skin.tsx index 7d01964d..a1661986 100644 --- a/packages/react/src/presets/video/minimal-skin.tsx +++ b/packages/react/src/presets/video/minimal-skin.tsx @@ -106,7 +106,7 @@ export function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode { /> } /> - + @@ -127,9 +127,7 @@ export function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode { /> } /> - - Seek backward {SEEK_TIME} seconds - + Seek backward {SEEK_TIME} seconds @@ -148,7 +146,7 @@ export function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode { /> } /> - Seek forward {SEEK_TIME} seconds + Seek forward {SEEK_TIME} seconds @@ -177,7 +175,7 @@ export function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode { /> } /> - Toggle playback rate + Toggle playback rate @@ -194,7 +192,7 @@ export function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode { /> } /> - + @@ -217,7 +215,7 @@ export function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode { /> } /> - + @@ -234,7 +232,7 @@ export function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode { /> } /> - + @@ -252,7 +250,7 @@ export function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode { /> } /> - + diff --git a/packages/react/src/presets/video/skin.tailwind.tsx b/packages/react/src/presets/video/skin.tailwind.tsx index 00851950..638836a9 100644 --- a/packages/react/src/presets/video/skin.tailwind.tsx +++ b/packages/react/src/presets/video/skin.tailwind.tsx @@ -176,7 +176,7 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode { /> } /> - + @@ -197,7 +197,7 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode { /> } /> - Seek backward {SEEK_TIME} seconds + Seek backward {SEEK_TIME} seconds @@ -216,7 +216,7 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode { /> } /> - Seek forward {SEEK_TIME} seconds + Seek forward {SEEK_TIME} seconds @@ -239,7 +239,7 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode { /> } /> - Toggle playback rate + Toggle playback rate @@ -256,7 +256,7 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode { /> } /> - + } /> - + @@ -300,7 +300,7 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode { /> } /> - + @@ -318,7 +318,7 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode { /> } /> - + diff --git a/packages/react/src/presets/video/skin.tsx b/packages/react/src/presets/video/skin.tsx index f0b2331f..5e3fcd5e 100644 --- a/packages/react/src/presets/video/skin.tsx +++ b/packages/react/src/presets/video/skin.tsx @@ -107,7 +107,7 @@ export function VideoSkin(props: VideoSkinProps): ReactNode { /> } /> - + @@ -128,9 +128,7 @@ export function VideoSkin(props: VideoSkinProps): ReactNode { /> } /> - - Seek backward {SEEK_TIME} seconds - + Seek backward {SEEK_TIME} seconds @@ -149,9 +147,7 @@ export function VideoSkin(props: VideoSkinProps): ReactNode { /> } /> - - Seek forward {SEEK_TIME} seconds - + Seek forward {SEEK_TIME} seconds @@ -174,7 +170,7 @@ export function VideoSkin(props: VideoSkinProps): ReactNode { /> } /> - Toggle playback rate + Toggle playback rate @@ -191,7 +187,7 @@ export function VideoSkin(props: VideoSkinProps): ReactNode { /> } /> - + @@ -214,7 +210,7 @@ export function VideoSkin(props: VideoSkinProps): ReactNode { /> } /> - + @@ -231,7 +227,7 @@ export function VideoSkin(props: VideoSkinProps): ReactNode { /> } /> - + @@ -249,7 +245,7 @@ export function VideoSkin(props: VideoSkinProps): ReactNode { /> } /> - + diff --git a/packages/skins/src/default/css/audio.css b/packages/skins/src/default/css/audio.css index a8c2ef06..56264b9c 100644 --- a/packages/skins/src/default/css/audio.css +++ b/packages/skins/src/default/css/audio.css @@ -1,5 +1,5 @@ -@import "../../shared/audio-icon-state.css"; -@import "../../shared/tooltip-state.css"; +@import "../../shared/audio/icon-state.css"; +@import "../../shared/audio/tooltip-state.css"; @import "./components/reset.css"; @import "./components/root.css"; @import "./components/surface.css"; diff --git a/packages/skins/src/default/css/components/popup.css b/packages/skins/src/default/css/components/popup.css index 7409d1c9..ab28d3a3 100644 --- a/packages/skins/src/default/css/components/popup.css +++ b/packages/skins/src/default/css/components/popup.css @@ -2,7 +2,8 @@ Popups & Tooltips ========================================================================== */ -.media-default-skin .media-popup { +.media-default-skin .media-popover, +.media-default-skin .media-tooltip { margin: 0; border: 0; color: inherit; @@ -35,19 +36,18 @@ } } -.media-default-skin .media-popup--popover { +.media-default-skin .media-popover { --media-popover-side-offset: 0.5rem; } +.media-default-skin .media-popover--volume { + padding: 0.625rem 0.25rem; + border-radius: calc(infinity * 1px); +} -.media-default-skin .media-popup--tooltip { +.media-default-skin .media-tooltip { padding: 0.25rem 0.625rem; border-radius: calc(infinity * 1px); font-size: 0.75rem; white-space: nowrap; --media-tooltip-side-offset: 0.5rem; } - -.media-default-skin .media-popup--volume { - padding: 0.625rem 0.25rem; - border-radius: calc(infinity * 1px); -} diff --git a/packages/skins/src/default/css/video.css b/packages/skins/src/default/css/video.css index b86fd9f9..e161a7fc 100644 --- a/packages/skins/src/default/css/video.css +++ b/packages/skins/src/default/css/video.css @@ -1,5 +1,5 @@ -@import "../../shared/video-icon-state.css"; -@import "../../shared/tooltip-state.css"; +@import "../../shared/video/icon-state.css"; +@import "../../shared/video/tooltip-state.css"; @import "./components/reset.css"; @import "./components/root.css"; @import "./components/surface.css"; diff --git a/packages/skins/src/default/tailwind/audio.tailwind.ts b/packages/skins/src/default/tailwind/audio.tailwind.ts index a0ec165a..d2c4dd0c 100644 --- a/packages/skins/src/default/tailwind/audio.tailwind.ts +++ b/packages/skins/src/default/tailwind/audio.tailwind.ts @@ -76,7 +76,8 @@ export const tooltipState = { export const popup = { ...basePopup, - base: cn(basePopup.base, surface), + popover: cn(surface, basePopup.popover), + tooltip: cn(surface, basePopup.tooltip), }; /* ========================================================================== diff --git a/packages/skins/src/default/tailwind/components/popup.ts b/packages/skins/src/default/tailwind/components/popup.ts index 72e030fe..331d43b8 100644 --- a/packages/skins/src/default/tailwind/components/popup.ts +++ b/packages/skins/src/default/tailwind/components/popup.ts @@ -1,18 +1,23 @@ import { cn } from '@videojs/utils/style'; +const base = cn( + // Reset default popover styles + 'm-0 border-0 text-inherit overflow-visible', + // Animation + 'transition-[transform,scale,opacity,filter] duration-200', + 'data-starting-style:opacity-0 data-starting-style:scale-0 data-starting-style:blur-sm', + 'data-ending-style:opacity-0 data-ending-style:scale-0 data-ending-style:blur-sm', + 'data-instant:duration-0', + // Ensure we animate from the correct origin based on the side the popover is on + 'data-[side=top]:origin-bottom data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left' +); + export const popup = { - base: cn( - // Reset default popover styles - 'm-0 border-0 text-inherit overflow-visible', - // Animation - 'transition-[transform,scale,opacity,filter] duration-200', - 'data-starting-style:opacity-0 data-starting-style:scale-0 data-starting-style:blur-sm', - 'data-ending-style:opacity-0 data-ending-style:scale-0 data-ending-style:blur-sm', - 'data-instant:duration-0', - // Ensure we animate from the correct origin based on the side the popover is on - 'data-[side=top]:origin-bottom data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left' + popover: cn(base, '[--media-popover-side-offset:0.5rem]'), + tooltip: cn( + base, + 'py-1 px-2.5 rounded-full text-[0.75rem] whitespace-nowrap', + '[--media-tooltip-side-offset:0.5rem]' ), - popover: '[--media-popover-side-offset:0.5rem]', - tooltip: cn('py-1 px-2.5 rounded-full text-[0.75rem] whitespace-nowrap', '[--media-tooltip-side-offset:0.5rem]'), volume: 'py-2.5 px-1 rounded-full', }; diff --git a/packages/skins/src/default/tailwind/components/tooltip-state.ts b/packages/skins/src/default/tailwind/components/tooltip-state.ts index 463d2513..a0399f4e 100644 --- a/packages/skins/src/default/tailwind/components/tooltip-state.ts +++ b/packages/skins/src/default/tailwind/components/tooltip-state.ts @@ -6,14 +6,14 @@ export const tooltipState = { pause: 'hidden group-[:not(:has([data-paused])):not(:has([data-ended]))]/play-tip:block', }, fullscreen: { - wrapper: 'contents group/fs-tip', - enter: 'hidden group-[:not(:has([data-fullscreen]))]/fs-tip:block', - exit: 'hidden group-has-data-fullscreen/fs-tip:block', + wrapper: 'contents group/fullscreen-tip', + enter: 'hidden group-[:not(:has([data-fullscreen]))]/fullscreen-tip:block', + exit: 'hidden group-has-data-fullscreen/fullscreen-tip:block', }, captions: { - wrapper: 'contents group/cc-tip', - enable: 'hidden group-[:not(:has([data-active]))]/cc-tip:block', - disable: 'hidden group-has-data-active/cc-tip:block', + wrapper: 'contents group/captions-tip', + enable: 'hidden group-[:not(:has([data-active]))]/captions-tip:block', + disable: 'hidden group-has-data-active/captions-tip:block', }, pip: { wrapper: 'contents group/pip-tip', diff --git a/packages/skins/src/default/tailwind/video.tailwind.ts b/packages/skins/src/default/tailwind/video.tailwind.ts index f72f8a7e..03aaf857 100644 --- a/packages/skins/src/default/tailwind/video.tailwind.ts +++ b/packages/skins/src/default/tailwind/video.tailwind.ts @@ -109,7 +109,8 @@ export const slider = { export const popup = { ...basePopup, - base: cn(basePopup.base, surface), + popover: cn(surface, basePopup.popover), + tooltip: cn(surface, basePopup.tooltip), }; /* ========================================================================== diff --git a/packages/skins/src/minimal/css/audio.css b/packages/skins/src/minimal/css/audio.css index bf41d820..8f644366 100644 --- a/packages/skins/src/minimal/css/audio.css +++ b/packages/skins/src/minimal/css/audio.css @@ -1,5 +1,5 @@ -@import "../../shared/audio-icon-state.css"; -@import "../../shared/tooltip-state.css"; +@import "../../shared/audio/icon-state.css"; +@import "../../shared/audio/tooltip-state.css"; @import "./components/reset.css"; @import "./components/root.css"; @import "./components/buffering.css"; @@ -40,7 +40,7 @@ Popups & Animations ========================================================================== */ -.media-minimal-skin--audio .media-popup--volume { +.media-minimal-skin--audio .media-popover--volume { background: linear-gradient(to left, var(--media-controls-background-color) 80%, transparent 100%); padding: 0.5rem 0 0.5rem 4rem; --media-popover-side-offset: 0.75rem; diff --git a/packages/skins/src/minimal/css/components/popup.css b/packages/skins/src/minimal/css/components/popup.css index dfd21e8d..e01614e0 100644 --- a/packages/skins/src/minimal/css/components/popup.css +++ b/packages/skins/src/minimal/css/components/popup.css @@ -2,7 +2,8 @@ Popups & Animations ========================================================================== */ -.media-minimal-skin .media-popup { +.media-minimal-skin .media-popover, +.media-minimal-skin .media-tooltip { margin: 0; border: 0; color: inherit; @@ -35,7 +36,7 @@ } } -.media-minimal-skin .media-popup--tooltip { +.media-minimal-skin .media-tooltip { padding: 0.25rem 0.5rem; border-radius: 0.25rem; background-color: oklch(1 0 0 / 0.1); diff --git a/packages/skins/src/minimal/css/video.css b/packages/skins/src/minimal/css/video.css index 7599a723..ad07eddb 100644 --- a/packages/skins/src/minimal/css/video.css +++ b/packages/skins/src/minimal/css/video.css @@ -1,5 +1,5 @@ -@import "../../shared/video-icon-state.css"; -@import "../../shared/tooltip-state.css"; +@import "../../shared/video/icon-state.css"; +@import "../../shared/video/tooltip-state.css"; @import "./components/reset.css"; @import "./components/root.css"; @import "./components/media.css"; @@ -94,7 +94,7 @@ Popups & Animations ========================================================================== */ -.media-minimal-skin--video .media-popup--volume { +.media-minimal-skin--video .media-popover--volume { --media-popover-side-offset: 0.5rem; background: transparent; padding: 0.25rem; diff --git a/packages/skins/src/minimal/tailwind/components/popup.ts b/packages/skins/src/minimal/tailwind/components/popup.ts index cb455de7..57a32120 100644 --- a/packages/skins/src/minimal/tailwind/components/popup.ts +++ b/packages/skins/src/minimal/tailwind/components/popup.ts @@ -1,20 +1,22 @@ import { cn } from '@videojs/utils/style'; +const base = cn( + // Reset default popover styles + 'm-0 border-0 text-inherit overflow-visible', + // Animation + 'transition-[transform,scale,opacity,filter] duration-200', + 'data-starting-style:opacity-0 data-starting-style:scale-0 data-starting-style:blur-sm', + 'data-ending-style:opacity-0 data-ending-style:scale-0 data-ending-style:blur-sm', + 'data-instant:duration-0', + // Ensure we animate from the correct origin based on the side the popover is on + 'data-[side=top]:origin-bottom data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left' +); + export const popup = { - base: cn( - // Reset default popover styles - 'm-0 border-0 text-inherit overflow-visible', - // Animation - 'transition-[transform,scale,opacity,filter] duration-200', - 'data-starting-style:opacity-0 data-starting-style:scale-0 data-starting-style:blur-sm', - 'data-ending-style:opacity-0 data-ending-style:scale-0 data-ending-style:blur-sm', - 'data-instant:duration-0', - // Ensure we animate from the correct origin based on the side the popover is on - 'data-[side=top]:origin-bottom data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left' - ), tooltip: cn( + base, 'px-2 py-1 rounded-sm shadow-md shadow-black/10 bg-white/10 backdrop-blur-3xl backdrop-saturate-150 backdrop-brightness-90 text-[0.75rem] whitespace-nowrap', '[--media-tooltip-side-offset:0.5rem]' ), - volume: 'py-2.5 px-1 rounded-full', + volume: cn(base, 'py-2.5 px-1 rounded-full'), }; diff --git a/packages/skins/src/minimal/tailwind/components/tooltip-state.ts b/packages/skins/src/minimal/tailwind/components/tooltip-state.ts index 463d2513..a0399f4e 100644 --- a/packages/skins/src/minimal/tailwind/components/tooltip-state.ts +++ b/packages/skins/src/minimal/tailwind/components/tooltip-state.ts @@ -6,14 +6,14 @@ export const tooltipState = { pause: 'hidden group-[:not(:has([data-paused])):not(:has([data-ended]))]/play-tip:block', }, fullscreen: { - wrapper: 'contents group/fs-tip', - enter: 'hidden group-[:not(:has([data-fullscreen]))]/fs-tip:block', - exit: 'hidden group-has-data-fullscreen/fs-tip:block', + wrapper: 'contents group/fullscreen-tip', + enter: 'hidden group-[:not(:has([data-fullscreen]))]/fullscreen-tip:block', + exit: 'hidden group-has-data-fullscreen/fullscreen-tip:block', }, captions: { - wrapper: 'contents group/cc-tip', - enable: 'hidden group-[:not(:has([data-active]))]/cc-tip:block', - disable: 'hidden group-has-data-active/cc-tip:block', + wrapper: 'contents group/captions-tip', + enable: 'hidden group-[:not(:has([data-active]))]/captions-tip:block', + disable: 'hidden group-has-data-active/captions-tip:block', }, pip: { wrapper: 'contents group/pip-tip', diff --git a/packages/skins/src/shared/audio-icon-state.css b/packages/skins/src/shared/audio/icon-state.css similarity index 100% rename from packages/skins/src/shared/audio-icon-state.css rename to packages/skins/src/shared/audio/icon-state.css diff --git a/packages/skins/src/shared/audio/tooltip-state.css b/packages/skins/src/shared/audio/tooltip-state.css new file mode 100644 index 00000000..1cf52308 --- /dev/null +++ b/packages/skins/src/shared/audio/tooltip-state.css @@ -0,0 +1,25 @@ +/* ========================================================================== + Tooltip Label State Visibility for Audio Skins + + Data-attribute-driven visibility rules for multi-state tooltip labels. + Uses adjacent sibling selectors to match button state → tooltip content. + ========================================================================== */ + +/* --- All multi-state labels hidden by default --- */ + +.media-tooltip-label { + display: none; +} + +/* --- Active label per state --- */ + +/* Play: ended → replay */ +.media-button--play[data-ended] + .media-tooltip .media-tooltip-label--replay, +/* Play: paused (not ended) → play */ + .media-button--play:not([data-ended])[data-paused] + .media-tooltip + .media-tooltip-label--play, +/* Play: playing (not paused, not ended) → pause */ + .media-button--play:not([data-paused]):not([data-ended]) + .media-tooltip + .media-tooltip-label--pause { + display: block; +} diff --git a/packages/skins/src/shared/video-icon-state.css b/packages/skins/src/shared/video/icon-state.css similarity index 100% rename from packages/skins/src/shared/video-icon-state.css rename to packages/skins/src/shared/video/icon-state.css diff --git a/packages/skins/src/shared/tooltip-state.css b/packages/skins/src/shared/video/tooltip-state.css similarity index 63% rename from packages/skins/src/shared/tooltip-state.css rename to packages/skins/src/shared/video/tooltip-state.css index 1152d415..91c7720e 100644 --- a/packages/skins/src/shared/tooltip-state.css +++ b/packages/skins/src/shared/video/tooltip-state.css @@ -1,5 +1,5 @@ /* ========================================================================== - Tooltip Label State Visibility + Tooltip Label State Visibility for Video Skins Data-attribute-driven visibility rules for multi-state tooltip labels. Uses adjacent sibling selectors to match button state → tooltip content. @@ -14,30 +14,30 @@ /* --- Active label per state --- */ /* Play: ended → replay */ -.media-button--play[data-ended] + media-tooltip .media-tooltip-label--replay, +.media-button--play[data-ended] + .media-tooltip .media-tooltip-label--replay, /* Play: paused (not ended) → play */ - .media-button--play:not([data-ended])[data-paused] + media-tooltip + .media-button--play:not([data-ended])[data-paused] + .media-tooltip .media-tooltip-label--play, /* Play: playing (not paused, not ended) → pause */ - .media-button--play:not([data-paused]):not([data-ended]) + media-tooltip + .media-button--play:not([data-paused]):not([data-ended]) + .media-tooltip .media-tooltip-label--pause, /* Fullscreen: not fullscreen → enter */ - .media-button--fullscreen:not([data-fullscreen]) + media-tooltip + .media-button--fullscreen:not([data-fullscreen]) + .media-tooltip .media-tooltip-label--enter-fullscreen, /* Fullscreen: fullscreen → exit */ - .media-button--fullscreen[data-fullscreen] + media-tooltip + .media-button--fullscreen[data-fullscreen] + .media-tooltip .media-tooltip-label--exit-fullscreen, /* Captions: not active → enable */ - .media-button--captions:not([data-active]) + media-tooltip + .media-button--captions:not([data-active]) + .media-tooltip .media-tooltip-label--enable-captions, /* Captions: active → disable */ - .media-button--captions[data-active] + media-tooltip + .media-button--captions[data-active] + .media-tooltip .media-tooltip-label--disable-captions, /* PiP: not in pip → enter */ - media-pip-button:not([data-pip]) + media-tooltip + .media-button--pip:not([data-pip]) + .media-tooltip .media-tooltip-label--enter-pip, /* PiP: in pip → exit */ - media-pip-button[data-pip] + media-tooltip + .media-button--pip[data-pip] + .media-tooltip .media-tooltip-label--exit-pip { display: block; }