@gcorevideo/player 2.20.12 → 2.20.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/dist/core.js +26 -2
  2. package/dist/index.css +1197 -1197
  3. package/dist/index.js +33 -19
  4. package/dist/player.d.ts +8 -10
  5. package/dist/plugins/index.css +1619 -1619
  6. package/dist/plugins/index.js +8 -13
  7. package/docs/api/player.md +1 -1
  8. package/docs/api/player.mediacontrol.md +2 -11
  9. package/docs/api/player.playbackerror.md +2 -2
  10. package/docs/api/player.playbackerror.origin.md +1 -1
  11. package/docs/api/player.playbackerror.scope.md +1 -1
  12. package/docs/api/player.poster.md +1 -1
  13. package/docs/api/player.sourcecontroller.md +2 -33
  14. package/lib/Player.js +1 -1
  15. package/lib/playback/HTML5Video.d.ts +5 -0
  16. package/lib/playback/HTML5Video.d.ts.map +1 -1
  17. package/lib/playback/HTML5Video.js +21 -0
  18. package/lib/playback/hls-playback/HlsPlayback.d.ts +2 -2
  19. package/lib/playback/hls-playback/HlsPlayback.d.ts.map +1 -1
  20. package/lib/playback/hls-playback/HlsPlayback.js +4 -0
  21. package/lib/playback.types.d.ts +2 -2
  22. package/lib/plugins/click-to-pause/ClickToPause.d.ts.map +1 -1
  23. package/lib/plugins/click-to-pause/ClickToPause.js +0 -4
  24. package/lib/plugins/dvr-controls/DvrControls.d.ts.map +1 -1
  25. package/lib/plugins/dvr-controls/DvrControls.js +0 -1
  26. package/lib/plugins/media-control/MediaControl.d.ts +1 -8
  27. package/lib/plugins/media-control/MediaControl.d.ts.map +1 -1
  28. package/lib/plugins/media-control/MediaControl.js +2 -9
  29. package/lib/plugins/poster/Poster.d.ts +2 -0
  30. package/lib/plugins/poster/Poster.d.ts.map +1 -1
  31. package/lib/plugins/poster/Poster.js +3 -3
  32. package/lib/plugins/source-controller/SourceController.d.ts +3 -0
  33. package/lib/plugins/source-controller/SourceController.d.ts.map +1 -1
  34. package/lib/plugins/source-controller/SourceController.js +3 -0
  35. package/package.json +1 -1
  36. package/src/Player.ts +1 -1
  37. package/src/playback/HTML5Video.ts +29 -1
  38. package/src/playback/__tests__/HTML5Video.test.ts +47 -0
  39. package/src/playback/hls-playback/HlsPlayback.ts +5 -1
  40. package/src/playback.types.ts +2 -2
  41. package/src/plugins/click-to-pause/ClickToPause.ts +0 -5
  42. package/src/plugins/dvr-controls/DvrControls.ts +0 -1
  43. package/src/plugins/media-control/MediaControl.ts +2 -9
  44. package/src/plugins/poster/Poster.ts +4 -3
  45. package/src/plugins/source-controller/SourceController.ts +3 -0
  46. package/temp/player.api.json +6 -40
  47. package/tsconfig.tsbuildinfo +1 -1
  48. package/docs/api/player.sourcecontroller._constructor_.md +0 -50
package/dist/index.css CHANGED
@@ -261,6 +261,64 @@
261
261
  100% {
262
262
  color: #B80000;
263
263
  }
264
+ }.context-menu {
265
+ z-index: 999;
266
+ position: absolute;
267
+ top: 0;
268
+ left: 0;
269
+ text-align: center;
270
+ }
271
+ .context-menu .context-menu-list {
272
+ font-family: "Proxima Nova", sans-serif;
273
+ font-size: 12px;
274
+ line-height: 12px;
275
+ list-style-type: none;
276
+ text-align: left;
277
+ padding: 5px;
278
+ margin-left: auto;
279
+ margin-right: auto;
280
+ background-color: rgba(0, 0, 0, 0.75);
281
+ border: 1px solid #666;
282
+ border-radius: 4px;
283
+ }
284
+ .context-menu .context-menu-list .context-menu-list-item {
285
+ color: white;
286
+ padding: 5px;
287
+ cursor: pointer;
288
+ }div.player-error-screen, [data-player] div.player-error-screen {
289
+ color: #CCCACA;
290
+ position: absolute;
291
+ top: 0;
292
+ height: 100%;
293
+ width: 100%;
294
+ background-color: rgba(0, 0, 0, 0.7);
295
+ z-index: 2000;
296
+ display: flex;
297
+ flex-direction: column;
298
+ justify-content: center;
299
+ }
300
+ div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
301
+ font-size: 14px;
302
+ color: #CCCACA;
303
+ margin-top: 45px;
304
+ }
305
+ div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
306
+ font-weight: bold;
307
+ line-height: 30px;
308
+ font-size: 18px;
309
+ }
310
+ div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
311
+ width: 90%;
312
+ margin: 0 auto;
313
+ }
314
+ div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
315
+ font-size: 13px;
316
+ margin-top: 15px;
317
+ }
318
+ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
319
+ cursor: pointer;
320
+ width: 30px;
321
+ margin: 15px auto 0;
264
322
  }.big-mute-icon-wrapper[data-big-mute] {
265
323
  position: absolute;
266
324
  z-index: 9998;
@@ -310,983 +368,1093 @@
310
368
  }
311
369
  .big-mute-icon[data-big-mute-icon]:hover svg path {
312
370
  fill: #151515 !important;
313
- }.context-menu {
314
- z-index: 999;
315
- position: absolute;
316
- top: 0;
317
- left: 0;
318
- text-align: center;
319
- }
320
- .context-menu .context-menu-list {
321
- font-family: "Proxima Nova", sans-serif;
322
- font-size: 12px;
323
- line-height: 12px;
324
- list-style-type: none;
325
- text-align: left;
326
- padding: 5px;
327
- margin-left: auto;
328
- margin-right: auto;
329
- background-color: rgba(0, 0, 0, 0.75);
330
- border: 1px solid #666;
331
- border-radius: 4px;
332
- }
333
- .context-menu .context-menu-list .context-menu-list-item {
334
- color: white;
335
- padding: 5px;
336
- cursor: pointer;
337
- }[data-player] {
338
- --bottom-panel: 40px;
371
+ }.level-disabled {
372
+ opacity: 0.5;
373
+ pointer-events: none;
374
+ }*, :focus, :visited {
375
+ outline: none !important;
339
376
  }
340
377
 
