1 @use '_variables' as *;
3 @use './_player-variables' as *;
5 $playlist-menu-width: 350px;
11 width: $playlist-menu-width;
12 // !important to prevent none background set on focus
13 background: rgba(0, 0, 0, 0.8) !important;
15 transition: right 0.2s;
19 right: -$playlist-menu-width;
27 border-bottom: 1px solid $header-border-color;
30 justify-content: space-between;
47 mask-image: url('#{$assets-path}/images/feather/x.svg');
48 -webkit-mask-image: url('#{$assets-path}/images/feather/x.svg');
53 background-color: #fff;
59 .playlist-menu-displayed {
66 .vjs-playlist-button {
71 @media screen and (max-width: $playlist-menu-width) {
78 .playlist-menu-displayed .vjs-playlist-menu {
83 .vjs-playlist-button {
89 padding: $dock-padding;
94 mask-image: url('#{$assets-path}/images/feather/list.svg');
95 -webkit-mask-image: url('#{$assets-path}/images/feather/list.svg');
99 background-color: #fff;
104 .vjs-playing.vjs-user-inactive .vjs-playlist-button {
107 transition: opacity 1s;
110 .vjs-playing.vjs-no-flex.vjs-user-inactive .vjs-playlist-button {
114 .vjs-playlist-menu-item {
119 &:not(.vjs-disabled) {
123 .item-position-block {
127 justify-content: center;
136 justify-content: center;
140 @include play-icon(20px, 16px);
146 background-color: rgba(150, 150, 150, 0.3);
157 &:hover:not(.vjs-disabled) {
158 background-color: rgba(150, 150, 150, 0.2);