@gcorevideo/player 2.22.11 → 2.22.13

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,224 @@
122
122
  .gplayer-lite-btn::-moz-focus-inner {
123
123
  border: 0;
124
124
  padding: 0;
125
+ }.dvr-controls[data-dvr] {
126
+ display: inline-block;
127
+ color: var(--player-dvr-color);
128
+ line-height: 32px;
129
+ font-size: 10px;
130
+ font-weight: bold;
131
+ margin-left: 6px;
132
+ height: 40px;
133
+ line-height: 40px;
134
+ margin-left: 0;
135
+ }
136
+ .dvr-controls[data-dvr] .live-info {
137
+ cursor: default;
138
+ text-transform: uppercase;
139
+ }
140
+ .dvr-controls[data-dvr] .live-info:before {
141
+ content: "";
142
+ display: inline-block;
143
+ position: relative;
144
+ width: 7px;
145
+ height: 7px;
146
+ border-radius: 3.5px;
147
+ margin-right: 3.5px;
148
+ background-color: var(--player-live-color);
149
+ }
150
+ .dvr-controls[data-dvr] .live-info.disabled {
151
+ opacity: 0.3;
152
+ }
153
+ .dvr-controls[data-dvr] .live-info.disabled:before {
154
+ background-color: var(--player-dvr-color);
155
+ }
156
+ .dvr-controls[data-dvr] .live-button {
157
+ cursor: pointer;
158
+ outline: none;
159
+ display: none;
160
+ border: 0;
161
+ color: var(--player-dvr-color);
162
+ background-color: transparent;
163
+ height: 32px;
164
+ padding: 0;
165
+ opacity: 0.7;
166
+ text-transform: uppercase;
167
+ transition: all 0.1s ease;
168
+ }
169
+ .dvr-controls[data-dvr] .live-button:before {
170
+ content: "";
171
+ display: inline-block;
172
+ position: relative;
173
+ width: 7px;
174
+ height: 7px;
175
+ border-radius: 3.5px;
176
+ margin-right: 3.5px;
177
+ background-color: var(--player-dvr-color);
178
+ }
179
+ .dvr-controls[data-dvr] .live-button:hover {
180
+ opacity: 1;
181
+ text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
182
+ }
183
+ .dvr-controls[data-dvr] .live-info {
184
+ font-size: 14px;
185
+ letter-spacing: 0.8px;
186
+ font-weight: 500;
187
+ color: #fffffe;
188
+ margin-left: 21px;
189
+ }
190
+ .dvr-controls[data-dvr] .live-info::before {
191
+ width: 10px;
192
+ height: 10px;
193
+ border-radius: 50%;
194
+ margin-right: 8px;
195
+ background-color: #ed4f4a;
196
+ }
197
+ .dvr-controls[data-dvr] .live-button {
198
+ height: 40px;
199
+ opacity: 1;
200
+ font-size: 14px;
201
+ letter-spacing: 0.8px;
202
+ font-weight: 500;
203
+ margin-left: 20px;
204
+ }
205
+ .dvr-controls[data-dvr] .live-button::before {
206
+ width: 10px;
207
+ height: 10px;
208
+ border-radius: 50%;
209
+ margin-right: 8px;
210
+ background-color: #cacaca;
211
+ }
212
+
213
+ .dvr .dvr-controls[data-dvr] .live-info {
214
+ display: none;
215
+ }
216
+ .dvr .dvr-controls[data-dvr] .live-button {
217
+ display: block;
218
+ }.clips.bar-container[data-seekbar] {
219
+ clip-path: url("#myClip");
220
+ }.context-menu {
221
+ z-index: 999;
222
+ position: absolute;
223
+ top: 0;
224
+ left: 0;
225
+ text-align: center;
226
+ }
227
+ .context-menu .context-menu-list {
228
+ font-family: "Proxima Nova", sans-serif;
229
+ font-size: 12px;
230
+ line-height: 12px;
231
+ list-style-type: none;
232
+ text-align: left;
233
+ padding: 5px;
234
+ margin-left: auto;
235
+ margin-right: auto;
236
+ background-color: rgba(0, 0, 0, 0.75);
237
+ border: 1px solid #666;
238
+ border-radius: 4px;
239
+ }
240
+ .context-menu .context-menu-list .context-menu-list-item {
241
+ color: white;
242
+ padding: 5px;
243
+ cursor: pointer;
244
+ }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
245
+ order: 99;
246
+ height: 20px;
247
+ }
248
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
249
+ position: absolute;
250
+ right: 16px;
251
+ bottom: 52px;
252
+ width: 250px;
253
+ min-height: 48px;
254
+ z-index: 9999;
255
+ border-radius: 4px;
256
+ }
257
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
258
+ padding: 8px 0;
259
+ }
260
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list svg {
261
+ float: left;
262
+ margin-right: 10px;
263
+ }
264
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
265
+ margin: 0;
266
+ text-align: left;
267
+ line-height: 22px;
268
+ padding: 5px 14px;
269
+ width: 250px;
270
+ font-size: 12px;
271
+ }
272
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_arrow-right-icon {
273
+ float: right;
274
+ margin-right: -14px;
275
+ }
276
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_value {
277
+ float: right;
278
+ margin-right: 8px;
279
+ }
280
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option svg {
281
+ height: 20px;
282
+ }*, :focus, :visited {
283
+ outline: none !important;
284
+ }
285
+
286
+ .gear-wrapper .go-back {
287
+ font-weight: 600;
288
+ font-size: 14px;
289
+ line-height: 20px;
290
+ width: 100%;
291
+ text-align: left;
292
+ padding: 12px;
293
+ }
294
+ .gear-wrapper .go-back .arrow-left-icon {
295
+ float: left;
296
+ padding-top: 2px;
297
+ padding-right: 2px;
298
+ }
299
+ .gear-wrapper .go-back .arrow-left-icon svg {
300
+ height: 16px;
301
+ }
302
+ .gear-wrapper ul.gear-sub-menu {
303
+ width: 100%;
304
+ list-style-type: none;
305
+ min-width: 60px;
306
+ border-top: 2px solid rgb(36, 36, 36);
307
+ }
308
+ .gear-wrapper ul.gear-sub-menu li {
309
+ font-size: 12px;
310
+ text-align: left;
311
+ }
312
+ .gear-wrapper ul.gear-sub-menu li[data-title] {
313
+ background-color: #c3c2c2;
314
+ padding: 5px;
315
+ }
316
+ .gear-wrapper ul.gear-sub-menu li a {
317
+ display: block;
318
+ text-decoration: none;
319
+ height: 32px;
320
+ padding: 5px 10px;
321
+ line-height: 22px;
322
+ color: #fffffe;
323
+ }
324
+ .gear-wrapper ul.gear-sub-menu li a:hover {
325
+ color: white;
326
+ background-color: rgba(0, 0, 0, 0.4);
327
+ }
328
+ .gear-wrapper ul.gear-sub-menu li a:hover a {
329
+ color: white;
330
+ text-decoration: none;
331
+ }
332
+ .gear-wrapper ul.gear-sub-menu li a .check-icon {
333
+ width: 30px;
334
+ height: 20px;
335
+ float: left;
336
+ display: block;
337
+ }
338
+ .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
339
+ display: none;
340
+ }
341
+ .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
342
+ display: inline;
125
343
  }:root {
126
344
  --primary-background-color: #000;
127
345
  --secondary-background-color: #262626;
@@ -604,406 +822,50 @@
604
822
  100% {
605
823
  color: #B80000;
606
824
  }
607
- }.clips.bar-container[data-seekbar] {
608
- clip-path: url("#myClip");
609
- }.dvr-controls[data-dvr] {
610
- display: inline-block;
611
- color: var(--player-dvr-color);
612
- line-height: 32px;
613
- font-size: 10px;
825
+ }div.player-error-screen, [data-player] div.player-error-screen {
826
+ color: #CCCACA;
827
+ position: absolute;
828
+ top: 0;
829
+ height: 100%;
830
+ width: 100%;
831
+ background-color: rgba(0, 0, 0, 0.7);
832
+ z-index: 2000;
833
+ display: flex;
834
+ flex-direction: column;
835
+ justify-content: center;
836
+ }
837
+ div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
838
+ font-size: 14px;
839
+ color: #CCCACA;
840
+ margin-top: 45px;
841
+ }
842
+ div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
614
843
  font-weight: bold;
