@gcorevideo/player 2.20.21 → 2.20.22

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,143 @@
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
+ .audio_selector[data-track-selector] {
130
+ float: right;
131
+ margin-top: 4px;
132
+ position: relative;
133
+ width: 50px;
134
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
135
+ }
136
+ .audio_selector[data-track-selector] button {
137
+ background-color: transparent;
138
+ color: #fff;
139
+ -webkit-font-smoothing: antialiased;
140
+ border: none;
141
+ font-size: 14px;
142
+ cursor: pointer;
143
+ }
144
+ .audio_selector[data-track-selector] button .audio-text {
145
+ text-overflow: ellipsis;
146
+ overflow: hidden;
147
+ white-space: nowrap;
148
+ max-width: 100px;
149
+ background-color: transparent;
150
+ -webkit-font-smoothing: antialiased;
151
+ border: none;
152
+ font-size: 14px;
153
+ cursor: pointer;
154
+ padding-top: 5px;
155
+ }
156
+ .audio_selector[data-track-selector] button:hover {
157
+ color: #c9c9c9;
158
+ }
159
+ .audio_selector[data-track-selector] button.changing {
160
+ animation: pulse 0.5s infinite alternate;
161
+ }
162
+ .audio_selector[data-track-selector] button span.audio-arrow {
163
+ width: 9px;
164
+ height: 6px;
165
+ margin-top: 11px;
166
+ margin-left: 5px;
167
+ }
168
+ .audio_selector[data-track-selector] > ul {
169
+ max-width: 114px;
170
+ list-style-type: none;
171
+ position: absolute;
172
+ bottom: 25px;
173
+ border: 1px solid black;
174
+ display: none;
175
+ background-color: #e6e6e6;
176
+ }
177
+ .audio_selector[data-track-selector] li {
178
+ font-size: 10px;
179
+ }
180
+ .audio_selector[data-track-selector] li[data-title] {
181
+ background-color: #c3c2c2;
182
+ padding: 5px;
183
+ }
184
+ .audio_selector[data-track-selector] li a {
185
+ color: #444;
186
+ padding: 2px 10px;
187
+ display: block;
188
+ text-decoration: none;
189
+ text-overflow: ellipsis;
190
+ overflow: hidden;
191
+ white-space: nowrap;
192
+ }
193
+ .audio_selector[data-track-selector] li a:hover {
194
+ background-color: #555;
195
+ color: white;
196
+ }
197
+ .audio_selector[data-track-selector] li a:hover a {
198
+ color: white;
199
+ text-decoration: none;
200
+ }
201
+ .audio_selector[data-track-selector] li.current a {
202
+ color: #f00;
203
+ }
204
+
205
+ .audio_selector[data-track-selector] {
206
+ width: auto;
207
+ margin-top: 7px;
208
+ margin-right: 20px;
209
+ }
210
+ .audio_selector[data-track-selector] button[data-level-selector-button],
211
+ .audio_selector[data-track-selector] button[data-track-selector-button] {
212
+ display: flex;
213
+ justify-content: center;
214
+ padding: 0;
215
+ }
216
+ .audio_selector[data-track-selector] button[data-level-selector-button]:hover,
217
+ .audio_selector[data-track-selector] button[data-track-selector-button]:hover {
218
+ color: white;
219
+ }
220
+ .audio_selector[data-track-selector] ul {
221
+ background-color: rgba(74, 74, 74, 0.6);
222
+ border: none;
223
+ min-width: 60px;
224
+ transform: rotate(180deg);
225
+ border-radius: 4px;
226
+ bottom: 40px;
227
+ right: -2px;
228
+ }
229
+ .audio_selector[data-track-selector] ul li {
230
+ transform: rotate(-180deg);
231
+ font-size: 16px;
232
+ text-align: right;
233
+ height: 30px;
234
+ }
235
+ .audio_selector[data-track-selector] ul li a {
236
+ height: 30px;
237
+ padding: 5px 10px;
238
+ color: #fffffe;
239
+ }
240
+ .audio_selector[data-track-selector] ul li a:hover {
241
+ background-color: rgba(0, 0, 0, 0.4);
242
+ }
243
+ .audio_selector[data-track-selector] ul li:first-child a {
244
+ border-bottom-left-radius: 4px;
245
+ border-bottom-right-radius: 4px;
246
+ }
247
+ .audio_selector[data-track-selector] ul li:last-child a {
248
+ border-top-left-radius: 4px;
249
+ border-top-right-radius: 4px;
250
+ }
251
+
252
+ @keyframes pulse {
253
+ 0% {
254
+ color: #fff;
255
+ }
256
+ 50% {
257
+ color: #ff0101;
258
+ }
259
+ 100% {
260
+ color: #B80000;
261
+ }
125
262
  }.big-mute-icon-wrapper[data-big-mute] {
126
263
  position: absolute;
127
264
  z-index: 9998;
@@ -171,6 +308,32 @@
171
308
  }
172
309
  .big-mute-icon[data-big-mute-icon]:hover svg path {
173
310
  fill: #151515 !important;
311
+ }.context-menu {
312
+ z-index: 999;
313
+ position: absolute;
314
+ top: 0;
315
+ left: 0;
316
+ text-align: center;
317
+ }
318
+ .context-menu .context-menu-list {
319
+ font-family: "Proxima Nova", sans-serif;
320
+ font-size: 12px;
321
+ line-height: 12px;
322
+ list-style-type: none;
323
+ text-align: left;
324
+ padding: 5px;
325
+ margin-left: auto;
326
+ margin-right: auto;
327
+ background-color: rgba(0, 0, 0, 0.75);
328
+ border: 1px solid #666;
329
+ border-radius: 4px;
330
+ }
331
+ .context-menu .context-menu-list .context-menu-list-item {
332
+ color: white;
333
+ padding: 5px;
334
+ cursor: pointer;
335
+ }.clips.bar-container[data-seekbar] {
336
+ clip-path: url("#myClip");
174
337
  }.dvr-controls[data-dvr-controls] {
175
338
  display: inline-block;
176
339
  float: left;
@@ -274,30 +437,56 @@
274
437
 
275
438
  .media-control.live[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
276
439
  background-color: #ff0101;
277
- }.context-menu {
278
- z-index: 999;
440
+ }.level-disabled {
441
+ opacity: 0.5;
442
+ pointer-events: none;
443
+ }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
444
+ float: right;
445
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
446
+ }
447
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear {
448
+ height: 40px;
449
+ width: 40px;
450
+ padding-right: 20px;
451
+ }
452
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear svg {
453
+ height: 20px;
454
+ }
455
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
279
456
  position: absolute;
