@gcorevideo/player 2.22.7 → 2.22.9

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