.video-js .vjs-contextmenu-ui-menu {
position: absolute;
- background-color: rgba(0, 0, 0, 0.5);
+ background-color: $primary-background-color;
padding: 8px 0;
border-radius: 4px;
width: $context-menu-width;
+ z-index: 105; // On top of the progress bar
.vjs-menu-content {
opacity: $primary-foreground-opacity;
background-color: rgba(255, 255, 255, 0.2);
}
- [class^="vjs-icon-"] {
+ [class^='vjs-icon-'] {
+ $icons: 'link-2', 'repeat', 'code', 'tick-white', 'info';
+
display: inline-flex;
position: relative;
top: 2px;
cursor: pointer;
width: 14px;
height: 14px;
- background-color: white;
+ background-color: #fff;
mask-size: cover;
margin-right: 0.8rem !important;
- $icons: 'link-2', 'repeat', 'code', 'tick-white';
-
@each $icon in $icons {
&[class$="-#{$icon}"] {
mask-image: url('#{$assets-path}/player/images/#{$icon}.svg');
+ -webkit-mask-image: url('#{$assets-path}/player/images/#{$icon}.svg');
}
}
- &[class$="-tick-white"] {
+ &[class$='-tick-white'] {
float: right;
margin: 0 !important;
}