+@use '_variables' as *;
+@use '_mixins' as *;
+@use './_player-variables' as *;
+
$playlist-menu-width: 350px;
.vjs-playlist-menu {
right: 0;
height: 100%;
width: $playlist-menu-width;
- background: rgba(0, 0, 0, 0.8);
+ // !important to prevent none background set on focus
+ background: rgba(0, 0, 0, 0.8) !important;
z-index: 101;
transition: right 0.2s;
+ overflow-y: scroll;
// Hidden
right: -$playlist-menu-width;
}
.cross {
- cursor: pointer;
- width: 20px;
- height: 20px;
mask-image: url('#{$assets-path}/images/feather/x.svg');
-webkit-mask-image: url('#{$assets-path}/images/feather/x.svg');
- background-color: white;
mask-size: cover;
-webkit-mask-size: cover;
+
+ cursor: pointer;
+ width: 20px;
+ height: 20px;
+ background-color: #fff;
}
}
}
}
.vjs-playlist-button {
- font-size: 15px;
+ font-size: 16px;
position: absolute;
right: 0;
top: 0;
z-index: 100;
- padding: 1em;
+ padding: $dock-padding;
cursor: pointer;
}
.vjs-playlist-icon {
- width: 22px;
- height: 22px;
mask-image: url('#{$assets-path}/images/feather/list.svg');
-webkit-mask-image: url('#{$assets-path}/images/feather/list.svg');
- background-color: white;
mask-size: cover;
-webkit-mask-size: cover;
+
+ width: 22px;
+ height: 22px;
+ background-color: #fff;
margin-bottom: 3px;
}
}
.item-player {
- display: none;
-
@include play-icon(20px, 16px);
+
+ display: none;
}
&.vjs-selected {
@include ellipsis;
font-size: 13px;
- margin-bottom: 5px;
+ margin-bottom: 3px;
}
- .channel {
+ .channel,
+ .timestamps {
@include ellipsis;
font-size: 11px;
color: #bfbfbf;
}
+
+ .timestamps {
+ font-size: 10px;
+ margin-top: 3px;
+ }
}
}