@gcorevideo/player 2.22.11 → 2.22.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -122,6 +122,248 @@
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
+ }.big-mute-icon-wrapper[data-big-mute] {
219
+ position: absolute;
220
+ z-index: 9998;
221
+ background-color: transparent;
222
+ display: flex;
223
+ justify-content: center;
224
+ width: 100%;
225
+ height: calc(100% - 50px);
226
+ margin: 0 auto;
227
+ opacity: 0.75;
228
+ transition: opacity 0.1s ease;
229
+ pointer-events: auto;
230
+ }
231
+ .big-mute-icon-wrapper[data-big-mute].hide {
232
+ display: none;
233
+ }
234
+ .big-mute-icon-wrapper[data-big-mute]:hover {
235
+ cursor: pointer;
236
+ }
237
+
238
+ .big-mute-icon[data-big-mute-icon] {
239
+ display: flex;
240
+ align-items: center;
241
+ justify-content: center;
242
+ align-self: center;
243
+ width: 120px;
244
+ height: 120px;
245
+ border: 2px solid white;
246
+ border-radius: 50%;
247
+ filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
248
+ filter: alpha(opacity=60);
249
+ opacity: 1;
250
+ box-shadow: 0 0 1px 0 white;
251
+ background: rgba(240, 243, 247, 0.9411764706);
252
+ z-index: 10000;
253
+ }
254
+ .big-mute-icon[data-big-mute-icon] svg {
255
+ margin-left: 5px;
256
+ width: 80px;
257
+ height: 80px;
258
+ }
259
+ .big-mute-icon[data-big-mute-icon] svg path {
260
+ fill: #1f1e1e !important;
261
+ }
262
+ .big-mute-icon[data-big-mute-icon]:hover {
263
+ background: rgba(240, 243, 247, 0.8784313725);
264
+ }
265
+ .big-mute-icon[data-big-mute-icon]:hover svg path {
266
+ fill: #151515 !important;
267
+ }*,
268
+ :focus,
269
+ :visited {
270
+ outline: none !important;
271
+ }
272
+
273
+ .media-control-audiotracks {
274
+ position: relative;
275
+ }
276
+ .media-control-audiotracks button {
277
+ background-color: transparent;
278
+ color: #fff;
279
+ -webkit-font-smoothing: antialiased;
280
+ border: none;
281
+ cursor: pointer;
282
+ display: flex;
283
+ align-items: center;
284
+ padding: 0;
285
+ }
286
+ .media-control-audiotracks button .audio-text {
287
+ text-overflow: ellipsis;
288
+ overflow: hidden;
289
+ white-space: nowrap;
290
+ max-width: 100px;
291
+ background-color: transparent;
292
+ -webkit-font-smoothing: antialiased;
293
+ border: none;
294
+ cursor: pointer;
295
+ }
296
+ .media-control-audiotracks button:hover {
297
+ color: white;
298
+ }
299
+ .media-control-audiotracks button.changing {
300
+ animation: pulse 0.5s infinite alternate;
301
+ }
302
+ .media-control-audiotracks button span.audio-arrow {
303
+ width: 9px;
304
+ height: 6px;
305
+ margin-left: 5px;
306
+ }
307
+ .media-control-audiotracks .menu {
308
+ max-width: 114px;
309
+ list-style-type: none;
310
+ position: absolute;
311
+ background-color: rgba(74, 74, 74, 0.6);
312
+ border: none;
313
+ min-width: 60px;
314
+ border-radius: 4px;
315
+ bottom: 40px;
316
+ right: -2px;
317
+ }
318
+ .media-control-audiotracks .menu.hidden {
319
+ display: none;
320
+ }
321
+ .media-control-audiotracks li {
322
+ font-size: var(--font-size-media-controls-dropdown);
323
+ text-align: right;
324
+ height: 30px;
325
+ }
326
+ .media-control-audiotracks li[data-title] {
327
+ background-color: #c3c2c2;
328
+ padding: 5px;
329
+ }
330
+ .media-control-audiotracks li a {
331
+ display: block;
332
+ text-decoration: none;
333
+ text-overflow: ellipsis;
334
+ overflow: hidden;
335
+ white-space: nowrap;
336
+ height: 30px;
337
+ padding: 5px 10px;
338
+ color: #fffffe;
339
+ }
340
+ .media-control-audiotracks li a:hover {
341
+ text-decoration: none;
342
+ background-color: rgba(0, 0, 0, 0.4);
343
+ color: white;
344
+ }
345
+ .media-control-audiotracks li.current a {
346
+ color: #f00;
347
+ }
348
+ .media-control-audiotracks li:first-child a {
349
+ border-bottom-left-radius: 4px;
350
+ border-bottom-right-radius: 4px;
351
+ }
352
+ .media-control-audiotracks li:last-child a {
353
+ border-top-left-radius: 4px;
354
+ border-top-right-radius: 4px;
355
+ }
356
+
357
+ @keyframes pulse {
358
+ 0% {
359
+ color: #fff;
360
+ }
361
+ 50% {
362
+ color: #ff0101;
363
+ }
364
+ 100% {
365
+ color: #B80000;
366
+ }
125
367
  }:root {
126
368
  --primary-background-color: #000;
127
369
  --secondary-background-color: #262626;
@@ -504,201 +746,17 @@
504
746
  .mobile .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul {
505
747
  width: 25%;
506
748
  }
507
- }*,
508
- :focus,
509
- :visited {
510
- outline: none !important;
749
+ }.media-control-pip {
750
+ order: 95;
751
+ display: flex;
511
752
  }
