CSS changes for Safari & cleanups

src/components/live.ts

@@ -50,6 +50,10 @@ export class FrigateCardViewer extends LitElement {
         >
         </frigate-card-live-jsmpeg>`}`;
   }
+
+  static get styles(): CSSResultGroup {
+    return unsafeCSS(liveStyle);
+  }
 }
 
 @customElement('frigate-card-live-frigate')
@@ -72,6 +76,10 @@ export class FrigateCardViewerFrigate extends LitElement {
     >
     </ha-camera-stream>`;
   }
+
+  static get styles(): CSSResultGroup {
+    return unsafeCSS(liveStyle);
+  }
 }
 
 // Create a wrapper for the WebRTC element
@@ -110,6 +118,10 @@ export class FrigateCardViewerWebRTC extends LitElement {
     }
     return html`${this._webRTCElement}`;
   }
+
+  static get styles(): CSSResultGroup {
+    return unsafeCSS(liveStyle);
+  }
 }
 
 @customElement('frigate-card-live-jsmpeg')

src/scss/card.scss

@@ -18,7 +18,12 @@
   scrollbar-width: none;    /* Hide scrollbar: Firefox */
 }
 
-/* Support the 'hover' menu mode. */
+/* Hide scrollbar for Chrome, Safari and Opera */
+.frigate-card-contents::-webkit-scrollbar {
+  display: none;
+}
+
+/* The 'hover' menu mode is styling applied outside of the menu itself */
 .hover-menu {
   z-index: 1;
   transition: all 0.5s ease;
@@ -30,28 +35,6 @@
   opacity: 1.0;
 }
 
-.frigate-card-contents img.media,video.media,canvas.media {
-  width: 100%;
-}
-
-/* Hide scrollbar for Chrome, Safari and Opera */
-.frigate-card-contents::-webkit-scrollbar {
-  display: none;
-}
-
-.frigate-card-contents .attention {
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-sizing: border-box;
-  padding: 10%;
-}
-
-video, img {
-  display: block;
-}
-
 ha-card {
   display: flex;
   flex-direction: column;
@@ -62,16 +45,8 @@ ha-card {
   position: relative;
   color: var(--secondary-text-color, white);
   background-color: var(--secondary-background-color, black);
-
 }
 
 ha-card a {
   color: var(--primary-text-color, white);
-}
+}
-
-/* Don't drop shadow or have radius for nested webrtc card */
-webrtc-camera ha-card {
-  box-shadow: none;
-  border-radius: 0px;
-  background-color: var(--secondary-background-color, black);
-}

src/scss/live.scss

@@ -1,3 +1,10 @@
 canvas {
   width: 100%;
 }
+
+/* Don't drop shadow or have radius for nested webrtc card */
+webrtc-camera ha-card {
+  box-shadow: none;
+  border-radius: 0px;
+  background-color: var(--secondary-background-color, black);
+}

src/scss/viewer.scss

@@ -1,3 +1,6 @@
+ha-hls-player {
+  transform-style: preserve-3d;
+}
 img,video {
   width: 100%;
   height: 100%;