341
- .container .media-control-notransition {
342
- transition: none !important;
378
+ .gear-wrapper .go-back {
379
+ font-weight: 600;
380
+ font-size: 14px;
381
+ line-height: 20px;
382
+ width: 100%;
383
+ text-align: left;
384
+ padding: 12px;
343
385
  }
344
- .container .player-poster[data-poster] .play-wrapper[data-poster] {
345
- opacity: 1;
386
+ .gear-wrapper .go-back .arrow-left-icon {
387
+ float: left;
388
+ padding-top: 2px;
389
+ padding-right: 2px;
346
390
  }
347
- .container.crop-video [data-html5-video] {
348
- object-fit: cover;
391
+ .gear-wrapper .go-back .arrow-left-icon svg {
392
+ height: 16px;
349
393
  }
350
- .container .subtitle-string {
351
- position: absolute;
352
- bottom: calc(var(--bottom-panel) + 5px);
394
+ .gear-wrapper ul.gear-sub-menu {
353
395
  width: 100%;
396
+ list-style-type: none;
397
+ background-color: transparent;
398
+ min-width: 60px;
399
+ border-top: 2px solid rgb(36, 36, 36);
354
400
  }
355
- .container .subtitle-string p {
356
- width: auto;
357
- background-color: rgba(0, 0, 0, 0.4);
358
- color: white;
359
- display: inline-block;
401
+ .gear-wrapper ul.gear-sub-menu li {
402
+ font-size: 12px;
403
+ text-align: left;
360
404
  }
361
- .container .circle-poster[data-poster] {
362
- top: 50%;
363
- margin-top: -60px;
364
- left: 50%;
365
- margin-left: -60px;
366
- position: absolute;
367
- width: 120px;
368
- height: 120px;
369
- border: 2px solid white;
370
- border-radius: 50%;
371
- filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
372
- filter: alpha(opacity=60);
373
- opacity: 1;
374
- box-shadow: 0 0 1px 0 white;
405
+ .gear-wrapper ul.gear-sub-menu li[data-title] {
406
+ background-color: #c3c2c2;
407
+ padding: 5px;
375
408
  }
376
- .container .circle-poster[data-poster] svg {
377
- margin-left: 5px;
378
- width: 80px;
379
- height: 80px;
409
+ .gear-wrapper ul.gear-sub-menu li a {
410
+ display: block;
411
+ text-decoration: none;
412
+ height: 32px;
413
+ padding: 5px 10px;
414
+ line-height: 22px;
415
+ color: #fffffe;
380
416
  }
381
- .container .spinner-three-bounce[data-spinner] > div {
382
- background-color: #ff5700;
417
+ .gear-wrapper ul.gear-sub-menu li a:hover {
418
+ color: white;
419
+ background-color: rgba(0, 0, 0, 0.4);
383
420
  }
384
-
385
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-quality,
386
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-audio-tracks {
387
- display: none;
421
+ .gear-wrapper ul.gear-sub-menu li a:hover a {
422
+ color: white;
423
+ text-decoration: none;
388
424
  }
389
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
390
- transform: rotate(270deg);
391
- float: none;
425
+ .gear-wrapper ul.gear-sub-menu li a .check-icon {
426
+ width: 30px;
427
+ height: 20px;
428
+ float: left;
392
429
  display: block;
393
- position: absolute;
394
- /* bottom: 12px; */
395
- margin: 0;
396
- top: -40px;
397
- padding: 0;
398
- /* right: 20px; */
399
- margin-left: -32px;
400
- margin-top: -3px;
401
- width: 80px;
402
- /* padding-left: 12px; */
403
- }
404
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background-mask {
405
- position: absolute;
406
- width: 100%;
407
- height: 100%;
408
- left: -5px;
409
430
  }
410
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {
431
+ .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
411
432
  display: none;
412
433
  }
413
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background {
414
- margin-left: 11px;
415
- top: 7px;
416
- width: 80px;
434
+ .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
435
+ display: inline;
417
436
  }
418
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber {
419
- margin-left: 11px;
420
- top: 1px;
437
+ .gear-wrapper svg {
438
+ height: 20px;
439
+ }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
440
+ float: right;
441
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
421
442
  }
422
-
423
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-subtitles .subtitles[data-subtitles] {
424
- width: 28px;
443
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear {
444
+ height: 40px;
445
+ width: 40px;
446
+ padding-right: 20px;
425
447
  }
426
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-subtitles .subtitles[data-subtitles] svg {
427
- height: 17px;
448
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear svg {
449
+ height: 20px;
428
450
  }
429
- .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container {
430
- top: calc(50% - 150px);
431
- left: calc(50% - 125px);
451
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
452
+ position: absolute;
453
+ right: 16px;
454
+ bottom: 52px;
455
+ display: none;
432
456
  width: 250px;
433
- height: calc(100% - 32px);
434
- max-height: 300px;
435
- transform: none;
457
+ min-height: 48px;
458
+ z-index: 9999;
459
+ border-radius: 4px;
436
460
  }
437
- .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container .share-container-header {
438
- border: none;
461
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
462
+ padding: 8px 0;
439
463
  }
440
- .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
441
- visibility: hidden;
464
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list svg {
465
+ float: left;
466
+ margin-right: 10px;
442
467
  }
443
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality,
444
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks {
445
- display: block;
468
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
469
+ margin: 0;
470
+ text-align: left;
471
+ line-height: 22px;
472
+ padding: 5px 14px;
473
+ width: 250px;
474
+ font-size: 12px;
446
475
  }
447
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector],
448
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector],
449
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector],
450
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] {
451
- margin-top: 3px;
452
- margin-right: 10px;
476
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_arrow-right-icon {
477
+ float: right;
478
+ margin-right: -14px;
453
479
  }
454
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] ul,
455
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] ul,
456
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] ul,
457
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] ul {
458
- bottom: 30px;
459
- width: 50px;
460
- }
461
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] ul li,
462
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] ul li,
463
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] ul li,
464
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] ul li {
465
- height: 23px;
466
- font-size: 14px;
467
- }
468
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] ul li a,
469
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] ul li a,
470
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] ul li a,
471
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] ul li a {
472
- height: 23px;
473
- padding: 2px 5px;
474
- }
475
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] button[data-level-selector-button] .quality-text, .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] button[data-level-selector-button] .audio-text,
476
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] button[data-track-selector-button] .quality-text,
477
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] button[data-track-selector-button] .audio-text,
478
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] button[data-level-selector-button] .quality-text,
479
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] button[data-level-selector-button] .audio-text,
480
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] button[data-track-selector-button] .quality-text,
481
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] button[data-track-selector-button] .audio-text,
482
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] button[data-level-selector-button] .quality-text,
483
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] button[data-level-selector-button] .audio-text,
484
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] button[data-track-selector-button] .quality-text,
485
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] button[data-track-selector-button] .audio-text,
486
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] button[data-level-selector-button] .quality-text,
487
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] button[data-level-selector-button] .audio-text,
488
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] button[data-track-selector-button] .quality-text,
489
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] button[data-track-selector-button] .audio-text {
490
- font-size: 13px;
480
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_value {
481
+ float: right;
482
+ margin-right: 8px;
491
483
  }
492
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] button[data-level-selector-button] span.quality-arrow, .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] button[data-level-selector-button] span.audio-arrow,
493
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] button[data-track-selector-button] span.quality-arrow,
494
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] button[data-track-selector-button] span.audio-arrow,
495
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] button[data-level-selector-button] span.quality-arrow,
496
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] button[data-level-selector-button] span.audio-arrow,
497
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] button[data-track-selector-button] span.quality-arrow,
498
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] button[data-track-selector-button] span.audio-arrow,
499
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] button[data-level-selector-button] span.quality-arrow,
500
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] button[data-level-selector-button] span.audio-arrow,
501
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] button[data-track-selector-button] span.quality-arrow,
502
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] button[data-track-selector-button] span.audio-arrow,
503
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] button[data-level-selector-button] span.quality-arrow,
504
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] button[data-level-selector-button] span.audio-arrow,
505
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] button[data-track-selector-button] span.quality-arrow,
506
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] button[data-track-selector-button] span.audio-arrow {
507
- width: 7px;
508
- height: 5px;
509
- margin-left: 4px;
510
- margin-top: 11px;
484
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option svg {
485
+ height: 20px;
486
+ }*, :focus, :visited {
487
+ outline: none !important;
511
488
  }
512
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera {
513
- margin-top: 0;
514
- margin-right: 10px;
489
+
490
+ .multicamera[data-multicamera] {
491
+ float: right;
492
+ margin-top: 4px;
493
+ position: relative;
494
+ margin-right: 20px;
495
+ width: 20px;
515
496
  }
516
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera button {
517
- height: 32px;
497
+ .multicamera[data-multicamera] button {
498
+ background-color: transparent;
499
+ color: #fff;
500
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
501
+ -webkit-font-smoothing: antialiased;
502
+ border: none;
503
+ font-size: 14px;
504
+ padding: 0;
518
505
  }
519
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera button svg {
520
- height: 17px;
521
- margin: 0;
506
+ .multicamera[data-multicamera] button svg {
507
+ height: 20px;
508
+ position: relative;
509
+ margin-top: 6px;
522
510
  }
523
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] {
524
- height: 32px;
511
+ .multicamera[data-multicamera] button:hover {
512
+ color: #c9c9c9;
525
513
  }
526
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-bottomgear .button-gear {
527
- height: 33px;
528
- margin-right: 10px;
529
- padding-right: 0;
514
+ .multicamera[data-multicamera] button.changing {
515
+ animation: pulse 0.5s infinite alternate;
530
516
  }
531
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-bottomgear .button-gear svg {
532
- height: 17px;
517
+ .multicamera[data-multicamera] button span.quality-arrow {
518
+ width: 9px;
519
+ height: 6px;
520
+ margin-top: 11px;
521
+ margin-left: 5px;
533
522
  }
534
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator {
535
- line-height: 32px;
523
+ .multicamera[data-multicamera] > ul {
524
+ padding: 6px 0;
525
+ right: -24px;
526
+ width: 245px;
527
+ list-style-type: none;
528
+ position: absolute;
529
+ bottom: 48px;
530
+ border-radius: 4px;
531
+ display: none;
532
+ background-color: rgba(74, 74, 74, 0.9);
536
533
  }
537
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator[data-position], .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator[data-duration] {
538
- font-size: 11px;
539
- line-height: 32px;
534
+ .multicamera[data-multicamera] > ul::after {
535
+ content: "";
536
+ position: absolute;
537
+ top: 100%;
538
+ left: 85%;
539
+ margin-left: -10px;
540
+ width: 0;
541
+ height: 0;
542
+ border-top: 10px solid rgba(74, 74, 74, 0.9);
543
+ border-right: 10px solid transparent;
544
+ border-left: 10px solid transparent;
540
545
  }
541
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr-controls] {
542
- height: 32px;
546
+ .multicamera[data-multicamera] li {
547
+ font-size: 10px;
548
+ cursor: pointer;
543
549
  }
544
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr-controls] .live-button {
545
- margin-left: 10px;
546
- height: 32px;
547
- font-size: 12px;
548
- line-height: 32px;
549
- text-shadow: none;
550
- letter-spacing: 0.6px;
550
+ .multicamera[data-multicamera] li .multicamera-item {
551
+ display: flex;
552
+ padding: 10px 0;
553
+ justify-content: center;
554
+ position: relative;
551
555
  }
552
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr-controls] .live-button::before {
553
- width: 8px;
554
- height: 8px;
555
- margin-right: 4px;
556
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
557
+ pointer-events: none;
556
558
  }
557
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr-controls] .live-info {
558
- margin-left: 10px;
559
- height: 32px;
560
- font-size: 12px;
561
- line-height: 32px;
562
- text-shadow: none;
563
- letter-spacing: 0.6px;
559
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
560
+ opacity: 0.5;
564
561
  }
565
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr-controls] .live-info::before {
566
- width: 8px;
567
- height: 8px;
568
- margin-right: 4px;
562
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
563
+ opacity: 0.5;
569
564
  }
570
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button {
571
- height: 32px;
565
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
566
+ background-color: rgba(0, 0, 0, 0);
572
567
  }
573
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button[data-playpause] {
574
- margin-left: 10px;
575
- margin-right: 10px;
568
+ .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
569
+ background-color: rgba(0, 0, 0, 0.3);
576
570
  }
577
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button[data-playstop] {
578
- margin-left: 10px;
579
- margin-right: 10px;
571
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
572
+ width: 80px;
573
+ height: 60px;
580
574
  }
581
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {
582
- margin-right: 12px;
583
- height: 33px;
575
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
576
+ width: 80px;
577
+ height: 60px;
584
578
  }
585
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button svg {
586
- height: 17px;
579
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
580
+ width: 120px;
581
+ text-align: left;
582
+ margin-left: 15px;
587
583
  }
588
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-clip-container .media-clip-text,
589
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-clip-container .media-clip-point {
590
- line-height: 33px;
591
- font-size: 11px;
584
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title, .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
585
+ width: 120px;
586
+ height: 20px;
587
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
588
+ font-size: 14px;
589
+ font-weight: normal;
590
+ font-style: normal;
591
+ font-stretch: normal;
592
+ line-height: 1.43;
593
+ letter-spacing: normal;
594
+ text-align: left;
595
+ color: #fff;
596
+ text-overflow: ellipsis;
597
+ overflow: hidden;
592
598
  }
593
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-clip-container .media-clip-text {
594
- max-width: calc(80% - 210px);
599
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
600
+ opacity: 0.6;
595
601
  }
596
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] {
597
- height: 32px;
598
- margin-right: 8px;
602
+ .multicamera[data-multicamera] li[data-title] {
603
+ background-color: #c3c2c2;
604
+ padding: 5px;
599
605
  }
600
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {
601
- height: 32px;
606
+ .multicamera[data-multicamera] li a {
607
+ color: #444;
608
+ padding: 2px 10px;
609
+ display: block;
610
+ text-decoration: none;
602
611
  }
603
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {
604
- height: 17px;
605
- margin-top: 5px;
612
+ .multicamera[data-multicamera] li a:hover {
613
+ background-color: #555;
614
+ color: white;
606
615
  }
607
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
608
- display: none;
616
+ .multicamera[data-multicamera] li a:hover a {
617
+ color: white;
618
+ text-decoration: none;
609
619
  }
610
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {
611
- width: 0;
612
- height: 12px;
613
- top: 9px;
614
- padding: 0;
620
+ .multicamera[data-multicamera] li.current a {
621
+ color: #f00;
615
622
  }
616
623
 
617
- .media-control-skin-1[data-media-control-skin-1] {
618
- position: absolute;
619
- width: 100%;
620
- height: 100%;
621
- z-index: 9999;
622
- pointer-events: none;
623
- font-family: Roboto, "Open Sans", Arial, sans-serif;
624
- }
625
- .media-control-skin-1[data-media-control-skin-1].dragging {
626
- pointer-events: auto;
627
- cursor: grabbing !important;
628
- cursor: url("closed-hand.cur"), move;
629
- }
630
- .media-control-skin-1[data-media-control-skin-1].dragging * {
631
- cursor: grabbing !important;
632
- cursor: url("closed-hand.cur"), move;
633
- }
634
- .media-control-skin-1[data-media-control-skin-1] .media-control-icon {
635
- line-height: 0;
636
- letter-spacing: 0;
637
- speak: none;
624
+ @keyframes pulse {
625
+ 0% {
626
+ color: #fff;
627
+ }
628
+ 50% {
629
+ color: #ff0101;
630
+ }
631
+ 100% {
632
+ color: #B80000;
633
+ }
634
+ }.dvr-controls[data-dvr-controls] {
635
+ display: inline-block;
636
+ float: left;
638
637
  color: #fff;
639
- vertical-align: middle;
640
- text-align: left;
641
- transition: all 0.1s ease;
638
+ line-height: 32px;
639
+ font-size: 10px;
640
+ font-weight: bold;
641
+ margin-left: 6px;
642
+ height: 40px;
643
+ line-height: 40px;
644
+ margin-left: 0;
642
645
  }
643
- .media-control-skin-1[data-media-control-skin-1] .media-control-icon:hover {
644
- color: white;
646
+ .dvr-controls[data-dvr-controls] .live-info {
647
+ cursor: default;
648
+ font-family: "Roboto", "Open Sans", Arial, sans-serif;
649
+ text-transform: uppercase;
645
650
  }
646
- .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-background[data-background] {
647
- opacity: 0;
651
+ .dvr-controls[data-dvr-controls] .live-info:before {
652
+ content: "";
653
+ display: inline-block;
654
+ position: relative;
655
+ width: 7px;
656
+ height: 7px;
657
+ border-radius: 3.5px;
658
+ margin-right: 3.5px;
659
+ background-color: #ff0101;
648
660
  }
649
- .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-layer[data-controls] {
650
- bottom: -50px;
661
+ .dvr-controls[data-dvr-controls] .live-info.disabled {
662
+ opacity: 0.3;
651
663
  }
652
- .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {
653
- opacity: 0;
664
+ .dvr-controls[data-dvr-controls] .live-info.disabled:before {
665
+ background-color: #fff;
654
666
  }
655
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] {
656
- position: absolute;
657
- bottom: 0;
658
- width: 100%;
659
- height: var(--bottom-panel);
660
- font-size: 0;
661
- vertical-align: middle;
662
- pointer-events: auto;
663
- transition: bottom 0.4s ease-out;
667
+ .dvr-controls[data-dvr-controls] .live-button {
668
+ cursor: pointer;
669
+ outline: none;
670
+ display: none;
671
+ border: 0;
672
+ color: #fff;
673
+ background-color: transparent;
674
+ height: 32px;
675
+ padding: 0;
676
+ opacity: 0.7;
677
+ font-family: "Roboto", "Open Sans", Arial, sans-serif;
678
+ text-transform: uppercase;
679
+ transition: all 0.1s ease;
664
680
  }
665
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-left-panel[data-media-control-skin-1] {
666
- position: absolute;
667
- top: 0;
668
- left: 4px;
669
- height: 100%;
681
+ .dvr-controls[data-dvr-controls] .live-button:before {
682
+ content: "";
683
+ display: inline-block;
684
+ position: relative;
685
+ width: 7px;
686
+ height: 7px;
687
+ border-radius: 3.5px;
688
+ margin-right: 3.5px;
689
+ background-color: #fff;
670
690
  }
671
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-center-panel[data-media-control-skin-1] {
672
- height: 100%;
673
- text-align: center;
674
- line-height: var(--bottom-panel);
691
+ .dvr-controls[data-dvr-controls] .live-button:hover {
692
+ opacity: 1;
693
+ text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
675
694
  }
676
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-right-panel[data-media-control-skin-1] {
677
- position: absolute;
678
- top: 0;
679
- right: 4px;
680
- height: 100%;
695
+ .dvr-controls[data-dvr-controls] .live-info {
696
+ font-size: 14px;
697
+ letter-spacing: 0.8px;
698
+ font-weight: 500;
699
+ color: #fffffe;
700
+ margin-left: 21px;
681
701
  }
682
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button {
683
- background-color: transparent;
684
- border: 0;
685
- padding: 0;
686
- cursor: pointer;
687
- display: inline-block;
702
+ .dvr-controls[data-dvr-controls] .live-info::before {
703
+ width: 10px;
704
+ height: 10px;
705
+ border-radius: 50%;
706
+ margin-right: 8px;
707
+ background-color: #ed4f4a;
708
+ }
709
+ .dvr-controls[data-dvr-controls] .live-button {
688
710
  height: 40px;
689
- width: 20px;
711
+ opacity: 1;
712
+ font-size: 14px;
713
+ letter-spacing: 0.8px;
714
+ font-weight: 500;
715
+ margin-left: 20px;
690
716
  }
691
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button svg {
692
- height: 20px;
717
+ .dvr-controls[data-dvr-controls] .live-button::before {
718
+ width: 10px;
719
+ height: 10px;
720
+ border-radius: 50%;
721
+ margin-right: 8px;
722
+ background-color: #cacaca;
693
723
  }
694
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button svg path {
695
- fill: white;
724
+
725
+ .dvr .dvr-controls[data-dvr-controls] .live-info {
726
+ display: none;
696
727
  }
697
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button:focus {
698
- outline: none;
728
+ .dvr .dvr-controls[data-dvr-controls] .live-button {
729
+ display: block;
699
730
  }
700
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-play] {
701
- float: left;
702
- height: 100%;
731
+ .dvr.media-control.live[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
732
+ background-color: #005aff;
703
733
  }
704
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-pause] {
705
- float: left;
706
- height: 100%;
734
+
735
+ .media-control.live[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
736
+ background-color: #ff0101;
737
+ }[data-player] {
738
+ --bottom-panel: 40px;
707
739
  }
708
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-stop] {
709
- float: left;
710
- height: 100%;
740
+
741
+ .container .media-control-notransition {
742
+ transition: none !important;
711
743
  }
712
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {
713
- float: right;
714
- background-color: transparent;
715
- border: 0;
716
- margin-right: 12px;
717
- height: 40px;
744
+ .container .player-poster[data-poster] .play-wrapper[data-poster] {
745
+ opacity: 1;
718
746
  }
719
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-hd-indicator] {
720
- background-color: transparent;
721
- border: 0;
722
- cursor: default;
723
- display: none !important;
724
- float: right;
725
- height: 100%;
747
+ .container.crop-video [data-html5-video] {
748
+ object-fit: cover;
726
749
  }
727
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-playpause], .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-playstop] {
728
- float: left;
729
- margin-left: 8px;
730
- margin-right: 14px;
750
+ .container .subtitle-string {
751
+ position: absolute;
752
+ bottom: calc(var(--bottom-panel) + 5px);
753
+ width: 100%;
731
754
  }
732
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-position], .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration] {
733
- display: inline-block;
734
- float: left;
735
- font-size: 14px;
755
+ .container .subtitle-string p {
756
+ width: auto;
757
+ background-color: rgba(0, 0, 0, 0.4);
736
758
  color: white;
737
- cursor: default;
738
- line-height: var(--bottom-panel);
739
- position: relative;
759
+ display: inline-block;
740
760
  }
741
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-position] {
742
- margin: 1px 6px 0 7px;
761
+ .container .circle-poster[data-poster] {
762
+ top: 50%;
763
+ margin-top: -60px;
764
+ left: 50%;
765
+ margin-left: -60px;
766
+ position: absolute;
767
+ width: 120px;
768
+ height: 120px;
769
+ border: 2px solid white;
770
+ border-radius: 50%;
771
+ filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
772
+ filter: alpha(opacity=60);
773
+ opacity: 1;
774
+ box-shadow: 0 0 1px 0 white;
743
775
  }
744
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration] {
745
- color: rgb(255, 255, 255);
746
- opacity: 0.5;
747
- margin-top: 1px;
748
- margin-right: 6px;
776
+ .container .circle-poster[data-poster] svg {
777
+ margin-left: 5px;
778
+ width: 80px;
779
+ height: 80px;
749
780
  }
750
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration]::before {
751
- content: "|";
752
- margin-right: 7px;
781
+ .container .spinner-three-bounce[data-spinner] > div {
782
+ background-color: #ff5700;
753
783
  }
754
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container {
784
+
785
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-quality,
786
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-audio-tracks {
755
787
  display: none;
756
788
  }
757
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container .media-clip-text,
758
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container .media-clip-point {
759
- text-overflow: ellipsis;
760
- white-space: nowrap;
761
- overflow: hidden;
762
- display: inline-block;
763
- float: left;
764
- font-size: 14px;
765
- color: white;
766
- cursor: default;
767
- line-height: var(--bottom-panel);
768
- position: relative;
769
- }
770
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container .media-clip-point {
771
- margin-right: 6px;
772
- }
773
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container .media-clip-text {
774
- max-width: calc(80% - 240px);
775
- }
776
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] {
777
- position: absolute;
778
- top: -11px;
779
- left: 0;
780
- display: inline-block;
781
- vertical-align: middle;
782
- width: 100%;
783
- height: 20px;
784
- cursor: pointer;
785
- }
786
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] {
787
- width: 100%;
788
- height: 3px;
789
- position: relative;
790
- top: 8px;
791
- background-color: #666;
792
- }
793
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-1[data-seekbar] {
789
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
790
+ transform: rotate(270deg);
791
+ float: none;
792
+ display: block;
794
793
  position: absolute;
795
- top: 0;
796
- left: 0;
797
- width: 0;
798
- height: 100%;
799
- background-color: white;
800
- transition: all 0.1s ease-out;
794
+ /* bottom: 12px; */
795
+ margin: 0;
796
+ top: -40px;
797
+ padding: 0;
798
+ /* right: 20px; */
799
+ margin-left: -32px;
800
+ margin-top: -3px;
801
+ width: 80px;
802
+ /* padding-left: 12px; */
801
803
  }
802
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
804
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background-mask {
803
805
  position: absolute;
804
- top: 0;
805
- left: 0;
806
- width: 0;
806
+ width: 100%;
807
807
  height: 100%;
808
- background-color: #ff5700;
809
- transition: all 0.1s ease-out;
810
- }
811
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled {
812
- cursor: default;
813
- display: none;
808
+ left: -5px;
814
809
  }
815
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled + .bar-scrubber[data-seekbar] {
816
- cursor: default;
810
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {
817
811
  display: none;
818
812
  }
819
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {
820
- position: absolute;
821
- transform: translateX(-50%);
822
- top: -11.5px;
823
- left: 0;
824
- width: 20px;
825
- height: 20px;
826
- opacity: 1;
827
- transition: all 0.1s ease-out;
813
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background {
814
+ margin-left: 11px;
815
+ top: 7px;
816
+ width: 80px;
828
817
  }
829
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-scrubber[data-seekbar] .bar-scrubber-icon[data-seekbar] {
830
- position: absolute;
831
- left: 4.5px;
832
- top: 4.5px;
833
- width: 11px;
834
- height: 11px;
835
- border-radius: 50%;
836
- background-color: white;
818
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber {
819
+ margin-left: 11px;
820
+ top: 1px;
837
821
  }
838
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] {
839
- float: left;
840
- display: inline-block;
841
- height: var(--bottom-panel);
842
- cursor: pointer;
843
- box-sizing: border-box;
844
- margin-right: 20px;
822
+
823
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-subtitles .subtitles[data-subtitles] {
824
+ width: 28px;
845
825
  }
846
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] {
847
- float: left;
848
- bottom: 0;
826
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-subtitles .subtitles[data-subtitles] svg {
827
+ height: 17px;
849
828
  }
850
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {
851
- background-color: transparent;
852
- border: 0;
853
- box-sizing: content-box;
854
- height: var(--bottom-panel);
855
- width: 20px;
829
+ .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container {
830
+ top: calc(50% - 150px);
831
+ left: calc(50% - 125px);
832
+ width: 250px;
833
+ height: calc(100% - 32px);
834
+ max-height: 300px;
835
+ transform: none;
856
836
  }
857
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {
858
- height: 20px;
859
- position: relative;
860
- top: 3px;
861
- margin-top: 7px;
837
+ .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container .share-container-header {
838
+ border: none;
862
839
  }
863
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg path {
864
- fill: white;
840
+ .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
841
+ visibility: hidden;
865
842
  }
866
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume].muted svg {
867
- margin-left: 2px;
843
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality,
844
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks {
845
+ display: block;
868
846
  }
869
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
870
- float: left;
871
- position: relative;
872
- margin-left: 10px;
873
- top: 8px;
874
- width: 80px;
875
- height: 23px;
876
- padding: 3px 0;
877
- transition: width 0.2s ease-out;
847
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector],
848
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector],
849
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector],
850
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] {
851
+ margin-top: 3px;
852
+ margin-right: 10px;
878
853
  }
879
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] {
880
- height: 3px;
881
- border-radius: 100px;
882
- position: relative;
883
- top: 7px;
884
- background-color: #666;
854
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] ul,
855
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] ul,
856
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] ul,
857
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] ul {
858
+ bottom: 30px;
859
+ width: 50px;
885
860
  }
886
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-1[data-volume] {
887
- position: absolute;
888
- top: 0;
889
- left: 0;
890
- width: 0;
891
- height: 100%;
892
- border-radius: 100px;
893
- background-color: white;
894
- transition: all 0.1s ease-out;
861
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] ul li,
862
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] ul li,
863
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] ul li,
864
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] ul li {
865
+ height: 23px;
866
+ font-size: 14px;
895
867
  }
896
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-2[data-volume] {
897
- position: absolute;
898
- top: 0;
899
- left: 0;
900
- width: 0;
901
- height: 100%;
902
- background-color: #005aff;
903
- transition: all 0.1s ease-out;
868
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] ul li a,
869
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] ul li a,
870
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] ul li a,
871
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] ul li a {
872
+ height: 23px;
873
+ padding: 2px 5px;
904
874
  }
905
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] {
906
- position: absolute;
907
- transform: translateX(-50%);
908
- top: 3px;
909
- margin-left: 3px;
910
- width: 16px;
911
- height: 16px;
912
- opacity: 1;
913
- transition: all 0.1s ease-out;
875
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] button[data-level-selector-button] .quality-text, .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] button[data-level-selector-button] .audio-text,
876
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] button[data-track-selector-button] .quality-text,
877
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] button[data-track-selector-button] .audio-text,
878
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] button[data-level-selector-button] .quality-text,
879
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] button[data-level-selector-button] .audio-text,
880
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] button[data-track-selector-button] .quality-text,
881
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] button[data-track-selector-button] .audio-text,
882
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] button[data-level-selector-button] .quality-text,
883
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] button[data-level-selector-button] .audio-text,
884
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] button[data-track-selector-button] .quality-text,
885
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] button[data-track-selector-button] .audio-text,
886
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] button[data-level-selector-button] .quality-text,
887
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] button[data-level-selector-button] .audio-text,
888
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] button[data-track-selector-button] .quality-text,
889
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] button[data-track-selector-button] .audio-text {
890
+ font-size: 13px;
914
891
  }
