@gcorevideo/player 2.25.8 → 2.25.9

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,55 +122,40 @@
122
122
  .gplayer-lite-btn::-moz-focus-inner {
123
123
  border: 0;
124
124
  padding: 0;
125
- }.big-mute-icon-wrapper[data-big-mute] {
125
+ }div.player-error-screen, [data-player] div.player-error-screen {
126
+ color: #CCCACA;
126
127
  position: absolute;
127
- z-index: 9998;
128
- background-color: transparent;
129
- display: flex;
130
- justify-content: center;
128
+ top: 0;
129
+ height: 100%;
131
130
  width: 100%;
132
- height: calc(100% - 50px);
133
- margin: 0 auto;
134
- opacity: 0.75;
135
- transition: opacity 0.1s ease;
136
- pointer-events: auto;
137
- }
138
- .big-mute-icon-wrapper[data-big-mute].hide {
139
- display: none;
140
- }
141
- .big-mute-icon-wrapper[data-big-mute]:hover {
142
- cursor: pointer;
143
- }
144
-
145
- .big-mute-icon[data-big-mute-icon] {
131
+ background-color: rgba(0, 0, 0, 0.7);
132
+ z-index: 2000;
146
133
  display: flex;
147
- align-items: center;
134
+ flex-direction: column;
148
135
  justify-content: center;
149
- align-self: center;
150
- width: 120px;
151
- height: 120px;
152
- border: 2px solid white;
153
- border-radius: 50%;
154
- filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
155
- filter: alpha(opacity=60);
156
- opacity: 1;
157
- box-shadow: 0 0 1px 0 white;
158
- background: rgba(240, 243, 247, 0.9411764706);
159
- z-index: 10000;
160
136
  }
161
- .big-mute-icon[data-big-mute-icon] svg {
162
- margin-left: 5px;
163
- width: 80px;
164
- height: 80px;
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;
165
141
  }
166
- .big-mute-icon[data-big-mute-icon] svg path {
167
- fill: #1f1e1e !important;
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;
168
146
  }
169
- .big-mute-icon[data-big-mute-icon]:hover {
170
- background: rgba(240, 243, 247, 0.8784313725);
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;
171
150
  }
