@gcorevideo/player 2.25.3 → 2.25.4

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