@gcorevideo/player 2.19.9 → 2.19.11

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