512
-
513
- .media-control-audiotracks {
514
- position: relative;
753
+ .media-control-pip button {
754
+ height: 20px;
515
755
  }
516
- .media-control-audiotracks button {
517
- background-color: transparent;
518
- color: #fff;
519
- -webkit-font-smoothing: antialiased;
520
- border: none;
521
- cursor: pointer;
522
- display: flex;
523
- align-items: center;
524
- padding: 0;
525
- }
526
- .media-control-audiotracks button .audio-text {
527
- text-overflow: ellipsis;
528
- overflow: hidden;
529
- white-space: nowrap;
530
- max-width: 100px;
531
- background-color: transparent;
532
- -webkit-font-smoothing: antialiased;
533
- border: none;
534
- cursor: pointer;
535
- }
536
- .media-control-audiotracks button:hover {
537
- color: white;
538
- }
539
- .media-control-audiotracks button.changing {
540
- animation: pulse 0.5s infinite alternate;
541
- }
542
- .media-control-audiotracks button span.audio-arrow {
543
- width: 9px;
544
- height: 6px;
545
- margin-left: 5px;
546
- }
547
- .media-control-audiotracks .menu {
548
- max-width: 114px;
549
- list-style-type: none;
550
- position: absolute;
551
- background-color: rgba(74, 74, 74, 0.6);
552
- border: none;
553
- min-width: 60px;
554
- border-radius: 4px;
555
- bottom: 40px;
556
- right: -2px;
557
- }
558
- .media-control-audiotracks .menu.hidden {
559
- display: none;
560
- }
561
- .media-control-audiotracks li {
562
- font-size: var(--font-size-media-controls-dropdown);
563
- text-align: right;
564
- height: 30px;
565
- }
566
- .media-control-audiotracks li[data-title] {
567
- background-color: #c3c2c2;
568
- padding: 5px;
569
- }
570
- .media-control-audiotracks li a {
571
- display: block;
572
- text-decoration: none;
573
- text-overflow: ellipsis;
574
- overflow: hidden;
575
- white-space: nowrap;
576
- height: 30px;
577
- padding: 5px 10px;
578
- color: #fffffe;
579
- }
580
- .media-control-audiotracks li a:hover {
581
- text-decoration: none;
582
- background-color: rgba(0, 0, 0, 0.4);
583
- color: white;
584
- }
585
- .media-control-audiotracks li.current a {
586
- color: #f00;
587
- }
588
- .media-control-audiotracks li:first-child a {
589
- border-bottom-left-radius: 4px;
590
- border-bottom-right-radius: 4px;
591
- }
592
- .media-control-audiotracks li:last-child a {
593
- border-top-left-radius: 4px;
594
- border-top-right-radius: 4px;
595
- }
596
-
597
- @keyframes pulse {
598
- 0% {
599
- color: #fff;
600
- }
601
- 50% {
602
- color: #ff0101;
603
- }
604
- 100% {
605
- color: #B80000;
606
- }
756
+ .media-control-pip button svg {
757
+ height: 20px;
607
758
  }.clips.bar-container[data-seekbar] {
608
759
  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;
614
- font-weight: bold;
615
- margin-left: 6px;
616
- height: 40px;
617
- line-height: 40px;
618
- margin-left: 0;
619
- }
620
- .dvr-controls[data-dvr] .live-info {
621
- cursor: default;
622
- text-transform: uppercase;
623
- }
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
760
  }div.player-error-screen, [data-player] div.player-error-screen {
703
761
  color: #CCCACA;
704
762
  position: absolute;
@@ -737,6 +795,105 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
737
795
  outline: none !important;
738
796
  }
739
797
 
798
+ .gear-wrapper .go-back {
799
+ font-weight: 600;
800
+ font-size: 14px;
801
+ line-height: 20px;
802
+ width: 100%;
803
+ text-align: left;
804
+ padding: 12px;
805
+ }
806
+ .gear-wrapper .go-back .arrow-left-icon {
807
+ float: left;
808
+ padding-top: 2px;
809
+ padding-right: 2px;
810
+ }
811
+ .gear-wrapper .go-back .arrow-left-icon svg {
812
+ height: 16px;
813
+ }
814
+ .gear-wrapper ul.gear-sub-menu {
815
+ width: 100%;
816
+ list-style-type: none;
817
+ min-width: 60px;
818
+ border-top: 2px solid rgb(36, 36, 36);
819
+ }
820
+ .gear-wrapper ul.gear-sub-menu li {
821
+ font-size: 12px;
822
+ text-align: left;
823
+ }
824
+ .gear-wrapper ul.gear-sub-menu li[data-title] {
825
+ background-color: #c3c2c2;
826
+ padding: 5px;
827
+ }
828
+ .gear-wrapper ul.gear-sub-menu li a {
829
+ display: block;
830
+ text-decoration: none;
831
+ height: 32px;
832
+ padding: 5px 10px;
833
+ line-height: 22px;
834
+ color: #fffffe;
835
+ }
836
+ .gear-wrapper ul.gear-sub-menu li a:hover {
837
+ color: white;
838
+ background-color: rgba(0, 0, 0, 0.4);
839
+ }
840
+ .gear-wrapper ul.gear-sub-menu li a:hover a {
841
+ color: white;
842
+ text-decoration: none;
843
+ }
844
+ .gear-wrapper ul.gear-sub-menu li a .check-icon {
845
+ width: 30px;
846
+ height: 20px;
847
+ float: left;
848
+ display: block;
849
+ }
850
+ .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
851
+ display: none;
852
+ }
853
+ .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
854
+ display: inline;
855
+ }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
856
+ order: 99;
857
+ height: 20px;
858
+ }
859
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
860
+ position: absolute;
861
+ right: 16px;
862
+ bottom: 52px;
863
+ width: 250px;
864
+ min-height: 48px;
865
+ z-index: 9999;
866
+ border-radius: 4px;
867
+ }
868
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
869
+ padding: 8px 0;
870
+ }
871
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list svg {
872
+ float: left;
873
+ margin-right: 10px;
874
+ }
875
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
876
+ margin: 0;
877
+ text-align: left;
878
+ line-height: 22px;
879
+ padding: 5px 14px;
880
+ width: 250px;
881
+ font-size: 12px;
882
+ }
883
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_arrow-right-icon {
884
+ float: right;
885
+ margin-right: -14px;
886
+ }
887
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_value {
888
+ float: right;
889
+ margin-right: 8px;
890
+ }
891
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option svg {
892
+ height: 20px;
893
+ }*, :focus, :visited {
894
+ outline: none !important;
895
+ }
896
+
740
897
  .multicamera[data-multicamera] {
741
898
  float: right;
742
899
  margin-top: 4px;
@@ -797,262 +954,90 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
797
954
  font-size: 10px;
798
955
  cursor: pointer;
799
956
  }
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;
957
+ .multicamera[data-multicamera] li .multicamera-item {
958
+ display: flex;
959
+ padding: 10px 0;
960
+ justify-content: center;
961
+ position: relative;
927
962
  }
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;
963
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
964
+ pointer-events: none;
935
965
  }
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;
966
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
967
+ opacity: 0.5;
939
968
  }
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;
969
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
970
+ opacity: 0.5;
943
971
  }
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;
972
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
973
+ background-color: rgba(0, 0, 0, 0);
948
974
  }
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;
975
+ .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
976
+ background-color: rgba(0, 0, 0, 0.3);
957
977
  }
