@viewlift/player-backup 2.0.389-backup → 2.0.391-backup

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