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