@gcorevideo/player 2.19.1 → 2.19.3

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.
@@ -122,6 +122,30 @@
122
122
  .gplayer-lite-btn::-moz-focus-inner {
123
123
  border: 0;
124
124
  padding: 0;
125
+ }.context-menu {
126
+ z-index: 999;
127
+ position: absolute;
128
+ top: 0;
129
+ left: 0;
130
+ text-align: center;
131
+ }
132
+ .context-menu .context-menu-list {
133
+ font-family: "Proxima Nova", sans-serif;
134
+ font-size: 12px;
135
+ line-height: 12px;
136
+ list-style-type: none;
137
+ text-align: left;
138
+ padding: 5px;
139
+ margin-left: auto;
140
+ margin-right: auto;
141
+ background-color: rgba(0, 0, 0, 0.75);
142
+ border: 1px solid #666;
143
+ border-radius: 4px;
144
+ }
145
+ .context-menu .context-menu-list .context-menu-list-item {
146
+ color: white;
147
+ padding: 5px;
148
+ cursor: pointer;
125
149
  }*, :focus, :visited {
126
150
  outline: none !important;
127
151
  }
@@ -261,53 +285,6 @@
261
285
  }
262
286
  }.clips.bar-container[data-seekbar] {
263
287
  clip-path: url("#myClip");
264
- }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
265
- float: right;
266
- font-family: Roboto, "Open Sans", Arial, sans-serif;
267
- }
268
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear {
269
- height: 40px;
270
- width: 40px;
271
- padding-right: 20px;
272
- }
273
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear svg {
274
- height: 20px;
275
- }
276
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
277
- position: absolute;
278
- right: 16px;
279
- bottom: 52px;
280
- display: none;
281
- width: 250px;
282
- min-height: 48px;
283
- z-index: 9999;
284
- border-radius: 4px;
285
- }
286
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
287
- padding: 8px 0;
288
- }
289
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list svg {
290
- float: left;
291
- margin-right: 10px;
292
- }
293
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
294
- margin: 0;
295
- text-align: left;
296
- line-height: 22px;
297
- padding: 5px 14px;
298
- width: 250px;
299
- font-size: 12px;
300
- }
301
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_arrow-right-icon {
302
- float: right;
303
- margin-right: -14px;
304
- }
305
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_value {
306
- float: right;
307
- margin-right: 8px;
308
- }
309
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option svg {
310
- height: 20px;
311
288
  }.dvr-controls[data-dvr-controls] {
312
289
  display: inline-block;
313
290
  float: left;
@@ -479,30 +456,53 @@
479
456
  }
480
457
  .gear-wrapper svg {
481
458
  height: 20px;
482
- }.context-menu {
483
- z-index: 999;
459
+ }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
460
+ float: right;
461
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
462
+ }
463
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear {
464
+ height: 40px;
465
+ width: 40px;
466
+ padding-right: 20px;
467
+ }
468
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear svg {
469
+ height: 20px;
470
+ }
471
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
484
472
  position: absolute;
485
- top: 0;
486
- left: 0;
487
- text-align: center;
473
+ right: 16px;
474
+ bottom: 52px;
475
+ display: none;
476
+ width: 250px;
477
+ min-height: 48px;
478
+ z-index: 9999;
479
+ border-radius: 4px;
488
480
  }
489
- .context-menu .context-menu-list {
490
- font-family: "Proxima Nova", sans-serif;
491
- font-size: 12px;
492
- line-height: 12px;
493
- list-style-type: none;
481
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
482
+ padding: 8px 0;
483
+ }
484
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list svg {
485
+ float: left;
486
+ margin-right: 10px;
487
+ }
488
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
489
+ margin: 0;
494
490
  text-align: left;
