client/src/sass/player/playlist.scss

   1 $playlist-menu-width: 350px;
   2
   3 .vjs-playlist-menu {
   4   position: absolute;
   5   right: 0;
   6   height: 100%;
   7   width: $playlist-menu-width;
   8   background: rgba(0, 0, 0, 0.8);
   9   z-index: 101;
  10   transition: right 0.2s;
  11   overflow-y: auto;
  12
  13   // Hidden
  14   right: -$playlist-menu-width;
  15
  16   ol {
  17     padding: 0;
  18     margin: 0;
  19   }
  20
  21   .header {
  22     border-bottom: 1px solid $header-border-color;
  23     padding: 20px 10px;
  24     display: flex;
  25     justify-content: space-between;
  26
  27     .title {
  28       @include ellipsis;
  29
  30       font-size: 14px;
  31       margin-bottom: 5px;
  32     }
  33
  34     .channel {
  35       @include ellipsis;
  36
  37       font-size: 11px;
  38       color: #bfbfbf;
  39     }
  40
  41     .cross {
  42       cursor: pointer;
  43       width: 20px;
  44       height: 20px;
  45       mask-image: url('#{$assets-path}/images/feather/x.svg');
  46       -webkit-mask-image: url('#{$assets-path}/images/feather/x.svg');
  47       background-color: white;
  48       mask-size: cover;
  49       -webkit-mask-size: cover;
  50     }
  51   }
  52 }
  53
  54 .playlist-menu-displayed {
  55
  56   .vjs-playlist-menu {
  57     right: 0;
  58     display: block;
  59   }
  60
  61   .vjs-playlist-button {
  62     display: none;
  63   }
  64 }
  65
  66 @media screen and (max-width: $playlist-menu-width) {
  67   .vjs-playlist-menu {
  68     width: 100%;
  69     min-width: unset;
  70     display: none;
  71   }
  72
  73   .playlist-menu-displayed .vjs-playlist-menu {
  74     display: block;
  75   }
  76 }
  77
  78 .vjs-playlist-button {
  79   font-size: 15px;
  80   position: absolute;
  81   right: 0;
  82   top: 0;
  83   z-index: 100;
  84   padding: $dock-padding;
  85   cursor: pointer;
  86 }
  87
  88 .vjs-playlist-icon {
  89   width: 22px;
  90   height: 22px;
  91   mask-image: url('#{$assets-path}/images/feather/list.svg');
  92   -webkit-mask-image: url('#{$assets-path}/images/feather/list.svg');
  93   background-color: white;
  94   mask-size: cover;
  95   -webkit-mask-size: cover;
  96   margin-bottom: 3px;
  97 }
  98
  99 .vjs-playing.vjs-user-inactive .vjs-playlist-button {
 100   opacity: 0;
 101
 102   transition: opacity 1s;
 103 }
 104
 105 .vjs-playing.vjs-no-flex.vjs-user-inactive .vjs-playlist-button {
 106   display: none;
 107 }
 108
 109 .vjs-playlist-menu-item {
 110   display: flex;
 111   padding: 10px 0;
 112   height: 60px;
 113
 114   &:not(.vjs-disabled) {
 115     cursor: pointer;
 116   }
 117
 118   .item-position-block {
 119     position: relative;
 120     display: flex;
 121     align-items: center;
 122     justify-content: center;
 123     width: 30px;
 124     flex-shrink: 0;
 125   }
 126
 127   .item-unavailable {
 128     position: relative;
 129     display: flex;
 130     align-items: center;
 131     justify-content: center;
 132   }
 133
 134   .item-player {
 135     display: none;
 136
 137     @include play-icon(20px, 16px);
 138   }
 139
 140   &.vjs-selected {
 141     background-color: rgba(150, 150, 150, 0.3);
 142
 143     .item-position {
 144       display: none;
 145     }
 146
 147     .item-player {
 148       display: block;
 149     }
 150   }
 151
 152   &:hover:not(.vjs-disabled) {
 153     background-color: rgba(150, 150, 150, 0.2);
 154   }
 155
 156   img {
 157     width: 80px;
 158     height: 40px;
 159   }
 160
 161   .info-block {
 162     margin: 0 10px;
 163     min-width: 1px;
 164
 165     .title {
 166       @include ellipsis;
 167
 168       font-size: 13px;
 169       margin-bottom: 3px;
 170     }
 171
 172     .channel,
 173     .timestamps {
 174       @include ellipsis;
 175
 176       font-size: 11px;
 177       color: #bfbfbf;
 178     }
 179
 180     .timestamps {
 181       font-size: 10px;
 182       margin-top: 3px;
 183     }
 184   }
 185 }