915
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] .bar-scrubber-icon[data-volume] {
916
- position: absolute;
917
- left: 3px;
918
- top: 5px;
892
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] button[data-level-selector-button] span.quality-arrow, .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] button[data-level-selector-button] span.audio-arrow,
893
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] button[data-track-selector-button] span.quality-arrow,
894
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .level_selector[data-level-selector] button[data-track-selector-button] span.audio-arrow,
895
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] button[data-level-selector-button] span.quality-arrow,
896
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] button[data-level-selector-button] span.audio-arrow,
897
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] button[data-track-selector-button] span.quality-arrow,
898
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality .audio_selector[data-track-selector] button[data-track-selector-button] span.audio-arrow,
899
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] button[data-level-selector-button] span.quality-arrow,
900
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] button[data-level-selector-button] span.audio-arrow,
901
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] button[data-track-selector-button] span.quality-arrow,
902
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .level_selector[data-level-selector] button[data-track-selector-button] span.audio-arrow,
903
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] button[data-level-selector-button] span.quality-arrow,
904
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] button[data-level-selector-button] span.audio-arrow,
905
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] button[data-track-selector-button] span.quality-arrow,
906
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audio-tracks .audio_selector[data-track-selector] button[data-track-selector-button] span.audio-arrow {
919
907
  width: 7px;
920
- height: 7px;
921
- border-radius: 50%;
922
- background-color: white;
908
+ height: 5px;
909
+ margin-left: 4px;
910
+ margin-top: 11px;
923
911
  }
