@gcorevideo/player 2.22.3 → 2.22.4

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,99 +122,205 @@
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;
125
+ }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
126
+ order: 99;
127
+ height: 20px;
135
128
  }
136
- .dvr-controls[data-dvr] .live-info {
137
- cursor: default;
138
- text-transform: uppercase;
129
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
130
+ position: absolute;
131
+ right: 16px;
132
+ bottom: 52px;
133
+ width: 250px;
134
+ min-height: 48px;
135
+ z-index: 9999;
136
+ border-radius: 4px;
139
137
  }
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);
138
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
139
+ padding: 8px 0;
149
140
  }
150
- .dvr-controls[data-dvr] .live-info.disabled {
151
- opacity: 0.3;
141
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list svg {
142
+ float: left;
143
+ margin-right: 10px;
152
144
  }
153
- .dvr-controls[data-dvr] .live-info.disabled:before {
154
- background-color: var(--player-dvr-color);
145
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
146
+ margin: 0;
147
+ text-align: left;
148
+ line-height: 22px;
149
+ padding: 5px 14px;
150
+ width: 250px;
151
+ font-size: 12px;
155
152
  }
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;
153
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_arrow-right-icon {
154
+ float: right;
155
+ margin-right: -14px;
168
156
  }
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);
157
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_value {
158
+ float: right;
159
+ margin-right: 8px;
178
160
  }
179
- .dvr-controls[data-dvr] .live-button:hover {
180
- opacity: 1;
181
- text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
161
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option svg {
162
+ height: 20px;
163
+ }*, :focus, :visited {
164
+ outline: none !important;
182
165
  }
183
- .dvr-controls[data-dvr] .live-info {
166
+
167
+ .gear-wrapper .go-back {
168
+ font-weight: 600;
184
169
  font-size: 14px;
185
- letter-spacing: 0.8px;
186
- font-weight: 500;
170
+ line-height: 20px;
171
+ width: 100%;
172
+ text-align: left;
173
+ padding: 12px;
174
+ }
175
+ .gear-wrapper .go-back .arrow-left-icon {
176
+ float: left;
177
+ padding-top: 2px;
178
+ padding-right: 2px;
179
+ }
180
+ .gear-wrapper .go-back .arrow-left-icon svg {
181
+ height: 16px;
182
+ }
183
+ .gear-wrapper ul.gear-sub-menu {
184
+ width: 100%;
185
+ list-style-type: none;
186
+ min-width: 60px;
187
+ border-top: 2px solid rgb(36, 36, 36);
188
+ }
189
+ .gear-wrapper ul.gear-sub-menu li {
190
+ font-size: 12px;
191
+ text-align: left;
192
+ }
193
+ .gear-wrapper ul.gear-sub-menu li[data-title] {
194
+ background-color: #c3c2c2;
195
+ padding: 5px;
196
+ }
197
+ .gear-wrapper ul.gear-sub-menu li a {
198
+ display: block;
199
+ text-decoration: none;
200
+ height: 32px;
201
+ padding: 5px 10px;
202
+ line-height: 22px;
187
203
  color: #fffffe;
188
- margin-left: 21px;
189
204
  }
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;
205
+ .gear-wrapper ul.gear-sub-menu li a:hover {
206
+ color: white;
207
+ background-color: rgba(0, 0, 0, 0.4);
196
208
  }
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;
209
+ .gear-wrapper ul.gear-sub-menu li a:hover a {
210
+ color: white;
211
+ text-decoration: none;
204
212
  }
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;
213
+ .gear-wrapper ul.gear-sub-menu li a .check-icon {
214
+ width: 30px;
215
+ height: 20px;
216
+ float: left;
217
+ display: block;
218
+ }
219
+ .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
220
+ display: none;
221
+ }
222
+ .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
223
+ display: inline;
224
+ }*,
225
+ :focus,
226
+ :visited {
227
+ outline: none !important;
211
228
  }
212
229
 
