]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blobdiff - client/src/app/shared/video/video-miniature.component.scss
Use default nsfw instance policy for search index
[github/Chocobozzz/PeerTube.git] / client / src / app / shared / video / video-miniature.component.scss
index 34f34f2287a8fb08bd998a17a7dbf6b4daff503b..99bd9c15b850b9c3486cc2a8a819dd70d07891b5 100644 (file)
@@ -2,14 +2,13 @@
 @import '_mixins';
 @import '_miniature';
 
-$more-button-width: 41px;
+$more-button-width: 40px;
 $more-margin-right: 15px;
 
 .video-miniature {
   display: inline-flex;
   flex-direction: column;
-  margin-bottom: $video-miniature-margin-bottom;
-  height: 195px;
+  padding-bottom: $video-miniature-margin-bottom;
   vertical-align: top;
 
   .video-bottom {
@@ -18,16 +17,27 @@ $more-margin-right: 15px;
     .video-miniature-information {
       width: $video-miniature-width - $more-button-width - $more-margin-right;
       line-height: normal;
-      font-size: 13px;
+
+      .avatar {
+        margin: 10px 10px 0 0;
+
+        img {
+          @include avatar(40px);
+        }
+      }
 
       .video-miniature-name {
         @include miniature-name;
-        font-size: 110%;
+      }
+
+      .video-miniature-meta {
+        width: calc(100% + #{$more-button-width});
+        overflow: hidden;
       }
 
       .video-miniature-created-at-views {
         display: block;
-        font-size: 95%;
+        font-size: 13px;
       }
 
       .video-miniature-account,
@@ -36,7 +46,7 @@ $more-margin-right: 15px;
         @include ellipsis;
 
         display: block;
-        font-size: 95%;
+        font-size: 13px;
         color: pvar(--greyForegroundColor);
 
         &:hover {
@@ -108,14 +118,12 @@ $more-margin-right: 15px;
 
   &.fit-width {
     width: 100%;
-    height: unset;
-    margin-bottom: $video-miniature-margin-bottom / 2;
 
     .video-bottom {
       width: 100% !important;
 
       .video-miniature-information {
-        width: calc(100% - 40px) !important;
+        width: calc(100% - #{$more-button-width}) !important;
       }
     }
 
@@ -126,7 +134,7 @@ $more-margin-right: 15px;
 
   &.display-as-row {
     flex-direction: row;
-    margin-bottom: 0;
+    padding-bottom: 0;
     height: auto;
     display: flex;
     flex-grow: 1;