924
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume] {
925
- float: left;
926
- width: 4px;
927
- padding-left: 2px;
928
- height: 12px;
929
- opacity: 0.5;
930
- box-shadow: inset 2px 0 0 white;
931
- transition: transform 0.2s ease-out;
912
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera {
913
+ margin-top: 0;
914
+ margin-right: 10px;
932
915
  }
933
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume].fill {
934
- box-shadow: inset 2px 0 0 #fff;
935
- opacity: 1;
916
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera button {
917
+ height: 32px;
936
918
  }
937
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:nth-of-type(1) {
938
- padding-left: 0;
919
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera button svg {
920
+ height: 17px;
921
+ margin: 0;
939
922
  }
940
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:hover {
941
- transform: scaleY(1.5);
942
- }.level-disabled {
943
- opacity: 0.5;
944
- pointer-events: none;
945
- }.share_plugin[data-share] {
946
- pointer-events: auto;
947
- z-index: 5;
948
- font-family: Roboto, "Open Sans", Arial, sans-serif !important;
923
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] {
924
+ height: 32px;
949
925
  }
950
- .share_plugin[data-share].share-hide .share-button-container {
951
- right: -50px;
926
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-bottomgear .button-gear {
927
+ height: 33px;
928
+ margin-right: 10px;
929
+ padding-right: 0;
952
930
  }
953
- .share_plugin[data-share] .share-button-container {
954
- cursor: pointer;
955
- width: 36px;
956
- height: 36px;
957
- background-color: rgba(74, 74, 74, 0.6);
958
- border-radius: 4px;
959
- position: absolute;
960
- right: 10px;
961
- top: 10px;
962
- padding-top: 6px;
963
- transition: all 0.3s ease-out;
931
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-bottomgear .button-gear svg {
932
+ height: 17px;
964
933
  }
965
- .share_plugin[data-share] .share-button-container button[data-share-button] {
966
- background-color: transparent;
967
- border: 0;
968
- margin: 0 6px;
969
- padding: 0;
970
- cursor: pointer;
971
- display: inline-block;
972
- width: 19px;
973
- height: 20px;
934
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator {
935
+ line-height: 32px;
974
936
  }
975
- .share_plugin[data-share] .share-container {
976
- pointer-events: auto;
977
- position: absolute;
978
- width: 280px;
979
- background-color: white;
980
- transform: translate(0, 50%);
981
- transform: translate(-50%, -50%);
982
- left: 50%;
983
- /* margin-left: -140px; */
984
- top: calc(50% - 20px);
985
- /* margin-top: -170px; */
937
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator[data-position], .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator[data-duration] {
938
+ font-size: 11px;
939
+ line-height: 32px;
986
940
  }
987
- .share_plugin[data-share] .share-container .share-container-header {
988
- text-align: left;
989
- border-bottom: 1px solid rgba(155, 155, 155, 0.25);
941
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr-controls] {
942
+ height: 32px;
990
943
  }
991
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
992
- display: inline-block;
993
- font-size: 16px;
994
- margin: 5px;
944
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr-controls] .live-button {
945
+ margin-left: 10px;
946
+ height: 32px;
947
+ font-size: 12px;
948
+ line-height: 32px;
949
+ text-shadow: none;
950
+ letter-spacing: 0.6px;
995
951
  }
996
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
997
- display: inline-block;
998
- width: 24px;
999
- float: right;
1000
- margin: 5px;
1001
- cursor: pointer;
952
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr-controls] .live-button::before {
953
+ width: 8px;
954
+ height: 8px;
955
+ margin-right: 4px;
1002
956
  }
1003
- .share_plugin[data-share] .share-container .share-container-main {
1004
- margin-bottom: 8px;
957
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr-controls] .live-info {
958
+ margin-left: 10px;
959
+ height: 32px;
960
+ font-size: 12px;
961
+ line-height: 32px;
962
+ text-shadow: none;
963
+ letter-spacing: 0.6px;
1005
964
  }
1006
- .share_plugin[data-share] .share-container .share-container-main > div {
1007
- text-align: left;
1008
- font-size: 14px;
1009
- padding: 5px;
965
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr-controls] .live-info::before {
966
+ width: 8px;
967
+ height: 8px;
968
+ margin-right: 4px;
1010
969
  }
1011
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--link, .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
1012
- overflow: hidden;
1013
- text-overflow: ellipsis;
1014
- color: #818181;
1015
- border: solid 1px #d3d3d3;
1016
- width: calc(100% - 10px);
1017
- padding: 5px;
970
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button {
971
+ height: 32px;
1018
972
  }
1019
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
1020
- max-height: 90px;
1021
- resize: none;
973
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button[data-playpause] {
974
+ margin-left: 10px;
975
+ margin-right: 10px;
1022
976
  }
1023
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
1024
- width: 32px;
1025
- display: inline-block;
1026
- margin-right: 5px;
1027
- cursor: pointer;
1028
- }div.player-error-screen, [data-player] div.player-error-screen {
1029
- color: #CCCACA;
1030
- position: absolute;
1031
- top: 0;
1032
- height: 100%;
1033
- width: 100%;
1034
- background-color: rgba(0, 0, 0, 0.7);
1035
- z-index: 2000;
1036
- display: flex;
1037
- flex-direction: column;
1038
- justify-content: center;
977
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button[data-playstop] {
978
+ margin-left: 10px;
979
+ margin-right: 10px;
1039
980
  }
1040
- div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
1041
- font-size: 14px;
1042
- color: #CCCACA;
1043
- margin-top: 45px;
981
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {
982
+ margin-right: 12px;
983
+ height: 33px;
1044
984
  }
1045
- div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
1046
- font-weight: bold;
1047
- line-height: 30px;
1048
- font-size: 18px;
985
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button svg {
986
+ height: 17px;
1049
987
  }
1050
- div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
1051
- width: 90%;
1052
- margin: 0 auto;
988
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-clip-container .media-clip-text,
989
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-clip-container .media-clip-point {
990
+ line-height: 33px;
991
+ font-size: 11px;
1053
992
  }
1054
- div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
1055
- font-size: 13px;
1056
- margin-top: 15px;
993
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-clip-container .media-clip-text {
994
+ max-width: calc(80% - 210px);
1057
995
  }
1058
- div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1059
- cursor: pointer;
1060
- width: 30px;
1061
- margin: 15px auto 0;
1062
- }*, :focus, :visited {
1063
- outline: none !important;
996
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] {
997
+ height: 32px;
998
+ margin-right: 8px;
1064
999
  }
1065
-
1066
- .gear-wrapper .go-back {
1067
- font-weight: 600;
1068
- font-size: 14px;
1069
- line-height: 20px;
1070
- width: 100%;
1071
- text-align: left;
1072
- padding: 12px;
1000
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {
1001
+ height: 32px;
1073
1002
  }
1074
- .gear-wrapper .go-back .arrow-left-icon {
1075
- float: left;
1076
- padding-top: 2px;
1077
- padding-right: 2px;
1003
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {
1004
+ height: 17px;
1005
+ margin-top: 5px;
1078
1006
  }
1079
- .gear-wrapper .go-back .arrow-left-icon svg {
1080
- height: 16px;
1007
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
1008
+ display: none;
1081
1009
  }
1082
- .gear-wrapper ul.gear-sub-menu {
1083
- width: 100%;
1084
- list-style-type: none;
1085
- background-color: transparent;
1086
- min-width: 60px;
1087
- border-top: 2px solid rgb(36, 36, 36);
1010
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {
1011
+ width: 0;
1012
+ height: 12px;
1013
+ top: 9px;
1014
+ padding: 0;
1088
1015
  }
1089
- .gear-wrapper ul.gear-sub-menu li {
1090
- font-size: 12px;
1091
- text-align: left;
1016
+
1017
+ .media-control-skin-1[data-media-control-skin-1] {
1018
+ position: absolute;
1019
+ width: 100%;
1020
+ height: 100%;
1021
+ z-index: 9999;
1022
+ pointer-events: none;
1023
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1092
1024
  }
1093
- .gear-wrapper ul.gear-sub-menu li[data-title] {
1094
- background-color: #c3c2c2;
1095
- padding: 5px;
1025
+ .media-control-skin-1[data-media-control-skin-1].dragging {
1026
+ pointer-events: auto;
1027
+ cursor: grabbing !important;
1028
+ cursor: url("closed-hand.cur"), move;
1096
1029
  }
1097
- .gear-wrapper ul.gear-sub-menu li a {
1098
- display: block;
1099
- text-decoration: none;
1100
- height: 32px;
1101
- padding: 5px 10px;
1102
- line-height: 22px;
1103
- color: #fffffe;
1030
+ .media-control-skin-1[data-media-control-skin-1].dragging * {
1031
+ cursor: grabbing !important;
1032
+ cursor: url("closed-hand.cur"), move;
1104
1033
  }
1105
- .gear-wrapper ul.gear-sub-menu li a:hover {
1106
- color: white;
1107
- background-color: rgba(0, 0, 0, 0.4);
1034
+ .media-control-skin-1[data-media-control-skin-1] .media-control-icon {
1035
+ line-height: 0;
1036
+ letter-spacing: 0;
1037
+ speak: none;
1038
+ color: #fff;
1039
+ vertical-align: middle;
1040
+ text-align: left;
1041
+ transition: all 0.1s ease;
1108
1042
  }
1109
- .gear-wrapper ul.gear-sub-menu li a:hover a {
1043
+ .media-control-skin-1[data-media-control-skin-1] .media-control-icon:hover {
1110
1044
  color: white;
1111
- text-decoration: none;
1112
1045
  }
1113
- .gear-wrapper ul.gear-sub-menu li a .check-icon {
1114
- width: 30px;
1115
- height: 20px;
1116
- float: left;
1117
- display: block;
1046
+ .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-background[data-background] {
1047
+ opacity: 0;
1118
1048
  }
1119
- .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
1120
- display: none;
1049
+ .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-layer[data-controls] {
1050
+ bottom: -50px;
1121
1051
  }
1122
- .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
1123
- display: inline;
1052
+ .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {
1053
+ opacity: 0;
1124
1054
  }
1125
- .gear-wrapper svg {
1126
- height: 20px;
1127
- }.media-control-skin-1[data-media-control-skin-1] .media-control-quality,
1128
- .media-control-skin-1[data-media-control-skin-1] .media-control-audio-tracks {
1129
- display: block;
1130
- }
1131
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] {
1132
- width: 40px;
1133
- margin-top: 0;
1134
- }
1135
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button] {
1136
- display: flex;
1137
- justify-content: center;
1138
- padding: 0;
1139
- align-items: center;
1140
- }
1141
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button]:hover {
1142
- color: white;
1055
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] {
1056
+ position: absolute;
1057
+ bottom: 0;
1058
+ width: 100%;
1059
+ height: var(--bottom-panel);
1060
+ font-size: 0;
1061
+ vertical-align: middle;
1062
+ pointer-events: auto;
1063
+ transition: bottom 0.4s ease-out;
1143
1064
  }
1144
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul {
1145
- background-color: rgba(74, 74, 74, 0.6);
1146
- border: none;
1147
- width: auto;
1148
- transform: rotate(180deg);
1149
- border-radius: 4px;
1150
- bottom: 52px;
1151
- margin-left: -28px;
1065
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-left-panel[data-media-control-skin-1] {
1066
+ position: absolute;
1067
+ top: 0;
1068
+ left: 4px;
1069
+ height: 100%;
1152
1070
  }
1153
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li {
1154
- transform: rotate(-180deg);
1155
- font-size: 16px;
1071
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-center-panel[data-media-control-skin-1] {
1072
+ height: 100%;
1156
1073
  text-align: center;
1157
- white-space: nowrap;
1158
- height: 30px;
1074
+ line-height: var(--bottom-panel);
1159
1075
  }
1160
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a {
1161
- height: 30px;
1162
- padding: 5px 10px;
1163
- color: #fffffe;
1076
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-right-panel[data-media-control-skin-1] {
1077
+ position: absolute;
1078
+ top: 0;
1079
+ right: 4px;
1080
+ height: 100%;
1164
1081
  }
1165
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a:hover {
1166
- background-color: rgba(0, 0, 0, 0.4);
1082
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button {
1083
+ background-color: transparent;
1084
+ border: 0;
1085
+ padding: 0;
1086
+ cursor: pointer;
1087
+ display: inline-block;
1088
+ height: 40px;
1089
+ width: 20px;
1167
1090
  }
1168
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li.current a {
1169
- background-color: rgba(0, 0, 0, 0.4);
1091
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button svg {
1092
+ height: 20px;
1170
1093
  }
1171
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:first-child a {
1172
- border-bottom-left-radius: 4px;
1173
- border-bottom-right-radius: 4px;
1094
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button svg path {
1095
+ fill: white;
1174
1096
  }
1175
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:last-child a {
1176
- border-top-left-radius: 4px;
1177
- border-top-right-radius: 4px;
1097
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button:focus {
1098
+ outline: none;
1178
1099
  }
1179
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] {
1180
- height: 26px;
1181
- line-height: 26px;
1182
- bottom: 52px;
1183
- border-radius: 3px;
1184
- background-color: rgba(74, 74, 74, 0.7);
1100
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-play] {
1101
+ float: left;
1102
+ height: 100%;
1185
1103
  }
1186
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span {
1187
- letter-spacing: 0.8px;
1188
- font-size: 14px;
1189
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1104
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-pause] {
1105
+ float: left;
1106
+ height: 100%;
1190
1107
  }
1191
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-seek-time] {
1192
- padding-left: 8px;
1193
- padding-right: 8px;
1108
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-stop] {
1109
+ float: left;
1110
+ height: 100%;
1194
1111
  }
1195
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-duration] {
1112
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {
1113
+ float: right;
1114
+ background-color: transparent;
1115
+ border: 0;
1116
+ margin-right: 12px;
1117
+ height: 40px;
1118
+ }
1119
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-hd-indicator] {
1120
+ background-color: transparent;
1121
+ border: 0;
1122
+ cursor: default;
1196
1123
  display: none !important;
1197
- }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
1198
1124
  float: right;
1199
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1125
+ height: 100%;
1200
1126
  }
1201
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear {
1202
- height: 40px;
1203
- width: 40px;
1204
- padding-right: 20px;
1127
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-playpause], .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-playstop] {
1128
+ float: left;
1129
+ margin-left: 8px;
1130
+ margin-right: 14px;
1205
1131
  }
1206
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear svg {
1207
- height: 20px;
1132
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-position], .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration] {
1133
+ display: inline-block;
1134
+ float: left;
1135
+ font-size: 14px;
1136
+ color: white;
1137
+ cursor: default;
1138
+ line-height: var(--bottom-panel);
1139
+ position: relative;
1208
1140
  }
1209
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
1210
- position: absolute;
1211
- right: 16px;
1212
- bottom: 52px;
1213
- display: none;
1214
- width: 250px;
1215
- min-height: 48px;
1216
- z-index: 9999;
1217
- border-radius: 4px;
1141
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-position] {
1142
+ margin: 1px 6px 0 7px;
1218
1143
  }
1219
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
1220
- padding: 8px 0;
1144
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration] {
1145
+ color: rgb(255, 255, 255);
1146
+ opacity: 0.5;
1147
+ margin-top: 1px;
1148
+ margin-right: 6px;
1221
1149
  }
1222
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list svg {
1223
- float: left;
1224
- margin-right: 10px;
1150
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration]::before {
1151
+ content: "|";
1152
+ margin-right: 7px;
1225
1153
  }
1226
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
1227
- margin: 0;
1228
- text-align: left;
1229
- line-height: 22px;
1230
- padding: 5px 14px;
1231
- width: 250px;
1232
- font-size: 12px;
1154
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container {
1155
+ display: none;
1233
1156
  }
1234
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_arrow-right-icon {
1235
- float: right;
1236
- margin-right: -14px;
1157
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container .media-clip-text,
1158
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container .media-clip-point {
1159
+ text-overflow: ellipsis;
1160
+ white-space: nowrap;
1161
+ overflow: hidden;
1162
+ display: inline-block;
1163
+ float: left;
1164
+ font-size: 14px;
1165
+ color: white;
1166
+ cursor: default;
1167
+ line-height: var(--bottom-panel);
1168
+ position: relative;
1237
1169
  }
1238
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_value {
1239
- float: right;
1240
- margin-right: 8px;
1170
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container .media-clip-point {
1171
+ margin-right: 6px;
1241
1172
  }
1242
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option svg {
1243
- height: 20px;
1244
- }:root {
1245
- --primary-background-color: #000;
1246
- --secondary-background-color: #262626;
1247
- --primary-text-color: #fff;
1248
- --secondary-text-color: #fff4f2;
1249
- --hover-text-color: #f9b090;
1250
- --speedtest-red: #df564d;
1251
- --speedtest-orange: #df934d;
1252
- --speedtest-yellow: #dfd04d;
1253
- --speedtest-light-green: #c2df4d;
1254
- --speedtest-green: #73df4d;
1173
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-clip-container .media-clip-text {
1174
+ max-width: calc(80% - 240px);
1255
1175
  }
1256
-
1257
- .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box {
1176
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] {
1258
1177
  position: absolute;
1178
+ top: -11px;
1179
+ left: 0;
1259
1180
  display: inline-block;
1260
- bottom: 52px;
1261
- right: 16px;
1262
- padding: 0 10px 12px;
1263
- margin: 0;
1264
- line-height: 20px;
1265
- font-size: 12px;
1266
- font-weight: 500;
1267
- background: var(--primary-background-color);
1268
- color: #fff;
1269
- z-index: 20000;
1270
- overflow: auto;
1271
- max-height: calc(100vh - 60px);
1272
- max-width: calc(100vw - 10px);
1181
+ vertical-align: middle;
1182
+ width: 100%;
1183
+ height: 20px;
1184
+ cursor: pointer;
1273
1185
  }
1274
- .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box-top {
1186
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] {
1187
+ width: 100%;
1188
+ height: 3px;
1189
+ position: relative;
1190
+ top: 8px;
1191
+ background-color: #666;
1192
+ }
1193
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-1[data-seekbar] {
1275
1194
  position: absolute;
1276
1195
  top: 0;
1277
1196
  left: 0;
1278
- z-index: 99990;
1279
- width: 100%;
1280
- height: 32px;
1281
- background: var(--primary-background-color);
1197
+ width: 0;
1198
+ height: 100%;
1199
+ background-color: white;
1200
+ transition: all 0.1s ease-out;
1282
1201
  }
1283
- .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box-top .close-button {
1284
- float: right;
1285
- margin-right: 12px;
1286
- margin-top: 10px;
1287
- display: block;
1288
- width: 12px;
1289
- height: 12px;
1202
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
1203
+ position: absolute;
1204
+ top: 0;
1205
+ left: 0;
1206
+ width: 0;
1207
+ height: 100%;
1208
+ background-color: #ff5700;
1209
+ transition: all 0.1s ease-out;
1210
+ }
1211
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled {
1212
+ cursor: default;
1213
+ display: none;
1214
+ }
1215
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled + .bar-scrubber[data-seekbar] {
1216
+ cursor: default;
1217
+ display: none;
1218
+ }
1219
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {
1220
+ position: absolute;
1221
+ transform: translateX(-50%);
1222
+ top: -11.5px;
1223
+ left: 0;
1224
+ width: 20px;
1225
+ height: 20px;
1226
+ opacity: 1;
1227
+ transition: all 0.1s ease-out;
1228
+ }
1229
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-scrubber[data-seekbar] .bar-scrubber-icon[data-seekbar] {
1230
+ position: absolute;
1231
+ left: 4.5px;
1232
+ top: 4.5px;
1233
+ width: 11px;
1234
+ height: 11px;
1235
+ border-radius: 50%;
1236
+ background-color: white;
1237
+ }
1238
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] {
1239
+ float: left;
1240
+ display: inline-block;
1241
+ height: var(--bottom-panel);
1242
+ cursor: pointer;
1243
+ box-sizing: border-box;
1244
+ margin-right: 20px;
1245
+ }
1246
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] {
1247
+ float: left;
1248
+ bottom: 0;
1249
+ }
1250
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {
1251
+ background-color: transparent;
1252
+ border: 0;
1253
+ box-sizing: content-box;
1254
+ height: var(--bottom-panel);
1255
+ width: 20px;
1256
+ }
1257
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {
1258
+ height: 20px;
1259
+ position: relative;
1260
+ top: 3px;
1261
+ margin-top: 7px;
1262
+ }
1263
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg path {
1264
+ fill: white;
1265
+ }
1266
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume].muted svg {
1267
+ margin-left: 2px;
1268
+ }
1269
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
1270
+ float: left;
1271
+ position: relative;
1272
+ margin-left: 10px;
1273
+ top: 8px;
1274
+ width: 80px;
1275
+ height: 23px;
1276
+ padding: 3px 0;
1277
+ transition: width 0.2s ease-out;
1278
+ }
1279
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] {
1280
+ height: 3px;
1281
+ border-radius: 100px;
1282
+ position: relative;
1283
+ top: 7px;
1284
+ background-color: #666;
1285
+ }
1286
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-1[data-volume] {
1287
+ position: absolute;
1288
+ top: 0;
1289
+ left: 0;
1290
+ width: 0;
1291
+ height: 100%;
1292
+ border-radius: 100px;
1293
+ background-color: white;
1294
+ transition: all 0.1s ease-out;
1295
+ }
1296
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-2[data-volume] {
1297
+ position: absolute;
1298
+ top: 0;
1299
+ left: 0;
1300
+ width: 0;
1301
+ height: 100%;
1302
+ background-color: #005aff;
1303
+ transition: all 0.1s ease-out;
1304
+ }
1305
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] {
1306
+ position: absolute;
1307
+ transform: translateX(-50%);
1308
+ top: 3px;
1309
+ margin-left: 3px;
1310
+ width: 16px;
1311
+ height: 16px;
1312
+ opacity: 1;
1313
+ transition: all 0.1s ease-out;
1314
+ }
1315
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] .bar-scrubber-icon[data-volume] {
1316
+ position: absolute;
1317
+ left: 3px;
1318
+ top: 5px;
1319
+ width: 7px;
1320
+ height: 7px;
1321
+ border-radius: 50%;
1322
+ background-color: white;
1323
+ }
1324
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume] {
1325
+ float: left;
1326
+ width: 4px;
1327
+ padding-left: 2px;
1328
+ height: 12px;
1329
+ opacity: 0.5;
1330
+ box-shadow: inset 2px 0 0 white;
1331
+ transition: transform 0.2s ease-out;
1332
+ }
1333
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume].fill {
1334
+ box-shadow: inset 2px 0 0 #fff;
1335
+ opacity: 1;
1336
+ }
1337
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:nth-of-type(1) {
1338
+ padding-left: 0;
1339
+ }
1340
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:hover {
1341
+ transform: scaleY(1.5);
1342
+ }.media-control-skin-1[data-media-control-skin-1] .media-control-quality,
1343
+ .media-control-skin-1[data-media-control-skin-1] .media-control-audio-tracks {
1344
+ display: block;
1345
+ }
1346
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] {
1347
+ width: 40px;
1348
+ margin-top: 0;
1349
+ }
1350
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button] {
1351
+ display: flex;
1352
+ justify-content: center;
1353
+ padding: 0;
1354
+ align-items: center;
1355
+ }
1356
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button]:hover {
1357
+ color: white;
1358
+ }
1359
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul {
1360
+ background-color: rgba(74, 74, 74, 0.6);
1361
+ border: none;
1362
+ width: auto;
1363
+ transform: rotate(180deg);
1364
+ border-radius: 4px;
1365
+ bottom: 52px;
1366
+ margin-left: -28px;
1367
+ }
1368
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li {
1369
+ transform: rotate(-180deg);
1370
+ font-size: 16px;
1371
+ text-align: center;
1372
+ white-space: nowrap;
1373
+ height: 30px;
1374
+ }
1375
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a {
1376
+ height: 30px;
1377
+ padding: 5px 10px;
1378
+ color: #fffffe;
1379
+ }
1380
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a:hover {
1381
+ background-color: rgba(0, 0, 0, 0.4);
1382
+ }
1383
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li.current a {
1384
+ background-color: rgba(0, 0, 0, 0.4);
1385
+ }
1386
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:first-child a {
1387
+ border-bottom-left-radius: 4px;
1388
+ border-bottom-right-radius: 4px;
1389
+ }
1390
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:last-child a {
1391
+ border-top-left-radius: 4px;
1392
+ border-top-right-radius: 4px;
1393
+ }
1394
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] {
1395
+ height: 26px;
1396
+ line-height: 26px;
1397
+ bottom: 52px;
1398
+ border-radius: 3px;
1399
+ background-color: rgba(74, 74, 74, 0.7);
1400
+ }
1401
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span {
1402
+ letter-spacing: 0.8px;
1403
+ font-size: 14px;
1404
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1405
+ }
1406
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-seek-time] {
1407
+ padding-left: 8px;
1408
+ padding-right: 8px;
1409
+ }
1410
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-duration] {
1411
+ display: none !important;
1412
+ }:root {
1413
+ --primary-background-color: #000;
1414
+ --secondary-background-color: #262626;
1415
+ --primary-text-color: #fff;
1416
+ --secondary-text-color: #fff4f2;
1417
+ --hover-text-color: #f9b090;
1418
+ --speedtest-red: #df564d;
1419
+ --speedtest-orange: #df934d;
1420
+ --speedtest-yellow: #dfd04d;
1421
+ --speedtest-light-green: #c2df4d;
1422
+ --speedtest-green: #73df4d;
1423
+ }
1424
+
1425
+ .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box {
1426
+ position: absolute;
1427
+ display: inline-block;
1428
+ bottom: 52px;
1429
+ right: 16px;
1430
+ padding: 0 10px 12px;
1431
+ margin: 0;
1432
+ line-height: 20px;
1433
+ font-size: 12px;
1434
+ font-weight: 500;
1435
+ background: var(--primary-background-color);
1436
+ color: #fff;
1437
+ z-index: 20000;
1438
+ overflow: auto;
1439
+ max-height: calc(100vh - 60px);
1440
+ max-width: calc(100vw - 10px);
1441
+ }
1442
+ .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box-top {
1443
+ position: absolute;
1444
+ top: 0;
1445
+ left: 0;
1446
+ z-index: 99990;
1447
+ width: 100%;
1448
+ height: 32px;
1449
+ background: var(--primary-background-color);
1450
+ }
1451
+ .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box-top .close-button {
1452
+ float: right;
1453
+ margin-right: 12px;
1454
+ margin-top: 10px;
1455
+ display: block;
1456
+ width: 12px;
1457
+ height: 12px;
1290
1458
  }
