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;
43 mask-image: url('#{$assets-path}/images/feather/x.svg');
44 -webkit-mask-image: url('#{$assets-path}/images/feather/x.svg');
49 background-color: #fff;
55 .playlist-menu-displayed {
62 .vjs-playlist-button {
67 @media screen and (max-width: $playlist-menu-width) {
74 .playlist-menu-displayed .vjs-playlist-menu {
79 .vjs-playlist-button {
85 padding: $dock-padding;
90 mask-image: url('#{$assets-path}/images/feather/list.svg');
91 -webkit-mask-image: url('#{$assets-path}/images/feather/list.svg');
95 background-color: #fff;
100 .vjs-playing.vjs-user-inactive .vjs-playlist-button {
103 transition: opacity 1s;
106 .vjs-playing.vjs-no-flex.vjs-user-inactive .vjs-playlist-button {
110 .vjs-playlist-menu-item {
115 &:not(.vjs-disabled) {
119 .item-position-block {
123 justify-content: center;
132 justify-content: center;
136 @include play-icon(20px, 16px);
142 background-color: rgba(150, 150, 150, 0.3);
153 &:hover:not(.vjs-disabled) {
154 background-color: rgba(150, 150, 150, 0.2);