615
- margin-left: 6px;
616
- height: 40px;
617
- line-height: 40px;
618
- margin-left: 0;
844
+ line-height: 30px;
845
+ font-size: 18px;
619
846
  }
620
- .dvr-controls[data-dvr] .live-info {
621
- cursor: default;
622
- text-transform: uppercase;
847
+ div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
848
+ width: 90%;
849
+ margin: 0 auto;
623
850
  }
624
- .dvr-controls[data-dvr] .live-info:before {
625
- content: "";
626
- display: inline-block;
627
- position: relative;
628
- width: 7px;
629
- height: 7px;
630
- border-radius: 3.5px;
631
- margin-right: 3.5px;
632
- background-color: var(--player-live-color);
633
- }
634
- .dvr-controls[data-dvr] .live-info.disabled {
635
- opacity: 0.3;
636
- }
637
- .dvr-controls[data-dvr] .live-info.disabled:before {
638
- background-color: var(--player-dvr-color);
639
- }
640
- .dvr-controls[data-dvr] .live-button {
641
- cursor: pointer;
642
- outline: none;
643
- display: none;
644
- border: 0;
645
- color: var(--player-dvr-color);
646
- background-color: transparent;
647
- height: 32px;
648
- padding: 0;
649
- opacity: 0.7;
650
- text-transform: uppercase;
651
- transition: all 0.1s ease;
652
- }
653
- .dvr-controls[data-dvr] .live-button:before {
654
- content: "";
655
- display: inline-block;
656
- position: relative;
657
- width: 7px;
658
- height: 7px;
659
- border-radius: 3.5px;
660
- margin-right: 3.5px;
661
- background-color: var(--player-dvr-color);
662
- }
663
- .dvr-controls[data-dvr] .live-button:hover {
664
- opacity: 1;
665
- text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
666
- }
667
- .dvr-controls[data-dvr] .live-info {
668
- font-size: 14px;
669
- letter-spacing: 0.8px;
670
- font-weight: 500;
671
- color: #fffffe;
672
- margin-left: 21px;
673
- }
674
- .dvr-controls[data-dvr] .live-info::before {
675
- width: 10px;
676
- height: 10px;
677
- border-radius: 50%;
678
- margin-right: 8px;
679
- background-color: #ed4f4a;
680
- }
681
- .dvr-controls[data-dvr] .live-button {
682
- height: 40px;
683
- opacity: 1;
684
- font-size: 14px;
685
- letter-spacing: 0.8px;
686
- font-weight: 500;
687
- margin-left: 20px;
688
- }
689
- .dvr-controls[data-dvr] .live-button::before {
690
- width: 10px;
691
- height: 10px;
692
- border-radius: 50%;
693
- margin-right: 8px;
694
- background-color: #cacaca;
695
- }
696
-
697
- .dvr .dvr-controls[data-dvr] .live-info {
698
- display: none;
699
- }
700
- .dvr .dvr-controls[data-dvr] .live-button {
701
- display: block;
702
- }div.player-error-screen, [data-player] div.player-error-screen {
703
- color: #CCCACA;
704
- position: absolute;
705
- top: 0;
706
- height: 100%;
707
- width: 100%;
708
- background-color: rgba(0, 0, 0, 0.7);
709
- z-index: 2000;
710
- display: flex;
711
- flex-direction: column;
712
- justify-content: center;
713
- }
714
- div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
715
- font-size: 14px;
716
- color: #CCCACA;
717
- margin-top: 45px;
718
- }
719
- div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
720
- font-weight: bold;
721
- line-height: 30px;
722
- font-size: 18px;
723
- }
724
- div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
725
- width: 90%;
726
- margin: 0 auto;
727
- }
728
- div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
729
- font-size: 13px;
730
- margin-top: 15px;
731
- }
732
- div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
733
- cursor: pointer;
734
- width: 30px;
735
- margin: 15px auto 0;
736
- }*, :focus, :visited {
737
- outline: none !important;
738
- }
739
-
740
- .multicamera[data-multicamera] {
741
- float: right;
742
- margin-top: 4px;
743
- position: relative;
744
- margin-right: 20px;
745
- width: 20px;
746
- }
747
- .multicamera[data-multicamera] button {
748
- background-color: transparent;
749
- color: #fff;
750
- font-family: Roboto, "Open Sans", Arial, sans-serif;
751
- -webkit-font-smoothing: antialiased;
752
- border: none;
753
- font-size: 14px;
754
- padding: 0;
755
- }
756
- .multicamera[data-multicamera] button svg {
757
- height: 20px;
758
- position: relative;
759
- margin-top: 6px;
760
- }
761
- .multicamera[data-multicamera] button:hover {
762
- color: #c9c9c9;
763
- }
764
- .multicamera[data-multicamera] button.changing {
765
- animation: pulse 0.5s infinite alternate;
766
- }
767
- .multicamera[data-multicamera] button span.quality-arrow {
768
- width: 9px;
769
- height: 6px;
770
- margin-top: 11px;
771
- margin-left: 5px;
772
- }
773
- .multicamera[data-multicamera] > ul {
774
- padding: 6px 0;
775
- right: -24px;
776
- width: 245px;
777
- list-style-type: none;
778
- position: absolute;
779
- bottom: 48px;
780
- border-radius: 4px;
781
- display: none;
782
- background-color: rgba(74, 74, 74, 0.9);
783
- }
784
- .multicamera[data-multicamera] > ul::after {
785
- content: "";
786
- position: absolute;
787
- top: 100%;
788
- left: 85%;
789
- margin-left: -10px;
790
- width: 0;
791
- height: 0;
792
- border-top: 10px solid rgba(74, 74, 74, 0.9);
793
- border-right: 10px solid transparent;
794
- border-left: 10px solid transparent;
795
- }
796
- .multicamera[data-multicamera] li {
797
- font-size: 10px;
798
- cursor: pointer;
799
- }
800
- .multicamera[data-multicamera] li .multicamera-item {
801
- display: flex;
802
- padding: 10px 0;
803
- justify-content: center;
804
- position: relative;
805
- }
806
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
807
- pointer-events: none;
808
- }
809
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
810
- opacity: 0.5;
811
- }
812
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
813
- opacity: 0.5;
814
- }
815
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
816
- background-color: rgba(0, 0, 0, 0);
817
- }
818
- .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
819
- background-color: rgba(0, 0, 0, 0.3);
820
- }
821
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
822
- width: 80px;
823
- height: 60px;
824
- }
825
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
826
- width: 80px;
827
- height: 60px;
828
- }
829
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
830
- width: 120px;
831
- text-align: left;
832
- margin-left: 15px;
833
- }
834
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title, .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
835
- width: 120px;
836
- height: 20px;
837
- font-family: Roboto, "Open Sans", Arial, sans-serif;
838
- font-size: 14px;
839
- font-weight: normal;
840
- font-style: normal;
841
- font-stretch: normal;
842
- line-height: 1.43;
843
- letter-spacing: normal;
844
- text-align: left;
845
- color: #fff;
846
- text-overflow: ellipsis;
847
- overflow: hidden;
848
- }
849
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
850
- opacity: 0.6;
851
- }
852
- .multicamera[data-multicamera] li[data-title] {
853
- background-color: #c3c2c2;
854
- padding: 5px;
855
- }
856
- .multicamera[data-multicamera] li a {
857
- color: #444;
858
- padding: 2px 10px;
859
- display: block;
860
- text-decoration: none;
861
- }
862
- .multicamera[data-multicamera] li a:hover {
863
- background-color: #555;
864
- color: white;
865
- }
866
- .multicamera[data-multicamera] li a:hover a {
867
- color: white;
868
- text-decoration: none;
869
- }
870
- .multicamera[data-multicamera] li.current a {
871
- color: #f00;
872
- }
873
-
874
- @keyframes pulse {
875
- 0% {
876
- color: #fff;
877
- }
878
- 50% {
879
- color: #ff0101;
880
- }
881
- 100% {
882
- color: #B80000;
883
- }
884
- }.context-menu {
885
- z-index: 999;
886
- position: absolute;
887
- top: 0;
888
- left: 0;
889
- text-align: center;
890
- }
891
- .context-menu .context-menu-list {
892
- font-family: "Proxima Nova", sans-serif;
893
- font-size: 12px;
894
- line-height: 12px;
895
- list-style-type: none;
896
- text-align: left;
897
- padding: 5px;
898
- margin-left: auto;
899
- margin-right: auto;
900
- background-color: rgba(0, 0, 0, 0.75);
901
- border: 1px solid #666;
902
- border-radius: 4px;
903
- }
904
- .context-menu .context-menu-list .context-menu-list-item {
905
- color: white;
906
- padding: 5px;
907
- cursor: pointer;
908
- }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
909
- order: 99;
910
- height: 20px;
911
- }
912
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
913
- position: absolute;
914
- right: 16px;
915
- bottom: 52px;
916
- width: 250px;
917
- min-height: 48px;
918
- z-index: 9999;
919
- border-radius: 4px;
920
- }
921
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
922
- padding: 8px 0;
923
- }
924
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list svg {
925
- float: left;
926
- margin-right: 10px;
927
- }
928
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
929
- margin: 0;
930
- text-align: left;
931
- line-height: 22px;
932
- padding: 5px 14px;
933
- width: 250px;
934
- font-size: 12px;
935
- }
936
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_arrow-right-icon {
937
- float: right;
938
- margin-right: -14px;
939
- }
940
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_value {
941
- float: right;
942
- margin-right: 8px;
943
- }
944
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option svg {
945
- height: 20px;
946
- }*, :focus, :visited {
947
- outline: none !important;
948
- }
949
-
950
- .gear-wrapper .go-back {
951
- font-weight: 600;
952
- font-size: 14px;
953
- line-height: 20px;
954
- width: 100%;
955
- text-align: left;
956
- padding: 12px;
957
- }
958
- .gear-wrapper .go-back .arrow-left-icon {
959
- float: left;
960
- padding-top: 2px;
961
- padding-right: 2px;
962
- }
963
- .gear-wrapper .go-back .arrow-left-icon svg {
964
- height: 16px;
965
- }
966
- .gear-wrapper ul.gear-sub-menu {
967
- width: 100%;
968
- list-style-type: none;
969
- min-width: 60px;
970
- border-top: 2px solid rgb(36, 36, 36);
971
- }
972
- .gear-wrapper ul.gear-sub-menu li {
973
- font-size: 12px;
974
- text-align: left;
975
- }
976
- .gear-wrapper ul.gear-sub-menu li[data-title] {
977
- background-color: #c3c2c2;
978
- padding: 5px;
979
- }
980
- .gear-wrapper ul.gear-sub-menu li a {
981
- display: block;
982
- text-decoration: none;
983
- height: 32px;
984
- padding: 5px 10px;
985
- line-height: 22px;
986
- color: #fffffe;
987
- }
988
- .gear-wrapper ul.gear-sub-menu li a:hover {
989
- color: white;
990
- background-color: rgba(0, 0, 0, 0.4);
991
- }
992
- .gear-wrapper ul.gear-sub-menu li a:hover a {
993
- color: white;
994
- text-decoration: none;
851
+ div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
852
+ font-size: 13px;
853
+ margin-top: 15px;
995
854
  }
