mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
63 lines
1.3 KiB
CSS
63 lines
1.3 KiB
CSS
/* ==========================================================================
|
|
Media preview
|
|
========================================================================== */
|
|
.media-default-skin .media-preview {
|
|
pointer-events: none;
|
|
background-color: oklch(0 0 0 / 0.9);
|
|
border-radius: 0.75rem;
|
|
|
|
& .media-preview__thumbnail {
|
|
position: relative;
|
|
display: block;
|
|
overflow: clip;
|
|
border-radius: inherit;
|
|
|
|
&::after {
|
|
position: absolute;
|
|
inset: 0;
|
|
content: "";
|
|
background-image: linear-gradient(to top, oklch(0 0 0 / 0.8), oklch(0 0 0 / 0.3), oklch(0 0 0 / 0));
|
|
border-radius: inherit;
|
|
}
|
|
}
|
|
|
|
& .media-preview__time {
|
|
position: absolute;
|
|
inset-inline: 0;
|
|
bottom: 0.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
& .media-overlay {
|
|
opacity: 1;
|
|
}
|
|
|
|
& .media-preview__spinner {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
opacity: 0;
|
|
translate: -50% -50%;
|
|
}
|
|
|
|
& .media-preview__thumbnail,
|
|
& .media-preview__spinner {
|
|
transition: opacity 150ms ease-out;
|
|
}
|
|
|
|
&:not(:has(.media-preview__thumbnail[data-loading])) {
|
|
& .media-preview__spinner {
|
|
--media-spinner-animation: none;
|
|
}
|
|
}
|
|
|
|
&:has(.media-preview__thumbnail[data-loading]) {
|
|
& .media-preview__thumbnail {
|
|
opacity: 0;
|
|
}
|
|
& .media-preview__spinner {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|