@viewlift/player-backup 2.0.386-backup → 2.0.388-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 (64) hide show
  1. package/cjs/{autoNextVideo-19aa333e.js → autoNextVideo-5d96dfd8.js} +1 -1
  2. package/cjs/bundle.css +999 -999
  3. package/cjs/{features-5d7e8cc1.js → features-159b6881.js} +1 -1
  4. package/cjs/generic-a5c16647.js +1 -0
  5. package/cjs/{index-a4523b2c.js → index-52087553.js} +1 -1
  6. package/cjs/{index-ebc4afef.js → index-788fb63b.js} +1 -1
  7. package/cjs/{index-79d88164.js → index-c05087e2.js} +1 -1
  8. package/cjs/index.js +1 -1
  9. package/cjs/{multicamv2-f94727ee.js → multicamv2-a0e40578.js} +1 -1
  10. package/cjs/{multicamv2-20ae48e0.js → multicamv2-ad4fbf67.js} +1 -1
  11. package/cjs/{nextEpisodeButton-0e962dc4.js → nextEpisodeButton-938129c4.js} +1 -1
  12. package/cjs/{playlist-8596ffa9.js → playlist-dc97212e.js} +1 -1
  13. package/cjs/{series-2ec5a41a.js → series-95f0d2b1.js} +1 -1
  14. package/cjs/{series-v2-26626d6c.js → series-v2-4dfa43e1.js} +1 -1
  15. package/cjs/{series-v2-2e339e9b.js → series-v2-d31d9594.js} +1 -1
  16. package/cjs/{skin-12ea8f57.js → skin-01c0f6b9.js} +1 -1
  17. package/cjs/{skin-59aa968d.js → skin-0427f15f.js} +1 -1
  18. package/cjs/{skin-1bbb2916.js → skin-45b59e86.js} +1 -1
  19. package/cjs/{skin-a64932ac.js → skin-9860884e.js} +1 -1
  20. package/cjs/{skin-87233809.js → skin-9c0c0ae3.js} +1 -1
  21. package/cjs/{skin-96e07080.js → skin-ac9cf139.js} +1 -1
  22. package/cjs/{skin-b0f1d65d.js → skin-c9fa937e.js} +1 -1
  23. package/cjs/{skin-ace14d43.js → skin-cab8b6d2.js} +1 -1
  24. package/cjs/{skin-0f56c90a.js → skin-cbbea5d0.js} +1 -1
  25. package/cjs/{skin-5747db33.js → skin-ce275bae.js} +1 -1
  26. package/cjs/{videoSelector-14a6a823.js → videoSelector-c825e386.js} +1 -1
  27. package/cjs/{videoSelector-0dd43a1a.js → videoSelector-ced69919.js} +1 -1
  28. package/cjs/videojs-dash5.es-62f51650.js +1 -0
  29. package/esm/{autoNextVideo-5727bb50.js → autoNextVideo-ac1f3171.js} +1 -1
  30. package/esm/bundle.css +999 -999
  31. package/esm/{features-d1d7461f.js → features-64cd7edf.js} +1 -1
  32. package/esm/generic-e5ce545a.js +1 -0
  33. package/esm/{index-27b173c2.js → index-302e85e4.js} +1 -1
  34. package/esm/{index-a8eb06aa.js → index-66c8402b.js} +1 -1
  35. package/esm/{index-c903c091.js → index-8192aad1.js} +1 -1
  36. package/esm/index.js +1 -1
  37. package/esm/{multicamv2-72b751be.js → multicamv2-05305256.js} +1 -1
  38. package/esm/{multicamv2-2a484b22.js → multicamv2-5824c3b6.js} +1 -1
  39. package/esm/{nextEpisodeButton-38e39284.js → nextEpisodeButton-44b32ceb.js} +1 -1
  40. package/esm/{playlist-070bc603.js → playlist-207f98bd.js} +1 -1
  41. package/esm/{series-1ad08b8b.js → series-a776c9da.js} +1 -1
  42. package/esm/{series-v2-0e6f1fc1.js → series-v2-3615cc8d.js} +1 -1
  43. package/esm/{series-v2-f502d197.js → series-v2-41136150.js} +1 -1
  44. package/esm/{skin-65fab669.js → skin-11d9d9fa.js} +1 -1
  45. package/esm/{skin-24ed1b71.js → skin-31df38ce.js} +1 -1
  46. package/esm/skin-35f52ac7.js +1 -0
  47. package/esm/{skin-dd2d5f12.js → skin-469b3d49.js} +1 -1
  48. package/esm/{skin-c6d3eac0.js → skin-850c4cb7.js} +1 -1
  49. package/esm/{skin-6af2950f.js → skin-8bd7af13.js} +1 -1
  50. package/esm/{skin-71418867.js → skin-9bca7f9c.js} +1 -1
  51. package/esm/{skin-a6a30830.js → skin-c416303b.js} +1 -1
  52. package/esm/{skin-4ce58a71.js → skin-c4dea6da.js} +1 -1
  53. package/esm/{skin-237bef24.js → skin-f923ce4c.js} +1 -1
  54. package/esm/src/index.d.ts +1 -0
  55. package/esm/src/utilities/beacon.d.ts +6 -0
  56. package/esm/{videoSelector-ea5a2015.js → videoSelector-9592ec68.js} +1 -1
  57. package/esm/{videoSelector-f39e4dfc.js → videoSelector-fb7fb8d6.js} +1 -1
  58. package/esm/videojs-dash5.es-24300b5e.js +1 -0
  59. package/package.json +1 -1
  60. package/cjs/generic-46d02ba0.js +0 -1
  61. package/cjs/videojs-dash5.es-0f92604f.js +0 -1
  62. package/esm/generic-72bc2234.js +0 -1
  63. package/esm/skin-de1d7d56.js +0 -1
  64. package/esm/videojs-dash5.es-cfe95daa.js +0 -1
package/esm/bundle.css CHANGED
@@ -1,574 +1,536 @@
1
1
 
2
2
 
3
3
 