996
- .gear-wrapper ul.gear-sub-menu li a .check-icon {
855
+ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
856
+ cursor: pointer;
997
857
  width: 30px;
998
- height: 20px;
999
- float: left;
1000
- display: block;
1001
- }
1002
- .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
858
+ margin: 15px auto 0;
859
+ }.gear-option_hd-icon.hidden {
1003
860
  display: none;
1004
861
  }
1005
- .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
1006
- display: inline;
862
+
863
+ .quality-levels li.disabled {
864
+ opacity: 0.5;
865
+ pointer-events: none;
866
+ }
867
+ .quality-levels li.current {
868
+ background-color: #000;
1007
869
  }.big-mute-icon-wrapper[data-big-mute] {
1008
870
  position: absolute;
1009
871
  z-index: 9998;
@@ -1053,6 +915,15 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1053
915
  }
1054
916
  .big-mute-icon[data-big-mute-icon]:hover svg path {
1055
917
  fill: #151515 !important;
918
+ }.media-control-pip {
919
+ order: 95;
920
+ display: flex;
921
+ }
922
+ .media-control-pip button {
923
+ height: 20px;
924
+ }
925
+ .media-control-pip button svg {
926
+ height: 20px;
1056
927
  }[data-player] {
1057
928
  --bottom-panel: 40px;
1058
929
  }
