Initial mini-timeline commit.

src/scss/timeline-core.scss

@@ -4,10 +4,6 @@
 
 :host {
   width: 100%;
-  height: 100%;
-  background-color: var(--card-background-color);
-  padding-bottom: 5px;
-
   // Share the screen space with thumbnails that may be above/below.
   display: flex;
   flex-direction: column;
@@ -27,14 +23,6 @@ frigate-card-thumbnail[details] {
 div.timeline {
   flex: 1;
 }
-div.timeline.left-margin {
-  // Clearance for the drawer button.
-  margin-left: calc(drawer.$drawer-icon-size + 1px);
-}
-div.timeline.right-margin {
-  // Clearance for the drawer button.
-  margin-right: calc(drawer.$drawer-icon-size + 1px);
-}
 
 .vis-text {
   color: var(--primary-text-color) !important;
@@ -68,6 +56,14 @@ div.timeline.right-margin {
   opacity: 0.1;
 }
 
+// If there are no timeline groups shown (e.g. mini mode with a single camera),
+// ensure the background (recordings) always span the full height. Otherwise, in
+// cases where there are no events, the background is incorrectly rendered too
+// short by visjs.
+:host:not([groups]) .vis-item.vis-background {
+  min-height: 100%;
+}
+
 .vis-item:not(.vis-background) {
   cursor: pointer;
 }
@@ -127,3 +123,21 @@ div.vis-tooltip {
   // Use browser default font-family for tooltips.
   font-family: unset;
 }
+
+.target_bar {
+  border-left: 2px solid var(--primary-color);
+  opacity: 0.7;
+  box-shadow: 0px 0px 3px 1px var(--primary-color);
+
+  // Prevent the mouse interacting with the custom time.
+  pointer-events: none;
+}
+
+ha-icon.lock {
+  position: absolute;
+  right: 2px;
+  bottom: 2px;
+  color: var(--primary-color);
+  z-index: 10;
+  cursor: pointer;
+}