@gcorevideo/player 2.28.10 → 2.28.12

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,6 +122,55 @@
122
122
  .gplayer-lite-btn::-moz-focus-inner {
123
123
  border: 0;
124
124
  padding: 0;
125
+ }.big-mute-icon-wrapper[data-big-mute] {
126
+ position: absolute;
127
+ z-index: 9998;
128
+ background-color: transparent;
129
+ display: flex;
130
+ justify-content: center;
131
+ 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] {
146
+ display: flex;
147
+ align-items: center;
148
+ 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
+ }
161
+ .big-mute-icon[data-big-mute-icon] svg {
162
+ margin-left: 5px;
163
+ width: 80px;
164
+ height: 80px;
165
+ }
166
+ .big-mute-icon[data-big-mute-icon] svg path {
167
+ fill: #1f1e1e !important;
168
+ }
169
+ .big-mute-icon[data-big-mute-icon]:hover {
170
+ background: rgba(240, 243, 247, 0.8784313725);
171
+ }
172
+ .big-mute-icon[data-big-mute-icon]:hover svg path {
173
+ fill: #151515 !important;
125
174
  }.media-control-skin-1 .media-control-item.media-control-gear {
126
175
  order: 99;
127
176
  }
@@ -225,55 +274,6 @@
225
274
  }
226
275
  .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
227
276
  display: inline;
228
- }.big-mute-icon-wrapper[data-big-mute] {
229
- position: absolute;
230
- z-index: 9998;
231
- background-color: transparent;
232
- display: flex;
233
- justify-content: center;
234
- width: 100%;
235
- height: calc(100% - 50px);
236
- margin: 0 auto;
237
- opacity: 0.75;
238
- transition: opacity 0.1s ease;
239
- pointer-events: auto;
240
- }
241
- .big-mute-icon-wrapper[data-big-mute].hide {
242
- display: none;
243
- }
244
- .big-mute-icon-wrapper[data-big-mute]:hover {
245
- cursor: pointer;
246
- }
247
-
248
- .big-mute-icon[data-big-mute-icon] {
249
- display: flex;
250
- align-items: center;
251
- justify-content: center;
252
- align-self: center;
253
- width: 120px;
254
- height: 120px;
255
- border: 2px solid white;
256
- border-radius: 50%;
257
- filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
258
- filter: alpha(opacity=60);
259
- opacity: 1;
260
- box-shadow: 0 0 1px 0 white;
261
- background: rgba(240, 243, 247, 0.9411764706);
262
- z-index: 10000;
263
- }
264
- .big-mute-icon[data-big-mute-icon] svg {
265
- margin-left: 5px;
266
- width: 80px;
267
- height: 80px;
268
- }
269
- .big-mute-icon[data-big-mute-icon] svg path {
270
- fill: #1f1e1e !important;
271
- }
272
- .big-mute-icon[data-big-mute-icon]:hover {
273
- background: rgba(240, 243, 247, 0.8784313725);
274
- }
275
- .big-mute-icon[data-big-mute-icon]:hover svg path {
276
- fill: #151515 !important;
277
277
  }:root {
278
278
  --primary-background-color: #000;
279
279
  --secondary-background-color: #262626;
@@ -661,40 +661,6 @@
661
661
  }
