@gcorevideo/player 2.19.8 → 2.19.10

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