@gcorevideo/player 2.22.27 → 2.22.29

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