client/src/sass/player/playlist.scss

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