@gcorevideo/player 2.20.4 → 2.20.5

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