@gcorevideo/player 2.22.23 → 2.22.25

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