1 $playlist-menu-width: 350px;
7 width: $playlist-menu-width;
8 background: rgba(0, 0, 0, 0.8);
10 transition: right 0.2s;
14 right: -$playlist-menu-width;
22 border-bottom: 1px solid $header-border-color;
25 justify-content: space-between;
45 mask-image: url('#{$assets-path}/images/feather/x.svg');
46 -webkit-mask-image: url('#{$assets-path}/images/feather/x.svg');
47 background-color: white;
49 -webkit-mask-size: cover;
54 .playlist-menu-displayed {
61 .vjs-playlist-button {
66 @media screen and (max-width: $playlist-menu-width) {
73 .playlist-menu-displayed .vjs-playlist-menu {
78 .vjs-playlist-button {
84 padding: $dock-padding;
91 mask-image: url('#{$assets-path}/images/feather/list.svg');
92 -webkit-mask-image: url('#{$assets-path}/images/feather/list.svg');
93 background-color: white;
95 -webkit-mask-size: cover;
99 .vjs-playing.vjs-user-inactive .vjs-playlist-button {
102 transition: opacity 1s;
105 .vjs-playing.vjs-no-flex.vjs-user-inactive .vjs-playlist-button {
109 .vjs-playlist-menu-item {
114 &:not(.vjs-disabled) {
118 .item-position-block {
122 justify-content: center;
131 justify-content: center;
137 @include play-icon(20px, 16px);
141 background-color: rgba(150, 150, 150, 0.3);
152 &:hover:not(.vjs-disabled) {
153 background-color: rgba(150, 150, 150, 0.2);