57 lines
1.1 KiB
CSS
57 lines
1.1 KiB
CSS
.rustpad-media {
|
|
width: min(100%, 960px);
|
|
margin: 18px auto;
|
|
overflow: hidden;
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
background: #000;
|
|
box-shadow: 0 12px 30px color-mix(in srgb, #000 22%, transparent);
|
|
}
|
|
|
|
.rustpad-media__player,
|
|
.rustpad-media__player iframe,
|
|
.rustpad-media__player video,
|
|
video.rustpad-media__player {
|
|
display: block;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.rustpad-media__player[data-player-kind="youtube"] {
|
|
position: relative;
|
|
aspect-ratio: 16 / 9;
|
|
}
|
|
|
|
.rustpad-media__player[data-player-kind="youtube"] iframe {
|
|
position: absolute;
|
|
inset: 0;
|
|
height: 100%;
|
|
border: 0;
|
|
}
|
|
|
|
video.rustpad-media__player,
|
|
.rustpad-media__player video {
|
|
max-height: min(72vh, 760px);
|
|
background: #000;
|
|
}
|
|
|
|
.rustpad-media__fallback {
|
|
margin: 0;
|
|
padding: 10px 12px;
|
|
border-top: 1px solid color-mix(in srgb, white 18%, transparent);
|
|
background: var(--surface-deep);
|
|
color: var(--muted);
|
|
font-size: .78rem;
|
|
}
|
|
|
|
.rustpad-media__fallback a {
|
|
color: var(--accent-soft);
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.rustpad-media {
|
|
margin-block: 14px;
|
|
border-radius: 9px;
|
|
}
|
|
}
|