@gcorevideo/player 2.19.3 → 2.19.4

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