@viewlift/player-backup 2.0.335-backup → 2.0.336-backup

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/cjs/bundle.css +550 -550
  2. package/esm/bundle.css +550 -550
  3. package/package.json +1 -1
package/cjs/bundle.css CHANGED
@@ -4,6 +4,207 @@
4
4
 
5
5
 
6
6
 
7
+ .video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control {
8
+ height: 0.7em !important;
9
+ position: absolute !important;
10
+ top: -0.7em !important;
11
+ width: 100% !important;
12
+ }
13
+
14
+ .video-js.skin_vlone .vjs-progress-holder.vjs-slider.vjs-slider-horizontal {
15
+ height: 100%;
16
+ }
17
+
18
+ .video-js.skin_vlone .vjs-playback-rate .vjs-playback-rate-value{
19
+ line-height: 2.5;
20
+ }
21
+
22
+ .video-js.skin_vlone button.vjs-control.vjs-button.vjs-rewind-button > svg{
23
+ height: 19px;
24
+ width: 19px;
25
+ cursor: pointer;
26
+ }
27
+ .video-js.skin_vlone .vjs-control {
28
+ user-select: none;
29
+ }
30
+ .video-js.skin_vlone .vjs-custom-control-spacer{
31
+ user-select: none;
32
+ }
33
+
34
+ .video-js.skin_vlone button.vjs-control.vjs-button.vjs-skip-button > svg{
35
+ height: 19px;
36
+ width: 19px;
37
+ cursor: pointer;
38
+ }
39
+
40
+ .video-js.skin_vlone .vjs-play-progress:before {
41
+ display: none !important;
42
+ }
43
+
44
+ .video-js.skin_vlone .vjs-progress-control>.vjs-progress-holder.vjs-slider {
45
+ margin: 0 !important;
46
+
47
+ }
48
+
49
+
50
+ .video-js.skin_vlone .vjs-custom-control-spacer {
51
+ display: block;
52
+ flex: 1 1 auto;
53
+ }
54
+
55
+ .video-js.skin_vlone .vjs-volume-panel.vjs-volume-panel-vertical{
56
+ z-index: 1;
57
+ }
58
+
59
+
60
+ .video-js.skin_vlone .vjs-control-bar {
61
+ height: 40px;
62
+ }
63
+
64
+ .video-js.skin_vlone .vjs-big-play-button .vjs-icon-placeholder:before,
65
+ .vjs-button>.vjs-icon-placeholder:before {
66
+ position: relative !important;
67
+ }
68
+ .video-js.skin_vlone .vjs-big-play-button .vjs-icon-placeholder:before{
69
+ display: flex;
70
+ left: 0px;
71
+ top: -1px;
72
+ }
73
+
74
+ .vjs-button>.vjs-icon-placeholder:before {
75
+ font-size: 2em !important;
76
+ }
77
+
78
+ .video-js.skin_vlone .vjs-control {
79
+ width: 4.3em;
80
+ }
81
+
82
+ .vjs-menu-button-popup .vjs-menu {
83
+ bottom: 10px !important;
84
+ }
85
+
86
+
87
+ .video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control:hover {
88
+ height: 1.3em !important;
89
+ position: absolute !important;
90
+ top: -1.3em !important;
91
+ transition: height 0.3s, top 0.3s !important;
92
+ }
93
+
94
+
95
+ .video-js.skin_vlone.vjs-live .vjs-time-control{
96
+ display: none !important;
97
+ }
98
+
99
+ .video-js.skin_vlone .vjs-time-control {
100
+ display: block;
101
+ }
102
+ .video-js.skin_vlone .vjs-remaining-time {
103
+ display: none;
104
+ }
105
+
106
+ .video-js.skin_vlone .vjs-remaining-time.vjs-time-control.vjs-control>span.vjs-remaining-time-display {
107
+ line-height: 3.5em;
108
+ font-size: 1.1em;
109
+ min-width: 4em;
110
+ }
111
+
112
+ .video-js.skin_vlone .vjs-time-divider > div{
113
+ display: flex;
114
+ justify-content: center;
115
+ }
116
+
117
+ .video-js.skin_vlone .vjs-live-control{
118
+ align-items: center;
119
+ }
120
+ .video-js.skin_vlone .vjs-live-display{
121
+ height: 2.2em;
122
+ display: flex;
123
+ align-items: center;
124
+ font-family: monospace;
125
+ width: 4em;
126
+ justify-content: center;
127
+ background: red;
128
+ margin: 4px 0px 4px 12px;
129
+ }
130
+ .video-js.skin_vlone .vjs-live-display.vjs-behind-live{
131
+ background: #6b6b6b;
132
+ }
133
+ .video-js.skin_vlone .vjs-live-display:hover{
134
+ cursor: pointer;
135
+ }
136
+
137
+ .video-js.skin_vlone .vjs-time-control {
138
+ line-height: 3.5em !important;
139
+ font-size: 1.1em !important;
140
+ width: min-content !important;
141
+ min-width: 1.5em;
142
+ padding: 0 !important;
143
+ user-select: none;
144
+ }
145
+
146
+ .video-js.skin_vlone .vjs-current-time.vjs-time-control.vjs-control {
147
+ margin-left: 16px !important;
148
+ }
149
+
150
+ .video-js.skin_vlone .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
151
+ .video-js.skin_vlone .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
152
+ font-size: 1.2em !important;
153
+ line-height: 1.5em !important;
154
+ padding: 0.2em 0.8em !important;
155
+ }
156
+
157
+
158
+ /* Big play */
159
+ .video-js.skin_vlone.vjs-paused .vjs-big-play-button {
160
+ width: 80px;
161
+ height: 80px;
162
+ display: flex;
163
+ justify-content: center;
164
+ align-items: center;
165
+ border: none;
166
+ position: absolute;
167
+ top: 0;
168
+ left: 0;
169
+ right: 0;
170
+ bottom: 0;
171
+ margin: auto;
172
+ font-size: 5em;
173
+ line-height: 1.3em;
174
+ transform: none !important;
175
+ border-radius: 1.3em;
176
+ }
177
+ .video-js.skin_vlone .ssai-ad-container{
178
+ position: absolute;
179
+ bottom: 4px;
180
+ }
181
+
182
+ @media(max-width:600px){
183
+ .video-js.skin_vlone button.vjs-big-play-button {
184
+ width: 50px !important;
185
+ height: 50px !important;
186
+ font-size: 2.1rem !important;
187
+ }
188
+
189
+ .video-js.skin_vlone .ssai-ad-container {
190
+ position: absolute;
191
+ bottom: 2px;
192
+ }
193
+ .video-js.skin_vlone .vjs-playback-rate .vjs-playback-rate-value {
194
+ display: none;
195
+ }
196
+
197
+ .video-js.skin_vlone button.vjs-control.vjs-button.vjs-rewind-button>svg {
198
+ /* display: none; */
199
+ }
200
+
201
+ .video-js.skin_vlone button.vjs-control.vjs-button.vjs-skip-button>svg {
202
+ /* display: none; */
203
+ }
204
+ }
205
+ .video-js .vjs-control-bar .vjs-subs-caps-button .vjs-menu .vjs-selected {
206
+ text-decoration: underline;
207
+ }
7
208
  .video-js.skin_news .vjs-button>.vjs-icon-placeholder:before {
8
209
  font-size: 2.2em;
9
210
  line-height: 2.6;
@@ -532,377 +733,44 @@
532
733
 
533
734
 
534
735
 
535
-
536
- .video-js.skin_cn_news .vjs-control-bar {
537
- z-index: 1 !important;
538
- height: auto !important;
539
- padding: 0.8em 30px 0.6em;
540
- background: transparent !important;
736
+ .video-js.skin_news_live .vjs-button>.vjs-icon-placeholder:before {
737
+ font-size: 2.2em;
738
+ line-height: 2.6;
739
+ }
740
+ .video-js.skin_news_live .vjs-custom-big-mute.vjs-control{
741
+ background: #fcb700;
742
+ }
743
+ .video-js.skin_news_live .vjs-control-bar{
744
+ z-index: 1 !important;
745
+ height: 5em !important;
746
+ background: black !important;
747
+ }
748
+ .video-js.skin_news_live .vjs-playback-rate .vjs-playback-rate-value{
541
749
  display: flex;
542
- flex-wrap: wrap;
543
750
  align-items: center;
544
- column-gap: 10px;
751
+ justify-content: center;
545
752
  }
546
753
 
754
+ .video-js.skin_news_live .vjs-fade>* {
755
+ visibility: hidden !important;
756
+ opacity: 0 !important;
757
+ transition: visibility 1s, opacity 1s !important;
758
+ }
547
759
 
548
- .video-js.skin_cn_news .vjs-control-bar::before {
549
- content: '';
760
+ .video-js.skin_news_live .custom-spaced-progress-bar {
550
761
  position: absolute;
551
- left: 0;
552
- right: 0;
553
- bottom: 0;
554
- top: -3em;
555
- background: linear-gradient(
556
- to top,
557
- rgba(0, 0, 0, 0.85) 0%,
558
- rgba(0, 0, 0, 0.7) 40%,
559
- rgba(0, 0, 0, 0.55) 70%,
560
- rgba(0, 0, 0, 0.38) 86%,
561
- transparent 100%
562
- );
563
- pointer-events: none;
564
- z-index: -1;
762
+ width: 100%;
763
+ display: flex;
764
+ height: 0.5em;
765
+ top: -0.5em;
565
766
  }
566
767
 
567
- .video-js.skin_cn_news .vjs-control-bar .vjs-progress-control {
568
- order: -1;
569
- flex: 0 0 100%;
570
- width: 80%;
571
- margin: 0 0 5em;
768
+ .video-js.skin_news_live .vjs-progress-control {
769
+ /* left: -6px; */
572
770
  position: relative;
573
- }
574
-
575
- .video-js.skin_cn_news .vjs-control-bar > .vjs-control,
576
- .video-js.skin_cn_news .vjs-control-bar > .vjs-button {
577
- width: auto;
578
- min-width: 0;
579
- }
580
- .video-js.skin_cn_news .vjs-control-bar .vjs-button {
581
- display: inline-flex;
582
- align-items: center;
583
- justify-content: center;
584
- height: 7em;
585
- padding: 0 10px;
586
- color: #fff;
587
- }
588
-
589
- .video-js.skin_cn_news .vjs-svg-icon::before {
590
- content: none !important;
591
- }
592
-
593
-
594
- .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon {
595
- display: inline-flex;
596
- align-items: center;
597
- justify-content: center;
598
- }
599
- .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon svg,
600
- .video-js.skin_cn_news .vjs-rewind-button svg {
601
- width: 24px;
602
- height: 24px;
603
- display: block;
604
- }
605
-
606
-
607
-
608
- .video-js.skin_cn_news .vjs-subs-caps-button {
609
- opacity: 1;
610
- }
611
-
612
-
613
-
614
- .video-js.skin_cn_news .vjs-volume-panel {
615
- margin: 0;
616
- display: inline-flex;
617
- align-items: center;
618
- align-self: center;
619
- height: 2.2em;
620
- min-width: 7em;
621
- transition: none;
622
- }
623
- .video-js.skin_cn_news .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
624
- width: 0;
625
- height: 100%;
626
- display: flex;
627
- align-items: center;
628
- overflow: hidden;
629
- opacity: 0;
630
- transition: width 0.15s ease, opacity 0.15s ease;
631
- }
632
- .video-js.skin_cn_news .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal,
633
- .video-js.skin_cn_news .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
634
- .video-js.skin_cn_news .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal,
635
- .video-js.skin_cn_news .vjs-volume-panel:focus-within .vjs-volume-control.vjs-volume-horizontal {
636
- width: 5em;
637
- opacity: 1;
638
- }
639
-
640
- .video-js.skin_cn_news .vjs-volume-bar {
641
- width: 4em;
642
- height: 0.3em;
643
- margin: 0 0.45em;
644
- }
645
-
646
-
647
- .video-js.skin_cn_news .vjs-volume-control .vjs-mouse-display {
648
- display: none !important;
649
- }
650
-
651
- .video-js.skin_cn_news .vjs-mute-control.vjs-vol-0 ~ .vjs-volume-control .vjs-volume-level {
652
- width: 0 !important;
653
- }
654
-
655
-
656
- .video-js.skin_cn_news .vjs-custom-control-spacer {
657
- display: block !important;
658
- flex: 1 1 auto;
659
- }
660
-
661
-
662
- .video-js.skin_cn_news .vjs-big-play-button {
663
- display: none;
664
- }
665
- .video-js.skin_cn_news .vjs-big-play-button .vjs-icon-placeholder:before {
666
- position: relative !important;
667
- display: flex;
668
- left: 0;
669
- top: -1px;
670
- }
671
- .video-js.skin_cn_news.vjs-paused:not(.vjs-seeking):not(.vjs-ended) .vjs-big-play-button {
672
- display: flex;
673
- justify-content: center;
674
- align-items: center;
675
- position: absolute;
676
- top: 0;
677
- left: 0;
678
- right: 0;
679
- bottom: 0;
680
- margin: auto;
681
- width: 80px;
682
- height: 80px;
683
- border: none;
684
- border-radius: 50%;
685
- background: rgba(0, 0, 0, 0.55);
686
- font-size: 5em;
687
- line-height: 1.3em;
688
- transform: none !important;
689
- }
690
-
691
-
692
- .video-js.skin_cn_news .vjs-progress-control .vjs-progress-holder {
693
- height: 4px !important;
694
- margin: 0;
695
- border-radius: 20px;
696
- background-color: #393944;
697
- }
698
-
699
- .video-js.skin_cn_news .vjs-play-progress {
700
- background-color: #ffffff;
701
- border-radius: 20px;
702
- }
703
-
704
- .video-js.skin_cn_news .vjs-load-progress,
705
- .video-js.skin_cn_news .vjs-load-progress div {
706
- background: rgba(255, 255, 255, 0.15);
707
- border-radius: 20px;
708
- }
709
-
710
-
711
- .video-js.skin_cn_news .vjs-play-progress:before {
712
- content: '';
713
- width: 16px;
714
- height: 16px;
715
- border-radius: 50%;
716
- background: #ffffff;
717
- border: 2px solid rgba(0, 0, 0, 0.6);
718
- box-sizing: border-box;
719
- box-shadow: 0 0 0 2px #ffffff, 0 0 3px rgba(0, 0, 0, 0.45);
720
- top: -6px;
721
- right: -8px;
722
- position: absolute;
723
- }
724
- .video-js.skin_cn_news .vjs-play-progress .vjs-time-tooltip {
725
- display: none !important;
726
- }
727
-
728
- .video-js.skin_cn_news .vjs-mouse-display .vjs-time-tooltip {
729
- background: #ffffff;
730
- color: #0a0e17;
731
- font-weight: 700;
732
- border-radius: 3px;
733
- }
734
-
735
- .video-js.skin_cn_news .vjs-live-control {
736
- display: none !important;
737
- }
738
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-control {
739
- display: inline-flex;
740
- align-items: center;
741
- align-self: center;
742
- height: 2.2em;
743
- gap: 5px;
744
- width: auto;
745
- padding: 0 10px;
746
- border: 1px solid rgba(255, 255, 255, 0.45);
747
- border-radius: 4px;
748
- cursor: pointer;
749
- }
750
-
751
- .video-js.skin_cn_news .vjs-seek-to-live-control .vjs-icon-placeholder {
752
- display: none;
753
- }
754
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder {
755
- display: inline-flex;
756
- align-items: center;
757
- }
758
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder::before {
759
- content: '';
760
- display: inline-block;
761
- width: 8px;
762
- height: 8px;
763
- border-radius: 50%;
764
- background: #ff2d2d; /* red live dot */
765
- }
766
- .video-js.skin_cn_news .vjs-seek-to-live-text {
767
- color: #ffffff;
768
- font-weight: 700;
769
- font-size: 12px;
770
- letter-spacing: 0.03em;
771
- }
772
-
773
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge {
774
- border-color: transparent;
775
- }
776
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-seek-to-live-text {
777
- color: #ff2d2d;
778
- }
779
-
780
- /* ---- time controls ---- */
781
- .video-js.skin_cn_news .vjs-current-time,
782
- .video-js.skin_cn_news .vjs-duration,
783
- .video-js.skin_cn_news .vjs-time-divider {
784
- display: none !important;
785
- }
786
- .video-js.skin_cn_news .vjs-remaining-time.vjs-time-control.vjs-control {
787
- display: none;
788
- align-items: center;
789
- justify-content: center;
790
- font-size: 11px;
791
- font-weight: 700;
792
- color: #fff;
793
- padding: 0 6px;
794
- user-select: none;
795
- }
796
-
797
-
798
- .video-js.skin_cn_news .vjs-chapter-marker {
799
- z-index: 2;
800
- width: var(--vl-chapter-size, 8px);
801
- height: var(--vl-chapter-size, 8px);
802
- top: 50%;
803
- bottom: auto;
804
- background: var(--vl-chapter-color, #ffffff);
805
- opacity: var(--vl-chapter-opacity, 1);
806
- border-radius: 50%;
807
- box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); /* keep white dots visible on the white bar */
808
- transform: translate(-50%, -50%) scale(1);
809
- transition: background-color 0.12s ease;
810
- }
811
- .video-js.skin_cn_news .vjs-chapter-marker:hover {
812
- background: var(--vl-chapter-hover, #0a5cff);
813
- }
814
- .video-js.skin_cn_news .vjs-chapter-marker.vjs-chapter-marker--active {
815
- background: var(--vl-chapter-active, #0a5cff);
816
- }
817
-
818
-
819
- .video-js.skin_cn_news .vjs-chapter-marker .vjs-chapter-marker__icon {
820
- width: 16px;
821
- height: 16px;
822
- bottom: 160%;
823
- filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
824
- }
825
-
826
-
827
- .video-js.skin_cn_news .vjs-chapter-preview {
828
- background: var(--vl-chapter-tooltip, #0a5cff);
829
- border-radius: 6px;
830
- padding: 8px 10px;
831
- width: max-content;
832
- max-width: 300px;
833
- text-align: left;
834
- box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
835
- }
836
- .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__time {
837
- color: #ffffff;
838
- font-size: 13px;
839
- font-weight: 400;
840
- margin-bottom: 2px;
841
- }
842
- .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__label {
843
- color: #ffffff;
844
- font-size: 13px;
845
- font-weight: 400;
846
- line-height: 1.3;
847
- white-space: normal;
848
- text-align: left;
849
- }
850
- .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__pointer {
851
- border-top-color: var(--vl-chapter-tooltip, #0a5cff);
852
- }
853
-
854
- /* ---- responsive ---- */
855
- @media (max-width: 576px) {
856
- .video-js.skin_cn_news .vjs-control-bar {
857
- height: 3.2em !important;
858
- padding: 0 8px;
859
- }
860
- .video-js.skin_cn_news .vjs-control-bar .vjs-button {
861
- padding: 0 6px;
862
- }
863
- .video-js.skin_cn_news .vjs-control.vjs-button.vjs-picture-in-picture-control {
864
- display: none !important;
865
- }
866
- }
867
-
868
- .video-js.skin_news_live .vjs-button>.vjs-icon-placeholder:before {
869
- font-size: 2.2em;
870
- line-height: 2.6;
871
- }
872
- .video-js.skin_news_live .vjs-custom-big-mute.vjs-control{
873
- background: #fcb700;
874
- }
875
- .video-js.skin_news_live .vjs-control-bar{
876
- z-index: 1 !important;
877
- height: 5em !important;
878
- background: black !important;
879
- }
880
- .video-js.skin_news_live .vjs-playback-rate .vjs-playback-rate-value{
881
- display: flex;
882
- align-items: center;
883
- justify-content: center;
884
- }
885
-
886
- .video-js.skin_news_live .vjs-fade>* {
887
- visibility: hidden !important;
888
- opacity: 0 !important;
889
- transition: visibility 1s, opacity 1s !important;
890
- }
891
-
892
- .video-js.skin_news_live .custom-spaced-progress-bar {
893
- position: absolute;
894
- width: 100%;
895
- display: flex;
896
- height: 0.5em;
897
- top: -0.5em;
898
- }
899
-
900
- .video-js.skin_news_live .vjs-progress-control {
901
- /* left: -6px; */
902
- position: relative;
903
- width: 100%;
904
- height: 0.5em;
905
- transition: height 0.1s, top 0.1s;
771
+ width: 100%;
772
+ height: 0.5em;
773
+ transition: height 0.1s, top 0.1s;
906
774
  }
907
775
 
908
776
  .video-js.skin_news_live .vjs-volume-panel{
@@ -1347,207 +1215,339 @@
1347
1215
 
1348
1216
 
1349
1217
 
1350
- .video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control {
1351
- height: 0.7em;
1352
- position: absolute;
1353
- top: -0.7em;
1354
- width: 100%;
1218
+
1219
+ .video-js.skin_cn_news .vjs-control-bar {
1220
+ z-index: 1 !important;
1221
+ height: auto !important;
1222
+ padding: 0.8em 30px 0.6em;
1223
+ background: transparent !important;
1224
+ display: flex;
1225
+ flex-wrap: wrap;
1226
+ align-items: center;
1227
+ column-gap: 10px;
1355
1228
  }
1356
1229
 
1357
- .video-js.skin_vlone .vjs-progress-holder.vjs-slider.vjs-slider-horizontal {
1358
- height: 100%;
1230
+
1231
+ .video-js.skin_cn_news .vjs-control-bar::before {
1232
+ content: '';
1233
+ position: absolute;
1234
+ left: 0;
1235
+ right: 0;
1236
+ bottom: 0;
1237
+ top: -3em;
1238
+ background: linear-gradient(
1239
+ to top,
1240
+ rgba(0, 0, 0, 0.85) 0%,
1241
+ rgba(0, 0, 0, 0.7) 40%,
1242
+ rgba(0, 0, 0, 0.55) 70%,
1243
+ rgba(0, 0, 0, 0.38) 86%,
1244
+ transparent 100%
1245
+ );
1246
+ pointer-events: none;
1247
+ z-index: -1;
1359
1248
  }
1360
1249
 
1361
- .video-js.skin_vlone .vjs-playback-rate .vjs-playback-rate-value{
1362
- line-height: 2.5;
1250
+ .video-js.skin_cn_news .vjs-control-bar .vjs-progress-control {
1251
+ order: -1;
1252
+ flex: 0 0 100%;
1253
+ width: 80%;
1254
+ margin: 0 0 5em;
1255
+ position: relative;
1363
1256
  }
1364
1257
 
1365
- .video-js.skin_vlone button.vjs-control.vjs-button.vjs-rewind-button > svg{
1366
- height: 19px;
1367
- width: 19px;
1368
- cursor: pointer;
1258
+ .video-js.skin_cn_news .vjs-control-bar > .vjs-control,
1259
+ .video-js.skin_cn_news .vjs-control-bar > .vjs-button {
1260
+ width: auto;
1261
+ min-width: 0;
1369
1262
  }
1370
- .video-js.skin_vlone .vjs-control {
1371
- user-select: none;
1263
+ .video-js.skin_cn_news .vjs-control-bar .vjs-button {
1264
+ display: inline-flex;
1265
+ align-items: center;
1266
+ justify-content: center;
1267
+ height: 7em;
1268
+ padding: 0 10px;
1269
+ color: #fff;
1372
1270
  }
1373
- .video-js.skin_vlone .vjs-custom-control-spacer{
1374
- user-select: none;
1271
+
1272
+ .video-js.skin_cn_news .vjs-svg-icon::before {
1273
+ content: none !important;
1375
1274
  }
1376
1275
 
1377
- .video-js.skin_vlone button.vjs-control.vjs-button.vjs-skip-button > svg{
1378
- height: 19px;
1379
- width: 19px;
1380
- cursor: pointer;
1276
+
1277
+ .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon {
1278
+ display: inline-flex;
1279
+ align-items: center;
1280
+ justify-content: center;
1281
+ }
1282
+ .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon svg,
1283
+ .video-js.skin_cn_news .vjs-rewind-button svg {
1284
+ width: 24px;
1285
+ height: 24px;
1286
+ display: block;
1381
1287
  }
1382
1288
 
1383
- .video-js.skin_vlone .vjs-play-progress:before {
1384
- display: none !important;
1289
+
1290
+
1291
+ .video-js.skin_cn_news .vjs-subs-caps-button {
1292
+ opacity: 1;
1385
1293
  }
1386
1294
 
1387
- .video-js.skin_vlone .vjs-progress-control>.vjs-progress-holder.vjs-slider {
1388
- margin: 0 !important;
1389
1295
 
1296
+
1297
+ .video-js.skin_cn_news .vjs-volume-panel {
1298
+ margin: 0;
1299
+ display: inline-flex;
1300
+ align-items: center;
1301
+ align-self: center;
1302
+ height: 2.2em;
1303
+ min-width: 7em;
1304
+ transition: none;
1305
+ }
1306
+ .video-js.skin_cn_news .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
1307
+ width: 0;
1308
+ height: 100%;
1309
+ display: flex;
1310
+ align-items: center;
1311
+ overflow: hidden;
1312
+ opacity: 0;
1313
+ transition: width 0.15s ease, opacity 0.15s ease;
1314
+ }
1315
+ .video-js.skin_cn_news .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal,
1316
+ .video-js.skin_cn_news .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
1317
+ .video-js.skin_cn_news .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal,
1318
+ .video-js.skin_cn_news .vjs-volume-panel:focus-within .vjs-volume-control.vjs-volume-horizontal {
1319
+ width: 5em;
1320
+ opacity: 1;
1390
1321
  }
1391
1322
 
1323
+ .video-js.skin_cn_news .vjs-volume-bar {
1324
+ width: 4em;
1325
+ height: 0.3em;
1326
+ margin: 0 0.45em;
1327
+ }
1392
1328
 
1393
- .video-js.skin_vlone .vjs-custom-control-spacer {
1394
- display: block;
1395
- flex: 1 1 auto;
1329
+
1330
+ .video-js.skin_cn_news .vjs-volume-control .vjs-mouse-display {
1331
+ display: none !important;
1396
1332
  }
1397
1333
 
1398
- .video-js.skin_vlone .vjs-volume-panel.vjs-volume-panel-vertical{
1399
- z-index: 1;
1334
+ .video-js.skin_cn_news .vjs-mute-control.vjs-vol-0 ~ .vjs-volume-control .vjs-volume-level {
1335
+ width: 0 !important;
1400
1336
  }
1401
1337
 
1402
1338
 
1403
- .video-js.skin_vlone .vjs-control-bar {
1404
- height: 40px;
1339
+ .video-js.skin_cn_news .vjs-custom-control-spacer {
1340
+ display: block !important;
1341
+ flex: 1 1 auto;
1405
1342
  }
1406
1343
 
1407
- .video-js.skin_vlone .vjs-big-play-button .vjs-icon-placeholder:before,
1408
- .vjs-button>.vjs-icon-placeholder:before {
1409
- position: relative !important;
1344
+
1345
+ .video-js.skin_cn_news .vjs-big-play-button {
1346
+ display: none;
1410
1347
  }
1411
- .video-js.skin_vlone .vjs-big-play-button .vjs-icon-placeholder:before{
1412
- display: flex;
1413
- left: 0px;
1414
- top: -1px;
1348
+ .video-js.skin_cn_news .vjs-big-play-button .vjs-icon-placeholder:before {
1349
+ position: relative !important;
1350
+ display: flex;
1351
+ left: 0;
1352
+ top: -1px;
1353
+ }
1354
+ .video-js.skin_cn_news.vjs-paused:not(.vjs-seeking):not(.vjs-ended) .vjs-big-play-button {
1355
+ display: flex;
1356
+ justify-content: center;
1357
+ align-items: center;
1358
+ position: absolute;
1359
+ top: 0;
1360
+ left: 0;
1361
+ right: 0;
1362
+ bottom: 0;
1363
+ margin: auto;
1364
+ width: 80px;
1365
+ height: 80px;
1366
+ border: none;
1367
+ border-radius: 50%;
1368
+ background: rgba(0, 0, 0, 0.55);
1369
+ font-size: 5em;
1370
+ line-height: 1.3em;
1371
+ transform: none !important;
1415
1372
  }
1416
1373
 
1417
- .vjs-button>.vjs-icon-placeholder:before {
1418
- font-size: 2em !important;
1374
+
1375
+ .video-js.skin_cn_news .vjs-progress-control .vjs-progress-holder {
1376
+ height: 4px !important;
1377
+ margin: 0;
1378
+ border-radius: 20px;
1379
+ background-color: #393944;
1419
1380
  }
1420
1381
 
1421
- .video-js.skin_vlone .vjs-control {
1422
- width: 4.3em;
1382
+ .video-js.skin_cn_news .vjs-play-progress {
1383
+ background-color: #ffffff;
1384
+ border-radius: 20px;
1423
1385
  }
1424
1386
 
1425
- .vjs-menu-button-popup .vjs-menu {
1426
- bottom: 10px !important;
1387
+ .video-js.skin_cn_news .vjs-load-progress,
1388
+ .video-js.skin_cn_news .vjs-load-progress div {
1389
+ background: rgba(255, 255, 255, 0.15);
1390
+ border-radius: 20px;
1427
1391
  }
1428
1392
 
1429
1393
 
1430
- .video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control:hover {
1431
- height: 1.3em;
1432
- position: absolute;
1433
- top: -1.3em;
1434
- transition: height 0.3s, top 0.3s;
1394
+ .video-js.skin_cn_news .vjs-play-progress:before {
1395
+ content: '';
1396
+ width: 16px;
1397
+ height: 16px;
1398
+ border-radius: 50%;
1399
+ background: #ffffff;
1400
+ border: 2px solid rgba(0, 0, 0, 0.6);
1401
+ box-sizing: border-box;
1402
+ box-shadow: 0 0 0 2px #ffffff, 0 0 3px rgba(0, 0, 0, 0.45);
1403
+ top: -6px;
1404
+ right: -8px;
1405
+ position: absolute;
1406
+ }
1407
+ .video-js.skin_cn_news .vjs-play-progress .vjs-time-tooltip {
1408
+ display: none !important;
1435
1409
  }
1436
1410
 
1437
-
1438
- .video-js.skin_vlone.vjs-live .vjs-time-control{
1439
- display: none !important;
1411
+ .video-js.skin_cn_news .vjs-mouse-display .vjs-time-tooltip {
1412
+ background: #ffffff;
1413
+ color: #0a0e17;
1414
+ font-weight: 700;
1415
+ border-radius: 3px;
1440
1416
  }
1441
1417
 
1442
- .video-js.skin_vlone .vjs-time-control {
1443
- display: block;
1418
+ .video-js.skin_cn_news .vjs-live-control {
1419
+ display: none !important;
1444
1420
  }
1445
- .video-js.skin_vlone .vjs-remaining-time {
1446
- display: none;
1421
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-control {
1422
+ display: inline-flex;
1423
+ align-items: center;
1424
+ align-self: center;
1425
+ height: 2.2em;
1426
+ gap: 5px;
1427
+ width: auto;
1428
+ padding: 0 10px;
1429
+ border: 1px solid rgba(255, 255, 255, 0.45);
1430
+ border-radius: 4px;
1431
+ cursor: pointer;
1447
1432
  }
1448
1433
 
1449
- .video-js.skin_vlone .vjs-remaining-time.vjs-time-control.vjs-control>span.vjs-remaining-time-display {
1450
- line-height: 3.5em;
1451
- font-size: 1.1em;
1452
- min-width: 4em;
1434
+ .video-js.skin_cn_news .vjs-seek-to-live-control .vjs-icon-placeholder {
1435
+ display: none;
1436
+ }
1437
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder {
1438
+ display: inline-flex;
1439
+ align-items: center;
1440
+ }
1441
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder::before {
1442
+ content: '';
1443
+ display: inline-block;
1444
+ width: 8px;
1445
+ height: 8px;
1446
+ border-radius: 50%;
1447
+ background: #ff2d2d; /* red live dot */
1448
+ }
1449
+ .video-js.skin_cn_news .vjs-seek-to-live-text {
1450
+ color: #ffffff;
1451
+ font-weight: 700;
1452
+ font-size: 12px;
1453
+ letter-spacing: 0.03em;
1453
1454
  }
1454
1455
 
1455
- .video-js.skin_vlone .vjs-time-divider > div{
1456
- display: flex;
1457
- justify-content: center;
1456
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge {
1457
+ border-color: transparent;
1458
+ }
1459
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-seek-to-live-text {
1460
+ color: #ff2d2d;
1458
1461
  }
1459
1462
 
1460
- .video-js.skin_vlone .vjs-live-control{
1461
- align-items: center;
1463
+ /* ---- time controls ---- */
1464
+ .video-js.skin_cn_news .vjs-current-time,
1465
+ .video-js.skin_cn_news .vjs-duration,
1466
+ .video-js.skin_cn_news .vjs-time-divider {
1467
+ display: none !important;
1462
1468
  }
1463
- .video-js.skin_vlone .vjs-live-display{
1464
- height: 2.2em;
1465
- display: flex;
1466
- align-items: center;
1467
- font-family: monospace;
1468
- width: 4em;
1469
- justify-content: center;
1470
- background: red;
1471
- margin: 4px 0px 4px 12px;
1469
+ .video-js.skin_cn_news .vjs-remaining-time.vjs-time-control.vjs-control {
1470
+ display: none;
1471
+ align-items: center;
1472
+ justify-content: center;
1473
+ font-size: 11px;
1474
+ font-weight: 700;
1475
+ color: #fff;
1476
+ padding: 0 6px;
1477
+ user-select: none;
1472
1478
  }
1473
- .video-js.skin_vlone .vjs-live-display.vjs-behind-live{
1474
- background: #6b6b6b;
1479
+
1480
+
1481
+ .video-js.skin_cn_news .vjs-chapter-marker {
1482
+ z-index: 2;
1483
+ width: var(--vl-chapter-size, 8px);
1484
+ height: var(--vl-chapter-size, 8px);
1485
+ top: 50%;
1486
+ bottom: auto;
1487
+ background: var(--vl-chapter-color, #ffffff);
1488
+ opacity: var(--vl-chapter-opacity, 1);
1489
+ border-radius: 50%;
1490
+ box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); /* keep white dots visible on the white bar */
1491
+ transform: translate(-50%, -50%) scale(1);
1492
+ transition: background-color 0.12s ease;
1475
1493
  }
1476
- .video-js.skin_vlone .vjs-live-display:hover{
1477
- cursor: pointer;
1494
+ .video-js.skin_cn_news .vjs-chapter-marker:hover {
1495
+ background: var(--vl-chapter-hover, #0a5cff);
1478
1496
  }
1479
-
1480
- .video-js.skin_vlone .vjs-time-control {
1481
- line-height: 3.5em !important;
1482
- font-size: 1.1em !important;
1483
- width: min-content !important;
1484
- min-width: 1.5em;
1485
- padding: 0 !important;
1486
- user-select: none;
1497
+ .video-js.skin_cn_news .vjs-chapter-marker.vjs-chapter-marker--active {
1498
+ background: var(--vl-chapter-active, #0a5cff);
1487
1499
  }
1488
1500
 
1489
- .video-js.skin_vlone .vjs-current-time.vjs-time-control.vjs-control {
1490
- margin-left: 16px !important;
1491
- }
1492
1501
 
1493
- .video-js.skin_vlone .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
1494
- .video-js.skin_vlone .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
1495
- font-size: 1.2em !important;
1496
- line-height: 1.5em !important;
1497
- padding: 0.2em 0.8em !important;
1502
+ .video-js.skin_cn_news .vjs-chapter-marker .vjs-chapter-marker__icon {
1503
+ width: 16px;
1504
+ height: 16px;
1505
+ bottom: 160%;
1506
+ filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
1498
1507
  }
1499
1508
 
1500
1509
 
1501
- /* Big play */
1502
- .video-js.skin_vlone.vjs-paused .vjs-big-play-button {
1503
- width: 80px;
1504
- height: 80px;
1505
- display: flex;
1506
- justify-content: center;
1507
- align-items: center;
1508
- border: none;
1509
- position: absolute;
1510
- top: 0;
1511
- left: 0;
1512
- right: 0;
1513
- bottom: 0;
1514
- margin: auto;
1515
- font-size: 5em;
1516
- line-height: 1.3em;
1517
- transform: none !important;
1518
- border-radius: 1.3em;
1510
+ .video-js.skin_cn_news .vjs-chapter-preview {
1511
+ background: var(--vl-chapter-tooltip, #0a5cff);
1512
+ border-radius: 6px;
1513
+ padding: 8px 10px;
1514
+ width: max-content;
1515
+ max-width: 300px;
1516
+ text-align: left;
1517
+ box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
1519
1518
  }
1520
- .video-js.skin_vlone .ssai-ad-container{
1521
- position: absolute;
1522
- bottom: 4px;
1519
+ .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__time {
1520
+ color: #ffffff;
1521
+ font-size: 13px;
1522
+ font-weight: 400;
1523
+ margin-bottom: 2px;
1523
1524
  }
1524
-
1525
- @media(max-width:600px){
1526
- .video-js.skin_vlone button.vjs-big-play-button {
1527
- width: 50px !important;
1528
- height: 50px !important;
1529
- font-size: 2.1rem !important;
1530
- }
1531
-
1532
- .video-js.skin_vlone .ssai-ad-container {
1533
- position: absolute;
1534
- bottom: 2px;
1525
+ .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__label {
1526
+ color: #ffffff;
1527
+ font-size: 13px;
1528
+ font-weight: 400;
1529
+ line-height: 1.3;
1530
+ white-space: normal;
1531
+ text-align: left;
1535
1532
  }
1536
- .video-js.skin_vlone .vjs-playback-rate .vjs-playback-rate-value {
1537
- display: none;
1533
+ .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__pointer {
1534
+ border-top-color: var(--vl-chapter-tooltip, #0a5cff);
1538
1535
  }
1539
1536
 
1540
- .video-js.skin_vlone button.vjs-control.vjs-button.vjs-rewind-button>svg {
1541
- /* display: none; */
1537
+ /* ---- responsive ---- */
1538
+ @media (max-width: 576px) {
1539
+ .video-js.skin_cn_news .vjs-control-bar {
1540
+ height: 3.2em !important;
1541
+ padding: 0 8px;
1542
+ }
1543
+ .video-js.skin_cn_news .vjs-control-bar .vjs-button {
1544
+ padding: 0 6px;
1545
+ }
1546
+ .video-js.skin_cn_news .vjs-control.vjs-button.vjs-picture-in-picture-control {
1547
+ display: none !important;
1548
+ }
1542
1549
  }
1543
1550
 
1544
- .video-js.skin_vlone button.vjs-control.vjs-button.vjs-skip-button>svg {
1545
- /* display: none; */
1546
- }
1547
- }
1548
- .video-js .vjs-control-bar .vjs-subs-caps-button .vjs-menu .vjs-selected {
1549
- text-decoration: underline;
1550
- }
1551
1551
  .video-js.skin_mini .vjs-button>.vjs-icon-placeholder:before {
1552
1552
  font-size: 2.2em;
1553
1553
  line-height: 2.6;
@@ -2200,56 +2200,6 @@
2200
2200
 
2201
2201
 
2202
2202
 
2203
- .vjs-custom-big-mute.vjs-control{
2204
- position: absolute;
2205
- align-items: center;
2206
- background: #fcb700;
2207
- border: 0;
2208
- display: flex;
2209
- align-items: center;
2210
- height: 44px;
2211
- justify-content: center;
2212
- padding: 0;
2213
- width: 44px;
2214
- z-index: 1;
2215
- outline: none;
2216
- text-shadow:none !important;
2217
- cursor: pointer;
2218
- }
2219
- .video-js.vjs-fullscreen .vjs-custom-big-mute.vjs-control {
2220
- display: flex;
2221
- top: 50px;
2222
- height: 50px;
2223
- width: 50px;
2224
- }
2225
- .video-js.vjs-fullscreen .vjs-custom-big-mute.vjs-control >svg {
2226
- height: 28px;
2227
- width: 28px;
2228
- }
2229
- .vjs-custom-big-mute.vjs-control:hover{
2230
- filter: none;
2231
- }
2232
-
2233
-
2234
- .vjs-custom-big-mute.vjs-control.tl{
2235
- top: 0;
2236
- left: 0;
2237
- margin: 15px 0 0 15px;
2238
- }
2239
-
2240
- .vjs-custom-big-mute.vjs-control.hide{
2241
- display: none !important;
2242
-
2243
- }
2244
-
2245
- .vjs-custom-big-mute.vjs-control > svg {
2246
- color: #071d39;
2247
- height: 22px;
2248
- width: 22px;
2249
- }
2250
-
2251
-
2252
-
2253
2203
 
2254
2204
  .video-js .multicamera-parent.default{
2255
2205
  height: 345px;
@@ -2330,6 +2280,56 @@
2330
2280
  }
2331
2281
 
2332
2282
 
2283
+
2284
+ .vjs-custom-big-mute.vjs-control{
2285
+ position: absolute;
2286
+ align-items: center;
2287
+ background: #fcb700;
2288
+ border: 0;
2289
+ display: flex;
2290
+ align-items: center;
2291
+ height: 44px;
2292
+ justify-content: center;
2293
+ padding: 0;
2294
+ width: 44px;
2295
+ z-index: 1;
2296
+ outline: none;
2297
+ text-shadow:none !important;
2298
+ cursor: pointer;
2299
+ }
2300
+ .video-js.vjs-fullscreen .vjs-custom-big-mute.vjs-control {
2301
+ display: flex;
2302
+ top: 50px;
2303
+ height: 50px;
2304
+ width: 50px;
2305
+ }
2306
+ .video-js.vjs-fullscreen .vjs-custom-big-mute.vjs-control >svg {
2307
+ height: 28px;
2308
+ width: 28px;
2309
+ }
2310
+ .vjs-custom-big-mute.vjs-control:hover{
2311
+ filter: none;
2312
+ }
2313
+
2314
+
2315
+ .vjs-custom-big-mute.vjs-control.tl{
2316
+ top: 0;
2317
+ left: 0;
2318
+ margin: 15px 0 0 15px;
2319
+ }
2320
+
2321
+ .vjs-custom-big-mute.vjs-control.hide{
2322
+ display: none !important;
2323
+
2324
+ }
2325
+
2326
+ .vjs-custom-big-mute.vjs-control > svg {
2327
+ color: #071d39;
2328
+ height: 22px;
2329
+ width: 22px;
2330
+ }
2331
+
2332
+
2333
2333
  /* nextep — up-next card (centered in player, scales with player size) */
2334
2334
  .video-js:has(.next-ep-preview),
2335
2335
  .video-js:has(.next-ep-preview-player-thumb) {