1291
1459
  .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box-top .close-button svg path {
1292
1460
  fill: var(--primary-text-color);
@@ -1623,6 +1791,13 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1623
1791
  .mobile .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul {
1624
1792
  width: 25%;
1625
1793
  }
1794
+ }.media-control-pip button {
1795
+ float: right;
1796
+ height: 40px;
1797
+ margin-right: 20px;
1798
+ }
1799
+ .media-control-pip button svg {
1800
+ height: 20px;
1626
1801
  }.spinner-three-bounce[data-spinner] {
1627
1802
  position: absolute;
1628
1803
  width: 70px;
@@ -1661,190 +1836,40 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1661
1836
  40% {
1662
1837
  transform: scale(1);
1663
1838
  }
1664
- }.dvr-controls[data-dvr-controls] {
1665
- display: inline-block;
1666
- float: left;
1667
- color: #fff;
1668
- line-height: 32px;
1669
- font-size: 10px;
1670
- font-weight: bold;
1671
- margin-left: 6px;
1672
- height: 40px;
1673
- line-height: 40px;
1674
- margin-left: 0;
1675
- }
1676
- .dvr-controls[data-dvr-controls] .live-info {
1677
- cursor: default;
1678
- font-family: "Roboto", "Open Sans", Arial, sans-serif;
1679
- text-transform: uppercase;
1680
- }
1681
- .dvr-controls[data-dvr-controls] .live-info:before {
1682
- content: "";
1683
- display: inline-block;
1684
- position: relative;
1685
- width: 7px;
1686
- height: 7px;
1687
- border-radius: 3.5px;
1688
- margin-right: 3.5px;
1689
- background-color: #ff0101;
1690
- }
1691
- .dvr-controls[data-dvr-controls] .live-info.disabled {
1692
- opacity: 0.3;
1693
- }
1694
- .dvr-controls[data-dvr-controls] .live-info.disabled:before {
1695
- background-color: #fff;
1839
+ }.player-poster[data-poster] {
1840
+ display: flex;
1841
+ justify-content: center;
1842
+ align-items: center;
1843
+ position: absolute;
1844
+ height: 100%;
1845
+ width: 100%;
1846
+ z-index: 998;
1847
+ top: 0;
1848
+ left: 0;
1849
+ background-color: #000;
1850
+ background-size: cover;
1851
+ background-repeat: no-repeat;
1852
+ background-position: 50% 50%;
1696
1853
  }