280
- top: 0;
281
- left: 0;
282
- text-align: center;
457
+ right: 16px;
458
+ bottom: 52px;
459
+ display: none;
460
+ width: 250px;
461
+ min-height: 48px;
462
+ z-index: 9999;
463
+ border-radius: 4px;
283
464
  }
284
- .context-menu .context-menu-list {
285
- font-family: "Proxima Nova", sans-serif;
286
- font-size: 12px;
287
- line-height: 12px;
288
- list-style-type: none;
465
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
466
+ padding: 8px 0;
467
+ }
468
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list svg {
469
+ float: left;
470
+ margin-right: 10px;
471
+ }
472
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
473
+ margin: 0;
289
474
  text-align: left;
290
- padding: 5px;
291
- margin-left: auto;
292
- margin-right: auto;
293
- background-color: rgba(0, 0, 0, 0.75);
294
- border: 1px solid #666;
295
- border-radius: 4px;
475
+ line-height: 22px;
476
+ padding: 5px 14px;
477
+ width: 250px;
478
+ font-size: 12px;
296
479
  }
297
- .context-menu .context-menu-list .context-menu-list-item {
298
- color: white;
299
- padding: 5px;
300
- cursor: pointer;
480
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_arrow-right-icon {
481
+ float: right;
482
+ margin-right: -14px;
483
+ }
484
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_value {
485
+ float: right;
486
+ margin-right: 8px;
487
+ }
488
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option svg {
489
+ height: 20px;
301
490
  }:root {
302
491
  --primary-background-color: #000;
303
492
  --secondary-background-color: #262626;
@@ -680,98 +869,17 @@
680
869
  .mobile .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul {
681
870
  width: 25%;
682
871
  }
683
- }div.player-error-screen, [data-player] div.player-error-screen {
684
- color: #CCCACA;
685
- position: absolute;
686
- top: 0;
687
- height: 100%;
688
- width: 100%;
689
- background-color: rgba(0, 0, 0, 0.7);
690
- z-index: 2000;
691
- display: flex;
692
- flex-direction: column;
693
- justify-content: center;
872
+ }*, :focus, :visited {
873
+ outline: none !important;
694
874
  }
695
- div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
875
+
876
+ .gear-wrapper .go-back {
877
+ font-weight: 600;
696
878
  font-size: 14px;
697
- color: #CCCACA;
698
- margin-top: 45px;
699
- }
700
- div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
701
- font-weight: bold;
702
- line-height: 30px;
703
- font-size: 18px;
704
- }
705
- div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
706
- width: 90%;
707
- margin: 0 auto;
708
- }
709
- div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
710
- font-size: 13px;
711
- margin-top: 15px;
712
- }
713
- div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
714
- cursor: pointer;
715
- width: 30px;
716
- margin: 15px auto 0;
717
- }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
718
- float: right;
719
- font-family: Roboto, "Open Sans", Arial, sans-serif;
720
- }
721
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear {
722
- height: 40px;
723
- width: 40px;
724
- padding-right: 20px;
725
- }
726
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear svg {
727
- height: 20px;
728
- }
729
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
730
- position: absolute;
731
- right: 16px;
732
- bottom: 52px;
733
- display: none;
734
- width: 250px;
735
- min-height: 48px;
736
- z-index: 9999;
737
- border-radius: 4px;
738
- }
739
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
740
- padding: 8px 0;
741
- }
742
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list svg {
743
- float: left;
744
- margin-right: 10px;
745
- }
746
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
747
- margin: 0;
748
- text-align: left;
749
- line-height: 22px;
750
- padding: 5px 14px;
751
- width: 250px;
752
- font-size: 12px;
753
- }
754
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_arrow-right-icon {
755
- float: right;
756
- margin-right: -14px;
757
- }
758
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_value {
759
- float: right;
760
- margin-right: 8px;
761
- }
762
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option svg {
763
- height: 20px;
764
- }*, :focus, :visited {
765
- outline: none !important;
766
- }
767
-
768
- .gear-wrapper .go-back {
769
- font-weight: 600;
770
- font-size: 14px;
771
- line-height: 20px;
772
- width: 100%;
773
- text-align: left;
774
- padding: 12px;
879
+ line-height: 20px;
880
+ width: 100%;
881
+ text-align: left;
882
+ padding: 12px;
775
883
  }
776
884
  .gear-wrapper .go-back .arrow-left-icon {
777
885
  float: left;
@@ -826,491 +934,110 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
826
934
  }
