fix(skin): remove overflow in minimal video skin (#993)

This commit is contained in:
Sam Potts
2026-03-18 10:10:33 +11:00
committed by GitHub
parent d535282f03
commit 89d9e15bb3
4 changed files with 5 additions and 5 deletions
+1 -1
View File
@@ -31,7 +31,7 @@
--media-video-border-radius: var(--media-border-radius, 2rem);
@media (prefers-color-scheme: dark) {
--media-border-color: oklch(1 0 0 / 0.1);
--media-border-color: oklch(1 0 0 / 0.15);
}
/* Inner border ring */
@@ -18,7 +18,7 @@ export const root = (isShadowDOM: boolean) =>
'bg-black',
// Inner border ring
'after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10',
'after:inset-0 after:ring-1 after:ring-inset after:ring-black/10 dark:after:ring-white/10',
'after:inset-0 after:ring-1 after:ring-inset after:ring-black/10 dark:after:ring-white/15',
// Video element
{
'[&_::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)]':
+1
View File
@@ -20,6 +20,7 @@
========================================================================== */
.media-minimal-skin--video {
overflow: clip;
background: oklch(0 0 0);
--media-border-color: oklch(0 0 0 / 0.15);
--media-video-border-radius: var(--media-border-radius, 0.75rem);
@@ -12,11 +12,10 @@ import { slider as baseSlider } from './components/slider';
export const root = (isShadowDOM: boolean) =>
cn(
baseRoot,
'bg-black',
'bg-black overflow-clip',
// Border ring (::after)
'after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10',
'after:inset-0 after:ring-1 after:ring-inset after:ring-black/15',
'dark:after:ring-white/15',
'after:inset-0 after:ring-1 after:ring-inset after:ring-black/15 dark:after:ring-white/15',
// Video element
{
'[&_::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,cover)] [&_::slotted(video)]:[object-position:var(--media-object-position,center)]':