1 files changed, 78 insertions, 0 deletions

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
new file mode 100644
index 000000000..2b7c88246
--- /dev/null
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss
@@ -0,0 +1,78 @@
+@import '_variables';
+@import '_mixins';
+
+.create-button {
+  @include create-button;
+}
+
+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;
+
+      .miniature-info {
+        margin-left: 10px;
+        width: auto;
+      }
+    }
+  }
+
+  .video-playlist-buttons {
+    min-width: 190px;
+    height: max-content;
+  }
+}
+
+.video-playlists-header {
+  margin-bottom: 30px;
+}
+
+@media screen and (max-width: $small-view) {
+  .video-playlists-header {
+    text-align: center;
+  }
+
+  .video-playlist {
+
+    .video-playlist-buttons {
+      margin-top: 10px;
+    }
+  }
+
+  my-video-playlist-miniature ::ng-deep .miniature {
+    flex-direction: column;
+
+    .miniature-info {
+      margin-left: 0 !important;
+    }
+
+    .miniature-name {
+      max-width: $video-thumbnail-width;
+    }
+  }
+}
+
+@media screen and (max-width: $mobile-view) {
+  .video-playlists-header {
+    flex-direction: column;
+
+    input[type=text] {
+      width: 100% !important;
+      margin-bottom: 12px;
+    }
+  }
+}