Be more consistent in choice of background colors

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;