@gcorevideo/player 2.22.9 → 2.22.10

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