Various timeline fixes for Safari

src/scss/card.scss

@@ -57,10 +57,6 @@ div.main::-webkit-scrollbar {
 frigate-card-menu[data-style='hover'] {
   z-index: 1;
   transition: opacity 0.5s ease;
-
-  // In hover mode, the full menu is responsive to the pointer (prevents the
-  // hover menu from disappearing when the cursor is between buttons).
-  pointer-events: all;
 }
 
 .main + frigate-card-menu[data-style='hover'] {
@@ -99,11 +95,14 @@ frigate-card-live.hidden {
 
   // Hide corners on Safari fullscreen.
   border-radius: 0px;
+  margin: 0;
 }
 :host(:fullscreen) ha-card {
   @include fullscreen-ha-card;
 }
-:host(:-webkit-full-screen) ha-card {
+// Need to use an id selector here to overcome card styling that is incorrectly
+// shown in Safari that causes the wrong margin to apply in fullscreen mode.
+:host(:-webkit-full-screen) #ha-card {
   @include fullscreen-ha-card;
 }
 :host(:-moz-full-screen) ha-card {

src/scss/timeline-core.scss

@@ -54,6 +54,14 @@ div.timeline.right-margin {
   background: none;
   color: var(--primary-text-color);
   background-color: var(--primary-color);
+
+  transition: background-color ease-in-out 1s, border-color ease-in-out 1s,
+    box-shadow ease-in-out 1s;
+}
+.vis-item.vis-selected {
+  border-color: var(--accent-color);
+  background-color: var(--accent-color);
+  box-shadow: 0px 0px 5px 1px var(--primary-color);
 }
 .vis-item.vis-background {
   background-color: var(--primary-color);
@@ -92,7 +100,8 @@ div.timeline.right-margin {
 }
 
 // Give an indication that the user can interact with the axes.
-.vis-text.vis-minor, .vis-label {
+.vis-text.vis-minor,
+.vis-label {
   transition: background-color 0.5s ease-out;
 }
 :host([recordings]) .vis-text.vis-minor:hover,