172
- .big-mute-icon[data-big-mute-icon]:hover svg path {
173
- fill: #151515 !important;
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;
174
159
  }:root {
175
160
  --primary-background-color: #000;
176
161
  --secondary-background-color: #262626;
@@ -535,6 +520,78 @@
535
520
  .fullscreen .clappr-nerd-stats .stats-box {
536
521
  top: unset;
537
522
  }
523
+ }.big-mute-icon-wrapper[data-big-mute] {
524
+ position: absolute;
525
+ z-index: 9998;
526
+ background-color: transparent;
527
+ display: flex;
528
+ justify-content: center;
529
+ width: 100%;
530
+ height: calc(100% - 50px);
531
+ margin: 0 auto;
532
+ opacity: 0.75;
533
+ transition: opacity 0.1s ease;
534
+ pointer-events: auto;
535
+ }
536
+ .big-mute-icon-wrapper[data-big-mute].hide {
537
+ display: none;
538
+ }
539
+ .big-mute-icon-wrapper[data-big-mute]:hover {
540
+ cursor: pointer;
541
+ }
542
+
543
+ .big-mute-icon[data-big-mute-icon] {
544
+ display: flex;
545
+ align-items: center;
546
+ justify-content: center;
547
+ align-self: center;
548
+ width: 120px;
549
+ height: 120px;
550
+ border: 2px solid white;
551
+ border-radius: 50%;
552
+ filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
553
+ filter: alpha(opacity=60);
554
+ opacity: 1;
555
+ box-shadow: 0 0 1px 0 white;
556
+ background: rgba(240, 243, 247, 0.9411764706);
557
+ z-index: 10000;
558
+ }
559
+ .big-mute-icon[data-big-mute-icon] svg {
560
+ margin-left: 5px;
561
+ width: 80px;
562
+ height: 80px;
563
+ }
564
+ .big-mute-icon[data-big-mute-icon] svg path {
565
+ fill: #1f1e1e !important;
566
+ }
567
+ .big-mute-icon[data-big-mute-icon]:hover {
568
+ background: rgba(240, 243, 247, 0.8784313725);
569
+ }
570
+ .big-mute-icon[data-big-mute-icon]:hover svg path {
571
+ fill: #151515 !important;
572
+ }@charset "UTF-8";
573
+ .gplayer-mc-clips {
574
+ display: flex;
575
+ gap: 6px;
576
+ }
577
+ .gplayer-mc-clips .gplayer-mc-clips-text {
578
+ text-overflow: ellipsis;
579
+ white-space: nowrap;
580
+ overflow: hidden;
581
+ display: inline-block;
582
+ text-overflow: ellipsis;
583
+ color: white;
584
+ cursor: default;
585
+ line-height: var(--bottom-panel);
586
+ position: relative;
587
+ max-width: 150px;
588
+ }
589
+ .gplayer-mc-clips .gplayer-mc-clips-text::before {
590
+ content: "•";
591
+ padding-right: 6px;
592
+ }
593
+ .gplayer-mc-clips .gplayer-mc-clips-text.compact {
594
+ max-width: 100px;
538
595
  }.dvr-controls {
539
596
  --disabled-opacity: 0.3;
540
597
  --circle-radius: 5px;
@@ -592,6 +649,53 @@
592
649
  .dvr-controls .live-button:hover {
593
650
  opacity: 1;
594
651
  text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
652
+ }.media-control-skin-1 .media-control-item.media-control-pip {
653
+ order: 95;
654
+ }
655
+ .media-control-skin-1 .media-control-item.media-control-pip button {
656
+ height: 20px;
657
+ }
658
+ .media-control-skin-1 .media-control-item.media-control-pip button svg {
659
+ height: 20px;
660
+ }.seek-time {
661
+ position: absolute;
662
+ white-space: nowrap;
663
+ height: 20px;
664
+ line-height: 20px;
665
+ font-size: 0;
666
+ left: -100%;
667
+ bottom: 55px;
668
+ background-color: rgba(2, 2, 2, 0.5);
669
+ z-index: 9999;
670
+ transition: opacity 0.1s ease;
671
+ }
672
+ .seek-time.hidden {
673
+ opacity: 0;
674
+ }
675
+ .seek-time .seek-time__pos {
676
+ display: inline-block;
677
+ color: white;
678
+ font-size: 10px;
679
+ padding-left: 7px;
680
+ padding-right: 7px;
681
+ vertical-align: top;
682
+ }
683
+ .seek-time .seek-time__duration {
684
+ display: inline-block;
685
+ color: rgba(255, 255, 255, 0.5);
686
+ font-size: 10px;
687
+ padding-right: 7px;
688
+ vertical-align: top;
689
+ }
690
+ .seek-time .seek-time__duration::before {
691
+ content: "|";
692
+ margin-right: 7px;
693
+ }.quality-levels li.disabled {
694
+ opacity: 0.5;
695
+ pointer-events: none;
696
+ }
697
+ .quality-levels li.current {
698
+ background-color: #000;
595
699
  }*,
596
700
  :focus,
597
701
  :visited {
@@ -727,93 +831,33 @@
727
831
  }
728
832
  .multicamera[data-multicamera] li.current a {
729
833
  color: #f00;
730
- }@charset "UTF-8";
731
- .gplayer-mc-clips {
732
- display: flex;
733
- gap: 6px;
734
- }
735
- .gplayer-mc-clips .gplayer-mc-clips-text {
736
- text-overflow: ellipsis;
737
- white-space: nowrap;
738
- overflow: hidden;
739
- display: inline-block;
740
- text-overflow: ellipsis;
741
- color: white;
742
- cursor: default;
743
- line-height: var(--bottom-panel);
744
- position: relative;
745
- max-width: 150px;
746
- }
747
- .gplayer-mc-clips .gplayer-mc-clips-text::before {
748
- content: "•";
749
- padding-right: 6px;
750
- }
751
- .gplayer-mc-clips .gplayer-mc-clips-text.compact {
752
- max-width: 100px;
753
- }*, :focus, :visited {
754
- outline: none !important;
834
+ }.container-with-poster-clickable .mc-skip-time {
835
+ height: 0;
755
836
  }
756
837
 
757
- .gear-wrapper .go-back {
758
- font-weight: 600;
759
- font-size: 14px;
760
- line-height: 20px;
838
+ .mc-skip-time {
839
+ position: absolute;
761
840
  width: 100%;
762
- text-align: left;
763
- padding: 12px;
764
- }
765
- .gear-wrapper .go-back .arrow-left-icon {
766
- float: left;
767
- padding-top: 2px;
768
- padding-right: 2px;
769
- }
770
- .gear-wrapper .go-back .arrow-left-icon svg {
771
- height: 16px;
841
+ height: calc(100% - 50px);
842
+ z-index: 9998;
843
+ background-color: transparent;
844
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
772
845
  }
773
- .gear-wrapper ul.gear-sub-menu {
846
+ .mc-skip-time .skip-container {
774
847
  width: 100%;
775
- list-style-type: none;
776
- min-width: 60px;
777
- border-top: 2px solid rgb(36, 36, 36);
778
- overflow-y: auto;
848
+ height: 100%;
849
+ display: flex;
850
+ justify-content: space-between;
779
851
  }
780
- .gear-wrapper ul.gear-sub-menu li {
781
- font-size: 12px;
782
- text-align: left;
783
- }
784
- .gear-wrapper ul.gear-sub-menu li a {
785
- display: block;
786
- text-decoration: none;
787
- height: 30px;
788
- padding: 5px 10px;
789
- line-height: 22px;
790
- color: var(--gplayer-mc-text-dim-color);
791
- }
792
- .gear-wrapper ul.gear-sub-menu li a:hover {
793
- color: var(--gplayer-mc-text-color);
794
- background-color: rgba(0, 0, 0, 0.4);
795
- }
796
- .gear-wrapper ul.gear-sub-menu li a:hover a {
797
- color: var(--gplayer-mc-text-color);
798
- text-decoration: none;
799
- }
800
- .gear-wrapper ul.gear-sub-menu li a .check-icon {
801
- width: 30px;
802
- height: 20px;
803
- float: left;
804
- display: block;
805
- }
806
- .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
807
- display: none;
808
- }
809
- .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
810
- display: inline;
811
- }.context-menu {
812
- z-index: 999;
813
- position: absolute;
814
- top: 0;
815
- left: 0;
816
- text-align: center;
852
+ .mc-skip-time .skip-container .skip-item {
853
+ flex: 1 0 0px;
854
+ height: 100%;
855
+ }.context-menu {
856
+ z-index: 999;
857
+ position: absolute;
858
+ top: 0;
859
+ left: 0;
860
+ text-align: center;
817
861
  }
818
862
  .context-menu .context-menu-list {
819
863
  font-family: "Proxima Nova", sans-serif;
@@ -844,216 +888,6 @@
844
888
  .context-menu .context-menu-list-item_icon {
845
889
  width: 20px;
846
890
  height: 20px;
847
- }.media-control-skin-1 .media-control-item.media-control-gear {
848
- order: 99;
849
- }
850
- .media-control-skin-1 .media-control-item.media-control-gear .gear-wrapper {
851
- position: absolute;
852
- right: 16px;
853
- bottom: 52px;
854
- width: 250px;
855
- min-height: 48px;
856
- z-index: 9999;
857
- border-radius: 4px;
858
- box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);
859
- }
860
- .media-control-skin-1 .media-control-item.media-control-gear .gear-options-list {
861
- padding: 8px 0;
862
- }
863
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option {
864
- margin: 0;
865
- text-align: left;
866
- line-height: 22px;
867
- padding: 5px 14px;
868
- width: 250px;
869
- font-size: 12px;
870
- display: flex;
871
- align-items: center;
872
- justify-content: flex-start;
873
- gap: 8px;
874
- }
875
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon {
876
- flex: 24px 0 0;
877
- height: 24px;
878
- }
879
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon.hidden {
880
- visibility: hidden;
881
- display: inline-block;
882
- }
883
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_label {
884
- flex: 0 1 100%;
885
- }
886
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_arrow-right-icon {
887
- flex: 0 0 14px;
888
- height: 24px;
889
- }
890
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_value {
891
- flex: 1 0 auto;
892
- }.share_plugin[data-share] {
893
- pointer-events: auto;
894
- z-index: 5;
895
- font-family: Roboto, "Open Sans", Arial, sans-serif !important;
896
- }
897
- .share_plugin[data-share].share-hide .share-button-container {
898
- right: -50px;
899
- }
900
- .share_plugin[data-share] .share-button-container {
901
- cursor: pointer;
902
- width: 36px;
903
- height: 36px;
904
- background-color: rgba(74, 74, 74, 0.6);
905
- border-radius: 4px;
906
- position: absolute;
907
- right: 10px;
908
- top: 10px;
909
- padding-top: 6px;
910
- transition: all 0.3s ease-out;
911
- }
912
- .share_plugin[data-share] .share-button-container button[data-share-button] {
913
- background-color: transparent;
914
- border: 0;
915
- margin: 0 6px;
916
- padding: 0;
917
- cursor: pointer;
918
- display: inline-block;
919
- width: 19px;
920
- height: 20px;
921
- }
922
- .share_plugin[data-share] .share-container {
923
- pointer-events: auto;
924
- position: absolute;
925
- width: 280px;
926
- background-color: white;
927
- transform: translate(0, 50%);
928
- transform: translate(-50%, -50%);
929
- left: 50%;
930
- /* margin-left: -140px; */
931
- top: calc(50% - 20px);
932
- /* margin-top: -170px; */
933
- }
934
- .share_plugin[data-share] .share-container .share-container-header {
935
- text-align: left;
936
- border-bottom: 1px solid rgba(155, 155, 155, 0.25);
937
- }
938
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
939
- display: inline-block;
940
- font-size: 16px;
941
- margin: 5px;
942
- }
943
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
944
- display: inline-block;
945
- width: 24px;
946
- float: right;
947
- margin: 5px;
948
- cursor: pointer;
949
- }
950
- .share_plugin[data-share] .share-container .share-container-main {
951
- margin-bottom: 8px;
952
- }
953
- .share_plugin[data-share] .share-container .share-container-main > div {
954
- text-align: left;
955
- font-size: 14px;
956
- padding: 5px;
957
- }
958
- .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 {
959
- overflow: hidden;
960
- text-overflow: ellipsis;
961
- color: #818181;
962
- border: solid 1px #d3d3d3;
963
- width: calc(100% - 10px);
964
- padding: 5px;
965
- }
966
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
967
- max-height: 90px;
968
- resize: none;
969
- }
970
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
971
- width: 32px;
972
- display: inline-block;
973
- margin-right: 5px;
974
- cursor: pointer;
975
- }.quality-levels li.disabled {
976
- opacity: 0.5;
977
- pointer-events: none;
978
- }
979
- .quality-levels li.current {
980
- background-color: #000;
981
- }div.player-error-screen, [data-player] div.player-error-screen {
982
- color: #CCCACA;
983
- position: absolute;
984
- top: 0;
985
- height: 100%;
986
- width: 100%;
987
- background-color: rgba(0, 0, 0, 0.7);
988
- z-index: 2000;
989
- display: flex;
990
- flex-direction: column;
991
- justify-content: center;
992
- }
993
- div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
994
- font-size: 14px;
995
- color: #CCCACA;
996
- margin-top: 45px;
997
- }
998
- div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
999
- font-weight: bold;
1000
- line-height: 30px;
1001
- font-size: 18px;
1002
- }
1003
- div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
1004
- width: 90%;
1005
- margin: 0 auto;
1006
- }
1007
- div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
1008
- font-size: 13px;
1009
- margin-top: 15px;
1010
- }
1011
- div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1012
- cursor: pointer;
1013
- width: 30px;
1014
- margin: 15px auto 0;
1015
- }.media-control-skin-1 .media-control-item.media-control-pip {
1016
- order: 95;
1017
- }
1018
- .media-control-skin-1 .media-control-item.media-control-pip button {
1019
- height: 20px;
1020
- }
1021
- .media-control-skin-1 .media-control-item.media-control-pip button svg {
1022
- height: 20px;
1023
- }.player-poster {
1024
- display: flex;
1025
- justify-content: center;
1026
- align-items: center;
1027
- position: absolute;
1028
- height: 100%;
1029
- width: 100%;
1030
- z-index: 998;
1031
- top: 0;
1032
- left: 0;
1033
- background-color: #000;
1034
- background-size: cover;
1035
- background-repeat: no-repeat;
1036
- background-position: 50% 50%;
1037
- }
1038
- .player-poster.clickable {
1039
- cursor: pointer;
1040
- }
1041
- .player-poster:hover .play-wrapper {
1042
- opacity: 1;
1043
- }
1044
- .player-poster .play-wrapper {
1045
- width: 100%;
1046
- height: 25%;
1047
- margin: 0 auto;
1048
- opacity: 0.75;
1049
- transition: opacity 0.1s ease;
1050
- }
1051
- .player-poster .play-wrapper svg {
1052
- height: 100%;
1053
- display: inline;
1054
- }
1055
- .player-poster .play-wrapper svg path {
1056
- fill: #fff;
1057
891
  }[data-player] {
1058
892
  --bottom-panel: 40px;
1059
893
  }
