@gcorevideo/player 2.20.19 → 2.20.20

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,226 @@
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;
174
+ }*, :focus, :visited {
175
+ outline: none !important;
176
+ }
177
+
178
+ .audio_selector[data-track-selector] {
179
+ float: right;
180
+ margin-top: 4px;
181
+ position: relative;
182
+ width: 50px;
183
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
184
+ }
185
+ .audio_selector[data-track-selector] button {
186
+ background-color: transparent;
187
+ color: #fff;
188
+ -webkit-font-smoothing: antialiased;
189
+ border: none;
190
+ font-size: 14px;
191
+ cursor: pointer;
192
+ }
193
+ .audio_selector[data-track-selector] button .audio-text {
194
+ text-overflow: ellipsis;
195
+ overflow: hidden;
196
+ white-space: nowrap;
197
+ max-width: 100px;
198
+ background-color: transparent;
199
+ -webkit-font-smoothing: antialiased;
200
+ border: none;
201
+ font-size: 14px;
202
+ cursor: pointer;
203
+ padding-top: 5px;
204
+ }
205
+ .audio_selector[data-track-selector] button:hover {
206
+ color: #c9c9c9;
207
+ }
208
+ .audio_selector[data-track-selector] button.changing {
209
+ animation: pulse 0.5s infinite alternate;
210
+ }
211
+ .audio_selector[data-track-selector] button span.audio-arrow {
212
+ width: 9px;
213
+ height: 6px;
214
+ margin-top: 11px;
215
+ margin-left: 5px;
216
+ }
217
+ .audio_selector[data-track-selector] > ul {
218
+ max-width: 114px;
219
+ list-style-type: none;
220
+ position: absolute;
221
+ bottom: 25px;
222
+ border: 1px solid black;
223
+ display: none;
224
+ background-color: #e6e6e6;
225
+ }
226
+ .audio_selector[data-track-selector] li {
227
+ font-size: 10px;
228
+ }
229
+ .audio_selector[data-track-selector] li[data-title] {
230
+ background-color: #c3c2c2;
231
+ padding: 5px;
232
+ }
233
+ .audio_selector[data-track-selector] li a {
234
+ color: #444;
235
+ padding: 2px 10px;
236
+ display: block;
237
+ text-decoration: none;
238
+ text-overflow: ellipsis;
239
+ overflow: hidden;
240
+ white-space: nowrap;
241
+ }
242
+ .audio_selector[data-track-selector] li a:hover {
243
+ background-color: #555;
244
+ color: white;
245
+ }
246
+ .audio_selector[data-track-selector] li a:hover a {
247
+ color: white;
248
+ text-decoration: none;
249
+ }
250
+ .audio_selector[data-track-selector] li.current a {
251
+ color: #f00;
252
+ }
253
+
254
+ .audio_selector[data-track-selector] {
255
+ width: auto;
256
+ margin-top: 7px;
257
+ margin-right: 20px;
258
+ }
259
+ .audio_selector[data-track-selector] button[data-level-selector-button],
260
+ .audio_selector[data-track-selector] button[data-track-selector-button] {
261
+ display: flex;
262
+ justify-content: center;
263
+ padding: 0;
264
+ }
265
+ .audio_selector[data-track-selector] button[data-level-selector-button]:hover,
266
+ .audio_selector[data-track-selector] button[data-track-selector-button]:hover {
267
+ color: white;
268
+ }
269
+ .audio_selector[data-track-selector] ul {
270
+ background-color: rgba(74, 74, 74, 0.6);
271
+ border: none;
272
+ min-width: 60px;
273
+ transform: rotate(180deg);
274
+ border-radius: 4px;
275
+ bottom: 40px;
276
+ right: -2px;
277
+ }
278
+ .audio_selector[data-track-selector] ul li {
279
+ transform: rotate(-180deg);
280
+ font-size: 16px;
281
+ text-align: right;
282
+ height: 30px;
283
+ }
284
+ .audio_selector[data-track-selector] ul li a {
285
+ height: 30px;
286
+ padding: 5px 10px;
287
+ color: #fffffe;
288
+ }
289
+ .audio_selector[data-track-selector] ul li a:hover {
290
+ background-color: rgba(0, 0, 0, 0.4);
291
+ }
292
+ .audio_selector[data-track-selector] ul li:first-child a {
293
+ border-bottom-left-radius: 4px;
294
+ border-bottom-right-radius: 4px;
295
+ }
296
+ .audio_selector[data-track-selector] ul li:last-child a {
297
+ border-top-left-radius: 4px;
298
+ border-top-right-radius: 4px;
299
+ }
300
+
301
+ @keyframes pulse {
302
+ 0% {
303
+ color: #fff;
304
+ }
305
+ 50% {
306
+ color: #ff0101;
307
+ }
308
+ 100% {
309
+ color: #B80000;
310
+ }
311
+ }div.player-error-screen, [data-player] div.player-error-screen {
312
+ color: #CCCACA;
313
+ position: absolute;
314
+ top: 0;
315
+ height: 100%;
316
+ width: 100%;
317
+ background-color: rgba(0, 0, 0, 0.7);
318
+ z-index: 2000;
319
+ display: flex;
320
+ flex-direction: column;
321
+ justify-content: center;
322
+ }
323
+ div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
324
+ font-size: 14px;
325
+ color: #CCCACA;
326
+ margin-top: 45px;
327
+ }
328
+ div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
329
+ font-weight: bold;
330
+ line-height: 30px;
331
+ font-size: 18px;
332
+ }
333
+ div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
334
+ width: 90%;
335
+ margin: 0 auto;
336
+ }
337
+ div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
338
+ font-size: 13px;
339
+ margin-top: 15px;
340
+ }
341
+ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
342
+ cursor: pointer;
343
+ width: 30px;
344
+ margin: 15px auto 0;
125
345
  }:root {
126
346
  --primary-background-color: #000;
127
347
  --secondary-background-color: #262626;
@@ -504,209 +724,16 @@
504
724
  .mobile .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul {
505
725
  width: 25%;
506
726
  }
507
- }.context-menu {
508
- z-index: 999;
509
- position: absolute;
510
- top: 0;
511
- left: 0;
512
- text-align: center;
727
+ }.clips.bar-container[data-seekbar] {
728
+ clip-path: url("#myClip");
729
+ }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
730
+ float: right;
731
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
513
732
  }
