@gcorevideo/player 2.22.22 → 2.22.23

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