[data-media-surface].media-skeleton,
img.media-skeleton {
background-color: var(--skeleton-bg);
background-image: linear-gradient(
110deg,
var(--skeleton-bg) 20%,
var(--skeleton-shine) 43%,
var(--skeleton-bg) 66%
);
background-size: 220% 100%;
animation: media-skeleton-shimmer 1.35s ease-in-out infinite;
}
[data-media-surface].media-skeleton > img {
opacity: 0;
}
.artist-preview.media-skeleton .artist-monogram,
.artist-avatar.media-skeleton .artist-avatar-initial {
opacity: 0;
}
img.media-skeleton:not([width]):not([height]):not([data-media-surface-child]):not(.artist-avatar) {
display: block;
width: 100%;
min-height: 180px;
object-fit: contain;
color: transparent;
}
.res-lightbox-media {
display: flex;
align-items: center;
justify-content: center;
}
.res-lightbox-media.media-skeleton {
width: min(72vw, 860px);
min-height: min(64vh, 560px);
}
.res-lightbox-media > img {
display: block;
max-width: 100%;
max-height: calc(92vh - 58px);
max-height: calc(92dvh - 58px);
width: auto;
height: auto;
}
@keyframes media-skeleton-shimmer {
from { background-position: 200% 0; }
to { background-position: -20% 0; }
}
@media (prefers-reduced-motion: reduce) {
[data-media-surface].media-skeleton,
img.media-skeleton {
animation: none;
}
.hero-bg.media-skeleton::before {
animation: none;
}
}