958
- .gear-wrapper .go-back .arrow-left-icon {
959
- float: left;
960
- padding-top: 2px;
961
- padding-right: 2px;
978
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
979
+ width: 80px;
980
+ height: 60px;
962
981
  }
963
- .gear-wrapper .go-back .arrow-left-icon svg {
964
- height: 16px;
982
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
983
+ width: 80px;
984
+ height: 60px;
965
985
  }
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);
986
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
987
+ width: 120px;
988
+ text-align: left;
989
+ margin-left: 15px;
971
990
  }
972
- .gear-wrapper ul.gear-sub-menu li {
973
- font-size: 12px;
991
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title, .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
992
+ width: 120px;
993
+ height: 20px;
994
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
995
+ font-size: 14px;
996
+ font-weight: normal;
997
+ font-style: normal;
998
+ font-stretch: normal;
999
+ line-height: 1.43;
1000
+ letter-spacing: normal;
974
1001
  text-align: left;
1002
+ color: #fff;
1003
+ text-overflow: ellipsis;
1004
+ overflow: hidden;
975
1005
  }
976
- .gear-wrapper ul.gear-sub-menu li[data-title] {
1006
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1007
+ opacity: 0.6;
1008
+ }
1009
+ .multicamera[data-multicamera] li[data-title] {
977
1010
  background-color: #c3c2c2;
978
1011
  padding: 5px;
979
1012
  }
