@gcorevideo/player 2.28.1 → 2.28.2

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.
package/dist/index.css CHANGED
@@ -122,64 +122,6 @@
122
122
  .gplayer-lite-btn::-moz-focus-inner {
123
123
  border: 0;
124
124
  padding: 0;
125
- }*, :focus, :visited {
126
- outline: none !important;
127
- }
128
-
129
- .gear-wrapper .go-back {
130
- font-weight: 600;
131
- font-size: 14px;
132
- line-height: 20px;
133
- width: 100%;
134
- text-align: left;
135
- padding: 12px;
136
- }
137
- .gear-wrapper .go-back .arrow-left-icon {
138
- float: left;
139
- padding-top: 2px;
140
- padding-right: 2px;
141
- }
142
- .gear-wrapper .go-back .arrow-left-icon svg {
143
- height: 16px;
144
- }
145
- .gear-wrapper ul.gear-sub-menu {
146
- width: 100%;
147
- list-style-type: none;
148
- min-width: 60px;
149
- border-top: 2px solid rgb(36, 36, 36);
150
- overflow-y: auto;
151
- }
152
- .gear-wrapper ul.gear-sub-menu li {
153
- font-size: 12px;
154
- text-align: left;
155
- }
156
- .gear-wrapper ul.gear-sub-menu li a {
157
- display: block;
158
- text-decoration: none;
159
- height: 30px;
160
- padding: 5px 10px;
161
- line-height: 22px;
162
- color: var(--gplayer-mc-text-dim-color);
163
- }
164
- .gear-wrapper ul.gear-sub-menu li a:hover {
165
- color: var(--gplayer-mc-text-color);
166
- background-color: rgba(0, 0, 0, 0.4);
167
- }
168
- .gear-wrapper ul.gear-sub-menu li a:hover a {
169
- color: var(--gplayer-mc-text-color);
170
- text-decoration: none;
171
- }
172
- .gear-wrapper ul.gear-sub-menu li a .check-icon {
173
- width: 30px;
174
- height: 20px;
175
- float: left;
176
- display: block;
177
- }
178
- .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
179
- display: none;
180
- }
181
- .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
182
- display: inline;
183
125
  }.media-control-skin-1 .media-control-item.media-control-gear {
184
126
  order: 99;
185
127
  }
@@ -282,6 +224,64 @@
282
224
  .dvr-controls .live-button:hover {
283
225
  opacity: 1;
284
226
  text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
227
+ }*, :focus, :visited {
228
+ outline: none !important;
229
+ }
230
+
231
+ .gear-wrapper .go-back {
232
+ font-weight: 600;
233
+ font-size: 14px;
234
+ line-height: 20px;
235
+ width: 100%;
236
+ text-align: left;
237
+ padding: 12px;
238
+ }
239
+ .gear-wrapper .go-back .arrow-left-icon {
240
+ float: left;
241
+ padding-top: 2px;
242
+ padding-right: 2px;
243
+ }
244
+ .gear-wrapper .go-back .arrow-left-icon svg {
245
+ height: 16px;
246
+ }
247
+ .gear-wrapper ul.gear-sub-menu {
248
+ width: 100%;
249
+ list-style-type: none;
250
+ min-width: 60px;
251
+ border-top: 2px solid rgb(36, 36, 36);
252
+ overflow-y: auto;
253
+ }
254
+ .gear-wrapper ul.gear-sub-menu li {
255
+ font-size: 12px;
256
+ text-align: left;
257
+ }
258
+ .gear-wrapper ul.gear-sub-menu li a {
259
+ display: block;
260
+ text-decoration: none;
261
+ height: 30px;
262
+ padding: 5px 10px;
263
+ line-height: 22px;
264
+ color: var(--gplayer-mc-text-dim-color);
265
+ }
266
+ .gear-wrapper ul.gear-sub-menu li a:hover {
267
+ color: var(--gplayer-mc-text-color);
268
+ background-color: rgba(0, 0, 0, 0.4);
269
+ }
270
+ .gear-wrapper ul.gear-sub-menu li a:hover a {
271
+ color: var(--gplayer-mc-text-color);
272
+ text-decoration: none;
273
+ }
274
+ .gear-wrapper ul.gear-sub-menu li a .check-icon {
275
+ width: 30px;
276
+ height: 20px;
277
+ float: left;
278
+ display: block;
279
+ }
280
+ .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
281
+ display: none;
282
+ }
283
+ .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
284
+ display: inline;
285
285
  }@charset "UTF-8";
286
286
  .gplayer-mc-clips {
287
287
  display: flex;
@@ -305,6 +305,84 @@
305
305
  }
