@gcorevideo/player 2.22.24 → 2.22.26

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 (21) hide show
  1. package/assets/clappr-nerd-stats/clappr-nerd-stats.scss +11 -0
  2. package/assets/seek-time/seek-time.html +3 -2
  3. package/dist/core.js +1 -1
  4. package/dist/index.css +1448 -1441
  5. package/dist/index.js +147 -139
  6. package/dist/plugins/index.css +724 -724
  7. package/lib/plugins/clappr-nerd-stats/speedtest/Speedtest.d.ts.map +1 -1
  8. package/lib/plugins/clappr-nerd-stats/speedtest/Speedtest.js +1 -0
  9. package/lib/plugins/clappr-nerd-stats/speedtest/index.d.ts.map +1 -1
  10. package/lib/plugins/clappr-nerd-stats/speedtest/index.js +7 -1
  11. package/lib/plugins/seek-time/SeekTime.d.ts +14 -10
  12. package/lib/plugins/seek-time/SeekTime.d.ts.map +1 -1
  13. package/lib/plugins/seek-time/SeekTime.js +72 -69
  14. package/package.json +1 -1
  15. package/rollup.config.js +28 -28
  16. package/src/plugins/bottom-gear/__tests__/BottomGear.test.ts +0 -3
  17. package/src/plugins/clappr-nerd-stats/speedtest/Speedtest.ts +1 -0
  18. package/src/plugins/clappr-nerd-stats/speedtest/index.ts +8 -1
  19. package/src/plugins/seek-time/SeekTime.ts +156 -113
  20. package/src/plugins/subtitles/__tests__/ClosedCaptions.test.ts +1 -0
  21. package/tsconfig.tsbuildinfo +1 -1
package/dist/index.css CHANGED
@@ -122,1763 +122,1604 @@
122
122
  .gplayer-lite-btn::-moz-focus-inner {
123
123
  border: 0;
124
124
  padding: 0;
125
- }:root {
126
- --primary-background-color: #000;
127
- --secondary-background-color: #262626;
128
- --primary-text-color: #fff;
129
- --secondary-text-color: #fff4f2;
130
- --hover-text-color: #f9b090;
131
- --speedtest-red: #df564d;
132
- --speedtest-orange: #df934d;
133
- --speedtest-yellow: #dfd04d;
134
- --speedtest-light-green: #c2df4d;
135
- --speedtest-green: #73df4d;
136
- }
137
-
138
- .clappr-nerd-stats {
139
- cursor: default;
125
+ }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
126
+ order: 99;
127
+ height: 20px;
140
128
  }
141
- .clappr-nerd-stats .stats-box {
129
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
142
130
  position: absolute;
143
- display: inline-block;
131
+ right: 16px;
144
132
  bottom: 52px;
145
- right: 0;
146
- top: 0;
147
- left: 0;
148
- bottom: 0;
149
- padding: 0 10px 12px;
150
- margin: 0;
151
- line-height: 20px;
152
- font-size: 12px;
153
- font-weight: 500;
154
- background: var(--primary-background-color);
155
- color: #fff;
156
- z-index: 20000;
157
- overflow: auto;
158
- }
159
- .clappr-nerd-stats .stats-box-top {
160
- position: absolute;
161
- top: 0;
162
- left: 0;
133
+ width: 250px;
134
+ min-height: 48px;
163
135
  z-index: 9999;
164
- width: 100%;
165
- height: 32px;
166
- background: var(--primary-background-color);
167
- }
168
- .clappr-nerd-stats .stats-box-top .close-button {
169
- position: absolute;
170
- right: 12px;
171
- top: 10px;
172
- display: block;
173
- width: 12px;
174
- height: 12px;
175
- }
176
- .clappr-nerd-stats .stats-box-top .close-button svg path {
177
- fill: var(--primary-text-color);
136
+ border-radius: 4px;
178
137
  }
179
- .clappr-nerd-stats .stats-box-top .close-button:hover svg path {
180
- fill: var(--hover-text-color);
138
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
139
+ padding: 8px 0;
181
140
  }
182
- .clappr-nerd-stats .stats-box-main {
183
- overflow: hidden;
184
- margin-top: 44px;
141
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
142
+ margin: 0;
143
+ text-align: left;
144
+ line-height: 22px;
145
+ padding: 5px 14px;
146
+ width: 250px;
147
+ font-size: 12px;
185
148
  display: flex;
186
- flex-wrap: wrap;
149
+ align-items: center;
150
+ justify-content: flex-start;
151
+ gap: 8px;
187
152
  }
