@gcorevideo/player 2.28.0 → 2.28.1

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,223 @@
122
122
  .gplayer-lite-btn::-moz-focus-inner {
123
123
  border: 0;
124
124
  padding: 0;
125
+ }*, :focus, :visited {
126
+ outline: none !important;
127
+ }
128
+
129
+ .gear-wrapper .go-back {
130
+ font-weight: 600;
131
+ font-size: 14px;
132
+ line-height: 20px;
133
+ width: 100%;
134
+ text-align: left;
135
+ padding: 12px;
136
+ }
137
+ .gear-wrapper .go-back .arrow-left-icon {
138
+ float: left;
139
+ padding-top: 2px;
140
+ padding-right: 2px;
141
+ }
142
+ .gear-wrapper .go-back .arrow-left-icon svg {
143
+ height: 16px;
144
+ }
145
+ .gear-wrapper ul.gear-sub-menu {
146
+ width: 100%;
147
+ list-style-type: none;
148
+ min-width: 60px;
149
+ border-top: 2px solid rgb(36, 36, 36);
150
+ overflow-y: auto;
151
+ }
152
+ .gear-wrapper ul.gear-sub-menu li {
153
+ font-size: 12px;
154
+ text-align: left;
155
+ }
156
+ .gear-wrapper ul.gear-sub-menu li a {
157
+ display: block;
158
+ text-decoration: none;
159
+ height: 30px;
160
+ padding: 5px 10px;
161
+ line-height: 22px;
162
+ color: var(--gplayer-mc-text-dim-color);
163
+ }
164
+ .gear-wrapper ul.gear-sub-menu li a:hover {
165
+ color: var(--gplayer-mc-text-color);
166
+ background-color: rgba(0, 0, 0, 0.4);
167
+ }
168
+ .gear-wrapper ul.gear-sub-menu li a:hover a {
169
+ color: var(--gplayer-mc-text-color);
170
+ text-decoration: none;
171
+ }
172
+ .gear-wrapper ul.gear-sub-menu li a .check-icon {
173
+ width: 30px;
174
+ height: 20px;
175
+ float: left;
176
+ display: block;
177
+ }
178
+ .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
179
+ display: none;
180
+ }
181
+ .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
182
+ display: inline;
183
+ }.media-control-skin-1 .media-control-item.media-control-gear {
184
+ order: 99;
185
+ }
186
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-wrapper {
187
+ position: absolute;
188
+ right: 16px;
189
+ bottom: 52px;
190
+ width: 250px;
191
+ min-height: 48px;
192
+ z-index: 9999;
193
+ border-radius: 4px;
194
+ box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);
195
+ }
196
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-options-list {
197
+ padding: 8px 0;
198
+ }
199
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option {
200
+ margin: 0;
201
+ text-align: left;
202
+ line-height: 22px;
203
+ padding: 5px 14px;
204
+ width: 250px;
205
+ font-size: 12px;
206
+ display: flex;
207
+ align-items: center;
208
+ justify-content: flex-start;
209
+ gap: 8px;
210
+ }
211
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon {
212
+ flex: 24px 0 0;
213
+ height: 24px;
214
+ }
215
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon.hidden {
216
+ visibility: hidden;
217
+ display: inline-block;
218
+ }
219
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_label {
220
+ flex: 0 1 100%;
221
+ }
222
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_arrow-right-icon {
223
+ flex: 0 0 14px;
224
+ height: 24px;
225
+ }
226
+ .media-control-skin-1 .media-control-item.media-control-gear .gear-option_value {
227
+ flex: 1 0 auto;
228
+ }.dvr-controls {
229
+ --disabled-opacity: 0.3;
230
+ --circle-radius: 5px;
231
+ display: flex;
232
+ align-items: center;
233
+ color: var(--player-dvr-color);
234
+ font-size: 10px;
235
+ font-weight: 500;
236
+ height: var(--bottom-panel);
237
+ line-height: var(--bottom-panel);
238
+ margin-left: 0;
239
+ }
240
+ .dvr-controls .live-info,
241
+ .dvr-controls .live-button {
242
+ font-size: 14px;
243
+ font-weight: 500;
244
+ margin-left: 20px;
245
+ letter-spacing: 0.8px;
246
+ text-transform: uppercase;
247
+ }
248
+ .dvr-controls .live-info::before,
249
+ .dvr-controls .live-button::before {
250
+ margin-right: 8px;
251
+ content: "";
252
+ display: inline-block;
253
+ position: relative;
254
+ width: calc(var(--circle-radius) * 2);
255
+ height: calc(var(--circle-radius) * 2);
256
+ border-radius: var(--circle-radius);
257
+ background-color: var(--player-dvr-color);
258
+ }
259
+ .dvr-controls.disabled {
260
+ opacity: var(--disabled-opacity);
261
+ }
262
+ .dvr-controls.disabled:before {
263
+ background-color: var(--player-dvr-color);
264
+ }
265
+ .dvr-controls .live-info {
266
+ text-transform: uppercase;
267
+ color: #fffffe;
268
+ }
269
+ .dvr-controls .live-info::before {
270
+ background-color: #ed4f4a;
271
+ }
272
+ .dvr-controls .live-button {
273
+ cursor: pointer;
274
+ outline: none;
275
+ border: 0;
276
+ color: var(--player-dvr-color);
277
+ background-color: transparent;
278
+ padding: 0;
279
+ opacity: 0.7;
280
+ transition: all 0.1s ease;
281
+ }
282
+ .dvr-controls .live-button:hover {
283
+ opacity: 1;
284
+ text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
285
+ }@charset "UTF-8";
286
+ .gplayer-mc-clips {
287
+ display: flex;
288
+ gap: 6px;
289
+ }
290
+ .gplayer-mc-clips .gplayer-mc-clips-text {
291
+ text-overflow: ellipsis;
292
+ white-space: nowrap;
293
+ overflow: hidden;
294
+ display: inline-block;
295
+ text-overflow: ellipsis;
296
+ color: white;
297
+ cursor: default;
298
+ line-height: var(--bottom-panel);
299
+ position: relative;
300
+ max-width: 150px;
301
+ }
302
+ .gplayer-mc-clips .gplayer-mc-clips-text::before {
303
+ content: "•";
304
+ padding-right: 6px;
305
+ }
306
+ .gplayer-mc-clips .gplayer-mc-clips-text.compact {
307
+ max-width: 100px;
308
+ }.player-poster {
309
+ display: flex;
310
+ justify-content: center;
311
+ align-items: center;
312
+ position: absolute;
313
+ height: 100%;
314
+ width: 100%;
315
+ z-index: 998;
316
+ top: 0;
317
+ left: 0;
318
+ background-color: #000;
319
+ background-size: cover;
320
+ background-repeat: no-repeat;
321
+ background-position: 50% 50%;
322
+ }
323
+ .player-poster.clickable {
324
+ cursor: pointer;
325
+ }
326
+ .player-poster:hover .play-wrapper {
327
+ opacity: 1;
328
+ }
329
+ .player-poster .play-wrapper {
330
+ width: 100%;
331
+ height: 25%;
332
+ margin: 0 auto;
333
+ opacity: 0.75;
334
+ transition: opacity 0.1s ease;
335
+ }
336
+ .player-poster .play-wrapper svg {
337
+ height: 100%;
338
+ display: inline;
339
+ }
340
+ .player-poster .play-wrapper svg path {
341
+ fill: #fff;
125
342
  }:root {
126
343
  --primary-background-color: #000;
127
344
  --secondary-background-color: #262626;
@@ -486,175 +703,12 @@
486
703
  .fullscreen .clappr-nerd-stats .stats-box {
487
704
  top: unset;
488
705
  }
489
- }@charset "UTF-8";
490
- .gplayer-mc-clips {
491
- display: flex;
492
- gap: 6px;
493
- }
494
- .gplayer-mc-clips .gplayer-mc-clips-text {
495
- text-overflow: ellipsis;
496
- white-space: nowrap;
497
- overflow: hidden;
498
- display: inline-block;
499
- text-overflow: ellipsis;
500
- color: white;
501
- cursor: default;
502
- line-height: var(--bottom-panel);
503
- position: relative;
504
- max-width: 150px;
505
- }
506
- .gplayer-mc-clips .gplayer-mc-clips-text::before {
507
- content: "•";
508
- padding-right: 6px;
509
- }
510
- .gplayer-mc-clips .gplayer-mc-clips-text.compact {
511
- max-width: 100px;
512
- }.big-mute-icon-wrapper[data-big-mute] {
706
+ }.context-menu {
707
+ z-index: 999;
513
708
  position: absolute;
514
- z-index: 9998;
515
- background-color: transparent;
516
- display: flex;
517
- justify-content: center;
518
- width: 100%;
519
- height: calc(100% - 50px);
520
- margin: 0 auto;
521
- opacity: 0.75;
522
- transition: opacity 0.1s ease;
523
- pointer-events: auto;
524
- }
525
- .big-mute-icon-wrapper[data-big-mute].hide {
526
- display: none;
527
- }
528
- .big-mute-icon-wrapper[data-big-mute]:hover {
529
- cursor: pointer;
530
- }
531
-
532
- .big-mute-icon[data-big-mute-icon] {
533
- display: flex;
534
- align-items: center;
535
- justify-content: center;
536
- align-self: center;
537
- width: 120px;
538
- height: 120px;
539
- border: 2px solid white;
540
- border-radius: 50%;
541
- filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
542
- filter: alpha(opacity=60);
543
- opacity: 1;
544
- box-shadow: 0 0 1px 0 white;
545
- background: rgba(240, 243, 247, 0.9411764706);
546
- z-index: 10000;
547
- }
548
- .big-mute-icon[data-big-mute-icon] svg {
549
- margin-left: 5px;
550
- width: 80px;
551
- height: 80px;
552
- }
553
- .big-mute-icon[data-big-mute-icon] svg path {
554
- fill: #1f1e1e !important;
555
- }
556
- .big-mute-icon[data-big-mute-icon]:hover {
557
- background: rgba(240, 243, 247, 0.8784313725);
558
- }
559
- .big-mute-icon[data-big-mute-icon]:hover svg path {
560
- fill: #151515 !important;
561
- }.dvr-controls {
562
- --disabled-opacity: 0.3;
563
- --circle-radius: 5px;
564
- display: flex;
565
- align-items: center;
566
- color: var(--player-dvr-color);
567
- font-size: 10px;
568
- font-weight: 500;
569
- height: var(--bottom-panel);
570
- line-height: var(--bottom-panel);
571
- margin-left: 0;
572
- }
573
- .dvr-controls .live-info,
574
- .dvr-controls .live-button {
575
- font-size: 14px;
576
- font-weight: 500;
577
- margin-left: 20px;
578
- letter-spacing: 0.8px;
579
- text-transform: uppercase;
580
- }
581
- .dvr-controls .live-info::before,
582
- .dvr-controls .live-button::before {
583
- margin-right: 8px;
584
- content: "";
585
- display: inline-block;
586
- position: relative;
587
- width: calc(var(--circle-radius) * 2);
588
- height: calc(var(--circle-radius) * 2);
589
- border-radius: var(--circle-radius);
590
- background-color: var(--player-dvr-color);
591
- }
592
- .dvr-controls.disabled {
593
- opacity: var(--disabled-opacity);
594
- }
595
- .dvr-controls.disabled:before {
596
- background-color: var(--player-dvr-color);
597
- }
598
- .dvr-controls .live-info {
599
- text-transform: uppercase;
600
- color: #fffffe;
601
- }
602
- .dvr-controls .live-info::before {
603
- background-color: #ed4f4a;
604
- }
605
- .dvr-controls .live-button {
606
- cursor: pointer;
607
- outline: none;
608
- border: 0;
609
- color: var(--player-dvr-color);
610
- background-color: transparent;
611
- padding: 0;
612
- opacity: 0.7;
613
- transition: all 0.1s ease;
614
- }
615
- .dvr-controls .live-button:hover {
616
- opacity: 1;
617
- text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
618
- }.player-poster {
619
- display: flex;
620
- justify-content: center;
621
- align-items: center;
622
- position: absolute;
623
- height: 100%;
624
- width: 100%;
625
- z-index: 998;
626
- top: 0;
627
- left: 0;
628
- background-color: #000;
629
- background-size: cover;
630
- background-repeat: no-repeat;
631
- background-position: 50% 50%;
632
- }
633
- .player-poster.clickable {
634
- cursor: pointer;
635
- }
636
- .player-poster:hover .play-wrapper {
637
- opacity: 1;
638
- }
639
- .player-poster .play-wrapper {
640
- width: 100%;
641
- height: 25%;
642
- margin: 0 auto;
643
- opacity: 0.75;
644
- transition: opacity 0.1s ease;
645
- }
646
- .player-poster .play-wrapper svg {
647
- height: 100%;
648
- display: inline;
649
- }
650
- .player-poster .play-wrapper svg path {
651
- fill: #fff;
652
- }.context-menu {
653
- z-index: 999;
654
- position: absolute;
655
- top: 0;
656
- left: 0;
657
- text-align: center;
709
+ top: 0;
710
+ left: 0;
711
+ text-align: center;
658
712
  }