1697
- .dvr-controls[data-dvr-controls] .live-button {
1854
+ .player-poster[data-poster].clickable {
1698
1855
  cursor: pointer;
1699
- outline: none;
1700
- display: none;
1701
- border: 0;
1702
- color: #fff;
1703
- background-color: transparent;
1704
- height: 32px;
1705
- padding: 0;
1706
- opacity: 0.7;
1707
- font-family: "Roboto", "Open Sans", Arial, sans-serif;
1708
- text-transform: uppercase;
1709
- transition: all 0.1s ease;
1710
1856
  }
1711
- .dvr-controls[data-dvr-controls] .live-button:before {
1712
- content: "";
1713
- display: inline-block;
1714
- position: relative;
1715
- width: 7px;
1716
- height: 7px;
1717
- border-radius: 3.5px;
1718
- margin-right: 3.5px;
1719
- background-color: #fff;
1720
- }
1721
- .dvr-controls[data-dvr-controls] .live-button:hover {
1722
- opacity: 1;
1723
- text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
1724
- }
1725
- .dvr-controls[data-dvr-controls] .live-info {
1726
- font-size: 14px;
1727
- letter-spacing: 0.8px;
1728
- font-weight: 500;
1729
- color: #fffffe;
1730
- margin-left: 21px;
1731
- }
1732
- .dvr-controls[data-dvr-controls] .live-info::before {
1733
- width: 10px;
1734
- height: 10px;
1735
- border-radius: 50%;
1736
- margin-right: 8px;
1737
- background-color: #ed4f4a;
1738
- }
1739
- .dvr-controls[data-dvr-controls] .live-button {
1740
- height: 40px;
1857
+ .player-poster[data-poster]:hover .play-wrapper[data-poster] {
1741
1858
  opacity: 1;
1742
- font-size: 14px;
1743
- letter-spacing: 0.8px;
1744
- font-weight: 500;
1745
- margin-left: 20px;
1746
- }
1747
- .dvr-controls[data-dvr-controls] .live-button::before {
1748
- width: 10px;
1749
- height: 10px;
1750
- border-radius: 50%;
1751
- margin-right: 8px;
1752
- background-color: #cacaca;
1753
- }
1754
-
1755
- .dvr .dvr-controls[data-dvr-controls] .live-info {
1756
- display: none;
1757
- }
1758
- .dvr .dvr-controls[data-dvr-controls] .live-button {
1759
- display: block;
1760
- }
1761
- .dvr.media-control.live[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
1762
- background-color: #005aff;
1763
- }
1764
-
1765
- .media-control.live[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
1766
- background-color: #ff0101;
1767
- }*, :focus, :visited {
1768
- outline: none !important;
1769
- }
1770
-
1771
- .subtitles[data-subtitles] {
1772
- float: right;
1773
- position: relative;
1774
- width: 50px;
1775
- }
1776
- .subtitles[data-subtitles] button {
1777
- background-color: transparent;
1778
- color: #fff;
1779
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1780
- -webkit-font-smoothing: antialiased;
1781
- border: none;
1782
- font-size: 14px;
1783
- cursor: pointer;
1784
- }
1785
- .subtitles[data-subtitles] button .subtitle-text svg {
1786
- fill: white;
1787
- }
1788
- .subtitles[data-subtitles] button:hover {
1789
- color: #c9c9c9;
1790
- }
1791
- .subtitles[data-subtitles] button.changing {
1792
- animation: pulse 0.5s infinite alternate;
1793
- }
1794
- .subtitles[data-subtitles] > ul {
1795
- width: 80px;
1796
- list-style-type: none;
1797
- position: absolute;
1798
- bottom: 25px;
1799
- border: 1px solid black;
1800
- display: none;
1801
- background-color: #e6e6e6;
1802
- }
1803
- .subtitles[data-subtitles] li {
1804
- font-size: 10px;
1805
- }
1806
- .subtitles[data-subtitles] li[data-title] {
1807
- background-color: #c3c2c2;
1808
- padding: 5px;
1809
- }
1810
- .subtitles[data-subtitles] li a {
1811
- color: #444;
1812
- padding: 2px 10px;
1813
- display: block;
1814
- text-decoration: none;
1815
- }
1816
- .subtitles[data-subtitles] li a:hover {
1817
- background-color: #555;
1818
- color: white;
1819
- }
1820
- .subtitles[data-subtitles] li a:hover a {
1821
- color: white;
1822
- text-decoration: none;
1823
- }
1824
- .subtitles[data-subtitles] li.current a {
1825
- color: #f00;
1826
- background-color: #555;
1827
1859
  }
1828
-
1829
- @keyframes pulse {
1830
- 0% {
1831
- color: #fff;
1832
- }
1833
- 50% {
1834
- color: #ff0101;
1835
- }
1836
- 100% {
1837
- color: #B80000;
1838
- }
1860
+ .player-poster[data-poster] .play-wrapper[data-poster] {
1861
+ width: 100%;
1862
+ height: 25%;
1863
+ margin: 0 auto;
1864
+ opacity: 0.75;
1865
+ transition: opacity 0.1s ease;
1839
1866
  }
1840
- ::cue {
1841
- visibility: hidden !important;
1842
- font-size: 0 !important;
1867
+ .player-poster[data-poster] .play-wrapper[data-poster] svg {
1868
+ height: 100%;
1869
+ display: inline;
1843
1870
  }
1844
-
1845
- .ios-fullscreen::cue {
1846
- visibility: visible !important;
1847
- font-size: 1em !important;
1871
+ .player-poster[data-poster] .play-wrapper[data-poster] svg path {
1872
+ fill: #fff;
1848
1873
  }.seek-time[data-seek-time] {
1849
1874
  position: absolute;
1850
1875
  white-space: nowrap;
@@ -1854,178 +1879,51 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1854
1879
  left: -100%;
1855
1880
  bottom: 55px;
1856
1881
  background-color: rgba(2, 2, 2, 0.5);
1857
- z-index: 9999;
1858
- transition: opacity 0.1s ease;
1859
- }
1860
- .seek-time[data-seek-time].hidden[data-seek-time] {
1861
- opacity: 0;
1862
- }
1863
- .seek-time[data-seek-time] [data-seek-time] {
1864
- display: inline-block;
1865
- color: white;
1866
- font-size: 10px;
1867
- padding-left: 7px;
1868
- padding-right: 7px;
1869
- vertical-align: top;
1870
- }
1871
- .seek-time[data-seek-time] [data-duration] {
1872
- display: inline-block;
1873
- color: rgba(255, 255, 255, 0.5);
1874
- font-size: 10px;
1875
- padding-right: 7px;
1876
- vertical-align: top;
1877
- }
1878
- .seek-time[data-seek-time] [data-duration]::before {
1879
- content: "|";
1880
- margin-right: 7px;
1881
- }*, :focus, :visited {
1882
- outline: none !important;
1883
- }
1884
-
1885
- .multicamera[data-multicamera] {
1886
- float: right;
1887
- margin-top: 4px;
1888
- position: relative;
1889
- margin-right: 20px;
1890
- width: 20px;
1891
- }
1892
- .multicamera[data-multicamera] button {
1893
- background-color: transparent;
1894
- color: #fff;
1895
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1896
- -webkit-font-smoothing: antialiased;
1897
- border: none;
1898
- font-size: 14px;
1899
- padding: 0;
1900
- }
1901
- .multicamera[data-multicamera] button svg {
1902
- height: 20px;
1903
- position: relative;
1904
- margin-top: 6px;
1905
- }
1906
- .multicamera[data-multicamera] button:hover {
1907
- color: #c9c9c9;
1908
- }
1909
- .multicamera[data-multicamera] button.changing {
1910
- animation: pulse 0.5s infinite alternate;
1911
- }
1912
- .multicamera[data-multicamera] button span.quality-arrow {
1913
- width: 9px;
1914
- height: 6px;
1915
- margin-top: 11px;
1916
- margin-left: 5px;
1917
- }
1918
- .multicamera[data-multicamera] > ul {
1919
- padding: 6px 0;
1920
- right: -24px;
1921
- width: 245px;
1922
- list-style-type: none;
1923
- position: absolute;
1924
- bottom: 48px;
1925
- border-radius: 4px;
1926
- display: none;
1927
- background-color: rgba(74, 74, 74, 0.9);
1928
- }
1929
- .multicamera[data-multicamera] > ul::after {
1930
- content: "";
1931
- position: absolute;
1932
- top: 100%;
1933
- left: 85%;
1934
- margin-left: -10px;
1935
- width: 0;
1936
- height: 0;
1937
- border-top: 10px solid rgba(74, 74, 74, 0.9);
1938
- border-right: 10px solid transparent;
1939
- border-left: 10px solid transparent;
1940
- }
1941
- .multicamera[data-multicamera] li {
1942
- font-size: 10px;
1943
- cursor: pointer;
1944
- }
1945
- .multicamera[data-multicamera] li .multicamera-item {
1946
- display: flex;
1947
- padding: 10px 0;
1948
- justify-content: center;
1949
- position: relative;
1950
- }
1951
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
1952
- pointer-events: none;
1953
- }
1954
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
1955
- opacity: 0.5;
1956
- }
1957
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
1958
- opacity: 0.5;
1959
- }
1960
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
1961
- background-color: rgba(0, 0, 0, 0);
1962
- }
1963
- .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
1964
- background-color: rgba(0, 0, 0, 0.3);
1965
- }
1966
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
1967
- width: 80px;
1968
- height: 60px;
1969
- }
1970
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
1971
- width: 80px;
1972
- height: 60px;
1973
- }
1974
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
1975
- width: 120px;
1976
- text-align: left;
1977
- margin-left: 15px;
1978
- }
1979
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title, .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1980
- width: 120px;
1981
- height: 20px;
1982
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1983
- font-size: 14px;
1984
- font-weight: normal;
1985
- font-style: normal;
1986
- font-stretch: normal;
1987
- line-height: 1.43;
1988
- letter-spacing: normal;
1989
- text-align: left;
1990
- color: #fff;
1991
- text-overflow: ellipsis;
1992
- overflow: hidden;
1993
- }
1994
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1995
- opacity: 0.6;
1996
- }
1997
- .multicamera[data-multicamera] li[data-title] {
1998
- background-color: #c3c2c2;
1999
- padding: 5px;
1882
+ z-index: 9999;
1883
+ transition: opacity 0.1s ease;
2000
1884
  }