@@ -1690,53 +1561,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1690
1561
  }
1691
1562
  .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-duration] {
1692
1563
  display: none !important;
1693
- }.spinner-three-bounce[data-spinner] {
1694
- position: absolute;
1695
- width: 70px;
1696
- text-align: center;
1697
- z-index: 999;
1698
- left: 0;
1699
- right: 0;
1700
- margin: 0 auto;
1701
- margin-left: auto;
1702
- margin-right: auto;
1703
- /* center vertically */
1704
- top: 50%;
1705
- transform: translateY(-50%);
1706
- }
1707
- .spinner-three-bounce[data-spinner] > div {
1708
- width: 18px;
1709
- height: 18px;
1710
- background-color: #FFF;
1711
- border-radius: 100%;
1712
- display: inline-block;
1713
- animation: bouncedelay 1.4s infinite ease-in-out;
1714
- /* Prevent first frame from flickering when animation starts */
1715
- animation-fill-mode: both;
1716
- }
1717
- .spinner-three-bounce[data-spinner] [data-bounce1] {
1718
- animation-delay: -0.32s;
1719
- }
1720
- .spinner-three-bounce[data-spinner] [data-bounce2] {
1721
- animation-delay: -0.16s;
1722
- }
1723
-
1724
- @keyframes bouncedelay {
1725
- 0%, 80%, 100% {
1726
- transform: scale(0);
1727
- }
1728
- 40% {
1729
- transform: scale(1);
1730
- }
1731
- }.media-control-pip {
1732
- order: 95;
1733
- display: flex;
1734
- }
1735
- .media-control-pip button {
1736
- height: 20px;
1737
- }
1738
- .media-control-pip button svg {
1739
- height: 20px;
1740
1564
  }.player-poster[data-poster] {
1741
1565
  display: flex;
1742
1566
  justify-content: center;
@@ -1846,47 +1670,159 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1846
1670
  top: calc(50% - 20px);
1847
1671
  /* margin-top: -170px; */
1848
1672
  }
