Convert timeline to bars rather than icons.

src/scss/timeline-event.scss

@@ -4,17 +4,13 @@
   height: 100%;
 
   --frigate-card-timeline-thumbnail-size: 75px;
+
+  border-radius: 5px;
+  overflow: hidden;
 }
 
 img {
   width: var(--frigate-card-timeline-thumbnail-size);
   height: var(--frigate-card-timeline-thumbnail-size);
   display: block;
-  border-radius: 5px;
-  transition: transform 0.2s linear;
-  border: 1px solid black;
-}
-
-img:hover {
-  transform: scale(1.04);
 }

src/scss/timeline.scss

@@ -17,12 +17,19 @@ div.timeline {
 }
 
 .vis-timeline {
-  border: hidden;
+  border: none;
+}
+
+.vis-labelset .vis-label {
+  // Group labels.
+  color: var(--primary-text-color);
 }
 
 .vis-item {
   border-color: var(--primary-color);
   background: none;
+  color: var(--primary-text-color);
+  background-color: var(--primary-color);
 }
 
 .vis-item:hover {
@@ -31,7 +38,7 @@ div.timeline {
 }
 
 .vis-item.vis-box {
-  border-style: hidden;
+  border: none;
 }
 
 .vis-item .vis-item-content {
@@ -39,13 +46,14 @@ div.timeline {
 }
 
 .vis-item.vis-cluster {
-  width: 30px;
-  height: 30px;
   border-style: dotted;
-  border-radius: 50%;
-  padding: 5px;
-
   color: var(--primary-text-color);
   background-color: var(--primary-background-color);
-  box-shadow: 0px 0px 20px 5px var(--primary-color);
-}
+  box-shadow: 0px 0px 5px 1px var(--primary-color);
+}
+
+div.vis-tooltip {
+  padding: 0px;
+  background-color: unset;
+  border: none;
+}