Update live to use the new surround.

src/scss/carousel.scss

@@ -23,17 +23,15 @@ img,video {
   width: 100%;
   height: 100%;
 
-  flex-direction: column;
-
   user-select: none;
   -webkit-touch-callout: none;
   -khtml-user-select: none;
   -webkit-tap-highlight-color: transparent;
 }
-:host([direction="vertical"]) .embla__container {
+:host([direction=vertical]) .embla__container {
   flex-direction: column;
 }
-:host([direction="horizontal"]) .embla__container {
+:host([direction=horizontal]) .embla__container {
   flex-direction: row;
 }
 
@@ -60,10 +58,10 @@ img,video {
   height: 100%;
   overflow: visible;
 }
-:host([direction="vertical"]) .embla__slide {
+:host([direction=vertical]) .embla__slide {
   margin-bottom: 5px;
 }
-:host([direction="horizontal"]) .embla__slide {
+:host([direction=horizontal]) .embla__slide {
   margin-right: 5px;
 }
 .embla__slide img,video {

src/scss/drawer.scss

@@ -8,6 +8,7 @@ side-drawer {
 div.control-surround {
   position: absolute;
   bottom: 50%;
+  transform: translateY(50%);
   z-index: 0;
   padding-top: $drawer-padding-extend;
   padding-bottom: $drawer-padding-extend;
@@ -29,19 +30,20 @@ div.control-surround {
 
 ha-icon.control {
   color: var(--secondary-color, white);
-  background-color: rgba(0, 0, 0, 0.6);
-  opacity: 0.6;
+  background-color: rgba(0, 0, 0, 0.7);
+  opacity: 0.7;
   pointer-events: all;
 
   --mdc-icon-size: #{$drawer-icon-size};
   padding-top: $drawer-padding-extend;
   padding-bottom: $drawer-padding-extend;
 
-  transition: opacity 1s ease;
+  transition: opacity 0.5s ease;
 }
 
-:host([open]) ha-icon.control {
-  // When the drawer is open make the button to close it more prominent.
+:host([open]) ha-icon.control, ha-icon.control:hover {
+  // When the drawer is open or hovered make the button to close it more
+  // prominent.
   opacity: 1;
   background-color: black;
 }

src/scss/surround.scss

@@ -6,7 +6,7 @@
   display: flex;
   flex-direction: column;
 
-  // So the drawer is relative to this host.
+  // Set the drawer relative to this host.
   position: relative;
 }
 

src/scss/thumbnail-carousel.scss

@@ -1,5 +1,5 @@
 :host {
-  --frigate-card-carousel-thumbnail-opacity: 0.8;
+  --frigate-card-carousel-thumbnail-opacity: 1.0;
 }
 
 :host([direction=vertical]) {