]>
Commit | Line | Data |
---|---|---|
2a19a1e4 C |
1 | @import '_variables'; |
2 | @import '_mixins'; | |
3 | @import './_player-variables'; | |
4 | ||
5 | $context-menu-width: 350px; | |
6 | ||
7 | /* Sass for videojs-contextmenu-ui */ | |
8 | ||
9 | .video-js .vjs-contextmenu-ui-menu { | |
10 | position: absolute; | |
ff563914 | 11 | background-color: $primary-background-color; |
83ff5481 RK |
12 | padding: 8px 0; |
13 | border-radius: 4px; | |
2a19a1e4 C |
14 | width: $context-menu-width; |
15 | ||
16 | .vjs-menu-content { | |
17 | opacity: $primary-foreground-opacity; | |
d7941370 | 18 | color: pvar(--embedForegroundColor); |
2a19a1e4 C |
19 | font-size: $font-size !important; |
20 | font-weight: $font-semibold; | |
21 | } | |
22 | ||
23 | .vjs-menu-item { | |
24 | cursor: pointer; | |
25 | font-size: 1em; | |
26 | padding: 8px 16px; | |
27 | text-align: left; | |
28 | text-transform: none; | |
29 | ||
30 | &:hover { | |
31 | background-color: rgba(255, 255, 255, 0.2); | |
32 | } | |
83ff5481 | 33 | |
931d3430 C |
34 | [class^='vjs-icon-'] { |
35 | $icons: 'link-2', 'repeat', 'code', 'tick-white', 'info'; | |
36 | ||
83ff5481 RK |
37 | display: inline-flex; |
38 | position: relative; | |
39 | top: 2px; | |
40 | cursor: pointer; | |
41 | width: 14px; | |
42 | height: 14px; | |
931d3430 | 43 | background-color: #fff; |
83ff5481 RK |
44 | mask-size: cover; |
45 | margin-right: 0.8rem !important; | |
46 | ||
83ff5481 RK |
47 | @each $icon in $icons { |
48 | &[class$="-#{$icon}"] { | |
49 | mask-image: url('#{$assets-path}/player/images/#{$icon}.svg'); | |
bc4c9cc1 | 50 | -webkit-mask-image: url('#{$assets-path}/player/images/#{$icon}.svg'); |
83ff5481 RK |
51 | } |
52 | } | |
53 | ||
931d3430 | 54 | &[class$='-tick-white'] { |
83ff5481 RK |
55 | float: right; |
56 | margin: 0 !important; | |
57 | } | |
58 | } | |
2a19a1e4 | 59 | } |
5efab546 | 60 | } |