@gcorevideo/player 2.19.3 → 2.19.5

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