827
935
  .gear-wrapper svg {
828
936
  height: 20px;
829
- }.level-disabled {
830
- opacity: 0.5;
831
- pointer-events: none;
832
- }.clips.bar-container[data-seekbar] {
833
- clip-path: url("#myClip");
834
- }*, :focus, :visited {
835
- outline: none !important;
836
- }
837
-
838
- .audio_selector[data-track-selector] {
839
- float: right;
840
- margin-top: 4px;
841
- position: relative;
842
- width: 50px;
843
- font-family: Roboto, "Open Sans", Arial, sans-serif;
844
- }
845
- .audio_selector[data-track-selector] button {
846
- background-color: transparent;
847
- color: #fff;
848
- -webkit-font-smoothing: antialiased;
849
- border: none;
850
- font-size: 14px;
851
- cursor: pointer;
937
+ }div.player-error-screen, [data-player] div.player-error-screen {
938
+ color: #CCCACA;
939
+ position: absolute;
940
+ top: 0;
941
+ height: 100%;
942
+ width: 100%;
943
+ background-color: rgba(0, 0, 0, 0.7);
944
+ z-index: 2000;
945
+ display: flex;
946
+ flex-direction: column;
947
+ justify-content: center;
852
948
  }
853
- .audio_selector[data-track-selector] button .audio-text {
854
- text-overflow: ellipsis;
855
- overflow: hidden;
856
- white-space: nowrap;
857
- max-width: 100px;
858
- background-color: transparent;
859
- -webkit-font-smoothing: antialiased;
860
- border: none;
949
+ div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
861
950
  font-size: 14px;
862
- cursor: pointer;
863
- padding-top: 5px;
864
- }
865
- .audio_selector[data-track-selector] button:hover {
866
- color: #c9c9c9;
867
- }
868
- .audio_selector[data-track-selector] button.changing {
869
- animation: pulse 0.5s infinite alternate;
870
- }
871
- .audio_selector[data-track-selector] button span.audio-arrow {
872
- width: 9px;
873
- height: 6px;
874
- margin-top: 11px;
875
- margin-left: 5px;
951
+ color: #CCCACA;
952
+ margin-top: 45px;
876
953
  }
877
- .audio_selector[data-track-selector] > ul {
878
- max-width: 114px;
879
- list-style-type: none;
880
- position: absolute;
881
- bottom: 25px;
882
- border: 1px solid black;
883
- display: none;
884
- background-color: #e6e6e6;
954
+ div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
955
+ font-weight: bold;
956
+ line-height: 30px;
957
+ font-size: 18px;
885
958
  }
886
- .audio_selector[data-track-selector] li {
887
- font-size: 10px;
959
+ div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
960
+ width: 90%;
961
+ margin: 0 auto;
888
962
  }
889
- .audio_selector[data-track-selector] li[data-title] {
890
- background-color: #c3c2c2;
891
- padding: 5px;
963
+ div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
964
+ font-size: 13px;
965
+ margin-top: 15px;
892
966
  }
893
- .audio_selector[data-track-selector] li a {
894
- color: #444;
895
- padding: 2px 10px;
967
+ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
968
+ cursor: pointer;
969
+ width: 30px;
970
+ margin: 15px auto 0;
971
+ }.media-control-skin-1[data-media-control-skin-1] .media-control-quality,
972
+ .media-control-skin-1[data-media-control-skin-1] .media-control-audio-tracks {
896
973
  display: block;
897
- text-decoration: none;
898
- text-overflow: ellipsis;
899
- overflow: hidden;
900
- white-space: nowrap;
901
- }
902
- .audio_selector[data-track-selector] li a:hover {
903
- background-color: #555;
904
- color: white;
905
- }
906
- .audio_selector[data-track-selector] li a:hover a {
907
- color: white;
908
- text-decoration: none;
909
- }
910
- .audio_selector[data-track-selector] li.current a {
911
- color: #f00;
912
974
  }
913
-
914
- .audio_selector[data-track-selector] {
915
- width: auto;
916
- margin-top: 7px;
917
- margin-right: 20px;
975
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] {
976
+ width: 40px;
977
+ margin-top: 0;
918
978
  }
919
- .audio_selector[data-track-selector] button[data-level-selector-button],
920
- .audio_selector[data-track-selector] button[data-track-selector-button] {
979
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button] {
921
980
  display: flex;
922
981
  justify-content: center;
923
982
  padding: 0;
983
+ align-items: center;
924
984
  }
925
- .audio_selector[data-track-selector] button[data-level-selector-button]:hover,
926
- .audio_selector[data-track-selector] button[data-track-selector-button]:hover {
985
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button]:hover {
927
986
  color: white;
928
987
  }
