@viewlift/player-backup 2.0.352-backup → 2.0.353-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 (3) hide show
  1. package/cjs/bundle.css +675 -666
  2. package/esm/bundle.css +675 -666
  3. package/package.json +25 -28
package/cjs/bundle.css CHANGED
@@ -3,6 +3,7 @@
3
3
 
4
4
 
5
5
 
6
+
6
7
  .video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control {
7
8
  height: 0.7em !important;
8
9
  position: absolute !important;
@@ -204,32 +205,31 @@
204
205
  .video-js .vjs-control-bar .vjs-subs-caps-button .vjs-menu .vjs-selected {
205
206
  text-decoration: underline;
206
207
  }
207
-
208
- .video-js.skin_news_live .vjs-button>.vjs-icon-placeholder:before {
208
+ .video-js.skin_news .vjs-button>.vjs-icon-placeholder:before {
209
209
  font-size: 2.2em;
210
210
  line-height: 2.6;
211
211
  }
212
- .video-js.skin_news_live .vjs-custom-big-mute.vjs-control{
213
- background: #fcb700;
212
+ .video-js.skin_news .vjs-custom-big-mute.vjs-control{
213
+ background: white;
214
214
  }
215
- .video-js.skin_news_live .vjs-control-bar{
215
+ .video-js.skin_news .vjs-control-bar{
216
216
  z-index: 1 !important;
217
217
  height: 5em !important;
218
218
  background: black !important;
219
219
  }
220
- .video-js.skin_news_live .vjs-playback-rate .vjs-playback-rate-value{
220
+ .video-js.skin_news .vjs-playback-rate .vjs-playback-rate-value{
221
221
  display: flex;
222
222
  align-items: center;
223
223
  justify-content: center;
224
224
  }
225
225
 
226
- .video-js.skin_news_live .vjs-fade>* {
226
+ .video-js.skin_news .vjs-fade>* {
227
227
  visibility: hidden !important;
228
228
  opacity: 0 !important;
229
229
  transition: visibility 1s, opacity 1s !important;
230
230
  }
231
231
 
232
- .video-js.skin_news_live .custom-spaced-progress-bar {
232
+ .video-js.skin_news .custom-spaced-progress-bar {
233
233
  position: absolute;
234
234
  width: 100%;
235
235
  display: flex;
@@ -237,7 +237,7 @@
237
237
  top: -0.5em;
238
238
  }
239
239
 
240
- .video-js.skin_news_live .vjs-progress-control {
240
+ .video-js.skin_news .vjs-progress-control {
241
241
  /* left: -6px; */
242
242
  position: relative;
243
243
  width: 100%;
@@ -245,25 +245,22 @@
245
245
  transition: height 0.1s, top 0.1s;
246
246
  }
247
247
 
248
- .video-js.skin_news_live .vjs-volume-panel{
249
- min-width: 5.3em;
250
- }
251
248
 
252
249
 
253
250
 
254
- .video-js.skin_news_live .vjs-custom-control-spacer {
255
- /* display: block; */
256
- /* flex: 1 1 auto; */
251
+ .video-js.skin_news .vjs-custom-control-spacer {
252
+ display: block;
253
+ flex: 1 1 auto;
257
254
  }
258
255
 
259
- .video-js.skin_news_live .vjs-progress-control .vjs-progress-holder {
256
+ .video-js.skin_news .vjs-progress-control .vjs-progress-holder {
260
257
  margin: 0 0px 0 0px;
261
258
  }
262
- .video-js.skin_news_live .vjs-remaining-time.vjs-time-control.vjs-control{
259
+ .video-js.skin_news .vjs-remaining-time.vjs-time-control.vjs-control{
263
260
  display: none;
264
261
  }
265
262
 
266
- .video-js.skin_news_live button.vjs-control.vjs-button.vjs-slowmo-button {
263
+ .video-js.skin_news button.vjs-control.vjs-button.vjs-slowmo-button {
267
264
  font-size: 14px;
268
265
  font-weight: 500;
269
266
  align-self: center;
@@ -272,30 +269,30 @@
272
269
  border-radius: 8px;
273
270
  }
274
271
 
275
- .video-js.skin_news_live .vjs-progress-control .vjs-progress-holder{
272
+ .video-js.skin_news .vjs-progress-control .vjs-progress-holder{
276
273
  height: 6px !important;
277
274
  }
278
275
 
279
- .video-js.skin_news_live .vjs-play-progress:before {
276
+ .video-js.skin_news .vjs-play-progress:before {
280
277
  font-size: 1.5em;
281
278
  line-height: unset;
282
279
  top: -0.3333333333em;
283
280
  }
284
281
 
285
- .video-js.skin_news_live .vjs-play-progress .vjs-time-tooltip {
282
+ .video-js.skin_news .vjs-play-progress .vjs-time-tooltip {
286
283
  display: none !important;
287
284
  }
288
285
 
289
286
  /* */
290
- .video-js.skin_news_live .vjs-mouse-display{
287
+ .video-js.skin_news .vjs-mouse-display{
291
288
  font-size: 1.6666666667em;
292
289
  }
293
290
 
294
- .video-js.skin_news_live .vjs-progress-control:hover .vjs-progress-holder {
291
+ .video-js.skin_news .vjs-progress-control:hover .vjs-progress-holder {
295
292
  font-size: 1em !important;
296
293
  }
297
294
 
298
- .video-js.skin_news_live .vjs-button{
295
+ .video-js.skin_news .vjs-button{
299
296
  width: 5.3em;
300
297
  display: flex;
301
298
  align-items: center;
@@ -303,71 +300,63 @@
303
300
  }
304
301
 
305
302
 
306
- .video-js.skin_news_live .vjs-fullscreen .icon-minimize,
303
+ .video-js.skin_news .vjs-fullscreen .icon-minimize,
307
304
  .icon-maximize {
308
305
  display: block;
309
306
  height: 32px;
310
307
  }
311
308
 
312
- .video-js.skin_news_live .vjs-playback-rate .vjs-playback-rate-value{
309
+ .video-js.skin_news .vjs-playback-rate .vjs-playback-rate-value{
313
310
  line-height: 4;
314
311
  }
315
312
 
316
- .video-js.skin_news_live .vjs-fullscreen .icon-maximize,
313
+ .video-js.skin_news .vjs-fullscreen .icon-maximize,
317
314
  .icon-minimize {
318
315
  display: none;
319
316
  height: 32px;
320
317
  }
321
318
 
322
- .video-js.skin_news_live button.vjs-play-control.vjs-control.vjs-button{
319
+ .video-js.skin_news button.vjs-play-control.vjs-control.vjs-button{
323
320
  outline: none !important;
324
- /* flex: 1; */
325
- }
326
- .video-js.skin_news_live .vjs-play-toggle-container{
327
- display: flex;
328
- flex: 1;
329
- justify-content: center;
330
321
  }
331
-
332
-
333
- .video-js.skin_news_live .vjs-fullscreen-control .vjs-icon-placeholder:before,
322
+ .video-js.skin_news .vjs-fullscreen-control .vjs-icon-placeholder:before,
334
323
  .vjs-icon-fullscreen-enter:before {
335
324
  /* content: '' !important; */
336
325
  }
337
326
 
338
- .video-js.skin_news_live button.vjs-fullscreen-control.vjs-control.vjs-button {
327
+ .video-js.skin_news button.vjs-fullscreen-control.vjs-control.vjs-button {
339
328
  display: flex;
340
329
  justify-content: center;
341
330
  align-items: center;
342
331
  /* transform: rotate(90deg); */
343
332
  }
344
333
 
345
- .video-js.skin_news_live .vjs-subs-caps-button .vjs-icon-placeholder:before{
334
+ .video-js.skin_news .vjs-subs-caps-button .vjs-icon-placeholder:before{
346
335
  display: none;
347
336
  }
348
- .video-js.skin_news_live .vjs-volume-panel .vjs-volume-control{
337
+ .video-js.skin_news .vjs-volume-panel .vjs-volume-control{
349
338
  margin-left: -10px;
350
339
  }
351
340
 
352
- .video-js.skin_news_live .skipbtn:hover{
341
+ .video-js.skin_news .skipbtn:hover{
353
342
  cursor: pointer;
354
343
  }
355
344
 
356
- .video-js.skin_news_live .rewindbtn:hover{
345
+ .video-js.skin_news .rewindbtn:hover{
357
346
  cursor: pointer;
358
347
  }
359
348
 
360
- .video-js.skin_news_live .vjs-seek-to-live-control.vjs-control{
349
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control{
361
350
  position: relative;
362
351
  padding-left: 0;
363
352
  }
364
353
 
365
- .video-js.skin_news_live.vjs-seeking .vjs-big-play-button{
354
+ .video-js.skin_news.vjs-seeking .vjs-big-play-button{
366
355
  display: none !important;
367
356
  }
368
357
 
369
- .video-js.skin_news_live.vjs-paused .vjs-big-play-button {
370
- /* width: 90px;
358
+ .video-js.skin_news.vjs-paused .vjs-big-play-button {
359
+ width: 90px;
371
360
  height: 90px;
372
361
  display: flex;
373
362
  justify-content: center;
@@ -382,20 +371,19 @@
382
371
  font-size: 6em;
383
372
  line-height: 1.4em;
384
373
  border: 0.05em solid;
385
- color: inherit; */
386
- display: none !important;
374
+ color: inherit;
387
375
  }
388
- .video-js.skin_news_live .vjs-seek-to-live-control.vjs-control{
376
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge{
389
377
  font-weight: bold;
390
378
  }
391
379
 
392
- .video-js.skin_news_live .vjs-menu > ul.vjs-menu-content{
380
+ .video-js.skin_news .vjs-menu > ul.vjs-menu-content{
393
381
  bottom: 2.4em !important;
394
382
  right: -1em;
395
383
  z-index: 1;
396
384
  }
397
385
 
398
- .video-js.skin_news_live .vjs-chromecast-button .vjs-icon-placeholder {
386
+ .video-js.skin_news .vjs-chromecast-button .vjs-icon-placeholder {
399
387
  width: 24px !important;
400
388
  height: 24px !important;
401
389
  }
@@ -405,34 +393,34 @@
405
393
  }
406
394
 
407
395
 
408
- .video-js.skin_news_live button.vjs-rewind-button{
396
+ .video-js.skin_news button.vjs-rewind-button{
409
397
  cursor: pointer;
410
398
  }
411
399
 
412
- .video-js.skin_news_live .vjs-control-bar .vjs-current-time.vjs-time-control.vjs-control {
400
+ .video-js.skin_news .vjs-control-bar .vjs-current-time.vjs-time-control.vjs-control {
413
401
  padding-right: 0;
414
- display: none;
415
402
  }
416
403
 
417
- .video-js.skin_news_live .vjs-control-bar .vjs-duration.vjs-time-control.vjs-control {
404
+ .video-js.skin_news .vjs-control-bar .vjs-duration.vjs-time-control.vjs-control {
418
405
  padding-left: 0;
419
- display: none;
420
406
  }
421
407
 
422
- .video-js.skin_news_live .vjs-control-bar .vjs-time-control.vjs-time-divider {
408
+ .video-js.skin_news .vjs-control-bar .vjs-time-control.vjs-time-divider {
423
409
  padding-left: 0;
424
410
  padding-right: 0;
425
- display: none;
411
+ display: flex;
412
+ justify-content: center;
413
+ width: min-content;
426
414
  }
427
415
 
428
- .video-js.skin_news_live.vjs-live .vjs-control-bar .vjs-time-control {
416
+ .video-js.skin_news.vjs-live .vjs-control-bar .vjs-time-control {
429
417
  display: none
430
418
  }
431
- .video-js.skin_news_live.vjs-liveui .vjs-control-bar .vjs-time-control {
419
+ .video-js.skin_news.vjs-liveui .vjs-control-bar .vjs-time-control {
432
420
  display: none
433
421
  }
434
422
 
435
- .video-js.skin_news_live .vjs-control-bar .vjs-time-control {
423
+ .video-js.skin_news .vjs-control-bar .vjs-time-control {
436
424
  display: flex;
437
425
  align-items: center;
438
426
  font-weight: 700;
@@ -440,26 +428,26 @@
440
428
  min-width: 1.2em;
441
429
  }
442
430
 
443
- .video-js.skin_news_live .vjs-remaining-time.vjs-time-control.vjs-control {
431
+ .video-js.skin_news .vjs-remaining-time.vjs-time-control.vjs-control {
444
432
  display: none;
445
433
  font-size: 11px;
446
434
  justify-content: center;
447
435
  align-items: center;
448
436
  user-select: none;
449
437
  }
450
- .video-js.skin_news_live.vjs-live .vjs-remaining-time.vjs-time-control.vjs-control{
438
+ .video-js.skin_news.vjs-live .vjs-remaining-time.vjs-time-control.vjs-control{
451
439
  display: none;
452
440
  }
453
441
 
454
- .video-js.skin_news_live button.vjs-subs-caps-button.vjs-menu-button.vjs-menu-button-popup.vjs-button{
442
+ .video-js.skin_news button.vjs-subs-caps-button.vjs-menu-button.vjs-menu-button-popup.vjs-button{
455
443
  height: min-content;
456
444
  width: min-content;
457
445
  }
458
- .video-js.skin_news_live .vjs-volume-panel.vjs-volume-panel-vertical{
446
+ .video-js.skin_news .vjs-volume-panel.vjs-volume-panel-vertical{
459
447
  width: 6em;
460
448
  }
461
449
 
462
- .video-js.skin_news_live .content{
450
+ .video-js.skin_news .content{
463
451
  bottom: 3.4rem !important;
464
452
  right: -4rem !important;
465
453
  }
@@ -478,16 +466,15 @@
478
466
  pointer-events:none
479
467
  }
480
468
 
481
- .video-js.skin_news_live iframe{
469
+ .video-js.skin_news iframe{
482
470
  width: 100%;
483
471
  height: 100%;
484
472
  }
485
473
 
486
- .video-js.skin_news_live .vjs-live-control{
474
+ .video-js.skin_news .vjs-live-control{
487
475
  align-items: center;
488
- display: none;
489
476
  }
490
- .video-js.skin_news_live .vjs-live-control.vjs-control .vjs-live-display{
477
+ .video-js.skin_news .vjs-live-control.vjs-control .vjs-live-display{
491
478
  height: 2.2em;
492
479
  display: flex;
493
480
  align-items: center;
@@ -498,22 +485,43 @@
498
485
  margin: 4px 0px 4px 12px;
499
486
  }
500
487
 
501
- .video-js.skin_news_live .vjs-seek-to-live-control.vjs-control:focus{
488
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control:focus{
502
489
  text-shadow: none;
503
490
  }
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
+ }
504
495
 
505
- .video-js.skin_news_live .vjs-control-bar .vjs-seek-to-live-control.vjs-control{
506
- display: flex;
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; */
507
501
  justify-content: center;
508
- min-width: 5.3em;
509
- pointer-events: none;
510
- user-select: none;
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";
511
516
  }
512
517
 
513
- .video-js.skin_news_live .vjs-seek-to-live-control.vjs-control .vjs-icon-placeholder::before{
514
- color: white;
518
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder:hover{
519
+ opacity: 1;
515
520
  }
516
521
 
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
+ }
517
525
 
518
526
  .settings-selection.vjs-control.vjs-button{
519
527
  display: flex !important;
@@ -530,57 +538,57 @@
530
538
  .tvProviderImage{
531
539
  display: none
532
540
  }
533
- .video-js.skin_news_live .vjs-fullscreen .icon-minimize,
541
+ .video-js.skin_news .vjs-fullscreen .icon-minimize,
534
542
  .icon-maximize {
535
543
  height: 30px !important;
536
544
  }
537
545
 
538
- .video-js.skin_news_live .vjs-fullscreen .icon-maximize,
546
+ .video-js.skin_news .vjs-fullscreen .icon-maximize,
539
547
  .icon-minimize {
540
548
  height: 30px !important;
541
549
  }
542
- .video-js.skin_news_live .vjs-volume-panel.vjs-volume-panel-vertical{
550
+ .video-js.skin_news .vjs-volume-panel.vjs-volume-panel-vertical{
543
551
  width: 4.5em;
544
552
  }
545
- .video-js.skin_news_live button.vjs-fullscreen-control.vjs-control.vjs-button>span.vjs-icon-placeholder::before {
553
+ .video-js.skin_news button.vjs-fullscreen-control.vjs-control.vjs-button>span.vjs-icon-placeholder::before {
546
554
  height: min-content;
547
555
  }
548
556
 
549
- .video-js.skin_news_live button.vjs-slowmo-button{
557
+ .video-js.skin_news button.vjs-slowmo-button{
550
558
  display: none;
551
559
  }
552
- .video-js.skin_news_live button.vjs-rewind-button{
560
+ .video-js.skin_news button.vjs-rewind-button{
553
561
  display: none;
554
562
  }
555
- .video-js.skin_news_live button.vjs-rewind-button>svg{
563
+ .video-js.skin_news button.vjs-rewind-button>svg{
556
564
  height: 20px;
557
565
  }
558
- .video-js.skin_news_live .vjs-button{
566
+ .video-js.skin_news .vjs-button{
559
567
  width: 4.8em;
560
568
  }
561
- .video-js.skin_news_live .widget-selection{
569
+ .video-js.skin_news .widget-selection{
562
570
  display: none;
563
571
  }
564
- .video-js.skin_news_live .container{
572
+ .video-js.skin_news .container{
565
573
  display: none !important;
566
574
  }
567
- .video-js.skin_news_live .vjs-control-bar{
575
+ .video-js.skin_news .vjs-control-bar{
568
576
  height: 4em !important;
569
577
  }
570
- .video-js.skin_news_live .vjs-button>.vjs-icon-placeholder:before{
578
+ .video-js.skin_news .vjs-button>.vjs-icon-placeholder:before{
571
579
  font-size: 2.5em;
572
580
  line-height: 1.5;
573
581
  }
574
- .video-js.skin_news_live .vjs-play-progress:before {
582
+ .video-js.skin_news .vjs-play-progress:before {
575
583
  font-size: 1.2em;
576
584
  position: absolute;
577
585
  right: -0.5em;
578
586
  z-index: 1;
579
587
  }
580
- .video-js.skin_news_live button.vjs-skip-button>svg{
588
+ .video-js.skin_news button.vjs-skip-button>svg{
581
589
  height: 20px;
582
590
  }
583
- .video-js.skin_news_live button.vjs-big-play-button {
591
+ .video-js.skin_news button.vjs-big-play-button {
584
592
  width: 50px !important;
585
593
  height: 50px !important;
586
594
  font-size: 2.1rem !important;
@@ -590,17 +598,17 @@
590
598
  width: 24px;
591
599
  height: 24px;
592
600
  }
593
- .video-js.skin_news_live.vjs-live .vjs-progress-control .vjs-progress-holder{
601
+ .video-js.skin_news.vjs-live .vjs-progress-control .vjs-progress-holder{
594
602
  margin: 0 12px 0 12px;
595
603
  }
596
- .video-js.skin_news_live .vjs-seek-to-live-text{
604
+ .video-js.skin_news .vjs-seek-to-live-text{
597
605
  font-size: 12px;
598
606
  }
599
- .video-js.skin_news_live .vjs-progress-control .vjs-progress-holder {
607
+ .video-js.skin_news .vjs-progress-control .vjs-progress-holder {
600
608
  margin: 0 12px 0 12px;
601
609
  }
602
610
  }
603
- .video-js.skin_news_live.vjs-paused .vjs-big-play-button {
611
+ .video-js.skin_news.vjs-paused .vjs-big-play-button {
604
612
  width: 90px;
605
613
  height: 90px;
606
614
  display: flex;
@@ -617,7 +625,7 @@
617
625
  line-height: 1.4em;
618
626
  }
619
627
 
620
- .video-js.skin_news_live .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:hover .vjs-volume-control.vjs-control.vjs-volume-horizontal {
628
+ .video-js.skin_news .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:hover .vjs-volume-control.vjs-control.vjs-volume-horizontal {
621
629
  display: flex;
622
630
  justify-content: center;
623
631
  align-items: center;
@@ -625,22 +633,29 @@
625
633
  transition: width 0.1s;
626
634
  }
627
635
 
628
- .video-js.skin_news_live .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal .vjs-volume-control.vjs-control.vjs-volume-horizontal {
636
+ .video-js.skin_news .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:active .vjs-volume-control.vjs-control.vjs-volume-horizontal {
629
637
  display: flex;
630
638
  justify-content: center;
631
639
  align-items: center;
632
640
  height: 100%;
633
641
  transition: width 0.1s;
634
642
  }
635
- .video-js.skin_news_live.vjs-fullscreen .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
643
+ .video-js.skin_news.vjs-fullscreen .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
636
644
  display: none !important;
637
645
  }
646
+ .video-js.skin_news .ssai-ad-container{
647
+ position: absolute;
648
+ bottom: 14px;
649
+ }
638
650
 
639
651
  @media (max-width: 576px) {
640
- .video-js.skin_news_live .vjs-progress-control .vjs-progress-holder{
652
+ .video-js.skin_news .ssai-ad-container{
653
+ bottom: 2px;
654
+ }
655
+ .video-js.skin_news .vjs-progress-control .vjs-progress-holder{
641
656
  height: 5px !important;
642
657
  }
643
- .video-js.skin_news_live button.vjs-big-play-button {
658
+ .video-js.skin_news button.vjs-big-play-button {
644
659
  width: 50px !important;
645
660
  height: 50px !important;
646
661
  font-size: 2.1rem !important;
@@ -649,69 +664,100 @@
649
664
  .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
650
665
  display: none;
651
666
  }
652
- .video-js.skin_news_live .vjs-menu > ul.vjs-menu-content {
667
+ .video-js.skin_news .vjs-menu > ul.vjs-menu-content {
653
668
  bottom: 2.4em !important;
654
669
  right: -1em;
655
670
  z-index: 1;
656
671
  }
657
- .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
672
+ .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
658
673
  display: none !important;
659
674
  }
660
675
 
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;
661
687
  }
662
688
 
663
- .video-js.skin_news_live .vjs-text-track-display-ttml {
664
- width: 100% !important;
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;
665
691
  }
666
692
 
667
- .video-js.skin_news_live .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
668
- .video-js.skin_news_live .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
693
+ .video-js.skin_news .vjs-text-track-display-ttml p {
694
+ font-size: 18px !important;
695
+ }
696
+
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 {
669
700
  font-size: 1.2em !important;
670
701
  line-height: 1.5em !important;
671
702
  padding: 0.2em 0.8em !important;
672
703
  }
673
704
 
674
- .video-js.skin_news_live .vjs-control-bar .vjs-svg-icon{
705
+ .video-js.skin_news .vjs-control-bar .vjs-svg-icon{
675
706
  content: none !important;
676
707
  fill: none !important;
677
708
  filter: none !important;
678
709
  }
679
710
 
680
- .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
681
- color: rgba(255, 255, 2555, 0.7)!important;
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;
682
714
  }
683
715
 
684
- .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
685
- color: rgba(255, 255, 2555, 1)!important;
716
+ .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button:hover svg {
717
+ opacity: 1 !important;
718
+ }
719
+ .video-js.skin_news .vjs-control-bar .vjs-remaining-time.vjs-time-control.vjs-control{
720
+ opacity: 0.7 !important;
721
+ }
722
+ .video-js.skin_news .vjs-control-bar .vjs-remaining-time.vjs-time-control.vjs-control:hover{
723
+ opacity: 1 !important;
686
724
  }
687
725
 
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;
728
+ }
729
+
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;
732
+ }
688
733
 
689
734
 
690
- .video-js.skin_news .vjs-button>.vjs-icon-placeholder:before {
735
+
736
+ .video-js.skin_news_live .vjs-button>.vjs-icon-placeholder:before {
691
737
  font-size: 2.2em;
692
738
  line-height: 2.6;
693
739
  }
694
- .video-js.skin_news .vjs-custom-big-mute.vjs-control{
695
- background: white;
740
+ .video-js.skin_news_live .vjs-custom-big-mute.vjs-control{
741
+ background: #fcb700;
696
742
  }
697
- .video-js.skin_news .vjs-control-bar{
743
+ .video-js.skin_news_live .vjs-control-bar{
698
744
  z-index: 1 !important;
699
745
  height: 5em !important;
700
746
  background: black !important;
701
747
  }
702
- .video-js.skin_news .vjs-playback-rate .vjs-playback-rate-value{
748
+ .video-js.skin_news_live .vjs-playback-rate .vjs-playback-rate-value{
703
749
  display: flex;
704
750
  align-items: center;
705
751
  justify-content: center;
706
752
  }
707
753
 
708
- .video-js.skin_news .vjs-fade>* {
754
+ .video-js.skin_news_live .vjs-fade>* {
709
755
  visibility: hidden !important;
710
756
  opacity: 0 !important;
711
757
  transition: visibility 1s, opacity 1s !important;
712
758
  }
713
759
 
714
- .video-js.skin_news .custom-spaced-progress-bar {
760
+ .video-js.skin_news_live .custom-spaced-progress-bar {
715
761
  position: absolute;
716
762
  width: 100%;
717
763
  display: flex;
@@ -719,7 +765,7 @@
719
765
  top: -0.5em;
720
766
  }
721
767
 
722
- .video-js.skin_news .vjs-progress-control {
768
+ .video-js.skin_news_live .vjs-progress-control {
723
769
  /* left: -6px; */
724
770
  position: relative;
725
771
  width: 100%;
@@ -727,22 +773,25 @@
727
773
  transition: height 0.1s, top 0.1s;
728
774
  }
729
775
 
776
+ .video-js.skin_news_live .vjs-volume-panel{
777
+ min-width: 5.3em;
778
+ }
730
779
 
731
780
 
732
781
 
733
- .video-js.skin_news .vjs-custom-control-spacer {
734
- display: block;
735
- flex: 1 1 auto;
782
+ .video-js.skin_news_live .vjs-custom-control-spacer {
783
+ /* display: block; */
784
+ /* flex: 1 1 auto; */
736
785
  }
737
786
 
738
- .video-js.skin_news .vjs-progress-control .vjs-progress-holder {
787
+ .video-js.skin_news_live .vjs-progress-control .vjs-progress-holder {
739
788
  margin: 0 0px 0 0px;
740
789
  }
741
- .video-js.skin_news .vjs-remaining-time.vjs-time-control.vjs-control{
790
+ .video-js.skin_news_live .vjs-remaining-time.vjs-time-control.vjs-control{
742
791
  display: none;
743
792
  }
744
793
 
745
- .video-js.skin_news button.vjs-control.vjs-button.vjs-slowmo-button {
794
+ .video-js.skin_news_live button.vjs-control.vjs-button.vjs-slowmo-button {
746
795
  font-size: 14px;
747
796
  font-weight: 500;
748
797
  align-self: center;
@@ -751,30 +800,30 @@
751
800
  border-radius: 8px;
752
801
  }
753
802
 
754
- .video-js.skin_news .vjs-progress-control .vjs-progress-holder{
803
+ .video-js.skin_news_live .vjs-progress-control .vjs-progress-holder{
755
804
  height: 6px !important;
756
805
  }
757
806
 
758
- .video-js.skin_news .vjs-play-progress:before {
807
+ .video-js.skin_news_live .vjs-play-progress:before {
759
808
  font-size: 1.5em;
760
809
  line-height: unset;
761
810
  top: -0.3333333333em;
762
811
  }
763
812
 
764
- .video-js.skin_news .vjs-play-progress .vjs-time-tooltip {
813
+ .video-js.skin_news_live .vjs-play-progress .vjs-time-tooltip {
765
814
  display: none !important;
766
815
  }
767
816
 
768
817
  /* */
769
- .video-js.skin_news .vjs-mouse-display{
818
+ .video-js.skin_news_live .vjs-mouse-display{
770
819
  font-size: 1.6666666667em;
771
820
  }
772
821
 
773
- .video-js.skin_news .vjs-progress-control:hover .vjs-progress-holder {
822
+ .video-js.skin_news_live .vjs-progress-control:hover .vjs-progress-holder {
774
823
  font-size: 1em !important;
775
824
  }
776
825
 
777
- .video-js.skin_news .vjs-button{
826
+ .video-js.skin_news_live .vjs-button{
778
827
  width: 5.3em;
779
828
  display: flex;
780
829
  align-items: center;
@@ -782,63 +831,71 @@
782
831
  }
783
832
 
784
833
 
785
- .video-js.skin_news .vjs-fullscreen .icon-minimize,
834
+ .video-js.skin_news_live .vjs-fullscreen .icon-minimize,
786
835
  .icon-maximize {
787
836
  display: block;
788
837
  height: 32px;
789
838
  }
790
839
 
791
- .video-js.skin_news .vjs-playback-rate .vjs-playback-rate-value{
840
+ .video-js.skin_news_live .vjs-playback-rate .vjs-playback-rate-value{
792
841
  line-height: 4;
793
842
  }
794
843
 
795
- .video-js.skin_news .vjs-fullscreen .icon-maximize,
844
+ .video-js.skin_news_live .vjs-fullscreen .icon-maximize,
796
845
  .icon-minimize {
797
846
  display: none;
798
847
  height: 32px;
799
848
  }
800
849
 
801
- .video-js.skin_news button.vjs-play-control.vjs-control.vjs-button{
850
+ .video-js.skin_news_live button.vjs-play-control.vjs-control.vjs-button{
802
851
  outline: none !important;
852
+ /* flex: 1; */
803
853
  }
804
- .video-js.skin_news .vjs-fullscreen-control .vjs-icon-placeholder:before,
854
+ .video-js.skin_news_live .vjs-play-toggle-container{
855
+ display: flex;
856
+ flex: 1;
857
+ justify-content: center;
858
+ }
859
+
860
+
861
+ .video-js.skin_news_live .vjs-fullscreen-control .vjs-icon-placeholder:before,
805
862
  .vjs-icon-fullscreen-enter:before {
806
863
  /* content: '' !important; */
807
864
  }
808
865
 
809
- .video-js.skin_news button.vjs-fullscreen-control.vjs-control.vjs-button {
866
+ .video-js.skin_news_live button.vjs-fullscreen-control.vjs-control.vjs-button {
810
867
  display: flex;
811
868
  justify-content: center;
812
869
  align-items: center;
813
870
  /* transform: rotate(90deg); */
814
871
  }
815
872
 
816
- .video-js.skin_news .vjs-subs-caps-button .vjs-icon-placeholder:before{
873
+ .video-js.skin_news_live .vjs-subs-caps-button .vjs-icon-placeholder:before{
817
874
  display: none;
818
875
  }
819
- .video-js.skin_news .vjs-volume-panel .vjs-volume-control{
876
+ .video-js.skin_news_live .vjs-volume-panel .vjs-volume-control{
820
877
  margin-left: -10px;
821
878
  }
822
879
 
823
- .video-js.skin_news .skipbtn:hover{
880
+ .video-js.skin_news_live .skipbtn:hover{
824
881
  cursor: pointer;
825
882
  }
826
883
 
827
- .video-js.skin_news .rewindbtn:hover{
884
+ .video-js.skin_news_live .rewindbtn:hover{
828
885
  cursor: pointer;
829
886
  }
830
887
 
831
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control{
888
+ .video-js.skin_news_live .vjs-seek-to-live-control.vjs-control{
832
889
  position: relative;
833
890
  padding-left: 0;
834
891
  }
835
892
 
836
- .video-js.skin_news.vjs-seeking .vjs-big-play-button{
893
+ .video-js.skin_news_live.vjs-seeking .vjs-big-play-button{
837
894
  display: none !important;
838
895
  }
839
896
 
840
- .video-js.skin_news.vjs-paused .vjs-big-play-button {
841
- width: 90px;
897
+ .video-js.skin_news_live.vjs-paused .vjs-big-play-button {
898
+ /* width: 90px;
842
899
  height: 90px;
843
900
  display: flex;
844
901
  justify-content: center;
@@ -853,19 +910,20 @@
853
910
  font-size: 6em;
854
911
  line-height: 1.4em;
855
912
  border: 0.05em solid;
856
- color: inherit;
913
+ color: inherit; */
914
+ display: none !important;
857
915
  }
858
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge{
916
+ .video-js.skin_news_live .vjs-seek-to-live-control.vjs-control{
859
917
  font-weight: bold;
860
918
  }
861
919
 
862
- .video-js.skin_news .vjs-menu > ul.vjs-menu-content{
920
+ .video-js.skin_news_live .vjs-menu > ul.vjs-menu-content{
863
921
  bottom: 2.4em !important;
864
922
  right: -1em;
865
923
  z-index: 1;
866
924
  }
867
925
 
868
- .video-js.skin_news .vjs-chromecast-button .vjs-icon-placeholder {
926
+ .video-js.skin_news_live .vjs-chromecast-button .vjs-icon-placeholder {
869
927
  width: 24px !important;
870
928
  height: 24px !important;
871
929
  }
@@ -875,34 +933,34 @@
875
933
  }
876
934
 
877
935
 
878
- .video-js.skin_news button.vjs-rewind-button{
936
+ .video-js.skin_news_live button.vjs-rewind-button{
879
937
  cursor: pointer;
880
938
  }
881
939
 
882
- .video-js.skin_news .vjs-control-bar .vjs-current-time.vjs-time-control.vjs-control {
940
+ .video-js.skin_news_live .vjs-control-bar .vjs-current-time.vjs-time-control.vjs-control {
883
941
  padding-right: 0;
942
+ display: none;
884
943
  }
885
944
 
886
- .video-js.skin_news .vjs-control-bar .vjs-duration.vjs-time-control.vjs-control {
945
+ .video-js.skin_news_live .vjs-control-bar .vjs-duration.vjs-time-control.vjs-control {
887
946
  padding-left: 0;
947
+ display: none;
888
948
  }
889
949
 
890
- .video-js.skin_news .vjs-control-bar .vjs-time-control.vjs-time-divider {
950
+ .video-js.skin_news_live .vjs-control-bar .vjs-time-control.vjs-time-divider {
891
951
  padding-left: 0;
892
952
  padding-right: 0;
893
- display: flex;
894
- justify-content: center;
895
- width: min-content;
953
+ display: none;
896
954
  }
897
955
 
898
- .video-js.skin_news.vjs-live .vjs-control-bar .vjs-time-control {
956
+ .video-js.skin_news_live.vjs-live .vjs-control-bar .vjs-time-control {
899
957
  display: none
900
958
  }
901
- .video-js.skin_news.vjs-liveui .vjs-control-bar .vjs-time-control {
959
+ .video-js.skin_news_live.vjs-liveui .vjs-control-bar .vjs-time-control {
902
960
  display: none
903
961
  }
904
962
 
905
- .video-js.skin_news .vjs-control-bar .vjs-time-control {
963
+ .video-js.skin_news_live .vjs-control-bar .vjs-time-control {
906
964
  display: flex;
907
965
  align-items: center;
908
966
  font-weight: 700;
@@ -910,26 +968,26 @@
910
968
  min-width: 1.2em;
911
969
  }
912
970
 
913
- .video-js.skin_news .vjs-remaining-time.vjs-time-control.vjs-control {
971
+ .video-js.skin_news_live .vjs-remaining-time.vjs-time-control.vjs-control {
914
972
  display: none;
915
973
  font-size: 11px;
916
974
  justify-content: center;
917
975
  align-items: center;
918
976
  user-select: none;
919
977
  }
920
- .video-js.skin_news.vjs-live .vjs-remaining-time.vjs-time-control.vjs-control{
978
+ .video-js.skin_news_live.vjs-live .vjs-remaining-time.vjs-time-control.vjs-control{
921
979
  display: none;
922
980
  }
923
981
 
924
- .video-js.skin_news button.vjs-subs-caps-button.vjs-menu-button.vjs-menu-button-popup.vjs-button{
982
+ .video-js.skin_news_live button.vjs-subs-caps-button.vjs-menu-button.vjs-menu-button-popup.vjs-button{
925
983
  height: min-content;
926
984
  width: min-content;
927
985
  }
928
- .video-js.skin_news .vjs-volume-panel.vjs-volume-panel-vertical{
986
+ .video-js.skin_news_live .vjs-volume-panel.vjs-volume-panel-vertical{
929
987
  width: 6em;
930
988
  }
931
989
 
932
- .video-js.skin_news .content{
990
+ .video-js.skin_news_live .content{
933
991
  bottom: 3.4rem !important;
934
992
  right: -4rem !important;
935
993
  }
@@ -948,15 +1006,16 @@
948
1006
  pointer-events:none
949
1007
  }
950
1008
 
951
- .video-js.skin_news iframe{
1009
+ .video-js.skin_news_live iframe{
952
1010
  width: 100%;
953
1011
  height: 100%;
954
1012
  }
955
1013
 
956
- .video-js.skin_news .vjs-live-control{
1014
+ .video-js.skin_news_live .vjs-live-control{
957
1015
  align-items: center;
1016
+ display: none;
958
1017
  }
959
- .video-js.skin_news .vjs-live-control.vjs-control .vjs-live-display{
1018
+ .video-js.skin_news_live .vjs-live-control.vjs-control .vjs-live-display{
960
1019
  height: 2.2em;
961
1020
  display: flex;
962
1021
  align-items: center;
@@ -967,43 +1026,22 @@
967
1026
  margin: 4px 0px 4px 12px;
968
1027
  }
969
1028
 
970
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control:focus{
1029
+ .video-js.skin_news_live .vjs-seek-to-live-control.vjs-control:focus{
971
1030
  text-shadow: none;
972
1031
  }
973
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-seek-to-live-text {
974
- display: none;
975
- font-size: 12px;
976
- }
977
1032
 
978
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder {
979
- height: 2.2em;
980
- display: inline-flex;
981
- align-items: center;
982
- /* font-family: monospace; */
1033
+ .video-js.skin_news_live .vjs-control-bar .vjs-seek-to-live-control.vjs-control{
1034
+ display: flex;
983
1035
  justify-content: center;
984
- border: 2px solid;
985
- margin: 4px 0px 4px 6px;
986
- white-space: pre;
987
- padding: 0px 6px;
988
- font-size: 1.2em;
989
- font-weight: 500;
990
- color: rgba(255, 255, 2555, 0.7);
991
-
992
- letter-spacing: -.1px;
993
- line-height: normal;
994
- text-transform: uppercase;
995
- color: #FFFFFF;
996
- opacity: .7;
997
- font-family: "Proxima Nova";
1036
+ min-width: 5.3em;
1037
+ pointer-events: none;
1038
+ user-select: none;
998
1039
  }
999
1040
 
1000
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder:hover{
1001
- opacity: 1;
1041
+ .video-js.skin_news_live .vjs-seek-to-live-control.vjs-control .vjs-icon-placeholder::before{
1042
+ color: white;
1002
1043
  }
1003
1044
 
1004
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder::before {
1005
- content: "NOT LIVE";
1006
- }
1007
1045
 
1008
1046
  .settings-selection.vjs-control.vjs-button{
1009
1047
  display: flex !important;
@@ -1020,57 +1058,57 @@
1020
1058
  .tvProviderImage{
1021
1059
  display: none
1022
1060
  }
1023
- .video-js.skin_news .vjs-fullscreen .icon-minimize,
1061
+ .video-js.skin_news_live .vjs-fullscreen .icon-minimize,
1024
1062
  .icon-maximize {
1025
1063
  height: 30px !important;
1026
1064
  }
1027
1065
 
1028
- .video-js.skin_news .vjs-fullscreen .icon-maximize,
1066
+ .video-js.skin_news_live .vjs-fullscreen .icon-maximize,
1029
1067
  .icon-minimize {
1030
1068
  height: 30px !important;
1031
1069
  }
1032
- .video-js.skin_news .vjs-volume-panel.vjs-volume-panel-vertical{
1070
+ .video-js.skin_news_live .vjs-volume-panel.vjs-volume-panel-vertical{
1033
1071
  width: 4.5em;
1034
1072
  }
1035
- .video-js.skin_news button.vjs-fullscreen-control.vjs-control.vjs-button>span.vjs-icon-placeholder::before {
1073
+ .video-js.skin_news_live button.vjs-fullscreen-control.vjs-control.vjs-button>span.vjs-icon-placeholder::before {
1036
1074
  height: min-content;
1037
1075
  }
1038
1076
 
1039
- .video-js.skin_news button.vjs-slowmo-button{
1077
+ .video-js.skin_news_live button.vjs-slowmo-button{
1040
1078
  display: none;
1041
1079
  }
1042
- .video-js.skin_news button.vjs-rewind-button{
1080
+ .video-js.skin_news_live button.vjs-rewind-button{
1043
1081
  display: none;
1044
1082
  }
1045
- .video-js.skin_news button.vjs-rewind-button>svg{
1083
+ .video-js.skin_news_live button.vjs-rewind-button>svg{
1046
1084
  height: 20px;
1047
1085
  }
1048
- .video-js.skin_news .vjs-button{
1086
+ .video-js.skin_news_live .vjs-button{
1049
1087
  width: 4.8em;
1050
1088
  }
1051
- .video-js.skin_news .widget-selection{
1089
+ .video-js.skin_news_live .widget-selection{
1052
1090
  display: none;
1053
1091
  }
1054
- .video-js.skin_news .container{
1092
+ .video-js.skin_news_live .container{
1055
1093
  display: none !important;
1056
1094
  }
1057
- .video-js.skin_news .vjs-control-bar{
1095
+ .video-js.skin_news_live .vjs-control-bar{
1058
1096
  height: 4em !important;
1059
1097
  }
1060
- .video-js.skin_news .vjs-button>.vjs-icon-placeholder:before{
1098
+ .video-js.skin_news_live .vjs-button>.vjs-icon-placeholder:before{
1061
1099
  font-size: 2.5em;
1062
1100
  line-height: 1.5;
1063
1101
  }
1064
- .video-js.skin_news .vjs-play-progress:before {
1102
+ .video-js.skin_news_live .vjs-play-progress:before {
1065
1103
  font-size: 1.2em;
1066
1104
  position: absolute;
1067
1105
  right: -0.5em;
1068
1106
  z-index: 1;
1069
1107
  }
1070
- .video-js.skin_news button.vjs-skip-button>svg{
1108
+ .video-js.skin_news_live button.vjs-skip-button>svg{
1071
1109
  height: 20px;
1072
1110
  }
1073
- .video-js.skin_news button.vjs-big-play-button {
1111
+ .video-js.skin_news_live button.vjs-big-play-button {
1074
1112
  width: 50px !important;
1075
1113
  height: 50px !important;
1076
1114
  font-size: 2.1rem !important;
@@ -1080,17 +1118,17 @@
1080
1118
  width: 24px;
1081
1119
  height: 24px;
1082
1120
  }
1083
- .video-js.skin_news.vjs-live .vjs-progress-control .vjs-progress-holder{
1121
+ .video-js.skin_news_live.vjs-live .vjs-progress-control .vjs-progress-holder{
1084
1122
  margin: 0 12px 0 12px;
1085
1123
  }
1086
- .video-js.skin_news .vjs-seek-to-live-text{
1124
+ .video-js.skin_news_live .vjs-seek-to-live-text{
1087
1125
  font-size: 12px;
1088
1126
  }
1089
- .video-js.skin_news .vjs-progress-control .vjs-progress-holder {
1127
+ .video-js.skin_news_live .vjs-progress-control .vjs-progress-holder {
1090
1128
  margin: 0 12px 0 12px;
1091
1129
  }
1092
1130
  }
1093
- .video-js.skin_news.vjs-paused .vjs-big-play-button {
1131
+ .video-js.skin_news_live.vjs-paused .vjs-big-play-button {
1094
1132
  width: 90px;
1095
1133
  height: 90px;
1096
1134
  display: flex;
@@ -1107,7 +1145,7 @@
1107
1145
  line-height: 1.4em;
1108
1146
  }
1109
1147
 
1110
- .video-js.skin_news .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:hover .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1148
+ .video-js.skin_news_live .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:hover .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1111
1149
  display: flex;
1112
1150
  justify-content: center;
1113
1151
  align-items: center;
@@ -1115,29 +1153,22 @@
1115
1153
  transition: width 0.1s;
1116
1154
  }
1117
1155
 
1118
- .video-js.skin_news .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:active .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1156
+ .video-js.skin_news_live .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1119
1157
  display: flex;
1120
1158
  justify-content: center;
1121
1159
  align-items: center;
1122
1160
  height: 100%;
1123
1161
  transition: width 0.1s;
1124
1162
  }
1125
- .video-js.skin_news.vjs-fullscreen .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
1163
+ .video-js.skin_news_live.vjs-fullscreen .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
1126
1164
  display: none !important;
1127
1165
  }
1128
- .video-js.skin_news .ssai-ad-container{
1129
- position: absolute;
1130
- bottom: 14px;
1131
- }
1132
1166
 
1133
1167
  @media (max-width: 576px) {
1134
- .video-js.skin_news .ssai-ad-container{
1135
- bottom: 2px;
1136
- }
1137
- .video-js.skin_news .vjs-progress-control .vjs-progress-holder{
1168
+ .video-js.skin_news_live .vjs-progress-control .vjs-progress-holder{
1138
1169
  height: 5px !important;
1139
1170
  }
1140
- .video-js.skin_news button.vjs-big-play-button {
1171
+ .video-js.skin_news_live button.vjs-big-play-button {
1141
1172
  width: 50px !important;
1142
1173
  height: 50px !important;
1143
1174
  font-size: 2.1rem !important;
@@ -1146,75 +1177,377 @@
1146
1177
  .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
1147
1178
  display: none;
1148
1179
  }
1149
- .video-js.skin_news .vjs-menu > ul.vjs-menu-content {
1180
+ .video-js.skin_news_live .vjs-menu > ul.vjs-menu-content {
1150
1181
  bottom: 2.4em !important;
1151
1182
  right: -1em;
1152
1183
  z-index: 1;
1153
1184
  }
1154
- .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
1185
+ .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
1155
1186
  display: none !important;
1156
1187
  }
1157
1188
 
1158
- .video-js.skin_news .vjs-text-track-display-ttml span {
1159
- color: white;
1160
- font-size: 13px;
1161
- background-color: black;
1162
- }
1163
1189
  }
1164
1190
 
1165
- .video-js.skin_news .vjs-text-track-display-ttml span {
1166
- color: white;
1167
- font-size: 16px;
1168
- background-color: black;
1191
+ .video-js.skin_news_live .vjs-text-track-display-ttml {
1192
+ width: 100% !important;
1169
1193
  }
1170
1194
 
1171
- .video-js.skin_news.vjs-has-started.vjs-user-active.vjs-controls-enabled .vjs-text-track-display-ttml p {
1172
- margin-bottom: 2rem !important;
1195
+ .video-js.skin_news_live .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
1196
+ .video-js.skin_news_live .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
1197
+ font-size: 1.2em !important;
1198
+ line-height: 1.5em !important;
1199
+ padding: 0.2em 0.8em !important;
1173
1200
  }
1174
1201
 
1175
- .video-js.skin_news .vjs-text-track-display-ttml p {
1176
- font-size: 18px !important;
1202
+ .video-js.skin_news_live .vjs-control-bar .vjs-svg-icon{
1203
+ content: none !important;
1204
+ fill: none !important;
1205
+ filter: none !important;
1177
1206
  }
1178
1207
 
1208
+ .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
1209
+ color: rgba(255, 255, 2555, 0.7)!important;
1210
+ }
1179
1211
 
1180
- .video-js.skin_news .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
1181
- .video-js.skin_news .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
1182
- font-size: 1.2em !important;
1183
- line-height: 1.5em !important;
1184
- padding: 0.2em 0.8em !important;
1212
+ .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
1213
+ color: rgba(255, 255, 2555, 1)!important;
1185
1214
  }
1186
1215
 
1187
- .video-js.skin_news .vjs-control-bar .vjs-svg-icon{
1216
+
1217
+
1218
+
1219
+ .video-js.skin_cn_news .vjs-control-bar {
1220
+ z-index: 1 !important;
1221
+ height: auto !important;
1222
+ padding: 0.8em 30px 0.6em;
1223
+ background: transparent !important;
1224
+ display: flex;
1225
+ flex-wrap: wrap;
1226
+ align-items: center;
1227
+ column-gap: 10px;
1228
+ }
1229
+
1230
+
1231
+ .video-js.skin_cn_news .vjs-control-bar::before {
1232
+ content: '';
1233
+ position: absolute;
1234
+ left: 0;
1235
+ right: 0;
1236
+ bottom: 0;
1237
+ top: -3em;
1238
+ background: linear-gradient(
1239
+ to top,
1240
+ rgba(0, 0, 0, 0.85) 0%,
1241
+ rgba(0, 0, 0, 0.7) 40%,
1242
+ rgba(0, 0, 0, 0.55) 70%,
1243
+ rgba(0, 0, 0, 0.38) 86%,
1244
+ transparent 100%
1245
+ );
1246
+ pointer-events: none;
1247
+ z-index: -1;
1248
+ }
1249
+
1250
+ .video-js.skin_cn_news .vjs-control-bar .vjs-progress-control {
1251
+ order: -1;
1252
+ flex: 0 0 100%;
1253
+ width: 80%;
1254
+ margin: 0 0 5em;
1255
+ position: relative;
1256
+ }
1257
+
1258
+ .video-js.skin_cn_news .vjs-control-bar > .vjs-control,
1259
+ .video-js.skin_cn_news .vjs-control-bar > .vjs-button {
1260
+ width: auto;
1261
+ min-width: 0;
1262
+ }
1263
+ .video-js.skin_cn_news .vjs-control-bar .vjs-button {
1264
+ display: inline-flex;
1265
+ align-items: center;
1266
+ justify-content: center;
1267
+ height: 7em;
1268
+ padding: 0 10px;
1269
+ color: #fff;
1270
+ }
1271
+
1272
+ .video-js.skin_cn_news .vjs-svg-icon::before {
1188
1273
  content: none !important;
1189
- fill: none !important;
1190
- filter: none !important;
1191
1274
  }
1192
1275
 
1193
- /* svg icons opacity and hover effect */
1194
- .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button svg {
1195
- opacity: 0.7 !important;
1276
+
1277
+ .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon {
1278
+ display: inline-flex;
1279
+ align-items: center;
1280
+ justify-content: center;
1281
+ }
1282
+ .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon svg,
1283
+ .video-js.skin_cn_news .vjs-rewind-button svg {
1284
+ width: 24px;
1285
+ height: 24px;
1286
+ display: block;
1196
1287
  }
1197
1288
 
1198
- .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button:hover svg {
1199
- opacity: 1 !important;
1289
+
1290
+
1291
+ .video-js.skin_cn_news .vjs-subs-caps-button {
1292
+ opacity: 1;
1293
+ }
1294
+
1295
+
1296
+
1297
+ .video-js.skin_cn_news .vjs-volume-panel {
1298
+ margin: 0;
1299
+ display: inline-flex;
1300
+ align-items: center;
1301
+ align-self: center;
1302
+ height: 2.2em;
1303
+ min-width: 7em;
1304
+ transition: none;
1305
+ }
1306
+ .video-js.skin_cn_news .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
1307
+ width: 0;
1308
+ height: 100%;
1309
+ display: flex;
1310
+ align-items: center;
1311
+ overflow: hidden;
1312
+ opacity: 0;
1313
+ transition: width 0.15s ease, opacity 0.15s ease;
1314
+ }
1315
+ .video-js.skin_cn_news .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal,
1316
+ .video-js.skin_cn_news .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
1317
+ .video-js.skin_cn_news .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal,
1318
+ .video-js.skin_cn_news .vjs-volume-panel:focus-within .vjs-volume-control.vjs-volume-horizontal {
1319
+ width: 5em;
1320
+ opacity: 1;
1321
+ }
1322
+
1323
+ .video-js.skin_cn_news .vjs-volume-bar {
1324
+ width: 4em;
1325
+ height: 0.3em;
1326
+ margin: 0 0.45em;
1327
+ }
1328
+
1329
+
1330
+ .video-js.skin_cn_news .vjs-volume-control .vjs-mouse-display {
1331
+ display: none !important;
1332
+ }
1333
+
1334
+ .video-js.skin_cn_news .vjs-mute-control.vjs-vol-0 ~ .vjs-volume-control .vjs-volume-level {
1335
+ width: 0 !important;
1336
+ }
1337
+
1338
+
1339
+ .video-js.skin_cn_news .vjs-custom-control-spacer {
1340
+ display: block !important;
1341
+ flex: 1 1 auto;
1342
+ }
1343
+
1344
+
1345
+ .video-js.skin_cn_news .vjs-big-play-button {
1346
+ display: none;
1347
+ }
1348
+ .video-js.skin_cn_news .vjs-big-play-button .vjs-icon-placeholder:before {
1349
+ position: relative !important;
1350
+ display: flex;
1351
+ left: 0;
1352
+ top: -1px;
1353
+ }
1354
+ .video-js.skin_cn_news.vjs-paused:not(.vjs-seeking):not(.vjs-ended) .vjs-big-play-button {
1355
+ display: flex;
1356
+ justify-content: center;
1357
+ align-items: center;
1358
+ position: absolute;
1359
+ top: 0;
1360
+ left: 0;
1361
+ right: 0;
1362
+ bottom: 0;
1363
+ margin: auto;
1364
+ width: 80px;
1365
+ height: 80px;
1366
+ border: none;
1367
+ border-radius: 50%;
1368
+ background: rgba(0, 0, 0, 0.55);
1369
+ font-size: 5em;
1370
+ line-height: 1.3em;
1371
+ transform: none !important;
1372
+ }
1373
+
1374
+
1375
+ .video-js.skin_cn_news .vjs-progress-control .vjs-progress-holder {
1376
+ height: 4px !important;
1377
+ margin: 0;
1378
+ border-radius: 20px;
1379
+ background-color: #393944;
1380
+ }
1381
+
1382
+ .video-js.skin_cn_news .vjs-play-progress {
1383
+ background-color: #ffffff;
1384
+ border-radius: 20px;
1385
+ }
1386
+
1387
+ .video-js.skin_cn_news .vjs-load-progress,
1388
+ .video-js.skin_cn_news .vjs-load-progress div {
1389
+ background: rgba(255, 255, 255, 0.15);
1390
+ border-radius: 20px;
1391
+ }
1392
+
1393
+
1394
+ .video-js.skin_cn_news .vjs-play-progress:before {
1395
+ content: '';
1396
+ width: 16px;
1397
+ height: 16px;
1398
+ border-radius: 50%;
1399
+ background: #ffffff;
1400
+ border: 2px solid rgba(0, 0, 0, 0.6);
1401
+ box-sizing: border-box;
1402
+ box-shadow: 0 0 0 2px #ffffff, 0 0 3px rgba(0, 0, 0, 0.45);
1403
+ top: -6px;
1404
+ right: -8px;
1405
+ position: absolute;
1406
+ }
1407
+ .video-js.skin_cn_news .vjs-play-progress .vjs-time-tooltip {
1408
+ display: none !important;
1409
+ }
1410
+
1411
+ .video-js.skin_cn_news .vjs-mouse-display .vjs-time-tooltip {
1412
+ background: #ffffff;
1413
+ color: #0a0e17;
1414
+ font-weight: 700;
1415
+ border-radius: 3px;
1416
+ }
1417
+
1418
+ .video-js.skin_cn_news .vjs-live-control {
1419
+ display: none !important;
1420
+ }
1421
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-control {
1422
+ display: inline-flex;
1423
+ align-items: center;
1424
+ align-self: center;
1425
+ height: 2.2em;
1426
+ gap: 5px;
1427
+ width: auto;
1428
+ padding: 0 10px;
1429
+ border: 1px solid rgba(255, 255, 255, 0.45);
1430
+ border-radius: 4px;
1431
+ cursor: pointer;
1432
+ }
1433
+
1434
+ .video-js.skin_cn_news .vjs-seek-to-live-control .vjs-icon-placeholder {
1435
+ display: none;
1436
+ }
1437
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder {
1438
+ display: inline-flex;
1439
+ align-items: center;
1440
+ }
1441
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder::before {
1442
+ content: '';
1443
+ display: inline-block;
1444
+ width: 8px;
1445
+ height: 8px;
1446
+ border-radius: 50%;
1447
+ background: #ff2d2d; /* red live dot */
1448
+ }
1449
+ .video-js.skin_cn_news .vjs-seek-to-live-text {
1450
+ color: #ffffff;
1451
+ font-weight: 700;
1452
+ font-size: 12px;
1453
+ letter-spacing: 0.03em;
1454
+ }
1455
+
1456
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge {
1457
+ border-color: transparent;
1458
+ }
1459
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-seek-to-live-text {
1460
+ color: #ff2d2d;
1461
+ }
1462
+
1463
+ /* ---- time controls ---- */
1464
+ .video-js.skin_cn_news .vjs-current-time,
1465
+ .video-js.skin_cn_news .vjs-duration,
1466
+ .video-js.skin_cn_news .vjs-time-divider {
1467
+ display: none !important;
1468
+ }
1469
+ .video-js.skin_cn_news .vjs-remaining-time.vjs-time-control.vjs-control {
1470
+ display: none;
1471
+ align-items: center;
1472
+ justify-content: center;
1473
+ font-size: 11px;
1474
+ font-weight: 700;
1475
+ color: #fff;
1476
+ padding: 0 6px;
1477
+ user-select: none;
1478
+ }
1479
+
1480
+
1481
+ .video-js.skin_cn_news .vjs-chapter-marker {
1482
+ z-index: 2;
1483
+ width: var(--vl-chapter-size, 8px);
1484
+ height: var(--vl-chapter-size, 8px);
1485
+ top: 50%;
1486
+ bottom: auto;
1487
+ background: var(--vl-chapter-color, #ffffff);
1488
+ opacity: var(--vl-chapter-opacity, 1);
1489
+ border-radius: 50%;
1490
+ box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); /* keep white dots visible on the white bar */
1491
+ transform: translate(-50%, -50%) scale(1);
1492
+ transition: background-color 0.12s ease;
1493
+ }
1494
+ .video-js.skin_cn_news .vjs-chapter-marker:hover {
1495
+ background: var(--vl-chapter-hover, #0a5cff);
1496
+ }
1497
+ .video-js.skin_cn_news .vjs-chapter-marker.vjs-chapter-marker--active {
1498
+ background: var(--vl-chapter-active, #0a5cff);
1499
+ }
1500
+
1501
+
1502
+ .video-js.skin_cn_news .vjs-chapter-marker .vjs-chapter-marker__icon {
1503
+ width: 16px;
1504
+ height: 16px;
1505
+ bottom: 160%;
1506
+ filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
1507
+ }
1508
+
1509
+
1510
+ .video-js.skin_cn_news .vjs-chapter-preview {
1511
+ background: var(--vl-chapter-tooltip, #0a5cff);
1512
+ border-radius: 6px;
1513
+ padding: 8px 10px;
1514
+ width: max-content;
1515
+ max-width: 300px;
1516
+ text-align: left;
1517
+ box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
1200
1518
  }
1201
- .video-js.skin_news .vjs-control-bar .vjs-remaining-time.vjs-time-control.vjs-control{
1202
- opacity: 0.7 !important;
1519
+ .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__time {
1520
+ color: #ffffff;
1521
+ font-size: 13px;
1522
+ font-weight: 400;
1523
+ margin-bottom: 2px;
1203
1524
  }
1204
- .video-js.skin_news .vjs-control-bar .vjs-remaining-time.vjs-time-control.vjs-control:hover{
1205
- opacity: 1 !important;
1525
+ .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__label {
1526
+ color: #ffffff;
1527
+ font-size: 13px;
1528
+ font-weight: 400;
1529
+ line-height: 1.3;
1530
+ white-space: normal;
1531
+ text-align: left;
1206
1532
  }
1207
-
1208
- .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
1209
- color: rgba(255, 255, 2555, 0.7)!important;
1533
+ .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__pointer {
1534
+ border-top-color: var(--vl-chapter-tooltip, #0a5cff);
1210
1535
  }
1211
1536
 
1212
- .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
1213
- color: rgba(255, 255, 2555, 1)!important;
1537
+ /* ---- responsive ---- */
1538
+ @media (max-width: 576px) {
1539
+ .video-js.skin_cn_news .vjs-control-bar {
1540
+ height: 3.2em !important;
1541
+ padding: 0 8px;
1542
+ }
1543
+ .video-js.skin_cn_news .vjs-control-bar .vjs-button {
1544
+ padding: 0 6px;
1545
+ }
1546
+ .video-js.skin_cn_news .vjs-control.vjs-button.vjs-picture-in-picture-control {
1547
+ display: none !important;
1548
+ }
1214
1549
  }
1215
1550
 
1216
-
1217
-
1218
1551
  .video-js.skin_mini .vjs-button>.vjs-icon-placeholder:before {
1219
1552
  font-size: 2.2em;
1220
1553
  line-height: 2.6;
@@ -1588,436 +1921,103 @@
1588
1921
  right: -0.5em;
1589
1922
  z-index: 1;
1590
1923
  }
1591
- .video-js.skin_mini button.vjs-skip-button>svg{
1592
- height: 20px;
1593
- }
1594
-
1595
- .stream-selector-icon>svg{
1596
- width: 24px;
1597
- height: 24px;
1598
- }
1599
- .video-js.skin_mini .vjs-seek-to-live-text{
1600
- font-size: 12px;
1601
- }
1602
- }
1603
-
1604
-
1605
- .video-js.skin_mini .vjs-text-track-display-ttml span {
1606
- background-color: rgba(0, 0, 0, 0.2);
1607
- }
1608
-
1609
-
1610
- .video-js.skin_mini .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:hover .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1611
- display: flex;
1612
- justify-content: center;
1613
- align-items: center;
1614
- height: 100%;
1615
- transition: width 0.1s;
1616
- }
1617
- .video-js.skin_mini .vjs-track-settings-colors fieldset.vjs-fg.vjs-track-setting{
1618
- margin: 2px;
1619
- }
1620
-
1621
- .video-js.skin_mini .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:active .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1622
- display: flex;
1623
- justify-content: center;
1624
- align-items: center;
1625
- height: 100%;
1626
- transition: width 0.1s;
1627
- }
1628
-
1629
- .video-js.skin_mini .vjs-text-track-settings .vjs-modal-dialog-content{
1630
- display: block;
1631
- font-size: 10px;
1632
- padding: 6px 10px;
1633
- margin: 0;
1634
- max-height: 100%;
1635
- overflow-y: auto;
1636
- }
1637
- .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-colors,
1638
- .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-font,
1639
- .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-controls{
1640
- display: block;
1641
- width: 100%;
1642
- }
1643
- .video-js.skin_mini .vjs-text-track-settings fieldset{
1644
- margin: 4px 0;
1645
- }
1646
- .video-js.skin_mini .vjs-text-track-settings fieldset span{
1647
- display: block;
1648
- padding: 0 0 6px;
1649
- }
1650
- .video-js.skin_mini .vjs-text-track-settings fieldset span > select{
1651
- max-width: 100%;
1652
- }
1653
-
1654
- @media (max-width: 600px) {
1655
- .video-js.skin_mini .vjs-progress-control .vjs-progress-holder{
1656
- height: 5px !important;
1657
- }
1658
-
1659
- .video-js.skin_mini .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
1660
- display: none;
1661
- }
1662
-
1663
- }
1664
-
1665
- .video-js.skin_mini .vjs-control-bar .vjs-svg-icon{
1666
- content: none !important;
1667
- fill: none !important;
1668
- filter: none !important;
1669
- }
1670
-
1671
- /* svg icons opacity and hover effect */
1672
- .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button svg {
1673
- opacity: 0.7 !important;
1674
- }
1675
-
1676
- .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button:hover svg {
1677
- opacity: 1 !important;
1678
- }
1679
-
1680
- .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
1681
- color: rgba(255, 255, 2555, 0.7)!important;
1682
- }
1683
-
1684
- .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
1685
- color: rgba(255, 255, 2555, 1)!important;
1686
- }
1687
-
1688
-
1689
-
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;
1699
- }
1700
-
1701
-
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;
1719
- }
1720
-
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;
1727
- }
1728
-
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;
1733
- }
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;
1741
- }
1742
-
1743
- .video-js.skin_cn_news .vjs-svg-icon::before {
1744
- content: none !important;
1745
- }
1746
-
1747
-
1748
- .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon {
1749
- display: inline-flex;
1750
- align-items: center;
1751
- justify-content: center;
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
- }
1759
-
1760
-
1761
-
1762
- .video-js.skin_cn_news .vjs-subs-caps-button {
1763
- opacity: 1;
1764
- }
1765
-
1766
-
1767
-
1768
- .video-js.skin_cn_news .vjs-volume-panel {
1769
- margin: 0;
1770
- display: inline-flex;
1771
- align-items: center;
1772
- align-self: center;
1773
- height: 2.2em;
1774
- min-width: 7em;
1775
- transition: none;
1776
- }
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;
1785
- }
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;
1792
- }
1793
-
1794
- .video-js.skin_cn_news .vjs-volume-bar {
1795
- width: 4em;
1796
- height: 0.3em;
1797
- margin: 0 0.45em;
1798
- }
1799
-
1800
-
1801
- .video-js.skin_cn_news .vjs-volume-control .vjs-mouse-display {
1802
- display: none !important;
1924
+ .video-js.skin_mini button.vjs-skip-button>svg{
1925
+ height: 20px;
1803
1926
  }
1804
1927
 
1805
- .video-js.skin_cn_news .vjs-mute-control.vjs-vol-0 ~ .vjs-volume-control .vjs-volume-level {
1806
- width: 0 !important;
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;
1934
+ }
1807
1935
  }
1808
1936
 
1809
1937
 
1810
- .video-js.skin_cn_news .vjs-custom-control-spacer {
1811
- display: block !important;
1812
- flex: 1 1 auto;
1938
+ .video-js.skin_mini .vjs-text-track-display-ttml span {
1939
+ background-color: rgba(0, 0, 0, 0.2);
1813
1940
  }
1814
1941
 
1815
1942
 
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;
1943
+ .video-js.skin_mini .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:hover .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1821
1944
  display: flex;
1822
- left: 0;
1823
- top: -1px;
1945
+ justify-content: center;
1946
+ align-items: center;
1947
+ height: 100%;
1948
+ transition: width 0.1s;
1824
1949
  }
1825
- .video-js.skin_cn_news.vjs-paused:not(.vjs-seeking):not(.vjs-ended) .vjs-big-play-button {
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 {
1826
1955
  display: flex;
1827
1956
  justify-content: center;
1828
1957
  align-items: center;
1829
- position: absolute;
1830
- top: 0;
1831
- left: 0;
1832
- right: 0;
1833
- bottom: 0;
1834
- margin: auto;
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;
1841
- line-height: 1.3em;
1842
- transform: none !important;
1958
+ height: 100%;
1959
+ transition: width 0.1s;
1843
1960
  }
1844
1961
 
1845
-
1846
- .video-js.skin_cn_news .vjs-progress-control .vjs-progress-holder {
1847
- height: 4px !important;
1962
+ .video-js.skin_mini .vjs-text-track-settings .vjs-modal-dialog-content{
1963
+ display: block;
1964
+ font-size: 10px;
1965
+ padding: 6px 10px;
1848
1966
  margin: 0;
1849
- border-radius: 20px;
1850
- background-color: #393944;
1967
+ max-height: 100%;
1968
+ overflow-y: auto;
1851
1969
  }
1852
-
1853
- .video-js.skin_cn_news .vjs-play-progress {
1854
- background-color: #ffffff;
1855
- border-radius: 20px;
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%;
1856
1975
  }
1857
-
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;
1976
+ .video-js.skin_mini .vjs-text-track-settings fieldset{
1977
+ margin: 4px 0;
1862
1978
  }
1863
-
1864
-
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;
1979
+ .video-js.skin_mini .vjs-text-track-settings fieldset span{
1980
+ display: block;
1981
+ padding: 0 0 6px;
1877
1982
  }
1878
- .video-js.skin_cn_news .vjs-play-progress .vjs-time-tooltip {
1879
- display: none !important;
1983
+ .video-js.skin_mini .vjs-text-track-settings fieldset span > select{
1984
+ max-width: 100%;
1880
1985
  }
1881
1986
 
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;
1887
- }
1987
+ @media (max-width: 600px) {
1988
+ .video-js.skin_mini .vjs-progress-control .vjs-progress-holder{
1989
+ height: 5px !important;
1990
+ }
1888
1991
 
1889
- .video-js.skin_cn_news .vjs-live-control {
1890
- display: none !important;
1891
- }
1892
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-control {
1893
- display: inline-flex;
1894
- align-items: center;
1895
- align-self: center;
1896
- height: 2.2em;
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;
1903
- }
1992
+ .video-js.skin_mini .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
1993
+ display: none;
1994
+ }
1904
1995
 
1905
- .video-js.skin_cn_news .vjs-seek-to-live-control .vjs-icon-placeholder {
1906
- display: none;
1907
- }
1908
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder {
1909
- display: inline-flex;
1910
- align-items: center;
1911
- }
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 */
1919
- }
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;
1925
1996
  }
1926
1997
 
1927
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge {
1928
- border-color: transparent;
1929
- }
1930
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-seek-to-live-text {
1931
- color: #ff2d2d;
1998
+ .video-js.skin_mini .vjs-control-bar .vjs-svg-icon{
1999
+ content: none !important;
2000
+ fill: none !important;
2001
+ filter: none !important;
1932
2002
  }
1933
2003
 
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;
1939
- }
1940
- .video-js.skin_cn_news .vjs-remaining-time.vjs-time-control.vjs-control {
1941
- display: none;
1942
- align-items: center;
1943
- justify-content: center;
1944
- font-size: 11px;
1945
- font-weight: 700;
1946
- color: #fff;
1947
- padding: 0 6px;
1948
- user-select: none;
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;
1949
2007
  }
1950
2008
 
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;
1964
- }
1965
- .video-js.skin_cn_news .vjs-chapter-marker:hover {
1966
- background: var(--vl-chapter-hover, #0a5cff);
1967
- }
1968
- .video-js.skin_cn_news .vjs-chapter-marker.vjs-chapter-marker--active {
1969
- background: var(--vl-chapter-active, #0a5cff);
2009
+ .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button:hover svg {
2010
+ opacity: 1 !important;
1970
2011
  }
1971
2012
 
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));
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;
1978
2015
  }
1979
2016
 
1980
-
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);
1989
- }
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;
1995
- }
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;
2003
- }
2004
- .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__pointer {
2005
- border-top-color: var(--vl-chapter-tooltip, #0a5cff);
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;
2006
2019
  }
2007
2020
 
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,8 +2199,6 @@
2199
2199
 
2200
2200
 
2201
2201
 
2202
-
2203
-
2204
2202
  .video-js .multicamera-parent.default{
2205
2203
  height: 345px;
2206
2204
  position: absolute;
@@ -2279,6 +2277,10 @@
2279
2277
  align-content: baseline;
2280
2278
  }
2281
2279
 
2280
+
2281
+
2282
+
2283
+
2282
2284
  .vjs-custom-big-mute.vjs-control{
2283
2285
  position: absolute;
2284
2286
  align-items: center;
@@ -2328,8 +2330,6 @@
2328
2330
  }
2329
2331
 
2330
2332
 
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) {
@@ -2714,6 +2714,15 @@
2714
2714
  -webkit-animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite;
2715
2715
  animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite;
2716
2716
  }
2717
+
2718
+ .video-js.vjs-quality-menu .vjs-quality-menu-wrapper .vjs-menu .vjs-menu-content {
2719
+ scrollbar-width: none;
2720
+ -ms-overflow-style: none;
2721
+ }
2722
+
2723
+ .video-js.vjs-quality-menu .vjs-quality-menu-wrapper .vjs-menu .vjs-menu-content::-webkit-scrollbar{
2724
+ display: none;
2725
+ }
2717
2726
  .vjs-poster {
2718
2727
  display: inline-block;
2719
2728
  vertical-align: middle;