mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
49 lines
1.2 KiB
CSS
49 lines
1.2 KiB
CSS
/* ==========================================================================
|
|
Media Element
|
|
========================================================================== */
|
|
|
|
.media-minimal-skin ::slotted(video),
|
|
.media-minimal-skin video {
|
|
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
|
|
========================================================================== */
|
|
|
|
.media-minimal-skin > img {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
object-fit: cover;
|
|
transition: opacity 0.25s;
|
|
pointer-events: none;
|
|
|
|
&:not([data-visible]) {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Fullscreen
|
|
========================================================================== */
|
|
|
|
.media-minimal-skin:fullscreen video,
|
|
.media-minimal-skin:fullscreen ::slotted(video),
|
|
.media-minimal-skin:fullscreen > img {
|
|
object-fit: contain;
|
|
}
|
|
.media-minimal-skin:fullscreen ::slotted(video) {
|
|
border-radius: 0;
|
|
}
|