From b0bcc6eda58e0503473a0efb6885c0bc5a298f28 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Thu, 25 Nov 2021 20:38:24 -0800
Subject: [PATCH] Sync thumbnail styles between carousel and gallery.

---
 src/components/gallery.ts        |  4 ++--
 src/scss/gallery.scss            | 13 ++++++++++---
 src/scss/thumbnail-carousel.scss |  2 +-
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/gallery.ts b/src/components/gallery.ts
index e4751776..a1f60247 100644
--- a/src/components/gallery.ts
+++ b/src/components/gallery.ts
@@ -146,8 +146,8 @@ export class FrigateCardGalleryCore extends LitElement {
     }
 
     const styles = {
-      // Controls the number of columns in the gallery (allows for 1px gutter).
-      width: `calc(${100 / this._columns}% - 1.2px)`,
+      // Controls the number of columns in the gallery (allows for 5px gutter).
+      width: `calc(${100 / this._columns}% - 5.25px)`,
     };
 
     return html` <ul class="mdc-image-list frigate-card-gallery">
diff --git a/src/scss/gallery.scss b/src/scss/gallery.scss
index 9e7220c7..030cc60c 100644
--- a/src/scss/gallery.scss
+++ b/src/scss/gallery.scss
@@ -18,20 +18,27 @@
 .frigate-card-gallery {
   // Note: In fullscreen, number of columns is overwritten in Javascript based
   // on dimensions.
-  @include image-list.standard-columns(5, 1px);
+  @include image-list.standard-columns(4, 5px);
   @include image-list.shape-radius(5px);
 }
 
+.frigate-card-gallery .mdc-image-list__image {
+  transition: transform 0.3s ease;
+}
+.frigate-card-gallery .mdc-image-list__image:hover {
+  transform: scale(1.05);
+}
+
 ha-card.frigate-card-gallery-folder {
   display: flex;
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
   text-align: center;
-  border-style: 2px solid;
   opacity: 0.7;
   color: var(--secondary-text-color, white);
-  border-color: var(--secondary-text-color, black);
+  border: 2px ridge var(--secondary-text-color, black);
+  border-radius: 5px;
   background-color: var(--primary-background-color, black);
   padding: 10px;
   height: 100%;
diff --git a/src/scss/thumbnail-carousel.scss b/src/scss/thumbnail-carousel.scss
index 1a1a417d..3293f6d9 100644
--- a/src/scss/thumbnail-carousel.scss
+++ b/src/scss/thumbnail-carousel.scss
@@ -12,7 +12,7 @@
   opacity: 1.0;
 }
 .embla__slide:hover {
-  transform: scale(1.1);
+  transform: scale(1.05);
 }
 .embla__slide img {
   border-radius: 5px;