495
- padding: 5px;
496
- margin-left: auto;
497
- margin-right: auto;
498
- background-color: rgba(0, 0, 0, 0.75);
499
- border: 1px solid #666;
500
- border-radius: 4px;
491
+ line-height: 22px;
492
+ padding: 5px 14px;
493
+ width: 250px;
494
+ font-size: 12px;
501
495
  }
502
- .context-menu .context-menu-list .context-menu-list-item {
503
- color: white;
504
- padding: 5px;
505
- cursor: pointer;
496
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_arrow-right-icon {
497
+ float: right;
498
+ margin-right: -14px;
499
+ }
500
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_value {
501
+ float: right;
502
+ margin-right: 8px;
503
+ }
504
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option svg {
505
+ height: 20px;
506
506
  }.big-mute-icon-wrapper[data-big-mute] {
507
507
  position: absolute;
508
508
  z-index: 9998;
@@ -552,74 +552,13 @@
552
552
  }
553
553
  .big-mute-icon[data-big-mute-icon]:hover svg path {
554
554
  fill: #151515 !important;
555
- }div.player-error-screen, [data-player] div.player-error-screen {
556
- color: #CCCACA;
557
- position: absolute;
558
- top: 0;
559
- height: 100%;
560
- width: 100%;
561
- background-color: rgba(0, 0, 0, 0.7);
562
- z-index: 2000;
563
- display: flex;
564
- flex-direction: column;
565
- justify-content: center;
566
- }
567
- div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
568
- font-size: 14px;
569
- color: #CCCACA;
570
- margin-top: 45px;
571
- }
572
- div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
573
- font-weight: bold;
574
- line-height: 30px;
575
- font-size: 18px;
576
- }
577
- div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
578
- width: 90%;
579
- margin: 0 auto;
580
- }
581
- div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
582
- font-size: 13px;
583
- margin-top: 15px;
584
- }
585
- div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
586
- cursor: pointer;
587
- width: 30px;
588
- margin: 15px auto 0;
589
- }.player-poster[data-poster] {
590
- display: flex;
591
- justify-content: center;
592
- align-items: center;
593
- position: absolute;
594
- height: 100%;
595
- width: 100%;
596
- z-index: 998;
597
- top: 0;
598
- left: 0;
599
- background-color: #000;
600
- background-size: cover;
601
- background-repeat: no-repeat;
602
- background-position: 50% 50%;
603
- }
604
- .player-poster[data-poster].clickable {
605
- cursor: pointer;
606
- }
607
- .player-poster[data-poster]:hover .play-wrapper[data-poster] {
608
- opacity: 1;
609
- }
610
- .player-poster[data-poster] .play-wrapper[data-poster] {
611
- width: 100%;
612
- height: 25%;
613
- margin: 0 auto;
614
- opacity: 0.75;
615
- transition: opacity 0.1s ease;
616
- }
617
- .player-poster[data-poster] .play-wrapper[data-poster] svg {
618
- height: 100%;
619
- display: inline;
555
+ }.media-control-pip button {
556
+ float: right;
557
+ height: 40px;
558
+ margin-right: 20px;
620
559
  }
