flan/advanced-camera-card
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Break out thumbnails into their own component.

Browse Source
This commit is contained in:
Dermot Duffy
2022-03-20 18:10:48 -07:00
parent 50596cb68a
commit b9a627702f
11 changed files with 227 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scss/thumbnail-carousel.scss
+3 -28
View File
@@ -1,37 +1,12 @@
:host {
--frigate-card-carousel-thumbnail-size: 100px;
--frigate-card-carousel-thumbnail-opacity: 0.6;
--frigate-card-carousel-thumbnail-opacity: 0.8;
}
.embla__slide {
flex: 0 0 var(--frigate-card-carousel-thumbnail-size);
flex: 0 0 fit-content;
opacity: var(--frigate-card-carousel-thumbnail-opacity);
transition: opacity 0.6s ease, transform 0.2s linear;
transition: opacity 0.6s ease;
}
.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;
}