@gcorevideo/player 2.24.2 → 2.24.3

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