fix: Add additional troubleshooting pointers for stream load errors (#1844)

[skip ci]

src/scss/live-provider.scss

@@ -16,4 +16,5 @@ frigate-card-icon {
   top: 10px;
   right: 10px;
   color: var(--primary-color);
+  cursor: help;
 }

src/scss/message.scss

@@ -1,10 +1,6 @@
 @use 'dotdotdot.scss';
 
 :host {
-  display: block;
-  height: 100%;
-  width: 100%;
-
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -13,8 +9,22 @@
   user-select: text;
   // Safari only has prefixed support.
   -webkit-user-select: text;
+}
 
-  color: var(--primary-text-color);
+:host(:not([overlay])) {
+  height: 100%;
+  width: 100%;
+
+  background: var(--frigate-card-message-background);
+  color: var(--frigate-card-message-color);
+}
+
+:host([overlay]) {
+  position: absolute;
+  inset: 5%;
+
+  background: var(--frigate-card-message-overlay-background);
+  color: var(--frigate-card-message-overlay-color);
 }
 
 div.wrapper {
@@ -50,14 +60,21 @@ div.message div.icon {
   flex-direction: column;
 }
 
-.message a {
-  color: var(--primary-text-color, white);
+a {
   word-break: break-word;
 }
 
+:host(:not([overlay])) a {
+  color: var(--frigate-card-message-color);
+}
+
+:host([overlay]) a {
+  color: var(--frigate-card-message-overlay-color);
+}
+
 .message pre {
   margin-top: 20px;
   overflow-x: auto;
-  border: 1px dotted var(--divider-color);
+  border: 1px dotted var(--frigate-card-divider-color);
   padding: 1em;
 }

src/scss/themes/base.scss

@@ -133,4 +133,15 @@
     --frigate-card-control-background-transparent
   );
   --frigate-card-loading-foreground-color: var(--frigate-card-control-foreground);
+
+  /*********
+   * Message
+   *********/
+  --frigate-card-message-color: var(--frigate-card-text-color);
+  --frigate-card-message-background: var(--frigate-card-background);
+
+  --frigate-card-message-overlay-background: var(
+    --frigate-card-control-background-transparent
+  );
+  --frigate-card-message-overlay-color: var(--frigate-card-control-foreground);
 }