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 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 @media screen and (max-width: $small-view) {
  41   .video-playlists-header {
  42     text-align: center;
  43   }
  44
  45   .video-playlist {
  46
  47     .video-playlist-buttons {
  48       margin-top: 10px;
  49     }
  50   }
  51
  52   my-video-playlist-miniature ::ng-deep .miniature {
  53     flex-direction: column;
  54
  55     .miniature-info {
  56       margin-left: 0 !important;
  57     }
  58
  59     .miniature-name {
  60       max-width: $video-thumbnail-width;
  61     }
  62   }
  63 }
  64
  65 @media only screen and (min-width: $mobile-view) and (max-width: $small-view) {
  66   .video-playlists-header {
  67     input[type=text] {
  68       width: 42% !important;
  69     }
  70   }
  71 }
  72
  73 @media screen and (max-width: $mobile-view) {
  74   .video-playlists-header {
  75     flex-direction: column;
  76
  77     input[type=text] {
  78       width: 100% !important;
  79       margin-bottom: 12px;
  80     }
  81   }
  82 }