514
- .context-menu .context-menu-list {
515
- font-family: "Proxima Nova", sans-serif;
516
- font-size: 12px;
517
- line-height: 12px;
518
- list-style-type: none;
519
- text-align: left;
520
- padding: 5px;
521
- margin-left: auto;
522
- margin-right: auto;
523
- background-color: rgba(0, 0, 0, 0.75);
524
- border: 1px solid #666;
525
- border-radius: 4px;
526
- }
527
- .context-menu .context-menu-list .context-menu-list-item {
528
- color: white;
529
- padding: 5px;
530
- cursor: pointer;
531
- }div.player-error-screen, [data-player] div.player-error-screen {
532
- color: #CCCACA;
533
- position: absolute;
534
- top: 0;
535
- height: 100%;
536
- width: 100%;
537
- background-color: rgba(0, 0, 0, 0.7);
538
- z-index: 2000;
539
- display: flex;
540
- flex-direction: column;
541
- justify-content: center;
542
- }
543
- div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
544
- font-size: 14px;
545
- color: #CCCACA;
546
- margin-top: 45px;
547
- }
548
- div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
549
- font-weight: bold;
550
- line-height: 30px;
551
- font-size: 18px;
552
- }
553
- div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
554
- width: 90%;
555
- margin: 0 auto;
556
- }
557
- div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
558
- font-size: 13px;
559
- margin-top: 15px;
560
- }
561
- div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
562
- cursor: pointer;
563
- width: 30px;
564
- margin: 15px auto 0;
565
- }*, :focus, :visited {
566
- outline: none !important;
567
- }
568
-
569
- .audio_selector[data-track-selector] {
570
- float: right;
571
- margin-top: 4px;
572
- position: relative;
573
- width: 50px;
574
- font-family: Roboto, "Open Sans", Arial, sans-serif;
575
- }
576
- .audio_selector[data-track-selector] button {
577
- background-color: transparent;
578
- color: #fff;
579
- -webkit-font-smoothing: antialiased;
580
- border: none;
581
- font-size: 14px;
582
- cursor: pointer;
583
- }
584
- .audio_selector[data-track-selector] button .audio-text {
585
- text-overflow: ellipsis;
586
- overflow: hidden;
587
- white-space: nowrap;
588
- max-width: 100px;
589
- background-color: transparent;
590
- -webkit-font-smoothing: antialiased;
591
- border: none;
592
- font-size: 14px;
593
- cursor: pointer;
594
- padding-top: 5px;
595
- }
596
- .audio_selector[data-track-selector] button:hover {
597
- color: #c9c9c9;
598
- }
599
- .audio_selector[data-track-selector] button.changing {
600
- animation: pulse 0.5s infinite alternate;
601
- }
602
- .audio_selector[data-track-selector] button span.audio-arrow {
603
- width: 9px;
604
- height: 6px;
605
- margin-top: 11px;
606
- margin-left: 5px;
607
- }
608
- .audio_selector[data-track-selector] > ul {
609
- max-width: 114px;
610
- list-style-type: none;
611
- position: absolute;
612
- bottom: 25px;
613
- border: 1px solid black;
614
- display: none;
615
- background-color: #e6e6e6;
616
- }
617
- .audio_selector[data-track-selector] li {
618
- font-size: 10px;
619
- }
620
- .audio_selector[data-track-selector] li[data-title] {
621
- background-color: #c3c2c2;
622
- padding: 5px;
623
- }
624
- .audio_selector[data-track-selector] li a {
625
- color: #444;
626
- padding: 2px 10px;
627
- display: block;
628
- text-decoration: none;
629
- text-overflow: ellipsis;
630
- overflow: hidden;
631
- white-space: nowrap;
632
- }
633
- .audio_selector[data-track-selector] li a:hover {
634
- background-color: #555;
635
- color: white;
636
- }
637
- .audio_selector[data-track-selector] li a:hover a {
638
- color: white;
639
- text-decoration: none;
640
- }
641
- .audio_selector[data-track-selector] li.current a {
642
- color: #f00;
643
- }
644
-
645
- .audio_selector[data-track-selector] {
646
- width: auto;
647
- margin-top: 7px;
648
- margin-right: 20px;
649
- }
650
- .audio_selector[data-track-selector] button[data-level-selector-button],
651
- .audio_selector[data-track-selector] button[data-track-selector-button] {
652
- display: flex;
653
- justify-content: center;
654
- padding: 0;
655
- }
656
- .audio_selector[data-track-selector] button[data-level-selector-button]:hover,
657
- .audio_selector[data-track-selector] button[data-track-selector-button]:hover {
658
- color: white;
659
- }
660
- .audio_selector[data-track-selector] ul {
661
- background-color: rgba(74, 74, 74, 0.6);
662
- border: none;
663
- min-width: 60px;
664
- transform: rotate(180deg);
665
- border-radius: 4px;
666
- bottom: 40px;
667
- right: -2px;
668
- }
669
- .audio_selector[data-track-selector] ul li {
670
- transform: rotate(-180deg);
671
- font-size: 16px;
672
- text-align: right;
673
- height: 30px;
674
- }
675
- .audio_selector[data-track-selector] ul li a {
676
- height: 30px;
677
- padding: 5px 10px;
678
- color: #fffffe;
679
- }
680
- .audio_selector[data-track-selector] ul li a:hover {
681
- background-color: rgba(0, 0, 0, 0.4);
682
- }
683
- .audio_selector[data-track-selector] ul li:first-child a {
684
- border-bottom-left-radius: 4px;
685
- border-bottom-right-radius: 4px;
686
- }
687
- .audio_selector[data-track-selector] ul li:last-child a {
688
- border-top-left-radius: 4px;
689
- border-top-right-radius: 4px;
690
- }
691
-
692
- @keyframes pulse {
693
- 0% {
694
- color: #fff;
695
- }
696
- 50% {
697
- color: #ff0101;
698
- }
699
- 100% {
700
- color: #B80000;
701
- }
702
- }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
703
- float: right;
704
- font-family: Roboto, "Open Sans", Arial, sans-serif;
705
- }
706
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear {
707
- height: 40px;
708
- width: 40px;
709
- padding-right: 20px;
733
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear {
734
+ height: 40px;
735
+ width: 40px;
736
+ padding-right: 20px;
710
737
  }
711
738
  .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear svg {
712
739
  height: 20px;
@@ -746,13 +773,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
746
773
  }
747
774
  .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option svg {
748
775
  height: 20px;
749
- }.media-control-pip button {
750
- float: right;
751
- height: 40px;
752
- margin-right: 20px;
753
- }
754
- .media-control-pip button svg {
755
- height: 20px;
756
776
  }*, :focus, :visited {
757
777
  outline: none !important;
758
778
  }
@@ -800,24 +820,233 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
800
820
  color: white;
801
821
  background-color: rgba(0, 0, 0, 0.4);
802
822
  }
