@gcorevideo/player 2.20.15 → 2.20.17

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