@viewlift/player-backup 2.0.348-backup → 2.0.350-backup

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 (65) hide show
  1. package/cjs/{autoNextVideo-edc097a1.js → autoNextVideo-b61ef51a.js} +1 -1
  2. package/cjs/bundle.css +987 -987
  3. package/cjs/{features-caccb092.js → features-85cc0d0e.js} +1 -1
  4. package/cjs/{generic-13b8debd.js → generic-37fccf7c.js} +1 -1
  5. package/cjs/{index-7ec7d20b.js → index-003f4563.js} +1 -1
  6. package/cjs/{index-ae34b733.js → index-0df2452b.js} +1 -1
  7. package/cjs/index-641241d9.js +1 -0
  8. package/cjs/{index-a5a5f19f.js → index-95592b91.js} +1 -1
  9. package/cjs/index.js +1 -1
  10. package/cjs/{multicamv2-a9b61d4a.js → multicamv2-1d8f22bd.js} +1 -1
  11. package/cjs/{multicamv2-533b95d9.js → multicamv2-66c8a520.js} +1 -1
  12. package/cjs/{nextEpisodeButton-f5dcc8a2.js → nextEpisodeButton-f2ec19c2.js} +1 -1
  13. package/cjs/{playlist-22e22306.js → playlist-c8698689.js} +1 -1
  14. package/cjs/{series-1bdb4b5a.js → series-93fdfc9e.js} +1 -1
  15. package/cjs/{series-v2-064d3215.js → series-v2-3530d560.js} +1 -1
  16. package/cjs/{series-v2-f7a0908c.js → series-v2-56531302.js} +1 -1
  17. package/cjs/skin-070a81bf.js +1 -0
  18. package/cjs/{skin-9d3da0fb.js → skin-0908f28a.js} +1 -1
  19. package/cjs/{skin-71d8ad74.js → skin-1ac5d660.js} +1 -1
  20. package/cjs/{skin-86f9c4d0.js → skin-33783b72.js} +1 -1
  21. package/cjs/{skin-9e9a4817.js → skin-42c4ec6f.js} +1 -1
  22. package/cjs/{skin-c2a40b1a.js → skin-57bc5d49.js} +1 -1
  23. package/cjs/{skin-9ea984e1.js → skin-5e1cf589.js} +1 -1
  24. package/cjs/{skin-9b9be294.js → skin-7eab8810.js} +1 -1
  25. package/cjs/{skin-3548b097.js → skin-b3988dd7.js} +1 -1
  26. package/cjs/{skin-e37b1e55.js → skin-f0259f24.js} +1 -1
  27. package/cjs/{videoSelector-1ca81eab.js → videoSelector-259674e8.js} +1 -1
  28. package/cjs/{videoSelector-8542df1a.js → videoSelector-d2938e5e.js} +1 -1
  29. package/esm/{autoNextVideo-0a43d4ba.js → autoNextVideo-88f2eb8a.js} +1 -1
  30. package/esm/bundle.css +987 -987
  31. package/esm/features-48c7570e.js +1 -0
  32. package/esm/{generic-0618f730.js → generic-89376c33.js} +1 -1
  33. package/esm/helpers/playerControlEvents.d.ts +56 -0
  34. package/esm/{index-10e9934f.js → index-5d7fe297.js} +1 -1
  35. package/esm/{index-f09a905c.js → index-669ae4a1.js} +1 -1
  36. package/esm/{index-796a5d7b.js → index-b48a5d93.js} +1 -1
  37. package/esm/index-dffbf847.js +1 -0
  38. package/esm/index.d.ts +2 -0
  39. package/esm/index.js +1 -1
  40. package/esm/{multicamv2-cb9c2480.js → multicamv2-4f74662c.js} +1 -1
  41. package/esm/{multicamv2-f7694b60.js → multicamv2-9e3efadb.js} +1 -1
  42. package/esm/{nextEpisodeButton-bb9fe110.js → nextEpisodeButton-3e35a0f1.js} +1 -1
  43. package/esm/{playlist-95653a86.js → playlist-42c7068f.js} +1 -1
  44. package/esm/{series-cba492a1.js → series-160fc0ca.js} +1 -1
  45. package/esm/{series-v2-628cf0d3.js → series-v2-2b76e863.js} +1 -1
  46. package/esm/series-v2-b5605328.js +1 -0
  47. package/esm/{skin-e26c7928.js → skin-116c35d0.js} +1 -1
  48. package/esm/{skin-494e6a2a.js → skin-240a0d58.js} +1 -1
  49. package/esm/{skin-6a06bdb1.js → skin-6ba68c5f.js} +1 -1
  50. package/esm/{skin-97af5799.js → skin-7c392524.js} +1 -1
  51. package/esm/skin-8a9b5520.js +1 -0
  52. package/esm/{skin-c1492f6a.js → skin-a0327a5a.js} +1 -1
  53. package/esm/{skin-5b407e72.js → skin-b4d23af8.js} +1 -1
  54. package/esm/{skin-ce79afce.js → skin-f2b54133.js} +1 -1
  55. package/esm/{skin-999b5476.js → skin-f5d7a540.js} +1 -1
  56. package/esm/{skin-f7be092c.js → skin-fd0c3eb0.js} +1 -1
  57. package/esm/{videoSelector-72a670cf.js → videoSelector-a23d4a40.js} +1 -1
  58. package/esm/{videoSelector-6a4fbe8c.js → videoSelector-a8a75506.js} +1 -1
  59. package/package.json +25 -25
  60. package/cjs/index-5da999ba.js +0 -1
  61. package/cjs/skin-168e66ac.js +0 -1
  62. package/esm/features-631b5f6c.js +0 -1
  63. package/esm/index-480542e3.js +0 -1
  64. package/esm/series-v2-8abf383f.js +0 -1
  65. package/esm/skin-97b13f03.js +0 -1
package/esm/bundle.css CHANGED
@@ -1,9 +1,6 @@
1
1
 
2
2
 
3
3
 
