@gcorevideo/player 2.22.7 → 2.22.8

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