Initial split of menu mode.

src/scss/card.scss

@@ -29,11 +29,14 @@
   height: inherit;
   margin: auto;
   overflow: auto;
-  -ms-overflow-style: none; /* Hide scrollbar: IE and Edge */
-  scrollbar-width: none;    /* Hide scrollbar: Firefox */
   display: flex;
   align-items: center;
   justify-content: center;
+
+  // Hide scrollbar: Firefox
+  scrollbar-width: none;
+  // Hide scrollbar: IE and Edge
+  -ms-overflow-style: none;
 }
 
 /* Hide scrollbar for Chrome, Safari and Opera */
@@ -51,16 +54,17 @@
 }
 
 /* The 'hover' menu mode is styling applied outside of the menu itself */
-frigate-card-menu[data-mode^=hover-] {
+frigate-card-menu[data-style='hover'] {
   z-index: 1;
   transition: opacity 0.5s ease;
 }
 
-.outer + frigate-card-menu[data-mode^=hover-] {
-  opacity: 0.0;
+.outer + frigate-card-menu[data-style='hover'] {
+  opacity: 0;
 }
-.outer:hover + frigate-card-menu[data-mode^=hover-], frigate-card-menu[data-mode^=hover-]:hover {
-  opacity: 1.0;
+.outer:hover + frigate-card-menu[data-style='hover'],
+frigate-card-menu[data-mode='hover']:hover {
+  opacity: 1;
 }
 
 ha-card {
@@ -78,7 +82,7 @@ ha-card {
   border-radius: var(--ha-card-border-radius, 4px);
 }
 
-frigate-card-live.hidden  {
+frigate-card-live.hidden {
   // Live view will be rendered but hidden for live preloading.
   display: none;
 }