@@ -1679,39 +1513,143 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1679
1513
  100% {
1680
1514
  color: #B80000;
1681
1515
  }
1682
- }.seek-time {
1683
- position: absolute;
1684
- white-space: nowrap;
1685
- height: 20px;
1686
- line-height: 20px;
1687
- font-size: 0;
1688
- left: -100%;
1689
- bottom: 55px;
1690
- background-color: rgba(2, 2, 2, 0.5);
1691
- z-index: 9999;
1692
- transition: opacity 0.1s ease;
1516
+ }*, :focus, :visited {
1517
+ outline: none !important;
1693
1518
  }
1694
- .seek-time.hidden {
1695
- opacity: 0;
1519
+
1520
+ .gear-wrapper .go-back {
1521
+ font-weight: 600;
1522
+ font-size: 14px;
1523
+ line-height: 20px;
1524
+ width: 100%;
1525
+ text-align: left;
1526
+ padding: 12px;
1696
1527
  }
1697
- .seek-time .seek-time__pos {
1698
- display: inline-block;
1699
- color: white;
1700
- font-size: 10px;
1701
- padding-left: 7px;
1702
- padding-right: 7px;
1703
- vertical-align: top;
1528
+ .gear-wrapper .go-back .arrow-left-icon {
1529
+ float: left;
1530
+ padding-top: 2px;
1531
+ padding-right: 2px;
1704
1532
  }
1705
- .seek-time .seek-time__duration {
1533
+ .gear-wrapper .go-back .arrow-left-icon svg {
1534
+ height: 16px;
1535
+ }
1536
+ .gear-wrapper ul.gear-sub-menu {
1537
+ width: 100%;
1538
+ list-style-type: none;
1539
+ min-width: 60px;
1540
+ border-top: 2px solid rgb(36, 36, 36);
1541
+ overflow-y: auto;
1542
+ }
1543
+ .gear-wrapper ul.gear-sub-menu li {
1544
+ font-size: 12px;
1545
+ text-align: left;
1546
+ }
1547
+ .gear-wrapper ul.gear-sub-menu li a {
1548
+ display: block;
1549
+ text-decoration: none;
1550
+ height: 30px;
1551
+ padding: 5px 10px;
1552
+ line-height: 22px;
1553
+ color: var(--gplayer-mc-text-dim-color);
1554
+ }
1555
+ .gear-wrapper ul.gear-sub-menu li a:hover {
1556
+ color: var(--gplayer-mc-text-color);
1557
+ background-color: rgba(0, 0, 0, 0.4);
1558
+ }
1559
+ .gear-wrapper ul.gear-sub-menu li a:hover a {
1560
+ color: var(--gplayer-mc-text-color);
1561
+ text-decoration: none;
1562
+ }
1563
+ .gear-wrapper ul.gear-sub-menu li a .check-icon {
1564
+ width: 30px;
1565
+ height: 20px;
1566
+ float: left;
1567
+ display: block;
1568
+ }
1569
+ .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
1570
+ display: none;
1571
+ }
1572
+ .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
1573
+ display: inline;
1574
+ }.media-control-skin-1 .media-control-item.media-control-gear {
1575
+ order: 99;
1576
+ }
1577
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-wrapper {
1578
+ position: absolute;
1579
+ right: 16px;
1580
+ bottom: 52px;
1581
+ width: 250px;
1582
+ min-height: 48px;
1583
+ z-index: 9999;
1584
+ border-radius: 4px;
1585
+ box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);
1586
+ }
1587
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-options-list {
1588
+ padding: 8px 0;
1589
+ }
1590
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option {
1591
+ margin: 0;
1592
+ text-align: left;
1593
+ line-height: 22px;
1594
+ padding: 5px 14px;
1595
+ width: 250px;
1596
+ font-size: 12px;
1597
+ display: flex;
1598
+ align-items: center;
1599
+ justify-content: flex-start;
1600
+ gap: 8px;
1601
+ }
1602
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon {
1603
+ flex: 24px 0 0;
1604
+ height: 24px;
1605
+ }
1606
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon.hidden {
1607
+ visibility: hidden;
1706
1608
  display: inline-block;
1707
- color: rgba(255, 255, 255, 0.5);
1708
- font-size: 10px;
1709
- padding-right: 7px;
1710
- vertical-align: top;
1711
1609
  }
