Improve CSS encapslation (Chrome).

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.

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;
-}

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 {

src/scss/menu.scss

@@ -1,4 +1,4 @@
-@use './common.scss';
+@use './button.scss';
 
 .frigate-card-menu {
   z-index: 1;

src/scss/next-previous-control.scss

@@ -1,4 +1,4 @@
-@use './common.scss';
+@use './button.scss';
 
 .controls {
   position: absolute;

src/scss/viewer.scss

@@ -1,3 +1,4 @@
-img.media,video.media,canvas.media {
+img,video {
   width: 100%;
+  height: 100%;
 }