Improve rendering on light backgrounds.

src/scss/thumbnail-feature-recording.scss

@@ -11,7 +11,8 @@
   max-height: var(--frigate-card-thumbnail-size-max);
   padding: 10px;
 
-  border: 1px solid rgba(255,255,255,0.3);
+  border: 1px solid var(--secondary-color);
+  background-color: var(--secondary-background-color);
   border-radius: var(--ha-card-border-radius, 4px);
   box-sizing: border-box;
 

src/scss/thumbnail.scss

@@ -21,7 +21,6 @@
 
 ha-icon {
   position: absolute;
-  background: rgba(0, 0, 0, 0.2);
   border-radius: 50%;
 }
 

src/scss/timeline-core.scss

@@ -47,7 +47,8 @@ div.timeline.right-margin {
   background-color: var(--primary-color);
 }
 .vis-item.vis-background {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: var(--primary-color);
+  opacity: 0.1;
 }
 
 .vis-item:not(.vis-background) {
@@ -79,6 +80,14 @@ div.timeline.right-margin {
   border-color: var(--secondary-color);
 }
 
+// Give an indication that the user can interact with the axes.
+.vis-text.vis-minor, .vis-label {
+  transition: background-color 0.5s ease-out;
+}
+.vis-text.vis-minor:hover, .vis-label:hover {
+  background-color: var(--primary-color);
+}
+
 .vis-time-axis .vis-grid.vis-major {
   border-color: var(--secondary-color);
 }