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

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