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   display: flex;
  22   margin-left: 10px;
  23   align-self: flex-end;
  24 }
  25
  26 .video-playlists-header {
  27   margin-bottom: 30px;
  28 }
  29
  30 my-video-playlist-miniature {
  31   display: block;
  32   flex-grow: 1;
  33 }
  34
  35 my-delete-button {
  36   margin-right: 10px;
  37 }
  38
  39 @include on-small-main-col {
  40   .video-playlists-header {
  41     text-align: center;
  42   }
  43
  44   .video-playlist {
  45     flex-wrap: wrap;
  46   }
  47
  48   .video-playlist-buttons {
  49     margin-top: 10px;
  50     margin-left: auto;
  51   }
  52 }
  53
  54 @include on-mobile-main-col {
  55   .video-playlists-header {
  56     flex-direction: column;
  57
  58     input[type=text] {
  59       width: 100% !important;
  60       margin-bottom: 12px;
  61     }
  62   }
  63
  64   .action-button {
  65     margin-left: 0;
  66   }
  67 }