621
- .player-poster[data-poster] .play-wrapper[data-poster] svg path {
622
- fill: #fff;
560
+ .media-control-pip button svg {
561
+ height: 20px;
623
562
  }*, :focus, :visited {
624
563
  outline: none !important;
625
564
  }
@@ -768,6 +707,229 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
768
707
  100% {
769
708
  color: #B80000;
770
709
  }
710
+ }.level-disabled {
711
+ opacity: 0.5;
712
+ pointer-events: none;
713
+ }.seek-time[data-seek-time] {
714
+ position: absolute;
715
+ white-space: nowrap;
716
+ height: 20px;
717
+ line-height: 20px;
718
+ font-size: 0;
719
+ left: -100%;
720
+ bottom: 55px;
721
+ background-color: rgba(2, 2, 2, 0.5);
722
+ z-index: 9999;
723
+ transition: opacity 0.1s ease;
724
+ }
725
+ .seek-time[data-seek-time].hidden[data-seek-time] {
726
+ opacity: 0;
727
+ }
728
+ .seek-time[data-seek-time] [data-seek-time] {
729
+ display: inline-block;
730
+ color: white;
731
+ font-size: 10px;
732
+ padding-left: 7px;
733
+ padding-right: 7px;
734
+ vertical-align: top;
735
+ }
736
+ .seek-time[data-seek-time] [data-duration] {
737
+ display: inline-block;
738
+ color: rgba(255, 255, 255, 0.5);
739
+ font-size: 10px;
740
+ padding-right: 7px;
741
+ vertical-align: top;
742
+ }
743
+ .seek-time[data-seek-time] [data-duration]::before {
744
+ content: "|";
745
+ margin-right: 7px;
746
+ }.share_plugin[data-share] {
747
+ pointer-events: auto;
748
+ z-index: 5;
749
+ font-family: Roboto, "Open Sans", Arial, sans-serif !important;
750
+ }
751
+ .share_plugin[data-share].share-hide .share-button-container {
752
+ right: -50px;
753
+ }
754
+ .share_plugin[data-share] .share-button-container {
755
+ cursor: pointer;
756
+ width: 36px;
757
+ height: 36px;
758
+ background-color: rgba(74, 74, 74, 0.6);
759
+ border-radius: 4px;
760
+ position: absolute;
761
+ right: 10px;
762
+ top: 10px;
763
+ padding-top: 6px;
764
+ transition: all 0.3s ease-out;
765
+ }
766
+ .share_plugin[data-share] .share-button-container button[data-share-button] {
767
+ background-color: transparent;
768
+ border: 0;
769
+ margin: 0 6px;
770
+ padding: 0;
771
+ cursor: pointer;
772
+ display: inline-block;
773
+ width: 19px;
774
+ height: 20px;
775
+ }
776
+ .share_plugin[data-share] .share-container {
777
+ pointer-events: auto;
778
+ position: absolute;
779
+ width: 280px;
780
+ background-color: white;
781
+ transform: translate(0, 50%);
782
+ transform: translate(-50%, -50%);
783
+ left: 50%;
784
+ /* margin-left: -140px; */
785
+ top: calc(50% - 20px);
786
+ /* margin-top: -170px; */
787
+ }
788
+ .share_plugin[data-share] .share-container .share-container-header {
789
+ text-align: left;
790
+ border-bottom: 1px solid rgba(155, 155, 155, 0.25);
791
+ }
792
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
793
+ display: inline-block;
794
+ font-size: 16px;
795
+ margin: 5px;
796
+ }
797
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
798
+ display: inline-block;
799
+ width: 24px;
800
+ float: right;
801
+ margin: 5px;
802
+ cursor: pointer;
803
+ }
804
+ .share_plugin[data-share] .share-container .share-container-main {
805
+ margin-bottom: 8px;
806
+ }
807
+ .share_plugin[data-share] .share-container .share-container-main > div {
808
+ text-align: left;
809
+ font-size: 14px;
810
+ padding: 5px;
811
+ }
812
+ .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 {
813
+ overflow: hidden;
814
+ text-overflow: ellipsis;
815
+ color: #818181;
816
+ border: solid 1px #d3d3d3;
817
+ width: calc(100% - 10px);
818
+ padding: 5px;
819
+ }
820
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
821
+ max-height: 90px;
822
+ resize: none;
823
+ }
824
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
825
+ width: 32px;
826
+ display: inline-block;
827
+ margin-right: 5px;
828
+ cursor: pointer;
829
+ }div.player-error-screen, [data-player] div.player-error-screen {
830
+ color: #CCCACA;
831
+ position: absolute;
832
+ top: 0;
833
+ height: 100%;
834
+ width: 100%;
835
+ background-color: rgba(0, 0, 0, 0.7);
836
+ z-index: 2000;
837
+ display: flex;
838
+ flex-direction: column;
839
+ justify-content: center;
840
+ }
841
+ div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
842
+ font-size: 14px;
843
+ color: #CCCACA;
844
+ margin-top: 45px;
845
+ }
846
+ div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
847
+ font-weight: bold;
848
+ line-height: 30px;
849
+ font-size: 18px;
850
+ }
851
+ div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
852
+ width: 90%;
853
+ margin: 0 auto;
854
+ }
855
+ div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
856
+ font-size: 13px;
857
+ margin-top: 15px;
858
+ }
859
+ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
860
+ cursor: pointer;
861
+ width: 30px;
862
+ margin: 15px auto 0;
863
+ }.media-control-skin-1[data-media-control-skin-1] .media-control-quality,
864
+ .media-control-skin-1[data-media-control-skin-1] .media-control-audio-tracks {
865
+ display: block;
866
+ }
867
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] {
868
+ width: 40px;
869
+ margin-top: 0;
870
+ }
871
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button] {
872
+ display: flex;
873
+ justify-content: center;
874
+ padding: 0;
875
+ align-items: center;
876
+ }
877
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button]:hover {
878
+ color: white;
879
+ }
880
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul {
881
+ background-color: rgba(74, 74, 74, 0.6);
882
+ border: none;
883
+ width: auto;
884
+ transform: rotate(180deg);
885
+ border-radius: 4px;
886
+ bottom: 52px;
887
+ margin-left: -28px;
888
+ }
889
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li {
890
+ transform: rotate(-180deg);
891
+ font-size: 16px;
892
+ text-align: center;
893
+ white-space: nowrap;
894
+ height: 30px;
895
+ }
896
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a {
897
+ height: 30px;
898
+ padding: 5px 10px;
899
+ color: #fffffe;
900
+ }
901
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a:hover {
902
+ background-color: rgba(0, 0, 0, 0.4);
903
+ }
904
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li.current a {
905
+ background-color: rgba(0, 0, 0, 0.4);
906
+ }
907
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:first-child a {
908
+ border-bottom-left-radius: 4px;
909
+ border-bottom-right-radius: 4px;
910
+ }
911
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:last-child a {
912
+ border-top-left-radius: 4px;
913
+ border-top-right-radius: 4px;
914
+ }
915
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] {
916
+ height: 26px;
917
+ line-height: 26px;
918
+ bottom: 52px;
919
+ border-radius: 3px;
920
+ background-color: rgba(74, 74, 74, 0.7);
921
+ }
922
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span {
923
+ letter-spacing: 0.8px;
924
+ font-size: 14px;
925
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
926
+ }
927
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-seek-time] {
928
+ padding-left: 8px;
929
+ padding-right: 8px;
930
+ }
931
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-duration] {
932
+ display: none !important;
771
933
  }[data-player] {
772
934
  --bottom-panel: 40px;
773
935
  }
