@gcorevideo/player 2.22.28 → 2.22.30

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