@gcorevideo/player 2.19.4 → 2.19.6

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