@@ -1373,76 +1535,65 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1373
1535
  }
1374
1536
  .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 {
1375
1537
  transform: scaleY(1.5);
1376
- }.media-control-skin-1[data-media-control-skin-1] .media-control-quality,
1377
- .media-control-skin-1[data-media-control-skin-1] .media-control-audio-tracks {
1378
- display: block;
1379
- }
1380
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] {
1381
- width: 40px;
1382
- margin-top: 0;
1383
- }
1384
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button] {
1385
- display: flex;
1386
- justify-content: center;
1387
- padding: 0;
1388
- align-items: center;
1389
- }
1390
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button]:hover {
1391
- color: white;
1392
- }
1393
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul {
1394
- background-color: rgba(74, 74, 74, 0.6);
1395
- border: none;
1396
- width: auto;
1397
- transform: rotate(180deg);
1398
- border-radius: 4px;
1399
- bottom: 52px;
1400
- margin-left: -28px;
1401
- }
1402
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li {
1403
- transform: rotate(-180deg);
1404
- font-size: 16px;
1538
+ }.spinner-three-bounce[data-spinner] {
1539
+ position: absolute;
1540
+ width: 70px;
1405
1541
  text-align: center;
1406
- white-space: nowrap;
1407
- height: 30px;
1408
- }
1409
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a {
1410
- height: 30px;
1411
- padding: 5px 10px;
1412
- color: #fffffe;
1413
- }
1414
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a:hover {
1415
- background-color: rgba(0, 0, 0, 0.4);
1542
+ z-index: 999;
1543
+ left: 0;
1544
+ right: 0;
1545
+ margin: 0 auto;
1546
+ margin-left: auto;
1547
+ margin-right: auto;
1548
+ /* center vertically */
1549
+ top: 50%;
1550
+ transform: translateY(-50%);
1416
1551
  }
