zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(html): simplify styles for slotted video (#953)

Browse Source 
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Sam Potts
2026-03-15 22:41:46 +11:00
committed by GitHub
co-authored by Claude Opus 4.6
parent c39b1f8809
commit d6e471a837
12 changed files with 96 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/skins/src/default/tailwind/video.tailwind.ts
+12 -10
View File
@@ -21,41 +21,43 @@ export const root = (isShadowDOM: boolean) =>
'after:inset-0 after:ring-1 after:ring-inset after:ring-black/10 dark:after:ring-white/10',
// Video element
{
'[&_::slotted(video)]:block [&_::slotted(video)]:w-full [&_::slotted(video)]:h-full [&_::slotted(video)]:rounded-(--media-border-radius,2rem)':
'[&_::slotted(video)]:block [&_::slotted(video)]:w-full [&_::slotted(video)]:h-full [&_::slotted(video)]:rounded-(--media-video-border-radius) [&_::slotted(video)]:[object-fit:var(--media-object-fit,contain)] [&_::slotted(video)]:[object-position:var(--media-object-position,center)]':
isShadowDOM,
'[&_video]:block [&_video]:w-full [&_video]:h-full [&_video]:rounded-[inherit]': !isShadowDOM,
'[&_video]:block [&_video]:w-full [&_video]:h-full [&_video]:rounded-[inherit] [&_video]:[object-fit:var(--media-object-fit,contain)] [&_video]:[object-position:var(--media-object-position,center)]':
!isShadowDOM,
},
'[--media-video-border-radius:var(--media-border-radius,2rem)]',
// Poster image
'[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]',
'[&>img]:object-cover [&>img]:pointer-events-none',
'[&>img]:[object-fit:var(--media-object-fit,contain)] [&>img]:[object-position:var(--media-object-position,center)] [&>img]:pointer-events-none',
'[&>img]:transition-opacity [&>img]:duration-250',
'[&>img:not([data-visible])]:opacity-0',
// Caption track CSS variables (consumed by the native caption bridge in light DOM)
'[--media-caption-track-delay:600ms]',
'[--media-caption-track-y:-0.5rem]',
'[--media-caption-track-delay:600ms]',
'[--media-caption-track-duration:150ms]',
'motion-reduce:[--media-caption-track-duration:50ms]',
'has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]',
'has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]',
// Native caption track container
!isShadowDOM
? [
'[&_video::-webkit-media-text-track-container]:transition-transform',
'[&_video::-webkit-media-text-track-container]:duration-150',
'[&_video::-webkit-media-text-track-container]:duration-(--media-caption-track-duration)',
'[&_video::-webkit-media-text-track-container]:ease-out',
'[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)',
'[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)',
'[&_video::-webkit-media-text-track-container]:scale-98',
'[&_video::-webkit-media-text-track-container]:z-1',
'[&_video::-webkit-media-text-track-container]:font-[inherit]',
'motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50',
]
: [],
// Fullscreen
'[&:fullscreen]:rounded-none',
'[&:fullscreen]:[--media-border-radius:0]',
{
'[&:fullscreen_video]:object-contain': !isShadowDOM,
'[&:fullscreen_::slotted(video)]:object-contain [&:fullscreen_::slotted(video)]:rounded-none': isShadowDOM,
},
'[&:fullscreen>img]:object-contain'
'[&:fullscreen_::slotted(video)]:object-contain': isShadowDOM,
}
);
/* ==========================================================================