1849
- .share_plugin[data-share] .share-container .share-container-header {
1850
- text-align: left;
1851
- border-bottom: 1px solid rgba(155, 155, 155, 0.25);
1673
+ .share_plugin[data-share] .share-container .share-container-header {
1674
+ text-align: left;
1675
+ border-bottom: 1px solid rgba(155, 155, 155, 0.25);
1676
+ }
1677
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1678
+ display: inline-block;
1679
+ font-size: 16px;
1680
+ margin: 5px;
1681
+ }
1682
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
1683
+ display: inline-block;
1684
+ width: 24px;
1685
+ float: right;
1686
+ margin: 5px;
1687
+ cursor: pointer;
1688
+ }
1689
+ .share_plugin[data-share] .share-container .share-container-main {
1690
+ margin-bottom: 8px;
1691
+ }
1692
+ .share_plugin[data-share] .share-container .share-container-main > div {
1693
+ text-align: left;
1694
+ font-size: 14px;
1695
+ padding: 5px;
1696
+ }
1697
+ .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 {
1698
+ overflow: hidden;
1699
+ text-overflow: ellipsis;
1700
+ color: #818181;
1701
+ border: solid 1px #d3d3d3;
1702
+ width: calc(100% - 10px);
1703
+ padding: 5px;
1704
+ }
1705
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
1706
+ max-height: 90px;
1707
+ resize: none;
1708
+ }
1709
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
1710
+ width: 32px;
1711
+ display: inline-block;
1712
+ margin-right: 5px;
1713
+ cursor: pointer;
1714
+ }*,
1715
+ :focus,
1716
+ :visited {
1717
+ outline: none !important;
1718
+ }
1719
+
1720
+ .media-control-cc[data-cc] {
1721
+ position: relative;
1722
+ order: 85;
1723
+ }
1724
+ .media-control-cc[data-cc] button {
1725
+ background-color: transparent;
1726
+ color: #fff;
1727
+ -webkit-font-smoothing: antialiased;
1728
+ border: none;
1729
+ cursor: pointer;
1730
+ }
1731
+ .media-control-cc[data-cc] button .cc-text svg {
1732
+ fill: white;
1733
+ }
1734
+ .media-control-cc[data-cc] button:hover {
1735
+ color: #c9c9c9;
1736
+ }
1737
+ .media-control-cc[data-cc] button.changing {
1738
+ animation: pulse 0.5s infinite alternate;
1739
+ }
1740
+ .media-control-cc[data-cc] ul {
1741
+ width: 80px;
1742
+ list-style-type: none;
1743
+ position: absolute;
1744
+ bottom: 25px;
1745
+ border: 1px solid black;
1746
+ display: none;
1747
+ background-color: #e6e6e6;
1748
+ padding: 8px 0;
1749
+ }
1750
+ .media-control-cc[data-cc] li a {
1751
+ color: #444;
1752
+ padding: 2px 10px;
1753
+ display: block;
1754
+ text-decoration: none;
1755
+ }
1756
+ .media-control-cc[data-cc] li a:hover {
1757
+ background-color: #555;
1758
+ color: white;
1759
+ }
1760
+ .media-control-cc[data-cc] li a:hover a {
1761
+ color: white;
1762
+ text-decoration: none;
1763
+ }
1764
+ .media-control-cc[data-cc] li.current a {
1765
+ color: #f00;
1766
+ background-color: #555;
1767
+ }
1768
+
1769
+ @keyframes pulse {
1770
+ 0% {
1771
+ color: #fff;
1772
+ }
1773
+ 50% {
1774
+ color: #ff0101;
1775
+ }
1776
+ 100% {
1777
+ color: #B80000;
1778
+ }
1779
+ }
1780
+ ::cue {
1781
+ visibility: hidden !important;
1782
+ font-size: 0 !important;
1852
1783
  }
