@gcorevideo/player 2.23.2 → 2.23.3

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