@gcorevideo/player 2.22.16 → 2.22.17

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