@gcorevideo/player 2.22.31 → 2.23.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.
Files changed (27) hide show
  1. package/assets/thumbnails/scrub-thumbnails.ejs +5 -10
  2. package/assets/thumbnails/style.scss +4 -5
  3. package/dist/core.js +1 -1
  4. package/dist/index.css +1178 -1176
  5. package/dist/index.js +206 -281
  6. package/lib/plugins/clips/Clips.d.ts +7 -0
  7. package/lib/plugins/clips/Clips.d.ts.map +1 -1
  8. package/lib/plugins/clips/Clips.js +8 -0
  9. package/lib/plugins/media-control/MediaControl.d.ts +1 -7
  10. package/lib/plugins/media-control/MediaControl.d.ts.map +1 -1
  11. package/lib/plugins/media-control/MediaControl.js +9 -18
  12. package/lib/plugins/thumbnails/Thumbnails.d.ts +36 -33
  13. package/lib/plugins/thumbnails/Thumbnails.d.ts.map +1 -1
  14. package/lib/plugins/thumbnails/Thumbnails.js +174 -260
  15. package/lib/plugins/thumbnails/utils.d.ts +5 -0
  16. package/lib/plugins/thumbnails/utils.d.ts.map +1 -0
  17. package/lib/plugins/thumbnails/utils.js +12 -0
  18. package/lib/testUtils.js +2 -2
  19. package/package.json +5 -1
  20. package/src/plugins/clips/Clips.ts +10 -1
  21. package/src/plugins/media-control/MediaControl.ts +10 -21
  22. package/src/plugins/thumbnails/Thumbnails.ts +236 -331
  23. package/src/plugins/thumbnails/__tests__/Thumbnails.test.ts +72 -0
  24. package/src/plugins/thumbnails/__tests__/__snapshots__/Thumbnails.test.ts.snap +10 -0
  25. package/src/plugins/thumbnails/utils.ts +12 -0
  26. package/src/testUtils.ts +2 -2
  27. package/tsconfig.tsbuildinfo +1 -1
package/dist/index.css CHANGED
@@ -122,51 +122,6 @@
122
122
  .gplayer-lite-btn::-moz-focus-inner {
123
123
  border: 0;
124
124
  padding: 0;
125
- }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
126
- order: 99;
127
- height: 20px;
128
- }
129
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
130
- position: absolute;
131
- right: 16px;
132
- bottom: 52px;
133
- width: 250px;
134
- min-height: 48px;
135
- z-index: 9999;
136
- border-radius: 4px;
137
- }
138
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
139
- padding: 8px 0;
140
- }
141
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
142
- margin: 0;
143
- text-align: left;
144
- line-height: 22px;
145
- padding: 5px 14px;
146
- width: 250px;
147
- font-size: 12px;
148
- display: flex;
149
- align-items: center;
150
- justify-content: flex-start;
151
- gap: 8px;
152
- }
153
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option_icon {
154
- flex: 24px 0 0;
155
- height: 24px;
156
- }
157
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option_icon.hidden {
158
- visibility: hidden;
159
- display: inline-block;
160
- }
161
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option_label {
162
- flex: 0 1 100%;
163
- }
164
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option_arrow-right-icon {
165
- flex: 0 0 14px;
166
- height: 24px;
167
- }
168
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option_value {
169
- flex: 1 0 auto;
170
125
  }*, :focus, :visited {
171
126
  outline: none !important;
172
127
  }
@@ -228,128 +183,51 @@
228
183
  }
229
184
  .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
230
185
  display: inline;
231
- }*,
232
- :focus,
233
- :visited {
234
- outline: none !important;
235
- }
236
-
237
- .media-control-audiotracks {
238
- position: relative;
239
- }
240
- .media-control-audiotracks button {
241
- background-color: transparent;
242
- color: #fff;
243
- -webkit-font-smoothing: antialiased;
244
- border: none;
245
- cursor: pointer;
246
- display: flex;
247
- align-items: center;
248
- padding: 0;
249
- }
250
- .media-control-audiotracks button .audio-text {
251
- text-overflow: ellipsis;
252
- overflow: hidden;
253
- white-space: nowrap;
254
- max-width: 100px;
255
- background-color: transparent;
256
- -webkit-font-smoothing: antialiased;
257
- border: none;
258
- cursor: pointer;
259
- }
260
- .media-control-audiotracks button:hover {
261
- color: white;
262
- }
263
- .media-control-audiotracks button.changing {
264
- animation: pulse 0.5s infinite alternate;
265
- }
266
- .media-control-audiotracks button span.audio-arrow {
267
- width: 9px;
268
- height: 6px;
269
- margin-left: 5px;
186
+ }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
187
+ order: 99;
188
+ height: 20px;
270
189
  }
271
- .media-control-audiotracks .menu {
272
- max-width: 114px;
273
- list-style-type: none;
190
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
274
191
  position: absolute;
275
- background-color: rgba(74, 74, 74, 0.6);
276
- border: none;
277
- min-width: 60px;
192
+ right: 16px;
193
+ bottom: 52px;
194
+ width: 250px;
195
+ min-height: 48px;
196
+ z-index: 9999;
278
197
  border-radius: 4px;
279
- bottom: 40px;
280
- right: -2px;
281
- }
282
- .media-control-audiotracks .menu.hidden {
283
- display: none;
284
- }
285
- .media-control-audiotracks li {
286
- font-size: var(--font-size-media-controls-dropdown);
287
- text-align: right;
288
- height: 30px;
289
- }
290
- .media-control-audiotracks li[data-title] {
291
- background-color: #c3c2c2;
292
- padding: 5px;
293
- }
294
- .media-control-audiotracks li a {
295
- display: block;
296
- text-decoration: none;
297
- text-overflow: ellipsis;
298
- overflow: hidden;
299
- white-space: nowrap;
300
- height: 30px;
301
- padding: 5px 10px;
302
- color: #fffffe;
303
- }
304
- .media-control-audiotracks li a:hover {
305
- text-decoration: none;
306
- background-color: rgba(0, 0, 0, 0.4);
307
- color: white;
308
198
  }
309
- .media-control-audiotracks li.current a {
310
- color: #f00;
311
- }
312
- .media-control-audiotracks li:first-child a {
313
- border-bottom-left-radius: 4px;
314
- border-bottom-right-radius: 4px;
315
- }
316
- .media-control-audiotracks li:last-child a {
317
- border-top-left-radius: 4px;
318
- border-top-right-radius: 4px;
199
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
200
+ padding: 8px 0;
319
201
  }
320
-
321
- @keyframes pulse {
322
- 0% {
323
- color: #fff;
324
- }
325
- 50% {
326
- color: #ff0101;
327
- }
328
- 100% {
329
- color: #B80000;
330
- }
331
- }@charset "UTF-8";
332
- .media-control-clips {
202
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
203
+ margin: 0;
204
+ text-align: left;
205
+ line-height: 22px;
206
+ padding: 5px 14px;
207
+ width: 250px;
208
+ font-size: 12px;
333
209
  display: flex;
334
- gap: 6px;
210
+ align-items: center;
211
+ justify-content: flex-start;
212
+ gap: 8px;
335
213
  }
