@viewlift/player-backup 2.0.322-backup → 2.0.324-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 (37) hide show
  1. package/cjs/bundle.css +1038 -1035
  2. package/cjs/{index-7872810d.js → index-92b1574f.js} +1 -1
  3. package/cjs/index-c6fd92ce.js +1 -0
  4. package/cjs/index-e8aa3719.js +1 -0
  5. package/cjs/index-ebdfbf69.js +1 -0
  6. package/cjs/index.js +1 -1
  7. package/cjs/{skin-ede3604c.js → skin-03fe0216.js} +1 -1
  8. package/cjs/skin-46f381f0.js +1 -0
  9. package/cjs/{skin-9aa305cd.js → skin-4bf43856.js} +1 -1
  10. package/cjs/skin-72d4ff37.js +1 -0
  11. package/cjs/{skin-183b653f.js → skin-951abe43.js} +1 -1
  12. package/cjs/{skin-b8d3d8eb.js → skin-c307c196.js} +1 -1
  13. package/cjs/skin-c4b71f1f.js +1 -0
  14. package/cjs/skin-ca4f6915.js +1 -0
  15. package/cjs/skin-d4dcf3c8.js +1 -0
  16. package/cjs/skin-e562cdac.js +1 -0
  17. package/esm/bundle.css +1038 -1035
  18. package/esm/{index-9064019b.js → index-09831f16.js} +1 -1
  19. package/esm/index-3dd901f7.js +1 -0
  20. package/esm/index-608ce5e5.js +1 -0
  21. package/esm/index-ae256416.js +1 -0
  22. package/esm/index.js +1 -1
  23. package/esm/{skin-85e53acf.js → skin-148dfa94.js} +1 -1
  24. package/esm/{skin-80480af1.js → skin-51700a89.js} +1 -1
  25. package/esm/{skin-120caa60.js → skin-5b384947.js} +1 -1
  26. package/esm/skin-63b9171a.js +1 -0
  27. package/esm/{skin-f685cb99.js → skin-661853df.js} +1 -1
  28. package/esm/skin-71506822.js +1 -0
  29. package/esm/skin-ab1fb777.js +1 -0
  30. package/esm/skin-bb16c3bf.js +1 -0
  31. package/esm/skin-bfa54532.js +1 -0
  32. package/esm/skin-e8976cd5.js +1 -0
  33. package/package.json +2 -4
  34. package/cjs/index-01027798.js +0 -1
  35. package/cjs/skin-723fa423.js +0 -1
  36. package/esm/index-76ed817b.js +0 -1
  37. package/esm/skin-020af4ff.js +0 -1
package/esm/bundle.css CHANGED
@@ -2,868 +2,1007 @@
2
2
 
3
3
 
4
4
 
