1 $playlist-menu-width: 350px;
7 width: $playlist-menu-width;
8 // !important to prevent none background set on focus
9 background: rgba(0, 0, 0, 0.8) !important;
11 transition: right 0.2s;
15 right: -$playlist-menu-width;
23 border-bottom: 1px solid $header-border-color;
26 justify-content: space-between;
46 mask-image: url('#{$assets-path}/images/feather/x.svg');
47 background-color: #fff;
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 {
83 padding: $dock-padding;
90 mask-image: url('#{$assets-path}/images/feather/list.svg');
91 background-color: #fff;
96 .vjs-playing.vjs-user-inactive .vjs-playlist-button {
99 transition: opacity 1s;
102 .vjs-playing.vjs-no-flex.vjs-user-inactive .vjs-playlist-button {
106 .vjs-playlist-menu-item {
111 &:not(.vjs-disabled) {
115 .item-position-block {
119 justify-content: center;
128 justify-content: center;
132 @include play-icon(20px, 16px);
138 background-color: rgba(150, 150, 150, 0.3);
149 &:hover:not(.vjs-disabled) {
150 background-color: rgba(150, 150, 150, 0.2);