@gcorevideo/player 2.25.9 → 2.25.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css CHANGED
@@ -122,6 +122,130 @@
122
122
  .gplayer-lite-btn::-moz-focus-inner {
123
123
  border: 0;
124
124
  padding: 0;
125
+ }@charset "UTF-8";
126
+ .gplayer-mc-clips {
127
+ display: flex;
128
+ gap: 6px;
129
+ }
130
+ .gplayer-mc-clips .gplayer-mc-clips-text {
131
+ text-overflow: ellipsis;
132
+ white-space: nowrap;
133
+ overflow: hidden;
134
+ display: inline-block;
135
+ text-overflow: ellipsis;
136
+ color: white;
137
+ cursor: default;
138
+ line-height: var(--bottom-panel);
139
+ position: relative;
140
+ max-width: 150px;
141
+ }
142
+ .gplayer-mc-clips .gplayer-mc-clips-text::before {
143
+ content: "•";
144
+ padding-right: 6px;
145
+ }
146
+ .gplayer-mc-clips .gplayer-mc-clips-text.compact {
147
+ max-width: 100px;
148
+ }.media-control-skin-1 .media-control-item.media-control-pip {
149
+ order: 95;
150
+ }
151
+ .media-control-skin-1 .media-control-item.media-control-pip button {
152
+ height: 20px;
153
+ }
154
+ .media-control-skin-1 .media-control-item.media-control-pip button svg {
155
+ height: 20px;
156
+ }.context-menu {
157
+ z-index: 999;
158
+ position: absolute;
159
+ top: 0;
160
+ left: 0;
161
+ text-align: center;
162
+ }
163
+ .context-menu .context-menu-list {
164
+ font-family: "Proxima Nova", sans-serif;
165
+ font-size: 12px;
166
+ line-height: 12px;
167
+ list-style-type: none;
168
+ text-align: left;
169
+ padding: 5px;
170
+ margin-left: auto;
171
+ margin-right: auto;
172
+ background-color: rgba(0, 0, 0, 0.75);
173
+ border: 1px solid #666;
174
+ border-radius: 4px;
175
+ }
176
+ .context-menu .context-menu-list-item button {
177
+ border: none;
178
+ background-color: transparent;
179
+ padding: 0;
180
+ color: white;
181
+ display: flex;
182
+ gap: 8px;
183
+ align-items: center;
184
+ justify-content: center;
185
+ cursor: pointer;
186
+ padding: 5px;
187
+ width: 100%;
188
+ }
189
+ .context-menu .context-menu-list-item_icon {
190
+ width: 20px;
191
+ height: 20px;
192
+ }.dvr-controls {
193
+ --disabled-opacity: 0.3;
194
+ --circle-radius: 5px;
195
+ display: flex;
196
+ align-items: center;
197
+ color: var(--player-dvr-color);
198
+ font-size: 10px;
199
+ font-weight: 500;
200
+ height: var(--bottom-panel);
201
+ line-height: var(--bottom-panel);
202
+ margin-left: 0;
203
+ }
204
+ .dvr-controls .live-info,
205
+ .dvr-controls .live-button {
206
+ font-size: 14px;
207
+ font-weight: 500;
208
+ margin-left: 20px;
209
+ letter-spacing: 0.8px;
210
+ text-transform: uppercase;
211
+ }
212
+ .dvr-controls .live-info::before,
213
+ .dvr-controls .live-button::before {
214
+ margin-right: 8px;
215
+ content: "";
216
+ display: inline-block;
217
+ position: relative;
218
+ width: calc(var(--circle-radius) * 2);
219
+ height: calc(var(--circle-radius) * 2);
220
+ border-radius: var(--circle-radius);
221
+ background-color: var(--player-dvr-color);
222
+ }
223
+ .dvr-controls.disabled {
224
+ opacity: var(--disabled-opacity);
225
+ }
226
+ .dvr-controls.disabled:before {
227
+ background-color: var(--player-dvr-color);
228
+ }
229
+ .dvr-controls .live-info {
230
+ text-transform: uppercase;
231
+ color: #fffffe;
232
+ }
233
+ .dvr-controls .live-info::before {
234
+ background-color: #ed4f4a;
235
+ }
236
+ .dvr-controls .live-button {
237
+ cursor: pointer;
238
+ outline: none;
239
+ border: 0;
240
+ color: var(--player-dvr-color);
241
+ background-color: transparent;
242
+ padding: 0;
243
+ opacity: 0.7;
244
+ transition: all 0.1s ease;
245
+ }
246
+ .dvr-controls .live-button:hover {
247
+ opacity: 1;
248
+ text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
125
249
  }div.player-error-screen, [data-player] div.player-error-screen {
126
250
  color: #CCCACA;
127
251
  position: absolute;
@@ -148,14 +272,252 @@ div.player-error-screen__message[data-error-screen], [data-player] div.player-er
148
272
  width: 90%;
149
273
  margin: 0 auto;
150
274
  }
