37 lines
943 B
SCSS
37 lines
943 B
SCSS
:host {
|
|
--frigate-card-carousel-thumbnail-size: 100px;
|
|
--frigate-card-carousel-thumbnail-opacity: 0.6;
|
|
}
|
|
|
|
.embla__slide {
|
|
flex: 0 0 var(--frigate-card-carousel-thumbnail-size);
|
|
opacity: var(--frigate-card-carousel-thumbnail-opacity);
|
|
transition: opacity 0.6s ease, transform 0.2s linear;
|
|
}
|
|
.embla__slide.slide-selected {
|
|
opacity: 1.0;
|
|
}
|
|
.embla__slide:hover {
|
|
transform: scale(1.04);
|
|
}
|
|
.embla__slide img {
|
|
border-radius: 5px;
|
|
|
|
// Not 'contain' as some thumbnails may vary in aspect-ratio slightly and
|
|
// should be clipped to fill the thumbnail div whilst maintaining
|
|
// aspect-ratio.
|
|
object-fit: cover;
|
|
|
|
// Restrict images to a maximum of thumbnail size.
|
|
max-width: var(--frigate-card-carousel-thumbnail-size);
|
|
max-height: var(--frigate-card-carousel-thumbnail-size);
|
|
}
|
|
.favorite {
|
|
position: absolute;
|
|
transform: translate(-50%, -50%);
|
|
height: 24px;
|
|
width: 24px;
|
|
top: 12%;
|
|
left: 90%;
|
|
color: yellow;
|
|
} |