@gcorevideo/player 2.20.11 → 2.20.13

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