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');
50 -webkit-mask-size: cover;
55 background-color: #fff;
60 .playlist-menu-displayed {
67 .vjs-playlist-button {
72 @media screen and (max-width: $playlist-menu-width) {
79 .playlist-menu-displayed .vjs-playlist-menu {
84 .vjs-playlist-button {
90 padding: $dock-padding;
95 mask-image: url('#{$assets-path}/images/feather/list.svg');
96 -webkit-mask-image: url('#{$assets-path}/images/feather/list.svg');
98 -webkit-mask-size: cover;
102 background-color: #fff;
106 .vjs-playing.vjs-user-inactive .vjs-playlist-button {
109 transition: opacity 1s;
112 .vjs-playing.vjs-no-flex.vjs-user-inactive .vjs-playlist-button {
116 .vjs-playlist-menu-item {
121 &:not(.vjs-disabled) {
125 .item-position-block {
129 justify-content: center;
138 justify-content: center;
142 @include play-icon(20px, 16px);
148 background-color: rgba(150, 150, 150, 0.3);
159 &:hover:not(.vjs-disabled) {
160 background-color: rgba(150, 150, 150, 0.2);