@viewlift/player-backup 2.0.351-backup → 2.0.353-backup

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