336
- .media-control-clips .media-clip-text {
337
- text-overflow: ellipsis;
338
- white-space: nowrap;
339
- overflow: hidden;
214
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option_icon {
215
+ flex: 24px 0 0;
216
+ height: 24px;
217
+ }
218
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option_icon.hidden {
219
+ visibility: hidden;
340
220
  display: inline-block;
341
- text-overflow: ellipsis;
342
- color: white;
343
- cursor: default;
344
- line-height: var(--bottom-panel);
345
- position: relative;
346
221
  }
347
- .media-control-clips .media-clip-text::before {
348
- content: "•";
349
- padding-right: 6px;
222
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option_label {
223
+ flex: 0 1 100%;
350
224
  }
351
- .media-control-clips .media-clip-text {
352
- max-width: 100px;
225
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option_arrow-right-icon {
226
+ flex: 0 0 14px;
227
+ height: 24px;
228
+ }
229
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option_value {
230
+ flex: 1 0 auto;
353
231
  }:root {
354
232
  --primary-background-color: #000;
355
233
  --secondary-background-color: #262626;
@@ -714,69 +592,56 @@
714
592
  .fullscreen .clappr-nerd-stats .stats-box {
715
593
  top: unset;
716
594
  }
717
- }.big-mute-icon-wrapper[data-big-mute] {
595
+ }.context-menu {
596
+ z-index: 999;
718
597
  position: absolute;
719
- z-index: 9998;
598
+ top: 0;
599
+ left: 0;
600
+ text-align: center;
601
+ }
602
+ .context-menu .context-menu-list {
603
+ font-family: "Proxima Nova", sans-serif;
604
+ font-size: 12px;
605
+ line-height: 12px;
606
+ list-style-type: none;
607
+ text-align: left;
608
+ padding: 5px;
609
+ margin-left: auto;
610
+ margin-right: auto;
611
+ background-color: rgba(0, 0, 0, 0.75);
612
+ border: 1px solid #666;
613
+ border-radius: 4px;
614
+ }
615
+ .context-menu .context-menu-list-item button {
616
+ border: none;
720
617
  background-color: transparent;
618
+ padding: 0;
619
+ color: white;
721
620
  display: flex;
621
+ gap: 8px;
622
+ align-items: center;
722
623
  justify-content: center;
624
+ cursor: pointer;
625
+ padding: 5px;
723
626
  width: 100%;
724
- height: calc(100% - 50px);
725
- margin: 0 auto;
726
- opacity: 0.75;
727
- transition: opacity 0.1s ease;
728
- pointer-events: auto;
729
627
  }
730
- .big-mute-icon-wrapper[data-big-mute].hide {
731
- display: none;
628
+ .context-menu .context-menu-list-item_icon {
629
+ width: 20px;
630
+ height: 20px;
631
+ }.dvr-controls[data-dvr] {
632
+ display: inline-block;
633
+ color: var(--player-dvr-color);
634
+ line-height: 32px;
635
+ font-size: 10px;
636
+ font-weight: bold;
637
+ margin-left: 6px;
638
+ height: 40px;
639
+ line-height: 40px;
640
+ margin-left: 0;
732
641
  }
733
- .big-mute-icon-wrapper[data-big-mute]:hover {
734
- cursor: pointer;
735
- }
736
-
737
- .big-mute-icon[data-big-mute-icon] {
738
- display: flex;
739
- align-items: center;
740
- justify-content: center;
741
- align-self: center;
742
- width: 120px;
743
- height: 120px;
744
- border: 2px solid white;
745
- border-radius: 50%;
746
- filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
747
- filter: alpha(opacity=60);
748
- opacity: 1;
749
- box-shadow: 0 0 1px 0 white;
750
- background: rgba(240, 243, 247, 0.9411764706);
751
- z-index: 10000;
752
- }
753
- .big-mute-icon[data-big-mute-icon] svg {
754
- margin-left: 5px;
755
- width: 80px;
756
- height: 80px;
757
- }
758
- .big-mute-icon[data-big-mute-icon] svg path {
759
- fill: #1f1e1e !important;
760
- }
761
- .big-mute-icon[data-big-mute-icon]:hover {
762
- background: rgba(240, 243, 247, 0.8784313725);
763
- }
764
- .big-mute-icon[data-big-mute-icon]:hover svg path {
765
- fill: #151515 !important;
766
- }.dvr-controls[data-dvr] {
767
- display: inline-block;
768
- color: var(--player-dvr-color);
769
- line-height: 32px;
770
- font-size: 10px;
771
- font-weight: bold;
772
- margin-left: 6px;
773
- height: 40px;
774
- line-height: 40px;
775
- margin-left: 0;
776
- }
777
- .dvr-controls[data-dvr] .live-info {
778
- cursor: default;
779
- text-transform: uppercase;
642
+ .dvr-controls[data-dvr] .live-info {
643
+ cursor: default;
644
+ text-transform: uppercase;
780
645
  }
781
646
  .dvr-controls[data-dvr] .live-info:before {
782
647
  content: "";
@@ -849,6 +714,212 @@
849
714
  border-radius: 50%;
850
715
  margin-right: 8px;
851
716
  background-color: #cacaca;
717
+ }.big-mute-icon-wrapper[data-big-mute] {
718
+ position: absolute;
719
+ z-index: 9998;
720
+ background-color: transparent;
721
+ display: flex;
722
+ justify-content: center;
723
+ width: 100%;
724
+ height: calc(100% - 50px);
725
+ margin: 0 auto;
726
+ opacity: 0.75;
727
+ transition: opacity 0.1s ease;
728
+ pointer-events: auto;
729
+ }
730
+ .big-mute-icon-wrapper[data-big-mute].hide {
731
+ display: none;
732
+ }
733
+ .big-mute-icon-wrapper[data-big-mute]:hover {
734
+ cursor: pointer;
735
+ }
736
+
737
+ .big-mute-icon[data-big-mute-icon] {
738
+ display: flex;
739
+ align-items: center;
740
+ justify-content: center;
741
+ align-self: center;
742
+ width: 120px;
743
+ height: 120px;
744
+ border: 2px solid white;
745
+ border-radius: 50%;
746
+ filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
747
+ filter: alpha(opacity=60);
748
+ opacity: 1;
749
+ box-shadow: 0 0 1px 0 white;
750
+ background: rgba(240, 243, 247, 0.9411764706);
751
+ z-index: 10000;
752
+ }
753
+ .big-mute-icon[data-big-mute-icon] svg {
754
+ margin-left: 5px;
755
+ width: 80px;
756
+ height: 80px;
757
+ }
758
+ .big-mute-icon[data-big-mute-icon] svg path {
759
+ fill: #1f1e1e !important;
760
+ }
761
+ .big-mute-icon[data-big-mute-icon]:hover {
762
+ background: rgba(240, 243, 247, 0.8784313725);
763
+ }
764
+ .big-mute-icon[data-big-mute-icon]:hover svg path {
765
+ fill: #151515 !important;
766
+ }.media-control-pip {
767
+ order: 95;
768
+ display: flex;
769
+ }
770
+ .media-control-pip button {
771
+ height: 20px;
772
+ }
773
+ .media-control-pip button svg {
774
+ height: 20px;
775
+ }*, :focus, :visited {
776
+ outline: none !important;
777
+ }
778
+
779
+ .multicamera[data-multicamera] {
780
+ float: right;
781
+ margin-top: 4px;
782
+ position: relative;
783
+ margin-right: 20px;
784
+ width: 20px;
785
+ }
786
+ .multicamera[data-multicamera] button {
787
+ background-color: transparent;
788
+ color: #fff;
789
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
790
+ -webkit-font-smoothing: antialiased;
791
+ border: none;
792
+ font-size: 14px;
793
+ padding: 0;
794
+ }
795
+ .multicamera[data-multicamera] button svg {
796
+ height: 20px;
797
+ position: relative;
798
+ margin-top: 6px;
799
+ }
800
+ .multicamera[data-multicamera] button:hover {
801
+ color: #c9c9c9;
802
+ }
803
+ .multicamera[data-multicamera] button.changing {
804
+ animation: pulse 0.5s infinite alternate;
805
+ }
806
+ .multicamera[data-multicamera] button span.quality-arrow {
807
+ width: 9px;
808
+ height: 6px;
809
+ margin-top: 11px;
810
+ margin-left: 5px;
811
+ }
812
+ .multicamera[data-multicamera] > ul {
813
+ padding: 6px 0;
814
+ right: -24px;
815
+ width: 245px;
816
+ list-style-type: none;
817
+ position: absolute;
818
+ bottom: 48px;
819
+ border-radius: 4px;
820
+ display: none;
821
+ background-color: rgba(74, 74, 74, 0.9);
822
+ }
823
+ .multicamera[data-multicamera] > ul::after {
824
+ content: "";
825
+ position: absolute;
826
+ top: 100%;
827
+ left: 85%;
828
+ margin-left: -10px;
829
+ width: 0;
830
+ height: 0;
831
+ border-top: 10px solid rgba(74, 74, 74, 0.9);
832
+ border-right: 10px solid transparent;
833
+ border-left: 10px solid transparent;
834
+ }
835
+ .multicamera[data-multicamera] li {
836
+ font-size: 10px;
837
+ cursor: pointer;
838
+ }
839
+ .multicamera[data-multicamera] li .multicamera-item {
840
+ display: flex;
841
+ padding: 10px 0;
842
+ justify-content: center;
843
+ position: relative;
844
+ }
845
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
846
+ pointer-events: none;
847
+ }
848
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
849
+ opacity: 0.5;
850
+ }
851
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
852
+ opacity: 0.5;
853
+ }
854
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
855
+ background-color: rgba(0, 0, 0, 0);
856
+ }
857
+ .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
858
+ background-color: rgba(0, 0, 0, 0.3);
859
+ }
860
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
861
+ width: 80px;
862
+ height: 60px;
863
+ }
864
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
865
+ width: 80px;
866
+ height: 60px;
867
+ }
868
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
869
+ width: 120px;
870
+ text-align: left;
871
+ margin-left: 15px;
872
+ }
873
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title, .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
874
+ width: 120px;
875
+ height: 20px;
876
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
877
+ font-size: 14px;
878
+ font-weight: normal;
879
+ font-style: normal;
880
+ font-stretch: normal;
881
+ line-height: 1.43;
882
+ letter-spacing: normal;
883
+ text-align: left;
884
+ color: #fff;
885
+ text-overflow: ellipsis;
886
+ overflow: hidden;
887
+ }
888
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
889
+ opacity: 0.6;
890
+ }
891
+ .multicamera[data-multicamera] li[data-title] {
892
+ background-color: #c3c2c2;
893
+ padding: 5px;
894
+ }
895
+ .multicamera[data-multicamera] li a {
896
+ color: #444;
897
+ padding: 2px 10px;
898
+ display: block;
899
+ text-decoration: none;
900
+ }
901
+ .multicamera[data-multicamera] li a:hover {
902
+ background-color: #555;
903
+ color: white;
904
+ }
905
+ .multicamera[data-multicamera] li a:hover a {
906
+ color: white;
907
+ text-decoration: none;
908
+ }
909
+ .multicamera[data-multicamera] li.current a {
910
+ color: #f00;
911
+ }
912
+
913
+ @keyframes pulse {
914
+ 0% {
915
+ color: #fff;
916
+ }
917
+ 50% {
918
+ color: #ff0101;
919
+ }
920
+ 100% {
921
+ color: #B80000;
922
+ }
852
923
  }div.player-error-screen, [data-player] div.player-error-screen {
853
924
  color: #CCCACA;
854
925
  position: absolute;
@@ -904,1147 +975,1078 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
904
975
  .mc-skip-time .skip-container .skip-item {
905
976
  flex: 1 0 0px;
906
977
  height: 100%;
907
- }[data-player] {
908
- --bottom-panel: 40px;
909
- }
910
-
911
- .container .media-control-notransition {
912
- transition: none !important;
913
- }
914
- .container .player-poster .play-wrapper {
915
- opacity: 1;
916
- }
917
- .container.crop-video [data-html5-video] {
918
- object-fit: cover;
978
+ }.quality-levels li.disabled {
979
+ opacity: 0.5;
980
+ pointer-events: none;
919
981
  }
920
- .container .cc-line {
982
+ .quality-levels li.current {
983
+ background-color: #000;
984
+ }.player-poster {
985
+ display: flex;
986
+ justify-content: center;
987
+ align-items: center;
921
988
  position: absolute;
922
- bottom: calc(var(--bottom-panel) + 5px);
989
+ height: 100%;
923
990
  width: 100%;
991
+ z-index: 998;
992
+ top: 0;
993
+ left: 0;
994
+ background-color: #000;
995
+ background-size: cover;
996
+ background-repeat: no-repeat;
997
+ background-position: 50% 50%;
924
998
  }
925
- .container .cc-line p {
926
- width: auto;
927
- background-color: rgba(0, 0, 0, 0.4);
928
- color: white;
929
- display: inline-block;
999
+ .player-poster.clickable {
1000
+ cursor: pointer;
930
1001
  }
931
- .container .player-poster .circle-poster {
932
- top: 50%;
933
- margin-top: -60px;
934
- left: 50%;
935
- margin-left: -60px;
936
- position: absolute;
937
- width: 120px;
938
- height: 120px;
939
- border: 2px solid white;
940
- border-radius: 50%;
941
- filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
942
- filter: alpha(opacity=60);
1002
+ .player-poster:hover .play-wrapper {
943
1003
  opacity: 1;
944
- box-shadow: 0 0 1px 0 white;
945
1004
  }
946
- .container .player-poster .circle-poster svg {
947
- margin-left: 5px;
948
- width: 80px;
1005
+ .player-poster .play-wrapper {
1006
+ width: 100%;
1007
+ height: 25%;
1008
+ margin: 0 auto;
1009
+ opacity: 0.75;
1010
+ transition: opacity 0.1s ease;
949
1011
  }
950
- .container .spinner-three-bounce[data-spinner] > div {
951
- background-color: #ff5700;
1012
+ .player-poster .play-wrapper svg {
1013
+ height: 100%;
1014
+ display: inline;
952
1015
  }
953
-
954
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-quality,
955
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-audiotracks {
956
- display: none;
1016
+ .player-poster .play-wrapper svg path {
1017
+ fill: #fff;
1018
+ }.share_plugin[data-share] {
1019
+ pointer-events: auto;
1020
+ z-index: 5;
1021
+ font-family: Roboto, "Open Sans", Arial, sans-serif !important;
957
1022
  }
958
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
959
- transform: rotate(270deg);
960
- float: none;
961
- display: block;
1023
+ .share_plugin[data-share].share-hide .share-button-container {
1024
+ right: -50px;
1025
+ }
1026
+ .share_plugin[data-share] .share-button-container {
1027
+ cursor: pointer;
1028
+ width: 36px;
1029
+ height: 36px;
1030
+ background-color: rgba(74, 74, 74, 0.6);
1031
+ border-radius: 4px;
962
1032
  position: absolute;
963
- /* bottom: 12px; */
964
- margin: 0;
965
- top: -40px;
1033
+ right: 10px;
1034
+ top: 10px;
1035
+ padding-top: 6px;
1036
+ transition: all 0.3s ease-out;
1037
+ }
1038
+ .share_plugin[data-share] .share-button-container button[data-share-button] {
1039
+ background-color: transparent;
1040
+ border: 0;
1041
+ margin: 0 6px;
966
1042
  padding: 0;
967
- /* right: 20px; */
968
- margin-left: -32px;
969
- margin-top: -3px;
970
- width: 80px;
971
- /* padding-left: 12px; */
1043
+ cursor: pointer;
1044
+ display: inline-block;
1045
+ width: 19px;
1046
+ height: 20px;
972
1047
  }
973
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background-mask {
1048
+ .share_plugin[data-share] .share-container {
1049
+ pointer-events: auto;
974
1050
  position: absolute;
975
- width: 100%;
976
- height: 100%;
977
- left: -5px;
1051
+ width: 280px;
1052
+ background-color: white;
1053
+ transform: translate(0, 50%);
1054
+ transform: translate(-50%, -50%);
1055
+ left: 50%;
1056
+ /* margin-left: -140px; */
1057
+ top: calc(50% - 20px);
1058
+ /* margin-top: -170px; */
978
1059
  }
979
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {
980
- display: none;
1060
+ .share_plugin[data-share] .share-container .share-container-header {
1061
+ text-align: left;
1062
+ border-bottom: 1px solid rgba(155, 155, 155, 0.25);
981
1063
  }
982
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background {
983
- margin-left: 11px;
984
- top: 7px;
985
- width: 80px;
1064
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1065
+ display: inline-block;
1066
+ font-size: 16px;
1067
+ margin: 5px;
986
1068
  }
987
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber {
988
- margin-left: 11px;
989
- top: 1px;
1069
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
1070
+ display: inline-block;
1071
+ width: 24px;
1072
+ float: right;
1073
+ margin: 5px;
1074
+ cursor: pointer;
990
1075
  }
991
-
992
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-cc {
993
- width: 28px;
1076
+ .share_plugin[data-share] .share-container .share-container-main {
1077
+ margin-bottom: 8px;
994
1078
  }
995
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-cc svg {
996
- height: 17px;
1079
+ .share_plugin[data-share] .share-container .share-container-main > div {
1080
+ text-align: left;
1081
+ font-size: 14px;
1082
+ padding: 5px;
997
1083
  }
998
- .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container {
999
- top: calc(50% - 150px);
1000
- left: calc(50% - 125px);
1001
- width: 250px;
1002
- height: calc(100% - 32px);
1003
- max-height: 300px;
1004
- transform: none;
1084
+ .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 {
1085
+ overflow: hidden;
1086
+ text-overflow: ellipsis;
1087
+ color: #818181;
1088
+ border: solid 1px #d3d3d3;
1089
+ width: calc(100% - 10px);
1090
+ padding: 5px;
1005
1091
  }
1006
- .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container .share-container-header {
1007
- border: none;
1092
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
1093
+ max-height: 90px;
1094
+ resize: none;
1008
1095
  }
1009
- .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1010
- visibility: hidden;
1096
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
1097
+ width: 32px;
1098
+ display: inline-block;
1099
+ margin-right: 5px;
1100
+ cursor: pointer;
1101
+ }*,
1102
+ :focus,
1103
+ :visited {
1104
+ outline: none !important;
1011
1105
  }
1012
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality,
1013
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks {
1014
- display: block;
1106
+
1107
+ .media-control-audiotracks {
1108
+ position: relative;
1015
1109
  }
1016
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector],
1017
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] {
1018
- margin-top: 3px;
1019
- margin-right: 10px;
1110
+ .media-control-audiotracks button {
1111
+ background-color: transparent;
1112
+ color: #fff;
1113
+ -webkit-font-smoothing: antialiased;
1114
+ border: none;
1115
+ cursor: pointer;
1116
+ display: flex;
1117
+ align-items: center;
1118
+ padding: 0;
1020
1119
  }
1021
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] ul,
1022
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] ul {
1023
- bottom: 30px;
1024
- width: 50px;
1120
+ .media-control-audiotracks button .audio-text {
1121
+ text-overflow: ellipsis;
1122
+ overflow: hidden;
1123
+ white-space: nowrap;
1124
+ max-width: 100px;
1125
+ background-color: transparent;
1126
+ -webkit-font-smoothing: antialiased;
1127
+ border: none;
1128
+ cursor: pointer;
1025
1129
  }
1026
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] ul li,
1027
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] ul li {
1028
- height: 23px;
1029
- font-size: 14px;
1130
+ .media-control-audiotracks button:hover {
1131
+ color: white;
1030
1132
  }
1031
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] ul li a,
1032
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] ul li a {
1033
- height: 23px;
1034
- padding: 2px 5px;
1133
+ .media-control-audiotracks button.changing {
1134
+ animation: pulse 0.5s infinite alternate;
1035
1135
  }
1036
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-level-selector-button] .quality-text,
1037
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-level-selector-button] .audio-text,
1038
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-audiotracks-button] .quality-text,
1039
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-audiotracks-button] .audio-text,
1040
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-level-selector-button] .quality-text,
1041
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-level-selector-button] .audio-text,
1042
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] .quality-text,
1043
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] .audio-text {
1044
- font-size: 13px;
1136
+ .media-control-audiotracks button span.audio-arrow {
1137
+ width: 9px;
1138
+ height: 6px;
1139
+ margin-left: 5px;
1045
1140
  }
1046
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-level-selector-button] span.quality-arrow,
1047
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-level-selector-button] span.audio-arrow,
1048
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-audiotracks-button] span.quality-arrow,
1049
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-audiotracks-button] span.audio-arrow,
1050
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-level-selector-button] span.quality-arrow,
1051
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-level-selector-button] span.audio-arrow,
1052
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] span.quality-arrow,
1053
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] span.audio-arrow {
1054
- width: 7px;
1055
- height: 5px;
1056
- margin-left: 4px;
1057
- margin-top: 11px;
1141
+ .media-control-audiotracks .menu {
1142
+ max-width: 114px;
1143
+ list-style-type: none;
1144
+ position: absolute;
1145
+ background-color: rgba(74, 74, 74, 0.6);
1146
+ border: none;
1147
+ min-width: 60px;
1148
+ border-radius: 4px;
1149
+ bottom: 40px;
1150
+ right: -2px;
1058
1151
  }
1059
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera {
1060
- margin-top: 0;
1061
- margin-right: 10px;
1152
+ .media-control-audiotracks .menu.hidden {
1153
+ display: none;
1062
1154
  }
1063
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera button {
1064
- height: 32px;
1065
- }
1066
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera button svg {
1067
- height: 17px;
1068
- margin: 0;
1069
- }
1070
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] {
1071
- padding-left: 10px;
1072
- padding-right: 12px;
1073
- }
1074
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator {
1075
- line-height: 32px;
1076
- }
1077
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator[data-position], .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator[data-duration] {
1078
- font-size: 11px;
1079
- line-height: 32px;
1080
- }
1081
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr] {
1082
- height: 32px;
1083
- }
1084
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr] .live-button {
1085
- margin-left: 10px;
1086
- height: 32px;
1087
- font-size: 12px;
1088
- line-height: 32px;
1089
- text-shadow: none;
1090
- letter-spacing: 0.6px;
1091
- }
1092
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr] .live-button::before {
1093
- width: 8px;
1094
- height: 8px;
1095
- margin-right: 4px;
1096
- }
1097
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr] .live-info {
1098
- margin-left: 10px;
1099
- height: 32px;
1100
- font-size: 12px;
1101
- line-height: 32px;
1102
- text-shadow: none;
1103
- letter-spacing: 0.6px;
1104
- }
1105
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr] .live-info::before {
1106
- width: 8px;
1107
- height: 8px;
1108
- margin-right: 4px;
1109
- }
1110
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button {
1111
- height: 32px;
1155
+ .media-control-audiotracks li {
1156
+ font-size: var(--font-size-media-controls-dropdown);
1157
+ text-align: right;
1158
+ height: 30px;
1112
1159
  }
1113
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {
1114
- height: 33px;
1160
+ .media-control-audiotracks li[data-title] {
1161
+ background-color: #c3c2c2;
1162
+ padding: 5px;
1115
1163
  }
1116
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button svg {
1117
- height: 17px;
1164
+ .media-control-audiotracks li a {
1165
+ display: block;
1166
+ text-decoration: none;
1167
+ text-overflow: ellipsis;
1168
+ overflow: hidden;
1169
+ white-space: nowrap;
1170
+ height: 30px;
1171
+ padding: 5px 10px;
1172
+ color: #fffffe;
1118
1173
  }
1119
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-clip-container .media-clip-text,
1120
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-clips .media-clip-text {
1121
- line-height: 33px;
1122
- font-size: 11px;
1174
+ .media-control-audiotracks li a:hover {
1175
+ text-decoration: none;
1176
+ background-color: rgba(0, 0, 0, 0.4);
1177
+ color: white;
1123
1178
  }
1124
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-clip-container .media-clip-text,
1125
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-clips .media-clip-text {
1126
- max-width: 50px;
1179
+ .media-control-audiotracks li.current a {
1180
+ color: #f00;
1127
1181
  }
1128
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] {
1129
- height: 32px;
1130
- margin-right: 8px;
1182
+ .media-control-audiotracks li:first-child a {
1183
+ border-bottom-left-radius: 4px;
1184
+ border-bottom-right-radius: 4px;
1131
1185
  }
1132
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {
1133
- height: 32px;
1186
+ .media-control-audiotracks li:last-child a {
1187
+ border-top-left-radius: 4px;
1188
+ border-top-right-radius: 4px;
1134
1189
  }
1135
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {
1136
- height: 17px;
1137
- margin-top: 5px;
1190
+
1191
+ @keyframes pulse {
1192
+ 0% {
1193
+ color: #fff;
1194
+ }
1195
+ 50% {
1196
+ color: #ff0101;
1197
+ }
1198
+ 100% {
1199
+ color: #B80000;
1200
+ }
1201
+ }.spinner-three-bounce[data-spinner] {
1202
+ position: absolute;
1203
+ width: 70px;
1204
+ text-align: center;
1205
+ z-index: 999;
1206
+ left: 0;
1207
+ right: 0;
1208
+ margin: 0 auto;
1209
+ margin-left: auto;
1210
+ margin-right: auto;
1211
+ /* center vertically */
1212
+ top: 50%;
1213
+ transform: translateY(-50%);
1138
1214
  }
1139
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
1140
- display: none;
1215
+ .spinner-three-bounce[data-spinner] > div {
1216
+ width: 18px;
1217
+ height: 18px;
1218
+ background-color: #FFF;
1219
+ border-radius: 100%;
1220
+ display: inline-block;
1221
+ animation: bouncedelay 1.4s infinite ease-in-out;
1222
+ /* Prevent first frame from flickering when animation starts */
1223
+ animation-fill-mode: both;
1141
1224
  }
1142
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {
1143
- width: 0;
1144
- height: 12px;
1145
- top: 9px;
1146
- padding: 0;
1225
+ .spinner-three-bounce[data-spinner] [data-bounce1] {
1226
+ animation-delay: -0.32s;
1147
1227
  }
1148
-
1149
- :root {
1150
- --font-size-media-controls: 14px;
1151
- --font-size-media-controls-dropdown: 16px;
1152
- --player-vod-color: #005aff;
1153
- --player-dvr-color: #fff;
1154
- --player-live-color: #ff0101;
1155
- --player-seekbar-current-color: #ff5700;
1156
- --player-seekbar-buffer-color: #fff;
1228
+ .spinner-three-bounce[data-spinner] [data-bounce2] {
1229
+ animation-delay: -0.16s;
1157
1230
  }
1158
1231
 
1159
- .media-control-skin-1[data-media-control-skin-1] {
1232
+ @keyframes bouncedelay {
1233
+ 0%, 80%, 100% {
1234
+ transform: scale(0);
1235
+ }
1236
+ 40% {
1237
+ transform: scale(1);
1238
+ }
1239
+ }.scrub-thumbnails {
1160
1240
  position: absolute;
1241
+ bottom: 52px;
1161
1242
  width: 100%;
1162
- height: 100%;
1163
- z-index: 9999;
1164
- pointer-events: none;
1165
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1166
- font-size: var(--font-size-media-controls);
1243
+ transition: opacity 0.3s ease;
1167
1244
  }
1168
- .media-control-skin-1[data-media-control-skin-1].dragging {
1169
- pointer-events: auto;
1170
- cursor: grabbing !important;
1171
- cursor: url("closed-hand.cur"), move;
1245
+ .scrub-thumbnails.hidden {
1246
+ opacity: 0;
1172
1247
  }
1173
- .media-control-skin-1[data-media-control-skin-1].dragging * {
1174
- cursor: grabbing !important;
1175
- cursor: url("closed-hand.cur"), move;
1248
+ .scrub-thumbnails .thumbnail-container {
1249
+ display: inline-block;
1250
+ position: relative;
1251
+ overflow: hidden;
1252
+ background-color: #000;
1176
1253
  }
1177
- .media-control-skin-1[data-media-control-skin-1] .media-control-icon {
1178
- line-height: 0;
1179
- letter-spacing: 0;
1180
- speak: none;
1181
- color: #fff;
1182
- vertical-align: middle;
1183
- text-align: left;
1184
- transition: all 0.1s ease;
1254
+ .scrub-thumbnails .thumbnail-container .thumbnail-img {
1255
+ position: absolute;
1256
+ width: auto;
1185
1257
  }
1186
- .media-control-skin-1[data-media-control-skin-1] .media-control-icon:hover {
1258
+ .scrub-thumbnails .thumbnails-text {
1259
+ background-color: rgba(74, 74, 74, 0.7);
1260
+ border-radius: 3px;
1261
+ white-space: nowrap;
1262
+ overflow: hidden;
1263
+ text-overflow: ellipsis;
1187
1264
  color: white;
1265
+ position: absolute;
1266
+ bottom: 23px;
1267
+ width: 100px;
1268
+ padding: 0 4px;
1269
+ font-size: 12px;
1188
1270
  }
1189
- .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-background[data-background] {
1190
- opacity: 0;
1191
- }
1192
- .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-layer[data-controls] {
1193
- bottom: -50px;
1271
+ .scrub-thumbnails .spotlight {
1272
+ background-color: #4a4a4a;
1273
+ overflow: hidden;
1274
+ position: absolute;
1275
+ bottom: 0;
1276
+ left: 0;
1277
+ border-color: #4a4a4a;
1278
+ border-style: solid;
1279
+ border-width: 3px;
1280
+ border-radius: 3px;
1194
1281
  }
1195
- .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {
1196
- opacity: 0;
1282
+ .scrub-thumbnails .spotlight img {
1283
+ width: auto;
1197
1284
  }
1198
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] {
1285
+ .scrub-thumbnails .backdrop {
1199
1286
  position: absolute;
1287
+ left: 0;
1200
1288
  bottom: 0;
1201
- width: 100%;
1202
- padding: 0 12px 0 8px;
1203
- height: var(--bottom-panel);
1204
- vertical-align: middle;
1205
- pointer-events: auto;
1206
- transition: bottom 0.4s ease-out;
1207
- display: flex;
1208
- justify-content: space-between;
1209
- }
1210
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-left-panel {
1211
- display: flex;
1212
- align-items: center;
1213
- gap: 0.5rem;
1214
- justify-content: flex-start;
1289
+ right: 0;
1290
+ background-color: #000;
1291
+ overflow: hidden;
1215
1292
  }
1216
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-center-panel {
1293
+ .scrub-thumbnails .backdrop .carousel {
1294
+ position: absolute;
1295
+ top: 0;
1296
+ left: 0;
1217
1297
  height: 100%;
1218
- text-align: center;
1219
- line-height: var(--bottom-panel);
1220
- }
1221
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-right-panel {
1222
- display: flex;
1223
- align-items: center;
1224
- gap: 1rem;
1225
- justify-content: flex-end;
1298
+ white-space: nowrap;
1226
1299
  }
1227
- @media (max-width: 420px) {
1228
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-right-panel {
1229
- gap: 0.5rem;
1230
- overflow: hidden;
1231
- }
1300
+ .scrub-thumbnails .backdrop .carousel img {
1301
+ width: auto;
1302
+ }.seek-time {
1303
+ position: absolute;
1304
+ white-space: nowrap;
1305
+ height: 20px;
1306
+ line-height: 20px;
1307
+ font-size: 0;
1308
+ left: -100%;
1309
+ bottom: 55px;
1310
+ background-color: rgba(2, 2, 2, 0.5);
1311
+ z-index: 9999;
1312
+ transition: opacity 0.1s ease;
1232
1313
  }
1233
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button {
1234
- background-color: transparent;
1235
- border: 0;
1236
- padding: 0;
1237
- cursor: pointer;
1314
+ .seek-time.hidden {
1315
+ opacity: 0;
1316
+ }
1317
+ .seek-time .seek-time__pos {
1238
1318
  display: inline-block;
1239
- height: 20px;
1240
- width: 24px;
1319
+ color: white;
1320
+ font-size: 10px;
1321
+ padding-left: 7px;
1322
+ padding-right: 7px;
1323
+ vertical-align: top;
1241
1324
  }
1242
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button svg {
1243
- height: 20px;
1325
+ .seek-time .seek-time__duration {
1326
+ display: inline-block;
1327
+ color: rgba(255, 255, 255, 0.5);
1328
+ font-size: 10px;
1329
+ padding-right: 7px;
1330
+ vertical-align: top;
1244
1331
  }
1245
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button svg path {
1332
+ .seek-time .seek-time__duration::before {
1333
+ content: "|";
1334
+ margin-right: 7px;
1335
+ }*,
1336
+ :focus,
1337
+ :visited {
1338
+ outline: none !important;
1339
+ }
1340
+
1341
+ .media-control-cc[data-cc] {
1342
+ position: relative;
1343
+ order: 85;
1344
+ }
1345
+ .media-control-cc[data-cc] button {
1346
+ background-color: transparent;
1347
+ color: #fff;
1348
+ -webkit-font-smoothing: antialiased;
1349
+ border: none;
1350
+ cursor: pointer;
1351
+ }
1352
+ .media-control-cc[data-cc] button .cc-text svg {
1246
1353
  fill: white;
1247
1354
  }
1248
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button:focus {
1249
- outline: none;
1355
+ .media-control-cc[data-cc] button:hover {
1356
+ color: #c9c9c9;
1250
1357
  }
1251
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-play] {
1252
- float: left;
1253
- height: 100%;
1358
+ .media-control-cc[data-cc] button.changing {
1359
+ animation: pulse 0.5s infinite alternate;
1254
1360
  }
1255
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-pause] {
1256
- float: left;
1257
- height: 100%;
1361
+ .media-control-cc[data-cc] ul {
1362
+ width: 80px;
1363
+ list-style-type: none;
1364
+ position: absolute;
1365
+ bottom: 25px;
1366
+ border: 1px solid black;
1367
+ background-color: #e6e6e6;
1368
+ padding: 8px 0;
1258
1369
  }
1259
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-stop] {
1260
- float: left;
1261
- height: 100%;
1370
+ .media-control-cc[data-cc] li a {
1371
+ color: #444;
1372
+ padding: 2px 10px;
1373
+ display: block;
1374
+ text-decoration: none;
1262
1375
  }
1263
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {
1264
- order: 100;
1265
- background-color: transparent;
1266
- border: 0;
1267
- height: 40px;
1376
+ .media-control-cc[data-cc] li a:hover {
1377
+ background-color: #555;
1378
+ color: white;
1268
1379
  }
1269
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-hd-indicator] {
1270
- background-color: transparent;
1271
- border: 0;
1272
- cursor: default;
1273
- display: none !important;
1274
- float: right;
1380
+ .media-control-cc[data-cc] li a:hover a {
1381
+ color: white;
1382
+ text-decoration: none;
1383
+ }
1384
+ .media-control-cc[data-cc] li.current a {
1385
+ color: #f00;
1386
+ background-color: #555;
1387
+ }
1388
+
1389
+ @keyframes pulse {
1390
+ 0% {
1391
+ color: #fff;
1392
+ }
1393
+ 50% {
1394
+ color: #ff0101;
1395
+ }
1396
+ 100% {
1397
+ color: #B80000;
1398
+ }
1399
+ }
1400
+ ::cue {
1401
+ visibility: hidden !important;
1402
+ font-size: 0 !important;
1403
+ }
1404
+
1405
+ .ios-fullscreen::cue {
1406
+ visibility: visible !important;
1407
+ font-size: 1em !important;
1408
+ }.player-logo[data-logo] {
1409
+ position: absolute;
1410
+ z-index: 2;
1411
+ width: 100%;
1275
1412
  height: 100%;
1276
1413
  }
1277
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-position], .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration] {
1414
+
1415
+ .clappr-logo {
1416
+ position: absolute;
1417
+ }@charset "UTF-8";
1418
+ .media-control-clips {
1278
1419
  display: flex;
1420
+ gap: 6px;
1421
+ }
1422
+ .media-control-clips .media-clip-text {
1423
+ text-overflow: ellipsis;
1424
+ white-space: nowrap;
1425
+ overflow: hidden;
1426
+ display: inline-block;
1427
+ text-overflow: ellipsis;
1279
1428
  color: white;
1280
1429
  cursor: default;
1281
1430
  line-height: var(--bottom-panel);
1282
1431
  position: relative;
1283
1432
  }
1284
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-position] {
1285
- margin: 1px 0 0 7px;
1433
+ .media-control-clips .media-clip-text::before {
1434
+ content: "•";
1435
+ padding-right: 6px;
1286
1436
  }
1287
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration] {
1288
- color: rgb(255, 255, 255);
1289
- opacity: 0.5;
1290
- margin-top: 1px;
1291
- margin-right: 6px;
1437
+ .media-control-clips .media-clip-text {
1438
+ max-width: 100px;
1439
+ }[data-player] {
1440
+ --bottom-panel: 40px;
1292
1441
  }
1293
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration]::before {
1294
- content: "|";
1295
- margin-right: 7px;
1442
+
1443
+ .container .media-control-notransition {
1444
+ transition: none !important;
1296
1445
  }
1297
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] {
1446
+ .container .player-poster .play-wrapper {
1447
+ opacity: 1;
1448
+ }
1449
+ .container.crop-video [data-html5-video] {
1450
+ object-fit: cover;
1451
+ }
1452
+ .container .cc-line {
1298
1453
  position: absolute;
1299
- top: -11px;
1300
- left: 0;
1301
- display: inline-block;
1302
- vertical-align: middle;
1454
+ bottom: calc(var(--bottom-panel) + 5px);
1303
1455
  width: 100%;
1304
- height: 20px;
1305
- cursor: pointer;
1306
1456
  }
1307
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] {
1308
- width: 100%;
1309
- height: 3px;
1310
- position: relative;
1311
- top: 8px;
1312
- background-color: #666;
1457
+ .container .cc-line p {
1458
+ width: auto;
1459
+ background-color: rgba(0, 0, 0, 0.4);
1460
+ color: white;
1461
+ display: inline-block;
1313
1462
  }
1314
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-1[data-seekbar] {
1463
+ .container .player-poster .circle-poster {
1464
+ top: 50%;
1465
+ margin-top: -60px;
1466
+ left: 50%;
1467
+ margin-left: -60px;
1315
1468
  position: absolute;
1316
- top: 0;
1317
- left: 0;
1318
- width: 0;
1319
- height: 100%;
1320
- background-color: var(--player-seekbar-buffer-color);
1321
- transition: all 0.1s ease-out;
1469
+ width: 120px;
1470
+ height: 120px;
1471
+ border: 2px solid white;
1472
+ border-radius: 50%;
1473
+ filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
1474
+ filter: alpha(opacity=60);
1475
+ opacity: 1;
1476
+ box-shadow: 0 0 1px 0 white;
1322
1477
  }
1323
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
1324
- position: absolute;
1325
- top: 0;
1326
- left: 0;
1327
- width: 0;
1328
- height: 100%;
1329
- background-color: var(--player-seekbar-current-color);
1330
- transition: all 0.1s ease-out;
1478
+ .container .player-poster .circle-poster svg {
1479
+ margin-left: 5px;
1480
+ width: 80px;
1331
1481
  }
1332
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled {
1333
- cursor: default;
1334
- display: none;
1482
+ .container .spinner-three-bounce[data-spinner] > div {
1483
+ background-color: #ff5700;
1335
1484
  }
1336
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled + .bar-scrubber[data-seekbar] {
1337
- cursor: default;
1485
+
1486
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-quality,
1487
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-audiotracks {
1338
1488
  display: none;
1339
1489
  }
1340
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {
1341
- position: absolute;
1342
- transform: translateX(-50%);
1343
- top: -11.5px;
1344
- left: 0;
1345
- width: 20px;
1346
- height: 20px;
1347
- opacity: 1;
1348
- transition: all 0.1s ease-out;
1349
- }
1350
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-scrubber[data-seekbar] .bar-scrubber-icon[data-seekbar] {
1490
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
1491
+ transform: rotate(270deg);
1492
+ float: none;
1493
+ display: block;
1351
1494
  position: absolute;
1352
- left: 4.5px;
1353
- top: 4.5px;
1354
- width: 11px;
1355
- height: 11px;
1356
- border-radius: 50%;
1357
- background-color: white;
1495
+ /* bottom: 12px; */
1496
+ margin: 0;
1497
+ top: -40px;
1498
+ padding: 0;
1499
+ /* right: 20px; */
1500
+ margin-left: -32px;
1501
+ margin-top: -3px;
1502
+ width: 80px;
1503
+ /* padding-left: 12px; */
1358
1504
  }
1359
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] {
1360
- display: flex;
1361
- justify-content: flex-start;
1362
- height: var(--bottom-panel);
1363
- cursor: pointer;
1364
- box-sizing: border-box;
1505
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background-mask {
1506
+ position: absolute;
1507
+ width: 100%;
1508
+ height: 100%;
1509
+ left: -5px;
1365
1510
  }
1366
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] {
1367
- bottom: 0;
1511
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {
1512
+ display: none;
1368
1513
  }
1369
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {
1370
- background-color: transparent;
1371
- border: 0;
1372
- box-sizing: content-box;
1373
- height: var(--bottom-panel);
1374
- width: 20px;
1514
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background {
1515
+ margin-left: 11px;
1516
+ top: 7px;
1517
+ width: 80px;
1375
1518
  }
1376
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {
1377
- height: 20px;
1378
- position: relative;
1379
- top: 3px;
1380
- margin-top: 7px;
1519
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber {
1520
+ margin-left: 11px;
1521
+ top: 1px;
1381
1522
  }
1382
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg path {
1383
- fill: white;
1523
+
1524
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-cc {
1525
+ width: 28px;
1384
1526
  }
1385
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume].muted svg {
1386
- margin-left: 2px;
1527
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-cc svg {
1528
+ height: 17px;
1387
1529
  }
1388
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
1389
- position: relative;
1390
- margin-left: 10px;
1391
- top: 8px;
1392
- width: 80px;
1393
- height: 23px;
1394
- padding: 3px 0;
1395
- transition: width 0.2s ease-out;
1530
+ .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container {
1531
+ top: calc(50% - 150px);
1532
+ left: calc(50% - 125px);
1533
+ width: 250px;
1534
+ height: calc(100% - 32px);
1535
+ max-height: 300px;
1536
+ transform: none;
1396
1537
  }
1397
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] {
1398
- height: 3px;
1399
- border-radius: 100px;
1400
- position: relative;
1401
- top: 7px;
1402
- background-color: #666;
1538
+ .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container .share-container-header {
1539
+ border: none;
1403
1540
  }
1404
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-1[data-volume] {
1405
- position: absolute;
1406
- top: 0;
1407
- left: 0;
1408
- width: 0;
1409
- height: 100%;
1410
- border-radius: 100px;
1411
- background-color: white;
1412
- transition: all 0.1s ease-out;
1541
+ .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1542
+ visibility: hidden;
1413
1543
  }
1414
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-2[data-volume] {
1415
- position: absolute;
1416
- top: 0;
1417
- left: 0;
1418
- width: 0;
1419
- height: 100%;
1420
- background-color: var(--player-vod-color);
1421
- transition: all 0.1s ease-out;
1544
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality,
1545
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks {
1546
+ display: block;
1422
1547
  }
1423
- .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] {
1424
- position: absolute;
1425
- transform: translateX(-50%);
1426
- top: 3px;
1427
- margin-left: 3px;
1428
- width: 16px;
1429
- height: 16px;
1430
- opacity: 1;
1431
- transition: all 0.1s ease-out;
1548
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector],
1549
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] {
1550
+ margin-top: 3px;
1551
+ margin-right: 10px;
1432
1552
  }
1433
- .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] {
1434
- position: absolute;
1435
- left: 3px;
1436
- top: 5px;
1437
- width: 7px;
1438
- height: 7px;
1439
- border-radius: 50%;
1440
- background-color: white;
1553
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] ul,
1554
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] ul {
1555
+ bottom: 30px;
1556
+ width: 50px;
1441
1557
  }
1442
- .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] {
1443
- float: left;
1444
- width: 4px;
1445
- padding-left: 2px;
1446
- height: 12px;
1447
- opacity: 0.5;
1448
- box-shadow: inset 2px 0 0 white;
1449
- transition: transform 0.2s ease-out;
1558
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] ul li,
1559
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] ul li {
1560
+ height: 23px;
1561
+ font-size: 14px;
1450
1562
  }
1451
- .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 {
1452
- box-shadow: inset 2px 0 0 #fff;
1453
- opacity: 1;
1563
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] ul li a,
1564
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] ul li a {
1565
+ height: 23px;
1566
+ padding: 2px 5px;
1454
1567
  }
1455
- .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) {
1456
- padding-left: 0;
1568
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-level-selector-button] .quality-text,
1569
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-level-selector-button] .audio-text,
1570
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-audiotracks-button] .quality-text,
1571
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-audiotracks-button] .audio-text,
1572
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-level-selector-button] .quality-text,
1573
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-level-selector-button] .audio-text,
1574
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] .quality-text,
1575
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] .audio-text {
1576
+ font-size: 13px;
1457
1577
  }
1458
- .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 {
1459
- transform: scaleY(1.5);
1578
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-level-selector-button] span.quality-arrow,
1579
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-level-selector-button] span.audio-arrow,
1580
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-audiotracks-button] span.quality-arrow,
1581
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-audiotracks-button] span.audio-arrow,
1582
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-level-selector-button] span.quality-arrow,
1583
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-level-selector-button] span.audio-arrow,
1584
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] span.quality-arrow,
1585
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] span.audio-arrow {
1586
+ width: 7px;
1587
+ height: 5px;
1588
+ margin-left: 4px;
1589
+ margin-top: 11px;
1460
1590
  }
1461
-
1462
- /* TODO distribute between plugins' styles */
1463
- .media-control-skin-1[data-media-control-skin-1] .media-control-cc button[data-cc-button] {
1464
- display: flex;
1465
- justify-content: center;
1466
- padding: 0;
1467
- align-items: center;
1591
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera {
1592
+ margin-top: 0;
1593
+ margin-right: 10px;
1468
1594
  }
1469
- .media-control-skin-1[data-media-control-skin-1] .media-control-cc button[data-cc-button]:hover {
1470
- color: white;
1595
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera button {
1596
+ height: 32px;
1471
1597
  }
1472
- .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul {
1473
- background-color: rgba(74, 74, 74, 0.6);
1474
- border: none;
1475
- width: auto;
1476
- border-radius: 4px;
1477
- bottom: 52px;
1478
- margin-left: -28px;
1598
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera button svg {
1599
+ height: 17px;
1600
+ margin: 0;
1479
1601
  }
1480
- .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li {
1481
- font-size: 16px;
1482
- text-align: center;
1483
- white-space: nowrap;
1484
- height: 30px;
1602
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] {
1603
+ padding-left: 10px;
1604
+ padding-right: 12px;
1485
1605
  }
1486
- .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li a {
1487
- height: 30px;
1488
- padding: 5px 10px;
1489
- color: #fffffe;
1606
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator {
1607
+ line-height: 32px;
1490
1608
  }
1491
- .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li a:hover {
1492
- background-color: rgba(0, 0, 0, 0.4);
1609
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator[data-position], .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator[data-duration] {
1610
+ font-size: 11px;
1611
+ line-height: 32px;
1493
1612
  }
1494
- .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li.current a {
1495
- background-color: rgba(0, 0, 0, 0.4);
1613
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr] {
1614
+ height: 32px;
1496
1615
  }
1497
- .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li:first-child a {
1498
- border-bottom-left-radius: 4px;
1499
- border-bottom-right-radius: 4px;
1616
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr] .live-button {
1617
+ margin-left: 10px;
1618
+ height: 32px;
1619
+ font-size: 12px;
1620
+ line-height: 32px;
1621
+ text-shadow: none;
1622
+ letter-spacing: 0.6px;
1500
1623
  }
1501
- .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li:last-child a {
1502
- border-top-left-radius: 4px;
1503
- border-top-right-radius: 4px;
1624
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr] .live-button::before {
1625
+ width: 8px;
1626
+ height: 8px;
1627
+ margin-right: 4px;
1504
1628
  }
1505
- .media-control-skin-1[data-media-control-skin-1] .seek-time {
1506
- height: 26px;
1507
- line-height: 26px;
1508
- bottom: 52px;
1509
- border-radius: 3px;
1510
- background-color: rgba(74, 74, 74, 0.7);
1629
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr] .live-info {
1630
+ margin-left: 10px;
1631
+ height: 32px;
1632
+ font-size: 12px;
1633
+ line-height: 32px;
1634
+ text-shadow: none;
1635
+ letter-spacing: 0.6px;
1511
1636
  }
1512
- .media-control-skin-1[data-media-control-skin-1] .seek-time span {
1513
- letter-spacing: 0.8px;
1514
- font-size: 14px;
1515
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1637
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr] .live-info::before {
1638
+ width: 8px;
1639
+ height: 8px;
1640
+ margin-right: 4px;
1516
1641
  }
1517
- .media-control-skin-1[data-media-control-skin-1] .seek-time .seek-time__pos {
1518
- padding-left: 8px;
1519
- padding-right: 8px;
1520
- }*, :focus, :visited {
1521
- outline: none !important;
1522
- }
1523
-
1524
- .multicamera[data-multicamera] {
1525
- float: right;
1526
- margin-top: 4px;
1527
- position: relative;
1528
- margin-right: 20px;
1529
- width: 20px;
1530
- }
1531
- .multicamera[data-multicamera] button {
1532
- background-color: transparent;
1533
- color: #fff;
1534
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1535
- -webkit-font-smoothing: antialiased;
1536
- border: none;
1537
- font-size: 14px;
1538
- padding: 0;
1539
- }
1540
- .multicamera[data-multicamera] button svg {
1541
- height: 20px;
1542
- position: relative;
1543
- margin-top: 6px;
1544
- }
1545
- .multicamera[data-multicamera] button:hover {
1546
- color: #c9c9c9;
1547
- }
1548
- .multicamera[data-multicamera] button.changing {
1549
- animation: pulse 0.5s infinite alternate;
1550
- }
1551
- .multicamera[data-multicamera] button span.quality-arrow {
1552
- width: 9px;
1553
- height: 6px;
1554
- margin-top: 11px;
1555
- margin-left: 5px;
1556
- }
1557
- .multicamera[data-multicamera] > ul {
1558
- padding: 6px 0;
1559
- right: -24px;
1560
- width: 245px;
1561
- list-style-type: none;
1562
- position: absolute;
1563
- bottom: 48px;
1564
- border-radius: 4px;
1565
- display: none;
1566
- background-color: rgba(74, 74, 74, 0.9);
1567
- }
1568
- .multicamera[data-multicamera] > ul::after {
1569
- content: "";
1570
- position: absolute;
1571
- top: 100%;
1572
- left: 85%;
1573
- margin-left: -10px;
1574
- width: 0;
1575
- height: 0;
1576
- border-top: 10px solid rgba(74, 74, 74, 0.9);
1577
- border-right: 10px solid transparent;
1578
- border-left: 10px solid transparent;
1579
- }
1580
- .multicamera[data-multicamera] li {
1581
- font-size: 10px;
1582
- cursor: pointer;
1583
- }
1584
- .multicamera[data-multicamera] li .multicamera-item {
1585
- display: flex;
1586
- padding: 10px 0;
1587
- justify-content: center;
1588
- position: relative;
1589
- }
1590
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
1591
- pointer-events: none;
1592
- }
1593
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
1594
- opacity: 0.5;
1595
- }
1596
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
1597
- opacity: 0.5;
1598
- }
1599
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
1600
- background-color: rgba(0, 0, 0, 0);
1601
- }
1602
- .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
1603
- background-color: rgba(0, 0, 0, 0.3);
1604
- }
1605
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
1606
- width: 80px;
1607
- height: 60px;
1608
- }
1609
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
1610
- width: 80px;
1611
- height: 60px;
1612
- }
1613
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
1614
- width: 120px;
1615
- text-align: left;
1616
- margin-left: 15px;
1617
- }
1618
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title, .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1619
- width: 120px;
1620
- height: 20px;
1621
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1622
- font-size: 14px;
1623
- font-weight: normal;
1624
- font-style: normal;
1625
- font-stretch: normal;
1626
- line-height: 1.43;
1627
- letter-spacing: normal;
1628
- text-align: left;
1629
- color: #fff;
1630
- text-overflow: ellipsis;
1631
- overflow: hidden;
1632
- }
1633
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1634
- opacity: 0.6;
1635
- }
1636
- .multicamera[data-multicamera] li[data-title] {
1637
- background-color: #c3c2c2;
1638
- padding: 5px;
1639
- }
1640
- .multicamera[data-multicamera] li a {
1641
- color: #444;
1642
- padding: 2px 10px;
1643
- display: block;
1644
- text-decoration: none;
1645
- }
1646
- .multicamera[data-multicamera] li a:hover {
1647
- background-color: #555;
1648
- color: white;
1649
- }
1650
- .multicamera[data-multicamera] li a:hover a {
1651
- color: white;
1652
- text-decoration: none;
1653
- }
1654
- .multicamera[data-multicamera] li.current a {
1655
- color: #f00;
1656
- }
1657
-
1658
- @keyframes pulse {
1659
- 0% {
1660
- color: #fff;
1661
- }
1662
- 50% {
1663
- color: #ff0101;
1664
- }
1665
- 100% {
1666
- color: #B80000;
1667
- }
1668
- }.media-control-pip {
1669
- order: 95;
1670
- display: flex;
1671
- }
1672
- .media-control-pip button {
1673
- height: 20px;
1674
- }
1675
- .media-control-pip button svg {
1676
- height: 20px;
1677
- }.player-poster {
1678
- display: flex;
1679
- justify-content: center;
1680
- align-items: center;
1681
- position: absolute;
1682
- height: 100%;
1683
- width: 100%;
1684
- z-index: 998;
1685
- top: 0;
1686
- left: 0;
1687
- background-color: #000;
1688
- background-size: cover;
1689
- background-repeat: no-repeat;
1690
- background-position: 50% 50%;
1691
- }
1692
- .player-poster.clickable {
1693
- cursor: pointer;
1694
- }
1695
- .player-poster:hover .play-wrapper {
1696
- opacity: 1;
1697
- }
1698
- .player-poster .play-wrapper {
1699
- width: 100%;
1700
- height: 25%;
1701
- margin: 0 auto;
1702
- opacity: 0.75;
1703
- transition: opacity 0.1s ease;
1704
- }
1705
- .player-poster .play-wrapper svg {
1706
- height: 100%;
1707
- display: inline;
1708
- }
1709
- .player-poster .play-wrapper svg path {
1710
- fill: #fff;
1711
- }.spinner-three-bounce[data-spinner] {
1712
- position: absolute;
1713
- width: 70px;
1714
- text-align: center;
1715
- z-index: 999;
1716
- left: 0;
1717
- right: 0;
1718
- margin: 0 auto;
1719
- margin-left: auto;
1720
- margin-right: auto;
1721
- /* center vertically */
1722
- top: 50%;
1723
- transform: translateY(-50%);
1724
- }
1725
- .spinner-three-bounce[data-spinner] > div {
1726
- width: 18px;
1727
- height: 18px;
1728
- background-color: #FFF;
1729
- border-radius: 100%;
1730
- display: inline-block;
1731
- animation: bouncedelay 1.4s infinite ease-in-out;
1732
- /* Prevent first frame from flickering when animation starts */
1733
- animation-fill-mode: both;
1734
- }
1735
- .spinner-three-bounce[data-spinner] [data-bounce1] {
1736
- animation-delay: -0.32s;
1737
- }
1738
- .spinner-three-bounce[data-spinner] [data-bounce2] {
1739
- animation-delay: -0.16s;
1740
- }
1741
-
1742
- @keyframes bouncedelay {
1743
- 0%, 80%, 100% {
1744
- transform: scale(0);
1745
- }
1746
- 40% {
1747
- transform: scale(1);
1748
- }
1749
- }.share_plugin[data-share] {
1750
- pointer-events: auto;
1751
- z-index: 5;
1752
- font-family: Roboto, "Open Sans", Arial, sans-serif !important;
1753
- }
1754
- .share_plugin[data-share].share-hide .share-button-container {
1755
- right: -50px;
1756
- }
1757
- .share_plugin[data-share] .share-button-container {
1758
- cursor: pointer;
1759
- width: 36px;
1760
- height: 36px;
1761
- background-color: rgba(74, 74, 74, 0.6);
1762
- border-radius: 4px;
1763
- position: absolute;
1764
- right: 10px;
1765
- top: 10px;
1766
- padding-top: 6px;
1767
- transition: all 0.3s ease-out;
1768
- }
1769
- .share_plugin[data-share] .share-button-container button[data-share-button] {
1770
- background-color: transparent;
1771
- border: 0;
1772
- margin: 0 6px;
1773
- padding: 0;
1774
- cursor: pointer;
1775
- display: inline-block;
1776
- width: 19px;
1777
- height: 20px;
1778
- }
1779
- .share_plugin[data-share] .share-container {
1780
- pointer-events: auto;
1781
- position: absolute;
1782
- width: 280px;
1783
- background-color: white;
1784
- transform: translate(0, 50%);
1785
- transform: translate(-50%, -50%);
1786
- left: 50%;
1787
- /* margin-left: -140px; */
1788
- top: calc(50% - 20px);
1789
- /* margin-top: -170px; */
1790
- }
1791
- .share_plugin[data-share] .share-container .share-container-header {
1792
- text-align: left;
1793
- border-bottom: 1px solid rgba(155, 155, 155, 0.25);
1794
- }
1795
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1796
- display: inline-block;
1797
- font-size: 16px;
1798
- margin: 5px;
1799
- }
1800
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
1801
- display: inline-block;
1802
- width: 24px;
1803
- float: right;
1804
- margin: 5px;
1805
- cursor: pointer;
1642
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button {
1643
+ height: 32px;
1806
1644
  }
1807
- .share_plugin[data-share] .share-container .share-container-main {
1808
- margin-bottom: 8px;
1645
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {
1646
+ height: 33px;
1809
1647
  }
1810
- .share_plugin[data-share] .share-container .share-container-main > div {
1811
- text-align: left;
1812
- font-size: 14px;
1813
- padding: 5px;
1648
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button svg {
1649
+ height: 17px;
1814
1650
  }
1815
- .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 {
1816
- overflow: hidden;
1817
- text-overflow: ellipsis;
1818
- color: #818181;
1819
- border: solid 1px #d3d3d3;
1820
- width: calc(100% - 10px);
1821
- padding: 5px;
1651
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-clip-container .media-clip-text,
1652
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-clips .media-clip-text {
1653
+ line-height: 33px;
1654
+ font-size: 11px;
1822
1655
  }
1823
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
1824
- max-height: 90px;
1825
- resize: none;
1656
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-clip-container .media-clip-text,
1657
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-clips .media-clip-text {
1658
+ max-width: 50px;
1826
1659
  }
1827
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
1828
- width: 32px;
1829
- display: inline-block;
1830
- margin-right: 5px;
1831
- cursor: pointer;
1832
- }*,
1833
- :focus,
1834
- :visited {
1835
- outline: none !important;
1660
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] {
1661
+ height: 32px;
1662
+ margin-right: 8px;
1836
1663
  }
1837
-
1838
- .media-control-cc[data-cc] {
1839
- position: relative;
1840
- order: 85;
1664
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {
1665
+ height: 32px;
1841
1666
  }
1842
- .media-control-cc[data-cc] button {
1843
- background-color: transparent;
1844
- color: #fff;
1845
- -webkit-font-smoothing: antialiased;
1846
- border: none;
1847
- cursor: pointer;
1667
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {
1668
+ height: 17px;
1669
+ margin-top: 5px;
1848
1670
  }
1849
- .media-control-cc[data-cc] button .cc-text svg {
1850
- fill: white;
1671
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
1672
+ display: none;
1851
1673
  }
1852
- .media-control-cc[data-cc] button:hover {
1853
- color: #c9c9c9;
1674
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {
1675
+ width: 0;
1676
+ height: 12px;
1677
+ top: 9px;
1678
+ padding: 0;
1854
1679
  }
1855
- .media-control-cc[data-cc] button.changing {
1856
- animation: pulse 0.5s infinite alternate;
1680
+
1681
+ :root {
1682
+ --font-size-media-controls: 14px;
1683
+ --font-size-media-controls-dropdown: 16px;
1684
+ --player-vod-color: #005aff;
1685
+ --player-dvr-color: #fff;
1686
+ --player-live-color: #ff0101;
1687
+ --player-seekbar-current-color: #ff5700;
1688
+ --player-seekbar-buffer-color: #fff;
1857
1689
  }
1858
- .media-control-cc[data-cc] ul {
1859
- width: 80px;
1860
- list-style-type: none;
1690
+
1691
+ .media-control-skin-1[data-media-control-skin-1] {
1861
1692
  position: absolute;
1862
- bottom: 25px;
1863
- border: 1px solid black;
1864
- background-color: #e6e6e6;
1865
- padding: 8px 0;
1693
+ width: 100%;
1694
+ height: 100%;
1695
+ z-index: 9999;
1696
+ pointer-events: none;
1697
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1698
+ font-size: var(--font-size-media-controls);
1866
1699
  }
1867
- .media-control-cc[data-cc] li a {
1868
- color: #444;
1869
- padding: 2px 10px;
1870
- display: block;
1871
- text-decoration: none;
1700
+ .media-control-skin-1[data-media-control-skin-1].dragging {
1701
+ pointer-events: auto;
1702
+ cursor: grabbing !important;
1703
+ cursor: url("closed-hand.cur"), move;
1872
1704
  }
1873
- .media-control-cc[data-cc] li a:hover {
1874
- background-color: #555;
1875
- color: white;
1705
+ .media-control-skin-1[data-media-control-skin-1].dragging * {
1706
+ cursor: grabbing !important;
1707
+ cursor: url("closed-hand.cur"), move;
1876
1708
  }
1877
- .media-control-cc[data-cc] li a:hover a {
1709
+ .media-control-skin-1[data-media-control-skin-1] .media-control-icon {
1710
+ line-height: 0;
1711
+ letter-spacing: 0;
1712
+ speak: none;
1713
+ color: #fff;
1714
+ vertical-align: middle;
1715
+ text-align: left;
1716
+ transition: all 0.1s ease;
1717
+ }
1718
+ .media-control-skin-1[data-media-control-skin-1] .media-control-icon:hover {
1878
1719
  color: white;
1879
- text-decoration: none;
1880
1720
  }
1881
- .media-control-cc[data-cc] li.current a {
1882
- color: #f00;
1883
- background-color: #555;
1721
+ .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-background[data-background] {
1722
+ opacity: 0;
1884
1723
  }
1885
-
1886
- @keyframes pulse {
1887
- 0% {
1888
- color: #fff;
1889
- }
1890
- 50% {
1891
- color: #ff0101;
1892
- }
1893
- 100% {
1894
- color: #B80000;
1895
- }
1724
+ .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-layer[data-controls] {
1725
+ bottom: -50px;
1896
1726
  }
1897
- ::cue {
1898
- visibility: hidden !important;
1899
- font-size: 0 !important;
1727
+ .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {
1728
+ opacity: 0;
1900
1729
  }
1901
-
1902
- .ios-fullscreen::cue {
1903
- visibility: visible !important;
1904
- font-size: 1em !important;
1905
- }.context-menu {
1906
- z-index: 999;
1730
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] {
1907
1731
  position: absolute;
1908
- top: 0;
1909
- left: 0;
1732
+ bottom: 0;
1733
+ width: 100%;
1734
+ padding: 0 12px 0 8px;
1735
+ height: var(--bottom-panel);
1736
+ vertical-align: middle;
1737
+ pointer-events: auto;
1738
+ transition: bottom 0.4s ease-out;
1739
+ display: flex;
1740
+ justify-content: space-between;
1741
+ }
1742
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-left-panel {
1743
+ display: flex;
1744
+ align-items: center;
1745
+ gap: 0.5rem;
1746
+ justify-content: flex-start;
1747
+ }
1748
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-center-panel {
1749
+ height: 100%;
1910
1750
  text-align: center;
1751
+ line-height: var(--bottom-panel);
1911
1752
  }
1912
- .context-menu .context-menu-list {
1913
- font-family: "Proxima Nova", sans-serif;
1914
- font-size: 12px;
1915
- line-height: 12px;
1916
- list-style-type: none;
1917
- text-align: left;
1918
- padding: 5px;
1919
- margin-left: auto;
1920
- margin-right: auto;
1921
- background-color: rgba(0, 0, 0, 0.75);
1922
- border: 1px solid #666;
1923
- border-radius: 4px;
1753
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-right-panel {
1754
+ display: flex;
1755
+ align-items: center;
1756
+ gap: 1rem;
1757
+ justify-content: flex-end;
1924
1758
  }
1925
- .context-menu .context-menu-list-item button {
1926
- border: none;
1759
+ @media (max-width: 420px) {
1760
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-right-panel {
1761
+ gap: 0.5rem;
1762
+ overflow: hidden;
1763
+ }
1764
+ }
1765
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button {
1927
1766
  background-color: transparent;
1767
+ border: 0;
1928
1768
  padding: 0;
1929
- color: white;
1930
- display: flex;
1931
- gap: 8px;
1932
- align-items: center;
1933
- justify-content: center;
1934
1769
  cursor: pointer;
1935
- padding: 5px;
1936
- width: 100%;
1937
- }
1938
- .context-menu .context-menu-list-item_icon {
1939
- width: 20px;
1770
+ display: inline-block;
1940
1771
  height: 20px;
1941
- }.quality-levels li.disabled {
1942
- opacity: 0.5;
1943
- pointer-events: none;
1772
+ width: 24px;
1944
1773
  }
1945
- .quality-levels li.current {
1946
- background-color: #000;
1947
- }.seek-time {
1948
- position: absolute;
1949
- white-space: nowrap;
1774
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button svg {
1950
1775
  height: 20px;
1951
- line-height: 20px;
1952
- font-size: 0;
1953
- left: -100%;
1954
- bottom: 55px;
1955
- background-color: rgba(2, 2, 2, 0.5);
1956
- z-index: 9999;
1957
- transition: opacity 0.1s ease;
1958
1776
  }
1959
- .seek-time.hidden {
1960
- opacity: 0;
1777
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button svg path {
1778
+ fill: white;
1961
1779
  }
1962
- .seek-time .seek-time__pos {
1963
- display: inline-block;
1780
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button:focus {
1781
+ outline: none;
1782
+ }
1783
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-play] {
1784
+ float: left;
1785
+ height: 100%;
1786
+ }
1787
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-pause] {
1788
+ float: left;
1789
+ height: 100%;
1790
+ }
1791
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-stop] {
1792
+ float: left;
1793
+ height: 100%;
1794
+ }
1795
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {
1796
+ order: 100;
1797
+ background-color: transparent;
1798
+ border: 0;
1799
+ height: 40px;
1800
+ }
1801
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-hd-indicator] {
1802
+ background-color: transparent;
1803
+ border: 0;
1804
+ cursor: default;
1805
+ display: none !important;
1806
+ float: right;
1807
+ height: 100%;
1808
+ }
1809
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-position], .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration] {
1810
+ display: flex;
1964
1811
  color: white;
1965
- font-size: 10px;
1966
- padding-left: 7px;
1967
- padding-right: 7px;
1968
- vertical-align: top;
1812
+ cursor: default;
1813
+ line-height: var(--bottom-panel);
1814
+ position: relative;
1969
1815
  }
1970
- .seek-time .seek-time__duration {
1971
- display: inline-block;
1972
- color: rgba(255, 255, 255, 0.5);
1973
- font-size: 10px;
1974
- padding-right: 7px;
1975
- vertical-align: top;
1816
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-position] {
1817
+ margin: 1px 0 0 7px;
1976
1818
  }
1977
- .seek-time .seek-time__duration::before {
1819
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration] {
1820
+ color: rgb(255, 255, 255);
1821
+ opacity: 0.5;
1822
+ margin-top: 1px;
1823
+ margin-right: 6px;
1824
+ }
1825
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration]::before {
1978
1826
  content: "|";
1979
1827
  margin-right: 7px;
1980
- }.scrub-thumbnails {
1828
+ }
1829
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] {
1981
1830
  position: absolute;
1982
- bottom: 52px;
1831
+ top: -11px;
1832
+ left: 0;
1833
+ display: inline-block;
1834
+ vertical-align: middle;
1983
1835
  width: 100%;
1984
- transition: opacity 0.3s ease;
1985
- }
1986
- .scrub-thumbnails.hidden {
1987
- opacity: 0;
1836
+ height: 20px;
1837
+ cursor: pointer;
1988
1838
  }
1989
- .scrub-thumbnails .thumbnail-container {
1990
- display: inline-block;
1839
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] {
1840
+ width: 100%;
1841
+ height: 3px;
1991
1842
  position: relative;
1992
- overflow: hidden;
1993
- background-color: #000;
1994
- }
1995
- .scrub-thumbnails .thumbnail-container .thumbnail-img {
1996
- position: absolute;
1997
- width: auto;
1843
+ top: 8px;
1844
+ background-color: #666;
1998
1845
  }
1999
- .scrub-thumbnails .thumbnails-text {
2000
- background-color: rgba(74, 74, 74, 0.7);
2001
- border-radius: 3px;
2002
- white-space: nowrap;
2003
- overflow: hidden;
2004
- text-overflow: ellipsis;
2005
- color: white;
1846
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-1[data-seekbar] {
2006
1847
  position: absolute;
2007
- bottom: 23px;
2008
- width: 100px;
1848
+ top: 0;
1849
+ left: 0;
1850
+ width: 0;
1851
+ height: 100%;
1852
+ background-color: var(--player-seekbar-buffer-color);
1853
+ transition: all 0.1s ease-out;
2009
1854
  }
2010
- .scrub-thumbnails .spotlight {
2011
- background-color: #4a4a4a;
2012
- overflow: hidden;
1855
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
2013
1856
  position: absolute;
2014
- bottom: 0;
1857
+ top: 0;
2015
1858
  left: 0;
2016
- border-color: #4a4a4a;
2017
- border-style: solid;
2018
- border-width: 3px;
2019
- border-radius: 3px;
1859
+ width: 0;
1860
+ height: 100%;
1861
+ background-color: var(--player-seekbar-current-color);
1862
+ transition: all 0.1s ease-out;
2020
1863
  }
2021
- .scrub-thumbnails .spotlight img {
2022
- width: auto;
1864
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled {
1865
+ cursor: default;
1866
+ display: none;
2023
1867
  }
2024
- .scrub-thumbnails .backdrop {
1868
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled + .bar-scrubber[data-seekbar] {
1869
+ cursor: default;
1870
+ display: none;
1871
+ }
1872
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {
2025
1873
  position: absolute;
1874
+ transform: translateX(-50%);
1875
+ top: -11.5px;
2026
1876
  left: 0;
1877
+ width: 20px;
1878
+ height: 20px;
1879
+ opacity: 1;
1880
+ transition: all 0.1s ease-out;
1881
+ }
1882
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-scrubber[data-seekbar] .bar-scrubber-icon[data-seekbar] {
1883
+ position: absolute;
1884
+ left: 4.5px;
1885
+ top: 4.5px;
1886
+ width: 11px;
1887
+ height: 11px;
1888
+ border-radius: 50%;
1889
+ background-color: white;
1890
+ }
1891
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] {
1892
+ display: flex;
1893
+ justify-content: flex-start;
1894
+ height: var(--bottom-panel);
1895
+ cursor: pointer;
1896
+ box-sizing: border-box;
1897
+ }
1898
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] {
2027
1899
  bottom: 0;
2028
- right: 0;
2029
- background-color: #000;
2030
- overflow: hidden;
2031
1900
  }
2032
- .scrub-thumbnails .backdrop .carousel {
1901
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {
1902
+ background-color: transparent;
1903
+ border: 0;
1904
+ box-sizing: content-box;
1905
+ height: var(--bottom-panel);
1906
+ width: 20px;
1907
+ }
1908
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {
1909
+ height: 20px;
1910
+ position: relative;
1911
+ top: 3px;
1912
+ margin-top: 7px;
1913
+ }
1914
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg path {
1915
+ fill: white;
1916
+ }
1917
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume].muted svg {
1918
+ margin-left: 2px;
1919
+ }
1920
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
1921
+ position: relative;
1922
+ margin-left: 10px;
1923
+ top: 8px;
1924
+ width: 80px;
1925
+ height: 23px;
1926
+ padding: 3px 0;
1927
+ transition: width 0.2s ease-out;
1928
+ }
1929
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] {
1930
+ height: 3px;
1931
+ border-radius: 100px;
1932
+ position: relative;
1933
+ top: 7px;
1934
+ background-color: #666;
1935
+ }
1936
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-1[data-volume] {
2033
1937
  position: absolute;
2034
1938
  top: 0;
2035
1939
  left: 0;
1940
+ width: 0;
2036
1941
  height: 100%;
2037
- white-space: nowrap;
1942
+ border-radius: 100px;
1943
+ background-color: white;
1944
+ transition: all 0.1s ease-out;
2038
1945
  }
2039
- .scrub-thumbnails .backdrop .carousel img {
2040
- width: auto;
2041
- }.player-logo[data-logo] {
1946
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-2[data-volume] {
2042
1947
  position: absolute;
2043
- z-index: 2;
2044
- width: 100%;
1948
+ top: 0;
1949
+ left: 0;
1950
+ width: 0;
2045
1951
  height: 100%;
1952
+ background-color: var(--player-vod-color);
1953
+ transition: all 0.1s ease-out;
2046
1954
  }
2047
-
2048
- .clappr-logo {
1955
+ .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] {
1956
+ position: absolute;
1957
+ transform: translateX(-50%);
1958
+ top: 3px;
1959
+ margin-left: 3px;
1960
+ width: 16px;
1961
+ height: 16px;
1962
+ opacity: 1;
1963
+ transition: all 0.1s ease-out;
1964
+ }
1965
+ .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] {
2049
1966
  position: absolute;
1967
+ left: 3px;
1968
+ top: 5px;
1969
+ width: 7px;
1970
+ height: 7px;
1971
+ border-radius: 50%;
1972
+ background-color: white;
1973
+ }
1974
+ .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] {
1975
+ float: left;
1976
+ width: 4px;
1977
+ padding-left: 2px;
1978
+ height: 12px;
1979
+ opacity: 0.5;
1980
+ box-shadow: inset 2px 0 0 white;
1981
+ transition: transform 0.2s ease-out;
1982
+ }
1983
+ .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 {
1984
+ box-shadow: inset 2px 0 0 #fff;
1985
+ opacity: 1;
1986
+ }
1987
+ .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) {
1988
+ padding-left: 0;
1989
+ }
1990
+ .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 {
1991
+ transform: scaleY(1.5);
1992
+ }
1993
+
1994
+ /* TODO distribute between plugins' styles */
1995
+ .media-control-skin-1[data-media-control-skin-1] .media-control-cc button[data-cc-button] {
1996
+ display: flex;
1997
+ justify-content: center;
1998
+ padding: 0;
1999
+ align-items: center;
2000
+ }
2001
+ .media-control-skin-1[data-media-control-skin-1] .media-control-cc button[data-cc-button]:hover {
2002
+ color: white;
2003
+ }
2004
+ .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul {
2005
+ background-color: rgba(74, 74, 74, 0.6);
2006
+ border: none;
2007
+ width: auto;
2008
+ border-radius: 4px;
2009
+ bottom: 52px;
2010
+ margin-left: -28px;
2011
+ }
2012
+ .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li {
2013
+ font-size: 16px;
2014
+ text-align: center;
2015
+ white-space: nowrap;
2016
+ height: 30px;
2017
+ }
2018
+ .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li a {
2019
+ height: 30px;
2020
+ padding: 5px 10px;
2021
+ color: #fffffe;
2022
+ }
2023
+ .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li a:hover {
2024
+ background-color: rgba(0, 0, 0, 0.4);
2025
+ }
2026
+ .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li.current a {
2027
+ background-color: rgba(0, 0, 0, 0.4);
2028
+ }
2029
+ .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li:first-child a {
2030
+ border-bottom-left-radius: 4px;
2031
+ border-bottom-right-radius: 4px;
2032
+ }
2033
+ .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li:last-child a {
2034
+ border-top-left-radius: 4px;
2035
+ border-top-right-radius: 4px;
2036
+ }
2037
+ .media-control-skin-1[data-media-control-skin-1] .seek-time {
2038
+ height: 26px;
2039
+ line-height: 26px;
2040
+ bottom: 52px;
2041
+ border-radius: 3px;
2042
+ background-color: rgba(74, 74, 74, 0.7);
2043
+ }
2044
+ .media-control-skin-1[data-media-control-skin-1] .seek-time span {
2045
+ letter-spacing: 0.8px;
2046
+ font-size: 14px;
2047
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
2048
+ }
2049
+ .media-control-skin-1[data-media-control-skin-1] .seek-time .seek-time__pos {
2050
+ padding-left: 8px;
2051
+ padding-right: 8px;
2050
2052
  }