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

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