Move to sass module

[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 afd775b2554aaff3793eafac45c9247292240532..c476b3ac19a4a646d681f05381a686d6ef8755fa 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,17 +17,22 @@ 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 {
-  display: flex;
-  align-items: center;
+  display: grid;
+  grid-template-columns: 1fr auto;
   background-color: pvar(--mainBackgroundColor);
   padding: 10px;
   border-bottom: 1px solid $separator-border-color;
 
+  .more {
+    display: flex;
+  }
+
   &:hover {
     background-color: rgba(0, 0, 0, 0.05);
 
@@ -56,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;
 
@@ -80,23 +86,26 @@ my-video-thumbnail,
         width: auto;
       }
 
-      .video-info-account, .video-info-timestamp {
+      .video-info-account,
+      .video-info-timestamp {
         color: pvar(--greyForegroundColor);
       }
     }
   }
 
   .video-info-name {
+    @include ellipsis;
+
     font-size: 18px;
     font-weight: $font-semibold;
     display: inline-block;
-
-    @include ellipsis;
   }
 
-  .more, my-edit-button {
+  .more,
+  my-edit-button {
+    @include margin-left(auto);
+
     justify-self: flex-end;
-    margin-left: auto;
     cursor: pointer;
     min-width: 24px;
   }
@@ -114,30 +123,41 @@ my-video-thumbnail,
       display: flex;
 
       &::after {
-        border: none;
+        border: 0;
       }
     }
+  }
+}
 
-    .dropdown-item {
-      @include dropdown-with-icon-item;
-    }
+.dropdown-menu {
 
-    .timestamp-options {
-      padding-top: 0;
-      padding-left: 35px;
-      margin-bottom: 15px;
+  .dropdown-item {
+    @include dropdown-with-icon-item;
 
-      > div {
-        display: flex;
-        align-items: center;
-      }
+    cursor: pointer;
+  }
 
-      input {
-        @include peertube-button;
-        @include orange-button;
+  .timestamp-options {
+    @include padding-left(35px);
 
-        margin-top: 10px;
-      }
+    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;
     }
   }
 }
@@ -164,6 +184,7 @@ my-video-thumbnail,
       my-edit-button {
         display: inline-flex;
         height: max-content;
+        margin: auto;
       }
     }