@gcorevideo/player 2.24.0 → 2.24.1

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