306
306
  .gplayer-mc-clips .gplayer-mc-clips-text.compact {
307
307
  max-width: 100px;
308
+ }.context-menu {
309
+ z-index: 999;
310
+ position: absolute;
311
+ top: 0;
312
+ left: 0;
313
+ text-align: center;
314
+ }
315
+ .context-menu .context-menu-list {
316
+ font-family: "Proxima Nova", sans-serif;
317
+ font-size: 12px;
318
+ line-height: 12px;
319
+ list-style-type: none;
320
+ text-align: left;
321
+ padding: 5px;
322
+ margin-left: auto;
323
+ margin-right: auto;
324
+ background-color: rgba(0, 0, 0, 0.75);
325
+ border: 1px solid #666;
326
+ border-radius: 4px;
327
+ }
328
+ .context-menu .context-menu-list-item button {
329
+ border: none;
330
+ background-color: transparent;
331
+ padding: 0;
332
+ color: white;
333
+ display: flex;
334
+ gap: 8px;
335
+ align-items: center;
336
+ justify-content: center;
337
+ cursor: pointer;
338
+ padding: 5px;
339
+ width: 100%;
340
+ }
341
+ .context-menu .context-menu-list-item_icon {
342
+ width: 20px;
343
+ height: 20px;
344
+ }div.player-error-screen, [data-player] div.player-error-screen {
345
+ color: #CCCACA;
346
+ position: absolute;
347
+ top: 0;
348
+ height: 100%;
349
+ width: 100%;
350
+ background-color: rgba(0, 0, 0, 0.7);
351
+ z-index: 2000;
352
+ display: flex;
353
+ flex-direction: column;
354
+ justify-content: center;
355
+ }
356
+ div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
357
+ font-size: 14px;
358
+ color: #CCCACA;
359
+ margin-top: 45px;
360
+ }
361
+ div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
362
+ font-weight: bold;
363
+ line-height: 30px;
364
+ font-size: 18px;
365
+ }
366
+ div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
367
+ width: 90%;
368
+ margin: 0 auto;
369
+ }
370
+ div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
371
+ font-size: 13px;
372
+ margin-top: 15px;
373
+ }
374
+ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
375
+ cursor: pointer;
376
+ width: 30px;
377
+ margin: 15px auto 0;
378
+ }.media-control-skin-1 .media-control-item.media-control-pip {
379
+ order: 95;
380
+ }
381
+ .media-control-skin-1 .media-control-item.media-control-pip button {
382
+ height: 20px;
383
+ }
384
+ .media-control-skin-1 .media-control-item.media-control-pip button svg {
385
+ height: 20px;
308
386
  }.player-poster {
309
387
  display: flex;
310
388
  justify-content: center;
@@ -339,59 +417,347 @@
339
417
  }
340
418
  .player-poster .play-wrapper svg path {
341
419
  fill: #fff;
342
- }:root {
343
- --primary-background-color: #000;
344
- --secondary-background-color: #262626;
345
- --primary-text-color: #fff;
346
- --secondary-text-color: #fff4f2;
347
- --hover-text-color: #f9b090;
348
- --speedtest-red: #df564d;
349
- --speedtest-orange: #df934d;
350
- --speedtest-yellow: #dfd04d;
351
- --speedtest-light-green: #c2df4d;
352
- --speedtest-green: #73df4d;
420
+ }.container-with-poster-clickable .mc-skip-time {
421
+ height: 0;
353
422
  }
354
423
 
