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

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 .create-button {
   5   @include create-button;
   6 }
   7
   8 ::ng-deep .action-button {
   9   &.action-button-delete {
  10     margin-right: 10px;
  11   }
  12 }
  13
  14 .video-playlist {
  15   @include row-blocks;
  16
  17   .miniature-wrapper {
  18     flex-grow: 1;
  19
  20     ::ng-deep .miniature {
  21       display: flex;
  22
  23       .miniature-info {
  24         margin-left: 10px;
  25         width: auto;
  26       }
  27     }
  28   }
  29
  30   .video-playlist-buttons {
  31     min-width: 190px;
  32     height: max-content;
  33   }
  34 }
  35
  36 .video-playlists-header {
  37   display: flex;
  38   justify-content: space-between;
  39   text-align: right;
  40   margin: 20px 0 50px;
  41
  42   input[type=text] {
  43     @include peertube-input-text(300px);
  44   }
  45 }
  46
  47 @media screen and (max-width: 800px) {
  48   .video-playlists-header {
  49     text-align: center;
  50   }
  51
  52   .video-playlist {
  53
  54     .video-playlist-buttons {
  55       margin-top: 10px;
  56     }
  57   }
  58
  59   my-video-playlist-miniature ::ng-deep .miniature {
  60     flex-direction: column;
  61
  62     .miniature-info {
  63       margin-left: 0 !important;
  64     }
  65
  66     .miniature-name {
  67       max-width: $video-thumbnail-width;
  68     }
  69   }
  70 }