803
- .gear-wrapper ul.gear-sub-menu li a:hover a {
804
- color: white;
805
- text-decoration: none;
823
+ .gear-wrapper ul.gear-sub-menu li a:hover a {
824
+ color: white;
825
+ text-decoration: none;
826
+ }
827
+ .gear-wrapper ul.gear-sub-menu li a .check-icon {
828
+ width: 30px;
829
+ height: 20px;
830
+ float: left;
831
+ display: block;
832
+ }
833
+ .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
834
+ display: none;
835
+ }
836
+ .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
837
+ display: inline;
838
+ }
839
+ .gear-wrapper svg {
840
+ height: 20px;
841
+ }*, :focus, :visited {
842
+ outline: none !important;
843
+ }
844
+
845
+ .multicamera[data-multicamera] {
846
+ float: right;
847
+ margin-top: 4px;
848
+ position: relative;
849
+ margin-right: 20px;
850
+ width: 20px;
851
+ }
852
+ .multicamera[data-multicamera] button {
853
+ background-color: transparent;
854
+ color: #fff;
855
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
856
+ -webkit-font-smoothing: antialiased;
857
+ border: none;
858
+ font-size: 14px;
859
+ padding: 0;
860
+ }
861
+ .multicamera[data-multicamera] button svg {
862
+ height: 20px;
863
+ position: relative;
864
+ margin-top: 6px;
865
+ }
866
+ .multicamera[data-multicamera] button:hover {
867
+ color: #c9c9c9;
868
+ }
869
+ .multicamera[data-multicamera] button.changing {
870
+ animation: pulse 0.5s infinite alternate;
871
+ }
872
+ .multicamera[data-multicamera] button span.quality-arrow {
873
+ width: 9px;
874
+ height: 6px;
875
+ margin-top: 11px;
876
+ margin-left: 5px;
877
+ }
878
+ .multicamera[data-multicamera] > ul {
879
+ padding: 6px 0;
880
+ right: -24px;
881
+ width: 245px;
882
+ list-style-type: none;
883
+ position: absolute;
884
+ bottom: 48px;
885
+ border-radius: 4px;
886
+ display: none;
887
+ background-color: rgba(74, 74, 74, 0.9);
888
+ }
889
+ .multicamera[data-multicamera] > ul::after {
890
+ content: "";
891
+ position: absolute;
892
+ top: 100%;
893
+ left: 85%;
894
+ margin-left: -10px;
895
+ width: 0;
896
+ height: 0;
897
+ border-top: 10px solid rgba(74, 74, 74, 0.9);
898
+ border-right: 10px solid transparent;
899
+ border-left: 10px solid transparent;
900
+ }
901
+ .multicamera[data-multicamera] li {
902
+ font-size: 10px;
903
+ cursor: pointer;
904
+ }
905
+ .multicamera[data-multicamera] li .multicamera-item {
906
+ display: flex;
907
+ padding: 10px 0;
908
+ justify-content: center;
909
+ position: relative;
910
+ }
911
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
912
+ pointer-events: none;
913
+ }
914
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
915
+ opacity: 0.5;
916
+ }
917
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
918
+ opacity: 0.5;
919
+ }
920
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
921
+ background-color: rgba(0, 0, 0, 0);
922
+ }
923
+ .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
924
+ background-color: rgba(0, 0, 0, 0.3);
925
+ }
926
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
927
+ width: 80px;
928
+ height: 60px;
929
+ }
930
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
931
+ width: 80px;
932
+ height: 60px;
933
+ }
934
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
935
+ width: 120px;
936
+ text-align: left;
937
+ margin-left: 15px;
938
+ }
939
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title, .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
940
+ width: 120px;
941
+ height: 20px;
942
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
943
+ font-size: 14px;
944
+ font-weight: normal;
945
+ font-style: normal;
946
+ font-stretch: normal;
947
+ line-height: 1.43;
948
+ letter-spacing: normal;
949
+ text-align: left;
950
+ color: #fff;
951
+ text-overflow: ellipsis;
952
+ overflow: hidden;
953
+ }
954
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
955
+ opacity: 0.6;
956
+ }
957
+ .multicamera[data-multicamera] li[data-title] {
958
+ background-color: #c3c2c2;
959
+ padding: 5px;
960
+ }
961
+ .multicamera[data-multicamera] li a {
962
+ color: #444;
963
+ padding: 2px 10px;
964
+ display: block;
965
+ text-decoration: none;
966
+ }
967
+ .multicamera[data-multicamera] li a:hover {
968
+ background-color: #555;
969
+ color: white;
970
+ }
971
+ .multicamera[data-multicamera] li a:hover a {
972
+ color: white;
973
+ text-decoration: none;
974
+ }
975
+ .multicamera[data-multicamera] li.current a {
976
+ color: #f00;
977
+ }
978
+
979
+ @keyframes pulse {
980
+ 0% {
981
+ color: #fff;
982
+ }
983
+ 50% {
984
+ color: #ff0101;
985
+ }
986
+ 100% {
987
+ color: #B80000;
988
+ }
989
+ }.context-menu {
990
+ z-index: 999;
991
+ position: absolute;
992
+ top: 0;
993
+ left: 0;
994
+ text-align: center;
995
+ }
996
+ .context-menu .context-menu-list {
997
+ font-family: "Proxima Nova", sans-serif;
998
+ font-size: 12px;
999
+ line-height: 12px;
1000
+ list-style-type: none;
1001
+ text-align: left;
1002
+ padding: 5px;
1003
+ margin-left: auto;
1004
+ margin-right: auto;
1005
+ background-color: rgba(0, 0, 0, 0.75);
1006
+ border: 1px solid #666;
1007
+ border-radius: 4px;
1008
+ }
1009
+ .context-menu .context-menu-list .context-menu-list-item {
1010
+ color: white;
1011
+ padding: 5px;
1012
+ cursor: pointer;
1013
+ }.level-disabled {
1014
+ opacity: 0.5;
1015
+ pointer-events: none;
1016
+ }.player-poster[data-poster] {
1017
+ display: flex;
1018
+ justify-content: center;
1019
+ align-items: center;
1020
+ position: absolute;
1021
+ height: 100%;
1022
+ width: 100%;
1023
+ z-index: 998;
1024
+ top: 0;
1025
+ left: 0;
1026
+ background-color: #000;
1027
+ background-size: cover;
1028
+ background-repeat: no-repeat;
1029
+ background-position: 50% 50%;
1030
+ }
1031
+ .player-poster[data-poster].clickable {
1032
+ cursor: pointer;
806
1033
  }
