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       font-size: 14px;
  28       margin-bottom: 5px;
  29       white-space: nowrap;
  30       text-overflow: ellipsis;
  31     }
  32
  33     .channel {
  34       font-size: 11px;
  35       color: #bfbfbf;
  36       white-space: nowrap;
  37       text-overflow: ellipsis;
  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: 1em;
  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   cursor: pointer;
 110   display: flex;
 111   padding: 10px 0;
 112
 113   .item-position-block {
 114     position: relative;
 115     display: flex;
 116     align-items: center;
 117     justify-content: center;
 118     width: 30px;
 119   }
 120
 121   .item-player {
 122     display: none;
 123
 124     @include play-icon(20px, 16px);
 125   }
 126
 127   &.vjs-selected {
 128     background-color: rgba(150, 150, 150, 0.3);
 129
 130     .item-position {
 131       display: none;
 132     }
 133
 134     .item-player {
 135       display: block;
 136     }
 137   }
 138
 139   &:hover {
 140     background-color: rgba(150, 150, 150, 0.2);
 141   }
 142
 143   img {
 144     width: 80px;
 145     height: 40px;
 146   }
 147
 148   .info-block {
 149     margin-left: 10px;
 150
 151     .title {
 152       font-size: 13px;
 153       margin-bottom: 5px;
 154       white-space: nowrap;
 155       text-overflow: ellipsis;
 156     }
 157
 158     .channel {
 159       font-size: 11px;
 160       color: #bfbfbf;
 161       white-space: nowrap;
 162       text-overflow: ellipsis;
 163     }
 164   }
 165 }