X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fshared%2Fvideo%2Fvideo-thumbnail.component.scss;h=b9fd9182f08f256ec79bbe7c235798ccbd34938d;hb=84c7cde6e81426a42e7aa29187b473bc89f1c8f6;hp=ab4f9bcb14ac525439b87d4a990787f37356f222;hpb=202f6b6c9dcc9b0aec4b0c1b15e455c22a7952a7;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/app/shared/video/video-thumbnail.component.scss b/client/src/app/shared/video/video-thumbnail.component.scss
index ab4f9bcb1..b9fd9182f 100644
--- a/client/src/app/shared/video/video-thumbnail.component.scss
+++ b/client/src/app/shared/video/video-thumbnail.component.scss
@@ -1,16 +1,78 @@
+@import '_variables';
+@import '_mixins';
+
+$play-overlay-transition: 0.2s ease;
+$play-overlay-height: 26px;
+$play-overlay-width: 18px;
+
 .video-thumbnail {
+  @include disable-outline;
+
   display: inline-block;
   position: relative;
-  border-radius: 4px;
+  border-radius: 3px;
   overflow: hidden;
+  width: $video-thumbnail-width;
+  height: $video-thumbnail-height;
+  background-color: #ececec;
+  transition: filter $play-overlay-transition;
 
   &:hover {
     text-decoration: none !important;
+
+    filter: brightness(85%);
+
+    .play-overlay {
+      opacity: 1;
+
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+
+  &.focus-visible {
+    box-shadow: 0 0 0 2px var(--mainColor);
+  }
+
+  img {
+    width: $video-thumbnail-width;
+    height: $video-thumbnail-height;
+
+    &.blur-filter {
+      filter: blur(5px);
+      transform : scale(1.03);
+    }
+  }
+
+  .play-overlay {
+    width: 0;
+    height: 0;
+
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%) scale(0.5);
+
+    transition: all $play-overlay-transition;
+
+    border-top: ($play-overlay-height / 2) solid transparent;
+    border-bottom: ($play-overlay-height / 2) solid transparent;
+
+    border-left: $play-overlay-width solid rgba(255, 255, 255, 0.95);
+
+    opacity: 0;
   }
 
-  img.blur-filter {
-    filter: blur(5px);
-    transform : scale(1.03);
+  .progress-bar {
+    height: 3px;
+    width: 100%;
+    position: relative;
+    top: -3px;
+    background-color: rgba(0, 0, 0, 0.20);
+
+    div {
+      height: 100%;
+      background-color: var(--mainColor);
+    }
   }
 
   .video-thumbnail-overlay {