Files
v10/packages/skins/src/shared/native-captions.css
T

27 lines
1.1 KiB
CSS

/* ==========================================================================
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;
}
}