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