662
662
  .gplayer-mc-clips .gplayer-mc-clips-text.compact {
663
663
  max-width: 100px;
664
- }div.player-error-screen, [data-player] div.player-error-screen {
665
- color: #CCCACA;
666
- position: absolute;
667
- top: 0;
668
- height: 100%;
669
- width: 100%;
670
- background-color: rgba(0, 0, 0, 0.7);
671
- z-index: 2000;
672
- display: flex;
673
- flex-direction: column;
674
- justify-content: center;
675
- }
676
- div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
677
- font-size: 14px;
678
- color: #CCCACA;
679
- margin-top: 45px;
680
- }
681
- div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
682
- font-weight: bold;
683
- line-height: 30px;
684
- font-size: 18px;
685
- }
686
- div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
687
- width: 90%;
688
- margin: 0 auto;
689
- }
690
- div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
691
- font-size: 13px;
692
- margin-top: 15px;
693
- }
694
- div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
695
- cursor: pointer;
696
- width: 30px;
697
- margin: 15px auto 0;
698
664
  }.context-menu {
699
665
  z-index: 999;
700
666
  position: absolute;
@@ -788,215 +754,80 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
788
754
  .dvr-controls .live-button:hover {
789
755
  opacity: 1;
790
756
  text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
791
- }.player-poster {
792
- display: flex;
793
- justify-content: center;
794
- align-items: center;
757
+ }div.player-error-screen, [data-player] div.player-error-screen {
758
+ color: #CCCACA;
795
759
  position: absolute;
760
+ top: 0;
796
761
  height: 100%;
797
762
  width: 100%;
798
- z-index: 998;
799
- top: 0;
800
- left: 0;
801
- background-color: #000;
802
- background-size: cover;
803
- background-repeat: no-repeat;
804
- background-position: 50% 50%;
763
+ background-color: rgba(0, 0, 0, 0.7);
764
+ z-index: 2000;
765
+ display: flex;
766
+ flex-direction: column;
767
+ justify-content: center;
805
768
  }
806
- .player-poster.clickable {
807
- cursor: pointer;
769
+ div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
770
+ font-size: 14px;
771
+ color: #CCCACA;
772
+ margin-top: 45px;
808
773
  }
809
- .player-poster:hover .play-wrapper {
810
- opacity: 1;
774
+ div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
775
+ font-weight: bold;
776
+ line-height: 30px;
777
+ font-size: 18px;
811
778
  }
812
- .player-poster .play-wrapper {
813
- width: 100%;
814
- height: 25%;
779
+ div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
780
+ width: 90%;
815
781
  margin: 0 auto;
816
- opacity: 0.75;
817
- transition: opacity 0.1s ease;
818
782
  }
819
- .player-poster .play-wrapper svg {
820
- height: 100%;
821
- display: inline;
783
+ div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
784
+ font-size: 13px;
785
+ margin-top: 15px;
822
786
  }
823
- .player-poster .play-wrapper svg path {
824
- fill: #fff;
825
- }*,
826
- :focus,
827
- :visited {
828
- outline: none !important;
787
+ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
788
+ cursor: pointer;
789
+ width: 30px;
790
+ margin: 15px auto 0;
791
+ }[data-player] {
792
+ --bottom-panel: 40px;
829
793
  }
830
794
 
831
- .multicamera[data-multicamera] {
832
- float: right;
833
- margin-top: 4px;
834
- position: relative;
835
- margin-right: 20px;
836
- width: 20px;
837
- }
838
- .multicamera[data-multicamera] button {
839
- background-color: transparent;
840
- color: #fff;
841
- font-family: Roboto, "Open Sans", Arial, sans-serif;
842
- -webkit-font-smoothing: antialiased;
843
- border: none;
844
- font-size: 14px;
845
- padding: 0;
795
+ .container .media-control-notransition {
796
+ transition: none !important;
846
797
  }
847
- .multicamera[data-multicamera] button svg {
848
- height: 20px;
849
- position: relative;
850
- margin-top: 6px;
798
+ .container .player-poster .play-wrapper {
799
+ opacity: 1;
851
800
  }
852
- .multicamera[data-multicamera] button:hover {
853
- color: #c9c9c9;
801
+ .container.crop-video [data-html5-video] {
802
+ object-fit: cover;
854
803
  }
855
- .multicamera[data-multicamera] button.changing {
856
- animation: pulse 0.5s infinite alternate;
804
+ .container .player-poster .circle-poster {
805
+ top: 50%;
806
+ margin-top: -60px;
807
+ left: 50%;
808
+ margin-left: -60px;
809
+ position: absolute;
810
+ width: 120px;
811
+ height: 120px;
812
+ border: 2px solid white;
813
+ border-radius: 50%;
814
+ filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
815
+ filter: alpha(opacity=60);
816
+ opacity: 1;
817
+ box-shadow: 0 0 1px 0 white;
857
818
  }
858
- .multicamera[data-multicamera] button span.quality-arrow {
859
- width: 9px;
860
- height: 6px;
861
- margin-top: 11px;
819
+ .container .player-poster .circle-poster svg {
862
820
  margin-left: 5px;
821
+ width: 80px;
863
822
  }
864
- .multicamera[data-multicamera] > ul {
865
- padding: 6px 0;
866
- right: -24px;
867
- width: 245px;
868
- list-style-type: none;
869
- position: absolute;
870
- bottom: 48px;
871
- border-radius: 4px;
872
- display: none;
873
- background-color: rgba(74, 74, 74, 0.9);
823
+ .container .spinner-three-bounce[data-spinner] > div {
824
+ background-color: #ff5700;
874
825
  }
875
- .multicamera[data-multicamera] > ul::after {
876
- content: "";
877
- position: absolute;
878
- top: 100%;
879
- left: 85%;
880
- margin-left: -10px;
881
- width: 0;
882
- height: 0;
883
- border-top: 10px solid rgba(74, 74, 74, 0.9);
884
- border-right: 10px solid transparent;
885
- border-left: 10px solid transparent;
886
- }
887
- .multicamera[data-multicamera] li {
888
- font-size: 10px;
889
- cursor: pointer;
890
- }
891
- .multicamera[data-multicamera] li .multicamera-item {
892
- display: flex;
893
- padding: 10px 0;
894
- justify-content: center;
895
- position: relative;
896
- }
897
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
898
- pointer-events: none;
899
- }
900
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
901
- opacity: 0.5;
902
- }
903
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
904
- opacity: 0.5;
905
- }
906
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
907
- background-color: rgba(0, 0, 0, 0);
908
- }
909
- .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
910
- background-color: rgba(0, 0, 0, 0.3);
911
- }
912
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
913
- width: 80px;
914
- height: 60px;
915
- }
916
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
917
- width: 80px;
918
- height: 60px;
919
- }
920
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
921
- width: 120px;
922
- text-align: left;
923
- margin-left: 15px;
924
- }
925
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title,
926
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
927
- width: 120px;
928
- height: 20px;
929
- font-family: Roboto, "Open Sans", Arial, sans-serif;
930
- font-size: 14px;
931
- font-weight: normal;
932
- font-style: normal;
933
- font-stretch: normal;
934
- line-height: 1.43;
935
- letter-spacing: normal;
936
- text-align: left;
937
- color: #fff;
938
- text-overflow: ellipsis;
939
- overflow: hidden;
940
- }
941
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
942
- opacity: 0.6;
943
- }
944
- .multicamera[data-multicamera] li a {
945
- color: #444;
946
- padding: 2px 10px;
947
- display: block;
948
- text-decoration: none;
949
- }
950
- .multicamera[data-multicamera] li a:hover {
951
- background-color: #555;
952
- color: white;
953
- }
954
- .multicamera[data-multicamera] li a:hover a {
955
- color: white;
956
- text-decoration: none;
957
- }
958
- .multicamera[data-multicamera] li.current a {
959
- color: #f00;
960
- }[data-player] {
961
- --bottom-panel: 40px;
962
- }
963
-
964
- .container .media-control-notransition {
965
- transition: none !important;
966
- }
967
- .container .player-poster .play-wrapper {
968
- opacity: 1;
969
- }
970
- .container.crop-video [data-html5-video] {
971
- object-fit: cover;
972
- }
973
- .container .player-poster .circle-poster {
974
- top: 50%;
975
- margin-top: -60px;
976
- left: 50%;
977
- margin-left: -60px;
978
- position: absolute;
979
- width: 120px;
980
- height: 120px;
981
- border: 2px solid white;
982
- border-radius: 50%;
983
- filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
984
- filter: alpha(opacity=60);
985
- opacity: 1;
986
- box-shadow: 0 0 1px 0 white;
987
- }
988
- .container .player-poster .circle-poster svg {
989
- margin-left: 5px;
990
- width: 80px;
991
- }
992
- .container .spinner-three-bounce[data-spinner] > div {
993
- background-color: #ff5700;
994
- }
995
-
996
- .media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
997
- transform: rotate(270deg);
998
- float: none;
999
- display: block;
826
+
827
+ .media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
828
+ transform: rotate(270deg);
829
+ float: none;
830
+ display: block;
1000
831
  position: absolute;
