@gcorevideo/player 2.19.8 → 2.19.9

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