929
- .audio_selector[data-track-selector] ul {
988
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul {
930
989
  background-color: rgba(74, 74, 74, 0.6);
931
990
  border: none;
932
- min-width: 60px;
991
+ width: auto;
933
992
  transform: rotate(180deg);
934
993
  border-radius: 4px;
935
- bottom: 40px;
936
- right: -2px;
994
+ bottom: 52px;
995
+ margin-left: -28px;
937
996
  }
938
- .audio_selector[data-track-selector] ul li {
997
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li {
939
998
  transform: rotate(-180deg);
940
999
  font-size: 16px;
941
- text-align: right;
1000
+ text-align: center;
1001
+ white-space: nowrap;
942
1002
  height: 30px;
943
1003
  }
944
- .audio_selector[data-track-selector] ul li a {
1004
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a {
945
1005
  height: 30px;
946
1006
  padding: 5px 10px;
947
1007
  color: #fffffe;
948
1008
  }
949
- .audio_selector[data-track-selector] ul li a:hover {
1009
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a:hover {
950
1010
  background-color: rgba(0, 0, 0, 0.4);
951
1011
  }
952
- .audio_selector[data-track-selector] ul li:first-child a {
1012
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li.current a {
1013
+ background-color: rgba(0, 0, 0, 0.4);
1014
+ }
1015
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:first-child a {
953
1016
  border-bottom-left-radius: 4px;
954
1017
  border-bottom-right-radius: 4px;
955
1018
  }
956
- .audio_selector[data-track-selector] ul li:last-child a {
1019
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:last-child a {
957
1020
  border-top-left-radius: 4px;
958
- border-top-right-radius: 4px;
959
- }
960
-
961
- @keyframes pulse {
962
- 0% {
963
- color: #fff;
964
- }
965
- 50% {
966
- color: #ff0101;
967
- }
968
- 100% {
969
- color: #B80000;
970
- }
971
- }.seek-time[data-seek-time] {
972
- position: absolute;
973
- white-space: nowrap;
974
- height: 20px;
975
- line-height: 20px;
976
- font-size: 0;
977
- left: -100%;
978
- bottom: 55px;
979
- background-color: rgba(2, 2, 2, 0.5);
980
- z-index: 9999;
981
- transition: opacity 0.1s ease;
982
- }
983
- .seek-time[data-seek-time].hidden[data-seek-time] {
984
- opacity: 0;
985
- }
986
- .seek-time[data-seek-time] [data-seek-time] {
987
- display: inline-block;
988
- color: white;
989
- font-size: 10px;
990
- padding-left: 7px;
991
- padding-right: 7px;
992
- vertical-align: top;
993
- }
994
- .seek-time[data-seek-time] [data-duration] {
995
- display: inline-block;
996
- color: rgba(255, 255, 255, 0.5);
997
- font-size: 10px;
998
- padding-right: 7px;
999
- vertical-align: top;
1000
- }
1001
- .seek-time[data-seek-time] [data-duration]::before {
1002
- content: "|";
1003
- margin-right: 7px;
1004
- }*, :focus, :visited {
1005
- outline: none !important;
1006
- }
1007
-
1008
- .multicamera[data-multicamera] {
1009
- float: right;
1010
- margin-top: 4px;
1011
- position: relative;
1012
- margin-right: 20px;
1013
- width: 20px;
1014
- }
1015
- .multicamera[data-multicamera] button {
1016
- background-color: transparent;
1017
- color: #fff;
1018
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1019
- -webkit-font-smoothing: antialiased;
1020
- border: none;
1021
- font-size: 14px;
1022
- padding: 0;
1023
- }
1024
- .multicamera[data-multicamera] button svg {
1025
- height: 20px;
1026
- position: relative;
1027
- margin-top: 6px;
1028
- }
1029
- .multicamera[data-multicamera] button:hover {
1030
- color: #c9c9c9;
1031
- }
1032
- .multicamera[data-multicamera] button.changing {
1033
- animation: pulse 0.5s infinite alternate;
1034
- }
1035
- .multicamera[data-multicamera] button span.quality-arrow {
1036
- width: 9px;
1037
- height: 6px;
1038
- margin-top: 11px;
1039
- margin-left: 5px;
1040
- }
1041
- .multicamera[data-multicamera] > ul {
1042
- padding: 6px 0;
1043
- right: -24px;
1044
- width: 245px;
1045
- list-style-type: none;
1046
- position: absolute;
1047
- bottom: 48px;
1048
- border-radius: 4px;
1049
- display: none;
1050
- background-color: rgba(74, 74, 74, 0.9);
1051
- }
1052
- .multicamera[data-multicamera] > ul::after {
1053
- content: "";
1054
- position: absolute;
1055
- top: 100%;
1056
- left: 85%;
1057
- margin-left: -10px;
1058
- width: 0;
1059
- height: 0;
1060
- border-top: 10px solid rgba(74, 74, 74, 0.9);
1061
- border-right: 10px solid transparent;
1062
- border-left: 10px solid transparent;
1063
- }
1064
- .multicamera[data-multicamera] li {
1065
- font-size: 10px;
1066
- cursor: pointer;
1067
- }
1068
- .multicamera[data-multicamera] li .multicamera-item {
1069
- display: flex;
1070
- padding: 10px 0;
1071
- justify-content: center;
1072
- position: relative;
1073
- }
1074
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
1075
- pointer-events: none;
1076
- }
1077
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
1078
- opacity: 0.5;
1079
- }
1080
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
1081
- opacity: 0.5;
1082
- }
1083
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
1084
- background-color: rgba(0, 0, 0, 0);
1085
- }
1086
- .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
1087
- background-color: rgba(0, 0, 0, 0.3);
1088
- }
1089
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
1090
- width: 80px;
1091
- height: 60px;
1092
- }
1093
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
1094
- width: 80px;
1095
- height: 60px;
1096
- }
1097
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
1098
- width: 120px;
1099
- text-align: left;
1100
- margin-left: 15px;
1101
- }
1102
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title, .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1103
- width: 120px;
1104
- height: 20px;
1105
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1106
- font-size: 14px;
1107
- font-weight: normal;
1108
- font-style: normal;
1109
- font-stretch: normal;
1110
- line-height: 1.43;
1111
- letter-spacing: normal;
1112
- text-align: left;
1113
- color: #fff;
1114
- text-overflow: ellipsis;
1115
- overflow: hidden;
1116
- }
1117
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1118
- opacity: 0.6;
1119
- }
1120
- .multicamera[data-multicamera] li[data-title] {
1121
- background-color: #c3c2c2;
1122
- padding: 5px;
1123
- }
1124
- .multicamera[data-multicamera] li a {
1125
- color: #444;
1126
- padding: 2px 10px;
1127
- display: block;
1128
- text-decoration: none;
1129
- }
1130
- .multicamera[data-multicamera] li a:hover {
1131
- background-color: #555;
1132
- color: white;
1133
- }
1134
- .multicamera[data-multicamera] li a:hover a {
1135
- color: white;
1136
- text-decoration: none;
1137
- }
1138
- .multicamera[data-multicamera] li.current a {
1139
- color: #f00;
1140
- }
1141
-
1142
- @keyframes pulse {
1143
- 0% {
1144
- color: #fff;
1145
- }
1146
- 50% {
1147
- color: #ff0101;
1148
- }
1149
- 100% {
1150
- color: #B80000;
1151
- }
1152
- }.player-poster[data-poster] {
1153
- display: flex;
1154
- justify-content: center;
1155
- align-items: center;
1156
- position: absolute;
1157
- height: 100%;
1158
- width: 100%;
1159
- z-index: 998;
1160
- top: 0;
1161
- left: 0;
1162
- background-color: #000;
1163
- background-size: cover;
1164
- background-repeat: no-repeat;
1165
- background-position: 50% 50%;
1166
- }
1167
- .player-poster[data-poster].clickable {
1168
- cursor: pointer;
1169
- }
1170
- .player-poster[data-poster]:hover .play-wrapper[data-poster] {
1171
- opacity: 1;
1172
- }
1173
- .player-poster[data-poster] .play-wrapper[data-poster] {
1174
- width: 100%;
1175
- height: 25%;
1176
- margin: 0 auto;
1177
- opacity: 0.75;
1178
- transition: opacity 0.1s ease;
1179
- }
1180
- .player-poster[data-poster] .play-wrapper[data-poster] svg {
1181
- height: 100%;
1182
- display: inline;
1183
- }
1184
- .player-poster[data-poster] .play-wrapper[data-poster] svg path {
1185
- fill: #fff;
1186
- }.share_plugin[data-share] {
1187
- pointer-events: auto;
1188
- z-index: 5;
1189
- font-family: Roboto, "Open Sans", Arial, sans-serif !important;
1190
- }
1191
- .share_plugin[data-share].share-hide .share-button-container {
1192
- right: -50px;
1193
- }
1194
- .share_plugin[data-share] .share-button-container {
1195
- cursor: pointer;
1196
- width: 36px;
1197
- height: 36px;
1198
- background-color: rgba(74, 74, 74, 0.6);
1199
- border-radius: 4px;
1200
- position: absolute;
1201
- right: 10px;
1202
- top: 10px;
1203
- padding-top: 6px;
1204
- transition: all 0.3s ease-out;
1205
- }
1206
- .share_plugin[data-share] .share-button-container button[data-share-button] {
1207
- background-color: transparent;
1208
- border: 0;
1209
- margin: 0 6px;
1210
- padding: 0;
1211
- cursor: pointer;
1212
- display: inline-block;
1213
- width: 19px;
1214
- height: 20px;
1215
- }
1216
- .share_plugin[data-share] .share-container {
1217
- pointer-events: auto;
1218
- position: absolute;
1219
- width: 280px;
1220
- background-color: white;
1221
- transform: translate(0, 50%);
1222
- transform: translate(-50%, -50%);
1223
- left: 50%;
1224
- /* margin-left: -140px; */
1225
- top: calc(50% - 20px);
1226
- /* margin-top: -170px; */
1227
- }
1228
- .share_plugin[data-share] .share-container .share-container-header {
1229
- text-align: left;
1230
- border-bottom: 1px solid rgba(155, 155, 155, 0.25);
1231
- }
1232
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1233
- display: inline-block;
1234
- font-size: 16px;
1235
- margin: 5px;
1236
- }
1237
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
1238
- display: inline-block;
1239
- width: 24px;
1240
- float: right;
1241
- margin: 5px;
1242
- cursor: pointer;
1243
- }
1244
- .share_plugin[data-share] .share-container .share-container-main {
1245
- margin-bottom: 8px;
1246
- }
1247
- .share_plugin[data-share] .share-container .share-container-main > div {
1248
- text-align: left;
1249
- font-size: 14px;
1250
- padding: 5px;
1251
- }
1252
- .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 {
1253
- overflow: hidden;
1254
- text-overflow: ellipsis;
1255
- color: #818181;
1256
- border: solid 1px #d3d3d3;
1257
- width: calc(100% - 10px);
1258
- padding: 5px;
1259
- }
1260
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
1261
- max-height: 90px;
1262
- resize: none;
1263
- }
1264
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
1265
- width: 32px;
1266
- display: inline-block;
1267
- margin-right: 5px;
1268
- cursor: pointer;
1269
- }.media-control-pip button {
1270
- float: right;
1271
- height: 40px;
1272
- margin-right: 20px;
1273
- }
1274
- .media-control-pip button svg {
1275
- height: 20px;
1276
- }.spinner-three-bounce[data-spinner] {
1277
- position: absolute;
1278
- width: 70px;
1279
- text-align: center;
1280
- z-index: 999;
1281
- left: 0;
1282
- right: 0;
1283
- margin: 0 auto;
1284
- margin-left: auto;
1285
- margin-right: auto;
1286
- /* center vertically */
1287
- top: 50%;
1288
- transform: translateY(-50%);
1021
+ border-top-right-radius: 4px;
1289
1022
  }
