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): fix html container sizing (#881)

Browse Source
This commit is contained in:
Sam Potts
2026-03-11 14:27:40 +11:00
committed by GitHub
parent 6d044e3c0f
commit abf8753fe6
15 changed files with 65 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/skins/src/default/css/components/root.css
+2
View File
@@ -6,6 +6,8 @@
position: relative;
isolation: isolate;
display: block;
height: 100%;
width: 100%;
container: media-root / inline-size;
border-radius: var(--media-border-radius, 2rem);
font-family:
packages/skins/src/default/tailwind/components/root.ts
+1 -1
View File
@@ -2,7 +2,7 @@ import { cn } from '@videojs/utils/style';
export const root = cn(
// Layout & containment
'block relative isolate @container/media-root',
'block relative isolate h-full w-full @container/media-root',
// Appearance
'rounded-(--media-border-radius,2rem)',
'font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased',
packages/skins/src/shared/native-captions.css
-26
View File
@@ -1,26 +0,0 @@
/* ==========================================================================
Native Caption Bridge
---------------------------------------------------------------------------
Receives CSS custom properties set by any skin and applies them to the
native WebKit text track container on the slotted <video> element.
This stylesheet MUST live in the light DOM because ::slotted() cannot be
chained with vendor pseudo-elements like ::-webkit-media-text-track-container.
CSS custom properties cascade through the shadow DOM boundary, so skins
define the values and this bridge reads them.
========================================================================== */
.media-skin > video::-webkit-media-text-track-container {
transition: transform var(--media-caption-track-duration, 150ms) ease-out;
transition-delay: var(--media-caption-track-delay, 600ms);
transform: translateY(var(--media-caption-track-y, 0)) scale(0.98);
z-index: var(--media-caption-track-z, 1);
font-family: inherit;
}
@media (prefers-reduced-motion: reduce) {
.media-skin > video::-webkit-media-text-track-container {
transition-duration: 50ms;
}
}