@viewlift/player-backup 2.0.308-backup → 2.0.309-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
@@ -1,202 +1,7 @@
1
1
 
2
2
 
3
3
 
4
- .video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control {
5
- height: 0.7em;
6
- position: absolute;
7
- top: -0.7em;
8
- width: 100%;
9
- }
10
-
11
- .video-js.skin_vlone .vjs-progress-holder.vjs-slider.vjs-slider-horizontal {
12
- height: 100%;
13
- }
14
-
15
- .video-js.skin_vlone .vjs-playback-rate .vjs-playback-rate-value{
16
- line-height: 2.5;
17
- }
18
-
19
- .video-js.skin_vlone button.vjs-control.vjs-button.vjs-rewind-button > svg{
20
- height: 19px;
21
- width: 19px;
22
- cursor: pointer;
23
- }
24
- .video-js.skin_vlone .vjs-control {
25
- user-select: none;
26
- }
27
- .video-js.skin_vlone .vjs-custom-control-spacer{
28
- user-select: none;
29
- }
30
-
31
- .video-js.skin_vlone button.vjs-control.vjs-button.vjs-skip-button > svg{
32
- height: 19px;
33
- width: 19px;
34
- cursor: pointer;
35
- }
36
-
37
- .video-js.skin_vlone .vjs-play-progress:before {
38
- display: none !important;
39
- }
40
-
41
- .video-js.skin_vlone .vjs-progress-control>.vjs-progress-holder.vjs-slider {
42
- margin: 0 !important;
43
-
44
- }
45
-
46
-
47
- .video-js.skin_vlone .vjs-custom-control-spacer {
48
- display: block;
49
- flex: 1 1 auto;
50
- }
51
-
52
- .video-js.skin_vlone .vjs-volume-panel.vjs-volume-panel-vertical{
53
- z-index: 1;
54
- }
55
-
56
-
57
- .video-js.skin_vlone .vjs-control-bar {
58
- height: 40px;
59
- }
60
-
61
- .video-js.skin_vlone .vjs-big-play-button .vjs-icon-placeholder:before,
62
- .vjs-button>.vjs-icon-placeholder:before {
63
- position: relative !important;
64
- }
65
- .video-js.skin_vlone .vjs-big-play-button .vjs-icon-placeholder:before{
66
- display: flex;
67
- left: 0px;
68
- top: -1px;
69
- }
70
-
71
- .vjs-button>.vjs-icon-placeholder:before {
72
- font-size: 2em !important;
73
- }
74
-
75
- .video-js.skin_vlone .vjs-control {
76
- width: 4.3em;
77
- }
78
-
79
- .vjs-menu-button-popup .vjs-menu {
80
- bottom: 10px !important;
81
- }
82
-
83
-
84
- .video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control:hover {
85
- height: 1.3em;
86
- position: absolute;
87
- top: -1.3em;
88
- transition: height 0.3s, top 0.3s;
89
- }
90
-
91
-
92
- .video-js.skin_vlone.vjs-live .vjs-time-control{
93
- display: none !important;
94
- }
95
-
96
- .video-js.skin_vlone .vjs-time-control {
97
- display: block;
98
- }
99
- .video-js.skin_vlone .vjs-remaining-time {
100
- display: none;
101
- }
102
-
103
- .video-js.skin_vlone .vjs-remaining-time.vjs-time-control.vjs-control>span.vjs-remaining-time-display {
104
- line-height: 3.5em;
105
- font-size: 1.1em;
106
- min-width: 4em;
107
- }
108
-
109
- .video-js.skin_vlone .vjs-time-divider > div{
110
- display: flex;
111
- justify-content: center;
112
- }
113
-
114
- .video-js.skin_vlone .vjs-live-control{
115
- align-items: center;
116
- }
117
- .video-js.skin_vlone .vjs-live-display{
118
- height: 2.2em;
119
- display: flex;
120
- align-items: center;
121
- font-family: monospace;
122
- width: 4em;
123
- justify-content: center;
124
- background: red;
125
- margin: 4px 0px 4px 12px;
126
- }
127
- .video-js.skin_vlone .vjs-live-display:hover{
128
- cursor: pointer;
129
- }
130
-
131
- .video-js.skin_vlone .vjs-time-control {
132
- line-height: 3.5em !important;
133
- font-size: 1.1em !important;
134
- width: min-content !important;
135
- min-width: 1.5em;
136
- padding: 0 !important;
137
- user-select: none;
138
- }
139
-
140
- .video-js.skin_vlone .vjs-current-time.vjs-time-control.vjs-control {
141
- margin-left: 16px !important;
142
- }
143
-
144
- .video-js.skin_vlone .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
145
- .video-js.skin_vlone .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
146
- font-size: 1.2em !important;
147
- line-height: 1.5em !important;
148
- padding: 0.2em 0.8em !important;
149
- }
150
-
151
-
152
- /* Big play */
153
- .video-js.skin_vlone.vjs-paused .vjs-big-play-button {
154
- width: 80px;
155
- height: 80px;
156
- display: flex;
157
- justify-content: center;
158
- align-items: center;
159
- border: none;
160
- position: absolute;
161
- top: 0;
162
- left: 0;
163
- right: 0;
164
- bottom: 0;
165
- margin: auto;
166
- font-size: 5em;
167
- line-height: 1.3em;
168
- transform: none !important;
169
- border-radius: 1.3em;
170
- }
171
- .video-js.skin_vlone .ssai-ad-container{
172
- position: absolute;
173
- bottom: 4px;
174
- }
175
-
176
- @media(max-width:600px){
177
- .video-js.skin_vlone button.vjs-big-play-button {
178
- width: 50px !important;
179
- height: 50px !important;
180
- font-size: 2.1rem !important;
181
- }
182
-
183
- .video-js.skin_vlone .ssai-ad-container {
184
- position: absolute;
185
- bottom: 2px;
186
- }
187
- .video-js.skin_vlone .vjs-playback-rate .vjs-playback-rate-value {
188
- display: none;
189
- }
190
-
191
- .video-js.skin_vlone button.vjs-control.vjs-button.vjs-rewind-button>svg {
192
- /* display: none; */
193
- }
194
4
 
195
- .video-js.skin_vlone button.vjs-control.vjs-button.vjs-skip-button>svg {
196
- /* display: none; */
197
- }
198
- }
199
-
200
5
  .video-js.skin_mini .vjs-button>.vjs-icon-placeholder:before {
201
6
  font-size: 2.2em;
202
7
  line-height: 2.6;
@@ -667,355 +472,688 @@
667
472
 
668
473
 
669
474
 
670
-
671
- .video-js.skin_news .vjs-button>.vjs-icon-placeholder:before {
672
- font-size: 2.2em;
673
- line-height: 2.6;
674
- }
675
- .video-js.skin_news .vjs-custom-big-mute.vjs-control{
676
- background: white;
677
- }
678
- .video-js.skin_news .vjs-control-bar{
679
- z-index: 1 !important;
680
- height: 5em !important;
681
- background: black !important;
682
- }
683
- .video-js.skin_news .vjs-playback-rate .vjs-playback-rate-value{
475
+ .video-js.skin_cn_news .vjs-control-bar {
476
+ z-index: 1 !important;
477
+ height: auto !important;
478
+ padding: 0.8em 30px 0.6em;
479
+ background: transparent !important;
684
480
  display: flex;
481
+ flex-wrap: wrap;
685
482
  align-items: center;
686
- justify-content: center;
483
+ column-gap: 10px;
687
484
  }
688
485
 
689
- .video-js.skin_news .vjs-fade>* {
690
- visibility: hidden !important;
691
- opacity: 0 !important;
692
- transition: visibility 1s, opacity 1s !important;
693
- }
694
486
 
695
- .video-js.skin_news .custom-spaced-progress-bar {
487
+ .video-js.skin_cn_news .vjs-control-bar::before {
488
+ content: '';
696
489
  position: absolute;
697
- width: 100%;
698
- display: flex;
699
- height: 0.5em;
700
- top: -0.5em;
490
+ left: 0;
491
+ right: 0;
492
+ bottom: 0;
493
+ top: -3em;
494
+ background: linear-gradient(
495
+ to top,
496
+ rgba(0, 0, 0, 0.85) 0%,
497
+ rgba(0, 0, 0, 0.7) 40%,
498
+ rgba(0, 0, 0, 0.55) 70%,
499
+ rgba(0, 0, 0, 0.38) 86%,
500
+ transparent 100%
501
+ );
502
+ pointer-events: none;
503
+ z-index: -1;
701
504
  }
702
505
 
703
- .video-js.skin_news .vjs-progress-control {
704
- /* left: -6px; */
506
+ .video-js.skin_cn_news .vjs-control-bar .vjs-progress-control {
507
+ order: -1;
508
+ flex: 0 0 100%;
509
+ width: 80%;
510
+ margin: 0 0 5em;
705
511
  position: relative;
706
- width: 100%;
707
- height: 0.5em;
708
- transition: height 0.1s, top 0.1s;
709
512
  }
710
513
 
711
-
712
-
713
-
714
- .video-js.skin_news .vjs-custom-control-spacer {
715
- display: block;
716
- flex: 1 1 auto;
717
- }
718
-
719
- .video-js.skin_news .vjs-progress-control .vjs-progress-holder {
720
- margin: 0 0px 0 0px;
514
+ .video-js.skin_cn_news .vjs-control-bar > .vjs-control,
515
+ .video-js.skin_cn_news .vjs-control-bar > .vjs-button {
516
+ width: auto;
517
+ min-width: 0;
721
518
  }
722
- .video-js.skin_news .vjs-remaining-time.vjs-time-control.vjs-control{
723
- display: none;
519
+ .video-js.skin_cn_news .vjs-control-bar .vjs-button {
520
+ display: inline-flex;
521
+ align-items: center;
522
+ justify-content: center;
523
+ height: 7em;
524
+ padding: 0 10px;
525
+ color: #fff;
724
526
  }
725
527
 
726
- .video-js.skin_news button.vjs-control.vjs-button.vjs-slowmo-button {
727
- font-size: 14px;
728
- font-weight: 500;
729
- align-self: center;
730
- height: min-content;
731
- padding: 5px 2px;
732
- border-radius: 8px;
528
+ .video-js.skin_cn_news .vjs-svg-icon::before {
529
+ content: none !important;
733
530
  }
734
531
 
735
- .video-js.skin_news .vjs-progress-control .vjs-progress-holder{
736
- height: 6px !important;
737
- }
738
532
 
739
- .video-js.skin_news .vjs-play-progress:before {
740
- font-size: 1.5em;
741
- line-height: unset;
742
- top: -0.3333333333em;
533
+ .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon {
534
+ display: inline-flex;
535
+ align-items: center;
536
+ justify-content: center;
743
537
  }
744
-
745
- .video-js.skin_news .vjs-play-progress .vjs-time-tooltip {
746
- display: none !important;
538
+ .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon svg,
539
+ .video-js.skin_cn_news .vjs-rewind-button svg {
540
+ width: 24px;
541
+ height: 24px;
542
+ display: block;
747
543
  }
748
544
 
749
- /* */
750
- .video-js.skin_news .vjs-mouse-display{
751
- font-size: 1.6666666667em;
752
- }
753
545
 
754
- .video-js.skin_news .vjs-progress-control:hover .vjs-progress-holder {
755
- font-size: 1em !important;
546
+
547
+ .video-js.skin_cn_news .vjs-subs-caps-button {
548
+ opacity: 1;
756
549
  }
757
550
 
758
- .video-js.skin_news .vjs-button{
759
- width: 5.3em;
551
+
552
+
553
+ .video-js.skin_cn_news .vjs-volume-panel {
554
+ margin: 0;
555
+ display: inline-flex;
556
+ align-items: center;
557
+ align-self: center;
558
+ height: 2.2em;
559
+ min-width: 7em;
560
+ transition: none;
561
+ }
562
+ .video-js.skin_cn_news .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
563
+ width: 0;
564
+ height: 100%;
760
565
  display: flex;
761
566
  align-items: center;
762
- justify-content: center;
567
+ overflow: hidden;
568
+ opacity: 0;
569
+ transition: width 0.15s ease, opacity 0.15s ease;
570
+ }
571
+ .video-js.skin_cn_news .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal,
572
+ .video-js.skin_cn_news .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
573
+ .video-js.skin_cn_news .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal,
574
+ .video-js.skin_cn_news .vjs-volume-panel:focus-within .vjs-volume-control.vjs-volume-horizontal {
575
+ width: 5em;
576
+ opacity: 1;
577
+ }
578
+
579
+ .video-js.skin_cn_news .vjs-volume-bar {
580
+ width: 4em;
581
+ height: 0.3em;
582
+ margin: 0 0.45em;
763
583
  }
764
584
 
765
585
 
766
- .video-js.skin_news .vjs-fullscreen .icon-minimize,
767
- .icon-maximize {
768
- display: block;
769
- height: 32px;
586
+ .video-js.skin_cn_news .vjs-volume-control .vjs-mouse-display {
587
+ display: none !important;
770
588
  }
771
589
 
772
- .video-js.skin_news .vjs-playback-rate .vjs-playback-rate-value{
773
- line-height: 4;
590
+ .video-js.skin_cn_news .vjs-mute-control.vjs-vol-0 ~ .vjs-volume-control .vjs-volume-level {
591
+ width: 0 !important;
774
592
  }
775
593
 
776
- .video-js.skin_news .vjs-fullscreen .icon-maximize,
777
- .icon-minimize {
778
- display: none;
779
- height: 32px;
594
+
595
+ .video-js.skin_cn_news .vjs-custom-control-spacer {
596
+ display: block !important;
597
+ flex: 1 1 auto;
780
598
  }
781
599
 
782
- .video-js.skin_news button.vjs-play-control.vjs-control.vjs-button{
783
- outline: none !important;
600
+
601
+ .video-js.skin_cn_news .vjs-big-play-button {
602
+ display: none;
784
603
  }
785
- .video-js.skin_news .vjs-fullscreen-control .vjs-icon-placeholder:before,
786
- .vjs-icon-fullscreen-enter:before {
787
- /* content: '' !important; */
604
+ .video-js.skin_cn_news .vjs-big-play-button .vjs-icon-placeholder:before {
605
+ position: relative !important;
606
+ display: flex;
607
+ left: 0;
608
+ top: -1px;
788
609
  }
789
-
790
- .video-js.skin_news button.vjs-fullscreen-control.vjs-control.vjs-button {
610
+ .video-js.skin_cn_news.vjs-paused:not(.vjs-seeking):not(.vjs-ended) .vjs-big-play-button {
791
611
  display: flex;
792
612
  justify-content: center;
793
613
  align-items: center;
794
- /* transform: rotate(90deg); */
614
+ position: absolute;
615
+ top: 0;
616
+ left: 0;
617
+ right: 0;
618
+ bottom: 0;
619
+ margin: auto;
620
+ width: 80px;
621
+ height: 80px;
622
+ border: none;
623
+ border-radius: 50%;
624
+ background: rgba(0, 0, 0, 0.55);
625
+ font-size: 5em;
626
+ line-height: 1.3em;
627
+ transform: none !important;
795
628
  }
796
629
 
797
- .video-js.skin_news .vjs-subs-caps-button .vjs-icon-placeholder:before{
798
- display: none;
799
- }
800
- .video-js.skin_news .vjs-volume-panel .vjs-volume-control{
801
- margin-left: -10px;
802
- }
803
630
 
804
- .video-js.skin_news .skipbtn:hover{
805
- cursor: pointer;
631
+ .video-js.skin_cn_news .vjs-progress-control .vjs-progress-holder {
632
+ height: 4px !important;
633
+ margin: 0;
634
+ border-radius: 20px;
635
+ background-color: #393944;
806
636
  }
807
637
 
808
- .video-js.skin_news .rewindbtn:hover{
809
- cursor: pointer;
638
+ .video-js.skin_cn_news .vjs-play-progress {
639
+ background-color: #ffffff;
640
+ border-radius: 20px;
810
641
  }
811
642
 
812
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control{
813
- position: relative;
814
- padding-left: 0;
643
+ .video-js.skin_cn_news .vjs-load-progress,
644
+ .video-js.skin_cn_news .vjs-load-progress div {
645
+ background: rgba(255, 255, 255, 0.15);
646
+ border-radius: 20px;
815
647
  }
816
648
 
817
- .video-js.skin_news.vjs-seeking .vjs-big-play-button{
818
- display: none !important;
819
- }
820
649
 
821
- .video-js.skin_news.vjs-paused .vjs-big-play-button {
822
- width: 90px;
823
- height: 90px;
824
- display: flex;
825
- justify-content: center;
826
- align-items: center;
827
- border-radius: 50%;
828
- position: absolute;
829
- top: 0;
830
- left: 0;
831
- right: 0;
832
- bottom: 0;
833
- margin: auto;
834
- font-size: 6em;
835
- line-height: 1.4em;
836
- border: 0.05em solid;
837
- color: inherit;
650
+ .video-js.skin_cn_news .vjs-play-progress:before {
651
+ content: '';
652
+ width: 16px;
653
+ height: 16px;
654
+ border-radius: 50%;
655
+ background: #ffffff;
656
+ border: 2px solid rgba(0, 0, 0, 0.6);
657
+ box-sizing: border-box;
658
+ box-shadow: 0 0 0 2px #ffffff, 0 0 3px rgba(0, 0, 0, 0.45);
659
+ top: -6px;
660
+ right: -8px;
661
+ position: absolute;
838
662
  }
839
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge{
840
- font-weight: bold;
663
+ .video-js.skin_cn_news .vjs-play-progress .vjs-time-tooltip {
664
+ display: none !important;
841
665
  }
842
666
 
843
- .video-js.skin_news .vjs-menu > ul.vjs-menu-content{
844
- bottom: 2.4em !important;
845
- right: -1em;
846
- z-index: 1;
667
+ .video-js.skin_cn_news .vjs-mouse-display .vjs-time-tooltip {
668
+ background: #ffffff;
669
+ color: #0a0e17;
670
+ font-weight: 700;
671
+ border-radius: 3px;
847
672
  }
848
673
 
849
- .video-js.skin_news .vjs-chromecast-button .vjs-icon-placeholder {
850
- width: 24px !important;
851
- height: 24px !important;
852
- }
853
- .settings-selector-icon>svg{
854
- height: 19px !important;
855
- width: 19px !important;
674
+ .video-js.skin_cn_news .vjs-live-control {
675
+ display: none !important;
856
676
  }
857
-
858
-
859
- .video-js.skin_news button.vjs-rewind-button{
677
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-control {
678
+ display: inline-flex;
679
+ align-items: center;
680
+ align-self: center;
681
+ height: 2.2em;
682
+ gap: 5px;
683
+ width: auto;
684
+ padding: 0 10px;
685
+ border: 1px solid rgba(255, 255, 255, 0.45);
686
+ border-radius: 4px;
860
687
  cursor: pointer;
861
688
  }
862
689
 
863
- .video-js.skin_news .vjs-control-bar .vjs-current-time.vjs-time-control.vjs-control {
864
- padding-right: 0;
690
+ .video-js.skin_cn_news .vjs-seek-to-live-control .vjs-icon-placeholder {
691
+ display: none;
865
692
  }
866
-
867
- .video-js.skin_news .vjs-control-bar .vjs-duration.vjs-time-control.vjs-control {
868
- padding-left: 0;
693
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder {
694
+ display: inline-flex;
695
+ align-items: center;
869
696
  }
870
-
871
- .video-js.skin_news .vjs-control-bar .vjs-time-control.vjs-time-divider {
872
- padding-left: 0;
873
- padding-right: 0;
874
- display: flex;
875
- justify-content: center;
876
- width: min-content;
697
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder::before {
698
+ content: '';
699
+ display: inline-block;
700
+ width: 8px;
701
+ height: 8px;
702
+ border-radius: 50%;
703
+ background: #ff2d2d; /* red live dot */
877
704
  }
878
-
879
- .video-js.skin_news.vjs-live .vjs-control-bar .vjs-time-control {
880
- display: none
705
+ .video-js.skin_cn_news .vjs-seek-to-live-text {
706
+ color: #ffffff;
707
+ font-weight: 700;
708
+ font-size: 12px;
709
+ letter-spacing: 0.03em;
881
710
  }
882
- .video-js.skin_news.vjs-liveui .vjs-control-bar .vjs-time-control {
883
- display: none
711
+
712
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge {
713
+ border-color: transparent;
714
+ }
715
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-seek-to-live-text {
716
+ color: #ff2d2d;
884
717
  }
885
718
 
886
- .video-js.skin_news .vjs-control-bar .vjs-time-control {
887
- display: flex;
719
+ /* ---- time controls ---- */
720
+ .video-js.skin_cn_news .vjs-current-time,
721
+ .video-js.skin_cn_news .vjs-duration,
722
+ .video-js.skin_cn_news .vjs-time-divider {
723
+ display: none !important;
724
+ }
725
+ .video-js.skin_cn_news .vjs-remaining-time.vjs-time-control.vjs-control {
726
+ display: none;
888
727
  align-items: center;
728
+ justify-content: center;
729
+ font-size: 11px;
889
730
  font-weight: 700;
890
- font-size: 12px;
891
- min-width: 1.2em;
731
+ color: #fff;
732
+ padding: 0 6px;
733
+ user-select: none;
892
734
  }
893
735
 
894
- .video-js.skin_news .vjs-remaining-time.vjs-time-control.vjs-control {
895
- display: none;
896
- font-size: 11px;
897
- justify-content: center;
898
- align-items: center;
899
- user-select: none;
736
+
737
+ .video-js.skin_cn_news .vjs-chapter-marker {
738
+ z-index: 2;
739
+ width: var(--vl-chapter-size, 8px);
740
+ height: var(--vl-chapter-size, 8px);
741
+ top: 50%;
742
+ bottom: auto;
743
+ background: var(--vl-chapter-color, #ffffff);
744
+ opacity: var(--vl-chapter-opacity, 1);
745
+ border-radius: 50%;
746
+ box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); /* keep white dots visible on the white bar */
747
+ transform: translate(-50%, -50%) scale(1);
748
+ transition: background-color 0.12s ease;
900
749
  }
901
- .video-js.skin_news.vjs-live .vjs-remaining-time.vjs-time-control.vjs-control{
902
- display: none;
750
+ .video-js.skin_cn_news .vjs-chapter-marker:hover {
751
+ background: var(--vl-chapter-hover, #0a5cff);
752
+ }
753
+ .video-js.skin_cn_news .vjs-chapter-marker.vjs-chapter-marker--active {
754
+ background: var(--vl-chapter-active, #0a5cff);
903
755
  }
904
756
 
905
- .video-js.skin_news button.vjs-subs-caps-button.vjs-menu-button.vjs-menu-button-popup.vjs-button{
906
- height: min-content;
907
- width: min-content;
757
+
758
+ .video-js.skin_cn_news .vjs-chapter-marker .vjs-chapter-marker__icon {
759
+ width: 16px;
760
+ height: 16px;
761
+ bottom: 160%;
762
+ filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
908
763
  }
909
- .video-js.skin_news .vjs-volume-panel.vjs-volume-panel-vertical{
910
- width: 6em;
764
+
765
+
766
+ .video-js.skin_cn_news .vjs-chapter-preview {
767
+ background: var(--vl-chapter-tooltip, #0a5cff);
768
+ border-radius: 6px;
769
+ padding: 8px 10px;
770
+ width: max-content;
771
+ max-width: 300px;
772
+ text-align: left;
773
+ box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
774
+ }
775
+ .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__time {
776
+ color: #ffffff;
777
+ font-size: 13px;
778
+ font-weight: 400;
779
+ margin-bottom: 2px;
780
+ }
781
+ .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__label {
782
+ color: #ffffff;
783
+ font-size: 13px;
784
+ font-weight: 400;
785
+ line-height: 1.3;
786
+ white-space: normal;
787
+ text-align: left;
788
+ }
789
+ .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__pointer {
790
+ border-top-color: var(--vl-chapter-tooltip, #0a5cff);
911
791
  }
912
792
 
913
- .video-js.skin_news .content{
914
- bottom: 3.4rem !important;
915
- right: -4rem !important;
793
+ /* ---- responsive ---- */
794
+ @media (max-width: 576px) {
795
+ .video-js.skin_cn_news .vjs-control-bar {
796
+ height: 3.2em !important;
797
+ padding: 0 8px;
798
+ }
799
+ .video-js.skin_cn_news .vjs-control-bar .vjs-button {
800
+ padding: 0 6px;
801
+ }
802
+ .video-js.skin_cn_news .vjs-control.vjs-button.vjs-picture-in-picture-control {
803
+ display: none !important;
804
+ }
916
805
  }
917
806
 
918
- .setting-icon > svg{
919
- height:18px !important;
807
+
808
+
809
+ .video-js.skin_news .vjs-button>.vjs-icon-placeholder:before {
810
+ font-size: 2.2em;
811
+ line-height: 2.6;
812
+ }
813
+ .video-js.skin_news .vjs-custom-big-mute.vjs-control{
814
+ background: white;
815
+ }
816
+ .video-js.skin_news .vjs-control-bar{
817
+ z-index: 1 !important;
818
+ height: 5em !important;
819
+ background: black !important;
820
+ }
821
+ .video-js.skin_news .vjs-playback-rate .vjs-playback-rate-value{
822
+ display: flex;
823
+ align-items: center;
824
+ justify-content: center;
920
825
  }
921
826
 
922
- .output-overlay{
827
+ .video-js.skin_news .vjs-fade>* {
828
+ visibility: hidden !important;
829
+ opacity: 0 !important;
830
+ transition: visibility 1s, opacity 1s !important;
831
+ }
832
+
833
+ .video-js.skin_news .custom-spaced-progress-bar {
923
834
  position: absolute;
924
- bottom: 0;
925
- height: 100%;
926
835
  width: 100%;
927
- z-index: 0;
928
- border: 0;
929
- pointer-events:none
836
+ display: flex;
837
+ height: 0.5em;
838
+ top: -0.5em;
930
839
  }
931
840
 
932
- .video-js.skin_news iframe{
841
+ .video-js.skin_news .vjs-progress-control {
842
+ /* left: -6px; */
843
+ position: relative;
933
844
  width: 100%;
934
- height: 100%;
845
+ height: 0.5em;
846
+ transition: height 0.1s, top 0.1s;
935
847
  }
936
848
 
937
- .video-js.skin_news .vjs-live-control{
938
- align-items: center;
939
- }
940
- .video-js.skin_news .vjs-live-control.vjs-control .vjs-live-display{
941
- height: 2.2em;
942
- display: flex;
943
- align-items: center;
944
- font-family: monospace;
945
- width: 4em;
946
- justify-content: center;
947
- background: red;
948
- margin: 4px 0px 4px 12px;
849
+
850
+
851
+
852
+ .video-js.skin_news .vjs-custom-control-spacer {
853
+ display: block;
854
+ flex: 1 1 auto;
949
855
  }
950
856
 
951
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control:focus{
952
- text-shadow: none;
857
+ .video-js.skin_news .vjs-progress-control .vjs-progress-holder {
858
+ margin: 0 0px 0 0px;
953
859
  }
954
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-seek-to-live-text {
860
+ .video-js.skin_news .vjs-remaining-time.vjs-time-control.vjs-control{
955
861
  display: none;
956
- font-size: 12px;
957
862
  }
958
863
 
959
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder {
960
- height: 2.2em;
961
- display: inline-flex;
962
- align-items: center;
963
- /* font-family: monospace; */
964
- justify-content: center;
965
- border: 2px solid;
966
- margin: 4px 0px 4px 6px;
967
- white-space: pre;
968
- padding: 0px 6px;
969
- font-size: 1.2em;
864
+ .video-js.skin_news button.vjs-control.vjs-button.vjs-slowmo-button {
865
+ font-size: 14px;
970
866
  font-weight: 500;
971
- color: rgba(255, 255, 2555, 0.7);
867
+ align-self: center;
868
+ height: min-content;
869
+ padding: 5px 2px;
870
+ border-radius: 8px;
871
+ }
972
872
 
973
- letter-spacing: -.1px;
974
- line-height: normal;
975
- text-transform: uppercase;
976
- color: #FFFFFF;
977
- opacity: .7;
978
- font-family: "Proxima Nova";
873
+ .video-js.skin_news .vjs-progress-control .vjs-progress-holder{
874
+ height: 6px !important;
979
875
  }
980
876
 
981
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder:hover{
982
- opacity: 1;
877
+ .video-js.skin_news .vjs-play-progress:before {
878
+ font-size: 1.5em;
879
+ line-height: unset;
880
+ top: -0.3333333333em;
983
881
  }
984
882
 
985
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder::before {
986
- content: "NOT LIVE";
883
+ .video-js.skin_news .vjs-play-progress .vjs-time-tooltip {
884
+ display: none !important;
987
885
  }
988
886
 
989
- .settings-selection.vjs-control.vjs-button{
990
- display: flex !important;
887
+ /* */
888
+ .video-js.skin_news .vjs-mouse-display{
889
+ font-size: 1.6666666667em;
991
890
  }
992
891
 
993
- @media(max-width:576px){
994
- .settings-selection.vjs-control.vjs-button{
995
- display: none !important;
996
- }
892
+ .video-js.skin_news .vjs-progress-control:hover .vjs-progress-holder {
893
+ font-size: 1em !important;
997
894
  }
998
895
 
896
+ .video-js.skin_news .vjs-button{
897
+ width: 5.3em;
898
+ display: flex;
899
+ align-items: center;
900
+ justify-content: center;
901
+ }
999
902
 
1000
- @media(max-width:576px){
1001
- .tvProviderImage{
1002
- display: none
1003
- }
1004
- .video-js.skin_news .vjs-fullscreen .icon-minimize,
1005
- .icon-maximize {
1006
- height: 30px !important;
1007
- }
1008
903
 
1009
- .video-js.skin_news .vjs-fullscreen .icon-maximize,
1010
- .icon-minimize {
1011
- height: 30px !important;
1012
- }
1013
- .video-js.skin_news .vjs-volume-panel.vjs-volume-panel-vertical{
1014
- width: 4.5em;
1015
- }
1016
- .video-js.skin_news button.vjs-fullscreen-control.vjs-control.vjs-button>span.vjs-icon-placeholder::before {
1017
- height: min-content;
1018
- }
904
+ .video-js.skin_news .vjs-fullscreen .icon-minimize,
905
+ .icon-maximize {
906
+ display: block;
907
+ height: 32px;
908
+ }
909
+
910
+ .video-js.skin_news .vjs-playback-rate .vjs-playback-rate-value{
911
+ line-height: 4;
912
+ }
913
+
914
+ .video-js.skin_news .vjs-fullscreen .icon-maximize,
915
+ .icon-minimize {
916
+ display: none;
917
+ height: 32px;
918
+ }
919
+
920
+ .video-js.skin_news button.vjs-play-control.vjs-control.vjs-button{
921
+ outline: none !important;
922
+ }
923
+ .video-js.skin_news .vjs-fullscreen-control .vjs-icon-placeholder:before,
924
+ .vjs-icon-fullscreen-enter:before {
925
+ /* content: '' !important; */
926
+ }
927
+
928
+ .video-js.skin_news button.vjs-fullscreen-control.vjs-control.vjs-button {
929
+ display: flex;
930
+ justify-content: center;
931
+ align-items: center;
932
+ /* transform: rotate(90deg); */
933
+ }
934
+
935
+ .video-js.skin_news .vjs-subs-caps-button .vjs-icon-placeholder:before{
936
+ display: none;
937
+ }
938
+ .video-js.skin_news .vjs-volume-panel .vjs-volume-control{
939
+ margin-left: -10px;
940
+ }
941
+
942
+ .video-js.skin_news .skipbtn:hover{
943
+ cursor: pointer;
944
+ }
945
+
946
+ .video-js.skin_news .rewindbtn:hover{
947
+ cursor: pointer;
948
+ }
949
+
950
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control{
951
+ position: relative;
952
+ padding-left: 0;
953
+ }
954
+
955
+ .video-js.skin_news.vjs-seeking .vjs-big-play-button{
956
+ display: none !important;
957
+ }
958
+
959
+ .video-js.skin_news.vjs-paused .vjs-big-play-button {
960
+ width: 90px;
961
+ height: 90px;
962
+ display: flex;
963
+ justify-content: center;
964
+ align-items: center;
965
+ border-radius: 50%;
966
+ position: absolute;
967
+ top: 0;
968
+ left: 0;
969
+ right: 0;
970
+ bottom: 0;
971
+ margin: auto;
972
+ font-size: 6em;
973
+ line-height: 1.4em;
974
+ border: 0.05em solid;
975
+ color: inherit;
976
+ }
977
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge{
978
+ font-weight: bold;
979
+ }
980
+
981
+ .video-js.skin_news .vjs-menu > ul.vjs-menu-content{
982
+ bottom: 2.4em !important;
983
+ right: -1em;
984
+ z-index: 1;
985
+ }
986
+
987
+ .video-js.skin_news .vjs-chromecast-button .vjs-icon-placeholder {
988
+ width: 24px !important;
989
+ height: 24px !important;
990
+ }
991
+ .settings-selector-icon>svg{
992
+ height: 19px !important;
993
+ width: 19px !important;
994
+ }
995
+
996
+
997
+ .video-js.skin_news button.vjs-rewind-button{
998
+ cursor: pointer;
999
+ }
1000
+
1001
+ .video-js.skin_news .vjs-control-bar .vjs-current-time.vjs-time-control.vjs-control {
1002
+ padding-right: 0;
1003
+ }
1004
+
1005
+ .video-js.skin_news .vjs-control-bar .vjs-duration.vjs-time-control.vjs-control {
1006
+ padding-left: 0;
1007
+ }
1008
+
1009
+ .video-js.skin_news .vjs-control-bar .vjs-time-control.vjs-time-divider {
1010
+ padding-left: 0;
1011
+ padding-right: 0;
1012
+ display: flex;
1013
+ justify-content: center;
1014
+ width: min-content;
1015
+ }
1016
+
1017
+ .video-js.skin_news.vjs-live .vjs-control-bar .vjs-time-control {
1018
+ display: none
1019
+ }
1020
+ .video-js.skin_news.vjs-liveui .vjs-control-bar .vjs-time-control {
1021
+ display: none
1022
+ }
1023
+
1024
+ .video-js.skin_news .vjs-control-bar .vjs-time-control {
1025
+ display: flex;
1026
+ align-items: center;
1027
+ font-weight: 700;
1028
+ font-size: 12px;
1029
+ min-width: 1.2em;
1030
+ }
1031
+
1032
+ .video-js.skin_news .vjs-remaining-time.vjs-time-control.vjs-control {
1033
+ display: none;
1034
+ font-size: 11px;
1035
+ justify-content: center;
1036
+ align-items: center;
1037
+ user-select: none;
1038
+ }
1039
+ .video-js.skin_news.vjs-live .vjs-remaining-time.vjs-time-control.vjs-control{
1040
+ display: none;
1041
+ }
1042
+
1043
+ .video-js.skin_news button.vjs-subs-caps-button.vjs-menu-button.vjs-menu-button-popup.vjs-button{
1044
+ height: min-content;
1045
+ width: min-content;
1046
+ }
1047
+ .video-js.skin_news .vjs-volume-panel.vjs-volume-panel-vertical{
1048
+ width: 6em;
1049
+ }
1050
+
1051
+ .video-js.skin_news .content{
1052
+ bottom: 3.4rem !important;
1053
+ right: -4rem !important;
1054
+ }
1055
+
1056
+ .setting-icon > svg{
1057
+ height:18px !important;
1058
+ }
1059
+
1060
+ .output-overlay{
1061
+ position: absolute;
1062
+ bottom: 0;
1063
+ height: 100%;
1064
+ width: 100%;
1065
+ z-index: 0;
1066
+ border: 0;
1067
+ pointer-events:none
1068
+ }
1069
+
1070
+ .video-js.skin_news iframe{
1071
+ width: 100%;
1072
+ height: 100%;
1073
+ }
1074
+
1075
+ .video-js.skin_news .vjs-live-control{
1076
+ align-items: center;
1077
+ }
1078
+ .video-js.skin_news .vjs-live-control.vjs-control .vjs-live-display{
1079
+ height: 2.2em;
1080
+ display: flex;
1081
+ align-items: center;
1082
+ font-family: monospace;
1083
+ width: 4em;
1084
+ justify-content: center;
1085
+ background: red;
1086
+ margin: 4px 0px 4px 12px;
1087
+ }
1088
+
1089
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control:focus{
1090
+ text-shadow: none;
1091
+ }
1092
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-seek-to-live-text {
1093
+ display: none;
1094
+ font-size: 12px;
1095
+ }
1096
+
1097
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder {
1098
+ height: 2.2em;
1099
+ display: inline-flex;
1100
+ align-items: center;
1101
+ /* font-family: monospace; */
1102
+ justify-content: center;
1103
+ border: 2px solid;
1104
+ margin: 4px 0px 4px 6px;
1105
+ white-space: pre;
1106
+ padding: 0px 6px;
1107
+ font-size: 1.2em;
1108
+ font-weight: 500;
1109
+ color: rgba(255, 255, 2555, 0.7);
1110
+
1111
+ letter-spacing: -.1px;
1112
+ line-height: normal;
1113
+ text-transform: uppercase;
1114
+ color: #FFFFFF;
1115
+ opacity: .7;
1116
+ font-family: "Proxima Nova";
1117
+ }
1118
+
1119
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder:hover{
1120
+ opacity: 1;
1121
+ }
1122
+
1123
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder::before {
1124
+ content: "NOT LIVE";
1125
+ }
1126
+
1127
+ .settings-selection.vjs-control.vjs-button{
1128
+ display: flex !important;
1129
+ }
1130
+
1131
+ @media(max-width:576px){
1132
+ .settings-selection.vjs-control.vjs-button{
1133
+ display: none !important;
1134
+ }
1135
+ }
1136
+
1137
+
1138
+ @media(max-width:576px){
1139
+ .tvProviderImage{
1140
+ display: none
1141
+ }
1142
+ .video-js.skin_news .vjs-fullscreen .icon-minimize,
1143
+ .icon-maximize {
1144
+ height: 30px !important;
1145
+ }
1146
+
1147
+ .video-js.skin_news .vjs-fullscreen .icon-maximize,
1148
+ .icon-minimize {
1149
+ height: 30px !important;
1150
+ }
1151
+ .video-js.skin_news .vjs-volume-panel.vjs-volume-panel-vertical{
1152
+ width: 4.5em;
1153
+ }
1154
+ .video-js.skin_news button.vjs-fullscreen-control.vjs-control.vjs-button>span.vjs-icon-placeholder::before {
1155
+ height: min-content;
1156
+ }
1019
1157
 
1020
1158
  .video-js.skin_news button.vjs-slowmo-button{
1021
1159
  display: none;
@@ -1139,397 +1277,63 @@
1139
1277
  .video-js.skin_news .vjs-text-track-display-ttml span {
1140
1278
  color: white;
1141
1279
  font-size: 13px;
1142
- background-color: black;
1143
- }
1144
- }
1145
-
1146
- .video-js.skin_news .vjs-text-track-display-ttml span {
1147
- color: white;
1148
- font-size: 16px;
1149
- background-color: black;
1150
- }
1151
-
1152
- .video-js.skin_news.vjs-has-started.vjs-user-active.vjs-controls-enabled .vjs-text-track-display-ttml p {
1153
- margin-bottom: 2rem !important;
1154
- }
1155
-
1156
- .video-js.skin_news .vjs-text-track-display-ttml p {
1157
- font-size: 18px !important;
1158
- }
1159
-
1160
-
1161
- .video-js.skin_news .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
1162
- .video-js.skin_news .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
1163
- font-size: 1.2em !important;
1164
- line-height: 1.5em !important;
1165
- padding: 0.2em 0.8em !important;
1166
- }
1167
-
1168
- .video-js.skin_news .vjs-control-bar .vjs-svg-icon{
1169
- content: none !important;
1170
- fill: none !important;
1171
- filter: none !important;
1172
- }
1173
-
1174
- /* svg icons opacity and hover effect */
1175
- .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button svg {
1176
- opacity: 0.7 !important;
1177
- }
1178
-
1179
- .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button:hover svg {
1180
- opacity: 1 !important;
1181
- }
1182
- .video-js.skin_news .vjs-control-bar .vjs-remaining-time.vjs-time-control.vjs-control{
1183
- opacity: 0.7 !important;
1184
- }
1185
- .video-js.skin_news .vjs-control-bar .vjs-remaining-time.vjs-time-control.vjs-control:hover{
1186
- opacity: 1 !important;
1187
- }
1188
-
1189
- .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
1190
- color: rgba(255, 255, 2555, 0.7)!important;
1191
- }
1192
-
1193
- .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
1194
- color: rgba(255, 255, 2555, 1)!important;
1195
- }
1196
-
1197
-
1198
-
1199
-
1200
-
1201
- .video-js.skin_cn_news .vjs-control-bar {
1202
- z-index: 1 !important;
1203
- height: auto !important;
1204
- padding: 0.8em 30px 0.6em;
1205
- background: transparent !important;
1206
- display: flex;
1207
- flex-wrap: wrap;
1208
- align-items: center;
1209
- column-gap: 10px;
1210
- }
1211
-
1212
-
1213
- .video-js.skin_cn_news .vjs-control-bar::before {
1214
- content: '';
1215
- position: absolute;
1216
- left: 0;
1217
- right: 0;
1218
- bottom: 0;
1219
- top: -3em;
1220
- background: linear-gradient(
1221
- to top,
1222
- rgba(0, 0, 0, 0.85) 0%,
1223
- rgba(0, 0, 0, 0.7) 40%,
1224
- rgba(0, 0, 0, 0.55) 70%,
1225
- rgba(0, 0, 0, 0.38) 86%,
1226
- transparent 100%
1227
- );
1228
- pointer-events: none;
1229
- z-index: -1;
1230
- }
1231
-
1232
- .video-js.skin_cn_news .vjs-control-bar .vjs-progress-control {
1233
- order: -1;
1234
- flex: 0 0 100%;
1235
- width: 80%;
1236
- margin: 0 0 5em;
1237
- position: relative;
1238
- }
1239
-
1240
- .video-js.skin_cn_news .vjs-control-bar > .vjs-control,
1241
- .video-js.skin_cn_news .vjs-control-bar > .vjs-button {
1242
- width: auto;
1243
- min-width: 0;
1244
- }
1245
- .video-js.skin_cn_news .vjs-control-bar .vjs-button {
1246
- display: inline-flex;
1247
- align-items: center;
1248
- justify-content: center;
1249
- height: 7em;
1250
- padding: 0 10px;
1251
- color: #fff;
1252
- }
1253
-
1254
- .video-js.skin_cn_news .vjs-svg-icon::before {
1255
- content: none !important;
1256
- }
1257
-
1258
-
1259
- .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon {
1260
- display: inline-flex;
1261
- align-items: center;
1262
- justify-content: center;
1263
- }
1264
- .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon svg,
1265
- .video-js.skin_cn_news .vjs-rewind-button svg {
1266
- width: 24px;
1267
- height: 24px;
1268
- display: block;
1269
- }
1270
-
1271
-
1272
-
1273
- .video-js.skin_cn_news .vjs-subs-caps-button {
1274
- opacity: 1;
1275
- }
1276
-
1277
-
1278
-
1279
- .video-js.skin_cn_news .vjs-volume-panel {
1280
- margin: 0;
1281
- display: inline-flex;
1282
- align-items: center;
1283
- align-self: center;
1284
- height: 2.2em;
1285
- min-width: 7em;
1286
- transition: none;
1287
- }
1288
- .video-js.skin_cn_news .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
1289
- width: 0;
1290
- height: 100%;
1291
- display: flex;
1292
- align-items: center;
1293
- overflow: hidden;
1294
- opacity: 0;
1295
- transition: width 0.15s ease, opacity 0.15s ease;
1296
- }
1297
- .video-js.skin_cn_news .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal,
1298
- .video-js.skin_cn_news .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
1299
- .video-js.skin_cn_news .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal,
1300
- .video-js.skin_cn_news .vjs-volume-panel:focus-within .vjs-volume-control.vjs-volume-horizontal {
1301
- width: 5em;
1302
- opacity: 1;
1303
- }
1304
-
1305
- .video-js.skin_cn_news .vjs-volume-bar {
1306
- width: 4em;
1307
- height: 0.3em;
1308
- margin: 0 0.45em;
1309
- }
1310
-
1311
-
1312
- .video-js.skin_cn_news .vjs-volume-control .vjs-mouse-display {
1313
- display: none !important;
1314
- }
1315
-
1316
- .video-js.skin_cn_news .vjs-mute-control.vjs-vol-0 ~ .vjs-volume-control .vjs-volume-level {
1317
- width: 0 !important;
1318
- }
1319
-
1320
-
1321
- .video-js.skin_cn_news .vjs-custom-control-spacer {
1322
- display: block !important;
1323
- flex: 1 1 auto;
1324
- }
1325
-
1326
-
1327
- .video-js.skin_cn_news .vjs-big-play-button {
1328
- display: none;
1329
- }
1330
- .video-js.skin_cn_news .vjs-big-play-button .vjs-icon-placeholder:before {
1331
- position: relative !important;
1332
- display: flex;
1333
- left: 0;
1334
- top: -1px;
1335
- }
1336
- .video-js.skin_cn_news.vjs-paused:not(.vjs-seeking):not(.vjs-ended) .vjs-big-play-button {
1337
- display: flex;
1338
- justify-content: center;
1339
- align-items: center;
1340
- position: absolute;
1341
- top: 0;
1342
- left: 0;
1343
- right: 0;
1344
- bottom: 0;
1345
- margin: auto;
1346
- width: 80px;
1347
- height: 80px;
1348
- border: none;
1349
- border-radius: 50%;
1350
- background: rgba(0, 0, 0, 0.55);
1351
- font-size: 5em;
1352
- line-height: 1.3em;
1353
- transform: none !important;
1354
- }
1355
-
1356
-
1357
- .video-js.skin_cn_news .vjs-progress-control .vjs-progress-holder {
1358
- height: 4px !important;
1359
- margin: 0;
1360
- border-radius: 20px;
1361
- background-color: #393944;
1362
- }
1363
-
1364
- .video-js.skin_cn_news .vjs-play-progress {
1365
- background-color: #ffffff;
1366
- border-radius: 20px;
1367
- }
1368
-
1369
- .video-js.skin_cn_news .vjs-load-progress,
1370
- .video-js.skin_cn_news .vjs-load-progress div {
1371
- background: rgba(255, 255, 255, 0.15);
1372
- border-radius: 20px;
1373
- }
1374
-
1375
-
1376
- .video-js.skin_cn_news .vjs-play-progress:before {
1377
- content: '';
1378
- width: 16px;
1379
- height: 16px;
1380
- border-radius: 50%;
1381
- background: #ffffff;
1382
- border: 2px solid rgba(0, 0, 0, 0.6);
1383
- box-sizing: border-box;
1384
- box-shadow: 0 0 0 2px #ffffff, 0 0 3px rgba(0, 0, 0, 0.45);
1385
- top: -6px;
1386
- right: -8px;
1387
- position: absolute;
1388
- }
1389
- .video-js.skin_cn_news .vjs-play-progress .vjs-time-tooltip {
1390
- display: none !important;
1391
- }
1392
-
1393
- .video-js.skin_cn_news .vjs-mouse-display .vjs-time-tooltip {
1394
- background: #ffffff;
1395
- color: #0a0e17;
1396
- font-weight: 700;
1397
- border-radius: 3px;
1398
- }
1399
-
1400
- .video-js.skin_cn_news .vjs-live-control {
1401
- display: none !important;
1402
- }
1403
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-control {
1404
- display: inline-flex;
1405
- align-items: center;
1406
- align-self: center;
1407
- height: 2.2em;
1408
- gap: 5px;
1409
- width: auto;
1410
- padding: 0 10px;
1411
- border: 1px solid rgba(255, 255, 255, 0.45);
1412
- border-radius: 4px;
1413
- cursor: pointer;
1414
- }
1415
-
1416
- .video-js.skin_cn_news .vjs-seek-to-live-control .vjs-icon-placeholder {
1417
- display: none;
1418
- }
1419
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder {
1420
- display: inline-flex;
1421
- align-items: center;
1422
- }
1423
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder::before {
1424
- content: '';
1425
- display: inline-block;
1426
- width: 8px;
1427
- height: 8px;
1428
- border-radius: 50%;
1429
- background: #ff2d2d; /* red live dot */
1430
- }
1431
- .video-js.skin_cn_news .vjs-seek-to-live-text {
1432
- color: #ffffff;
1433
- font-weight: 700;
1434
- font-size: 12px;
1435
- letter-spacing: 0.03em;
1436
- }
1437
-
1438
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge {
1439
- border-color: transparent;
1440
- }
1441
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-seek-to-live-text {
1442
- color: #ff2d2d;
1443
- }
1444
-
1445
- /* ---- time controls ---- */
1446
- .video-js.skin_cn_news .vjs-current-time,
1447
- .video-js.skin_cn_news .vjs-duration,
1448
- .video-js.skin_cn_news .vjs-time-divider {
1449
- display: none !important;
1450
- }
1451
- .video-js.skin_cn_news .vjs-remaining-time.vjs-time-control.vjs-control {
1452
- display: none;
1453
- align-items: center;
1454
- justify-content: center;
1455
- font-size: 11px;
1456
- font-weight: 700;
1457
- color: #fff;
1458
- padding: 0 6px;
1459
- user-select: none;
1280
+ background-color: black;
1281
+ }
1460
1282
  }
1461
1283
 
1462
-
1463
- .video-js.skin_cn_news .vjs-chapter-marker {
1464
- z-index: 2;
1465
- width: var(--vl-chapter-size, 8px);
1466
- height: var(--vl-chapter-size, 8px);
1467
- top: 50%;
1468
- bottom: auto;
1469
- background: var(--vl-chapter-color, #ffffff);
1470
- opacity: var(--vl-chapter-opacity, 1);
1471
- border-radius: 50%;
1472
- box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); /* keep white dots visible on the white bar */
1473
- transform: translate(-50%, -50%) scale(1);
1474
- transition: background-color 0.12s ease;
1284
+ .video-js.skin_news .vjs-text-track-display-ttml span {
1285
+ color: white;
1286
+ font-size: 16px;
1287
+ background-color: black;
1475
1288
  }
1476
- .video-js.skin_cn_news .vjs-chapter-marker:hover {
1477
- background: var(--vl-chapter-hover, #0a5cff);
1289
+
1290
+ .video-js.skin_news.vjs-has-started.vjs-user-active.vjs-controls-enabled .vjs-text-track-display-ttml p {
1291
+ margin-bottom: 2rem !important;
1478
1292
  }
1479
- .video-js.skin_cn_news .vjs-chapter-marker.vjs-chapter-marker--active {
1480
- background: var(--vl-chapter-active, #0a5cff);
1293
+
1294
+ .video-js.skin_news .vjs-text-track-display-ttml p {
1295
+ font-size: 18px !important;
1481
1296
  }
1482
1297
 
1483
1298
 
1484
- .video-js.skin_cn_news .vjs-chapter-marker .vjs-chapter-marker__icon {
1485
- width: 16px;
1486
- height: 16px;
1487
- bottom: 160%;
1488
- filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
1299
+ .video-js.skin_news .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
1300
+ .video-js.skin_news .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
1301
+ font-size: 1.2em !important;
1302
+ line-height: 1.5em !important;
1303
+ padding: 0.2em 0.8em !important;
1489
1304
  }
1490
1305
 
1306
+ .video-js.skin_news .vjs-control-bar .vjs-svg-icon{
1307
+ content: none !important;
1308
+ fill: none !important;
1309
+ filter: none !important;
1310
+ }
1491
1311
 
1492
- .video-js.skin_cn_news .vjs-chapter-preview {
1493
- background: var(--vl-chapter-tooltip, #0a5cff);
1494
- border-radius: 6px;
1495
- padding: 8px 10px;
1496
- width: max-content;
1497
- max-width: 300px;
1498
- text-align: left;
1499
- box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
1312
+ /* svg icons opacity and hover effect */
1313
+ .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button svg {
1314
+ opacity: 0.7 !important;
1500
1315
  }
1501
- .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__time {
1502
- color: #ffffff;
1503
- font-size: 13px;
1504
- font-weight: 400;
1505
- margin-bottom: 2px;
1316
+
1317
+ .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button:hover svg {
1318
+ opacity: 1 !important;
1506
1319
  }
1507
- .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__label {
1508
- color: #ffffff;
1509
- font-size: 13px;
1510
- font-weight: 400;
1511
- line-height: 1.3;
1512
- white-space: normal;
1513
- text-align: left;
1320
+ .video-js.skin_news .vjs-control-bar .vjs-remaining-time.vjs-time-control.vjs-control{
1321
+ opacity: 0.7 !important;
1514
1322
  }
1515
- .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__pointer {
1516
- border-top-color: var(--vl-chapter-tooltip, #0a5cff);
1323
+ .video-js.skin_news .vjs-control-bar .vjs-remaining-time.vjs-time-control.vjs-control:hover{
1324
+ opacity: 1 !important;
1517
1325
  }
1518
1326
 
1519
- /* ---- responsive ---- */
1520
- @media (max-width: 576px) {
1521
- .video-js.skin_cn_news .vjs-control-bar {
1522
- height: 3.2em !important;
1523
- padding: 0 8px;
1524
- }
1525
- .video-js.skin_cn_news .vjs-control-bar .vjs-button {
1526
- padding: 0 6px;
1527
- }
1528
- .video-js.skin_cn_news .vjs-control.vjs-button.vjs-picture-in-picture-control {
1529
- display: none !important;
1530
- }
1327
+ .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
1328
+ color: rgba(255, 255, 2555, 0.7)!important;
1329
+ }
1330
+
1331
+ .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
1332
+ color: rgba(255, 255, 2555, 1)!important;
1531
1333
  }
1532
1334
 
1335
+
1336
+
1533
1337
  .video-js.skin_news_live .vjs-button>.vjs-icon-placeholder:before {
1534
1338
  font-size: 2.2em;
1535
1339
  line-height: 2.6;
@@ -1921,117 +1725,313 @@
1921
1725
  .video-js.skin_news_live .vjs-seek-to-live-text{
1922
1726
  font-size: 12px;
1923
1727
  }
1924
- .video-js.skin_news_live .vjs-progress-control .vjs-progress-holder {
1925
- margin: 0 12px 0 12px;
1728
+ .video-js.skin_news_live .vjs-progress-control .vjs-progress-holder {
1729
+ margin: 0 12px 0 12px;
1730
+ }
1731
+ }
1732
+ .video-js.skin_news_live.vjs-paused .vjs-big-play-button {
1733
+ width: 90px;
1734
+ height: 90px;
1735
+ display: flex;
1736
+ justify-content: center;
1737
+ align-items: center;
1738
+ border-radius: 50%;
1739
+ position: absolute;
1740
+ top: 0;
1741
+ left: 0;
1742
+ right: 0;
1743
+ bottom: 0;
1744
+ margin: auto;
1745
+ font-size: 6em;
1746
+ line-height: 1.4em;
1747
+ }
1748
+
1749
+ .video-js.skin_news_live .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:hover .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1750
+ display: flex;
1751
+ justify-content: center;
1752
+ align-items: center;
1753
+ height: 100%;
1754
+ transition: width 0.1s;
1755
+ }
1756
+
1757
+ .video-js.skin_news_live .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1758
+ display: flex;
1759
+ justify-content: center;
1760
+ align-items: center;
1761
+ height: 100%;
1762
+ transition: width 0.1s;
1763
+ }
1764
+ .video-js.skin_news_live.vjs-fullscreen .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
1765
+ display: none !important;
1766
+ }
1767
+
1768
+ @media (max-width: 576px) {
1769
+ .video-js.skin_news_live .vjs-progress-control .vjs-progress-holder{
1770
+ height: 5px !important;
1771
+ }
1772
+ .video-js.skin_news_live button.vjs-big-play-button {
1773
+ width: 50px !important;
1774
+ height: 50px !important;
1775
+ font-size: 2.1rem !important;
1776
+ }
1777
+
1778
+ .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
1779
+ display: none;
1780
+ }
1781
+ .video-js.skin_news_live .vjs-menu > ul.vjs-menu-content {
1782
+ bottom: 2.4em !important;
1783
+ right: -1em;
1784
+ z-index: 1;
1785
+ }
1786
+ .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
1787
+ display: none !important;
1788
+ }
1789
+
1790
+ .video-js.skin_news_live .vjs-text-track-display-ttml span {
1791
+ color: white !important;
1792
+ font-size: 13px !important;
1793
+ background-color: black !important;
1794
+ }
1795
+ }
1796
+
1797
+ .video-js.skin_news_live .vjs-text-track-display-ttml {
1798
+ width: 100% !important;
1799
+ }
1800
+
1801
+ .video-js.skin_news_live .vjs-text-track-display-ttml span {
1802
+ color: white !important;
1803
+ font-size: 16px !important;
1804
+ background-color: black !important;
1805
+ }
1806
+
1807
+ .video-js.skin_news_live.vjs-has-started.vjs-user-active.vjs-controls-enabled .vjs-text-track-display-ttml p {
1808
+ margin-bottom: 2rem !important;
1809
+ }
1810
+
1811
+ .video-js.skin_news_live .vjs-text-track-display-ttml p {
1812
+ font-size: 18px !important;
1813
+ }
1814
+
1815
+
1816
+ .video-js.skin_news_live .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
1817
+ .video-js.skin_news_live .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
1818
+ font-size: 1.2em !important;
1819
+ line-height: 1.5em !important;
1820
+ padding: 0.2em 0.8em !important;
1821
+ }
1822
+
1823
+ .video-js.skin_news_live .vjs-control-bar .vjs-svg-icon{
1824
+ content: none !important;
1825
+ fill: none !important;
1826
+ filter: none !important;
1827
+ }
1828
+
1829
+ .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
1830
+ color: rgba(255, 255, 2555, 0.7)!important;
1831
+ }
1832
+
1833
+ .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
1834
+ color: rgba(255, 255, 2555, 1)!important;
1835
+ }
1836
+
1837
+
1838
+
1839
+ .video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control {
1840
+ height: 0.7em;
1841
+ position: absolute;
1842
+ top: -0.7em;
1843
+ width: 100%;
1844
+ }
1845
+
1846
+ .video-js.skin_vlone .vjs-progress-holder.vjs-slider.vjs-slider-horizontal {
1847
+ height: 100%;
1848
+ }
1849
+
1850
+ .video-js.skin_vlone .vjs-playback-rate .vjs-playback-rate-value{
1851
+ line-height: 2.5;
1852
+ }
1853
+
1854
+ .video-js.skin_vlone button.vjs-control.vjs-button.vjs-rewind-button > svg{
1855
+ height: 19px;
1856
+ width: 19px;
1857
+ cursor: pointer;
1858
+ }
1859
+ .video-js.skin_vlone .vjs-control {
1860
+ user-select: none;
1861
+ }
1862
+ .video-js.skin_vlone .vjs-custom-control-spacer{
1863
+ user-select: none;
1864
+ }
1865
+
1866
+ .video-js.skin_vlone button.vjs-control.vjs-button.vjs-skip-button > svg{
1867
+ height: 19px;
1868
+ width: 19px;
1869
+ cursor: pointer;
1870
+ }
1871
+
1872
+ .video-js.skin_vlone .vjs-play-progress:before {
1873
+ display: none !important;
1874
+ }
1875
+
1876
+ .video-js.skin_vlone .vjs-progress-control>.vjs-progress-holder.vjs-slider {
1877
+ margin: 0 !important;
1878
+
1879
+ }
1880
+
1881
+
1882
+ .video-js.skin_vlone .vjs-custom-control-spacer {
1883
+ display: block;
1884
+ flex: 1 1 auto;
1885
+ }
1886
+
1887
+ .video-js.skin_vlone .vjs-volume-panel.vjs-volume-panel-vertical{
1888
+ z-index: 1;
1889
+ }
1890
+
1891
+
1892
+ .video-js.skin_vlone .vjs-control-bar {
1893
+ height: 40px;
1926
1894
  }
1895
+
1896
+ .video-js.skin_vlone .vjs-big-play-button .vjs-icon-placeholder:before,
1897
+ .vjs-button>.vjs-icon-placeholder:before {
1898
+ position: relative !important;
1927
1899
  }
1928
- .video-js.skin_news_live.vjs-paused .vjs-big-play-button {
1929
- width: 90px;
1930
- height: 90px;
1931
- display: flex;
1932
- justify-content: center;
1933
- align-items: center;
1934
- border-radius: 50%;
1935
- position: absolute;
1936
- top: 0;
1937
- left: 0;
1938
- right: 0;
1939
- bottom: 0;
1940
- margin: auto;
1941
- font-size: 6em;
1942
- line-height: 1.4em;
1900
+ .video-js.skin_vlone .vjs-big-play-button .vjs-icon-placeholder:before{
1901
+ display: flex;
1902
+ left: 0px;
1903
+ top: -1px;
1943
1904
  }
1944
1905
 
1945
- .video-js.skin_news_live .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:hover .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1946
- display: flex;
1947
- justify-content: center;
1948
- align-items: center;
1949
- height: 100%;
1950
- transition: width 0.1s;
1906
+ .vjs-button>.vjs-icon-placeholder:before {
1907
+ font-size: 2em !important;
1951
1908
  }
1952
1909
 
1953
- .video-js.skin_news_live .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1954
- display: flex;
1955
- justify-content: center;
1956
- align-items: center;
1957
- height: 100%;
1958
- transition: width 0.1s;
1910
+ .video-js.skin_vlone .vjs-control {
1911
+ width: 4.3em;
1959
1912
  }
1960
- .video-js.skin_news_live.vjs-fullscreen .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
1961
- display: none !important;
1913
+
1914
+ .vjs-menu-button-popup .vjs-menu {
1915
+ bottom: 10px !important;
1962
1916
  }
1963
1917
 
1964
- @media (max-width: 576px) {
1965
- .video-js.skin_news_live .vjs-progress-control .vjs-progress-holder{
1966
- height: 5px !important;
1967
- }
1968
- .video-js.skin_news_live button.vjs-big-play-button {
1969
- width: 50px !important;
1970
- height: 50px !important;
1971
- font-size: 2.1rem !important;
1972
- }
1973
1918
 
1974
- .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
1975
- display: none;
1976
- }
1977
- .video-js.skin_news_live .vjs-menu > ul.vjs-menu-content {
1978
- bottom: 2.4em !important;
1979
- right: -1em;
1980
- z-index: 1;
1919
+ .video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control:hover {
1920
+ height: 1.3em;
1921
+ position: absolute;
1922
+ top: -1.3em;
1923
+ transition: height 0.3s, top 0.3s;
1981
1924
  }
1982
- .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
1925
+
1926
+
1927
+ .video-js.skin_vlone.vjs-live .vjs-time-control{
1983
1928
  display: none !important;
1984
- }
1929
+ }
1985
1930
 
1986
- .video-js.skin_news_live .vjs-text-track-display-ttml span {
1987
- color: white !important;
1988
- font-size: 13px !important;
1989
- background-color: black !important;
1990
- }
1931
+ .video-js.skin_vlone .vjs-time-control {
1932
+ display: block;
1933
+ }
1934
+ .video-js.skin_vlone .vjs-remaining-time {
1935
+ display: none;
1991
1936
  }
1992
1937
 
1993
- .video-js.skin_news_live .vjs-text-track-display-ttml {
1994
- width: 100% !important;
1938
+ .video-js.skin_vlone .vjs-remaining-time.vjs-time-control.vjs-control>span.vjs-remaining-time-display {
1939
+ line-height: 3.5em;
1940
+ font-size: 1.1em;
1941
+ min-width: 4em;
1995
1942
  }
1996
1943
 
1997
- .video-js.skin_news_live .vjs-text-track-display-ttml span {
1998
- color: white !important;
1999
- font-size: 16px !important;
2000
- background-color: black !important;
1944
+ .video-js.skin_vlone .vjs-time-divider > div{
1945
+ display: flex;
1946
+ justify-content: center;
2001
1947
  }
2002
1948
 
2003
- .video-js.skin_news_live.vjs-has-started.vjs-user-active.vjs-controls-enabled .vjs-text-track-display-ttml p {
2004
- margin-bottom: 2rem !important;
1949
+ .video-js.skin_vlone .vjs-live-control{
1950
+ align-items: center;
1951
+ }
1952
+ .video-js.skin_vlone .vjs-live-display{
1953
+ height: 2.2em;
1954
+ display: flex;
1955
+ align-items: center;
1956
+ font-family: monospace;
1957
+ width: 4em;
1958
+ justify-content: center;
1959
+ background: red;
1960
+ margin: 4px 0px 4px 12px;
1961
+ }
1962
+ .video-js.skin_vlone .vjs-live-display:hover{
1963
+ cursor: pointer;
2005
1964
  }
2006
1965
 
2007
- .video-js.skin_news_live .vjs-text-track-display-ttml p {
2008
- font-size: 18px !important;
1966
+ .video-js.skin_vlone .vjs-time-control {
1967
+ line-height: 3.5em !important;
1968
+ font-size: 1.1em !important;
1969
+ width: min-content !important;
1970
+ min-width: 1.5em;
1971
+ padding: 0 !important;
1972
+ user-select: none;
2009
1973
  }
2010
1974
 
1975
+ .video-js.skin_vlone .vjs-current-time.vjs-time-control.vjs-control {
1976
+ margin-left: 16px !important;
1977
+ }
2011
1978
 
2012
- .video-js.skin_news_live .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
2013
- .video-js.skin_news_live .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
1979
+ .video-js.skin_vlone .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
1980
+ .video-js.skin_vlone .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
2014
1981
  font-size: 1.2em !important;
2015
1982
  line-height: 1.5em !important;
2016
1983
  padding: 0.2em 0.8em !important;
2017
1984
  }
2018
1985
 
2019
- .video-js.skin_news_live .vjs-control-bar .vjs-svg-icon{
2020
- content: none !important;
2021
- fill: none !important;
2022
- filter: none !important;
2023
- }
2024
1986
 
2025
- .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
2026
- color: rgba(255, 255, 2555, 0.7)!important;
1987
+ /* Big play */
1988
+ .video-js.skin_vlone.vjs-paused .vjs-big-play-button {
1989
+ width: 80px;
1990
+ height: 80px;
1991
+ display: flex;
1992
+ justify-content: center;
1993
+ align-items: center;
1994
+ border: none;
1995
+ position: absolute;
1996
+ top: 0;
1997
+ left: 0;
1998
+ right: 0;
1999
+ bottom: 0;
2000
+ margin: auto;
2001
+ font-size: 5em;
2002
+ line-height: 1.3em;
2003
+ transform: none !important;
2004
+ border-radius: 1.3em;
2027
2005
  }
2028
-
2029
- .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
2030
- color: rgba(255, 255, 2555, 1)!important;
2006
+ .video-js.skin_vlone .ssai-ad-container{
2007
+ position: absolute;
2008
+ bottom: 4px;
2031
2009
  }
2010
+
2011
+ @media(max-width:600px){
2012
+ .video-js.skin_vlone button.vjs-big-play-button {
2013
+ width: 50px !important;
2014
+ height: 50px !important;
2015
+ font-size: 2.1rem !important;
2016
+ }
2032
2017
 
2018
+ .video-js.skin_vlone .ssai-ad-container {
2019
+ position: absolute;
2020
+ bottom: 2px;
2021
+ }
2022
+ .video-js.skin_vlone .vjs-playback-rate .vjs-playback-rate-value {
2023
+ display: none;
2024
+ }
2033
2025
 
2026
+ .video-js.skin_vlone button.vjs-control.vjs-button.vjs-rewind-button>svg {
2027
+ /* display: none; */
2028
+ }
2034
2029
 
2030
+ .video-js.skin_vlone button.vjs-control.vjs-button.vjs-skip-button>svg {
2031
+ /* display: none; */
2032
+ }
2033
+ }
2034
+
2035
2035
  /* CSS for videojs-dvr-seekbar */
2036
2036
 
2037
2037
  .video-js.vjs-dvr-seekbar {
@@ -2213,6 +2213,7 @@
2213
2213
 
2214
2214
 
2215
2215
 
2216
+
2216
2217
  .video-js .multicamera-parent.default{
2217
2218
  height: 345px;
2218
2219
  position: absolute;
@@ -2293,8 +2294,6 @@
2293
2294
 
2294
2295
 
2295
2296
 
2296
-
2297
-
2298
2297
  .vjs-custom-big-mute.vjs-control{
2299
2298
  position: absolute;
2300
2299
  align-items: center;
@@ -2343,6 +2342,7 @@
2343
2342
  width: 22px;
2344
2343
  }
2345
2344
 
2345
+
2346
2346
  /* nextep — up-next card (centered in player, scales with player size) */
2347
2347
  .video-js:has(.next-ep-preview),
2348
2348
  .video-js:has(.next-ep-preview-player-thumb) {
@@ -2631,6 +2631,38 @@
2631
2631
  z-index: 30 !important;
2632
2632
  }
2633
2633
 
2634
+ /* a wrapper element that tracks the mouse vertically */
2635
+ .vjs-thumbnail-holder {
2636
+ position: absolute;
2637
+ left: -1000px;
2638
+ }
2639
+
2640
+ /* the thumbnail image itself */
2641
+ .vjs-thumbnail {
2642
+ position: absolute;
2643
+ left: 0;
2644
+ bottom: 1.3em;
2645
+ opacity: 0;
2646
+ transition: opacity .2s ease;
2647
+ -webkit-transition: opacity .2s ease;
2648
+ -moz-transition: opacity .2s ease;
2649
+ -mz-transition: opacity .2s ease;
2650
+ }
2651
+
2652
+ /* fade in the thumbnail when hovering over the progress bar */
2653
+ /* .fake-active is needed for Android only. It's removed on touchend/touchecancel */
2654
+ .vjs-progress-control:hover .vjs-thumbnail,
2655
+ .vjs-progress-control.fake-active .vjs-thumbnail,
2656
+ .vjs-progress-control:active .vjs-thumbnail {
2657
+ opacity: 1;
2658
+ }
2659
+
2660
+ /* ... but hide the thumbnail when hovering directly over it */
2661
+ .vjs-progress-control:hover .vjs-thumbnail:hover,
2662
+ .vjs-progress-control:active .vjs-thumbnail:active {
2663
+ opacity: 0;
2664
+ }
2665
+
2634
2666
  .video-js.vjs-quality-menu {
2635
2667
  display: block;
2636
2668
  }
@@ -2701,38 +2733,6 @@
2701
2733
  -webkit-animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite;
2702
2734
  animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite;
2703
2735
  }
2704
- /* a wrapper element that tracks the mouse vertically */
2705
- .vjs-thumbnail-holder {
2706
- position: absolute;
2707
- left: -1000px;
2708
- }
2709
-
2710
- /* the thumbnail image itself */
2711
- .vjs-thumbnail {
2712
- position: absolute;
2713
- left: 0;
2714
- bottom: 1.3em;
2715
- opacity: 0;
2716
- transition: opacity .2s ease;
2717
- -webkit-transition: opacity .2s ease;
2718
- -moz-transition: opacity .2s ease;
2719
- -mz-transition: opacity .2s ease;
2720
- }
2721
-
2722
- /* fade in the thumbnail when hovering over the progress bar */
2723
- /* .fake-active is needed for Android only. It's removed on touchend/touchecancel */
2724
- .vjs-progress-control:hover .vjs-thumbnail,
2725
- .vjs-progress-control.fake-active .vjs-thumbnail,
2726
- .vjs-progress-control:active .vjs-thumbnail {
2727
- opacity: 1;
2728
- }
2729
-
2730
- /* ... but hide the thumbnail when hovering directly over it */
2731
- .vjs-progress-control:hover .vjs-thumbnail:hover,
2732
- .vjs-progress-control:active .vjs-thumbnail:active {
2733
- opacity: 0;
2734
- }
2735
-
2736
2736
  .vjs-poster {
2737
2737
  display: inline-block;
2738
2738
  vertical-align: middle;