807
- .gear-wrapper ul.gear-sub-menu li a .check-icon {
808
- width: 30px;
809
- height: 20px;
810
- float: left;
811
- display: block;
1034
+ .player-poster[data-poster]:hover .play-wrapper[data-poster] {
1035
+ opacity: 1;
812
1036
  }
813
- .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
814
- display: none;
1037
+ .player-poster[data-poster] .play-wrapper[data-poster] {
1038
+ width: 100%;
1039
+ height: 25%;
1040
+ margin: 0 auto;
1041
+ opacity: 0.75;
1042
+ transition: opacity 0.1s ease;
815
1043
  }
816
- .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
1044
+ .player-poster[data-poster] .play-wrapper[data-poster] svg {
1045
+ height: 100%;
817
1046
  display: inline;
818
1047
  }
819
- .gear-wrapper svg {
820
- height: 20px;
1048
+ .player-poster[data-poster] .play-wrapper[data-poster] svg path {
1049
+ fill: #fff;
821
1050
  }.dvr-controls[data-dvr-controls] {
822
1051
  display: inline-block;
823
1052
  float: left;
@@ -921,55 +1150,109 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
921
1150
 
922
1151
  .media-control.live[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
923
1152
  background-color: #ff0101;
924
- }.big-mute-icon-wrapper[data-big-mute] {
1153
+ }.seek-time[data-seek-time] {
925
1154
  position: absolute;
926
- z-index: 9998;
927
- background-color: transparent;
928
- display: flex;
929
- justify-content: center;
930
- width: 100%;
931
- height: calc(100% - 50px);
932
- margin: 0 auto;
933
- opacity: 0.75;
1155
+ white-space: nowrap;
1156
+ height: 20px;
1157
+ line-height: 20px;
1158
+ font-size: 0;
1159
+ left: -100%;
1160
+ bottom: 55px;
1161
+ background-color: rgba(2, 2, 2, 0.5);
1162
+ z-index: 9999;
934
1163
  transition: opacity 0.1s ease;
935
- pointer-events: auto;
936
1164
  }
937
- .big-mute-icon-wrapper[data-big-mute].hide {
938
- display: none;
1165
+ .seek-time[data-seek-time].hidden[data-seek-time] {
1166
+ opacity: 0;
939
1167
  }
940
- .big-mute-icon-wrapper[data-big-mute]:hover {
941
- cursor: pointer;
1168
+ .seek-time[data-seek-time] [data-seek-time] {
1169
+ display: inline-block;
1170
+ color: white;
1171
+ font-size: 10px;
1172
+ padding-left: 7px;
1173
+ padding-right: 7px;
1174
+ vertical-align: top;
942
1175
  }
943
-
944
- .big-mute-icon[data-big-mute-icon] {
1176
+ .seek-time[data-seek-time] [data-duration] {
1177
+ display: inline-block;
1178
+ color: rgba(255, 255, 255, 0.5);
1179
+ font-size: 10px;
1180
+ padding-right: 7px;
1181
+ vertical-align: top;
1182
+ }
1183
+ .seek-time[data-seek-time] [data-duration]::before {
1184
+ content: "|";
1185
+ margin-right: 7px;
1186
+ }.media-control-skin-1[data-media-control-skin-1] .media-control-quality,
1187
+ .media-control-skin-1[data-media-control-skin-1] .media-control-audio-tracks {
1188
+ display: block;
1189
+ }
1190
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] {
1191
+ width: 40px;
1192
+ margin-top: 0;
1193
+ }
1194
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button] {
945
1195
  display: flex;
946
- align-items: center;
947
1196
  justify-content: center;
948
- align-self: center;
949
- width: 120px;
950
- height: 120px;
951
- border: 2px solid white;
952
- border-radius: 50%;
953
- filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
954
- filter: alpha(opacity=60);
955
- opacity: 1;
956
- box-shadow: 0 0 1px 0 white;
957
- background: rgba(240, 243, 247, 0.9411764706);
958
- z-index: 10000;
1197
+ padding: 0;
1198
+ align-items: center;
959
1199
  }
960
- .big-mute-icon[data-big-mute-icon] svg {
961
- margin-left: 5px;
962
- width: 80px;
963
- height: 80px;
1200
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button]:hover {
1201
+ color: white;
964
1202
  }
965
- .big-mute-icon[data-big-mute-icon] svg path {
966
- fill: #1f1e1e !important;
1203
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul {
1204
+ background-color: rgba(74, 74, 74, 0.6);
1205
+ border: none;
1206
+ width: auto;
1207
+ transform: rotate(180deg);
1208
+ border-radius: 4px;
1209
+ bottom: 52px;
1210
+ margin-left: -28px;
967
1211
  }
968
- .big-mute-icon[data-big-mute-icon]:hover {
969
- background: rgba(240, 243, 247, 0.8784313725);
1212
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li {
1213
+ transform: rotate(-180deg);
1214
+ font-size: 16px;
1215
+ text-align: center;
1216
+ white-space: nowrap;
1217
+ height: 30px;
970
1218
  }
971
- .big-mute-icon[data-big-mute-icon]:hover svg path {
972
- fill: #151515 !important;
1219
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a {
1220
+ height: 30px;
1221
+ padding: 5px 10px;
1222
+ color: #fffffe;
1223
+ }
1224
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a:hover {
1225
+ background-color: rgba(0, 0, 0, 0.4);
1226
+ }
1227
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li.current a {
1228
+ background-color: rgba(0, 0, 0, 0.4);
1229
+ }
1230
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:first-child a {
1231
+ border-bottom-left-radius: 4px;
1232
+ border-bottom-right-radius: 4px;
1233
+ }
1234
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:last-child a {
1235
+ border-top-left-radius: 4px;
1236
+ border-top-right-radius: 4px;
1237
+ }
1238
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] {
1239
+ height: 26px;
1240
+ line-height: 26px;
1241
+ bottom: 52px;
1242
+ border-radius: 3px;
1243
+ background-color: rgba(74, 74, 74, 0.7);
1244
+ }
1245
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span {
1246
+ letter-spacing: 0.8px;
1247
+ font-size: 14px;
1248
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1249
+ }
1250
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-seek-time] {
1251
+ padding-left: 8px;
1252
+ padding-right: 8px;
1253
+ }
1254
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-duration] {
1255
+ display: none !important;
973
1256
  }[data-player] {
974
1257
  --bottom-panel: 40px;
975
1258
  }
@@ -1575,81 +1858,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1575
1858
  }
1576
1859
  .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 {
1577
1860
  transform: scaleY(1.5);
1578
- }.media-control-skin-1[data-media-control-skin-1] .media-control-quality,
1579
- .media-control-skin-1[data-media-control-skin-1] .media-control-audio-tracks {
1580
- display: block;
1581
- }
1582
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] {
1583
- width: 40px;
1584
- margin-top: 0;
1585
- }
1586
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button] {
1587
- display: flex;
1588
- justify-content: center;
1589
- padding: 0;
1590
- align-items: center;
1591
- }
1592
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button]:hover {
1593
- color: white;
1594
- }
1595
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul {
1596
- background-color: rgba(74, 74, 74, 0.6);
1597
- border: none;
1598
- width: auto;
1599
- transform: rotate(180deg);
1600
- border-radius: 4px;
1601
- bottom: 52px;
1602
- margin-left: -28px;
1603
- }
1604
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li {
1605
- transform: rotate(-180deg);
1606
- font-size: 16px;
1607
- text-align: center;
1608
- white-space: nowrap;
1609
- height: 30px;
1610
- }
1611
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a {
1612
- height: 30px;
1613
- padding: 5px 10px;
1614
- color: #fffffe;
1615
- }
1616
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a:hover {
1617
- background-color: rgba(0, 0, 0, 0.4);
1618
- }
1619
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li.current a {
1620
- background-color: rgba(0, 0, 0, 0.4);
1621
- }
1622
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:first-child a {
1623
- border-bottom-left-radius: 4px;
1624
- border-bottom-right-radius: 4px;
1625
- }
1626
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:last-child a {
1627
- border-top-left-radius: 4px;
1628
- border-top-right-radius: 4px;
1629
- }
1630
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] {
1631
- height: 26px;
1632
- line-height: 26px;
1633
- bottom: 52px;
1634
- border-radius: 3px;
1635
- background-color: rgba(74, 74, 74, 0.7);
1636
- }
1637
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span {
1638
- letter-spacing: 0.8px;
1639
- font-size: 14px;
1640
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1641
- }
1642
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-seek-time] {
1643
- padding-left: 8px;
1644
- padding-right: 8px;
1645
- }
1646
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-duration] {
1647
- display: none !important;
1648
- }.clips.bar-container[data-seekbar] {
1649
- clip-path: url("#myClip");
1650
- }.level-disabled {
1651
- opacity: 0.5;
1652
- pointer-events: none;
1653
1861
  }.share_plugin[data-share] {
1654
1862
  pointer-events: auto;
1655
1863
  z-index: 5;
@@ -1733,39 +1941,34 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1733
1941
  display: inline-block;
1734
1942
  margin-right: 5px;
1735
1943
  cursor: pointer;
1736
- }.seek-time[data-seek-time] {
1737
- position: absolute;
1738
- white-space: nowrap;
1739
- height: 20px;
1740
- line-height: 20px;
1741
- font-size: 0;
1742
- left: -100%;
1743
- bottom: 55px;
1744
- background-color: rgba(2, 2, 2, 0.5);
1745
- z-index: 9999;
1746
- transition: opacity 0.1s ease;
1944
+ }.media-control-pip button {
1945
+ float: right;
1946
+ height: 40px;
1947
+ margin-right: 20px;
1747
1948
  }