1290
- .spinner-three-bounce[data-spinner] > div {
1291
- width: 18px;
1292
- height: 18px;
1293
- background-color: #FFF;
1294
- border-radius: 100%;
1295
- display: inline-block;
1296
- animation: bouncedelay 1.4s infinite ease-in-out;
1297
- /* Prevent first frame from flickering when animation starts */
1298
- animation-fill-mode: both;
1023
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] {
1024
+ height: 26px;
1025
+ line-height: 26px;
1026
+ bottom: 52px;
1027
+ border-radius: 3px;
1028
+ background-color: rgba(74, 74, 74, 0.7);
1299
1029
  }
1300
- .spinner-three-bounce[data-spinner] [data-bounce1] {
1301
- animation-delay: -0.32s;
1030
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span {
1031
+ letter-spacing: 0.8px;
1032
+ font-size: 14px;
1033
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1302
1034
  }
1303
- .spinner-three-bounce[data-spinner] [data-bounce2] {
1304
- animation-delay: -0.16s;
1035
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-seek-time] {
1036
+ padding-left: 8px;
1037
+ padding-right: 8px;
1305
1038
  }
1306
-
1307
- @keyframes bouncedelay {
1308
- 0%, 80%, 100% {
1309
- transform: scale(0);
1310
- }
1311
- 40% {
1312
- transform: scale(1);
1313
- }
1039
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-duration] {
1040
+ display: none !important;
1314
1041
  }[data-player] {
1315
1042
  --bottom-panel: 40px;
1316
1043
  }
@@ -1879,43 +1606,269 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1879
1606
  background-color: #005aff;
1880
1607
  transition: all 0.1s ease-out;
1881
1608
  }
