@gcorevideo/player 2.22.10 → 2.22.12

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