@gcorevideo/player 2.23.3 → 2.24.0

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