@gcorevideo/player 2.20.13 → 2.20.15

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