@gcorevideo/player 2.20.17 → 2.20.18

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