X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fshared%2Fvideo%2Fvideo-thumbnail.component.scss;h=4772edaf0a6c3a203739c3d04399c5e8406c4a6e;hb=cdf4cb9eaf5f6bc71f7c1e1963c07575f1d2593d;hp=0fc2df220028fd31975000b71278e9e7711dbe5e;hpb=63c4db6d71b98523753c51747e308682d9a2e8a0;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 0fc2df220..4772edaf0 100644
--- a/client/src/app/shared/video/video-thumbnail.component.scss
+++ b/client/src/app/shared/video/video-thumbnail.component.scss
@@ -6,14 +6,40 @@
   position: relative;
   border-radius: 4px;
   overflow: hidden;
+  width: $video-thumbnail-width;
+  height: $video-thumbnail-height;
+  background-color: #ececec;
 
   &:hover {
     text-decoration: none !important;
   }
 
-  img.blur-filter {
-    filter: blur(5px);
-    transform : scale(1.03);
+  @include disable-outline;
+  &.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);
+    }
+  }
+
+  .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 {