1417
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li.current a {
1418
- background-color: rgba(0, 0, 0, 0.4);
1552
+ .spinner-three-bounce[data-spinner] > div {
1553
+ width: 18px;
1554
+ height: 18px;
1555
+ background-color: #FFF;
1556
+ border-radius: 100%;
1557
+ display: inline-block;
1558
+ animation: bouncedelay 1.4s infinite ease-in-out;
1559
+ /* Prevent first frame from flickering when animation starts */
1560
+ animation-fill-mode: both;
1419
1561
  }
1420
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:first-child a {
1421
- border-bottom-left-radius: 4px;
1422
- border-bottom-right-radius: 4px;
1562
+ .spinner-three-bounce[data-spinner] [data-bounce1] {
1563
+ animation-delay: -0.32s;
1423
1564
  }
1424
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:last-child a {
1425
- border-top-left-radius: 4px;
1426
- border-top-right-radius: 4px;
1565
+ .spinner-three-bounce[data-spinner] [data-bounce2] {
1566
+ animation-delay: -0.16s;
1427
1567
  }
1428
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] {
1429
- height: 26px;
1430
- line-height: 26px;
1431
- bottom: 52px;
1432
- border-radius: 3px;
1433
- background-color: rgba(74, 74, 74, 0.7);
1568
+
1569
+ @keyframes bouncedelay {
1570
+ 0%, 80%, 100% {
1571
+ transform: scale(0);
1572
+ }
1573
+ 40% {
1574
+ transform: scale(1);
1575
+ }
1576
+ }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
1577
+ height: 0;
1434
1578
  }
1435
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span {
1436
- letter-spacing: 0.8px;
1437
- font-size: 14px;
1579
+
1580
+ .skip_time_plugin[data-skip-time] {
1581
+ position: absolute;
1582
+ width: 100%;
1583
+ height: calc(100% - 50px);
1584
+ z-index: 9998;
1585
+ background-color: transparent;
1438
1586
  font-family: Roboto, "Open Sans", Arial, sans-serif;
1439
1587
  }
1440
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-seek-time] {
1441
- padding-left: 8px;
1442
- padding-right: 8px;
1588
+ .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] {
1589
+ width: 100%;
1590
+ height: 100%;
1591
+ display: flex;
1592
+ justify-content: space-between;
1443
1593
  }
1444
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-duration] {
1445
- display: none !important;
1594
+ .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] .skip-item {
1595
+ width: 33.3%;
1596
+ height: 100%;
1446
1597
  }:root {
1447
1598
  --primary-background-color: #000;
1448
1599
  --secondary-background-color: #262626;
@@ -1825,30 +1976,40 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1825
1976
  .mobile .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul {
1826
1977
  width: 25%;
1827
1978
  }
1828
- }.level-disabled {
1829
- opacity: 0.5;
1830
- pointer-events: none;
1831
- }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
1832
- height: 0;
1833
- }
1834
-
1835
- .skip_time_plugin[data-skip-time] {
1979
+ }.player-poster[data-poster] {
1980
+ display: flex;
1981
+ justify-content: center;
1982
+ align-items: center;
1836
1983
  position: absolute;
1984
+ height: 100%;
1837
1985
  width: 100%;
1838
- height: calc(100% - 50px);
1839
- z-index: 9998;
1840
- background-color: transparent;
1841
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1986
+ z-index: 998;
1987
+ top: 0;
1988
+ left: 0;
1989
+ background-color: #000;
1990
+ background-size: cover;
1991
+ background-repeat: no-repeat;
1992
+ background-position: 50% 50%;
1842
1993
  }
