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