@gcorevideo/player 2.20.13 → 2.20.15

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