659
713
  .context-menu .context-menu-list {
660
714
  font-family: "Proxima Nova", sans-serif;
@@ -685,149 +739,127 @@
685
739
  .context-menu .context-menu-list-item_icon {
686
740
  width: 20px;
687
741
  height: 20px;
688
- }.media-control-skin-1 .media-control-item.media-control-gear {
689
- order: 99;
690
- }
691
- .media-control-skin-1 .media-control-item.media-control-gear .gear-wrapper {
692
- position: absolute;
693
- right: 16px;
694
- bottom: 52px;
695
- width: 250px;
696
- min-height: 48px;
697
- z-index: 9999;
698
- border-radius: 4px;
699
- box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);
700
- }
701
- .media-control-skin-1 .media-control-item.media-control-gear .gear-options-list {
702
- padding: 8px 0;
742
+ }.share_plugin[data-share] {
743
+ pointer-events: auto;
744
+ z-index: 5;
745
+ font-family: Roboto, "Open Sans", Arial, sans-serif !important;
703
746
  }
704
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option {
705
- margin: 0;
706
- text-align: left;
707
- line-height: 22px;
708
- padding: 5px 14px;
709
- width: 250px;
710
- font-size: 12px;
711
- display: flex;
712
- align-items: center;
713
- justify-content: flex-start;
714
- gap: 8px;
747
+ .share_plugin[data-share].share-hide .share-button-container {
748
+ right: -50px;
715
749
  }
716
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon {
717
- flex: 24px 0 0;
718
- height: 24px;
750
+ .share_plugin[data-share] .share-button-container {
751
+ cursor: pointer;
752
+ width: 36px;
753
+ height: 36px;
754
+ background-color: rgba(74, 74, 74, 0.6);
755
+ border-radius: 4px;
756
+ position: absolute;
757
+ right: 10px;
758
+ top: 10px;
759
+ padding-top: 6px;
760
+ transition: all 0.3s ease-out;
719
761
  }
720
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon.hidden {
721
- visibility: hidden;
762
+ .share_plugin[data-share] .share-button-container button[data-share-button] {
763
+ background-color: transparent;
764
+ border: 0;
765
+ margin: 0 6px;
766
+ padding: 0;
767
+ cursor: pointer;
722
768
  display: inline-block;
769
+ width: 19px;
770
+ height: 20px;
723
771
  }
724
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_label {
725
- flex: 0 1 100%;
726
- }
727
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_arrow-right-icon {
728
- flex: 0 0 14px;
729
- height: 24px;
730
- }
731
- .media-control-skin-1 .media-control-item.media-control-gear .gear-option_value {
732
- flex: 1 0 auto;
733
- }*, :focus, :visited {
734
- outline: none !important;
772
+ .share_plugin[data-share] .share-container {
773
+ pointer-events: auto;
774
+ position: absolute;
775
+ width: 280px;
776
+ background-color: white;
777
+ transform: translate(0, 50%);
778
+ transform: translate(-50%, -50%);
779
+ left: 50%;
780
+ /* margin-left: -140px; */
781
+ top: calc(50% - 20px);
782
+ /* margin-top: -170px; */
735
783
  }
736
-
737
- .gear-wrapper .go-back {
738
- font-weight: 600;
739
- font-size: 14px;
740
- line-height: 20px;
741
- width: 100%;
784
+ .share_plugin[data-share] .share-container .share-container-header {
742
785
  text-align: left;
743
- padding: 12px;
786
+ border-bottom: 1px solid rgba(155, 155, 155, 0.25);
744
787
  }
745
- .gear-wrapper .go-back .arrow-left-icon {
746
- float: left;
747
- padding-top: 2px;
748
- padding-right: 2px;
788
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
789
+ display: inline-block;
790
+ font-size: 16px;
791
+ margin: 5px;
749
792
  }
750
- .gear-wrapper .go-back .arrow-left-icon svg {
751
- height: 16px;
793
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
794
+ display: inline-block;
795
+ width: 24px;
796
+ float: right;
797
+ margin: 5px;
798
+ cursor: pointer;
752
799
  }
753
- .gear-wrapper ul.gear-sub-menu {
754
- width: 100%;
755
- list-style-type: none;
756
- min-width: 60px;
757
- border-top: 2px solid rgb(36, 36, 36);
758
- overflow-y: auto;
800
+ .share_plugin[data-share] .share-container .share-container-main {
801
+ margin-bottom: 8px;
759
802
  }
760
- .gear-wrapper ul.gear-sub-menu li {
761
- font-size: 12px;
803
+ .share_plugin[data-share] .share-container .share-container-main > div {
762
804
  text-align: left;
805
+ font-size: 14px;
806
+ padding: 5px;
763
807
  }
764
- .gear-wrapper ul.gear-sub-menu li a {
765
- display: block;
766
- text-decoration: none;
767
- height: 30px;
768
- padding: 5px 10px;
769
- line-height: 22px;
770
- color: var(--gplayer-mc-text-dim-color);
771
- }
772
- .gear-wrapper ul.gear-sub-menu li a:hover {
773
- color: var(--gplayer-mc-text-color);
774
- background-color: rgba(0, 0, 0, 0.4);
775
- }
776
- .gear-wrapper ul.gear-sub-menu li a:hover a {
777
- color: var(--gplayer-mc-text-color);
778
- text-decoration: none;
779
- }
780
- .gear-wrapper ul.gear-sub-menu li a .check-icon {
781
- width: 30px;
782
- height: 20px;
783
- float: left;
784
- display: block;
785
- }
786
- .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
787
- display: none;
808
+ .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 {
809
+ overflow: hidden;
810
+ text-overflow: ellipsis;
811
+ color: #818181;
812
+ border: solid 1px #d3d3d3;
813
+ width: calc(100% - 10px);
814
+ padding: 5px;
788
815
  }
789
- .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
790
- display: inline;
791
- }.quality-levels li.disabled {
792
- opacity: 0.5;
793
- pointer-events: none;
816
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
817
+ max-height: 90px;
818
+ resize: none;
794
819
  }
795
- .quality-levels li.current {
796
- background-color: #000;
797
- }div.player-error-screen, [data-player] div.player-error-screen {
798
- color: #CCCACA;
820
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
821
+ width: 32px;
822
+ display: inline-block;
823
+ margin-right: 5px;
824
+ cursor: pointer;
825
+ }.spinner-three-bounce[data-spinner] {
799
826
  position: absolute;
800
- top: 0;
801
- height: 100%;
802
- width: 100%;
803
- background-color: rgba(0, 0, 0, 0.7);
804
- z-index: 2000;
805
- display: flex;
806
- flex-direction: column;
807
- justify-content: center;
808
- }
809
- div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
810
- font-size: 14px;
811
- color: #CCCACA;
812
- margin-top: 45px;
827
+ width: 70px;
828
+ text-align: center;
829
+ z-index: 999;
830
+ left: 0;
831
+ right: 0;
832
+ margin: 0 auto;
833
+ margin-left: auto;
834
+ margin-right: auto;
835
+ /* center vertically */
836
+ top: 50%;
837
+ transform: translateY(-50%);
813
838
  }
814
- div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
815
- font-weight: bold;
816
- line-height: 30px;
817
- font-size: 18px;
839
+ .spinner-three-bounce[data-spinner] > div {
840
+ width: 18px;
841
+ height: 18px;
842
+ background-color: #FFF;
843
+ border-radius: 100%;
844
+ display: inline-block;
845
+ animation: bouncedelay 1.4s infinite ease-in-out;
846
+ /* Prevent first frame from flickering when animation starts */
847
+ animation-fill-mode: both;
818
848
  }
819
- div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
820
- width: 90%;
821
- margin: 0 auto;
849
+ .spinner-three-bounce[data-spinner] [data-bounce1] {
850
+ animation-delay: -0.32s;
822
851
  }
823
- div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
824
- font-size: 13px;
825
- margin-top: 15px;
852
+ .spinner-three-bounce[data-spinner] [data-bounce2] {
853
+ animation-delay: -0.16s;
826
854
  }
827
- div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
828
- cursor: pointer;
829
- width: 30px;
830
- margin: 15px auto 0;
855
+
856
+ @keyframes bouncedelay {
857
+ 0%, 80%, 100% {
858
+ transform: scale(0);
859
+ }
860
+ 40% {
861
+ transform: scale(1);
862
+ }
831
863
  }.media-control-skin-1 .media-control-item.media-control-pip {
832
864
  order: 95;
833
865
  }
@@ -850,13 +882,148 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
850
882
  }
851
883
  .mc-skip-time .skip-container {
852
884
  width: 100%;
853
- height: 100%;
854
- display: flex;
855
- justify-content: space-between;
885
+ height: 100%;
886
+ display: flex;
887
+ justify-content: space-between;
888
+ }
889
+ .mc-skip-time .skip-container .skip-item {
890
+ flex: 1 0 0px;
891
+ height: 100%;
892
+ }.seek-time {
893
+ position: absolute;
894
+ white-space: nowrap;
895
+ height: 20px;
896
+ line-height: 20px;
897
+ font-size: 0;
898
+ left: -100%;
899
+ bottom: 55px;
900
+ background-color: rgba(2, 2, 2, 0.5);
901
+ z-index: 9999;
902
+ transition: opacity 0.1s ease;
903
+ }
904
+ .seek-time.hidden {
905
+ opacity: 0;
906
+ }
907
+ .seek-time .seek-time__pos {
908
+ display: inline-block;
909
+ color: white;
910
+ font-size: 10px;
911
+ padding-left: 7px;
912
+ padding-right: 7px;
913
+ vertical-align: top;
914
+ }
915
+ .seek-time .seek-time__duration {
916
+ display: inline-block;
917
+ color: rgba(255, 255, 255, 0.5);
918
+ font-size: 10px;
919
+ padding-right: 7px;
920
+ vertical-align: top;
921
+ }
922
+ .seek-time .seek-time__duration::before {
923
+ content: "|";
924
+ margin-right: 7px;
925
+ }.big-mute-icon-wrapper[data-big-mute] {
926
+ position: absolute;
927
+ z-index: 9998;
928
+ background-color: transparent;
929
+ display: flex;
930
+ justify-content: center;
931
+ width: 100%;
932
+ height: calc(100% - 50px);
933
+ margin: 0 auto;
934
+ opacity: 0.75;
935
+ transition: opacity 0.1s ease;
936
+ pointer-events: auto;
937
+ }
938
+ .big-mute-icon-wrapper[data-big-mute].hide {
939
+ display: none;
940
+ }
941
+ .big-mute-icon-wrapper[data-big-mute]:hover {
942
+ cursor: pointer;
943
+ }
944
+
945
+ .big-mute-icon[data-big-mute-icon] {
946
+ display: flex;
947
+ align-items: center;
948
+ justify-content: center;
949
+ align-self: center;
950
+ width: 120px;
951
+ height: 120px;
952
+ border: 2px solid white;
953
+ border-radius: 50%;
954
+ filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
955
+ filter: alpha(opacity=60);
956
+ opacity: 1;
957
+ box-shadow: 0 0 1px 0 white;
958
+ background: rgba(240, 243, 247, 0.9411764706);
959
+ z-index: 10000;
960
+ }
961
+ .big-mute-icon[data-big-mute-icon] svg {
962
+ margin-left: 5px;
963
+ width: 80px;
964
+ height: 80px;
965
+ }
966
+ .big-mute-icon[data-big-mute-icon] svg path {
967
+ fill: #1f1e1e !important;
968
+ }
969
+ .big-mute-icon[data-big-mute-icon]:hover {
970
+ background: rgba(240, 243, 247, 0.8784313725);
971
+ }
972
+ .big-mute-icon[data-big-mute-icon]:hover svg path {
973
+ fill: #151515 !important;
974
+ }.media-control-skin-1 .media-control-cc button.media-control-button {
975
+ display: flex;
976
+ justify-content: center;
977
+ padding: 0;
978
+ align-items: center;
979
+ vertical-align: top;
980
+ }
981
+ .media-control-skin-1 .media-control-cc button.media-control-button:hover {
982
+ color: white;
983
+ }
984
+ .media-control-skin-1 .media-control-cc ul li {
985
+ text-align: center;
986
+ }
987
+ .media-control-skin-1 .media-control-cc ul li a {
988
+ height: 30px;
989
+ padding: 5px 10px;
990
+ color: #fffffe;
991
+ }
992
+ .media-control-skin-1 .media-control-cc ul li a:hover {
993
+ background-color: rgba(0, 0, 0, 0.4);
994
+ }
995
+ .media-control-skin-1 .media-control-cc ul li.current a {
996
+ background-color: rgba(0, 0, 0, 0.4);
997
+ }
998
+ .media-control-skin-1 .media-control-cc ul li:first-child a {
999
+ border-bottom-left-radius: 4px;
1000
+ border-bottom-right-radius: 4px;
1001
+ }
1002
+ .media-control-skin-1 .media-control-cc ul li:last-child a {
1003
+ border-top-left-radius: 4px;
1004
+ border-top-right-radius: 4px;
1005
+ }
1006
+ .media-control-skin-1 .media-control-cc {
1007
+ position: relative;
1008
+ order: 85;
1009
+ }
1010
+
1011
+ .container .gplayer-cc-line {
1012
+ position: absolute;
1013
+ bottom: calc(var(--bottom-panel) + 5px);
1014
+ width: 100%;
856
1015
  }
857
- .mc-skip-time .skip-container .skip-item {
858
- flex: 1 0 0px;
859
- height: 100%;
1016
+ .container .gplayer-cc-line p {
1017
+ width: auto;
1018
+ background-color: rgba(0, 0, 0, 0.4);
1019
+ color: white;
1020
+ display: inline-block;
1021
+ }.quality-levels li.disabled {
1022
+ opacity: 0.5;
1023
+ pointer-events: none;
1024
+ }
1025
+ .quality-levels li.current {
1026
+ background-color: #000;
860
1027
  }[data-player] {
861
1028
  --bottom-panel: 40px;
862
1029
  }
@@ -1478,174 +1645,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1478
1645
  100% {
1479
1646
  color: #B80000;
1480
1647
  }
1481
- }.spinner-three-bounce[data-spinner] {
1482
- position: absolute;
1483
- width: 70px;
1484
- text-align: center;
1485
- z-index: 999;
1486
- left: 0;
1487
- right: 0;
1488
- margin: 0 auto;
1489
- margin-left: auto;
1490
- margin-right: auto;
1491
- /* center vertically */
1492
- top: 50%;
1493
- transform: translateY(-50%);
1494
- }
1495
- .spinner-three-bounce[data-spinner] > div {
1496
- width: 18px;
1497
- height: 18px;
1498
- background-color: #FFF;
1499
- border-radius: 100%;
1500
- display: inline-block;
1501
- animation: bouncedelay 1.4s infinite ease-in-out;
1502
- /* Prevent first frame from flickering when animation starts */
1503
- animation-fill-mode: both;
1504
- }
1505
- .spinner-three-bounce[data-spinner] [data-bounce1] {
1506
- animation-delay: -0.32s;
1507
- }
1508
- .spinner-three-bounce[data-spinner] [data-bounce2] {
1509
- animation-delay: -0.16s;
1510
- }
1511
-
1512
- @keyframes bouncedelay {
1513
- 0%, 80%, 100% {
1514
- transform: scale(0);
1515
- }
1516
- 40% {
1517
- transform: scale(1);
1518
- }
1519
- }.share_plugin[data-share] {
1520
- pointer-events: auto;
1521
- z-index: 5;
1522
- font-family: Roboto, "Open Sans", Arial, sans-serif !important;
1523
- }
1524
- .share_plugin[data-share].share-hide .share-button-container {
1525
- right: -50px;
1526
- }
1527
- .share_plugin[data-share] .share-button-container {
1528
- cursor: pointer;
1529
- width: 36px;
1530
- height: 36px;
1531
- background-color: rgba(74, 74, 74, 0.6);
1532
- border-radius: 4px;
1533
- position: absolute;
1534
- right: 10px;
1535
- top: 10px;
1536
- padding-top: 6px;
1537
- transition: all 0.3s ease-out;
1538
- }
1539
- .share_plugin[data-share] .share-button-container button[data-share-button] {
1540
- background-color: transparent;
1541
- border: 0;
1542
- margin: 0 6px;
1543
- padding: 0;
1544
- cursor: pointer;
1545
- display: inline-block;
1546
- width: 19px;
1547
- height: 20px;
1548
- }
1549
- .share_plugin[data-share] .share-container {
1550
- pointer-events: auto;
1551
- position: absolute;
1552
- width: 280px;
1553
- background-color: white;
1554
- transform: translate(0, 50%);
1555
- transform: translate(-50%, -50%);
1556
- left: 50%;
1557
- /* margin-left: -140px; */
1558
- top: calc(50% - 20px);
1559
- /* margin-top: -170px; */
1560
- }
1561
- .share_plugin[data-share] .share-container .share-container-header {
1562
- text-align: left;
1563
- border-bottom: 1px solid rgba(155, 155, 155, 0.25);
1564
- }
1565
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1566
- display: inline-block;
1567
- font-size: 16px;
1568
- margin: 5px;
1569
- }
1570
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
1571
- display: inline-block;
1572
- width: 24px;
1573
- float: right;
1574
- margin: 5px;
1575
- cursor: pointer;
1576
- }
1577
- .share_plugin[data-share] .share-container .share-container-main {
1578
- margin-bottom: 8px;
1579
- }
1580
- .share_plugin[data-share] .share-container .share-container-main > div {
1581
- text-align: left;
1582
- font-size: 14px;
1583
- padding: 5px;
1584
- }
1585
- .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 {
1586
- overflow: hidden;
1587
- text-overflow: ellipsis;
1588
- color: #818181;
1589
- border: solid 1px #d3d3d3;
1590
- width: calc(100% - 10px);
1591
- padding: 5px;
1592
- }
1593
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
1594
- max-height: 90px;
1595
- resize: none;
1596
- }
1597
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
1598
- width: 32px;
1599
- display: inline-block;
1600
- margin-right: 5px;
1601
- cursor: pointer;
1602
- }.media-control-skin-1 .media-control-cc button.media-control-button {
1603
- display: flex;
1604
- justify-content: center;
1605
- padding: 0;
1606
- align-items: center;
1607
- vertical-align: top;
1608
- }
1609
- .media-control-skin-1 .media-control-cc button.media-control-button:hover {
1610
- color: white;
1611
- }
1612
- .media-control-skin-1 .media-control-cc ul li {
1613
- text-align: center;
1614
- }
1615
- .media-control-skin-1 .media-control-cc ul li a {
1616
- height: 30px;
1617
- padding: 5px 10px;
1618
- color: #fffffe;
1619
- }
1620
- .media-control-skin-1 .media-control-cc ul li a:hover {
1621
- background-color: rgba(0, 0, 0, 0.4);
1622
- }
1623
- .media-control-skin-1 .media-control-cc ul li.current a {
1624
- background-color: rgba(0, 0, 0, 0.4);
1625
- }
1626
- .media-control-skin-1 .media-control-cc ul li:first-child a {
1627
- border-bottom-left-radius: 4px;
1628
- border-bottom-right-radius: 4px;
1629
- }
1630
- .media-control-skin-1 .media-control-cc ul li:last-child a {
1631
- border-top-left-radius: 4px;
1632
- border-top-right-radius: 4px;
1633
- }
1634
- .media-control-skin-1 .media-control-cc {
1635
- position: relative;
1636
- order: 85;
1637
- }
1638
-
1639
- .container .gplayer-cc-line {
1640
- position: absolute;
1641
- bottom: calc(var(--bottom-panel) + 5px);
1642
- width: 100%;
1643
- }
1644
- .container .gplayer-cc-line p {
1645
- width: auto;
1646
- background-color: rgba(0, 0, 0, 0.4);
1647
- color: white;
1648
- display: inline-block;
1649
1648
  }.scrub-thumbnails {
1650
1649
  position: absolute;
1651
1650
  bottom: 52px;
@@ -1844,6 +1843,40 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1844
1843
  }
