@viewlift/player-backup 2.0.347-backup → 2.0.348-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.
package/cjs/bundle.css CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
 
4
4
 
5
+
6
+
5
7
  .video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control {
6
8
  height: 0.7em !important;
7
9
  position: absolute !important;
@@ -203,28 +205,31 @@
203
205
  .video-js .vjs-control-bar .vjs-subs-caps-button .vjs-menu .vjs-selected {
204
206
  text-decoration: underline;
205
207
  }
206
-
207
-
208
- .video-js.skin_mini .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_mini{
213
- overflow: hidden;
212
+ .video-js.skin_news .vjs-custom-big-mute.vjs-control{
213
+ background: white;
214
214
  }
215
- .video-js.skin_mini .vjs-control-bar{
215
+ .video-js.skin_news .vjs-control-bar{
216
216
  z-index: 1 !important;
217
- height: 4em !important;
217
+ height: 5em !important;
218
218
  background: black !important;
219
219
  }
220
+ .video-js.skin_news .vjs-playback-rate .vjs-playback-rate-value{
221
+ display: flex;
222
+ align-items: center;
223
+ justify-content: center;
224
+ }
220
225
 
221
- .video-js.skin_mini .vjs-fade>* {
226
+ .video-js.skin_news .vjs-fade>* {
222
227
  visibility: hidden !important;
223
228
  opacity: 0 !important;
224
229
  transition: visibility 1s, opacity 1s !important;
225
230
  }
226
231
 
227
- .video-js.skin_mini .custom-spaced-progress-bar {
232
+ .video-js.skin_news .custom-spaced-progress-bar {
228
233
  position: absolute;
229
234
  width: 100%;
230
235
  display: flex;
@@ -232,7 +237,7 @@
232
237
  top: -0.5em;
233
238
  }
234
239
 
235
- .video-js.skin_mini .vjs-progress-control {
240
+ .video-js.skin_news .vjs-progress-control {
236
241
  /* left: -6px; */
237
242
  position: relative;
238
243
  width: 100%;
@@ -243,19 +248,19 @@
243
248
 
244
249
 
245
250
 
246
- .video-js.skin_mini .vjs-custom-control-spacer {
251
+ .video-js.skin_news .vjs-custom-control-spacer {
247
252
  display: block;
248
253
  flex: 1 1 auto;
249
254
  }
250
255
 
251
- .video-js.skin_mini .vjs-progress-control .vjs-progress-holder {
256
+ .video-js.skin_news .vjs-progress-control .vjs-progress-holder {
252
257
  margin: 0 0px 0 0px;
253
258
  }
254
- .video-js.skin_mini .vjs-remaining-time.vjs-time-control.vjs-control{
259
+ .video-js.skin_news .vjs-remaining-time.vjs-time-control.vjs-control{
255
260
  display: none;
256
261
  }
257
262
 
258
- .video-js.skin_mini button.vjs-control.vjs-button.vjs-slowmo-button {
263
+ .video-js.skin_news button.vjs-control.vjs-button.vjs-slowmo-button {
259
264
  font-size: 14px;
260
265
  font-weight: 500;
261
266
  align-self: center;
@@ -264,158 +269,143 @@
264
269
  border-radius: 8px;
265
270
  }
266
271
 
267
- .video-js.skin_mini .vjs-progress-control .vjs-progress-holder{
268
- height: 5px !important;
272
+ .video-js.skin_news .vjs-progress-control .vjs-progress-holder{
273
+ height: 6px !important;
269
274
  }
270
275
 
271
- .video-js.skin_mini .vjs-play-progress:before {
272
- font-size: 1.3em;
276
+ .video-js.skin_news .vjs-play-progress:before {
277
+ font-size: 1.5em;
273
278
  line-height: unset;
274
279
  top: -0.3333333333em;
275
280
  }
276
281
 
277
- .video-js.skin_mini .vjs-play-progress .vjs-time-tooltip {
282
+ .video-js.skin_news .vjs-play-progress .vjs-time-tooltip {
278
283
  display: none !important;
279
284
  }
280
285
 
281
286
  /* */
282
- .video-js.skin_mini .vjs-mouse-display{
287
+ .video-js.skin_news .vjs-mouse-display{
283
288
  font-size: 1.6666666667em;
284
289
  }
285
290
 
286
- .video-js.skin_mini .vjs-progress-control:hover .vjs-progress-holder {
291
+ .video-js.skin_news .vjs-progress-control:hover .vjs-progress-holder {
287
292
  font-size: 1em !important;
288
293
  }
289
294
 
290
- .video-js.skin_mini .vjs-button{
291
- width: 3em;
295
+ .video-js.skin_news .vjs-button{
296
+ width: 5.3em;
292
297
  display: flex;
293
298
  align-items: center;
294
299
  justify-content: center;
295
300
  }
296
301
 
297
302
 
298
- .video-js.skin_mini .vjs-fullscreen .icon-minimize,
303
+ .video-js.skin_news .vjs-fullscreen .icon-minimize,
299
304
  .icon-maximize {
300
305
  display: block;
301
306
  height: 32px;
302
307
  }
303
308
 
304
- .video-js.skin_mini .vjs-playback-rate .vjs-playback-rate-value{
309
+ .video-js.skin_news .vjs-playback-rate .vjs-playback-rate-value{
305
310
  line-height: 4;
306
311
  }
307
312
 
308
- .video-js.skin_mini .vjs-fullscreen .icon-maximize,
313
+ .video-js.skin_news .vjs-fullscreen .icon-maximize,
309
314
  .icon-minimize {
310
315
  display: none;
311
316
  height: 32px;
312
317
  }
313
318
 
314
- .video-js.skin_mini button.vjs-play-control.vjs-control.vjs-button{
319
+ .video-js.skin_news button.vjs-play-control.vjs-control.vjs-button{
315
320
  outline: none !important;
316
321
  }
317
- .video-js.skin_mini .vjs-fullscreen-control .vjs-icon-placeholder:before,
322
+ .video-js.skin_news .vjs-fullscreen-control .vjs-icon-placeholder:before,
318
323
  .vjs-icon-fullscreen-enter:before {
319
324
  /* content: '' !important; */
320
325
  }
321
326
 
322
- .video-js.skin_mini button.vjs-fullscreen-control.vjs-control.vjs-button {
327
+ .video-js.skin_news button.vjs-fullscreen-control.vjs-control.vjs-button {
323
328
  display: flex;
324
329
  justify-content: center;
325
330
  align-items: center;
326
331
  /* transform: rotate(90deg); */
327
332
  }
328
333
 
329
- .video-js.skin_mini .vjs-subs-caps-button .vjs-icon-placeholder:before{
334
+ .video-js.skin_news .vjs-subs-caps-button .vjs-icon-placeholder:before{
330
335
  display: none;
331
336
  }
332
- .video-js.skin_mini .vjs-volume-panel .vjs-volume-control{
337
+ .video-js.skin_news .vjs-volume-panel .vjs-volume-control{
333
338
  margin-left: -10px;
334
- display: none;
335
- }
336
-
337
- .video-js.skin_mini .vjs-loading-spinner {
338
- position: absolute;
339
- top: 50%;
340
- left: 50%;
341
- transform: translate(-50%, -50%);
342
- opacity: .85;
343
- text-align: left;
344
- border: .2em solid rgba(43, 51, 63, .7);
345
- box-sizing: border-box;
346
- background-clip: padding-box;
347
- width: 3em;
348
- height: 3em;
349
- border-radius: 50%;
350
- visibility: hidden;
351
339
  }
352
340
 
353
- .video-js.skin_mini .skipbtn:hover{
341
+ .video-js.skin_news .skipbtn:hover{
354
342
  cursor: pointer;
355
343
  }
356
344
 
357
- .video-js.skin_mini .rewindbtn:hover{
345
+ .video-js.skin_news .rewindbtn:hover{
358
346
  cursor: pointer;
359
347
  }
360
348
 
361
- .video-js.skin_mini .vjs-seek-to-live-control.vjs-control{
349
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control{
362
350
  position: relative;
363
351
  padding-left: 0;
364
352
  }
365
353
 
366
- .video-js.skin_mini.vjs-paused .vjs-big-play-button {
367
- width: 40px;
368
- height: 40px;
369
- display: flex;
370
- justify-content: center;
371
- align-items: center;
372
- border: none;
373
- position: absolute;
374
- top: 0;
375
- left: 0;
376
- right: 0;
377
- bottom: 0;
378
- margin: auto;
379
- font-size: 3em;
380
- line-height: 1.3em;
381
- transform: none !important;
382
- border-radius: 1.3em;
354
+ .video-js.skin_news.vjs-seeking .vjs-big-play-button{
355
+ display: none !important;
383
356
  }
384
357
 
385
- .video-js.skin_mini .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge{
358
+ .video-js.skin_news.vjs-paused .vjs-big-play-button {
359
+ width: 90px;
360
+ height: 90px;
361
+ display: flex;
362
+ justify-content: center;
363
+ align-items: center;
364
+ border-radius: 50%;
365
+ position: absolute;
366
+ top: 0;
367
+ left: 0;
368
+ right: 0;
369
+ bottom: 0;
370
+ margin: auto;
371
+ font-size: 6em;
372
+ line-height: 1.4em;
373
+ border: 0.05em solid;
374
+ color: inherit;
375
+ }
376
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge{
386
377
  font-weight: bold;
387
378
  }
388
379
 
389
- .video-js.skin_mini .vjs-menu > ul.vjs-menu-content{
390
- bottom: 1.1em !important;
391
- right: 1em;
380
+ .video-js.skin_news .vjs-menu > ul.vjs-menu-content{
381
+ bottom: 2.4em !important;
382
+ right: -1em;
392
383
  z-index: 1;
393
- font-size: 10px;
394
384
  }
395
385
 
396
- .video-js.skin_mini .vjs-chromecast-button .vjs-icon-placeholder {
386
+ .video-js.skin_news .vjs-chromecast-button .vjs-icon-placeholder {
397
387
  width: 24px !important;
398
388
  height: 24px !important;
399
389
  }
400
- .video-js.skin_mini .settings-selector-icon>svg{
390
+ .settings-selector-icon>svg{
401
391
  height: 19px !important;
402
392
  width: 19px !important;
403
393
  }
404
394
 
405
395
 
406
- .video-js.skin_mini button.vjs-rewind-button{
396
+ .video-js.skin_news button.vjs-rewind-button{
407
397
  cursor: pointer;
408
398
  }
409
399
 
410
- .video-js.skin_mini .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 {
411
401
  padding-right: 0;
412
402
  }
413
403
 
414
- .video-js.skin_mini .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 {
415
405
  padding-left: 0;
416
406
  }
417
407
 
418
- .video-js.skin_mini .vjs-control-bar .vjs-time-control.vjs-time-divider {
408
+ .video-js.skin_news .vjs-control-bar .vjs-time-control.vjs-time-divider {
419
409
  padding-left: 0;
420
410
  padding-right: 0;
421
411
  display: flex;
@@ -423,48 +413,46 @@
423
413
  width: min-content;
424
414
  }
425
415
 
426
- .video-js.skin_mini.vjs-live .vjs-control-bar .vjs-time-control {
416
+ .video-js.skin_news.vjs-live .vjs-control-bar .vjs-time-control {
427
417
  display: none
428
418
  }
429
- .video-js.skin_mini.vjs-liveui .vjs-control-bar .vjs-time-control {
419
+ .video-js.skin_news.vjs-liveui .vjs-control-bar .vjs-time-control {
430
420
  display: none
431
421
  }
432
422
 
433
- .video-js.skin_mini .vjs-control-bar .vjs-time-control {
434
- display: flex;
435
- align-items: center;
436
- font-weight: 700;
437
- font-size: 9px;
438
- min-width: 0.8em;
439
- padding-left: 0;
423
+ .video-js.skin_news .vjs-control-bar .vjs-time-control {
424
+ display: flex;
425
+ align-items: center;
426
+ font-weight: 700;
427
+ font-size: 12px;
428
+ min-width: 1.2em;
440
429
  }
441
430
 
442
- .video-js.skin_mini .vjs-remaining-time.vjs-time-control.vjs-control {
431
+ .video-js.skin_news .vjs-remaining-time.vjs-time-control.vjs-control {
443
432
  display: none;
444
433
  font-size: 11px;
445
434
  justify-content: center;
446
435
  align-items: center;
447
436
  user-select: none;
448
437
  }
449
- .video-js.skin_mini.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{
450
439
  display: none;
451
440
  }
452
441
 
453
- .video-js.skin_mini 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{
454
443
  height: min-content;
455
444
  width: min-content;
456
445
  }
457
- .video-js.skin_mini .vjs-volume-panel.vjs-volume-panel-vertical{
458
- width: 3em;
459
- margin-right: 4px;
446
+ .video-js.skin_news .vjs-volume-panel.vjs-volume-panel-vertical{
447
+ width: 6em;
460
448
  }
461
449
 
462
- .video-js.skin_mini .content{
450
+ .video-js.skin_news .content{
463
451
  bottom: 3.4rem !important;
464
452
  right: -4rem !important;
465
453
  }
466
454
 
467
- .video-js.skin_mini .setting-icon > svg{
455
+ .setting-icon > svg{
468
456
  height:18px !important;
469
457
  }
470
458
 
@@ -478,16 +466,15 @@
478
466
  pointer-events:none
479
467
  }
480
468
 
481
- .video-js.skin_mini iframe{
469
+ .video-js.skin_news iframe{
482
470
  width: 100%;
483
471
  height: 100%;
484
472
  }
485
473
 
486
- .video-js.skin_mini .vjs-live-control{
474
+ .video-js.skin_news .vjs-live-control{
487
475
  align-items: center;
488
- max-width: 5em;
489
476
  }
490
- .video-js.skin_mini .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;
@@ -495,715 +482,590 @@
495
482
  width: 4em;
496
483
  justify-content: center;
497
484
  background: red;
498
- margin: 4px 0px 4px 2px;
485
+ margin: 4px 0px 4px 12px;
499
486
  }
500
487
 
501
- .video-js.skin_mini .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
  }
504
- .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-seek-to-live-text {
491
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-seek-to-live-text {
505
492
  display: none;
506
493
  font-size: 12px;
507
494
  }
508
495
 
509
- .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder {
510
- height: 1.8em;
496
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder {
497
+ height: 2.2em;
511
498
  display: inline-flex;
512
499
  align-items: center;
513
- font-family: monospace;
500
+ /* font-family: monospace; */
514
501
  justify-content: center;
515
- border: 1.5px solid;
516
- margin: 4px 0px 4px 2px;
502
+ border: 2px solid;
503
+ margin: 4px 0px 4px 6px;
517
504
  white-space: pre;
518
- padding: 2px 4px;
505
+ padding: 0px 6px;
519
506
  font-size: 1.2em;
520
507
  font-weight: 500;
521
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";
522
516
  }
523
517
 
524
- .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder::before {
518
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder:hover{
519
+ opacity: 1;
520
+ }
521
+
522
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder::before {
525
523
  content: "NOT LIVE";
526
- word-spacing: -4px;
527
524
  }
528
525
 
526
+ .settings-selection.vjs-control.vjs-button{
527
+ display: flex !important;
528
+ }
529
529
 
530
- @media(max-width:600px){
530
+ @media(max-width:576px){
531
+ .settings-selection.vjs-control.vjs-button{
532
+ display: none !important;
533
+ }
534
+ }
535
+
536
+
537
+ @media(max-width:576px){
531
538
  .tvProviderImage{
532
539
  display: none
533
540
  }
534
- .video-js.skin_mini .vjs-fullscreen .icon-minimize,
541
+ .video-js.skin_news .vjs-fullscreen .icon-minimize,
535
542
  .icon-maximize {
536
543
  height: 30px !important;
537
544
  }
538
545
 
539
- .video-js.skin_mini .vjs-fullscreen .icon-maximize,
546
+ .video-js.skin_news .vjs-fullscreen .icon-maximize,
540
547
  .icon-minimize {
541
548
  height: 30px !important;
542
549
  }
543
- .video-js.skin_mini .vjs-volume-panel.vjs-volume-panel-vertical{
544
- width: 3.5em;
550
+ .video-js.skin_news .vjs-volume-panel.vjs-volume-panel-vertical{
551
+ width: 4.5em;
545
552
  }
546
- .video-js.skin_mini 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 {
547
554
  height: min-content;
548
555
  }
549
556
 
550
- .video-js.skin_mini button.vjs-slowmo-button{
557
+ .video-js.skin_news button.vjs-slowmo-button{
551
558
  display: none;
552
559
  }
553
- .video-js.skin_mini button.vjs-rewind-button{
560
+ .video-js.skin_news button.vjs-rewind-button{
554
561
  display: none;
555
562
  }
556
- .video-js.skin_mini button.vjs-rewind-button>svg{
563
+ .video-js.skin_news button.vjs-rewind-button>svg{
557
564
  height: 20px;
558
565
  }
559
- .video-js.skin_mini .vjs-button{
560
- width: 3em;
566
+ .video-js.skin_news .vjs-button{
567
+ width: 4.8em;
561
568
  }
562
- .video-js.skin_mini .widget-selection{
569
+ .video-js.skin_news .widget-selection{
563
570
  display: none;
564
571
  }
565
- .video-js.skin_mini .container{
572
+ .video-js.skin_news .container{
566
573
  display: none !important;
567
574
  }
568
- .video-js.skin_mini .vjs-control-bar{
575
+ .video-js.skin_news .vjs-control-bar{
569
576
  height: 4em !important;
570
577
  }
571
- .video-js.skin_mini .vjs-button>.vjs-icon-placeholder:before{
578
+ .video-js.skin_news .vjs-button>.vjs-icon-placeholder:before{
572
579
  font-size: 2.5em;
573
580
  line-height: 1.5;
574
581
  }
575
- .video-js.skin_mini .vjs-play-progress:before {
582
+ .video-js.skin_news .vjs-play-progress:before {
576
583
  font-size: 1.2em;
577
584
  position: absolute;
578
585
  right: -0.5em;
579
586
  z-index: 1;
580
587
  }
581
- .video-js.skin_mini button.vjs-skip-button>svg{
588
+ .video-js.skin_news button.vjs-skip-button>svg{
582
589
  height: 20px;
583
590
  }
591
+ .video-js.skin_news button.vjs-big-play-button {
592
+ width: 50px !important;
593
+ height: 50px !important;
594
+ font-size: 2.1rem !important;
595
+ }
584
596
 
585
597
  .stream-selector-icon>svg{
586
598
  width: 24px;
587
599
  height: 24px;
588
600
  }
589
- .video-js.skin_mini .vjs-seek-to-live-text{
601
+ .video-js.skin_news.vjs-live .vjs-progress-control .vjs-progress-holder{
602
+ margin: 0 12px 0 12px;
603
+ }
604
+ .video-js.skin_news .vjs-seek-to-live-text{
590
605
  font-size: 12px;
591
606
  }
607
+ .video-js.skin_news .vjs-progress-control .vjs-progress-holder {
608
+ margin: 0 12px 0 12px;
592
609
  }
593
-
594
-
595
- .video-js.skin_mini .vjs-text-track-display-ttml span {
596
- background-color: rgba(0, 0, 0, 0.2);
610
+ }
611
+ .video-js.skin_news.vjs-paused .vjs-big-play-button {
612
+ width: 90px;
613
+ height: 90px;
614
+ display: flex;
615
+ justify-content: center;
616
+ align-items: center;
617
+ border-radius: 50%;
618
+ position: absolute;
619
+ top: 0;
620
+ left: 0;
621
+ right: 0;
622
+ bottom: 0;
623
+ margin: auto;
624
+ font-size: 6em;
625
+ line-height: 1.4em;
597
626
  }
598
627
 
599
-
600
- .video-js.skin_mini .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 {
601
629
  display: flex;
602
630
  justify-content: center;
603
631
  align-items: center;
604
632
  height: 100%;
605
633
  transition: width 0.1s;
606
634
  }
607
- .video-js.skin_mini .vjs-track-settings-colors fieldset.vjs-fg.vjs-track-setting{
608
- margin: 2px;
609
- }
610
635
 
611
- .video-js.skin_mini .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:active .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 {
612
637
  display: flex;
613
638
  justify-content: center;
614
639
  align-items: center;
615
640
  height: 100%;
616
641
  transition: width 0.1s;
617
642
  }
618
-
619
- .video-js.skin_mini .vjs-text-track-settings .vjs-modal-dialog-content{
620
- display: block;
621
- font-size: 10px;
622
- padding: 6px 10px;
623
- margin: 0;
624
- max-height: 100%;
625
- overflow-y: auto;
626
- }
627
- .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-colors,
628
- .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-font,
629
- .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-controls{
630
- display: block;
631
- width: 100%;
632
- }
633
- .video-js.skin_mini .vjs-text-track-settings fieldset{
634
- margin: 4px 0;
635
- }
636
- .video-js.skin_mini .vjs-text-track-settings fieldset span{
637
- display: block;
638
- padding: 0 0 6px;
643
+ .video-js.skin_news.vjs-fullscreen .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
644
+ display: none !important;
639
645
  }
640
- .video-js.skin_mini .vjs-text-track-settings fieldset span > select{
641
- max-width: 100%;
646
+ .video-js.skin_news .ssai-ad-container{
647
+ position: absolute;
648
+ bottom: 14px;
642
649
  }
643
650
 
644
- @media (max-width: 600px) {
645
- .video-js.skin_mini .vjs-progress-control .vjs-progress-holder{
651
+ @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{
646
656
  height: 5px !important;
647
657
  }
658
+ .video-js.skin_news button.vjs-big-play-button {
659
+ width: 50px !important;
660
+ height: 50px !important;
661
+ font-size: 2.1rem !important;
662
+ }
648
663
 
649
- .video-js.skin_mini .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
664
+ .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
650
665
  display: none;
651
666
  }
667
+ .video-js.skin_news .vjs-menu > ul.vjs-menu-content {
668
+ bottom: 2.4em !important;
669
+ right: -1em;
670
+ z-index: 1;
671
+ }
672
+ .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
673
+ display: none !important;
674
+ }
652
675
 
676
+ .video-js.skin_news .vjs-text-track-display-ttml span {
677
+ color: white;
678
+ font-size: 13px;
679
+ background-color: black;
680
+ }
653
681
  }
654
682
 
655
- .video-js.skin_mini .vjs-control-bar .vjs-svg-icon{
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
+ }
692
+
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 {
700
+ font-size: 1.2em !important;
701
+ line-height: 1.5em !important;
702
+ padding: 0.2em 0.8em !important;
703
+ }
704
+
705
+ .video-js.skin_news .vjs-control-bar .vjs-svg-icon{
656
706
  content: none !important;
657
707
  fill: none !important;
658
708
  filter: none !important;
659
709
  }
660
710
 
661
711
  /* svg icons opacity and hover effect */
662
- .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button svg {
712
+ .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button svg {
663
713
  opacity: 0.7 !important;
664
714
  }
665
715
 
666
- .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button:hover svg {
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{
667
723
  opacity: 1 !important;
668
724
  }
669
725
 
670
- .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
726
+ .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
671
727
  color: rgba(255, 255, 2555, 0.7)!important;
672
728
  }
673
729
 
674
- .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
730
+ .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
675
731
  color: rgba(255, 255, 2555, 1)!important;
676
732
  }
677
733
 
678
734
 
679
- .video-js.skin_news .vjs-button>.vjs-icon-placeholder:before {
680
- font-size: 2.2em;
681
- line-height: 2.6;
682
- }
683
- .video-js.skin_news .vjs-custom-big-mute.vjs-control{
684
- background: white;
685
- }
686
- .video-js.skin_news .vjs-control-bar{
687
- z-index: 1 !important;
688
- height: 5em !important;
689
- background: black !important;
690
- }
691
- .video-js.skin_news .vjs-playback-rate .vjs-playback-rate-value{
735
+
736
+
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;
692
742
  display: flex;
743
+ flex-wrap: wrap;
693
744
  align-items: center;
694
- justify-content: center;
745
+ column-gap: 10px;
695
746
  }
696
747
 
697
- .video-js.skin_news .vjs-fade>* {
698
- visibility: hidden !important;
699
- opacity: 0 !important;
700
- transition: visibility 1s, opacity 1s !important;
701
- }
702
748
 
703
- .video-js.skin_news .custom-spaced-progress-bar {
749
+ .video-js.skin_cn_news .vjs-control-bar::before {
750
+ content: '';
704
751
  position: absolute;
705
- width: 100%;
706
- display: flex;
707
- height: 0.5em;
708
- top: -0.5em;
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;
709
766
  }
710
767
 
711
- .video-js.skin_news .vjs-progress-control {
712
- /* left: -6px; */
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;
713
773
  position: relative;
714
- width: 100%;
715
- height: 0.5em;
716
- transition: height 0.1s, top 0.1s;
717
774
  }
718
775
 
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;
780
+ }
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;
788
+ }
719
789
 
790
+ .video-js.skin_cn_news .vjs-svg-icon::before {
791
+ content: none !important;
792
+ }
720
793
 
721
794
 
722
- .video-js.skin_news .vjs-custom-control-spacer {
795
+ .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon {
796
+ display: inline-flex;
797
+ align-items: center;
798
+ justify-content: center;
799
+ }
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;
723
804
  display: block;
724
- flex: 1 1 auto;
725
805
  }
726
806
 
727
- .video-js.skin_news .vjs-progress-control .vjs-progress-holder {
728
- margin: 0 0px 0 0px;
729
- }
730
- .video-js.skin_news .vjs-remaining-time.vjs-time-control.vjs-control{
731
- display: none;
732
- }
733
807
 
734
- .video-js.skin_news button.vjs-control.vjs-button.vjs-slowmo-button {
735
- font-size: 14px;
736
- font-weight: 500;
737
- align-self: center;
738
- height: min-content;
739
- padding: 5px 2px;
740
- border-radius: 8px;
741
- }
742
808
 
743
- .video-js.skin_news .vjs-progress-control .vjs-progress-holder{
744
- height: 6px !important;
809
+ .video-js.skin_cn_news .vjs-subs-caps-button {
810
+ opacity: 1;
745
811
  }
746
812
 
747
- .video-js.skin_news .vjs-play-progress:before {
748
- font-size: 1.5em;
749
- line-height: unset;
750
- top: -0.3333333333em;
751
- }
752
813
 
753
- .video-js.skin_news .vjs-play-progress .vjs-time-tooltip {
754
- display: none !important;
755
- }
756
814
 
757
- /* */
758
- .video-js.skin_news .vjs-mouse-display{
759
- font-size: 1.6666666667em;
760
- }
761
-
762
- .video-js.skin_news .vjs-progress-control:hover .vjs-progress-holder {
763
- font-size: 1em !important;
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;
764
823
  }
765
-
766
- .video-js.skin_news .vjs-button{
767
- width: 5.3em;
824
+ .video-js.skin_cn_news .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
825
+ width: 0;
826
+ height: 100%;
768
827
  display: flex;
769
828
  align-items: center;
770
- justify-content: 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;
839
+ }
840
+
841
+ .video-js.skin_cn_news .vjs-volume-bar {
842
+ width: 4em;
843
+ height: 0.3em;
844
+ margin: 0 0.45em;
771
845
  }
772
846
 
773
847
 
774
- .video-js.skin_news .vjs-fullscreen .icon-minimize,
775
- .icon-maximize {
776
- display: block;
777
- height: 32px;
848
+ .video-js.skin_cn_news .vjs-volume-control .vjs-mouse-display {
849
+ display: none !important;
778
850
  }
779
851
 
780
- .video-js.skin_news .vjs-playback-rate .vjs-playback-rate-value{
781
- line-height: 4;
852
+ .video-js.skin_cn_news .vjs-mute-control.vjs-vol-0 ~ .vjs-volume-control .vjs-volume-level {
853
+ width: 0 !important;
782
854
  }
783
855
 
784
- .video-js.skin_news .vjs-fullscreen .icon-maximize,
785
- .icon-minimize {
786
- display: none;
787
- height: 32px;
856
+
857
+ .video-js.skin_cn_news .vjs-custom-control-spacer {
858
+ display: block !important;
859
+ flex: 1 1 auto;
788
860
  }
789
861
 
790
- .video-js.skin_news button.vjs-play-control.vjs-control.vjs-button{
791
- outline: none !important;
862
+
863
+ .video-js.skin_cn_news .vjs-big-play-button {
864
+ display: none;
792
865
  }
793
- .video-js.skin_news .vjs-fullscreen-control .vjs-icon-placeholder:before,
794
- .vjs-icon-fullscreen-enter:before {
795
- /* content: '' !important; */
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;
796
871
  }
797
-
798
- .video-js.skin_news button.vjs-fullscreen-control.vjs-control.vjs-button {
872
+ .video-js.skin_cn_news.vjs-paused:not(.vjs-seeking):not(.vjs-ended) .vjs-big-play-button {
799
873
  display: flex;
800
874
  justify-content: center;
801
875
  align-items: center;
802
- /* transform: rotate(90deg); */
876
+ position: absolute;
877
+ top: 0;
878
+ left: 0;
879
+ right: 0;
880
+ bottom: 0;
881
+ 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;
888
+ line-height: 1.3em;
889
+ transform: none !important;
803
890
  }
804
891
 
805
- .video-js.skin_news .vjs-subs-caps-button .vjs-icon-placeholder:before{
806
- display: none;
807
- }
808
- .video-js.skin_news .vjs-volume-panel .vjs-volume-control{
809
- margin-left: -10px;
810
- }
811
892
 
812
- .video-js.skin_news .skipbtn:hover{
813
- cursor: pointer;
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;
814
898
  }
815
899
 
816
- .video-js.skin_news .rewindbtn:hover{
817
- cursor: pointer;
900
+ .video-js.skin_cn_news .vjs-play-progress {
901
+ background-color: #ffffff;
902
+ border-radius: 20px;
818
903
  }
819
904
 
820
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control{
821
- position: relative;
822
- padding-left: 0;
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;
823
909
  }
824
910
 
825
- .video-js.skin_news.vjs-seeking .vjs-big-play-button{
826
- display: none !important;
827
- }
828
911
 
829
- .video-js.skin_news.vjs-paused .vjs-big-play-button {
830
- width: 90px;
831
- height: 90px;
832
- display: flex;
833
- justify-content: center;
834
- align-items: center;
835
- border-radius: 50%;
836
- position: absolute;
837
- top: 0;
838
- left: 0;
839
- right: 0;
840
- bottom: 0;
841
- margin: auto;
842
- font-size: 6em;
843
- line-height: 1.4em;
844
- border: 0.05em solid;
845
- color: inherit;
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;
846
924
  }
847
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge{
848
- font-weight: bold;
925
+ .video-js.skin_cn_news .vjs-play-progress .vjs-time-tooltip {
926
+ display: none !important;
849
927
  }
850
928
 
851
- .video-js.skin_news .vjs-menu > ul.vjs-menu-content{
852
- bottom: 2.4em !important;
853
- right: -1em;
854
- z-index: 1;
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;
855
934
  }
856
935
 
857
- .video-js.skin_news .vjs-chromecast-button .vjs-icon-placeholder {
858
- width: 24px !important;
859
- height: 24px !important;
860
- }
861
- .settings-selector-icon>svg{
862
- height: 19px !important;
863
- width: 19px !important;
936
+ .video-js.skin_cn_news .vjs-live-control {
937
+ display: none !important;
864
938
  }
865
-
866
-
867
- .video-js.skin_news button.vjs-rewind-button{
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;
868
949
  cursor: pointer;
869
950
  }
870
951
 
871
- .video-js.skin_news .vjs-control-bar .vjs-current-time.vjs-time-control.vjs-control {
872
- padding-right: 0;
873
- }
874
-
875
- .video-js.skin_news .vjs-control-bar .vjs-duration.vjs-time-control.vjs-control {
876
- padding-left: 0;
877
- }
878
-
879
- .video-js.skin_news .vjs-control-bar .vjs-time-control.vjs-time-divider {
880
- padding-left: 0;
881
- padding-right: 0;
882
- display: flex;
883
- justify-content: center;
884
- width: min-content;
952
+ .video-js.skin_cn_news .vjs-seek-to-live-control .vjs-icon-placeholder {
953
+ display: none;
885
954
  }
886
-
887
- .video-js.skin_news.vjs-live .vjs-control-bar .vjs-time-control {
888
- display: none
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;
889
958
  }
890
- .video-js.skin_news.vjs-liveui .vjs-control-bar .vjs-time-control {
891
- display: none
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 */
892
966
  }
893
-
894
- .video-js.skin_news .vjs-control-bar .vjs-time-control {
895
- display: flex;
896
- align-items: center;
967
+ .video-js.skin_cn_news .vjs-seek-to-live-text {
968
+ color: #ffffff;
897
969
  font-weight: 700;
898
970
  font-size: 12px;
899
- min-width: 1.2em;
971
+ letter-spacing: 0.03em;
900
972
  }
901
973
 
902
- .video-js.skin_news .vjs-remaining-time.vjs-time-control.vjs-control {
903
- display: none;
904
- font-size: 11px;
905
- justify-content: center;
906
- align-items: center;
907
- user-select: none;
974
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge {
975
+ border-color: transparent;
908
976
  }
909
- .video-js.skin_news.vjs-live .vjs-remaining-time.vjs-time-control.vjs-control{
910
- display: none;
977
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-seek-to-live-text {
978
+ color: #ff2d2d;
911
979
  }
912
980
 
913
- .video-js.skin_news button.vjs-subs-caps-button.vjs-menu-button.vjs-menu-button-popup.vjs-button{
914
- height: min-content;
915
- width: min-content;
916
- }
917
- .video-js.skin_news .vjs-volume-panel.vjs-volume-panel-vertical{
918
- width: 6em;
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;
919
986
  }
920
-
921
- .video-js.skin_news .content{
922
- bottom: 3.4rem !important;
923
- right: -4rem !important;
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;
991
+ font-size: 11px;
992
+ font-weight: 700;
993
+ color: #fff;
994
+ padding: 0 6px;
995
+ user-select: none;
924
996
  }
925
997
 
926
- .setting-icon > svg{
927
- height:18px !important;
928
- }
929
998
 
930
- .output-overlay{
931
- position: absolute;
932
- bottom: 0;
933
- height: 100%;
934
- width: 100%;
935
- z-index: 0;
936
- border: 0;
937
- pointer-events:none
938
- }
939
-
940
- .video-js.skin_news iframe{
941
- width: 100%;
942
- height: 100%;
943
- }
944
-
945
- .video-js.skin_news .vjs-live-control{
946
- align-items: center;
947
- }
948
- .video-js.skin_news .vjs-live-control.vjs-control .vjs-live-display{
949
- height: 2.2em;
950
- display: flex;
951
- align-items: center;
952
- font-family: monospace;
953
- width: 4em;
954
- justify-content: center;
955
- background: red;
956
- margin: 4px 0px 4px 12px;
957
- }
958
-
959
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control:focus{
960
- text-shadow: none;
961
- }
962
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-seek-to-live-text {
963
- display: none;
964
- font-size: 12px;
965
- }
966
-
967
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder {
968
- height: 2.2em;
969
- display: inline-flex;
970
- align-items: center;
971
- /* font-family: monospace; */
972
- justify-content: center;
973
- border: 2px solid;
974
- margin: 4px 0px 4px 6px;
975
- white-space: pre;
976
- padding: 0px 6px;
977
- font-size: 1.2em;
978
- font-weight: 500;
979
- color: rgba(255, 255, 2555, 0.7);
980
-
981
- letter-spacing: -.1px;
982
- line-height: normal;
983
- text-transform: uppercase;
984
- color: #FFFFFF;
985
- opacity: .7;
986
- font-family: "Proxima Nova";
987
- }
988
-
989
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder:hover{
990
- opacity: 1;
991
- }
992
-
993
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder::before {
994
- content: "NOT LIVE";
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;
995
1011
  }
996
-
997
- .settings-selection.vjs-control.vjs-button{
998
- display: flex !important;
1012
+ .video-js.skin_cn_news .vjs-chapter-marker:hover {
1013
+ background: var(--vl-chapter-hover, #0a5cff);
999
1014
  }
1000
-
1001
- @media(max-width:576px){
1002
- .settings-selection.vjs-control.vjs-button{
1003
- display: none !important;
1004
- }
1015
+ .video-js.skin_cn_news .vjs-chapter-marker.vjs-chapter-marker--active {
1016
+ background: var(--vl-chapter-active, #0a5cff);
1005
1017
  }
1006
1018
 
1007
1019
 
1008
- @media(max-width:576px){
1009
- .tvProviderImage{
1010
- display: none
1011
- }
1012
- .video-js.skin_news .vjs-fullscreen .icon-minimize,
1013
- .icon-maximize {
1014
- height: 30px !important;
1015
- }
1016
-
1017
- .video-js.skin_news .vjs-fullscreen .icon-maximize,
1018
- .icon-minimize {
1019
- height: 30px !important;
1020
- }
1021
- .video-js.skin_news .vjs-volume-panel.vjs-volume-panel-vertical{
1022
- width: 4.5em;
1023
- }
1024
- .video-js.skin_news button.vjs-fullscreen-control.vjs-control.vjs-button>span.vjs-icon-placeholder::before {
1025
- height: min-content;
1026
- }
1027
-
1028
- .video-js.skin_news button.vjs-slowmo-button{
1029
- display: none;
1030
- }
1031
- .video-js.skin_news button.vjs-rewind-button{
1032
- display: none;
1033
- }
1034
- .video-js.skin_news button.vjs-rewind-button>svg{
1035
- height: 20px;
1036
- }
1037
- .video-js.skin_news .vjs-button{
1038
- width: 4.8em;
1039
- }
1040
- .video-js.skin_news .widget-selection{
1041
- display: none;
1042
- }
1043
- .video-js.skin_news .container{
1044
- display: none !important;
1045
- }
1046
- .video-js.skin_news .vjs-control-bar{
1047
- height: 4em !important;
1048
- }
1049
- .video-js.skin_news .vjs-button>.vjs-icon-placeholder:before{
1050
- font-size: 2.5em;
1051
- line-height: 1.5;
1052
- }
1053
- .video-js.skin_news .vjs-play-progress:before {
1054
- font-size: 1.2em;
1055
- position: absolute;
1056
- right: -0.5em;
1057
- z-index: 1;
1058
- }
1059
- .video-js.skin_news button.vjs-skip-button>svg{
1060
- height: 20px;
1061
- }
1062
- .video-js.skin_news button.vjs-big-play-button {
1063
- width: 50px !important;
1064
- height: 50px !important;
1065
- font-size: 2.1rem !important;
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));
1066
1025
  }
1067
1026
 
1068
- .stream-selector-icon>svg{
1069
- width: 24px;
1070
- height: 24px;
1071
- }
1072
- .video-js.skin_news.vjs-live .vjs-progress-control .vjs-progress-holder{
1073
- margin: 0 12px 0 12px;
1074
- }
1075
- .video-js.skin_news .vjs-seek-to-live-text{
1076
- font-size: 12px;
1077
- }
1078
- .video-js.skin_news .vjs-progress-control .vjs-progress-holder {
1079
- margin: 0 12px 0 12px;
1080
- }
1081
- }
1082
- .video-js.skin_news.vjs-paused .vjs-big-play-button {
1083
- width: 90px;
1084
- height: 90px;
1085
- display: flex;
1086
- justify-content: center;
1087
- align-items: center;
1088
- border-radius: 50%;
1089
- position: absolute;
1090
- top: 0;
1091
- left: 0;
1092
- right: 0;
1093
- bottom: 0;
1094
- margin: auto;
1095
- font-size: 6em;
1096
- line-height: 1.4em;
1097
- }
1098
1027
 
1099
- .video-js.skin_news .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:hover .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1100
- display: flex;
1101
- justify-content: center;
1102
- align-items: center;
1103
- height: 100%;
1104
- transition: width 0.1s;
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);
1105
1036
  }
1106
-
1107
- .video-js.skin_news .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:active .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1108
- display: flex;
1109
- justify-content: center;
1110
- align-items: center;
1111
- height: 100%;
1112
- transition: width 0.1s;
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;
1113
1042
  }
1114
- .video-js.skin_news.vjs-fullscreen .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
1115
- display: none !important;
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;
1116
1050
  }
1117
- .video-js.skin_news .ssai-ad-container{
1118
- position: absolute;
1119
- bottom: 14px;
1051
+ .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__pointer {
1052
+ border-top-color: var(--vl-chapter-tooltip, #0a5cff);
1120
1053
  }
1121
1054
 
1055
+ /* ---- responsive ---- */
1122
1056
  @media (max-width: 576px) {
1123
- .video-js.skin_news .ssai-ad-container{
1124
- bottom: 2px;
1125
- }
1126
- .video-js.skin_news .vjs-progress-control .vjs-progress-holder{
1127
- height: 5px !important;
1128
- }
1129
- .video-js.skin_news button.vjs-big-play-button {
1130
- width: 50px !important;
1131
- height: 50px !important;
1132
- font-size: 2.1rem !important;
1057
+ .video-js.skin_cn_news .vjs-control-bar {
1058
+ height: 3.2em !important;
1059
+ padding: 0 8px;
1133
1060
  }
1134
-
1135
- .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
1136
- display: none;
1061
+ .video-js.skin_cn_news .vjs-control-bar .vjs-button {
1062
+ padding: 0 6px;
1137
1063
  }
1138
- .video-js.skin_news .vjs-menu > ul.vjs-menu-content {
1139
- bottom: 2.4em !important;
1140
- right: -1em;
1141
- z-index: 1;
1142
- }
1143
- .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
1064
+ .video-js.skin_cn_news .vjs-control.vjs-button.vjs-picture-in-picture-control {
1144
1065
  display: none !important;
1145
1066
  }
1146
-
1147
- .video-js.skin_news .vjs-text-track-display-ttml span {
1148
- color: white;
1149
- font-size: 13px;
1150
- background-color: black;
1151
- }
1152
- }
1153
-
1154
- .video-js.skin_news .vjs-text-track-display-ttml span {
1155
- color: white;
1156
- font-size: 16px;
1157
- background-color: black;
1158
- }
1159
-
1160
- .video-js.skin_news.vjs-has-started.vjs-user-active.vjs-controls-enabled .vjs-text-track-display-ttml p {
1161
- margin-bottom: 2rem !important;
1162
- }
1163
-
1164
- .video-js.skin_news .vjs-text-track-display-ttml p {
1165
- font-size: 18px !important;
1166
- }
1167
-
1168
-
1169
- .video-js.skin_news .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
1170
- .video-js.skin_news .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
1171
- font-size: 1.2em !important;
1172
- line-height: 1.5em !important;
1173
- padding: 0.2em 0.8em !important;
1174
1067
  }
1175
1068
 
1176
- .video-js.skin_news .vjs-control-bar .vjs-svg-icon{
1177
- content: none !important;
1178
- fill: none !important;
1179
- filter: none !important;
1180
- }
1181
-
1182
- /* svg icons opacity and hover effect */
1183
- .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button svg {
1184
- opacity: 0.7 !important;
1185
- }
1186
-
1187
- .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button:hover svg {
1188
- opacity: 1 !important;
1189
- }
1190
- .video-js.skin_news .vjs-control-bar .vjs-remaining-time.vjs-time-control.vjs-control{
1191
- opacity: 0.7 !important;
1192
- }
1193
- .video-js.skin_news .vjs-control-bar .vjs-remaining-time.vjs-time-control.vjs-control:hover{
1194
- opacity: 1 !important;
1195
- }
1196
-
1197
- .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
1198
- color: rgba(255, 255, 2555, 0.7)!important;
1199
- }
1200
-
1201
- .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
1202
- color: rgba(255, 255, 2555, 1)!important;
1203
- }
1204
-
1205
-
1206
-
1207
1069
  .video-js.skin_news_live .vjs-button>.vjs-icon-placeholder:before {
1208
1070
  font-size: 2.2em;
1209
1071
  line-height: 2.6;
@@ -1616,409 +1478,547 @@
1616
1478
  line-height: 1.4em;
1617
1479
  }
1618
1480
 
1619
- .video-js.skin_news_live .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:hover .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1620
- display: flex;
1621
- justify-content: center;
1622
- align-items: center;
1623
- height: 100%;
1624
- transition: width 0.1s;
1481
+ .video-js.skin_news_live .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:hover .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1482
+ display: flex;
1483
+ justify-content: center;
1484
+ align-items: center;
1485
+ height: 100%;
1486
+ transition: width 0.1s;
1487
+ }
1488
+
1489
+ .video-js.skin_news_live .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1490
+ display: flex;
1491
+ justify-content: center;
1492
+ align-items: center;
1493
+ height: 100%;
1494
+ transition: width 0.1s;
1495
+ }
1496
+ .video-js.skin_news_live.vjs-fullscreen .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
1497
+ display: none !important;
1498
+ }
1499
+
1500
+ @media (max-width: 576px) {
1501
+ .video-js.skin_news_live .vjs-progress-control .vjs-progress-holder{
1502
+ height: 5px !important;
1503
+ }
1504
+ .video-js.skin_news_live button.vjs-big-play-button {
1505
+ width: 50px !important;
1506
+ height: 50px !important;
1507
+ font-size: 2.1rem !important;
1508
+ }
1509
+
1510
+ .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
1511
+ display: none;
1512
+ }
1513
+ .video-js.skin_news_live .vjs-menu > ul.vjs-menu-content {
1514
+ bottom: 2.4em !important;
1515
+ right: -1em;
1516
+ z-index: 1;
1517
+ }
1518
+ .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
1519
+ display: none !important;
1520
+ }
1521
+
1522
+ }
1523
+
1524
+ .video-js.skin_news_live .vjs-text-track-display-ttml {
1525
+ width: 100% !important;
1526
+ }
1527
+
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 {
1530
+ font-size: 1.2em !important;
1531
+ line-height: 1.5em !important;
1532
+ padding: 0.2em 0.8em !important;
1533
+ }
1534
+
1535
+ .video-js.skin_news_live .vjs-control-bar .vjs-svg-icon{
1536
+ content: none !important;
1537
+ fill: none !important;
1538
+ filter: none !important;
1539
+ }
1540
+
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;
1547
+ }
1548
+
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;
1557
+ }
1558
+ .video-js.skin_mini .vjs-control-bar{
1559
+ z-index: 1 !important;
1560
+ height: 4em !important;
1561
+ background: black !important;
1562
+ }
1563
+
1564
+ .video-js.skin_mini .vjs-fade>* {
1565
+ visibility: hidden !important;
1566
+ opacity: 0 !important;
1567
+ transition: visibility 1s, opacity 1s !important;
1568
+ }
1569
+
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;
1576
+ }
1577
+
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;
1584
+ }
1585
+
1586
+
1587
+
1588
+
1589
+ .video-js.skin_mini .vjs-custom-control-spacer {
1590
+ display: block;
1591
+ flex: 1 1 auto;
1592
+ }
1593
+
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
+
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;
1608
+ }
1609
+
1610
+ .video-js.skin_mini .vjs-progress-control .vjs-progress-holder{
1611
+ height: 5px !important;
1612
+ }
1613
+
1614
+ .video-js.skin_mini .vjs-play-progress:before {
1615
+ font-size: 1.3em;
1616
+ line-height: unset;
1617
+ top: -0.3333333333em;
1618
+ }
1619
+
1620
+ .video-js.skin_mini .vjs-play-progress .vjs-time-tooltip {
1621
+ display: none !important;
1625
1622
  }
1626
1623
 
1627
- .video-js.skin_news_live .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1624
+ /* */
1625
+ .video-js.skin_mini .vjs-mouse-display{
1626
+ font-size: 1.6666666667em;
1627
+ }
1628
+
1629
+ .video-js.skin_mini .vjs-progress-control:hover .vjs-progress-holder {
1630
+ font-size: 1em !important;
1631
+ }
1632
+
1633
+ .video-js.skin_mini .vjs-button{
1634
+ width: 3em;
1628
1635
  display: flex;
1629
- justify-content: center;
1630
1636
  align-items: center;
1631
- height: 100%;
1632
- transition: width 0.1s;
1633
- }
1634
- .video-js.skin_news_live.vjs-fullscreen .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
1635
- display: none !important;
1637
+ justify-content: center;
1636
1638
  }
1637
1639
 
1638
- @media (max-width: 576px) {
1639
- .video-js.skin_news_live .vjs-progress-control .vjs-progress-holder{
1640
- height: 5px !important;
1641
- }
1642
- .video-js.skin_news_live button.vjs-big-play-button {
1643
- width: 50px !important;
1644
- height: 50px !important;
1645
- font-size: 2.1rem !important;
1646
- }
1647
1640
 
1648
- .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
1649
- display: none;
1650
- }
1651
- .video-js.skin_news_live .vjs-menu > ul.vjs-menu-content {
1652
- bottom: 2.4em !important;
1653
- right: -1em;
1654
- z-index: 1;
1641
+ .video-js.skin_mini .vjs-fullscreen .icon-minimize,
1642
+ .icon-maximize {
1643
+ display: block;
1644
+ height: 32px;
1655
1645
  }
1656
- .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
1657
- display: none !important;
1658
- }
1659
1646
 
1647
+ .video-js.skin_mini .vjs-playback-rate .vjs-playback-rate-value{
1648
+ line-height: 4;
1660
1649
  }
1661
1650
 
1662
- .video-js.skin_news_live .vjs-text-track-display-ttml {
1663
- width: 100% !important;
1651
+ .video-js.skin_mini .vjs-fullscreen .icon-maximize,
1652
+ .icon-minimize {
1653
+ display: none;
1654
+ height: 32px;
1664
1655
  }
1665
1656
 
1666
- .video-js.skin_news_live .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
1667
- .video-js.skin_news_live .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
1668
- font-size: 1.2em !important;
1669
- line-height: 1.5em !important;
1670
- padding: 0.2em 0.8em !important;
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; */
1671
1663
  }
1672
1664
 
1673
- .video-js.skin_news_live .vjs-control-bar .vjs-svg-icon{
1674
- content: none !important;
1675
- fill: none !important;
1676
- filter: none !important;
1665
+ .video-js.skin_mini button.vjs-fullscreen-control.vjs-control.vjs-button {
1666
+ display: flex;
1667
+ justify-content: center;
1668
+ align-items: center;
1669
+ /* transform: rotate(90deg); */
1677
1670
  }
1678
1671
 
1679
- .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
1680
- color: rgba(255, 255, 2555, 0.7)!important;
1672
+ .video-js.skin_mini .vjs-subs-caps-button .vjs-icon-placeholder:before{
1673
+ display: none;
1674
+ }
1675
+ .video-js.skin_mini .vjs-volume-panel .vjs-volume-control{
1676
+ margin-left: -10px;
1677
+ display: none;
1681
1678
  }
1682
1679
 
1683
- .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
1684
- color: rgba(255, 255, 2555, 1)!important;
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;
1685
1694
  }
1686
1695
 
1696
+ .video-js.skin_mini .skipbtn:hover{
1697
+ cursor: pointer;
1698
+ }
1687
1699
 
1700
+ .video-js.skin_mini .rewindbtn:hover{
1701
+ cursor: pointer;
1702
+ }
1688
1703
 
1704
+ .video-js.skin_mini .vjs-seek-to-live-control.vjs-control{
1705
+ position: relative;
1706
+ padding-left: 0;
1707
+ }
1689
1708
 
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;
1709
+ .video-js.skin_mini.vjs-paused .vjs-big-play-button {
1710
+ width: 40px;
1711
+ height: 40px;
1695
1712
  display: flex;
1696
- flex-wrap: wrap;
1713
+ justify-content: center;
1697
1714
  align-items: center;
1698
- column-gap: 10px;
1699
- }
1700
-
1701
-
1702
- .video-js.skin_cn_news .vjs-control-bar::before {
1703
- content: '';
1715
+ border: none;
1704
1716
  position: absolute;
1717
+ top: 0;
1705
1718
  left: 0;
1706
1719
  right: 0;
1707
1720
  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;
1721
+ margin: auto;
1722
+ font-size: 3em;
1723
+ line-height: 1.3em;
1724
+ transform: none !important;
1725
+ border-radius: 1.3em;
1719
1726
  }
1720
1727
 
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;
1728
+ .video-js.skin_mini .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge{
1729
+ font-weight: bold;
1727
1730
  }
1728
1731
 
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;
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;
1741
1737
  }
1742
1738
 
1743
- .video-js.skin_cn_news .vjs-svg-icon::before {
1744
- content: none !important;
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;
1745
1746
  }
1746
1747
 
1747
1748
 
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;
1749
+ .video-js.skin_mini button.vjs-rewind-button{
1750
+ cursor: pointer;
1758
1751
  }
1759
1752
 
1753
+ .video-js.skin_mini .vjs-control-bar .vjs-current-time.vjs-time-control.vjs-control {
1754
+ padding-right: 0;
1755
+ }
1760
1756
 
1757
+ .video-js.skin_mini .vjs-control-bar .vjs-duration.vjs-time-control.vjs-control {
1758
+ padding-left: 0;
1759
+ }
1761
1760
 
1762
- .video-js.skin_cn_news .vjs-subs-caps-button {
1763
- opacity: 1;
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;
1764
1767
  }
1765
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
1774
+ }
1766
1775
 
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;
1783
+ }
1767
1784
 
1768
- .video-js.skin_cn_news .vjs-volume-panel {
1769
- margin: 0;
1770
- display: inline-flex;
1785
+ .video-js.skin_mini .vjs-remaining-time.vjs-time-control.vjs-control {
1786
+ display: none;
1787
+ font-size: 11px;
1788
+ justify-content: center;
1771
1789
  align-items: center;
1772
- align-self: center;
1773
- height: 2.2em;
1774
- min-width: 7em;
1775
- transition: none;
1790
+ user-select: none;
1776
1791
  }
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;
1792
+ .video-js.skin_mini.vjs-live .vjs-remaining-time.vjs-time-control.vjs-control{
1793
+ display: none;
1785
1794
  }
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;
1795
+
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;
1792
1803
  }
1793
1804
 
1794
- .video-js.skin_cn_news .vjs-volume-bar {
1795
- width: 4em;
1796
- height: 0.3em;
1797
- margin: 0 0.45em;
1805
+ .video-js.skin_mini .content{
1806
+ bottom: 3.4rem !important;
1807
+ right: -4rem !important;
1798
1808
  }
1799
1809
 
1800
-
1801
- .video-js.skin_cn_news .vjs-volume-control .vjs-mouse-display {
1802
- display: none !important;
1810
+ .video-js.skin_mini .setting-icon > svg{
1811
+ height:18px !important;
1803
1812
  }
1804
1813
 
1805
- .video-js.skin_cn_news .vjs-mute-control.vjs-vol-0 ~ .vjs-volume-control .vjs-volume-level {
1806
- width: 0 !important;
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
1807
1822
  }
1808
1823
 
1809
-
1810
- .video-js.skin_cn_news .vjs-custom-control-spacer {
1811
- display: block !important;
1812
- flex: 1 1 auto;
1824
+ .video-js.skin_mini iframe{
1825
+ width: 100%;
1826
+ height: 100%;
1813
1827
  }
1814
1828
 
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;
1829
+ .video-js.skin_mini .vjs-live-control{
1830
+ align-items: center;
1831
+ max-width: 5em;
1824
1832
  }
1825
- .video-js.skin_cn_news.vjs-paused:not(.vjs-seeking):not(.vjs-ended) .vjs-big-play-button {
1833
+ .video-js.skin_mini .vjs-live-control.vjs-control .vjs-live-display{
1834
+ height: 2.2em;
1826
1835
  display: flex;
1827
- justify-content: center;
1828
1836
  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;
1837
+ font-family: monospace;
1838
+ width: 4em;
1839
+ justify-content: center;
1840
+ background: red;
1841
+ margin: 4px 0px 4px 2px;
1843
1842
  }
1844
1843
 
1845
-
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;
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 {
1848
+ display: none;
1849
+ font-size: 12px;
1851
1850
  }
1852
1851
 
1853
- .video-js.skin_cn_news .vjs-play-progress {
1854
- background-color: #ffffff;
1855
- border-radius: 20px;
1852
+ .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder {
1853
+ height: 1.8em;
1854
+ display: inline-flex;
1855
+ 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);
1856
1865
  }
1857
1866
 
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;
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;
1862
1870
  }
1863
1871
 
1864
1872
 
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;
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;
1877
1923
  }
1878
- .video-js.skin_cn_news .vjs-play-progress .vjs-time-tooltip {
1879
- display: none !important;
1924
+ .video-js.skin_mini button.vjs-skip-button>svg{
1925
+ height: 20px;
1880
1926
  }
1881
1927
 
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;
1928
+ .stream-selector-icon>svg{
1929
+ width: 24px;
1930
+ height: 24px;
1887
1931
  }
1888
-
1889
- .video-js.skin_cn_news .vjs-live-control {
1890
- display: none !important;
1932
+ .video-js.skin_mini .vjs-seek-to-live-text{
1933
+ font-size: 12px;
1891
1934
  }
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
1935
  }
1904
1936
 
1905
- .video-js.skin_cn_news .vjs-seek-to-live-control .vjs-icon-placeholder {
1906
- display: none;
1937
+
1938
+ .video-js.skin_mini .vjs-text-track-display-ttml span {
1939
+ background-color: rgba(0, 0, 0, 0.2);
1907
1940
  }
1908
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder {
1909
- display: inline-flex;
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;
1910
1946
  align-items: center;
1947
+ height: 100%;
1948
+ transition: width 0.1s;
1911
1949
  }
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;
1950
+ .video-js.skin_mini .vjs-track-settings-colors fieldset.vjs-fg.vjs-track-setting{
1951
+ margin: 2px;
1925
1952
  }
1926
1953
 
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;
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
+ justify-content: center;
1957
+ align-items: center;
1958
+ height: 100%;
1959
+ transition: width 0.1s;
1932
1960
  }
1933
1961
 
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;
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;
1939
1969
  }
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;
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%;
1949
1975
  }
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;
1976
+ .video-js.skin_mini .vjs-text-track-settings fieldset{
1977
+ margin: 4px 0;
1964
1978
  }
1965
- .video-js.skin_cn_news .vjs-chapter-marker:hover {
1966
- background: var(--vl-chapter-hover, #0a5cff);
1979
+ .video-js.skin_mini .vjs-text-track-settings fieldset span{
1980
+ display: block;
1981
+ padding: 0 0 6px;
1967
1982
  }
1968
- .video-js.skin_cn_news .vjs-chapter-marker.vjs-chapter-marker--active {
1969
- background: var(--vl-chapter-active, #0a5cff);
1983
+ .video-js.skin_mini .vjs-text-track-settings fieldset span > select{
1984
+ max-width: 100%;
1970
1985
  }
1971
1986
 
1987
+ @media (max-width: 600px) {
1988
+ .video-js.skin_mini .vjs-progress-control .vjs-progress-holder{
1989
+ height: 5px !important;
1990
+ }
1972
1991
 
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));
1978
- }
1992
+ .video-js.skin_mini .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
1993
+ display: none;
1994
+ }
1979
1995
 
1996
+ }
1980
1997
 
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);
1998
+ .video-js.skin_mini .vjs-control-bar .vjs-svg-icon{
1999
+ content: none !important;
2000
+ fill: none !important;
2001
+ filter: none !important;
1989
2002
  }
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;
2003
+
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;
1995
2007
  }
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;
2008
+
2009
+ .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button:hover svg {
2010
+ opacity: 1 !important;
2003
2011
  }
2004
- .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__pointer {
2005
- border-top-color: var(--vl-chapter-tooltip, #0a5cff);
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;
2006
2015
  }
2007
2016
 
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
- }
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;
2020
2019
  }
2021
2020
 
2021
+
2022
2022
  /* CSS for videojs-dvr-seekbar */
2023
2023
 
2024
2024
  .video-js.vjs-dvr-seekbar {
@@ -2199,6 +2199,57 @@
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
  .video-js .multicamera-parent.default{
2203
2254
  height: 345px;
2204
2255
  position: absolute;
@@ -2279,57 +2330,6 @@
2279
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,6 +2612,38 @@
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
+
2615
2647
  .video-js.vjs-quality-menu {
2616
2648
  display: block;
2617
2649
  }
@@ -2682,38 +2714,6 @@
2682
2714
  -webkit-animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite;
2683
2715
  animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite;
2684
2716
  }
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;