zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-05 05:37:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(skin): fix fullscreen video clipping and border-radius handling (#905)

Browse Source
This commit is contained in:
Sam Potts
2026-03-12 12:06:34 +11:00
committed by GitHub
parent 801be291c3
commit e9621a1f50
9 changed files with 60 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/skins/src/default/css/components/media.css
+18
View File
@@ -7,8 +7,13 @@
display: block;
width: 100%;
height: 100%;
}
.media-default-skin ::slotted(video) {
border-radius: var(--media-border-radius, 2rem);
}
.media-default-skin video {
border-radius: inherit;
}
/* ==========================================================================
Poster Image
@@ -28,3 +33,16 @@
opacity: 0;
}
}
/* ==========================================================================
Fullscreen
========================================================================== */
.media-default-skin:fullscreen video,
.media-default-skin:fullscreen ::slotted(video),
.media-default-skin > img {
object-fit: contain;
}
.media-default-skin:fullscreen ::slotted(video) {
border-radius: 0;
}
packages/skins/src/default/css/components/root.css
-4
View File
@@ -21,8 +21,4 @@
letter-spacing: normal;
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
&:fullscreen {
border-radius: 0;
}
}
packages/skins/src/default/css/video.css
+4
View File
@@ -42,6 +42,10 @@
box-shadow: inset 0 0 0 1px var(--media-border-color);
pointer-events: none;
}
&:fullscreen {
border-radius: 0;
}
}
/* ==========================================================================
packages/skins/src/default/tailwind/components/root.ts
+1 -3
View File
@@ -9,7 +9,5 @@ export const root = cn(
// Resets
'**:box-border **:m-0',
'[&_button]:font-[inherit]',
'motion-safe:[interpolate-size:allow-keywords]',
// Fullscreen
'[&:fullscreen]:rounded-none'
'motion-safe:[interpolate-size:allow-keywords]'
);
packages/skins/src/default/tailwind/video.tailwind.ts
+6 -1
View File
@@ -49,7 +49,12 @@ export const root = (isShadowDOM: boolean) =>
]
: [],
// Fullscreen
'[&:fullscreen]:rounded-none'
'[&:fullscreen]:rounded-none',
{
'[&:fullscreen_video]:object-contain': !isShadowDOM,
'[&:fullscreen_::slotted(video)]:object-contain [&:fullscreen_::slotted(video)]:rounded-none': isShadowDOM,
},
'[&:fullscreen>img]:object-contain'
);
/* ==========================================================================
packages/skins/src/minimal/css/components/media.css
+18
View File
@@ -7,8 +7,13 @@
display: block;
width: 100%;
height: 100%;
}
.media-minimal-skin ::slotted(video) {
border-radius: var(--media-border-radius, 0.75rem);
}
.media-minimal-skin video {
border-radius: inherit;
}
/* ==========================================================================
Poster Image
@@ -28,3 +33,16 @@
opacity: 0;
}
}
/* ==========================================================================
Fullscreen
========================================================================== */
.media-minimal-skin:fullscreen video,
.media-minimal-skin:fullscreen ::slotted(video),
.media-minimal-skin > img {
object-fit: contain;
}
.media-minimal-skin:fullscreen ::slotted(video) {
border-radius: 0;
}
packages/skins/src/minimal/css/components/root.css
-4
View File
@@ -21,8 +21,4 @@
letter-spacing: normal;
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
&:fullscreen {
border-radius: 0;
}
}
packages/skins/src/minimal/css/video.css
+7 -6
View File
@@ -20,20 +20,21 @@
.media-minimal-skin--video {
background: oklch(0 0 0);
--media-border-color: oklch(0 0 0 / 0.15);
/* Border ring */
@media (prefers-color-scheme: dark) {
--media-border-color: oklch(1 0 0 / 0.15);
}
/* Inner border ring */
&::after {
content: "";
position: absolute;
inset: 0;
z-index: 10;
border-radius: inherit;
box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.15);
box-shadow: inset 0 0 0 1px var(--media-border-color);
pointer-events: none;
@media (prefers-color-scheme: dark) {
box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.15);
}
}
/* Fullscreen */
packages/skins/src/minimal/tailwind/video.tailwind.ts
+6 -1
View File
@@ -47,7 +47,12 @@ export const root = (isShadowDOM: boolean) =>
]
: [],
// Fullscreen
'[&:fullscreen]:rounded-none'
'[&:fullscreen]:rounded-none',
{
'[&:fullscreen_video]:object-contain': !isShadowDOM,
'[&:fullscreen_::slotted(video)]:object-contain [&:fullscreen_::slotted(video)]:rounded-none': isShadowDOM,
},
'[&:fullscreen>img]:object-contain'
);
/* ==========================================================================