5
-
6
-
7
-
8
- .video-js.skin_cn_news .vjs-control-bar {
9
- z-index: 1 !important;
10
- height: auto !important;
11
- padding: 0.8em 30px 0.6em;
12
- background: transparent !important;
13
- display: flex;
14
- flex-wrap: wrap;
15
- align-items: center;
16
- column-gap: 10px;
5
+ .video-js.skin_mini .vjs-button>.vjs-icon-placeholder:before {
6
+ font-size: 2.2em;
7
+ line-height: 2.6;
8
+ }
9
+ .video-js.skin_mini{
10
+ overflow: hidden;
11
+ }
12
+ .video-js.skin_mini .vjs-control-bar{
13
+ z-index: 1 !important;
14
+ height: 4em !important;
15
+ background: black !important;
17
16
  }
18
17
 
18
+ .video-js.skin_mini .vjs-fade>* {
19
+ visibility: hidden !important;
20
+ opacity: 0 !important;
21
+ transition: visibility 1s, opacity 1s !important;
22
+ }
19
23
 
20
- .video-js.skin_cn_news .vjs-control-bar::before {
21
- content: '';
24
+ .video-js.skin_mini .custom-spaced-progress-bar {
22
25
  position: absolute;
23
- left: 0;
24
- right: 0;
25
- bottom: 0;
26
- top: -3em;
27
- background: linear-gradient(
28
- to top,
29
- rgba(0, 0, 0, 0.85) 0%,
30
- rgba(0, 0, 0, 0.7) 40%,
31
- rgba(0, 0, 0, 0.55) 70%,
32
- rgba(0, 0, 0, 0.38) 86%,
33
- transparent 100%
34
- );
35
- pointer-events: none;
36
- z-index: -1;
26
+ width: 100%;
27
+ display: flex;
28
+ height: 0.5em;
29
+ top: -0.5em;
37
30
  }
38
31
 
39
- .video-js.skin_cn_news .vjs-control-bar .vjs-progress-control {
40
- order: -1;
41
- flex: 0 0 100%;
42
- width: 80%;
43
- margin: 0 0 5em;
32
+ .video-js.skin_mini .vjs-progress-control {
33
+ /* left: -6px; */
44
34
  position: relative;
35
+ width: 100%;
36
+ height: 0.5em;
37
+ transition: height 0.1s, top 0.1s;
45
38
  }
46
39
 
47
- .video-js.skin_cn_news .vjs-control-bar > .vjs-control,
48
- .video-js.skin_cn_news .vjs-control-bar > .vjs-button {
49
- width: auto;
50
- min-width: 0;
51
- }
52
- .video-js.skin_cn_news .vjs-control-bar .vjs-button {
53
- display: inline-flex;
54
- align-items: center;
55
- justify-content: center;
56
- height: 7em;
57
- padding: 0 10px;
58
- color: #fff;
59
- }
60
40
 
61
- .video-js.skin_cn_news .vjs-svg-icon::before {
62
- content: none !important;
63
- }
64
41
 
65
42
 
66
- .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon {
67
- display: inline-flex;
68
- align-items: center;
69
- justify-content: center;
70
- }
71
- .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon svg,
72
- .video-js.skin_cn_news .vjs-rewind-button svg {
73
- width: 24px;
74
- height: 24px;
43
+ .video-js.skin_mini .vjs-custom-control-spacer {
75
44
  display: block;
45
+ flex: 1 1 auto;
76
46
  }
77
47
 
48
+ .video-js.skin_mini .vjs-progress-control .vjs-progress-holder {
49
+ margin: 0 0px 0 0px;
50
+ }
51
+ .video-js.skin_mini .vjs-remaining-time.vjs-time-control.vjs-control{
52
+ display: none;
53
+ }
78
54
 
55
+ .video-js.skin_mini button.vjs-control.vjs-button.vjs-slowmo-button {
56
+ font-size: 14px;
57
+ font-weight: 500;
58
+ align-self: center;
59
+ height: min-content;
60
+ padding: 5px 2px;
61
+ border-radius: 8px;
62
+ }
79
63
 
80
- .video-js.skin_cn_news .vjs-subs-caps-button {
81
- opacity: 1;
64
+ .video-js.skin_mini .vjs-progress-control .vjs-progress-holder{
65
+ height: 5px !important;
82
66
  }
83
67
 
68
+ .video-js.skin_mini .vjs-play-progress:before {
69
+ font-size: 1.3em;
70
+ line-height: unset;
71
+ top: -0.3333333333em;
72
+ }
84
73
 
74
+ .video-js.skin_mini .vjs-play-progress .vjs-time-tooltip {
75
+ display: none !important;
76
+ }
85
77
 
86
- .video-js.skin_cn_news .vjs-volume-panel {
87
- margin: 0;
88
- display: inline-flex;
89
- align-items: center;
90
- align-self: center;
91
- height: 2.2em;
92
- min-width: 7em;
93
- transition: none;
78
+ /* */
79
+ .video-js.skin_mini .vjs-mouse-display{
80
+ font-size: 1.6666666667em;
94
81
  }
95
- .video-js.skin_cn_news .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
96
- width: 0;
97
- height: 100%;
82
+
83
+ .video-js.skin_mini .vjs-progress-control:hover .vjs-progress-holder {
84
+ font-size: 1em !important;
85
+ }
86
+
87
+ .video-js.skin_mini .vjs-button{
88
+ width: 3em;
98
89
  display: flex;
99
90
  align-items: center;
100
- overflow: hidden;
101
- opacity: 0;
102
- transition: width 0.15s ease, opacity 0.15s ease;
91
+ justify-content: center;
103
92
  }
104
- .video-js.skin_cn_news .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal,
105
- .video-js.skin_cn_news .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
106
- .video-js.skin_cn_news .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal,
107
- .video-js.skin_cn_news .vjs-volume-panel:focus-within .vjs-volume-control.vjs-volume-horizontal {
108
- width: 5em;
109
- opacity: 1;
93
+
94
+
95
+ .video-js.skin_mini .vjs-fullscreen .icon-minimize,
96
+ .icon-maximize {
97
+ display: block;
98
+ height: 32px;
110
99
  }
111
100
 
112
- .video-js.skin_cn_news .vjs-volume-bar {
113
- width: 4em;
114
- height: 0.3em;
115
- margin: 0 0.45em;
101
+ .video-js.skin_mini .vjs-playback-rate .vjs-playback-rate-value{
102
+ line-height: 4;
116
103
  }
117
104
 
105
+ .video-js.skin_mini .vjs-fullscreen .icon-maximize,
106
+ .icon-minimize {
107
+ display: none;
108
+ height: 32px;
109
+ }
118
110
 
119
- .video-js.skin_cn_news .vjs-volume-control .vjs-mouse-display {
120
- display: none !important;
111
+ .video-js.skin_mini button.vjs-play-control.vjs-control.vjs-button{
112
+ outline: none !important;
113
+ }
114
+ .video-js.skin_mini .vjs-fullscreen-control .vjs-icon-placeholder:before,
115
+ .vjs-icon-fullscreen-enter:before {
116
+ /* content: '' !important; */
121
117
  }
122
118
 
123
- .video-js.skin_cn_news .vjs-mute-control.vjs-vol-0 ~ .vjs-volume-control .vjs-volume-level {
124
- width: 0 !important;
119
+ .video-js.skin_mini button.vjs-fullscreen-control.vjs-control.vjs-button {
120
+ display: flex;
121
+ justify-content: center;
122
+ align-items: center;
123
+ /* transform: rotate(90deg); */
125
124
  }
126
125
 
126
+ .video-js.skin_mini .vjs-subs-caps-button .vjs-icon-placeholder:before{
127
+ display: none;
128
+ }
129
+ .video-js.skin_mini .vjs-volume-panel .vjs-volume-control{
130
+ margin-left: -10px;
131
+ display: none;
132
+ }
127
133
 
128
- .video-js.skin_cn_news .vjs-custom-control-spacer {
129
- display: block !important;
130
- flex: 1 1 auto;
134
+ .video-js.skin_mini .vjs-loading-spinner {
135
+ position: absolute;
136
+ top: 50%;
137
+ left: 50%;
138
+ transform: translate(-50%, -50%);
139
+ opacity: .85;
140
+ text-align: left;
141
+ border: .2em solid rgba(43, 51, 63, .7);
142
+ box-sizing: border-box;
143
+ background-clip: padding-box;
144
+ width: 3em;
145
+ height: 3em;
146
+ border-radius: 50%;
147
+ visibility: hidden;
131
148
  }
132
149
 
150
+ .video-js.skin_mini .skipbtn:hover{
151
+ cursor: pointer;
152
+ }
133
153
 
134
- .video-js.skin_cn_news .vjs-big-play-button {
135
- display: none;
154
+ .video-js.skin_mini .rewindbtn:hover{
155
+ cursor: pointer;
136
156
  }
137
- .video-js.skin_cn_news .vjs-big-play-button .vjs-icon-placeholder:before {
138
- position: relative !important;
139
- display: flex;
140
- left: 0;
141
- top: -1px;
157
+
158
+ .video-js.skin_mini .vjs-seek-to-live-control.vjs-control{
159
+ position: relative;
160
+ padding-left: 0;
142
161
  }
143
- .video-js.skin_cn_news.vjs-paused:not(.vjs-seeking):not(.vjs-ended) .vjs-big-play-button {
162
+
163
+ .video-js.skin_mini.vjs-paused .vjs-big-play-button {
164
+ width: 40px;
165
+ height: 40px;
144
166
  display: flex;
145
167
  justify-content: center;
146
168
  align-items: center;
169
+ border: none;
147
170
  position: absolute;
148
171
  top: 0;
149
172
  left: 0;
150
173
  right: 0;
151
174
  bottom: 0;
152
175
  margin: auto;
153
- width: 80px;
154
- height: 80px;
155
- border: none;
156
- border-radius: 50%;
157
- background: rgba(0, 0, 0, 0.55);
158
- font-size: 5em;
176
+ font-size: 3em;
159
177
  line-height: 1.3em;
160
178
  transform: none !important;
179
+ border-radius: 1.3em;
161
180
  }
162
181
 
163
-
164
- .video-js.skin_cn_news .vjs-progress-control .vjs-progress-holder {
165
- height: 4px !important;
166
- margin: 0;
167
- border-radius: 20px;
168
- background-color: #393944;
182
+ .video-js.skin_mini .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge{
183
+ font-weight: bold;
169
184
  }
170
185
 
171
- .video-js.skin_cn_news .vjs-play-progress {
172
- background-color: #ffffff;
173
- border-radius: 20px;
186
+ .video-js.skin_mini .vjs-menu > ul.vjs-menu-content{
187
+ bottom: 1.1em !important;
188
+ right: 1em;
189
+ z-index: 1;
190
+ font-size: 10px;
174
191
  }
175
192
 
176
- .video-js.skin_cn_news .vjs-load-progress,
177
- .video-js.skin_cn_news .vjs-load-progress div {
178
- background: rgba(255, 255, 255, 0.15);
179
- border-radius: 20px;
193
+ .video-js.skin_mini .vjs-chromecast-button .vjs-icon-placeholder {
194
+ width: 24px !important;
195
+ height: 24px !important;
196
+ }
197
+ .video-js.skin_mini .settings-selector-icon>svg{
198
+ height: 19px !important;
199
+ width: 19px !important;
180
200
  }
181
201
 
182
202
 
183
- .video-js.skin_cn_news .vjs-play-progress:before {
184
- content: '';
185
- width: 16px;
186
- height: 16px;
187
- border-radius: 50%;
188
- background: #ffffff;
189
- border: 2px solid rgba(0, 0, 0, 0.6);
190
- box-sizing: border-box;
191
- box-shadow: 0 0 0 2px #ffffff, 0 0 3px rgba(0, 0, 0, 0.45);
192
- top: -6px;
193
- right: -8px;
194
- position: absolute;
195
- }
196
- .video-js.skin_cn_news .vjs-play-progress .vjs-time-tooltip {
197
- display: none !important;
203
+ .video-js.skin_mini button.vjs-rewind-button{
204
+ cursor: pointer;
198
205
  }
199
206
 
200
- .video-js.skin_cn_news .vjs-mouse-display .vjs-time-tooltip {
201
- background: #ffffff;
202
- color: #0a0e17;
203
- font-weight: 700;
204
- border-radius: 3px;
207
+ .video-js.skin_mini .vjs-control-bar .vjs-current-time.vjs-time-control.vjs-control {
208
+ padding-right: 0;
205
209
  }
206
210
 
207
- .video-js.skin_cn_news .vjs-live-control {
208
- display: none !important;
209
- }
210
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-control {
211
- display: inline-flex;
212
- align-items: center;
213
- align-self: center;
214
- height: 2.2em;
215
- gap: 5px;
216
- width: auto;
217
- padding: 0 10px;
218
- border: 1px solid rgba(255, 255, 255, 0.45);
219
- border-radius: 4px;
220
- cursor: pointer;
211
+ .video-js.skin_mini .vjs-control-bar .vjs-duration.vjs-time-control.vjs-control {
212
+ padding-left: 0;
221
213
  }
222
214
 
223
- .video-js.skin_cn_news .vjs-seek-to-live-control .vjs-icon-placeholder {
224
- display: none;
225
- }
226
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder {
227
- display: inline-flex;
228
- align-items: center;
229
- }
230
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder::before {
231
- content: '';
232
- display: inline-block;
233
- width: 8px;
234
- height: 8px;
235
- border-radius: 50%;
236
- background: #ff2d2d; /* red live dot */
237
- }
238
- .video-js.skin_cn_news .vjs-seek-to-live-text {
239
- color: #ffffff;
240
- font-weight: 700;
241
- font-size: 12px;
242
- letter-spacing: 0.03em;
215
+ .video-js.skin_mini .vjs-control-bar .vjs-time-control.vjs-time-divider {
216
+ padding-left: 0;
217
+ padding-right: 0;
218
+ display: flex;
219
+ justify-content: center;
220
+ width: min-content;
243
221
  }
244
222
 
245
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge {
246
- border-color: transparent;
223
+ .video-js.skin_mini.vjs-live .vjs-control-bar .vjs-time-control {
224
+ display: none
247
225
  }
248
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-seek-to-live-text {
249
- color: #ff2d2d;
226
+ .video-js.skin_mini.vjs-liveui .vjs-control-bar .vjs-time-control {
227
+ display: none
250
228
  }
251
229
 
252
- /* ---- time controls ---- */
253
- .video-js.skin_cn_news .vjs-current-time,
254
- .video-js.skin_cn_news .vjs-duration,
255
- .video-js.skin_cn_news .vjs-time-divider {
256
- display: none !important;
230
+ .video-js.skin_mini .vjs-control-bar .vjs-time-control {
231
+ display: flex;
232
+ align-items: center;
233
+ font-weight: 700;
234
+ font-size: 9px;
235
+ min-width: 0.8em;
236
+ padding-left: 0;
257
237
  }
258
- .video-js.skin_cn_news .vjs-remaining-time.vjs-time-control.vjs-control {
259
- display: none;
260
- align-items: center;
261
- justify-content: center;
238
+
239
+ .video-js.skin_mini .vjs-remaining-time.vjs-time-control.vjs-control {
240
+ display: none;
262
241
  font-size: 11px;
263
- font-weight: 700;
264
- color: #fff;
265
- padding: 0 6px;
242
+ justify-content: center;
243
+ align-items: center;
266
244
  user-select: none;
267
245
  }
268
-
269
-
270
- .video-js.skin_cn_news .vjs-chapter-marker {
271
- z-index: 2;
272
- width: var(--vl-chapter-size, 8px);
273
- height: var(--vl-chapter-size, 8px);
274
- top: 50%;
275
- bottom: auto;
276
- background: var(--vl-chapter-color, #ffffff);
277
- opacity: var(--vl-chapter-opacity, 1);
278
- border-radius: 50%;
279
- box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); /* keep white dots visible on the white bar */
280
- transform: translate(-50%, -50%) scale(1);
281
- transition: background-color 0.12s ease;
246
+ .video-js.skin_mini.vjs-live .vjs-remaining-time.vjs-time-control.vjs-control{
247
+ display: none;
282
248
  }
283
- .video-js.skin_cn_news .vjs-chapter-marker:hover {
284
- background: var(--vl-chapter-hover, #0a5cff);
249
+
250
+ .video-js.skin_mini button.vjs-subs-caps-button.vjs-menu-button.vjs-menu-button-popup.vjs-button{
251
+ height: min-content;
252
+ width: min-content;
285
253
  }
286
- .video-js.skin_cn_news .vjs-chapter-marker.vjs-chapter-marker--active {
287
- background: var(--vl-chapter-active, #0a5cff);
254
+ .video-js.skin_mini .vjs-volume-panel.vjs-volume-panel-vertical{
255
+ width: 3em;
256
+ margin-right: 4px;
288
257
  }
289
258
 
290
-
291
- .video-js.skin_cn_news .vjs-chapter-marker .vjs-chapter-marker__icon {
292
- width: 16px;
293
- height: 16px;
294
- bottom: 160%;
295
- filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
259
+ .video-js.skin_mini .content{
260
+ bottom: 3.4rem !important;
261
+ right: -4rem !important;
296
262
  }
297
263
 
298
-
299
- .video-js.skin_cn_news .vjs-chapter-preview {
300
- background: var(--vl-chapter-tooltip, #0a5cff);
301
- border-radius: 6px;
302
- padding: 8px 10px;
303
- width: max-content;
304
- max-width: 300px;
305
- text-align: left;
306
- box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
307
- }
308
- .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__time {
309
- color: #ffffff;
310
- font-size: 13px;
311
- font-weight: 400;
312
- margin-bottom: 2px;
313
- }
314
- .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__label {
315
- color: #ffffff;
316
- font-size: 13px;
317
- font-weight: 400;
318
- line-height: 1.3;
319
- white-space: normal;
320
- text-align: left;
321
- }
322
- .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__pointer {
323
- border-top-color: var(--vl-chapter-tooltip, #0a5cff);
264
+ .video-js.skin_mini .setting-icon > svg{
265
+ height:18px !important;
324
266
  }
325
267
 
326
- /* ---- responsive ---- */
327
- @media (max-width: 576px) {
328
- .video-js.skin_cn_news .vjs-control-bar {
329
- height: 3.2em !important;
330
- padding: 0 8px;
331
- }
332
- .video-js.skin_cn_news .vjs-control-bar .vjs-button {
333
- padding: 0 6px;
334
- }
335
- .video-js.skin_cn_news .vjs-control.vjs-button.vjs-picture-in-picture-control {
336
- display: none !important;
337
- }
268
+ .output-overlay{
269
+ position: absolute;
270
+ bottom: 0;
271
+ height: 100%;
272
+ width: 100%;
273
+ z-index: 0;
274
+ border: 0;
275
+ pointer-events:none
338
276
  }
339
277
 
340
- .video-js.skin_news .vjs-button>.vjs-icon-placeholder:before {
341
- font-size: 2.2em;
342
- line-height: 2.6;
343
- }
344
- .video-js.skin_news .vjs-custom-big-mute.vjs-control{
345
- background: white;
278
+ .video-js.skin_mini iframe{
279
+ width: 100%;
280
+ height: 100%;
346
281
  }
347
- .video-js.skin_news .vjs-control-bar{
348
- z-index: 1 !important;
349
- height: 5em !important;
350
- background: black !important;
282
+
283
+ .video-js.skin_mini .vjs-live-control{
284
+ align-items: center;
285
+ max-width: 5em;
351
286
  }
352
- .video-js.skin_news .vjs-playback-rate .vjs-playback-rate-value{
287
+ .video-js.skin_mini .vjs-live-control.vjs-control .vjs-live-display{
288
+ height: 2.2em;
353
289
  display: flex;
354
290
  align-items: center;
291
+ font-family: monospace;
292
+ width: 4em;
355
293
  justify-content: center;
294
+ background: red;
295
+ margin: 4px 0px 4px 2px;
356
296
  }
357
297
 
358
- .video-js.skin_news .vjs-fade>* {
359
- visibility: hidden !important;
360
- opacity: 0 !important;
361
- transition: visibility 1s, opacity 1s !important;
298
+ .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:focus{
299
+ text-shadow: none;
362
300
  }
363
-
364
- .video-js.skin_news .custom-spaced-progress-bar {
365
- position: absolute;
366
- width: 100%;
367
- display: flex;
368
- height: 0.5em;
369
- top: -0.5em;
301
+ .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-seek-to-live-text {
302
+ display: none;
303
+ font-size: 12px;
370
304
  }
371
305
 
372
- .video-js.skin_news .vjs-progress-control {
373
- /* left: -6px; */
374
- position: relative;
375
- width: 100%;
376
- height: 0.5em;
377
- transition: height 0.1s, top 0.1s;
306
+ .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder {
307
+ height: 1.8em;
308
+ display: inline-flex;
309
+ align-items: center;
310
+ font-family: monospace;
311
+ justify-content: center;
312
+ border: 1.5px solid;
313
+ margin: 4px 0px 4px 2px;
314
+ white-space: pre;
315
+ padding: 2px 4px;
316
+ font-size: 1.2em;
317
+ font-weight: 500;
318
+ color: rgba(255, 255, 2555, 0.7);
378
319
  }
379
320
 
380
-
381
-
382
-
383
- .video-js.skin_news .vjs-custom-control-spacer {
384
- display: block;
385
- flex: 1 1 auto;
321
+ .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder::before {
322
+ content: "NOT LIVE";
323
+ word-spacing: -4px;
386
324
  }
387
325
 
388
- .video-js.skin_news .vjs-progress-control .vjs-progress-holder {
389
- margin: 0 0px 0 0px;
390
- }
391
- .video-js.skin_news .vjs-remaining-time.vjs-time-control.vjs-control{
392
- display: none;
393
- }
394
326
 
395
- .video-js.skin_news button.vjs-control.vjs-button.vjs-slowmo-button {
396
- font-size: 14px;
397
- font-weight: 500;
398
- align-self: center;
399
- height: min-content;
400
- padding: 5px 2px;
401
- border-radius: 8px;
402
- }
327
+ @media(max-width:600px){
328
+ .tvProviderImage{
329
+ display: none
330
+ }
331
+ .video-js.skin_mini .vjs-fullscreen .icon-minimize,
332
+ .icon-maximize {
333
+ height: 30px !important;
334
+ }
403
335
 
404
- .video-js.skin_news .vjs-progress-control .vjs-progress-holder{
405
- height: 6px !important;
406
- }
336
+ .video-js.skin_mini .vjs-fullscreen .icon-maximize,
337
+ .icon-minimize {
338
+ height: 30px !important;
339
+ }
340
+ .video-js.skin_mini .vjs-volume-panel.vjs-volume-panel-vertical{
341
+ width: 3.5em;
342
+ }
343
+ .video-js.skin_mini button.vjs-fullscreen-control.vjs-control.vjs-button>span.vjs-icon-placeholder::before {
344
+ height: min-content;
345
+ }
407
346
 
408
- .video-js.skin_news .vjs-play-progress:before {
409
- font-size: 1.5em;
410
- line-height: unset;
411
- top: -0.3333333333em;
347
+ .video-js.skin_mini button.vjs-slowmo-button{
348
+ display: none;
349
+ }
350
+ .video-js.skin_mini button.vjs-rewind-button{
351
+ display: none;
352
+ }
353
+ .video-js.skin_mini button.vjs-rewind-button>svg{
354
+ height: 20px;
355
+ }
356
+ .video-js.skin_mini .vjs-button{
357
+ width: 3em;
358
+ }
359
+ .video-js.skin_mini .widget-selection{
360
+ display: none;
361
+ }
362
+ .video-js.skin_mini .container{
363
+ display: none !important;
364
+ }
365
+ .video-js.skin_mini .vjs-control-bar{
366
+ height: 4em !important;
367
+ }
368
+ .video-js.skin_mini .vjs-button>.vjs-icon-placeholder:before{
369
+ font-size: 2.5em;
370
+ line-height: 1.5;
371
+ }
372
+ .video-js.skin_mini .vjs-play-progress:before {
373
+ font-size: 1.2em;
374
+ position: absolute;
375
+ right: -0.5em;
376
+ z-index: 1;
412
377
  }
413
-
414
- .video-js.skin_news .vjs-play-progress .vjs-time-tooltip {
415
- display: none !important;
378
+ .video-js.skin_mini button.vjs-skip-button>svg{
379
+ height: 20px;
416
380
  }
417
381
 
418
- /* */
419
- .video-js.skin_news .vjs-mouse-display{
420
- font-size: 1.6666666667em;
382
+ .stream-selector-icon>svg{
383
+ width: 24px;
384
+ height: 24px;
421
385
  }
422
-
423
- .video-js.skin_news .vjs-progress-control:hover .vjs-progress-holder {
424
- font-size: 1em !important;
386
+ .video-js.skin_mini .vjs-seek-to-live-text{
387
+ font-size: 12px;
425
388
  }
426
389
 
427
- .video-js.skin_news .vjs-button{
428
- width: 5.3em;
429
- display: flex;
430
- align-items: center;
431
- justify-content: center;
390
+ .video-js.skin_mini .vjs-text-track-display-ttml span {
391
+ color: white !important;
392
+ font-size: 16px !important;
393
+ background-color: rgba(0,0,0,0.2) !important;
394
+ }
432
395
  }
433
396
 
434
-
435
- .video-js.skin_news .vjs-fullscreen .icon-minimize,
436
- .icon-maximize {
437
- display: block;
438
- height: 32px;
397
+ .video-js.skin_mini .vjs-text-track-display-ttml span {
398
+ color: white !important;
399
+ font-size: 16px !important;
400
+ background-color: rgba(0,0,0,0.2) !important;
439
401
  }
440
402
 
441
- .video-js.skin_news .vjs-playback-rate .vjs-playback-rate-value{
442
- line-height: 4;
403
+ .video-js.skin_mini .vjs-text-track-display-ttml p {
404
+ font-size: 18px !important;
443
405
  }
444
406
 
445
- .video-js.skin_news .vjs-fullscreen .icon-maximize,
446
- .icon-minimize {
447
- display: none;
448
- height: 32px;
407
+ .video-js.skin_mini.vjs-has-started.vjs-user-active.vjs-controls-enabled .vjs-text-track-display-ttml p {
408
+ margin-bottom: 1rem !important;
449
409
  }
450
410
 
451
- .video-js.skin_news button.vjs-play-control.vjs-control.vjs-button{
452
- outline: none !important;
453
- }
454
- .video-js.skin_news .vjs-fullscreen-control .vjs-icon-placeholder:before,
455
- .vjs-icon-fullscreen-enter:before {
456
- /* content: '' !important; */
457
- }
458
411
 
459
- .video-js.skin_news button.vjs-fullscreen-control.vjs-control.vjs-button {
412
+ .video-js.skin_mini .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:hover .vjs-volume-control.vjs-control.vjs-volume-horizontal {
460
413
  display: flex;
461
414
  justify-content: center;
462
415
  align-items: center;
463
- /* transform: rotate(90deg); */
464
- }
465
-
466
- .video-js.skin_news .vjs-subs-caps-button .vjs-icon-placeholder:before{
467
- display: none;
416
+ height: 100%;
417
+ transition: width 0.1s;
468
418
  }
469
- .video-js.skin_news .vjs-volume-panel .vjs-volume-control{
470
- margin-left: -10px;
419
+ .video-js.skin_mini .vjs-track-settings-colors fieldset.vjs-fg.vjs-track-setting{
420
+ margin: 2px;
471
421
  }
472
422
 
473
- .video-js.skin_news .skipbtn:hover{
474
- cursor: pointer;
423
+ .video-js.skin_mini .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:active .vjs-volume-control.vjs-control.vjs-volume-horizontal {
424
+ display: flex;
425
+ justify-content: center;
426
+ align-items: center;
427
+ height: 100%;
428
+ transition: width 0.1s;
475
429
  }
476
-
477
- .video-js.skin_news .rewindbtn:hover{
478
- cursor: pointer;
430
+ .video-js.skin_mini .vjs-text-track-settings .vjs-modal-dialog-content{
431
+ display: grid;
432
+ font-size: 10px;
433
+ grid-template-columns: 1fr;
434
+ grid-template-rows: 1fr;
435
+ padding: 1px 0px 0 0px;
436
+ margin: 0;
479
437
  }
480
438
 
481
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control{
482
- position: relative;
483
- padding-left: 0;
484
- }
439
+ @media (max-width: 600px) {
440
+ .video-js.skin_mini .vjs-progress-control .vjs-progress-holder{
441
+ height: 5px !important;
442
+ }
485
443
 
486
- .video-js.skin_news.vjs-seeking .vjs-big-play-button{
487
- display: none !important;
488
- }
444
+ .video-js.skin_mini .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
445
+ display: none;
446
+ }
489
447
 
490
- .video-js.skin_news.vjs-paused .vjs-big-play-button {
491
- width: 90px;
492
- height: 90px;
493
- display: flex;
494
- justify-content: center;
495
- align-items: center;
496
- border-radius: 50%;
497
- position: absolute;
498
- top: 0;
499
- left: 0;
500
- right: 0;
501
- bottom: 0;
502
- margin: auto;
503
- font-size: 6em;
504
- line-height: 1.4em;
505
- border: 0.05em solid;
506
- color: inherit;
507
- }
508
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge{
509
- font-weight: bold;
510
448
  }
511
449
 
512
- .video-js.skin_news .vjs-menu > ul.vjs-menu-content{
513
- bottom: 2.4em !important;
514
- right: -1em;
515
- z-index: 1;
450
+ .video-js.skin_mini .vjs-control-bar .vjs-svg-icon{
451
+ content: none !important;
452
+ fill: none !important;
453
+ filter: none !important;
516
454
  }
517
455
 
518
- .video-js.skin_news .vjs-chromecast-button .vjs-icon-placeholder {
519
- width: 24px !important;
520
- height: 24px !important;
521
- }
522
- .settings-selector-icon>svg{
523
- height: 19px !important;
524
- width: 19px !important;
456
+ /* svg icons opacity and hover effect */
457
+ .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button svg {
458
+ opacity: 0.7 !important;
525
459
  }
526
460
 
527
-
528
- .video-js.skin_news button.vjs-rewind-button{
529
- cursor: pointer;
461
+ .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button:hover svg {
462
+ opacity: 1 !important;
530
463
  }
531
464
 
532
- .video-js.skin_news .vjs-control-bar .vjs-current-time.vjs-time-control.vjs-control {
533
- padding-right: 0;
465
+ .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
466
+ color: rgba(255, 255, 2555, 0.7)!important;
534
467
  }
535
468
 
536
- .video-js.skin_news .vjs-control-bar .vjs-duration.vjs-time-control.vjs-control {
537
- padding-left: 0;
469
+ .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
470
+ color: rgba(255, 255, 2555, 1)!important;
538
471
  }
539
472
 
540
- .video-js.skin_news .vjs-control-bar .vjs-time-control.vjs-time-divider {
541
- padding-left: 0;
542
- padding-right: 0;
543
- display: flex;
544
- justify-content: center;
545
- width: min-content;
546
- }
547
473
 
548
- .video-js.skin_news.vjs-live .vjs-control-bar .vjs-time-control {
549
- display: none
550
- }
551
- .video-js.skin_news.vjs-liveui .vjs-control-bar .vjs-time-control {
552
- display: none
553
- }
554
474
 
555
- .video-js.skin_news .vjs-control-bar .vjs-time-control {
475
+ .video-js.skin_cn_news .vjs-control-bar {
476
+ z-index: 1 !important;
477
+ height: auto !important;
478
+ padding: 0.8em 30px 0.6em;
479
+ background: transparent !important;
556
480
  display: flex;
481
+ flex-wrap: wrap;
557
482
  align-items: center;
558
- font-weight: 700;
559
- font-size: 12px;
560
- min-width: 1.2em;
561
- }
562
-
563
- .video-js.skin_news .vjs-remaining-time.vjs-time-control.vjs-control {
564
- display: none;
565
- font-size: 11px;
566
- justify-content: center;
567
- align-items: center;
568
- user-select: none;
569
- }
570
- .video-js.skin_news.vjs-live .vjs-remaining-time.vjs-time-control.vjs-control{
571
- display: none;
483
+ column-gap: 10px;
572
484
  }
573
485
 
574
- .video-js.skin_news button.vjs-subs-caps-button.vjs-menu-button.vjs-menu-button-popup.vjs-button{
575
- height: min-content;
576
- width: min-content;
577
- }
578
- .video-js.skin_news .vjs-volume-panel.vjs-volume-panel-vertical{
579
- width: 6em;
580
- }
581
486
 
582
- .video-js.skin_news .content{
583
- bottom: 3.4rem !important;
584
- right: -4rem !important;
585
- }
586
-
587
- .setting-icon > svg{
588
- height:18px !important;
589
- }
590
-
591
- .output-overlay{
487
+ .video-js.skin_cn_news .vjs-control-bar::before {
488
+ content: '';
592
489
  position: absolute;
490
+ left: 0;
491
+ right: 0;
593
492
  bottom: 0;
594
- height: 100%;
595
- width: 100%;
596
- z-index: 0;
597
- border: 0;
598
- pointer-events:none
493
+ top: -3em;
494
+ background: linear-gradient(
495
+ to top,
496
+ rgba(0, 0, 0, 0.85) 0%,
497
+ rgba(0, 0, 0, 0.7) 40%,
498
+ rgba(0, 0, 0, 0.55) 70%,
499
+ rgba(0, 0, 0, 0.38) 86%,
500
+ transparent 100%
501
+ );
502
+ pointer-events: none;
503
+ z-index: -1;
599
504
  }
600
505
 
601
- .video-js.skin_news iframe{
602
- width: 100%;
603
- height: 100%;
506
+ .video-js.skin_cn_news .vjs-control-bar .vjs-progress-control {
507
+ order: -1;
508
+ flex: 0 0 100%;
509
+ width: 80%;
510
+ margin: 0 0 5em;
511
+ position: relative;
604
512
  }
605
513
 
606
- .video-js.skin_news .vjs-live-control{
607
- align-items: center;
514
+ .video-js.skin_cn_news .vjs-control-bar > .vjs-control,
515
+ .video-js.skin_cn_news .vjs-control-bar > .vjs-button {
516
+ width: auto;
517
+ min-width: 0;
608
518
  }
609
- .video-js.skin_news .vjs-live-control.vjs-control .vjs-live-display{
610
- height: 2.2em;
611
- display: flex;
519
+ .video-js.skin_cn_news .vjs-control-bar .vjs-button {
520
+ display: inline-flex;
612
521
  align-items: center;
613
- font-family: monospace;
614
- width: 4em;
615
522
  justify-content: center;
616
- background: red;
617
- margin: 4px 0px 4px 12px;
523
+ height: 7em;
524
+ padding: 0 10px;
525
+ color: #fff;
618
526
  }
619
527
 
620
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control:focus{
621
- text-shadow: none;
622
- }
623
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-seek-to-live-text {
624
- display: none;
625
- font-size: 12px;
528
+ .video-js.skin_cn_news .vjs-svg-icon::before {
529
+ content: none !important;
626
530
  }
627
531
 
628
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder {
629
- height: 2.2em;
532
+
533
+ .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon {
630
534
  display: inline-flex;
631
535
  align-items: center;
632
- /* font-family: monospace; */
633
536
  justify-content: center;
634
- border: 2px solid;
635
- margin: 4px 0px 4px 6px;
636
- white-space: pre;
637
- padding: 0px 6px;
638
- font-size: 1.2em;
639
- font-weight: 500;
640
- color: rgba(255, 255, 2555, 0.7);
641
-
642
- letter-spacing: -.1px;
643
- line-height: normal;
644
- text-transform: uppercase;
645
- color: #FFFFFF;
646
- opacity: .7;
647
- font-family: "Proxima Nova";
648
537
  }
649
-
650
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder:hover{
651
- opacity: 1;
538
+ .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon svg,
539
+ .video-js.skin_cn_news .vjs-rewind-button svg {
540
+ width: 24px;
541
+ height: 24px;
542
+ display: block;
652
543
  }
653
544
 
654
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder::before {
655
- content: "NOT LIVE";
656
- }
657
545
 
658
- .settings-selection.vjs-control.vjs-button{
659
- display: flex !important;
660
- }
661
546
 
662
- @media(max-width:576px){
663
- .settings-selection.vjs-control.vjs-button{
664
- display: none !important;
665
- }
547
+ .video-js.skin_cn_news .vjs-subs-caps-button {
548
+ opacity: 1;
666
549
  }
667
550
 
668
551
 
669
- @media(max-width:576px){
670
- .tvProviderImage{
671
- display: none
672
- }
673
- .video-js.skin_news .vjs-fullscreen .icon-minimize,
674
- .icon-maximize {
675
- height: 30px !important;
676
- }
677
-
678
- .video-js.skin_news .vjs-fullscreen .icon-maximize,
679
- .icon-minimize {
680
- height: 30px !important;
681
- }
682
- .video-js.skin_news .vjs-volume-panel.vjs-volume-panel-vertical{
683
- width: 4.5em;
684
- }
685
- .video-js.skin_news button.vjs-fullscreen-control.vjs-control.vjs-button>span.vjs-icon-placeholder::before {
686
- height: min-content;
687
- }
688
552
 
689
- .video-js.skin_news button.vjs-slowmo-button{
690
- display: none;
691
- }
692
- .video-js.skin_news button.vjs-rewind-button{
693
- display: none;
694
- }
695
- .video-js.skin_news button.vjs-rewind-button>svg{
696
- height: 20px;
697
- }
698
- .video-js.skin_news .vjs-button{
699
- width: 4.8em;
700
- }
701
- .video-js.skin_news .widget-selection{
702
- display: none;
703
- }
704
- .video-js.skin_news .container{
705
- display: none !important;
706
- }
707
- .video-js.skin_news .vjs-control-bar{
708
- height: 4em !important;
709
- }
710
- .video-js.skin_news .vjs-button>.vjs-icon-placeholder:before{
711
- font-size: 2.5em;
712
- line-height: 1.5;
713
- }
714
- .video-js.skin_news .vjs-play-progress:before {
715
- font-size: 1.2em;
716
- position: absolute;
717
- right: -0.5em;
718
- z-index: 1;
553
+ .video-js.skin_cn_news .vjs-volume-panel {
554
+ margin: 0;
555
+ display: inline-flex;
556
+ align-items: center;
557
+ align-self: center;
558
+ height: 2.2em;
559
+ min-width: 7em;
560
+ transition: none;
719
561
  }
720
- .video-js.skin_news button.vjs-skip-button>svg{
721
- height: 20px;
562
+ .video-js.skin_cn_news .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
563
+ width: 0;
564
+ height: 100%;
565
+ display: flex;
566
+ align-items: center;
567
+ overflow: hidden;
568
+ opacity: 0;
569
+ transition: width 0.15s ease, opacity 0.15s ease;
722
570
  }
723
- .video-js.skin_news button.vjs-big-play-button {
724
- width: 50px !important;
725
- height: 50px !important;
726
- font-size: 2.1rem !important;
571
+ .video-js.skin_cn_news .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal,
572
+ .video-js.skin_cn_news .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
573
+ .video-js.skin_cn_news .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal,
574
+ .video-js.skin_cn_news .vjs-volume-panel:focus-within .vjs-volume-control.vjs-volume-horizontal {
575
+ width: 5em;
576
+ opacity: 1;
727
577
  }
728
578
 
729
- .stream-selector-icon>svg{
730
- width: 24px;
731
- height: 24px;
579
+ .video-js.skin_cn_news .vjs-volume-bar {
580
+ width: 4em;
581
+ height: 0.3em;
582
+ margin: 0 0.45em;
732
583
  }
733
- .video-js.skin_news.vjs-live .vjs-progress-control .vjs-progress-holder{
734
- margin: 0 12px 0 12px;
584
+
585
+
586
+ .video-js.skin_cn_news .vjs-volume-control .vjs-mouse-display {
587
+ display: none !important;
735
588
  }
736
- .video-js.skin_news .vjs-seek-to-live-text{
737
- font-size: 12px;
589
+
590
+ .video-js.skin_cn_news .vjs-mute-control.vjs-vol-0 ~ .vjs-volume-control .vjs-volume-level {
591
+ width: 0 !important;
738
592
  }
739
- .video-js.skin_news .vjs-progress-control .vjs-progress-holder {
740
- margin: 0 12px 0 12px;
593
+
594
+
595
+ .video-js.skin_cn_news .vjs-custom-control-spacer {
596
+ display: block !important;
597
+ flex: 1 1 auto;
741
598
  }
599
+
600
+
601
+ .video-js.skin_cn_news .vjs-big-play-button {
602
+ display: none;
742
603
  }
743
- .video-js.skin_news.vjs-paused .vjs-big-play-button {
744
- width: 90px;
745
- height: 90px;
604
+ .video-js.skin_cn_news .vjs-big-play-button .vjs-icon-placeholder:before {
605
+ position: relative !important;
606
+ display: flex;
607
+ left: 0;
608
+ top: -1px;
609
+ }
610
+ .video-js.skin_cn_news.vjs-paused:not(.vjs-seeking):not(.vjs-ended) .vjs-big-play-button {
746
611
  display: flex;
747
612
  justify-content: center;
748
613
  align-items: center;
749
- border-radius: 50%;
750
614
  position: absolute;
751
615
  top: 0;
752
616
  left: 0;
753
617
  right: 0;
754
618
  bottom: 0;
755
619
  margin: auto;
756
- font-size: 6em;
757
- line-height: 1.4em;
620
+ width: 80px;
621
+ height: 80px;
622
+ border: none;
623
+ border-radius: 50%;
624
+ background: rgba(0, 0, 0, 0.55);
625
+ font-size: 5em;
626
+ line-height: 1.3em;
627
+ transform: none !important;
758
628
  }
759
629
 
760
- .video-js.skin_news .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:hover .vjs-volume-control.vjs-control.vjs-volume-horizontal {
761
- display: flex;
762
- justify-content: center;
763
- align-items: center;
764
- height: 100%;
765
- transition: width 0.1s;
766
- }
767
630
 
768
- .video-js.skin_news .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:active .vjs-volume-control.vjs-control.vjs-volume-horizontal {
769
- display: flex;
770
- justify-content: center;
771
- align-items: center;
772
- height: 100%;
773
- transition: width 0.1s;
774
- }
775
- .video-js.skin_news.vjs-fullscreen .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
776
- display: none !important;
631
+ .video-js.skin_cn_news .vjs-progress-control .vjs-progress-holder {
632
+ height: 4px !important;
633
+ margin: 0;
634
+ border-radius: 20px;
635
+ background-color: #393944;
777
636
  }
778
- .video-js.skin_news .ssai-ad-container{
779
- position: absolute;
780
- bottom: 14px;
637
+
638
+ .video-js.skin_cn_news .vjs-play-progress {
639
+ background-color: #ffffff;
640
+ border-radius: 20px;
781
641
  }
782
642
 
643
+ .video-js.skin_cn_news .vjs-load-progress,
644
+ .video-js.skin_cn_news .vjs-load-progress div {
645
+ background: rgba(255, 255, 255, 0.15);
646
+ border-radius: 20px;
647
+ }
648
+
649
+
650
+ .video-js.skin_cn_news .vjs-play-progress:before {
651
+ content: '';
652
+ width: 16px;
653
+ height: 16px;
654
+ border-radius: 50%;
655
+ background: #ffffff;
656
+ border: 2px solid rgba(0, 0, 0, 0.6);
657
+ box-sizing: border-box;
658
+ box-shadow: 0 0 0 2px #ffffff, 0 0 3px rgba(0, 0, 0, 0.45);
659
+ top: -6px;
660
+ right: -8px;
661
+ position: absolute;
662
+ }
663
+ .video-js.skin_cn_news .vjs-play-progress .vjs-time-tooltip {
664
+ display: none !important;
665
+ }
666
+
667
+ .video-js.skin_cn_news .vjs-mouse-display .vjs-time-tooltip {
668
+ background: #ffffff;
669
+ color: #0a0e17;
670
+ font-weight: 700;
671
+ border-radius: 3px;
672
+ }
673
+
674
+ .video-js.skin_cn_news .vjs-live-control {
675
+ display: none !important;
676
+ }
677
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-control {
678
+ display: inline-flex;
679
+ align-items: center;
680
+ align-self: center;
681
+ height: 2.2em;
682
+ gap: 5px;
683
+ width: auto;
684
+ padding: 0 10px;
685
+ border: 1px solid rgba(255, 255, 255, 0.45);
686
+ border-radius: 4px;
687
+ cursor: pointer;
688
+ }
689
+
690
+ .video-js.skin_cn_news .vjs-seek-to-live-control .vjs-icon-placeholder {
691
+ display: none;
692
+ }
693
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder {
694
+ display: inline-flex;
695
+ align-items: center;
696
+ }
697
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder::before {
698
+ content: '';
699
+ display: inline-block;
700
+ width: 8px;
701
+ height: 8px;
702
+ border-radius: 50%;
703
+ background: #ff2d2d; /* red live dot */
704
+ }
705
+ .video-js.skin_cn_news .vjs-seek-to-live-text {
706
+ color: #ffffff;
707
+ font-weight: 700;
708
+ font-size: 12px;
709
+ letter-spacing: 0.03em;
710
+ }
711
+
712
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge {
713
+ border-color: transparent;
714
+ }
715
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-seek-to-live-text {
716
+ color: #ff2d2d;
717
+ }
718
+
719
+ /* ---- time controls ---- */
720
+ .video-js.skin_cn_news .vjs-current-time,
721
+ .video-js.skin_cn_news .vjs-duration,
722
+ .video-js.skin_cn_news .vjs-time-divider {
723
+ display: none !important;
724
+ }
725
+ .video-js.skin_cn_news .vjs-remaining-time.vjs-time-control.vjs-control {
726
+ display: none;
727
+ align-items: center;
728
+ justify-content: center;
729
+ font-size: 11px;
730
+ font-weight: 700;
731
+ color: #fff;
732
+ padding: 0 6px;
733
+ user-select: none;
734
+ }
735
+
736
+
737
+ .video-js.skin_cn_news .vjs-chapter-marker {
738
+ z-index: 2;
739
+ width: var(--vl-chapter-size, 8px);
740
+ height: var(--vl-chapter-size, 8px);
741
+ top: 50%;
742
+ bottom: auto;
743
+ background: var(--vl-chapter-color, #ffffff);
744
+ opacity: var(--vl-chapter-opacity, 1);
745
+ border-radius: 50%;
746
+ box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); /* keep white dots visible on the white bar */
747
+ transform: translate(-50%, -50%) scale(1);
748
+ transition: background-color 0.12s ease;
749
+ }
750
+ .video-js.skin_cn_news .vjs-chapter-marker:hover {
751
+ background: var(--vl-chapter-hover, #0a5cff);
752
+ }
753
+ .video-js.skin_cn_news .vjs-chapter-marker.vjs-chapter-marker--active {
754
+ background: var(--vl-chapter-active, #0a5cff);
755
+ }
756
+
757
+
758
+ .video-js.skin_cn_news .vjs-chapter-marker .vjs-chapter-marker__icon {
759
+ width: 16px;
760
+ height: 16px;
761
+ bottom: 160%;
762
+ filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
763
+ }
764
+
765
+
766
+ .video-js.skin_cn_news .vjs-chapter-preview {
767
+ background: var(--vl-chapter-tooltip, #0a5cff);
768
+ border-radius: 6px;
769
+ padding: 8px 10px;
770
+ width: max-content;
771
+ max-width: 300px;
772
+ text-align: left;
773
+ box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
774
+ }
775
+ .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__time {
776
+ color: #ffffff;
777
+ font-size: 13px;
778
+ font-weight: 400;
779
+ margin-bottom: 2px;
780
+ }
781
+ .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__label {
782
+ color: #ffffff;
783
+ font-size: 13px;
784
+ font-weight: 400;
785
+ line-height: 1.3;
786
+ white-space: normal;
787
+ text-align: left;
788
+ }
789
+ .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__pointer {
790
+ border-top-color: var(--vl-chapter-tooltip, #0a5cff);
791
+ }
792
+
793
+ /* ---- responsive ---- */
783
794
  @media (max-width: 576px) {
784
- .video-js.skin_news .ssai-ad-container{
785
- bottom: 2px;
795
+ .video-js.skin_cn_news .vjs-control-bar {
796
+ height: 3.2em !important;
797
+ padding: 0 8px;
786
798
  }
787
- .video-js.skin_news .vjs-progress-control .vjs-progress-holder{
788
- height: 5px !important;
799
+ .video-js.skin_cn_news .vjs-control-bar .vjs-button {
800
+ padding: 0 6px;
789
801
  }
790
- .video-js.skin_news button.vjs-big-play-button {
791
- width: 50px !important;
792
- height: 50px !important;
793
- font-size: 2.1rem !important;
802
+ .video-js.skin_cn_news .vjs-control.vjs-button.vjs-picture-in-picture-control {
803
+ display: none !important;
794
804
  }
805
+ }
795
806
 
796
- .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
797
- display: none;
798
- }
799
- .video-js.skin_news .vjs-menu > ul.vjs-menu-content {
800
- bottom: 2.4em !important;
801
- right: -1em;
807
+ .video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control {
808
+ height: 0.7em;
809
+ position: absolute;
810
+ top: -0.7em;
811
+ width: 100%;
812
+ }
813
+
814
+ .video-js.skin_vlone .vjs-progress-holder.vjs-slider.vjs-slider-horizontal {
815
+ height: 100%;
816
+ }
817
+
818
+ .video-js.skin_vlone .vjs-playback-rate .vjs-playback-rate-value{
819
+ line-height: 2.5;
820
+ }
821
+
822
+ .video-js.skin_vlone button.vjs-control.vjs-button.vjs-rewind-button > svg{
823
+ height: 19px;
824
+ width: 19px;
825
+ cursor: pointer;
826
+ }
827
+ .video-js.skin_vlone .vjs-control {
828
+ user-select: none;
829
+ }
830
+ .video-js.skin_vlone .vjs-custom-control-spacer{
831
+ user-select: none;
832
+ }
833
+
834
+ .video-js.skin_vlone button.vjs-control.vjs-button.vjs-skip-button > svg{
835
+ height: 19px;
836
+ width: 19px;
837
+ cursor: pointer;
838
+ }
839
+
840
+ .video-js.skin_vlone .vjs-play-progress:before {
841
+ display: none !important;
842
+ }
843
+
844
+ .video-js.skin_vlone .vjs-progress-control>.vjs-progress-holder.vjs-slider {
845
+ margin: 0 !important;
846
+
847
+ }
848
+
849
+
850
+ .video-js.skin_vlone .vjs-custom-control-spacer {
851
+ display: block;
852
+ flex: 1 1 auto;
853
+ }
854
+
855
+ .video-js.skin_vlone .vjs-volume-panel.vjs-volume-panel-vertical{
802
856
  z-index: 1;
803
857
  }
804
- .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
858
+
859
+
860
+ .video-js.skin_vlone .vjs-control-bar {
861
+ height: 40px;
862
+ }
863
+
864
+ .video-js.skin_vlone .vjs-big-play-button .vjs-icon-placeholder:before,
865
+ .vjs-button>.vjs-icon-placeholder:before {
866
+ position: relative !important;
867
+ }
868
+ .video-js.skin_vlone .vjs-big-play-button .vjs-icon-placeholder:before{
869
+ display: flex;
870
+ left: 0px;
871
+ top: -1px;
872
+ }
873
+
874
+ .vjs-button>.vjs-icon-placeholder:before {
875
+ font-size: 2em !important;
876
+ }
877
+
878
+ .video-js.skin_vlone .vjs-control {
879
+ width: 4.3em;
880
+ }
881
+
882
+ .vjs-menu-button-popup .vjs-menu {
883
+ bottom: 10px !important;
884
+ }
885
+
886
+
887
+ .video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control:hover {
888
+ height: 1.3em;
889
+ position: absolute;
890
+ top: -1.3em;
891
+ transition: height 0.3s, top 0.3s;
892
+ }
893
+
894
+
895
+ .video-js.skin_vlone.vjs-live .vjs-time-control{
805
896
  display: none !important;
806
- }
897
+ }
807
898
 
808
- .video-js.skin_news .vjs-text-track-display-ttml span {
809
- color: white;
810
- font-size: 13px;
811
- background-color: black;
812
- }
899
+ .video-js.skin_vlone .vjs-time-control {
900
+ display: block;
901
+ }
902
+ .video-js.skin_vlone .vjs-remaining-time {
903
+ display: none;
904
+ }
905
+
906
+ .video-js.skin_vlone .vjs-remaining-time.vjs-time-control.vjs-control>span.vjs-remaining-time-display {
907
+ line-height: 3.5em;
908
+ font-size: 1.1em;
909
+ min-width: 4em;
813
910
  }
814
911
 
815
- .video-js.skin_news .vjs-text-track-display-ttml span {
816
- color: white;
817
- font-size: 16px;
818
- background-color: black;
912
+ .video-js.skin_vlone .vjs-time-divider > div{
913
+ display: flex;
914
+ justify-content: center;
819
915
  }
820
916
 
821
- .video-js.skin_news.vjs-has-started.vjs-user-active.vjs-controls-enabled .vjs-text-track-display-ttml p {
822
- margin-bottom: 2rem !important;
917
+ .video-js.skin_vlone .vjs-live-control{
918
+ align-items: center;
919
+ }
920
+ .video-js.skin_vlone .vjs-live-display{
921
+ height: 2.2em;
922
+ display: flex;
923
+ align-items: center;
924
+ font-family: monospace;
925
+ width: 4em;
926
+ justify-content: center;
927
+ background: red;
928
+ margin: 4px 0px 4px 12px;
929
+ }
930
+ .video-js.skin_vlone .vjs-live-display.vjs-behind-live{
931
+ background: #6b6b6b;
932
+ }
933
+ .video-js.skin_vlone .vjs-live-display:hover{
934
+ cursor: pointer;
823
935
  }
824
936
 
825
- .video-js.skin_news .vjs-text-track-display-ttml p {
826
- font-size: 18px !important;
937
+ .video-js.skin_vlone .vjs-time-control {
938
+ line-height: 3.5em !important;
939
+ font-size: 1.1em !important;
940
+ width: min-content !important;
941
+ min-width: 1.5em;
942
+ padding: 0 !important;
943
+ user-select: none;
827
944
  }
828
945
 
946
+ .video-js.skin_vlone .vjs-current-time.vjs-time-control.vjs-control {
947
+ margin-left: 16px !important;
948
+ }
829
949
 
830
- .video-js.skin_news .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
831
- .video-js.skin_news .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
950
+ .video-js.skin_vlone .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
951
+ .video-js.skin_vlone .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
832
952
  font-size: 1.2em !important;
833
953
  line-height: 1.5em !important;
834
954
  padding: 0.2em 0.8em !important;
835
955
  }
836
956
 
837
- .video-js.skin_news .vjs-control-bar .vjs-svg-icon{
838
- content: none !important;
839
- fill: none !important;
840
- filter: none !important;
841
- }
842
957
 
843
- /* svg icons opacity and hover effect */
844
- .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button svg {
845
- opacity: 0.7 !important;
958
+ /* Big play */
959
+ .video-js.skin_vlone.vjs-paused .vjs-big-play-button {
960
+ width: 80px;
961
+ height: 80px;
962
+ display: flex;
963
+ justify-content: center;
964
+ align-items: center;
965
+ border: none;
966
+ position: absolute;
967
+ top: 0;
968
+ left: 0;
969
+ right: 0;
970
+ bottom: 0;
971
+ margin: auto;
972
+ font-size: 5em;
973
+ line-height: 1.3em;
974
+ transform: none !important;
975
+ border-radius: 1.3em;
846
976
  }
847
-
848
- .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button:hover svg {
849
- opacity: 1 !important;
977
+ .video-js.skin_vlone .ssai-ad-container{
978
+ position: absolute;
979
+ bottom: 4px;
850
980
  }
851
- .video-js.skin_news .vjs-control-bar .vjs-remaining-time.vjs-time-control.vjs-control{
852
- opacity: 0.7 !important;
981
+
982
+ @media(max-width:600px){
983
+ .video-js.skin_vlone button.vjs-big-play-button {
984
+ width: 50px !important;
985
+ height: 50px !important;
986
+ font-size: 2.1rem !important;
987
+ }
988
+
989
+ .video-js.skin_vlone .ssai-ad-container {
990
+ position: absolute;
991
+ bottom: 2px;
853
992
  }
854
- .video-js.skin_news .vjs-control-bar .vjs-remaining-time.vjs-time-control.vjs-control:hover{
855
- opacity: 1 !important;
993
+ .video-js.skin_vlone .vjs-playback-rate .vjs-playback-rate-value {
994
+ display: none;
856
995
  }
857
996
 
858
- .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
859
- color: rgba(255, 255, 2555, 0.7)!important;
997
+ .video-js.skin_vlone button.vjs-control.vjs-button.vjs-rewind-button>svg {
998
+ /* display: none; */
860
999
  }
861
1000
 
862
- .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
863
- color: rgba(255, 255, 2555, 1)!important;
1001
+ .video-js.skin_vlone button.vjs-control.vjs-button.vjs-skip-button>svg {
1002
+ /* display: none; */
864
1003
  }
865
-
866
-
1004
+ }
1005
+
867
1006
 
868
1007
  .video-js.skin_news_live .vjs-button>.vjs-icon-placeholder:before {
869
1008
  font-size: 2.2em;
@@ -1304,285 +1443,95 @@
1304
1443
  width: 50px !important;
1305
1444
  height: 50px !important;
1306
1445
  font-size: 2.1rem !important;
1307
- }
1308
-
1309
- .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
1310
- display: none;
1311
- }
1312
- .video-js.skin_news_live .vjs-menu > ul.vjs-menu-content {
1313
- bottom: 2.4em !important;
1314
- right: -1em;
1315
- z-index: 1;
1316
- }
1317
- .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
1318
- display: none !important;
1319
- }
1320
-
1321
- .video-js.skin_news_live .vjs-text-track-display-ttml span {
1322
- color: white !important;
1323
- font-size: 13px !important;
1324
- background-color: black !important;
1325
- }
1326
- }
1327
-
1328
- .video-js.skin_news_live .vjs-text-track-display-ttml {
1329
- width: 100% !important;
1330
- }
1331
-
1332
- .video-js.skin_news_live .vjs-text-track-display-ttml span {
1333
- color: white !important;
1334
- font-size: 16px !important;
1335
- background-color: black !important;
1336
- }
1337
-
1338
- .video-js.skin_news_live.vjs-has-started.vjs-user-active.vjs-controls-enabled .vjs-text-track-display-ttml p {
1339
- margin-bottom: 2rem !important;
1340
- }
1341
-
1342
- .video-js.skin_news_live .vjs-text-track-display-ttml p {
1343
- font-size: 18px !important;
1344
- }
1345
-
1346
-
1347
- .video-js.skin_news_live .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
1348
- .video-js.skin_news_live .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
1349
- font-size: 1.2em !important;
1350
- line-height: 1.5em !important;
1351
- padding: 0.2em 0.8em !important;
1352
- }
1353
-
1354
- .video-js.skin_news_live .vjs-control-bar .vjs-svg-icon{
1355
- content: none !important;
1356
- fill: none !important;
1357
- filter: none !important;
1358
- }
1359
-
1360
- .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
1361
- color: rgba(255, 255, 2555, 0.7)!important;
1362
- }
1363
-
1364
- .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
1365
- color: rgba(255, 255, 2555, 1)!important;
1366
- }
1367
-
1368
-
1369
-
1370
- .video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control {
1371
- height: 0.7em;
1372
- position: absolute;
1373
- top: -0.7em;
1374
- width: 100%;
1375
- }
1376
-
1377
- .video-js.skin_vlone .vjs-progress-holder.vjs-slider.vjs-slider-horizontal {
1378
- height: 100%;
1379
- }
1380
-
1381
- .video-js.skin_vlone .vjs-playback-rate .vjs-playback-rate-value{
1382
- line-height: 2.5;
1383
- }
1384
-
1385
- .video-js.skin_vlone button.vjs-control.vjs-button.vjs-rewind-button > svg{
1386
- height: 19px;
1387
- width: 19px;
1388
- cursor: pointer;
1389
- }
1390
- .video-js.skin_vlone .vjs-control {
1391
- user-select: none;
1392
- }
1393
- .video-js.skin_vlone .vjs-custom-control-spacer{
1394
- user-select: none;
1395
- }
1396
-
1397
- .video-js.skin_vlone button.vjs-control.vjs-button.vjs-skip-button > svg{
1398
- height: 19px;
1399
- width: 19px;
1400
- cursor: pointer;
1401
- }
1402
-
1403
- .video-js.skin_vlone .vjs-play-progress:before {
1404
- display: none !important;
1405
- }
1406
-
1407
- .video-js.skin_vlone .vjs-progress-control>.vjs-progress-holder.vjs-slider {
1408
- margin: 0 !important;
1409
-
1410
- }
1411
-
1412
-
1413
- .video-js.skin_vlone .vjs-custom-control-spacer {
1414
- display: block;
1415
- flex: 1 1 auto;
1416
- }
1417
-
1418
- .video-js.skin_vlone .vjs-volume-panel.vjs-volume-panel-vertical{
1419
- z-index: 1;
1420
- }
1421
-
1422
-
1423
- .video-js.skin_vlone .vjs-control-bar {
1424
- height: 40px;
1425
- }
1426
-
1427
- .video-js.skin_vlone .vjs-big-play-button .vjs-icon-placeholder:before,
1428
- .vjs-button>.vjs-icon-placeholder:before {
1429
- position: relative !important;
1430
- }
1431
- .video-js.skin_vlone .vjs-big-play-button .vjs-icon-placeholder:before{
1432
- display: flex;
1433
- left: 0px;
1434
- top: -1px;
1435
- }
1436
-
1437
- .vjs-button>.vjs-icon-placeholder:before {
1438
- font-size: 2em !important;
1439
- }
1440
-
1441
- .video-js.skin_vlone .vjs-control {
1442
- width: 4.3em;
1443
- }
1444
-
1445
- .vjs-menu-button-popup .vjs-menu {
1446
- bottom: 10px !important;
1447
- }
1448
-
1449
-
1450
- .video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control:hover {
1451
- height: 1.3em;
1452
- position: absolute;
1453
- top: -1.3em;
1454
- transition: height 0.3s, top 0.3s;
1455
- }
1456
-
1457
-
1458
- .video-js.skin_vlone.vjs-live .vjs-time-control{
1459
- display: none !important;
1460
- }
1446
+ }
1461
1447
 
1462
- .video-js.skin_vlone .vjs-time-control {
1463
- display: block;
1464
- }
1465
- .video-js.skin_vlone .vjs-remaining-time {
1448
+ .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
1466
1449
  display: none;
1450
+ }
1451
+ .video-js.skin_news_live .vjs-menu > ul.vjs-menu-content {
1452
+ bottom: 2.4em !important;
1453
+ right: -1em;
1454
+ z-index: 1;
1467
1455
  }
1456
+ .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
1457
+ display: none !important;
1458
+ }
1468
1459
 
1469
- .video-js.skin_vlone .vjs-remaining-time.vjs-time-control.vjs-control>span.vjs-remaining-time-display {
1470
- line-height: 3.5em;
1471
- font-size: 1.1em;
1472
- min-width: 4em;
1460
+ .video-js.skin_news_live .vjs-text-track-display-ttml span {
1461
+ color: white !important;
1462
+ font-size: 13px !important;
1463
+ background-color: black !important;
1464
+ }
1473
1465
  }
1474
1466
 
1475
- .video-js.skin_vlone .vjs-time-divider > div{
1476
- display: flex;
1477
- justify-content: center;
1467
+ .video-js.skin_news_live .vjs-text-track-display-ttml {
1468
+ width: 100% !important;
1478
1469
  }
1479
1470
 
1480
- .video-js.skin_vlone .vjs-live-control{
1481
- align-items: center;
1482
- }
1483
- .video-js.skin_vlone .vjs-live-display{
1484
- height: 2.2em;
1485
- display: flex;
1486
- align-items: center;
1487
- font-family: monospace;
1488
- width: 4em;
1489
- justify-content: center;
1490
- background: red;
1491
- margin: 4px 0px 4px 12px;
1492
- }
1493
- .video-js.skin_vlone .vjs-live-display:hover{
1494
- cursor: pointer;
1471
+ .video-js.skin_news_live .vjs-text-track-display-ttml span {
1472
+ color: white !important;
1473
+ font-size: 16px !important;
1474
+ background-color: black !important;
1495
1475
  }
1496
1476
 
1497
- .video-js.skin_vlone .vjs-time-control {
1498
- line-height: 3.5em !important;
1499
- font-size: 1.1em !important;
1500
- width: min-content !important;
1501
- min-width: 1.5em;
1502
- padding: 0 !important;
1503
- user-select: none;
1477
+ .video-js.skin_news_live.vjs-has-started.vjs-user-active.vjs-controls-enabled .vjs-text-track-display-ttml p {
1478
+ margin-bottom: 2rem !important;
1504
1479
  }
1505
1480
 
1506
- .video-js.skin_vlone .vjs-current-time.vjs-time-control.vjs-control {
1507
- margin-left: 16px !important;
1481
+ .video-js.skin_news_live .vjs-text-track-display-ttml p {
1482
+ font-size: 18px !important;
1508
1483
  }
1509
1484
 
1510
- .video-js.skin_vlone .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
1511
- .video-js.skin_vlone .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
1485
+
1486
+ .video-js.skin_news_live .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
1487
+ .video-js.skin_news_live .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
1512
1488
  font-size: 1.2em !important;
1513
1489
  line-height: 1.5em !important;
1514
1490
  padding: 0.2em 0.8em !important;
1515
1491
  }
1516
1492
 
1517
-
1518
- /* Big play */
1519
- .video-js.skin_vlone.vjs-paused .vjs-big-play-button {
1520
- width: 80px;
1521
- height: 80px;
1522
- display: flex;
1523
- justify-content: center;
1524
- align-items: center;
1525
- border: none;
1526
- position: absolute;
1527
- top: 0;
1528
- left: 0;
1529
- right: 0;
1530
- bottom: 0;
1531
- margin: auto;
1532
- font-size: 5em;
1533
- line-height: 1.3em;
1534
- transform: none !important;
1535
- border-radius: 1.3em;
1536
- }
1537
- .video-js.skin_vlone .ssai-ad-container{
1538
- position: absolute;
1539
- bottom: 4px;
1493
+ .video-js.skin_news_live .vjs-control-bar .vjs-svg-icon{
1494
+ content: none !important;
1495
+ fill: none !important;
1496
+ filter: none !important;
1540
1497
  }
1541
-
1542
- @media(max-width:600px){
1543
- .video-js.skin_vlone button.vjs-big-play-button {
1544
- width: 50px !important;
1545
- height: 50px !important;
1546
- font-size: 2.1rem !important;
1547
- }
1548
1498
 
1549
- .video-js.skin_vlone .ssai-ad-container {
1550
- position: absolute;
1551
- bottom: 2px;
1552
- }
1553
- .video-js.skin_vlone .vjs-playback-rate .vjs-playback-rate-value {
1554
- display: none;
1499
+ .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
1500
+ color: rgba(255, 255, 2555, 0.7)!important;
1555
1501
  }
1556
1502
 
1557
- .video-js.skin_vlone button.vjs-control.vjs-button.vjs-rewind-button>svg {
1558
- /* display: none; */
1503
+ .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
1504
+ color: rgba(255, 255, 2555, 1)!important;
1559
1505
  }
1560
1506
 
1561
- .video-js.skin_vlone button.vjs-control.vjs-button.vjs-skip-button>svg {
1562
- /* display: none; */
1563
- }
1564
- }
1565
-
1566
- .video-js.skin_mini .vjs-button>.vjs-icon-placeholder:before {
1507
+
1508
+
1509
+
1510
+ .video-js.skin_news .vjs-button>.vjs-icon-placeholder:before {
1567
1511
  font-size: 2.2em;
1568
1512
  line-height: 2.6;
1569
1513
  }
1570
- .video-js.skin_mini{
1571
- overflow: hidden;
1514
+ .video-js.skin_news .vjs-custom-big-mute.vjs-control{
1515
+ background: white;
1572
1516
  }
1573
- .video-js.skin_mini .vjs-control-bar{
1517
+ .video-js.skin_news .vjs-control-bar{
1574
1518
  z-index: 1 !important;
1575
- height: 4em !important;
1519
+ height: 5em !important;
1576
1520
  background: black !important;
1577
1521
  }
1522
+ .video-js.skin_news .vjs-playback-rate .vjs-playback-rate-value{
1523
+ display: flex;
1524
+ align-items: center;
1525
+ justify-content: center;
1526
+ }
1578
1527
 
1579
- .video-js.skin_mini .vjs-fade>* {
1528
+ .video-js.skin_news .vjs-fade>* {
1580
1529
  visibility: hidden !important;
1581
1530
  opacity: 0 !important;
1582
1531
  transition: visibility 1s, opacity 1s !important;
1583
1532
  }
1584
1533
 
1585
- .video-js.skin_mini .custom-spaced-progress-bar {
1534
+ .video-js.skin_news .custom-spaced-progress-bar {
1586
1535
  position: absolute;
1587
1536
  width: 100%;
1588
1537
  display: flex;
@@ -1590,7 +1539,7 @@
1590
1539
  top: -0.5em;
1591
1540
  }
1592
1541
 
1593
- .video-js.skin_mini .vjs-progress-control {
1542
+ .video-js.skin_news .vjs-progress-control {
1594
1543
  /* left: -6px; */
1595
1544
  position: relative;
1596
1545
  width: 100%;
@@ -1601,19 +1550,19 @@
1601
1550
 
1602
1551
 
1603
1552
 
1604
- .video-js.skin_mini .vjs-custom-control-spacer {
1553
+ .video-js.skin_news .vjs-custom-control-spacer {
1605
1554
  display: block;
1606
1555
  flex: 1 1 auto;
1607
1556
  }
1608
1557
 
1609
- .video-js.skin_mini .vjs-progress-control .vjs-progress-holder {
1558
+ .video-js.skin_news .vjs-progress-control .vjs-progress-holder {
1610
1559
  margin: 0 0px 0 0px;
1611
1560
  }
1612
- .video-js.skin_mini .vjs-remaining-time.vjs-time-control.vjs-control{
1561
+ .video-js.skin_news .vjs-remaining-time.vjs-time-control.vjs-control{
1613
1562
  display: none;
1614
1563
  }
1615
1564
 
1616
- .video-js.skin_mini button.vjs-control.vjs-button.vjs-slowmo-button {
1565
+ .video-js.skin_news button.vjs-control.vjs-button.vjs-slowmo-button {
1617
1566
  font-size: 14px;
1618
1567
  font-weight: 500;
1619
1568
  align-self: center;
@@ -1622,158 +1571,143 @@
1622
1571
  border-radius: 8px;
1623
1572
  }
1624
1573
 
1625
- .video-js.skin_mini .vjs-progress-control .vjs-progress-holder{
1626
- height: 5px !important;
1574
+ .video-js.skin_news .vjs-progress-control .vjs-progress-holder{
1575
+ height: 6px !important;
1627
1576
  }
1628
1577
 
1629
- .video-js.skin_mini .vjs-play-progress:before {
1630
- font-size: 1.3em;
1578
+ .video-js.skin_news .vjs-play-progress:before {
1579
+ font-size: 1.5em;
1631
1580
  line-height: unset;
1632
1581
  top: -0.3333333333em;
1633
1582
  }
1634
1583
 
1635
- .video-js.skin_mini .vjs-play-progress .vjs-time-tooltip {
1584
+ .video-js.skin_news .vjs-play-progress .vjs-time-tooltip {
1636
1585
  display: none !important;
1637
1586
  }
1638
1587
 
1639
1588
  /* */
1640
- .video-js.skin_mini .vjs-mouse-display{
1589
+ .video-js.skin_news .vjs-mouse-display{
1641
1590
  font-size: 1.6666666667em;
1642
1591
  }
1643
1592
 
1644
- .video-js.skin_mini .vjs-progress-control:hover .vjs-progress-holder {
1593
+ .video-js.skin_news .vjs-progress-control:hover .vjs-progress-holder {
1645
1594
  font-size: 1em !important;
1646
1595
  }
1647
1596
 
1648
- .video-js.skin_mini .vjs-button{
1649
- width: 3em;
1597
+ .video-js.skin_news .vjs-button{
1598
+ width: 5.3em;
1650
1599
  display: flex;
1651
1600
  align-items: center;
1652
1601
  justify-content: center;
1653
1602
  }
1654
1603
 
1655
1604
 
1656
- .video-js.skin_mini .vjs-fullscreen .icon-minimize,
1605
+ .video-js.skin_news .vjs-fullscreen .icon-minimize,
1657
1606
  .icon-maximize {
1658
1607
  display: block;
1659
1608
  height: 32px;
1660
1609
  }
1661
1610
 
1662
- .video-js.skin_mini .vjs-playback-rate .vjs-playback-rate-value{
1611
+ .video-js.skin_news .vjs-playback-rate .vjs-playback-rate-value{
1663
1612
  line-height: 4;
1664
1613
  }
1665
1614
 
1666
- .video-js.skin_mini .vjs-fullscreen .icon-maximize,
1615
+ .video-js.skin_news .vjs-fullscreen .icon-maximize,
1667
1616
  .icon-minimize {
1668
1617
  display: none;
1669
1618
  height: 32px;
1670
1619
  }
1671
1620
 
1672
- .video-js.skin_mini button.vjs-play-control.vjs-control.vjs-button{
1621
+ .video-js.skin_news button.vjs-play-control.vjs-control.vjs-button{
1673
1622
  outline: none !important;
1674
1623
  }
1675
- .video-js.skin_mini .vjs-fullscreen-control .vjs-icon-placeholder:before,
1624
+ .video-js.skin_news .vjs-fullscreen-control .vjs-icon-placeholder:before,
1676
1625
  .vjs-icon-fullscreen-enter:before {
1677
1626
  /* content: '' !important; */
1678
1627
  }
1679
1628
 
1680
- .video-js.skin_mini button.vjs-fullscreen-control.vjs-control.vjs-button {
1629
+ .video-js.skin_news button.vjs-fullscreen-control.vjs-control.vjs-button {
1681
1630
  display: flex;
1682
1631
  justify-content: center;
1683
1632
  align-items: center;
1684
1633
  /* transform: rotate(90deg); */
1685
1634
  }
1686
1635
 
1687
- .video-js.skin_mini .vjs-subs-caps-button .vjs-icon-placeholder:before{
1636
+ .video-js.skin_news .vjs-subs-caps-button .vjs-icon-placeholder:before{
1688
1637
  display: none;
1689
1638
  }
1690
- .video-js.skin_mini .vjs-volume-panel .vjs-volume-control{
1639
+ .video-js.skin_news .vjs-volume-panel .vjs-volume-control{
1691
1640
  margin-left: -10px;
1692
- display: none;
1693
- }
1694
-
1695
- .video-js.skin_mini .vjs-loading-spinner {
1696
- position: absolute;
1697
- top: 50%;
1698
- left: 50%;
1699
- transform: translate(-50%, -50%);
1700
- opacity: .85;
1701
- text-align: left;
1702
- border: .2em solid rgba(43, 51, 63, .7);
1703
- box-sizing: border-box;
1704
- background-clip: padding-box;
1705
- width: 3em;
1706
- height: 3em;
1707
- border-radius: 50%;
1708
- visibility: hidden;
1709
1641
  }
1710
1642
 
1711
- .video-js.skin_mini .skipbtn:hover{
1643
+ .video-js.skin_news .skipbtn:hover{
1712
1644
  cursor: pointer;
1713
1645
  }
1714
1646
 
1715
- .video-js.skin_mini .rewindbtn:hover{
1647
+ .video-js.skin_news .rewindbtn:hover{
1716
1648
  cursor: pointer;
1717
1649
  }
1718
1650
 
1719
- .video-js.skin_mini .vjs-seek-to-live-control.vjs-control{
1651
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control{
1720
1652
  position: relative;
1721
1653
  padding-left: 0;
1722
1654
  }
1723
1655
 
1724
- .video-js.skin_mini.vjs-paused .vjs-big-play-button {
1725
- width: 40px;
1726
- height: 40px;
1727
- display: flex;
1728
- justify-content: center;
1729
- align-items: center;
1730
- border: none;
1731
- position: absolute;
1732
- top: 0;
1733
- left: 0;
1734
- right: 0;
1735
- bottom: 0;
1736
- margin: auto;
1737
- font-size: 3em;
1738
- line-height: 1.3em;
1739
- transform: none !important;
1740
- border-radius: 1.3em;
1656
+ .video-js.skin_news.vjs-seeking .vjs-big-play-button{
1657
+ display: none !important;
1741
1658
  }
1742
1659
 
1743
- .video-js.skin_mini .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge{
1660
+ .video-js.skin_news.vjs-paused .vjs-big-play-button {
1661
+ width: 90px;
1662
+ height: 90px;
1663
+ display: flex;
1664
+ justify-content: center;
1665
+ align-items: center;
1666
+ border-radius: 50%;
1667
+ position: absolute;
1668
+ top: 0;
1669
+ left: 0;
1670
+ right: 0;
1671
+ bottom: 0;
1672
+ margin: auto;
1673
+ font-size: 6em;
1674
+ line-height: 1.4em;
1675
+ border: 0.05em solid;
1676
+ color: inherit;
1677
+ }
1678
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge{
1744
1679
  font-weight: bold;
1745
1680
  }
1746
1681
 
1747
- .video-js.skin_mini .vjs-menu > ul.vjs-menu-content{
1748
- bottom: 1.1em !important;
1749
- right: 1em;
1682
+ .video-js.skin_news .vjs-menu > ul.vjs-menu-content{
1683
+ bottom: 2.4em !important;
1684
+ right: -1em;
1750
1685
  z-index: 1;
1751
- font-size: 10px;
1752
1686
  }
1753
1687
 
1754
- .video-js.skin_mini .vjs-chromecast-button .vjs-icon-placeholder {
1688
+ .video-js.skin_news .vjs-chromecast-button .vjs-icon-placeholder {
1755
1689
  width: 24px !important;
1756
1690
  height: 24px !important;
1757
1691
  }
1758
- .video-js.skin_mini .settings-selector-icon>svg{
1692
+ .settings-selector-icon>svg{
1759
1693
  height: 19px !important;
1760
1694
  width: 19px !important;
1761
1695
  }
1762
1696
 
1763
1697
 
1764
- .video-js.skin_mini button.vjs-rewind-button{
1698
+ .video-js.skin_news button.vjs-rewind-button{
1765
1699
  cursor: pointer;
1766
1700
  }
1767
1701
 
1768
- .video-js.skin_mini .vjs-control-bar .vjs-current-time.vjs-time-control.vjs-control {
1702
+ .video-js.skin_news .vjs-control-bar .vjs-current-time.vjs-time-control.vjs-control {
1769
1703
  padding-right: 0;
1770
1704
  }
1771
1705
 
1772
- .video-js.skin_mini .vjs-control-bar .vjs-duration.vjs-time-control.vjs-control {
1706
+ .video-js.skin_news .vjs-control-bar .vjs-duration.vjs-time-control.vjs-control {
1773
1707
  padding-left: 0;
1774
1708
  }
1775
1709
 
1776
- .video-js.skin_mini .vjs-control-bar .vjs-time-control.vjs-time-divider {
1710
+ .video-js.skin_news .vjs-control-bar .vjs-time-control.vjs-time-divider {
1777
1711
  padding-left: 0;
1778
1712
  padding-right: 0;
1779
1713
  display: flex;
@@ -1781,48 +1715,46 @@
1781
1715
  width: min-content;
1782
1716
  }
1783
1717
 
1784
- .video-js.skin_mini.vjs-live .vjs-control-bar .vjs-time-control {
1718
+ .video-js.skin_news.vjs-live .vjs-control-bar .vjs-time-control {
1785
1719
  display: none
1786
1720
  }
1787
- .video-js.skin_mini.vjs-liveui .vjs-control-bar .vjs-time-control {
1721
+ .video-js.skin_news.vjs-liveui .vjs-control-bar .vjs-time-control {
1788
1722
  display: none
1789
1723
  }
1790
1724
 
1791
- .video-js.skin_mini .vjs-control-bar .vjs-time-control {
1792
- display: flex;
1793
- align-items: center;
1794
- font-weight: 700;
1795
- font-size: 9px;
1796
- min-width: 0.8em;
1797
- padding-left: 0;
1725
+ .video-js.skin_news .vjs-control-bar .vjs-time-control {
1726
+ display: flex;
1727
+ align-items: center;
1728
+ font-weight: 700;
1729
+ font-size: 12px;
1730
+ min-width: 1.2em;
1798
1731
  }
1799
1732
 
1800
- .video-js.skin_mini .vjs-remaining-time.vjs-time-control.vjs-control {
1733
+ .video-js.skin_news .vjs-remaining-time.vjs-time-control.vjs-control {
1801
1734
  display: none;
1802
1735
  font-size: 11px;
1803
1736
  justify-content: center;
1804
1737
  align-items: center;
1805
1738
  user-select: none;
1806
1739
  }
1807
- .video-js.skin_mini.vjs-live .vjs-remaining-time.vjs-time-control.vjs-control{
1740
+ .video-js.skin_news.vjs-live .vjs-remaining-time.vjs-time-control.vjs-control{
1808
1741
  display: none;
1809
1742
  }
1810
1743
 
1811
- .video-js.skin_mini button.vjs-subs-caps-button.vjs-menu-button.vjs-menu-button-popup.vjs-button{
1744
+ .video-js.skin_news button.vjs-subs-caps-button.vjs-menu-button.vjs-menu-button-popup.vjs-button{
1812
1745
  height: min-content;
1813
1746
  width: min-content;
1814
1747
  }
1815
- .video-js.skin_mini .vjs-volume-panel.vjs-volume-panel-vertical{
1816
- width: 3em;
1817
- margin-right: 4px;
1748
+ .video-js.skin_news .vjs-volume-panel.vjs-volume-panel-vertical{
1749
+ width: 6em;
1818
1750
  }
1819
1751
 
1820
- .video-js.skin_mini .content{
1752
+ .video-js.skin_news .content{
1821
1753
  bottom: 3.4rem !important;
1822
1754
  right: -4rem !important;
1823
1755
  }
1824
1756
 
1825
- .video-js.skin_mini .setting-icon > svg{
1757
+ .setting-icon > svg{
1826
1758
  height:18px !important;
1827
1759
  }
1828
1760
 
@@ -1836,16 +1768,15 @@
1836
1768
  pointer-events:none
1837
1769
  }
1838
1770
 
1839
- .video-js.skin_mini iframe{
1771
+ .video-js.skin_news iframe{
1840
1772
  width: 100%;
1841
1773
  height: 100%;
1842
1774
  }
1843
1775
 
1844
- .video-js.skin_mini .vjs-live-control{
1776
+ .video-js.skin_news .vjs-live-control{
1845
1777
  align-items: center;
1846
- max-width: 5em;
1847
1778
  }
1848
- .video-js.skin_mini .vjs-live-control.vjs-control .vjs-live-display{
1779
+ .video-js.skin_news .vjs-live-control.vjs-control .vjs-live-display{
1849
1780
  height: 2.2em;
1850
1781
  display: flex;
1851
1782
  align-items: center;
@@ -1853,185 +1784,257 @@
1853
1784
  width: 4em;
1854
1785
  justify-content: center;
1855
1786
  background: red;
1856
- margin: 4px 0px 4px 2px;
1787
+ margin: 4px 0px 4px 12px;
1857
1788
  }
1858
1789
 
1859
- .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:focus{
1790
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control:focus{
1860
1791
  text-shadow: none;
1861
1792
  }
1862
- .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-seek-to-live-text {
1793
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-seek-to-live-text {
1863
1794
  display: none;
1864
1795
  font-size: 12px;
1865
1796
  }
1866
1797
 
1867
- .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder {
1868
- height: 1.8em;
1798
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder {
1799
+ height: 2.2em;
1869
1800
  display: inline-flex;
1870
1801
  align-items: center;
1871
- font-family: monospace;
1802
+ /* font-family: monospace; */
1872
1803
  justify-content: center;
1873
- border: 1.5px solid;
1874
- margin: 4px 0px 4px 2px;
1804
+ border: 2px solid;
1805
+ margin: 4px 0px 4px 6px;
1875
1806
  white-space: pre;
1876
- padding: 2px 4px;
1807
+ padding: 0px 6px;
1877
1808
  font-size: 1.2em;
1878
1809
  font-weight: 500;
1879
1810
  color: rgba(255, 255, 2555, 0.7);
1811
+
1812
+ letter-spacing: -.1px;
1813
+ line-height: normal;
1814
+ text-transform: uppercase;
1815
+ color: #FFFFFF;
1816
+ opacity: .7;
1817
+ font-family: "Proxima Nova";
1880
1818
  }
1881
1819
 
1882
- .video-js.skin_mini .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder::before {
1820
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder:hover{
1821
+ opacity: 1;
1822
+ }
1823
+
1824
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder::before {
1883
1825
  content: "NOT LIVE";
1884
- word-spacing: -4px;
1885
1826
  }
1886
1827
 
1828
+ .settings-selection.vjs-control.vjs-button{
1829
+ display: flex !important;
1830
+ }
1831
+
1832
+ @media(max-width:576px){
1833
+ .settings-selection.vjs-control.vjs-button{
1834
+ display: none !important;
1835
+ }
1836
+ }
1887
1837
 
1888
- @media(max-width:600px){
1838
+
1839
+ @media(max-width:576px){
1889
1840
  .tvProviderImage{
1890
1841
  display: none
1891
1842
  }
1892
- .video-js.skin_mini .vjs-fullscreen .icon-minimize,
1843
+ .video-js.skin_news .vjs-fullscreen .icon-minimize,
1893
1844
  .icon-maximize {
1894
1845
  height: 30px !important;
1895
1846
  }
1896
1847
 
1897
- .video-js.skin_mini .vjs-fullscreen .icon-maximize,
1848
+ .video-js.skin_news .vjs-fullscreen .icon-maximize,
1898
1849
  .icon-minimize {
1899
1850
  height: 30px !important;
1900
1851
  }
1901
- .video-js.skin_mini .vjs-volume-panel.vjs-volume-panel-vertical{
1902
- width: 3.5em;
1852
+ .video-js.skin_news .vjs-volume-panel.vjs-volume-panel-vertical{
1853
+ width: 4.5em;
1903
1854
  }
1904
- .video-js.skin_mini button.vjs-fullscreen-control.vjs-control.vjs-button>span.vjs-icon-placeholder::before {
1855
+ .video-js.skin_news button.vjs-fullscreen-control.vjs-control.vjs-button>span.vjs-icon-placeholder::before {
1905
1856
  height: min-content;
1906
1857
  }
1907
1858
 
1908
- .video-js.skin_mini button.vjs-slowmo-button{
1859
+ .video-js.skin_news button.vjs-slowmo-button{
1909
1860
  display: none;
1910
1861
  }
1911
- .video-js.skin_mini button.vjs-rewind-button{
1862
+ .video-js.skin_news button.vjs-rewind-button{
1912
1863
  display: none;
1913
1864
  }
1914
- .video-js.skin_mini button.vjs-rewind-button>svg{
1865
+ .video-js.skin_news button.vjs-rewind-button>svg{
1915
1866
  height: 20px;
1916
1867
  }
1917
- .video-js.skin_mini .vjs-button{
1918
- width: 3em;
1868
+ .video-js.skin_news .vjs-button{
1869
+ width: 4.8em;
1919
1870
  }
1920
- .video-js.skin_mini .widget-selection{
1871
+ .video-js.skin_news .widget-selection{
1921
1872
  display: none;
1922
1873
  }
1923
- .video-js.skin_mini .container{
1874
+ .video-js.skin_news .container{
1924
1875
  display: none !important;
1925
1876
  }
1926
- .video-js.skin_mini .vjs-control-bar{
1877
+ .video-js.skin_news .vjs-control-bar{
1927
1878
  height: 4em !important;
1928
1879
  }
1929
- .video-js.skin_mini .vjs-button>.vjs-icon-placeholder:before{
1880
+ .video-js.skin_news .vjs-button>.vjs-icon-placeholder:before{
1930
1881
  font-size: 2.5em;
1931
1882
  line-height: 1.5;
1932
1883
  }
1933
- .video-js.skin_mini .vjs-play-progress:before {
1884
+ .video-js.skin_news .vjs-play-progress:before {
1934
1885
  font-size: 1.2em;
1935
1886
  position: absolute;
1936
1887
  right: -0.5em;
1937
1888
  z-index: 1;
1938
1889
  }
1939
- .video-js.skin_mini button.vjs-skip-button>svg{
1890
+ .video-js.skin_news button.vjs-skip-button>svg{
1940
1891
  height: 20px;
1941
1892
  }
1893
+ .video-js.skin_news button.vjs-big-play-button {
1894
+ width: 50px !important;
1895
+ height: 50px !important;
1896
+ font-size: 2.1rem !important;
1897
+ }
1942
1898
 
1943
1899
  .stream-selector-icon>svg{
1944
1900
  width: 24px;
1945
1901
  height: 24px;
1946
1902
  }
1947
- .video-js.skin_mini .vjs-seek-to-live-text{
1948
- font-size: 12px;
1903
+ .video-js.skin_news.vjs-live .vjs-progress-control .vjs-progress-holder{
1904
+ margin: 0 12px 0 12px;
1949
1905
  }
1950
-
1951
- .video-js.skin_mini .vjs-text-track-display-ttml span {
1952
- color: white !important;
1953
- font-size: 16px !important;
1954
- background-color: rgba(0,0,0,0.2) !important;
1955
- }
1906
+ .video-js.skin_news .vjs-seek-to-live-text{
1907
+ font-size: 12px;
1956
1908
  }
1957
-
1958
- .video-js.skin_mini .vjs-text-track-display-ttml span {
1959
- color: white !important;
1960
- font-size: 16px !important;
1961
- background-color: rgba(0,0,0,0.2) !important;
1909
+ .video-js.skin_news .vjs-progress-control .vjs-progress-holder {
1910
+ margin: 0 12px 0 12px;
1962
1911
  }
1963
-
1964
- .video-js.skin_mini .vjs-text-track-display-ttml p {
1965
- font-size: 18px !important;
1966
1912
  }
1967
-
1968
- .video-js.skin_mini.vjs-has-started.vjs-user-active.vjs-controls-enabled .vjs-text-track-display-ttml p {
1969
- margin-bottom: 1rem !important;
1913
+ .video-js.skin_news.vjs-paused .vjs-big-play-button {
1914
+ width: 90px;
1915
+ height: 90px;
1916
+ display: flex;
1917
+ justify-content: center;
1918
+ align-items: center;
1919
+ border-radius: 50%;
1920
+ position: absolute;
1921
+ top: 0;
1922
+ left: 0;
1923
+ right: 0;
1924
+ bottom: 0;
1925
+ margin: auto;
1926
+ font-size: 6em;
1927
+ line-height: 1.4em;
1970
1928
  }
1971
1929
 
1972
-
1973
- .video-js.skin_mini .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:hover .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1930
+ .video-js.skin_news .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:hover .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1974
1931
  display: flex;
1975
1932
  justify-content: center;
1976
1933
  align-items: center;
1977
1934
  height: 100%;
1978
1935
  transition: width 0.1s;
1979
1936
  }
1980
- .video-js.skin_mini .vjs-track-settings-colors fieldset.vjs-fg.vjs-track-setting{
1981
- margin: 2px;
1982
- }
1983
1937
 
1984
- .video-js.skin_mini .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:active .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1938
+ .video-js.skin_news .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:active .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1985
1939
  display: flex;
1986
1940
  justify-content: center;
1987
1941
  align-items: center;
1988
1942
  height: 100%;
1989
1943
  transition: width 0.1s;
1990
1944
  }
1991
- .video-js.skin_mini .vjs-text-track-settings .vjs-modal-dialog-content{
1992
- display: grid;
1993
- font-size: 10px;
1994
- grid-template-columns: 1fr;
1995
- grid-template-rows: 1fr;
1996
- padding: 1px 0px 0 0px;
1997
- margin: 0;
1945
+ .video-js.skin_news.vjs-fullscreen .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
1946
+ display: none !important;
1947
+ }
1948
+ .video-js.skin_news .ssai-ad-container{
1949
+ position: absolute;
1950
+ bottom: 14px;
1998
1951
  }
1999
1952
 
2000
- @media (max-width: 600px) {
2001
- .video-js.skin_mini .vjs-progress-control .vjs-progress-holder{
1953
+ @media (max-width: 576px) {
1954
+ .video-js.skin_news .ssai-ad-container{
1955
+ bottom: 2px;
1956
+ }
1957
+ .video-js.skin_news .vjs-progress-control .vjs-progress-holder{
2002
1958
  height: 5px !important;
2003
1959
  }
1960
+ .video-js.skin_news button.vjs-big-play-button {
1961
+ width: 50px !important;
1962
+ height: 50px !important;
1963
+ font-size: 2.1rem !important;
1964
+ }
2004
1965
 
2005
- .video-js.skin_mini .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
1966
+ .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
2006
1967
  display: none;
2007
1968
  }
1969
+ .video-js.skin_news .vjs-menu > ul.vjs-menu-content {
1970
+ bottom: 2.4em !important;
1971
+ right: -1em;
1972
+ z-index: 1;
1973
+ }
1974
+ .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
1975
+ display: none !important;
1976
+ }
2008
1977
 
1978
+ .video-js.skin_news .vjs-text-track-display-ttml span {
1979
+ color: white;
1980
+ font-size: 13px;
1981
+ background-color: black;
1982
+ }
2009
1983
  }
2010
1984
 
2011
- .video-js.skin_mini .vjs-control-bar .vjs-svg-icon{
1985
+ .video-js.skin_news .vjs-text-track-display-ttml span {
1986
+ color: white;
1987
+ font-size: 16px;
1988
+ background-color: black;
1989
+ }
1990
+
1991
+ .video-js.skin_news.vjs-has-started.vjs-user-active.vjs-controls-enabled .vjs-text-track-display-ttml p {
1992
+ margin-bottom: 2rem !important;
1993
+ }
1994
+
1995
+ .video-js.skin_news .vjs-text-track-display-ttml p {
1996
+ font-size: 18px !important;
1997
+ }
1998
+
1999
+
2000
+ .video-js.skin_news .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
2001
+ .video-js.skin_news .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
2002
+ font-size: 1.2em !important;
2003
+ line-height: 1.5em !important;
2004
+ padding: 0.2em 0.8em !important;
2005
+ }
2006
+
2007
+ .video-js.skin_news .vjs-control-bar .vjs-svg-icon{
2012
2008
  content: none !important;
2013
2009
  fill: none !important;
2014
2010
  filter: none !important;
2015
2011
  }
2016
2012
 
2017
2013
  /* svg icons opacity and hover effect */
2018
- .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button svg {
2014
+ .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button svg {
2019
2015
  opacity: 0.7 !important;
2020
2016
  }
2021
2017
 
2022
- .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button:hover svg {
2018
+ .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button:hover svg {
2019
+ opacity: 1 !important;
2020
+ }
2021
+ .video-js.skin_news .vjs-control-bar .vjs-remaining-time.vjs-time-control.vjs-control{
2022
+ opacity: 0.7 !important;
2023
+ }
2024
+ .video-js.skin_news .vjs-control-bar .vjs-remaining-time.vjs-time-control.vjs-control:hover{
2023
2025
  opacity: 1 !important;
2024
2026
  }
2025
2027
 
2026
- .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
2028
+ .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
2027
2029
  color: rgba(255, 255, 2555, 0.7)!important;
2028
2030
  }
2029
2031
 
2030
- .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
2032
+ .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
2031
2033
  color: rgba(255, 255, 2555, 1)!important;
2032
2034
  }
2033
2035
 
2034
2036
 
2037
+
2035
2038
  /* CSS for videojs-dvr-seekbar */
2036
2039
 
2037
2040
  .video-js.vjs-dvr-seekbar {
@@ -2214,7 +2217,6 @@
2214
2217
 
2215
2218
 
2216
2219
 
2217
-
2218
2220
  .video-js .multicamera-parent.default{
2219
2221
  height: 345px;
2220
2222
  position: absolute;
@@ -2295,6 +2297,7 @@
2295
2297
 
2296
2298
 
2297
2299
 
2300
+
2298
2301
  .vjs-custom-big-mute.vjs-control{
2299
2302
  position: absolute;
2300
2303
  align-items: center;