4
-
5
-
6
- .video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control {
7
- height: 0.7em !important;
8
- position: absolute !important;
9
- top: -0.7em !important;
10
- width: 100% !important;
11
- }
12
-
13
- .video-js.skin_vlone .vjs-progress-holder.vjs-slider.vjs-slider-horizontal {
14
- height: 100%;
4
+ .video-js.skin_news .vjs-button>.vjs-icon-placeholder:before {
5
+ font-size: 2.2em;
6
+ line-height: 2.6;
15
7
  }
16
-
17
- .video-js.skin_vlone .vjs-playback-rate .vjs-playback-rate-value{
18
- line-height: 2.5;
8
+ .video-js.skin_news .vjs-custom-big-mute.vjs-control{
9
+ background: white;
19
10
  }
20
-
21
- .video-js.skin_vlone button.vjs-control.vjs-button.vjs-rewind-button > svg{
22
- height: 19px;
23
- width: 19px;
24
- cursor: pointer;
11
+ .video-js.skin_news .vjs-control-bar{
12
+ z-index: 1 !important;
13
+ height: 5em !important;
14
+ background: black !important;
25
15
  }
26
- .video-js.skin_vlone .vjs-control {
27
- user-select: none;
16
+ .video-js.skin_news .vjs-playback-rate .vjs-playback-rate-value{
17
+ display: flex;
18
+ align-items: center;
19
+ justify-content: center;
28
20
  }
29
- .video-js.skin_vlone .vjs-custom-control-spacer{
30
- user-select: none;
21
+
22
+ .video-js.skin_news .vjs-fade>* {
23
+ visibility: hidden !important;
24
+ opacity: 0 !important;
25
+ transition: visibility 1s, opacity 1s !important;
31
26
  }
32
27
 
33
- .video-js.skin_vlone button.vjs-control.vjs-button.vjs-skip-button > svg{
34
- height: 19px;
35
- width: 19px;
36
- cursor: pointer;
28
+ .video-js.skin_news .custom-spaced-progress-bar {
29
+ position: absolute;
30
+ width: 100%;
31
+ display: flex;
32
+ height: 0.5em;
33
+ top: -0.5em;
37
34
  }
38
35
 
39
- .video-js.skin_vlone .vjs-play-progress:before {
40
- display: none !important;
36
+ .video-js.skin_news .vjs-progress-control {
37
+ /* left: -6px; */
38
+ position: relative;
39
+ width: 100%;
40
+ height: 0.5em;
41
+ transition: height 0.1s, top 0.1s;
41
42
  }
42
43
 
43
- .video-js.skin_vlone .vjs-progress-control>.vjs-progress-holder.vjs-slider {
44
- margin: 0 !important;
45
44
 
46
- }
47
45
 
48
46
 
49
- .video-js.skin_vlone .vjs-custom-control-spacer {
50
- display: block;
51
- flex: 1 1 auto;
47
+ .video-js.skin_news .vjs-custom-control-spacer {
48
+ display: block;
49
+ flex: 1 1 auto;
52
50
  }
53
51
 
54
- .video-js.skin_vlone .vjs-volume-panel.vjs-volume-panel-vertical{
55
- z-index: 1;
52
+ .video-js.skin_news .vjs-progress-control .vjs-progress-holder {
53
+ margin: 0 0px 0 0px;
56
54
  }
57
-
58
-
59
- .video-js.skin_vlone .vjs-control-bar {
60
- height: 40px;
55
+ .video-js.skin_news .vjs-remaining-time.vjs-time-control.vjs-control{
56
+ display: none;
61
57
  }
62
58
 
63
- .video-js.skin_vlone .vjs-big-play-button .vjs-icon-placeholder:before,
64
- .vjs-button>.vjs-icon-placeholder:before {
65
- position: relative !important;
66
- }
67
- .video-js.skin_vlone .vjs-big-play-button .vjs-icon-placeholder:before{
68
- display: flex;
69
- left: 0px;
70
- top: -1px;
59
+ .video-js.skin_news button.vjs-control.vjs-button.vjs-slowmo-button {
60
+ font-size: 14px;
61
+ font-weight: 500;
62
+ align-self: center;
63
+ height: min-content;
64
+ padding: 5px 2px;
65
+ border-radius: 8px;
71
66
  }
72
67
 
73
- .vjs-button>.vjs-icon-placeholder:before {
74
- font-size: 2em !important;
68
+ .video-js.skin_news .vjs-progress-control .vjs-progress-holder{
69
+ height: 6px !important;
75
70
  }
76
71
 
77
- .video-js.skin_vlone .vjs-control {
78
- width: 4.3em;
72
+ .video-js.skin_news .vjs-play-progress:before {
73
+ font-size: 1.5em;
74
+ line-height: unset;
75
+ top: -0.3333333333em;
79
76
  }
80
77
 
81
- .vjs-menu-button-popup .vjs-menu {
82
- bottom: 10px !important;
78
+ .video-js.skin_news .vjs-play-progress .vjs-time-tooltip {
79
+ display: none !important;
83
80
  }
84
81
 
85
- .video-js .vjs-subs-caps-button .vjs-menu li,
86
- .video-js .vjs-subtitles-button .vjs-menu li,
87
- .video-js .vjs-captions-button .vjs-menu li {
88
- text-transform: none;
82
+ /* */
83
+ .video-js.skin_news .vjs-mouse-display{
84
+ font-size: 1.6666666667em;
89
85
  }
90
86
 
87
+ .video-js.skin_news .vjs-progress-control:hover .vjs-progress-holder {
88
+ font-size: 1em !important;
89
+ }
91
90
 
92
- .video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control:hover {
93
- height: 1.3em !important;
94
- position: absolute !important;
95
- top: -1.3em !important;
96
- transition: height 0.3s, top 0.3s !important;
91
+ .video-js.skin_news .vjs-button{
92
+ width: 5.3em;
93
+ display: flex;
94
+ align-items: center;
95
+ justify-content: center;
97
96
  }
98
97
 
99
98
 
100
- .video-js.skin_vlone.vjs-live .vjs-time-control{
101
- display: none !important;
99
+ .video-js.skin_news .vjs-fullscreen .icon-minimize,
100
+ .icon-maximize {
101
+ display: block;
102
+ height: 32px;
102
103
  }
103
104
 
104
- .video-js.skin_vlone .vjs-time-control {
105
- display: block;
105
+ .video-js.skin_news .vjs-playback-rate .vjs-playback-rate-value{
106
+ line-height: 4;
106
107
  }
107
- .video-js.skin_vlone .vjs-remaining-time {
108
+
109
+ .video-js.skin_news .vjs-fullscreen .icon-maximize,
110
+ .icon-minimize {
108
111
  display: none;
112
+ height: 32px;
109
113
  }
110
114
 
111
- .video-js.skin_vlone .vjs-remaining-time.vjs-time-control.vjs-control>span.vjs-remaining-time-display {
112
- line-height: 3.5em;
113
- font-size: 1.1em;
114
- min-width: 4em;
115
+ .video-js.skin_news button.vjs-play-control.vjs-control.vjs-button{
116
+ outline: none !important;
115
117
  }
116
-
117
- .video-js.skin_vlone .vjs-time-divider > div{
118
- display: flex;
119
- justify-content: center;
118
+ .video-js.skin_news .vjs-fullscreen-control .vjs-icon-placeholder:before,
119
+ .vjs-icon-fullscreen-enter:before {
120
+ /* content: '' !important; */
120
121
  }
121
122
 
122
- .video-js.skin_vlone .vjs-live-control{
123
- align-items: center;
124
- }
125
- .video-js.skin_vlone .vjs-live-display{
126
- height: 2.2em;
127
- display: flex;
128
- align-items: center;
129
- font-family: monospace;
130
- width: 4em;
131
- justify-content: center;
132
- background: red;
133
- margin: 4px 0px 4px 12px;
123
+ .video-js.skin_news button.vjs-fullscreen-control.vjs-control.vjs-button {
124
+ display: flex;
125
+ justify-content: center;
126
+ align-items: center;
127
+ /* transform: rotate(90deg); */
134
128
  }
135
- .video-js.skin_vlone .vjs-live-display.vjs-behind-live{
136
- background: #6b6b6b;
129
+
130
+ .video-js.skin_news .vjs-subs-caps-button .vjs-icon-placeholder:before{
131
+ display: none;
137
132
  }
138
- .video-js.skin_vlone .vjs-live-display:hover{
139
- cursor: pointer;
133
+ .video-js.skin_news .vjs-volume-panel .vjs-volume-control{
134
+ margin-left: -10px;
140
135
  }
141
136
 
142
- .video-js.skin_vlone .vjs-time-control {
143
- line-height: 3.5em !important;
144
- font-size: 1.1em !important;
145
- width: min-content !important;
146
- min-width: 1.5em;
147
- padding: 0 !important;
148
- user-select: none;
137
+ .video-js.skin_news .skipbtn:hover{
138
+ cursor: pointer;
149
139
  }
150
140
 
151
- .video-js.skin_vlone .vjs-current-time.vjs-time-control.vjs-control {
152
- margin-left: 16px !important;
141
+ .video-js.skin_news .rewindbtn:hover{
142
+ cursor: pointer;
153
143
  }
154
144
 
155
- .video-js.skin_vlone .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
156
- .video-js.skin_vlone .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
157
- font-size: 1.2em !important;
158
- line-height: 1.5em !important;
159
- padding: 0.2em 0.8em !important;
145
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control{
146
+ position: relative;
147
+ padding-left: 0;
160
148
  }
161
149
 
150
+ .video-js.skin_news.vjs-seeking .vjs-big-play-button{
151
+ display: none !important;
152
+ }
162
153
 
163
- /* Big play */
164
- .video-js.skin_vlone.vjs-paused .vjs-big-play-button {
165
- width: 80px;
166
- height: 80px;
154
+ .video-js.skin_news.vjs-paused .vjs-big-play-button {
155
+ width: 90px;
156
+ height: 90px;
167
157
  display: flex;
168
158
  justify-content: center;
169
159
  align-items: center;
170
- border: none;
160
+ border-radius: 50%;
171
161
  position: absolute;
172
162
  top: 0;
173
163
  left: 0;
174
164
  right: 0;
175
165
  bottom: 0;
176
166
  margin: auto;
177
- font-size: 5em;
178
- line-height: 1.3em;
179
- transform: none !important;
180
- border-radius: 1.3em;
167
+ font-size: 6em;
168
+ line-height: 1.4em;
169
+ border: 0.05em solid;
170
+ color: inherit;
181
171
  }
182
- .video-js.skin_vlone .ssai-ad-container{
183
- position: absolute;
184
- bottom: 4px;
172
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge{
173
+ font-weight: bold;
185
174
  }
186
-
187
- @media(max-width:600px){
188
- .video-js.skin_vlone button.vjs-big-play-button {
189
- width: 50px !important;
190
- height: 50px !important;
191
- font-size: 2.1rem !important;
192
- }
193
175
 
194
- .video-js.skin_vlone .ssai-ad-container {
195
- position: absolute;
196
- bottom: 2px;
176
+ .video-js.skin_news .vjs-menu > ul.vjs-menu-content{
177
+ bottom: 2.4em !important;
178
+ right: -1em;
179
+ z-index: 1;
197
180
  }
198
- .video-js.skin_vlone .vjs-playback-rate .vjs-playback-rate-value {
199
- display: none;
181
+
182
+ .video-js.skin_news .vjs-chromecast-button .vjs-icon-placeholder {
183
+ width: 24px !important;
184
+ height: 24px !important;
185
+ }
186
+ .settings-selector-icon>svg{
187
+ height: 19px !important;
188
+ width: 19px !important;
200
189
  }
201
190
 
202
- .video-js.skin_vlone button.vjs-control.vjs-button.vjs-rewind-button>svg {
203
- /* display: none; */
191
+
192
+ .video-js.skin_news button.vjs-rewind-button{
193
+ cursor: pointer;
204
194
  }
205
195
 
206
- .video-js.skin_vlone button.vjs-control.vjs-button.vjs-skip-button>svg {
207
- /* display: none; */
208
- }
196
+ .video-js.skin_news .vjs-control-bar .vjs-current-time.vjs-time-control.vjs-control {
197
+ padding-right: 0;
209
198
  }
210
- .video-js .vjs-control-bar .vjs-subs-caps-button .vjs-menu .vjs-selected {
211
- text-decoration: underline;
199
+
200
+ .video-js.skin_news .vjs-control-bar .vjs-duration.vjs-time-control.vjs-control {
201
+ padding-left: 0;
212
202
  }
213
203
 
214
- .video-js.skin_cn_news .vjs-control-bar {
215
- z-index: 1 !important;
216
- height: auto !important;
217
- padding: 0.8em 30px 0.6em;
218
- background: transparent !important;
204
+ .video-js.skin_news .vjs-control-bar .vjs-time-control.vjs-time-divider {
205
+ padding-left: 0;
206
+ padding-right: 0;
219
207
  display: flex;
220
- flex-wrap: wrap;
221
- align-items: center;
222
- column-gap: 10px;
208
+ justify-content: center;
209
+ width: min-content;
223
210
  }
224
211
 
225
-
226
- .video-js.skin_cn_news .vjs-control-bar::before {
227
- content: '';
228
- position: absolute;
229
- left: 0;
230
- right: 0;
231
- bottom: 0;
232
- top: -3em;
233
- background: linear-gradient(
234
- to top,
235
- rgba(0, 0, 0, 0.85) 0%,
236
- rgba(0, 0, 0, 0.7) 40%,
237
- rgba(0, 0, 0, 0.55) 70%,
238
- rgba(0, 0, 0, 0.38) 86%,
239
- transparent 100%
240
- );
241
- pointer-events: none;
242
- z-index: -1;
212
+ .video-js.skin_news.vjs-live .vjs-control-bar .vjs-time-control {
213
+ display: none
243
214
  }
244
-
245
- .video-js.skin_cn_news .vjs-control-bar .vjs-progress-control {
246
- order: -1;
247
- flex: 0 0 100%;
248
- width: 80%;
249
- margin: 0 0 5em;
250
- position: relative;
215
+ .video-js.skin_news.vjs-liveui .vjs-control-bar .vjs-time-control {
216
+ display: none
251
217
  }
252
218
 
253
- .video-js.skin_cn_news .vjs-control-bar > .vjs-control,
254
- .video-js.skin_cn_news .vjs-control-bar > .vjs-button {
255
- width: auto;
256
- min-width: 0;
257
- }
258
- .video-js.skin_cn_news .vjs-control-bar .vjs-button {
259
- display: inline-flex;
219
+ .video-js.skin_news .vjs-control-bar .vjs-time-control {
220
+ display: flex;
260
221
  align-items: center;
261
- justify-content: center;
262
- height: 7em;
263
- padding: 0 10px;
264
- color: #fff;
265
- }
266
-
267
- .video-js.skin_cn_news .vjs-svg-icon::before {
268
- content: none !important;
222
+ font-weight: 700;
223
+ font-size: 12px;
224
+ min-width: 1.2em;
269
225
  }
270
226
 
271
-
272
- .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon {
273
- display: inline-flex;
274
- align-items: center;
227
+ .video-js.skin_news .vjs-remaining-time.vjs-time-control.vjs-control {
228
+ display: none;
229
+ font-size: 11px;
275
230
  justify-content: center;
231
+ align-items: center;
232
+ user-select: none;
276
233
  }
277
- .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon svg,
278
- .video-js.skin_cn_news .vjs-rewind-button svg {
279
- width: 24px;
280
- height: 24px;
281
- display: block;
234
+ .video-js.skin_news.vjs-live .vjs-remaining-time.vjs-time-control.vjs-control{
235
+ display: none;
282
236
  }
283
237
 
238
+ .video-js.skin_news button.vjs-subs-caps-button.vjs-menu-button.vjs-menu-button-popup.vjs-button{
239
+ height: min-content;
240
+ width: min-content;
241
+ }
242
+ .video-js.skin_news .vjs-volume-panel.vjs-volume-panel-vertical{
243
+ width: 6em;
244
+ }
284
245
 
246
+ .video-js.skin_news .content{
247
+ bottom: 3.4rem !important;
248
+ right: -4rem !important;
249
+ }
285
250
 
286
- .video-js.skin_cn_news .vjs-subs-caps-button {
287
- opacity: 1;
251
+ .setting-icon > svg{
252
+ height:18px !important;
288
253
  }
289
254
 
255
+ .output-overlay{
256
+ position: absolute;
257
+ bottom: 0;
258
+ height: 100%;
259
+ width: 100%;
260
+ z-index: 0;
261
+ border: 0;
262
+ pointer-events:none
263
+ }
290
264
 
265
+ .video-js.skin_news iframe{
266
+ width: 100%;
267
+ height: 100%;
268
+ }
291
269
 
292
- .video-js.skin_cn_news .vjs-volume-panel {
293
- margin: 0;
294
- display: inline-flex;
270
+ .video-js.skin_news .vjs-live-control{
295
271
  align-items: center;
296
- align-self: center;
297
- height: 2.2em;
298
- min-width: 7em;
299
- transition: none;
300
272
  }
301
- .video-js.skin_cn_news .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
302
- width: 0;
303
- height: 100%;
273
+ .video-js.skin_news .vjs-live-control.vjs-control .vjs-live-display{
274
+ height: 2.2em;
304
275
  display: flex;
305
276
  align-items: center;
306
- overflow: hidden;
307
- opacity: 0;
308
- transition: width 0.15s ease, opacity 0.15s ease;
309
- }
310
- .video-js.skin_cn_news .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal,
311
- .video-js.skin_cn_news .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
312
- .video-js.skin_cn_news .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal,
313
- .video-js.skin_cn_news .vjs-volume-panel:focus-within .vjs-volume-control.vjs-volume-horizontal {
314
- width: 5em;
315
- opacity: 1;
316
- }
317
-
318
- .video-js.skin_cn_news .vjs-volume-bar {
277
+ font-family: monospace;
319
278
  width: 4em;
320
- height: 0.3em;
321
- margin: 0 0.45em;
279
+ justify-content: center;
280
+ background: red;
281
+ margin: 4px 0px 4px 12px;
322
282
  }
323
283
 
324
-
325
- .video-js.skin_cn_news .vjs-volume-control .vjs-mouse-display {
326
- display: none !important;
284
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control:focus{
285
+ text-shadow: none;
327
286
  }
328
-
329
- .video-js.skin_cn_news .vjs-mute-control.vjs-vol-0 ~ .vjs-volume-control .vjs-volume-level {
330
- width: 0 !important;
287
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-seek-to-live-text {
288
+ display: none;
289
+ font-size: 12px;
331
290
  }
332
291
 
292
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder {
293
+ height: 2.2em;
294
+ display: inline-flex;
295
+ align-items: center;
296
+ /* font-family: monospace; */
297
+ justify-content: center;
298
+ border: 2px solid;
299
+ margin: 4px 0px 4px 6px;
300
+ white-space: pre;
301
+ padding: 0px 6px;
302
+ font-size: 1.2em;
303
+ font-weight: 500;
304
+ color: rgba(255, 255, 2555, 0.7);
333
305
 
334
- .video-js.skin_cn_news .vjs-custom-control-spacer {
335
- display: block !important;
336
- flex: 1 1 auto;
306
+ letter-spacing: -.1px;
307
+ line-height: normal;
308
+ text-transform: uppercase;
309
+ color: #FFFFFF;
310
+ opacity: .7;
311
+ font-family: "Proxima Nova";
337
312
  }
338
313
 
339
-
340
- .video-js.skin_cn_news .vjs-big-play-button {
341
- display: none;
342
- }
343
- .video-js.skin_cn_news .vjs-big-play-button .vjs-icon-placeholder:before {
344
- position: relative !important;
345
- display: flex;
346
- left: 0;
347
- top: -1px;
348
- }
349
- .video-js.skin_cn_news.vjs-paused:not(.vjs-seeking):not(.vjs-ended) .vjs-big-play-button {
350
- display: flex;
351
- justify-content: center;
352
- align-items: center;
353
- position: absolute;
354
- top: 0;
355
- left: 0;
356
- right: 0;
357
- bottom: 0;
358
- margin: auto;
359
- width: 80px;
360
- height: 80px;
361
- border: none;
362
- border-radius: 50%;
363
- background: rgba(0, 0, 0, 0.55);
364
- font-size: 5em;
365
- line-height: 1.3em;
366
- transform: none !important;
314
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder:hover{
315
+ opacity: 1;
367
316
  }
368
317
 
369
-
370
- .video-js.skin_cn_news .vjs-progress-control .vjs-progress-holder {
371
- height: 4px !important;
372
- margin: 0;
373
- border-radius: 20px;
374
- background-color: #393944;
318
+ .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder::before {
319
+ content: "NOT LIVE";
375
320
  }
376
321
 
377
- .video-js.skin_cn_news .vjs-play-progress {
378
- background-color: #ffffff;
379
- border-radius: 20px;
322
+ .settings-selection.vjs-control.vjs-button{
323
+ display: flex !important;
380
324
  }
381
325
 
382
- .video-js.skin_cn_news .vjs-load-progress,
383
- .video-js.skin_cn_news .vjs-load-progress div {
384
- background: rgba(255, 255, 255, 0.15);
385
- border-radius: 20px;
326
+ @media(max-width:576px){
327
+ .settings-selection.vjs-control.vjs-button{
328
+ display: none !important;
329
+ }
386
330
  }
387
331
 
388
332
 
389
- .video-js.skin_cn_news .vjs-play-progress:before {
390
- content: '';
391
- width: 16px;
392
- height: 16px;
393
- border-radius: 50%;
394
- background: #ffffff;
395
- border: 2px solid rgba(0, 0, 0, 0.6);
396
- box-sizing: border-box;
397
- box-shadow: 0 0 0 2px #ffffff, 0 0 3px rgba(0, 0, 0, 0.45);
398
- top: -6px;
399
- right: -8px;
400
- position: absolute;
401
- }
402
- .video-js.skin_cn_news .vjs-play-progress .vjs-time-tooltip {
403
- display: none !important;
404
- }
333
+ @media(max-width:576px){
334
+ .tvProviderImage{
335
+ display: none
336
+ }
337
+ .video-js.skin_news .vjs-fullscreen .icon-minimize,
338
+ .icon-maximize {
339
+ height: 30px !important;
340
+ }
405
341
 
406
- .video-js.skin_cn_news .vjs-mouse-display .vjs-time-tooltip {
407
- background: #ffffff;
408
- color: #0a0e17;
409
- font-weight: 700;
410
- border-radius: 3px;
411
- }
342
+ .video-js.skin_news .vjs-fullscreen .icon-maximize,
343
+ .icon-minimize {
344
+ height: 30px !important;
345
+ }
346
+ .video-js.skin_news .vjs-volume-panel.vjs-volume-panel-vertical{
347
+ width: 4.5em;
348
+ }
349
+ .video-js.skin_news button.vjs-fullscreen-control.vjs-control.vjs-button>span.vjs-icon-placeholder::before {
350
+ height: min-content;
351
+ }
412
352
 
413
- .video-js.skin_cn_news .vjs-live-control {
414
- display: none !important;
353
+ .video-js.skin_news button.vjs-slowmo-button{
354
+ display: none;
355
+ }
356
+ .video-js.skin_news button.vjs-rewind-button{
357
+ display: none;
358
+ }
359
+ .video-js.skin_news button.vjs-rewind-button>svg{
360
+ height: 20px;
361
+ }
362
+ .video-js.skin_news .vjs-button{
363
+ width: 4.8em;
364
+ }
365
+ .video-js.skin_news .widget-selection{
366
+ display: none;
367
+ }
368
+ .video-js.skin_news .container{
369
+ display: none !important;
370
+ }
371
+ .video-js.skin_news .vjs-control-bar{
372
+ height: 4em !important;
373
+ }
374
+ .video-js.skin_news .vjs-button>.vjs-icon-placeholder:before{
375
+ font-size: 2.5em;
376
+ line-height: 1.5;
377
+ }
378
+ .video-js.skin_news .vjs-play-progress:before {
379
+ font-size: 1.2em;
380
+ position: absolute;
381
+ right: -0.5em;
382
+ z-index: 1;
415
383
  }
416
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-control {
417
- display: inline-flex;
418
- align-items: center;
419
- align-self: center;
420
- height: 2.2em;
421
- gap: 5px;
422
- width: auto;
423
- padding: 0 10px;
424
- border: 1px solid rgba(255, 255, 255, 0.45);
425
- border-radius: 4px;
426
- cursor: pointer;
384
+ .video-js.skin_news button.vjs-skip-button>svg{
385
+ height: 20px;
427
386
  }
428
- .video-js.skin_cn_news:not(.vjs-live) .vjs-seek-to-live-control.vjs-control,
429
- .video-js.skin_cn_news.vjs-live:not(.vjs-liveui) .vjs-seek-to-live-control.vjs-control {
430
- display: none;
387
+ .video-js.skin_news button.vjs-big-play-button {
388
+ width: 50px !important;
389
+ height: 50px !important;
390
+ font-size: 2.1rem !important;
431
391
  }
432
392
 
433
- .video-js.skin_cn_news .vjs-seek-to-live-control .vjs-icon-placeholder {
434
- display: none;
435
- }
436
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder {
437
- display: inline-flex;
438
- align-items: center;
393
+ .stream-selector-icon>svg{
394
+ width: 24px;
395
+ height: 24px;
439
396
  }
440
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder::before {
441
- content: '';
442
- display: inline-block;
443
- width: 8px;
444
- height: 8px;
445
- border-radius: 50%;
446
- background: #ff2d2d; /* red live dot */
397
+ .video-js.skin_news.vjs-live .vjs-progress-control .vjs-progress-holder{
398
+ margin: 0 12px 0 12px;
447
399
  }
448
- .video-js.skin_cn_news .vjs-seek-to-live-text {
449
- color: #ffffff;
450
- font-weight: 700;
400
+ .video-js.skin_news .vjs-seek-to-live-text{
451
401
  font-size: 12px;
452
- letter-spacing: 0.03em;
453
402
  }
454
-
455
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge {
456
- border-color: transparent;
403
+ .video-js.skin_news .vjs-progress-control .vjs-progress-holder {
404
+ margin: 0 12px 0 12px;
457
405
  }
458
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-seek-to-live-text {
459
- color: #ff2d2d;
460
406
  }
461
-
462
- /* ---- time controls ---- */
463
- .video-js.skin_cn_news .vjs-current-time,
464
- .video-js.skin_cn_news .vjs-duration,
465
- .video-js.skin_cn_news .vjs-time-divider {
466
- display: none;
407
+ .video-js.skin_news.vjs-paused .vjs-big-play-button {
408
+ width: 90px;
409
+ height: 90px;
410
+ display: flex;
411
+ justify-content: center;
467
412
  align-items: center;
468
- font-size: 12px;
469
- font-weight: 700;
470
- color: #fff;
471
- user-select: none;
413
+ border-radius: 50%;
414
+ position: absolute;
415
+ top: 0;
416
+ left: 0;
417
+ right: 0;
418
+ bottom: 0;
419
+ margin: auto;
420
+ font-size: 6em;
421
+ line-height: 1.4em;
472
422
  }
473
- .video-js.skin_cn_news.vjs-cn-news-vod:not(.vjs-live) .vjs-current-time.vjs-time-control.vjs-control,
474
- .video-js.skin_cn_news.vjs-cn-news-vod:not(.vjs-live) .vjs-duration.vjs-time-control.vjs-control,
475
- .video-js.skin_cn_news.vjs-cn-news-vod:not(.vjs-live) .vjs-time-divider.vjs-time-control {
423
+
424
+ .video-js.skin_news .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:hover .vjs-volume-control.vjs-control.vjs-volume-horizontal {
476
425
  display: flex;
426
+ justify-content: center;
427
+ align-items: center;
428
+ height: 100%;
429
+ transition: width 0.1s;
477
430
  }
478
- .video-js.skin_cn_news .vjs-current-time.vjs-time-control.vjs-control {
479
- padding-right: 0;
431
+
432
+ .video-js.skin_news .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:active .vjs-volume-control.vjs-control.vjs-volume-horizontal {
433
+ display: flex;
434
+ justify-content: center;
435
+ align-items: center;
436
+ height: 100%;
437
+ transition: width 0.1s;
480
438
  }
481
- .video-js.skin_cn_news .vjs-duration.vjs-time-control.vjs-control {
482
- padding-left: 0;
439
+ .video-js.skin_news.vjs-fullscreen .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
440
+ display: none !important;
483
441
  }
484
- .video-js.skin_cn_news .vjs-time-control.vjs-time-divider {
485
- padding: 0 4px;
486
- min-width: 0;
487
- width: auto;
442
+ .video-js.skin_news .ssai-ad-container{
443
+ position: absolute;
444
+ bottom: 14px;
488
445
  }
489
- .video-js.skin_cn_news .vjs-remaining-time.vjs-time-control.vjs-control {
490
- display: none;
491
- align-items: center;
492
- justify-content: center;
493
- font-size: 11px;
494
- font-weight: 700;
495
- color: #fff;
496
- padding: 0 6px;
497
- user-select: none;
446
+
447
+ @media (max-width: 576px) {
448
+ .video-js.skin_news .ssai-ad-container{
449
+ bottom: 2px;
450
+ }
451
+ .video-js.skin_news .vjs-progress-control .vjs-progress-holder{
452
+ height: 5px !important;
453
+ }
454
+ .video-js.skin_news button.vjs-big-play-button {
455
+ width: 50px !important;
456
+ height: 50px !important;
457
+ font-size: 2.1rem !important;
458
+ }
459
+
460
+ .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
461
+ display: none;
462
+ }
463
+ .video-js.skin_news .vjs-menu > ul.vjs-menu-content {
464
+ bottom: 2.4em !important;
465
+ right: -1em;
466
+ z-index: 1;
498
467
  }
468
+ .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
469
+ display: none !important;
470
+ }
499
471
 
472
+ .video-js.skin_news .vjs-text-track-display-ttml span {
473
+ color: white;
474
+ font-size: 13px;
475
+ background-color: black;
476
+ }
477
+ }
500
478
 
501
- .video-js.skin_cn_news .vjs-chapter-marker {
502
- z-index: 2;
503
- width: var(--vl-chapter-size, 8px);
504
- height: var(--vl-chapter-size, 8px);
505
- top: 50%;
506
- bottom: auto;
507
- background: var(--vl-chapter-color, #ffffff);
508
- opacity: var(--vl-chapter-opacity, 1);
509
- border-radius: 50%;
510
- box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); /* keep white dots visible on the white bar */
511
- transform: translate(-50%, -50%) scale(1);
512
- transition: background-color 0.12s ease;
479
+ .video-js.skin_news .vjs-text-track-display-ttml span {
480
+ color: white;
481
+ font-size: 16px;
482
+ background-color: black;
513
483
  }
514
- .video-js.skin_cn_news .vjs-chapter-marker:hover {
515
- background: var(--vl-chapter-hover, #0a5cff);
484
+
485
+ .video-js.skin_news.vjs-has-started.vjs-user-active.vjs-controls-enabled .vjs-text-track-display-ttml p {
486
+ margin-bottom: 2rem !important;
516
487
  }
517
- .video-js.skin_cn_news .vjs-chapter-marker.vjs-chapter-marker--active {
518
- background: var(--vl-chapter-active, #0a5cff);
488
+
489
+ .video-js.skin_news .vjs-text-track-display-ttml p {
490
+ font-size: 18px !important;
519
491
  }
520
492
 
521
493
 
522
- .video-js.skin_cn_news .vjs-chapter-marker .vjs-chapter-marker__icon {
523
- width: 16px;
524
- height: 16px;
525
- bottom: 160%;
526
- filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
494
+ .video-js.skin_news .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
495
+ .video-js.skin_news .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
496
+ font-size: 1.2em !important;
497
+ line-height: 1.5em !important;
498
+ padding: 0.2em 0.8em !important;
499
+ }
500
+
501
+ .video-js.skin_news .vjs-control-bar .vjs-svg-icon{
502
+ content: none !important;
503
+ fill: none !important;
504
+ filter: none !important;
527
505
  }
528
506
 
507
+ /* svg icons opacity and hover effect */
508
+ .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button svg {
509
+ opacity: 0.7 !important;
510
+ }
529
511
 
530
- .video-js.skin_cn_news .vjs-chapter-preview {
531
- background: var(--vl-chapter-tooltip, #0a5cff);
532
- border-radius: 6px;
533
- padding: 8px 10px;
534
- width: max-content;
535
- max-width: 300px;
536
- text-align: left;
537
- box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
512
+ .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button:hover svg {
513
+ opacity: 1 !important;
538
514
  }
539
- .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__time {
540
- color: #ffffff;
541
- font-size: 13px;
542
- font-weight: 400;
543
- margin-bottom: 2px;
515
+ .video-js.skin_news .vjs-control-bar .vjs-remaining-time.vjs-time-control.vjs-control{
516
+ opacity: 0.7 !important;
544
517
  }
545
- .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__label {
546
- color: #ffffff;
547
- font-size: 13px;
548
- font-weight: 400;
549
- line-height: 1.3;
550
- white-space: normal;
551
- text-align: left;
518
+ .video-js.skin_news .vjs-control-bar .vjs-remaining-time.vjs-time-control.vjs-control:hover{
519
+ opacity: 1 !important;
552
520
  }
553
- .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__pointer {
554
- border-top-color: var(--vl-chapter-tooltip, #0a5cff);
521
+
522
+ .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
523
+ color: rgba(255, 255, 2555, 0.7)!important;
555
524
  }
556
525
 
557
- /* ---- responsive ---- */
558
- @media (max-width: 576px) {
559
- .video-js.skin_cn_news .vjs-control-bar {
560
- height: 3.2em !important;
561
- padding: 0 8px;
562
- }
563
- .video-js.skin_cn_news .vjs-control-bar .vjs-button {
564
- padding: 0 6px;
565
- }
566
- .video-js.skin_cn_news .vjs-control.vjs-button.vjs-picture-in-picture-control {
567
- display: none !important;
568
- }
526
+ .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
527
+ color: rgba(255, 255, 2555, 1)!important;
569
528
  }
570
529
 
571
530
 
531
+
532
+
533
+
572
534
  .video-js.skin_news_live .vjs-button>.vjs-icon-placeholder:before {
573
535
  font-size: 2.2em;
574
536
  line-height: 2.6;
@@ -996,61 +958,268 @@
996
958
  height: 100%;
997
959
  transition: width 0.1s;
998
960
  }
999
- .video-js.skin_news_live.vjs-fullscreen .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
1000
- display: none !important;
961
+ .video-js.skin_news_live.vjs-fullscreen .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
962
+ display: none !important;
963
+ }
964
+
965
+ @media (max-width: 576px) {
966
+ .video-js.skin_news_live .vjs-progress-control .vjs-progress-holder{
967
+ height: 5px !important;
968
+ }
969
+ .video-js.skin_news_live button.vjs-big-play-button {
970
+ width: 50px !important;
971
+ height: 50px !important;
972
+ font-size: 2.1rem !important;
973
+ }
974
+
975
+ .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
976
+ display: none;
977
+ }
978
+ .video-js.skin_news_live .vjs-menu > ul.vjs-menu-content {
979
+ bottom: 2.4em !important;
980
+ right: -1em;
981
+ z-index: 1;
982
+ }
983
+ .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
984
+ display: none !important;
985
+ }
986
+
987
+ }
988
+
989
+ .video-js.skin_news_live .vjs-text-track-display-ttml {
990
+ width: 100% !important;
991
+ }
992
+
993
+ .video-js.skin_news_live .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
994
+ .video-js.skin_news_live .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
995
+ font-size: 1.2em !important;
996
+ line-height: 1.5em !important;
997
+ padding: 0.2em 0.8em !important;
998
+ }
999
+
1000
+ .video-js.skin_news_live .vjs-control-bar .vjs-svg-icon{
1001
+ content: none !important;
1002
+ fill: none !important;
1003
+ filter: none !important;
1004
+ }
1005
+
1006
+ .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
1007
+ color: rgba(255, 255, 2555, 0.7)!important;
1008
+ }
1009
+
1010
+ .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
1011
+ color: rgba(255, 255, 2555, 1)!important;
1012
+ }
1013
+
1014
+
1015
+
1016
+ .video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control {
1017
+ height: 0.7em !important;
1018
+ position: absolute !important;
1019
+ top: -0.7em !important;
1020
+ width: 100% !important;
1021
+ }
1022
+
1023
+ .video-js.skin_vlone .vjs-progress-holder.vjs-slider.vjs-slider-horizontal {
1024
+ height: 100%;
1025
+ }
1026
+
1027
+ .video-js.skin_vlone .vjs-playback-rate .vjs-playback-rate-value{
1028
+ line-height: 2.5;
1029
+ }
1030
+
1031
+ .video-js.skin_vlone button.vjs-control.vjs-button.vjs-rewind-button > svg{
1032
+ height: 19px;
1033
+ width: 19px;
1034
+ cursor: pointer;
1035
+ }
1036
+ .video-js.skin_vlone .vjs-control {
1037
+ user-select: none;
1038
+ }
1039
+ .video-js.skin_vlone .vjs-custom-control-spacer{
1040
+ user-select: none;
1041
+ }
1042
+
1043
+ .video-js.skin_vlone button.vjs-control.vjs-button.vjs-skip-button > svg{
1044
+ height: 19px;
1045
+ width: 19px;
1046
+ cursor: pointer;
1047
+ }
1048
+
1049
+ .video-js.skin_vlone .vjs-play-progress:before {
1050
+ display: none !important;
1051
+ }
1052
+
1053
+ .video-js.skin_vlone .vjs-progress-control>.vjs-progress-holder.vjs-slider {
1054
+ margin: 0 !important;
1055
+
1056
+ }
1057
+
1058
+
1059
+ .video-js.skin_vlone .vjs-custom-control-spacer {
1060
+ display: block;
1061
+ flex: 1 1 auto;
1062
+ }
1063
+
1064
+ .video-js.skin_vlone .vjs-volume-panel.vjs-volume-panel-vertical{
1065
+ z-index: 1;
1066
+ }
1067
+
1068
+
1069
+ .video-js.skin_vlone .vjs-control-bar {
1070
+ height: 40px;
1071
+ }
1072
+
1073
+ .video-js.skin_vlone .vjs-big-play-button .vjs-icon-placeholder:before,
1074
+ .vjs-button>.vjs-icon-placeholder:before {
1075
+ position: relative !important;
1076
+ }
1077
+ .video-js.skin_vlone .vjs-big-play-button .vjs-icon-placeholder:before{
1078
+ display: flex;
1079
+ left: 0px;
1080
+ top: -1px;
1081
+ }
1082
+
1083
+ .vjs-button>.vjs-icon-placeholder:before {
1084
+ font-size: 2em !important;
1085
+ }
1086
+
1087
+ .video-js.skin_vlone .vjs-control {
1088
+ width: 4.3em;
1089
+ }
1090
+
1091
+ .vjs-menu-button-popup .vjs-menu {
1092
+ bottom: 10px !important;
1093
+ }
1094
+
1095
+ .video-js .vjs-subs-caps-button .vjs-menu li,
1096
+ .video-js .vjs-subtitles-button .vjs-menu li,
1097
+ .video-js .vjs-captions-button .vjs-menu li {
1098
+ text-transform: none;
1099
+ }
1100
+
1101
+
1102
+ .video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control:hover {
1103
+ height: 1.3em !important;
1104
+ position: absolute !important;
1105
+ top: -1.3em !important;
1106
+ transition: height 0.3s, top 0.3s !important;
1107
+ }
1108
+
1109
+
1110
+ .video-js.skin_vlone.vjs-live .vjs-time-control{
1111
+ display: none !important;
1112
+ }
1113
+
1114
+ .video-js.skin_vlone .vjs-time-control {
1115
+ display: block;
1116
+ }
1117
+ .video-js.skin_vlone .vjs-remaining-time {
1118
+ display: none;
1119
+ }
1120
+
1121
+ .video-js.skin_vlone .vjs-remaining-time.vjs-time-control.vjs-control>span.vjs-remaining-time-display {
1122
+ line-height: 3.5em;
1123
+ font-size: 1.1em;
1124
+ min-width: 4em;
1125
+ }
1126
+
1127
+ .video-js.skin_vlone .vjs-time-divider > div{
1128
+ display: flex;
1129
+ justify-content: center;
1130
+ }
1131
+
1132
+ .video-js.skin_vlone .vjs-live-control{
1133
+ align-items: center;
1134
+ }
1135
+ .video-js.skin_vlone .vjs-live-display{
1136
+ height: 2.2em;
1137
+ display: flex;
1138
+ align-items: center;
1139
+ font-family: monospace;
1140
+ width: 4em;
1141
+ justify-content: center;
1142
+ background: red;
1143
+ margin: 4px 0px 4px 12px;
1144
+ }
1145
+ .video-js.skin_vlone .vjs-live-display.vjs-behind-live{
1146
+ background: #6b6b6b;
1001
1147
  }
1002
-
1003
- @media (max-width: 576px) {
1004
- .video-js.skin_news_live .vjs-progress-control .vjs-progress-holder{
1005
- height: 5px !important;
1006
- }
1007
- .video-js.skin_news_live button.vjs-big-play-button {
1008
- width: 50px !important;
1009
- height: 50px !important;
1010
- font-size: 2.1rem !important;
1011
- }
1012
-
1013
- .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
1014
- display: none;
1015
- }
1016
- .video-js.skin_news_live .vjs-menu > ul.vjs-menu-content {
1017
- bottom: 2.4em !important;
1018
- right: -1em;
1019
- z-index: 1;
1148
+ .video-js.skin_vlone .vjs-live-display:hover{
1149
+ cursor: pointer;
1020
1150
  }
1021
- .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
1022
- display: none !important;
1023
- }
1024
1151
 
1152
+ .video-js.skin_vlone .vjs-time-control {
1153
+ line-height: 3.5em !important;
1154
+ font-size: 1.1em !important;
1155
+ width: min-content !important;
1156
+ min-width: 1.5em;
1157
+ padding: 0 !important;
1158
+ user-select: none;
1025
1159
  }
1026
1160
 
1027
- .video-js.skin_news_live .vjs-text-track-display-ttml {
1028
- width: 100% !important;
1161
+ .video-js.skin_vlone .vjs-current-time.vjs-time-control.vjs-control {
1162
+ margin-left: 16px !important;
1029
1163
  }
1030
1164
 
1031
- .video-js.skin_news_live .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
1032
- .video-js.skin_news_live .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
1165
+ .video-js.skin_vlone .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
1166
+ .video-js.skin_vlone .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
1033
1167
  font-size: 1.2em !important;
1034
1168
  line-height: 1.5em !important;
1035
1169
  padding: 0.2em 0.8em !important;
1036
1170
  }
1037
1171
 
1038
- .video-js.skin_news_live .vjs-control-bar .vjs-svg-icon{
1039
- content: none !important;
1040
- fill: none !important;
1041
- filter: none !important;
1042
- }
1043
1172
 
1044
- .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
1045
- color: rgba(255, 255, 2555, 0.7)!important;
1173
+ /* Big play */
1174
+ .video-js.skin_vlone.vjs-paused .vjs-big-play-button {
1175
+ width: 80px;
1176
+ height: 80px;
1177
+ display: flex;
1178
+ justify-content: center;
1179
+ align-items: center;
1180
+ border: none;
1181
+ position: absolute;
1182
+ top: 0;
1183
+ left: 0;
1184
+ right: 0;
1185
+ bottom: 0;
1186
+ margin: auto;
1187
+ font-size: 5em;
1188
+ line-height: 1.3em;
1189
+ transform: none !important;
1190
+ border-radius: 1.3em;
1046
1191
  }
1047
-
1048
- .video-js.skin_news_live .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
1049
- color: rgba(255, 255, 2555, 1)!important;
1192
+ .video-js.skin_vlone .ssai-ad-container{
1193
+ position: absolute;
1194
+ bottom: 4px;
1050
1195
  }
1196
+
1197
+ @media(max-width:600px){
1198
+ .video-js.skin_vlone button.vjs-big-play-button {
1199
+ width: 50px !important;
1200
+ height: 50px !important;
1201
+ font-size: 2.1rem !important;
1202
+ }
1051
1203
 
1204
+ .video-js.skin_vlone .ssai-ad-container {
1205
+ position: absolute;
1206
+ bottom: 2px;
1207
+ }
1208
+ .video-js.skin_vlone .vjs-playback-rate .vjs-playback-rate-value {
1209
+ display: none;
1210
+ }
1052
1211
 
1212
+ .video-js.skin_vlone button.vjs-control.vjs-button.vjs-rewind-button>svg {
1213
+ /* display: none; */
1214
+ }
1053
1215
 
1216
+ .video-js.skin_vlone button.vjs-control.vjs-button.vjs-skip-button>svg {
1217
+ /* display: none; */
1218
+ }
1219
+ }
1220
+ .video-js .vjs-control-bar .vjs-subs-caps-button .vjs-menu .vjs-selected {
1221
+ text-decoration: underline;
1222
+ }
1054
1223
  .video-js.skin_mini .vjs-button>.vjs-icon-placeholder:before {
1055
1224
  font-size: 2.2em;
1056
1225
  line-height: 2.6;
@@ -1419,637 +1588,468 @@
1419
1588
  line-height: 1.5;
1420
1589
  }
1421
1590
  .video-js.skin_mini .vjs-play-progress:before {
1422
- font-size: 1.2em;
1423
- position: absolute;
1424
- right: -0.5em;
1425
- z-index: 1;
1426
- }
1427
- .video-js.skin_mini button.vjs-skip-button>svg{
1428
- height: 20px;
1429
- }
1430
-
1431
- .stream-selector-icon>svg{
1432
- width: 24px;
1433
- height: 24px;
1434
- }
1435
- .video-js.skin_mini .vjs-seek-to-live-text{
1436
- font-size: 12px;
1437
- }
1438
- }
1439
-
1440
-
1441
- .video-js.skin_mini .vjs-text-track-display-ttml span {
1442
- background-color: rgba(0, 0, 0, 0.2);
1443
- }
1444
-
1445
-
1446
- .video-js.skin_mini .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:hover .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1447
- display: flex;
1448
- justify-content: center;
1449
- align-items: center;
1450
- height: 100%;
1451
- transition: width 0.1s;
1452
- }
1453
- .video-js.skin_mini .vjs-track-settings-colors fieldset.vjs-fg.vjs-track-setting{
1454
- margin: 2px;
1455
- }
1456
-
1457
- .video-js.skin_mini .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:active .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1458
- display: flex;
1459
- justify-content: center;
1460
- align-items: center;
1461
- height: 100%;
1462
- transition: width 0.1s;
1463
- }
1464
-
1465
- .video-js.skin_mini .vjs-text-track-settings .vjs-modal-dialog-content{
1466
- display: block;
1467
- font-size: 10px;
1468
- padding: 6px 10px;
1469
- margin: 0;
1470
- max-height: 100%;
1471
- overflow-y: auto;
1472
- }
1473
- .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-colors,
1474
- .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-font,
1475
- .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-controls{
1476
- display: block;
1477
- width: 100%;
1478
- }
1479
- .video-js.skin_mini .vjs-text-track-settings fieldset{
1480
- margin: 4px 0;
1481
- }
1482
- .video-js.skin_mini .vjs-text-track-settings fieldset span{
1483
- display: block;
1484
- padding: 0 0 6px;
1485
- }
1486
- .video-js.skin_mini .vjs-text-track-settings fieldset span > select{
1487
- max-width: 100%;
1488
- }
1489
-
1490
- @media (max-width: 600px) {
1491
- .video-js.skin_mini .vjs-progress-control .vjs-progress-holder{
1492
- height: 5px !important;
1493
- }
1494
-
1495
- .video-js.skin_mini .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
1496
- display: none;
1497
- }
1498
-
1499
- }
1500
-
1501
- .video-js.skin_mini .vjs-control-bar .vjs-svg-icon{
1502
- content: none !important;
1503
- fill: none !important;
1504
- filter: none !important;
1505
- }
1506
-
1507
- /* svg icons opacity and hover effect */
1508
- .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button svg {
1509
- opacity: 0.7 !important;
1510
- }
1511
-
1512
- .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button:hover svg {
1513
- opacity: 1 !important;
1514
- }
1515
-
1516
- .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
1517
- color: rgba(255, 255, 2555, 0.7)!important;
1518
- }
1519
-
1520
- .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
1521
- color: rgba(255, 255, 2555, 1)!important;
1522
- }
1523
-
1524
-
1525
- .video-js.skin_news .vjs-button>.vjs-icon-placeholder:before {
1526
- font-size: 2.2em;
1527
- line-height: 2.6;
1528
- }
1529
- .video-js.skin_news .vjs-custom-big-mute.vjs-control{
1530
- background: white;
1531
- }
1532
- .video-js.skin_news .vjs-control-bar{
1533
- z-index: 1 !important;
1534
- height: 5em !important;
1535
- background: black !important;
1536
- }
1537
- .video-js.skin_news .vjs-playback-rate .vjs-playback-rate-value{
1538
- display: flex;
1539
- align-items: center;
1540
- justify-content: center;
1541
- }
1542
-
1543
- .video-js.skin_news .vjs-fade>* {
1544
- visibility: hidden !important;
1545
- opacity: 0 !important;
1546
- transition: visibility 1s, opacity 1s !important;
1547
- }
1548
-
1549
- .video-js.skin_news .custom-spaced-progress-bar {
1550
- position: absolute;
1551
- width: 100%;
1552
- display: flex;
1553
- height: 0.5em;
1554
- top: -0.5em;
1555
- }
1556
-
1557
- .video-js.skin_news .vjs-progress-control {
1558
- /* left: -6px; */
1559
- position: relative;
1560
- width: 100%;
1561
- height: 0.5em;
1562
- transition: height 0.1s, top 0.1s;
1563
- }
1564
-
1565
-
1566
-
1567
-
1568
- .video-js.skin_news .vjs-custom-control-spacer {
1569
- display: block;
1570
- flex: 1 1 auto;
1571
- }
1572
-
1573
- .video-js.skin_news .vjs-progress-control .vjs-progress-holder {
1574
- margin: 0 0px 0 0px;
1591
+ font-size: 1.2em;
1592
+ position: absolute;
1593
+ right: -0.5em;
1594
+ z-index: 1;
1575
1595
  }
1576
- .video-js.skin_news .vjs-remaining-time.vjs-time-control.vjs-control{
1577
- display: none;
1596
+ .video-js.skin_mini button.vjs-skip-button>svg{
1597
+ height: 20px;
1578
1598
  }
1579
1599
 
1580
- .video-js.skin_news button.vjs-control.vjs-button.vjs-slowmo-button {
1581
- font-size: 14px;
1582
- font-weight: 500;
1583
- align-self: center;
1584
- height: min-content;
1585
- padding: 5px 2px;
1586
- border-radius: 8px;
1600
+ .stream-selector-icon>svg{
1601
+ width: 24px;
1602
+ height: 24px;
1587
1603
  }
1588
-
1589
- .video-js.skin_news .vjs-progress-control .vjs-progress-holder{
1590
- height: 6px !important;
1604
+ .video-js.skin_mini .vjs-seek-to-live-text{
1605
+ font-size: 12px;
1591
1606
  }
1592
-
1593
- .video-js.skin_news .vjs-play-progress:before {
1594
- font-size: 1.5em;
1595
- line-height: unset;
1596
- top: -0.3333333333em;
1597
1607
  }
1598
1608
 
1599
- .video-js.skin_news .vjs-play-progress .vjs-time-tooltip {
1600
- display: none !important;
1601
- }
1602
1609
 
1603
- /* */
1604
- .video-js.skin_news .vjs-mouse-display{
1605
- font-size: 1.6666666667em;
1610
+ .video-js.skin_mini .vjs-text-track-display-ttml span {
1611
+ background-color: rgba(0, 0, 0, 0.2);
1606
1612
  }
1607
1613
 
1608
- .video-js.skin_news .vjs-progress-control:hover .vjs-progress-holder {
1609
- font-size: 1em !important;
1610
- }
1611
1614
 
1612
- .video-js.skin_news .vjs-button{
1613
- width: 5.3em;
1615
+ .video-js.skin_mini .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:hover .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1614
1616
  display: flex;
1615
- align-items: center;
1616
1617
  justify-content: center;
1618
+ align-items: center;
1619
+ height: 100%;
1620
+ transition: width 0.1s;
1617
1621
  }
1618
-
1619
-
1620
- .video-js.skin_news .vjs-fullscreen .icon-minimize,
1621
- .icon-maximize {
1622
- display: block;
1623
- height: 32px;
1624
- }
1625
-
1626
- .video-js.skin_news .vjs-playback-rate .vjs-playback-rate-value{
1627
- line-height: 4;
1628
- }
1629
-
1630
- .video-js.skin_news .vjs-fullscreen .icon-maximize,
1631
- .icon-minimize {
1632
- display: none;
1633
- height: 32px;
1634
- }
1635
-
1636
- .video-js.skin_news button.vjs-play-control.vjs-control.vjs-button{
1637
- outline: none !important;
1638
- }
1639
- .video-js.skin_news .vjs-fullscreen-control .vjs-icon-placeholder:before,
1640
- .vjs-icon-fullscreen-enter:before {
1641
- /* content: '' !important; */
1622
+ .video-js.skin_mini .vjs-track-settings-colors fieldset.vjs-fg.vjs-track-setting{
1623
+ margin: 2px;
1642
1624
  }
1643
1625
 
1644
- .video-js.skin_news button.vjs-fullscreen-control.vjs-control.vjs-button {
1626
+ .video-js.skin_mini .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:active .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1645
1627
  display: flex;
1646
1628
  justify-content: center;
1647
1629
  align-items: center;
1648
- /* transform: rotate(90deg); */
1630
+ height: 100%;
1631
+ transition: width 0.1s;
1649
1632
  }
1650
1633
 
1651
- .video-js.skin_news .vjs-subs-caps-button .vjs-icon-placeholder:before{
1652
- display: none;
1653
- }
1654
- .video-js.skin_news .vjs-volume-panel .vjs-volume-control{
1655
- margin-left: -10px;
1634
+ .video-js.skin_mini .vjs-text-track-settings .vjs-modal-dialog-content{
1635
+ display: block;
1636
+ font-size: 10px;
1637
+ padding: 6px 10px;
1638
+ margin: 0;
1639
+ max-height: 100%;
1640
+ overflow-y: auto;
1656
1641
  }
1657
-
1658
- .video-js.skin_news .skipbtn:hover{
1659
- cursor: pointer;
1642
+ .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-colors,
1643
+ .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-font,
1644
+ .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-controls{
1645
+ display: block;
1646
+ width: 100%;
1660
1647
  }
1661
-
1662
- .video-js.skin_news .rewindbtn:hover{
1663
- cursor: pointer;
1648
+ .video-js.skin_mini .vjs-text-track-settings fieldset{
1649
+ margin: 4px 0;
1664
1650
  }
1665
-
1666
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control{
1667
- position: relative;
1668
- padding-left: 0;
1651
+ .video-js.skin_mini .vjs-text-track-settings fieldset span{
1652
+ display: block;
1653
+ padding: 0 0 6px;
1669
1654
  }
1670
-
1671
- .video-js.skin_news.vjs-seeking .vjs-big-play-button{
1672
- display: none !important;
1655
+ .video-js.skin_mini .vjs-text-track-settings fieldset span > select{
1656
+ max-width: 100%;
1673
1657
  }
1674
1658
 
1675
- .video-js.skin_news.vjs-paused .vjs-big-play-button {
1676
- width: 90px;
1677
- height: 90px;
1678
- display: flex;
1679
- justify-content: center;
1680
- align-items: center;
1681
- border-radius: 50%;
1682
- position: absolute;
1683
- top: 0;
1684
- left: 0;
1685
- right: 0;
1686
- bottom: 0;
1687
- margin: auto;
1688
- font-size: 6em;
1689
- line-height: 1.4em;
1690
- border: 0.05em solid;
1691
- color: inherit;
1692
- }
1693
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge{
1694
- font-weight: bold;
1695
- }
1659
+ @media (max-width: 600px) {
1660
+ .video-js.skin_mini .vjs-progress-control .vjs-progress-holder{
1661
+ height: 5px !important;
1662
+ }
1696
1663
 
1697
- .video-js.skin_news .vjs-menu > ul.vjs-menu-content{
1698
- bottom: 2.4em !important;
1699
- right: -1em;
1700
- z-index: 1;
1701
- }
1664
+ .video-js.skin_mini .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
1665
+ display: none;
1666
+ }
1702
1667
 
1703
- .video-js.skin_news .vjs-chromecast-button .vjs-icon-placeholder {
1704
- width: 24px !important;
1705
- height: 24px !important;
1706
- }
1707
- .settings-selector-icon>svg{
1708
- height: 19px !important;
1709
- width: 19px !important;
1710
1668
  }
1711
1669
 
1712
-
1713
- .video-js.skin_news button.vjs-rewind-button{
1714
- cursor: pointer;
1670
+ .video-js.skin_mini .vjs-control-bar .vjs-svg-icon{
1671
+ content: none !important;
1672
+ fill: none !important;
1673
+ filter: none !important;
1715
1674
  }
1716
1675
 
1717
- .video-js.skin_news .vjs-control-bar .vjs-current-time.vjs-time-control.vjs-control {
1718
- padding-right: 0;
1676
+ /* svg icons opacity and hover effect */
1677
+ .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button svg {
1678
+ opacity: 0.7 !important;
1719
1679
  }
1720
1680
 
1721
- .video-js.skin_news .vjs-control-bar .vjs-duration.vjs-time-control.vjs-control {
1722
- padding-left: 0;
1681
+ .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button:hover svg {
1682
+ opacity: 1 !important;
1723
1683
  }
1724
1684
 
1725
- .video-js.skin_news .vjs-control-bar .vjs-time-control.vjs-time-divider {
1726
- padding-left: 0;
1727
- padding-right: 0;
1728
- display: flex;
1729
- justify-content: center;
1730
- width: min-content;
1685
+ .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
1686
+ color: rgba(255, 255, 2555, 0.7)!important;
1731
1687
  }
1732
1688
 
1733
- .video-js.skin_news.vjs-live .vjs-control-bar .vjs-time-control {
1734
- display: none
1735
- }
1736
- .video-js.skin_news.vjs-liveui .vjs-control-bar .vjs-time-control {
1737
- display: none
1689
+ .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
1690
+ color: rgba(255, 255, 2555, 1)!important;
1738
1691
  }
1739
1692
 
1740
- .video-js.skin_news .vjs-control-bar .vjs-time-control {
1741
- display: flex;
1742
- align-items: center;
1743
- font-weight: 700;
1744
- font-size: 12px;
1745
- min-width: 1.2em;
1746
- }
1747
1693
 
1748
- .video-js.skin_news .vjs-remaining-time.vjs-time-control.vjs-control {
1749
- display: none;
1750
- font-size: 11px;
1751
- justify-content: center;
1752
- align-items: center;
1753
- user-select: none;
1754
- }
1755
- .video-js.skin_news.vjs-live .vjs-remaining-time.vjs-time-control.vjs-control{
1756
- display: none;
1757
- }
1758
1694
 
1759
- .video-js.skin_news button.vjs-subs-caps-button.vjs-menu-button.vjs-menu-button-popup.vjs-button{
1760
- height: min-content;
1761
- width: min-content;
1762
- }
1763
- .video-js.skin_news .vjs-volume-panel.vjs-volume-panel-vertical{
1764
- width: 6em;
1765
- }
1766
1695
 
1767
- .video-js.skin_news .content{
1768
- bottom: 3.4rem !important;
1769
- right: -4rem !important;
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;
1770
1705
  }
1771
1706
 
1772
- .setting-icon > svg{
1773
- height:18px !important;
1774
- }
1775
1707
 
1776
- .output-overlay{
1708
+ .video-js.skin_cn_news .vjs-control-bar::before {
1709
+ content: '';
1777
1710
  position: absolute;
1711
+ left: 0;
1712
+ right: 0;
1778
1713
  bottom: 0;
1779
- height: 100%;
1780
- width: 100%;
1781
- z-index: 0;
1782
- border: 0;
1783
- pointer-events:none
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;
1784
1725
  }
1785
1726
 
1786
- .video-js.skin_news iframe{
1787
- width: 100%;
1788
- height: 100%;
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;
1789
1733
  }
1790
1734
 
1791
- .video-js.skin_news .vjs-live-control{
1792
- align-items: center;
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;
1793
1739
  }
1794
- .video-js.skin_news .vjs-live-control.vjs-control .vjs-live-display{
1795
- height: 2.2em;
1796
- display: flex;
1740
+ .video-js.skin_cn_news .vjs-control-bar .vjs-button {
1741
+ display: inline-flex;
1797
1742
  align-items: center;
1798
- font-family: monospace;
1799
- width: 4em;
1800
1743
  justify-content: center;
1801
- background: red;
1802
- margin: 4px 0px 4px 12px;
1744
+ height: 7em;
1745
+ padding: 0 10px;
1746
+ color: #fff;
1803
1747
  }
1804
1748
 
1805
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control:focus{
1806
- text-shadow: none;
1807
- }
1808
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-seek-to-live-text {
1809
- display: none;
1810
- font-size: 12px;
1749
+ .video-js.skin_cn_news .vjs-svg-icon::before {
1750
+ content: none !important;
1811
1751
  }
1812
1752
 
1813
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder {
1814
- height: 2.2em;
1753
+
1754
+ .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon {
1815
1755
  display: inline-flex;
1816
1756
  align-items: center;
1817
- /* font-family: monospace; */
1818
1757
  justify-content: center;
1819
- border: 2px solid;
1820
- margin: 4px 0px 4px 6px;
1821
- white-space: pre;
1822
- padding: 0px 6px;
1823
- font-size: 1.2em;
1824
- font-weight: 500;
1825
- color: rgba(255, 255, 2555, 0.7);
1826
-
1827
- letter-spacing: -.1px;
1828
- line-height: normal;
1829
- text-transform: uppercase;
1830
- color: #FFFFFF;
1831
- opacity: .7;
1832
- font-family: "Proxima Nova";
1833
1758
  }
1834
-
1835
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder:hover{
1836
- opacity: 1;
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;
1837
1764
  }
1838
1765
 
1839
- .video-js.skin_news .vjs-seek-to-live-control.vjs-control:not(.vjs-at-live-edge) .vjs-icon-placeholder::before {
1840
- content: "NOT LIVE";
1841
- }
1842
1766
 
1843
- .settings-selection.vjs-control.vjs-button{
1844
- display: flex !important;
1845
- }
1846
1767
 
1847
- @media(max-width:576px){
1848
- .settings-selection.vjs-control.vjs-button{
1849
- display: none !important;
1850
- }
1768
+ .video-js.skin_cn_news .vjs-subs-caps-button {
1769
+ opacity: 1;
1851
1770
  }
1852
1771
 
1853
1772
 
1854
- @media(max-width:576px){
1855
- .tvProviderImage{
1856
- display: none
1857
- }
1858
- .video-js.skin_news .vjs-fullscreen .icon-minimize,
1859
- .icon-maximize {
1860
- height: 30px !important;
1861
- }
1862
-
1863
- .video-js.skin_news .vjs-fullscreen .icon-maximize,
1864
- .icon-minimize {
1865
- height: 30px !important;
1866
- }
1867
- .video-js.skin_news .vjs-volume-panel.vjs-volume-panel-vertical{
1868
- width: 4.5em;
1869
- }
1870
- .video-js.skin_news button.vjs-fullscreen-control.vjs-control.vjs-button>span.vjs-icon-placeholder::before {
1871
- height: min-content;
1872
- }
1873
1773
 
1874
- .video-js.skin_news button.vjs-slowmo-button{
1875
- display: none;
1876
- }
1877
- .video-js.skin_news button.vjs-rewind-button{
1878
- display: none;
1879
- }
1880
- .video-js.skin_news button.vjs-rewind-button>svg{
1881
- height: 20px;
1882
- }
1883
- .video-js.skin_news .vjs-button{
1884
- width: 4.8em;
1885
- }
1886
- .video-js.skin_news .widget-selection{
1887
- display: none;
1888
- }
1889
- .video-js.skin_news .container{
1890
- display: none !important;
1891
- }
1892
- .video-js.skin_news .vjs-control-bar{
1893
- height: 4em !important;
1894
- }
1895
- .video-js.skin_news .vjs-button>.vjs-icon-placeholder:before{
1896
- font-size: 2.5em;
1897
- line-height: 1.5;
1898
- }
1899
- .video-js.skin_news .vjs-play-progress:before {
1900
- font-size: 1.2em;
1901
- position: absolute;
1902
- right: -0.5em;
1903
- z-index: 1;
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;
1904
1782
  }
1905
- .video-js.skin_news button.vjs-skip-button>svg{
1906
- height: 20px;
1783
+ .video-js.skin_cn_news .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
1784
+ width: 0;
1785
+ height: 100%;
1786
+ display: flex;
1787
+ align-items: center;
1788
+ overflow: hidden;
1789
+ opacity: 0;
1790
+ transition: width 0.15s ease, opacity 0.15s ease;
1907
1791
  }
1908
- .video-js.skin_news button.vjs-big-play-button {
1909
- width: 50px !important;
1910
- height: 50px !important;
1911
- font-size: 2.1rem !important;
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;
1912
1798
  }
1913
1799
 
1914
- .stream-selector-icon>svg{
1915
- width: 24px;
1916
- height: 24px;
1800
+ .video-js.skin_cn_news .vjs-volume-bar {
1801
+ width: 4em;
1802
+ height: 0.3em;
1803
+ margin: 0 0.45em;
1917
1804
  }
1918
- .video-js.skin_news.vjs-live .vjs-progress-control .vjs-progress-holder{
1919
- margin: 0 12px 0 12px;
1805
+
1806
+
1807
+ .video-js.skin_cn_news .vjs-volume-control .vjs-mouse-display {
1808
+ display: none !important;
1920
1809
  }
1921
- .video-js.skin_news .vjs-seek-to-live-text{
1922
- font-size: 12px;
1810
+
1811
+ .video-js.skin_cn_news .vjs-mute-control.vjs-vol-0 ~ .vjs-volume-control .vjs-volume-level {
1812
+ width: 0 !important;
1923
1813
  }
1924
- .video-js.skin_news .vjs-progress-control .vjs-progress-holder {
1925
- margin: 0 12px 0 12px;
1814
+
1815
+
1816
+ .video-js.skin_cn_news .vjs-custom-control-spacer {
1817
+ display: block !important;
1818
+ flex: 1 1 auto;
1926
1819
  }
1820
+
1821
+
1822
+ .video-js.skin_cn_news .vjs-big-play-button {
1823
+ display: none;
1927
1824
  }
1928
- .video-js.skin_news.vjs-paused .vjs-big-play-button {
1929
- width: 90px;
1930
- height: 90px;
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;
1830
+ }
1831
+ .video-js.skin_cn_news.vjs-paused:not(.vjs-seeking):not(.vjs-ended) .vjs-big-play-button {
1931
1832
  display: flex;
1932
1833
  justify-content: center;
1933
1834
  align-items: center;
1934
- border-radius: 50%;
1935
1835
  position: absolute;
1936
1836
  top: 0;
1937
1837
  left: 0;
1938
1838
  right: 0;
1939
1839
  bottom: 0;
1940
1840
  margin: auto;
1941
- font-size: 6em;
1942
- line-height: 1.4em;
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;
1847
+ line-height: 1.3em;
1848
+ transform: none !important;
1943
1849
  }
1944
1850
 
1945
- .video-js.skin_news .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:hover .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1946
- display: flex;
1947
- justify-content: center;
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;
1857
+ }
1858
+
1859
+ .video-js.skin_cn_news .vjs-play-progress {
1860
+ background-color: #ffffff;
1861
+ border-radius: 20px;
1862
+ }
1863
+
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;
1868
+ }
1869
+
1870
+
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;
1882
+ position: absolute;
1883
+ }
1884
+ .video-js.skin_cn_news .vjs-play-progress .vjs-time-tooltip {
1885
+ display: none !important;
1886
+ }
1887
+
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;
1893
+ }
1894
+
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;
1948
1900
  align-items: center;
1949
- height: 100%;
1950
- transition: width 0.1s;
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;
1909
+ }
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;
1951
1913
  }
1952
1914
 
1953
- .video-js.skin_news .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:active .vjs-volume-control.vjs-control.vjs-volume-horizontal {
1954
- display: flex;
1955
- justify-content: center;
1915
+ .video-js.skin_cn_news .vjs-seek-to-live-control .vjs-icon-placeholder {
1916
+ display: none;
1917
+ }
1918
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder {
1919
+ display: inline-flex;
1956
1920
  align-items: center;
1957
- height: 100%;
1958
- transition: width 0.1s;
1959
1921
  }
1960
- .video-js.skin_news.vjs-fullscreen .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
1961
- display: none !important;
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 */
1962
1929
  }
1963
- .video-js.skin_news .ssai-ad-container{
1964
- position: absolute;
1965
- bottom: 14px;
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;
1966
1935
  }
1967
1936
 
1968
- @media (max-width: 576px) {
1969
- .video-js.skin_news .ssai-ad-container{
1970
- bottom: 2px;
1971
- }
1972
- .video-js.skin_news .vjs-progress-control .vjs-progress-holder{
1973
- height: 5px !important;
1974
- }
1975
- .video-js.skin_news button.vjs-big-play-button {
1976
- width: 50px !important;
1977
- height: 50px !important;
1978
- font-size: 2.1rem !important;
1979
- }
1980
-
1981
- .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
1982
- display: none;
1983
- }
1984
- .video-js.skin_news .vjs-menu > ul.vjs-menu-content {
1985
- bottom: 2.4em !important;
1986
- right: -1em;
1987
- z-index: 1;
1937
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge {
1938
+ border-color: transparent;
1988
1939
  }
1989
- .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button.vjs-picture-in-picture-control {
1990
- display: none !important;
1991
- }
1992
-
1993
- .video-js.skin_news .vjs-text-track-display-ttml span {
1994
- color: white;
1995
- font-size: 13px;
1996
- background-color: black;
1997
- }
1940
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-seek-to-live-text {
1941
+ color: #ff2d2d;
1998
1942
  }
1999
1943
 
2000
- .video-js.skin_news .vjs-text-track-display-ttml span {
2001
- color: white;
2002
- font-size: 16px;
2003
- background-color: black;
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;
1950
+ font-size: 12px;
1951
+ font-weight: 700;
1952
+ color: #fff;
1953
+ user-select: none;
2004
1954
  }
2005
-
2006
- .video-js.skin_news.vjs-has-started.vjs-user-active.vjs-controls-enabled .vjs-text-track-display-ttml p {
2007
- margin-bottom: 2rem !important;
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;
2008
1959
  }
2009
-
2010
- .video-js.skin_news .vjs-text-track-display-ttml p {
2011
- font-size: 18px !important;
1960
+ .video-js.skin_cn_news .vjs-current-time.vjs-time-control.vjs-control {
1961
+ padding-right: 0;
1962
+ }
1963
+ .video-js.skin_cn_news .vjs-duration.vjs-time-control.vjs-control {
1964
+ padding-left: 0;
1965
+ }
1966
+ .video-js.skin_cn_news .vjs-time-control.vjs-time-divider {
1967
+ padding: 0 4px;
1968
+ min-width: 0;
1969
+ width: auto;
1970
+ }
1971
+ .video-js.skin_cn_news .vjs-remaining-time.vjs-time-control.vjs-control {
1972
+ display: none;
1973
+ align-items: center;
1974
+ justify-content: center;
1975
+ font-size: 11px;
1976
+ font-weight: 700;
1977
+ color: #fff;
1978
+ padding: 0 6px;
1979
+ user-select: none;
2012
1980
  }
2013
1981
 
2014
1982
 
2015
- .video-js.skin_news .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
2016
- .video-js.skin_news .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
2017
- font-size: 1.2em !important;
2018
- line-height: 1.5em !important;
2019
- padding: 0.2em 0.8em !important;
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;
2020
1995
  }
2021
-
2022
- .video-js.skin_news .vjs-control-bar .vjs-svg-icon{
2023
- content: none !important;
2024
- fill: none !important;
2025
- filter: none !important;
1996
+ .video-js.skin_cn_news .vjs-chapter-marker:hover {
1997
+ background: var(--vl-chapter-hover, #0a5cff);
1998
+ }
1999
+ .video-js.skin_cn_news .vjs-chapter-marker.vjs-chapter-marker--active {
2000
+ background: var(--vl-chapter-active, #0a5cff);
2026
2001
  }
2027
2002
 
2028
- /* svg icons opacity and hover effect */
2029
- .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button svg {
2030
- opacity: 0.7 !important;
2003
+
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));
2031
2009
  }
2032
2010
 
2033
- .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button:hover svg {
2034
- opacity: 1 !important;
2011
+
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);
2035
2020
  }
2036
- .video-js.skin_news .vjs-control-bar .vjs-remaining-time.vjs-time-control.vjs-control{
2037
- opacity: 0.7 !important;
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;
2038
2026
  }
2039
- .video-js.skin_news .vjs-control-bar .vjs-remaining-time.vjs-time-control.vjs-control:hover{
2040
- opacity: 1 !important;
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;
2041
2034
  }
2042
-
2043
- .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
2044
- color: rgba(255, 255, 2555, 0.7)!important;
2035
+ .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__pointer {
2036
+ border-top-color: var(--vl-chapter-tooltip, #0a5cff);
2045
2037
  }
2046
2038
 
2047
- .video-js.skin_news .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
2048
- color: rgba(255, 255, 2555, 1)!important;
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
+ }
2049
2051
  }
2050
2052
 
2051
-
2052
-
2053
2053
  /* CSS for videojs-dvr-seekbar */
2054
2054
 
2055
2055
  .video-js.vjs-dvr-seekbar {
@@ -2311,6 +2311,8 @@
2311
2311
  }
2312
2312
 
2313
2313
 
2314
+
2315
+
2314
2316
  /* Watch in Vertical View Button */
2315
2317
  .video-js .vjs-control.vjs-vertical-view-button {
2316
2318
  width: auto !important;
@@ -2446,8 +2448,6 @@
2446
2448
  width: 22px;
2447
2449
  }
2448
2450
 
2449
-
2450
-
2451
2451
  /* nextep — up-next card (centered in player, scales with player size) */
2452
2452
  .video-js:has(.next-ep-preview),
2453
2453
  .video-js:has(.next-ep-preview-player-thumb) {
@@ -2730,38 +2730,6 @@
2730
2730
  z-index: 30 !important;
2731
2731
  }
2732
2732
 
2733
- /* a wrapper element that tracks the mouse vertically */
2734
- .vjs-thumbnail-holder {
2735
- position: absolute;
2736
- left: -1000px;
2737
- }
2738
-
2739
- /* the thumbnail image itself */
2740
- .vjs-thumbnail {
2741
- position: absolute;
2742
- left: 0;
2743
- bottom: 1.3em;
2744
- opacity: 0;
2745
- transition: opacity .2s ease;
2746
- -webkit-transition: opacity .2s ease;
2747
- -moz-transition: opacity .2s ease;
2748
- -mz-transition: opacity .2s ease;
2749
- }
2750
-
2751
- /* fade in the thumbnail when hovering over the progress bar */
2752
- /* .fake-active is needed for Android only. It's removed on touchend/touchecancel */
2753
- .vjs-progress-control:hover .vjs-thumbnail,
2754
- .vjs-progress-control.fake-active .vjs-thumbnail,
2755
- .vjs-progress-control:active .vjs-thumbnail {
2756
- opacity: 1;
2757
- }
2758
-
2759
- /* ... but hide the thumbnail when hovering directly over it */
2760
- .vjs-progress-control:hover .vjs-thumbnail:hover,
2761
- .vjs-progress-control:active .vjs-thumbnail:active {
2762
- opacity: 0;
2763
- }
2764
-
2765
2733
  .video-js.vjs-quality-menu {
2766
2734
  display: block;
2767
2735
  }
@@ -2841,6 +2809,38 @@
2841
2809
  .video-js.vjs-quality-menu .vjs-quality-menu-wrapper .vjs-menu .vjs-menu-content::-webkit-scrollbar{
2842
2810
  display: none;
2843
2811
  }
2812
+ /* a wrapper element that tracks the mouse vertically */
2813
+ .vjs-thumbnail-holder {
2814
+ position: absolute;
2815
+ left: -1000px;
2816
+ }
2817
+
2818
+ /* the thumbnail image itself */
2819
+ .vjs-thumbnail {
2820
+ position: absolute;
2821
+ left: 0;
2822
+ bottom: 1.3em;
2823
+ opacity: 0;
2824
+ transition: opacity .2s ease;
2825
+ -webkit-transition: opacity .2s ease;
2826
+ -moz-transition: opacity .2s ease;
2827
+ -mz-transition: opacity .2s ease;
2828
+ }
2829
+
2830
+ /* fade in the thumbnail when hovering over the progress bar */
2831
+ /* .fake-active is needed for Android only. It's removed on touchend/touchecancel */
2832
+ .vjs-progress-control:hover .vjs-thumbnail,
2833
+ .vjs-progress-control.fake-active .vjs-thumbnail,
2834
+ .vjs-progress-control:active .vjs-thumbnail {
2835
+ opacity: 1;
2836
+ }
2837
+
2838
+ /* ... but hide the thumbnail when hovering directly over it */
2839
+ .vjs-progress-control:hover .vjs-thumbnail:hover,
2840
+ .vjs-progress-control:active .vjs-thumbnail:active {
2841
+ opacity: 0;
2842
+ }
2843
+
2844
2844
  .vjs-poster {
2845
2845
  display: inline-block;
2846
2846
  vertical-align: middle;