1712
- .seek-time .seek-time__duration::before {
1713
- content: "|";
1714
- margin-right: 7px;
1610
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_label {
1611
+ flex: 0 1 100%;
1612
+ }
1613
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_arrow-right-icon {
1614
+ flex: 0 0 14px;
1615
+ height: 24px;
1616
+ }
1617
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_value {
1618
+ flex: 1 0 auto;
1619
+ }.player-poster {
1620
+ display: flex;
1621
+ justify-content: center;
1622
+ align-items: center;
1623
+ position: absolute;
1624
+ height: 100%;
1625
+ width: 100%;
1626
+ z-index: 998;
1627
+ top: 0;
1628
+ left: 0;
1629
+ background-color: #000;
1630
+ background-size: cover;
1631
+ background-repeat: no-repeat;
1632
+ background-position: 50% 50%;
1633
+ }
1634
+ .player-poster.clickable {
1635
+ cursor: pointer;
1636
+ }
1637
+ .player-poster:hover .play-wrapper {
1638
+ opacity: 1;
1639
+ }
1640
+ .player-poster .play-wrapper {
1641
+ width: 100%;
1642
+ height: 25%;
1643
+ margin: 0 auto;
1644
+ opacity: 0.75;
1645
+ transition: opacity 0.1s ease;
1646
+ }
1647
+ .player-poster .play-wrapper svg {
1648
+ height: 100%;
1649
+ display: inline;
1650
+ }
1651
+ .player-poster .play-wrapper svg path {
1652
+ fill: #fff;
1715
1653
  }.scrub-thumbnails {
1716
1654
  position: absolute;
1717
1655
  bottom: 52px;
@@ -1775,53 +1713,89 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1775
1713
  }
1776
1714
  .scrub-thumbnails .backdrop .carousel img {
1777
1715
  width: auto;
1778
- }.spinner-three-bounce[data-spinner] {
1716
+ }.share_plugin[data-share] {
1717
+ pointer-events: auto;
1718
+ z-index: 5;
1719
+ font-family: Roboto, "Open Sans", Arial, sans-serif !important;
1720
+ }
1721
+ .share_plugin[data-share].share-hide .share-button-container {
1722
+ right: -50px;
1723
+ }
1724
+ .share_plugin[data-share] .share-button-container {
1725
+ cursor: pointer;
1726
+ width: 36px;
1727
+ height: 36px;
1728
+ background-color: rgba(74, 74, 74, 0.6);
1729
+ border-radius: 4px;
1779
1730
  position: absolute;
1780
- width: 70px;
1781
- text-align: center;
1782
- z-index: 999;
1783
- left: 0;
1784
- right: 0;
1785
- margin: 0 auto;
1786
- margin-left: auto;
1787
- margin-right: auto;
1788
- /* center vertically */
1789
- top: 50%;
1790
- transform: translateY(-50%);
1731
+ right: 10px;
1732
+ top: 10px;
1733
+ padding-top: 6px;
1734
+ transition: all 0.3s ease-out;
1791
1735
  }
1792
- .spinner-three-bounce[data-spinner] > div {
1793
- width: 18px;
1794
- height: 18px;
1795
- background-color: #FFF;
1796
- border-radius: 100%;
1736
+ .share_plugin[data-share] .share-button-container button[data-share-button] {
1737
+ background-color: transparent;
1738
+ border: 0;
1739
+ margin: 0 6px;
1740
+ padding: 0;
1741
+ cursor: pointer;
1797
1742
  display: inline-block;
1798
- animation: bouncedelay 1.4s infinite ease-in-out;
1799
- /* Prevent first frame from flickering when animation starts */
1800
- animation-fill-mode: both;
1743
+ width: 19px;
1744
+ height: 20px;
1801
1745
  }
1802
- .spinner-three-bounce[data-spinner] [data-bounce1] {
1803
- animation-delay: -0.32s;
1746
+ .share_plugin[data-share] .share-container {
1747
+ pointer-events: auto;
1748
+ position: absolute;
1749
+ width: 280px;
1750
+ background-color: white;
1751
+ transform: translate(0, 50%);
1752
+ transform: translate(-50%, -50%);
1753
+ left: 50%;
1754
+ /* margin-left: -140px; */
1755
+ top: calc(50% - 20px);
1756
+ /* margin-top: -170px; */
1804
1757
  }
1805
- .spinner-three-bounce[data-spinner] [data-bounce2] {
1806
- animation-delay: -0.16s;
1758
+ .share_plugin[data-share] .share-container .share-container-header {
1759
+ text-align: left;
1760
+ border-bottom: 1px solid rgba(155, 155, 155, 0.25);
1807
1761
  }
1808
-
1809
- @keyframes bouncedelay {
1810
- 0%, 80%, 100% {
1811
- transform: scale(0);
1812
- }
1813
- 40% {
1814
- transform: scale(1);
1815
- }
1816
- }.player-logo[data-logo] {
1817
- position: absolute;
1818
- z-index: 2;
1819
- width: 100%;
1820
- height: 100%;
1762
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1763
+ display: inline-block;
1764
+ font-size: 16px;
1765
+ margin: 5px;
1821
1766
  }
1822
-
1823
- .clappr-logo {
1824
- position: absolute;
1767
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
1768
+ display: inline-block;
1769
+ width: 24px;
1770
+ float: right;
1771
+ margin: 5px;
1772
+ cursor: pointer;
1773
+ }
1774
+ .share_plugin[data-share] .share-container .share-container-main {
1775
+ margin-bottom: 8px;
1776
+ }
1777
+ .share_plugin[data-share] .share-container .share-container-main > div {
1778
+ text-align: left;
1779
+ font-size: 14px;
1780
+ padding: 5px;
1781
+ }
1782
+ .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 {
1783
+ overflow: hidden;
1784
+ text-overflow: ellipsis;
1785
+ color: #818181;
1786
+ border: solid 1px #d3d3d3;
1787
+ width: calc(100% - 10px);
1788
+ padding: 5px;
1789
+ }
1790
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
1791
+ max-height: 90px;
1792
+ resize: none;
1793
+ }
1794
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
1795
+ width: 32px;
1796
+ display: inline-block;
1797
+ margin-right: 5px;
1798
+ cursor: pointer;
1825
1799
  }.media-control-skin-1 .media-control-cc button.media-control-button {
1826
1800
  display: flex;
1827
1801
  justify-content: center;
@@ -1869,25 +1843,51 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1869
1843
  background-color: rgba(0, 0, 0, 0.4);
1870
1844
  color: white;
1871
1845
  display: inline-block;
1872
- }.container-with-poster-clickable .mc-skip-time {
1873
- height: 0;
1846
+ }.spinner-three-bounce[data-spinner] {
1847
+ position: absolute;
1848
+ width: 70px;
1849
+ text-align: center;
1850
+ z-index: 999;
1851
+ left: 0;
1852
+ right: 0;
1853
+ margin: 0 auto;
1854
+ margin-left: auto;
1855
+ margin-right: auto;
1856
+ /* center vertically */
1857
+ top: 50%;
1858
+ transform: translateY(-50%);
1859
+ }
1860
+ .spinner-three-bounce[data-spinner] > div {
1861
+ width: 18px;
1862
+ height: 18px;
1863
+ background-color: #FFF;
1864
+ border-radius: 100%;
1865
+ display: inline-block;
1866
+ animation: bouncedelay 1.4s infinite ease-in-out;
1867
+ /* Prevent first frame from flickering when animation starts */
1868
+ animation-fill-mode: both;
1869
+ }
1870
+ .spinner-three-bounce[data-spinner] [data-bounce1] {
1871
+ animation-delay: -0.32s;
1872
+ }
1873
+ .spinner-three-bounce[data-spinner] [data-bounce2] {
1874
+ animation-delay: -0.16s;
1874
1875
  }
1875
1876
 
1876
- .mc-skip-time {
1877
+ @keyframes bouncedelay {
1878
+ 0%, 80%, 100% {
1879
+ transform: scale(0);
1880
+ }
1881
+ 40% {
1882
+ transform: scale(1);
1883
+ }
1884
+ }.player-logo[data-logo] {
1877
1885
  position: absolute;
1878
- width: 100%;
1879
- height: calc(100% - 50px);
1880
- z-index: 9998;
1881
- background-color: transparent;
1882
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1883
- }
1884
- .mc-skip-time .skip-container {
1886
+ z-index: 2;
1885
1887
  width: 100%;
1886
1888
  height: 100%;
1887
- display: flex;
1888
- justify-content: space-between;
1889
1889
  }
1890
- .mc-skip-time .skip-container .skip-item {
1891
- flex: 1 0 0px;
1892
- height: 100%;
1890
+
1891
+ .clappr-logo {
1892
+ position: absolute;
1893
1893
  }