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