1853
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1854
- display: inline-block;
1855
- font-size: 16px;
1856
- margin: 5px;
1784
+
1785
+ .ios-fullscreen::cue {
1786
+ visibility: visible !important;
1787
+ font-size: 1em !important;
1788
+ }.spinner-three-bounce[data-spinner] {
1789
+ position: absolute;
1790
+ width: 70px;
1791
+ text-align: center;
1792
+ z-index: 999;
1793
+ left: 0;
1794
+ right: 0;
1795
+ margin: 0 auto;
1796
+ margin-left: auto;
1797
+ margin-right: auto;
1798
+ /* center vertically */
1799
+ top: 50%;
1800
+ transform: translateY(-50%);
1857
1801
  }
1858
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
1802
+ .spinner-three-bounce[data-spinner] > div {
1803
+ width: 18px;
1804
+ height: 18px;
1805
+ background-color: #FFF;
1806
+ border-radius: 100%;
1859
1807
  display: inline-block;
1860
- width: 24px;
1861
- float: right;
1862
- margin: 5px;
1863
- cursor: pointer;
1864
- }
1865
- .share_plugin[data-share] .share-container .share-container-main {
1866
- margin-bottom: 8px;
1867
- }
1868
- .share_plugin[data-share] .share-container .share-container-main > div {
1869
- text-align: left;
1870
- font-size: 14px;
1871
- padding: 5px;
1808
+ animation: bouncedelay 1.4s infinite ease-in-out;
1809
+ /* Prevent first frame from flickering when animation starts */
1810
+ animation-fill-mode: both;
1872
1811
  }
