mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
48 lines
1.3 KiB
CSS
48 lines
1.3 KiB
CSS
/* ==========================================================================
|
|
Media Element
|
|
========================================================================== */
|
|
|
|
.media-default-skin ::slotted(video),
|
|
.media-default-skin video {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: var(--media-object-fit, contain);
|
|
object-position: var(--media-object-position, center);
|
|
}
|
|
.media-default-skin ::slotted(video) {
|
|
border-radius: var(--media-video-border-radius);
|
|
}
|
|
.media-default-skin video {
|
|
border-radius: inherit;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Poster Image
|
|
========================================================================== */
|
|
|
|
.media-default-skin > img {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: var(--media-object-fit, contain);
|
|
object-position: var(--media-object-position, center);
|
|
transition: opacity 0.25s;
|
|
pointer-events: none;
|
|
border-radius: inherit;
|
|
|
|
&:not([data-visible]) {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Fullscreen
|
|
========================================================================== */
|
|
|
|
.media-default-skin:fullscreen ::slotted(video),
|
|
.media-default-skin:fullscreen video {
|
|
object-fit: contain;
|
|
}
|