@gcorevideo/player 2.24.1 → 2.24.2

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