blob: c183d24f4403eca689a2f29d795cff25aee8241f (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
@use '_variables' as *;
@use '_mixins' as *;
@use './_player-variables' as *;
$context-menu-width: 350px;
/* Sass for videojs-contextmenu-ui */
.video-js .vjs-contextmenu-ui-menu {
position: absolute;
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;
color: pvar(--embedForegroundColor);
font-size: $font-size !important;
font-weight: $font-semibold;
}
.vjs-menu-item {
cursor: pointer;
font-size: 1em;
padding: 8px 16px;
text-align: start;
text-transform: none;
&:hover {
background-color: rgba(255, 255, 255, 0.2);
}
[class^='vjs-icon-'] {
$icons: 'link-2', 'repeat', 'code', 'tick-white', 'info';
@include margin-right(0.8rem !important);
display: inline-flex;
position: relative;
top: 2px;
cursor: pointer;
width: 14px;
height: 14px;
background-color: #fff;
-webkit-mask-size: cover;
mask-size: cover;
@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'] {
float: right;
margin: 0 !important;
}
}
}
}
|