1873
- .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 {
1874
- overflow: hidden;
1875
- text-overflow: ellipsis;
1876
- color: #818181;
1877
- border: solid 1px #d3d3d3;
1878
- width: calc(100% - 10px);
1879
- padding: 5px;
1812
+ .spinner-three-bounce[data-spinner] [data-bounce1] {
1813
+ animation-delay: -0.32s;
1880
1814
  }
1881
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
1882
- max-height: 90px;
1883
- resize: none;
1815
+ .spinner-three-bounce[data-spinner] [data-bounce2] {
1816
+ animation-delay: -0.16s;
1884
1817
  }
1885
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
1886
- width: 32px;
1887
- display: inline-block;
1888
- margin-right: 5px;
1889
- cursor: pointer;
1818
+
1819
+ @keyframes bouncedelay {
1820
+ 0%, 80%, 100% {
1821
+ transform: scale(0);
1822
+ }
1823
+ 40% {
1824
+ transform: scale(1);
1825
+ }
1890
1826
  }.scrub-thumbnails {
1891
1827
  position: absolute;
1892
1828
  bottom: 52px;
@@ -1948,27 +1884,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1948
1884
  }
1949
1885
  .scrub-thumbnails .backdrop .carousel img {
1950
1886
  width: auto;
1951
- }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
1952
- height: 0;
1953
- }
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;
1962
- }
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;
1968
- }
1969
- .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] .skip-item {
1970
- width: 33.3%;
1971
- height: 100%;
1972
1887
  }.player-logo[data-logo] {
1973
1888
  position: absolute;
1974
1889
  z-index: 2;
@@ -1978,59 +1893,142 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1978
1893
 
1979
1894
  .clappr-logo {
1980
1895
  position: absolute;
1981
- }*,
1982
- :focus,
1983
- :visited {
1896
+ }*, :focus, :visited {
1984
1897
  outline: none !important;
1985
1898
  }
1986
1899
 
1987
- .media-control-cc[data-cc] {
1900
+ .multicamera[data-multicamera] {
1901
+ float: right;
1902
+ margin-top: 4px;
1988
1903
  position: relative;
1989
- order: 85;
1904
+ margin-right: 20px;
1905
+ width: 20px;
1990
1906
  }
1991
- .media-control-cc[data-cc] button {
1907
+ .multicamera[data-multicamera] button {
1992
1908
  background-color: transparent;
1993
1909
  color: #fff;
1910
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1994
1911
  -webkit-font-smoothing: antialiased;
1995
1912
  border: none;
1996
- cursor: pointer;
1913
+ font-size: 14px;
1914
+ padding: 0;
1997
1915
  }
1998
- .media-control-cc[data-cc] button .cc-text svg {
1999
- fill: white;
1916
+ .multicamera[data-multicamera] button svg {
1917
+ height: 20px;
1918
+ position: relative;
1919
+ margin-top: 6px;
2000
1920
  }
2001
- .media-control-cc[data-cc] button:hover {
1921
+ .multicamera[data-multicamera] button:hover {
2002
1922
  color: #c9c9c9;
2003
1923
  }
2004
- .media-control-cc[data-cc] button.changing {
1924
+ .multicamera[data-multicamera] button.changing {
2005
1925
  animation: pulse 0.5s infinite alternate;
2006
1926
  }
2007
- .media-control-cc[data-cc] ul {
2008
- width: 80px;
1927
+ .multicamera[data-multicamera] button span.quality-arrow {
1928
+ width: 9px;
1929
+ height: 6px;
1930
+ margin-top: 11px;
1931
+ margin-left: 5px;
1932
+ }
1933
+ .multicamera[data-multicamera] > ul {
1934
+ padding: 6px 0;
1935
+ right: -24px;
1936
+ width: 245px;
2009
1937
  list-style-type: none;
2010
1938
  position: absolute;
2011
- bottom: 25px;
2012
- border: 1px solid black;
1939
+ bottom: 48px;
1940
+ border-radius: 4px;
2013
1941
  display: none;
2014
- background-color: #e6e6e6;
2015
- padding: 8px 0;
1942
+ background-color: rgba(74, 74, 74, 0.9);
2016
1943
  }
2017
- .media-control-cc[data-cc] li a {
1944
+ .multicamera[data-multicamera] > ul::after {
1945
+ content: "";
1946
+ position: absolute;
1947
+ top: 100%;
1948
+ left: 85%;
1949
+ margin-left: -10px;
1950
+ width: 0;
1951
+ height: 0;
1952
+ border-top: 10px solid rgba(74, 74, 74, 0.9);
1953
+ border-right: 10px solid transparent;
1954
+ border-left: 10px solid transparent;
1955
+ }
1956
+ .multicamera[data-multicamera] li {
1957
+ font-size: 10px;
1958
+ cursor: pointer;
1959
+ }
1960
+ .multicamera[data-multicamera] li .multicamera-item {
1961
+ display: flex;
1962
+ padding: 10px 0;
1963
+ justify-content: center;
1964
+ position: relative;
1965
+ }
1966
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
1967
+ pointer-events: none;
1968
+ }
1969
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
1970
+ opacity: 0.5;
1971
+ }
1972
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
1973
+ opacity: 0.5;
1974
+ }
1975
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
1976
+ background-color: rgba(0, 0, 0, 0);
1977
+ }
1978
+ .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
1979
+ background-color: rgba(0, 0, 0, 0.3);
1980
+ }
1981
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
1982
+ width: 80px;
1983
+ height: 60px;
1984
+ }
1985
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
1986
+ width: 80px;
1987
+ height: 60px;
1988
+ }
1989
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
1990
+ width: 120px;
1991
+ text-align: left;
1992
+ margin-left: 15px;
1993
+ }
1994
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title, .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1995
+ width: 120px;
1996
+ height: 20px;
1997
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1998
+ font-size: 14px;
1999
+ font-weight: normal;
2000
+ font-style: normal;
2001
+ font-stretch: normal;
2002
+ line-height: 1.43;
2003
+ letter-spacing: normal;
2004
+ text-align: left;
2005
+ color: #fff;
2006
+ text-overflow: ellipsis;
2007
+ overflow: hidden;
2008
+ }
2009
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
2010
+ opacity: 0.6;
2011
+ }
2012
+ .multicamera[data-multicamera] li[data-title] {
2013
+ background-color: #c3c2c2;
2014
+ padding: 5px;
2015
+ }
2016
+ .multicamera[data-multicamera] li a {
2018
2017
  color: #444;
2019
2018
  padding: 2px 10px;
2020
2019
  display: block;
2021
2020
  text-decoration: none;
2022
2021
  }