355
- .clappr-nerd-stats {
356
- cursor: default;
357
- }
358
- .clappr-nerd-stats .stats-box {
424
+ .mc-skip-time {
359
425
  position: absolute;
360
- display: inline-block;
361
- bottom: 52px;
362
- right: 0;
363
- top: 0;
364
- left: 0;
365
- bottom: 0;
366
- padding: 0 10px 12px;
367
- margin: 0;
368
- line-height: 20px;
369
- font-size: 12px;
370
- font-weight: 500;
371
- background: var(--primary-background-color);
372
- color: #fff;
373
- z-index: 20000;
374
- overflow: auto;
375
- max-width: 100%;
426
+ width: 100%;
427
+ height: calc(100% - 50px);
428
+ z-index: 9998;
429
+ background-color: transparent;
430
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
376
431
  }
377
- .clappr-nerd-stats .stats-box-top {
378
- position: absolute;
379
- top: 0;
380
- left: 0;
381
- z-index: 9999;
432
+ .mc-skip-time .skip-container {
382
433
  width: 100%;
383
- height: 32px;
384
- background: var(--primary-background-color);
434
+ height: 100%;
435
+ display: flex;
436
+ justify-content: space-between;
385
437
  }
386
- .clappr-nerd-stats .stats-box-top .close-button {
438
+ .mc-skip-time .skip-container .skip-item {
439
+ flex: 1 0 0px;
440
+ height: 100%;
441
+ }.big-mute-icon-wrapper[data-big-mute] {
387
442
  position: absolute;
388
- right: 12px;
389
- top: 10px;
390
- display: block;
391
- width: 12px;
392
- height: 12px;
393
- }
394
- .clappr-nerd-stats .stats-box-top .close-button svg path {
443
+ z-index: 9998;
444
+ background-color: transparent;
445
+ display: flex;
446
+ justify-content: center;
447
+ width: 100%;
448
+ height: calc(100% - 50px);
449
+ margin: 0 auto;
450
+ opacity: 0.75;
451
+ transition: opacity 0.1s ease;
452
+ pointer-events: auto;
453
+ }
454
+ .big-mute-icon-wrapper[data-big-mute].hide {
455
+ display: none;
456
+ }
457
+ .big-mute-icon-wrapper[data-big-mute]:hover {
458
+ cursor: pointer;
459
+ }
460
+
461
+ .big-mute-icon[data-big-mute-icon] {
462
+ display: flex;
463
+ align-items: center;
464
+ justify-content: center;
465
+ align-self: center;
466
+ width: 120px;
467
+ height: 120px;
468
+ border: 2px solid white;
469
+ border-radius: 50%;
470
+ filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
471
+ filter: alpha(opacity=60);
472
+ opacity: 1;
473
+ box-shadow: 0 0 1px 0 white;
474
+ background: rgba(240, 243, 247, 0.9411764706);
475
+ z-index: 10000;
476
+ }
477
+ .big-mute-icon[data-big-mute-icon] svg {
478
+ margin-left: 5px;
479
+ width: 80px;
480
+ height: 80px;
481
+ }
482
+ .big-mute-icon[data-big-mute-icon] svg path {
483
+ fill: #1f1e1e !important;
484
+ }
485
+ .big-mute-icon[data-big-mute-icon]:hover {
486
+ background: rgba(240, 243, 247, 0.8784313725);
487
+ }
488
+ .big-mute-icon[data-big-mute-icon]:hover svg path {
489
+ fill: #151515 !important;
490
+ }*,
491
+ :focus,
492
+ :visited {
493
+ outline: none !important;
494
+ }
495
+
496
+ .multicamera[data-multicamera] {
497
+ float: right;
498
+ margin-top: 4px;
499
+ position: relative;
500
+ margin-right: 20px;
501
+ width: 20px;
502
+ }
503
+ .multicamera[data-multicamera] button {
504
+ background-color: transparent;
505
+ color: #fff;
506
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
507
+ -webkit-font-smoothing: antialiased;
508
+ border: none;
509
+ font-size: 14px;
510
+ padding: 0;
511
+ }
512
+ .multicamera[data-multicamera] button svg {
513
+ height: 20px;
514
+ position: relative;
515
+ margin-top: 6px;
516
+ }
517
+ .multicamera[data-multicamera] button:hover {
518
+ color: #c9c9c9;
519
+ }
520
+ .multicamera[data-multicamera] button.changing {
521
+ animation: pulse 0.5s infinite alternate;
522
+ }
523
+ .multicamera[data-multicamera] button span.quality-arrow {
524
+ width: 9px;
525
+ height: 6px;
526
+ margin-top: 11px;
527
+ margin-left: 5px;
528
+ }
529
+ .multicamera[data-multicamera] > ul {
530
+ padding: 6px 0;
531
+ right: -24px;
532
+ width: 245px;
533
+ list-style-type: none;
534
+ position: absolute;
535
+ bottom: 48px;
536
+ border-radius: 4px;
537
+ display: none;
538
+ background-color: rgba(74, 74, 74, 0.9);
539
+ }
540
+ .multicamera[data-multicamera] > ul::after {
541
+ content: "";
542
+ position: absolute;
543
+ top: 100%;
544
+ left: 85%;
545
+ margin-left: -10px;
546
+ width: 0;
547
+ height: 0;
548
+ border-top: 10px solid rgba(74, 74, 74, 0.9);
549
+ border-right: 10px solid transparent;
550
+ border-left: 10px solid transparent;
551
+ }
552
+ .multicamera[data-multicamera] li {
553
+ font-size: 10px;
554
+ cursor: pointer;
555
+ }
556
+ .multicamera[data-multicamera] li .multicamera-item {
557
+ display: flex;
558
+ padding: 10px 0;
559
+ justify-content: center;
560
+ position: relative;
561
+ }
562
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
563
+ pointer-events: none;
564
+ }
565
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
566
+ opacity: 0.5;
567
+ }
568
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
569
+ opacity: 0.5;
570
+ }
571
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
572
+ background-color: rgba(0, 0, 0, 0);
573
+ }
574
+ .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
575
+ background-color: rgba(0, 0, 0, 0.3);
576
+ }
577
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
578
+ width: 80px;
579
+ height: 60px;
580
+ }
581
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
582
+ width: 80px;
583
+ height: 60px;
584
+ }
585
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
586
+ width: 120px;
587
+ text-align: left;
588
+ margin-left: 15px;
589
+ }
590
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title,
591
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
592
+ width: 120px;
593
+ height: 20px;
594
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
595
+ font-size: 14px;
596
+ font-weight: normal;
597
+ font-style: normal;
598
+ font-stretch: normal;
599
+ line-height: 1.43;
600
+ letter-spacing: normal;
601
+ text-align: left;
602
+ color: #fff;
603
+ text-overflow: ellipsis;
604
+ overflow: hidden;
605
+ }
606
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
607
+ opacity: 0.6;
608
+ }
609
+ .multicamera[data-multicamera] li a {
610
+ color: #444;
611
+ padding: 2px 10px;
612
+ display: block;
613
+ text-decoration: none;
614
+ }
615
+ .multicamera[data-multicamera] li a:hover {
616
+ background-color: #555;
617
+ color: white;
618
+ }
619
+ .multicamera[data-multicamera] li a:hover a {
620
+ color: white;
621
+ text-decoration: none;
622
+ }
623
+ .multicamera[data-multicamera] li.current a {
624
+ color: #f00;
625
+ }.share_plugin[data-share] {
626
+ pointer-events: auto;
627
+ z-index: 5;
628
+ font-family: Roboto, "Open Sans", Arial, sans-serif !important;
629
+ }
630
+ .share_plugin[data-share].share-hide .share-button-container {
631
+ right: -50px;
632
+ }
633
+ .share_plugin[data-share] .share-button-container {
634
+ cursor: pointer;
635
+ width: 36px;
636
+ height: 36px;
637
+ background-color: rgba(74, 74, 74, 0.6);
638
+ border-radius: 4px;
639
+ position: absolute;
640
+ right: 10px;
641
+ top: 10px;
642
+ padding-top: 6px;
643
+ transition: all 0.3s ease-out;
644
+ }
645
+ .share_plugin[data-share] .share-button-container button[data-share-button] {
646
+ background-color: transparent;
647
+ border: 0;
648
+ margin: 0 6px;
649
+ padding: 0;
650
+ cursor: pointer;
651
+ display: inline-block;
652
+ width: 19px;
653
+ height: 20px;
654
+ }
655
+ .share_plugin[data-share] .share-container {
656
+ pointer-events: auto;
657
+ position: absolute;
658
+ width: 280px;
659
+ background-color: white;
660
+ transform: translate(0, 50%);
661
+ transform: translate(-50%, -50%);
662
+ left: 50%;
663
+ /* margin-left: -140px; */
664
+ top: calc(50% - 20px);
665
+ /* margin-top: -170px; */
666
+ }
667
+ .share_plugin[data-share] .share-container .share-container-header {
668
+ text-align: left;
669
+ border-bottom: 1px solid rgba(155, 155, 155, 0.25);
670
+ }
671
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
672
+ display: inline-block;
673
+ font-size: 16px;
674
+ margin: 5px;
675
+ }
676
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
677
+ display: inline-block;
678
+ width: 24px;
679
+ float: right;
680
+ margin: 5px;
681
+ cursor: pointer;
682
+ }
683
+ .share_plugin[data-share] .share-container .share-container-main {
684
+ margin-bottom: 8px;
685
+ }
686
+ .share_plugin[data-share] .share-container .share-container-main > div {
687
+ text-align: left;
688
+ font-size: 14px;
689
+ padding: 5px;
690
+ }
691
+ .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 {
692
+ overflow: hidden;
693
+ text-overflow: ellipsis;
694
+ color: #818181;
695
+ border: solid 1px #d3d3d3;
696
+ width: calc(100% - 10px);
697
+ padding: 5px;
698
+ }
699
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
700
+ max-height: 90px;
701
+ resize: none;
702
+ }
703
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
704
+ width: 32px;
705
+ display: inline-block;
706
+ margin-right: 5px;
707
+ cursor: pointer;
708
+ }:root {
709
+ --primary-background-color: #000;
710
+ --secondary-background-color: #262626;
711
+ --primary-text-color: #fff;
712
+ --secondary-text-color: #fff4f2;
713
+ --hover-text-color: #f9b090;
714
+ --speedtest-red: #df564d;
715
+ --speedtest-orange: #df934d;
716
+ --speedtest-yellow: #dfd04d;
717
+ --speedtest-light-green: #c2df4d;
718
+ --speedtest-green: #73df4d;
719
+ }
720
+
721
+ .clappr-nerd-stats {
722
+ cursor: default;
723
+ }
724
+ .clappr-nerd-stats .stats-box {
725
+ position: absolute;
726
+ display: inline-block;
727
+ bottom: 52px;
728
+ right: 0;
729
+ top: 0;
730
+ left: 0;
731
+ bottom: 0;
732
+ padding: 0 10px 12px;
733
+ margin: 0;
734
+ line-height: 20px;
735
+ font-size: 12px;
736
+ font-weight: 500;
737
+ background: var(--primary-background-color);
738
+ color: #fff;
739
+ z-index: 20000;
740
+ overflow: auto;
741
+ max-width: 100%;
742
+ }
743
+ .clappr-nerd-stats .stats-box-top {
744
+ position: absolute;
745
+ top: 0;
746
+ left: 0;
747
+ z-index: 9999;
748
+ width: 100%;
749
+ height: 32px;
750
+ background: var(--primary-background-color);
751
+ }
752
+ .clappr-nerd-stats .stats-box-top .close-button {
753
+ position: absolute;
754
+ right: 12px;
755
+ top: 10px;
756
+ display: block;
757
+ width: 12px;
758
+ height: 12px;
759
+ }
760
+ .clappr-nerd-stats .stats-box-top .close-button svg path {
395
761
  fill: var(--primary-text-color);
396
762
  }
