X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fsass%2Finclude%2F_miniature.scss;h=c1d1b3c590afc82fd372ad53aa3d321174efff7f;hb=23f1b9da1577c64e2caa1dff8f3aa92eb8d184cf;hp=3afcca310fc883a7c2def8f0a2c491eabe4c4a72;hpb=c8487f3f63c90fbfddaa906b3cbd90fb209ab1bb;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 3afcca310..c1d1b3c59 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -45,7 +45,7 @@ $play-overlay-width: 18px;
     width: inherit;
     height: inherit;
     opacity: 0;
-    background-color: rgba(0, 0, 0, 0.7);
+    background-color: rgba(0, 0, 0, 0.3);
 
     &, .icon {
       transition: all $play-overlay-transition;
@@ -95,7 +95,7 @@ $play-overlay-width: 18px;
 }
 
 @mixin thumbnail-size-component ($width, $height) {
-  /deep/ .video-thumbnail {
+  ::ng-deep .video-thumbnail {
     width: $width;
     height: $height;
   }
@@ -110,7 +110,7 @@ $play-overlay-width: 18px;
 @mixin video-miniature-small-screen {
   text-align: center;
 
-  /deep/ .video-miniature {
+  ::ng-deep .video-miniature {
     padding-right: 0;
     height: auto;
     width: 100%;
@@ -140,12 +140,12 @@ $play-overlay-width: 18px;
 }
 
 @mixin miniature-rows {
-  max-height: 540px; // 2 rows max
-  overflow: hidden;
-  padding-top: 10px;
-
   &:first-child {
     padding-top: 30px;
+
+    .section-title {
+      border-top: none !important;
+    }
   }
 
   my-video-miniature {
@@ -155,7 +155,11 @@ $play-overlay-width: 18px;
   .section-title {
     font-size: 24px;
     font-weight: $font-semibold;
-    margin-bottom: 30px;
+    padding-top: 15px;
+    margin-bottom: 15px;
+    display: flex;
+    justify-content: space-between;
+    border-top: 1px solid $separator-border-color;
 
     a {
       &:hover, &:focus:not(.focus-visible), &:active {
@@ -192,6 +196,18 @@ $play-overlay-width: 18px;
     }
   }
 
+  .show-more {
+    position: relative;
+    top: -5px;
+    display: inline-block;
+    font-size: 16px;
+    text-transform: uppercase;
+    color: $grey-foreground-color;
+    margin-bottom: 10px;
+    font-weight: $font-semibold;
+    text-decoration: none;
+  }
+
   @media screen and (max-width: $mobile-view) {
     max-height: initial;
     overflow: initial;
@@ -224,7 +240,7 @@ $play-overlay-width: 18px;
     width: $video-miniature-width * 2;
   }
 
-  @media screen and (max-width: 500px) {
+  @media screen and (max-width: $mobile-view) {
     width: auto;
     margin: 0 !important;