151
- div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
152
- font-size: 13px;
153
- margin-top: 15px;
275
+ div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
276
+ font-size: 13px;
277
+ margin-top: 15px;
278
+ }
279
+ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
280
+ cursor: pointer;
281
+ width: 30px;
282
+ margin: 15px auto 0;
283
+ }*,
284
+ :focus,
285
+ :visited {
286
+ outline: none !important;
287
+ }
288
+
289
+ .multicamera[data-multicamera] {
290
+ float: right;
291
+ margin-top: 4px;
292
+ position: relative;
293
+ margin-right: 20px;
294
+ width: 20px;
295
+ }
296
+ .multicamera[data-multicamera] button {
297
+ background-color: transparent;
298
+ color: #fff;
299
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
300
+ -webkit-font-smoothing: antialiased;
301
+ border: none;
302
+ font-size: 14px;
303
+ padding: 0;
304
+ }
305
+ .multicamera[data-multicamera] button svg {
306
+ height: 20px;
307
+ position: relative;
308
+ margin-top: 6px;
309
+ }
310
+ .multicamera[data-multicamera] button:hover {
311
+ color: #c9c9c9;
312
+ }
313
+ .multicamera[data-multicamera] button.changing {
314
+ animation: pulse 0.5s infinite alternate;
315
+ }
316
+ .multicamera[data-multicamera] button span.quality-arrow {
317
+ width: 9px;
318
+ height: 6px;
319
+ margin-top: 11px;
320
+ margin-left: 5px;
321
+ }
322
+ .multicamera[data-multicamera] > ul {
323
+ padding: 6px 0;
324
+ right: -24px;
325
+ width: 245px;
326
+ list-style-type: none;
327
+ position: absolute;
328
+ bottom: 48px;
329
+ border-radius: 4px;
330
+ display: none;
331
+ background-color: rgba(74, 74, 74, 0.9);
332
+ }
333
+ .multicamera[data-multicamera] > ul::after {
334
+ content: "";
335
+ position: absolute;
336
+ top: 100%;
337
+ left: 85%;
338
+ margin-left: -10px;
339
+ width: 0;
340
+ height: 0;
341
+ border-top: 10px solid rgba(74, 74, 74, 0.9);
342
+ border-right: 10px solid transparent;
343
+ border-left: 10px solid transparent;
344
+ }
345
+ .multicamera[data-multicamera] li {
346
+ font-size: 10px;
347
+ cursor: pointer;
348
+ }
349
+ .multicamera[data-multicamera] li .multicamera-item {
350
+ display: flex;
351
+ padding: 10px 0;
352
+ justify-content: center;
353
+ position: relative;
354
+ }
355
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
356
+ pointer-events: none;
357
+ }
358
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
359
+ opacity: 0.5;
360
+ }
361
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
362
+ opacity: 0.5;
363
+ }
364
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
365
+ background-color: rgba(0, 0, 0, 0);
366
+ }
367
+ .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
368
+ background-color: rgba(0, 0, 0, 0.3);
369
+ }
370
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
371
+ width: 80px;
372
+ height: 60px;
373
+ }
374
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
375
+ width: 80px;
376
+ height: 60px;
377
+ }
378
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
379
+ width: 120px;
380
+ text-align: left;
381
+ margin-left: 15px;
382
+ }
383
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title,
384
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
385
+ width: 120px;
386
+ height: 20px;
387
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
388
+ font-size: 14px;
389
+ font-weight: normal;
390
+ font-style: normal;
391
+ font-stretch: normal;
392
+ line-height: 1.43;
393
+ letter-spacing: normal;
394
+ text-align: left;
395
+ color: #fff;
396
+ text-overflow: ellipsis;
397
+ overflow: hidden;
398
+ }
399
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
400
+ opacity: 0.6;
401
+ }
402
+ .multicamera[data-multicamera] li a {
403
+ color: #444;
404
+ padding: 2px 10px;
405
+ display: block;
406
+ text-decoration: none;
407
+ }
408
+ .multicamera[data-multicamera] li a:hover {
409
+ background-color: #555;
410
+ color: white;
411
+ }
412
+ .multicamera[data-multicamera] li a:hover a {
413
+ color: white;
414
+ text-decoration: none;
415
+ }
416
+ .multicamera[data-multicamera] li.current a {
417
+ color: #f00;
418
+ }*, :focus, :visited {
419
+ outline: none !important;
420
+ }
421
+
422
+ .gear-wrapper .go-back {
423
+ font-weight: 600;
424
+ font-size: 14px;
425
+ line-height: 20px;
426
+ width: 100%;
427
+ text-align: left;
428
+ padding: 12px;
429
+ }
430
+ .gear-wrapper .go-back .arrow-left-icon {
431
+ float: left;
432
+ padding-top: 2px;
433
+ padding-right: 2px;
434
+ }
435
+ .gear-wrapper .go-back .arrow-left-icon svg {
436
+ height: 16px;
437
+ }
438
+ .gear-wrapper ul.gear-sub-menu {
439
+ width: 100%;
440
+ list-style-type: none;
441
+ min-width: 60px;
442
+ border-top: 2px solid rgb(36, 36, 36);
443
+ overflow-y: auto;
444
+ }
445
+ .gear-wrapper ul.gear-sub-menu li {
446
+ font-size: 12px;
447
+ text-align: left;
448
+ }
449
+ .gear-wrapper ul.gear-sub-menu li a {
450
+ display: block;
451
+ text-decoration: none;
452
+ height: 30px;
453
+ padding: 5px 10px;
454
+ line-height: 22px;
455
+ color: var(--gplayer-mc-text-dim-color);
456
+ }
457
+ .gear-wrapper ul.gear-sub-menu li a:hover {
458
+ color: var(--gplayer-mc-text-color);
459
+ background-color: rgba(0, 0, 0, 0.4);
460
+ }
461
+ .gear-wrapper ul.gear-sub-menu li a:hover a {
462
+ color: var(--gplayer-mc-text-color);
463
+ text-decoration: none;
464
+ }
465
+ .gear-wrapper ul.gear-sub-menu li a .check-icon {
466
+ width: 30px;
467
+ height: 20px;
468
+ float: left;
469
+ display: block;
470
+ }
471
+ .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
472
+ display: none;
473
+ }
474
+ .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
475
+ display: inline;
476
+ }.media-control-skin-1 .media-control-item.media-control-gear {
477
+ order: 99;
478
+ }
479
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-wrapper {
480
+ position: absolute;
481
+ right: 16px;
482
+ bottom: 52px;
483
+ width: 250px;
484
+ min-height: 48px;
485
+ z-index: 9999;
486
+ border-radius: 4px;
487
+ box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);
488
+ }
489
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-options-list {
490
+ padding: 8px 0;
491
+ }
492
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option {
493
+ margin: 0;
494
+ text-align: left;
495
+ line-height: 22px;
496
+ padding: 5px 14px;
497
+ width: 250px;
498
+ font-size: 12px;
499
+ display: flex;
500
+ align-items: center;
501
+ justify-content: flex-start;
502
+ gap: 8px;
503
+ }
504
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon {
505
+ flex: 24px 0 0;
506
+ height: 24px;
507
+ }
508
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon.hidden {
509
+ visibility: hidden;
510
+ display: inline-block;
511
+ }
512
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_label {
513
+ flex: 0 1 100%;
154
514
  }