980
- .gear-wrapper ul.gear-sub-menu li a {
1013
+ .multicamera[data-multicamera] li a {
1014
+ color: #444;
1015
+ padding: 2px 10px;
981
1016
  display: block;
982
1017
  text-decoration: none;
983
- height: 32px;
984
- padding: 5px 10px;
985
- line-height: 22px;
986
- color: #fffffe;
987
1018
  }
988
- .gear-wrapper ul.gear-sub-menu li a:hover {
1019
+ .multicamera[data-multicamera] li a:hover {
1020
+ background-color: #555;
989
1021
  color: white;
990
- background-color: rgba(0, 0, 0, 0.4);
991
1022
  }
992
- .gear-wrapper ul.gear-sub-menu li a:hover a {
1023
+ .multicamera[data-multicamera] li a:hover a {
993
1024
  color: white;
994
1025
  text-decoration: none;
995
1026
  }
996
- .gear-wrapper ul.gear-sub-menu li a .check-icon {
997
- width: 30px;
998
- height: 20px;
999
- float: left;
1000
- display: block;
1001
- }
1002
- .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
1003
- display: none;
1004
- }
1005
- .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
1006
- display: inline;
1007
- }.big-mute-icon-wrapper[data-big-mute] {
1008
- position: absolute;
1009
- z-index: 9998;
1010
- background-color: transparent;
1011
- display: flex;
1012
- justify-content: center;
1013
- width: 100%;
1014
- height: calc(100% - 50px);
1015
- margin: 0 auto;
1016
- opacity: 0.75;
1017
- transition: opacity 0.1s ease;
1018
- pointer-events: auto;
1019
- }
1020
- .big-mute-icon-wrapper[data-big-mute].hide {
1021
- display: none;
1022
- }
1023
- .big-mute-icon-wrapper[data-big-mute]:hover {
1024
- cursor: pointer;
1027
+ .multicamera[data-multicamera] li.current a {
1028
+ color: #f00;
1025
1029
  }
1026
1030
 
1027
- .big-mute-icon[data-big-mute-icon] {
1028
- display: flex;
1029
- align-items: center;
1030
- justify-content: center;
1031
- align-self: center;
1032
- width: 120px;
1033
- height: 120px;
1034
- border: 2px solid white;
1035
- border-radius: 50%;
1036
- filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
1037
- filter: alpha(opacity=60);
1038
- opacity: 1;
1039
- box-shadow: 0 0 1px 0 white;
1040
- background: rgba(240, 243, 247, 0.9411764706);
1041
- z-index: 10000;
1042
- }
1043
- .big-mute-icon[data-big-mute-icon] svg {
1044
- margin-left: 5px;
1045
- width: 80px;
1046
- height: 80px;
1047
- }
1048
- .big-mute-icon[data-big-mute-icon] svg path {
1049
- fill: #1f1e1e !important;
1050
- }
1051
- .big-mute-icon[data-big-mute-icon]:hover {
1052
- background: rgba(240, 243, 247, 0.8784313725);
1053
- }
1054
- .big-mute-icon[data-big-mute-icon]:hover svg path {
1055
- fill: #151515 !important;
1031
+ @keyframes pulse {
1032
+ 0% {
1033
+ color: #fff;
1034
+ }
1035
+ 50% {
1036
+ color: #ff0101;
1037
+ }
1038
+ 100% {
1039
+ color: #B80000;
1040
+ }
1056
1041
  }[data-player] {
1057
1042
  --bottom-panel: 40px;
1058
1043
  }
@@ -1690,53 +1675,122 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1690
1675
  }
1691
1676
  .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-duration] {
1692
1677
  display: none !important;
1693
- }.spinner-three-bounce[data-spinner] {
1678
+ }.gear-option_hd-icon.hidden {
1679
+ display: none;
1680
+ }
1681
+
1682
+ .quality-levels li.disabled {
1683
+ opacity: 0.5;
1684
+ pointer-events: none;
1685
+ }
1686
+ .quality-levels li.current {
1687
+ background-color: #000;
1688
+ }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
1689
+ height: 0;
1690
+ }
1691
+
1692
+ .skip_time_plugin[data-skip-time] {
1694
1693
  position: absolute;
1695
- width: 70px;
1696
- text-align: center;
1694
+ width: 100%;
1695
+ height: calc(100% - 50px);
1696
+ z-index: 9998;
1697
+ background-color: transparent;
1698
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1699
+ }
1700
+ .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] {
1701
+ width: 100%;
1702
+ height: 100%;
1703
+ display: flex;
1704
+ justify-content: space-between;
1705
+ }
1706
+ .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] .skip-item {
1707
+ width: 33.3%;
1708
+ height: 100%;
1709
+ }.context-menu {
1697
1710
  z-index: 999;
1711
+ position: absolute;
1712
+ top: 0;
1698
1713
  left: 0;
1699
- right: 0;
1700
- margin: 0 auto;
1714
+ text-align: center;
1715
+ }
1716
+ .context-menu .context-menu-list {
1717
+ font-family: "Proxima Nova", sans-serif;
1718
+ font-size: 12px;
1719
+ line-height: 12px;
1720
+ list-style-type: none;
1721
+ text-align: left;
1722
+ padding: 5px;
1701
1723
  margin-left: auto;
1702
1724
  margin-right: auto;
1703
- /* center vertically */
1704
- top: 50%;
1705
- transform: translateY(-50%);
1725
+ background-color: rgba(0, 0, 0, 0.75);
1726
+ border: 1px solid #666;
1727
+ border-radius: 4px;
1706
1728
  }
