1 $playlist-menu-width: 350px;
7 width: $playlist-menu-width;
8 background: rgba(0, 0, 0, 0.8);
10 transition: right 0.2s;
13 right: -$playlist-menu-width;
21 border-bottom: 1px solid $header-border-color;
24 justify-content: space-between;
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;
48 -webkit-mask-size: cover;
53 .playlist-menu-displayed {
60 .vjs-playlist-button {
65 @media screen and (max-width: $playlist-menu-width) {
72 .playlist-menu-displayed .vjs-playlist-menu {
77 .vjs-playlist-button {
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;
94 -webkit-mask-size: cover;
98 .vjs-playing.vjs-user-inactive .vjs-playlist-button {
101 transition: opacity 1s;
104 .vjs-playing.vjs-no-flex.vjs-user-inactive .vjs-playlist-button {
108 .vjs-playlist-menu-item {
113 &:not(.vjs-disabled) {
117 .item-position-block {
121 justify-content: center;
130 justify-content: center;
136 @include play-icon(20px, 16px);
140 background-color: rgba(150, 150, 150, 0.3);
151 &:hover:not(.vjs-disabled) {
152 background-color: rgba(150, 150, 150, 0.2);