First version of gallery refactor to use thumbnails.

src/scss/gallery.scss

@@ -1,9 +1,4 @@
-@use '@material/image-list/mdc-image-list';
-@use '@material/image-list';
-@use './favorite.scss';
-
 :host {
-  display: block;
   width: 100%;
   height: 100%;
   overflow: auto;
@@ -13,6 +8,15 @@
 
   // Hide scrollbar: Firefox
   scrollbar-width: none;
+
+  --frigate-card-gallery-gap: 3px;
+  --frigate-card-gallery-columns: 4;
+  --frigate-card-thumbnail-size: 100px;
+
+  display: grid;
+  grid-template-columns: repeat(var(--frigate-card-gallery-columns), minmax(0, 1fr));
+  grid-auto-rows: var(--frigate-card-thumbnail-size);
+  grid-column-gap: var(--frigate-card-gallery-gap);
 }
 
 // Hide scrollbar for Chrome, Safari and Opera
@@ -20,21 +24,7 @@
   display: none;
 }
 
-.frigate-card-gallery {
-  // Note: In fullscreen, number of columns is overwritten in Javascript based
-  // on dimensions.
-  @include image-list.standard-columns(4, 5px);
-  @include image-list.shape-radius(5px);
-}
-
-.frigate-card-gallery .mdc-image-list__image {
-  transition: transform 0.2s linear;
-}
-.frigate-card-gallery .mdc-image-list__image:hover {
-  transform: scale(1.04);
-}
-
-ha-card.frigate-card-gallery-folder {
+ha-card {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -46,10 +36,11 @@ ha-card.frigate-card-gallery-folder {
   border-radius: 5px;
   background-color: var(--primary-background-color, black);
   padding: 10px;
-  height: 100%;
   line-height: 1;
+  overflow: hidden;
 }
 
-ha-icon.favorite {
-  opacity: 0.8;
+:host(:not([details])) ha-card,
+:host(:not([details])) frigate-card-thumbnail {
+  aspect-ratio: 1 / 1;
 }