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