]>
Commit | Line | Data |
---|---|---|
3ec8dc09 C |
1 | @import '_variables'; |
2 | @import '_mixins'; | |
3 | ||
864e782b C |
4 | @mixin big-play-button-triangle-size($triangle-size) { |
5 | width: $triangle-size; | |
6 | height: $triangle-size; | |
7 | top: calc(50% - #{$triangle-size / 2}); | |
8 | left: calc(53% - #{($triangle-size / 2)}); | |
9 | } | |
10 | ||
c6352f2c | 11 | $primary-foreground-color: #fff; |
e993ecb3 C |
12 | $primary-foreground-opacity: 0.9; |
13 | $primary-foreground-opacity-hover: 1; | |
be6a4802 | 14 | $primary-background-color: #000; |
e993ecb3 | 15 | |
be6a4802 C |
16 | $font-size: 13px; |
17 | $control-bar-height: 34px; | |
aa8b6df4 | 18 | |
e993ecb3 C |
19 | $slider-bg-color: lighten($primary-background-color, 33%); |
20 | ||
c6352f2c C |
21 | $setting-transition-duration: 0.15s; |
22 | $setting-transition-easing: ease-out; | |
23 | ||
960a11e8 C |
24 | $context-menu-width: 350px; |
25 | ||
be6a4802 C |
26 | .video-js.vjs-peertube-skin { |
27 | font-size: $font-size; | |
c6352f2c | 28 | color: $primary-foreground-color; |
aa8b6df4 | 29 | |
22b59e80 C |
30 | .vjs-dock-text { |
31 | padding-right: 10px; | |
32 | } | |
33 | ||
34 | .vjs-dock-description { | |
35 | font-size: 11px; | |
36 | ||
c6352f2c | 37 | &::before, &::after { |
22b59e80 C |
38 | display: inline-block; |
39 | content: '\1F308'; | |
40 | } | |
41 | ||
c6352f2c | 42 | &::before { |
22b59e80 C |
43 | margin-right: 4px; |
44 | } | |
45 | ||
c6352f2c | 46 | &::after { |
22b59e80 C |
47 | margin-left: 4px; |
48 | transform: scale(-1, 1); | |
49 | } | |
50 | } | |
51 | ||
be6a4802 C |
52 | .vjs-button > .vjs-icon-placeholder::before { |
53 | line-height: $control-bar-height; | |
aa8b6df4 | 54 | } |
e14852b4 | 55 | |
c6352f2c | 56 | .vjs-volume-level::before { |
be6a4802 C |
57 | content: ''; /* Remove Circle From Progress Bar */ |
58 | } | |
e14852b4 | 59 | |
be6a4802 C |
60 | .vjs-audio-button { |
61 | display: none; | |
62 | } | |
e14852b4 | 63 | |
be6a4802 | 64 | .vjs-big-play-button { |
9e6b41cc | 65 | outline: 0; |
07fa4c97 | 66 | font-size: 6em; |
e14852b4 | 67 | |
33d78552 C |
68 | $big-play-width: 1.2em; |
69 | $big-play-height: 1.2em; | |
e14852b4 | 70 | |
864e782b | 71 | border: 6px solid #fff; |
33d78552 | 72 | border-radius: 100%; |
e14852b4 | 73 | |
e14852b4 C |
74 | left: 50%; |
75 | top: 50%; | |
8cac1b64 C |
76 | width: $big-play-width; |
77 | height: $big-play-height; | |
78 | line-height: $big-play-height; | |
e14852b4 C |
79 | margin-left: -($big-play-width / 2); |
80 | margin-top: -($big-play-height / 2); | |
864e782b | 81 | transition: 0.4s opacity; |
adcaf1a8 C |
82 | |
83 | &::-moz-focus-inner { | |
84 | border: 0; | |
85 | padding: 0 | |
86 | } | |
80d1057b C |
87 | |
88 | .vjs-icon-placeholder::before { | |
864e782b C |
89 | @include big-play-button-triangle-size(45px); |
90 | ||
91 | content: ''; | |
92 | background-image: url('../assets/player/images/big-play-button.svg'); | |
80d1057b C |
93 | } |
94 | ||
8cac1b64 | 95 | &:hover { |
33d78552 | 96 | opacity: 0.8; |
80d1057b | 97 | } |
be6a4802 | 98 | } |
e14852b4 | 99 | |
864e782b C |
100 | // Small effect when we click on the play button |
101 | &.vjs-has-big-play-button-clicked { | |
33d78552 | 102 | |
864e782b C |
103 | .vjs-big-play-button, .vjs-poster { |
104 | display: block; | |
105 | visibility: hidden; | |
33d78552 | 106 | |
864e782b | 107 | &.vjs-big-play-button, &.vjs-big-play-button::before { |
33d78552 | 108 | opacity: 0; |
864e782b | 109 | transition: visibility 0.2s, opacity 0.2s; |
33d78552 | 110 | } |
864e782b C |
111 | |
112 | &.vjs-poster, &.vjs-poster::before { | |
113 | opacity: 0; | |
114 | transition: visibility 0.3s, opacity 0.3s; | |
115 | transition-delay: 0.05s; | |
33d78552 C |
116 | } |
117 | } | |
8fa5653a C |
118 | } |
119 | ||
e6f62797 C |
120 | // Hide the big play button on autoplay |
121 | &.vjs-has-autoplay { | |
122 | .vjs-big-play-button { | |
123 | display: none !important; | |
124 | } | |
125 | } | |
126 | ||
be6a4802 C |
127 | .vjs-control-bar, |
128 | .vjs-big-play-button, | |
c6352f2c | 129 | .vjs-settings-dialog { |
be6a4802 C |
130 | background-color: rgba($primary-background-color, 0.5); |
131 | } | |
e14852b4 | 132 | |
be6a4802 C |
133 | .vjs-slider { |
134 | background-color: rgba(255, 255, 255, .3); | |
e14852b4 | 135 | border-radius: 2px; |
be6a4802 | 136 | height: 5px; |
e993ecb3 C |
137 | |
138 | .vjs-slider-bar { | |
139 | background: $primary-foreground-color; | |
140 | } | |
be6a4802 | 141 | } |
e14852b4 | 142 | |
6b9af129 | 143 | .vjs-play-progress { |
c6352f2c C |
144 | |
145 | &::before { | |
146 | top: -0.3em; | |
147 | ||
148 | &:hover { | |
149 | top: -0.372em; | |
150 | } | |
6b9af129 C |
151 | } |
152 | ||
153 | .vjs-time-tooltip { | |
154 | display: none; | |
155 | } | |
be6a4802 | 156 | } |
e14852b4 | 157 | |
be6a4802 C |
158 | .vjs-load-progress { |
159 | background: rgba($slider-bg-color, 0.5); | |
e14852b4 | 160 | |
e993ecb3 C |
161 | div { |
162 | background: rgba($slider-bg-color, 0.75); | |
163 | } | |
be6a4802 | 164 | } |
e14852b4 | 165 | |
be6a4802 C |
166 | .vjs-poster { |
167 | outline: none; /* Remove Blue Outline on Click*/ | |
168 | outline: 0; | |
169 | } | |
e14852b4 | 170 | |
be6a4802 C |
171 | .vjs-control-bar { |
172 | height: $control-bar-height; | |
e14852b4 | 173 | |
6b9af129 C |
174 | .vjs-progress-control, |
175 | .vjs-play-control, | |
176 | .vjs-playback-rate, | |
177 | .vjs-mute-control, | |
178 | .vjs-volume-control, | |
179 | .vjs-resolution-control, | |
c6352f2c C |
180 | .vjs-fullscreen-control, |
181 | .vjs-peertube-link, | |
182 | .vjs-settings | |
6b9af129 | 183 | { |
c6352f2c | 184 | color: $primary-foreground-color !important; |
6b9af129 C |
185 | opacity: $primary-foreground-opacity; |
186 | transition: opacity .1s; | |
187 | ||
188 | &:hover { | |
189 | opacity: $primary-foreground-opacity-hover; | |
190 | } | |
191 | } | |
192 | ||
193 | .vjs-current-time, | |
194 | .vjs-duration, | |
195 | .vjs-peertube { | |
196 | color: $primary-foreground-color; | |
c6352f2c | 197 | opacity: $primary-foreground-opacity; |
6b9af129 C |
198 | } |
199 | ||
be6a4802 C |
200 | .vjs-progress-control { |
201 | bottom: 34px; | |
202 | width: 100%; | |
203 | position: absolute; | |
204 | height: 5px; | |
e14852b4 | 205 | |
be6a4802 C |
206 | .vjs-progress-holder { |
207 | margin: 0; | |
208 | border-radius: 0; | |
209 | } | |
210 | } | |
e14852b4 | 211 | |
be6a4802 | 212 | .vjs-play-control { |
3ec8dc09 C |
213 | @include disable-outline; |
214 | ||
c6352f2c | 215 | cursor: pointer; |
be6a4802 C |
216 | font-size: $font-size; |
217 | padding: 0 17px; | |
218 | margin-right: 5px; | |
219 | } | |
e14852b4 | 220 | |
be6a4802 C |
221 | .vjs-time-control { |
222 | &.vjs-current-time { | |
223 | font-size: $font-size; | |
224 | display: inline-block; | |
225 | padding: 0; | |
226 | ||
227 | .vjs-current-time-display { | |
86f278cb | 228 | line-height: calc(#{$control-bar-height} + 1px); |
be6a4802 C |
229 | |
230 | &::after { | |
231 | content: "/"; | |
232 | margin: 0 1px 0 2px; | |
233 | } | |
234 | } | |
235 | } | |
236 | ||
237 | &.vjs-duration { | |
238 | font-size: $font-size; | |
239 | display: inline-block; | |
240 | padding: 0; | |
be6a4802 | 241 | .vjs-duration-display { |
86f278cb | 242 | line-height: calc(#{$control-bar-height} + 1px); |
be6a4802 C |
243 | } |
244 | } | |
245 | ||
246 | &.vjs-remaining-time { | |
247 | display: none; | |
248 | } | |
249 | } | |
e14852b4 | 250 | |
bf5685f0 | 251 | .vjs-peertube { |
be6a4802 C |
252 | width: 100%; |
253 | line-height: $control-bar-height; | |
254 | text-align: right; | |
be6a4802 | 255 | |
bf5685f0 | 256 | .vjs-peertube-displayed { |
a86309b4 C |
257 | display: block; |
258 | } | |
259 | ||
bf5685f0 | 260 | .vjs-peertube-hidden { |
a86309b4 C |
261 | display: none; |
262 | } | |
263 | ||
be6a4802 C |
264 | .download-speed-number, .upload-speed-number, .peers-number { |
265 | font-weight: $font-semibold; | |
266 | } | |
267 | ||
268 | .download-speed-text, .upload-speed-text, .peers-text { | |
269 | margin-right: 15px; | |
270 | } | |
271 | ||
272 | .icon { | |
273 | display: inline-block; | |
274 | width: 15px; | |
275 | height: 15px; | |
276 | background-size: contain; | |
277 | vertical-align: middle; | |
278 | background-repeat: no-repeat; | |
279 | margin-right: 6px; | |
280 | position: relative; | |
281 | top: -1px; | |
282 | ||
283 | &.icon-download { | |
284 | background-image: url('../assets/player/images/arrow-down.svg'); | |
285 | } | |
286 | ||
287 | &.icon-upload { | |
288 | background-image: url('../assets/player/images/arrow-up.svg'); | |
289 | } | |
290 | } | |
291 | } | |
e14852b4 | 292 | |
57886d66 | 293 | .vjs-playback-rate { |
294 | font-size: 10px; | |
3ec8dc09 | 295 | width: 37px !important; |
a73c582e C |
296 | |
297 | .vjs-playback-rate-value { | |
298 | font-size: 13px; | |
299 | line-height: $control-bar-height; | |
300 | } | |
3ec8dc09 C |
301 | |
302 | .vjs-menu .vjs-menu-content { | |
303 | width: 37px !important; | |
304 | } | |
57886d66 | 305 | } |
306 | ||
be6a4802 | 307 | .vjs-mute-control { |
3ec8dc09 C |
308 | @include disable-outline; |
309 | ||
310 | line-height: $control-bar-height; | |
311 | padding: 0; | |
312 | width: 30px; | |
d7701449 | 313 | |
be6a4802 C |
314 | .vjs-icon-placeholder { |
315 | display: inline-block; | |
316 | width: 22px; | |
317 | height: 22px; | |
318 | vertical-align: middle; | |
319 | background: url('../assets/player/images/volume.svg') no-repeat; | |
320 | background-size: contain; | |
321 | ||
322 | &::before { | |
323 | content: ''; | |
324 | } | |
325 | } | |
326 | ||
327 | &.vjs-vol-0 .vjs-icon-placeholder { | |
328 | background: url('../assets/player/images/volume-mute.svg') no-repeat; | |
329 | background-size: contain; | |
330 | } | |
331 | } | |
e14852b4 | 332 | |
3ec8dc09 C |
333 | .vjs-volume-control { |
334 | width: 30px; | |
c6352f2c | 335 | margin: 0 5px 0 0; |
be6a4802 | 336 | } |
e14852b4 | 337 | |
be6a4802 C |
338 | .vjs-volume-bar { |
339 | background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC) no-repeat; | |
340 | background-size: 22px 14px; | |
341 | height: 100%; | |
342 | width: 100%; | |
343 | max-width: 22px; | |
344 | max-height: 14px; | |
345 | margin: 7px 4px; | |
346 | border-radius: 0; | |
347 | top: 3px; | |
348 | ||
349 | .vjs-volume-level { | |
350 | background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC) no-repeat; | |
351 | background-size: 22px 14px; | |
352 | max-width: 22px; | |
353 | max-height: 14px; | |
354 | height: 100%; | |
355 | } | |
356 | } | |
e14852b4 | 357 | |
be6a4802 C |
358 | .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, |
359 | .vjs-volume-panel.vjs-volume-panel-horizontal:active, | |
360 | .vjs-volume-panel.vjs-volume-panel-horizontal:focus, | |
361 | .vjs-volume-panel.vjs-volume-panel-horizontal:hover { | |
362 | width: 6em; | |
363 | transition-property: none; | |
364 | } | |
e14852b4 | 365 | |
be6a4802 C |
366 | .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal { |
367 | width: 3em; | |
368 | height: auto; | |
369 | } | |
e14852b4 | 370 | |
be6a4802 C |
371 | .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control { |
372 | transition-property: none; | |
373 | } | |
e14852b4 | 374 | |
be6a4802 C |
375 | .vjs-volume-panel { |
376 | .vjs-mute-control { | |
377 | width: 2em; | |
378 | z-index: 1; | |
379 | padding: 0; | |
380 | } | |
381 | ||
382 | .vjs-volume-control { | |
383 | display: inline-block; | |
384 | position: relative; | |
385 | left: 5px; | |
386 | opacity: 1; | |
387 | width: 3em; | |
388 | height: auto; | |
389 | } | |
390 | } | |
e14852b4 | 391 | |
c6352f2c C |
392 | .vjs-peertube-link { |
393 | @include disable-outline; | |
394 | @include disable-default-a-behaviour; | |
395 | ||
396 | text-decoration: none; | |
397 | line-height: $control-bar-height; | |
398 | font-weight: $font-semibold; | |
399 | padding: 0 5px; | |
400 | } | |
401 | ||
be6a4802 | 402 | .vjs-fullscreen-control { |
3ec8dc09 C |
403 | @include disable-outline; |
404 | ||
be6a4802 C |
405 | width: 37px; |
406 | ||
407 | .vjs-icon-placeholder { | |
408 | display: inline-block; | |
409 | width: 22px; | |
410 | height: 22px; | |
411 | vertical-align: middle; | |
412 | background: url('../assets/player/images/fullscreen.svg') no-repeat; | |
413 | background-size: contain; | |
414 | ||
415 | &::before { | |
416 | content: ''; | |
417 | } | |
418 | } | |
419 | } | |
e14852b4 | 420 | |
be6a4802 | 421 | .vjs-menu-button-popup { |
be6a4802 | 422 | font-weight: $font-semibold; |
86f278cb | 423 | width: 50px; |
be6a4802 | 424 | |
be6a4802 | 425 | .vjs-resolution-button { |
3ec8dc09 | 426 | @include disable-outline; |
be6a4802 C |
427 | } |
428 | ||
429 | .vjs-menu { | |
430 | top: 20px; | |
3ec8dc09 | 431 | left: 0; |
be6a4802 C |
432 | |
433 | .vjs-menu-content { | |
86f278cb | 434 | width: 50px; |
3ec8dc09 | 435 | bottom: 20px; |
be6a4802 C |
436 | } |
437 | ||
438 | li { | |
439 | text-transform: none; | |
440 | font-size: 13px; | |
441 | } | |
442 | } | |
443 | } | |
444 | } | |
a86309b4 | 445 | |
6cf57b44 C |
446 | @media screen and (max-width: 750px) { |
447 | .vjs-dock-text { | |
448 | font-size: 16px; | |
449 | } | |
450 | ||
451 | .vjs-dock-description { | |
3c40590d | 452 | font-size: 9px; |
6cf57b44 C |
453 | } |
454 | ||
455 | .vjs-big-play-button { | |
456 | font-size: 5em; | |
457 | border-width: 5px; | |
458 | ||
459 | .vjs-icon-placeholder::before { | |
460 | @include big-play-button-triangle-size(32px); | |
461 | } | |
462 | } | |
463 | } | |
464 | ||
e700d33b | 465 | @media screen and (max-width: 570px) { |
869968d7 C |
466 | .vjs-dock-text { |
467 | font-size: 14px; | |
468 | } | |
469 | ||
8fa5653a | 470 | .vjs-big-play-button { |
869968d7 | 471 | font-size: 4.5em; |
864e782b C |
472 | border-width: 4.5px; |
473 | ||
474 | .vjs-icon-placeholder::before { | |
475 | @include big-play-button-triangle-size(27px); | |
476 | } | |
8fa5653a C |
477 | } |
478 | ||
a73c582e C |
479 | .vjs-playback-rate { |
480 | display: none; | |
481 | } | |
482 | ||
7ccfb37f | 483 | .vjs-peertube { |
86f278cb C |
484 | padding: 0 !important; |
485 | ||
7ccfb37f | 486 | .vjs-peertube-displayed { |
86f278cb C |
487 | display: none !important; |
488 | } | |
489 | } | |
490 | } | |
491 | ||
492 | @media screen and (max-width: 300px) { | |
8fa5653a | 493 | .vjs-dock-text { |
22b59e80 C |
494 | font-size: 13px; |
495 | } | |
496 | ||
8fa5653a | 497 | .vjs-big-play-button { |
586f7c1b | 498 | font-size: 3em; |
864e782b C |
499 | border-width: 3px; |
500 | ||
501 | .vjs-icon-placeholder::before { | |
502 | @include big-play-button-triangle-size(20px); | |
503 | } | |
8fa5653a C |
504 | } |
505 | ||
86f278cb | 506 | .vjs-volume-control { |
a86309b4 C |
507 | display: none !important; |
508 | } | |
86f278cb | 509 | |
ea20306f C |
510 | .vjs-peertube-link { |
511 | padding: 0 !important; | |
512 | } | |
513 | ||
514 | .vjs-settings { | |
515 | width: 33px; | |
86f278cb | 516 | } |
a86309b4 | 517 | } |
e14852b4 | 518 | } |
b7a48512 | 519 | |
c6352f2c C |
520 | // Play/pause animations |
521 | .vjs-has-started .vjs-play-control { | |
522 | &.vjs-playing { | |
523 | animation: remove-pause-button 0.25s ease; | |
524 | } | |
525 | ||
526 | &.vjs-paused { | |
527 | animation: add-play-button 0.25s ease; | |
528 | } | |
529 | ||
530 | @keyframes remove-pause-button { | |
531 | 0% { | |
532 | transform: rotate(90deg); | |
533 | } | |
534 | 100% { | |
535 | transform: rotate(0deg); | |
536 | } | |
537 | } | |
538 | ||
539 | @keyframes add-play-button { | |
540 | 0% { | |
541 | transform: rotate(-90deg); | |
542 | } | |
543 | 100% { | |
544 | transform: rotate(0deg); | |
545 | } | |
546 | } | |
547 | } | |
548 | ||
b7a48512 C |
549 | // Thanks: https://projects.lukehaas.me/css-loaders/ |
550 | .vjs-loading-spinner { | |
fd45e8f4 | 551 | left: 50%; |
b7a48512 | 552 | font-size: 10px; |
fd45e8f4 C |
553 | text-indent: -9999em; |
554 | border: 0.7em solid rgba(255, 255, 255, 0.2); | |
555 | border-left-color: #ffffff; | |
b7a48512 | 556 | transform: translateZ(0); |
9581cabc | 557 | animation: 0.3s ease-out 1.1s forwards vjs-spinner-show, spinner 1.4s infinite linear !important; |
b2731bff | 558 | overflow: hidden; |
dfbd250d | 559 | visibility: hidden; |
b7a48512 | 560 | |
c6352f2c | 561 | &::before { |
b7a48512 | 562 | animation: none !important; |
b7a48512 C |
563 | } |
564 | ||
c6352f2c | 565 | &::after { |
b7a48512 | 566 | border-radius: 50%; |
fd45e8f4 C |
567 | width: 6em; |
568 | height: 6em; | |
b7a48512 C |
569 | animation: none !important; |
570 | } | |
571 | ||
fd45e8f4 | 572 | @keyframes spinner { |
b7a48512 | 573 | 0% { |
b7a48512 C |
574 | transform: rotate(0deg); |
575 | } | |
576 | 100% { | |
b7a48512 C |
577 | transform: rotate(360deg); |
578 | } | |
579 | } | |
dfbd250d C |
580 | |
581 | @keyframes vjs-spinner-show { | |
582 | 0% { | |
583 | display: none; | |
584 | opacity: 0; | |
585 | } | |
586 | ||
587 | 1% { | |
588 | display: block; | |
589 | visibility: visible; | |
590 | opacity: 0; | |
591 | } | |
592 | ||
593 | 100% { | |
594 | display: block; | |
595 | visibility: visible; | |
596 | opacity: 1; | |
597 | } | |
598 | } | |
b7a48512 | 599 | } |
a86309b4 | 600 | |
bf5685f0 C |
601 | // Error display disabled |
602 | .vjs-error:not(.vjs-error-display-enabled) { | |
603 | .vjs-error-display { | |
604 | display: none; | |
605 | } | |
606 | ||
607 | .vjs-loading-spinner { | |
608 | display: block; | |
609 | } | |
610 | } | |
611 | ||
612 | // Error display enabled | |
613 | .vjs-error.vjs-error-display-enabled { | |
614 | .vjs-error-display { | |
615 | display: block; | |
616 | } | |
617 | } | |
c6352f2c C |
618 | |
619 | ||
620 | /* Sass for videojs-settings-menu */ | |
621 | ||
622 | .video-js { | |
623 | ||
624 | .vjs-settings { | |
625 | @include disable-outline; | |
626 | ||
627 | cursor: pointer; | |
628 | width: 37px; | |
629 | ||
630 | .vjs-icon-placeholder { | |
631 | display: inline-block; | |
632 | width: 17px; | |
633 | height: 17px; | |
634 | vertical-align: middle; | |
635 | background: url('../assets/player/images/settings.svg') no-repeat; | |
636 | background-size: contain; | |
637 | ||
638 | &::before { | |
639 | content: ''; | |
640 | } | |
641 | } | |
642 | } | |
643 | ||
644 | .vjs-settings-sub-menu-title { | |
645 | width: 4em; | |
646 | text-transform: initial; | |
647 | } | |
648 | ||
649 | .vjs-settings-dialog { | |
650 | position: absolute; | |
651 | right: .5em; | |
652 | bottom: 3.5em; | |
653 | color: $primary-foreground-color; | |
654 | opacity: $primary-foreground-opacity; | |
655 | margin: 0 auto; | |
656 | font-size: $font-size !important; | |
657 | ||
658 | width: auto; | |
659 | overflow: hidden; | |
660 | ||
661 | transition: width $setting-transition-duration $setting-transition-easing, height $setting-transition-duration $setting-transition-easing; | |
662 | ||
663 | .vjs-settings-sub-menu-value, | |
664 | .vjs-settings-sub-menu-title { | |
665 | display: table-cell; | |
666 | padding: 0 5px; | |
667 | } | |
668 | ||
669 | .vjs-settings-sub-menu-title { | |
670 | text-align: left; | |
671 | font-weight: $font-semibold; | |
672 | } | |
673 | ||
674 | .vjs-settings-sub-menu-value { | |
675 | width: 100%; | |
676 | text-align: right; | |
a8462c8e C |
677 | |
678 | small { | |
679 | font-size: 0.85em; | |
680 | opacity: 0.8; | |
681 | } | |
c6352f2c C |
682 | } |
683 | ||
684 | .vjs-settings-panel { | |
685 | position: absolute; | |
686 | bottom: 0; | |
687 | right: 0; | |
688 | overflow-y: auto; | |
689 | overflow-x: hidden; | |
690 | border-radius: 1px; | |
691 | } | |
692 | ||
693 | .vjs-settings-panel-child { | |
694 | display: flex; | |
695 | ||
696 | align-items: flex-end; | |
697 | white-space: nowrap; | |
698 | ||
699 | &:focus, | |
700 | &:active { | |
701 | outline: none; | |
702 | } | |
703 | ||
704 | > .vjs-menu { | |
705 | flex: 1; | |
706 | min-width: 200px; | |
707 | } | |
708 | ||
709 | > .vjs-menu, | |
710 | > .vjs-settings-sub-menu { | |
711 | transition: all $setting-transition-duration $setting-transition-easing; | |
712 | ||
713 | .vjs-menu-item { | |
714 | ||
33d78552 C |
715 | &:hover { |
716 | background-color: rgba(255, 255, 255, 0.2); | |
717 | } | |
718 | ||
c6352f2c C |
719 | &:first-child { |
720 | margin-top: 5px; | |
721 | } | |
722 | ||
723 | &:last-child { | |
724 | margin-bottom: 5px; | |
725 | } | |
726 | } | |
727 | ||
728 | li { | |
729 | font-size: 1em; | |
730 | text-transform: initial; | |
731 | ||
732 | &:hover { | |
733 | cursor: pointer; | |
734 | } | |
735 | } | |
736 | } | |
737 | ||
738 | > .vjs-menu { | |
739 | .vjs-menu-item { | |
740 | padding: 8px 16px; | |
741 | } | |
742 | ||
743 | .vjs-settings-sub-menu-value::after { | |
744 | @include chevron-right(9px, 2px); | |
745 | ||
746 | margin-left: 5px; | |
747 | } | |
748 | } | |
749 | ||
750 | > .vjs-settings-sub-menu { | |
751 | width: 80px; | |
752 | ||
753 | .vjs-menu-item { | |
754 | outline: 0; | |
755 | font-weight: $font-semibold; | |
756 | ||
757 | padding: 5px 8px; | |
758 | text-align: right; | |
759 | ||
760 | &.vjs-back-button { | |
761 | background-color: inherit; | |
762 | padding: 8px 8px 13px 8px; | |
763 | margin-bottom: 5px; | |
764 | border-bottom: 1px solid grey; | |
765 | ||
766 | &::before { | |
767 | @include chevron-left(9px, 2px); | |
768 | ||
769 | margin-right: 5px; | |
770 | } | |
771 | } | |
772 | ||
773 | &.vjs-selected { | |
774 | background-color: inherit; | |
775 | color: inherit; | |
776 | position: relative; | |
777 | ||
778 | &::before { | |
779 | @include icon(15px); | |
780 | ||
781 | position: absolute; | |
782 | left: 8px; | |
783 | content: ' '; | |
784 | margin-top: 1px; | |
785 | background-image: url('../assets/player/images/tick.svg'); | |
786 | } | |
787 | } | |
788 | } | |
789 | } | |
790 | } | |
791 | } | |
960a11e8 C |
792 | } |
793 | ||
794 | /* Sass for videojs-contextmenu-ui */ | |
795 | ||
796 | .video-js .vjs-contextmenu-ui-menu { | |
797 | position: absolute; | |
798 | background-color: rgba(0, 0, 0, 0.5); | |
799 | padding: 5px 0; | |
800 | width: $context-menu-width; | |
801 | ||
802 | .vjs-menu-content { | |
803 | opacity: $primary-foreground-opacity; | |
804 | color: $primary-foreground-color; | |
805 | font-size: $font-size !important; | |
806 | font-weight: $font-semibold; | |
807 | } | |
808 | ||
809 | .vjs-menu-item { | |
810 | cursor: pointer; | |
811 | font-size: 1em; | |
812 | padding: 8px 16px; | |
813 | text-align: left; | |
814 | text-transform: none; | |
815 | ||
816 | &:hover { | |
817 | background-color: rgba(255, 255, 255, 0.2); | |
818 | } | |
819 | } | |
c6352f2c | 820 | } |