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