]>
Commit | Line | Data |
---|---|---|
8cbc40b2 C |
1 | @use '_variables' as *; |
2 | @use '_mixins' as *; | |
93c728a2 | 3 | @use '_icons' as *; |
8cbc40b2 | 4 | @use './_player-variables' as *; |
2a19a1e4 C |
5 | |
6 | $setting-transition-duration: 0.15s; | |
7 | $setting-transition-easing: ease-out; | |
8 | ||
9 | /* Sass for videojs-settings-menu */ | |
10 | ||
11 | .video-js { | |
12 | ||
2a19a1e4 C |
13 | .vjs-settings-sub-menu-title { |
14 | width: 4em; | |
15 | text-transform: initial; | |
16 | } | |
17 | ||
18 | .vjs-settings-dialog { | |
19 | position: absolute; | |
20 | right: .5em; | |
21 | bottom: 3.5em; | |
e66883b3 | 22 | color: pvar(--embedForegroundColor); |
2a19a1e4 C |
23 | opacity: $primary-foreground-opacity; |
24 | margin: 0 auto; | |
25 | font-size: $font-size !important; | |
f1a0555a | 26 | z-index: 100; |
2a19a1e4 C |
27 | |
28 | width: auto; | |
29 | overflow: hidden; | |
30 | ||
31 | transition: width $setting-transition-duration $setting-transition-easing, height $setting-transition-duration $setting-transition-easing; | |
32 | ||
33 | .vjs-settings-sub-menu-value, | |
34 | .vjs-settings-sub-menu-title { | |
35 | display: table-cell; | |
36 | padding: 0 5px; | |
16f7022b | 37 | text-transform: capitalize; |
2a19a1e4 C |
38 | } |
39 | ||
40 | .vjs-settings-sub-menu-title { | |
27bc9586 | 41 | text-align: start; |
2a19a1e4 C |
42 | font-weight: $font-semibold; |
43 | } | |
44 | ||
45 | .vjs-settings-sub-menu-value { | |
46 | width: 100%; | |
27bc9586 | 47 | text-align: end; |
2a19a1e4 C |
48 | |
49 | small { | |
50 | font-size: 0.85em; | |
51 | opacity: 0.8; | |
52 | } | |
53 | } | |
54 | ||
55 | .vjs-settings-panel { | |
56 | position: absolute; | |
57 | bottom: 0; | |
58 | right: 0; | |
59 | overflow-y: auto; | |
60 | overflow-x: hidden; | |
61 | border-radius: 1px; | |
62 | } | |
63 | ||
64 | .vjs-settings-panel-child { | |
65 | display: flex; | |
66 | ||
67 | align-items: flex-end; | |
68 | white-space: nowrap; | |
69 | ||
70 | &:focus, | |
71 | &:active { | |
72 | outline: none; | |
73 | } | |
74 | ||
75 | > .vjs-menu { | |
76 | flex: 1; | |
77 | min-width: 200px; | |
78 | } | |
79 | ||
80 | > .vjs-menu, | |
81 | > .vjs-settings-sub-menu { | |
82 | transition: all $setting-transition-duration $setting-transition-easing; | |
83 | ||
84 | .vjs-menu-item { | |
c4082b8b C |
85 | font-size: 1em; |
86 | text-transform: initial; | |
2a19a1e4 C |
87 | |
88 | &:hover { | |
c4082b8b | 89 | cursor: pointer; |
2a19a1e4 C |
90 | background-color: rgba(255, 255, 255, 0.2); |
91 | } | |
92 | ||
93 | &:first-child { | |
94 | margin-top: 5px; | |
95 | } | |
96 | ||
97 | &:last-child { | |
98 | margin-bottom: 5px; | |
99 | } | |
2a19a1e4 | 100 | |
c4082b8b C |
101 | &.disabled { |
102 | opacity: 0.5; | |
103 | cursor: default !important; | |
104 | background-color: inherit !important; | |
2a19a1e4 C |
105 | } |
106 | } | |
107 | } | |
108 | ||
109 | > .vjs-menu { | |
110 | .vjs-menu-item { | |
111 | padding: 8px 16px; | |
112 | } | |
113 | ||
114 | .vjs-settings-sub-menu-value::after { | |
115 | @include chevron-right(9px, 2px); | |
116 | ||
27bc9586 | 117 | @include margin-left(5px); |
2a19a1e4 C |
118 | } |
119 | } | |
120 | ||
121 | > .vjs-settings-sub-menu { | |
5f31aaa3 | 122 | min-width: 80px; |
2a19a1e4 C |
123 | |
124 | .vjs-menu-item { | |
125 | outline: 0; | |
126 | font-weight: $font-semibold; | |
27bc9586 | 127 | text-align: end; |
16f7022b | 128 | padding: 5px 8px; |
2a19a1e4 C |
129 | |
130 | &.vjs-back-button { | |
16f7022b | 131 | padding: 8px 8px 13px 12px; |
2a19a1e4 | 132 | margin-bottom: 5px; |
931d3430 | 133 | border-bottom: 1px solid #808080; |
27bc9586 | 134 | text-align: start; |
2a19a1e4 C |
135 | |
136 | &::before { | |
137 | @include chevron-left(9px, 2px); | |
138 | ||
27bc9586 | 139 | @include margin-right(5px); |
2a19a1e4 C |
140 | } |
141 | } | |
142 | ||
143 | &.vjs-selected { | |
144 | background-color: inherit; | |
145 | color: inherit; | |
146 | position: relative; | |
147 | ||
04868c13 C |
148 | &:focus { |
149 | background-color: rgba(115, 133, 159, 0.5); | |
150 | } | |
151 | ||
2a19a1e4 C |
152 | &::before { |
153 | @include icon(15px); | |
154 | ||
155 | position: absolute; | |
156 | left: 8px; | |
157 | content: ' '; | |
158 | margin-top: 1px; | |
fe05c3ac | 159 | background-image: url('#{$assets-path}/player/images/tick-white.svg'); |
2a19a1e4 C |
160 | } |
161 | } | |
162 | } | |
16f7022b C |
163 | |
164 | // Special captions case | |
165 | // Bigger caption button | |
166 | &.vjs-captions-button { | |
167 | width: 200px; | |
168 | ||
169 | .vjs-menu-item { | |
27bc9586 | 170 | text-align: start; |
16f7022b C |
171 | |
172 | .vjs-menu-item-text { | |
27bc9586 | 173 | @include margin-left(25px); |
16f7022b C |
174 | text-transform: capitalize; |
175 | } | |
176 | } | |
177 | } | |
178 | ||
179 | .vjs-menu { | |
180 | width: inherit; | |
181 | } | |
2a19a1e4 C |
182 | } |
183 | } | |
184 | } | |
fe05c3ac | 185 | } |