Merge branch 'release/5.0.0' into develop

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

diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
index 082a5d9b2e2fbd0d647c34b9b026c45b1382910c..e6b01d33d69dc6ac690156461299d0dd7c6db44d 100644 (file)
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
@@ -1,6 +1,6 @@
-@import '_variables';
-@import '_mixins';
-@import '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
 
 $thumbnail-width: 130px;
 $thumbnail-height: 72px;
@@ -17,8 +17,9 @@ my-video-thumbnail {
 
 my-video-thumbnail,
 .fake-thumbnail {
+  @include margin-right(10px);
+
   display: flex; // Avoids an issue with line-height that adds space below the element
-  margin-right: 10px;
 }
 
 .video {
@@ -60,8 +61,9 @@ my-video-thumbnail,
     cursor: pointer;
 
     .position {
+      @include margin-right(10px);
+
       font-weight: $font-semibold;
-      margin-right: 10px;
       color: pvar(--greyForegroundColor);
       min-width: 25px;
 
@@ -73,34 +75,13 @@ my-video-thumbnail,
         left: -2px;
       }
     }
-
-    .video-info {
-      display: flex;
-      flex-direction: column;
-      align-self: flex-start;
-      min-width: 0;
-
-      a {
-        width: auto;
-      }
-
-      .video-info-account, .video-info-timestamp {
-        color: pvar(--greyForegroundColor);
-      }
-    }
   }
 
-  .video-info-name {
-    font-size: 18px;
-    font-weight: $font-semibold;
-    display: inline-block;
-
-    @include ellipsis;
-  }
+  .more,
+  my-edit-button {
+    @include margin-left(auto);
 
-  .more, my-edit-button {
     justify-self: flex-end;
-    margin-left: auto;
     cursor: pointer;
     min-width: 24px;
   }
@@ -118,30 +99,80 @@ my-video-thumbnail,
       display: flex;
 
       &::after {
-        border: none;
+        border: 0;
       }
     }
+  }
+}
+
+.video-info-name {
+  @include ellipsis;
+
+  font-size: 18px;
+  font-weight: $font-semibold;
+  display: inline-block;
+}
+
+.video-info {
+  display: flex;
+  flex-direction: column;
+  align-self: flex-start;
+  min-width: 0;
 
-    .dropdown-item {
-      @include dropdown-with-icon-item;
+  .video-info-header {
+    display: flex;
+    align-items: baseline;
+
+    a {
+      width: auto;
+      padding-right: 5px;
     }
 
-    .timestamp-options {
-      padding-top: 0;
-      padding-left: 35px;
-      margin-bottom: 15px;
+    .pt-badge {
+      @include margin-right(5px);
+    }
+  }
 
-      > div {
-        display: flex;
-        align-items: center;
-      }
+  .video-info-account,
+  .video-info-timestamp {
+    color: pvar(--greyForegroundColor);
+  }
+}
+
+.video-info-account,
+.video-miniature-created-at-views {
+  font-size: 14px;
+}
 
-      input {
-        @include peertube-button;
-        @include orange-button;
+.dropdown-menu {
 
-        margin-top: 10px;
-      }
+  .dropdown-item {
+    @include dropdown-with-icon-item;
+
+    cursor: pointer;
+  }
+
+  .timestamp-options {
+    @include padding-left(35px);
+
+    padding-top: 0;
+    margin-bottom: 15px;
+
+    > div {
+      display: flex;
+      align-items: center;
+      margin-bottom: 5px;
+    }
+
+    my-peertube-checkbox {
+      @include margin-right(5px);
+    }
+
+    input {
+      @include peertube-button;
+      @include orange-button;
+
+      margin-top: 10px;
     }
   }
 }