1882
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] {
1883
- position: absolute;
1884
- transform: translateX(-50%);
1885
- top: 3px;
1886
- margin-left: 3px;
1887
- width: 16px;
1888
- height: 16px;
1889
- opacity: 1;
1890
- transition: all 0.1s ease-out;
1609
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] {
1610
+ position: absolute;
1611
+ transform: translateX(-50%);
1612
+ top: 3px;
1613
+ margin-left: 3px;
1614
+ width: 16px;
1615
+ height: 16px;
1616
+ opacity: 1;
1617
+ transition: all 0.1s ease-out;
1618
+ }
1619
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] .bar-scrubber-icon[data-volume] {
1620
+ position: absolute;
1621
+ left: 3px;
1622
+ top: 5px;
1623
+ width: 7px;
1624
+ height: 7px;
1625
+ border-radius: 50%;
1626
+ background-color: white;
1627
+ }
1628
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume] {
1629
+ float: left;
1630
+ width: 4px;
1631
+ padding-left: 2px;
1632
+ height: 12px;
1633
+ opacity: 0.5;
1634
+ box-shadow: inset 2px 0 0 white;
1635
+ transition: transform 0.2s ease-out;
1636
+ }
1637
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume].fill {
1638
+ box-shadow: inset 2px 0 0 #fff;
1639
+ opacity: 1;
1640
+ }
1641
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:nth-of-type(1) {
1642
+ padding-left: 0;
1643
+ }
1644
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:hover {
1645
+ transform: scaleY(1.5);
1646
+ }*, :focus, :visited {
1647
+ outline: none !important;
1648
+ }
1649
+
1650
+ .multicamera[data-multicamera] {
1651
+ float: right;
1652
+ margin-top: 4px;
1653
+ position: relative;
1654
+ margin-right: 20px;
1655
+ width: 20px;
1656
+ }
1657
+ .multicamera[data-multicamera] button {
1658
+ background-color: transparent;
1659
+ color: #fff;
1660
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1661
+ -webkit-font-smoothing: antialiased;
1662
+ border: none;
1663
+ font-size: 14px;
1664
+ padding: 0;
1665
+ }
1666
+ .multicamera[data-multicamera] button svg {
1667
+ height: 20px;
1668
+ position: relative;
1669
+ margin-top: 6px;
1670
+ }
1671
+ .multicamera[data-multicamera] button:hover {
1672
+ color: #c9c9c9;
1673
+ }
1674
+ .multicamera[data-multicamera] button.changing {
1675
+ animation: pulse 0.5s infinite alternate;
1676
+ }
1677
+ .multicamera[data-multicamera] button span.quality-arrow {
1678
+ width: 9px;
1679
+ height: 6px;
1680
+ margin-top: 11px;
1681
+ margin-left: 5px;
1682
+ }
1683
+ .multicamera[data-multicamera] > ul {
1684
+ padding: 6px 0;
1685
+ right: -24px;
1686
+ width: 245px;
1687
+ list-style-type: none;
1688
+ position: absolute;
1689
+ bottom: 48px;
1690
+ border-radius: 4px;
1691
+ display: none;
1692
+ background-color: rgba(74, 74, 74, 0.9);
1693
+ }
1694
+ .multicamera[data-multicamera] > ul::after {
1695
+ content: "";
1696
+ position: absolute;
1697
+ top: 100%;
1698
+ left: 85%;
1699
+ margin-left: -10px;
1700
+ width: 0;
1701
+ height: 0;
1702
+ border-top: 10px solid rgba(74, 74, 74, 0.9);
1703
+ border-right: 10px solid transparent;
1704
+ border-left: 10px solid transparent;
1705
+ }
1706
+ .multicamera[data-multicamera] li {
1707
+ font-size: 10px;
1708
+ cursor: pointer;
1709
+ }
1710
+ .multicamera[data-multicamera] li .multicamera-item {
1711
+ display: flex;
1712
+ padding: 10px 0;
1713
+ justify-content: center;
1714
+ position: relative;
1715
+ }
1716
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
1717
+ pointer-events: none;
1718
+ }
1719
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
1720
+ opacity: 0.5;
1721
+ }
1722
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
1723
+ opacity: 0.5;
1724
+ }
1725
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
1726
+ background-color: rgba(0, 0, 0, 0);
1727
+ }
1728
+ .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
1729
+ background-color: rgba(0, 0, 0, 0.3);
1730
+ }
1731
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
1732
+ width: 80px;
1733
+ height: 60px;
1734
+ }
1735
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
1736
+ width: 80px;
1737
+ height: 60px;
1738
+ }
1739
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
1740
+ width: 120px;
1741
+ text-align: left;
1742
+ margin-left: 15px;
1743
+ }
1744
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title, .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1745
+ width: 120px;
1746
+ height: 20px;
1747
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1748
+ font-size: 14px;
1749
+ font-weight: normal;
1750
+ font-style: normal;
1751
+ font-stretch: normal;
1752
+ line-height: 1.43;
1753
+ letter-spacing: normal;
1754
+ text-align: left;
1755
+ color: #fff;
1756
+ text-overflow: ellipsis;
1757
+ overflow: hidden;
1758
+ }
1759
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1760
+ opacity: 0.6;
1761
+ }
1762
+ .multicamera[data-multicamera] li[data-title] {
1763
+ background-color: #c3c2c2;
1764
+ padding: 5px;
1765
+ }
1766
+ .multicamera[data-multicamera] li a {
1767
+ color: #444;
1768
+ padding: 2px 10px;
1769
+ display: block;
1770
+ text-decoration: none;
1771
+ }
1772
+ .multicamera[data-multicamera] li a:hover {
1773
+ background-color: #555;
1774
+ color: white;
1775
+ }
1776
+ .multicamera[data-multicamera] li a:hover a {
1777
+ color: white;
1778
+ text-decoration: none;
1779
+ }
1780
+ .multicamera[data-multicamera] li.current a {
1781
+ color: #f00;
1782
+ }
1783
+
1784
+ @keyframes pulse {
1785
+ 0% {
1786
+ color: #fff;
1787
+ }
1788
+ 50% {
1789
+ color: #ff0101;
1790
+ }
1791
+ 100% {
1792
+ color: #B80000;
1793
+ }
1794
+ }.media-control-pip button {
1795
+ float: right;
1796
+ height: 40px;
1797
+ margin-right: 20px;
1798
+ }
1799
+ .media-control-pip button svg {
1800
+ height: 20px;
1801
+ }.spinner-three-bounce[data-spinner] {
1802
+ position: absolute;
1803
+ width: 70px;
1804
+ text-align: center;
1805
+ z-index: 999;
1806
+ left: 0;
1807
+ right: 0;
1808
+ margin: 0 auto;
1809
+ margin-left: auto;
1810
+ margin-right: auto;
1811
+ /* center vertically */
1812
+ top: 50%;
1813
+ transform: translateY(-50%);
1814
+ }
1815
+ .spinner-three-bounce[data-spinner] > div {
1816
+ width: 18px;
1817
+ height: 18px;
1818
+ background-color: #FFF;
1819
+ border-radius: 100%;
1820
+ display: inline-block;
1821
+ animation: bouncedelay 1.4s infinite ease-in-out;
1822
+ /* Prevent first frame from flickering when animation starts */
1823
+ animation-fill-mode: both;
1824
+ }
1825
+ .spinner-three-bounce[data-spinner] [data-bounce1] {
1826
+ animation-delay: -0.32s;
1827
+ }
1828
+ .spinner-three-bounce[data-spinner] [data-bounce2] {
1829
+ animation-delay: -0.16s;
1891
1830
  }
