Show video list buttons on hover or focus (#3954)

* Implement external player icon and favorites icon only appearing after hover/focus

As a way of cleaning up the look of videos, only shows the video icons on hover or focus. This is for all purposes a very 'free' change that I would opine makes FreeTube appear much cleaner.

* Implement video list settings button only appearing on hover/focus

Same idea as for the favorites & external player icons; much cleaner look without any sizable 'cost' to boot.

* Ensure video list buttons always show on devices without hover (e.g., mobile)

* Remove user-select lines (already in another PR) & one extraneous line

src/renderer/scss-partials/_ft-list-item.scss

@@ -141,15 +141,13 @@ $watched-transition-duration: 0.5s;
       justify-self: left;
       margin-bottom: 4px;
       margin-left: 4px;
-      opacity: $thumbnail-overlay-opacity;
     }
 
     .favoritesIcon {
       font-size: 17px;
       justify-self: right;
       margin-right: 3px;
       margin-top: 3px;
-      opacity: $thumbnail-overlay-opacity;
       height: fit-content;
     }
 
@@ -298,6 +296,35 @@ $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 {
+      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,