Files
feishin/src/shared/components/image/image.module.css
T
2025-11-29 19:33:37 -08:00

56 lines
877 B
CSS

@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.image {
width: 100%;
height: 100%;
object-fit: var(--theme-image-fit);
border-radius: var(--theme-radius-md);
}
.image.animated {
opacity: 1;
animation: fade-in 0.2s ease-in;
}
.loader {
width: 100%;
height: 100%;
border-radius: var(--theme-radius-md);
}
.image-container {
display: flex;
aspect-ratio: 1 / 1;
overflow: hidden;
}
.unloader {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: darken(var(--theme-colors-foreground), 40%);
border-radius: var(--theme-radius-md);
opacity: 0.3;
}
.skeleton {
width: 100%;
height: 100%;
border-radius: var(--theme-radius-md);
}
.view-wrapper {
width: 100%;
height: 100%;
}