@viewlift/player-backup 2.0.390-backup → 2.0.392-backup

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/esm/bundle.css CHANGED
@@ -1,214 +1,5 @@
1
1
 
2
2
 
3
-
4
- .video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control {
5
- height: 0.7em !important;
6
- position: absolute !important;
7
- top: -0.7em !important;
8
- width: 100% !important;
9
- }
10
-
11
- .video-js.skin_vlone .vjs-progress-holder.vjs-slider.vjs-slider-horizontal {
12
- height: 100%;
13
- }
14
-
15
- .video-js.skin_vlone .vjs-playback-rate .vjs-playback-rate-value{
16
- line-height: 2.5;
17
- }
18
-
19
- .video-js.skin_vlone button.vjs-control.vjs-button.vjs-rewind-button > svg{
20
- height: 19px;
21
- width: 19px;
22
- cursor: pointer;
23
- }
24
- .video-js.skin_vlone .vjs-control {
25
- user-select: none;
26
- }
27
- .video-js.skin_vlone .vjs-custom-control-spacer{
28
- user-select: none;
29
- }
30
-
31
- .video-js.skin_vlone button.vjs-control.vjs-button.vjs-skip-button > svg{
32
- height: 19px;
33
- width: 19px;
34
- cursor: pointer;
35
- }
36
-
37
- .video-js.skin_vlone .vjs-play-progress:before {
38
- display: none !important;
39
- }
40
-
41
- .video-js.skin_vlone .vjs-progress-control>.vjs-progress-holder.vjs-slider {
42
- margin: 0 !important;
43
-
44
- }
45
-
46
-
47
- .video-js.skin_vlone .vjs-custom-control-spacer {
48
- display: block;
49
- flex: 1 1 auto;
50
- }
51
-
52
- .video-js.skin_vlone .vjs-volume-panel.vjs-volume-panel-vertical{
53
- z-index: 1;
54
- }
55
-
56
-
57
- .video-js.skin_vlone .vjs-control-bar {
58
- height: 40px;
59
- }
60
-
61
- .video-js.skin_vlone .vjs-big-play-button .vjs-icon-placeholder:before,
62
- .vjs-button>.vjs-icon-placeholder:before {
63
- position: relative !important;
64
- }
65
- .video-js.skin_vlone .vjs-big-play-button .vjs-icon-placeholder:before{
66
- display: flex;
67
- left: 0px;
68
- top: -1px;
69
- }
70
-
71
- .vjs-button>.vjs-icon-placeholder:before {
72
- font-size: 2em !important;
73
- }
74
-
75
- .video-js.skin_vlone .vjs-control {
76
- width: 4.3em;
77
- }
78
-
79
- .vjs-menu-button-popup .vjs-menu {
80
- bottom: 10px !important;
81
- }
82
-
83
- .video-js .vjs-subs-caps-button .vjs-menu li,
84
- .video-js .vjs-subtitles-button .vjs-menu li,
85
- .video-js .vjs-captions-button .vjs-menu li {
86
- text-transform: none;
87
- }
88
-
89
-
90
- .video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control:hover {
91
- height: 1.3em !important;
92
- position: absolute !important;
93
- top: -1.3em !important;
94
- transition: height 0.3s, top 0.3s !important;
95
- }
96
-
97
-
98
- .video-js.skin_vlone.vjs-live .vjs-time-control{
99
- display: none !important;
100
- }
101
-
102
- .video-js.skin_vlone .vjs-time-control {
103
- display: block;
104
- }
105
- .video-js.skin_vlone .vjs-remaining-time {
106
- display: none;
107
- }
108
-
109
- .video-js.skin_vlone .vjs-remaining-time.vjs-time-control.vjs-control>span.vjs-remaining-time-display {
110
- line-height: 3.5em;
111
- font-size: 1.1em;
112
- min-width: 4em;
113
- }
114
-
115
- .video-js.skin_vlone .vjs-time-divider > div{
116
- display: flex;
117
- justify-content: center;
118
- }
119
-
120
- .video-js.skin_vlone .vjs-live-control{
121
- align-items: center;
122
- }
123
- .video-js.skin_vlone .vjs-live-display{
124
- height: 2.2em;
125
- display: flex;
126
- align-items: center;
127
- font-family: monospace;
128
- width: 4em;
129
- justify-content: center;
130
- background: red;
131
- margin: 4px 0px 4px 12px;
132
- }
133
- .video-js.skin_vlone .vjs-live-display.vjs-behind-live{
134
- background: #6b6b6b;
135
- }
136
- .video-js.skin_vlone .vjs-live-display:hover{
137
- cursor: pointer;
138
- }
139
-
140
- .video-js.skin_vlone .vjs-time-control {
141
- line-height: 3.5em !important;
142
- font-size: 1.1em !important;
143
- width: min-content !important;
144
- min-width: 1.5em;
145
- padding: 0 !important;
146
- user-select: none;
147
- }
148
-
149
- .video-js.skin_vlone .vjs-current-time.vjs-time-control.vjs-control {
150
- margin-left: 16px !important;
151
- }
152
-
153
- .video-js.skin_vlone .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
154
- .video-js.skin_vlone .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
155
- font-size: 1.2em !important;
156
- line-height: 1.5em !important;
157
- padding: 0.2em 0.8em !important;
158
- }
159
-
160
-
161
- /* Big play */
162
- .video-js.skin_vlone.vjs-paused .vjs-big-play-button {
163
- width: 80px;
164
- height: 80px;
165
- display: flex;
166
- justify-content: center;
167
- align-items: center;
168
- border: none;
169
- position: absolute;
170
- top: 0;
171
- left: 0;
172
- right: 0;
173
- bottom: 0;
174
- margin: auto;
175
- font-size: 5em;
176
- line-height: 1.3em;
177
- transform: none !important;
178
- border-radius: 1.3em;
179
- }
180
- .video-js.skin_vlone .ssai-ad-container{
181
- position: absolute;
182
- bottom: 4px;
183
- }
184
-
185
- @media(max-width:600px){
186
- .video-js.skin_vlone button.vjs-big-play-button {
187
- width: 50px !important;
188
- height: 50px !important;
189
- font-size: 2.1rem !important;
190
- }
191
-
192
- .video-js.skin_vlone .ssai-ad-container {
193
- position: absolute;
194
- bottom: 2px;
195
- }
196
- .video-js.skin_vlone .vjs-playback-rate .vjs-playback-rate-value {
197
- display: none;
198
- }
199
-
200
- .video-js.skin_vlone button.vjs-control.vjs-button.vjs-rewind-button>svg {
201
- /* display: none; */
202
- }
203
-
204
- .video-js.skin_vlone button.vjs-control.vjs-button.vjs-skip-button>svg {
205
- /* display: none; */
206
- }
207
- }
208
- .video-js .vjs-control-bar .vjs-subs-caps-button .vjs-menu .vjs-selected {
209
- text-decoration: underline;
210
- }
211
-
212
3
  .video-js.skin_news .vjs-button>.vjs-icon-placeholder:before {
213
4
  font-size: 2.2em;
214
5
  line-height: 2.6;
@@ -737,6 +528,8 @@
737
528
 
738
529
 
739
530
 
531
+
532
+
740
533
  .video-js.skin_news_live .vjs-button>.vjs-icon-placeholder:before {
741
534
  font-size: 2.2em;
742
535
  line-height: 2.6;
@@ -1219,232 +1012,623 @@
1219
1012
 
1220
1013
 
1221
1014
 
1222
- .video-js.skin_mini .vjs-button>.vjs-icon-placeholder:before {
1223
- font-size: 2.2em;
1224
- line-height: 2.6;
1225
- }
1226
- .video-js.skin_mini{
1227
- overflow: hidden;
1228
- }
1229
- .video-js.skin_mini .vjs-control-bar{
1230
- z-index: 1 !important;
1231
- height: 4em !important;
1232
- background: black !important;
1233
- }
1234
-
1235
- .video-js.skin_mini .vjs-fade>* {
1236
- visibility: hidden !important;
1237
- opacity: 0 !important;
1238
- transition: visibility 1s, opacity 1s !important;
1239
- }
1240
1015
 
1241
- .video-js.skin_mini .custom-spaced-progress-bar {
1242
- position: absolute;
1243
- width: 100%;
1016
+ .video-js.skin_cn_news .vjs-control-bar {
1017
+ z-index: 1 !important;
1018
+ height: auto !important;
1019
+ padding: 0.8em 30px 0.6em;
1020
+ background: transparent !important;
1244
1021
  display: flex;
1245
- height: 0.5em;
1246
- top: -0.5em;
1247
- }
1248
-
1249
- .video-js.skin_mini .vjs-progress-control {
1250
- /* left: -6px; */
1251
- position: relative;
1252
- width: 100%;
1253
- height: 0.5em;
1254
- transition: height 0.1s, top 0.1s;
1022
+ flex-wrap: wrap;
1023
+ align-items: center;
1024
+ column-gap: 10px;
1255
1025
  }
1256
1026
 
1257
1027
 
1258
-
1259
-
1260
- .video-js.skin_mini .vjs-custom-control-spacer {
1261
- display: block;
1262
- flex: 1 1 auto;
1263
- }
1264
-
1265
- .video-js.skin_mini .vjs-progress-control .vjs-progress-holder {
1266
- margin: 0 0px 0 0px;
1267
- }
1268
- .video-js.skin_mini .vjs-remaining-time.vjs-time-control.vjs-control{
1269
- display: none;
1270
- }
1271
-
1272
- .video-js.skin_mini button.vjs-control.vjs-button.vjs-slowmo-button {
1273
- font-size: 14px;
1274
- font-weight: 500;
1275
- align-self: center;
1276
- height: min-content;
1277
- padding: 5px 2px;
1278
- border-radius: 8px;
1028
+ .video-js.skin_cn_news .vjs-control-bar::before {
1029
+ content: '';
1030
+ position: absolute;
1031
+ left: 0;
1032
+ right: 0;
1033
+ bottom: 0;
1034
+ top: -3em;
1035
+ background: linear-gradient(
1036
+ to top,
1037
+ rgba(0, 0, 0, 0.85) 0%,
1038
+ rgba(0, 0, 0, 0.7) 40%,
1039
+ rgba(0, 0, 0, 0.55) 70%,
1040
+ rgba(0, 0, 0, 0.38) 86%,
1041
+ transparent 100%
1042
+ );
1043
+ pointer-events: none;
1044
+ z-index: -1;
1279
1045
  }
1280
1046
 
1281
- .video-js.skin_mini .vjs-progress-control .vjs-progress-holder{
1282
- height: 5px !important;
1047
+ .video-js.skin_cn_news .vjs-control-bar .vjs-progress-control {
1048
+ order: -1;
1049
+ flex: 0 0 100%;
1050
+ width: 80%;
1051
+ margin: 0 0 5em;
1052
+ position: relative;
1283
1053
  }
1284
1054
 
1285
- .video-js.skin_mini .vjs-play-progress:before {
1286
- font-size: 1.3em;
1287
- line-height: unset;
1288
- top: -0.3333333333em;
1055
+ .video-js.skin_cn_news .vjs-control-bar > .vjs-control,
1056
+ .video-js.skin_cn_news .vjs-control-bar > .vjs-button {
1057
+ width: auto;
1058
+ min-width: 0;
1289
1059
  }
1290
-
1291
- .video-js.skin_mini .vjs-play-progress .vjs-time-tooltip {
1292
- display: none !important;
1060
+ .video-js.skin_cn_news .vjs-control-bar .vjs-button {
1061
+ display: inline-flex;
1062
+ align-items: center;
1063
+ justify-content: center;
1064
+ height: 7em;
1065
+ padding: 0 10px;
1066
+ color: #fff;
1293
1067
  }
1294
1068
 
1295
- /* */
1296
- .video-js.skin_mini .vjs-mouse-display{
1297
- font-size: 1.6666666667em;
1069
+ .video-js.skin_cn_news .vjs-svg-icon::before {
1070
+ content: none !important;
1298
1071
  }
1299
1072
 
1300
- .video-js.skin_mini .vjs-progress-control:hover .vjs-progress-holder {
1301
- font-size: 1em !important;
1302
- }
1303
1073
 
1304
- .video-js.skin_mini .vjs-button{
1305
- width: 3em;
1306
- display: flex;
1074
+ .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon {
1075
+ display: inline-flex;
1307
1076
  align-items: center;
1308
1077
  justify-content: center;
1309
1078
  }
1079
+ .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon svg,
1080
+ .video-js.skin_cn_news .vjs-rewind-button svg {
1081
+ width: 24px;
1082
+ height: 24px;
1083
+ display: block;
1084
+ }
1310
1085
 
1311
1086
 
1312
- .video-js.skin_mini .vjs-fullscreen .icon-minimize,
1313
- .icon-maximize {
1314
- display: block;
1315
- height: 32px;
1316
- }
1317
1087
 
1318
- .video-js.skin_mini .vjs-playback-rate .vjs-playback-rate-value{
1319
- line-height: 4;
1088
+ .video-js.skin_cn_news .vjs-subs-caps-button {
1089
+ opacity: 1;
1320
1090
  }
1321
1091
 
1322
- .video-js.skin_mini .vjs-fullscreen .icon-maximize,
1323
- .icon-minimize {
1324
- display: none;
1325
- height: 32px;
1326
- }
1327
1092
 
1328
- .video-js.skin_mini button.vjs-play-control.vjs-control.vjs-button{
1329
- outline: none !important;
1330
- }
1331
- .video-js.skin_mini .vjs-fullscreen-control .vjs-icon-placeholder:before,
1332
- .vjs-icon-fullscreen-enter:before {
1333
- /* content: '' !important; */
1334
- }
1335
1093
 
1336
- .video-js.skin_mini button.vjs-fullscreen-control.vjs-control.vjs-button {
1337
- display: flex;
1338
- justify-content: center;
1094
+ .video-js.skin_cn_news .vjs-volume-panel {
1095
+ margin: 0;
1096
+ display: inline-flex;
1339
1097
  align-items: center;
1340
- /* transform: rotate(90deg); */
1098
+ align-self: center;
1099
+ height: 2.2em;
1100
+ min-width: 7em;
1101
+ transition: none;
1341
1102
  }
1342
-
1343
- .video-js.skin_mini .vjs-subs-caps-button .vjs-icon-placeholder:before{
1344
- display: none;
1103
+ .video-js.skin_cn_news .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
1104
+ width: 0;
1105
+ height: 100%;
1106
+ display: flex;
1107
+ align-items: center;
1108
+ overflow: hidden;
1109
+ opacity: 0;
1110
+ transition: width 0.15s ease, opacity 0.15s ease;
1345
1111
  }
1346
- .video-js.skin_mini .vjs-volume-panel .vjs-volume-control{
1347
- margin-left: -10px;
1348
- display: none;
1112
+ .video-js.skin_cn_news .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal,
1113
+ .video-js.skin_cn_news .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
1114
+ .video-js.skin_cn_news .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal,
1115
+ .video-js.skin_cn_news .vjs-volume-panel:focus-within .vjs-volume-control.vjs-volume-horizontal {
1116
+ width: 5em;
1117
+ opacity: 1;
1349
1118
  }
1350
1119
 
1351
- .video-js.skin_mini .vjs-loading-spinner {
1352
- position: absolute;
1353
- top: 50%;
1354
- left: 50%;
1355
- transform: translate(-50%, -50%);
1356
- opacity: .85;
1357
- text-align: left;
1358
- border: .2em solid rgba(43, 51, 63, .7);
1359
- box-sizing: border-box;
1360
- background-clip: padding-box;
1361
- width: 3em;
1362
- height: 3em;
1363
- border-radius: 50%;
1364
- visibility: hidden;
1120
+ .video-js.skin_cn_news .vjs-volume-bar {
1121
+ width: 4em;
1122
+ height: 0.3em;
1123
+ margin: 0 0.45em;
1365
1124
  }
1366
1125
 
1367
- .video-js.skin_mini .skipbtn:hover{
1368
- cursor: pointer;
1126
+
1127
+ .video-js.skin_cn_news .vjs-volume-control .vjs-mouse-display {
1128
+ display: none !important;
1369
1129
  }
1370
1130
 
1371
- .video-js.skin_mini .rewindbtn:hover{
1372
- cursor: pointer;
1131
+ .video-js.skin_cn_news .vjs-mute-control.vjs-vol-0 ~ .vjs-volume-control .vjs-volume-level {
1132
+ width: 0 !important;
1373
1133
  }
1374
1134
 
1375
- .video-js.skin_mini .vjs-seek-to-live-control.vjs-control{
1376
- position: relative;
1377
- padding-left: 0;
1135
+
1136
+ .video-js.skin_cn_news .vjs-custom-control-spacer {
1137
+ display: block !important;
1138
+ flex: 1 1 auto;
1378
1139
  }
1379
1140
 
1380
- .video-js.skin_mini.vjs-paused .vjs-big-play-button {
1381
- width: 40px;
1382
- height: 40px;
1141
+
1142
+ .video-js.skin_cn_news .vjs-big-play-button {
1143
+ display: none;
1144
+ }
1145
+ .video-js.skin_cn_news .vjs-big-play-button .vjs-icon-placeholder:before {
1146
+ position: relative !important;
1147
+ display: flex;
1148
+ left: 0;
1149
+ top: -1px;
1150
+ }
1151
+ .video-js.skin_cn_news.vjs-paused:not(.vjs-seeking):not(.vjs-ended) .vjs-big-play-button {
1383
1152
  display: flex;
1384
1153
  justify-content: center;
1385
1154
  align-items: center;
1386
- border: none;
1387
1155
  position: absolute;
1388
1156
  top: 0;
1389
1157
  left: 0;
1390
1158
  right: 0;
1391
1159
  bottom: 0;
1392
1160
  margin: auto;
1393
- font-size: 3em;
1161
+ width: 80px;
1162
+ height: 80px;
1163
+ border: none;
1164
+ border-radius: 50%;
1165
+ background: rgba(0, 0, 0, 0.55);
1166
+ font-size: 5em;
1394
1167
  line-height: 1.3em;
1395
1168
  transform: none !important;
1396
- border-radius: 1.3em;
1397
1169
  }
1398
1170
 
1399
- .video-js.skin_mini .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge{
1400
- font-weight: bold;
1401
- }
1402
1171
 
1403
- .video-js.skin_mini .vjs-menu > ul.vjs-menu-content{
1404
- bottom: 1.1em !important;
1405
- right: 1em;
1406
- z-index: 1;
1407
- font-size: 10px;
1172
+ .video-js.skin_cn_news .vjs-progress-control .vjs-progress-holder {
1173
+ height: 4px !important;
1174
+ margin: 0;
1175
+ border-radius: 20px;
1176
+ background-color: #393944;
1408
1177
  }
1409
1178
 
1410
- .video-js.skin_mini .vjs-chromecast-button .vjs-icon-placeholder {
1411
- width: 24px !important;
1412
- height: 24px !important;
1179
+ .video-js.skin_cn_news .vjs-play-progress {
1180
+ background-color: #ffffff;
1181
+ border-radius: 20px;
1413
1182
  }
1414
- .video-js.skin_mini .settings-selector-icon>svg{
1415
- height: 19px !important;
1416
- width: 19px !important;
1183
+
1184
+ .video-js.skin_cn_news .vjs-load-progress,
1185
+ .video-js.skin_cn_news .vjs-load-progress div {
1186
+ background: rgba(255, 255, 255, 0.15);
1187
+ border-radius: 20px;
1417
1188
  }
1418
1189
 
1419
1190
 
1420
- .video-js.skin_mini button.vjs-rewind-button{
1421
- cursor: pointer;
1191
+ .video-js.skin_cn_news .vjs-play-progress:before {
1192
+ content: '';
1193
+ width: 16px;
1194
+ height: 16px;
1195
+ border-radius: 50%;
1196
+ background: #ffffff;
1197
+ border: 2px solid rgba(0, 0, 0, 0.6);
1198
+ box-sizing: border-box;
1199
+ box-shadow: 0 0 0 2px #ffffff, 0 0 3px rgba(0, 0, 0, 0.45);
1200
+ top: -6px;
1201
+ right: -8px;
1202
+ position: absolute;
1422
1203
  }
1423
-
1424
- .video-js.skin_mini .vjs-control-bar .vjs-current-time.vjs-time-control.vjs-control {
1425
- padding-right: 0;
1204
+ .video-js.skin_cn_news .vjs-play-progress .vjs-time-tooltip {
1205
+ display: none !important;
1426
1206
  }
1427
1207
 
1428
- .video-js.skin_mini .vjs-control-bar .vjs-duration.vjs-time-control.vjs-control {
1429
- padding-left: 0;
1208
+ .video-js.skin_cn_news .vjs-mouse-display .vjs-time-tooltip {
1209
+ display: none !important;
1430
1210
  }
1431
1211
 
1432
- .video-js.skin_mini .vjs-control-bar .vjs-time-control.vjs-time-divider {
1433
- padding-left: 0;
1434
- padding-right: 0;
1435
- display: flex;
1436
- justify-content: center;
1437
- width: min-content;
1212
+ .video-js.skin_cn_news.vjs-vod .vjs-mouse-display .vjs-time-tooltip {
1213
+ display: block !important;
1214
+ background: #ffffff;
1215
+ color: #0a0e17;
1216
+ font-weight: 700;
1217
+ border-radius: 3px;
1438
1218
  }
1439
1219
 
1440
- .video-js.skin_mini.vjs-live .vjs-control-bar .vjs-time-control {
1441
- display: none
1442
- }
1443
- .video-js.skin_mini.vjs-liveui .vjs-control-bar .vjs-time-control {
1444
- display: none
1220
+ .video-js.skin_cn_news .vjs-live-control {
1221
+ display: none !important;
1445
1222
  }
1446
-
1447
- .video-js.skin_mini .vjs-control-bar .vjs-time-control {
1223
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-control {
1224
+ display: inline-flex;
1225
+ align-items: center;
1226
+ align-self: center;
1227
+ height: 2.2em;
1228
+ gap: 5px;
1229
+ width: auto;
1230
+ padding: 0 10px;
1231
+ border: 1px solid rgba(255, 255, 255, 0.45);
1232
+ border-radius: 4px;
1233
+ cursor: pointer;
1234
+ }
1235
+ .video-js.skin_cn_news:not(.vjs-live) .vjs-seek-to-live-control.vjs-control,
1236
+ .video-js.skin_cn_news.vjs-live:not(.vjs-liveui) .vjs-seek-to-live-control.vjs-control,
1237
+ .video-js.skin_cn_news:not(.vjs-liveui) .vjs-seek-to-live-control.vjs-control {
1238
+ display: none;
1239
+ }
1240
+
1241
+ .video-js.skin_cn_news .vjs-seek-to-live-control .vjs-icon-placeholder {
1242
+ display: none;
1243
+ }
1244
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder {
1245
+ display: inline-flex;
1246
+ align-items: center;
1247
+ }
1248
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder::before {
1249
+ content: '';
1250
+ display: inline-block;
1251
+ width: 8px;
1252
+ height: 8px;
1253
+ border-radius: 50%;
1254
+ background: #ff2d2d; /* red live dot */
1255
+ }
1256
+ .video-js.skin_cn_news .vjs-seek-to-live-text {
1257
+ color: #ffffff;
1258
+ font-weight: 700;
1259
+ font-size: 12px;
1260
+ letter-spacing: 0.03em;
1261
+ }
1262
+
1263
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge {
1264
+ border-color: transparent;
1265
+ }
1266
+ .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-seek-to-live-text {
1267
+ color: #ff2d2d;
1268
+ }
1269
+
1270
+ /* ---- time controls ---- */
1271
+ .video-js.skin_cn_news .vjs-current-time,
1272
+ .video-js.skin_cn_news .vjs-duration,
1273
+ .video-js.skin_cn_news .vjs-time-divider {
1274
+ display: none;
1275
+ align-items: center;
1276
+ font-size: 12px;
1277
+ font-weight: 700;
1278
+ color: #fff;
1279
+ user-select: none;
1280
+ }
1281
+ .video-js.skin_cn_news.vjs-cn-news-vod:not(.vjs-live) .vjs-current-time.vjs-time-control.vjs-control,
1282
+ .video-js.skin_cn_news.vjs-cn-news-vod:not(.vjs-live) .vjs-duration.vjs-time-control.vjs-control,
1283
+ .video-js.skin_cn_news.vjs-cn-news-vod:not(.vjs-live) .vjs-time-divider.vjs-time-control {
1284
+ display: flex;
1285
+ }
1286
+ .video-js.skin_cn_news .vjs-current-time.vjs-time-control.vjs-control {
1287
+ padding-right: 0;
1288
+ }
1289
+ .video-js.skin_cn_news .vjs-duration.vjs-time-control.vjs-control {
1290
+ padding-left: 0;
1291
+ }
1292
+ .video-js.skin_cn_news .vjs-time-control.vjs-time-divider {
1293
+ padding: 0 4px;
1294
+ min-width: 0;
1295
+ width: auto;
1296
+ }
1297
+ .video-js.skin_cn_news:not(.vl-vod-time) .vjs-current-time,
1298
+ .video-js.skin_cn_news:not(.vl-vod-time) .vjs-duration,
1299
+ .video-js.skin_cn_news:not(.vl-vod-time) .vjs-time-divider {
1300
+ display: none !important;
1301
+ }
1302
+ .video-js.skin_cn_news.vl-vod-time .vjs-current-time,
1303
+ .video-js.skin_cn_news.vl-vod-time .vjs-duration,
1304
+ .video-js.skin_cn_news.vl-vod-time .vjs-time-divider {
1305
+ display: flex;
1306
+ align-items: center;
1307
+ min-width: 0;
1308
+ padding: 0;
1309
+ font-size: 11px;
1310
+ font-weight: 700;
1311
+ color: #fff;
1312
+ user-select: none;
1313
+ }
1314
+ .video-js.skin_cn_news.vl-vod-time .vjs-current-time {
1315
+ padding-left: 6px;
1316
+ }
1317
+
1318
+ .video-js.skin_cn_news.vl-vod-time .vjs-time-divider {
1319
+ margin: 0 -6px;
1320
+ }
1321
+ .video-js.skin_cn_news .vjs-remaining-time.vjs-time-control.vjs-control {
1322
+ display: none;
1323
+ align-items: center;
1324
+ justify-content: center;
1325
+ font-size: 11px;
1326
+ font-weight: 700;
1327
+ color: #fff;
1328
+ padding: 0 6px;
1329
+ user-select: none;
1330
+ }
1331
+ .video-js.skin_cn_news .vjs-remaining-time .vjs-remaining-time-display {
1332
+ display: none;
1333
+ }
1334
+
1335
+
1336
+ .video-js.skin_cn_news .vjs-chapter-marker {
1337
+ z-index: 2;
1338
+ width: var(--vl-chapter-size, 8px);
1339
+ height: var(--vl-chapter-size, 8px);
1340
+ top: 50%;
1341
+ bottom: auto;
1342
+ background: var(--vl-chapter-color, #ffffff);
1343
+ opacity: var(--vl-chapter-opacity, 1);
1344
+ border-radius: 50%;
1345
+ box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); /* keep white dots visible on the white bar */
1346
+ transform: translate(-50%, -50%) scale(1);
1347
+ transition: background-color 0.12s ease;
1348
+ }
1349
+ .video-js.skin_cn_news .vjs-chapter-marker:hover {
1350
+ background: var(--vl-chapter-hover, #0a5cff);
1351
+ }
1352
+ .video-js.skin_cn_news .vjs-chapter-marker.vjs-chapter-marker--active {
1353
+ background: var(--vl-chapter-active, #0a5cff);
1354
+ }
1355
+
1356
+
1357
+ .video-js.skin_cn_news .vjs-chapter-marker .vjs-chapter-marker__icon {
1358
+ width: 16px;
1359
+ height: 16px;
1360
+ bottom: 160%;
1361
+ filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
1362
+ }
1363
+
1364
+
1365
+ .video-js.skin_cn_news .vjs-chapter-preview {
1366
+ background: var(--vl-chapter-tooltip, #0a5cff);
1367
+ border-radius: 6px;
1368
+ padding: 8px 10px;
1369
+ width: max-content;
1370
+ max-width: 300px;
1371
+ text-align: left;
1372
+ box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
1373
+ }
1374
+ .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__time {
1375
+ color: #ffffff;
1376
+ font-size: 13px;
1377
+ font-weight: 400;
1378
+ margin-bottom: 2px;
1379
+ }
1380
+ .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__label {
1381
+ color: #ffffff;
1382
+ font-size: 13px;
1383
+ font-weight: 400;
1384
+ line-height: 1.3;
1385
+ white-space: normal;
1386
+ text-align: left;
1387
+ }
1388
+ .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__pointer {
1389
+ border-top-color: var(--vl-chapter-tooltip, #0a5cff);
1390
+ }
1391
+
1392
+ /* ---- responsive ---- */
1393
+ @media (max-width: 576px) {
1394
+ .video-js.skin_cn_news .vjs-control-bar {
1395
+ height: 3.2em !important;
1396
+ padding: 0 8px;
1397
+ }
1398
+ .video-js.skin_cn_news .vjs-control-bar .vjs-button {
1399
+ padding: 0 6px;
1400
+ }
1401
+ .video-js.skin_cn_news .vjs-control.vjs-button.vjs-picture-in-picture-control {
1402
+ display: none !important;
1403
+ }
1404
+ }
1405
+
1406
+ .video-js.skin_mini .vjs-button>.vjs-icon-placeholder:before {
1407
+ font-size: 2.2em;
1408
+ line-height: 2.6;
1409
+ }
1410
+ .video-js.skin_mini{
1411
+ overflow: hidden;
1412
+ }
1413
+ .video-js.skin_mini .vjs-control-bar{
1414
+ z-index: 1 !important;
1415
+ height: 4em !important;
1416
+ background: black !important;
1417
+ }
1418
+
1419
+ .video-js.skin_mini .vjs-fade>* {
1420
+ visibility: hidden !important;
1421
+ opacity: 0 !important;
1422
+ transition: visibility 1s, opacity 1s !important;
1423
+ }
1424
+
1425
+ .video-js.skin_mini .custom-spaced-progress-bar {
1426
+ position: absolute;
1427
+ width: 100%;
1428
+ display: flex;
1429
+ height: 0.5em;
1430
+ top: -0.5em;
1431
+ }
1432
+
1433
+ .video-js.skin_mini .vjs-progress-control {
1434
+ /* left: -6px; */
1435
+ position: relative;
1436
+ width: 100%;
1437
+ height: 0.5em;
1438
+ transition: height 0.1s, top 0.1s;
1439
+ }
1440
+
1441
+
1442
+
1443
+
1444
+ .video-js.skin_mini .vjs-custom-control-spacer {
1445
+ display: block;
1446
+ flex: 1 1 auto;
1447
+ }
1448
+
1449
+ .video-js.skin_mini .vjs-progress-control .vjs-progress-holder {
1450
+ margin: 0 0px 0 0px;
1451
+ }
1452
+ .video-js.skin_mini .vjs-remaining-time.vjs-time-control.vjs-control{
1453
+ display: none;
1454
+ }
1455
+
1456
+ .video-js.skin_mini button.vjs-control.vjs-button.vjs-slowmo-button {
1457
+ font-size: 14px;
1458
+ font-weight: 500;
1459
+ align-self: center;
1460
+ height: min-content;
1461
+ padding: 5px 2px;
1462
+ border-radius: 8px;
1463
+ }
1464
+
1465
+ .video-js.skin_mini .vjs-progress-control .vjs-progress-holder{
1466
+ height: 5px !important;
1467
+ }
1468
+
1469
+ .video-js.skin_mini .vjs-play-progress:before {
1470
+ font-size: 1.3em;
1471
+ line-height: unset;
1472
+ top: -0.3333333333em;
1473
+ }
1474
+
1475
+ .video-js.skin_mini .vjs-play-progress .vjs-time-tooltip {
1476
+ display: none !important;
1477
+ }
1478
+
1479
+ /* */
1480
+ .video-js.skin_mini .vjs-mouse-display{
1481
+ font-size: 1.6666666667em;
1482
+ }
1483
+
1484
+ .video-js.skin_mini .vjs-progress-control:hover .vjs-progress-holder {
1485
+ font-size: 1em !important;
1486
+ }
1487
+
1488
+ .video-js.skin_mini .vjs-button{
1489
+ width: 3em;
1490
+ display: flex;
1491
+ align-items: center;
1492
+ justify-content: center;
1493
+ }
1494
+
1495
+
1496
+ .video-js.skin_mini .vjs-fullscreen .icon-minimize,
1497
+ .icon-maximize {
1498
+ display: block;
1499
+ height: 32px;
1500
+ }
1501
+
1502
+ .video-js.skin_mini .vjs-playback-rate .vjs-playback-rate-value{
1503
+ line-height: 4;
1504
+ }
1505
+
1506
+ .video-js.skin_mini .vjs-fullscreen .icon-maximize,
1507
+ .icon-minimize {
1508
+ display: none;
1509
+ height: 32px;
1510
+ }
1511
+
1512
+ .video-js.skin_mini button.vjs-play-control.vjs-control.vjs-button{
1513
+ outline: none !important;
1514
+ }
1515
+ .video-js.skin_mini .vjs-fullscreen-control .vjs-icon-placeholder:before,
1516
+ .vjs-icon-fullscreen-enter:before {
1517
+ /* content: '' !important; */
1518
+ }
1519
+
1520
+ .video-js.skin_mini button.vjs-fullscreen-control.vjs-control.vjs-button {
1521
+ display: flex;
1522
+ justify-content: center;
1523
+ align-items: center;
1524
+ /* transform: rotate(90deg); */
1525
+ }
1526
+
1527
+ .video-js.skin_mini .vjs-subs-caps-button .vjs-icon-placeholder:before{
1528
+ display: none;
1529
+ }
1530
+ .video-js.skin_mini .vjs-volume-panel .vjs-volume-control{
1531
+ margin-left: -10px;
1532
+ display: none;
1533
+ }
1534
+
1535
+ .video-js.skin_mini .vjs-loading-spinner {
1536
+ position: absolute;
1537
+ top: 50%;
1538
+ left: 50%;
1539
+ transform: translate(-50%, -50%);
1540
+ opacity: .85;
1541
+ text-align: left;
1542
+ border: .2em solid rgba(43, 51, 63, .7);
1543
+ box-sizing: border-box;
1544
+ background-clip: padding-box;
1545
+ width: 3em;
1546
+ height: 3em;
1547
+ border-radius: 50%;
1548
+ visibility: hidden;
1549
+ }
1550
+
1551
+ .video-js.skin_mini .skipbtn:hover{
1552
+ cursor: pointer;
1553
+ }
1554
+
1555
+ .video-js.skin_mini .rewindbtn:hover{
1556
+ cursor: pointer;
1557
+ }
1558
+
1559
+ .video-js.skin_mini .vjs-seek-to-live-control.vjs-control{
1560
+ position: relative;
1561
+ padding-left: 0;
1562
+ }
1563
+
1564
+ .video-js.skin_mini.vjs-paused .vjs-big-play-button {
1565
+ width: 40px;
1566
+ height: 40px;
1567
+ display: flex;
1568
+ justify-content: center;
1569
+ align-items: center;
1570
+ border: none;
1571
+ position: absolute;
1572
+ top: 0;
1573
+ left: 0;
1574
+ right: 0;
1575
+ bottom: 0;
1576
+ margin: auto;
1577
+ font-size: 3em;
1578
+ line-height: 1.3em;
1579
+ transform: none !important;
1580
+ border-radius: 1.3em;
1581
+ }
1582
+
1583
+ .video-js.skin_mini .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge{
1584
+ font-weight: bold;
1585
+ }
1586
+
1587
+ .video-js.skin_mini .vjs-menu > ul.vjs-menu-content{
1588
+ bottom: 1.1em !important;
1589
+ right: 1em;
1590
+ z-index: 1;
1591
+ font-size: 10px;
1592
+ }
1593
+
1594
+ .video-js.skin_mini .vjs-chromecast-button .vjs-icon-placeholder {
1595
+ width: 24px !important;
1596
+ height: 24px !important;
1597
+ }
1598
+ .video-js.skin_mini .settings-selector-icon>svg{
1599
+ height: 19px !important;
1600
+ width: 19px !important;
1601
+ }
1602
+
1603
+
1604
+ .video-js.skin_mini button.vjs-rewind-button{
1605
+ cursor: pointer;
1606
+ }
1607
+
1608
+ .video-js.skin_mini .vjs-control-bar .vjs-current-time.vjs-time-control.vjs-control {
1609
+ padding-right: 0;
1610
+ }
1611
+
1612
+ .video-js.skin_mini .vjs-control-bar .vjs-duration.vjs-time-control.vjs-control {
1613
+ padding-left: 0;
1614
+ }
1615
+
1616
+ .video-js.skin_mini .vjs-control-bar .vjs-time-control.vjs-time-divider {
1617
+ padding-left: 0;
1618
+ padding-right: 0;
1619
+ display: flex;
1620
+ justify-content: center;
1621
+ width: min-content;
1622
+ }
1623
+
1624
+ .video-js.skin_mini.vjs-live .vjs-control-bar .vjs-time-control {
1625
+ display: none
1626
+ }
1627
+ .video-js.skin_mini.vjs-liveui .vjs-control-bar .vjs-time-control {
1628
+ display: none
1629
+ }
1630
+
1631
+ .video-js.skin_mini .vjs-control-bar .vjs-time-control {
1448
1632
  display: flex;
1449
1633
  align-items: center;
1450
1634
  font-weight: 700;
@@ -1640,413 +1824,262 @@
1640
1824
  }
1641
1825
  .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-colors,
1642
1826
  .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-font,
1643
- .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-controls{
1644
- display: block;
1645
- width: 100%;
1646
- }
1647
- .video-js.skin_mini .vjs-text-track-settings fieldset{
1648
- margin: 4px 0;
1649
- }
1650
- .video-js.skin_mini .vjs-text-track-settings fieldset span{
1651
- display: block;
1652
- padding: 0 0 6px;
1653
- }
1654
- .video-js.skin_mini .vjs-text-track-settings fieldset span > select{
1655
- max-width: 100%;
1656
- }
1657
-
1658
- @media (max-width: 600px) {
1659
- .video-js.skin_mini .vjs-progress-control .vjs-progress-holder{
1660
- height: 5px !important;
1661
- }
1662
-
1663
- .video-js.skin_mini .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
1664
- display: none;
1665
- }
1666
-
1667
- }
1668
-
1669
- .video-js.skin_mini .vjs-control-bar .vjs-svg-icon{
1670
- content: none !important;
1671
- fill: none !important;
1672
- filter: none !important;
1673
- }
1674
-
1675
- /* svg icons opacity and hover effect */
1676
- .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button svg {
1677
- opacity: 0.7 !important;
1678
- }
1679
-
1680
- .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button:hover svg {
1681
- opacity: 1 !important;
1682
- }
1683
-
1684
- .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
1685
- color: rgba(255, 255, 2555, 0.7)!important;
1686
- }
1687
-
1688
- .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
1689
- color: rgba(255, 255, 2555, 1)!important;
1690
- }
1691
-
1692
-
1693
-
1694
-
1695
- .video-js.skin_cn_news .vjs-control-bar {
1696
- z-index: 1 !important;
1697
- height: auto !important;
1698
- padding: 0.8em 30px 0.6em;
1699
- background: transparent !important;
1700
- display: flex;
1701
- flex-wrap: wrap;
1702
- align-items: center;
1703
- column-gap: 10px;
1704
- }
1705
-
1706
-
1707
- .video-js.skin_cn_news .vjs-control-bar::before {
1708
- content: '';
1709
- position: absolute;
1710
- left: 0;
1711
- right: 0;
1712
- bottom: 0;
1713
- top: -3em;
1714
- background: linear-gradient(
1715
- to top,
1716
- rgba(0, 0, 0, 0.85) 0%,
1717
- rgba(0, 0, 0, 0.7) 40%,
1718
- rgba(0, 0, 0, 0.55) 70%,
1719
- rgba(0, 0, 0, 0.38) 86%,
1720
- transparent 100%
1721
- );
1722
- pointer-events: none;
1723
- z-index: -1;
1724
- }
1725
-
1726
- .video-js.skin_cn_news .vjs-control-bar .vjs-progress-control {
1727
- order: -1;
1728
- flex: 0 0 100%;
1729
- width: 80%;
1730
- margin: 0 0 5em;
1731
- position: relative;
1732
- }
1733
-
1734
- .video-js.skin_cn_news .vjs-control-bar > .vjs-control,
1735
- .video-js.skin_cn_news .vjs-control-bar > .vjs-button {
1736
- width: auto;
1737
- min-width: 0;
1738
- }
1739
- .video-js.skin_cn_news .vjs-control-bar .vjs-button {
1740
- display: inline-flex;
1741
- align-items: center;
1742
- justify-content: center;
1743
- height: 7em;
1744
- padding: 0 10px;
1745
- color: #fff;
1746
- }
1747
-
1748
- .video-js.skin_cn_news .vjs-svg-icon::before {
1749
- content: none !important;
1750
- }
1751
-
1752
-
1753
- .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon {
1754
- display: inline-flex;
1755
- align-items: center;
1756
- justify-content: center;
1827
+ .video-js.skin_mini .vjs-text-track-settings .vjs-track-settings-controls{
1828
+ display: block;
1829
+ width: 100%;
1757
1830
  }
1758
- .video-js.skin_cn_news .vjs-control-bar .vjs-svg-icon svg,
1759
- .video-js.skin_cn_news .vjs-rewind-button svg {
1760
- width: 24px;
1761
- height: 24px;
1831
+ .video-js.skin_mini .vjs-text-track-settings fieldset{
1832
+ margin: 4px 0;
1833
+ }
1834
+ .video-js.skin_mini .vjs-text-track-settings fieldset span{
1762
1835
  display: block;
1836
+ padding: 0 0 6px;
1837
+ }
1838
+ .video-js.skin_mini .vjs-text-track-settings fieldset span > select{
1839
+ max-width: 100%;
1763
1840
  }
1764
1841
 
1842
+ @media (max-width: 600px) {
1843
+ .video-js.skin_mini .vjs-progress-control .vjs-progress-holder{
1844
+ height: 5px !important;
1845
+ }
1765
1846
 
1847
+ .video-js.skin_mini .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button{
1848
+ display: none;
1849
+ }
1766
1850
 
1767
- .video-js.skin_cn_news .vjs-subs-caps-button {
1768
- opacity: 1;
1769
1851
  }
1770
1852
 
1853
+ .video-js.skin_mini .vjs-control-bar .vjs-svg-icon{
1854
+ content: none !important;
1855
+ fill: none !important;
1856
+ filter: none !important;
1857
+ }
1771
1858
 
1772
-
1773
- .video-js.skin_cn_news .vjs-volume-panel {
1774
- margin: 0;
1775
- display: inline-flex;
1776
- align-items: center;
1777
- align-self: center;
1778
- height: 2.2em;
1779
- min-width: 7em;
1780
- transition: none;
1859
+ /* svg icons opacity and hover effect */
1860
+ .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button svg {
1861
+ opacity: 0.7 !important;
1781
1862
  }
1782
- .video-js.skin_cn_news .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
1783
- width: 0;
1784
- height: 100%;
1785
- display: flex;
1786
- align-items: center;
1787
- overflow: hidden;
1788
- opacity: 0;
1789
- transition: width 0.15s ease, opacity 0.15s ease;
1863
+
1864
+ .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button:hover svg {
1865
+ opacity: 1 !important;
1790
1866
  }
1791
- .video-js.skin_cn_news .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal,
1792
- .video-js.skin_cn_news .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
1793
- .video-js.skin_cn_news .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal,
1794
- .video-js.skin_cn_news .vjs-volume-panel:focus-within .vjs-volume-control.vjs-volume-horizontal {
1795
- width: 5em;
1796
- opacity: 1;
1867
+
1868
+ .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button .vjs-button.vjs-menu-button {
1869
+ color: rgba(255, 255, 2555, 0.7)!important;
1797
1870
  }
1798
1871
 
1799
- .video-js.skin_cn_news .vjs-volume-bar {
1800
- width: 4em;
1801
- height: 0.3em;
1802
- margin: 0 0.45em;
1872
+ .video-js.skin_mini .vjs-control-bar .vjs-control.vjs-button:hover .vjs-button.vjs-menu-button {
1873
+ color: rgba(255, 255, 2555, 1)!important;
1803
1874
  }
1804
1875
 
1805
1876
 
1806
- .video-js.skin_cn_news .vjs-volume-control .vjs-mouse-display {
1807
- display: none !important;
1877
+ .video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control {
1878
+ height: 0.7em !important;
1879
+ position: absolute !important;
1880
+ top: -0.7em !important;
1881
+ width: 100% !important;
1808
1882
  }
1809
1883
 
1810
- .video-js.skin_cn_news .vjs-mute-control.vjs-vol-0 ~ .vjs-volume-control .vjs-volume-level {
1811
- width: 0 !important;
1884
+ .video-js.skin_vlone .vjs-progress-holder.vjs-slider.vjs-slider-horizontal {
1885
+ height: 100%;
1812
1886
  }
1813
1887
 
1814
-
1815
- .video-js.skin_cn_news .vjs-custom-control-spacer {
1816
- display: block !important;
1817
- flex: 1 1 auto;
1888
+ .video-js.skin_vlone .vjs-playback-rate .vjs-playback-rate-value{
1889
+ line-height: 2.5;
1818
1890
  }
1819
1891
 
1820
-
1821
- .video-js.skin_cn_news .vjs-big-play-button {
1822
- display: none;
1892
+ .video-js.skin_vlone button.vjs-control.vjs-button.vjs-rewind-button > svg{
1893
+ height: 19px;
1894
+ width: 19px;
1895
+ cursor: pointer;
1823
1896
  }
1824
- .video-js.skin_cn_news .vjs-big-play-button .vjs-icon-placeholder:before {
1825
- position: relative !important;
1826
- display: flex;
1827
- left: 0;
1828
- top: -1px;
1897
+ .video-js.skin_vlone .vjs-control {
1898
+ user-select: none;
1829
1899
  }
1830
- .video-js.skin_cn_news.vjs-paused:not(.vjs-seeking):not(.vjs-ended) .vjs-big-play-button {
1831
- display: flex;
1832
- justify-content: center;
1833
- align-items: center;
1834
- position: absolute;
1835
- top: 0;
1836
- left: 0;
1837
- right: 0;
1838
- bottom: 0;
1839
- margin: auto;
1840
- width: 80px;
1841
- height: 80px;
1842
- border: none;
1843
- border-radius: 50%;
1844
- background: rgba(0, 0, 0, 0.55);
1845
- font-size: 5em;
1846
- line-height: 1.3em;
1847
- transform: none !important;
1900
+ .video-js.skin_vlone .vjs-custom-control-spacer{
1901
+ user-select: none;
1848
1902
  }
1849
1903
 
1850
-
1851
- .video-js.skin_cn_news .vjs-progress-control .vjs-progress-holder {
1852
- height: 4px !important;
1853
- margin: 0;
1854
- border-radius: 20px;
1855
- background-color: #393944;
1904
+ .video-js.skin_vlone button.vjs-control.vjs-button.vjs-skip-button > svg{
1905
+ height: 19px;
1906
+ width: 19px;
1907
+ cursor: pointer;
1856
1908
  }
1857
1909
 
1858
- .video-js.skin_cn_news .vjs-play-progress {
1859
- background-color: #ffffff;
1860
- border-radius: 20px;
1910
+ .video-js.skin_vlone .vjs-play-progress:before {
1911
+ display: none !important;
1861
1912
  }
1862
1913
 
1863
- .video-js.skin_cn_news .vjs-load-progress,
1864
- .video-js.skin_cn_news .vjs-load-progress div {
1865
- background: rgba(255, 255, 255, 0.15);
1866
- border-radius: 20px;
1914
+ .video-js.skin_vlone .vjs-progress-control>.vjs-progress-holder.vjs-slider {
1915
+ margin: 0 !important;
1916
+
1867
1917
  }
1868
1918
 
1869
1919
 
1870
- .video-js.skin_cn_news .vjs-play-progress:before {
1871
- content: '';
1872
- width: 16px;
1873
- height: 16px;
1874
- border-radius: 50%;
1875
- background: #ffffff;
1876
- border: 2px solid rgba(0, 0, 0, 0.6);
1877
- box-sizing: border-box;
1878
- box-shadow: 0 0 0 2px #ffffff, 0 0 3px rgba(0, 0, 0, 0.45);
1879
- top: -6px;
1880
- right: -8px;
1881
- position: absolute;
1882
- }
1883
- .video-js.skin_cn_news .vjs-play-progress .vjs-time-tooltip {
1884
- display: none !important;
1920
+ .video-js.skin_vlone .vjs-custom-control-spacer {
1921
+ display: block;
1922
+ flex: 1 1 auto;
1885
1923
  }
1886
1924
 
1887
- .video-js.skin_cn_news .vjs-mouse-display .vjs-time-tooltip {
1888
- background: #ffffff;
1889
- color: #0a0e17;
1890
- font-weight: 700;
1891
- border-radius: 3px;
1925
+ .video-js.skin_vlone .vjs-volume-panel.vjs-volume-panel-vertical{
1926
+ z-index: 1;
1892
1927
  }
1893
1928
 
1894
- .video-js.skin_cn_news .vjs-live-control {
1895
- display: none !important;
1896
- }
1897
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-control {
1898
- display: inline-flex;
1899
- align-items: center;
1900
- align-self: center;
1901
- height: 2.2em;
1902
- gap: 5px;
1903
- width: auto;
1904
- padding: 0 10px;
1905
- border: 1px solid rgba(255, 255, 255, 0.45);
1906
- border-radius: 4px;
1907
- cursor: pointer;
1908
- }
1909
- .video-js.skin_cn_news:not(.vjs-live) .vjs-seek-to-live-control.vjs-control,
1910
- .video-js.skin_cn_news.vjs-live:not(.vjs-liveui) .vjs-seek-to-live-control.vjs-control {
1911
- display: none;
1912
- }
1913
1929
 
1914
- .video-js.skin_cn_news .vjs-seek-to-live-control .vjs-icon-placeholder {
1915
- display: none;
1916
- }
1917
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder {
1918
- display: inline-flex;
1919
- align-items: center;
1930
+ .video-js.skin_vlone .vjs-control-bar {
1931
+ height: 40px;
1920
1932
  }
1921
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-icon-placeholder::before {
1922
- content: '';
1923
- display: inline-block;
1924
- width: 8px;
1925
- height: 8px;
1926
- border-radius: 50%;
1927
- background: #ff2d2d; /* red live dot */
1933
+
1934
+ .video-js.skin_vlone .vjs-big-play-button .vjs-icon-placeholder:before,
1935
+ .vjs-button>.vjs-icon-placeholder:before {
1936
+ position: relative !important;
1928
1937
  }
1929
- .video-js.skin_cn_news .vjs-seek-to-live-text {
1930
- color: #ffffff;
1931
- font-weight: 700;
1932
- font-size: 12px;
1933
- letter-spacing: 0.03em;
1938
+ .video-js.skin_vlone .vjs-big-play-button .vjs-icon-placeholder:before{
1939
+ display: flex;
1940
+ left: 0px;
1941
+ top: -1px;
1934
1942
  }
1935
1943
 
1936
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge {
1937
- border-color: transparent;
1944
+ .vjs-button>.vjs-icon-placeholder:before {
1945
+ font-size: 2em !important;
1938
1946
  }
1939
- .video-js.skin_cn_news .vjs-seek-to-live-control.vjs-at-live-edge .vjs-seek-to-live-text {
1940
- color: #ff2d2d;
1947
+
1948
+ .video-js.skin_vlone .vjs-control {
1949
+ width: 4.3em;
1941
1950
  }
1942
1951
 
1943
- /* ---- time controls ---- */
1944
- .video-js.skin_cn_news .vjs-current-time,
1945
- .video-js.skin_cn_news .vjs-duration,
1946
- .video-js.skin_cn_news .vjs-time-divider {
1947
- display: none;
1948
- align-items: center;
1949
- font-size: 12px;
1950
- font-weight: 700;
1951
- color: #fff;
1952
- user-select: none;
1952
+ .vjs-menu-button-popup .vjs-menu {
1953
+ bottom: 10px !important;
1953
1954
  }
1954
- .video-js.skin_cn_news.vjs-cn-news-vod:not(.vjs-live) .vjs-current-time.vjs-time-control.vjs-control,
1955
- .video-js.skin_cn_news.vjs-cn-news-vod:not(.vjs-live) .vjs-duration.vjs-time-control.vjs-control,
1956
- .video-js.skin_cn_news.vjs-cn-news-vod:not(.vjs-live) .vjs-time-divider.vjs-time-control {
1957
- display: flex;
1955
+
1956
+ .video-js .vjs-subs-caps-button .vjs-menu li,
1957
+ .video-js .vjs-subtitles-button .vjs-menu li,
1958
+ .video-js .vjs-captions-button .vjs-menu li {
1959
+ text-transform: none;
1958
1960
  }
1959
- .video-js.skin_cn_news .vjs-current-time.vjs-time-control.vjs-control {
1960
- padding-right: 0;
1961
+
1962
+
1963
+ .video-js.skin_vlone .vjs-control-bar .vjs-progress-control.vjs-control:hover {
1964
+ height: 1.3em !important;
1965
+ position: absolute !important;
1966
+ top: -1.3em !important;
1967
+ transition: height 0.3s, top 0.3s !important;
1961
1968
  }
1962
- .video-js.skin_cn_news .vjs-duration.vjs-time-control.vjs-control {
1963
- padding-left: 0;
1969
+
1970
+
1971
+ .video-js.skin_vlone.vjs-live .vjs-time-control{
1972
+ display: none !important;
1964
1973
  }
1965
- .video-js.skin_cn_news .vjs-time-control.vjs-time-divider {
1966
- padding: 0 4px;
1967
- min-width: 0;
1968
- width: auto;
1974
+
1975
+ .video-js.skin_vlone .vjs-time-control {
1976
+ display: block;
1969
1977
  }
1970
- .video-js.skin_cn_news .vjs-remaining-time.vjs-time-control.vjs-control {
1971
- display: none;
1972
- align-items: center;
1973
- justify-content: center;
1974
- font-size: 11px;
1975
- font-weight: 700;
1976
- color: #fff;
1977
- padding: 0 6px;
1978
- user-select: none;
1978
+ .video-js.skin_vlone .vjs-remaining-time {
1979
+ display: none;
1979
1980
  }
1980
1981
 
1982
+ .video-js.skin_vlone .vjs-remaining-time.vjs-time-control.vjs-control>span.vjs-remaining-time-display {
1983
+ line-height: 3.5em;
1984
+ font-size: 1.1em;
1985
+ min-width: 4em;
1986
+ }
1981
1987
 
1982
- .video-js.skin_cn_news .vjs-chapter-marker {
1983
- z-index: 2;
1984
- width: var(--vl-chapter-size, 8px);
1985
- height: var(--vl-chapter-size, 8px);
1986
- top: 50%;
1987
- bottom: auto;
1988
- background: var(--vl-chapter-color, #ffffff);
1989
- opacity: var(--vl-chapter-opacity, 1);
1990
- border-radius: 50%;
1991
- box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); /* keep white dots visible on the white bar */
1992
- transform: translate(-50%, -50%) scale(1);
1993
- transition: background-color 0.12s ease;
1988
+ .video-js.skin_vlone .vjs-time-divider > div{
1989
+ display: flex;
1990
+ justify-content: center;
1994
1991
  }
1995
- .video-js.skin_cn_news .vjs-chapter-marker:hover {
1996
- background: var(--vl-chapter-hover, #0a5cff);
1992
+
1993
+ .video-js.skin_vlone .vjs-live-control{
1994
+ align-items: center;
1997
1995
  }
1998
- .video-js.skin_cn_news .vjs-chapter-marker.vjs-chapter-marker--active {
1999
- background: var(--vl-chapter-active, #0a5cff);
1996
+ .video-js.skin_vlone .vjs-live-display{
1997
+ height: 2.2em;
1998
+ display: flex;
1999
+ align-items: center;
2000
+ font-family: monospace;
2001
+ width: 4em;
2002
+ justify-content: center;
2003
+ background: red;
2004
+ margin: 4px 0px 4px 12px;
2005
+ }
2006
+ .video-js.skin_vlone .vjs-live-display.vjs-behind-live{
2007
+ background: #6b6b6b;
2008
+ }
2009
+ .video-js.skin_vlone .vjs-live-display:hover{
2010
+ cursor: pointer;
2011
+ }
2012
+
2013
+ .video-js.skin_vlone .vjs-time-control {
2014
+ line-height: 3.5em !important;
2015
+ font-size: 1.1em !important;
2016
+ width: min-content !important;
2017
+ min-width: 1.5em;
2018
+ padding: 0 !important;
2019
+ user-select: none;
2000
2020
  }
2001
2021
 
2022
+ .video-js.skin_vlone .vjs-current-time.vjs-time-control.vjs-control {
2023
+ margin-left: 16px !important;
2024
+ }
2002
2025
 
2003
- .video-js.skin_cn_news .vjs-chapter-marker .vjs-chapter-marker__icon {
2004
- width: 16px;
2005
- height: 16px;
2006
- bottom: 160%;
2007
- filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
2026
+ .video-js.skin_vlone .vjs-text-track-settings .vjs-track-settings-controls .vjs-default-button,
2027
+ .video-js.skin_vlone .vjs-text-track-settings .vjs-track-settings-controls .vjs-done-button {
2028
+ font-size: 1.2em !important;
2029
+ line-height: 1.5em !important;
2030
+ padding: 0.2em 0.8em !important;
2008
2031
  }
2009
2032
 
2010
2033
 
2011
- .video-js.skin_cn_news .vjs-chapter-preview {
2012
- background: var(--vl-chapter-tooltip, #0a5cff);
2013
- border-radius: 6px;
2014
- padding: 8px 10px;
2015
- width: max-content;
2016
- max-width: 300px;
2017
- text-align: left;
2018
- box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
2034
+ /* Big play */
2035
+ .video-js.skin_vlone.vjs-paused .vjs-big-play-button {
2036
+ width: 80px;
2037
+ height: 80px;
2038
+ display: flex;
2039
+ justify-content: center;
2040
+ align-items: center;
2041
+ border: none;
2042
+ position: absolute;
2043
+ top: 0;
2044
+ left: 0;
2045
+ right: 0;
2046
+ bottom: 0;
2047
+ margin: auto;
2048
+ font-size: 5em;
2049
+ line-height: 1.3em;
2050
+ transform: none !important;
2051
+ border-radius: 1.3em;
2019
2052
  }
2020
- .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__time {
2021
- color: #ffffff;
2022
- font-size: 13px;
2023
- font-weight: 400;
2024
- margin-bottom: 2px;
2053
+ .video-js.skin_vlone .ssai-ad-container{
2054
+ position: absolute;
2055
+ bottom: 4px;
2025
2056
  }
2026
- .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__label {
2027
- color: #ffffff;
2028
- font-size: 13px;
2029
- font-weight: 400;
2030
- line-height: 1.3;
2031
- white-space: normal;
2032
- text-align: left;
2057
+
2058
+ @media(max-width:600px){
2059
+ .video-js.skin_vlone button.vjs-big-play-button {
2060
+ width: 50px !important;
2061
+ height: 50px !important;
2062
+ font-size: 2.1rem !important;
2063
+ }
2064
+
2065
+ .video-js.skin_vlone .ssai-ad-container {
2066
+ position: absolute;
2067
+ bottom: 2px;
2033
2068
  }
2034
- .video-js.skin_cn_news .vjs-chapter-preview .vjs-chapter-preview__pointer {
2035
- border-top-color: var(--vl-chapter-tooltip, #0a5cff);
2069
+ .video-js.skin_vlone .vjs-playback-rate .vjs-playback-rate-value {
2070
+ display: none;
2036
2071
  }
2037
2072
 
2038
- /* ---- responsive ---- */
2039
- @media (max-width: 576px) {
2040
- .video-js.skin_cn_news .vjs-control-bar {
2041
- height: 3.2em !important;
2042
- padding: 0 8px;
2043
- }
2044
- .video-js.skin_cn_news .vjs-control-bar .vjs-button {
2045
- padding: 0 6px;
2046
- }
2047
- .video-js.skin_cn_news .vjs-control.vjs-button.vjs-picture-in-picture-control {
2048
- display: none !important;
2049
- }
2073
+ .video-js.skin_vlone button.vjs-control.vjs-button.vjs-rewind-button>svg {
2074
+ /* display: none; */
2075
+ }
2076
+
2077
+ .video-js.skin_vlone button.vjs-control.vjs-button.vjs-skip-button>svg {
2078
+ /* display: none; */
2079
+ }
2080
+ }
2081
+ .video-js .vjs-control-bar .vjs-subs-caps-button .vjs-menu .vjs-selected {
2082
+ text-decoration: underline;
2050
2083
  }
2051
2084
 
2052
2085
 
@@ -2231,8 +2264,6 @@
2231
2264
 
2232
2265
 
2233
2266
 
2234
-
2235
-
2236
2267
  .video-js .multicamera-parent.default{
2237
2268
  height: 345px;
2238
2269
  position: absolute;
@@ -2311,6 +2342,54 @@
2311
2342
  align-content: baseline;
2312
2343
  }
2313
2344
 
2345
+ .vjs-custom-big-mute.vjs-control{
2346
+ position: absolute;
2347
+ align-items: center;
2348
+ background: #fcb700;
2349
+ border: 0;
2350
+ display: flex;
2351
+ align-items: center;
2352
+ height: 44px;
2353
+ justify-content: center;
2354
+ padding: 0;
2355
+ width: 44px;
2356
+ z-index: 1;
2357
+ outline: none;
2358
+ text-shadow:none !important;
2359
+ cursor: pointer;
2360
+ }
2361
+ .video-js.vjs-fullscreen .vjs-custom-big-mute.vjs-control {
2362
+ display: flex;
2363
+ top: 50px;
2364
+ height: 50px;
2365
+ width: 50px;
2366
+ }
2367
+ .video-js.vjs-fullscreen .vjs-custom-big-mute.vjs-control >svg {
2368
+ height: 28px;
2369
+ width: 28px;
2370
+ }
2371
+ .vjs-custom-big-mute.vjs-control:hover{
2372
+ filter: none;
2373
+ }
2374
+
2375
+
2376
+ .vjs-custom-big-mute.vjs-control.tl{
2377
+ top: 0;
2378
+ left: 0;
2379
+ margin: 15px 0 0 15px;
2380
+ }
2381
+
2382
+ .vjs-custom-big-mute.vjs-control.hide{
2383
+ display: none !important;
2384
+
2385
+ }
2386
+
2387
+ .vjs-custom-big-mute.vjs-control > svg {
2388
+ color: #071d39;
2389
+ height: 22px;
2390
+ width: 22px;
2391
+ }
2392
+
2314
2393
 
2315
2394
 
2316
2395
  /* Watch in Vertical View Button */
@@ -2400,53 +2479,7 @@
2400
2479
  }
2401
2480
  }
2402
2481
 
2403
- .vjs-custom-big-mute.vjs-control{
2404
- position: absolute;
2405
- align-items: center;
2406
- background: #fcb700;
2407
- border: 0;
2408
- display: flex;
2409
- align-items: center;
2410
- height: 44px;
2411
- justify-content: center;
2412
- padding: 0;
2413
- width: 44px;
2414
- z-index: 1;
2415
- outline: none;
2416
- text-shadow:none !important;
2417
- cursor: pointer;
2418
- }
2419
- .video-js.vjs-fullscreen .vjs-custom-big-mute.vjs-control {
2420
- display: flex;
2421
- top: 50px;
2422
- height: 50px;
2423
- width: 50px;
2424
- }
2425
- .video-js.vjs-fullscreen .vjs-custom-big-mute.vjs-control >svg {
2426
- height: 28px;
2427
- width: 28px;
2428
- }
2429
- .vjs-custom-big-mute.vjs-control:hover{
2430
- filter: none;
2431
- }
2432
-
2433
2482
 
2434
- .vjs-custom-big-mute.vjs-control.tl{
2435
- top: 0;
2436
- left: 0;
2437
- margin: 15px 0 0 15px;
2438
- }
2439
-
2440
- .vjs-custom-big-mute.vjs-control.hide{
2441
- display: none !important;
2442
-
2443
- }
2444
-
2445
- .vjs-custom-big-mute.vjs-control > svg {
2446
- color: #071d39;
2447
- height: 22px;
2448
- width: 22px;
2449
- }
2450
2483
 
2451
2484
  /* nextep — up-next card (centered in player, scales with player size) */
2452
2485
  .video-js:has(.next-ep-preview),