213
- .dvr .dvr-controls[data-dvr] .live-info {
230
+ .media-control-audiotracks {
231
+ position: relative;
232
+ }
233
+ .media-control-audiotracks button {
234
+ background-color: transparent;
235
+ color: #fff;
236
+ -webkit-font-smoothing: antialiased;
237
+ border: none;
238
+ cursor: pointer;
239
+ display: flex;
240
+ align-items: center;
241
+ padding: 0;
242
+ }
243
+ .media-control-audiotracks button .audio-text {
244
+ text-overflow: ellipsis;
245
+ overflow: hidden;
246
+ white-space: nowrap;
247
+ max-width: 100px;
248
+ background-color: transparent;
249
+ -webkit-font-smoothing: antialiased;
250
+ border: none;
251
+ cursor: pointer;
252
+ }
253
+ .media-control-audiotracks button:hover {
254
+ color: white;
255
+ }
256
+ .media-control-audiotracks button.changing {
257
+ animation: pulse 0.5s infinite alternate;
258
+ }
259
+ .media-control-audiotracks button span.audio-arrow {
260
+ width: 9px;
261
+ height: 6px;
262
+ margin-left: 5px;
263
+ }
264
+ .media-control-audiotracks .menu {
265
+ max-width: 114px;
266
+ list-style-type: none;
267
+ position: absolute;
268
+ background-color: rgba(74, 74, 74, 0.6);
269
+ border: none;
270
+ min-width: 60px;
271
+ border-radius: 4px;
272
+ bottom: 40px;
273
+ right: -2px;
274
+ }
275
+ .media-control-audiotracks .menu.hidden {
214
276
  display: none;
215
277
  }
216
- .dvr .dvr-controls[data-dvr] .live-button {
278
+ .media-control-audiotracks li {
279
+ font-size: var(--font-size-media-controls-dropdown);
280
+ text-align: right;
281
+ height: 30px;
282
+ }
283
+ .media-control-audiotracks li[data-title] {
284
+ background-color: #c3c2c2;
285
+ padding: 5px;
286
+ }
287
+ .media-control-audiotracks li a {
217
288
  display: block;
289
+ text-decoration: none;
290
+ text-overflow: ellipsis;
291
+ overflow: hidden;
292
+ white-space: nowrap;
293
+ height: 30px;
294
+ padding: 5px 10px;
295
+ color: #fffffe;
296
+ }
297
+ .media-control-audiotracks li a:hover {
298
+ text-decoration: none;
299
+ background-color: rgba(0, 0, 0, 0.4);
300
+ color: white;
301
+ }
302
+ .media-control-audiotracks li.current a {
303
+ color: #f00;
304
+ }
305
+ .media-control-audiotracks li:first-child a {
306
+ border-bottom-left-radius: 4px;
307
+ border-bottom-right-radius: 4px;
308
+ }
309
+ .media-control-audiotracks li:last-child a {
310
+ border-top-left-radius: 4px;
311
+ border-top-right-radius: 4px;
312
+ }
313
+
314
+ @keyframes pulse {
315
+ 0% {
316
+ color: #fff;
317
+ }
318
+ 50% {
319
+ color: #ff0101;
320
+ }
321
+ 100% {
322
+ color: #B80000;
323
+ }
218
324
  }:root {
219
325
  --primary-background-color: #000;
220
326
  --secondary-background-color: #262626;
@@ -597,191 +703,259 @@
597
703
  .mobile .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul {
598
704
  width: 25%;
599
705
  }
600
- }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
601
- order: 99;
602
- height: 20px;
706
+ }.dvr-controls[data-dvr] {
707
+ display: inline-block;
708
+ color: var(--player-dvr-color);
709
+ line-height: 32px;
710
+ font-size: 10px;
711
+ font-weight: bold;
712
+ margin-left: 6px;
713
+ height: 40px;
714
+ line-height: 40px;
715
+ margin-left: 0;
603
716
  }
604
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
605
- position: absolute;
606
- right: 16px;
607
- bottom: 52px;
608
- width: 250px;
609
- min-height: 48px;
610
- z-index: 9999;
611
- border-radius: 4px;
717
+ .dvr-controls[data-dvr] .live-info {
718
+ cursor: default;
719
+ text-transform: uppercase;
612
720
  }
613
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
614
- padding: 8px 0;
721
+ .dvr-controls[data-dvr] .live-info:before {
722
+ content: "";
723
+ display: inline-block;
724
+ position: relative;
725
+ width: 7px;
726
+ height: 7px;
727
+ border-radius: 3.5px;
728
+ margin-right: 3.5px;
729
+ background-color: var(--player-live-color);
615
730
  }
616
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list svg {
617
- float: left;
618
- margin-right: 10px;
731
+ .dvr-controls[data-dvr] .live-info.disabled {
732
+ opacity: 0.3;
619
733
  }
620
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
621
- margin: 0;
622
- text-align: left;
623
- line-height: 22px;
624
- padding: 5px 14px;
625
- width: 250px;
626
- font-size: 12px;
734
+ .dvr-controls[data-dvr] .live-info.disabled:before {
735
+ background-color: var(--player-dvr-color);
627
736
  }
628
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_arrow-right-icon {
629
- float: right;
630
- margin-right: -14px;
737
+ .dvr-controls[data-dvr] .live-button {
738
+ cursor: pointer;
739
+ outline: none;
740
+ display: none;
741
+ border: 0;
742
+ color: var(--player-dvr-color);
743
+ background-color: transparent;
744
+ height: 32px;
745
+ padding: 0;
746
+ opacity: 0.7;
747
+ text-transform: uppercase;
748
+ transition: all 0.1s ease;
631
749
  }
632
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_value {
633
- float: right;
634
- margin-right: 8px;
750
+ .dvr-controls[data-dvr] .live-button:before {
751
+ content: "";
752
+ display: inline-block;
753
+ position: relative;
754
+ width: 7px;
755
+ height: 7px;
756
+ border-radius: 3.5px;
757
+ margin-right: 3.5px;
758
+ background-color: var(--player-dvr-color);
635
759
  }
636
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option svg {
637
- height: 20px;
638
- }*, :focus, :visited {
639
- outline: none !important;
760
+ .dvr-controls[data-dvr] .live-button:hover {
761
+ opacity: 1;
762
+ text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
640
763
  }
641
-
642
- .gear-wrapper .go-back {
643
- font-weight: 600;
764
+ .dvr-controls[data-dvr] .live-info {
644
765
  font-size: 14px;
645
- line-height: 20px;
646
- width: 100%;
647
- text-align: left;
648
- padding: 12px;
649
- }
650
- .gear-wrapper .go-back .arrow-left-icon {
651
- float: left;
652
- padding-top: 2px;
653
- padding-right: 2px;
766
+ letter-spacing: 0.8px;
767
+ font-weight: 500;
768
+ color: #fffffe;
769
+ margin-left: 21px;
654
770
  }
655
- .gear-wrapper .go-back .arrow-left-icon svg {
656
- height: 16px;
771
+ .dvr-controls[data-dvr] .live-info::before {
772
+ width: 10px;
773
+ height: 10px;
774
+ border-radius: 50%;
775
+ margin-right: 8px;
776
+ background-color: #ed4f4a;
657
777
  }
658
- .gear-wrapper ul.gear-sub-menu {
659
- width: 100%;
660
- list-style-type: none;
661
- min-width: 60px;
662
- border-top: 2px solid rgb(36, 36, 36);
778
+ .dvr-controls[data-dvr] .live-button {
779
+ height: 40px;
780
+ opacity: 1;
781
+ font-size: 14px;
782
+ letter-spacing: 0.8px;
783
+ font-weight: 500;
784
+ margin-left: 20px;
663
785
  }
664
- .gear-wrapper ul.gear-sub-menu li {
665
- font-size: 12px;
666
- text-align: left;
786
+ .dvr-controls[data-dvr] .live-button::before {
787
+ width: 10px;
788
+ height: 10px;
789
+ border-radius: 50%;
790
+ margin-right: 8px;
791
+ background-color: #cacaca;
667
792
  }
668
- .gear-wrapper ul.gear-sub-menu li[data-title] {
669
- background-color: #c3c2c2;
670
- padding: 5px;
793
+
794
+ .dvr .dvr-controls[data-dvr] .live-info {
795
+ display: none;
671
796
  }
672
- .gear-wrapper ul.gear-sub-menu li a {
797
+ .dvr .dvr-controls[data-dvr] .live-button {
673
798
  display: block;
674
- text-decoration: none;
675
- height: 32px;
676
- padding: 5px 10px;
677
- line-height: 22px;
678
- color: #fffffe;
799
+ }.context-menu {
800
+ z-index: 999;
801
+ position: absolute;
802
+ top: 0;
803
+ left: 0;
804
+ text-align: center;
679
805
  }
680
- .gear-wrapper ul.gear-sub-menu li a:hover {
681
- color: white;
682
- background-color: rgba(0, 0, 0, 0.4);
806
+ .context-menu .context-menu-list {
807
+ font-family: "Proxima Nova", sans-serif;
808
+ font-size: 12px;
809
+ line-height: 12px;
810
+ list-style-type: none;
811
+ text-align: left;
812
+ padding: 5px;
813
+ margin-left: auto;
814
+ margin-right: auto;
815
+ background-color: rgba(0, 0, 0, 0.75);
816
+ border: 1px solid #666;
817
+ border-radius: 4px;
683
818
  }
684
- .gear-wrapper ul.gear-sub-menu li a:hover a {
819
+ .context-menu .context-menu-list .context-menu-list-item {
685
820
  color: white;
686
- text-decoration: none;
687
- }
688
- .gear-wrapper ul.gear-sub-menu li a .check-icon {
689
- width: 30px;
690
- height: 20px;
691
- float: left;
692
- display: block;
693
- }
694
- .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
695
- display: none;
696
- }
697
- .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
698
- display: inline;
699
- }*,
700
- :focus,
701
- :visited {
821
+ padding: 5px;
822
+ cursor: pointer;
823
+ }*, :focus, :visited {
702
824
  outline: none !important;
703
825
  }
704
826
 
705
- .media-control-audiotracks {
827
+ .multicamera[data-multicamera] {
828
+ float: right;
829
+ margin-top: 4px;
706
830
  position: relative;
831
+ margin-right: 20px;
832
+ width: 20px;
707
833
  }
708
- .media-control-audiotracks button {
834
+ .multicamera[data-multicamera] button {
709
835
  background-color: transparent;
710
836
  color: #fff;
837
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
711
838
  -webkit-font-smoothing: antialiased;
712
839
  border: none;
713
- cursor: pointer;
714
- display: flex;
715
- align-items: center;
840
+ font-size: 14px;
716
841
  padding: 0;
717
842
  }
718
- .media-control-audiotracks button .audio-text {
719
- text-overflow: ellipsis;
720
- overflow: hidden;
721
- white-space: nowrap;
722
- max-width: 100px;
723
- background-color: transparent;
724
- -webkit-font-smoothing: antialiased;
725
- border: none;
726
- cursor: pointer;
843
+ .multicamera[data-multicamera] button svg {
844
+ height: 20px;
845
+ position: relative;
846
+ margin-top: 6px;
727
847
  }
728
- .media-control-audiotracks button:hover {
729
- color: white;
848
+ .multicamera[data-multicamera] button:hover {
849
+ color: #c9c9c9;
730
850
  }
731
- .media-control-audiotracks button.changing {
851
+ .multicamera[data-multicamera] button.changing {
732
852
  animation: pulse 0.5s infinite alternate;
733
853
  }
734
- .media-control-audiotracks button span.audio-arrow {
854
+ .multicamera[data-multicamera] button span.quality-arrow {
735
855
  width: 9px;
736
856
  height: 6px;
857
+ margin-top: 11px;
737
858
  margin-left: 5px;
738
859
  }
739
- .media-control-audiotracks > ul {
740
- max-width: 114px;
860
+ .multicamera[data-multicamera] > ul {
861
+ padding: 6px 0;
862
+ right: -24px;
863
+ width: 245px;
741
864
  list-style-type: none;
742
865
  position: absolute;
743
- display: none;
744
- background-color: rgba(74, 74, 74, 0.6);
745
- border: none;
746
- min-width: 60px;
866
+ bottom: 48px;
747
867
  border-radius: 4px;
748
- bottom: 40px;
749
- right: -2px;
868
+ display: none;
869
+ background-color: rgba(74, 74, 74, 0.9);
870
+ }
871
+ .multicamera[data-multicamera] > ul::after {
872
+ content: "";
873
+ position: absolute;
874
+ top: 100%;
875
+ left: 85%;
876
+ margin-left: -10px;
877
+ width: 0;
878
+ height: 0;
879
+ border-top: 10px solid rgba(74, 74, 74, 0.9);
880
+ border-right: 10px solid transparent;
881
+ border-left: 10px solid transparent;
882
+ }
883
+ .multicamera[data-multicamera] li {
884
+ font-size: 10px;
885
+ cursor: pointer;
886
+ }
887
+ .multicamera[data-multicamera] li .multicamera-item {
888
+ display: flex;
889
+ padding: 10px 0;
890
+ justify-content: center;
891
+ position: relative;
892
+ }
893
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
894
+ pointer-events: none;
895
+ }
896
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
897
+ opacity: 0.5;
898
+ }
899
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
900
+ opacity: 0.5;
901
+ }
902
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
903
+ background-color: rgba(0, 0, 0, 0);
904
+ }
905
+ .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
906
+ background-color: rgba(0, 0, 0, 0.3);
907
+ }
908
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
909
+ width: 80px;
910
+ height: 60px;
911
+ }
912
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
913
+ width: 80px;
914
+ height: 60px;
915
+ }
916
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
917
+ width: 120px;
918
+ text-align: left;
919
+ margin-left: 15px;
920
+ }
921
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title, .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
922
+ width: 120px;
923
+ height: 20px;
924
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
925
+ font-size: 14px;
926
+ font-weight: normal;
927
+ font-style: normal;
928
+ font-stretch: normal;
929
+ line-height: 1.43;
930
+ letter-spacing: normal;
931
+ text-align: left;
932
+ color: #fff;
933
+ text-overflow: ellipsis;
934
+ overflow: hidden;
750
935
  }
751
- .media-control-audiotracks li {
752
- font-size: var(--font-size-media-controls-dropdown);
753
- text-align: right;
754
- height: 30px;
936
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
937
+ opacity: 0.6;
755
938
  }
756
- .media-control-audiotracks li[data-title] {
939
+ .multicamera[data-multicamera] li[data-title] {
757
940
  background-color: #c3c2c2;
758
941
  padding: 5px;
759
942
  }
760
- .media-control-audiotracks li a {
943
+ .multicamera[data-multicamera] li a {
944
+ color: #444;
945
+ padding: 2px 10px;
761
946
  display: block;
762
947
  text-decoration: none;
763
- text-overflow: ellipsis;
764
- overflow: hidden;
765
- white-space: nowrap;
766
- height: 30px;
767
- padding: 5px 10px;
768
- color: #fffffe;
769
948
  }
770
- .media-control-audiotracks li a:hover {
771
- text-decoration: none;
772
- background-color: rgba(0, 0, 0, 0.4);
949
+ .multicamera[data-multicamera] li a:hover {
950
+ background-color: #555;
773
951
  color: white;
774
952
  }
775
- .media-control-audiotracks li.current a {
776
- color: #f00;
777
- }
778
- .media-control-audiotracks li:first-child a {
779
- border-bottom-left-radius: 4px;
780
- border-bottom-right-radius: 4px;
953
+ .multicamera[data-multicamera] li a:hover a {
954
+ color: white;
955
+ text-decoration: none;
781
956
  }
782
- .media-control-audiotracks li:last-child a {
783
- border-top-left-radius: 4px;
784
- border-top-right-radius: 4px;
957
+ .multicamera[data-multicamera] li.current a {
958
+ color: #f00;
785
959
  }
786
960
 
787
961
  @keyframes pulse {
@@ -830,79 +1004,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
830
1004
  margin: 15px auto 0;
831
1005
  }.clips.bar-container[data-seekbar] {
832
1006
  clip-path: url("#myClip");
833
- }.big-mute-icon-wrapper[data-big-mute] {
834
- position: absolute;
835
- z-index: 9998;
836
- background-color: transparent;
837
- display: flex;
838
- justify-content: center;
839
- width: 100%;
840
- height: calc(100% - 50px);
841
- margin: 0 auto;
842
- opacity: 0.75;
843
- transition: opacity 0.1s ease;
844
- pointer-events: auto;
845
- }
846
- .big-mute-icon-wrapper[data-big-mute].hide {
847
- display: none;
848
- }
849
- .big-mute-icon-wrapper[data-big-mute]:hover {
850
- cursor: pointer;
851
- }
852
-
853
- .big-mute-icon[data-big-mute-icon] {
854
- display: flex;
855
- align-items: center;
856
- justify-content: center;
857
- align-self: center;
858
- width: 120px;
859
- height: 120px;
860
- border: 2px solid white;
861
- border-radius: 50%;
862
- filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
863
- filter: alpha(opacity=60);
864
- opacity: 1;
865
- box-shadow: 0 0 1px 0 white;
866
- background: rgba(240, 243, 247, 0.9411764706);
867
- z-index: 10000;
868
- }
869
- .big-mute-icon[data-big-mute-icon] svg {
870
- margin-left: 5px;
871
- width: 80px;
872
- height: 80px;
873
- }
874
- .big-mute-icon[data-big-mute-icon] svg path {
875
- fill: #1f1e1e !important;
876
- }
877
- .big-mute-icon[data-big-mute-icon]:hover {
878
- background: rgba(240, 243, 247, 0.8784313725);
879
- }
880
- .big-mute-icon[data-big-mute-icon]:hover svg path {
881
- fill: #151515 !important;
882
- }.context-menu {
883
- z-index: 999;
884
- position: absolute;
885
- top: 0;
886
- left: 0;
887
- text-align: center;
888
- }
889
- .context-menu .context-menu-list {
890
- font-family: "Proxima Nova", sans-serif;
891
- font-size: 12px;
892
- line-height: 12px;
893
- list-style-type: none;
894
- text-align: left;
895
- padding: 5px;
896
- margin-left: auto;
897
- margin-right: auto;
898
- background-color: rgba(0, 0, 0, 0.75);
899
- border: 1px solid #666;
900
- border-radius: 4px;
901
- }
902
- .context-menu .context-menu-list .context-menu-list-item {
903
- color: white;
904
- padding: 5px;
905
- cursor: pointer;
906
1007
  }[data-player] {
907
1008
  --bottom-panel: 40px;
908
1009
  }
@@ -1535,174 +1636,44 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1535
1636
  font-family: Roboto, "Open Sans", Arial, sans-serif;
1536
1637
  }
1537
1638
  .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-seek-time] {
1538
- padding-left: 8px;
1539
- padding-right: 8px;
1540
- }
1541
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-duration] {
1542
- display: none !important;
1543
- }.media-control-pip {
1544
- order: 95;
1545
- display: flex;
1546
- }
1547
- .media-control-pip button {
1548
- height: 20px;
1549
- }
1550
- .media-control-pip button svg {
1551
- height: 20px;
1552
- }*, :focus, :visited {
1553
- outline: none !important;
1554
- }
1555
-
1556
- .multicamera[data-multicamera] {
1557
- float: right;
1558
- margin-top: 4px;
1559
- position: relative;
1560
- margin-right: 20px;
1561
- width: 20px;
1562
- }
1563
- .multicamera[data-multicamera] button {
1564
- background-color: transparent;
1565
- color: #fff;
1566
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1567
- -webkit-font-smoothing: antialiased;
1568
- border: none;
1569
- font-size: 14px;
1570
- padding: 0;
1571
- }
1572
- .multicamera[data-multicamera] button svg {
1573
- height: 20px;
1574
- position: relative;
1575
- margin-top: 6px;
1576
- }
1577
- .multicamera[data-multicamera] button:hover {
1578
- color: #c9c9c9;
1579
- }
1580
- .multicamera[data-multicamera] button.changing {
1581
- animation: pulse 0.5s infinite alternate;
1582
- }
1583
- .multicamera[data-multicamera] button span.quality-arrow {
1584
- width: 9px;
1585
- height: 6px;
1586
- margin-top: 11px;
1587
- margin-left: 5px;
1588
- }
1589
- .multicamera[data-multicamera] > ul {
1590
- padding: 6px 0;
1591
- right: -24px;
1592
- width: 245px;
1593
- list-style-type: none;
1594
- position: absolute;
1595
- bottom: 48px;
1596
- border-radius: 4px;
1597
- display: none;
1598
- background-color: rgba(74, 74, 74, 0.9);
1599
- }
1600
- .multicamera[data-multicamera] > ul::after {
1601
- content: "";
1602
- position: absolute;
1603
- top: 100%;
1604
- left: 85%;
1605
- margin-left: -10px;
1606
- width: 0;
1607
- height: 0;
1608
- border-top: 10px solid rgba(74, 74, 74, 0.9);
1609
- border-right: 10px solid transparent;
1610
- border-left: 10px solid transparent;
1611
- }
1612
- .multicamera[data-multicamera] li {
1613
- font-size: 10px;
1614
- cursor: pointer;
1615
- }
1616
- .multicamera[data-multicamera] li .multicamera-item {
1617
- display: flex;
1618
- padding: 10px 0;
1619
- justify-content: center;
1620
- position: relative;
1621
- }
1622
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
1623
- pointer-events: none;
1624
- }
1625
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
1626
- opacity: 0.5;
1627
- }
1628
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
1629
- opacity: 0.5;
1630
- }
1631
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
1632
- background-color: rgba(0, 0, 0, 0);
1633
- }
1634
- .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
1635
- background-color: rgba(0, 0, 0, 0.3);
1636
- }
1637
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
1638
- width: 80px;
1639
- height: 60px;
1640
- }
1641
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
1642
- width: 80px;
1643
- height: 60px;
1644
- }
1645
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
1646
- width: 120px;
1647
- text-align: left;
1648
- margin-left: 15px;
1649
- }
1650
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title, .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1651
- width: 120px;
1652
- height: 20px;
1653
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1654
- font-size: 14px;
1655
- font-weight: normal;
1656
- font-style: normal;
1657
- font-stretch: normal;
1658
- line-height: 1.43;
1659
- letter-spacing: normal;
1660
- text-align: left;
1661
- color: #fff;
1662
- text-overflow: ellipsis;
1663
- overflow: hidden;
1664
- }
1665
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1666
- opacity: 0.6;
1667
- }
1668
- .multicamera[data-multicamera] li[data-title] {
1669
- background-color: #c3c2c2;
1670
- padding: 5px;
1639
+ padding-left: 8px;
1640
+ padding-right: 8px;
1671
1641
  }
1672
- .multicamera[data-multicamera] li a {
1673
- color: #444;
1674
- padding: 2px 10px;
1675
- display: block;
1676
- text-decoration: none;
1642
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-duration] {
1643
+ display: none !important;
1644
+ }.seek-time[data-seek-time] {
1645
+ position: absolute;
1646
+ white-space: nowrap;
1647
+ height: 20px;
1648
+ line-height: 20px;
1649
+ font-size: 0;
1650
+ left: -100%;
1651
+ bottom: 55px;
1652
+ background-color: rgba(2, 2, 2, 0.5);
1653
+ z-index: 9999;
1654
+ transition: opacity 0.1s ease;
1677
1655
  }
1678
- .multicamera[data-multicamera] li a:hover {
1679
- background-color: #555;
1680
- color: white;
1656
+ .seek-time[data-seek-time].hidden[data-seek-time] {
1657
+ opacity: 0;
1681
1658
  }
1682
- .multicamera[data-multicamera] li a:hover a {
1659
+ .seek-time[data-seek-time] [data-seek-time] {
1660
+ display: inline-block;
1683
1661
  color: white;
1684
- text-decoration: none;
1685
- }
1686
- .multicamera[data-multicamera] li.current a {
1687
- color: #f00;
1662
+ font-size: 10px;
1663
+ padding-left: 7px;
1664
+ padding-right: 7px;
1665
+ vertical-align: top;
1688
1666
  }
1689
-
1690
- @keyframes pulse {
1691
- 0% {
1692
- color: #fff;
1693
- }
1694
- 50% {
1695
- color: #ff0101;
1696
- }
1697
- 100% {
1698
- color: #B80000;
1699
- }
1700
- }.gear-option_hd-icon.disabled {
1701
- opacity: 0.5;
1702
- pointer-events: none;
1667
+ .seek-time[data-seek-time] [data-duration] {
1668
+ display: inline-block;
1669
+ color: rgba(255, 255, 255, 0.5);
1670
+ font-size: 10px;
1671
+ padding-right: 7px;
1672
+ vertical-align: top;
1703
1673
  }
1704
- .gear-option_hd-icon.hidden {
1705
- display: none;
1674
+ .seek-time[data-seek-time] [data-duration]::before {
1675
+ content: "|";
1676
+ margin-right: 7px;
1706
1677
  }.player-poster[data-poster] {
1707
1678
  display: flex;
1708
1679
  justify-content: center;
@@ -1737,6 +1708,36 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1737
1708
  }
1738
1709
  .player-poster[data-poster] .play-wrapper[data-poster] svg path {
1739
1710
  fill: #fff;
1711
+ }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
1712
+ height: 0;
1713
+ }
1714
+
1715
+ .skip_time_plugin[data-skip-time] {
1716
+ position: absolute;
1717
+ width: 100%;
1718
+ height: calc(100% - 50px);
1719
+ z-index: 9998;
1720
+ background-color: transparent;
1721
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1722
+ }
1723
+ .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] {
1724
+ width: 100%;
1725
+ height: 100%;
1726
+ display: flex;
1727
+ justify-content: space-between;
1728
+ }
1729
+ .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] .skip-item {
1730
+ width: 33.3%;
1731
+ height: 100%;
1732
+ }.media-control-pip {
1733
+ order: 95;
1734
+ display: flex;
1735
+ }
1736
+ .media-control-pip button {
1737
+ height: 20px;
1738
+ }
1739
+ .media-control-pip button svg {
1740
+ height: 20px;
1740
1741
  }.share_plugin[data-share] {
1741
1742
  pointer-events: auto;
1742
1743
  z-index: 5;
@@ -1820,77 +1821,61 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1820
1821
  display: inline-block;
1821
1822
  margin-right: 5px;
1822
1823
  cursor: pointer;
1823
- }.seek-time[data-seek-time] {
1824
+ }.big-mute-icon-wrapper[data-big-mute] {
1824
1825
  position: absolute;
1825
- white-space: nowrap;
1826
- height: 20px;
1827
- line-height: 20px;
1828
- font-size: 0;
1829
- left: -100%;
1830
- bottom: 55px;
1831
- background-color: rgba(2, 2, 2, 0.5);
1832
- z-index: 9999;
1826
+ z-index: 9998;
1827
+ background-color: transparent;
1828
+ display: flex;
1829
+ justify-content: center;
1830
+ width: 100%;
1831
+ height: calc(100% - 50px);
1832
+ margin: 0 auto;
1833
+ opacity: 0.75;
1833
1834
  transition: opacity 0.1s ease;
1835
+ pointer-events: auto;
1834
1836
  }
1835
- .seek-time[data-seek-time].hidden[data-seek-time] {
1836
- opacity: 0;
1837
+ .big-mute-icon-wrapper[data-big-mute].hide {
1838
+ display: none;
1837
1839
  }
1838
- .seek-time[data-seek-time] [data-seek-time] {
1839
- display: inline-block;
1840
- color: white;
1841
- font-size: 10px;
1842
- padding-left: 7px;
1843
- padding-right: 7px;
1844
- vertical-align: top;
1840
+ .big-mute-icon-wrapper[data-big-mute]:hover {
1841
+ cursor: pointer;
1845
1842
  }
1846
- .seek-time[data-seek-time] [data-duration] {
1847
- display: inline-block;
1848
- color: rgba(255, 255, 255, 0.5);
1849
- font-size: 10px;
1850
- padding-right: 7px;
1851
- vertical-align: top;
1843
+
1844
+ .big-mute-icon[data-big-mute-icon] {
1845
+ display: flex;
1846
+ align-items: center;
1847
+ justify-content: center;
1848
+ align-self: center;
1849
+ width: 120px;
1850
+ height: 120px;
1851
+ border: 2px solid white;
1852
+ border-radius: 50%;
1853
+ filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
1854
+ filter: alpha(opacity=60);
1855
+ opacity: 1;
1856
+ box-shadow: 0 0 1px 0 white;
1857
+ background: rgba(240, 243, 247, 0.9411764706);
1858
+ z-index: 10000;
1852
1859
  }
1853
- .seek-time[data-seek-time] [data-duration]::before {
1854
- content: "|";
1855
- margin-right: 7px;
1856
- }.spinner-three-bounce[data-spinner] {
1857
- position: absolute;
1858
- width: 70px;
1859
- text-align: center;
1860
- z-index: 999;
1861
- left: 0;
1862
- right: 0;
1863
- margin: 0 auto;
1864
- margin-left: auto;
1865
- margin-right: auto;
1866
- /* center vertically */
1867
- top: 50%;
1868
- transform: translateY(-50%);
1860
+ .big-mute-icon[data-big-mute-icon] svg {
1861
+ margin-left: 5px;
1862
+ width: 80px;
1863
+ height: 80px;
1869
1864
  }
1870
- .spinner-three-bounce[data-spinner] > div {
1871
- width: 18px;
1872
- height: 18px;
1873
- background-color: #FFF;
1874
- border-radius: 100%;
1875
- display: inline-block;
1876
- animation: bouncedelay 1.4s infinite ease-in-out;
1877
- /* Prevent first frame from flickering when animation starts */
1878
- animation-fill-mode: both;
1865
+ .big-mute-icon[data-big-mute-icon] svg path {
1866
+ fill: #1f1e1e !important;
1879
1867
  }
1880
- .spinner-three-bounce[data-spinner] [data-bounce1] {
1881
- animation-delay: -0.32s;
1868
+ .big-mute-icon[data-big-mute-icon]:hover {
1869
+ background: rgba(240, 243, 247, 0.8784313725);
1882
1870
  }
1883
- .spinner-three-bounce[data-spinner] [data-bounce2] {
1884
- animation-delay: -0.16s;
1871
+ .big-mute-icon[data-big-mute-icon]:hover svg path {
1872
+ fill: #151515 !important;
1873
+ }.gear-option_hd-icon.disabled {
1874
+ opacity: 0.5;
1875
+ pointer-events: none;
1885
1876
  }
1886
-
1887
- @keyframes bouncedelay {
1888
- 0%, 80%, 100% {
1889
- transform: scale(0);
1890
- }
1891
- 40% {
1892
- transform: scale(1);
1893
- }
1877
+ .gear-option_hd-icon.hidden {
1878
+ display: none;
1894
1879
  }.scrub-thumbnails {
1895
1880
  position: absolute;
1896
1881
  bottom: 52px;
@@ -1952,27 +1937,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1952
1937
  }
1953
1938
  .scrub-thumbnails .backdrop .carousel img {
1954
1939
  width: auto;
1955
- }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
1956
- height: 0;
1957
- }
1958
-
1959
- .skip_time_plugin[data-skip-time] {
1960
- position: absolute;
1961
- width: 100%;
1962
- height: calc(100% - 50px);
1963
- z-index: 9998;
1964
- background-color: transparent;
1965
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1966
- }
1967
- .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] {
1968
- width: 100%;
1969
- height: 100%;
1970
- display: flex;
1971
- justify-content: space-between;
1972
- }
1973
- .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] .skip-item {
1974
- width: 33.3%;
1975
- height: 100%;
1976
1940
  }*,
1977
1941
  :focus,
1978
1942
  :visited {
@@ -2047,6 +2011,44 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
2047
2011
  .ios-fullscreen::cue {
2048
2012
  visibility: visible !important;
2049
2013
  font-size: 1em !important;
2014
+ }.spinner-three-bounce[data-spinner] {
2015
+ position: absolute;
2016
+ width: 70px;
2017
+ text-align: center;
2018
+ z-index: 999;
2019
+ left: 0;
2020
+ right: 0;
2021
+ margin: 0 auto;
2022
+ margin-left: auto;
2023
+ margin-right: auto;
2024
+ /* center vertically */
2025
+ top: 50%;
2026
+ transform: translateY(-50%);
2027
+ }
2028
+ .spinner-three-bounce[data-spinner] > div {
2029
+ width: 18px;
2030
+ height: 18px;
2031
+ background-color: #FFF;
2032
+ border-radius: 100%;
2033
+ display: inline-block;
2034
+ animation: bouncedelay 1.4s infinite ease-in-out;
2035
+ /* Prevent first frame from flickering when animation starts */
2036
+ animation-fill-mode: both;
2037
+ }
2038
+ .spinner-three-bounce[data-spinner] [data-bounce1] {
2039
+ animation-delay: -0.32s;
2040
+ }
2041
+ .spinner-three-bounce[data-spinner] [data-bounce2] {
2042
+ animation-delay: -0.16s;
2043
+ }
2044
+
2045
+ @keyframes bouncedelay {
2046
+ 0%, 80%, 100% {
2047
+ transform: scale(0);
2048
+ }
2049
+ 40% {
2050
+ transform: scale(1);
2051
+ }
2050
2052
  }.player-logo[data-logo] {
2051
2053
  position: absolute;
2052
2054
  z-index: 2;