1001
832
  margin: 0;
1002
833
  top: -40px;
@@ -1578,20 +1409,189 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1578
1409
  100% {
1579
1410
  color: #B80000;
1580
1411
  }
1581
- }.media-control-skin-1 .media-control-item.media-control-pip {
1582
- order: 95;
1412
+ }*,
1413
+ :focus,
1414
+ :visited {
1415
+ outline: none !important;
1583
1416
  }
1584
- .media-control-skin-1 .media-control-item.media-control-pip button {
1417
+
1418
+ .multicamera[data-multicamera] {
1419
+ float: right;
1420
+ margin-top: 4px;
1421
+ position: relative;
1422
+ margin-right: 20px;
1423
+ width: 20px;
1424
+ }
1425
+ .multicamera[data-multicamera] button {
1426
+ background-color: transparent;
1427
+ color: #fff;
1428
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1429
+ -webkit-font-smoothing: antialiased;
1430
+ border: none;
1431
+ font-size: 14px;
1432
+ padding: 0;
1433
+ }
1434
+ .multicamera[data-multicamera] button svg {
1585
1435
  height: 20px;
1436
+ position: relative;
1437
+ margin-top: 6px;
1586
1438
  }
1587
- .media-control-skin-1 .media-control-item.media-control-pip button svg {
1439
+ .multicamera[data-multicamera] button:hover {
1440
+ color: #c9c9c9;
1441
+ }
1442
+ .multicamera[data-multicamera] button.changing {
1443
+ animation: pulse 0.5s infinite alternate;
1444
+ }
1445
+ .multicamera[data-multicamera] button span.quality-arrow {
1446
+ width: 9px;
1447
+ height: 6px;
1448
+ margin-top: 11px;
1449
+ margin-left: 5px;
1450
+ }
1451
+ .multicamera[data-multicamera] > ul {
1452
+ padding: 6px 0;
1453
+ right: -24px;
1454
+ width: 245px;
1455
+ list-style-type: none;
1456
+ position: absolute;
1457
+ bottom: 48px;
1458
+ border-radius: 4px;
1459
+ display: none;
1460
+ background-color: rgba(74, 74, 74, 0.9);
1461
+ }
1462
+ .multicamera[data-multicamera] > ul::after {
1463
+ content: "";
1464
+ position: absolute;
1465
+ top: 100%;
1466
+ left: 85%;
1467
+ margin-left: -10px;
1468
+ width: 0;
1469
+ height: 0;
1470
+ border-top: 10px solid rgba(74, 74, 74, 0.9);
1471
+ border-right: 10px solid transparent;
1472
+ border-left: 10px solid transparent;
1473
+ }
1474
+ .multicamera[data-multicamera] li {
1475
+ font-size: 10px;
1476
+ cursor: pointer;
1477
+ }
1478
+ .multicamera[data-multicamera] li .multicamera-item {
1479
+ display: flex;
1480
+ padding: 10px 0;
1481
+ justify-content: center;
1482
+ position: relative;
1483
+ }
1484
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
1485
+ pointer-events: none;
1486
+ }
1487
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
1488
+ opacity: 0.5;
1489
+ }
1490
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
1491
+ opacity: 0.5;
1492
+ }
1493
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
1494
+ background-color: rgba(0, 0, 0, 0);
1495
+ }
1496
+ .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
1497
+ background-color: rgba(0, 0, 0, 0.3);
1498
+ }
1499
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
1500
+ width: 80px;
1501
+ height: 60px;
1502
+ }
1503
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
1504
+ width: 80px;
1505
+ height: 60px;
1506
+ }
1507
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
1508
+ width: 120px;
1509
+ text-align: left;
1510
+ margin-left: 15px;
1511
+ }
1512
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title,
1513
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1514
+ width: 120px;
1588
1515
  height: 20px;
