Be more consistent in choice of background colors

src/card.ts

@@ -172,6 +172,7 @@ export class FrigateCard extends LitElement {
   protected _conditionState?: ConditionState;
 
   protected _refMenu: Ref<FrigateCardMenu> = createRef();
+  protected _refMain: Ref<HTMLElement> = createRef();
   protected _refElements: Ref<FrigateCardElements> = createRef();
   protected _refImage: Ref<FrigateCardImage> = createRef();
   protected _refLive: Ref<FrigateCardLive> = createRef();
@@ -927,7 +928,7 @@ export class FrigateCard extends LitElement {
       this._message = null;
     }
 
-    if (args?.view === undefined) {
+    if (!args?.view) {
       // Load the default view.
       let camera;
       if (this._cameras?.size) {
@@ -948,6 +949,7 @@ export class FrigateCard extends LitElement {
           camera: camera,
         });
         this._generateConditionState();
+        this._resetMainScroll();
 
         // Restart the update timer, so the default view is refreshed at a fixed
         // interval from now (if so configured).
@@ -956,6 +958,7 @@ export class FrigateCard extends LitElement {
     } else {
       this._view = args.view;
       this._generateConditionState();
+      this._resetMainScroll();
     }
   }
 
@@ -1580,10 +1583,21 @@ export class FrigateCard extends LitElement {
       this._message = message;
       if (!skipUpdate) {
         this.requestUpdate();
+        this._resetMainScroll();
       }
     }
   }
 
+  /**
+   * Reset the scroll of the main pane to the top (example usecase: scrolling
+   * half way down the gallery, then viewing diagnostics should result in
+   * diagnostics starting at the top).
+   */
+  protected _resetMainScroll(): void {
+    // Reset the scroll on the main div to the top.
+    this._refMain.value?.scroll({top: 0});
+  }
+
   /**
    * Handle a message event to render to the user.
    * @param e The message event.
@@ -1768,7 +1782,10 @@ export class FrigateCard extends LitElement {
       @frigate-card:render=${() => this.requestUpdate()}
     >
       ${renderMenuAbove ? this._renderMenu() : ''}
-      <div class="${classMap(mainClasses)}">
+      <div 
+        ${ref(this._refMain)}
+        class="${classMap(mainClasses)}"
+      >
         ${this._cameras === undefined && !this._message
           ? until(
               (async () => {

src/scss/card.scss

@@ -16,7 +16,6 @@ div.main {
   height: 100%;
   margin: auto;
   display: flex;
-  align-items: center;
   justify-content: center;
 
   // Need to apply the border radius on the container level, as the ha-card has
@@ -80,7 +79,11 @@ ha-card {
   height: 100%;
   position: static;
   color: var(--secondary-text-color, white);
-  background-color: var(--secondary-background-color, black);
+
+  // The primary border-radius used is the div.main, since this one has overflow
+  // explicitly visible this is only useful for keeping the background-color
+  // within the radius.
+  border-radius: var(--ha-card-border-radius, 4px);
 }
 
 frigate-card-live.hidden {
@@ -88,17 +91,18 @@ frigate-card-live.hidden {
   display: none;
 }
 
+/************
+ * Fullscreen
+ *************/
+
 // Browsers will reject invalid whole CSS selectors if one selector is bad, so
 // need to use mixin here instead of just comma-separated selectors.
 //  - Related: https://stackoverflow.com/questions/16982449/why-isnt-it-possible-to-combine-vendor-specific-pseudo-elements-classes-into-on
 @mixin fullscreen-ha-card {
-  // Make the background black, to give it the expected fullscreen feel.
-  background-color: black;
-
   // Hide corners on Safari fullscreen.
   border-radius: 0px;
 
-  // Theme styles may set these which is not helpful in fullscreen mode, reset
+  // Theme styles may set these which are not helpful in fullscreen mode, reset
   // them.
   box-shadow: none;
   margin: 0;
@@ -112,9 +116,17 @@ frigate-card-live.hidden {
 :host(:-webkit-full-screen) #ha-card {
   @include fullscreen-ha-card;
 }
-:host(:-moz-full-screen) #ha-card {
+
-  @include fullscreen-ha-card;
+@mixin fullscreen-no-rounded-corners {
+  // Hide corners on Safari fullscreen.
+  border-radius: 0px;
 }
-:host(:-ms-fullscreen) #ha-card {
+
-  @include fullscreen-ha-card;
+:host(:fullscreen) div.main,
+:host(:fullscreen) frigate-card-menu {
+  @include fullscreen-no-rounded-corners;
+}
+:host(:-webkit-full-screen) div.main,
+:host(:-webkit-full-screen) frigate-card-menu {
+  @include fullscreen-no-rounded-corners;
 }

src/scss/elements.scss

@@ -17,6 +17,6 @@
 // (e.g. custom picture element that does not exist).
 hui-error-card.element {
   inset: 0px;
-  background-color: var(--secondary-background-color, black);
+  background-color: var(--card-background-color, black);
   transform: unset;
 }

src/scss/gallery.scss

@@ -29,10 +29,12 @@
   align-items: center;
   box-sizing: border-box;
   text-align: center;
-  opacity: 0.7;
   color: var(--primary-text-color, white);
   border: 2px ridge var(--primary-text-color, black);
   border-radius: var(--ha-card-border-radius, 4px);
+
+  // Folder background color should match the thumbnail element background
+  // color.
   background-color: var(--primary-background-color, black);
   padding: 10px;
   line-height: 1;

src/scss/live-webrtc.scss

@@ -7,7 +7,7 @@
 /* Don't drop shadow or have radius for nested webrtc card */
 #webrtc ha-card {
   border-radius: 0px;
-  background-color: black;
+  background-color: unset;
 
   // To get the WebRTC player to line up correctly with some themes.
   margin: 0px;

src/scss/message.scss

@@ -1,5 +1,5 @@
 :host {
-  height: 100%;
+  min-height: 100%;
   width: 100%;
   display: block;