2023
- .media-control-cc[data-cc] li a:hover {
2022
+ .multicamera[data-multicamera] li a:hover {
2024
2023
  background-color: #555;
2025
2024
  color: white;
2026
2025
  }
2027
- .media-control-cc[data-cc] li a:hover a {
2026
+ .multicamera[data-multicamera] li a:hover a {
2028
2027
  color: white;
2029
2028
  text-decoration: none;
2030
2029
  }
2031
- .media-control-cc[data-cc] li.current a {
2030
+ .multicamera[data-multicamera] li.current a {
2032
2031
  color: #f00;
2033
- background-color: #555;
2034
2032
  }
2035
2033
 
2036
2034
  @keyframes pulse {
@@ -2043,23 +2041,25 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
2043
2041
  100% {
2044
2042
  color: #B80000;
2045
2043
  }
2046
- }
2047
- ::cue {
2048
- visibility: hidden !important;
2049
- font-size: 0 !important;
2044
+ }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
2045
+ height: 0;
2050
2046
  }
2051
2047
 
2052
- .ios-fullscreen::cue {
2053
- visibility: visible !important;
2054
- font-size: 1em !important;
2055
- }.gear-option_hd-icon.hidden {
2056
- display: none;
2048
+ .skip_time_plugin[data-skip-time] {
2049
+ position: absolute;
2050
+ width: 100%;
2051
+ height: calc(100% - 50px);
2052
+ z-index: 9998;
2053
+ background-color: transparent;
2054
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
2057
2055
  }
2058
-
2059
- .quality-levels li.disabled {
2060
- opacity: 0.5;
2061
- pointer-events: none;
2056
+ .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] {
2057
+ width: 100%;
2058
+ height: 100%;
2059
+ display: flex;
2060
+ justify-content: space-between;
2062
2061
  }
2063
- .quality-levels li.current {
2064
- background-color: #000;
2062
+ .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] .skip-item {
2063
+ width: 33.3%;
2064
+ height: 100%;
2065
2065
  }