Allow per-camera trigger borders.

src/scss/card.scss

@@ -21,7 +21,7 @@
   // The standard HA header is 56 pixels tall, so that much off the top (header)
   // and bottom (to maintain center), before doing the calculation of
   // max-height. This matters on small mobile devices in landscape orientation.
-  --frigate-card-expand-max-height: calc( ( 100vh - (2 * 56px) ) * 0.85 );
+  --frigate-card-expand-max-height: calc((100vh - (2 * 56px)) * 0.85);
   --frigate-card-expand-max-width: 85vw;
   --frigate-card-expand-width: none;
   --frigate-card-expand-height: none;
@@ -52,10 +52,6 @@ div.main {
   // Necessary to get Safari to show border-radius correctly.
   transform: translateZ(0);
 
-  // Include the borders in the sizing (to keep the triggered warning pulse
-  // visible in fullscreen).
-  box-sizing: border-box;
-
   // Hide scrollbar: Firefox
   scrollbar-width: none;
   // Hide scrollbar: IE and Edge
@@ -112,20 +108,6 @@ ha-card {
   position: static;
   color: var(--secondary-text-color, white);
 }
-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;
-}
 
 /************
  * Fullscreen

src/scss/live-carousel.scss

@@ -1,4 +1,5 @@
 :host {
+  display: block;
   --video-max-height: none;
 }
 

src/scss/live-grid.scss

@@ -0,0 +1,20 @@
+@use 'basic-block.scss';
+
+@keyframes warning-pulse {
+  0% {
+    border: solid 2px var(--frigate-card-triggered-color-1, rgba(0, 0, 0, 0));
+  }
+  50% {
+    border: solid 2px var(--frigate-card-triggered-color-2, var(--warning-color));
+  }
+  100% {
+    border: solid 2px var(--frigate-card-triggered-color-1, rgba(0, 0, 0, 0));
+  }
+}
+
+frigate-card-live-carousel[triggered] {
+  animation: warning-pulse 5s infinite;
+}
+frigate-card-live-carousel[selected] {
+  --frigate-card-triggered-color-1: var(--primary-color);
+}