1892
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] .bar-scrubber-icon[data-volume] {
1831
+
1832
+ @keyframes bouncedelay {
1833
+ 0%, 80%, 100% {
1834
+ transform: scale(0);
1835
+ }
1836
+ 40% {
1837
+ transform: scale(1);
1838
+ }
1839
+ }.seek-time[data-seek-time] {
1893
1840
  position: absolute;
1894
- left: 3px;
1895
- top: 5px;
1896
- width: 7px;
1897
- height: 7px;
1898
- border-radius: 50%;
1899
- background-color: white;
1841
+ white-space: nowrap;
1842
+ height: 20px;
1843
+ line-height: 20px;
1844
+ font-size: 0;
1845
+ left: -100%;
1846
+ bottom: 55px;
1847
+ background-color: rgba(2, 2, 2, 0.5);
1848
+ z-index: 9999;
1849
+ transition: opacity 0.1s ease;
1900
1850
  }
1901
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume] {
1902
- float: left;
1903
- width: 4px;
1904
- padding-left: 2px;
1905
- height: 12px;
1906
- opacity: 0.5;
1907
- box-shadow: inset 2px 0 0 white;
1908
- transition: transform 0.2s ease-out;
1851
+ .seek-time[data-seek-time].hidden[data-seek-time] {
1852
+ opacity: 0;
1909
1853
  }
1910
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume].fill {
1911
- box-shadow: inset 2px 0 0 #fff;
1912
- opacity: 1;
1854
+ .seek-time[data-seek-time] [data-seek-time] {
1855
+ display: inline-block;
1856
+ color: white;
1857
+ font-size: 10px;
1858
+ padding-left: 7px;
1859
+ padding-right: 7px;
1860
+ vertical-align: top;
1913
1861
  }
1914
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:nth-of-type(1) {
1915
- padding-left: 0;
1862
+ .seek-time[data-seek-time] [data-duration] {
1863
+ display: inline-block;
1864
+ color: rgba(255, 255, 255, 0.5);
1865
+ font-size: 10px;
1866
+ padding-right: 7px;
1867
+ vertical-align: top;
1916
1868
  }
1917
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:hover {
1918
- transform: scaleY(1.5);
1869
+ .seek-time[data-seek-time] [data-duration]::before {
1870
+ content: "|";
1871
+ margin-right: 7px;
1919
1872
  }*, :focus, :visited {
1920
1873
  outline: none !important;
1921
1874
  }
@@ -1997,6 +1950,123 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1997
1950
  .ios-fullscreen::cue {
1998
1951
  visibility: visible !important;
1999
1952
  font-size: 1em !important;
1953
+ }.share_plugin[data-share] {
1954
+ pointer-events: auto;
1955
+ z-index: 5;
1956
+ font-family: Roboto, "Open Sans", Arial, sans-serif !important;
1957
+ }
1958
+ .share_plugin[data-share].share-hide .share-button-container {
1959
+ right: -50px;
1960
+ }
1961
+ .share_plugin[data-share] .share-button-container {
1962
+ cursor: pointer;
1963
+ width: 36px;
1964
+ height: 36px;
1965
+ background-color: rgba(74, 74, 74, 0.6);
1966
+ border-radius: 4px;
1967
+ position: absolute;
1968
+ right: 10px;
1969
+ top: 10px;
1970
+ padding-top: 6px;
1971
+ transition: all 0.3s ease-out;
1972
+ }
1973
+ .share_plugin[data-share] .share-button-container button[data-share-button] {
1974
+ background-color: transparent;
1975
+ border: 0;
1976
+ margin: 0 6px;
1977
+ padding: 0;
1978
+ cursor: pointer;
1979
+ display: inline-block;
1980
+ width: 19px;
1981
+ height: 20px;
1982
+ }
1983
+ .share_plugin[data-share] .share-container {
1984
+ pointer-events: auto;
1985
+ position: absolute;
1986
+ width: 280px;
1987
+ background-color: white;
1988
+ transform: translate(0, 50%);
1989
+ transform: translate(-50%, -50%);
1990
+ left: 50%;
1991
+ /* margin-left: -140px; */
1992
+ top: calc(50% - 20px);
1993
+ /* margin-top: -170px; */
1994
+ }
1995
+ .share_plugin[data-share] .share-container .share-container-header {
1996
+ text-align: left;
1997
+ border-bottom: 1px solid rgba(155, 155, 155, 0.25);
1998
+ }
1999
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
2000
+ display: inline-block;
2001
+ font-size: 16px;
2002
+ margin: 5px;
2003
+ }
2004
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
2005
+ display: inline-block;
2006
+ width: 24px;
2007
+ float: right;
2008
+ margin: 5px;
2009
+ cursor: pointer;
2010
+ }
2011
+ .share_plugin[data-share] .share-container .share-container-main {
2012
+ margin-bottom: 8px;
2013
+ }
2014
+ .share_plugin[data-share] .share-container .share-container-main > div {
2015
+ text-align: left;
2016
+ font-size: 14px;
2017
+ padding: 5px;
2018
+ }
2019
+ .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 {
2020
+ overflow: hidden;
2021
+ text-overflow: ellipsis;
2022
+ color: #818181;
2023
+ border: solid 1px #d3d3d3;
2024
+ width: calc(100% - 10px);
2025
+ padding: 5px;
2026
+ }
2027
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
2028
+ max-height: 90px;
2029
+ resize: none;
2030
+ }
2031
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
2032
+ width: 32px;
2033
+ display: inline-block;
2034
+ margin-right: 5px;
2035
+ cursor: pointer;
2036
+ }.player-poster[data-poster] {
2037
+ display: flex;
2038
+ justify-content: center;
2039
+ align-items: center;
2040
+ position: absolute;
2041
+ height: 100%;
2042
+ width: 100%;
2043
+ z-index: 998;
2044
+ top: 0;
2045
+ left: 0;
2046
+ background-color: #000;
2047
+ background-size: cover;
2048
+ background-repeat: no-repeat;
2049
+ background-position: 50% 50%;
2050
+ }
2051
+ .player-poster[data-poster].clickable {
2052
+ cursor: pointer;
2053
+ }
2054
+ .player-poster[data-poster]:hover .play-wrapper[data-poster] {
2055
+ opacity: 1;
2056
+ }
2057
+ .player-poster[data-poster] .play-wrapper[data-poster] {
2058
+ width: 100%;
2059
+ height: 25%;
2060
+ margin: 0 auto;
2061
+ opacity: 0.75;
2062
+ transition: opacity 0.1s ease;
2063
+ }
2064
+ .player-poster[data-poster] .play-wrapper[data-poster] svg {
2065
+ height: 100%;
2066
+ display: inline;
2067
+ }
2068
+ .player-poster[data-poster] .play-wrapper[data-poster] svg path {
2069
+ fill: #fff;
2000
2070
  }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
