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