4
-
5
-
6
-
7
4
  .video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control {
8
5
  height: 0.7em !important;
9
6
  position: absolute !important;
@@ -205,31 +202,32 @@
205
202
  .video-js .vjs-control-bar .vjs-subs-caps-button .vjs-menu .vjs-selected {
206
203
  text-decoration: underline;
207
204
  }
208
- .video-js.skin_news .vjs-button>.vjs-icon-placeholder:before {
205
+
206
+ .video-js.skin_news_live .vjs-button>.vjs-icon-placeholder:before {
209
207
  font-size: 2.2em;
210
208
  line-height: 2.6;
211
209
  }
212
- .video-js.skin_news .vjs-custom-big-mute.vjs-control{
213
- background: white;
210
+ .video-js.skin_news_live .vjs-custom-big-mute.vjs-control{
211
+ background: #fcb700;
214
212
  }
215
- .video-js.skin_news .vjs-control-bar{
213
+ .video-js.skin_news_live .vjs-control-bar{
216
214
  z-index: 1 !important;
217
215
  height: 5em !important;
218
216
  background: black !important;
219
217
  }
220
- .video-js.skin_news .vjs-playback-rate .vjs-playback-rate-value{
218
+ .video-js.skin_news_live .vjs-playback-rate .vjs-playback-rate-value{
221
219
  display: flex;
222
220
  align-items: center;
223
221
  justify-content: center;
224
222
  }
225
223
 
226
- .video-js.skin_news .vjs-fade>* {
224
+ .video-js.skin_news_live .vjs-fade>* {
227
225
  visibility: hidden !important;
228
226
  opacity: 0 !important;
229
227
  transition: visibility 1s, opacity 1s !important;
230
228
  }
231
229
 
232
- .video-js.skin_news .custom-spaced-progress-bar {
230
+ .video-js.skin_news_live .custom-spaced-progress-bar {
233
231
  position: absolute;
234
232
  width: 100%;
235
233
  display: flex;
@@ -237,7 +235,7 @@
237
235
  top: -0.5em;
238
236
  }
239
237
 
240
- .video-js.skin_news .vjs-progress-control {
238
+ .video-js.skin_news_live .vjs-progress-control {
241
239
  /* left: -6px; */
242
240
  position: relative;
243
241
  width: 100%;
@@ -245,22 +243,25 @@
245
243
  transition: height 0.1s, top 0.1s;
246
244
  }
247
245
 
246
+ .video-js.skin_news_live .vjs-volume-panel{
247
+ min-width: 5.3em;
248
+ }
248
249
 
249
250
 
250
251
 
251
- .video-js.skin_news .vjs-custom-control-spacer {
252
- display: block;
253
- flex: 1 1 auto;
252
+ .video-js.skin_news_live .vjs-custom-control-spacer {
253
+ /* display: block; */
254
+ /* flex: 1 1 auto; */
254
255
  }
255
256
 
256
- .video-js.skin_news .vjs-progress-control .vjs-progress-holder {
257
+ .video-js.skin_news_live .vjs-progress-control .vjs-progress-holder {
257
258
  margin: 0 0px 0 0px;
258
259
  }
259
- .video-js.skin_news .vjs-remaining-time.vjs-time-control.vjs-control{
260
+ .video-js.skin_news_live .vjs-remaining-time.vjs-time-control.vjs-control{
260
261
  display: none;
261
262
  }
262
263
 
263
- .video-js.skin_news button.vjs-control.vjs-button.vjs-slowmo-button {
264
+ .video-js.skin_news_live button.vjs-control.vjs-button.vjs-slowmo-button {
264
265
  font-size: 14px;
265
266
  font-weight: 500;
266
267
  align-self: center;
@@ -269,30 +270,30 @@
269
270
  border-radius: 8px;
270
271
  }
271
272
 
272
- .video-js.skin_news .vjs-progress-control .vjs-progress-holder{
273
+ .video-js.skin_news_live .vjs-progress-control .vjs-progress-holder{
273
274
  height: 6px !important;
274
275
  }
275
276
 
276
- .video-js.skin_news .vjs-play-progress:before {
277
+ .video-js.skin_news_live .vjs-play-progress:before {
277
278
  font-size: 1.5em;
278
279
  line-height: unset;
279
280
  top: -0.3333333333em;
280
281
  }
281
282
 
282
- .video-js.skin_news .vjs-play-progress .vjs-time-tooltip {
283
+ .video-js.skin_news_live .vjs-play-progress .vjs-time-tooltip {
283
284
  display: none !important;
284
285
  }
285
286
 
286
287
  /* */
287
- .video-js.skin_news .vjs-mouse-display{
288
+ .video-js.skin_news_live .vjs-mouse-display{
288
289
  font-size: 1.6666666667em;
289
290
  }
290
291
 
291
- .video-js.skin_news .vjs-progress-control:hover .vjs-progress-holder {
292
+ .video-js.skin_news_live .vjs-progress-control:hover .vjs-progress-holder {
292
293
  font-size: 1em !important;
293
294
  }
294
295
 
295
- .video-js.skin_news .vjs-button{
296
+ .video-js.skin_news_live .vjs-button{
296
297
  width: 5.3em;
297
298
  display: flex;
298
299
  align-items: center;
@@ -300,63 +301,71 @@
300
301
  }
301
302
 
302
303
 
303
- .video-js.skin_news .vjs-fullscreen .icon-minimize,
304
+ .video-js.skin_news_live .vjs-fullscreen .icon-minimize,
304
305
  .icon-maximize {
305
306
  display: block;
306
307
  height: 32px;
307
308
  }
308
309
 
309
- .video-js.skin_news .vjs-playback-rate .vjs-playback-rate-value{
310
+ .video-js.skin_news_live .vjs-playback-rate .vjs-playback-rate-value{
310
311
  line-height: 4;
311
312
  }
312
313
 
313
- .video-js.skin_news .vjs-fullscreen .icon-maximize,
314
+ .video-js.skin_news_live .vjs-fullscreen .icon-maximize,
314
315
  .icon-minimize {
315
316
  display: none;
316
317
  height: 32px;
317
318
  }
318
319
 
319
- .video-js.skin_news button.vjs-play-control.vjs-control.vjs-button{
320
+ .video-js.skin_news_live button.vjs-play-control.vjs-control.vjs-button{
320
321
  outline: none !important;
322
+ /* flex: 1; */
321
323
  }
322
- .video-js.skin_news .vjs-fullscreen-control .vjs-icon-placeholder:before,
324
+ .video-js.skin_news_live .vjs-play-toggle-container{
325
+ display: flex;
326
+ flex: 1;
327
+ justify-content: center;
328
+ }
329
+
330
+
331
+ .video-js.skin_news_live .vjs-fullscreen-control .vjs-icon-placeholder:before,
323
332
  .vjs-icon-fullscreen-enter:before {
324
333
  /* content: '' !important; */
325
334
  }
326
335
 
327
- .video-js.skin_news button.vjs-fullscreen-control.vjs-control.vjs-button {
336
+ .video-js.skin_news_live button.vjs-fullscreen-control.vjs-control.vjs-button {
328
337
  display: flex;
329
338
  justify-content: center;
330
339
  align-items: center;
331
340
  /* transform: rotate(90deg); */
332
341
  }
333
342
 
334
- .video-js.skin_news .vjs-subs-caps-button .vjs-icon-placeholder:before{
343
+ .video-js.skin_news_live .vjs-subs-caps-button .vjs-icon-placeholder:before{
335
344
  display: none;
336
345
  }
337
- .video-js.skin_news .vjs-volume-panel .vjs-volume-control{
346
+ .video-js.skin_news_live .vjs-volume-panel .vjs-volume-control{
338
347
  margin-left: -10px;
339
348
  }
340
349
 
341
- .video-js.skin_news .skipbtn:hover{
350
+ .video-js.skin_news_live .skipbtn:hover{
342
351
  cursor: pointer;
343
352
  }
344
353
 
345
- .video-js.skin_news .rewindbtn:hover{
354
+ .video-js.skin_news_live .rewindbtn:hover{
346
355
  cursor: pointer;
347
356
  }
348
357
 
349
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control{
358
+ .video-js.skin_news_live .vjs-seek-to-live-control.vjs-control{
350
359
  position: relative;
351
360
  padding-left: 0;
352
361
  }
353
362
 
354
- .video-js.skin_news.vjs-seeking .vjs-big-play-button{
363
+ .video-js.skin_news_live.vjs-seeking .vjs-big-play-button{
355
364
  display: none !important;
356
365
  }
357
366
 
358
- .video-js.skin_news.vjs-paused .vjs-big-play-button {
359
- width: 90px;
367
+ .video-js.skin_news_live.vjs-paused .vjs-big-play-button {
368
+ /* width: 90px;
360
369
  height: 90px;
361
370
  display: flex;
362
371
  justify-content: center;
@@ -371,19 +380,20 @@
371
380
  font-size: 6em;
372
381
  line-height: 1.4em;
373
382
  border: 0.05em solid;
374
- color: inherit;
383
+ color: inherit; */
384
+ display: none !important;
375
385
  }
376
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge{
386
+ .video-js.skin_news_live .vjs-seek-to-live-control.vjs-control{
377
387
  font-weight: bold;
378
388
  }
379
389
 
380
- .video-js.skin_news .vjs-menu > ul.vjs-menu-content{
390
+ .video-js.skin_news_live .vjs-menu > ul.vjs-menu-content{
381
391
  bottom: 2.4em !important;
382
392
  right: -1em;
383
393
  z-index: 1;
384
394
  }
385
395
 
386
- .video-js.skin_news .vjs-chromecast-button .vjs-icon-placeholder {
396
+ .video-js.skin_news_live .vjs-chromecast-button .vjs-icon-placeholder {
387
397
  width: 24px !important;
388
398
  height: 24px !important;
389
399
  }
@@ -393,34 +403,34 @@
393
403
  }
394
404
 
395
405
 
396
- .video-js.skin_news button.vjs-rewind-button{
406
+ .video-js.skin_news_live button.vjs-rewind-button{
397
407
  cursor: pointer;
398
408
  }
399
409
 
400
- .video-js.skin_news .vjs-control-bar .vjs-current-time.vjs-time-control.vjs-control {
410
+ .video-js.skin_news_live .vjs-control-bar .vjs-current-time.vjs-time-control.vjs-control {
401
411
  padding-right: 0;
412
+ display: none;
402
413
  }
403
414
 
404
- .video-js.skin_news .vjs-control-bar .vjs-duration.vjs-time-control.vjs-control {
415
+ .video-js.skin_news_live .vjs-control-bar .vjs-duration.vjs-time-control.vjs-control {
405
416
  padding-left: 0;
417
+ display: none;
406
418
  }
407
419
 
408
- .video-js.skin_news .vjs-control-bar .vjs-time-control.vjs-time-divider {
420
+ .video-js.skin_news_live .vjs-control-bar .vjs-time-control.vjs-time-divider {
409
421
  padding-left: 0;
410
422
  padding-right: 0;
411
- display: flex;
412
- justify-content: center;
413
- width: min-content;
423
+ display: none;
414
424
  }
415
425
 
416
- .video-js.skin_news.vjs-live .vjs-control-bar .vjs-time-control {
426
+ .video-js.skin_news_live.vjs-live .vjs-control-bar .vjs-time-control {
417
427
  display: none
418
428
  }
419
- .video-js.skin_news.vjs-liveui .vjs-control-bar .vjs-time-control {
429
+ .video-js.skin_news_live.vjs-liveui .vjs-control-bar .vjs-time-control {
420
430
  display: none
421
431
  }
422
432
 
423
- .video-js.skin_news .vjs-control-bar .vjs-time-control {
433
+ .video-js.skin_news_live .vjs-control-bar .vjs-time-control {
424
434
  display: flex;
425
435
  align-items: center;
426
436
  font-weight: 700;
@@ -428,26 +438,26 @@
428
438
  min-width: 1.2em;
429
439
  }
430
440
 
431
- .video-js.skin_news .vjs-remaining-time.vjs-time-control.vjs-control {
441
+ .video-js.skin_news_live .vjs-remaining-time.vjs-time-control.vjs-control {
432
442
  display: none;
433
443
  font-size: 11px;
434
444
  justify-content: center;
435
445
  align-items: center;
436
446
  user-select: none;
437
447
  }
438
- .video-js.skin_news.vjs-live .vjs-remaining-time.vjs-time-control.vjs-control{
448
+ .video-js.skin_news_live.vjs-live .vjs-remaining-time.vjs-time-control.vjs-control{
439
449
  display: none;
440
450
  }
441
451
 
442
- .video-js.skin_news button.vjs-subs-caps-button.vjs-menu-button.vjs-menu-button-popup.vjs-button{
452
+ .video-js.skin_news_live button.vjs-subs-caps-button.vjs-menu-button.vjs-menu-button-popup.vjs-button{
443
453
  height: min-content;
444
454
  width: min-content;
445
455
  }
446
- .video-js.skin_news .vjs-volume-panel.vjs-volume-panel-vertical{
456
+ .video-js.skin_news_live .vjs-volume-panel.vjs-volume-panel-vertical{
447
457
  width: 6em;
448
458
  }
449
459
 
450
- .video-js.skin_news .content{
460
+ .video-js.skin_news_live .content{
451
461
  bottom: 3.4rem !important;
452
462
  right: -4rem !important;
453
463
  }
@@ -466,15 +476,16 @@
466
476
  pointer-events:none
467
477
  }
468
478
 
469
- .video-js.skin_news iframe{
479
+ .video-js.skin_news_live iframe{
470
480
  width: 100%;
471
481
  height: 100%;
472
482
  }
473
483
 
474
- .video-js.skin_news .vjs-live-control{
484
+ .video-js.skin_news_live .vjs-live-control{
475
485
  align-items: center;
486
+ display: none;
476
487
  }
477
- .video-js.skin_news .vjs-live-control.vjs-control .vjs-live-display{
488
+ .video-js.skin_news_live .vjs-live-control.vjs-control .vjs-live-display{
478
489
  height: 2.2em;
479
490
  display: flex;
480
491
  align-items: center;
@@ -485,43 +496,22 @@
485
496
  margin: 4px 0px 4px 12px;
486
497
  }
487
498
 
488
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control:focus{
499
+ .video-js.skin_news_live .vjs-seek-to-live-control.vjs-control:focus{
489
500
  text-shadow: none;
490
501
  }
491
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-seek-to-live-text {
492
- display: none;
493
- font-size: 12px;
494
- }
495
502
 
496
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder {
497
- height: 2.2em;
498
- display: inline-flex;
499
- align-items: center;
500
- /* font-family: monospace; */
503
+ .video-js.skin_news_live .vjs-control-bar .vjs-seek-to-live-control.vjs-control{
504
+ display: flex;
501
505
  justify-content: center;
502
- border: 2px solid;
503
- margin: 4px 0px 4px 6px;
504
- white-space: pre;
505
- padding: 0px 6px;
506
- font-size: 1.2em;
507
- font-weight: 500;
508
- color: rgba(255, 255, 2555, 0.7);
509
-
510
- letter-spacing: -.1px;
511
- line-height: normal;
512
- text-transform: uppercase;
513
- color: #FFFFFF;
514
- opacity: .7;
515
- font-family: "Proxima Nova";
506
+ min-width: 5.3em;
507
+ pointer-events: none;
508
+ user-select: none;
516
509
  }
517
510
 
518
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder:hover{
519
- opacity: 1;
511
+ .video-js.skin_news_live .vjs-seek-to-live-control.vjs-control .vjs-icon-placeholder::before{
512
+ color: white;
520
513
  }
521
514
 
522
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder::before {
523
- content: "NOT LIVE";
524
- }
525
515
 
526
516
  .settings-selection.vjs-control.vjs-button{
527
517
  display: flex !important;
@@ -538,57 +528,57 @@
538
528
  .tvProviderImage{
539
529
  display: none
540
530
  }
541
- .video-js.skin_news .vjs-fullscreen .icon-minimize,
531
+ .video-js.skin_news_live .vjs-fullscreen .icon-minimize,
542
532
  .icon-maximize {
543
533
  height: 30px !important;
544
534
  }
545
535
 
546
- .video-js.skin_news .vjs-fullscreen .icon-maximize,
536
+ .video-js.skin_news_live .vjs-fullscreen .icon-maximize,
547
537
  .icon-minimize {
548
538
  height: 30px !important;
549
539
  }
550
- .video-js.skin_news .vjs-volume-panel.vjs-volume-panel-vertical{
540
+ .video-js.skin_news_live .vjs-volume-panel.vjs-volume-panel-vertical{
551
541
  width: 4.5em;
552
542
  }
553
- .video-js.skin_news button.vjs-fullscreen-control.vjs-control.vjs-button>span.vjs-icon-placeholder::before {
543
+ .video-js.skin_news_live button.vjs-fullscreen-control.vjs-control.vjs-button>span.vjs-icon-placeholder::before {
554
544
  height: min-content;
555
545
  }
556
546
 
557
- .video-js.skin_news button.vjs-slowmo-button{
547
+ .video-js.skin_news_live button.vjs-slowmo-button{
558
548
  display: none;
559
549
  }
560
- .video-js.skin_news button.vjs-rewind-button{
550
+ .video-js.skin_news_live button.vjs-rewind-button{
561
551
  display: none;
562
552
  }
563
- .video-js.skin_news button.vjs-rewind-button>svg{
553
+ .video-js.skin_news_live button.vjs-rewind-button>svg{
564
554
  height: 20px;
565
555
  }
566
- .video-js.skin_news .vjs-button{
556
+ .video-js.skin_news_live .vjs-button{
567
557
  width: 4.8em;
568
558
  }
569
- .video-js.skin_news .widget-selection{
559
+ .video-js.skin_news_live .widget-selection{
570
560
  display: none;
571
561
  }
572
- .video-js.skin_news .container{
562
+ .video-js.skin_news_live .container{
573
563
  display: none !important;
574
564
  }
575
- .video-js.skin_news .vjs-control-bar{
565
+ .video-js.skin_news_live .vjs-control-bar{
576
566
  height: 4em !important;
577
567
  }
578
- .video-js.skin_news .vjs-button>.vjs-icon-placeholder:before{
568
+ .video-js.skin_news_live .vjs-button>.vjs-icon-placeholder:before{
579
569
  font-size: 2.5em;
580
570
  line-height: 1.5;
581
571
  }
582
- .video-js.skin_news .vjs-play-progress:before {
572
+ .video-js.skin_news_live .vjs-play-progress:before {
583
573
  font-size: 1.2em;
584
574
  position: absolute;
585
575
  right: -0.5em;
586
576
  z-index: 1;
587
577
  }
588
- .video-js.skin_news button.vjs-skip-button>svg{
578
+ .video-js.skin_news_live button.vjs-skip-button>svg{
589
579
  height: 20px;
590
580
  }
591
- .video-js.skin_news button.vjs-big-play-button {
581
+ .video-js.skin_news_live button.vjs-big-play-button {
592
582
  width: 50px !important;
593
583
  height: 50px !important;
594
584
  font-size: 2.1rem !important;
@@ -598,17 +588,17 @@
598
588
  width: 24px;
599
589
  height: 24px;
600
590
  }
601
- .video-js.skin_news.vjs-live .vjs-progress-control .vjs-progress-holder{
591
+ .video-js.skin_news_live.vjs-live .vjs-progress-control .vjs-progress-holder{
602
592
  margin: 0 12px 0 12px;
603
593
  }
604
- .video-js.skin_news .vjs-seek-to-live-text{
594
+ .video-js.skin_news_live .vjs-seek-to-live-text{
605
595
  font-size: 12px;
606
596
  }
607
- .video-js.skin_news .vjs-progress-control .vjs-progress-holder {
597
+ .video-js.skin_news_live .vjs-progress-control .vjs-progress-holder {
608
598
  margin: 0 12px 0 12px;
609
599
  }
610
600
  }
611
- .video-js.skin_news.vjs-paused .vjs-big-play-button {
601
+ .video-js.skin_news_live.vjs-paused .vjs-big-play-button {
612
602
  width: 90px;
613
603
  height: 90px;
614
604
  display: flex;
@@ -625,7 +615,7 @@
625
615
  line-height: 1.4em;
626
616
  }
627
617
 
628
- .video-js.skin_news .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:hover .vjs-volume-control.vjs-control.vjs-volume-horizontal {
618
+ .video-js.skin_news_live .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:hover .vjs-volume-control.vjs-control.vjs-volume-horizontal {
629
619
  display: flex;
630
620
  justify-content: center;
631
621
  align-items: center;
@@ -633,29 +623,22 @@
633
623
  transition: width 0.1s;
634
624
  }
635
625
 
636
- .video-js.skin_news .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:active .vjs-volume-control.vjs-control.vjs-volume-horizontal {
626
+ .video-js.skin_news_live .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal .vjs-volume-control.vjs-control.vjs-volume-horizontal {
637
627
  display: flex;
638
628
  justify-content: center;
639
629
  align-items: center;
640
630
  height: 100%;
641
631
  transition: width 0.1s;
642
632
  }
643
- .video-js.skin_news.vjs-fullscreen .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
633
+ .video-js.skin_news_live.vjs-fullscreen .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
644
634
  display: none !important;
645
635
  }
646
- .video-js.skin_news .ssai-ad-container{
647
- position: absolute;
648
- bottom: 14px;
649
- }
650
636
 
651
637
  @media (max-width: 576px) {
652
- .video-js.skin_news .ssai-ad-container{
653
- bottom: 2px;
654
- }
655
- .video-js.skin_news .vjs-progress-control .vjs-progress-holder{
638
+ .video-js.skin_news_live .vjs-progress-control .vjs-progress-holder{
656
639
  height: 5px !important;
657
640
  }
658
- .video-js.skin_news button.vjs-big-play-button {
641
+ .video-js.skin_news_live button.vjs-big-play-button {
659
642
  width: 50px !important;
660
643
  height: 50px !important;
661
644
  font-size: 2.1rem !important;
@@ -664,467 +647,573 @@
664
647
  .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
665
648
  display: none;
666
649
  }
667
- .video-js.skin_news .vjs-menu > ul.vjs-menu-content {
650
+ .video-js.skin_news_live .vjs-menu > ul.vjs-menu-content {
668
651
  bottom: 2.4em !important;
669
652
  right: -1em;
670
653
  z-index: 1;
671
654
  }
672
- .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
655
+ .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
673
656
  display: none !important;
674
657
  }
675
658
 
676
- .video-js.skin_news .vjs-text-track-display-ttml span {
677
- color: white;
678
- font-size: 13px;
679
- background-color: black;
680
- }
681
- }
682
-
683
- .video-js.skin_news .vjs-text-track-display-ttml span {
684
- color: white;
685
- font-size: 16px;
686
- background-color: black;
687
- }
688
-
689
- .video-js.skin_news.vjs-has-started.vjs-user-active.vjs-controls-enabled .vjs-text-track-display-ttml p {
690
- margin-bottom: 2rem !important;
691
659
  }
692
660
 
693
- .video-js.skin_news .vjs-text-track-display-ttml p {
694
- font-size: 18px !important;
661
+ .video-js.skin_news_live .vjs-text-track-display-ttml {
662
+ width: 100% !important;
695
663
  }
696
664
 
697
-
698
- .video-js.skin_news .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
699
- .video-js.skin_news .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
665
+ .video-js.skin_news_live .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
666
+ .video-js.skin_news_live .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
700
667
  font-size: 1.2em !important;
701
668
  line-height: 1.5em !important;
702
669
  padding: 0.2em 0.8em !important;
703
670
  }
704
671
 
705
- .video-js.skin_news .vjs-control-bar .vjs-svg-icon{
672
+ .video-js.skin_news_live .vjs-control-bar .vjs-svg-icon{
706
673
  content: none !important;
707
674
  fill: none !important;
708
675
  filter: none !important;
709
676
  }
710
677
 
711
- /* svg icons opacity and hover effect */
712
- .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button svg {
713
- opacity: 0.7 !important;
678
+ .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
679
+ color: rgba(255, 255, 2555, 0.7)!important;
714
680
  }
715
681
 
716
- .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button:hover svg {
717
- opacity: 1 !important;
682
+ .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
683
+ color: rgba(255, 255, 2555, 1)!important;
718
684
  }
719
- .video-js.skin_news .vjs-control-bar .vjs-remaining-time.vjs-time-control.vjs-control{
720
- opacity: 0.7 !important;
685
+
686
+
687
+
688
+ .video-js.skin_mini .vjs-button>.vjs-icon-placeholder:before {
689
+ font-size: 2.2em;
690
+ line-height: 2.6;
721
691
  }
722
- .video-js.skin_news .vjs-control-bar .vjs-remaining-time.vjs-time-control.vjs-control:hover{
723
- opacity: 1 !important;
692
+ .video-js.skin_mini{
693
+ overflow: hidden;
694
+ }
695
+ .video-js.skin_mini .vjs-control-bar{
696
+ z-index: 1 !important;
697
+ height: 4em !important;
698
+ background: black !important;
724
699
  }
725
700
 
726
- .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
727
- color: rgba(255, 255, 2555, 0.7)!important;
701
+ .video-js.skin_mini .vjs-fade>* {
702
+ visibility: hidden !important;
703
+ opacity: 0 !important;
704
+ transition: visibility 1s, opacity 1s !important;
728
705
  }
729
706
 
730
- .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
731
- color: rgba(255, 255, 2555, 1)!important;
707
+ .video-js.skin_mini .custom-spaced-progress-bar {
708
+ position: absolute;
709
+ width: 100%;
710
+ display: flex;
711
+ height: 0.5em;
712
+ top: -0.5em;
732
713
  }
733
714
 
715
+ .video-js.skin_mini .vjs-progress-control {
716
+ /* left: -6px; */
717
+ position: relative;
718
+ width: 100%;
719
+ height: 0.5em;
720
+ transition: height 0.1s, top 0.1s;
721
+ }
734
722
 
735
723
 
736
724
 
737
- .video-js.skin_cn_news .vjs-control-bar {
738
- z-index: 1 !important;
739
- height: auto !important;
740
- padding: 0.8em 30px 0.6em;
741
- background: transparent !important;
742
- display: flex;
743
- flex-wrap: wrap;
744
- align-items: center;
745
- column-gap: 10px;
725
+
726
+ .video-js.skin_mini .vjs-custom-control-spacer {
727
+ display: block;
728
+ flex: 1 1 auto;
746
729
  }
747
730
 
731
+ .video-js.skin_mini .vjs-progress-control .vjs-progress-holder {
732
+ margin: 0 0px 0 0px;
733
+ }
734
+ .video-js.skin_mini .vjs-remaining-time.vjs-time-control.vjs-control{
735
+ display: none;
736
+ }
748
737
 
749
- .video-js.skin_cn_news .vjs-control-bar::before {
750
- content: '';
751
- position: absolute;
752
- left: 0;
753
- right: 0;
754
- bottom: 0;
755
- top: -3em;
756
- background: linear-gradient(
757
- to top,
758
- rgba(0, 0, 0, 0.85) 0%,
759
- rgba(0, 0, 0, 0.7) 40%,
760
- rgba(0, 0, 0, 0.55) 70%,
761
- rgba(0, 0, 0, 0.38) 86%,
762
- transparent 100%
763
- );
764
- pointer-events: none;
765
- z-index: -1;
738
+ .video-js.skin_mini button.vjs-control.vjs-button.vjs-slowmo-button {
739
+ font-size: 14px;
740
+ font-weight: 500;
741
+ align-self: center;
742
+ height: min-content;
743
+ padding: 5px 2px;
744
+ border-radius: 8px;
766
745
  }
767
746
 
768
- .video-js.skin_cn_news .vjs-control-bar .vjs-progress-control {
769
- order: -1;
770
- flex: 0 0 100%;
771
- width: 80%;
772
- margin: 0 0 5em;
773
- position: relative;
747
+ .video-js.skin_mini .vjs-progress-control .vjs-progress-holder{
748
+ height: 5px !important;
774
749
  }
775
750
 
776
- .video-js.skin_cn_news .vjs-control-bar > .vjs-control,
777
- .video-js.skin_cn_news .vjs-control-bar > .vjs-button {
778
- width: auto;
779
- min-width: 0;
751
+ .video-js.skin_mini .vjs-play-progress:before {
752
+ font-size: 1.3em;
753
+ line-height: unset;
754
+ top: -0.3333333333em;
780
755
  }
781
- .video-js.skin_cn_news .vjs-control-bar .vjs-button {
782
- display: inline-flex;
783
- align-items: center;
784
- justify-content: center;
785
- height: 7em;
786
- padding: 0 10px;
787
- color: #fff;
756
+
757
+ .video-js.skin_mini .vjs-play-progress .vjs-time-tooltip {
758
+ display: none !important;
788
759
  }
789
760
 
790
- .video-js.skin_cn_news .vjs-svg-icon::before {
791
- content: none !important;
761
+ /* */
762
+ .video-js.skin_mini .vjs-mouse-display{
763
+ font-size: 1.6666666667em;
792
764
  }
793
765
 
766
+ .video-js.skin_mini .vjs-progress-control:hover .vjs-progress-holder {
767
+ font-size: 1em !important;
768
+ }
794
769
 
795
- .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon {
796
- display: inline-flex;
770
+ .video-js.skin_mini .vjs-button{
771
+ width: 3em;
772
+ display: flex;
797
773
  align-items: center;
798
774
  justify-content: center;
799
775
  }
800
- .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon svg,
801
- .video-js.skin_cn_news .vjs-rewind-button svg {
802
- width: 24px;
803
- height: 24px;
804
- display: block;
805
- }
806
776
 
807
777
 
808
-
809
- .video-js.skin_cn_news .vjs-subs-caps-button {
810
- opacity: 1;
778
+ .video-js.skin_mini .vjs-fullscreen .icon-minimize,
779
+ .icon-maximize {
780
+ display: block;
781
+ height: 32px;
811
782
  }
812
783
 
784
+ .video-js.skin_mini .vjs-playback-rate .vjs-playback-rate-value{
785
+ line-height: 4;
786
+ }
813
787
 
788
+ .video-js.skin_mini .vjs-fullscreen .icon-maximize,
789
+ .icon-minimize {
790
+ display: none;
791
+ height: 32px;
792
+ }
814
793
 
815
- .video-js.skin_cn_news .vjs-volume-panel {
816
- margin: 0;
817
- display: inline-flex;
818
- align-items: center;
819
- align-self: center;
820
- height: 2.2em;
821
- min-width: 7em;
822
- transition: none;
794
+ .video-js.skin_mini button.vjs-play-control.vjs-control.vjs-button{
795
+ outline: none !important;
823
796
  }
824
- .video-js.skin_cn_news .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
825
- width: 0;
826
- height: 100%;
797
+ .video-js.skin_mini .vjs-fullscreen-control .vjs-icon-placeholder:before,
798
+ .vjs-icon-fullscreen-enter:before {
799
+ /* content: '' !important; */
800
+ }
801
+
802
+ .video-js.skin_mini button.vjs-fullscreen-control.vjs-control.vjs-button {
827
803
  display: flex;
804
+ justify-content: center;
828
805
  align-items: center;
829
- overflow: hidden;
830
- opacity: 0;
831
- transition: width 0.15s ease, opacity 0.15s ease;
832
- }
833
- .video-js.skin_cn_news .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal,
834
- .video-js.skin_cn_news .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
835
- .video-js.skin_cn_news .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal,
836
- .video-js.skin_cn_news .vjs-volume-panel:focus-within .vjs-volume-control.vjs-volume-horizontal {
837
- width: 5em;
838
- opacity: 1;
806
+ /* transform: rotate(90deg); */
839
807
  }
840
808
 
841
- .video-js.skin_cn_news .vjs-volume-bar {
842
- width: 4em;
843
- height: 0.3em;
844
- margin: 0 0.45em;
809
+ .video-js.skin_mini .vjs-subs-caps-button .vjs-icon-placeholder:before{
810
+ display: none;
845
811
  }
846
-
847
-
848
- .video-js.skin_cn_news .vjs-volume-control .vjs-mouse-display {
849
- display: none !important;
812
+ .video-js.skin_mini .vjs-volume-panel .vjs-volume-control{
813
+ margin-left: -10px;
814
+ display: none;
850
815
  }
851
816
 
852
- .video-js.skin_cn_news .vjs-mute-control.vjs-vol-0 ~ .vjs-volume-control .vjs-volume-level {
853
- width: 0 !important;
817
+ .video-js.skin_mini .vjs-loading-spinner {
818
+ position: absolute;
819
+ top: 50%;
820
+ left: 50%;
821
+ transform: translate(-50%, -50%);
822
+ opacity: .85;
823
+ text-align: left;
824
+ border: .2em solid rgba(43, 51, 63, .7);
825
+ box-sizing: border-box;
826
+ background-clip: padding-box;
827
+ width: 3em;
828
+ height: 3em;
829
+ border-radius: 50%;
830
+ visibility: hidden;
854
831
  }
855
832
 
856
-
857
- .video-js.skin_cn_news .vjs-custom-control-spacer {
858
- display: block !important;
859
- flex: 1 1 auto;
833
+ .video-js.skin_mini .skipbtn:hover{
834
+ cursor: pointer;
860
835
  }
861
836
 
862
-
863
- .video-js.skin_cn_news .vjs-big-play-button {
864
- display: none;
837
+ .video-js.skin_mini .rewindbtn:hover{
838
+ cursor: pointer;
865
839
  }
866
- .video-js.skin_cn_news .vjs-big-play-button .vjs-icon-placeholder:before {
867
- position: relative !important;
868
- display: flex;
869
- left: 0;
870
- top: -1px;
840
+
841
+ .video-js.skin_mini .vjs-seek-to-live-control.vjs-control{
842
+ position: relative;
843
+ padding-left: 0;
871
844
  }
872
- .video-js.skin_cn_news.vjs-paused:not(.vjs-seeking):not(.vjs-ended) .vjs-big-play-button {
845
+
846
+ .video-js.skin_mini.vjs-paused .vjs-big-play-button {
847
+ width: 40px;
848
+ height: 40px;
873
849
  display: flex;
874
850
  justify-content: center;
875
851
  align-items: center;
852
+ border: none;
876
853
  position: absolute;
877
854
  top: 0;
878
855
  left: 0;
879
856
  right: 0;
880
857
  bottom: 0;
881
858
  margin: auto;
882
- width: 80px;
883
- height: 80px;
884
- border: none;
885
- border-radius: 50%;
886
- background: rgba(0, 0, 0, 0.55);
887
- font-size: 5em;
859
+ font-size: 3em;
888
860
  line-height: 1.3em;
889
861
  transform: none !important;
862
+ border-radius: 1.3em;
890
863
  }
891
864
 
892
-
893
- .video-js.skin_cn_news .vjs-progress-control .vjs-progress-holder {
894
- height: 4px !important;
895
- margin: 0;
896
- border-radius: 20px;
897
- background-color: #393944;
865
+ .video-js.skin_mini .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge{
866
+ font-weight: bold;
898
867
  }
899
868
 
900
- .video-js.skin_cn_news .vjs-play-progress {
901
- background-color: #ffffff;
902
- border-radius: 20px;
869
+ .video-js.skin_mini .vjs-menu > ul.vjs-menu-content{
870
+ bottom: 1.1em !important;
871
+ right: 1em;
872
+ z-index: 1;
873
+ font-size: 10px;
903
874
  }
904
875
 
905
- .video-js.skin_cn_news .vjs-load-progress,
906
- .video-js.skin_cn_news .vjs-load-progress div {
907
- background: rgba(255, 255, 255, 0.15);
908
- border-radius: 20px;
909
- }
910
-
911
-
912
- .video-js.skin_cn_news .vjs-play-progress:before {
913
- content: '';
914
- width: 16px;
915
- height: 16px;
916
- border-radius: 50%;
917
- background: #ffffff;
918
- border: 2px solid rgba(0, 0, 0, 0.6);
919
- box-sizing: border-box;
920
- box-shadow: 0 0 0 2px #ffffff, 0 0 3px rgba(0, 0, 0, 0.45);
921
- top: -6px;
922
- right: -8px;
923
- position: absolute;
876
+ .video-js.skin_mini .vjs-chromecast-button .vjs-icon-placeholder {
877
+ width: 24px !important;
878
+ height: 24px !important;
924
879
  }
925
- .video-js.skin_cn_news .vjs-play-progress .vjs-time-tooltip {
926
- display: none !important;
880
+ .video-js.skin_mini .settings-selector-icon>svg{
881
+ height: 19px !important;
882
+ width: 19px !important;
927
883
  }
928
884
 
929
- .video-js.skin_cn_news .vjs-mouse-display .vjs-time-tooltip {
930
- background: #ffffff;
931
- color: #0a0e17;
932
- font-weight: 700;
933
- border-radius: 3px;
934
- }
935
885
 
936
- .video-js.skin_cn_news .vjs-live-control {
937
- display: none !important;
938
- }
939
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-control {
940
- display: inline-flex;
941
- align-items: center;
942
- align-self: center;
943
- height: 2.2em;
944
- gap: 5px;
945
- width: auto;
946
- padding: 0 10px;
947
- border: 1px solid rgba(255, 255, 255, 0.45);
948
- border-radius: 4px;
886
+ .video-js.skin_mini button.vjs-rewind-button{
949
887
  cursor: pointer;
950
888
  }
951
889
 
952
- .video-js.skin_cn_news .vjs-seek-to-live-control .vjs-icon-placeholder {
953
- display: none;
954
- }
955
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder {
956
- display: inline-flex;
957
- align-items: center;
890
+ .video-js.skin_mini .vjs-control-bar .vjs-current-time.vjs-time-control.vjs-control {
891
+ padding-right: 0;
958
892
  }
959
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder::before {
960
- content: '';
961
- display: inline-block;
962
- width: 8px;
963
- height: 8px;
964
- border-radius: 50%;
965
- background: #ff2d2d; /* red live dot */
893
+
894
+ .video-js.skin_mini .vjs-control-bar .vjs-duration.vjs-time-control.vjs-control {
895
+ padding-left: 0;
966
896
  }
967
- .video-js.skin_cn_news .vjs-seek-to-live-text {
968
- color: #ffffff;
969
- font-weight: 700;
970
- font-size: 12px;
971
- letter-spacing: 0.03em;
897
+
898
+ .video-js.skin_mini .vjs-control-bar .vjs-time-control.vjs-time-divider {
899
+ padding-left: 0;
900
+ padding-right: 0;
901
+ display: flex;
902
+ justify-content: center;
903
+ width: min-content;
972
904
  }
973
905
 
974
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge {
975
- border-color: transparent;
906
+ .video-js.skin_mini.vjs-live .vjs-control-bar .vjs-time-control {
907
+ display: none
976
908
  }
977
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-seek-to-live-text {
978
- color: #ff2d2d;
909
+ .video-js.skin_mini.vjs-liveui .vjs-control-bar .vjs-time-control {
910
+ display: none
979
911
  }
980
912
 
981
- /* ---- time controls ---- */
982
- .video-js.skin_cn_news .vjs-current-time,
983
- .video-js.skin_cn_news .vjs-duration,
984
- .video-js.skin_cn_news .vjs-time-divider {
985
- display: none !important;
913
+ .video-js.skin_mini .vjs-control-bar .vjs-time-control {
914
+ display: flex;
915
+ align-items: center;
916
+ font-weight: 700;
917
+ font-size: 9px;
918
+ min-width: 0.8em;
919
+ padding-left: 0;
986
920
  }
987
- .video-js.skin_cn_news .vjs-remaining-time.vjs-time-control.vjs-control {
988
- display: none;
989
- align-items: center;
990
- justify-content: center;
921
+
922
+ .video-js.skin_mini .vjs-remaining-time.vjs-time-control.vjs-control {
923
+ display: none;
991
924
  font-size: 11px;
992
- font-weight: 700;
993
- color: #fff;
994
- padding: 0 6px;
925
+ justify-content: center;
926
+ align-items: center;
995
927
  user-select: none;
996
928
  }
997
-
998
-
999
- .video-js.skin_cn_news .vjs-chapter-marker {
1000
- z-index: 2;
1001
- width: var(--vl-chapter-size, 8px);
1002
- height: var(--vl-chapter-size, 8px);
1003
- top: 50%;
1004
- bottom: auto;
1005
- background: var(--vl-chapter-color, #ffffff);
1006
- opacity: var(--vl-chapter-opacity, 1);
1007
- border-radius: 50%;
1008
- box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); /* keep white dots visible on the white bar */
1009
- transform: translate(-50%, -50%) scale(1);
1010
- transition: background-color 0.12s ease;
929
+ .video-js.skin_mini.vjs-live .vjs-remaining-time.vjs-time-control.vjs-control{
930
+ display: none;
1011
931
  }
1012
- .video-js.skin_cn_news .vjs-chapter-marker:hover {
1013
- background: var(--vl-chapter-hover, #0a5cff);
932
+
933
+ .video-js.skin_mini button.vjs-subs-caps-button.vjs-menu-button.vjs-menu-button-popup.vjs-button{
934
+ height: min-content;
935
+ width: min-content;
1014
936
  }
1015
- .video-js.skin_cn_news .vjs-chapter-marker.vjs-chapter-marker--active {
1016
- background: var(--vl-chapter-active, #0a5cff);
937
+ .video-js.skin_mini .vjs-volume-panel.vjs-volume-panel-vertical{
938
+ width: 3em;
939
+ margin-right: 4px;
1017
940
  }
1018
941
 
1019
-
1020
- .video-js.skin_cn_news .vjs-chapter-marker .vjs-chapter-marker__icon {
1021
- width: 16px;
1022
- height: 16px;
1023
- bottom: 160%;
1024
- filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
942
+ .video-js.skin_mini .content{
943
+ bottom: 3.4rem !important;
944
+ right: -4rem !important;
1025
945
  }
1026
946
 
1027
-
1028
- .video-js.skin_cn_news .vjs-chapter-preview {
1029
- background: var(--vl-chapter-tooltip, #0a5cff);
1030
- border-radius: 6px;
1031
- padding: 8px 10px;
1032
- width: max-content;
1033
- max-width: 300px;
1034
- text-align: left;
1035
- box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
1036
- }
1037
- .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__time {
1038
- color: #ffffff;
1039
- font-size: 13px;
1040
- font-weight: 400;
1041
- margin-bottom: 2px;
1042
- }
1043
- .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__label {
1044
- color: #ffffff;
1045
- font-size: 13px;
1046
- font-weight: 400;
1047
- line-height: 1.3;
1048
- white-space: normal;
1049
- text-align: left;
1050
- }
1051
- .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__pointer {
1052
- border-top-color: var(--vl-chapter-tooltip, #0a5cff);
947
+ .video-js.skin_mini .setting-icon > svg{
948
+ height:18px !important;
1053
949
  }
1054
950
 
1055
- /* ---- responsive ---- */
1056
- @media (max-width: 576px) {
1057
- .video-js.skin_cn_news .vjs-control-bar {
1058
- height: 3.2em !important;
1059
- padding: 0 8px;
1060
- }
1061
- .video-js.skin_cn_news .vjs-control-bar .vjs-button {
1062
- padding: 0 6px;
1063
- }
1064
- .video-js.skin_cn_news .vjs-control.vjs-button.vjs-picture-in-picture-control {
1065
- display: none !important;
1066
- }
951
+ .output-overlay{
952
+ position: absolute;
953
+ bottom: 0;
954
+ height: 100%;
955
+ width: 100%;
956
+ z-index: 0;
957
+ border: 0;
958
+ pointer-events:none
1067
959
  }
1068
960
 
1069
- .video-js.skin_news_live .vjs-button>.vjs-icon-placeholder:before {
1070
- font-size: 2.2em;
1071
- line-height: 2.6;
1072
- }
1073
- .video-js.skin_news_live .vjs-custom-big-mute.vjs-control{
1074
- background: #fcb700;
961
+ .video-js.skin_mini iframe{
962
+ width: 100%;
963
+ height: 100%;
1075
964
  }
1076
- .video-js.skin_news_live .vjs-control-bar{
1077
- z-index: 1 !important;
1078
- height: 5em !important;
1079
- background: black !important;
965
+
966
+ .video-js.skin_mini .vjs-live-control{
967
+ align-items: center;
968
+ max-width: 5em;
1080
969
  }
1081
- .video-js.skin_news_live .vjs-playback-rate .vjs-playback-rate-value{
970
+ .video-js.skin_mini .vjs-live-control.vjs-control .vjs-live-display{
971
+ height: 2.2em;
1082
972
  display: flex;
1083
973
  align-items: center;
974
+ font-family: monospace;
975
+ width: 4em;
1084
976
  justify-content: center;
977
+ background: red;
978
+ margin: 4px 0px 4px 2px;
1085
979
  }
1086
980
 
1087
- .video-js.skin_news_live .vjs-fade>* {
1088
- visibility: hidden !important;
1089
- opacity: 0 !important;
1090
- transition: visibility 1s, opacity 1s !important;
981
+ .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:focus{
982
+ text-shadow: none;
1091
983
  }
1092
-
1093
- .video-js.skin_news_live .custom-spaced-progress-bar {
1094
- position: absolute;
1095
- width: 100%;
1096
- display: flex;
1097
- height: 0.5em;
1098
- top: -0.5em;
984
+ .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-seek-to-live-text {
985
+ display: none;
986
+ font-size: 12px;
1099
987
  }
1100
988
 
1101
- .video-js.skin_news_live .vjs-progress-control {
1102
- /* left: -6px; */
1103
- position: relative;
1104
- width: 100%;
1105
- height: 0.5em;
1106
- transition: height 0.1s, top 0.1s;
989
+ .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder {
990
+ height: 1.8em;
991
+ display: inline-flex;
992
+ align-items: center;
993
+ font-family: monospace;
994
+ justify-content: center;
995
+ border: 1.5px solid;
996
+ margin: 4px 0px 4px 2px;
997
+ white-space: pre;
998
+ padding: 2px 4px;
999
+ font-size: 1.2em;
1000
+ font-weight: 500;
1001
+ color: rgba(255, 255, 2555, 0.7);
1107
1002
  }
1108
1003
 
1109
- .video-js.skin_news_live .vjs-volume-panel{
1110
- min-width: 5.3em;
1004
+ .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder::before {
1005
+ content: "NOT LIVE";
1006
+ word-spacing: -4px;
1111
1007
  }
1112
1008
 
1113
1009
 
1010
+ @media(max-width:600px){
1011
+ .tvProviderImage{
1012
+ display: none
1013
+ }
1014
+ .video-js.skin_mini .vjs-fullscreen .icon-minimize,
1015
+ .icon-maximize {
1016
+ height: 30px !important;
1017
+ }
1114
1018
 
1115
- .video-js.skin_news_live .vjs-custom-control-spacer {
1116
- /* display: block; */
1117
- /* flex: 1 1 auto; */
1019
+ .video-js.skin_mini .vjs-fullscreen .icon-maximize,
1020
+ .icon-minimize {
1021
+ height: 30px !important;
1022
+ }
1023
+ .video-js.skin_mini .vjs-volume-panel.vjs-volume-panel-vertical{
1024
+ width: 3.5em;
1025
+ }
1026
+ .video-js.skin_mini button.vjs-fullscreen-control.vjs-control.vjs-button>span.vjs-icon-placeholder::before {
1027
+ height: min-content;
1028
+ }
1029
+
1030
+ .video-js.skin_mini button.vjs-slowmo-button{
1031
+ display: none;
1032
+ }
1033
+ .video-js.skin_mini button.vjs-rewind-button{
1034
+ display: none;
1035
+ }
1036
+ .video-js.skin_mini button.vjs-rewind-button>svg{
1037
+ height: 20px;
1038
+ }
1039
+ .video-js.skin_mini .vjs-button{
1040
+ width: 3em;
1041
+ }
1042
+ .video-js.skin_mini .widget-selection{
1043
+ display: none;
1044
+ }
1045
+ .video-js.skin_mini .container{
1046
+ display: none !important;
1047
+ }
1048
+ .video-js.skin_mini .vjs-control-bar{
1049
+ height: 4em !important;
1050
+ }
1051
+ .video-js.skin_mini .vjs-button>.vjs-icon-placeholder:before{
1052
+ font-size: 2.5em;
1053
+ line-height: 1.5;
1054
+ }
1055
+ .video-js.skin_mini .vjs-play-progress:before {
1056
+ font-size: 1.2em;
1057
+ position: absolute;
1058
+ right: -0.5em;
1059
+ z-index: 1;
1060
+ }
1061
+ .video-js.skin_mini button.vjs-skip-button>svg{
1062
+ height: 20px;
1118
1063
  }
1119
1064
 
1120
- .video-js.skin_news_live .vjs-progress-control .vjs-progress-holder {
1065
+ .stream-selector-icon>svg{
1066
+ width: 24px;
1067
+ height: 24px;
1068
+ }
1069
+ .video-js.skin_mini .vjs-seek-to-live-text{
1070
+ font-size: 12px;
1071
+ }
1072
+ }
1073
+
1074
+
1075
+ .video-js.skin_mini .vjs-text-track-display-ttml span {
1076
+ background-color: rgba(0, 0, 0, 0.2);
1077
+ }
1078
+
1079
+
1080
+ .video-js.skin_mini .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:hover .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1081
+ display: flex;
1082
+ justify-content: center;
1083
+ align-items: center;
1084
+ height: 100%;
1085
+ transition: width 0.1s;
1086
+ }
1087
+ .video-js.skin_mini .vjs-track-settings-colors fieldset.vjs-fg.vjs-track-setting{
1088
+ margin: 2px;
1089
+ }
1090
+
1091
+ .video-js.skin_mini .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:active .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1092
+ display: flex;
1093
+ justify-content: center;
1094
+ align-items: center;
1095
+ height: 100%;
1096
+ transition: width 0.1s;
1097
+ }
1098
+
1099
+ .video-js.skin_mini .vjs-text-track-settings .vjs-modal-dialog-content{
1100
+ display: block;
1101
+ font-size: 10px;
1102
+ padding: 6px 10px;
1103
+ margin: 0;
1104
+ max-height: 100%;
1105
+ overflow-y: auto;
1106
+ }
1107
+ .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-colors,
1108
+ .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-font,
1109
+ .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-controls{
1110
+ display: block;
1111
+ width: 100%;
1112
+ }
1113
+ .video-js.skin_mini .vjs-text-track-settings fieldset{
1114
+ margin: 4px 0;
1115
+ }
1116
+ .video-js.skin_mini .vjs-text-track-settings fieldset span{
1117
+ display: block;
1118
+ padding: 0 0 6px;
1119
+ }
1120
+ .video-js.skin_mini .vjs-text-track-settings fieldset span > select{
1121
+ max-width: 100%;
1122
+ }
1123
+
1124
+ @media (max-width: 600px) {
1125
+ .video-js.skin_mini .vjs-progress-control .vjs-progress-holder{
1126
+ height: 5px !important;
1127
+ }
1128
+
1129
+ .video-js.skin_mini .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
1130
+ display: none;
1131
+ }
1132
+
1133
+ }
1134
+
1135
+ .video-js.skin_mini .vjs-control-bar .vjs-svg-icon{
1136
+ content: none !important;
1137
+ fill: none !important;
1138
+ filter: none !important;
1139
+ }
1140
+
1141
+ /* svg icons opacity and hover effect */
1142
+ .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button svg {
1143
+ opacity: 0.7 !important;
1144
+ }
1145
+
1146
+ .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button:hover svg {
1147
+ opacity: 1 !important;
1148
+ }
1149
+
1150
+ .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
1151
+ color: rgba(255, 255, 2555, 0.7)!important;
1152
+ }
1153
+
1154
+ .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
1155
+ color: rgba(255, 255, 2555, 1)!important;
1156
+ }
1157
+
1158
+
1159
+
1160
+
1161
+ .video-js.skin_news .vjs-button>.vjs-icon-placeholder:before {
1162
+ font-size: 2.2em;
1163
+ line-height: 2.6;
1164
+ }
1165
+ .video-js.skin_news .vjs-custom-big-mute.vjs-control{
1166
+ background: white;
1167
+ }
1168
+ .video-js.skin_news .vjs-control-bar{
1169
+ z-index: 1 !important;
1170
+ height: 5em !important;
1171
+ background: black !important;
1172
+ }
1173
+ .video-js.skin_news .vjs-playback-rate .vjs-playback-rate-value{
1174
+ display: flex;
1175
+ align-items: center;
1176
+ justify-content: center;
1177
+ }
1178
+
1179
+ .video-js.skin_news .vjs-fade>* {
1180
+ visibility: hidden !important;
1181
+ opacity: 0 !important;
1182
+ transition: visibility 1s, opacity 1s !important;
1183
+ }
1184
+
1185
+ .video-js.skin_news .custom-spaced-progress-bar {
1186
+ position: absolute;
1187
+ width: 100%;
1188
+ display: flex;
1189
+ height: 0.5em;
1190
+ top: -0.5em;
1191
+ }
1192
+
1193
+ .video-js.skin_news .vjs-progress-control {
1194
+ /* left: -6px; */
1195
+ position: relative;
1196
+ width: 100%;
1197
+ height: 0.5em;
1198
+ transition: height 0.1s, top 0.1s;
1199
+ }
1200
+
1201
+
1202
+
1203
+
1204
+ .video-js.skin_news .vjs-custom-control-spacer {
1205
+ display: block;
1206
+ flex: 1 1 auto;
1207
+ }
1208
+
1209
+ .video-js.skin_news .vjs-progress-control .vjs-progress-holder {
1121
1210
  margin: 0 0px 0 0px;
1122
1211
  }
1123
- .video-js.skin_news_live .vjs-remaining-time.vjs-time-control.vjs-control{
1212
+ .video-js.skin_news .vjs-remaining-time.vjs-time-control.vjs-control{
1124
1213
  display: none;
1125
1214
  }
1126
1215
 
1127
- .video-js.skin_news_live button.vjs-control.vjs-button.vjs-slowmo-button {
1216
+ .video-js.skin_news button.vjs-control.vjs-button.vjs-slowmo-button {
1128
1217
  font-size: 14px;
1129
1218
  font-weight: 500;
1130
1219
  align-self: center;
@@ -1133,30 +1222,30 @@
1133
1222
  border-radius: 8px;
1134
1223
  }
1135
1224
 
1136
- .video-js.skin_news_live .vjs-progress-control .vjs-progress-holder{
1225
+ .video-js.skin_news .vjs-progress-control .vjs-progress-holder{
1137
1226
  height: 6px !important;
1138
1227
  }
1139
1228
 
1140
- .video-js.skin_news_live .vjs-play-progress:before {
1229
+ .video-js.skin_news .vjs-play-progress:before {
1141
1230
  font-size: 1.5em;
1142
1231
  line-height: unset;
1143
1232
  top: -0.3333333333em;
1144
1233
  }
1145
1234
 
1146
- .video-js.skin_news_live .vjs-play-progress .vjs-time-tooltip {
1235
+ .video-js.skin_news .vjs-play-progress .vjs-time-tooltip {
1147
1236
  display: none !important;
1148
1237
  }
1149
1238
 
1150
1239
  /* */
1151
- .video-js.skin_news_live .vjs-mouse-display{
1240
+ .video-js.skin_news .vjs-mouse-display{
1152
1241
  font-size: 1.6666666667em;
1153
1242
  }
1154
1243
 
1155
- .video-js.skin_news_live .vjs-progress-control:hover .vjs-progress-holder {
1244
+ .video-js.skin_news .vjs-progress-control:hover .vjs-progress-holder {
1156
1245
  font-size: 1em !important;
1157
1246
  }
1158
1247
 
1159
- .video-js.skin_news_live .vjs-button{
1248
+ .video-js.skin_news .vjs-button{
1160
1249
  width: 5.3em;
1161
1250
  display: flex;
1162
1251
  align-items: center;
@@ -1164,71 +1253,63 @@
1164
1253
  }
1165
1254
 
1166
1255
 
1167
- .video-js.skin_news_live .vjs-fullscreen .icon-minimize,
1256
+ .video-js.skin_news .vjs-fullscreen .icon-minimize,
1168
1257
  .icon-maximize {
1169
1258
  display: block;
1170
1259
  height: 32px;
1171
1260
  }
1172
1261
 
1173
- .video-js.skin_news_live .vjs-playback-rate .vjs-playback-rate-value{
1262
+ .video-js.skin_news .vjs-playback-rate .vjs-playback-rate-value{
1174
1263
  line-height: 4;
1175
1264
  }
1176
1265
 
1177
- .video-js.skin_news_live .vjs-fullscreen .icon-maximize,
1266
+ .video-js.skin_news .vjs-fullscreen .icon-maximize,
1178
1267
  .icon-minimize {
1179
1268
  display: none;
1180
1269
  height: 32px;
1181
1270
  }
1182
1271
 
1183
- .video-js.skin_news_live button.vjs-play-control.vjs-control.vjs-button{
1272
+ .video-js.skin_news button.vjs-play-control.vjs-control.vjs-button{
1184
1273
  outline: none !important;
1185
- /* flex: 1; */
1186
- }
1187
- .video-js.skin_news_live .vjs-play-toggle-container{
1188
- display: flex;
1189
- flex: 1;
1190
- justify-content: center;
1191
1274
  }
1192
-
1193
-
1194
- .video-js.skin_news_live .vjs-fullscreen-control .vjs-icon-placeholder:before,
1275
+ .video-js.skin_news .vjs-fullscreen-control .vjs-icon-placeholder:before,
1195
1276
  .vjs-icon-fullscreen-enter:before {
1196
1277
  /* content: '' !important; */
1197
1278
  }
1198
1279
 
1199
- .video-js.skin_news_live button.vjs-fullscreen-control.vjs-control.vjs-button {
1280
+ .video-js.skin_news button.vjs-fullscreen-control.vjs-control.vjs-button {
1200
1281
  display: flex;
1201
1282
  justify-content: center;
1202
1283
  align-items: center;
1203
1284
  /* transform: rotate(90deg); */
1204
1285
  }
1205
1286
 
1206
- .video-js.skin_news_live .vjs-subs-caps-button .vjs-icon-placeholder:before{
1287
+ .video-js.skin_news .vjs-subs-caps-button .vjs-icon-placeholder:before{
1207
1288
  display: none;
1208
1289
  }
1209
- .video-js.skin_news_live .vjs-volume-panel .vjs-volume-control{
1290
+ .video-js.skin_news .vjs-volume-panel .vjs-volume-control{
1210
1291
  margin-left: -10px;
1211
1292
  }
1212
1293
 
1213
- .video-js.skin_news_live .skipbtn:hover{
1294
+ .video-js.skin_news .skipbtn:hover{
1214
1295
  cursor: pointer;
1215
1296
  }
1216
1297
 
1217
- .video-js.skin_news_live .rewindbtn:hover{
1298
+ .video-js.skin_news .rewindbtn:hover{
1218
1299
  cursor: pointer;
1219
1300
  }
1220
1301
 
1221
- .video-js.skin_news_live .vjs-seek-to-live-control.vjs-control{
1302
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control{
1222
1303
  position: relative;
1223
1304
  padding-left: 0;
1224
1305
  }
1225
1306
 
1226
- .video-js.skin_news_live.vjs-seeking .vjs-big-play-button{
1307
+ .video-js.skin_news.vjs-seeking .vjs-big-play-button{
1227
1308
  display: none !important;
1228
1309
  }
1229
1310
 
1230
- .video-js.skin_news_live.vjs-paused .vjs-big-play-button {
1231
- /* width: 90px;
1311
+ .video-js.skin_news.vjs-paused .vjs-big-play-button {
1312
+ width: 90px;
1232
1313
  height: 90px;
1233
1314
  display: flex;
1234
1315
  justify-content: center;
@@ -1243,20 +1324,19 @@
1243
1324
  font-size: 6em;
1244
1325
  line-height: 1.4em;
1245
1326
  border: 0.05em solid;
1246
- color: inherit; */
1247
- display: none !important;
1327
+ color: inherit;
1248
1328
  }
1249
- .video-js.skin_news_live .vjs-seek-to-live-control.vjs-control{
1329
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge{
1250
1330
  font-weight: bold;
1251
1331
  }
1252
1332
 
1253
- .video-js.skin_news_live .vjs-menu > ul.vjs-menu-content{
1333
+ .video-js.skin_news .vjs-menu > ul.vjs-menu-content{
1254
1334
  bottom: 2.4em !important;
1255
1335
  right: -1em;
1256
1336
  z-index: 1;
1257
1337
  }
1258
1338
 
1259
- .video-js.skin_news_live .vjs-chromecast-button .vjs-icon-placeholder {
1339
+ .video-js.skin_news .vjs-chromecast-button .vjs-icon-placeholder {
1260
1340
  width: 24px !important;
1261
1341
  height: 24px !important;
1262
1342
  }
@@ -1266,34 +1346,34 @@
1266
1346
  }
1267
1347
 
1268
1348
 
1269
- .video-js.skin_news_live button.vjs-rewind-button{
1349
+ .video-js.skin_news button.vjs-rewind-button{
1270
1350
  cursor: pointer;
1271
1351
  }
1272
1352
 
1273
- .video-js.skin_news_live .vjs-control-bar .vjs-current-time.vjs-time-control.vjs-control {
1353
+ .video-js.skin_news .vjs-control-bar .vjs-current-time.vjs-time-control.vjs-control {
1274
1354
  padding-right: 0;
1275
- display: none;
1276
1355
  }
1277
1356
 
1278
- .video-js.skin_news_live .vjs-control-bar .vjs-duration.vjs-time-control.vjs-control {
1357
+ .video-js.skin_news .vjs-control-bar .vjs-duration.vjs-time-control.vjs-control {
1279
1358
  padding-left: 0;
1280
- display: none;
1281
1359
  }
1282
1360
 
1283
- .video-js.skin_news_live .vjs-control-bar .vjs-time-control.vjs-time-divider {
1361
+ .video-js.skin_news .vjs-control-bar .vjs-time-control.vjs-time-divider {
1284
1362
  padding-left: 0;
1285
1363
  padding-right: 0;
1286
- display: none;
1364
+ display: flex;
1365
+ justify-content: center;
1366
+ width: min-content;
1287
1367
  }
1288
1368
 
1289
- .video-js.skin_news_live.vjs-live .vjs-control-bar .vjs-time-control {
1369
+ .video-js.skin_news.vjs-live .vjs-control-bar .vjs-time-control {
1290
1370
  display: none
1291
1371
  }
1292
- .video-js.skin_news_live.vjs-liveui .vjs-control-bar .vjs-time-control {
1372
+ .video-js.skin_news.vjs-liveui .vjs-control-bar .vjs-time-control {
1293
1373
  display: none
1294
1374
  }
1295
1375
 
1296
- .video-js.skin_news_live .vjs-control-bar .vjs-time-control {
1376
+ .video-js.skin_news .vjs-control-bar .vjs-time-control {
1297
1377
  display: flex;
1298
1378
  align-items: center;
1299
1379
  font-weight: 700;
@@ -1301,26 +1381,26 @@
1301
1381
  min-width: 1.2em;
1302
1382
  }
1303
1383
 
1304
- .video-js.skin_news_live .vjs-remaining-time.vjs-time-control.vjs-control {
1384
+ .video-js.skin_news .vjs-remaining-time.vjs-time-control.vjs-control {
1305
1385
  display: none;
1306
1386
  font-size: 11px;
1307
1387
  justify-content: center;
1308
1388
  align-items: center;
1309
1389
  user-select: none;
1310
1390
  }
1311
- .video-js.skin_news_live.vjs-live .vjs-remaining-time.vjs-time-control.vjs-control{
1391
+ .video-js.skin_news.vjs-live .vjs-remaining-time.vjs-time-control.vjs-control{
1312
1392
  display: none;
1313
1393
  }
1314
1394
 
1315
- .video-js.skin_news_live button.vjs-subs-caps-button.vjs-menu-button.vjs-menu-button-popup.vjs-button{
1395
+ .video-js.skin_news button.vjs-subs-caps-button.vjs-menu-button.vjs-menu-button-popup.vjs-button{
1316
1396
  height: min-content;
1317
1397
  width: min-content;
1318
1398
  }
1319
- .video-js.skin_news_live .vjs-volume-panel.vjs-volume-panel-vertical{
1399
+ .video-js.skin_news .vjs-volume-panel.vjs-volume-panel-vertical{
1320
1400
  width: 6em;
1321
1401
  }
1322
1402
 
1323
- .video-js.skin_news_live .content{
1403
+ .video-js.skin_news .content{
1324
1404
  bottom: 3.4rem !important;
1325
1405
  right: -4rem !important;
1326
1406
  }
@@ -1339,16 +1419,15 @@
1339
1419
  pointer-events:none
1340
1420
  }
1341
1421
 
1342
- .video-js.skin_news_live iframe{
1422
+ .video-js.skin_news iframe{
1343
1423
  width: 100%;
1344
1424
  height: 100%;
1345
1425
  }
1346
1426
 
1347
- .video-js.skin_news_live .vjs-live-control{
1427
+ .video-js.skin_news .vjs-live-control{
1348
1428
  align-items: center;
1349
- display: none;
1350
1429
  }
1351
- .video-js.skin_news_live .vjs-live-control.vjs-control .vjs-live-display{
1430
+ .video-js.skin_news .vjs-live-control.vjs-control .vjs-live-display{
1352
1431
  height: 2.2em;
1353
1432
  display: flex;
1354
1433
  align-items: center;
@@ -1359,22 +1438,43 @@
1359
1438
  margin: 4px 0px 4px 12px;
1360
1439
  }
1361
1440
 
1362
- .video-js.skin_news_live .vjs-seek-to-live-control.vjs-control:focus{
1441
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control:focus{
1363
1442
  text-shadow: none;
1364
1443
  }
1444
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-seek-to-live-text {
1445
+ display: none;
1446
+ font-size: 12px;
1447
+ }
1365
1448
 
1366
- .video-js.skin_news_live .vjs-control-bar .vjs-seek-to-live-control.vjs-control{
1367
- display: flex;
1449
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder {
1450
+ height: 2.2em;
1451
+ display: inline-flex;
1452
+ align-items: center;
1453
+ /* font-family: monospace; */
1368
1454
  justify-content: center;
1369
- min-width: 5.3em;
1370
- pointer-events: none;
1371
- user-select: none;
1455
+ border: 2px solid;
1456
+ margin: 4px 0px 4px 6px;
1457
+ white-space: pre;
1458
+ padding: 0px 6px;
1459
+ font-size: 1.2em;
1460
+ font-weight: 500;
1461
+ color: rgba(255, 255, 2555, 0.7);
1462
+
1463
+ letter-spacing: -.1px;
1464
+ line-height: normal;
1465
+ text-transform: uppercase;
1466
+ color: #FFFFFF;
1467
+ opacity: .7;
1468
+ font-family: "Proxima Nova";
1372
1469
  }
1373
1470
 
1374
- .video-js.skin_news_live .vjs-seek-to-live-control.vjs-control .vjs-icon-placeholder::before{
1375
- color: white;
1471
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder:hover{
1472
+ opacity: 1;
1376
1473
  }
1377
1474
 
1475
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder::before {
1476
+ content: "NOT LIVE";
1477
+ }
1378
1478
 
1379
1479
  .settings-selection.vjs-control.vjs-button{
1380
1480
  display: flex !important;
@@ -1391,57 +1491,57 @@
1391
1491
  .tvProviderImage{
1392
1492
  display: none
1393
1493
  }
1394
- .video-js.skin_news_live .vjs-fullscreen .icon-minimize,
1494
+ .video-js.skin_news .vjs-fullscreen .icon-minimize,
1395
1495
  .icon-maximize {
1396
1496
  height: 30px !important;
1397
1497
  }
1398
1498
 
1399
- .video-js.skin_news_live .vjs-fullscreen .icon-maximize,
1499
+ .video-js.skin_news .vjs-fullscreen .icon-maximize,
1400
1500
  .icon-minimize {
1401
1501
  height: 30px !important;
1402
1502
  }
1403
- .video-js.skin_news_live .vjs-volume-panel.vjs-volume-panel-vertical{
1503
+ .video-js.skin_news .vjs-volume-panel.vjs-volume-panel-vertical{
1404
1504
  width: 4.5em;
1405
1505
  }
1406
- .video-js.skin_news_live button.vjs-fullscreen-control.vjs-control.vjs-button>span.vjs-icon-placeholder::before {
1506
+ .video-js.skin_news button.vjs-fullscreen-control.vjs-control.vjs-button>span.vjs-icon-placeholder::before {
1407
1507
  height: min-content;
1408
1508
  }
1409
1509
 
1410
- .video-js.skin_news_live button.vjs-slowmo-button{
1510
+ .video-js.skin_news button.vjs-slowmo-button{
1411
1511
  display: none;
1412
1512
  }
1413
- .video-js.skin_news_live button.vjs-rewind-button{
1513
+ .video-js.skin_news button.vjs-rewind-button{
1414
1514
  display: none;
1415
1515
  }
1416
- .video-js.skin_news_live button.vjs-rewind-button>svg{
1516
+ .video-js.skin_news button.vjs-rewind-button>svg{
1417
1517
  height: 20px;
1418
1518
  }
1419
- .video-js.skin_news_live .vjs-button{
1519
+ .video-js.skin_news .vjs-button{
1420
1520
  width: 4.8em;
1421
1521
  }
1422
- .video-js.skin_news_live .widget-selection{
1522
+ .video-js.skin_news .widget-selection{
1423
1523
  display: none;
1424
1524
  }
1425
- .video-js.skin_news_live .container{
1525
+ .video-js.skin_news .container{
1426
1526
  display: none !important;
1427
1527
  }
1428
- .video-js.skin_news_live .vjs-control-bar{
1528
+ .video-js.skin_news .vjs-control-bar{
1429
1529
  height: 4em !important;
1430
1530
  }
1431
- .video-js.skin_news_live .vjs-button>.vjs-icon-placeholder:before{
1531
+ .video-js.skin_news .vjs-button>.vjs-icon-placeholder:before{
1432
1532
  font-size: 2.5em;
1433
1533
  line-height: 1.5;
1434
1534
  }
1435
- .video-js.skin_news_live .vjs-play-progress:before {
1535
+ .video-js.skin_news .vjs-play-progress:before {
1436
1536
  font-size: 1.2em;
1437
1537
  position: absolute;
1438
1538
  right: -0.5em;
1439
1539
  z-index: 1;
1440
1540
  }
1441
- .video-js.skin_news_live button.vjs-skip-button>svg{
1541
+ .video-js.skin_news button.vjs-skip-button>svg{
1442
1542
  height: 20px;
1443
1543
  }
1444
- .video-js.skin_news_live button.vjs-big-play-button {
1544
+ .video-js.skin_news button.vjs-big-play-button {
1445
1545
  width: 50px !important;
1446
1546
  height: 50px !important;
1447
1547
  font-size: 2.1rem !important;
@@ -1451,17 +1551,17 @@
1451
1551
  width: 24px;
1452
1552
  height: 24px;
1453
1553
  }
1454
- .video-js.skin_news_live.vjs-live .vjs-progress-control .vjs-progress-holder{
1554
+ .video-js.skin_news.vjs-live .vjs-progress-control .vjs-progress-holder{
1455
1555
  margin: 0 12px 0 12px;
1456
1556
  }
1457
- .video-js.skin_news_live .vjs-seek-to-live-text{
1557
+ .video-js.skin_news .vjs-seek-to-live-text{
1458
1558
  font-size: 12px;
1459
1559
  }
1460
- .video-js.skin_news_live .vjs-progress-control .vjs-progress-holder {
1560
+ .video-js.skin_news .vjs-progress-control .vjs-progress-holder {
1461
1561
  margin: 0 12px 0 12px;
1462
1562
  }
1463
1563
  }
1464
- .video-js.skin_news_live.vjs-paused .vjs-big-play-button {
1564
+ .video-js.skin_news.vjs-paused .vjs-big-play-button {
1465
1565
  width: 90px;
1466
1566
  height: 90px;
1467
1567
  display: flex;
@@ -1478,7 +1578,7 @@
1478
1578
  line-height: 1.4em;
1479
1579
  }
1480
1580
 
1481
- .video-js.skin_news_live .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:hover .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1581
+ .video-js.skin_news .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:hover .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1482
1582
  display: flex;
1483
1583
  justify-content: center;
1484
1584
  align-items: center;
@@ -1486,22 +1586,29 @@
1486
1586
  transition: width 0.1s;
1487
1587
  }
1488
1588
 
1489
- .video-js.skin_news_live .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1589
+ .video-js.skin_news .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:active .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1490
1590
  display: flex;
1491
1591
  justify-content: center;
1492
1592
  align-items: center;
1493
1593
  height: 100%;
1494
1594
  transition: width 0.1s;
1495
1595
  }
1496
- .video-js.skin_news_live.vjs-fullscreen .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
1596
+ .video-js.skin_news.vjs-fullscreen .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
1497
1597
  display: none !important;
1498
1598
  }
1599
+ .video-js.skin_news .ssai-ad-container{
1600
+ position: absolute;
1601
+ bottom: 14px;
1602
+ }
1499
1603
 
1500
1604
  @media (max-width: 576px) {
1501
- .video-js.skin_news_live .vjs-progress-control .vjs-progress-holder{
1605
+ .video-js.skin_news .ssai-ad-container{
1606
+ bottom: 2px;
1607
+ }
1608
+ .video-js.skin_news .vjs-progress-control .vjs-progress-holder{
1502
1609
  height: 5px !important;
1503
1610
  }
1504
- .video-js.skin_news_live button.vjs-big-play-button {
1611
+ .video-js.skin_news button.vjs-big-play-button {
1505
1612
  width: 50px !important;
1506
1613
  height: 50px !important;
1507
1614
  font-size: 2.1rem !important;
@@ -1510,514 +1617,407 @@
1510
1617
  .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
1511
1618
  display: none;
1512
1619
  }
1513
- .video-js.skin_news_live .vjs-menu > ul.vjs-menu-content {
1620
+ .video-js.skin_news .vjs-menu > ul.vjs-menu-content {
1514
1621
  bottom: 2.4em !important;
1515
1622
  right: -1em;
1516
1623
  z-index: 1;
1517
1624
  }
1518
- .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
1625
+ .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
1519
1626
  display: none !important;
1520
1627
  }
1521
1628
 
1629
+ .video-js.skin_news .vjs-text-track-display-ttml span {
1630
+ color: white;
1631
+ font-size: 13px;
1632
+ background-color: black;
1633
+ }
1634
+ }
1635
+
1636
+ .video-js.skin_news .vjs-text-track-display-ttml span {
1637
+ color: white;
1638
+ font-size: 16px;
1639
+ background-color: black;
1522
1640
  }
1523
1641
 
1524
- .video-js.skin_news_live .vjs-text-track-display-ttml {
1525
- width: 100% !important;
1642
+ .video-js.skin_news.vjs-has-started.vjs-user-active.vjs-controls-enabled .vjs-text-track-display-ttml p {
1643
+ margin-bottom: 2rem !important;
1526
1644
  }
1527
1645
 
1528
- .video-js.skin_news_live .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
1529
- .video-js.skin_news_live .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
1646
+ .video-js.skin_news .vjs-text-track-display-ttml p {
1647
+ font-size: 18px !important;
1648
+ }
1649
+
1650
+
1651
+ .video-js.skin_news .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
1652
+ .video-js.skin_news .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
1530
1653
  font-size: 1.2em !important;
1531
1654
  line-height: 1.5em !important;
1532
1655
  padding: 0.2em 0.8em !important;
1533
1656
  }
1534
1657
 
1535
- .video-js.skin_news_live .vjs-control-bar .vjs-svg-icon{
1658
+ .video-js.skin_news .vjs-control-bar .vjs-svg-icon{
1536
1659
  content: none !important;
1537
1660
  fill: none !important;
1538
1661
  filter: none !important;
1539
1662
  }
1540
1663
 
1541
- .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
1542
- color: rgba(255, 255, 2555, 0.7)!important;
1543
- }
1544
-
1545
- .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
1546
- color: rgba(255, 255, 2555, 1)!important;
1664
+ /* svg icons opacity and hover effect */
1665
+ .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button svg {
1666
+ opacity: 0.7 !important;
1547
1667
  }
1548
1668
 
1549
-
1550
-
1551
- .video-js.skin_mini .vjs-button>.vjs-icon-placeholder:before {
1552
- font-size: 2.2em;
1553
- line-height: 2.6;
1554
- }
1555
- .video-js.skin_mini{
1556
- overflow: hidden;
1669
+ .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button:hover svg {
1670
+ opacity: 1 !important;
1557
1671
  }
1558
- .video-js.skin_mini .vjs-control-bar{
1559
- z-index: 1 !important;
1560
- height: 4em !important;
1561
- background: black !important;
1672
+ .video-js.skin_news .vjs-control-bar .vjs-remaining-time.vjs-time-control.vjs-control{
1673
+ opacity: 0.7 !important;
1562
1674
  }
1563
-
1564
- .video-js.skin_mini .vjs-fade>* {
1565
- visibility: hidden !important;
1566
- opacity: 0 !important;
1567
- transition: visibility 1s, opacity 1s !important;
1675
+ .video-js.skin_news .vjs-control-bar .vjs-remaining-time.vjs-time-control.vjs-control:hover{
1676
+ opacity: 1 !important;
1568
1677
  }
1569
1678
 
1570
- .video-js.skin_mini .custom-spaced-progress-bar {
1571
- position: absolute;
1572
- width: 100%;
1573
- display: flex;
1574
- height: 0.5em;
1575
- top: -0.5em;
1679
+ .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
1680
+ color: rgba(255, 255, 2555, 0.7)!important;
1576
1681
  }
1577
1682
 
1578
- .video-js.skin_mini .vjs-progress-control {
1579
- /* left: -6px; */
1580
- position: relative;
1581
- width: 100%;
1582
- height: 0.5em;
1583
- transition: height 0.1s, top 0.1s;
1683
+ .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
1684
+ color: rgba(255, 255, 2555, 1)!important;
1584
1685
  }
1585
1686
 
1586
1687
 
1587
1688
 
1588
1689
 
1589
- .video-js.skin_mini .vjs-custom-control-spacer {
1590
- display: block;
1591
- flex: 1 1 auto;
1690
+ .video-js.skin_cn_news .vjs-control-bar {
1691
+ z-index: 1 !important;
1692
+ height: auto !important;
1693
+ padding: 0.8em 30px 0.6em;
1694
+ background: transparent !important;
1695
+ display: flex;
1696
+ flex-wrap: wrap;
1697
+ align-items: center;
1698
+ column-gap: 10px;
1592
1699
  }
1593
1700
 
1594
- .video-js.skin_mini .vjs-progress-control .vjs-progress-holder {
1595
- margin: 0 0px 0 0px;
1596
- }
1597
- .video-js.skin_mini .vjs-remaining-time.vjs-time-control.vjs-control{
1598
- display: none;
1599
- }
1600
1701
 
1601
- .video-js.skin_mini button.vjs-control.vjs-button.vjs-slowmo-button {
1602
- font-size: 14px;
1603
- font-weight: 500;
1604
- align-self: center;
1605
- height: min-content;
1606
- padding: 5px 2px;
1607
- border-radius: 8px;
1702
+ .video-js.skin_cn_news .vjs-control-bar::before {
1703
+ content: '';
1704
+ position: absolute;
1705
+ left: 0;
1706
+ right: 0;
1707
+ bottom: 0;
1708
+ top: -3em;
1709
+ background: linear-gradient(
1710
+ to top,
1711
+ rgba(0, 0, 0, 0.85) 0%,
1712
+ rgba(0, 0, 0, 0.7) 40%,
1713
+ rgba(0, 0, 0, 0.55) 70%,
1714
+ rgba(0, 0, 0, 0.38) 86%,
1715
+ transparent 100%
1716
+ );
1717
+ pointer-events: none;
1718
+ z-index: -1;
1608
1719
  }
1609
1720
 
1610
- .video-js.skin_mini .vjs-progress-control .vjs-progress-holder{
1611
- height: 5px !important;
1721
+ .video-js.skin_cn_news .vjs-control-bar .vjs-progress-control {
1722
+ order: -1;
1723
+ flex: 0 0 100%;
1724
+ width: 80%;
1725
+ margin: 0 0 5em;
1726
+ position: relative;
1612
1727
  }
1613
1728
 
1614
- .video-js.skin_mini .vjs-play-progress:before {
1615
- font-size: 1.3em;
1616
- line-height: unset;
1617
- top: -0.3333333333em;
1729
+ .video-js.skin_cn_news .vjs-control-bar > .vjs-control,
1730
+ .video-js.skin_cn_news .vjs-control-bar > .vjs-button {
1731
+ width: auto;
1732
+ min-width: 0;
1618
1733
  }
1619
-
1620
- .video-js.skin_mini .vjs-play-progress .vjs-time-tooltip {
1621
- display: none !important;
1734
+ .video-js.skin_cn_news .vjs-control-bar .vjs-button {
1735
+ display: inline-flex;
1736
+ align-items: center;
1737
+ justify-content: center;
1738
+ height: 7em;
1739
+ padding: 0 10px;
1740
+ color: #fff;
1622
1741
  }
1623
1742
 
1624
- /* */
1625
- .video-js.skin_mini .vjs-mouse-display{
1626
- font-size: 1.6666666667em;
1743
+ .video-js.skin_cn_news .vjs-svg-icon::before {
1744
+ content: none !important;
1627
1745
  }
1628
1746
 
1629
- .video-js.skin_mini .vjs-progress-control:hover .vjs-progress-holder {
1630
- font-size: 1em !important;
1631
- }
1632
1747
 
1633
- .video-js.skin_mini .vjs-button{
1634
- width: 3em;
1635
- display: flex;
1748
+ .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon {
1749
+ display: inline-flex;
1636
1750
  align-items: center;
1637
1751
  justify-content: center;
1638
1752
  }
1753
+ .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon svg,
1754
+ .video-js.skin_cn_news .vjs-rewind-button svg {
1755
+ width: 24px;
1756
+ height: 24px;
1757
+ display: block;
1758
+ }
1639
1759
 
1640
1760
 
1641
- .video-js.skin_mini .vjs-fullscreen .icon-minimize,
1642
- .icon-maximize {
1643
- display: block;
1644
- height: 32px;
1645
- }
1646
1761
 
1647
- .video-js.skin_mini .vjs-playback-rate .vjs-playback-rate-value{
1648
- line-height: 4;
1762
+ .video-js.skin_cn_news .vjs-subs-caps-button {
1763
+ opacity: 1;
1649
1764
  }
1650
1765
 
1651
- .video-js.skin_mini .vjs-fullscreen .icon-maximize,
1652
- .icon-minimize {
1653
- display: none;
1654
- height: 32px;
1655
- }
1656
1766
 
1657
- .video-js.skin_mini button.vjs-play-control.vjs-control.vjs-button{
1658
- outline: none !important;
1659
- }
1660
- .video-js.skin_mini .vjs-fullscreen-control .vjs-icon-placeholder:before,
1661
- .vjs-icon-fullscreen-enter:before {
1662
- /* content: '' !important; */
1663
- }
1664
1767
 
1665
- .video-js.skin_mini button.vjs-fullscreen-control.vjs-control.vjs-button {
1666
- display: flex;
1667
- justify-content: center;
1768
+ .video-js.skin_cn_news .vjs-volume-panel {
1769
+ margin: 0;
1770
+ display: inline-flex;
1668
1771
  align-items: center;
1669
- /* transform: rotate(90deg); */
1772
+ align-self: center;
1773
+ height: 2.2em;
1774
+ min-width: 7em;
1775
+ transition: none;
1670
1776
  }
1671
-
1672
- .video-js.skin_mini .vjs-subs-caps-button .vjs-icon-placeholder:before{
1673
- display: none;
1777
+ .video-js.skin_cn_news .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
1778
+ width: 0;
1779
+ height: 100%;
1780
+ display: flex;
1781
+ align-items: center;
1782
+ overflow: hidden;
1783
+ opacity: 0;
1784
+ transition: width 0.15s ease, opacity 0.15s ease;
1674
1785
  }
1675
- .video-js.skin_mini .vjs-volume-panel .vjs-volume-control{
1676
- margin-left: -10px;
1677
- display: none;
1786
+ .video-js.skin_cn_news .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal,
1787
+ .video-js.skin_cn_news .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
1788
+ .video-js.skin_cn_news .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal,
1789
+ .video-js.skin_cn_news .vjs-volume-panel:focus-within .vjs-volume-control.vjs-volume-horizontal {
1790
+ width: 5em;
1791
+ opacity: 1;
1678
1792
  }
1679
1793
 
1680
- .video-js.skin_mini .vjs-loading-spinner {
1681
- position: absolute;
1682
- top: 50%;
1683
- left: 50%;
1684
- transform: translate(-50%, -50%);
1685
- opacity: .85;
1686
- text-align: left;
1687
- border: .2em solid rgba(43, 51, 63, .7);
1688
- box-sizing: border-box;
1689
- background-clip: padding-box;
1690
- width: 3em;
1691
- height: 3em;
1692
- border-radius: 50%;
1693
- visibility: hidden;
1794
+ .video-js.skin_cn_news .vjs-volume-bar {
1795
+ width: 4em;
1796
+ height: 0.3em;
1797
+ margin: 0 0.45em;
1694
1798
  }
1695
1799
 
1696
- .video-js.skin_mini .skipbtn:hover{
1697
- cursor: pointer;
1800
+
1801
+ .video-js.skin_cn_news .vjs-volume-control .vjs-mouse-display {
1802
+ display: none !important;
1698
1803
  }
1699
1804
 
1700
- .video-js.skin_mini .rewindbtn:hover{
1701
- cursor: pointer;
1805
+ .video-js.skin_cn_news .vjs-mute-control.vjs-vol-0 ~ .vjs-volume-control .vjs-volume-level {
1806
+ width: 0 !important;
1702
1807
  }
1703
1808
 
1704
- .video-js.skin_mini .vjs-seek-to-live-control.vjs-control{
1705
- position: relative;
1706
- padding-left: 0;
1809
+
1810
+ .video-js.skin_cn_news .vjs-custom-control-spacer {
1811
+ display: block !important;
1812
+ flex: 1 1 auto;
1707
1813
  }
1708
1814
 
1709
- .video-js.skin_mini.vjs-paused .vjs-big-play-button {
1710
- width: 40px;
1711
- height: 40px;
1815
+
1816
+ .video-js.skin_cn_news .vjs-big-play-button {
1817
+ display: none;
1818
+ }
1819
+ .video-js.skin_cn_news .vjs-big-play-button .vjs-icon-placeholder:before {
1820
+ position: relative !important;
1821
+ display: flex;
1822
+ left: 0;
1823
+ top: -1px;
1824
+ }
1825
+ .video-js.skin_cn_news.vjs-paused:not(.vjs-seeking):not(.vjs-ended) .vjs-big-play-button {
1712
1826
  display: flex;
1713
1827
  justify-content: center;
1714
1828
  align-items: center;
1715
- border: none;
1716
1829
  position: absolute;
1717
1830
  top: 0;
1718
1831
  left: 0;
1719
1832
  right: 0;
1720
1833
  bottom: 0;
1721
1834
  margin: auto;
1722
- font-size: 3em;
1835
+ width: 80px;
1836
+ height: 80px;
1837
+ border: none;
1838
+ border-radius: 50%;
1839
+ background: rgba(0, 0, 0, 0.55);
1840
+ font-size: 5em;
1723
1841
  line-height: 1.3em;
1724
1842
  transform: none !important;
1725
- border-radius: 1.3em;
1726
1843
  }
1727
1844
 
1728
- .video-js.skin_mini .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge{
1729
- font-weight: bold;
1730
- }
1731
1845
 
1732
- .video-js.skin_mini .vjs-menu > ul.vjs-menu-content{
1733
- bottom: 1.1em !important;
1734
- right: 1em;
1735
- z-index: 1;
1736
- font-size: 10px;
1737
- }
1738
-
1739
- .video-js.skin_mini .vjs-chromecast-button .vjs-icon-placeholder {
1740
- width: 24px !important;
1741
- height: 24px !important;
1742
- }
1743
- .video-js.skin_mini .settings-selector-icon>svg{
1744
- height: 19px !important;
1745
- width: 19px !important;
1746
- }
1747
-
1748
-
1749
- .video-js.skin_mini button.vjs-rewind-button{
1750
- cursor: pointer;
1751
- }
1752
-
1753
- .video-js.skin_mini .vjs-control-bar .vjs-current-time.vjs-time-control.vjs-control {
1754
- padding-right: 0;
1755
- }
1756
-
1757
- .video-js.skin_mini .vjs-control-bar .vjs-duration.vjs-time-control.vjs-control {
1758
- padding-left: 0;
1759
- }
1760
-
1761
- .video-js.skin_mini .vjs-control-bar .vjs-time-control.vjs-time-divider {
1762
- padding-left: 0;
1763
- padding-right: 0;
1764
- display: flex;
1765
- justify-content: center;
1766
- width: min-content;
1767
- }
1768
-
1769
- .video-js.skin_mini.vjs-live .vjs-control-bar .vjs-time-control {
1770
- display: none
1771
- }
1772
- .video-js.skin_mini.vjs-liveui .vjs-control-bar .vjs-time-control {
1773
- display: none
1846
+ .video-js.skin_cn_news .vjs-progress-control .vjs-progress-holder {
1847
+ height: 4px !important;
1848
+ margin: 0;
1849
+ border-radius: 20px;
1850
+ background-color: #393944;
1774
1851
  }
1775
1852
 
1776
- .video-js.skin_mini .vjs-control-bar .vjs-time-control {
1777
- display: flex;
1778
- align-items: center;
1779
- font-weight: 700;
1780
- font-size: 9px;
1781
- min-width: 0.8em;
1782
- padding-left: 0;
1853
+ .video-js.skin_cn_news .vjs-play-progress {
1854
+ background-color: #ffffff;
1855
+ border-radius: 20px;
1783
1856
  }
1784
1857
 
1785
- .video-js.skin_mini .vjs-remaining-time.vjs-time-control.vjs-control {
1786
- display: none;
1787
- font-size: 11px;
1788
- justify-content: center;
1789
- align-items: center;
1790
- user-select: none;
1791
- }
1792
- .video-js.skin_mini.vjs-live .vjs-remaining-time.vjs-time-control.vjs-control{
1793
- display: none;
1858
+ .video-js.skin_cn_news .vjs-load-progress,
1859
+ .video-js.skin_cn_news .vjs-load-progress div {
1860
+ background: rgba(255, 255, 255, 0.15);
1861
+ border-radius: 20px;
1794
1862
  }
1795
1863
 
1796
- .video-js.skin_mini button.vjs-subs-caps-button.vjs-menu-button.vjs-menu-button-popup.vjs-button{
1797
- height: min-content;
1798
- width: min-content;
1799
- }
1800
- .video-js.skin_mini .vjs-volume-panel.vjs-volume-panel-vertical{
1801
- width: 3em;
1802
- margin-right: 4px;
1803
- }
1804
1864
 
1805
- .video-js.skin_mini .content{
1806
- bottom: 3.4rem !important;
1807
- right: -4rem !important;
1865
+ .video-js.skin_cn_news .vjs-play-progress:before {
1866
+ content: '';
1867
+ width: 16px;
1868
+ height: 16px;
1869
+ border-radius: 50%;
1870
+ background: #ffffff;
1871
+ border: 2px solid rgba(0, 0, 0, 0.6);
1872
+ box-sizing: border-box;
1873
+ box-shadow: 0 0 0 2px #ffffff, 0 0 3px rgba(0, 0, 0, 0.45);
1874
+ top: -6px;
1875
+ right: -8px;
1876
+ position: absolute;
1808
1877
  }
1809
-
1810
- .video-js.skin_mini .setting-icon > svg{
1811
- height:18px !important;
1878
+ .video-js.skin_cn_news .vjs-play-progress .vjs-time-tooltip {
1879
+ display: none !important;
1812
1880
  }
1813
1881
 
1814
- .output-overlay{
1815
- position: absolute;
1816
- bottom: 0;
1817
- height: 100%;
1818
- width: 100%;
1819
- z-index: 0;
1820
- border: 0;
1821
- pointer-events:none
1882
+ .video-js.skin_cn_news .vjs-mouse-display .vjs-time-tooltip {
1883
+ background: #ffffff;
1884
+ color: #0a0e17;
1885
+ font-weight: 700;
1886
+ border-radius: 3px;
1822
1887
  }
1823
1888
 
1824
- .video-js.skin_mini iframe{
1825
- width: 100%;
1826
- height: 100%;
1889
+ .video-js.skin_cn_news .vjs-live-control {
1890
+ display: none !important;
1827
1891
  }
1828
-
1829
- .video-js.skin_mini .vjs-live-control{
1892
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-control {
1893
+ display: inline-flex;
1830
1894
  align-items: center;
1831
- max-width: 5em;
1832
- }
1833
- .video-js.skin_mini .vjs-live-control.vjs-control .vjs-live-display{
1895
+ align-self: center;
1834
1896
  height: 2.2em;
1835
- display: flex;
1836
- align-items: center;
1837
- font-family: monospace;
1838
- width: 4em;
1839
- justify-content: center;
1840
- background: red;
1841
- margin: 4px 0px 4px 2px;
1897
+ gap: 5px;
1898
+ width: auto;
1899
+ padding: 0 10px;
1900
+ border: 1px solid rgba(255, 255, 255, 0.45);
1901
+ border-radius: 4px;
1902
+ cursor: pointer;
1842
1903
  }
1843
1904
 
1844
- .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:focus{
1845
- text-shadow: none;
1846
- }
1847
- .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-seek-to-live-text {
1905
+ .video-js.skin_cn_news .vjs-seek-to-live-control .vjs-icon-placeholder {
1848
1906
  display: none;
1849
- font-size: 12px;
1850
1907
  }
1851
-
1852
- .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder {
1853
- height: 1.8em;
1908
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder {
1854
1909
  display: inline-flex;
1855
1910
  align-items: center;
1856
- font-family: monospace;
1857
- justify-content: center;
1858
- border: 1.5px solid;
1859
- margin: 4px 0px 4px 2px;
1860
- white-space: pre;
1861
- padding: 2px 4px;
1862
- font-size: 1.2em;
1863
- font-weight: 500;
1864
- color: rgba(255, 255, 2555, 0.7);
1865
1911
  }
1866
-
1867
- .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder::before {
1868
- content: "NOT LIVE";
1869
- word-spacing: -4px;
1870
- }
1871
-
1872
-
1873
- @media(max-width:600px){
1874
- .tvProviderImage{
1875
- display: none
1876
- }
1877
- .video-js.skin_mini .vjs-fullscreen .icon-minimize,
1878
- .icon-maximize {
1879
- height: 30px !important;
1880
- }
1881
-
1882
- .video-js.skin_mini .vjs-fullscreen .icon-maximize,
1883
- .icon-minimize {
1884
- height: 30px !important;
1885
- }
1886
- .video-js.skin_mini .vjs-volume-panel.vjs-volume-panel-vertical{
1887
- width: 3.5em;
1888
- }
1889
- .video-js.skin_mini button.vjs-fullscreen-control.vjs-control.vjs-button>span.vjs-icon-placeholder::before {
1890
- height: min-content;
1891
- }
1892
-
1893
- .video-js.skin_mini button.vjs-slowmo-button{
1894
- display: none;
1895
- }
1896
- .video-js.skin_mini button.vjs-rewind-button{
1897
- display: none;
1898
- }
1899
- .video-js.skin_mini button.vjs-rewind-button>svg{
1900
- height: 20px;
1901
- }
1902
- .video-js.skin_mini .vjs-button{
1903
- width: 3em;
1904
- }
1905
- .video-js.skin_mini .widget-selection{
1906
- display: none;
1907
- }
1908
- .video-js.skin_mini .container{
1909
- display: none !important;
1910
- }
1911
- .video-js.skin_mini .vjs-control-bar{
1912
- height: 4em !important;
1913
- }
1914
- .video-js.skin_mini .vjs-button>.vjs-icon-placeholder:before{
1915
- font-size: 2.5em;
1916
- line-height: 1.5;
1917
- }
1918
- .video-js.skin_mini .vjs-play-progress:before {
1919
- font-size: 1.2em;
1920
- position: absolute;
1921
- right: -0.5em;
1922
- z-index: 1;
1912
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder::before {
1913
+ content: '';
1914
+ display: inline-block;
1915
+ width: 8px;
1916
+ height: 8px;
1917
+ border-radius: 50%;
1918
+ background: #ff2d2d; /* red live dot */
1923
1919
  }
1924
- .video-js.skin_mini button.vjs-skip-button>svg{
1925
- height: 20px;
1920
+ .video-js.skin_cn_news .vjs-seek-to-live-text {
1921
+ color: #ffffff;
1922
+ font-weight: 700;
1923
+ font-size: 12px;
1924
+ letter-spacing: 0.03em;
1926
1925
  }
1927
1926
 
1928
- .stream-selector-icon>svg{
1929
- width: 24px;
1930
- height: 24px;
1931
- }
1932
- .video-js.skin_mini .vjs-seek-to-live-text{
1933
- font-size: 12px;
1927
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge {
1928
+ border-color: transparent;
1934
1929
  }
1930
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-seek-to-live-text {
1931
+ color: #ff2d2d;
1935
1932
  }
1936
1933
 
1937
-
1938
- .video-js.skin_mini .vjs-text-track-display-ttml span {
1939
- background-color: rgba(0, 0, 0, 0.2);
1934
+ /* ---- time controls ---- */
1935
+ .video-js.skin_cn_news .vjs-current-time,
1936
+ .video-js.skin_cn_news .vjs-duration,
1937
+ .video-js.skin_cn_news .vjs-time-divider {
1938
+ display: none !important;
1940
1939
  }
1941
-
1942
-
1943
- .video-js.skin_mini .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:hover .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1944
- display: flex;
1945
- justify-content: center;
1940
+ .video-js.skin_cn_news .vjs-remaining-time.vjs-time-control.vjs-control {
1941
+ display: none;
1946
1942
  align-items: center;
1947
- height: 100%;
1948
- transition: width 0.1s;
1949
- }
1950
- .video-js.skin_mini .vjs-track-settings-colors fieldset.vjs-fg.vjs-track-setting{
1951
- margin: 2px;
1952
- }
1953
-
1954
- .video-js.skin_mini .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:active .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1955
- display: flex;
1956
1943
  justify-content: center;
1957
- align-items: center;
1958
- height: 100%;
1959
- transition: width 0.1s;
1960
- }
1961
-
1962
- .video-js.skin_mini .vjs-text-track-settings .vjs-modal-dialog-content{
1963
- display: block;
1964
- font-size: 10px;
1965
- padding: 6px 10px;
1966
- margin: 0;
1967
- max-height: 100%;
1968
- overflow-y: auto;
1969
- }
1970
- .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-colors,
1971
- .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-font,
1972
- .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-controls{
1973
- display: block;
1974
- width: 100%;
1944
+ font-size: 11px;
1945
+ font-weight: 700;
1946
+ color: #fff;
1947
+ padding: 0 6px;
1948
+ user-select: none;
1975
1949
  }
1976
- .video-js.skin_mini .vjs-text-track-settings fieldset{
1977
- margin: 4px 0;
1950
+
1951
+
1952
+ .video-js.skin_cn_news .vjs-chapter-marker {
1953
+ z-index: 2;
1954
+ width: var(--vl-chapter-size, 8px);
1955
+ height: var(--vl-chapter-size, 8px);
1956
+ top: 50%;
1957
+ bottom: auto;
1958
+ background: var(--vl-chapter-color, #ffffff);
1959
+ opacity: var(--vl-chapter-opacity, 1);
1960
+ border-radius: 50%;
1961
+ box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); /* keep white dots visible on the white bar */
1962
+ transform: translate(-50%, -50%) scale(1);
1963
+ transition: background-color 0.12s ease;
1978
1964
  }
1979
- .video-js.skin_mini .vjs-text-track-settings fieldset span{
1980
- display: block;
1981
- padding: 0 0 6px;
1965
+ .video-js.skin_cn_news .vjs-chapter-marker:hover {
1966
+ background: var(--vl-chapter-hover, #0a5cff);
1982
1967
  }
1983
- .video-js.skin_mini .vjs-text-track-settings fieldset span > select{
1984
- max-width: 100%;
1968
+ .video-js.skin_cn_news .vjs-chapter-marker.vjs-chapter-marker--active {
1969
+ background: var(--vl-chapter-active, #0a5cff);
1985
1970
  }
1986
1971
 
1987
- @media (max-width: 600px) {
1988
- .video-js.skin_mini .vjs-progress-control .vjs-progress-holder{
1989
- height: 5px !important;
1990
- }
1991
-
1992
- .video-js.skin_mini .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
1993
- display: none;
1994
- }
1995
1972
 
1973
+ .video-js.skin_cn_news .vjs-chapter-marker .vjs-chapter-marker__icon {
1974
+ width: 16px;
1975
+ height: 16px;
1976
+ bottom: 160%;
1977
+ filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
1996
1978
  }
1997
1979
 
1998
- .video-js.skin_mini .vjs-control-bar .vjs-svg-icon{
1999
- content: none !important;
2000
- fill: none !important;
2001
- filter: none !important;
2002
- }
2003
1980
 
2004
- /* svg icons opacity and hover effect */
2005
- .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button svg {
2006
- opacity: 0.7 !important;
1981
+ .video-js.skin_cn_news .vjs-chapter-preview {
1982
+ background: var(--vl-chapter-tooltip, #0a5cff);
1983
+ border-radius: 6px;
1984
+ padding: 8px 10px;
1985
+ width: max-content;
1986
+ max-width: 300px;
1987
+ text-align: left;
1988
+ box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
2007
1989
  }
2008
-
2009
- .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button:hover svg {
2010
- opacity: 1 !important;
1990
+ .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__time {
1991
+ color: #ffffff;
1992
+ font-size: 13px;
1993
+ font-weight: 400;
1994
+ margin-bottom: 2px;
2011
1995
  }
2012
-
2013
- .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
2014
- color: rgba(255, 255, 2555, 0.7)!important;
1996
+ .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__label {
1997
+ color: #ffffff;
1998
+ font-size: 13px;
1999
+ font-weight: 400;
2000
+ line-height: 1.3;
2001
+ white-space: normal;
2002
+ text-align: left;
2015
2003
  }
2016
-
2017
- .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
2018
- color: rgba(255, 255, 2555, 1)!important;
2004
+ .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__pointer {
2005
+ border-top-color: var(--vl-chapter-tooltip, #0a5cff);
2019
2006
  }
2020
2007
 
2008
+ /* ---- responsive ---- */
2009
+ @media (max-width: 576px) {
2010
+ .video-js.skin_cn_news .vjs-control-bar {
2011
+ height: 3.2em !important;
2012
+ padding: 0 8px;
2013
+ }
2014
+ .video-js.skin_cn_news .vjs-control-bar .vjs-button {
2015
+ padding: 0 6px;
2016
+ }
2017
+ .video-js.skin_cn_news .vjs-control.vjs-button.vjs-picture-in-picture-control {
2018
+ display: none !important;
2019
+ }
2020
+ }
2021
2021
 
2022
2022
  /* CSS for videojs-dvr-seekbar */
2023
2023
 
@@ -2199,56 +2199,6 @@
2199
2199
 
2200
2200
 
2201
2201
 
2202
- .vjs-custom-big-mute.vjs-control{
2203
- position: absolute;
2204
- align-items: center;
2205
- background: #fcb700;
2206
- border: 0;
2207
- display: flex;
2208
- align-items: center;
2209
- height: 44px;
2210
- justify-content: center;
2211
- padding: 0;
2212
- width: 44px;
2213
- z-index: 1;
2214
- outline: none;
2215
- text-shadow:none !important;
2216
- cursor: pointer;
2217
- }
2218
- .video-js.vjs-fullscreen .vjs-custom-big-mute.vjs-control {
2219
- display: flex;
2220
- top: 50px;
2221
- height: 50px;
2222
- width: 50px;
2223
- }
2224
- .video-js.vjs-fullscreen .vjs-custom-big-mute.vjs-control >svg {
2225
- height: 28px;
2226
- width: 28px;
2227
- }
2228
- .vjs-custom-big-mute.vjs-control:hover{
2229
- filter: none;
2230
- }
2231
-
2232
-
2233
- .vjs-custom-big-mute.vjs-control.tl{
2234
- top: 0;
2235
- left: 0;
2236
- margin: 15px 0 0 15px;
2237
- }
2238
-
2239
- .vjs-custom-big-mute.vjs-control.hide{
2240
- display: none !important;
2241
-
2242
- }
2243
-
2244
- .vjs-custom-big-mute.vjs-control > svg {
2245
- color: #071d39;
2246
- height: 22px;
2247
- width: 22px;
2248
- }
2249
-
2250
-
2251
-
2252
2202
 
2253
2203
  .video-js .multicamera-parent.default{
2254
2204
  height: 345px;
@@ -2330,6 +2280,56 @@
2330
2280
 
2331
2281
 
2332
2282
 
2283
+
2284
+ .vjs-custom-big-mute.vjs-control{
2285
+ position: absolute;
2286
+ align-items: center;
2287
+ background: #fcb700;
2288
+ border: 0;
2289
+ display: flex;
2290
+ align-items: center;
2291
+ height: 44px;
2292
+ justify-content: center;
2293
+ padding: 0;
2294
+ width: 44px;
2295
+ z-index: 1;
2296
+ outline: none;
2297
+ text-shadow:none !important;
2298
+ cursor: pointer;
2299
+ }
2300
+ .video-js.vjs-fullscreen .vjs-custom-big-mute.vjs-control {
2301
+ display: flex;
2302
+ top: 50px;
2303
+ height: 50px;
2304
+ width: 50px;
2305
+ }
2306
+ .video-js.vjs-fullscreen .vjs-custom-big-mute.vjs-control >svg {
2307
+ height: 28px;
2308
+ width: 28px;
2309
+ }
2310
+ .vjs-custom-big-mute.vjs-control:hover{
2311
+ filter: none;
2312
+ }
2313
+
2314
+
2315
+ .vjs-custom-big-mute.vjs-control.tl{
2316
+ top: 0;
2317
+ left: 0;
2318
+ margin: 15px 0 0 15px;
2319
+ }
2320
+
2321
+ .vjs-custom-big-mute.vjs-control.hide{
2322
+ display: none !important;
2323
+
2324
+ }
2325
+
2326
+ .vjs-custom-big-mute.vjs-control > svg {
2327
+ color: #071d39;
2328
+ height: 22px;
2329
+ width: 22px;
2330
+ }
2331
+
2332
+
2333
2333
  /* nextep — up-next card (centered in player, scales with player size) */
2334
2334
  .video-js:has(.next-ep-preview),
2335
2335
  .video-js:has(.next-ep-preview-player-thumb) {
@@ -2612,38 +2612,6 @@
2612
2612
  z-index: 30 !important;
2613
2613
  }
2614
2614
 
2615
- /* a wrapper element that tracks the mouse vertically */
2616
- .vjs-thumbnail-holder {
2617
- position: absolute;
2618
- left: -1000px;
2619
- }
2620
-
2621
- /* the thumbnail image itself */
2622
- .vjs-thumbnail {
2623
- position: absolute;
2624
- left: 0;
2625
- bottom: 1.3em;
2626
- opacity: 0;
2627
- transition: opacity .2s ease;
2628
- -webkit-transition: opacity .2s ease;
2629
- -moz-transition: opacity .2s ease;
2630
- -mz-transition: opacity .2s ease;
2631
- }
2632
-
2633
- /* fade in the thumbnail when hovering over the progress bar */
2634
- /* .fake-active is needed for Android only. It's removed on touchend/touchecancel */
2635
- .vjs-progress-control:hover .vjs-thumbnail,
2636
- .vjs-progress-control.fake-active .vjs-thumbnail,
2637
- .vjs-progress-control:active .vjs-thumbnail {
2638
- opacity: 1;
2639
- }
2640
-
2641
- /* ... but hide the thumbnail when hovering directly over it */
2642
- .vjs-progress-control:hover .vjs-thumbnail:hover,
2643
- .vjs-progress-control:active .vjs-thumbnail:active {
2644
- opacity: 0;
2645
- }
2646
-
2647
2615
  .video-js.vjs-quality-menu {
2648
2616
  display: block;
2649
2617
  }
@@ -2714,6 +2682,38 @@
2714
2682
  -webkit-animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite;
2715
2683
  animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite;
2716
2684
  }
2685
+ /* a wrapper element that tracks the mouse vertically */
2686
+ .vjs-thumbnail-holder {
2687
+ position: absolute;
2688
+ left: -1000px;
2689
+ }
2690
+
2691
+ /* the thumbnail image itself */
2692
+ .vjs-thumbnail {
2693
+ position: absolute;
2694
+ left: 0;
2695
+ bottom: 1.3em;
2696
+ opacity: 0;
2697
+ transition: opacity .2s ease;
2698
+ -webkit-transition: opacity .2s ease;
2699
+ -moz-transition: opacity .2s ease;
2700
+ -mz-transition: opacity .2s ease;
2701
+ }
2702
+
2703
+ /* fade in the thumbnail when hovering over the progress bar */
2704
+ /* .fake-active is needed for Android only. It's removed on touchend/touchecancel */
2705
+ .vjs-progress-control:hover .vjs-thumbnail,
2706
+ .vjs-progress-control.fake-active .vjs-thumbnail,
2707
+ .vjs-progress-control:active .vjs-thumbnail {
2708
+ opacity: 1;
2709
+ }
2710
+
2711
+ /* ... but hide the thumbnail when hovering directly over it */
2712
+ .vjs-progress-control:hover .vjs-thumbnail:hover,
2713
+ .vjs-progress-control:active .vjs-thumbnail:active {
2714
+ opacity: 0;
2715
+ }
2716
+
2717
2717
  .vjs-poster {
2718
2718
  display: inline-block;
2719
2719
  vertical-align: middle;