1707
- .spinner-three-bounce[data-spinner] > div {
1708
- width: 18px;
1709
- height: 18px;
1710
- background-color: #FFF;
1711
- border-radius: 100%;
1729
+ .context-menu .context-menu-list .context-menu-list-item {
1730
+ color: white;
1731
+ padding: 5px;
1732
+ cursor: pointer;
1733
+ }.scrub-thumbnails {
1734
+ position: absolute;
1735
+ bottom: 52px;
1736
+ width: 100%;
1737
+ transition: opacity 0.3s ease;
1738
+ }
1739
+ .scrub-thumbnails.hidden {
1740
+ opacity: 0;
1741
+ }
1742
+ .scrub-thumbnails .thumbnail-container {
1712
1743
  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;
1744
+ position: relative;
1745
+ overflow: hidden;
1746
+ background-color: #000;
1747
+ }
1748
+ .scrub-thumbnails .thumbnail-container .thumbnail-img {
1749
+ position: absolute;
1750
+ width: auto;
1751
+ }
1752
+ .scrub-thumbnails .thumbnails-text {
1753
+ background-color: rgba(74, 74, 74, 0.7);
1754
+ border-radius: 3px;
1755
+ white-space: nowrap;
1756
+ overflow: hidden;
1757
+ text-overflow: ellipsis;
1758
+ color: white;
1759
+ position: absolute;
1760
+ bottom: 23px;
1761
+ width: 100px;
1716
1762
  }
1717
- .spinner-three-bounce[data-spinner] [data-bounce1] {
1718
- animation-delay: -0.32s;
1763
+ .scrub-thumbnails .spotlight {
1764
+ background-color: #4a4a4a;
1765
+ overflow: hidden;
1766
+ position: absolute;
1767
+ bottom: 0;
1768
+ left: 0;
1769
+ border-color: #4a4a4a;
1770
+ border-style: solid;
1771
+ border-width: 3px;
1772
+ border-radius: 3px;
1719
1773
  }
1720
- .spinner-three-bounce[data-spinner] [data-bounce2] {
1721
- animation-delay: -0.16s;
1774
+ .scrub-thumbnails .spotlight img {
1775
+ width: auto;
1722
1776
  }
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;
1777
+ .scrub-thumbnails .backdrop {
1778
+ position: absolute;
1779
+ left: 0;
1780
+ bottom: 0;
1781
+ right: 0;
1782
+ background-color: #000;
1783
+ overflow: hidden;
1734
1784
  }
1735
- .media-control-pip button {
1736
- height: 20px;
1785
+ .scrub-thumbnails .backdrop .carousel {
1786
+ position: absolute;
1787
+ top: 0;
1788
+ left: 0;
1789
+ height: 100%;
1790
+ white-space: nowrap;
1737
1791
  }
1738
- .media-control-pip button svg {
1739
- height: 20px;
1792
+ .scrub-thumbnails .backdrop .carousel img {
1793
+ width: auto;
1740
1794
  }.player-poster[data-poster] {
1741
1795
  display: flex;
1742
1796
  justify-content: center;
@@ -1771,39 +1825,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1771
1825
  }
1772
1826
  .player-poster[data-poster] .play-wrapper[data-poster] svg path {
1773
1827
  fill: #fff;
1774
- }.seek-time[data-seek-time] {
1775
- position: absolute;
1776
- white-space: nowrap;
1777
- height: 20px;
1778
- line-height: 20px;
1779
- font-size: 0;
1780
- left: -100%;
1781
- bottom: 55px;
1782
- background-color: rgba(2, 2, 2, 0.5);
1783
- z-index: 9999;
1784
- transition: opacity 0.1s ease;
1785
- }
1786
- .seek-time[data-seek-time].hidden[data-seek-time] {
1787
- opacity: 0;
1788
- }
1789
- .seek-time[data-seek-time] [data-seek-time] {
1790
- display: inline-block;
1791
- color: white;
1792
- font-size: 10px;
1793
- padding-left: 7px;
1794
- padding-right: 7px;
1795
- vertical-align: top;
1796
- }
1797
- .seek-time[data-seek-time] [data-duration] {
1798
- display: inline-block;
1799
- color: rgba(255, 255, 255, 0.5);
1800
- font-size: 10px;
1801
- padding-right: 7px;
1802
- vertical-align: top;
1803
- }
1804
- .seek-time[data-seek-time] [data-duration]::before {
1805
- content: "|";
1806
- margin-right: 7px;
1807
1828
  }.share_plugin[data-share] {
1808
1829
  pointer-events: auto;
1809
1830
  z-index: 5;
@@ -1887,97 +1908,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1887
1908
  display: inline-block;
1888
1909
  margin-right: 5px;
1889
1910
  cursor: pointer;
1890
- }.scrub-thumbnails {
1891
- position: absolute;
1892
- bottom: 52px;
1893
- width: 100%;
1894
- transition: opacity 0.3s ease;
1895
- }
1896
- .scrub-thumbnails.hidden {
1897
- opacity: 0;
1898
- }
1899
- .scrub-thumbnails .thumbnail-container {
1900
- display: inline-block;
1901
- position: relative;
1902
- overflow: hidden;
1903
- background-color: #000;
1904
- }
1905
- .scrub-thumbnails .thumbnail-container .thumbnail-img {
1906
- position: absolute;
1907
- width: auto;
1908
- }
1909
- .scrub-thumbnails .thumbnails-text {
1910
- background-color: rgba(74, 74, 74, 0.7);
1911
- border-radius: 3px;
1912
- white-space: nowrap;
1913
- overflow: hidden;
1914
- text-overflow: ellipsis;
1915
- color: white;
1916
- position: absolute;
1917
- bottom: 23px;
1918
- width: 100px;
1919
- }
1920
- .scrub-thumbnails .spotlight {
1921
- background-color: #4a4a4a;
1922
- overflow: hidden;
1923
- position: absolute;
1924
- bottom: 0;
1925
- left: 0;
1926
- border-color: #4a4a4a;
1927
- border-style: solid;
1928
- border-width: 3px;
1929
- border-radius: 3px;
1930
- }
1931
- .scrub-thumbnails .spotlight img {
1932
- width: auto;
1933
- }
1934
- .scrub-thumbnails .backdrop {
1935
- position: absolute;
1936
- left: 0;
1937
- bottom: 0;
1938
- right: 0;
1939
- background-color: #000;
1940
- overflow: hidden;
1941
- }
1942
- .scrub-thumbnails .backdrop .carousel {
1943
- position: absolute;
1944
- top: 0;
1945
- left: 0;
1946
- height: 100%;
1947
- white-space: nowrap;
1948
- }
1949
- .scrub-thumbnails .backdrop .carousel img {
1950
- 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
- }.player-logo[data-logo] {
1973
- position: absolute;
1974
- z-index: 2;
1975
- width: 100%;
1976
- height: 100%;
1977
- }
1978
-
1979
- .clappr-logo {
1980
- position: absolute;
1981
1911
  }*,
1982
1912
  :focus,
1983
1913
  :visited {
@@ -2052,14 +1982,84 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
2052
1982
  .ios-fullscreen::cue {
2053
1983
  visibility: visible !important;
2054
1984
  font-size: 1em !important;
2055
- }.gear-option_hd-icon.hidden {
2056
- display: none;
1985
+ }.player-logo[data-logo] {
1986
+ position: absolute;
1987
+ z-index: 2;
1988
+ width: 100%;
1989
+ height: 100%;
2057
1990
  }
2058
1991
 
2059
- .quality-levels li.disabled {
2060
- opacity: 0.5;
2061
- pointer-events: none;
1992
+ .clappr-logo {
1993
+ position: absolute;
1994
+ }.spinner-three-bounce[data-spinner] {
1995
+ position: absolute;
1996
+ width: 70px;
1997
+ text-align: center;
1998
+ z-index: 999;
1999
+ left: 0;
2000
+ right: 0;
2001
+ margin: 0 auto;
2002
+ margin-left: auto;
2003
+ margin-right: auto;
2004
+ /* center vertically */
2005
+ top: 50%;
2006
+ transform: translateY(-50%);
2062
2007
  }
2063
- .quality-levels li.current {
2064
- background-color: #000;
2008
+ .spinner-three-bounce[data-spinner] > div {
2009
+ width: 18px;
2010
+ height: 18px;
2011
+ background-color: #FFF;
2012
+ border-radius: 100%;
2013
+ display: inline-block;
2014
+ animation: bouncedelay 1.4s infinite ease-in-out;
2015
+ /* Prevent first frame from flickering when animation starts */
2016
+ animation-fill-mode: both;
2017
+ }
2018
+ .spinner-three-bounce[data-spinner] [data-bounce1] {
2019
+ animation-delay: -0.32s;
2020
+ }
2021
+ .spinner-three-bounce[data-spinner] [data-bounce2] {
2022
+ animation-delay: -0.16s;
2023
+ }
2024
+
2025
+ @keyframes bouncedelay {
2026
+ 0%, 80%, 100% {
2027
+ transform: scale(0);
2028
+ }
2029
+ 40% {
2030
+ transform: scale(1);
2031
+ }
2032
+ }.seek-time[data-seek-time] {
2033
+ position: absolute;
2034
+ white-space: nowrap;
2035
+ height: 20px;
2036
+ line-height: 20px;
2037
+ font-size: 0;
2038
+ left: -100%;
2039
+ bottom: 55px;
2040
+ background-color: rgba(2, 2, 2, 0.5);
2041
+ z-index: 9999;
2042
+ transition: opacity 0.1s ease;
2043
+ }
2044
+ .seek-time[data-seek-time].hidden[data-seek-time] {
2045
+ opacity: 0;
2046
+ }
2047
+ .seek-time[data-seek-time] [data-seek-time] {
2048
+ display: inline-block;
2049
+ color: white;
2050
+ font-size: 10px;
2051
+ padding-left: 7px;
2052
+ padding-right: 7px;
2053
+ vertical-align: top;
2054
+ }
2055
+ .seek-time[data-seek-time] [data-duration] {
2056
+ display: inline-block;
2057
+ color: rgba(255, 255, 255, 0.5);
2058
+ font-size: 10px;
2059
+ padding-right: 7px;
2060
+ vertical-align: top;
2061
+ }
2062
+ .seek-time[data-seek-time] [data-duration]::before {
2063
+ content: "|";
2064
+ margin-right: 7px;
2065
2065
  }