From d02f7607937212b2b2eb70377977272850bd5f82 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Mon, 20 Sep 2021 22:37:08 -0700
Subject: [PATCH] Improve CSS encapslation (Chrome).

---
 src/components/viewer.ts              | 3 ---
 src/scss/{common.scss => button.scss} | 4 ----
 src/scss/card.scss                    | 3 ---
 src/scss/menu.scss                    | 4 ++--
 src/scss/next-previous-control.scss   | 4 ++--
 src/scss/viewer.scss                  | 3 ++-
 6 files changed, 6 insertions(+), 15 deletions(-)
 rename src/scss/{common.scss => button.scss} (91%)

diff --git a/src/components/viewer.ts b/src/components/viewer.ts
index a9db985a..08cd821d 100644
--- a/src/components/viewer.ts
+++ b/src/components/viewer.ts
@@ -212,7 +212,6 @@ export class FrigateCardViewer extends LitElement {
       ${this.view.is('clip')
         ? resolvedMedia?.mime_type.toLowerCase() == 'application/x-mpegurl'
           ? html`<ha-hls-player
-              class="media"
               .hass=${this.hass}
               .url=${resolvedMedia.url}
               title="${mediaToRender.title}"
@@ -224,7 +223,6 @@ export class FrigateCardViewer extends LitElement {
             >
             </ha-hls-player>`
           : html`<video
-              class="media"
               title="${mediaToRender.title}"
               muted
               controls
@@ -237,7 +235,6 @@ export class FrigateCardViewer extends LitElement {
             </video>`
         : html`<img
             src=${resolvedMedia.url}
-            class="media"
             title="${mediaToRender.title}"
             @click=${() => {
               // Get clips potentially related to this snapshot.
diff --git a/src/scss/common.scss b/src/scss/button.scss
similarity index 91%
rename from src/scss/common.scss
rename to src/scss/button.scss
index 068edef6..9c4746a3 100644
--- a/src/scss/common.scss
+++ b/src/scss/button.scss
@@ -14,7 +14,3 @@ ha-icon-button.button {
 ha-icon-button.button.emphasize {
   color: var(--primary-color, white);
 }
-
-video, img {
-  display: block;
-}
\ No newline at end of file
diff --git a/src/scss/card.scss b/src/scss/card.scss
index bbb38c8d..9b5de207 100644
--- a/src/scss/card.scss
+++ b/src/scss/card.scss
@@ -1,5 +1,3 @@
-@use './common.scss';
-
 .container_16_9 {
   /* 16:9 Aspect Ratio. When Safari supports 'aspect-ratio' this should not be
      necessary */
@@ -65,7 +63,6 @@ ha-card {
   color: var(--secondary-text-color, white);
   background-color: var(--secondary-background-color, black);
 
-  transform-style: preserve-3d; /* Safari brings video elements forward without this */
 }
 
 ha-card a {
diff --git a/src/scss/menu.scss b/src/scss/menu.scss
index ede9f006..1598ab61 100644
--- a/src/scss/menu.scss
+++ b/src/scss/menu.scss
@@ -1,4 +1,4 @@
-@use './common.scss';
+@use './button.scss';
 
 .frigate-card-menu {
   z-index: 1;
@@ -37,4 +37,4 @@
 .frigate-card-menu.full {
   width: 100%;
   background: var(--secondary-background-color);
-}
\ No newline at end of file
+}
diff --git a/src/scss/next-previous-control.scss b/src/scss/next-previous-control.scss
index 96db20f6..cb21f094 100644
--- a/src/scss/next-previous-control.scss
+++ b/src/scss/next-previous-control.scss
@@ -1,4 +1,4 @@
-@use './common.scss';
+@use './button.scss';
 
 .controls {
   position: absolute;
@@ -36,4 +36,4 @@
 
 .controls.next.thumbnails:hover {
   right: 33px;
-}
\ No newline at end of file
+}
diff --git a/src/scss/viewer.scss b/src/scss/viewer.scss
index f8f34bdf..5e67639b 100644
--- a/src/scss/viewer.scss
+++ b/src/scss/viewer.scss
@@ -1,3 +1,4 @@
-img.media,video.media,canvas.media {
+img,video {
   width: 100%;
+  height: 100%;
 }
\ No newline at end of file