62 lines
1.3 KiB
CSS
62 lines
1.3 KiB
CSS
|
div.media-canvas {
|
||
|
|
display: inline-block;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.media-canvas div.popup {
|
||
|
|
display: flex;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.media-canvas div.popup img.icon {
|
||
|
|
width: 16px;
|
||
|
|
height: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.media-canvas video.decode {
|
||
|
|
position: absolute;
|
||
|
|
visibility: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.media-canvas img.render.error {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.media-canvas img.render,
|
||
|
|
div.media-canvas canvas.render {
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
max-width: inherit;
|
||
|
|
height: 100%;
|
||
|
|
max-height: inherit;
|
||
|
|
object-fit: contain;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.media-canvas.background {
|
||
|
|
box-sizing: border-box;
|
||
|
|
border: var(--border-thickness) solid var(--background-primary);
|
||
|
|
background-image:
|
||
|
|
repeating-linear-gradient(
|
||
|
|
45deg,
|
||
|
|
transparent,
|
||
|
|
transparent 8px,
|
||
|
|
var(--background-secondary) 8px,
|
||
|
|
var(--background-secondary) 9px
|
||
|
|
),
|
||
|
|
repeating-linear-gradient(
|
||
|
|
-45deg,
|
||
|
|
transparent,
|
||
|
|
transparent 8px,
|
||
|
|
var(--background-secondary) 8px,
|
||
|
|
var(--background-secondary) 9px
|
||
|
|
);
|
||
|
|
background-color: var(--background-tertiary);
|
||
|
|
}
|