@viewlift/player-backup 2.0.390-backup → 2.0.391-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,214 +1,5 @@
1
1
 
2
2
 
3
-
4
- .video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control {
5
- height: 0.7em !important;
6
- position: absolute !important;
7
- top: -0.7em !important;
8
- width: 100% !important;
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
- .video-js .vjs-subs-caps-button .vjs-menu li,
84
- .video-js .vjs-subtitles-button .vjs-menu li,
85
- .video-js .vjs-captions-button .vjs-menu li {
86
- text-transform: none;
87
- }
88
-
89
-
90
- .video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control:hover {
91
- height: 1.3em !important;
92
- position: absolute !important;
93
- top: -1.3em !important;
94
- transition: height 0.3s, top 0.3s !important;
95
- }
96
-
97
-
98
- .video-js.skin_vlone.vjs-live .vjs-time-control{
99
- display: none !important;
100
- }
101
-
102
- .video-js.skin_vlone .vjs-time-control {
103
- display: block;
104
- }
105
- .video-js.skin_vlone .vjs-remaining-time {
106
- display: none;
107
- }
108
-
109
- .video-js.skin_vlone .vjs-remaining-time.vjs-time-control.vjs-control>span.vjs-remaining-time-display {
110
- line-height: 3.5em;
111
- font-size: 1.1em;
112
- min-width: 4em;
113
- }
114
-
115
- .video-js.skin_vlone .vjs-time-divider > div{
116
- display: flex;
117
- justify-content: center;
118
- }
119
-
120
- .video-js.skin_vlone .vjs-live-control{
121
- align-items: center;
122
- }
123
- .video-js.skin_vlone .vjs-live-display{
124
- height: 2.2em;
125
- display: flex;
126
- align-items: center;
127
- font-family: monospace;
128
- width: 4em;
129
- justify-content: center;
130
- background: red;
131
- margin: 4px 0px 4px 12px;
132
- }
133
- .video-js.skin_vlone .vjs-live-display.vjs-behind-live{
134
- background: #6b6b6b;
135
- }
136
- .video-js.skin_vlone .vjs-live-display:hover{
137
- cursor: pointer;
138
- }
139
-
140
- .video-js.skin_vlone .vjs-time-control {
141
- line-height: 3.5em !important;
142
- font-size: 1.1em !important;
143
- width: min-content !important;
144
- min-width: 1.5em;
145
- padding: 0 !important;
146
- user-select: none;
147
- }
148
-
149
- .video-js.skin_vlone .vjs-current-time.vjs-time-control.vjs-control {
150
- margin-left: 16px !important;
151
- }
152
-
153
- .video-js.skin_vlone .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
154
- .video-js.skin_vlone .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
155
- font-size: 1.2em !important;
156
- line-height: 1.5em !important;
157
- padding: 0.2em 0.8em !important;
158
- }
159
-
160
-
161
- /* Big play */
162
- .video-js.skin_vlone.vjs-paused .vjs-big-play-button {
163
- width: 80px;
164
- height: 80px;
165
- display: flex;
166
- justify-content: center;
167
- align-items: center;
168
- border: none;
169
- position: absolute;
170
- top: 0;
171
- left: 0;
172
- right: 0;
173
- bottom: 0;
174
- margin: auto;
175
- font-size: 5em;
176
- line-height: 1.3em;
177
- transform: none !important;
178
- border-radius: 1.3em;
179
- }
180
- .video-js.skin_vlone .ssai-ad-container{
181
- position: absolute;
182
- bottom: 4px;
183
- }
184
-
185
- @media(max-width:600px){
186
- .video-js.skin_vlone button.vjs-big-play-button {
187
- width: 50px !important;
188
- height: 50px !important;
189
- font-size: 2.1rem !important;
190
- }
191
-
192
- .video-js.skin_vlone .ssai-ad-container {
193
- position: absolute;
194
- bottom: 2px;
195
- }
196
- .video-js.skin_vlone .vjs-playback-rate .vjs-playback-rate-value {
197
- display: none;
198
- }
199
-
200
- .video-js.skin_vlone button.vjs-control.vjs-button.vjs-rewind-button>svg {
201
- /* display: none; */
202
- }
203
-
204
- .video-js.skin_vlone button.vjs-control.vjs-button.vjs-skip-button>svg {
205
- /* display: none; */
206
- }
207
- }
208
- .video-js .vjs-control-bar .vjs-subs-caps-button .vjs-menu .vjs-selected {
209
- text-decoration: underline;
210
- }
211
-
212
3
  .video-js.skin_news .vjs-button>.vjs-icon-placeholder:before {
213
4
  font-size: 2.2em;
214
5
  line-height: 2.6;
@@ -737,52 +528,261 @@
737
528
 
738
529
 
739
530
 
740
- .video-js.skin_news_live .vjs-button>.vjs-icon-placeholder:before {
741
- font-size: 2.2em;
742
- line-height: 2.6;
743
- }
744
- .video-js.skin_news_live .vjs-custom-big-mute.vjs-control{
745
- background: #fcb700;
746
- }
747
- .video-js.skin_news_live .vjs-control-bar{
748
- z-index: 1 !important;
749
- height: 5em !important;
750
- background: black !important;
751
- }
752
- .video-js.skin_news_live .vjs-playback-rate .vjs-playback-rate-value{
753
- display: flex;
754
- align-items: center;
755
- justify-content: center;
756
- }
757
-
758
- .video-js.skin_news_live .vjs-fade>* {
759
- visibility: hidden !important;
760
- opacity: 0 !important;
761
- transition: visibility 1s, opacity 1s !important;
762
- }
763
531
 
764
- .video-js.skin_news_live .custom-spaced-progress-bar {
765
- position: absolute;
766
- width: 100%;
767
- display: flex;
768
- height: 0.5em;
769
- top: -0.5em;
532
+ .video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control {
533
+ height: 0.7em !important;
534
+ position: absolute !important;
535
+ top: -0.7em !important;
536
+ width: 100% !important;
770
537
  }
771
538
 
772
- .video-js.skin_news_live .vjs-progress-control {
773
- /* left: -6px; */
774
- position: relative;
775
- width: 100%;
776
- height: 0.5em;
777
- transition: height 0.1s, top 0.1s;
539
+ .video-js.skin_vlone .vjs-progress-holder.vjs-slider.vjs-slider-horizontal {
540
+ height: 100%;
778
541
  }
779
542
 
780
- .video-js.skin_news_live .vjs-volume-panel{
781
- min-width: 5.3em;
543
+ .video-js.skin_vlone .vjs-playback-rate .vjs-playback-rate-value{
544
+ line-height: 2.5;
782
545
  }
783
546
 
547
+ .video-js.skin_vlone button.vjs-control.vjs-button.vjs-rewind-button > svg{
548
+ height: 19px;
549
+ width: 19px;
550
+ cursor: pointer;
551
+ }
552
+ .video-js.skin_vlone .vjs-control {
553
+ user-select: none;
554
+ }
555
+ .video-js.skin_vlone .vjs-custom-control-spacer{
556
+ user-select: none;
557
+ }
558
+
559
+ .video-js.skin_vlone button.vjs-control.vjs-button.vjs-skip-button > svg{
560
+ height: 19px;
561
+ width: 19px;
562
+ cursor: pointer;
563
+ }
564
+
565
+ .video-js.skin_vlone .vjs-play-progress:before {
566
+ display: none !important;
567
+ }
568
+
569
+ .video-js.skin_vlone .vjs-progress-control>.vjs-progress-holder.vjs-slider {
570
+ margin: 0 !important;
571
+
572
+ }
573
+
574
+
575
+ .video-js.skin_vlone .vjs-custom-control-spacer {
576
+ display: block;
577
+ flex: 1 1 auto;
578
+ }
579
+
580
+ .video-js.skin_vlone .vjs-volume-panel.vjs-volume-panel-vertical{
581
+ z-index: 1;
582
+ }
583
+
584
+
585
+ .video-js.skin_vlone .vjs-control-bar {
586
+ height: 40px;
587
+ }
588
+
589
+ .video-js.skin_vlone .vjs-big-play-button .vjs-icon-placeholder:before,
590
+ .vjs-button>.vjs-icon-placeholder:before {
591
+ position: relative !important;
592
+ }
593
+ .video-js.skin_vlone .vjs-big-play-button .vjs-icon-placeholder:before{
594
+ display: flex;
595
+ left: 0px;
596
+ top: -1px;
597
+ }
598
+
599
+ .vjs-button>.vjs-icon-placeholder:before {
600
+ font-size: 2em !important;
601
+ }
602
+
603
+ .video-js.skin_vlone .vjs-control {
604
+ width: 4.3em;
605
+ }
606
+
607
+ .vjs-menu-button-popup .vjs-menu {
608
+ bottom: 10px !important;
609
+ }
610
+
611
+ .video-js .vjs-subs-caps-button .vjs-menu li,
612
+ .video-js .vjs-subtitles-button .vjs-menu li,
613
+ .video-js .vjs-captions-button .vjs-menu li {
614
+ text-transform: none;
615
+ }
616
+
617
+
618
+ .video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control:hover {
619
+ height: 1.3em !important;
620
+ position: absolute !important;
621
+ top: -1.3em !important;
622
+ transition: height 0.3s, top 0.3s !important;
623
+ }
624
+
625
+
626
+ .video-js.skin_vlone.vjs-live .vjs-time-control{
627
+ display: none !important;
628
+ }
629
+
630
+ .video-js.skin_vlone .vjs-time-control {
631
+ display: block;
632
+ }
633
+ .video-js.skin_vlone .vjs-remaining-time {
634
+ display: none;
635
+ }
636
+
637
+ .video-js.skin_vlone .vjs-remaining-time.vjs-time-control.vjs-control>span.vjs-remaining-time-display {
638
+ line-height: 3.5em;
639
+ font-size: 1.1em;
640
+ min-width: 4em;
641
+ }
642
+
643
+ .video-js.skin_vlone .vjs-time-divider > div{
644
+ display: flex;
645
+ justify-content: center;
646
+ }
647
+
648
+ .video-js.skin_vlone .vjs-live-control{
649
+ align-items: center;
650
+ }
651
+ .video-js.skin_vlone .vjs-live-display{
652
+ height: 2.2em;
653
+ display: flex;
654
+ align-items: center;
655
+ font-family: monospace;
656
+ width: 4em;
657
+ justify-content: center;
658
+ background: red;
659
+ margin: 4px 0px 4px 12px;
660
+ }
661
+ .video-js.skin_vlone .vjs-live-display.vjs-behind-live{
662
+ background: #6b6b6b;
663
+ }
664
+ .video-js.skin_vlone .vjs-live-display:hover{
665
+ cursor: pointer;
666
+ }
667
+
668
+ .video-js.skin_vlone .vjs-time-control {
669
+ line-height: 3.5em !important;
670
+ font-size: 1.1em !important;
671
+ width: min-content !important;
672
+ min-width: 1.5em;
673
+ padding: 0 !important;
674
+ user-select: none;
675
+ }
676
+
677
+ .video-js.skin_vlone .vjs-current-time.vjs-time-control.vjs-control {
678
+ margin-left: 16px !important;
679
+ }
680
+
681
+ .video-js.skin_vlone .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
682
+ .video-js.skin_vlone .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
683
+ font-size: 1.2em !important;
684
+ line-height: 1.5em !important;
685
+ padding: 0.2em 0.8em !important;
686
+ }
687
+
688
+
689
+ /* Big play */
690
+ .video-js.skin_vlone.vjs-paused .vjs-big-play-button {
691
+ width: 80px;
692
+ height: 80px;
693
+ display: flex;
694
+ justify-content: center;
695
+ align-items: center;
696
+ border: none;
697
+ position: absolute;
698
+ top: 0;
699
+ left: 0;
700
+ right: 0;
701
+ bottom: 0;
702
+ margin: auto;
703
+ font-size: 5em;
704
+ line-height: 1.3em;
705
+ transform: none !important;
706
+ border-radius: 1.3em;
707
+ }
708
+ .video-js.skin_vlone .ssai-ad-container{
709
+ position: absolute;
710
+ bottom: 4px;
711
+ }
712
+
713
+ @media(max-width:600px){
714
+ .video-js.skin_vlone button.vjs-big-play-button {
715
+ width: 50px !important;
716
+ height: 50px !important;
717
+ font-size: 2.1rem !important;
718
+ }
719
+
720
+ .video-js.skin_vlone .ssai-ad-container {
721
+ position: absolute;
722
+ bottom: 2px;
723
+ }
724
+ .video-js.skin_vlone .vjs-playback-rate .vjs-playback-rate-value {
725
+ display: none;
726
+ }
727
+
728
+ .video-js.skin_vlone button.vjs-control.vjs-button.vjs-rewind-button>svg {
729
+ /* display: none; */
730
+ }
731
+
732
+ .video-js.skin_vlone button.vjs-control.vjs-button.vjs-skip-button>svg {
733
+ /* display: none; */
734
+ }
735
+ }
736
+ .video-js .vjs-control-bar .vjs-subs-caps-button .vjs-menu .vjs-selected {
737
+ text-decoration: underline;
738
+ }
739
+
740
+ .video-js.skin_news_live .vjs-button>.vjs-icon-placeholder:before {
741
+ font-size: 2.2em;
742
+ line-height: 2.6;
743
+ }
744
+ .video-js.skin_news_live .vjs-custom-big-mute.vjs-control{
745
+ background: #fcb700;
746
+ }
747
+ .video-js.skin_news_live .vjs-control-bar{
748
+ z-index: 1 !important;
749
+ height: 5em !important;
750
+ background: black !important;
751
+ }
752
+ .video-js.skin_news_live .vjs-playback-rate .vjs-playback-rate-value{
753
+ display: flex;
754
+ align-items: center;
755
+ justify-content: center;
756
+ }
757
+
758
+ .video-js.skin_news_live .vjs-fade>* {
759
+ visibility: hidden !important;
760
+ opacity: 0 !important;
761
+ transition: visibility 1s, opacity 1s !important;
762
+ }
763
+
764
+ .video-js.skin_news_live .custom-spaced-progress-bar {
765
+ position: absolute;
766
+ width: 100%;
767
+ display: flex;
768
+ height: 0.5em;
769
+ top: -0.5em;
770
+ }
771
+
772
+ .video-js.skin_news_live .vjs-progress-control {
773
+ /* left: -6px; */
774
+ position: relative;
775
+ width: 100%;
776
+ height: 0.5em;
777
+ transition: height 0.1s, top 0.1s;
778
+ }
779
+
780
+ .video-js.skin_news_live .vjs-volume-panel{
781
+ min-width: 5.3em;
782
+ }
783
+
784
+
784
785
 
785
-
786
786
  .video-js.skin_news_live .vjs-custom-control-spacer {
787
787
  /* display: block; */
788
788
  /* flex: 1 1 auto; */
@@ -1219,834 +1219,839 @@
1219
1219
 
1220
1220
 
1221
1221
 
1222
- .video-js.skin_mini .vjs-button>.vjs-icon-placeholder:before {
1223
- font-size: 2.2em;
1224
- line-height: 2.6;
1225
- }
1226
- .video-js.skin_mini{
1227
- overflow: hidden;
1228
- }
1229
- .video-js.skin_mini .vjs-control-bar{
1230
- z-index: 1 !important;
1231
- height: 4em !important;
1232
- background: black !important;
1233
- }
1234
-
1235
- .video-js.skin_mini .vjs-fade>* {
1236
- visibility: hidden !important;
1237
- opacity: 0 !important;
1238
- transition: visibility 1s, opacity 1s !important;
1239
- }
1240
-
1241
- .video-js.skin_mini .custom-spaced-progress-bar {
1242
- position: absolute;
1243
- width: 100%;
1244
- display: flex;
1245
- height: 0.5em;
1246
- top: -0.5em;
1247
- }
1248
-
1249
- .video-js.skin_mini .vjs-progress-control {
1250
- /* left: -6px; */
1251
- position: relative;
1252
- width: 100%;
1253
- height: 0.5em;
1254
- transition: height 0.1s, top 0.1s;
1255
- }
1256
1222
 
1257
1223
 
1258
1224
 
1259
-
1260
- .video-js.skin_mini .vjs-custom-control-spacer {
1261
- display: block;
1262
- flex: 1 1 auto;
1225
+ .video-js.skin_cn_news .vjs-control-bar {
1226
+ z-index: 1 !important;
1227
+ height: auto !important;
1228
+ padding: 0.8em 30px 0.6em;
1229
+ background: transparent !important;
1230
+ display: flex;
1231
+ flex-wrap: wrap;
1232
+ align-items: center;
1233
+ column-gap: 10px;
1263
1234
  }
1264
1235
 
1265
- .video-js.skin_mini .vjs-progress-control .vjs-progress-holder {
1266
- margin: 0 0px 0 0px;
1267
- }
1268
- .video-js.skin_mini .vjs-remaining-time.vjs-time-control.vjs-control{
1269
- display: none;
1270
- }
1271
1236
 
1272
- .video-js.skin_mini button.vjs-control.vjs-button.vjs-slowmo-button {
1273
- font-size: 14px;
1274
- font-weight: 500;
1275
- align-self: center;
1276
- height: min-content;
1277
- padding: 5px 2px;
1278
- border-radius: 8px;
1237
+ .video-js.skin_cn_news .vjs-control-bar::before {
1238
+ content: '';
1239
+ position: absolute;
1240
+ left: 0;
1241
+ right: 0;
1242
+ bottom: 0;
1243
+ top: -3em;
1244
+ background: linear-gradient(
1245
+ to top,
1246
+ rgba(0, 0, 0, 0.85) 0%,
1247
+ rgba(0, 0, 0, 0.7) 40%,
1248
+ rgba(0, 0, 0, 0.55) 70%,
1249
+ rgba(0, 0, 0, 0.38) 86%,
1250
+ transparent 100%
1251
+ );
1252
+ pointer-events: none;
1253
+ z-index: -1;
1279
1254
  }
1280
1255
 
1281
- .video-js.skin_mini .vjs-progress-control .vjs-progress-holder{
1282
- height: 5px !important;
1256
+ .video-js.skin_cn_news .vjs-control-bar .vjs-progress-control {
1257
+ order: -1;
1258
+ flex: 0 0 100%;
1259
+ width: 80%;
1260
+ margin: 0 0 5em;
1261
+ position: relative;
1283
1262
  }
1284
1263
 
1285
- .video-js.skin_mini .vjs-play-progress:before {
1286
- font-size: 1.3em;
1287
- line-height: unset;
1288
- top: -0.3333333333em;
1264
+ .video-js.skin_cn_news .vjs-control-bar > .vjs-control,
1265
+ .video-js.skin_cn_news .vjs-control-bar > .vjs-button {
1266
+ width: auto;
1267
+ min-width: 0;
1289
1268
  }
1290
-
1291
- .video-js.skin_mini .vjs-play-progress .vjs-time-tooltip {
1292
- display: none !important;
1269
+ .video-js.skin_cn_news .vjs-control-bar .vjs-button {
1270
+ display: inline-flex;
1271
+ align-items: center;
1272
+ justify-content: center;
1273
+ height: 7em;
1274
+ padding: 0 10px;
1275
+ color: #fff;
1293
1276
  }
1294
1277
 
1295
- /* */
1296
- .video-js.skin_mini .vjs-mouse-display{
1297
- font-size: 1.6666666667em;
1278
+ .video-js.skin_cn_news .vjs-svg-icon::before {
1279
+ content: none !important;
1298
1280
  }
1299
1281
 
1300
- .video-js.skin_mini .vjs-progress-control:hover .vjs-progress-holder {
1301
- font-size: 1em !important;
1302
- }
1303
1282
 
1304
- .video-js.skin_mini .vjs-button{
1305
- width: 3em;
1306
- display: flex;
1283
+ .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon {
1284
+ display: inline-flex;
1307
1285
  align-items: center;
1308
1286
  justify-content: center;
1309
1287
  }
1288
+ .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon svg,
1289
+ .video-js.skin_cn_news .vjs-rewind-button svg {
1290
+ width: 24px;
1291
+ height: 24px;
1292
+ display: block;
1293
+ }
1310
1294
 
1311
1295
 
1312
- .video-js.skin_mini .vjs-fullscreen .icon-minimize,
1313
- .icon-maximize {
1314
- display: block;
1315
- height: 32px;
1316
- }
1317
1296
 
1318
- .video-js.skin_mini .vjs-playback-rate .vjs-playback-rate-value{
1319
- line-height: 4;
1297
+ .video-js.skin_cn_news .vjs-subs-caps-button {
1298
+ opacity: 1;
1320
1299
  }
1321
1300
 
1322
- .video-js.skin_mini .vjs-fullscreen .icon-maximize,
1323
- .icon-minimize {
1324
- display: none;
1325
- height: 32px;
1326
- }
1327
1301
 
1328
- .video-js.skin_mini button.vjs-play-control.vjs-control.vjs-button{
1329
- outline: none !important;
1330
- }
1331
- .video-js.skin_mini .vjs-fullscreen-control .vjs-icon-placeholder:before,
1332
- .vjs-icon-fullscreen-enter:before {
1333
- /* content: '' !important; */
1334
- }
1335
1302
 
1336
- .video-js.skin_mini button.vjs-fullscreen-control.vjs-control.vjs-button {
1337
- display: flex;
1338
- justify-content: center;
1303
+ .video-js.skin_cn_news .vjs-volume-panel {
1304
+ margin: 0;
1305
+ display: inline-flex;
1339
1306
  align-items: center;
1340
- /* transform: rotate(90deg); */
1307
+ align-self: center;
1308
+ height: 2.2em;
1309
+ min-width: 7em;
1310
+ transition: none;
1341
1311
  }
1342
-
1343
- .video-js.skin_mini .vjs-subs-caps-button .vjs-icon-placeholder:before{
1344
- display: none;
1312
+ .video-js.skin_cn_news .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
1313
+ width: 0;
1314
+ height: 100%;
1315
+ display: flex;
1316
+ align-items: center;
1317
+ overflow: hidden;
1318
+ opacity: 0;
1319
+ transition: width 0.15s ease, opacity 0.15s ease;
1345
1320
  }
1346
- .video-js.skin_mini .vjs-volume-panel .vjs-volume-control{
1347
- margin-left: -10px;
1348
- display: none;
1321
+ .video-js.skin_cn_news .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal,
1322
+ .video-js.skin_cn_news .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
1323
+ .video-js.skin_cn_news .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal,
1324
+ .video-js.skin_cn_news .vjs-volume-panel:focus-within .vjs-volume-control.vjs-volume-horizontal {
1325
+ width: 5em;
1326
+ opacity: 1;
1349
1327
  }
1350
1328
 
1351
- .video-js.skin_mini .vjs-loading-spinner {
1352
- position: absolute;
1353
- top: 50%;
1354
- left: 50%;
1355
- transform: translate(-50%, -50%);
1356
- opacity: .85;
1357
- text-align: left;
1358
- border: .2em solid rgba(43, 51, 63, .7);
1359
- box-sizing: border-box;
1360
- background-clip: padding-box;
1361
- width: 3em;
1362
- height: 3em;
1363
- border-radius: 50%;
1364
- visibility: hidden;
1329
+ .video-js.skin_cn_news .vjs-volume-bar {
1330
+ width: 4em;
1331
+ height: 0.3em;
1332
+ margin: 0 0.45em;
1365
1333
  }
1366
1334
 
1367
- .video-js.skin_mini .skipbtn:hover{
1368
- cursor: pointer;
1335
+
1336
+ .video-js.skin_cn_news .vjs-volume-control .vjs-mouse-display {
1337
+ display: none !important;
1369
1338
  }
1370
1339
 
1371
- .video-js.skin_mini .rewindbtn:hover{
1372
- cursor: pointer;
1340
+ .video-js.skin_cn_news .vjs-mute-control.vjs-vol-0 ~ .vjs-volume-control .vjs-volume-level {
1341
+ width: 0 !important;
1373
1342
  }
1374
1343
 
1375
- .video-js.skin_mini .vjs-seek-to-live-control.vjs-control{
1376
- position: relative;
1377
- padding-left: 0;
1344
+
1345
+ .video-js.skin_cn_news .vjs-custom-control-spacer {
1346
+ display: block !important;
1347
+ flex: 1 1 auto;
1378
1348
  }
1379
1349
 
1380
- .video-js.skin_mini.vjs-paused .vjs-big-play-button {
1381
- width: 40px;
1382
- height: 40px;
1350
+
1351
+ .video-js.skin_cn_news .vjs-big-play-button {
1352
+ display: none;
1353
+ }
1354
+ .video-js.skin_cn_news .vjs-big-play-button .vjs-icon-placeholder:before {
1355
+ position: relative !important;
1356
+ display: flex;
1357
+ left: 0;
1358
+ top: -1px;
1359
+ }
1360
+ .video-js.skin_cn_news.vjs-paused:not(.vjs-seeking):not(.vjs-ended) .vjs-big-play-button {
1383
1361
  display: flex;
1384
1362
  justify-content: center;
1385
1363
  align-items: center;
1386
- border: none;
1387
1364
  position: absolute;
1388
1365
  top: 0;
1389
1366
  left: 0;
1390
1367
  right: 0;
1391
1368
  bottom: 0;
1392
1369
  margin: auto;
1393
- font-size: 3em;
1370
+ width: 80px;
1371
+ height: 80px;
1372
+ border: none;
1373
+ border-radius: 50%;
1374
+ background: rgba(0, 0, 0, 0.55);
1375
+ font-size: 5em;
1394
1376
  line-height: 1.3em;
1395
1377
  transform: none !important;
1396
- border-radius: 1.3em;
1397
- }
1398
-
1399
- .video-js.skin_mini .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge{
1400
- font-weight: bold;
1401
1378
  }
1402
1379
 
1403
- .video-js.skin_mini .vjs-menu > ul.vjs-menu-content{
1404
- bottom: 1.1em !important;
1405
- right: 1em;
1406
- z-index: 1;
1407
- font-size: 10px;
1408
- }
1409
1380
 
1410
- .video-js.skin_mini .vjs-chromecast-button .vjs-icon-placeholder {
1411
- width: 24px !important;
1412
- height: 24px !important;
1413
- }
1414
- .video-js.skin_mini .settings-selector-icon>svg{
1415
- height: 19px !important;
1416
- width: 19px !important;
1381
+ .video-js.skin_cn_news .vjs-progress-control .vjs-progress-holder {
1382
+ height: 4px !important;
1383
+ margin: 0;
1384
+ border-radius: 20px;
1385
+ background-color: #393944;
1417
1386
  }
1418
1387
 
1419
-
1420
- .video-js.skin_mini button.vjs-rewind-button{
1421
- cursor: pointer;
1388
+ .video-js.skin_cn_news .vjs-play-progress {
1389
+ background-color: #ffffff;
1390
+ border-radius: 20px;
1422
1391
  }
1423
1392
 
1424
- .video-js.skin_mini .vjs-control-bar .vjs-current-time.vjs-time-control.vjs-control {
1425
- padding-right: 0;
1393
+ .video-js.skin_cn_news .vjs-load-progress,
1394
+ .video-js.skin_cn_news .vjs-load-progress div {
1395
+ background: rgba(255, 255, 255, 0.15);
1396
+ border-radius: 20px;
1426
1397
  }
1427
1398
 
1428
- .video-js.skin_mini .vjs-control-bar .vjs-duration.vjs-time-control.vjs-control {
1429
- padding-left: 0;
1430
- }
1431
1399
 
1432
- .video-js.skin_mini .vjs-control-bar .vjs-time-control.vjs-time-divider {
1433
- padding-left: 0;
1434
- padding-right: 0;
1435
- display: flex;
1436
- justify-content: center;
1437
- width: min-content;
1400
+ .video-js.skin_cn_news .vjs-play-progress:before {
1401
+ content: '';
1402
+ width: 16px;
1403
+ height: 16px;
1404
+ border-radius: 50%;
1405
+ background: #ffffff;
1406
+ border: 2px solid rgba(0, 0, 0, 0.6);
1407
+ box-sizing: border-box;
1408
+ box-shadow: 0 0 0 2px #ffffff, 0 0 3px rgba(0, 0, 0, 0.45);
1409
+ top: -6px;
1410
+ right: -8px;
1411
+ position: absolute;
1438
1412
  }
1439
-
1440
- .video-js.skin_mini.vjs-live .vjs-control-bar .vjs-time-control {
1441
- display: none
1413
+ .video-js.skin_cn_news .vjs-play-progress .vjs-time-tooltip {
1414
+ display: none !important;
1442
1415
  }
1443
- .video-js.skin_mini.vjs-liveui .vjs-control-bar .vjs-time-control {
1444
- display: none
1416
+
1417
+ .video-js.skin_cn_news .vjs-mouse-display .vjs-time-tooltip {
1418
+ display: none !important;
1445
1419
  }
1446
1420
 
1447
- .video-js.skin_mini .vjs-control-bar .vjs-time-control {
1448
- display: flex;
1449
- align-items: center;
1450
- font-weight: 700;
1451
- font-size: 9px;
1452
- min-width: 0.8em;
1453
- padding-left: 0;
1421
+ .video-js.skin_cn_news.vjs-vod .vjs-mouse-display .vjs-time-tooltip {
1422
+ display: block !important;
1423
+ background: #ffffff;
1424
+ color: #0a0e17;
1425
+ font-weight: 700;
1426
+ border-radius: 3px;
1454
1427
  }
1455
1428
 
1456
- .video-js.skin_mini .vjs-remaining-time.vjs-time-control.vjs-control {
1457
- display: none;
1458
- font-size: 11px;
1459
- justify-content: center;
1429
+ .video-js.skin_cn_news .vjs-live-control {
1430
+ display: none !important;
1431
+ }
1432
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-control {
1433
+ display: inline-flex;
1460
1434
  align-items: center;
1461
- user-select: none;
1435
+ align-self: center;
1436
+ height: 2.2em;
1437
+ gap: 5px;
1438
+ width: auto;
1439
+ padding: 0 10px;
1440
+ border: 1px solid rgba(255, 255, 255, 0.45);
1441
+ border-radius: 4px;
1442
+ cursor: pointer;
1462
1443
  }
1463
- .video-js.skin_mini.vjs-live .vjs-remaining-time.vjs-time-control.vjs-control{
1444
+ .video-js.skin_cn_news:not(.vjs-live) .vjs-seek-to-live-control.vjs-control,
1445
+ .video-js.skin_cn_news.vjs-live:not(.vjs-liveui) .vjs-seek-to-live-control.vjs-control {
1464
1446
  display: none;
1465
1447
  }
1466
1448
 
1467
- .video-js.skin_mini button.vjs-subs-caps-button.vjs-menu-button.vjs-menu-button-popup.vjs-button{
1468
- height: min-content;
1469
- width: min-content;
1449
+ .video-js.skin_cn_news .vjs-seek-to-live-control .vjs-icon-placeholder {
1450
+ display: none;
1470
1451
  }
1471
- .video-js.skin_mini .vjs-volume-panel.vjs-volume-panel-vertical{
1472
- width: 3em;
1473
- margin-right: 4px;
1452
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder {
1453
+ display: inline-flex;
1454
+ align-items: center;
1474
1455
  }
1475
-
1476
- .video-js.skin_mini .content{
1477
- bottom: 3.4rem !important;
1478
- right: -4rem !important;
1456
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder::before {
1457
+ content: '';
1458
+ display: inline-block;
1459
+ width: 8px;
1460
+ height: 8px;
1461
+ border-radius: 50%;
1462
+ background: #ff2d2d; /* red live dot */
1479
1463
  }
1480
-
1481
- .video-js.skin_mini .setting-icon > svg{
1482
- height:18px !important;
1464
+ .video-js.skin_cn_news .vjs-seek-to-live-text {
1465
+ color: #ffffff;
1466
+ font-weight: 700;
1467
+ font-size: 12px;
1468
+ letter-spacing: 0.03em;
1483
1469
  }
1484
1470
 
1485
- .output-overlay{
1486
- position: absolute;
1487
- bottom: 0;
1488
- height: 100%;
1489
- width: 100%;
1490
- z-index: 0;
1491
- border: 0;
1492
- pointer-events:none
1471
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge {
1472
+ border-color: transparent;
1493
1473
  }
1494
-
1495
- .video-js.skin_mini iframe{
1496
- width: 100%;
1497
- height: 100%;
1474
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-seek-to-live-text {
1475
+ color: #ff2d2d;
1498
1476
  }
1499
1477
 
1500
- .video-js.skin_mini .vjs-live-control{
1478
+ /* ---- time controls ---- */
1479
+ .video-js.skin_cn_news .vjs-current-time,
1480
+ .video-js.skin_cn_news .vjs-duration,
1481
+ .video-js.skin_cn_news .vjs-time-divider {
1482
+ display: none;
1501
1483
  align-items: center;
1502
- max-width: 5em;
1484
+ font-size: 12px;
1485
+ font-weight: 700;
1486
+ color: #fff;
1487
+ user-select: none;
1503
1488
  }
1504
- .video-js.skin_mini .vjs-live-control.vjs-control .vjs-live-display{
1505
- height: 2.2em;
1489
+ .video-js.skin_cn_news.vjs-cn-news-vod:not(.vjs-live) .vjs-current-time.vjs-time-control.vjs-control,
1490
+ .video-js.skin_cn_news.vjs-cn-news-vod:not(.vjs-live) .vjs-duration.vjs-time-control.vjs-control,
1491
+ .video-js.skin_cn_news.vjs-cn-news-vod:not(.vjs-live) .vjs-time-divider.vjs-time-control {
1506
1492
  display: flex;
1507
- align-items: center;
1508
- font-family: monospace;
1509
- width: 4em;
1510
- justify-content: center;
1511
- background: red;
1512
- margin: 4px 0px 4px 2px;
1513
1493
  }
1514
-
1515
- .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:focus{
1516
- text-shadow: none;
1494
+ .video-js.skin_cn_news .vjs-current-time.vjs-time-control.vjs-control {
1495
+ padding-right: 0;
1517
1496
  }
1518
- .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-seek-to-live-text {
1519
- display: none;
1520
- font-size: 12px;
1497
+ .video-js.skin_cn_news .vjs-duration.vjs-time-control.vjs-control {
1498
+ padding-left: 0;
1521
1499
  }
1522
-
1523
- .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder {
1524
- height: 1.8em;
1525
- display: inline-flex;
1500
+ .video-js.skin_cn_news .vjs-time-control.vjs-time-divider {
1501
+ padding: 0 4px;
1502
+ min-width: 0;
1503
+ width: auto;
1504
+ }
1505
+ .video-js.skin_cn_news .vjs-remaining-time.vjs-time-control.vjs-control {
1506
+ display: none;
1526
1507
  align-items: center;
1527
- font-family: monospace;
1528
1508
  justify-content: center;
1529
- border: 1.5px solid;
1530
- margin: 4px 0px 4px 2px;
1531
- white-space: pre;
1532
- padding: 2px 4px;
1533
- font-size: 1.2em;
1534
- font-weight: 500;
1535
- color: rgba(255, 255, 2555, 0.7);
1536
- }
1537
-
1538
- .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder::before {
1539
- content: "NOT LIVE";
1540
- word-spacing: -4px;
1509
+ font-size: 11px;
1510
+ font-weight: 700;
1511
+ color: #fff;
1512
+ padding: 0 6px;
1513
+ user-select: none;
1541
1514
  }
1542
1515
 
1543
1516
 
1544
- @media(max-width:600px){
1545
- .tvProviderImage{
1546
- display: none
1547
- }
1548
- .video-js.skin_mini .vjs-fullscreen .icon-minimize,
1549
- .icon-maximize {
1550
- height: 30px !important;
1551
- }
1552
-
1553
- .video-js.skin_mini .vjs-fullscreen .icon-maximize,
1554
- .icon-minimize {
1555
- height: 30px !important;
1556
- }
1557
- .video-js.skin_mini .vjs-volume-panel.vjs-volume-panel-vertical{
1558
- width: 3.5em;
1559
- }
1560
- .video-js.skin_mini button.vjs-fullscreen-control.vjs-control.vjs-button>span.vjs-icon-placeholder::before {
1561
- height: min-content;
1562
- }
1563
-
1564
- .video-js.skin_mini button.vjs-slowmo-button{
1565
- display: none;
1566
- }
1567
- .video-js.skin_mini button.vjs-rewind-button{
1568
- display: none;
1569
- }
1570
- .video-js.skin_mini button.vjs-rewind-button>svg{
1571
- height: 20px;
1572
- }
1573
- .video-js.skin_mini .vjs-button{
1574
- width: 3em;
1575
- }
1576
- .video-js.skin_mini .widget-selection{
1577
- display: none;
1578
- }
1579
- .video-js.skin_mini .container{
1580
- display: none !important;
1581
- }
1582
- .video-js.skin_mini .vjs-control-bar{
1583
- height: 4em !important;
1584
- }
1585
- .video-js.skin_mini .vjs-button>.vjs-icon-placeholder:before{
1586
- font-size: 2.5em;
1587
- line-height: 1.5;
1588
- }
1589
- .video-js.skin_mini .vjs-play-progress:before {
1590
- font-size: 1.2em;
1591
- position: absolute;
1592
- right: -0.5em;
1593
- z-index: 1;
1594
- }
1595
- .video-js.skin_mini button.vjs-skip-button>svg{
1596
- height: 20px;
1597
- }
1598
-
1599
- .stream-selector-icon>svg{
1600
- width: 24px;
1601
- height: 24px;
1517
+ .video-js.skin_cn_news .vjs-chapter-marker {
1518
+ z-index: 2;
1519
+ width: var(--vl-chapter-size, 8px);
1520
+ height: var(--vl-chapter-size, 8px);
1521
+ top: 50%;
1522
+ bottom: auto;
1523
+ background: var(--vl-chapter-color, #ffffff);
1524
+ opacity: var(--vl-chapter-opacity, 1);
1525
+ border-radius: 50%;
1526
+ box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); /* keep white dots visible on the white bar */
1527
+ transform: translate(-50%, -50%) scale(1);
1528
+ transition: background-color 0.12s ease;
1602
1529
  }
1603
- .video-js.skin_mini .vjs-seek-to-live-text{
1604
- font-size: 12px;
1530
+ .video-js.skin_cn_news .vjs-chapter-marker:hover {
1531
+ background: var(--vl-chapter-hover, #0a5cff);
1605
1532
  }
1533
+ .video-js.skin_cn_news .vjs-chapter-marker.vjs-chapter-marker--active {
1534
+ background: var(--vl-chapter-active, #0a5cff);
1606
1535
  }
1607
1536
 
1608
1537
 
1609
- .video-js.skin_mini .vjs-text-track-display-ttml span {
1610
- background-color: rgba(0, 0, 0, 0.2);
1538
+ .video-js.skin_cn_news .vjs-chapter-marker .vjs-chapter-marker__icon {
1539
+ width: 16px;
1540
+ height: 16px;
1541
+ bottom: 160%;
1542
+ filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
1611
1543
  }
1612
1544
 
1613
1545
 
1614
- .video-js.skin_mini .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:hover .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1615
- display: flex;
1616
- justify-content: center;
1617
- align-items: center;
1618
- height: 100%;
1619
- transition: width 0.1s;
1620
- }
1621
- .video-js.skin_mini .vjs-track-settings-colors fieldset.vjs-fg.vjs-track-setting{
1622
- margin: 2px;
1623
- }
1624
-
1625
- .video-js.skin_mini .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:active .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1626
- display: flex;
1627
- justify-content: center;
1628
- align-items: center;
1629
- height: 100%;
1630
- transition: width 0.1s;
1631
- }
1632
-
1633
- .video-js.skin_mini .vjs-text-track-settings .vjs-modal-dialog-content{
1634
- display: block;
1635
- font-size: 10px;
1636
- padding: 6px 10px;
1637
- margin: 0;
1638
- max-height: 100%;
1639
- overflow-y: auto;
1640
- }
1641
- .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-colors,
1642
- .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-font,
1643
- .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-controls{
1644
- display: block;
1645
- width: 100%;
1546
+ .video-js.skin_cn_news .vjs-chapter-preview {
1547
+ background: var(--vl-chapter-tooltip, #0a5cff);
1548
+ border-radius: 6px;
1549
+ padding: 8px 10px;
1550
+ width: max-content;
1551
+ max-width: 300px;
1552
+ text-align: left;
1553
+ box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
1646
1554
  }
1647
- .video-js.skin_mini .vjs-text-track-settings fieldset{
1648
- margin: 4px 0;
1555
+ .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__time {
1556
+ color: #ffffff;
1557
+ font-size: 13px;
1558
+ font-weight: 400;
1559
+ margin-bottom: 2px;
1649
1560
  }
1650
- .video-js.skin_mini .vjs-text-track-settings fieldset span{
1651
- display: block;
1652
- padding: 0 0 6px;
1561
+ .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__label {
1562
+ color: #ffffff;
1563
+ font-size: 13px;
1564
+ font-weight: 400;
1565
+ line-height: 1.3;
1566
+ white-space: normal;
1567
+ text-align: left;
1653
1568
  }
1654
- .video-js.skin_mini .vjs-text-track-settings fieldset span > select{
1655
- max-width: 100%;
1569
+ .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__pointer {
1570
+ border-top-color: var(--vl-chapter-tooltip, #0a5cff);
1656
1571
  }
1657
1572
 
1658
- @media (max-width: 600px) {
1659
- .video-js.skin_mini .vjs-progress-control .vjs-progress-holder{
1660
- height: 5px !important;
1573
+ /* ---- responsive ---- */
1574
+ @media (max-width: 576px) {
1575
+ .video-js.skin_cn_news .vjs-control-bar {
1576
+ height: 3.2em !important;
1577
+ padding: 0 8px;
1661
1578
  }
1662
-
1663
- .video-js.skin_mini .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
1664
- display: none;
1579
+ .video-js.skin_cn_news .vjs-control-bar .vjs-button {
1580
+ padding: 0 6px;
1581
+ }
1582
+ .video-js.skin_cn_news .vjs-control.vjs-button.vjs-picture-in-picture-control {
1583
+ display: none !important;
1665
1584
  }
1666
-
1667
1585
  }
1668
1586
 
1669
- .video-js.skin_mini .vjs-control-bar .vjs-svg-icon{
1670
- content: none !important;
1671
- fill: none !important;
1672
- filter: none !important;
1587
+ .video-js.skin_mini .vjs-button>.vjs-icon-placeholder:before {
1588
+ font-size: 2.2em;
1589
+ line-height: 2.6;
1673
1590
  }
1674
-
1675
- /* svg icons opacity and hover effect */
1676
- .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button svg {
1677
- opacity: 0.7 !important;
1591
+ .video-js.skin_mini{
1592
+ overflow: hidden;
1593
+ }
1594
+ .video-js.skin_mini .vjs-control-bar{
1595
+ z-index: 1 !important;
1596
+ height: 4em !important;
1597
+ background: black !important;
1678
1598
  }
1679
1599
 
1680
- .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button:hover svg {
1681
- opacity: 1 !important;
1600
+ .video-js.skin_mini .vjs-fade>* {
1601
+ visibility: hidden !important;
1602
+ opacity: 0 !important;
1603
+ transition: visibility 1s, opacity 1s !important;
1682
1604
  }
1683
1605
 
1684
- .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
1685
- color: rgba(255, 255, 2555, 0.7)!important;
1606
+ .video-js.skin_mini .custom-spaced-progress-bar {
1607
+ position: absolute;
1608
+ width: 100%;
1609
+ display: flex;
1610
+ height: 0.5em;
1611
+ top: -0.5em;
1686
1612
  }
1687
1613
 
1688
- .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
1689
- color: rgba(255, 255, 2555, 1)!important;
1614
+ .video-js.skin_mini .vjs-progress-control {
1615
+ /* left: -6px; */
1616
+ position: relative;
1617
+ width: 100%;
1618
+ height: 0.5em;
1619
+ transition: height 0.1s, top 0.1s;
1690
1620
  }
1691
1621
 
1692
1622
 
1693
1623
 
1694
1624
 
1695
- .video-js.skin_cn_news .vjs-control-bar {
1696
- z-index: 1 !important;
1697
- height: auto !important;
1698
- padding: 0.8em 30px 0.6em;
1699
- background: transparent !important;
1700
- display: flex;
1701
- flex-wrap: wrap;
1702
- align-items: center;
1703
- column-gap: 10px;
1625
+ .video-js.skin_mini .vjs-custom-control-spacer {
1626
+ display: block;
1627
+ flex: 1 1 auto;
1704
1628
  }
1705
1629
 
1630
+ .video-js.skin_mini .vjs-progress-control .vjs-progress-holder {
1631
+ margin: 0 0px 0 0px;
1632
+ }
1633
+ .video-js.skin_mini .vjs-remaining-time.vjs-time-control.vjs-control{
1634
+ display: none;
1635
+ }
1706
1636
 
1707
- .video-js.skin_cn_news .vjs-control-bar::before {
1708
- content: '';
1709
- position: absolute;
1710
- left: 0;
1711
- right: 0;
1712
- bottom: 0;
1713
- top: -3em;
1714
- background: linear-gradient(
1715
- to top,
1716
- rgba(0, 0, 0, 0.85) 0%,
1717
- rgba(0, 0, 0, 0.7) 40%,
1718
- rgba(0, 0, 0, 0.55) 70%,
1719
- rgba(0, 0, 0, 0.38) 86%,
1720
- transparent 100%
1721
- );
1722
- pointer-events: none;
1723
- z-index: -1;
1637
+ .video-js.skin_mini button.vjs-control.vjs-button.vjs-slowmo-button {
1638
+ font-size: 14px;
1639
+ font-weight: 500;
1640
+ align-self: center;
1641
+ height: min-content;
1642
+ padding: 5px 2px;
1643
+ border-radius: 8px;
1724
1644
  }
1725
1645
 
1726
- .video-js.skin_cn_news .vjs-control-bar .vjs-progress-control {
1727
- order: -1;
1728
- flex: 0 0 100%;
1729
- width: 80%;
1730
- margin: 0 0 5em;
1731
- position: relative;
1646
+ .video-js.skin_mini .vjs-progress-control .vjs-progress-holder{
1647
+ height: 5px !important;
1732
1648
  }
1733
1649
 
1734
- .video-js.skin_cn_news .vjs-control-bar > .vjs-control,
1735
- .video-js.skin_cn_news .vjs-control-bar > .vjs-button {
1736
- width: auto;
1737
- min-width: 0;
1650
+ .video-js.skin_mini .vjs-play-progress:before {
1651
+ font-size: 1.3em;
1652
+ line-height: unset;
1653
+ top: -0.3333333333em;
1738
1654
  }
1739
- .video-js.skin_cn_news .vjs-control-bar .vjs-button {
1740
- display: inline-flex;
1741
- align-items: center;
1742
- justify-content: center;
1743
- height: 7em;
1744
- padding: 0 10px;
1745
- color: #fff;
1655
+
1656
+ .video-js.skin_mini .vjs-play-progress .vjs-time-tooltip {
1657
+ display: none !important;
1746
1658
  }
1747
1659
 
1748
- .video-js.skin_cn_news .vjs-svg-icon::before {
1749
- content: none !important;
1660
+ /* */
1661
+ .video-js.skin_mini .vjs-mouse-display{
1662
+ font-size: 1.6666666667em;
1750
1663
  }
1751
1664
 
1665
+ .video-js.skin_mini .vjs-progress-control:hover .vjs-progress-holder {
1666
+ font-size: 1em !important;
1667
+ }
1752
1668
 
1753
- .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon {
1754
- display: inline-flex;
1669
+ .video-js.skin_mini .vjs-button{
1670
+ width: 3em;
1671
+ display: flex;
1755
1672
  align-items: center;
1756
1673
  justify-content: center;
1757
1674
  }
1758
- .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon svg,
1759
- .video-js.skin_cn_news .vjs-rewind-button svg {
1760
- width: 24px;
1761
- height: 24px;
1762
- display: block;
1763
- }
1764
1675
 
1765
1676
 
1766
-
1767
- .video-js.skin_cn_news .vjs-subs-caps-button {
1768
- opacity: 1;
1677
+ .video-js.skin_mini .vjs-fullscreen .icon-minimize,
1678
+ .icon-maximize {
1679
+ display: block;
1680
+ height: 32px;
1769
1681
  }
1770
1682
 
1683
+ .video-js.skin_mini .vjs-playback-rate .vjs-playback-rate-value{
1684
+ line-height: 4;
1685
+ }
1771
1686
 
1687
+ .video-js.skin_mini .vjs-fullscreen .icon-maximize,
1688
+ .icon-minimize {
1689
+ display: none;
1690
+ height: 32px;
1691
+ }
1772
1692
 
1773
- .video-js.skin_cn_news .vjs-volume-panel {
1774
- margin: 0;
1775
- display: inline-flex;
1776
- align-items: center;
1777
- align-self: center;
1778
- height: 2.2em;
1779
- min-width: 7em;
1780
- transition: none;
1693
+ .video-js.skin_mini button.vjs-play-control.vjs-control.vjs-button{
1694
+ outline: none !important;
1781
1695
  }
1782
- .video-js.skin_cn_news .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
1783
- width: 0;
1784
- height: 100%;
1696
+ .video-js.skin_mini .vjs-fullscreen-control .vjs-icon-placeholder:before,
1697
+ .vjs-icon-fullscreen-enter:before {
1698
+ /* content: '' !important; */
1699
+ }
1700
+
1701
+ .video-js.skin_mini button.vjs-fullscreen-control.vjs-control.vjs-button {
1785
1702
  display: flex;
1703
+ justify-content: center;
1786
1704
  align-items: center;
1787
- overflow: hidden;
1788
- opacity: 0;
1789
- transition: width 0.15s ease, opacity 0.15s ease;
1790
- }
1791
- .video-js.skin_cn_news .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal,
1792
- .video-js.skin_cn_news .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
1793
- .video-js.skin_cn_news .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal,
1794
- .video-js.skin_cn_news .vjs-volume-panel:focus-within .vjs-volume-control.vjs-volume-horizontal {
1795
- width: 5em;
1796
- opacity: 1;
1705
+ /* transform: rotate(90deg); */
1797
1706
  }
1798
1707
 
1799
- .video-js.skin_cn_news .vjs-volume-bar {
1800
- width: 4em;
1801
- height: 0.3em;
1802
- margin: 0 0.45em;
1708
+ .video-js.skin_mini .vjs-subs-caps-button .vjs-icon-placeholder:before{
1709
+ display: none;
1803
1710
  }
1804
-
1805
-
1806
- .video-js.skin_cn_news .vjs-volume-control .vjs-mouse-display {
1807
- display: none !important;
1711
+ .video-js.skin_mini .vjs-volume-panel .vjs-volume-control{
1712
+ margin-left: -10px;
1713
+ display: none;
1808
1714
  }
1809
1715
 
1810
- .video-js.skin_cn_news .vjs-mute-control.vjs-vol-0 ~ .vjs-volume-control .vjs-volume-level {
1811
- width: 0 !important;
1812
- }
1813
-
1814
-
1815
- .video-js.skin_cn_news .vjs-custom-control-spacer {
1816
- display: block !important;
1817
- flex: 1 1 auto;
1716
+ .video-js.skin_mini .vjs-loading-spinner {
1717
+ position: absolute;
1718
+ top: 50%;
1719
+ left: 50%;
1720
+ transform: translate(-50%, -50%);
1721
+ opacity: .85;
1722
+ text-align: left;
1723
+ border: .2em solid rgba(43, 51, 63, .7);
1724
+ box-sizing: border-box;
1725
+ background-clip: padding-box;
1726
+ width: 3em;
1727
+ height: 3em;
1728
+ border-radius: 50%;
1729
+ visibility: hidden;
1818
1730
  }
1819
1731
 
1732
+ .video-js.skin_mini .skipbtn:hover{
1733
+ cursor: pointer;
1734
+ }
1820
1735
 
1821
- .video-js.skin_cn_news .vjs-big-play-button {
1822
- display: none;
1736
+ .video-js.skin_mini .rewindbtn:hover{
1737
+ cursor: pointer;
1823
1738
  }
1824
- .video-js.skin_cn_news .vjs-big-play-button .vjs-icon-placeholder:before {
1825
- position: relative !important;
1826
- display: flex;
1827
- left: 0;
1828
- top: -1px;
1739
+
1740
+ .video-js.skin_mini .vjs-seek-to-live-control.vjs-control{
1741
+ position: relative;
1742
+ padding-left: 0;
1829
1743
  }
1830
- .video-js.skin_cn_news.vjs-paused:not(.vjs-seeking):not(.vjs-ended) .vjs-big-play-button {
1744
+
1745
+ .video-js.skin_mini.vjs-paused .vjs-big-play-button {
1746
+ width: 40px;
1747
+ height: 40px;
1831
1748
  display: flex;
1832
1749
  justify-content: center;
1833
1750
  align-items: center;
1751
+ border: none;
1834
1752
  position: absolute;
1835
1753
  top: 0;
1836
1754
  left: 0;
1837
1755
  right: 0;
1838
1756
  bottom: 0;
1839
1757
  margin: auto;
1840
- width: 80px;
1841
- height: 80px;
1842
- border: none;
1843
- border-radius: 50%;
1844
- background: rgba(0, 0, 0, 0.55);
1845
- font-size: 5em;
1758
+ font-size: 3em;
1846
1759
  line-height: 1.3em;
1847
1760
  transform: none !important;
1761
+ border-radius: 1.3em;
1848
1762
  }
1849
1763
 
1764
+ .video-js.skin_mini .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge{
1765
+ font-weight: bold;
1766
+ }
1850
1767
 
1851
- .video-js.skin_cn_news .vjs-progress-control .vjs-progress-holder {
1852
- height: 4px !important;
1853
- margin: 0;
1854
- border-radius: 20px;
1855
- background-color: #393944;
1768
+ .video-js.skin_mini .vjs-menu > ul.vjs-menu-content{
1769
+ bottom: 1.1em !important;
1770
+ right: 1em;
1771
+ z-index: 1;
1772
+ font-size: 10px;
1856
1773
  }
1857
1774
 
1858
- .video-js.skin_cn_news .vjs-play-progress {
1859
- background-color: #ffffff;
1860
- border-radius: 20px;
1775
+ .video-js.skin_mini .vjs-chromecast-button .vjs-icon-placeholder {
1776
+ width: 24px !important;
1777
+ height: 24px !important;
1778
+ }
1779
+ .video-js.skin_mini .settings-selector-icon>svg{
1780
+ height: 19px !important;
1781
+ width: 19px !important;
1861
1782
  }
1862
1783
 
1863
- .video-js.skin_cn_news .vjs-load-progress,
1864
- .video-js.skin_cn_news .vjs-load-progress div {
1865
- background: rgba(255, 255, 255, 0.15);
1866
- border-radius: 20px;
1784
+
1785
+ .video-js.skin_mini button.vjs-rewind-button{
1786
+ cursor: pointer;
1867
1787
  }
1868
1788
 
1789
+ .video-js.skin_mini .vjs-control-bar .vjs-current-time.vjs-time-control.vjs-control {
1790
+ padding-right: 0;
1791
+ }
1869
1792
 
1870
- .video-js.skin_cn_news .vjs-play-progress:before {
1871
- content: '';
1872
- width: 16px;
1873
- height: 16px;
1874
- border-radius: 50%;
1875
- background: #ffffff;
1876
- border: 2px solid rgba(0, 0, 0, 0.6);
1877
- box-sizing: border-box;
1878
- box-shadow: 0 0 0 2px #ffffff, 0 0 3px rgba(0, 0, 0, 0.45);
1879
- top: -6px;
1880
- right: -8px;
1881
- position: absolute;
1793
+ .video-js.skin_mini .vjs-control-bar .vjs-duration.vjs-time-control.vjs-control {
1794
+ padding-left: 0;
1882
1795
  }
1883
- .video-js.skin_cn_news .vjs-play-progress .vjs-time-tooltip {
1884
- display: none !important;
1796
+
1797
+ .video-js.skin_mini .vjs-control-bar .vjs-time-control.vjs-time-divider {
1798
+ padding-left: 0;
1799
+ padding-right: 0;
1800
+ display: flex;
1801
+ justify-content: center;
1802
+ width: min-content;
1885
1803
  }
1886
1804
 
1887
- .video-js.skin_cn_news .vjs-mouse-display .vjs-time-tooltip {
1888
- background: #ffffff;
1889
- color: #0a0e17;
1890
- font-weight: 700;
1891
- border-radius: 3px;
1805
+ .video-js.skin_mini.vjs-live .vjs-control-bar .vjs-time-control {
1806
+ display: none
1807
+ }
1808
+ .video-js.skin_mini.vjs-liveui .vjs-control-bar .vjs-time-control {
1809
+ display: none
1892
1810
  }
1893
1811
 
1894
- .video-js.skin_cn_news .vjs-live-control {
1895
- display: none !important;
1812
+ .video-js.skin_mini .vjs-control-bar .vjs-time-control {
1813
+ display: flex;
1814
+ align-items: center;
1815
+ font-weight: 700;
1816
+ font-size: 9px;
1817
+ min-width: 0.8em;
1818
+ padding-left: 0;
1896
1819
  }
1897
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-control {
1898
- display: inline-flex;
1820
+
1821
+ .video-js.skin_mini .vjs-remaining-time.vjs-time-control.vjs-control {
1822
+ display: none;
1823
+ font-size: 11px;
1824
+ justify-content: center;
1899
1825
  align-items: center;
1900
- align-self: center;
1901
- height: 2.2em;
1902
- gap: 5px;
1903
- width: auto;
1904
- padding: 0 10px;
1905
- border: 1px solid rgba(255, 255, 255, 0.45);
1906
- border-radius: 4px;
1907
- cursor: pointer;
1826
+ user-select: none;
1908
1827
  }
1909
- .video-js.skin_cn_news:not(.vjs-live) .vjs-seek-to-live-control.vjs-control,
1910
- .video-js.skin_cn_news.vjs-live:not(.vjs-liveui) .vjs-seek-to-live-control.vjs-control {
1828
+ .video-js.skin_mini.vjs-live .vjs-remaining-time.vjs-time-control.vjs-control{
1911
1829
  display: none;
1912
1830
  }
1913
1831
 
1914
- .video-js.skin_cn_news .vjs-seek-to-live-control .vjs-icon-placeholder {
1915
- display: none;
1832
+ .video-js.skin_mini button.vjs-subs-caps-button.vjs-menu-button.vjs-menu-button-popup.vjs-button{
1833
+ height: min-content;
1834
+ width: min-content;
1916
1835
  }
1917
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder {
1918
- display: inline-flex;
1919
- align-items: center;
1836
+ .video-js.skin_mini .vjs-volume-panel.vjs-volume-panel-vertical{
1837
+ width: 3em;
1838
+ margin-right: 4px;
1920
1839
  }
1921
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder::before {
1922
- content: '';
1923
- display: inline-block;
1924
- width: 8px;
1925
- height: 8px;
1926
- border-radius: 50%;
1927
- background: #ff2d2d; /* red live dot */
1840
+
1841
+ .video-js.skin_mini .content{
1842
+ bottom: 3.4rem !important;
1843
+ right: -4rem !important;
1928
1844
  }
1929
- .video-js.skin_cn_news .vjs-seek-to-live-text {
1930
- color: #ffffff;
1931
- font-weight: 700;
1932
- font-size: 12px;
1933
- letter-spacing: 0.03em;
1845
+
1846
+ .video-js.skin_mini .setting-icon > svg{
1847
+ height:18px !important;
1934
1848
  }
1935
1849
 
1936
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge {
1937
- border-color: transparent;
1850
+ .output-overlay{
1851
+ position: absolute;
1852
+ bottom: 0;
1853
+ height: 100%;
1854
+ width: 100%;
1855
+ z-index: 0;
1856
+ border: 0;
1857
+ pointer-events:none
1938
1858
  }
1939
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-seek-to-live-text {
1940
- color: #ff2d2d;
1859
+
1860
+ .video-js.skin_mini iframe{
1861
+ width: 100%;
1862
+ height: 100%;
1941
1863
  }
1942
1864
 
1943
- /* ---- time controls ---- */
1944
- .video-js.skin_cn_news .vjs-current-time,
1945
- .video-js.skin_cn_news .vjs-duration,
1946
- .video-js.skin_cn_news .vjs-time-divider {
1947
- display: none;
1865
+ .video-js.skin_mini .vjs-live-control{
1948
1866
  align-items: center;
1949
- font-size: 12px;
1950
- font-weight: 700;
1951
- color: #fff;
1952
- user-select: none;
1867
+ max-width: 5em;
1953
1868
  }
1954
- .video-js.skin_cn_news.vjs-cn-news-vod:not(.vjs-live) .vjs-current-time.vjs-time-control.vjs-control,
1955
- .video-js.skin_cn_news.vjs-cn-news-vod:not(.vjs-live) .vjs-duration.vjs-time-control.vjs-control,
1956
- .video-js.skin_cn_news.vjs-cn-news-vod:not(.vjs-live) .vjs-time-divider.vjs-time-control {
1869
+ .video-js.skin_mini .vjs-live-control.vjs-control .vjs-live-display{
1870
+ height: 2.2em;
1957
1871
  display: flex;
1872
+ align-items: center;
1873
+ font-family: monospace;
1874
+ width: 4em;
1875
+ justify-content: center;
1876
+ background: red;
1877
+ margin: 4px 0px 4px 2px;
1958
1878
  }
1959
- .video-js.skin_cn_news .vjs-current-time.vjs-time-control.vjs-control {
1960
- padding-right: 0;
1879
+
1880
+ .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:focus{
1881
+ text-shadow: none;
1961
1882
  }
1962
- .video-js.skin_cn_news .vjs-duration.vjs-time-control.vjs-control {
1963
- padding-left: 0;
1883
+ .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-seek-to-live-text {
1884
+ display: none;
1885
+ font-size: 12px;
1964
1886
  }
1965
- .video-js.skin_cn_news .vjs-time-control.vjs-time-divider {
1966
- padding: 0 4px;
1967
- min-width: 0;
1968
- width: auto;
1887
+
1888
+ .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder {
1889
+ height: 1.8em;
1890
+ display: inline-flex;
1891
+ align-items: center;
1892
+ font-family: monospace;
1893
+ justify-content: center;
1894
+ border: 1.5px solid;
1895
+ margin: 4px 0px 4px 2px;
1896
+ white-space: pre;
1897
+ padding: 2px 4px;
1898
+ font-size: 1.2em;
1899
+ font-weight: 500;
1900
+ color: rgba(255, 255, 2555, 0.7);
1969
1901
  }
1970
- .video-js.skin_cn_news .vjs-remaining-time.vjs-time-control.vjs-control {
1971
- display: none;
1902
+
1903
+ .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder::before {
1904
+ content: "NOT LIVE";
1905
+ word-spacing: -4px;
1906
+ }
1907
+
1908
+
1909
+ @media(max-width:600px){
1910
+ .tvProviderImage{
1911
+ display: none
1912
+ }
1913
+ .video-js.skin_mini .vjs-fullscreen .icon-minimize,
1914
+ .icon-maximize {
1915
+ height: 30px !important;
1916
+ }
1917
+
1918
+ .video-js.skin_mini .vjs-fullscreen .icon-maximize,
1919
+ .icon-minimize {
1920
+ height: 30px !important;
1921
+ }
1922
+ .video-js.skin_mini .vjs-volume-panel.vjs-volume-panel-vertical{
1923
+ width: 3.5em;
1924
+ }
1925
+ .video-js.skin_mini button.vjs-fullscreen-control.vjs-control.vjs-button>span.vjs-icon-placeholder::before {
1926
+ height: min-content;
1927
+ }
1928
+
1929
+ .video-js.skin_mini button.vjs-slowmo-button{
1930
+ display: none;
1931
+ }
1932
+ .video-js.skin_mini button.vjs-rewind-button{
1933
+ display: none;
1934
+ }
1935
+ .video-js.skin_mini button.vjs-rewind-button>svg{
1936
+ height: 20px;
1937
+ }
1938
+ .video-js.skin_mini .vjs-button{
1939
+ width: 3em;
1940
+ }
1941
+ .video-js.skin_mini .widget-selection{
1942
+ display: none;
1943
+ }
1944
+ .video-js.skin_mini .container{
1945
+ display: none !important;
1946
+ }
1947
+ .video-js.skin_mini .vjs-control-bar{
1948
+ height: 4em !important;
1949
+ }
1950
+ .video-js.skin_mini .vjs-button>.vjs-icon-placeholder:before{
1951
+ font-size: 2.5em;
1952
+ line-height: 1.5;
1953
+ }
1954
+ .video-js.skin_mini .vjs-play-progress:before {
1955
+ font-size: 1.2em;
1956
+ position: absolute;
1957
+ right: -0.5em;
1958
+ z-index: 1;
1959
+ }
1960
+ .video-js.skin_mini button.vjs-skip-button>svg{
1961
+ height: 20px;
1962
+ }
1963
+
1964
+ .stream-selector-icon>svg{
1965
+ width: 24px;
1966
+ height: 24px;
1967
+ }
1968
+ .video-js.skin_mini .vjs-seek-to-live-text{
1969
+ font-size: 12px;
1970
+ }
1971
+ }
1972
+
1973
+
1974
+ .video-js.skin_mini .vjs-text-track-display-ttml span {
1975
+ background-color: rgba(0, 0, 0, 0.2);
1976
+ }
1977
+
1978
+
1979
+ .video-js.skin_mini .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:hover .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1980
+ display: flex;
1981
+ justify-content: center;
1972
1982
  align-items: center;
1983
+ height: 100%;
1984
+ transition: width 0.1s;
1985
+ }
1986
+ .video-js.skin_mini .vjs-track-settings-colors fieldset.vjs-fg.vjs-track-setting{
1987
+ margin: 2px;
1988
+ }
1989
+
1990
+ .video-js.skin_mini .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:active .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1991
+ display: flex;
1973
1992
  justify-content: center;
1974
- font-size: 11px;
1975
- font-weight: 700;
1976
- color: #fff;
1977
- padding: 0 6px;
1978
- user-select: none;
1993
+ align-items: center;
1994
+ height: 100%;
1995
+ transition: width 0.1s;
1996
+ }
1997
+
1998
+ .video-js.skin_mini .vjs-text-track-settings .vjs-modal-dialog-content{
1999
+ display: block;
2000
+ font-size: 10px;
2001
+ padding: 6px 10px;
2002
+ margin: 0;
2003
+ max-height: 100%;
2004
+ overflow-y: auto;
2005
+ }
2006
+ .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-colors,
2007
+ .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-font,
2008
+ .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-controls{
2009
+ display: block;
2010
+ width: 100%;
1979
2011
  }
1980
-
1981
-
1982
- .video-js.skin_cn_news .vjs-chapter-marker {
1983
- z-index: 2;
1984
- width: var(--vl-chapter-size, 8px);
1985
- height: var(--vl-chapter-size, 8px);
1986
- top: 50%;
1987
- bottom: auto;
1988
- background: var(--vl-chapter-color, #ffffff);
1989
- opacity: var(--vl-chapter-opacity, 1);
1990
- border-radius: 50%;
1991
- box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); /* keep white dots visible on the white bar */
1992
- transform: translate(-50%, -50%) scale(1);
1993
- transition: background-color 0.12s ease;
2012
+ .video-js.skin_mini .vjs-text-track-settings fieldset{
2013
+ margin: 4px 0;
1994
2014
  }
1995
- .video-js.skin_cn_news .vjs-chapter-marker:hover {
1996
- background: var(--vl-chapter-hover, #0a5cff);
2015
+ .video-js.skin_mini .vjs-text-track-settings fieldset span{
2016
+ display: block;
2017
+ padding: 0 0 6px;
1997
2018
  }
1998
- .video-js.skin_cn_news .vjs-chapter-marker.vjs-chapter-marker--active {
1999
- background: var(--vl-chapter-active, #0a5cff);
2019
+ .video-js.skin_mini .vjs-text-track-settings fieldset span > select{
2020
+ max-width: 100%;
2000
2021
  }
2001
2022
 
2023
+ @media (max-width: 600px) {
2024
+ .video-js.skin_mini .vjs-progress-control .vjs-progress-holder{
2025
+ height: 5px !important;
2026
+ }
2002
2027
 
2003
- .video-js.skin_cn_news .vjs-chapter-marker .vjs-chapter-marker__icon {
2004
- width: 16px;
2005
- height: 16px;
2006
- bottom: 160%;
2007
- filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
2008
- }
2028
+ .video-js.skin_mini .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
2029
+ display: none;
2030
+ }
2009
2031
 
2032
+ }
2010
2033
 
2011
- .video-js.skin_cn_news .vjs-chapter-preview {
2012
- background: var(--vl-chapter-tooltip, #0a5cff);
2013
- border-radius: 6px;
2014
- padding: 8px 10px;
2015
- width: max-content;
2016
- max-width: 300px;
2017
- text-align: left;
2018
- box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
2034
+ .video-js.skin_mini .vjs-control-bar .vjs-svg-icon{
2035
+ content: none !important;
2036
+ fill: none !important;
2037
+ filter: none !important;
2019
2038
  }
2020
- .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__time {
2021
- color: #ffffff;
2022
- font-size: 13px;
2023
- font-weight: 400;
2024
- margin-bottom: 2px;
2039
+
2040
+ /* svg icons opacity and hover effect */
2041
+ .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button svg {
2042
+ opacity: 0.7 !important;
2025
2043
  }
2026
- .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__label {
2027
- color: #ffffff;
2028
- font-size: 13px;
2029
- font-weight: 400;
2030
- line-height: 1.3;
2031
- white-space: normal;
2032
- text-align: left;
2044
+
2045
+ .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button:hover svg {
2046
+ opacity: 1 !important;
2033
2047
  }
2034
- .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__pointer {
2035
- border-top-color: var(--vl-chapter-tooltip, #0a5cff);
2048
+
2049
+ .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
2050
+ color: rgba(255, 255, 2555, 0.7)!important;
2036
2051
  }
2037
2052
 
2038
- /* ---- responsive ---- */
2039
- @media (max-width: 576px) {
2040
- .video-js.skin_cn_news .vjs-control-bar {
2041
- height: 3.2em !important;
2042
- padding: 0 8px;
2043
- }
2044
- .video-js.skin_cn_news .vjs-control-bar .vjs-button {
2045
- padding: 0 6px;
2046
- }
2047
- .video-js.skin_cn_news .vjs-control.vjs-button.vjs-picture-in-picture-control {
2048
- display: none !important;
2049
- }
2053
+ .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
2054
+ color: rgba(255, 255, 2555, 1)!important;
2050
2055
  }
2051
2056
 
2052
2057
 
@@ -2230,89 +2235,6 @@
2230
2235
 
2231
2236
 
2232
2237
 
2233
-
2234
-
2235
-
2236
- .video-js .multicamera-parent.default{
2237
- height: 345px;
2238
- position: absolute;
2239
- right: 0;
2240
- bottom: 6rem;
2241
- width: 200px;
2242
- right: 13px;
2243
- opacity: 1;
2244
- overflow: scroll;
2245
- display: grid;
2246
- justify-content: center;
2247
- flex-direction: column;
2248
- align-items: center;
2249
- }
2250
-
2251
- .video-js .tile{
2252
- height: 103px;
2253
- width: 171px;
2254
- margin-bottom: 1rem;
2255
- background-size: cover !important;
2256
- background-repeat: no-repeat;
2257
- border-radius: 5px;
2258
- }
2259
-
2260
- .video-js .tile:hover{
2261
- cursor: pointer;
2262
- }
2263
-
2264
- .video-js .multicamera-parent:hover{
2265
- opacity: 1 !important;
2266
- background: none;
2267
- }
2268
-
2269
-
2270
- .video-js .multicamera-parent {
2271
- -ms-overflow-style: none; /* Internet Explorer 10+ */
2272
- scrollbar-width: none; /* Firefox */
2273
- }
2274
- .video-js .multicamera-parent::-webkit-scrollbar {
2275
- display: none; /* Safari and Chrome */
2276
- }
2277
-
2278
- @media (max-width: 600px) {
2279
- .video-js .multicamera-parent.live{
2280
- display: none !important;
2281
- }
2282
- .video-js .multicamera-parent.default{
2283
- display: none !important;
2284
- }
2285
- }
2286
-
2287
-
2288
- @media (min-width:601px) and (max-width:900px) {
2289
- .video-js .tile{
2290
- height: 85px;
2291
- width: 150px;
2292
- }
2293
- .video-js .multicamera-parent.live{
2294
- justify-content: center ;
2295
- }
2296
- }
2297
-
2298
-
2299
- .video-js .multicamera-parent.live{
2300
- position: absolute;
2301
- right: 0;
2302
- width: 200px;
2303
- right: 13px;
2304
- opacity: 1;
2305
- overflow: scroll;
2306
- display: grid;
2307
- flex-direction: column;
2308
- align-items: center;
2309
- position: relative;
2310
- right: 0;
2311
- align-content: baseline;
2312
- }
2313
-
2314
-
2315
-
2316
2238
  /* Watch in Vertical View Button */
2317
2239
  .video-js .vjs-control.vjs-vertical-view-button {
2318
2240
  width: auto !important;
@@ -2400,6 +2322,88 @@
2400
2322
  }
2401
2323
  }
2402
2324
 
2325
+
2326
+
2327
+ .video-js .multicamera-parent.default{
2328
+ height: 345px;
2329
+ position: absolute;
2330
+ right: 0;
2331
+ bottom: 6rem;
2332
+ width: 200px;
2333
+ right: 13px;
2334
+ opacity: 1;
2335
+ overflow: scroll;
2336
+ display: grid;
2337
+ justify-content: center;
2338
+ flex-direction: column;
2339
+ align-items: center;
2340
+ }
2341
+
2342
+ .video-js .tile{
2343
+ height: 103px;
2344
+ width: 171px;
2345
+ margin-bottom: 1rem;
2346
+ background-size: cover !important;
2347
+ background-repeat: no-repeat;
2348
+ border-radius: 5px;
2349
+ }
2350
+
2351
+ .video-js .tile:hover{
2352
+ cursor: pointer;
2353
+ }
2354
+
2355
+ .video-js .multicamera-parent:hover{
2356
+ opacity: 1 !important;
2357
+ background: none;
2358
+ }
2359
+
2360
+
2361
+ .video-js .multicamera-parent {
2362
+ -ms-overflow-style: none; /* Internet Explorer 10+ */
2363
+ scrollbar-width: none; /* Firefox */
2364
+ }
2365
+ .video-js .multicamera-parent::-webkit-scrollbar {
2366
+ display: none; /* Safari and Chrome */
2367
+ }
2368
+
2369
+ @media (max-width: 600px) {
2370
+ .video-js .multicamera-parent.live{
2371
+ display: none !important;
2372
+ }
2373
+ .video-js .multicamera-parent.default{
2374
+ display: none !important;
2375
+ }
2376
+ }
2377
+
2378
+
2379
+ @media (min-width:601px) and (max-width:900px) {
2380
+ .video-js .tile{
2381
+ height: 85px;
2382
+ width: 150px;
2383
+ }
2384
+ .video-js .multicamera-parent.live{
2385
+ justify-content: center ;
2386
+ }
2387
+ }
2388
+
2389
+
2390
+ .video-js .multicamera-parent.live{
2391
+ position: absolute;
2392
+ right: 0;
2393
+ width: 200px;
2394
+ right: 13px;
2395
+ opacity: 1;
2396
+ overflow: scroll;
2397
+ display: grid;
2398
+ flex-direction: column;
2399
+ align-items: center;
2400
+ position: relative;
2401
+ right: 0;
2402
+ align-content: baseline;
2403
+ }
2404
+
2405
+
2406
+
2403
2407
  .vjs-custom-big-mute.vjs-control{
2404
2408
  position: absolute;
2405
2409
  align-items: center;
@@ -2448,6 +2452,7 @@
2448
2452
  width: 22px;
2449
2453
  }
2450
2454
 
2455
+
2451
2456
  /* nextep — up-next card (centered in player, scales with player size) */
2452
2457
  .video-js:has(.next-ep-preview),
2453
2458
  .video-js:has(.next-ep-preview-player-thumb) {