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