Ensure video list buttons always show on devices without hover (e.g.,…

… mobile)
kommunarr · Aug 27, 2023 · ec538dd · ec538dd
1 parent dfaf498
commit ec538dd
Showing 1 changed file with 32 additions and 18 deletions.
diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss
@@ -71,24 +71,6 @@ $watched-transition-duration: 0.5s;
     }
   }
 
-  &:hover .favoritesIcon,
-  &:hover .externalPlayerIcon,
-  &:hover .optionsButton,
-  &:focus-within .favoritesIcon,
-  &:focus-within .externalPlayerIcon,
-  &:focus-within .optionsButton {
-    visibility: visible;
-    opacity: 1;
-  }
-
-  .favoritesIcon,
-  .externalPlayerIcon,
-  .optionsButton {
-    visibility: none;
-    opacity: 0;
-    transition: visibility 0s, opacity 0.2s linear;
-  }
-
   .videoThumbnail {
     display: grid;
 
@@ -316,12 +298,44 @@ $watched-transition-duration: 0.5s;
       margin-top: 8px;
     }
   }
+
+  .favoritesIcon,
+  .externalPlayerIcon {
+    opacity: $thumbnail-overlay-opacity;
+  }
+
+  @media (hover: hover) {
+    &:hover .favoritesIcon,
+    &:hover .externalPlayerIcon,
+    &:focus-within .favoritesIcon,
+    &:focus-within .externalPlayerIcon,
+    &:focus-within .optionsButton {
+      visibility: visible;
+      opacity: $thumbnail-overlay-opacity;
+    }
+
+    &:hover .optionsButton,
+    &:focus-within .optionsButton {
+      visibility: visible;
+      opacity: 1;
+    }
+
+    .favoritesIcon,
+    .externalPlayerIcon,
+    .optionsButton {
+      visibility: none;
+      opacity: 0;
+      transition: visibility 0s, opacity 0.2s linear;
+    }
+  }
 }
 
 .videoWatched,
 .live,
 .upcoming {
   text-transform: uppercase;
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 // we use h3 for semantic reasons but don't want to keep the h3 style