Merge branch 'release/v1.3.0' into develop

[github/Chocobozzz/PeerTube.git] / client / src / sass / include / _miniature.scss

diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 95b7592251315edd6938fef559f2f5738f3f460b..b62187fd2ef69c0fca178947646bef738677f7a9 100644 (file)
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -2,16 +2,12 @@
 @import '_mixins';
 
 @mixin miniature-name {
-  @include ellipsis-multiline(
-    $font-size: 1rem,
-    $line-height: 1,
-    $lines-to-show: 2
-  );
+  @include ellipsis-multiline(1.1em, 2);
+
   transition: color 0.2s;
-  font-size: 16px;
   font-weight: $font-semibold;
   color: var(--mainForegroundColor);
-  margin-top: 5px;
+  margin-top: 10px;
   margin-bottom: 5px;
 
   &:hover {
@@ -31,7 +27,8 @@ $play-overlay-width: 18px;
 @mixin miniature-thumbnail {
   @include disable-outline;
 
-  display: inline-block;
+  display: flex;
+  flex-direction: column;
   position: relative;
   border-radius: 3px;
   overflow: hidden;
@@ -91,7 +88,7 @@ $play-overlay-width: 18px;
     height: inherit;
 
     &.blur-filter {
-      filter: blur(5px);
+      filter: blur(20px);
       transform : scale(1.03);
     }
   }
@@ -121,6 +118,7 @@ $play-overlay-width: 18px;
 
     .video-miniature-information {
       width: 100% !important;
+      text-align: left;
 
       span {
         width: 100%;
@@ -128,12 +126,14 @@ $play-overlay-width: 18px;
     }
 
     .video-thumbnail {
-      width: 100%;
-      height: auto;
+      margin: 0 -15px 10px -15px;
+      width: 100vw;
+      height: calc(100vw / #{$video-thumbnail-ratio});
+      border-radius: 0;
 
       img {
         width: 100%;
-        height: auto;
+        height: 100%;
       }
     }
   }