188
- .clappr-nerd-stats .stats-box-main ul {
189
- flex: 0 1 1fr;
190
- min-width: 200px;
153
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option_icon {
154
+ flex: 24px 0 0;
155
+ height: 24px;
191
156
  }
192
- .clappr-nerd-stats .stats-box.wide {
193
- width: 820px;
157
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option_icon.hidden {
158
+ visibility: hidden;
159
+ display: inline-block;
194
160
  }
195
- .clappr-nerd-stats .stats-box ul, .clappr-nerd-stats .stats-box li {
196
- list-style-type: none;
161
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option_label {
162
+ flex: 0 1 100%;
197
163
  }
198
- .clappr-nerd-stats .stats-box ul div, .clappr-nerd-stats .stats-box li div {
199
- padding-left: 2px;
200
- padding-right: 2px;
201
- background: var(--primary-background-color);
202
- gap: 10px;
164
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option_arrow-right-icon {
165
+ flex: 0 0 14px;
166
+ height: 24px;
203
167
  }
204
- .clappr-nerd-stats .stats-box ul {
205
- padding: 5px;
206
- width: 200px;
168
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option_value {
169
+ flex: 1 0 auto;
170
+ }*, :focus, :visited {
171
+ outline: none !important;
207
172
  }
208
- .clappr-nerd-stats .stats-box ul li {
209
- position: relative;
210
- padding: 0 5px;
173
+
174
+ .gear-wrapper .go-back {
175
+ font-weight: 600;
176
+ font-size: 14px;
177
+ line-height: 20px;
178
+ width: 100%;
211
179
  text-align: left;
180
+ padding: 12px;
212
181
  }
213
- .clappr-nerd-stats .stats-box ul li.canvas-wrapper {
214
- padding: 0;
182
+ .gear-wrapper .go-back .arrow-left-icon {
183
+ float: left;
184
+ padding-top: 2px;
185
+ padding-right: 2px;
215
186
  }
216
- .clappr-nerd-stats .stats-box ul li.canvas-wrapper canvas {
217
- width: 100%;
187
+ .gear-wrapper .go-back .arrow-left-icon svg {
188
+ height: 16px;
218
189
  }
219
- .clappr-nerd-stats .stats-box ul li:nth-child(2n) {
220
- background: var(--secondary-background-color);
190
+ .gear-wrapper ul.gear-sub-menu {
191
+ width: 100%;
192
+ list-style-type: none;
193
+ min-width: 60px;
194
+ border-top: 2px solid rgb(36, 36, 36);
221
195
  }
222
- .clappr-nerd-stats .stats-box ul li:nth-child(2n) div {
223
- background: var(--secondary-background-color);
196
+ .gear-wrapper ul.gear-sub-menu li {
197
+ font-size: 12px;
198
+ text-align: left;
224
199
  }
225
- .clappr-nerd-stats .stats-box ul li.title {
226
- text-align: center;
227
- font-weight: bold;
228
- padding-bottom: 4px;
229
- font-size: 14px;
200
+ .gear-wrapper ul.gear-sub-menu li[data-title] {
201
+ background-color: #c3c2c2;
202
+ padding: 5px;
230
203
  }
231
- .clappr-nerd-stats .stats-box ul li div {
232
- margin: 0;
233
- position: absolute;
234
- right: 0;
235
- top: 0;
204
+ .gear-wrapper ul.gear-sub-menu li a {
205
+ display: block;
206
+ text-decoration: none;
207
+ height: 32px;
208
+ padding: 5px 10px;
209
+ line-height: 22px;
210
+ color: #fffffe;
236
211
  }
237
-
238
- .desktop .clappr-nerd-stats .stats-box.narrow {
239
- width: 250px;
212
+ .gear-wrapper ul.gear-sub-menu li a:hover {
213
+ color: white;
214
+ background-color: rgba(0, 0, 0, 0.4);
240
215
  }
241
- .desktop .clappr-nerd-stats .stats-box.narrow ul {
242
- width: 100%;
216
+ .gear-wrapper ul.gear-sub-menu li a:hover a {
217
+ color: white;
218
+ text-decoration: none;
243
219
  }
244
- .desktop .clappr-nerd-stats .stats-box.narrow .speedtest-summary {
245
- padding: 0 5px;
246
- height: auto;
220
+ .gear-wrapper ul.gear-sub-menu li a .check-icon {
221
+ width: 30px;
222
+ height: 20px;
223
+ float: left;
224
+ display: block;
247
225
  }
248
- .desktop .clappr-nerd-stats .stats-box.narrow .speedtest-summary-block {
249
- width: 100%;
250
- flex-direction: column;
226
+ .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
227
+ display: none;
251
228
  }
252
- .desktop .clappr-nerd-stats .stats-box.narrow .speedtest-summary-block .speedtest-summary-subblock {
229
+ .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
230
+ display: inline;
231
+ }.big-mute-icon-wrapper[data-big-mute] {
232
+ position: absolute;
233
+ z-index: 9998;
234
+ background-color: transparent;
235
+ display: flex;
236
+ justify-content: center;
253
237
  width: 100%;
238
+ height: calc(100% - 50px);
239
+ margin: 0 auto;
240
+ opacity: 0.75;
241
+ transition: opacity 0.1s ease;
242
+ pointer-events: auto;
254
243
  }
255
- .desktop .clappr-nerd-stats .stats-box.narrow .speedtest-summary-block .speedtest-summary-subblock-content {
256
- width: 100%;
244
+ .big-mute-icon-wrapper[data-big-mute].hide {
245
+ display: none;
257
246
  }
258
- .desktop .clappr-nerd-stats .stats-box.narrow .speedtest-summary-header {
259
- padding-top: 12px;
260
- height: 38px;
261
- text-align: center;
247
+ .big-mute-icon-wrapper[data-big-mute]:hover {
248
+ cursor: pointer;
262
249
  }
263
- .desktop .clappr-nerd-stats .stats-box.narrow .speedtest-quality-header {
264
- text-align: center;
250
+
251
+ .big-mute-icon[data-big-mute-icon] {
252
+ display: flex;
253
+ align-items: center;
254
+ justify-content: center;
255
+ align-self: center;
256
+ width: 120px;
257
+ height: 120px;
258
+ border: 2px solid white;
259
+ border-radius: 50%;
260
+ filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
261
+ filter: alpha(opacity=60);
262
+ opacity: 1;
263
+ box-shadow: 0 0 1px 0 white;
264
+ background: rgba(240, 243, 247, 0.9411764706);
265
+ z-index: 10000;
265
266
  }
266
- .desktop .clappr-nerd-stats .stats-box.narrow .speedtest-footer {
267
+ .big-mute-icon[data-big-mute-icon] svg {
268
+ margin-left: 5px;
269
+ width: 80px;
267
270
  height: 80px;
268
271
  }
269
- .desktop .clappr-nerd-stats .stats-box.narrow .speedtest-footer-about-link {
270
- bottom: 0;
271
- left: 0;
272
+ .big-mute-icon[data-big-mute-icon] svg path {
273
+ fill: #1f1e1e !important;
272
274
  }
273
- .desktop .clappr-nerd-stats .stats-box.narrow .speedtest-footer .speedtest-footer-refresh {
274
- inset: 50% auto auto 50%;
275
- transform: translate(-50%, -50%);
275
+ .big-mute-icon[data-big-mute-icon]:hover {
276
+ background: rgba(240, 243, 247, 0.8784313725);
276
277
  }
277
-
278
- .speed-test-button {
279
- margin: 10px 0 0;
280
- color: #000;
278
+ .big-mute-icon[data-big-mute-icon]:hover svg path {
279
+ fill: #151515 !important;
280
+ }*,
281
+ :focus,
282
+ :visited {
283
+ outline: none !important;
281
284
  }
282
285
 
283
- .speed-test {
284
- position: absolute;
285
- top: 0;
286
- left: 0;
287
- width: 100%;
288
- height: 100%;
289
- z-index: 9999;
286
+ .media-control-audiotracks {
287
+ position: relative;
290
288
  }
291
- .speed-test .speed-test-header {
292
- width: 100%;
293
- height: 32px;
294
- }
295
- .speed-test .speed-test-header .close-speed-test {
296
- float: right;
297
- margin-right: 5px;
298
- line-height: 32px;
299
- cursor: pointer;
300
- color: var(--primary-text-color);
301
- }
302
- .speed-test .speed-test-header .close-speed-test:hover {
303
- color: var(--hover-text-color);
304
- }
305
-
306
- .settings-button {
307
- float: right;
308
- margin: 0 12px 0 0;
309
- height: 40px;
310
- width: 24px;
289
+ .media-control-audiotracks button {
290
+ background-color: transparent;
291
+ color: #fff;
292
+ -webkit-font-smoothing: antialiased;
311
293
  border: none;
294
+ cursor: pointer;
295
+ display: flex;
296
+ align-items: center;
312
297
  padding: 0;
313
298
  }
314
-
315
- .speedtest-summary {
316
- width: 100%;
317
- border-top: 1px solid var(--secondary-background-color) !important;
318
- border-bottom: 1px solid var(--secondary-background-color) !important;
319
- display: flex !important;
320
- flex-direction: column;
321
- align-items: stretch;
322
- justify-content: space-between;
323
- }
324
- .speedtest-summary .speedtest-summary-header {
325
- width: 100%;
326
- padding-top: 4px;
327
- text-align: left;
328
- height: 32px;
329
- font-size: 14px;
330
- font-weight: 500;
331
- line-height: 20px;
299
+ .media-control-audiotracks button .audio-text {
300
+ text-overflow: ellipsis;
301
+ overflow: hidden;
302
+ white-space: nowrap;
303
+ max-width: 100px;
304
+ background-color: transparent;
305
+ -webkit-font-smoothing: antialiased;
306
+ border: none;
307
+ cursor: pointer;
332
308
  }
333
- .speedtest-summary .speedtest-summary-block {
334
- position: relative;
335
- display: flex;
336
- flex-direction: row;
337
- width: 100%;
309
+ .media-control-audiotracks button:hover {
310
+ color: white;
338
311
  }
339
- .speedtest-summary .speedtest-summary-block .speedtest-summary-subblock {
340
- width: 50%;
341
- margin-top: 4px;
342
- margin-bottom: 12px;
312
+ .media-control-audiotracks button.changing {
313
+ animation: pulse 0.5s infinite alternate;
343
314
  }
344
- .speedtest-summary .speedtest-summary-block .speedtest-summary-subblock-content {
345
- padding: 2px;
346
- width: 248px;
347
- max-width: 100%;
315
+ .media-control-audiotracks button span.audio-arrow {
316
+ width: 9px;
317
+ height: 6px;
318
+ margin-left: 5px;
348
319
  }
349
-
350
- .speedtest-quality {
351
- width: 100%;
352
- height: 36px;
353
- display: flex !important;
354
- flex-direction: column !important;
355
- justify-content: space-between !important;
320
+ .media-control-audiotracks .menu {
321
+ max-width: 114px;
322
+ list-style-type: none;
323
+ position: absolute;
324
+ background-color: rgba(74, 74, 74, 0.6);
325
+ border: none;
326
+ min-width: 60px;
327
+ border-radius: 4px;
328
+ bottom: 40px;
329
+ right: -2px;
356
330
  }
357
- .speedtest-quality .speedtest-quality-header {
358
- font-size: 12px;
359
- height: 20px;
360
- border-left: 2px solid var(--secondary-background-color) !important;
361
- background-color: var(--secondary-background-color);
362
- text-align: left;
331
+ .media-control-audiotracks .menu.hidden {
332
+ display: none;
363
333
  }
364
- .speedtest-quality-content {
365
- width: 100%;
366
- margin-top: 8px;
367
- height: 8px;
368
- display: flex !important;
369
- flex-direction: row !important;
370
- align-items: stretch !important;
371
- justify-content: space-between;
334
+ .media-control-audiotracks li {
335
+ font-size: var(--font-size-media-controls-dropdown);
336
+ text-align: right;
337
+ height: 30px;
372
338
  }
373
- .speedtest-quality-content-item {
374
- width: 18.8%;
375
- background-color: #fff;
339
+ .media-control-audiotracks li[data-title] {
340
+ background-color: #c3c2c2;
341
+ padding: 5px;
376
342
  }
377
- .speedtest-quality-content-item.speedtest-quality-value-1 {
378
- background-color: var(--speedtest-red);
343
+ .media-control-audiotracks li a {
344
+ display: block;
345
+ text-decoration: none;
346
+ text-overflow: ellipsis;
347
+ overflow: hidden;
348
+ white-space: nowrap;
349
+ height: 30px;
350
+ padding: 5px 10px;
351
+ color: #fffffe;
379
352
  }
380
- .speedtest-quality-content-item.speedtest-quality-value-2 {
381
- background-color: var(--speedtest-orange);
353
+ .media-control-audiotracks li a:hover {
354
+ text-decoration: none;
355
+ background-color: rgba(0, 0, 0, 0.4);
356
+ color: white;
382
357
  }
383
- .speedtest-quality-content-item.speedtest-quality-value-3 {
384
- background-color: var(--speedtest-yellow);
358
+ .media-control-audiotracks li.current a {
359
+ color: #f00;
385
360
  }
386
- .speedtest-quality-content-item.speedtest-quality-value-4 {
387
- background-color: var(--speedtest-light-green);
361
+ .media-control-audiotracks li:first-child a {
362
+ border-bottom-left-radius: 4px;
363
+ border-bottom-right-radius: 4px;
388
364
  }
389
- .speedtest-quality-content-item.speedtest-quality-value-5 {
390
- background-color: var(--speedtest-green);
365
+ .media-control-audiotracks li:last-child a {
366
+ border-top-left-radius: 4px;
367
+ border-top-right-radius: 4px;
391
368
  }
392
369
 
393
- .speedtest-footer {
394
- position: relative;
395
- float: left;
396
- width: 100%;
397
- height: 30px;
398
- line-height: 16px;
399
- }
400
- .speedtest-footer-about-link {
370
+ @keyframes pulse {
371
+ 0% {
372
+ color: #fff;
373
+ }
374
+ 50% {
375
+ color: #ff0101;
376
+ }
377
+ 100% {
378
+ color: #B80000;
379
+ }
380
+ }.context-menu {
381
+ z-index: 999;
401
382
  position: absolute;
402
- bottom: 0;
383
+ top: 0;
403
384
  left: 0;
404
- color: var(--secondary-text-color);
405
- text-decoration: underline !important;
385
+ text-align: center;
406
386
  }
407
- .speedtest-footer-about-link:hover {
408
- color: var(--hover-text-color);
387
+ .context-menu .context-menu-list {
388
+ font-family: "Proxima Nova", sans-serif;
389
+ font-size: 12px;
390
+ line-height: 12px;
391
+ list-style-type: none;
392
+ text-align: left;
393
+ padding: 5px;
394
+ margin-left: auto;
395
+ margin-right: auto;
396
+ background-color: rgba(0, 0, 0, 0.75);
397
+ border: 1px solid #666;
398
+ border-radius: 4px;
409
399
  }
410
- .speedtest-footer .speedtest-footer-refresh {
411
- position: absolute;
412
- bottom: 0;
413
- right: 0;
414
- color: var(--secondary-text-color);
415
- font-size: 14px;
416
- font-weight: 400;
417
- line-height: 16px;
418
- height: 16px;
400
+ .context-menu .context-menu-list-item button {
401
+ border: none;
402
+ background-color: transparent;
403
+ padding: 0;
404
+ color: white;
419
405
  display: flex;
406
+ gap: 8px;
420
407
  align-items: center;
421
- gap: 4px;
422
- }
423
- .speedtest-footer .speedtest-footer-refresh svg path {
424
- fill: var(--secondary-text-color);
425
- }
426
- .speedtest-footer .speedtest-footer-refresh:hover {
427
- color: var(--hover-text-color);
408
+ justify-content: center;
409
+ cursor: pointer;
410
+ padding: 5px;
411
+ width: 100%;
428
412
  }
429
- .speedtest-footer .speedtest-footer-refresh:hover svg path {
430
- fill: var(--hover-text-color);
413
+ .context-menu .context-menu-list-item_icon {
414
+ width: 20px;
415
+ height: 20px;
416
+ }:root {
417
+ --primary-background-color: #000;
418
+ --secondary-background-color: #262626;
419
+ --primary-text-color: #fff;
420
+ --secondary-text-color: #fff4f2;
421
+ --hover-text-color: #f9b090;
422
+ --speedtest-red: #df564d;
423
+ --speedtest-orange: #df934d;
424
+ --speedtest-yellow: #dfd04d;
425
+ --speedtest-light-green: #c2df4d;
426
+ --speedtest-green: #73df4d;
431
427
  }
432
428
 
433
- .mobile .clappr-nerd-stats .stats-box {
434
- position: fixed;
435
- height: auto;
436
- width: auto;
437
- inset: 0;
438
- min-width: 100vw;
439
- padding-bottom: 4px;
440
- padding-left: 4px;
441
- padding-right: 4px;
442
- }
443
- .mobile .clappr-nerd-stats .stats-box-top {
444
- position: fixed;
445
- }
446
- .mobile .clappr-nerd-stats .stats-box-main ul {
447
- flex: 0 1 50%;
429
+ .clappr-nerd-stats {
430
+ cursor: default;
448
431
  }
449
-
450
- @media only screen and (orientation: portrait) {
451
- .mobile .speedtest-summary {
452
- padding: 0 5px;
453
- height: auto;
454
- }
455
- .mobile .speedtest-summary-block {
456
- width: 100%;
457
- flex-direction: column;
458
- }
459
- .mobile .speedtest-summary-block .speedtest-summary-subblock {
460
- width: 100%;
461
- }
462
- .mobile .speedtest-summary-block .speedtest-summary-subblock-content {
463
- width: 100%;
464
- }
465
- .mobile .speedtest-summary-header {
466
- padding-top: 12px;
467
- height: 38px;
468
- text-align: center;
469
- }
470
- .mobile .speedtest-quality-header {
471
- text-align: center;
472
- }
473
- .mobile .speedtest-footer .speedtest-footer-refresh {
474
- inset: 50% auto auto 50%;
475
- transform: translate(-50%, -50%);
476
- }
477
- }
478
- @media only screen and (orientation: landscape) {
479
- .mobile .clappr-nerd-stats .stats-box-main ul {
480
- flex-basis: 1fr;
481
- }
482
- }.dvr-controls[data-dvr] {
432
+ .clappr-nerd-stats .stats-box {
433
+ position: absolute;
483
434
  display: inline-block;
484
- color: var(--player-dvr-color);
485
- line-height: 32px;
486
- font-size: 10px;
487
- font-weight: bold;
488
- margin-left: 6px;
489
- height: 40px;
490
- line-height: 40px;
491
- margin-left: 0;
492
- }
493
- .dvr-controls[data-dvr] .live-info {
494
- cursor: default;
495
- text-transform: uppercase;
435
+ bottom: 52px;
436
+ right: 0;
437
+ top: 0;
438
+ left: 0;
439
+ bottom: 0;
440
+ padding: 0 10px 12px;
441
+ margin: 0;
442
+ line-height: 20px;
443
+ font-size: 12px;
444
+ font-weight: 500;
445
+ background: var(--primary-background-color);
446
+ color: #fff;
447
+ z-index: 20000;
448
+ overflow: auto;
449
+ max-width: 100%;
496
450
  }
497
- .dvr-controls[data-dvr] .live-info:before {
498
- content: "";
499
- display: inline-block;
500
- position: relative;
501
- width: 7px;
502
- height: 7px;
503
- border-radius: 3.5px;
504
- margin-right: 3.5px;
505
- background-color: var(--player-live-color);
451
+ .clappr-nerd-stats .stats-box-top {
452
+ position: absolute;
453
+ top: 0;
454
+ left: 0;
455
+ z-index: 9999;
456
+ width: 100%;
457
+ height: 32px;
458
+ background: var(--primary-background-color);
506
459
  }
507
- .dvr-controls[data-dvr] .live-info.disabled {
508
- opacity: 0.3;
460
+ .clappr-nerd-stats .stats-box-top .close-button {
461
+ position: absolute;
462
+ right: 12px;
463
+ top: 10px;
464
+ display: block;
465
+ width: 12px;
466
+ height: 12px;
509
467
  }
510
- .dvr-controls[data-dvr] .live-info.disabled:before {
511
- background-color: var(--player-dvr-color);
468
+ .clappr-nerd-stats .stats-box-top .close-button svg path {
469
+ fill: var(--primary-text-color);
512
470
  }
513
- .dvr-controls[data-dvr] .live-button {
514
- cursor: pointer;
515
- outline: none;
516
- display: none;
517
- border: 0;
518
- color: var(--player-dvr-color);
519
- background-color: transparent;
520
- height: 32px;
521
- padding: 0;
522
- opacity: 0.7;
523
- text-transform: uppercase;
524
- transition: all 0.1s ease;
471
+ .clappr-nerd-stats .stats-box-top .close-button:hover svg path {
472
+ fill: var(--hover-text-color);
525
473
  }
526
- .dvr-controls[data-dvr] .live-button:before {
527
- content: "";
528
- display: inline-block;
529
- position: relative;
530
- width: 7px;
531
- height: 7px;
532
- border-radius: 3.5px;
533
- margin-right: 3.5px;
534
- background-color: var(--player-dvr-color);
474
+ .clappr-nerd-stats .stats-box-main {
475
+ overflow: hidden;
476
+ margin-top: 44px;
477
+ display: flex;
478
+ flex-wrap: wrap;
535
479
  }
536
- .dvr-controls[data-dvr] .live-button:hover {
537
- opacity: 1;
538
- text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
480
+ .clappr-nerd-stats .stats-box-main ul {
481
+ flex: 0 1 1fr;
482
+ min-width: 200px;
539
483
  }
540
- .dvr-controls[data-dvr] .live-info {
541
- font-size: 14px;
542
- letter-spacing: 0.8px;
543
- font-weight: 500;
544
- color: #fffffe;
545
- margin-left: 21px;
484
+ .clappr-nerd-stats .stats-box.wide {
485
+ width: 820px;
546
486
  }
547
- .dvr-controls[data-dvr] .live-info::before {
548
- width: 10px;
549
- height: 10px;
550
- border-radius: 50%;
551
- margin-right: 8px;
552
- background-color: #ed4f4a;
487
+ .clappr-nerd-stats .stats-box ul, .clappr-nerd-stats .stats-box li {
488
+ list-style-type: none;
553
489
  }
554
- .dvr-controls[data-dvr] .live-button {
555
- height: 40px;
556
- opacity: 1;
557
- font-size: 14px;
558
- letter-spacing: 0.8px;
559
- font-weight: 500;
560
- margin-left: 20px;
490
+ .clappr-nerd-stats .stats-box ul div, .clappr-nerd-stats .stats-box li div {
491
+ padding-left: 2px;
492
+ padding-right: 2px;
493
+ background: var(--primary-background-color);
494
+ gap: 10px;
561
495
  }
562
- .dvr-controls[data-dvr] .live-button::before {
563
- width: 10px;
564
- height: 10px;
565
- border-radius: 50%;
566
- margin-right: 8px;
567
- background-color: #cacaca;
568
- }.context-menu {
569
- z-index: 999;
570
- position: absolute;
571
- top: 0;
572
- left: 0;
573
- text-align: center;
496
+ .clappr-nerd-stats .stats-box ul {
497
+ padding: 5px;
498
+ width: 200px;
499
+ flex: 0 1 50%;
574
500
  }
575
- .context-menu .context-menu-list {
576
- font-family: "Proxima Nova", sans-serif;
577
- font-size: 12px;
578
- line-height: 12px;
579
- list-style-type: none;
501
+ .clappr-nerd-stats .stats-box ul li {
502
+ position: relative;
503
+ padding: 0 5px;
580
504
  text-align: left;
581
- padding: 5px;
582
- margin-left: auto;
583
- margin-right: auto;
584
- background-color: rgba(0, 0, 0, 0.75);
585
- border: 1px solid #666;
586
- border-radius: 4px;
587
505
  }
588
- .context-menu .context-menu-list-item button {
589
- border: none;
590
- background-color: transparent;
506
+ .clappr-nerd-stats .stats-box ul li.canvas-wrapper {
591
507
  padding: 0;
592
- color: white;
593
- display: flex;
594
- gap: 8px;
595
- align-items: center;
596
- justify-content: center;
597
- cursor: pointer;
598
- padding: 5px;
508
+ }
509
+ .clappr-nerd-stats .stats-box ul li.canvas-wrapper canvas {
599
510
  width: 100%;
600
511
  }
601
- .context-menu .context-menu-list-item_icon {
602
- width: 20px;
603
- height: 20px;
604
- }*, :focus, :visited {
605
- outline: none !important;
512
+ .clappr-nerd-stats .stats-box ul li:nth-child(2n) {
513
+ background: var(--secondary-background-color);
606
514
  }
607
-
608
- .multicamera[data-multicamera] {
609
- float: right;
610
- margin-top: 4px;
611
- position: relative;
612
- margin-right: 20px;
613
- width: 20px;
515
+ .clappr-nerd-stats .stats-box ul li:nth-child(2n) div {
516
+ background: var(--secondary-background-color);
614
517
  }
615
- .multicamera[data-multicamera] button {
616
- background-color: transparent;
617
- color: #fff;
618
- font-family: Roboto, "Open Sans", Arial, sans-serif;
619
- -webkit-font-smoothing: antialiased;
620
- border: none;
518
+ .clappr-nerd-stats .stats-box ul li.title {
519
+ text-align: center;
520
+ font-weight: bold;
521
+ padding-bottom: 4px;
621
522
  font-size: 14px;
622
- padding: 0;
623
523
  }
624
- .multicamera[data-multicamera] button svg {
625
- height: 20px;
626
- position: relative;
627
- margin-top: 6px;
524
+ .clappr-nerd-stats .stats-box ul li div {
525
+ margin: 0;
526
+ position: absolute;
527
+ right: 0;
528
+ top: 0;
628
529
  }
629
- .multicamera[data-multicamera] button:hover {
630
- color: #c9c9c9;
530
+
531
+ .desktop .clappr-nerd-stats .stats-box.narrow {
532
+ width: 250px;
631
533
  }
632
- .multicamera[data-multicamera] button.changing {
633
- animation: pulse 0.5s infinite alternate;
534
+ .desktop .clappr-nerd-stats .stats-box.narrow ul {
535
+ width: 100%;
634
536
  }
635
- .multicamera[data-multicamera] button span.quality-arrow {
636
- width: 9px;
637
- height: 6px;
638
- margin-top: 11px;
639
- margin-left: 5px;
537
+ .desktop .clappr-nerd-stats .stats-box.narrow .speedtest-summary {
538
+ padding: 0 5px;
539
+ height: auto;
640
540
  }
641
- .multicamera[data-multicamera] > ul {
642
- padding: 6px 0;
643
- right: -24px;
644
- width: 245px;
645
- list-style-type: none;
646
- position: absolute;
647
- bottom: 48px;
648
- border-radius: 4px;
649
- display: none;
650
- background-color: rgba(74, 74, 74, 0.9);
541
+ .desktop .clappr-nerd-stats .stats-box.narrow .speedtest-summary-block {
542
+ width: 100%;
543
+ flex-direction: column;
651
544
  }
652
- .multicamera[data-multicamera] > ul::after {
653
- content: "";
654
- position: absolute;
655
- top: 100%;
656
- left: 85%;
657
- margin-left: -10px;
658
- width: 0;
659
- height: 0;
660
- border-top: 10px solid rgba(74, 74, 74, 0.9);
661
- border-right: 10px solid transparent;
662
- border-left: 10px solid transparent;
663
- }
664
- .multicamera[data-multicamera] li {
665
- font-size: 10px;
666
- cursor: pointer;
667
- }
668
- .multicamera[data-multicamera] li .multicamera-item {
669
- display: flex;
670
- padding: 10px 0;
671
- justify-content: center;
672
- position: relative;
673
- }
674
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
675
- pointer-events: none;
676
- }
677
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
678
- opacity: 0.5;
679
- }
680
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
681
- opacity: 0.5;
682
- }
683
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
684
- background-color: rgba(0, 0, 0, 0);
545
+ .desktop .clappr-nerd-stats .stats-box.narrow .speedtest-summary-block .speedtest-summary-subblock {
546
+ width: 100%;
685
547
  }
686
- .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
687
- background-color: rgba(0, 0, 0, 0.3);
548
+ .desktop .clappr-nerd-stats .stats-box.narrow .speedtest-summary-block .speedtest-summary-subblock-content {
549
+ width: 100%;
688
550
  }
689
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
690
- width: 80px;
691
- height: 60px;
551
+ .desktop .clappr-nerd-stats .stats-box.narrow .speedtest-summary-header {
552
+ padding-top: 12px;
553
+ height: 38px;
554
+ text-align: center;
692
555
  }
693
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
694
- width: 80px;
695
- height: 60px;
556
+ .desktop .clappr-nerd-stats .stats-box.narrow .speedtest-quality-header {
557
+ text-align: center;
696
558
  }
697
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
698
- width: 120px;
699
- text-align: left;
700
- margin-left: 15px;
559
+ .desktop .clappr-nerd-stats .stats-box.narrow .speedtest-footer {
560
+ height: 80px;
701
561
  }
702
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title, .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
703
- width: 120px;
704
- height: 20px;
705
- font-family: Roboto, "Open Sans", Arial, sans-serif;
706
- font-size: 14px;
707
- font-weight: normal;
708
- font-style: normal;
709
- font-stretch: normal;
710
- line-height: 1.43;
711
- letter-spacing: normal;
712
- text-align: left;
713
- color: #fff;
714
- text-overflow: ellipsis;
715
- overflow: hidden;
562
+ .desktop .clappr-nerd-stats .stats-box.narrow .speedtest-footer-about-link {
563
+ bottom: 0;
564
+ left: 0;
716
565
  }
717
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
718
- opacity: 0.6;
566
+ .desktop .clappr-nerd-stats .stats-box.narrow .speedtest-footer .speedtest-footer-refresh {
567
+ inset: 50% auto auto 50%;
568
+ transform: translate(-50%, -50%);
719
569
  }
720
- .multicamera[data-multicamera] li[data-title] {
721
- background-color: #c3c2c2;
722
- padding: 5px;
570
+
571
+ .speed-test-button {
572
+ margin: 10px 0 0;
573
+ color: #000;
723
574
  }
724
- .multicamera[data-multicamera] li a {
725
- color: #444;
726
- padding: 2px 10px;
727
- display: block;
728
- text-decoration: none;
575
+
576
+ .speed-test {
577
+ position: absolute;
578
+ top: 0;
579
+ left: 0;
580
+ width: 100%;
581
+ height: 100%;
582
+ z-index: 9999;
729
583
  }
730
- .multicamera[data-multicamera] li a:hover {
731
- background-color: #555;
732
- color: white;
584
+ .speed-test .speed-test-header {
585
+ width: 100%;
586
+ height: 32px;
733
587
  }
734
- .multicamera[data-multicamera] li a:hover a {
735
- color: white;
736
- text-decoration: none;
588
+ .speed-test .speed-test-header .close-speed-test {
589
+ float: right;
590
+ margin-right: 5px;
591
+ line-height: 32px;
592
+ cursor: pointer;
593
+ color: var(--primary-text-color);
737
594
  }
738
- .multicamera[data-multicamera] li.current a {
739
- color: #f00;
595
+ .speed-test .speed-test-header .close-speed-test:hover {
596
+ color: var(--hover-text-color);
740
597
  }
741
598
 
742
- @keyframes pulse {
743
- 0% {
744
- color: #fff;
745
- }
746
- 50% {
747
- color: #ff0101;
748
- }
749
- 100% {
750
- color: #B80000;
751
- }
752
- }*, :focus, :visited {
753
- outline: none !important;
599
+ .settings-button {
600
+ float: right;
601
+ margin: 0 12px 0 0;
602
+ height: 40px;
603
+ width: 24px;
604
+ border: none;
605
+ padding: 0;
754
606
  }
755
607
 
756
- .gear-wrapper .go-back {
757
- font-weight: 600;
608
+ .speedtest-summary {
609
+ width: 100%;
610
+ border-top: 1px solid var(--secondary-background-color) !important;
611
+ border-bottom: 1px solid var(--secondary-background-color) !important;
612
+ display: flex !important;
613
+ flex-direction: column;
614
+ align-items: stretch;
615
+ justify-content: space-between;
616
+ }
617
+ .speedtest-summary .speedtest-summary-header {
618
+ width: 100%;
619
+ padding-top: 4px;
620
+ text-align: left;
621
+ height: 32px;
758
622
  font-size: 14px;
623
+ font-weight: 500;
759
624
  line-height: 20px;
625
+ }
626
+ .speedtest-summary .speedtest-summary-block {
627
+ position: relative;
628
+ display: flex;
629
+ flex-direction: row;
760
630
  width: 100%;
761
- text-align: left;
762
- padding: 12px;
763
631
  }
764
- .gear-wrapper .go-back .arrow-left-icon {
765
- float: left;
766
- padding-top: 2px;
767
- padding-right: 2px;
632
+ .speedtest-summary .speedtest-summary-block .speedtest-summary-subblock {
633
+ width: 50%;
634
+ margin-top: 4px;
635
+ margin-bottom: 12px;
768
636
  }
769
- .gear-wrapper .go-back .arrow-left-icon svg {
770
- height: 16px;
637
+ .speedtest-summary .speedtest-summary-block .speedtest-summary-subblock-content {
638
+ padding: 2px;
639
+ width: 248px;
640
+ max-width: 100%;
771
641
  }
772
- .gear-wrapper ul.gear-sub-menu {
642
+
643
+ .speedtest-quality {
773
644
  width: 100%;
774
- list-style-type: none;
775
- min-width: 60px;
776
- border-top: 2px solid rgb(36, 36, 36);
645
+ height: 36px;
646
+ display: flex !important;
647
+ flex-direction: column !important;
648
+ justify-content: space-between !important;
777
649
  }
778
- .gear-wrapper ul.gear-sub-menu li {
650
+ .speedtest-quality .speedtest-quality-header {
779
651
  font-size: 12px;
652
+ height: 20px;
653
+ border-left: 2px solid var(--secondary-background-color) !important;
654
+ background-color: var(--secondary-background-color);
780
655
  text-align: left;
781
656
  }
782
- .gear-wrapper ul.gear-sub-menu li[data-title] {
783
- background-color: #c3c2c2;
784
- padding: 5px;
657
+ .speedtest-quality-content {
658
+ width: 100%;
659
+ margin-top: 8px;
660
+ height: 8px;
661
+ display: flex !important;
662
+ flex-direction: row !important;
663
+ align-items: stretch !important;
664
+ justify-content: space-between;
785
665
  }
786
- .gear-wrapper ul.gear-sub-menu li a {
787
- display: block;
788
- text-decoration: none;
789
- height: 32px;
790
- padding: 5px 10px;
791
- line-height: 22px;
792
- color: #fffffe;
666
+ .speedtest-quality-content-item {
667
+ width: 18.8%;
668
+ background-color: #fff;
793
669
  }
794
- .gear-wrapper ul.gear-sub-menu li a:hover {
795
- color: white;
796
- background-color: rgba(0, 0, 0, 0.4);
670
+ .speedtest-quality-content-item.speedtest-quality-value-1 {
671
+ background-color: var(--speedtest-red);
797
672
  }
798
- .gear-wrapper ul.gear-sub-menu li a:hover a {
799
- color: white;
800
- text-decoration: none;
673
+ .speedtest-quality-content-item.speedtest-quality-value-2 {
674
+ background-color: var(--speedtest-orange);
801
675
  }
802
- .gear-wrapper ul.gear-sub-menu li a .check-icon {
803
- width: 30px;
804
- height: 20px;
805
- float: left;
806
- display: block;
676
+ .speedtest-quality-content-item.speedtest-quality-value-3 {
677
+ background-color: var(--speedtest-yellow);
807
678
  }
808
- .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
809
- display: none;
679
+ .speedtest-quality-content-item.speedtest-quality-value-4 {
680
+ background-color: var(--speedtest-light-green);
810
681
  }
811
- .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
812
- display: inline;
813
- }@charset "UTF-8";
814
- .media-control-clips {
815
- display: flex;
816
- gap: 6px;
682
+ .speedtest-quality-content-item.speedtest-quality-value-5 {
683
+ background-color: var(--speedtest-green);
817
684
  }
818
- .media-control-clips .media-clip-text {
819
- text-overflow: ellipsis;
820
- white-space: nowrap;
821
- overflow: hidden;
822
- display: inline-block;
823
- text-overflow: ellipsis;
824
- color: white;
825
- cursor: default;
826
- line-height: var(--bottom-panel);
685
+
686
+ .speedtest-footer {
827
687
  position: relative;
688
+ float: left;
689
+ width: 100%;
690
+ height: 30px;
691
+ line-height: 16px;
828
692
  }
829
- .media-control-clips .media-clip-text::before {
830
- content: "•";
831
- padding-right: 6px;
832
- }
833
- .media-control-clips .media-clip-text {
834
- max-width: 100px;
835
- }.quality-levels li.disabled {
836
- opacity: 0.5;
837
- pointer-events: none;
838
- }
839
- .quality-levels li.current {
840
- background-color: #000;
841
- }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
842
- order: 99;
843
- height: 20px;
844
- }
845
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
693
+ .speedtest-footer-about-link {
846
694
  position: absolute;
847
- right: 16px;
848
- bottom: 52px;
849
- width: 250px;
850
- min-height: 48px;
851
- z-index: 9999;
852
- border-radius: 4px;
695
+ bottom: 0;
696
+ left: 0;
697
+ color: var(--secondary-text-color);
698
+ text-decoration: underline !important;
853
699
  }
854
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
855
- padding: 8px 0;
700
+ .speedtest-footer-about-link:hover {
701
+ color: var(--hover-text-color);
856
702
  }
857
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
858
- margin: 0;
859
- text-align: left;
860
- line-height: 22px;
861
- padding: 5px 14px;
862
- width: 250px;
863
- font-size: 12px;
703
+ .speedtest-footer .speedtest-footer-refresh {
704
+ position: absolute;
705
+ bottom: 0;
706
+ right: 0;
707
+ color: var(--secondary-text-color);
708
+ font-size: 14px;
709
+ font-weight: 400;
710
+ line-height: 16px;
711
+ height: 16px;
864
712
  display: flex;
865
713
  align-items: center;
866
- justify-content: flex-start;
867
- gap: 8px;
868
- }
869
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option_icon {
870
- flex: 24px 0 0;
871
- height: 24px;
714
+ gap: 4px;
872
715
  }
873
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option_icon.hidden {
874
- visibility: hidden;
875
- display: inline-block;
716
+ .speedtest-footer .speedtest-footer-refresh svg path {
717
+ fill: var(--secondary-text-color);
876
718
  }
877
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option_label {
878
- flex: 0 1 100%;
719
+ .speedtest-footer .speedtest-footer-refresh:hover {
720
+ color: var(--hover-text-color);
879
721
  }
880
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option_arrow-right-icon {
881
- flex: 0 0 14px;
882
- height: 24px;
722
+ .speedtest-footer .speedtest-footer-refresh:hover svg path {
723
+ fill: var(--hover-text-color);
883
724
  }
884
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option_value {
885
- flex: 1 0 auto;
886
- }.big-mute-icon-wrapper[data-big-mute] {
887
- position: absolute;
888
- z-index: 9998;
889
- background-color: transparent;
890
- display: flex;
891
- justify-content: center;
892
- width: 100%;
893
- height: calc(100% - 50px);
894
- margin: 0 auto;
895
- opacity: 0.75;
896
- transition: opacity 0.1s ease;
897
- pointer-events: auto;
725
+
726
+ .mobile .clappr-nerd-stats .stats-box {
727
+ position: fixed;
728
+ height: auto;
729
+ width: auto;
730
+ inset: 0;
731
+ min-width: 100vw;
732
+ padding-bottom: 4px;
733
+ padding-left: 4px;
734
+ padding-right: 4px;
898
735
  }
899
- .big-mute-icon-wrapper[data-big-mute].hide {
900
- display: none;
736
+ .mobile .clappr-nerd-stats .stats-box-top {
737
+ position: fixed;
901
738
  }
902
- .big-mute-icon-wrapper[data-big-mute]:hover {
903
- cursor: pointer;
739
+ .mobile .clappr-nerd-stats .stats-box-main ul {
740
+ flex: 0 1 50%;
904
741
  }
905
742
 
906
- .big-mute-icon[data-big-mute-icon] {
907
- display: flex;
908
- align-items: center;
909
- justify-content: center;
910
- align-self: center;
911
- width: 120px;
912
- height: 120px;
913
- border: 2px solid white;
914
- border-radius: 50%;
915
- filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
916
- filter: alpha(opacity=60);
917
- opacity: 1;
918
- box-shadow: 0 0 1px 0 white;
919
- background: rgba(240, 243, 247, 0.9411764706);
920
- z-index: 10000;
921
- }
922
- .big-mute-icon[data-big-mute-icon] svg {
923
- margin-left: 5px;
924
- width: 80px;
925
- height: 80px;
926
- }
927
- .big-mute-icon[data-big-mute-icon] svg path {
928
- fill: #1f1e1e !important;
743
+ @media only screen and (orientation: portrait) {
744
+ .mobile .speedtest-summary {
745
+ padding: 0 5px;
746
+ height: auto;
747
+ }
748
+ .mobile .speedtest-summary-block {
749
+ width: 100%;
750
+ flex-direction: column;
751
+ }
752
+ .mobile .speedtest-summary-block .speedtest-summary-subblock {
753
+ width: 100%;
754
+ }
755
+ .mobile .speedtest-summary-block .speedtest-summary-subblock-content {
756
+ width: 100%;
757
+ }
758
+ .mobile .speedtest-summary-header {
759
+ padding-top: 12px;
760
+ height: 38px;
761
+ text-align: center;
762
+ }
763
+ .mobile .speedtest-quality-header {
764
+ text-align: center;
765
+ }
766
+ .mobile .speedtest-footer .speedtest-footer-refresh {
767
+ inset: 50% auto auto 50%;
768
+ transform: translate(-50%, -50%);
769
+ }
929
770
  }
930
- .big-mute-icon[data-big-mute-icon]:hover {
931
- background: rgba(240, 243, 247, 0.8784313725);
771
+ @media only screen and (orientation: landscape) {
772
+ .mobile .clappr-nerd-stats .stats-box-main ul {
773
+ flex-basis: 1fr;
774
+ }
932
775
  }
933
- .big-mute-icon[data-big-mute-icon]:hover svg path {
934
- fill: #151515 !important;
935
- }div.player-error-screen, [data-player] div.player-error-screen {
936
- color: #CCCACA;
937
- position: absolute;
938
- top: 0;
939
- height: 100%;
940
- width: 100%;
941
- background-color: rgba(0, 0, 0, 0.7);
942
- z-index: 2000;
943
- display: flex;
944
- flex-direction: column;
945
- justify-content: center;
776
+ @media only screen and (min-width: 1100px) {
777
+ .fullscreen .clappr-nerd-stats .stats-box {
778
+ top: unset;
779
+ }
780
+ }.dvr-controls[data-dvr] {
781
+ display: inline-block;
782
+ color: var(--player-dvr-color);
783
+ line-height: 32px;
784
+ font-size: 10px;
785
+ font-weight: bold;
786
+ margin-left: 6px;
787
+ height: 40px;
788
+ line-height: 40px;
789
+ margin-left: 0;
946
790
  }
947
- div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
948
- font-size: 14px;
949
- color: #CCCACA;
950
- margin-top: 45px;
791
+ .dvr-controls[data-dvr] .live-info {
792
+ cursor: default;
793
+ text-transform: uppercase;
951
794
  }
952
- div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
953
- font-weight: bold;
954
- line-height: 30px;
955
- font-size: 18px;
795
+ .dvr-controls[data-dvr] .live-info:before {
796
+ content: "";
797
+ display: inline-block;
798
+ position: relative;
799
+ width: 7px;
800
+ height: 7px;
801
+ border-radius: 3.5px;
802
+ margin-right: 3.5px;
803
+ background-color: var(--player-live-color);
956
804
  }
957
- div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
958
- width: 90%;
959
- margin: 0 auto;
805
+ .dvr-controls[data-dvr] .live-info.disabled {
806
+ opacity: 0.3;
960
807
  }
961
- div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
962
- font-size: 13px;
963
- margin-top: 15px;
808
+ .dvr-controls[data-dvr] .live-info.disabled:before {
809
+ background-color: var(--player-dvr-color);
964
810
  }
965
- div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
811
+ .dvr-controls[data-dvr] .live-button {
966
812
  cursor: pointer;
967
- width: 30px;
968
- margin: 15px auto 0;
969
- }[data-player] {
970
- --bottom-panel: 40px;
813
+ outline: none;
814
+ display: none;
815
+ border: 0;
816
+ color: var(--player-dvr-color);
817
+ background-color: transparent;
818
+ height: 32px;
819
+ padding: 0;
820
+ opacity: 0.7;
821
+ text-transform: uppercase;
822
+ transition: all 0.1s ease;
971
823
  }
972
-
973
- .container .media-control-notransition {
974
- transition: none !important;
824
+ .dvr-controls[data-dvr] .live-button:before {
825
+ content: "";
826
+ display: inline-block;
827
+ position: relative;
828
+ width: 7px;
829
+ height: 7px;
830
+ border-radius: 3.5px;
831
+ margin-right: 3.5px;
832
+ background-color: var(--player-dvr-color);
975
833
  }
976
- .container .player-poster[data-poster] .play-wrapper[data-poster] {
834
+ .dvr-controls[data-dvr] .live-button:hover {
977
835
  opacity: 1;
836
+ text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px;
978
837
  }
979
- .container.crop-video [data-html5-video] {
980
- object-fit: cover;
981
- }
982
- .container .cc-line {
983
- position: absolute;
984
- bottom: calc(var(--bottom-panel) + 5px);
985
- width: 100%;
986
- }
987
- .container .cc-line p {
988
- width: auto;
989
- background-color: rgba(0, 0, 0, 0.4);
990
- color: white;
991
- display: inline-block;
838
+ .dvr-controls[data-dvr] .live-info {
839
+ font-size: 14px;
840
+ letter-spacing: 0.8px;
841
+ font-weight: 500;
842
+ color: #fffffe;
843
+ margin-left: 21px;
992
844
  }
993
- .container .circle-poster[data-poster] {
994
- top: 50%;
995
- margin-top: -60px;
996
- left: 50%;
997
- margin-left: -60px;
998
- position: absolute;
999
- width: 120px;
1000
- height: 120px;
1001
- border: 2px solid white;
845
+ .dvr-controls[data-dvr] .live-info::before {
846
+ width: 10px;
847
+ height: 10px;
1002
848
  border-radius: 50%;
1003
- filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
1004
- filter: alpha(opacity=60);
1005
- opacity: 1;
1006
- box-shadow: 0 0 1px 0 white;
849
+ margin-right: 8px;
850
+ background-color: #ed4f4a;
1007
851
  }
1008
- .container .circle-poster[data-poster] svg {
1009
- margin-left: 5px;
1010
- width: 80px;
1011
- height: 80px;
852
+ .dvr-controls[data-dvr] .live-button {
853
+ height: 40px;
854
+ opacity: 1;
855
+ font-size: 14px;
856
+ letter-spacing: 0.8px;
857
+ font-weight: 500;
858
+ margin-left: 20px;
1012
859
  }
1013
- .container .spinner-three-bounce[data-spinner] > div {
1014
- background-color: #ff5700;
860
+ .dvr-controls[data-dvr] .live-button::before {
861
+ width: 10px;
862
+ height: 10px;
863
+ border-radius: 50%;
864
+ margin-right: 8px;
865
+ background-color: #cacaca;
866
+ }.media-control-pip {
867
+ order: 95;
868
+ display: flex;
1015
869
  }
1016
-
1017
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-quality,
1018
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-audiotracks {
1019
- display: none;
870
+ .media-control-pip button {
871
+ height: 20px;
1020
872
  }
1021
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
1022
- transform: rotate(270deg);
1023
- float: none;
1024
- display: block;
1025
- position: absolute;
1026
- /* bottom: 12px; */
1027
- margin: 0;
1028
- top: -40px;
1029
- padding: 0;
1030
- /* right: 20px; */
1031
- margin-left: -32px;
1032
- margin-top: -3px;
1033
- width: 80px;
1034
- /* padding-left: 12px; */
873
+ .media-control-pip button svg {
874
+ height: 20px;
875
+ }.quality-levels li.disabled {
876
+ opacity: 0.5;
877
+ pointer-events: none;
1035
878
  }
1036
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background-mask {
879
+ .quality-levels li.current {
880
+ background-color: #000;
881
+ }.player-poster[data-poster] {
882
+ display: flex;
883
+ justify-content: center;
884
+ align-items: center;
1037
885
  position: absolute;
1038
- width: 100%;
1039
886
  height: 100%;
1040
- left: -5px;
887
+ width: 100%;
888
+ z-index: 998;
889
+ top: 0;
890
+ left: 0;
891
+ background-color: #000;
892
+ background-size: cover;
893
+ background-repeat: no-repeat;
894
+ background-position: 50% 50%;
1041
895
  }
1042
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {
1043
- display: none;
896
+ .player-poster[data-poster].clickable {
897
+ cursor: pointer;
1044
898
  }
1045
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background {
1046
- margin-left: 11px;
1047
- top: 7px;
1048
- width: 80px;
899
+ .player-poster[data-poster]:hover .play-wrapper[data-poster] {
900
+ opacity: 1;
1049
901
  }
1050
- .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber {
1051
- margin-left: 11px;
1052
- top: 1px;
902
+ .player-poster[data-poster] .play-wrapper[data-poster] {
903
+ width: 100%;
904
+ height: 25%;
905
+ margin: 0 auto;
906
+ opacity: 0.75;
907
+ transition: opacity 0.1s ease;
1053
908
  }
1054
-
1055
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-cc {
1056
- width: 28px;
909
+ .player-poster[data-poster] .play-wrapper[data-poster] svg {
910
+ height: 100%;
911
+ display: inline;
1057
912
  }
1058
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-cc svg {
1059
- height: 17px;
913
+ .player-poster[data-poster] .play-wrapper[data-poster] svg path {
914
+ fill: #fff;
915
+ }@charset "UTF-8";
916
+ .media-control-clips {
917
+ display: flex;
918
+ gap: 6px;
1060
919
  }
1061
- .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container {
1062
- top: calc(50% - 150px);
1063
- left: calc(50% - 125px);
1064
- width: 250px;
1065
- height: calc(100% - 32px);
1066
- max-height: 300px;
1067
- transform: none;
920
+ .media-control-clips .media-clip-text {
921
+ text-overflow: ellipsis;
922
+ white-space: nowrap;
923
+ overflow: hidden;
924
+ display: inline-block;
925
+ text-overflow: ellipsis;
926
+ color: white;
927
+ cursor: default;
928
+ line-height: var(--bottom-panel);
929
+ position: relative;
1068
930
  }
1069
- .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container .share-container-header {
1070
- border: none;
931
+ .media-control-clips .media-clip-text::before {
932
+ content: "•";
933
+ padding-right: 6px;
1071
934
  }
1072
- .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1073
- visibility: hidden;
935
+ .media-control-clips .media-clip-text {
936
+ max-width: 100px;
937
+ }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
938
+ height: 0;
1074
939
  }
1075
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality,
1076
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks {
1077
- display: block;
940
+
941
+ .skip_time_plugin[data-skip-time] {
942
+ position: absolute;
943
+ width: 100%;
944
+ height: calc(100% - 50px);
945
+ z-index: 9998;
946
+ background-color: transparent;
947
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1078
948
  }
1079
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector],
1080
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] {
1081
- margin-top: 3px;
1082
- margin-right: 10px;
949
+ .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] {
950
+ width: 100%;
951
+ height: 100%;
952
+ display: flex;
953
+ justify-content: space-between;
1083
954
  }
1084
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] ul,
1085
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] ul {
1086
- bottom: 30px;
1087
- width: 50px;
955
+ .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] .skip-item {
956
+ width: 33.3%;
957
+ height: 100%;
958
+ }*, :focus, :visited {
959
+ outline: none !important;
1088
960
  }
1089
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] ul li,
1090
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] ul li {
1091
- height: 23px;
1092
- font-size: 14px;
961
+
962
+ .multicamera[data-multicamera] {
963
+ float: right;
964
+ margin-top: 4px;
965
+ position: relative;
966
+ margin-right: 20px;
967
+ width: 20px;
1093
968
  }
1094
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] ul li a,
1095
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] ul li a {
1096
- height: 23px;
1097
- padding: 2px 5px;
969
+ .multicamera[data-multicamera] button {
970
+ background-color: transparent;
971
+ color: #fff;
972
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
973
+ -webkit-font-smoothing: antialiased;
974
+ border: none;
975
+ font-size: 14px;
976
+ padding: 0;
1098
977
  }
1099
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-level-selector-button] .quality-text,
1100
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-level-selector-button] .audio-text,
1101
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-audiotracks-button] .quality-text,
1102
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-audiotracks-button] .audio-text,
1103
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-level-selector-button] .quality-text,
1104
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-level-selector-button] .audio-text,
1105
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] .quality-text,
1106
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] .audio-text {
1107
- font-size: 13px;
978
+ .multicamera[data-multicamera] button svg {
979
+ height: 20px;
980
+ position: relative;
981
+ margin-top: 6px;
1108
982
  }
1109
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-level-selector-button] span.quality-arrow,
1110
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-level-selector-button] span.audio-arrow,
1111
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-audiotracks-button] span.quality-arrow,
1112
- .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-audiotracks-button] span.audio-arrow,
1113
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-level-selector-button] span.quality-arrow,
1114
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-level-selector-button] span.audio-arrow,
1115
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] span.quality-arrow,
1116
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] span.audio-arrow {
1117
- width: 7px;
1118
- height: 5px;
1119
- margin-left: 4px;
1120
- margin-top: 11px;
983
+ .multicamera[data-multicamera] button:hover {
984
+ color: #c9c9c9;
1121
985
  }
1122
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera {
1123
- margin-top: 0;
1124
- margin-right: 10px;
986
+ .multicamera[data-multicamera] button.changing {
987
+ animation: pulse 0.5s infinite alternate;
1125
988
  }
1126
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera button {
1127
- height: 32px;
989
+ .multicamera[data-multicamera] button span.quality-arrow {
990
+ width: 9px;
991
+ height: 6px;
992
+ margin-top: 11px;
993
+ margin-left: 5px;
1128
994
  }
1129
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera button svg {
1130
- height: 17px;
1131
- margin: 0;
995
+ .multicamera[data-multicamera] > ul {
996
+ padding: 6px 0;
997
+ right: -24px;
998
+ width: 245px;
999
+ list-style-type: none;
1000
+ position: absolute;
1001
+ bottom: 48px;
1002
+ border-radius: 4px;
1003
+ display: none;
1004
+ background-color: rgba(74, 74, 74, 0.9);
1132
1005
  }
1133
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] {
1134
- padding-left: 10px;
1135
- padding-right: 12px;
1006
+ .multicamera[data-multicamera] > ul::after {
1007
+ content: "";
1008
+ position: absolute;
1009
+ top: 100%;
1010
+ left: 85%;
1011
+ margin-left: -10px;
1012
+ width: 0;
1013
+ height: 0;
1014
+ border-top: 10px solid rgba(74, 74, 74, 0.9);
1015
+ border-right: 10px solid transparent;
1016
+ border-left: 10px solid transparent;
1136
1017
  }
1137
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator {
1138
- line-height: 32px;
1018
+ .multicamera[data-multicamera] li {
1019
+ font-size: 10px;
1020
+ cursor: pointer;
1139
1021
  }
1140
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator[data-position], .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator[data-duration] {
1141
- font-size: 11px;
1142
- line-height: 32px;
1022
+ .multicamera[data-multicamera] li .multicamera-item {
1023
+ display: flex;
1024
+ padding: 10px 0;
1025
+ justify-content: center;
1026
+ position: relative;
1143
1027
  }
1144
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr] {
1145
- height: 32px;
1028
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
1029
+ pointer-events: none;
1146
1030
  }
1147
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr] .live-button {
1148
- margin-left: 10px;
1149
- height: 32px;
1150
- font-size: 12px;
1151
- line-height: 32px;
1152
- text-shadow: none;
1153
- letter-spacing: 0.6px;
1031
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
1032
+ opacity: 0.5;
1154
1033
  }
1155
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr] .live-button::before {
1156
- width: 8px;
1157
- height: 8px;
1158
- margin-right: 4px;
1034
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
1035
+ opacity: 0.5;
1159
1036
  }
1160
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr] .live-info {
1161
- margin-left: 10px;
1162
- height: 32px;
1163
- font-size: 12px;
1164
- line-height: 32px;
1165
- text-shadow: none;
1166
- letter-spacing: 0.6px;
1037
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
1038
+ background-color: rgba(0, 0, 0, 0);
1167
1039
  }
1168
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr] .live-info::before {
1169
- width: 8px;
1170
- height: 8px;
1171
- margin-right: 4px;
1040
+ .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
1041
+ background-color: rgba(0, 0, 0, 0.3);
1172
1042
  }
1173
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button {
1174
- height: 32px;
1043
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
1044
+ width: 80px;
1045
+ height: 60px;
1175
1046
  }
1176
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {
1177
- height: 33px;
1047
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
1048
+ width: 80px;
1049
+ height: 60px;
1178
1050
  }
1179
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button svg {
1180
- height: 17px;
1051
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
1052
+ width: 120px;
1053
+ text-align: left;
1054
+ margin-left: 15px;
1181
1055
  }
1182
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-clip-container .media-clip-text,
1183
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-clips .media-clip-text {
1184
- line-height: 33px;
1185
- font-size: 11px;
1056
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title, .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1057
+ width: 120px;
1058
+ height: 20px;
1059
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1060
+ font-size: 14px;
1061
+ font-weight: normal;
1062
+ font-style: normal;
1063
+ font-stretch: normal;
1064
+ line-height: 1.43;
1065
+ letter-spacing: normal;
1066
+ text-align: left;
1067
+ color: #fff;
1068
+ text-overflow: ellipsis;
1069
+ overflow: hidden;
1186
1070
  }
1187
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-clip-container .media-clip-text,
1188
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-clips .media-clip-text {
1189
- max-width: 50px;
1071
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
1072
+ opacity: 0.6;
1190
1073
  }
1191
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] {
1192
- height: 32px;
1193
- margin-right: 8px;
1074
+ .multicamera[data-multicamera] li[data-title] {
1075
+ background-color: #c3c2c2;
1076
+ padding: 5px;
1194
1077
  }
1195
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {
1196
- height: 32px;
1078
+ .multicamera[data-multicamera] li a {
1079
+ color: #444;
1080
+ padding: 2px 10px;
1081
+ display: block;
1082
+ text-decoration: none;
1197
1083
  }
1198
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {
1199
- height: 17px;
1200
- margin-top: 5px;
1084
+ .multicamera[data-multicamera] li a:hover {
1085
+ background-color: #555;
1086
+ color: white;
1201
1087
  }
1202
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
1203
- display: none;
1088
+ .multicamera[data-multicamera] li a:hover a {
1089
+ color: white;
1090
+ text-decoration: none;
1204
1091
  }
1205
- .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {
1206
- width: 0;
1207
- height: 12px;
1208
- top: 9px;
1209
- padding: 0;
1092
+ .multicamera[data-multicamera] li.current a {
1093
+ color: #f00;
1210
1094
  }
1211
1095
 
1212
- :root {
1213
- --font-size-media-controls: 14px;
1214
- --font-size-media-controls-dropdown: 16px;
1215
- --player-vod-color: #005aff;
1216
- --player-dvr-color: #fff;
1217
- --player-live-color: #ff0101;
1218
- --player-seekbar-current-color: #ff5700;
1219
- --player-seekbar-buffer-color: #fff;
1096
+ @keyframes pulse {
1097
+ 0% {
1098
+ color: #fff;
1099
+ }
1100
+ 50% {
1101
+ color: #ff0101;
1102
+ }
1103
+ 100% {
1104
+ color: #B80000;
1105
+ }
1106
+ }[data-player] {
1107
+ --bottom-panel: 40px;
1220
1108
  }
1221
1109
 
1222
- .media-control-skin-1[data-media-control-skin-1] {
1223
- position: absolute;
1224
- width: 100%;
1225
- height: 100%;
1226
- z-index: 9999;
1227
- pointer-events: none;
1228
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1229
- font-size: var(--font-size-media-controls);
1110
+ .container .media-control-notransition {
1111
+ transition: none !important;
1230
1112
  }
1231
- .media-control-skin-1[data-media-control-skin-1].dragging {
1232
- pointer-events: auto;
1233
- cursor: grabbing !important;
1234
- cursor: url("closed-hand.cur"), move;
1113
+ .container .player-poster[data-poster] .play-wrapper[data-poster] {
1114
+ opacity: 1;
1235
1115
  }
1236
- .media-control-skin-1[data-media-control-skin-1].dragging * {
1237
- cursor: grabbing !important;
1238
- cursor: url("closed-hand.cur"), move;
1116
+ .container.crop-video [data-html5-video] {
1117
+ object-fit: cover;
1239
1118
  }
1240
- .media-control-skin-1[data-media-control-skin-1] .media-control-icon {
1241
- line-height: 0;
1242
- letter-spacing: 0;
1243
- speak: none;
1244
- color: #fff;
1245
- vertical-align: middle;
1246
- text-align: left;
1247
- transition: all 0.1s ease;
1119
+ .container .cc-line {
1120
+ position: absolute;
1121
+ bottom: calc(var(--bottom-panel) + 5px);
1122
+ width: 100%;
1248
1123
  }
1249
- .media-control-skin-1[data-media-control-skin-1] .media-control-icon:hover {
1124
+ .container .cc-line p {
1125
+ width: auto;
1126
+ background-color: rgba(0, 0, 0, 0.4);
1250
1127
  color: white;
1128
+ display: inline-block;
1251
1129
  }
1252
- .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-background[data-background] {
1253
- opacity: 0;
1130
+ .container .circle-poster[data-poster] {
1131
+ top: 50%;
1132
+ margin-top: -60px;
1133
+ left: 50%;
1134
+ margin-left: -60px;
1135
+ position: absolute;
1136
+ width: 120px;
1137
+ height: 120px;
1138
+ border: 2px solid white;
1139
+ border-radius: 50%;
1140
+ filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
1141
+ filter: alpha(opacity=60);
1142
+ opacity: 1;
1143
+ box-shadow: 0 0 1px 0 white;
1254
1144
  }
1255
- .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-layer[data-controls] {
1256
- bottom: -50px;
1145
+ .container .circle-poster[data-poster] svg {
1146
+ margin-left: 5px;
1147
+ width: 80px;
1148
+ height: 80px;
1257
1149
  }
1258
- .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {
1259
- opacity: 0;
1150
+ .container .spinner-three-bounce[data-spinner] > div {
1151
+ background-color: #ff5700;
1260
1152
  }
1261
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] {
1262
- position: absolute;
1263
- bottom: 0;
1264
- width: 100%;
1265
- padding: 0 12px 0 8px;
1266
- height: var(--bottom-panel);
1267
- vertical-align: middle;
1268
- pointer-events: auto;
1269
- transition: bottom 0.4s ease-out;
1270
- display: flex;
1271
- justify-content: space-between;
1153
+
1154
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-quality,
1155
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-audiotracks {
1156
+ display: none;
1272
1157
  }
1273
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-left-panel {
1274
- display: flex;
1275
- align-items: center;
1276
- gap: 0.5rem;
1277
- justify-content: flex-start;
1158
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
1159
+ transform: rotate(270deg);
1160
+ float: none;
1161
+ display: block;
1162
+ position: absolute;
1163
+ /* bottom: 12px; */
1164
+ margin: 0;
1165
+ top: -40px;
1166
+ padding: 0;
1167
+ /* right: 20px; */
1168
+ margin-left: -32px;
1169
+ margin-top: -3px;
1170
+ width: 80px;
1171
+ /* padding-left: 12px; */
1278
1172
  }
1279
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-center-panel {
1173
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background-mask {
1174
+ position: absolute;
1175
+ width: 100%;
1280
1176
  height: 100%;
1281
- text-align: center;
1282
- line-height: var(--bottom-panel);
1283
- }
1284
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-right-panel {
1285
- display: flex;
1286
- align-items: center;
1287
- gap: 1rem;
1288
- justify-content: flex-end;
1177
+ left: -5px;
1289
1178
  }
1290
- @media (max-width: 420px) {
1291
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-right-panel {
1292
- gap: 0.5rem;
1293
- overflow: hidden;
1294
- }
1179
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {
1180
+ display: none;
1295
1181
  }
1296
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button {
1297
- background-color: transparent;
1298
- border: 0;
1299
- padding: 0;
1300
- cursor: pointer;
1301
- display: inline-block;
1302
- height: 20px;
1303
- width: 24px;
1182
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background {
1183
+ margin-left: 11px;
1184
+ top: 7px;
1185
+ width: 80px;
1304
1186
  }
1305
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button svg {
1306
- height: 20px;
1187
+ .media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber {
1188
+ margin-left: 11px;
1189
+ top: 1px;
1307
1190
  }
1308
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button svg path {
1309
- fill: white;
1191
+
1192
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-cc {
1193
+ width: 28px;
1310
1194
  }
1311
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button:focus {
1312
- outline: none;
1195
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-cc svg {
1196
+ height: 17px;
1313
1197
  }
1314
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-play] {
1315
- float: left;
1316
- height: 100%;
1198
+ .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container {
1199
+ top: calc(50% - 150px);
1200
+ left: calc(50% - 125px);
1201
+ width: 250px;
1202
+ height: calc(100% - 32px);
1203
+ max-height: 300px;
1204
+ transform: none;
1317
1205
  }
1318
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-pause] {
1319
- float: left;
1320
- height: 100%;
1206
+ .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container .share-container-header {
1207
+ border: none;
1321
1208
  }
1322
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-stop] {
1323
- float: left;
1324
- height: 100%;
1209
+ .media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1210
+ visibility: hidden;
1325
1211
  }
1326
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {
1327
- order: 100;
1328
- background-color: transparent;
1329
- border: 0;
1330
- height: 40px;
1212
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality,
1213
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks {
1214
+ display: block;
1331
1215
  }
1332
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-hd-indicator] {
1333
- background-color: transparent;
1334
- border: 0;
1335
- cursor: default;
1336
- display: none !important;
1337
- float: right;
1338
- height: 100%;
1216
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector],
1217
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] {
1218
+ margin-top: 3px;
1219
+ margin-right: 10px;
1339
1220
  }
1340
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-position], .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration] {
1341
- display: flex;
1342
- color: white;
1343
- cursor: default;
1344
- line-height: var(--bottom-panel);
1345
- position: relative;
1221
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] ul,
1222
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] ul {
1223
+ bottom: 30px;
1224
+ width: 50px;
1346
1225
  }
1347
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-position] {
1348
- margin: 1px 0 0 7px;
1226
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] ul li,
1227
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] ul li {
1228
+ height: 23px;
1229
+ font-size: 14px;
1349
1230
  }
1350
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration] {
1351
- color: rgb(255, 255, 255);
1352
- opacity: 0.5;
1353
- margin-top: 1px;
1354
- margin-right: 6px;
1231
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] ul li a,
1232
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] ul li a {
1233
+ height: 23px;
1234
+ padding: 2px 5px;
1355
1235
  }
1356
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration]::before {
1357
- content: "|";
1358
- margin-right: 7px;
1236
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-level-selector-button] .quality-text,
1237
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-level-selector-button] .audio-text,
1238
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-audiotracks-button] .quality-text,
1239
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-audiotracks-button] .audio-text,
1240
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-level-selector-button] .quality-text,
1241
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-level-selector-button] .audio-text,
1242
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] .quality-text,
1243
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] .audio-text {
1244
+ font-size: 13px;
1359
1245
  }
1360
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] {
1361
- position: absolute;
1362
- top: -11px;
1363
- left: 0;
1364
- display: inline-block;
1365
- vertical-align: middle;
1366
- width: 100%;
1367
- height: 20px;
1368
- cursor: pointer;
1246
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-level-selector-button] span.quality-arrow,
1247
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-level-selector-button] span.audio-arrow,
1248
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-audiotracks-button] span.quality-arrow,
1249
+ .media-control-skin-1[data-media-control-skin-1].w370 .level-selector[data-level-selector] button[data-audiotracks-button] span.audio-arrow,
1250
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-level-selector-button] span.quality-arrow,
1251
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-level-selector-button] span.audio-arrow,
1252
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] span.quality-arrow,
1253
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] span.audio-arrow {
1254
+ width: 7px;
1255
+ height: 5px;
1256
+ margin-left: 4px;
1257
+ margin-top: 11px;
1369
1258
  }
1370
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] {
1371
- width: 100%;
1372
- height: 3px;
1373
- position: relative;
1374
- top: 8px;
1375
- background-color: #666;
1259
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera {
1260
+ margin-top: 0;
1261
+ margin-right: 10px;
1376
1262
  }
1377
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-1[data-seekbar] {
1378
- position: absolute;
1379
- top: 0;
1380
- left: 0;
1381
- width: 0;
1382
- height: 100%;
1383
- background-color: var(--player-seekbar-buffer-color);
1384
- transition: all 0.1s ease-out;
1263
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera button {
1264
+ height: 32px;
1385
1265
  }
1386
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
1387
- position: absolute;
1388
- top: 0;
1389
- left: 0;
1390
- width: 0;
1391
- height: 100%;
1392
- background-color: var(--player-seekbar-current-color);
1393
- transition: all 0.1s ease-out;
1266
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera button svg {
1267
+ height: 17px;
1268
+ margin: 0;
1394
1269
  }
1395
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled {
1396
- cursor: default;
1397
- display: none;
1270
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] {
1271
+ padding-left: 10px;
1272
+ padding-right: 12px;
1398
1273
  }
1399
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled + .bar-scrubber[data-seekbar] {
1400
- cursor: default;
1401
- display: none;
1274
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator {
1275
+ line-height: 32px;
1402
1276
  }
1403
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {
1404
- position: absolute;
1405
- transform: translateX(-50%);
1406
- top: -11.5px;
1407
- left: 0;
1408
- width: 20px;
1409
- height: 20px;
1410
- opacity: 1;
1411
- transition: all 0.1s ease-out;
1277
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator[data-position], .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator[data-duration] {
1278
+ font-size: 11px;
1279
+ line-height: 32px;
1412
1280
  }
1413
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-scrubber[data-seekbar] .bar-scrubber-icon[data-seekbar] {
1414
- position: absolute;
1415
- left: 4.5px;
1416
- top: 4.5px;
1417
- width: 11px;
1418
- height: 11px;
1419
- border-radius: 50%;
1420
- background-color: white;
1281
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr] {
1282
+ height: 32px;
1421
1283
  }
1422
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] {
1423
- display: flex;
1424
- justify-content: flex-start;
1425
- height: var(--bottom-panel);
1426
- cursor: pointer;
1427
- box-sizing: border-box;
1284
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr] .live-button {
1285
+ margin-left: 10px;
1286
+ height: 32px;
1287
+ font-size: 12px;
1288
+ line-height: 32px;
1289
+ text-shadow: none;
1290
+ letter-spacing: 0.6px;
1428
1291
  }
1429
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] {
1430
- bottom: 0;
1292
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr] .live-button::before {
1293
+ width: 8px;
1294
+ height: 8px;
1295
+ margin-right: 4px;
1431
1296
  }
1432
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {
1433
- background-color: transparent;
1434
- border: 0;
1435
- box-sizing: content-box;
1436
- height: var(--bottom-panel);
1437
- width: 20px;
1297
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr] .live-info {
1298
+ margin-left: 10px;
1299
+ height: 32px;
1300
+ font-size: 12px;
1301
+ line-height: 32px;
1302
+ text-shadow: none;
1303
+ letter-spacing: 0.6px;
1438
1304
  }
1439
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {
1440
- height: 20px;
1441
- position: relative;
1442
- top: 3px;
1443
- margin-top: 7px;
1305
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls[data-dvr] .live-info::before {
1306
+ width: 8px;
1307
+ height: 8px;
1308
+ margin-right: 4px;
1444
1309
  }
1445
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg path {
1446
- fill: white;
1310
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button {
1311
+ height: 32px;
1447
1312
  }
1448
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume].muted svg {
1449
- margin-left: 2px;
1313
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {
1314
+ height: 33px;
1450
1315
  }
1451
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
1452
- position: relative;
1453
- margin-left: 10px;
1454
- top: 8px;
1455
- width: 80px;
1456
- height: 23px;
1457
- padding: 3px 0;
1458
- transition: width 0.2s ease-out;
1316
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button svg {
1317
+ height: 17px;
1459
1318
  }
1460
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] {
1461
- height: 3px;
1462
- border-radius: 100px;
1463
- position: relative;
1464
- top: 7px;
1465
- background-color: #666;
1319
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-clip-container .media-clip-text,
1320
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-clips .media-clip-text {
1321
+ line-height: 33px;
1322
+ font-size: 11px;
1466
1323
  }
1467
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-1[data-volume] {
1468
- position: absolute;
1469
- top: 0;
1470
- left: 0;
1471
- width: 0;
1472
- height: 100%;
1473
- border-radius: 100px;
1474
- background-color: white;
1475
- transition: all 0.1s ease-out;
1324
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-clip-container .media-clip-text,
1325
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-clips .media-clip-text {
1326
+ max-width: 50px;
1476
1327
  }
1477
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-2[data-volume] {
1478
- position: absolute;
1479
- top: 0;
1480
- left: 0;
1481
- width: 0;
1482
- height: 100%;
1483
- background-color: var(--player-vod-color);
1484
- transition: all 0.1s ease-out;
1328
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] {
1329
+ height: 32px;
1330
+ margin-right: 8px;
1485
1331
  }
1486
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] {
1487
- position: absolute;
1488
- transform: translateX(-50%);
1489
- top: 3px;
1490
- margin-left: 3px;
1491
- width: 16px;
1492
- height: 16px;
1493
- opacity: 1;
1494
- transition: all 0.1s ease-out;
1332
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {
1333
+ height: 32px;
1495
1334
  }
1496
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] .bar-scrubber-icon[data-volume] {
1497
- position: absolute;
1498
- left: 3px;
1499
- top: 5px;
1500
- width: 7px;
1501
- height: 7px;
1502
- border-radius: 50%;
1503
- background-color: white;
1335
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {
1336
+ height: 17px;
1337
+ margin-top: 5px;
1504
1338
  }
1505
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume] {
1506
- float: left;
1507
- width: 4px;
1508
- padding-left: 2px;
1339
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
1340
+ display: none;
1341
+ }
1342
+ .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {
1343
+ width: 0;
1509
1344
  height: 12px;
1510
- opacity: 0.5;
1511
- box-shadow: inset 2px 0 0 white;
1512
- transition: transform 0.2s ease-out;
1345
+ top: 9px;
1346
+ padding: 0;
1347
+ }
1348
+
1349
+ :root {
1350
+ --font-size-media-controls: 14px;
1351
+ --font-size-media-controls-dropdown: 16px;
1352
+ --player-vod-color: #005aff;
1353
+ --player-dvr-color: #fff;
1354
+ --player-live-color: #ff0101;
1355
+ --player-seekbar-current-color: #ff5700;
1356
+ --player-seekbar-buffer-color: #fff;
1513
1357
  }
1514
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume].fill {
1515
- box-shadow: inset 2px 0 0 #fff;
1516
- opacity: 1;
1358
+
1359
+ .media-control-skin-1[data-media-control-skin-1] {
1360
+ position: absolute;
1361
+ width: 100%;
1362
+ height: 100%;
1363
+ z-index: 9999;
1364
+ pointer-events: none;
1365
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1366
+ font-size: var(--font-size-media-controls);
1517
1367
  }
1518
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:nth-of-type(1) {
1519
- padding-left: 0;
1368
+ .media-control-skin-1[data-media-control-skin-1].dragging {
1369
+ pointer-events: auto;
1370
+ cursor: grabbing !important;
1371
+ cursor: url("closed-hand.cur"), move;
1520
1372
  }
1521
- .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:hover {
1522
- transform: scaleY(1.5);
1373
+ .media-control-skin-1[data-media-control-skin-1].dragging * {
1374
+ cursor: grabbing !important;
1375
+ cursor: url("closed-hand.cur"), move;
1523
1376
  }
1524
-
1525
- /* TODO distribute between plugins' styles */
1526
- .media-control-skin-1[data-media-control-skin-1] .media-control-cc button[data-cc-button] {
1527
- display: flex;
1528
- justify-content: center;
1529
- padding: 0;
1530
- align-items: center;
1377
+ .media-control-skin-1[data-media-control-skin-1] .media-control-icon {
1378
+ line-height: 0;
1379
+ letter-spacing: 0;
1380
+ speak: none;
1381
+ color: #fff;
1382
+ vertical-align: middle;
1383
+ text-align: left;
1384
+ transition: all 0.1s ease;
1531
1385
  }
1532
- .media-control-skin-1[data-media-control-skin-1] .media-control-cc button[data-cc-button]:hover {
1386
+ .media-control-skin-1[data-media-control-skin-1] .media-control-icon:hover {
1533
1387
  color: white;
1534
1388
  }
1535
- .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul {
1536
- background-color: rgba(74, 74, 74, 0.6);
1537
- border: none;
1538
- width: auto;
1539
- border-radius: 4px;
1540
- bottom: 52px;
1541
- margin-left: -28px;
1389
+ .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-background[data-background] {
1390
+ opacity: 0;
1542
1391
  }
1543
- .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li {
1544
- font-size: 16px;
1545
- text-align: center;
1546
- white-space: nowrap;
1547
- height: 30px;
1392
+ .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-layer[data-controls] {
1393
+ bottom: -50px;
1548
1394
  }
1549
- .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li a {
1550
- height: 30px;
1551
- padding: 5px 10px;
1552
- color: #fffffe;
1395
+ .media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {
1396
+ opacity: 0;
1553
1397
  }
1554
- .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li a:hover {
1555
- background-color: rgba(0, 0, 0, 0.4);
1398
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] {
1399
+ position: absolute;
1400
+ bottom: 0;
1401
+ width: 100%;
1402
+ padding: 0 12px 0 8px;
1403
+ height: var(--bottom-panel);
1404
+ vertical-align: middle;
1405
+ pointer-events: auto;
1406
+ transition: bottom 0.4s ease-out;
1407
+ display: flex;
1408
+ justify-content: space-between;
1556
1409
  }
1557
- .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li.current a {
1558
- background-color: rgba(0, 0, 0, 0.4);
1410
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-left-panel {
1411
+ display: flex;
1412
+ align-items: center;
1413
+ gap: 0.5rem;
1414
+ justify-content: flex-start;
1559
1415
  }
1560
- .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li:first-child a {
1561
- border-bottom-left-radius: 4px;
1562
- border-bottom-right-radius: 4px;
1416
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-center-panel {
1417
+ height: 100%;
1418
+ text-align: center;
1419
+ line-height: var(--bottom-panel);
1563
1420
  }
1564
- .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li:last-child a {
1565
- border-top-left-radius: 4px;
1566
- border-top-right-radius: 4px;
1421
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-right-panel {
1422
+ display: flex;
1423
+ align-items: center;
1424
+ gap: 1rem;
1425
+ justify-content: flex-end;
1567
1426
  }
1568
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] {
1569
- height: 26px;
1570
- line-height: 26px;
1571
- bottom: 52px;
1572
- border-radius: 3px;
1573
- background-color: rgba(74, 74, 74, 0.7);
1427
+ @media (max-width: 420px) {
1428
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-right-panel {
1429
+ gap: 0.5rem;
1430
+ overflow: hidden;
1431
+ }
1574
1432
  }
1575
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span {
1576
- letter-spacing: 0.8px;
1577
- font-size: 14px;
1578
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1433
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button {
1434
+ background-color: transparent;
1435
+ border: 0;
1436
+ padding: 0;
1437
+ cursor: pointer;
1438
+ display: inline-block;
1439
+ height: 20px;
1440
+ width: 24px;
1579
1441
  }
1580
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-seek-time] {
1581
- padding-left: 8px;
1582
- padding-right: 8px;
1442
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button svg {
1443
+ height: 20px;
1583
1444
  }
1584
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-duration] {
1585
- display: none !important;
1586
- }.player-poster[data-poster] {
1587
- display: flex;
1588
- justify-content: center;
1589
- align-items: center;
1590
- position: absolute;
1445
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button svg path {
1446
+ fill: white;
1447
+ }
1448
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button:focus {
1449
+ outline: none;
1450
+ }
1451
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-play] {
1452
+ float: left;
1591
1453
  height: 100%;
1592
- width: 100%;
1593
- z-index: 998;
1594
- top: 0;
1595
- left: 0;
1596
- background-color: #000;
1597
- background-size: cover;
1598
- background-repeat: no-repeat;
1599
- background-position: 50% 50%;
1600
1454
  }
1601
- .player-poster[data-poster].clickable {
1602
- cursor: pointer;
1455
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-pause] {
1456
+ float: left;
1457
+ height: 100%;
1603
1458
  }
1604
- .player-poster[data-poster]:hover .play-wrapper[data-poster] {
1605
- opacity: 1;
1459
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-stop] {
1460
+ float: left;
1461
+ height: 100%;
1606
1462
  }
1607
- .player-poster[data-poster] .play-wrapper[data-poster] {
1608
- width: 100%;
1609
- height: 25%;
1610
- margin: 0 auto;
1611
- opacity: 0.75;
1612
- transition: opacity 0.1s ease;
1463
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {
1464
+ order: 100;
1465
+ background-color: transparent;
1466
+ border: 0;
1467
+ height: 40px;
1613
1468
  }
1614
- .player-poster[data-poster] .play-wrapper[data-poster] svg {
1469
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-hd-indicator] {
1470
+ background-color: transparent;
1471
+ border: 0;
1472
+ cursor: default;
1473
+ display: none !important;
1474
+ float: right;
1615
1475
  height: 100%;
1616
- display: inline;
1617
1476
  }
1618
- .player-poster[data-poster] .play-wrapper[data-poster] svg path {
1619
- fill: #fff;
1620
- }.media-control-pip {
1621
- order: 95;
1477
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-position], .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration] {
1622
1478
  display: flex;
1479
+ color: white;
1480
+ cursor: default;
1481
+ line-height: var(--bottom-panel);
1482
+ position: relative;
1623
1483
  }
1624
- .media-control-pip button {
1625
- height: 20px;
1484
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-position] {
1485
+ margin: 1px 0 0 7px;
1626
1486
  }
1627
- .media-control-pip button svg {
1628
- height: 20px;
1629
- }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
1630
- height: 0;
1487
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration] {
1488
+ color: rgb(255, 255, 255);
1489
+ opacity: 0.5;
1490
+ margin-top: 1px;
1491
+ margin-right: 6px;
1631
1492
  }
1632
-
1633
- .skip_time_plugin[data-skip-time] {
1493
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration]::before {
1494
+ content: "|";
1495
+ margin-right: 7px;
1496
+ }
1497
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] {
1634
1498
  position: absolute;
1499
+ top: -11px;
1500
+ left: 0;
1501
+ display: inline-block;
1502
+ vertical-align: middle;
1635
1503
  width: 100%;
1636
- height: calc(100% - 50px);
1637
- z-index: 9998;
1638
- background-color: transparent;
1639
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1504
+ height: 20px;
1505
+ cursor: pointer;
1640
1506
  }
1641
- .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] {
1507
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] {
1642
1508
  width: 100%;
1643
- height: 100%;
1644
- display: flex;
1645
- justify-content: space-between;
1646
- }
1647
- .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] .skip-item {
1648
- width: 33.3%;
1649
- height: 100%;
1650
- }*,
1651
- :focus,
1652
- :visited {
1653
- outline: none !important;
1654
- }
1655
-
1656
- .media-control-audiotracks {
1509
+ height: 3px;
1657
1510
  position: relative;
1511
+ top: 8px;
1512
+ background-color: #666;
1658
1513
  }
1659
- .media-control-audiotracks button {
1660
- background-color: transparent;
1661
- color: #fff;
1662
- -webkit-font-smoothing: antialiased;
1663
- border: none;
1664
- cursor: pointer;
1665
- display: flex;
1666
- align-items: center;
1667
- padding: 0;
1514
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-1[data-seekbar] {
1515
+ position: absolute;
1516
+ top: 0;
1517
+ left: 0;
1518
+ width: 0;
1519
+ height: 100%;
1520
+ background-color: var(--player-seekbar-buffer-color);
1521
+ transition: all 0.1s ease-out;
1668
1522
  }
1669
- .media-control-audiotracks button .audio-text {
1670
- text-overflow: ellipsis;
1671
- overflow: hidden;
1672
- white-space: nowrap;
1673
- max-width: 100px;
1674
- background-color: transparent;
1675
- -webkit-font-smoothing: antialiased;
1676
- border: none;
1677
- cursor: pointer;
1523
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
1524
+ position: absolute;
1525
+ top: 0;
1526
+ left: 0;
1527
+ width: 0;
1528
+ height: 100%;
1529
+ background-color: var(--player-seekbar-current-color);
1530
+ transition: all 0.1s ease-out;
1678
1531
  }
1679
- .media-control-audiotracks button:hover {
1680
- color: white;
1532
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled {
1533
+ cursor: default;
1534
+ display: none;
1681
1535
  }
1682
- .media-control-audiotracks button.changing {
1683
- animation: pulse 0.5s infinite alternate;
1536
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled + .bar-scrubber[data-seekbar] {
1537
+ cursor: default;
1538
+ display: none;
1684
1539
  }
1685
- .media-control-audiotracks button span.audio-arrow {
1686
- width: 9px;
1687
- height: 6px;
1688
- margin-left: 5px;
1540
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {
1541
+ position: absolute;
1542
+ transform: translateX(-50%);
1543
+ top: -11.5px;
1544
+ left: 0;
1545
+ width: 20px;
1546
+ height: 20px;
1547
+ opacity: 1;
1548
+ transition: all 0.1s ease-out;
1689
1549
  }
1690
- .media-control-audiotracks .menu {
1691
- max-width: 114px;
1692
- list-style-type: none;
1550
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-scrubber[data-seekbar] .bar-scrubber-icon[data-seekbar] {
1693
1551
  position: absolute;
1694
- background-color: rgba(74, 74, 74, 0.6);
1695
- border: none;
1696
- min-width: 60px;
1697
- border-radius: 4px;
1698
- bottom: 40px;
1699
- right: -2px;
1552
+ left: 4.5px;
1553
+ top: 4.5px;
1554
+ width: 11px;
1555
+ height: 11px;
1556
+ border-radius: 50%;
1557
+ background-color: white;
1700
1558
  }
1701
- .media-control-audiotracks .menu.hidden {
1702
- display: none;
1559
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] {
1560
+ display: flex;
1561
+ justify-content: flex-start;
1562
+ height: var(--bottom-panel);
1563
+ cursor: pointer;
1564
+ box-sizing: border-box;
1703
1565
  }
1704
- .media-control-audiotracks li {
1705
- font-size: var(--font-size-media-controls-dropdown);
1706
- text-align: right;
1707
- height: 30px;
1566
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] {
1567
+ bottom: 0;
1708
1568
  }
1709
- .media-control-audiotracks li[data-title] {
1710
- background-color: #c3c2c2;
1711
- padding: 5px;
1569
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {
1570
+ background-color: transparent;
1571
+ border: 0;
1572
+ box-sizing: content-box;
1573
+ height: var(--bottom-panel);
1574
+ width: 20px;
1712
1575
  }
1713
- .media-control-audiotracks li a {
1714
- display: block;
1715
- text-decoration: none;
1716
- text-overflow: ellipsis;
1717
- overflow: hidden;
1718
- white-space: nowrap;
1719
- height: 30px;
1720
- padding: 5px 10px;
1721
- color: #fffffe;
1576
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {
1577
+ height: 20px;
1578
+ position: relative;
1579
+ top: 3px;
1580
+ margin-top: 7px;
1722
1581
  }
1723
- .media-control-audiotracks li a:hover {
1724
- text-decoration: none;
1725
- background-color: rgba(0, 0, 0, 0.4);
1726
- color: white;
1582
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg path {
1583
+ fill: white;
1727
1584
  }
1728
- .media-control-audiotracks li.current a {
1729
- color: #f00;
1585
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume].muted svg {
1586
+ margin-left: 2px;
1730
1587
  }
1731
- .media-control-audiotracks li:first-child a {
1732
- border-bottom-left-radius: 4px;
1733
- border-bottom-right-radius: 4px;
1588
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {
1589
+ position: relative;
1590
+ margin-left: 10px;
1591
+ top: 8px;
1592
+ width: 80px;
1593
+ height: 23px;
1594
+ padding: 3px 0;
1595
+ transition: width 0.2s ease-out;
1734
1596
  }
1735
- .media-control-audiotracks li:last-child a {
1736
- border-top-left-radius: 4px;
1737
- border-top-right-radius: 4px;
1597
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] {
1598
+ height: 3px;
1599
+ border-radius: 100px;
1600
+ position: relative;
1601
+ top: 7px;
1602
+ background-color: #666;
1738
1603
  }
1739
-
1740
- @keyframes pulse {
1741
- 0% {
1742
- color: #fff;
1743
- }
1744
- 50% {
1745
- color: #ff0101;
1746
- }
1747
- 100% {
1748
- color: #B80000;
1749
- }
1750
- }.seek-time[data-seek-time] {
1604
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-1[data-volume] {
1751
1605
  position: absolute;
1752
- white-space: nowrap;
1753
- height: 20px;
1754
- line-height: 20px;
1755
- font-size: 0;
1756
- left: -100%;
1757
- bottom: 55px;
1758
- background-color: rgba(2, 2, 2, 0.5);
1759
- z-index: 9999;
1760
- transition: opacity 0.1s ease;
1761
- }
1762
- .seek-time[data-seek-time].hidden[data-seek-time] {
1763
- opacity: 0;
1606
+ top: 0;
1607
+ left: 0;
1608
+ width: 0;
1609
+ height: 100%;
1610
+ border-radius: 100px;
1611
+ background-color: white;
1612
+ transition: all 0.1s ease-out;
1764
1613
  }
1765
- .seek-time[data-seek-time] [data-seek-time] {
1766
- display: inline-block;
1767
- color: white;
1768
- font-size: 10px;
1769
- padding-left: 7px;
1770
- padding-right: 7px;
1771
- vertical-align: top;
1614
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-2[data-volume] {
1615
+ position: absolute;
1616
+ top: 0;
1617
+ left: 0;
1618
+ width: 0;
1619
+ height: 100%;
1620
+ background-color: var(--player-vod-color);
1621
+ transition: all 0.1s ease-out;
1772
1622
  }
1773
- .seek-time[data-seek-time] [data-duration] {
1774
- display: inline-block;
1775
- color: rgba(255, 255, 255, 0.5);
1776
- font-size: 10px;
1777
- padding-right: 7px;
1778
- vertical-align: top;
1623
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] {
1624
+ position: absolute;
1625
+ transform: translateX(-50%);
1626
+ top: 3px;
1627
+ margin-left: 3px;
1628
+ width: 16px;
1629
+ height: 16px;
1630
+ opacity: 1;
1631
+ transition: all 0.1s ease-out;
1779
1632
  }
1780
- .seek-time[data-seek-time] [data-duration]::before {
1781
- content: "|";
1782
- margin-right: 7px;
1783
- }.scrub-thumbnails {
1633
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] .bar-scrubber-icon[data-volume] {
1784
1634
  position: absolute;
1785
- bottom: 52px;
1786
- width: 100%;
1787
- transition: opacity 0.3s ease;
1635
+ left: 3px;
1636
+ top: 5px;
1637
+ width: 7px;
1638
+ height: 7px;
1639
+ border-radius: 50%;
1640
+ background-color: white;
1788
1641
  }
1789
- .scrub-thumbnails.hidden {
1790
- opacity: 0;
1642
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume] {
1643
+ float: left;
1644
+ width: 4px;
1645
+ padding-left: 2px;
1646
+ height: 12px;
1647
+ opacity: 0.5;
1648
+ box-shadow: inset 2px 0 0 white;
1649
+ transition: transform 0.2s ease-out;
1791
1650
  }
1792
- .scrub-thumbnails .thumbnail-container {
1793
- display: inline-block;
1794
- position: relative;
1795
- overflow: hidden;
1796
- background-color: #000;
1651
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume].fill {
1652
+ box-shadow: inset 2px 0 0 #fff;
1653
+ opacity: 1;
1797
1654
  }
1798
- .scrub-thumbnails .thumbnail-container .thumbnail-img {
1799
- position: absolute;
1655
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:nth-of-type(1) {
1656
+ padding-left: 0;
1657
+ }
1658
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:hover {
1659
+ transform: scaleY(1.5);
1660
+ }
1661
+
1662
+ /* TODO distribute between plugins' styles */
1663
+ .media-control-skin-1[data-media-control-skin-1] .media-control-cc button[data-cc-button] {
1664
+ display: flex;
1665
+ justify-content: center;
1666
+ padding: 0;
1667
+ align-items: center;
1668
+ }
1669
+ .media-control-skin-1[data-media-control-skin-1] .media-control-cc button[data-cc-button]:hover {
1670
+ color: white;
1671
+ }
1672
+ .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul {
1673
+ background-color: rgba(74, 74, 74, 0.6);
1674
+ border: none;
1800
1675
  width: auto;
1676
+ border-radius: 4px;
1677
+ bottom: 52px;
1678
+ margin-left: -28px;
1801
1679
  }
1802
- .scrub-thumbnails .thumbnails-text {
1803
- background-color: rgba(74, 74, 74, 0.7);
1804
- border-radius: 3px;
1680
+ .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li {
1681
+ font-size: 16px;
1682
+ text-align: center;
1805
1683
  white-space: nowrap;
1806
- overflow: hidden;
1807
- text-overflow: ellipsis;
1808
- color: white;
1809
- position: absolute;
1810
- bottom: 23px;
1811
- width: 100px;
1684
+ height: 30px;
1812
1685
  }
1813
- .scrub-thumbnails .spotlight {
1814
- background-color: #4a4a4a;
1815
- overflow: hidden;
1816
- position: absolute;
1817
- bottom: 0;
1818
- left: 0;
1819
- border-color: #4a4a4a;
1820
- border-style: solid;
1821
- border-width: 3px;
1822
- border-radius: 3px;
1686
+ .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li a {
1687
+ height: 30px;
1688
+ padding: 5px 10px;
1689
+ color: #fffffe;
1823
1690
  }
1824
- .scrub-thumbnails .spotlight img {
1825
- width: auto;
1691
+ .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li a:hover {
1692
+ background-color: rgba(0, 0, 0, 0.4);
1826
1693
  }
1827
- .scrub-thumbnails .backdrop {
1828
- position: absolute;
1829
- left: 0;
1830
- bottom: 0;
1831
- right: 0;
1832
- background-color: #000;
1833
- overflow: hidden;
1694
+ .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li.current a {
1695
+ background-color: rgba(0, 0, 0, 0.4);
1834
1696
  }
1835
- .scrub-thumbnails .backdrop .carousel {
1836
- position: absolute;
1837
- top: 0;
1838
- left: 0;
1839
- height: 100%;
1840
- white-space: nowrap;
1697
+ .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li:first-child a {
1698
+ border-bottom-left-radius: 4px;
1699
+ border-bottom-right-radius: 4px;
1841
1700
  }
1842
- .scrub-thumbnails .backdrop .carousel img {
1843
- width: auto;
1844
- }.spinner-three-bounce[data-spinner] {
1845
- position: absolute;
1846
- width: 70px;
1847
- text-align: center;
1848
- z-index: 999;
1849
- left: 0;
1850
- right: 0;
1851
- margin: 0 auto;
1852
- margin-left: auto;
1853
- margin-right: auto;
1854
- /* center vertically */
1855
- top: 50%;
1856
- transform: translateY(-50%);
1701
+ .media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li:last-child a {
1702
+ border-top-left-radius: 4px;
1703
+ border-top-right-radius: 4px;
1857
1704
  }
1858
- .spinner-three-bounce[data-spinner] > div {
1859
- width: 18px;
1860
- height: 18px;
1861
- background-color: #FFF;
1862
- border-radius: 100%;
1863
- display: inline-block;
1864
- animation: bouncedelay 1.4s infinite ease-in-out;
1865
- /* Prevent first frame from flickering when animation starts */
1866
- animation-fill-mode: both;
1705
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] {
1706
+ height: 26px;
1707
+ line-height: 26px;
1708
+ bottom: 52px;
1709
+ border-radius: 3px;
1710
+ background-color: rgba(74, 74, 74, 0.7);
1867
1711
  }
1868
- .spinner-three-bounce[data-spinner] [data-bounce1] {
1869
- animation-delay: -0.32s;
1712
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span {
1713
+ letter-spacing: 0.8px;
1714
+ font-size: 14px;
1715
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1870
1716
  }
1871
- .spinner-three-bounce[data-spinner] [data-bounce2] {
1872
- animation-delay: -0.16s;
1717
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-seek-time] {
1718
+ padding-left: 8px;
1719
+ padding-right: 8px;
1873
1720
  }
1874
-
1875
- @keyframes bouncedelay {
1876
- 0%, 80%, 100% {
1877
- transform: scale(0);
1878
- }
1879
- 40% {
1880
- transform: scale(1);
1881
- }
1721
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-duration] {
1722
+ display: none !important;
1882
1723
  }*,
1883
1724
  :focus,
1884
1725
  :visited {
@@ -1952,6 +1793,39 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1952
1793
  .ios-fullscreen::cue {
1953
1794
  visibility: visible !important;
1954
1795
  font-size: 1em !important;
1796
+ }.seek-time[data-seek-time] {
1797
+ position: absolute;
1798
+ white-space: nowrap;
1799
+ height: 20px;
1800
+ line-height: 20px;
1801
+ font-size: 0;
1802
+ left: -100%;
1803
+ bottom: 55px;
1804
+ background-color: rgba(2, 2, 2, 0.5);
1805
+ z-index: 9999;
1806
+ transition: opacity 0.1s ease;
1807
+ }
1808
+ .seek-time[data-seek-time].hidden[data-seek-time] {
1809
+ opacity: 0;
1810
+ }
1811
+ .seek-time[data-seek-time] [data-seek-time] {
1812
+ display: inline-block;
1813
+ color: white;
1814
+ font-size: 10px;
1815
+ padding-left: 7px;
1816
+ padding-right: 7px;
1817
+ vertical-align: top;
1818
+ }
1819
+ .seek-time[data-seek-time] [data-duration] {
1820
+ display: inline-block;
1821
+ color: rgba(255, 255, 255, 0.5);
1822
+ font-size: 10px;
1823
+ padding-right: 7px;
1824
+ vertical-align: top;
1825
+ }
1826
+ .seek-time[data-seek-time] [data-duration]::before {
1827
+ content: "|";
1828
+ margin-right: 7px;
1955
1829
  }.share_plugin[data-share] {
1956
1830
  pointer-events: auto;
1957
1831
  z-index: 5;
@@ -2035,6 +1909,139 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
2035
1909
  display: inline-block;
2036
1910
  margin-right: 5px;
2037
1911
  cursor: pointer;
1912
+ }div.player-error-screen, [data-player] div.player-error-screen {
1913
+ color: #CCCACA;
1914
+ position: absolute;
1915
+ top: 0;
1916
+ height: 100%;
1917
+ width: 100%;
1918
+ background-color: rgba(0, 0, 0, 0.7);
1919
+ z-index: 2000;
1920
+ display: flex;
1921
+ flex-direction: column;
1922
+ justify-content: center;
1923
+ }
1924
+ div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
1925
+ font-size: 14px;
1926
+ color: #CCCACA;
1927
+ margin-top: 45px;
1928
+ }
1929
+ div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
1930
+ font-weight: bold;
1931
+ line-height: 30px;
1932
+ font-size: 18px;
1933
+ }
1934
+ div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
1935
+ width: 90%;
1936
+ margin: 0 auto;
1937
+ }
1938
+ div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
1939
+ font-size: 13px;
1940
+ margin-top: 15px;
1941
+ }
1942
+ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1943
+ cursor: pointer;
1944
+ width: 30px;
1945
+ margin: 15px auto 0;
1946
+ }.spinner-three-bounce[data-spinner] {
1947
+ position: absolute;
1948
+ width: 70px;
1949
+ text-align: center;
1950
+ z-index: 999;
1951
+ left: 0;
1952
+ right: 0;
1953
+ margin: 0 auto;
1954
+ margin-left: auto;
1955
+ margin-right: auto;
1956
+ /* center vertically */
1957
+ top: 50%;
1958
+ transform: translateY(-50%);
1959
+ }
1960
+ .spinner-three-bounce[data-spinner] > div {
1961
+ width: 18px;
1962
+ height: 18px;
1963
+ background-color: #FFF;
1964
+ border-radius: 100%;
1965
+ display: inline-block;
1966
+ animation: bouncedelay 1.4s infinite ease-in-out;
1967
+ /* Prevent first frame from flickering when animation starts */
1968
+ animation-fill-mode: both;
1969
+ }
1970
+ .spinner-three-bounce[data-spinner] [data-bounce1] {
1971
+ animation-delay: -0.32s;
1972
+ }
1973
+ .spinner-three-bounce[data-spinner] [data-bounce2] {
1974
+ animation-delay: -0.16s;
1975
+ }
1976
+
1977
+ @keyframes bouncedelay {
1978
+ 0%, 80%, 100% {
1979
+ transform: scale(0);
1980
+ }
1981
+ 40% {
1982
+ transform: scale(1);
1983
+ }
1984
+ }.scrub-thumbnails {
1985
+ position: absolute;
1986
+ bottom: 52px;
1987
+ width: 100%;
1988
+ transition: opacity 0.3s ease;
1989
+ }
1990
+ .scrub-thumbnails.hidden {
1991
+ opacity: 0;
1992
+ }
1993
+ .scrub-thumbnails .thumbnail-container {
1994
+ display: inline-block;
1995
+ position: relative;
1996
+ overflow: hidden;
1997
+ background-color: #000;
1998
+ }
1999
+ .scrub-thumbnails .thumbnail-container .thumbnail-img {
2000
+ position: absolute;
2001
+ width: auto;
2002
+ }
2003
+ .scrub-thumbnails .thumbnails-text {
2004
+ background-color: rgba(74, 74, 74, 0.7);
2005
+ border-radius: 3px;
2006
+ white-space: nowrap;
2007
+ overflow: hidden;
2008
+ text-overflow: ellipsis;
2009
+ color: white;
2010
+ position: absolute;
2011
+ bottom: 23px;
2012
+ width: 100px;
2013
+ }
2014
+ .scrub-thumbnails .spotlight {
2015
+ background-color: #4a4a4a;
2016
+ overflow: hidden;
2017
+ position: absolute;
2018
+ bottom: 0;
2019
+ left: 0;
2020
+ border-color: #4a4a4a;
2021
+ border-style: solid;
2022
+ border-width: 3px;
2023
+ border-radius: 3px;
2024
+ }
2025
+ .scrub-thumbnails .spotlight img {
2026
+ width: auto;
2027
+ }
2028
+ .scrub-thumbnails .backdrop {
2029
+ position: absolute;
2030
+ left: 0;
2031
+ bottom: 0;
2032
+ right: 0;
2033
+ background-color: #000;
2034
+ overflow: hidden;
2035
+ }
2036
+ .scrub-thumbnails .backdrop .carousel {
2037
+ position: absolute;
2038
+ top: 0;
2039
+ left: 0;
2040
+ height: 100%;
2041
+ white-space: nowrap;
2042
+ }
2043
+ .scrub-thumbnails .backdrop .carousel img {
2044
+ width: auto;
2038
2045
  }.player-logo[data-logo] {
2039
2046
  position: absolute;
2040
2047
  z-index: 2;