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