Merge pull request #770 from dermotduffy/scan-mode-border

Move scan mode pulsing border to the outer ha-card

src/card.ts

@@ -1756,8 +1756,7 @@ export class FrigateCard extends LitElement {
     const cardStyle = {
       'aspect-ratio': this._getAspectRatioStyle(),
     };
-    const mainClasses = {
+    const cardClasses = {
-      main: true,
       triggered:
         !!this._isTriggered() && this._getConfig().view.scan.show_trigger_status,
     };
@@ -1776,6 +1775,7 @@ export class FrigateCard extends LitElement {
         hasHold: frigateCardHasAction(actions.hold_action),
         hasDoubleClick: frigateCardHasAction(actions.double_tap_action),
       })}
+      class="${classMap(cardClasses)}"
       style="${styleMap(cardStyle)}"
       @action=${(ev: CustomEvent) => this._actionHandler(ev, actions)}
       @ll-custom=${this._cardActionHandler.bind(this)}
@@ -1787,7 +1787,7 @@ export class FrigateCard extends LitElement {
       ${renderMenuAbove ? this._renderMenu() : ''}
       <div 
         ${ref(this._refMain)}
-        class="${classMap(mainClasses)}"
+        class="main"
       >
         ${this._cameras === undefined && !this._message
           ? until(

src/scss/card.scss

@@ -39,20 +39,6 @@ div.main {
   // Hide scrollbar: IE and Edge
   -ms-overflow-style: none;
 }
-div.main.triggered {
-  @keyframes warning-pulse {
-    0% {
-      border: solid 1px rgba(0, 0, 0, 0);
-    }
-    50% {
-      border: solid 1px var(--warning-color);
-    }
-    100% {
-      border: solid 1px rgba(0, 0, 0, 0);
-    }
-  }
-  animation: warning-pulse 5s infinite;
-}
 
 /* Hide scrollbar for Chrome, Safari and Opera */
 div.main::-webkit-scrollbar {
@@ -89,6 +75,21 @@ ha-card {
   // within the radius.
   border-radius: var(--ha-card-border-radius, 4px);
 }
+ha-card.triggered {
+  @keyframes warning-pulse {
+    0% {
+      border: solid 2px rgba(0, 0, 0, 0);
+    }
+    50% {
+      border: solid 2px var(--warning-color);
+    }
+    100% {
+      border: solid 2px rgba(0, 0, 0, 0);
+    }
+  }
+  animation: warning-pulse 5s infinite;
+}
+
 
 frigate-card-live.hidden {
   // Live view will be rendered but hidden for live preloading.