1845
1844
  .multicamera[data-multicamera] li.current a {
1846
1845
  color: #f00;
1846
+ }div.player-error-screen, [data-player] div.player-error-screen {
1847
+ color: #CCCACA;
1848
+ position: absolute;
1849
+ top: 0;
1850
+ height: 100%;
1851
+ width: 100%;
1852
+ background-color: rgba(0, 0, 0, 0.7);
1853
+ z-index: 2000;
1854
+ display: flex;
1855
+ flex-direction: column;
1856
+ justify-content: center;
1857
+ }
1858
+ div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
1859
+ font-size: 14px;
1860
+ color: #CCCACA;
1861
+ margin-top: 45px;
1862
+ }
1863
+ div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
1864
+ font-weight: bold;
1865
+ line-height: 30px;
1866
+ font-size: 18px;
1867
+ }
1868
+ div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
1869
+ width: 90%;
1870
+ margin: 0 auto;
1871
+ }
1872
+ div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
1873
+ font-size: 13px;
1874
+ margin-top: 15px;
1875
+ }
1876
+ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1877
+ cursor: pointer;
1878
+ width: 30px;
1879
+ margin: 15px auto 0;
1847
1880
  }.player-logo[data-logo] {
1848
1881
  position: absolute;
1849
1882
  z-index: 2;
@@ -1853,37 +1886,4 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1853
1886
 
1854
1887
  .clappr-logo {
1855
1888
  position: absolute;
1856
- }.seek-time {
1857
- position: absolute;
1858
- white-space: nowrap;
1859
- height: 20px;
1860
- line-height: 20px;
1861
- font-size: 0;
1862
- left: -100%;
1863
- bottom: 55px;
1864
- background-color: rgba(2, 2, 2, 0.5);
1865
- z-index: 9999;
1866
- transition: opacity 0.1s ease;
1867
- }
1868
- .seek-time.hidden {
1869
- opacity: 0;
1870
- }
1871
- .seek-time .seek-time__pos {
1872
- display: inline-block;
1873
- color: white;
1874
- font-size: 10px;
1875
- padding-left: 7px;
1876
- padding-right: 7px;
1877
- vertical-align: top;
1878
- }
1879
- .seek-time .seek-time__duration {
1880
- display: inline-block;
1881
- color: rgba(255, 255, 255, 0.5);
1882
- font-size: 10px;
1883
- padding-right: 7px;
1884
- vertical-align: top;
1885
- }
1886
- .seek-time .seek-time__duration::before {
1887
- content: "|";
1888
- margin-right: 7px;
1889
1889
  }