1843
- .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] {
1994
+ .player-poster[data-poster].clickable {
1995
+ cursor: pointer;
1996
+ }
1997
+ .player-poster[data-poster]:hover .play-wrapper[data-poster] {
1998
+ opacity: 1;
1999
+ }
2000
+ .player-poster[data-poster] .play-wrapper[data-poster] {
1844
2001
  width: 100%;
1845
- height: 100%;
1846
- display: flex;
1847
- justify-content: space-between;
2002
+ height: 25%;
2003
+ margin: 0 auto;
2004
+ opacity: 0.75;
2005
+ transition: opacity 0.1s ease;
1848
2006
  }
1849
- .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] .skip-item {
1850
- width: 33.3%;
2007
+ .player-poster[data-poster] .play-wrapper[data-poster] svg {
1851
2008
  height: 100%;
2009
+ display: inline;
2010
+ }
2011
+ .player-poster[data-poster] .play-wrapper[data-poster] svg path {
2012
+ fill: #fff;
1852
2013
  }*, :focus, :visited {
1853
2014
  outline: none !important;
1854
2015
  }
@@ -1930,129 +2091,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1930
2091
  .ios-fullscreen::cue {
1931
2092
  visibility: visible !important;
1932
2093
  font-size: 1em !important;
1933
- }.share_plugin[data-share] {
1934
- pointer-events: auto;
1935
- z-index: 5;
1936
- font-family: Roboto, "Open Sans", Arial, sans-serif !important;
1937
- }
1938
- .share_plugin[data-share].share-hide .share-button-container {
1939
- right: -50px;
1940
- }
1941
- .share_plugin[data-share] .share-button-container {
1942
- cursor: pointer;
1943
- width: 36px;
1944
- height: 36px;
1945
- background-color: rgba(74, 74, 74, 0.6);
1946
- border-radius: 4px;
1947
- position: absolute;
1948
- right: 10px;
1949
- top: 10px;
1950
- padding-top: 6px;
1951
- transition: all 0.3s ease-out;
1952
- }
1953
- .share_plugin[data-share] .share-button-container button[data-share-button] {
1954
- background-color: transparent;
1955
- border: 0;
1956
- margin: 0 6px;
1957
- padding: 0;
1958
- cursor: pointer;
1959
- display: inline-block;
1960
- width: 19px;
1961
- height: 20px;
1962
- }
1963
- .share_plugin[data-share] .share-container {
1964
- pointer-events: auto;
1965
- position: absolute;
1966
- width: 280px;
1967
- background-color: white;
1968
- transform: translate(0, 50%);
1969
- transform: translate(-50%, -50%);
1970
- left: 50%;
1971
- /* margin-left: -140px; */
1972
- top: calc(50% - 20px);
1973
- /* margin-top: -170px; */
1974
- }
1975
- .share_plugin[data-share] .share-container .share-container-header {
1976
- text-align: left;
1977
- border-bottom: 1px solid rgba(155, 155, 155, 0.25);
1978
- }
1979
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1980
- display: inline-block;
1981
- font-size: 16px;
1982
- margin: 5px;
1983
- }
1984
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
1985
- display: inline-block;
1986
- width: 24px;
1987
- float: right;
1988
- margin: 5px;
1989
- cursor: pointer;
1990
- }
1991
- .share_plugin[data-share] .share-container .share-container-main {
1992
- margin-bottom: 8px;
1993
- }
1994
- .share_plugin[data-share] .share-container .share-container-main > div {
1995
- text-align: left;
1996
- font-size: 14px;
1997
- padding: 5px;
1998
- }
1999
- .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 {
2000
- overflow: hidden;
2001
- text-overflow: ellipsis;
2002
- color: #818181;
2003
- border: solid 1px #d3d3d3;
2004
- width: calc(100% - 10px);
2005
- padding: 5px;
2006
- }
2007
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
2008
- max-height: 90px;
2009
- resize: none;
2010
- }
2011
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
2012
- width: 32px;
2013
- display: inline-block;
2014
- margin-right: 5px;
2015
- cursor: pointer;
2016
- }.seek-time[data-seek-time] {
2017
- position: absolute;
2018
- white-space: nowrap;
2019
- height: 20px;
2020
- line-height: 20px;
2021
- font-size: 0;
2022
- left: -100%;
2023
- bottom: 55px;
2024
- background-color: rgba(2, 2, 2, 0.5);
2025
- z-index: 9999;
2026
- transition: opacity 0.1s ease;
2027
- }
2028
- .seek-time[data-seek-time].hidden[data-seek-time] {
2029
- opacity: 0;
2030
- }
2031
- .seek-time[data-seek-time] [data-seek-time] {
2032
- display: inline-block;
2033
- color: white;
2034
- font-size: 10px;
2035
- padding-left: 7px;
2036
- padding-right: 7px;
2037
- vertical-align: top;
2038
- }
2039
- .seek-time[data-seek-time] [data-duration] {
2040
- display: inline-block;
2041
- color: rgba(255, 255, 255, 0.5);
2042
- font-size: 10px;
2043
- padding-right: 7px;
2044
- vertical-align: top;
2045
- }
2046
- .seek-time[data-seek-time] [data-duration]::before {
2047
- content: "|";
2048
- margin-right: 7px;
2049
- }.media-control-pip button {
2050
- float: right;
2051
- height: 40px;
2052
- margin-right: 20px;
2053
- }
2054
- .media-control-pip button svg {
2055
- height: 20px;
2056
2094
  }.scrub-thumbnails {
2057
2095
  position: absolute;
2058
2096
  bottom: 52px;
@@ -2114,44 +2152,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
2114
2152
  }
