client/src/app/+videos/+video-watch/video-watch-playlist.component.scss

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3 @use '_bootstrap-variables';
   4 @use '_miniature' as *;
   5
   6 .playlist {
   7   min-width: 200px;
   8   max-width: 470px;
   9   height: 66vh;
  10   background-color: pvar(--mainBackgroundColor);
  11   overflow-y: auto;
  12   border-bottom: 1px solid $separator-border-color;
  13
  14   .playlist-info {
  15     padding: 5px 30px;
  16     background-color: #e4e4e4;
  17
  18     .playlist-display-name {
  19       font-size: 18px;
  20       font-weight: $font-semibold;
  21       margin-bottom: 5px;
  22     }
  23
  24     .playlist-by-index {
  25       color: pvar(--greyForegroundColor);
  26       display: flex;
  27
  28       .playlist-by {
  29         @include margin-right(5px);
  30       }
  31
  32       .playlist-index span:first-child::after {
  33         content: '/';
  34         margin: 0 3px;
  35       }
  36     }
  37
  38     .playlist-controls {
  39       display: flex;
  40       margin: 10px 0;
  41
  42       my-global-icon:not(:last-child) {
  43         @include margin-right(.5rem);
  44       }
  45
  46       my-global-icon {
  47         &:not(.active) {
  48           opacity: .5;
  49         }
  50
  51         ::ng-deep {
  52           cursor: pointer;
  53         }
  54       }
  55     }
  56   }
  57
  58   my-video-playlist-element-miniature {
  59     ::ng-deep {
  60       .video {
  61         .position {
  62           @include margin-right(0);
  63         }
  64
  65         .video-info {
  66           .video-info-name {
  67             font-size: 15px;
  68           }
  69         }
  70       }
  71
  72       my-video-thumbnail {
  73         @include thumbnail-size-component(90px, 50px);
  74       }
  75
  76       .fake-thumbnail {
  77         width: 90px;
  78         height: 50px;
  79       }
  80     }
  81   }
  82 }
  83