397
763
  .clappr-nerd-stats .stats-box-top .close-button:hover svg path {
@@ -679,149 +1045,69 @@
679
1045
  width: 100%;
680
1046
  }
681
1047
  .mobile .speedtest-summary-block .speedtest-summary-subblock-content {
682
- width: 100%;
683
- }
684
- .mobile .speedtest-summary-header {
685
- padding-top: 12px;
686
- height: 38px;
687
- text-align: center;
688
- }
689
- .mobile .speedtest-quality-header {
690
- text-align: center;
691
- }
692
- .mobile .speedtest-footer .speedtest-footer-refresh {
693
- inset: 50% auto auto 50%;
694
- transform: translate(-50%, -50%);
695
- }
696
- }
697
- @media only screen and (orientation: landscape) {
698
- .mobile .clappr-nerd-stats .stats-box-main ul {
699
- flex-basis: 1fr;
700
- }
701
- }
702
- @media only screen and (min-width: 1100px) {
703
- .fullscreen .clappr-nerd-stats .stats-box {
704
- top: unset;
705
- }
706
- }.context-menu {
707
- z-index: 999;
708
- position: absolute;
709
- top: 0;
710
- left: 0;
711
- text-align: center;
712
- }
713
- .context-menu .context-menu-list {
714
- font-family: "Proxima Nova", sans-serif;
715
- font-size: 12px;
716
- line-height: 12px;
717
- list-style-type: none;
718
- text-align: left;
719
- padding: 5px;
720
- margin-left: auto;
721
- margin-right: auto;
722
- background-color: rgba(0, 0, 0, 0.75);
723
- border: 1px solid #666;
724
- border-radius: 4px;
725
- }
726
- .context-menu .context-menu-list-item button {
727
- border: none;
728
- background-color: transparent;
729
- padding: 0;
730
- color: white;
731
- display: flex;
732
- gap: 8px;
733
- align-items: center;
734
- justify-content: center;
735
- cursor: pointer;
736
- padding: 5px;
737
- width: 100%;
1048
+ width: 100%;
1049
+ }
1050
+ .mobile .speedtest-summary-header {
1051
+ padding-top: 12px;
1052
+ height: 38px;
1053
+ text-align: center;
1054
+ }
1055
+ .mobile .speedtest-quality-header {
1056
+ text-align: center;
1057
+ }
1058
+ .mobile .speedtest-footer .speedtest-footer-refresh {
1059
+ inset: 50% auto auto 50%;
1060
+ transform: translate(-50%, -50%);
1061
+ }
738
1062
  }