2115
2153
  .scrub-thumbnails .backdrop .carousel img {
2116
2154
  width: auto;
2117
- }.spinner-three-bounce[data-spinner] {
2118
- position: absolute;
2119
- width: 70px;
2120
- text-align: center;
2121
- z-index: 999;
2122
- left: 0;
2123
- right: 0;
2124
- margin: 0 auto;
2125
- margin-left: auto;
2126
- margin-right: auto;
2127
- /* center vertically */
2128
- top: 50%;
2129
- transform: translateY(-50%);
2130
- }
2131
- .spinner-three-bounce[data-spinner] > div {
2132
- width: 18px;
2133
- height: 18px;
2134
- background-color: #FFF;
2135
- border-radius: 100%;
2136
- display: inline-block;
2137
- animation: bouncedelay 1.4s infinite ease-in-out;
2138
- /* Prevent first frame from flickering when animation starts */
2139
- animation-fill-mode: both;
2140
- }
2141
- .spinner-three-bounce[data-spinner] [data-bounce1] {
2142
- animation-delay: -0.32s;
2143
- }
2144
- .spinner-three-bounce[data-spinner] [data-bounce2] {
2145
- animation-delay: -0.16s;
2146
- }
2147
-
2148
- @keyframes bouncedelay {
2149
- 0%, 80%, 100% {
2150
- transform: scale(0);
2151
- }
2152
- 40% {
2153
- transform: scale(1);
2154
- }
2155
2155
  }.player-logo[data-logo] {
2156
2156
  position: absolute;
2157
2157
  z-index: 2;