mirror of
https://github.com/zoriya/v10.git
synced 2026-08-05 05:37:21 +00:00
fix(skin): remove overflow in minimal video skin (#993)
This commit is contained in:
@@ -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)]':
|
||||
|
||||
@@ -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)]':
|
||||
|
||||
Reference in New Issue
Block a user