739
- .context-menu .context-menu-list-item_icon {
740
- width: 20px;
741
- height: 20px;
742
- }.share_plugin[data-share] {
743
- pointer-events: auto;
744
- z-index: 5;
745
- font-family: Roboto, "Open Sans", Arial, sans-serif !important;
1063
+ @media only screen and (orientation: landscape) {
1064
+ .mobile .clappr-nerd-stats .stats-box-main ul {
1065
+ flex-basis: 1fr;
1066
+ }
746
1067
  }
747
- .share_plugin[data-share].share-hide .share-button-container {
748
- right: -50px;
1068
+ @media only screen and (min-width: 1100px) {
1069
+ .fullscreen .clappr-nerd-stats .stats-box {
1070
+ top: unset;
1071
+ }
1072
+ }.quality-levels li.disabled {
1073
+ opacity: 0.5;
1074
+ pointer-events: none;
749
1075
  }
750
- .share_plugin[data-share] .share-button-container {
751
- cursor: pointer;
752
- width: 36px;
753
- height: 36px;
754
- background-color: rgba(74, 74, 74, 0.6);
755
- border-radius: 4px;
1076
+ .quality-levels li.current {
1077
+ background-color: #000;
1078
+ }.seek-time {
756
1079
  position: absolute;
757
- right: 10px;
758
- top: 10px;
759
- padding-top: 6px;
760
- transition: all 0.3s ease-out;
761
- }
762
- .share_plugin[data-share] .share-button-container button[data-share-button] {
763
- background-color: transparent;
764
- border: 0;
765
- margin: 0 6px;
766
- padding: 0;
767
- cursor: pointer;
768
- display: inline-block;
769
- width: 19px;
1080
+ white-space: nowrap;
770
1081
  height: 20px;
1082
+ line-height: 20px;
1083
+ font-size: 0;
1084
+ left: -100%;
1085
+ bottom: 55px;
1086
+ background-color: rgba(2, 2, 2, 0.5);
1087
+ z-index: 9999;
1088
+ transition: opacity 0.1s ease;
771
1089
  }
772
- .share_plugin[data-share] .share-container {
773
- pointer-events: auto;
774
- position: absolute;
775
- width: 280px;
776
- background-color: white;
777
- transform: translate(0, 50%);
778
- transform: translate(-50%, -50%);
779
- left: 50%;
780
- /* margin-left: -140px; */
781
- top: calc(50% - 20px);
782
- /* margin-top: -170px; */
783
- }
784
- .share_plugin[data-share] .share-container .share-container-header {
785
- text-align: left;
786
- border-bottom: 1px solid rgba(155, 155, 155, 0.25);
1090
+ .seek-time.hidden {
1091
+ opacity: 0;
787
1092
  }
788
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1093
+ .seek-time .seek-time__pos {
789
1094
  display: inline-block;
790
- font-size: 16px;
791
- margin: 5px;
1095
+ color: white;
1096
+ font-size: 10px;
1097
+ padding-left: 7px;
1098
+ padding-right: 7px;
1099
+ vertical-align: top;
792
1100
  }
793
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
1101
+ .seek-time .seek-time__duration {
794
1102
  display: inline-block;
795
- width: 24px;
796
- float: right;
797
- margin: 5px;
798
- cursor: pointer;
799
- }
800
- .share_plugin[data-share] .share-container .share-container-main {
801
- margin-bottom: 8px;
802
- }
803
- .share_plugin[data-share] .share-container .share-container-main > div {
804
- text-align: left;
805
- font-size: 14px;
806
- padding: 5px;
807
- }
808
- .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 {
809
- overflow: hidden;
810
- text-overflow: ellipsis;
811
- color: #818181;
812
- border: solid 1px #d3d3d3;
813
- width: calc(100% - 10px);
814
- padding: 5px;
815
- }
816
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
817
- max-height: 90px;
818
- resize: none;
1103
+ color: rgba(255, 255, 255, 0.5);
1104
+ font-size: 10px;
1105
+ padding-right: 7px;
1106
+ vertical-align: top;
819
1107
  }
820
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
821
- width: 32px;
822
- display: inline-block;
823
- margin-right: 5px;
824
- cursor: pointer;
1108
+ .seek-time .seek-time__duration::before {
1109
+ content: "|";
1110
+ margin-right: 7px;
825
1111
  }.spinner-three-bounce[data-spinner] {
826
1112
  position: absolute;
827
1113
  width: 70px;
@@ -860,117 +1146,69 @@
860
1146
  40% {
861
1147
  transform: scale(1);
862
1148
  }
863
- }.media-control-skin-1 .media-control-item.media-control-pip {
864
- order: 95;
865
- }
866
- .media-control-skin-1 .media-control-item.media-control-pip button {
867
- height: 20px;
868
- }
869
- .media-control-skin-1 .media-control-item.media-control-pip button svg {
870
- height: 20px;
871
- }.container-with-poster-clickable .mc-skip-time {
872
- height: 0;
873
- }
874
-
875
- .mc-skip-time {
1149
+ }.scrub-thumbnails {
876
1150
  position: absolute;
1151
+ bottom: 52px;
877
1152
  width: 100%;
878
- height: calc(100% - 50px);
879
- z-index: 9998;
880
- background-color: transparent;
881
- font-family: Roboto, "Open Sans", Arial, sans-serif;
882
- }
883
- .mc-skip-time .skip-container {
884
- width: 100%;
885
- height: 100%;
886
- display: flex;
887
- justify-content: space-between;
888
- }
889
- .mc-skip-time .skip-container .skip-item {
890
- flex: 1 0 0px;
891
- height: 100%;
892
- }.seek-time {
893
- position: absolute;
894
- white-space: nowrap;
895
- height: 20px;
896
- line-height: 20px;
897
- font-size: 0;
898
- left: -100%;
899
- bottom: 55px;
900
- background-color: rgba(2, 2, 2, 0.5);
901
- z-index: 9999;
902
- transition: opacity 0.1s ease;
1153
+ transition: opacity 0.3s ease;
903
1154
  }
904
- .seek-time.hidden {
1155
+ .scrub-thumbnails.hidden {
905
1156
  opacity: 0;
906
1157
  }
907
- .seek-time .seek-time__pos {
908
- display: inline-block;
909
- color: white;
910
- font-size: 10px;
911
- padding-left: 7px;
912
- padding-right: 7px;
913
- vertical-align: top;
914
- }
915
- .seek-time .seek-time__duration {
1158
+ .scrub-thumbnails .thumbnail-container {
916
1159
  display: inline-block;
917
- color: rgba(255, 255, 255, 0.5);
918
- font-size: 10px;
919
- padding-right: 7px;
920
- vertical-align: top;
1160
+ position: relative;
1161
+ overflow: hidden;
1162
+ background-color: #000;
921
1163
  }
922
- .seek-time .seek-time__duration::before {
923
- content: "|";
924
- margin-right: 7px;
925
- }.big-mute-icon-wrapper[data-big-mute] {
1164
+ .scrub-thumbnails .thumbnail-container .thumbnail-img {
926
1165
  position: absolute;
927
- z-index: 9998;
928
- background-color: transparent;
929
- display: flex;
930
- justify-content: center;
931
- width: 100%;
932
- height: calc(100% - 50px);
933
- margin: 0 auto;
934
- opacity: 0.75;
935
- transition: opacity 0.1s ease;
936
- pointer-events: auto;
937
- }
938
- .big-mute-icon-wrapper[data-big-mute].hide {
939
- display: none;
1166
+ width: auto;
940
1167
  }
941
- .big-mute-icon-wrapper[data-big-mute]:hover {
942
- cursor: pointer;
1168
+ .scrub-thumbnails .thumbnails-text {
1169
+ background-color: rgba(74, 74, 74, 0.7);
1170
+ border-radius: 3px;
1171
+ white-space: nowrap;
1172
+ overflow: hidden;
1173
+ text-overflow: ellipsis;
1174
+ color: white;
1175
+ position: absolute;
1176
+ bottom: 23px;
1177
+ width: 100px;
1178
+ padding: 0 4px;
1179
+ font-size: 12px;
943
1180
  }
944
-
945
- .big-mute-icon[data-big-mute-icon] {
946
- display: flex;
947
- align-items: center;
948
- justify-content: center;
949
- align-self: center;
950
- width: 120px;
951
- height: 120px;
952
- border: 2px solid white;
953
- border-radius: 50%;
954
- filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
955
- filter: alpha(opacity=60);
956
- opacity: 1;
957
- box-shadow: 0 0 1px 0 white;
958
- background: rgba(240, 243, 247, 0.9411764706);
959
- z-index: 10000;
1181
+ .scrub-thumbnails .spotlight {
1182
+ background-color: #4a4a4a;
1183
+ overflow: hidden;
1184
+ position: absolute;
1185
+ bottom: 0;
1186
+ left: 0;
1187
+ border-color: #4a4a4a;
1188
+ border-style: solid;
1189
+ border-width: 3px;
1190
+ border-radius: 3px;
960
1191
  }
961
- .big-mute-icon[data-big-mute-icon] svg {
962
- margin-left: 5px;
963
- width: 80px;
964
- height: 80px;
1192
+ .scrub-thumbnails .spotlight img {
1193
+ width: auto;
965
1194
  }
966
- .big-mute-icon[data-big-mute-icon] svg path {
967
- fill: #1f1e1e !important;
1195
+ .scrub-thumbnails .backdrop {
1196
+ position: absolute;
1197
+ left: 0;
1198
+ bottom: 0;
1199
+ right: 0;
1200
+ background-color: #000;
1201
+ overflow: hidden;
968
1202
  }
969
- .big-mute-icon[data-big-mute-icon]:hover {
970
- background: rgba(240, 243, 247, 0.8784313725);
1203
+ .scrub-thumbnails .backdrop .carousel {
1204
+ position: absolute;
1205
+ top: 0;
1206
+ left: 0;
1207
+ height: 100%;
1208
+ white-space: nowrap;
971
1209
  }
972
- .big-mute-icon[data-big-mute-icon]:hover svg path {
973
- fill: #151515 !important;
1210
+ .scrub-thumbnails .backdrop .carousel img {
1211
+ width: auto;
974
1212
  }.media-control-skin-1 .media-control-cc button.media-control-button {
975
1213
  display: flex;
976
1214
  justify-content: center;
@@ -1018,12 +1256,6 @@
1018
1256
  background-color: rgba(0, 0, 0, 0.4);
1019
1257
  color: white;
1020
1258
  display: inline-block;
1021
- }.quality-levels li.disabled {
1022
- opacity: 0.5;
1023
- pointer-events: none;
1024
- }
1025
- .quality-levels li.current {
1026
- background-color: #000;
1027
1259
  }[data-player] {
1028
1260
  --bottom-panel: 40px;
1029
1261
  }
@@ -1645,238 +1877,6 @@
1645
1877
  100% {
1646
1878
  color: #B80000;
1647
1879
  }
1648
- }.scrub-thumbnails {
1649
- position: absolute;
1650
- bottom: 52px;
1651
- width: 100%;
1652
- transition: opacity 0.3s ease;
1653
- }
1654
- .scrub-thumbnails.hidden {
1655
- opacity: 0;
1656
- }
1657
- .scrub-thumbnails .thumbnail-container {
1658
- display: inline-block;
1659
- position: relative;
1660
- overflow: hidden;
1661
- background-color: #000;
1662
- }
1663
- .scrub-thumbnails .thumbnail-container .thumbnail-img {
1664
- position: absolute;
1665
- width: auto;
1666
- }
1667
- .scrub-thumbnails .thumbnails-text {
1668
- background-color: rgba(74, 74, 74, 0.7);
1669
- border-radius: 3px;
1670
- white-space: nowrap;
1671
- overflow: hidden;
1672
- text-overflow: ellipsis;
1673
- color: white;
1674
- position: absolute;
1675
- bottom: 23px;
1676
- width: 100px;
1677
- padding: 0 4px;
1678
- font-size: 12px;
1679
- }
1680
- .scrub-thumbnails .spotlight {
1681
- background-color: #4a4a4a;
1682
- overflow: hidden;
1683
- position: absolute;
1684
- bottom: 0;
1685
- left: 0;
1686
- border-color: #4a4a4a;
1687
- border-style: solid;
1688
- border-width: 3px;
1689
- border-radius: 3px;
1690
- }
1691
- .scrub-thumbnails .spotlight img {
1692
- width: auto;
1693
- }
1694
- .scrub-thumbnails .backdrop {
1695
- position: absolute;
1696
- left: 0;
1697
- bottom: 0;
1698
- right: 0;
1699
- background-color: #000;
1700
- overflow: hidden;
1701
- }
1702
- .scrub-thumbnails .backdrop .carousel {
1703
- position: absolute;
1704
- top: 0;
1705
- left: 0;
1706
- height: 100%;
1707
- white-space: nowrap;
1708
- }
1709
- .scrub-thumbnails .backdrop .carousel img {
1710
- width: auto;
1711
- }*,
1712
- :focus,
1713
- :visited {
1714
- outline: none !important;
1715
- }
1716
-
1717
- .multicamera[data-multicamera] {
1718
- float: right;
1719
- margin-top: 4px;
1720
- position: relative;
1721
- margin-right: 20px;
1722
- width: 20px;
1723
- }
1724
- .multicamera[data-multicamera] button {
1725
- background-color: transparent;
1726
- color: #fff;
1727
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1728
- -webkit-font-smoothing: antialiased;
1729
- border: none;
1730
- font-size: 14px;
1731
- padding: 0;
1732
- }
1733
- .multicamera[data-multicamera] button svg {
1734
- height: 20px;
1735
- position: relative;
1736
- margin-top: 6px;
1737
- }
1738
- .multicamera[data-multicamera] button:hover {
1739
- color: #c9c9c9;
1740
- }
1741
- .multicamera[data-multicamera] button.changing {
1742
- animation: pulse 0.5s infinite alternate;
1743
- }
1744
- .multicamera[data-multicamera] button span.quality-arrow {
1745
- width: 9px;
1746
- height: 6px;
1747
- margin-top: 11px;
1748
- margin-left: 5px;
1749
- }
1750
- .multicamera[data-multicamera] > ul {
1751
- padding: 6px 0;
1752
- right: -24px;
1753
- width: 245px;
1754
- list-style-type: none;
1755
- position: absolute;
1756
- bottom: 48px;
1757
- border-radius: 4px;
1758
- display: none;
1759
- background-color: rgba(74, 74, 74, 0.9);
1760
- }
1761
- .multicamera[data-multicamera] > ul::after {
1762
- content: "";
1763
- position: absolute;
1764
- top: 100%;
1765
- left: 85%;
1766
- margin-left: -10px;
1767
- width: 0;
1768
- height: 0;
1769
- border-top: 10px solid rgba(74, 74, 74, 0.9);
1770
- border-right: 10px solid transparent;
1771
- border-left: 10px solid transparent;
1772
- }
1773
- .multicamera[data-multicamera] li {
1774
- font-size: 10px;
1775
- cursor: pointer;
1776
- }
1777
- .multicamera[data-multicamera] li .multicamera-item {
1778
- display: flex;
1779
- padding: 10px 0;
1780
- justify-content: center;
1781
- position: relative;
1782
- }
1783
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
1784
- pointer-events: none;
1785
- }
1786
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
1787
- opacity: 0.5;
1788
- }
1789
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
1790
- opacity: 0.5;
1791
- }
1792
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
1793
- background-color: rgba(0, 0, 0, 0);
1794
- }
1795
- .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
1796
- background-color: rgba(0, 0, 0, 0.3);
1797
- }
1798
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
1799
- width: 80px;
1800
- height: 60px;
1801
- }
1802
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
1803
- width: 80px;
1804
- height: 60px;
1805
- }
1806
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
1807
- width: 120px;
1808
- text-align: left;
1809
- margin-left: 15px;
1810
- }
1811
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title,
1812
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1813
- width: 120px;
1814
- height: 20px;
1815
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1816
- font-size: 14px;
1817
- font-weight: normal;
1818
- font-style: normal;
1819
- font-stretch: normal;
1820
- line-height: 1.43;
1821
- letter-spacing: normal;
1822
- text-align: left;
1823
- color: #fff;
1824
- text-overflow: ellipsis;
1825
- overflow: hidden;
1826
- }
1827
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1828
- opacity: 0.6;
1829
- }
1830
- .multicamera[data-multicamera] li a {
1831
- color: #444;
1832
- padding: 2px 10px;
1833
- display: block;
1834
- text-decoration: none;
1835
- }
1836
- .multicamera[data-multicamera] li a:hover {
1837
- background-color: #555;
1838
- color: white;
1839
- }
1840
- .multicamera[data-multicamera] li a:hover a {
1841
- color: white;
1842
- text-decoration: none;
1843
- }
1844
- .multicamera[data-multicamera] li.current a {
1845
- color: #f00;
1846
- }div.player-error-screen, [data-player] div.player-error-screen {
1847
- color: #CCCACA;
1848
- position: absolute;
1849
- top: 0;
1850
- height: 100%;
1851
- width: 100%;
1852
- background-color: rgba(0, 0, 0, 0.7);
1853
- z-index: 2000;
1854
- display: flex;
1855
- flex-direction: column;
1856
- justify-content: center;
1857
- }
1858
- div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
1859
- font-size: 14px;
1860
- color: #CCCACA;
1861
- margin-top: 45px;
1862
- }
1863
- div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
1864
- font-weight: bold;
1865
- line-height: 30px;
1866
- font-size: 18px;
1867
- }
1868
- div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
1869
- width: 90%;
1870
- margin: 0 auto;
1871
- }
1872
- div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
1873
- font-size: 13px;
1874
- margin-top: 15px;
1875
- }
1876
- div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1877
- cursor: pointer;
1878
- width: 30px;
1879
- margin: 15px auto 0;
1880
1880
  }.player-logo[data-logo] {
1881
1881
  position: absolute;
1882
1882
  z-index: 2;