X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2F%2Bmy-library%2Fmy-video-playlists%2Fmy-video-playlists.component.scss;h=f22feaa48c6b47823cce113f0487a2910a05d9d7;hb=d0fbc9fd0a29c37f3ff9b99030351e90b276fe7d;hp=2b7c882460903660b1d94bb7e63a1611c1826bc9;hpb=17119e4a546522468878cf115558b17949ab50d0;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss
index 2b7c88246..f22feaa48 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss
@@ -1,72 +1,55 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
-.create-button {
-  @include create-button;
+h1 {
+  display: flex;
 }
 
 input[type=text] {
   @include peertube-input-text(300px);
 }
 
-::ng-deep .action-button {
-  &.action-button-delete {
-    margin-right: 10px;
-  }
-}
-
 .video-playlist {
-  @include row-blocks;
-
-  .miniature-wrapper {
-    flex-grow: 1;
-
-    ::ng-deep .miniature {
-      display: flex;
+  @include row-blocks($column-responsive: false);
+}
 
-      .miniature-info {
-        margin-left: 10px;
-        width: auto;
-      }
-    }
-  }
+.video-playlist-buttons {
+  @include margin-left(10px);
 
-  .video-playlist-buttons {
-    min-width: 190px;
-    height: max-content;
-  }
+  display: flex;
+  align-self: flex-end;
 }
 
 .video-playlists-header {
   margin-bottom: 30px;
 }
 
-@media screen and (max-width: $small-view) {
+my-video-playlist-miniature {
+  display: block;
+  flex-grow: 1;
+}
+
+my-delete-button {
+  @include margin-right(10px);
+}
+
+@include on-small-main-col {
   .video-playlists-header {
     text-align: center;
   }
 
   .video-playlist {
-
-    .video-playlist-buttons {
-      margin-top: 10px;
-    }
+    flex-wrap: wrap;
   }
 
-  my-video-playlist-miniature ::ng-deep .miniature {
-    flex-direction: column;
-
-    .miniature-info {
-      margin-left: 0 !important;
-    }
+  .video-playlist-buttons {
+    @include margin-left(auto);
 
-    .miniature-name {
-      max-width: $video-thumbnail-width;
-    }
+    margin-top: 10px;
   }
 }
 
-@media screen and (max-width: $mobile-view) {
+@include on-mobile-main-col {
   .video-playlists-header {
     flex-direction: column;
 
@@ -75,4 +58,8 @@ input[type=text] {
       margin-bottom: 12px;
     }
   }
+
+  .action-button {
+    @include margin-left(0);
+  }
 }