X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2F%2Bmy-library%2Fmy-videos%2Fmy-videos.component.scss;h=6c2ef6f76ff3794cc898ec228a60026a6b330395;hb=HEAD;hp=59fc5fe801e84cec06958d2b2dc6787177601f1f;hpb=17119e4a546522468878cf115558b17949ab50d0;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/app/+my-library/my-videos/my-videos.component.scss b/client/src/app/+my-library/my-videos/my-videos.component.scss
index 59fc5fe80..6c2ef6f76 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.scss
+++ b/client/src/app/+my-library/my-videos/my-videos.component.scss
@@ -1,10 +1,15 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 input[type=text] {
   @include peertube-input-text(300px);
 }
 
+.peertube-select-container {
+  @include peertube-select-container(auto);
+  @include margin-left(0.5rem);
+}
+
 h1 {
   display: flex;
   justify-content: space-between;
@@ -15,61 +20,35 @@ h1 {
     @include button-with-icon(18px, 3px, -1px);
 
     &:not(:last-child) {
-      margin-right: 10px;
+      @include margin-right(10px);
     }
   }
 }
 
 .action-button-delete-selection {
-  display: inline-block;
-
   @include peertube-button;
   @include orange-button;
   @include button-with-icon(21px);
 
+  display: inline-block;
+
   my-global-icon {
     @include apply-svg-color(#fff);
   }
 }
 
-::ng-deep {
-  .video {
-    flex-wrap: wrap;
-  }
-
-  .action-button span {
-    white-space: nowrap;
-  }
-
-  .video-miniature {
-    &.display-as-row {
-      // width: min-content !important;
-      width: 100% !important;
-
-      .video-bottom .video-miniature-information {
-        width: max-content !important;
-        min-width: unset !important;
-      }
-    }
-
-    .video-bottom {
-      max-width: 350px;
-    }
-  }
-}
-
 .action-button {
+  @include margin-left(10px);
+
   display: flex;
-  margin-left: 55px;
-  margin-top: 10px;
   align-self: flex-end;
 }
 
 my-edit-button {
-  margin-right: 10px;
+  @include margin-right(10px);
 }
 
-@media screen and (max-width: $small-view) {
+@include on-small-main-col {
   h1 {
     flex-direction: column;
 
@@ -80,59 +59,26 @@ my-edit-button {
   }
 
   .action-button {
-    flex-direction: column;
-    align-self: center;
-    align-items: center;
-    margin-left: 0px;
-  }
+    @include margin-left(auto);
 
-  my-edit-button {
-    margin: 15px 0 5px 0;
-    width: 100%;
-    text-align: center;
-
-    ::ng-deep {
-      .action-button {
-        /* same width than a.video-thumbnail */
-        width: $video-thumbnail-width;
-      }
-    }
-  }
-
-  ::ng-deep {
-    .video-miniature {
-      align-items: center;
-
-      .video-bottom,
-      .video-bottom .video-miniature-information {
-        /* same width than a.video-thumbnail */
-        max-width: $video-thumbnail-width !important;
-      }
-    }
+    margin-top: 10px;
   }
 }
 
-// Adapt my-video-miniature on small screens with menu
-@media screen and (min-width: $small-view) and (max-width: #{breakpoint(lg) + ($not-expanded-horizontal-margins / 3) * 2}) {
-  :host-context(.main-col:not(.expanded)) {
-    ::ng-deep {
-      .video-miniature {
-        flex-direction: column;
-
-        .video-miniature-name {
-          max-width: $video-thumbnail-width;
-        }
-      }
-    }
-  }
-}
-
-@media screen and (max-width: $mobile-view) {
+@include on-mobile-main-col {
   .videos-header {
     flex-direction: column;
 
     input[type=text] {
-      width: 100% !important;
+      width: 100%;
+      margin-bottom: 12px;
     }
+    .peertube-select-container {
+      @include margin-left(0);
+    }
+  }
+
+  .action-button {
+    @include margin-left(0);
   }
 }