155
- div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
156
- cursor: pointer;
157
- width: 30px;
158
- margin: 15px auto 0;
515
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_arrow-right-icon {
516
+ flex: 0 0 14px;
517
+ height: 24px;
518
+ }
519
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_value {
520
+ flex: 1 0 auto;
159
521
  }:root {
160
522
  --primary-background-color: #000;
161
523
  --secondary-background-color: #262626;
@@ -520,6 +882,12 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
520
882
  .fullscreen .clappr-nerd-stats .stats-box {
521
883
  top: unset;
522
884
  }
885
+ }.quality-levels li.disabled {
886
+ opacity: 0.5;
887
+ pointer-events: none;
888
+ }
889
+ .quality-levels li.current {
890
+ background-color: #000;
523
891
  }.big-mute-icon-wrapper[data-big-mute] {
524
892
  position: absolute;
525
893
  z-index: 9998;
@@ -569,94 +937,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
569
937
  }
570
938
  .big-mute-icon[data-big-mute-icon]:hover svg path {
571
939
  fill: #151515 !important;
572
- }@charset "UTF-8";
573
- .gplayer-mc-clips {
574
- display: flex;
575
- gap: 6px;
576
- }
577
- .gplayer-mc-clips .gplayer-mc-clips-text {
578
- text-overflow: ellipsis;
579
- white-space: nowrap;
580
- overflow: hidden;
581
- display: inline-block;
582
- text-overflow: ellipsis;
583
- color: white;
584
- cursor: default;
585
- line-height: var(--bottom-panel);
586
- position: relative;
587
- max-width: 150px;
588
- }
589
- .gplayer-mc-clips .gplayer-mc-clips-text::before {
590
- content: "•";
591
- padding-right: 6px;
592
- }
593
- .gplayer-mc-clips .gplayer-mc-clips-text.compact {
594
- max-width: 100px;
595
- }.dvr-controls {
596
- --disabled-opacity: 0.3;
597
- --circle-radius: 5px;
598
- display: flex;
599
- align-items: center;
600
- color: var(--player-dvr-color);
601
- font-size: 10px;
602
- font-weight: 500;
603
- height: var(--bottom-panel);
604
- line-height: var(--bottom-panel);
605
- margin-left: 0;
606
- }
607
- .dvr-controls .live-info,
608
- .dvr-controls .live-button {
609
- font-size: 14px;
610
- font-weight: 500;
611
- margin-left: 20px;
612
- letter-spacing: 0.8px;
613
- text-transform: uppercase;
614
- }
615
- .dvr-controls .live-info::before,
616
- .dvr-controls .live-button::before {
617
- margin-right: 8px;
618
- content: "";
619
- display: inline-block;
620
- position: relative;
621
- width: calc(var(--circle-radius) * 2);
622
- height: calc(var(--circle-radius) * 2);
623
- border-radius: var(--circle-radius);
624
- background-color: var(--player-dvr-color);
625
- }
626
- .dvr-controls.disabled {
627
- opacity: var(--disabled-opacity);
628
- }
629
- .dvr-controls.disabled:before {
630
- background-color: var(--player-dvr-color);
631
- }
632
- .dvr-controls .live-info {
633
- text-transform: uppercase;
634
- color: #fffffe;
635
- }
636
- .dvr-controls .live-info::before {
637
- background-color: #ed4f4a;
638
- }
639
- .dvr-controls .live-button {
640
- cursor: pointer;
641
- outline: none;
642
- border: 0;
643
- color: var(--player-dvr-color);
644
- background-color: transparent;
645
- padding: 0;
646
- opacity: 0.7;
647
- transition: all 0.1s ease;
648
- }
649
- .dvr-controls .live-button:hover {
650
- opacity: 1;
651
- text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
652
- }.media-control-skin-1 .media-control-item.media-control-pip {
653
- order: 95;
654
- }
655
- .media-control-skin-1 .media-control-item.media-control-pip button {
656
- height: 20px;
657
- }
658
- .media-control-skin-1 .media-control-item.media-control-pip button svg {
659
- height: 20px;
660
940
  }.seek-time {
661
941
  position: absolute;
662
942
  white-space: nowrap;
@@ -690,204 +970,89 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
690
970
  .seek-time .seek-time__duration::before {
691
971
  content: "|";
692
972
  margin-right: 7px;
693
- }.quality-levels li.disabled {
694
- opacity: 0.5;
695
- pointer-events: none;
696
- }
697
- .quality-levels li.current {
698
- background-color: #000;
699
- }*,
700
- :focus,
701
- :visited {
702
- outline: none !important;
703
- }
704
-
705
- .multicamera[data-multicamera] {
706
- float: right;
707
- margin-top: 4px;
708
- position: relative;
709
- margin-right: 20px;
710
- width: 20px;
711
- }
712
- .multicamera[data-multicamera] button {
713
- background-color: transparent;
714
- color: #fff;
715
- font-family: Roboto, "Open Sans", Arial, sans-serif;
716
- -webkit-font-smoothing: antialiased;
717
- border: none;
718
- font-size: 14px;
719
- padding: 0;
720
- }
721
- .multicamera[data-multicamera] button svg {
722
- height: 20px;
723
- position: relative;
724
- margin-top: 6px;
725
- }
726
- .multicamera[data-multicamera] button:hover {
727
- color: #c9c9c9;
728
- }
729
- .multicamera[data-multicamera] button.changing {
730
- animation: pulse 0.5s infinite alternate;
731
- }
732
- .multicamera[data-multicamera] button span.quality-arrow {
733
- width: 9px;
734
- height: 6px;
735
- margin-top: 11px;
736
- margin-left: 5px;
737
- }
738
- .multicamera[data-multicamera] > ul {
739
- padding: 6px 0;
740
- right: -24px;
741
- width: 245px;
742
- list-style-type: none;
743
- position: absolute;
744
- bottom: 48px;
745
- border-radius: 4px;
746
- display: none;
747
- background-color: rgba(74, 74, 74, 0.9);
973
+ }.share_plugin[data-share] {
974
+ pointer-events: auto;
975
+ z-index: 5;
976
+ font-family: Roboto, "Open Sans", Arial, sans-serif !important;
748
977
  }
749
- .multicamera[data-multicamera] > ul::after {
750
- content: "";
751
- position: absolute;
752
- top: 100%;
753
- left: 85%;
754
- margin-left: -10px;
755
- width: 0;
756
- height: 0;
757
- border-top: 10px solid rgba(74, 74, 74, 0.9);
758
- border-right: 10px solid transparent;
759
- border-left: 10px solid transparent;
978
+ .share_plugin[data-share].share-hide .share-button-container {
979
+ right: -50px;
760
980
  }
761
- .multicamera[data-multicamera] li {
762
- font-size: 10px;
981
+ .share_plugin[data-share] .share-button-container {
763
982
  cursor: pointer;
983
+ width: 36px;
984
+ height: 36px;
985
+ background-color: rgba(74, 74, 74, 0.6);
986
+ border-radius: 4px;
987
+ position: absolute;
988
+ right: 10px;
989
+ top: 10px;
990
+ padding-top: 6px;
991
+ transition: all 0.3s ease-out;
764
992
  }
765
- .multicamera[data-multicamera] li .multicamera-item {
766
- display: flex;
767
- padding: 10px 0;
768
- justify-content: center;
769
- position: relative;
770
- }
771
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
772
- pointer-events: none;
773
- }
774
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
775
- opacity: 0.5;
776
- }
777
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
778
- opacity: 0.5;
779
- }
780
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
781
- background-color: rgba(0, 0, 0, 0);
782
- }
783
- .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
784
- background-color: rgba(0, 0, 0, 0.3);
785
- }
786
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
787
- width: 80px;
788
- height: 60px;
789
- }
790
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
791
- width: 80px;
792
- height: 60px;
793
- }
794
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
795
- width: 120px;
796
- text-align: left;
797
- margin-left: 15px;
798
- }
799
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title,
800
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
801
- width: 120px;
802
- height: 20px;
803
- font-family: Roboto, "Open Sans", Arial, sans-serif;
804
- font-size: 14px;
805
- font-weight: normal;
806
- font-style: normal;
807
- font-stretch: normal;
808
- line-height: 1.43;
809
- letter-spacing: normal;
810
- text-align: left;
811
- color: #fff;
812
- text-overflow: ellipsis;
813
- overflow: hidden;
814
- }
815
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
816
- opacity: 0.6;
817
- }
818
- .multicamera[data-multicamera] li a {
819
- color: #444;
820
- padding: 2px 10px;
821
- display: block;
822
- text-decoration: none;
823
- }
824
- .multicamera[data-multicamera] li a:hover {
825
- background-color: #555;
826
- color: white;
827
- }
828
- .multicamera[data-multicamera] li a:hover a {
829
- color: white;
830
- text-decoration: none;
831
- }
832
- .multicamera[data-multicamera] li.current a {
833
- color: #f00;
834
- }.container-with-poster-clickable .mc-skip-time {
835
- height: 0;
993
+ .share_plugin[data-share] .share-button-container button[data-share-button] {
994
+ background-color: transparent;
995
+ border: 0;
996
+ margin: 0 6px;
997
+ padding: 0;
998
+ cursor: pointer;
999
+ display: inline-block;
1000
+ width: 19px;
1001
+ height: 20px;
836
1002
  }
837
-
838
- .mc-skip-time {
1003
+ .share_plugin[data-share] .share-container {
1004
+ pointer-events: auto;
839
1005
  position: absolute;
840
- width: 100%;
841
- height: calc(100% - 50px);
842
- z-index: 9998;
843
- background-color: transparent;
844
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1006
+ width: 280px;
1007
+ background-color: white;
1008
+ transform: translate(0, 50%);
1009
+ transform: translate(-50%, -50%);
1010
+ left: 50%;
1011
+ /* margin-left: -140px; */
1012
+ top: calc(50% - 20px);
1013
+ /* margin-top: -170px; */
845
1014
  }
846
- .mc-skip-time .skip-container {
847
- width: 100%;
848
- height: 100%;
849
- display: flex;
850
- justify-content: space-between;
1015
+ .share_plugin[data-share] .share-container .share-container-header {
1016
+ text-align: left;
1017
+ border-bottom: 1px solid rgba(155, 155, 155, 0.25);
851
1018
  }
852
- .mc-skip-time .skip-container .skip-item {
853
- flex: 1 0 0px;
854
- height: 100%;
855
- }.context-menu {
856
- z-index: 999;
857
- position: absolute;
858
- top: 0;
859
- left: 0;
860
- text-align: center;
1019
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1020
+ display: inline-block;
1021
+ font-size: 16px;
1022
+ margin: 5px;
861
1023
  }
862
- .context-menu .context-menu-list {
863
- font-family: "Proxima Nova", sans-serif;
864
- font-size: 12px;
865
- line-height: 12px;
866
- list-style-type: none;
1024
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
1025
+ display: inline-block;
1026
+ width: 24px;
1027
+ float: right;
1028
+ margin: 5px;
1029
+ cursor: pointer;
1030
+ }
1031
+ .share_plugin[data-share] .share-container .share-container-main {
1032
+ margin-bottom: 8px;
1033
+ }
1034
+ .share_plugin[data-share] .share-container .share-container-main > div {
867
1035
  text-align: left;
1036
+ font-size: 14px;
868
1037
  padding: 5px;
869
- margin-left: auto;
870
- margin-right: auto;
871
- background-color: rgba(0, 0, 0, 0.75);
872
- border: 1px solid #666;
873
- border-radius: 4px;
874
1038
  }
875
- .context-menu .context-menu-list-item button {
876
- border: none;
877
- background-color: transparent;
878
- padding: 0;
879
- color: white;
880
- display: flex;
881
- gap: 8px;
882
- align-items: center;
883
- justify-content: center;
884
- cursor: pointer;
1039
+ .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 {
1040
+ overflow: hidden;
1041
+ text-overflow: ellipsis;
1042
+ color: #818181;
1043
+ border: solid 1px #d3d3d3;
1044
+ width: calc(100% - 10px);
885
1045
  padding: 5px;
886
- width: 100%;
887
1046
  }
888
- .context-menu .context-menu-list-item_icon {
889
- width: 20px;
890
- height: 20px;
1047
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
1048
+ max-height: 90px;
1049
+ resize: none;
1050
+ }
1051
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
1052
+ width: 32px;
1053
+ display: inline-block;
1054
+ margin-right: 5px;
1055
+ cursor: pointer;
891
1056
  }[data-player] {
892
1057
  --bottom-panel: 40px;
893
1058
  }
@@ -1513,143 +1678,155 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1513
1678
  100% {
1514
1679
  color: #B80000;
1515
1680
  }
1516
- }*, :focus, :visited {
1517
- outline: none !important;
1518
- }
1519
-
1520
- .gear-wrapper .go-back {
1521
- font-weight: 600;
1522
- font-size: 14px;
1523
- line-height: 20px;
1681
+ }.player-poster {
1682
+ display: flex;
1683
+ justify-content: center;
1684
+ align-items: center;
1685
+ position: absolute;
1686
+ height: 100%;
1524
1687
  width: 100%;
1525
- text-align: left;
1526
- padding: 12px;
1688
+ z-index: 998;
1689
+ top: 0;
1690
+ left: 0;
1691
+ background-color: #000;
1692
+ background-size: cover;
1693
+ background-repeat: no-repeat;
1694
+ background-position: 50% 50%;
1527
1695
  }
1528
- .gear-wrapper .go-back .arrow-left-icon {
1529
- float: left;
1530
- padding-top: 2px;
1531
- padding-right: 2px;
1696
+ .player-poster.clickable {
1697
+ cursor: pointer;
1532
1698
  }
1533
- .gear-wrapper .go-back .arrow-left-icon svg {
1534
- height: 16px;
1699
+ .player-poster:hover .play-wrapper {
1700
+ opacity: 1;
1535
1701
  }
1536
- .gear-wrapper ul.gear-sub-menu {
1702
+ .player-poster .play-wrapper {
1537
1703
  width: 100%;
1538
- list-style-type: none;
1539
- min-width: 60px;
1540
- border-top: 2px solid rgb(36, 36, 36);
1541
- overflow-y: auto;
1542
- }
1543
- .gear-wrapper ul.gear-sub-menu li {
1544
- font-size: 12px;
1545
- text-align: left;
1704
+ height: 25%;
1705
+ margin: 0 auto;
1706
+ opacity: 0.75;
1707
+ transition: opacity 0.1s ease;
1546
1708
  }
1547
- .gear-wrapper ul.gear-sub-menu li a {
1548
- display: block;
1549
- text-decoration: none;
1550
- height: 30px;
1551
- padding: 5px 10px;
1552
- line-height: 22px;
1553
- color: var(--gplayer-mc-text-dim-color);
1709
+ .player-poster .play-wrapper svg {
1710
+ height: 100%;
1711
+ display: inline;
1554
1712
  }
1555
- .gear-wrapper ul.gear-sub-menu li a:hover {
1556
- color: var(--gplayer-mc-text-color);
1557
- background-color: rgba(0, 0, 0, 0.4);
1713
+ .player-poster .play-wrapper svg path {
1714
+ fill: #fff;
1715
+ }.spinner-three-bounce[data-spinner] {
1716
+ position: absolute;
1717
+ width: 70px;
1718
+ text-align: center;
1719
+ z-index: 999;
1720
+ left: 0;
1721
+ right: 0;
1722
+ margin: 0 auto;
1723
+ margin-left: auto;
1724
+ margin-right: auto;
1725
+ /* center vertically */
1726
+ top: 50%;
1727
+ transform: translateY(-50%);
1558
1728
  }
1559
- .gear-wrapper ul.gear-sub-menu li a:hover a {
1560
- color: var(--gplayer-mc-text-color);
1561
- text-decoration: none;
1729
+ .spinner-three-bounce[data-spinner] > div {
1730
+ width: 18px;
1731
+ height: 18px;
1732
+ background-color: #FFF;
1733
+ border-radius: 100%;
1734
+ display: inline-block;
1735
+ animation: bouncedelay 1.4s infinite ease-in-out;
1736
+ /* Prevent first frame from flickering when animation starts */
1737
+ animation-fill-mode: both;
1562
1738
  }
1563
- .gear-wrapper ul.gear-sub-menu li a .check-icon {
1564
- width: 30px;
1565
- height: 20px;
1566
- float: left;
1567
- display: block;
1739
+ .spinner-three-bounce[data-spinner] [data-bounce1] {
1740
+ animation-delay: -0.32s;
1568
1741
  }
1569
- .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
1570
- display: none;
1742
+ .spinner-three-bounce[data-spinner] [data-bounce2] {
1743
+ animation-delay: -0.16s;
1571
1744
  }
1572
- .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
1573
- display: inline;
1574
- }.media-control-skin-1 .media-control-item.media-control-gear {
1575
- order: 99;
1745
+
1746
+ @keyframes bouncedelay {
1747
+ 0%, 80%, 100% {
1748
+ transform: scale(0);
1749
+ }
1750
+ 40% {
1751
+ transform: scale(1);
1752
+ }
1753
+ }.container-with-poster-clickable .mc-skip-time {
1754
+ height: 0;
1576
1755
  }
1577
- .media-control-skin-1 .media-control-item.media-control-gear .gear-wrapper {
1756
+
1757
+ .mc-skip-time {
1578
1758
  position: absolute;
1579
- right: 16px;
1580
- bottom: 52px;
1581
- width: 250px;
1582
- min-height: 48px;
1583
- z-index: 9999;
1584
- border-radius: 4px;
1585
- box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);
1759
+ width: 100%;
1760
+ height: calc(100% - 50px);
1761
+ z-index: 9998;
1762
+ background-color: transparent;
1763
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1586
1764
  }
1587
- .media-control-skin-1 .media-control-item.media-control-gear .gear-options-list {
1588
- padding: 8px 0;
1765
+ .mc-skip-time .skip-container {
1766
+ width: 100%;
1767
+ height: 100%;
1768
+ display: flex;
1769
+ justify-content: space-between;
1589
1770
  }
1590
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option {
1591
- margin: 0;
1592
- text-align: left;
1593
- line-height: 22px;
1594
- padding: 5px 14px;
1595
- width: 250px;
1596
- font-size: 12px;
1771
+ .mc-skip-time .skip-container .skip-item {
1772
+ flex: 1 0 0px;
1773
+ height: 100%;
1774
+ }.media-control-skin-1 .media-control-cc button.media-control-button {
1597
1775
  display: flex;
1776
+ justify-content: center;
1777
+ padding: 0;
1598
1778
  align-items: center;
1599
- justify-content: flex-start;
1600
- gap: 8px;
1779
+ vertical-align: top;
1601
1780
  }
1602
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon {
1603
- flex: 24px 0 0;
1604
- height: 24px;
1781
+ .media-control-skin-1 .media-control-cc button.media-control-button:hover {
1782
+ color: white;
1605
1783
  }
1606
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon.hidden {
1607
- visibility: hidden;
1608
- display: inline-block;
1784
+ .media-control-skin-1 .media-control-cc ul li {
1785
+ text-align: center;
1609
1786
  }
1610
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_label {
1611
- flex: 0 1 100%;
1787
+ .media-control-skin-1 .media-control-cc ul li a {
1788
+ height: 30px;
1789
+ padding: 5px 10px;
1790
+ color: #fffffe;
1612
1791
  }
1613
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_arrow-right-icon {
1614
- flex: 0 0 14px;
1615
- height: 24px;
1792
+ .media-control-skin-1 .media-control-cc ul li a:hover {
1793
+ background-color: rgba(0, 0, 0, 0.4);
1616
1794
  }
1617
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_value {
1618
- flex: 1 0 auto;
1619
- }.player-poster {
1620
- display: flex;
1621
- justify-content: center;
1622
- align-items: center;
1623
- position: absolute;
1624
- height: 100%;
1625
- width: 100%;
1626
- z-index: 998;
1627
- top: 0;
1628
- left: 0;
1629
- background-color: #000;
1630
- background-size: cover;
1631
- background-repeat: no-repeat;
1632
- background-position: 50% 50%;
1795
+ .media-control-skin-1 .media-control-cc ul li.current a {
1796
+ background-color: rgba(0, 0, 0, 0.4);
1633
1797
  }
1634
- .player-poster.clickable {
1635
- cursor: pointer;
1798
+ .media-control-skin-1 .media-control-cc ul li:first-child a {
1799
+ border-bottom-left-radius: 4px;
1800
+ border-bottom-right-radius: 4px;
1636
1801
  }
1637
- .player-poster:hover .play-wrapper {
1638
- opacity: 1;
1802
+ .media-control-skin-1 .media-control-cc ul li:last-child a {
1803
+ border-top-left-radius: 4px;
1804
+ border-top-right-radius: 4px;
1639
1805
  }
1640
- .player-poster .play-wrapper {
1806
+ .media-control-skin-1 .media-control-cc {
1807
+ position: relative;
1808
+ order: 85;
1809
+ }
1810
+
1811
+ .container .gplayer-cc-line {
1812
+ position: absolute;
1813
+ bottom: calc(var(--bottom-panel) + 5px);
1641
1814
  width: 100%;
1642
- height: 25%;
1643
- margin: 0 auto;
1644
- opacity: 0.75;
1645
- transition: opacity 0.1s ease;
1646
1815
  }
1647
- .player-poster .play-wrapper svg {
1816
+ .container .gplayer-cc-line p {
1817
+ width: auto;
1818
+ background-color: rgba(0, 0, 0, 0.4);
1819
+ color: white;
1820
+ display: inline-block;
1821
+ }.player-logo[data-logo] {
1822
+ position: absolute;
1823
+ z-index: 2;
1824
+ width: 100%;
1648
1825
  height: 100%;
1649
- display: inline;
1650
1826
  }
1651
- .player-poster .play-wrapper svg path {
1652
- fill: #fff;
1827
+
1828
+ .clappr-logo {
1829
+ position: absolute;
1653
1830
  }.scrub-thumbnails {
1654
1831
  position: absolute;
1655
1832
  bottom: 52px;
@@ -1713,181 +1890,4 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1713
1890
  }
1714
1891
  .scrub-thumbnails .backdrop .carousel img {
1715
1892
  width: auto;
1716
- }.share_plugin[data-share] {
1717
- pointer-events: auto;
1718
- z-index: 5;
1719
- font-family: Roboto, "Open Sans", Arial, sans-serif !important;
1720
- }
1721
- .share_plugin[data-share].share-hide .share-button-container {
1722
- right: -50px;
1723
- }
1724
- .share_plugin[data-share] .share-button-container {
1725
- cursor: pointer;
1726
- width: 36px;
1727
- height: 36px;
1728
- background-color: rgba(74, 74, 74, 0.6);
1729
- border-radius: 4px;
1730
- position: absolute;
1731
- right: 10px;
1732
- top: 10px;
1733
- padding-top: 6px;
1734
- transition: all 0.3s ease-out;
1735
- }
1736
- .share_plugin[data-share] .share-button-container button[data-share-button] {
1737
- background-color: transparent;
1738
- border: 0;
1739
- margin: 0 6px;
1740
- padding: 0;
1741
- cursor: pointer;
1742
- display: inline-block;
1743
- width: 19px;
1744
- height: 20px;
1745
- }
1746
- .share_plugin[data-share] .share-container {
1747
- pointer-events: auto;
1748
- position: absolute;
1749
- width: 280px;
1750
- background-color: white;
1751
- transform: translate(0, 50%);
1752
- transform: translate(-50%, -50%);
1753
- left: 50%;
1754
- /* margin-left: -140px; */
1755
- top: calc(50% - 20px);
1756
- /* margin-top: -170px; */
1757
- }
1758
- .share_plugin[data-share] .share-container .share-container-header {
1759
- text-align: left;
1760
- border-bottom: 1px solid rgba(155, 155, 155, 0.25);
1761
- }
1762
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1763
- display: inline-block;
1764
- font-size: 16px;
1765
- margin: 5px;
1766
- }
1767
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
1768
- display: inline-block;
1769
- width: 24px;
1770
- float: right;
1771
- margin: 5px;
1772
- cursor: pointer;
1773
- }
1774
- .share_plugin[data-share] .share-container .share-container-main {
1775
- margin-bottom: 8px;
1776
- }
1777
- .share_plugin[data-share] .share-container .share-container-main > div {
1778
- text-align: left;
1779
- font-size: 14px;
1780
- padding: 5px;
1781
- }
1782
- .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 {
1783
- overflow: hidden;
1784
- text-overflow: ellipsis;
1785
- color: #818181;
1786
- border: solid 1px #d3d3d3;
1787
- width: calc(100% - 10px);
1788
- padding: 5px;
1789
- }
1790
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
1791
- max-height: 90px;
1792
- resize: none;
1793
- }
1794
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
1795
- width: 32px;
1796
- display: inline-block;
1797
- margin-right: 5px;
1798
- cursor: pointer;
1799
- }.media-control-skin-1 .media-control-cc button.media-control-button {
1800
- display: flex;
1801
- justify-content: center;
1802
- padding: 0;
1803
- align-items: center;
1804
- vertical-align: top;
1805
- }
1806
- .media-control-skin-1 .media-control-cc button.media-control-button:hover {
1807
- color: white;
1808
- }
1809
- .media-control-skin-1 .media-control-cc ul li {
1810
- text-align: center;
1811
- }
1812
- .media-control-skin-1 .media-control-cc ul li a {
1813
- height: 30px;
1814
- padding: 5px 10px;
1815
- color: #fffffe;
1816
- }
1817
- .media-control-skin-1 .media-control-cc ul li a:hover {
1818
- background-color: rgba(0, 0, 0, 0.4);
1819
- }
1820
- .media-control-skin-1 .media-control-cc ul li.current a {
1821
- background-color: rgba(0, 0, 0, 0.4);
1822
- }
1823
- .media-control-skin-1 .media-control-cc ul li:first-child a {
1824
- border-bottom-left-radius: 4px;
1825
- border-bottom-right-radius: 4px;
1826
- }
1827
- .media-control-skin-1 .media-control-cc ul li:last-child a {
1828
- border-top-left-radius: 4px;
1829
- border-top-right-radius: 4px;
1830
- }
1831
- .media-control-skin-1 .media-control-cc {
1832
- position: relative;
1833
- order: 85;
1834
- }
1835
-
1836
- .container .gplayer-cc-line {
1837
- position: absolute;
1838
- bottom: calc(var(--bottom-panel) + 5px);
1839
- width: 100%;
1840
- }
1841
- .container .gplayer-cc-line p {
1842
- width: auto;
1843
- background-color: rgba(0, 0, 0, 0.4);
1844
- color: white;
1845
- display: inline-block;
1846
- }.spinner-three-bounce[data-spinner] {
1847
- position: absolute;
1848
- width: 70px;
1849
- text-align: center;
1850
- z-index: 999;
1851
- left: 0;
1852
- right: 0;
1853
- margin: 0 auto;
1854
- margin-left: auto;
1855
- margin-right: auto;
1856
- /* center vertically */
1857
- top: 50%;
1858
- transform: translateY(-50%);
1859
- }
1860
- .spinner-three-bounce[data-spinner] > div {
1861
- width: 18px;
1862
- height: 18px;
1863
- background-color: #FFF;
1864
- border-radius: 100%;
1865
- display: inline-block;
1866
- animation: bouncedelay 1.4s infinite ease-in-out;
1867
- /* Prevent first frame from flickering when animation starts */
1868
- animation-fill-mode: both;
1869
- }
1870
- .spinner-three-bounce[data-spinner] [data-bounce1] {
1871
- animation-delay: -0.32s;
1872
- }
1873
- .spinner-three-bounce[data-spinner] [data-bounce2] {
1874
- animation-delay: -0.16s;
1875
- }
1876
-
1877
- @keyframes bouncedelay {
1878
- 0%, 80%, 100% {
1879
- transform: scale(0);
1880
- }
1881
- 40% {
1882
- transform: scale(1);
1883
- }
1884
- }.player-logo[data-logo] {
1885
- position: absolute;
1886
- z-index: 2;
1887
- width: 100%;
1888
- height: 100%;
1889
- }
1890
-
1891
- .clappr-logo {
1892
- position: absolute;
1893
1893
  }