@gcorevideo/player 2.20.11 → 2.20.12

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