2001
2071
  height: 0;
2002
2072
  }
@@ -2088,74 +2158,4 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
2088
2158
  }
2089
2159
  .scrub-thumbnails .backdrop .carousel img {
2090
2160
  width: auto;
2091
- }.media-control-skin-1[data-media-control-skin-1] .media-control-quality,
2092
- .media-control-skin-1[data-media-control-skin-1] .media-control-audio-tracks {
2093
- display: block;
2094
- }
2095
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] {
2096
- width: 40px;
2097
- margin-top: 0;
2098
- }
2099
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button] {
2100
- display: flex;
2101
- justify-content: center;
2102
- padding: 0;
2103
- align-items: center;
2104
- }
2105
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button]:hover {
2106
- color: white;
2107
- }
2108
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul {
2109
- background-color: rgba(74, 74, 74, 0.6);
2110
- border: none;
2111
- width: auto;
2112
- transform: rotate(180deg);
2113
- border-radius: 4px;
2114
- bottom: 52px;
2115
- margin-left: -28px;
2116
- }
2117
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li {
2118
- transform: rotate(-180deg);
2119
- font-size: 16px;
2120
- text-align: center;
2121
- white-space: nowrap;
2122
- height: 30px;
2123
- }
2124
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a {
2125
- height: 30px;
2126
- padding: 5px 10px;
2127
- color: #fffffe;
2128
- }
2129
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a:hover {
2130
- background-color: rgba(0, 0, 0, 0.4);
2131
- }
2132
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li.current a {
2133
- background-color: rgba(0, 0, 0, 0.4);
2134
- }
2135
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:first-child a {
2136
- border-bottom-left-radius: 4px;
2137
- border-bottom-right-radius: 4px;
2138
- }
2139
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:last-child a {
2140
- border-top-left-radius: 4px;
2141
- border-top-right-radius: 4px;
2142
- }
2143
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] {
2144
- height: 26px;
2145
- line-height: 26px;
2146
- bottom: 52px;
2147
- border-radius: 3px;
2148
- background-color: rgba(74, 74, 74, 0.7);
2149
- }
2150
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span {
2151
- letter-spacing: 0.8px;
2152
- font-size: 14px;
2153
- font-family: Roboto, "Open Sans", Arial, sans-serif;
2154
- }
2155
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-seek-time] {
2156
- padding-left: 8px;
2157
- padding-right: 8px;
2158
- }
2159
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-duration] {
2160
- display: none !important;
2161
2161
  }