client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3
   4 h1 {
   5   display: flex;
   6 }
   7
   8 input[type=text] {
   9   @include peertube-input-text(300px);
  10 }
  11
  12 .video-playlist {
  13   @include row-blocks($column-responsive: false);
  14 }
  15
  16 .video-playlist-buttons {
  17   @include margin-left(10px);
  18
  19   display: flex;
  20   align-self: flex-end;
  21 }
  22
  23 .video-playlists-header {
  24   margin-bottom: 30px;
  25 }
  26
  27 my-video-playlist-miniature {
  28   display: block;
  29   flex-grow: 1;
  30 }
  31
  32 my-delete-button {
  33   @include margin-right(10px);
  34 }
  35
  36 @include on-small-main-col {
  37   .video-playlists-header {
  38     text-align: center;
  39   }
  40
  41   .video-playlist {
  42     flex-wrap: wrap;
  43   }
  44
  45   .video-playlist-buttons {
  46     @include margin-left(auto);
  47
  48     margin-top: 10px;
  49   }
  50 }
  51
  52 @include on-mobile-main-col {
  53   .video-playlists-header {
  54     flex-direction: column;
  55
  56     input[type=text] {
  57       width: 100% !important;
  58       margin-bottom: 12px;
  59     }
  60   }
  61
  62   .action-button {
  63     @include margin-left(0);
  64   }
  65 }