1748
- .seek-time[data-seek-time].hidden[data-seek-time] {
1749
- opacity: 0;
1949
+ .media-control-pip button svg {
1950
+ height: 20px;
1951
+ }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
1952
+ height: 0;
1750
1953
  }
1751
- .seek-time[data-seek-time] [data-seek-time] {
1752
- display: inline-block;
1753
- color: white;
1754
- font-size: 10px;
1755
- padding-left: 7px;
1756
- padding-right: 7px;
1757
- vertical-align: top;
1954
+
1955
+ .skip_time_plugin[data-skip-time] {
1956
+ position: absolute;
1957
+ width: 100%;
1958
+ height: calc(100% - 50px);
1959
+ z-index: 9998;
1960
+ background-color: transparent;
1961
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1758
1962
  }
1759
- .seek-time[data-seek-time] [data-duration] {
1760
- display: inline-block;
1761
- color: rgba(255, 255, 255, 0.5);
1762
- font-size: 10px;
1763
- padding-right: 7px;
1764
- vertical-align: top;
1963
+ .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] {
1964
+ width: 100%;
1965
+ height: 100%;
1966
+ display: flex;
1967
+ justify-content: space-between;
1765
1968
  }
1766
- .seek-time[data-seek-time] [data-duration]::before {
1767
- content: "|";
1768
- margin-right: 7px;
1969
+ .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] .skip-item {
1970
+ width: 33.3%;
1971
+ height: 100%;
1769
1972
  }.spinner-three-bounce[data-spinner] {
1770
1973
  position: absolute;
1771
1974
  width: 70px;
@@ -1885,218 +2088,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1885
2088
  .ios-fullscreen::cue {
1886
2089
  visibility: visible !important;
1887
2090
  font-size: 1em !important;
1888
- }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
1889
- height: 0;
1890
- }
1891
-
1892
- .skip_time_plugin[data-skip-time] {
1893
- position: absolute;
1894
- width: 100%;
1895
- height: calc(100% - 50px);
1896
- z-index: 9998;
1897
- background-color: transparent;
1898
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1899
- }
1900
- .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] {
1901
- width: 100%;
1902
- height: 100%;
1903
- display: flex;
1904
- justify-content: space-between;
1905
- }
1906
- .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] .skip-item {
1907
- width: 33.3%;
1908
- height: 100%;
1909
- }*, :focus, :visited {
1910
- outline: none !important;
1911
- }
1912
-
1913
- .multicamera[data-multicamera] {
1914
- float: right;
1915
- margin-top: 4px;
1916
- position: relative;
1917
- margin-right: 20px;
1918
- width: 20px;
1919
- }
1920
- .multicamera[data-multicamera] button {
1921
- background-color: transparent;
1922
- color: #fff;
1923
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1924
- -webkit-font-smoothing: antialiased;
1925
- border: none;
1926
- font-size: 14px;
1927
- padding: 0;
1928
- }
1929
- .multicamera[data-multicamera] button svg {
1930
- height: 20px;
1931
- position: relative;
1932
- margin-top: 6px;
1933
- }
1934
- .multicamera[data-multicamera] button:hover {
1935
- color: #c9c9c9;
1936
- }
1937
- .multicamera[data-multicamera] button.changing {
1938
- animation: pulse 0.5s infinite alternate;
1939
- }
1940
- .multicamera[data-multicamera] button span.quality-arrow {
1941
- width: 9px;
1942
- height: 6px;
1943
- margin-top: 11px;
1944
- margin-left: 5px;
1945
- }
1946
- .multicamera[data-multicamera] > ul {
1947
- padding: 6px 0;
1948
- right: -24px;
1949
- width: 245px;
1950
- list-style-type: none;
1951
- position: absolute;
1952
- bottom: 48px;
1953
- border-radius: 4px;
1954
- display: none;
1955
- background-color: rgba(74, 74, 74, 0.9);
1956
- }
1957
- .multicamera[data-multicamera] > ul::after {
1958
- content: "";
1959
- position: absolute;
1960
- top: 100%;
1961
- left: 85%;
1962
- margin-left: -10px;
1963
- width: 0;
1964
- height: 0;
1965
- border-top: 10px solid rgba(74, 74, 74, 0.9);
1966
- border-right: 10px solid transparent;
1967
- border-left: 10px solid transparent;
1968
- }
1969
- .multicamera[data-multicamera] li {
1970
- font-size: 10px;
1971
- cursor: pointer;
1972
- }
1973
- .multicamera[data-multicamera] li .multicamera-item {
1974
- display: flex;
1975
- padding: 10px 0;
1976
- justify-content: center;
1977
- position: relative;
1978
- }
1979
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
1980
- pointer-events: none;
1981
- }
1982
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
1983
- opacity: 0.5;
1984
- }
1985
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
1986
- opacity: 0.5;
1987
- }
1988
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
1989
- background-color: rgba(0, 0, 0, 0);
1990
- }
1991
- .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
1992
- background-color: rgba(0, 0, 0, 0.3);
1993
- }
1994
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
1995
- width: 80px;
1996
- height: 60px;
1997
- }
1998
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
1999
- width: 80px;
2000
- height: 60px;
2001
- }
2002
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
2003
- width: 120px;
2004
- text-align: left;
2005
- margin-left: 15px;
2006
- }
2007
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title, .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
2008
- width: 120px;
2009
- height: 20px;
2010
- font-family: Roboto, "Open Sans", Arial, sans-serif;
2011
- font-size: 14px;
2012
- font-weight: normal;
2013
- font-style: normal;
2014
- font-stretch: normal;
2015
- line-height: 1.43;
2016
- letter-spacing: normal;
2017
- text-align: left;
2018
- color: #fff;
2019
- text-overflow: ellipsis;
2020
- overflow: hidden;
2021
- }
2022
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
2023
- opacity: 0.6;
2024
- }
2025
- .multicamera[data-multicamera] li[data-title] {
2026
- background-color: #c3c2c2;
2027
- padding: 5px;
2028
- }
2029
- .multicamera[data-multicamera] li a {
2030
- color: #444;
2031
- padding: 2px 10px;
2032
- display: block;
2033
- text-decoration: none;
2034
- }
2035
- .multicamera[data-multicamera] li a:hover {
2036
- background-color: #555;
2037
- color: white;
2038
- }
2039
- .multicamera[data-multicamera] li a:hover a {
2040
- color: white;
2041
- text-decoration: none;
2042
- }
2043
- .multicamera[data-multicamera] li.current a {
2044
- color: #f00;
2045
- }
2046
-
2047
- @keyframes pulse {
2048
- 0% {
2049
- color: #fff;
2050
- }
2051
- 50% {
2052
- color: #ff0101;
2053
- }
2054
- 100% {
2055
- color: #B80000;
2056
- }
2057
- }.player-poster[data-poster] {
2058
- display: flex;
2059
- justify-content: center;
2060
- align-items: center;
2061
- position: absolute;
2062
- height: 100%;
2063
- width: 100%;
2064
- z-index: 998;
2065
- top: 0;
2066
- left: 0;
2067
- background-color: #000;
2068
- background-size: cover;
2069
- background-repeat: no-repeat;
2070
- background-position: 50% 50%;
2071
- }
2072
- .player-poster[data-poster].clickable {
2073
- cursor: pointer;
2074
- }
2075
- .player-poster[data-poster]:hover .play-wrapper[data-poster] {
2076
- opacity: 1;
2077
- }
2078
- .player-poster[data-poster] .play-wrapper[data-poster] {
2079
- width: 100%;
2080
- height: 25%;
2081
- margin: 0 auto;
2082
- opacity: 0.75;
2083
- transition: opacity 0.1s ease;
2084
- }
2085
- .player-poster[data-poster] .play-wrapper[data-poster] svg {
2086
- height: 100%;
2087
- display: inline;
2088
- }
2089
- .player-poster[data-poster] .play-wrapper[data-poster] svg path {
2090
- fill: #fff;
2091
- }.player-logo[data-logo] {
2092
- position: absolute;
2093
- z-index: 2;
2094
- width: 100%;
2095
- height: 100%;
2096
- }
2097
-
2098
- .clappr-logo {
2099
- position: absolute;
2100
2091
  }.scrub-thumbnails {
2101
2092
  position: absolute;
2102
2093
  bottom: 52px;
@@ -2158,4 +2149,13 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
2158
2149
  }
2159
2150
  .scrub-thumbnails .backdrop .carousel img {
2160
2151
  width: auto;
2152
+ }.player-logo[data-logo] {
2153
+ position: absolute;
2154
+ z-index: 2;
2155
+ width: 100%;
2156
+ height: 100%;
2157
+ }
2158
+
2159
+ .clappr-logo {
2160
+ position: absolute;
2161
2161
  }