1516
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1517
+ font-size: 14px;
1518
+ font-weight: normal;
1519
+ font-style: normal;
1520
+ font-stretch: normal;
1521
+ line-height: 1.43;
1522
+ letter-spacing: normal;
1523
+ text-align: left;
1524
+ color: #fff;
1525
+ text-overflow: ellipsis;
1526
+ overflow: hidden;
1527
+ }
1528
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1529
+ opacity: 0.6;
1530
+ }
1531
+ .multicamera[data-multicamera] li a {
1532
+ color: #444;
1533
+ padding: 2px 10px;
1534
+ display: block;
1535
+ text-decoration: none;
1536
+ }
1537
+ .multicamera[data-multicamera] li a:hover {
1538
+ background-color: #555;
1539
+ color: white;
1540
+ }
1541
+ .multicamera[data-multicamera] li a:hover a {
1542
+ color: white;
1543
+ text-decoration: none;
1544
+ }
1545
+ .multicamera[data-multicamera] li.current a {
1546
+ color: #f00;
1589
1547
  }.quality-levels li.disabled {
1590
1548
  opacity: 0.5;
1591
1549
  pointer-events: none;
1592
1550
  }
1593
1551
  .quality-levels li.current {
1594
1552
  background-color: #000;
1553
+ }.player-poster {
1554
+ display: flex;
1555
+ justify-content: center;
1556
+ align-items: center;
1557
+ position: absolute;
1558
+ height: 100%;
1559
+ width: 100%;
1560
+ z-index: 998;
1561
+ top: 0;
1562
+ left: 0;
1563
+ background-color: #000;
1564
+ background-size: cover;
1565
+ background-repeat: no-repeat;
1566
+ background-position: 50% 50%;
1567
+ }
1568
+ .player-poster.clickable {
1569
+ cursor: pointer;
1570
+ }
1571
+ .player-poster:hover .play-wrapper {
1572
+ opacity: 1;
1573
+ }
1574
+ .player-poster .play-wrapper {
1575
+ width: 100%;
1576
+ height: 25%;
1577
+ margin: 0 auto;
1578
+ opacity: 0.75;
1579
+ transition: opacity 0.1s ease;
1580
+ }
1581
+ .player-poster .play-wrapper svg {
1582
+ height: 100%;
1583
+ display: inline;
1584
+ }
1585
+ .player-poster .play-wrapper svg path {
1586
+ fill: #fff;
1587
+ }.media-control-skin-1 .media-control-item.media-control-pip {
1588
+ order: 95;
1589
+ }
1590
+ .media-control-skin-1 .media-control-item.media-control-pip button {
1591
+ height: 20px;
1592
+ }
1593
+ .media-control-skin-1 .media-control-item.media-control-pip button svg {
1594
+ height: 20px;
1595
1595
  }.seek-time {
1596
1596
  position: absolute;
1597
1597
  white-space: nowrap;
@@ -1646,89 +1646,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1646
1646
  .mc-skip-time .skip-container .skip-item {
1647
1647
  flex: 1 0 0px;
1648
1648
  height: 100%;
1649
- }.share_plugin[data-share] {
1650
- pointer-events: auto;
1651
- z-index: 5;
1652
- font-family: Roboto, "Open Sans", Arial, sans-serif !important;
1653
- }
1654
- .share_plugin[data-share].share-hide .share-button-container {
1655
- right: -50px;
1656
- }
1657
- .share_plugin[data-share] .share-button-container {
1658
- cursor: pointer;
1659
- width: 36px;
1660
- height: 36px;
1661
- background-color: rgba(74, 74, 74, 0.6);
1662
- border-radius: 4px;
1663
- position: absolute;
1664
- right: 10px;
1665
- top: 10px;
1666
- padding-top: 6px;
1667
- transition: all 0.3s ease-out;
1668
- }
1669
- .share_plugin[data-share] .share-button-container button[data-share-button] {
1670
- background-color: transparent;
1671
- border: 0;
1672
- margin: 0 6px;
1673
- padding: 0;
1674
- cursor: pointer;
1675
- display: inline-block;
1676
- width: 19px;
1677
- height: 20px;
1678
- }
1679
- .share_plugin[data-share] .share-container {
1680
- pointer-events: auto;
1681
- position: absolute;
1682
- width: 280px;
1683
- background-color: white;
1684
- transform: translate(0, 50%);
1685
- transform: translate(-50%, -50%);
1686
- left: 50%;
1687
- /* margin-left: -140px; */
1688
- top: calc(50% - 20px);
1689
- /* margin-top: -170px; */
1690
- }
1691
- .share_plugin[data-share] .share-container .share-container-header {
1692
- text-align: left;
1693
- border-bottom: 1px solid rgba(155, 155, 155, 0.25);
1694
- }
1695
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1696
- display: inline-block;
1697
- font-size: 16px;
1698
- margin: 5px;
1699
- }
1700
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
1701
- display: inline-block;
1702
- width: 24px;
1703
- float: right;
1704
- margin: 5px;
1705
- cursor: pointer;
1706
- }
1707
- .share_plugin[data-share] .share-container .share-container-main {
1708
- margin-bottom: 8px;
1709
- }
1710
- .share_plugin[data-share] .share-container .share-container-main > div {
1711
- text-align: left;
1712
- font-size: 14px;
1713
- padding: 5px;
1714
- }
1715
- .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 {
1716
- overflow: hidden;
1717
- text-overflow: ellipsis;
1718
- color: #818181;
1719
- border: solid 1px #d3d3d3;
1720
- width: calc(100% - 10px);
1721
- padding: 5px;
1722
- }
1723
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
1724
- max-height: 90px;
1725
- resize: none;
1726
- }
1727
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
1728
- width: 32px;
1729
- display: inline-block;
1730
- margin-right: 5px;
1731
- cursor: pointer;
1732
1649
  }.spinner-three-bounce[data-spinner] {
1733
1650
  position: absolute;
1734
1651
  width: 70px;
@@ -1814,6 +1731,89 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1814
1731
  background-color: rgba(0, 0, 0, 0.4);
1815
1732
  color: white;
1816
1733
  display: inline-block;
1734
+ }.share_plugin[data-share] {
1735
+ pointer-events: auto;
1736
+ z-index: 5;
1737
+ font-family: Roboto, "Open Sans", Arial, sans-serif !important;
1738
+ }
1739
+ .share_plugin[data-share].share-hide .share-button-container {
1740
+ right: -50px;
1741
+ }
1742
+ .share_plugin[data-share] .share-button-container {
1743
+ cursor: pointer;
1744
+ width: 36px;
1745
+ height: 36px;
1746
+ background-color: rgba(74, 74, 74, 0.6);
1747
+ border-radius: 4px;
1748
+ position: absolute;
1749
+ right: 10px;
1750
+ top: 10px;
1751
+ padding-top: 6px;
1752
+ transition: all 0.3s ease-out;
1753
+ }
1754
+ .share_plugin[data-share] .share-button-container button[data-share-button] {
1755
+ background-color: transparent;
1756
+ border: 0;
1757
+ margin: 0 6px;
1758
+ padding: 0;
1759
+ cursor: pointer;
1760
+ display: inline-block;
1761
+ width: 19px;
1762
+ height: 20px;
1763
+ }
1764
+ .share_plugin[data-share] .share-container {
1765
+ pointer-events: auto;
1766
+ position: absolute;
1767
+ width: 280px;
1768
+ background-color: white;
1769
+ transform: translate(0, 50%);
1770
+ transform: translate(-50%, -50%);
1771
+ left: 50%;
1772
+ /* margin-left: -140px; */
1773
+ top: calc(50% - 20px);
1774
+ /* margin-top: -170px; */
1775
+ }
1776
+ .share_plugin[data-share] .share-container .share-container-header {
1777
+ text-align: left;
1778
+ border-bottom: 1px solid rgba(155, 155, 155, 0.25);
1779
+ }
1780
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1781
+ display: inline-block;
1782
+ font-size: 16px;
1783
+ margin: 5px;
1784
+ }
1785
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
1786
+ display: inline-block;
1787
+ width: 24px;
1788
+ float: right;
1789
+ margin: 5px;
1790
+ cursor: pointer;
1791
+ }
1792
+ .share_plugin[data-share] .share-container .share-container-main {
1793
+ margin-bottom: 8px;
1794
+ }
1795
+ .share_plugin[data-share] .share-container .share-container-main > div {
1796
+ text-align: left;
1797
+ font-size: 14px;
1798
+ padding: 5px;
1799
+ }
1800
+ .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 {
1801
+ overflow: hidden;
1802
+ text-overflow: ellipsis;
1803
+ color: #818181;
1804
+ border: solid 1px #d3d3d3;
1805
+ width: calc(100% - 10px);
1806
+ padding: 5px;
1807
+ }
1808
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
1809
+ max-height: 90px;
1810
+ resize: none;
1811
+ }
1812
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
1813
+ width: 32px;
1814
+ display: inline-block;
1815
+ margin-right: 5px;
1816
+ cursor: pointer;
1817
1817
  }.scrub-thumbnails {
1818
1818
  position: absolute;
1819
1819
  bottom: 52px;