2001
- .multicamera[data-multicamera] li a {
2002
- color: #444;
2003
- padding: 2px 10px;
2004
- display: block;
2005
- text-decoration: none;
1885
+ .seek-time[data-seek-time].hidden[data-seek-time] {
1886
+ opacity: 0;
2006
1887
  }
2007
- .multicamera[data-multicamera] li a:hover {
2008
- background-color: #555;
1888
+ .seek-time[data-seek-time] [data-seek-time] {
1889
+ display: inline-block;
2009
1890
  color: white;
1891
+ font-size: 10px;
1892
+ padding-left: 7px;
1893
+ padding-right: 7px;
1894
+ vertical-align: top;
2010
1895
  }
2011
- .multicamera[data-multicamera] li a:hover a {
2012
- color: white;
2013
- text-decoration: none;
1896
+ .seek-time[data-seek-time] [data-duration] {
1897
+ display: inline-block;
1898
+ color: rgba(255, 255, 255, 0.5);
1899
+ font-size: 10px;
1900
+ padding-right: 7px;
1901
+ vertical-align: top;
2014
1902
  }
2015
- .multicamera[data-multicamera] li.current a {
2016
- color: #f00;
1903
+ .seek-time[data-seek-time] [data-duration]::before {
1904
+ content: "|";
1905
+ margin-right: 7px;
1906
+ }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
1907
+ height: 0;
2017
1908
  }
2018
1909
 
2019
- @keyframes pulse {
2020
- 0% {
2021
- color: #fff;
2022
- }
2023
- 50% {
2024
- color: #ff0101;
2025
- }
2026
- 100% {
2027
- color: #B80000;
2028
- }
1910
+ .skip_time_plugin[data-skip-time] {
1911
+ position: absolute;
1912
+ width: 100%;
1913
+ height: calc(100% - 50px);
1914
+ z-index: 9998;
1915
+ background-color: transparent;
1916
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1917
+ }
1918
+ .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] {
1919
+ width: 100%;
1920
+ height: 100%;
1921
+ display: flex;
1922
+ justify-content: space-between;
1923
+ }
1924
+ .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] .skip-item {
1925
+ width: 33.3%;
1926
+ height: 100%;
2029
1927
  }.scrub-thumbnails {
2030
1928
  position: absolute;
2031
1929
  bottom: 52px;
@@ -2087,68 +1985,170 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
2087
1985
  }
2088
1986
  .scrub-thumbnails .backdrop .carousel img {
2089
1987
  width: auto;
2090
- }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
2091
- height: 0;
1988
+ }*, :focus, :visited {
1989
+ outline: none !important;
2092
1990
  }
2093
1991
 
2094
- .skip_time_plugin[data-skip-time] {
2095
- position: absolute;
2096
- width: 100%;
2097
- height: calc(100% - 50px);
2098
- z-index: 9998;
1992
+ .subtitles[data-subtitles] {
1993
+ float: right;
1994
+ position: relative;
1995
+ width: 50px;
1996
+ }
1997
+ .subtitles[data-subtitles] button {
2099
1998
  background-color: transparent;
1999
+ color: #fff;
2100
2000
  font-family: Roboto, "Open Sans", Arial, sans-serif;
2001
+ -webkit-font-smoothing: antialiased;
2002
+ border: none;
2003
+ font-size: 14px;
2004
+ cursor: pointer;
2101
2005
  }
2102
- .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] {
2103
- width: 100%;
2104
- height: 100%;
2105
- display: flex;
2106
- justify-content: space-between;
2006
+ .subtitles[data-subtitles] button .subtitle-text svg {
2007
+ fill: white;
2107
2008
  }
2108
- .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] .skip-item {
2109
- width: 33.3%;
2110
- height: 100%;
2111
- }.player-poster[data-poster] {
2112
- display: flex;
2113
- justify-content: center;
2114
- align-items: center;
2009
+ .subtitles[data-subtitles] button:hover {
2010
+ color: #c9c9c9;
2011
+ }
2012
+ .subtitles[data-subtitles] button.changing {
2013
+ animation: pulse 0.5s infinite alternate;
2014
+ }
2015
+ .subtitles[data-subtitles] > ul {
2016
+ width: 80px;
2017
+ list-style-type: none;
2115
2018
  position: absolute;
2116
- height: 100%;
2117
- width: 100%;
2118
- z-index: 998;
2119
- top: 0;
2120
- left: 0;
2121
- background-color: #000;
2122
- background-size: cover;
2123
- background-repeat: no-repeat;
2124
- background-position: 50% 50%;
2019
+ bottom: 25px;
2020
+ border: 1px solid black;
2021
+ display: none;
2022
+ background-color: #e6e6e6;
2125
2023
  }
2126
- .player-poster[data-poster].clickable {
2024
+ .subtitles[data-subtitles] li {
2025
+ font-size: 10px;
2026
+ }
2027
+ .subtitles[data-subtitles] li[data-title] {
2028
+ background-color: #c3c2c2;
2029
+ padding: 5px;
2030
+ }
2031
+ .subtitles[data-subtitles] li a {
2032
+ color: #444;
2033
+ padding: 2px 10px;
2034
+ display: block;
2035
+ text-decoration: none;
2036
+ }
2037
+ .subtitles[data-subtitles] li a:hover {
2038
+ background-color: #555;
2039
+ color: white;
2040
+ }
2041
+ .subtitles[data-subtitles] li a:hover a {
2042
+ color: white;
2043
+ text-decoration: none;
2044
+ }
2045
+ .subtitles[data-subtitles] li.current a {
2046
+ color: #f00;
2047
+ background-color: #555;
2048
+ }
2049
+
2050
+ @keyframes pulse {
2051
+ 0% {
2052
+ color: #fff;
2053
+ }
2054
+ 50% {
2055
+ color: #ff0101;
2056
+ }
2057
+ 100% {
2058
+ color: #B80000;
2059
+ }
2060
+ }
2061
+ ::cue {
2062
+ visibility: hidden !important;
2063
+ font-size: 0 !important;
2064
+ }
2065
+
2066
+ .ios-fullscreen::cue {
2067
+ visibility: visible !important;
2068
+ font-size: 1em !important;
2069
+ }.share_plugin[data-share] {
2070
+ pointer-events: auto;
2071
+ z-index: 5;
2072
+ font-family: Roboto, "Open Sans", Arial, sans-serif !important;
2073
+ }
2074
+ .share_plugin[data-share].share-hide .share-button-container {
2075
+ right: -50px;
2076
+ }
2077
+ .share_plugin[data-share] .share-button-container {
2127
2078
  cursor: pointer;
2079
+ width: 36px;
2080
+ height: 36px;
2081
+ background-color: rgba(74, 74, 74, 0.6);
2082
+ border-radius: 4px;
2083
+ position: absolute;
2084
+ right: 10px;
2085
+ top: 10px;
2086
+ padding-top: 6px;
2087
+ transition: all 0.3s ease-out;
2128
2088
  }
2129
- .player-poster[data-poster]:hover .play-wrapper[data-poster] {
2130
- opacity: 1;
2089
+ .share_plugin[data-share] .share-button-container button[data-share-button] {
2090
+ background-color: transparent;
2091
+ border: 0;
2092
+ margin: 0 6px;
2093
+ padding: 0;
2094
+ cursor: pointer;
2095
+ display: inline-block;
2096
+ width: 19px;
2097
+ height: 20px;
2131
2098
  }
2132
- .player-poster[data-poster] .play-wrapper[data-poster] {
2133
- width: 100%;
2134
- height: 25%;
2135
- margin: 0 auto;
2136
- opacity: 0.75;
2137
- transition: opacity 0.1s ease;
2099
+ .share_plugin[data-share] .share-container {
2100
+ pointer-events: auto;
2101
+ position: absolute;
2102
+ width: 280px;
2103
+ background-color: white;
2104
+ transform: translate(0, 50%);
2105
+ transform: translate(-50%, -50%);
2106
+ left: 50%;
2107
+ /* margin-left: -140px; */
2108
+ top: calc(50% - 20px);
2109
+ /* margin-top: -170px; */
2138
2110
  }
2139
- .player-poster[data-poster] .play-wrapper[data-poster] svg {
2140
- height: 100%;
2141
- display: inline;
2111
+ .share_plugin[data-share] .share-container .share-container-header {
2112
+ text-align: left;
2113
+ border-bottom: 1px solid rgba(155, 155, 155, 0.25);
2142
2114
  }
2143
- .player-poster[data-poster] .play-wrapper[data-poster] svg path {
2144
- fill: #fff;
2145
- }.media-control-pip button {
2115
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
2116
+ display: inline-block;
2117
+ font-size: 16px;
2118
+ margin: 5px;
2119
+ }
2120
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
2121
+ display: inline-block;
2122
+ width: 24px;
2146
2123
  float: right;
2147
- height: 40px;
2148
- margin-right: 20px;
2124
+ margin: 5px;
2125
+ cursor: pointer;
2149
2126
  }
2150
- .media-control-pip button svg {
2151
- height: 20px;
2127
+ .share_plugin[data-share] .share-container .share-container-main {
2128
+ margin-bottom: 8px;
2129
+ }
2130
+ .share_plugin[data-share] .share-container .share-container-main > div {
2131
+ text-align: left;
2132
+ font-size: 14px;
2133
+ padding: 5px;
2134
+ }
2135
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--link, .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
2136
+ overflow: hidden;
2137
+ text-overflow: ellipsis;
2138
+ color: #818181;
2139
+ border: solid 1px #d3d3d3;
2140
+ width: calc(100% - 10px);
2141
+ padding: 5px;
2142
+ }
2143
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
2144
+ max-height: 90px;
2145
+ resize: none;
2146
+ }
2147
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
2148
+ width: 32px;
2149
+ display: inline-block;
2150
+ margin-right: 5px;
2151
+ cursor: pointer;
2152
2152
  }.player-logo[data-logo] {
2153
2153
  position: absolute;
2154
2154
  z-index: 2;