Fix instance accordion line height

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-video-miniature / video-miniature.component.scss

diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
index 39d6e97c9de25695612f62c2227f58d7cdc31038..a397efdca923ac8a0a424c9b53a9b028eb41905f 100644 (file)
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
@@ -1,9 +1,13 @@
-@import '_variables';
-@import '_mixins';
-@import '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
 
 $more-button-width: 40px;
 
+.video-miniature {
+  font-size: 14px;
+}
+
 .video-miniature-name {
   @include miniature-name;
 }
@@ -12,16 +16,8 @@ $more-button-width: 40px;
   width: calc(100% - #{$more-button-width});
 }
 
-.avatar {
-  margin: 10px 10px 0 0;
-
-  img:not(.channel) {
-    @include avatar(40px);
-  }
-
-  img.channel {
-    @include channel-avatar(40px);
-  }
+my-actor-avatar {
+  @include margin(10px, 10px, 0, 0);
 }
 
 .video-miniature-created-at-views {
@@ -49,7 +45,7 @@ $more-button-width: 40px;
 }
 
 .video-info-blocked {
-  color: red;
+  color: #ff0000;
 
   .blocked-reason::before {
     content: ' - ';
@@ -57,7 +53,7 @@ $more-button-width: 40px;
 }
 
 .video-info-nsfw {
-  color: red;
+  color: #ff0000;
 }
 
 .video-actions {
@@ -81,9 +77,9 @@ $more-button-width: 40px;
   }
 }
 
-.video-miniature {
-  &:hover ::ng-deep .video-thumbnail-actions-overlay,
-  &:hover .video-actions ::ng-deep .dropdown-root {
+.video-miniature:hover {
+  ::ng-deep .video-thumbnail-actions-overlay,
+  .video-actions ::ng-deep .dropdown-root {
     opacity: 1 !important;
   }
 }
@@ -97,15 +93,15 @@ $more-button-width: 40px;
   width: 100%;
 
   my-video-thumbnail {
-    @include large-screen-ratio($selector: '::ng-deep .video-thumbnail');
+    @include block-ratio($selector: '::ng-deep .video-thumbnail');
   }
 
   .video-bottom {
     display: flex;
     width: 100%;
+    min-width: 1px;
   }
 
-
   .video-miniature-name {
     margin-top: 10px;
     margin-bottom: 5px;
@@ -154,28 +150,30 @@ $more-button-width: 40px;
 
   .video-bottom {
     display: flex;
+    min-width: 1px;
   }
 
   // We don't display avatar in row mode
-  .avatar {
+  .channel-avatar {
     display: none;
   }
 
   my-video-thumbnail {
+    @include margin-right(10px);
+
     min-width: var(--rowThumbnailWidth);
     max-width: var(--rowThumbnailWidth);
     height: var(--rowThumbnailHeight);
-    margin-right: 10px;
   }
 
   .video-miniature-name {
-    @include ellipsis-multiline(1.3em, 2);
+    @include ellipsis-multiline($video-miniature-row-name-font-size, 2);
   }
 
   .video-miniature-created-at-views,
   .video-miniature-account,
   .video-miniature-channel {
-    font-size: 14px;
+    font-size: $video-miniature-row-info-font-size;
   }
 
   .video-actions {
@@ -196,13 +194,13 @@ $more-button-width: 40px;
     --rowThumbnailHeight: #{$video-thumbnail-small-height};
 
     .video-miniature-name {
-      font-size: 14px;
+      font-size: $video-miniature-row-info-font-size;
     }
 
     .video-miniature-created-at-views,
     .video-miniature-account,
     .video-miniature-channel {
-      font-size: 12px;
+      font-size: $video-miniature-row-mobile-info-font-size;
     }
   }
 }