@gcorevideo/player 2.19.5 → 2.19.6

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.
@@ -122,118 +122,115 @@
122
122
  .gplayer-lite-btn::-moz-focus-inner {
123
123
  border: 0;
124
124
  padding: 0;
125
- }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
126
- float: right;
127
- font-family: Roboto, "Open Sans", Arial, sans-serif;
128
- }
129
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear {
130
- height: 40px;
131
- width: 40px;
132
- padding-right: 20px;
133
- }
134
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear svg {
135
- height: 20px;
136
- }
137
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
125
+ }.clips.bar-container[data-seekbar] {
126
+ clip-path: url("#myClip");
127
+ }.big-mute-icon-wrapper[data-big-mute] {
138
128
  position: absolute;
139
- right: 16px;
140
- bottom: 52px;
141
- display: none;
142
- width: 250px;
143
- min-height: 48px;
144
- z-index: 9999;
145
- border-radius: 4px;
146
- }
147
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
148
- padding: 8px 0;
149
- }
150
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list svg {
151
- float: left;
152
- margin-right: 10px;
153
- }
154
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
155
- margin: 0;
156
- text-align: left;
157
- line-height: 22px;
158
- padding: 5px 14px;
159
- width: 250px;
160
- font-size: 12px;
161
- }
162
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_arrow-right-icon {
163
- float: right;
164
- margin-right: -14px;
129
+ z-index: 9998;
130
+ background-color: transparent;
131
+ display: flex;
132
+ justify-content: center;
133
+ width: 100%;
134
+ height: calc(100% - 50px);
135
+ margin: 0 auto;
136
+ opacity: 0.75;
137
+ transition: opacity 0.1s ease;
138
+ pointer-events: auto;
165
139
  }
166
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_value {
167
- float: right;
168
- margin-right: 8px;
140
+ .big-mute-icon-wrapper[data-big-mute].hide {
141
+ display: none;
169
142
  }
170
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option svg {
171
- height: 20px;
172
- }*, :focus, :visited {
173
- outline: none !important;
143
+ .big-mute-icon-wrapper[data-big-mute]:hover {
144
+ cursor: pointer;
174
145
  }
175
146
 
176
- .gear-wrapper .go-back {
177
- font-weight: 600;
178
- font-size: 14px;
179
- line-height: 20px;
180
- width: 100%;
181
- text-align: left;
182
- padding: 12px;
147
+ .big-mute-icon[data-big-mute-icon] {
148
+ display: flex;
149
+ align-items: center;
150
+ justify-content: center;
151
+ align-self: center;
152
+ width: 120px;
153
+ height: 120px;
154
+ border: 2px solid white;
155
+ border-radius: 50%;
156
+ filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
157
+ filter: alpha(opacity=60);
158
+ opacity: 1;
159
+ box-shadow: 0 0 1px 0 white;
160
+ background: rgba(240, 243, 247, 0.9411764706);
161
+ z-index: 10000;
183
162
  }
184
- .gear-wrapper .go-back .arrow-left-icon {
185
- float: left;
186
- padding-top: 2px;
187
- padding-right: 2px;
163
+ .big-mute-icon[data-big-mute-icon] svg {
164
+ margin-left: 5px;
165
+ width: 80px;
166
+ height: 80px;
188
167
  }
189
- .gear-wrapper .go-back .arrow-left-icon svg {
190
- height: 16px;
168
+ .big-mute-icon[data-big-mute-icon] svg path {
169
+ fill: #1f1e1e !important;
191
170
  }
192
- .gear-wrapper ul.gear-sub-menu {
193
- width: 100%;
194
- list-style-type: none;
195
- background-color: transparent;
196
- min-width: 60px;
197
- border-top: 2px solid rgb(36, 36, 36);
171
+ .big-mute-icon[data-big-mute-icon]:hover {
172
+ background: rgba(240, 243, 247, 0.8784313725);
198
173
  }
199
- .gear-wrapper ul.gear-sub-menu li {
174
+ .big-mute-icon[data-big-mute-icon]:hover svg path {
175
+ fill: #151515 !important;
176
+ }.context-menu {
177
+ z-index: 999;
178
+ position: absolute;
179
+ top: 0;
180
+ left: 0;
181
+ text-align: center;
182
+ }
183
+ .context-menu .context-menu-list {
184
+ font-family: "Proxima Nova", sans-serif;
200
185
  font-size: 12px;
186
+ line-height: 12px;
187
+ list-style-type: none;
201
188
  text-align: left;
202
- }
203
- .gear-wrapper ul.gear-sub-menu li[data-title] {
204
- background-color: #c3c2c2;
205
189
  padding: 5px;
190
+ margin-left: auto;
191
+ margin-right: auto;
192
+ background-color: rgba(0, 0, 0, 0.75);
193
+ border: 1px solid #666;
194
+ border-radius: 4px;
206
195
  }
207
- .gear-wrapper ul.gear-sub-menu li a {
208
- display: block;
209
- text-decoration: none;
210
- height: 32px;
211
- padding: 5px 10px;
212
- line-height: 22px;
213
- color: #fffffe;
214
- }
215
- .gear-wrapper ul.gear-sub-menu li a:hover {
196
+ .context-menu .context-menu-list .context-menu-list-item {
216
197
  color: white;
217
- background-color: rgba(0, 0, 0, 0.4);
198
+ padding: 5px;
199
+ cursor: pointer;
200
+ }div.player-error-screen, [data-player] div.player-error-screen {
201
+ color: #CCCACA;
202
+ position: absolute;
203
+ top: 0;
204
+ height: 100%;
205
+ width: 100%;
206
+ background-color: rgba(0, 0, 0, 0.7);
207
+ z-index: 2000;
208
+ display: flex;
209
+ flex-direction: column;
210
+ justify-content: center;
218
211
  }
219
- .gear-wrapper ul.gear-sub-menu li a:hover a {
220
- color: white;
221
- text-decoration: none;
212
+ div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
213
+ font-size: 14px;
214
+ color: #CCCACA;
215
+ margin-top: 45px;
222
216
  }
223
- .gear-wrapper ul.gear-sub-menu li a .check-icon {
224
- width: 30px;
225
- height: 20px;
226
- float: left;
227
- display: block;
217
+ div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
218
+ font-weight: bold;
219
+ line-height: 30px;
220
+ font-size: 18px;
228
221
  }
229
- .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
230
- display: none;
222
+ div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
223
+ width: 90%;
224
+ margin: 0 auto;
231
225
  }
232
- .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
233
- display: inline;
226
+ div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
227
+ font-size: 13px;
228
+ margin-top: 15px;
234
229
  }
235
- .gear-wrapper svg {
236
- height: 20px;
230
+ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
231
+ cursor: pointer;
232
+ width: 30px;
233
+ margin: 15px auto 0;
237
234
  }.dvr-controls[data-dvr-controls] {
238
235
  display: inline-block;
239
236
  float: left;
@@ -340,309 +337,42 @@
340
337
 
341
338
  .media-control.live[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
342
339
  background-color: #ff0101;
343
- }.clips.bar-container[data-seekbar] {
344
- clip-path: url("#myClip");
345
- }.big-mute-icon-wrapper[data-big-mute] {
346
- position: absolute;
347
- z-index: 9998;
348
- background-color: transparent;
349
- display: flex;
350
- justify-content: center;
351
- width: 100%;
352
- height: calc(100% - 50px);
353
- margin: 0 auto;
354
- opacity: 0.75;
355
- transition: opacity 0.1s ease;
356
- pointer-events: auto;
340
+ }*, :focus, :visited {
341
+ outline: none !important;
357
342
  }
358
- .big-mute-icon-wrapper[data-big-mute].hide {
359
- display: none;
343
+
344
+ .audio_selector[data-track-selector] {
345
+ float: right;
346
+ margin-top: 4px;
347
+ position: relative;
348
+ width: 50px;
349
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
360
350
  }
361
- .big-mute-icon-wrapper[data-big-mute]:hover {
351
+ .audio_selector[data-track-selector] button {
352
+ background-color: transparent;
353
+ color: #fff;
354
+ -webkit-font-smoothing: antialiased;
355
+ border: none;
356
+ font-size: 14px;
362
357
  cursor: pointer;
363
358
  }
364
-
365
- .big-mute-icon[data-big-mute-icon] {
366
- display: flex;
367
- align-items: center;
368
- justify-content: center;
369
- align-self: center;
370
- width: 120px;
371
- height: 120px;
372
- border: 2px solid white;
373
- border-radius: 50%;
374
- filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
375
- filter: alpha(opacity=60);
376
- opacity: 1;
377
- box-shadow: 0 0 1px 0 white;
378
- background: rgba(240, 243, 247, 0.9411764706);
379
- z-index: 10000;
380
- }
381
- .big-mute-icon[data-big-mute-icon] svg {
382
- margin-left: 5px;
383
- width: 80px;
384
- height: 80px;
359
+ .audio_selector[data-track-selector] button .audio-text {
360
+ text-overflow: ellipsis;
361
+ overflow: hidden;
362
+ white-space: nowrap;
363
+ max-width: 100px;
364
+ background-color: transparent;
365
+ -webkit-font-smoothing: antialiased;
366
+ border: none;
367
+ font-size: 14px;
368
+ cursor: pointer;
369
+ padding-top: 5px;
385
370
  }
386
- .big-mute-icon[data-big-mute-icon] svg path {
387
- fill: #1f1e1e !important;
371
+ .audio_selector[data-track-selector] button:hover {
372
+ color: #c9c9c9;
388
373
  }
389
- .big-mute-icon[data-big-mute-icon]:hover {
390
- background: rgba(240, 243, 247, 0.8784313725);
391
- }
392
- .big-mute-icon[data-big-mute-icon]:hover svg path {
393
- fill: #151515 !important;
394
- }div.player-error-screen, [data-player] div.player-error-screen {
395
- color: #CCCACA;
396
- position: absolute;
397
- top: 0;
398
- height: 100%;
399
- width: 100%;
400
- background-color: rgba(0, 0, 0, 0.7);
401
- z-index: 2000;
402
- display: flex;
403
- flex-direction: column;
404
- justify-content: center;
405
- }
406
- div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
407
- font-size: 14px;
408
- color: #CCCACA;
409
- margin-top: 45px;
410
- }
411
- div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
412
- font-weight: bold;
413
- line-height: 30px;
414
- font-size: 18px;
415
- }
416
- div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
417
- width: 90%;
418
- margin: 0 auto;
419
- }
420
- div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
421
- font-size: 13px;
422
- margin-top: 15px;
423
- }
424
- div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
425
- cursor: pointer;
426
- width: 30px;
427
- margin: 15px auto 0;
428
- }.level-disabled {
429
- opacity: 0.5;
430
- pointer-events: none;
431
- }.context-menu {
432
- z-index: 999;
433
- position: absolute;
434
- top: 0;
435
- left: 0;
436
- text-align: center;
437
- }
438
- .context-menu .context-menu-list {
439
- font-family: "Proxima Nova", sans-serif;
440
- font-size: 12px;
441
- line-height: 12px;
442
- list-style-type: none;
443
- text-align: left;
444
- padding: 5px;
445
- margin-left: auto;
446
- margin-right: auto;
447
- background-color: rgba(0, 0, 0, 0.75);
448
- border: 1px solid #666;
449
- border-radius: 4px;
450
- }
451
- .context-menu .context-menu-list .context-menu-list-item {
452
- color: white;
453
- padding: 5px;
454
- cursor: pointer;
455
- }*, :focus, :visited {
456
- outline: none !important;
457
- }
458
-
459
- .multicamera[data-multicamera] {
460
- float: right;
461
- margin-top: 4px;
462
- position: relative;
463
- margin-right: 20px;
464
- width: 20px;
465
- }
466
- .multicamera[data-multicamera] button {
467
- background-color: transparent;
468
- color: #fff;
469
- font-family: Roboto, "Open Sans", Arial, sans-serif;
470
- -webkit-font-smoothing: antialiased;
471
- border: none;
472
- font-size: 14px;
473
- padding: 0;
474
- }
475
- .multicamera[data-multicamera] button svg {
476
- height: 20px;
477
- position: relative;
478
- margin-top: 6px;
479
- }
480
- .multicamera[data-multicamera] button:hover {
481
- color: #c9c9c9;
482
- }
483
- .multicamera[data-multicamera] button.changing {
484
- animation: pulse 0.5s infinite alternate;
485
- }
486
- .multicamera[data-multicamera] button span.quality-arrow {
487
- width: 9px;
488
- height: 6px;
489
- margin-top: 11px;
490
- margin-left: 5px;
491
- }
492
- .multicamera[data-multicamera] > ul {
493
- padding: 6px 0;
494
- right: -24px;
495
- width: 245px;
496
- list-style-type: none;
497
- position: absolute;
498
- bottom: 48px;
499
- border-radius: 4px;
500
- display: none;
501
- background-color: rgba(74, 74, 74, 0.9);
502
- }
503
- .multicamera[data-multicamera] > ul::after {
504
- content: "";
505
- position: absolute;
506
- top: 100%;
507
- left: 85%;
508
- margin-left: -10px;
509
- width: 0;
510
- height: 0;
511
- border-top: 10px solid rgba(74, 74, 74, 0.9);
512
- border-right: 10px solid transparent;
513
- border-left: 10px solid transparent;
514
- }
515
- .multicamera[data-multicamera] li {
516
- font-size: 10px;
517
- cursor: pointer;
518
- }
519
- .multicamera[data-multicamera] li .multicamera-item {
520
- display: flex;
521
- padding: 10px 0;
522
- justify-content: center;
523
- position: relative;
524
- }
525
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
526
- pointer-events: none;
527
- }
528
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
529
- opacity: 0.5;
530
- }
531
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
532
- opacity: 0.5;
533
- }
534
- .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
535
- background-color: rgba(0, 0, 0, 0);
536
- }
537
- .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
538
- background-color: rgba(0, 0, 0, 0.3);
539
- }
540
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
541
- width: 80px;
542
- height: 60px;
543
- }
544
- .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
545
- width: 80px;
546
- height: 60px;
547
- }
548
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
549
- width: 120px;
550
- text-align: left;
551
- margin-left: 15px;
552
- }
553
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title, .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
554
- width: 120px;
555
- height: 20px;
556
- font-family: Roboto, "Open Sans", Arial, sans-serif;
557
- font-size: 14px;
558
- font-weight: normal;
559
- font-style: normal;
560
- font-stretch: normal;
561
- line-height: 1.43;
562
- letter-spacing: normal;
563
- text-align: left;
564
- color: #fff;
565
- text-overflow: ellipsis;
566
- overflow: hidden;
567
- }
568
- .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
569
- opacity: 0.6;
570
- }
571
- .multicamera[data-multicamera] li[data-title] {
572
- background-color: #c3c2c2;
573
- padding: 5px;
574
- }
575
- .multicamera[data-multicamera] li a {
576
- color: #444;
577
- padding: 2px 10px;
578
- display: block;
579
- text-decoration: none;
580
- }
581
- .multicamera[data-multicamera] li a:hover {
582
- background-color: #555;
583
- color: white;
584
- }
585
- .multicamera[data-multicamera] li a:hover a {
586
- color: white;
587
- text-decoration: none;
588
- }
589
- .multicamera[data-multicamera] li.current a {
590
- color: #f00;
591
- }
592
-
593
- @keyframes pulse {
594
- 0% {
595
- color: #fff;
596
- }
597
- 50% {
598
- color: #ff0101;
599
- }
600
- 100% {
601
- color: #B80000;
602
- }
603
- }.media-control-pip button {
604
- float: right;
605
- height: 40px;
606
- margin-right: 20px;
607
- }
608
- .media-control-pip button svg {
609
- height: 20px;
610
- }*, :focus, :visited {
611
- outline: none !important;
612
- }
613
-
614
- .audio_selector[data-track-selector] {
615
- float: right;
616
- margin-top: 4px;
617
- position: relative;
618
- width: 50px;
619
- font-family: Roboto, "Open Sans", Arial, sans-serif;
620
- }
621
- .audio_selector[data-track-selector] button {
622
- background-color: transparent;
623
- color: #fff;
624
- -webkit-font-smoothing: antialiased;
625
- border: none;
626
- font-size: 14px;
627
- cursor: pointer;
628
- }
629
- .audio_selector[data-track-selector] button .audio-text {
630
- text-overflow: ellipsis;
631
- overflow: hidden;
632
- white-space: nowrap;
633
- max-width: 100px;
634
- background-color: transparent;
635
- -webkit-font-smoothing: antialiased;
636
- border: none;
637
- font-size: 14px;
638
- cursor: pointer;
639
- padding-top: 5px;
640
- }
641
- .audio_selector[data-track-selector] button:hover {
642
- color: #c9c9c9;
643
- }
644
- .audio_selector[data-track-selector] button.changing {
645
- animation: pulse 0.5s infinite alternate;
374
+ .audio_selector[data-track-selector] button.changing {
375
+ animation: pulse 0.5s infinite alternate;
646
376
  }
647
377
  .audio_selector[data-track-selector] button span.audio-arrow {
648
378
  width: 9px;
@@ -744,40 +474,128 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
744
474
  100% {
745
475
  color: #B80000;
746
476
  }
747
- }.player-poster[data-poster] {
748
- display: flex;
749
- justify-content: center;
750
- align-items: center;
477
+ }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
478
+ float: right;
479
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
480
+ }
481
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear {
482
+ height: 40px;
483
+ width: 40px;
484
+ padding-right: 20px;
485
+ }
486
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear svg {
487
+ height: 20px;
488
+ }
489
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
751
490
  position: absolute;
752
- height: 100%;
491
+ right: 16px;
492
+ bottom: 52px;
493
+ display: none;
494
+ width: 250px;
495
+ min-height: 48px;
496
+ z-index: 9999;
497
+ border-radius: 4px;
498
+ }
499
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
500
+ padding: 8px 0;
501
+ }
502
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list svg {
503
+ float: left;
504
+ margin-right: 10px;
505
+ }
506
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
507
+ margin: 0;
508
+ text-align: left;
509
+ line-height: 22px;
510
+ padding: 5px 14px;
511
+ width: 250px;
512
+ font-size: 12px;
513
+ }
514
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_arrow-right-icon {
515
+ float: right;
516
+ margin-right: -14px;
517
+ }
518
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_value {
519
+ float: right;
520
+ margin-right: 8px;
521
+ }
522
+ .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option svg {
523
+ height: 20px;
524
+ }.level-disabled {
525
+ opacity: 0.5;
526
+ pointer-events: none;
527
+ }*, :focus, :visited {
528
+ outline: none !important;
529
+ }
530
+
531
+ .gear-wrapper .go-back {
532
+ font-weight: 600;
533
+ font-size: 14px;
534
+ line-height: 20px;
753
535
  width: 100%;
754
- z-index: 998;
755
- top: 0;
756
- left: 0;
757
- background-color: #000;
758
- background-size: cover;
759
- background-repeat: no-repeat;
760
- background-position: 50% 50%;
536
+ text-align: left;
537
+ padding: 12px;
761
538
  }
762
- .player-poster[data-poster].clickable {
763
- cursor: pointer;
539
+ .gear-wrapper .go-back .arrow-left-icon {
540
+ float: left;
541
+ padding-top: 2px;
542
+ padding-right: 2px;
764
543
  }
765
- .player-poster[data-poster]:hover .play-wrapper[data-poster] {
766
- opacity: 1;
544
+ .gear-wrapper .go-back .arrow-left-icon svg {
545
+ height: 16px;
767
546
  }
768
- .player-poster[data-poster] .play-wrapper[data-poster] {
547
+ .gear-wrapper ul.gear-sub-menu {
769
548
  width: 100%;
770
- height: 25%;
771
- margin: 0 auto;
772
- opacity: 0.75;
773
- transition: opacity 0.1s ease;
549
+ list-style-type: none;
550
+ background-color: transparent;
551
+ min-width: 60px;
552
+ border-top: 2px solid rgb(36, 36, 36);
774
553
  }
775
- .player-poster[data-poster] .play-wrapper[data-poster] svg {
776
- height: 100%;
554
+ .gear-wrapper ul.gear-sub-menu li {
555
+ font-size: 12px;
556
+ text-align: left;
557
+ }
558
+ .gear-wrapper ul.gear-sub-menu li[data-title] {
559
+ background-color: #c3c2c2;
560
+ padding: 5px;
561
+ }
562
+ .gear-wrapper ul.gear-sub-menu li a {
563
+ display: block;
564
+ text-decoration: none;
565
+ height: 32px;
566
+ padding: 5px 10px;
567
+ line-height: 22px;
568
+ color: #fffffe;
569
+ }
570
+ .gear-wrapper ul.gear-sub-menu li a:hover {
571
+ color: white;
572
+ background-color: rgba(0, 0, 0, 0.4);
573
+ }
574
+ .gear-wrapper ul.gear-sub-menu li a:hover a {
575
+ color: white;
576
+ text-decoration: none;
577
+ }
578
+ .gear-wrapper ul.gear-sub-menu li a .check-icon {
579
+ width: 30px;
580
+ height: 20px;
581
+ float: left;
582
+ display: block;
583
+ }
584
+ .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
585
+ display: none;
586
+ }
587
+ .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
777
588
  display: inline;
778
589
  }
779
- .player-poster[data-poster] .play-wrapper[data-poster] svg path {
780
- fill: #fff;
590
+ .gear-wrapper svg {
591
+ height: 20px;
592
+ }.media-control-pip button {
593
+ float: right;
594
+ height: 40px;
595
+ margin-right: 20px;
596
+ }
597
+ .media-control-pip button svg {
598
+ height: 20px;
781
599
  }:root {
782
600
  --primary-background-color: #000;
783
601
  --secondary-background-color: #262626;
@@ -1160,240 +978,101 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1160
978
  .mobile .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul {
1161
979
  width: 25%;
1162
980
  }
1163
- }*, :focus, :visited {
1164
- outline: none !important;
1165
- }
1166
-
1167
- .subtitles[data-subtitles] {
1168
- float: right;
1169
- position: relative;
1170
- width: 50px;
981
+ }.player-poster[data-poster] {
982
+ display: flex;
983
+ justify-content: center;
984
+ align-items: center;
985
+ position: absolute;
986
+ height: 100%;
987
+ width: 100%;
988
+ z-index: 998;
989
+ top: 0;
990
+ left: 0;
991
+ background-color: #000;
992
+ background-size: cover;
993
+ background-repeat: no-repeat;
994
+ background-position: 50% 50%;
1171
995
  }
1172
- .subtitles[data-subtitles] button {
1173
- background-color: transparent;
1174
- color: #fff;
1175
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1176
- -webkit-font-smoothing: antialiased;
1177
- border: none;
1178
- font-size: 14px;
996
+ .player-poster[data-poster].clickable {
1179
997
  cursor: pointer;
1180
998
  }
1181
- .subtitles[data-subtitles] button .subtitle-text svg {
1182
- fill: white;
999
+ .player-poster[data-poster]:hover .play-wrapper[data-poster] {
1000
+ opacity: 1;
1183
1001
  }
1184
- .subtitles[data-subtitles] button:hover {
1185
- color: #c9c9c9;
1002
+ .player-poster[data-poster] .play-wrapper[data-poster] {
1003
+ width: 100%;
1004
+ height: 25%;
1005
+ margin: 0 auto;
1006
+ opacity: 0.75;
1007
+ transition: opacity 0.1s ease;
1186
1008
  }
1187
- .subtitles[data-subtitles] button.changing {
1188
- animation: pulse 0.5s infinite alternate;
1009
+ .player-poster[data-poster] .play-wrapper[data-poster] svg {
1010
+ height: 100%;
1011
+ display: inline;
1189
1012
  }
1190
- .subtitles[data-subtitles] > ul {
1191
- width: 80px;
1192
- list-style-type: none;
1013
+ .player-poster[data-poster] .play-wrapper[data-poster] svg path {
1014
+ fill: #fff;
1015
+ }.scrub-thumbnails {
1193
1016
  position: absolute;
1194
- bottom: 25px;
1195
- border: 1px solid black;
1196
- display: none;
1197
- background-color: #e6e6e6;
1017
+ bottom: 52px;
1018
+ width: 100%;
1019
+ transition: opacity 0.3s ease;
1198
1020
  }
1199
- .subtitles[data-subtitles] li {
1200
- font-size: 10px;
1021
+ .scrub-thumbnails.hidden {
1022
+ opacity: 0;
1201
1023
  }
1202
- .subtitles[data-subtitles] li[data-title] {
1203
- background-color: #c3c2c2;
1204
- padding: 5px;
1024
+ .scrub-thumbnails .thumbnail-container {
1025
+ display: inline-block;
1026
+ position: relative;
1027
+ overflow: hidden;
1028
+ background-color: #000;
1205
1029
  }
1206
- .subtitles[data-subtitles] li a {
1207
- color: #444;
1208
- padding: 2px 10px;
1209
- display: block;
1210
- text-decoration: none;
1030
+ .scrub-thumbnails .thumbnail-container .thumbnail-img {
1031
+ position: absolute;
1032
+ width: auto;
1211
1033
  }
1212
- .subtitles[data-subtitles] li a:hover {
1213
- background-color: #555;
1034
+ .scrub-thumbnails .thumbnails-text {
1035
+ background-color: rgba(74, 74, 74, 0.7);
1036
+ border-radius: 3px;
1037
+ white-space: nowrap;
1038
+ overflow: hidden;
1039
+ text-overflow: ellipsis;
1214
1040
  color: white;
1041
+ position: absolute;
1042
+ bottom: 23px;
1043
+ width: 100px;
1215
1044
  }
1216
- .subtitles[data-subtitles] li a:hover a {
1217
- color: white;
1218
- text-decoration: none;
1045
+ .scrub-thumbnails .spotlight {
1046
+ background-color: #4a4a4a;
1047
+ overflow: hidden;
1048
+ position: absolute;
1049
+ bottom: 0;
1050
+ left: 0;
1051
+ border-color: #4a4a4a;
1052
+ border-style: solid;
1053
+ border-width: 3px;
1054
+ border-radius: 3px;
1219
1055
  }
1220
- .subtitles[data-subtitles] li.current a {
1221
- color: #f00;
1222
- background-color: #555;
1056
+ .scrub-thumbnails .spotlight img {
1057
+ width: auto;
1223
1058
  }
1224
-
1225
- @keyframes pulse {
1226
- 0% {
1227
- color: #fff;
1228
- }
1229
- 50% {
1230
- color: #ff0101;
1231
- }
1232
- 100% {
1233
- color: #B80000;
1234
- }
1235
- }
1236
- ::cue {
1237
- visibility: hidden !important;
1238
- font-size: 0 !important;
1239
- }
1240
-
1241
- .ios-fullscreen::cue {
1242
- visibility: visible !important;
1243
- font-size: 1em !important;
1244
- }.share_plugin[data-share] {
1245
- pointer-events: auto;
1246
- z-index: 5;
1247
- font-family: Roboto, "Open Sans", Arial, sans-serif !important;
1248
- }
1249
- .share_plugin[data-share].share-hide .share-button-container {
1250
- right: -50px;
1251
- }
1252
- .share_plugin[data-share] .share-button-container {
1253
- cursor: pointer;
1254
- width: 36px;
1255
- height: 36px;
1256
- background-color: rgba(74, 74, 74, 0.6);
1257
- border-radius: 4px;
1258
- position: absolute;
1259
- right: 10px;
1260
- top: 10px;
1261
- padding-top: 6px;
1262
- transition: all 0.3s ease-out;
1263
- }
1264
- .share_plugin[data-share] .share-button-container button[data-share-button] {
1265
- background-color: transparent;
1266
- border: 0;
1267
- margin: 0 6px;
1268
- padding: 0;
1269
- cursor: pointer;
1270
- display: inline-block;
1271
- width: 19px;
1272
- height: 20px;
1273
- }
1274
- .share_plugin[data-share] .share-container {
1275
- pointer-events: auto;
1059
+ .scrub-thumbnails .backdrop {
1276
1060
  position: absolute;
1277
- width: 280px;
1278
- background-color: white;
1279
- transform: translate(0, 50%);
1280
- transform: translate(-50%, -50%);
1281
- left: 50%;
1282
- /* margin-left: -140px; */
1283
- top: calc(50% - 20px);
1284
- /* margin-top: -170px; */
1285
- }
1286
- .share_plugin[data-share] .share-container .share-container-header {
1287
- text-align: left;
1288
- border-bottom: 1px solid rgba(155, 155, 155, 0.25);
1289
- }
1290
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1291
- display: inline-block;
1292
- font-size: 16px;
1293
- margin: 5px;
1294
- }
1295
- .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
1296
- display: inline-block;
1297
- width: 24px;
1298
- float: right;
1299
- margin: 5px;
1300
- cursor: pointer;
1301
- }
1302
- .share_plugin[data-share] .share-container .share-container-main {
1303
- margin-bottom: 8px;
1304
- }
1305
- .share_plugin[data-share] .share-container .share-container-main > div {
1306
- text-align: left;
1307
- font-size: 14px;
1308
- padding: 5px;
1309
- }
1310
- .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 {
1061
+ left: 0;
1062
+ bottom: 0;
1063
+ right: 0;
1064
+ background-color: #000;
1311
1065
  overflow: hidden;
1312
- text-overflow: ellipsis;
1313
- color: #818181;
1314
- border: solid 1px #d3d3d3;
1315
- width: calc(100% - 10px);
1316
- padding: 5px;
1317
- }
1318
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
1319
- max-height: 90px;
1320
- resize: none;
1321
- }
1322
- .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
1323
- width: 32px;
1324
- display: inline-block;
1325
- margin-right: 5px;
1326
- cursor: pointer;
1327
- }.media-control-skin-1[data-media-control-skin-1] .media-control-quality,
1328
- .media-control-skin-1[data-media-control-skin-1] .media-control-audio-tracks {
1329
- display: block;
1330
- }
1331
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] {
1332
- width: 40px;
1333
- margin-top: 0;
1334
- }
1335
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button] {
1336
- display: flex;
1337
- justify-content: center;
1338
- padding: 0;
1339
- align-items: center;
1340
- }
1341
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button]:hover {
1342
- color: white;
1343
- }
1344
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul {
1345
- background-color: rgba(74, 74, 74, 0.6);
1346
- border: none;
1347
- width: auto;
1348
- transform: rotate(180deg);
1349
- border-radius: 4px;
1350
- bottom: 52px;
1351
- margin-left: -28px;
1352
1066
  }
1353
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li {
1354
- transform: rotate(-180deg);
1355
- font-size: 16px;
1356
- text-align: center;
1067
+ .scrub-thumbnails .backdrop .carousel {
1068
+ position: absolute;
1069
+ top: 0;
1070
+ left: 0;
1071
+ height: 100%;
1357
1072
  white-space: nowrap;
1358
- height: 30px;
1359
- }
1360
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a {
1361
- height: 30px;
1362
- padding: 5px 10px;
1363
- color: #fffffe;
1364
- }
1365
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a:hover {
1366
- background-color: rgba(0, 0, 0, 0.4);
1367
- }
1368
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li.current a {
1369
- background-color: rgba(0, 0, 0, 0.4);
1370
- }
1371
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:first-child a {
1372
- border-bottom-left-radius: 4px;
1373
- border-bottom-right-radius: 4px;
1374
- }
1375
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:last-child a {
1376
- border-top-left-radius: 4px;
1377
- border-top-right-radius: 4px;
1378
- }
1379
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] {
1380
- height: 26px;
1381
- line-height: 26px;
1382
- bottom: 52px;
1383
- border-radius: 3px;
1384
- background-color: rgba(74, 74, 74, 0.7);
1385
- }
1386
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span {
1387
- letter-spacing: 0.8px;
1388
- font-size: 14px;
1389
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1390
- }
1391
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-seek-time] {
1392
- padding-left: 8px;
1393
- padding-right: 8px;
1394
1073
  }
1395
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-duration] {
1396
- display: none !important;
1074
+ .scrub-thumbnails .backdrop .carousel img {
1075
+ width: auto;
1397
1076
  }[data-player] {
1398
1077
  --bottom-panel: 40px;
1399
1078
  }
@@ -1999,67 +1678,180 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1999
1678
  }
2000
1679
  .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 {
2001
1680
  transform: scaleY(1.5);
2002
- }.scrub-thumbnails {
2003
- position: absolute;
2004
- bottom: 52px;
2005
- width: 100%;
2006
- transition: opacity 0.3s ease;
1681
+ }.media-control-skin-1[data-media-control-skin-1] .media-control-quality,
1682
+ .media-control-skin-1[data-media-control-skin-1] .media-control-audio-tracks {
1683
+ display: block;
2007
1684
  }
2008
- .scrub-thumbnails.hidden {
2009
- opacity: 0;
1685
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] {
1686
+ width: 40px;
1687
+ margin-top: 0;
2010
1688
  }
2011
- .scrub-thumbnails .thumbnail-container {
2012
- display: inline-block;
2013
- position: relative;
2014
- overflow: hidden;
2015
- background-color: #000;
1689
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button] {
1690
+ display: flex;
1691
+ justify-content: center;
1692
+ padding: 0;
1693
+ align-items: center;
2016
1694
  }
2017
- .scrub-thumbnails .thumbnail-container .thumbnail-img {
2018
- position: absolute;
1695
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button]:hover {
1696
+ color: white;
1697
+ }
1698
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul {
1699
+ background-color: rgba(74, 74, 74, 0.6);
1700
+ border: none;
2019
1701
  width: auto;
1702
+ transform: rotate(180deg);
1703
+ border-radius: 4px;
1704
+ bottom: 52px;
1705
+ margin-left: -28px;
2020
1706
  }
2021
- .scrub-thumbnails .thumbnails-text {
2022
- background-color: rgba(74, 74, 74, 0.7);
2023
- border-radius: 3px;
1707
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li {
1708
+ transform: rotate(-180deg);
1709
+ font-size: 16px;
1710
+ text-align: center;
2024
1711
  white-space: nowrap;
2025
- overflow: hidden;
2026
- text-overflow: ellipsis;
2027
- color: white;
2028
- position: absolute;
2029
- bottom: 23px;
2030
- width: 100px;
1712
+ height: 30px;
2031
1713
  }
2032
- .scrub-thumbnails .spotlight {
2033
- background-color: #4a4a4a;
2034
- overflow: hidden;
2035
- position: absolute;
2036
- bottom: 0;
2037
- left: 0;
2038
- border-color: #4a4a4a;
2039
- border-style: solid;
2040
- border-width: 3px;
2041
- border-radius: 3px;
1714
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a {
1715
+ height: 30px;
1716
+ padding: 5px 10px;
1717
+ color: #fffffe;
2042
1718
  }
2043
- .scrub-thumbnails .spotlight img {
2044
- width: auto;
1719
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a:hover {
1720
+ background-color: rgba(0, 0, 0, 0.4);
2045
1721
  }
2046
- .scrub-thumbnails .backdrop {
2047
- position: absolute;
2048
- left: 0;
2049
- bottom: 0;
2050
- right: 0;
2051
- background-color: #000;
2052
- overflow: hidden;
1722
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li.current a {
1723
+ background-color: rgba(0, 0, 0, 0.4);
2053
1724
  }
2054
- .scrub-thumbnails .backdrop .carousel {
2055
- position: absolute;
2056
- top: 0;
2057
- left: 0;
2058
- height: 100%;
2059
- white-space: nowrap;
1725
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:first-child a {
1726
+ border-bottom-left-radius: 4px;
1727
+ border-bottom-right-radius: 4px;
2060
1728
  }
2061
- .scrub-thumbnails .backdrop .carousel img {
2062
- width: auto;
1729
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:last-child a {
1730
+ border-top-left-radius: 4px;
1731
+ border-top-right-radius: 4px;
1732
+ }
1733
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] {
1734
+ height: 26px;
1735
+ line-height: 26px;
1736
+ bottom: 52px;
1737
+ border-radius: 3px;
1738
+ background-color: rgba(74, 74, 74, 0.7);
1739
+ }
1740
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span {
1741
+ letter-spacing: 0.8px;
1742
+ font-size: 14px;
1743
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1744
+ }
1745
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-seek-time] {
1746
+ padding-left: 8px;
1747
+ padding-right: 8px;
1748
+ }
1749
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-duration] {
1750
+ display: none !important;
1751
+ }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
1752
+ height: 0;
1753
+ }
1754
+
1755
+ .skip_time_plugin[data-skip-time] {
1756
+ position: absolute;
1757
+ width: 100%;
1758
+ height: calc(100% - 50px);
1759
+ z-index: 9998;
1760
+ background-color: transparent;
1761
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1762
+ }
1763
+ .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] {
1764
+ width: 100%;
1765
+ height: 100%;
1766
+ display: flex;
1767
+ justify-content: space-between;
1768
+ }
1769
+ .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] .skip-item {
1770
+ width: 33.3%;
1771
+ height: 100%;
1772
+ }.share_plugin[data-share] {
1773
+ pointer-events: auto;
1774
+ z-index: 5;
1775
+ font-family: Roboto, "Open Sans", Arial, sans-serif !important;
1776
+ }
1777
+ .share_plugin[data-share].share-hide .share-button-container {
1778
+ right: -50px;
1779
+ }
1780
+ .share_plugin[data-share] .share-button-container {
1781
+ cursor: pointer;
1782
+ width: 36px;
1783
+ height: 36px;
1784
+ background-color: rgba(74, 74, 74, 0.6);
1785
+ border-radius: 4px;
1786
+ position: absolute;
1787
+ right: 10px;
1788
+ top: 10px;
1789
+ padding-top: 6px;
1790
+ transition: all 0.3s ease-out;
1791
+ }
1792
+ .share_plugin[data-share] .share-button-container button[data-share-button] {
1793
+ background-color: transparent;
1794
+ border: 0;
1795
+ margin: 0 6px;
1796
+ padding: 0;
1797
+ cursor: pointer;
1798
+ display: inline-block;
1799
+ width: 19px;
1800
+ height: 20px;
1801
+ }
1802
+ .share_plugin[data-share] .share-container {
1803
+ pointer-events: auto;
1804
+ position: absolute;
1805
+ width: 280px;
1806
+ background-color: white;
1807
+ transform: translate(0, 50%);
1808
+ transform: translate(-50%, -50%);
1809
+ left: 50%;
1810
+ /* margin-left: -140px; */
1811
+ top: calc(50% - 20px);
1812
+ /* margin-top: -170px; */
1813
+ }
1814
+ .share_plugin[data-share] .share-container .share-container-header {
1815
+ text-align: left;
1816
+ border-bottom: 1px solid rgba(155, 155, 155, 0.25);
1817
+ }
1818
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {
1819
+ display: inline-block;
1820
+ font-size: 16px;
1821
+ margin: 5px;
1822
+ }
1823
+ .share_plugin[data-share] .share-container .share-container-header .share-container-header--close {
1824
+ display: inline-block;
1825
+ width: 24px;
1826
+ float: right;
1827
+ margin: 5px;
1828
+ cursor: pointer;
1829
+ }
1830
+ .share_plugin[data-share] .share-container .share-container-main {
1831
+ margin-bottom: 8px;
1832
+ }
1833
+ .share_plugin[data-share] .share-container .share-container-main > div {
1834
+ text-align: left;
1835
+ font-size: 14px;
1836
+ padding: 5px;
1837
+ }
1838
+ .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 {
1839
+ overflow: hidden;
1840
+ text-overflow: ellipsis;
1841
+ color: #818181;
1842
+ border: solid 1px #d3d3d3;
1843
+ width: calc(100% - 10px);
1844
+ padding: 5px;
1845
+ }
1846
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--embed {
1847
+ max-height: 90px;
1848
+ resize: none;
1849
+ }
1850
+ .share_plugin[data-share] .share-container .share-container-main .share-container-header--socialicon > div {
1851
+ width: 32px;
1852
+ display: inline-block;
1853
+ margin-right: 5px;
1854
+ cursor: pointer;
2063
1855
  }.spinner-three-bounce[data-spinner] {
2064
1856
  position: absolute;
2065
1857
  width: 70px;
@@ -2098,27 +1890,6 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
2098
1890
  40% {
2099
1891
  transform: scale(1);
2100
1892
  }
2101
- }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
2102
- height: 0;
2103
- }
2104
-
2105
- .skip_time_plugin[data-skip-time] {
2106
- position: absolute;
2107
- width: 100%;
2108
- height: calc(100% - 50px);
2109
- z-index: 9998;
2110
- background-color: transparent;
2111
- font-family: Roboto, "Open Sans", Arial, sans-serif;
2112
- }
2113
- .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] {
2114
- width: 100%;
2115
- height: 100%;
2116
- display: flex;
2117
- justify-content: space-between;
2118
- }
2119
- .skip_time_plugin[data-skip-time] .skip-container[data-skip-container] .skip-item {
2120
- width: 33.3%;
2121
- height: 100%;
2122
1893
  }.seek-time[data-seek-time] {
2123
1894
  position: absolute;
2124
1895
  white-space: nowrap;
@@ -2152,6 +1923,154 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
2152
1923
  .seek-time[data-seek-time] [data-duration]::before {
2153
1924
  content: "|";
2154
1925
  margin-right: 7px;
1926
+ }*, :focus, :visited {
1927
+ outline: none !important;
1928
+ }
1929
+
1930
+ .multicamera[data-multicamera] {
1931
+ float: right;
1932
+ margin-top: 4px;
1933
+ position: relative;
1934
+ margin-right: 20px;
1935
+ width: 20px;
1936
+ }
1937
+ .multicamera[data-multicamera] button {
1938
+ background-color: transparent;
1939
+ color: #fff;
1940
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1941
+ -webkit-font-smoothing: antialiased;
1942
+ border: none;
1943
+ font-size: 14px;
1944
+ padding: 0;
1945
+ }
1946
+ .multicamera[data-multicamera] button svg {
1947
+ height: 20px;
1948
+ position: relative;
1949
+ margin-top: 6px;
1950
+ }
1951
+ .multicamera[data-multicamera] button:hover {
1952
+ color: #c9c9c9;
1953
+ }
1954
+ .multicamera[data-multicamera] button.changing {
1955
+ animation: pulse 0.5s infinite alternate;
1956
+ }
1957
+ .multicamera[data-multicamera] button span.quality-arrow {
1958
+ width: 9px;
1959
+ height: 6px;
1960
+ margin-top: 11px;
1961
+ margin-left: 5px;
1962
+ }
1963
+ .multicamera[data-multicamera] > ul {
1964
+ padding: 6px 0;
1965
+ right: -24px;
1966
+ width: 245px;
1967
+ list-style-type: none;
1968
+ position: absolute;
1969
+ bottom: 48px;
1970
+ border-radius: 4px;
1971
+ display: none;
1972
+ background-color: rgba(74, 74, 74, 0.9);
1973
+ }
1974
+ .multicamera[data-multicamera] > ul::after {
1975
+ content: "";
1976
+ position: absolute;
1977
+ top: 100%;
1978
+ left: 85%;
1979
+ margin-left: -10px;
1980
+ width: 0;
1981
+ height: 0;
1982
+ border-top: 10px solid rgba(74, 74, 74, 0.9);
1983
+ border-right: 10px solid transparent;
1984
+ border-left: 10px solid transparent;
1985
+ }
1986
+ .multicamera[data-multicamera] li {
1987
+ font-size: 10px;
1988
+ cursor: pointer;
1989
+ }
1990
+ .multicamera[data-multicamera] li .multicamera-item {
1991
+ display: flex;
1992
+ padding: 10px 0;
1993
+ justify-content: center;
1994
+ position: relative;
1995
+ }
1996
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {
1997
+ pointer-events: none;
1998
+ }
1999
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {
2000
+ opacity: 0.5;
2001
+ }
2002
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {
2003
+ opacity: 0.5;
2004
+ }
2005
+ .multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {
2006
+ background-color: rgba(0, 0, 0, 0);
2007
+ }
2008
+ .multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {
2009
+ background-color: rgba(0, 0, 0, 0.3);
2010
+ }
2011
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {
2012
+ width: 80px;
2013
+ height: 60px;
2014
+ }
2015
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {
2016
+ width: 80px;
2017
+ height: 60px;
2018
+ }
2019
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text {
2020
+ width: 120px;
2021
+ text-align: left;
2022
+ margin-left: 15px;
2023
+ }
2024
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title, .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
2025
+ width: 120px;
2026
+ height: 20px;
2027
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
2028
+ font-size: 14px;
2029
+ font-weight: normal;
2030
+ font-style: normal;
2031
+ font-stretch: normal;
2032
+ line-height: 1.43;
2033
+ letter-spacing: normal;
2034
+ text-align: left;
2035
+ color: #fff;
2036
+ text-overflow: ellipsis;
2037
+ overflow: hidden;
2038
+ }
2039
+ .multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {
2040
+ opacity: 0.6;
2041
+ }
2042
+ .multicamera[data-multicamera] li[data-title] {
2043
+ background-color: #c3c2c2;
2044
+ padding: 5px;
2045
+ }
2046
+ .multicamera[data-multicamera] li a {
2047
+ color: #444;
2048
+ padding: 2px 10px;
2049
+ display: block;
2050
+ text-decoration: none;
2051
+ }
2052
+ .multicamera[data-multicamera] li a:hover {
2053
+ background-color: #555;
2054
+ color: white;
2055
+ }
2056
+ .multicamera[data-multicamera] li a:hover a {
2057
+ color: white;
2058
+ text-decoration: none;
2059
+ }
2060
+ .multicamera[data-multicamera] li.current a {
2061
+ color: #f00;
2062
+ }
2063
+
2064
+ @keyframes pulse {
2065
+ 0% {
2066
+ color: #fff;
2067
+ }
2068
+ 50% {
2069
+ color: #ff0101;
2070
+ }
2071
+ 100% {
2072
+ color: #B80000;
2073
+ }
2155
2074
  }.player-logo[data-logo] {
2156
2075
  position: absolute;
2157
2076
  z-index: 2;
@@ -2161,4 +2080,85 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
2161
2080
 
2162
2081
  .clappr-logo {
2163
2082
  position: absolute;
2083
+ }*, :focus, :visited {
2084
+ outline: none !important;
2085
+ }
2086
+
2087
+ .subtitles[data-subtitles] {
2088
+ float: right;
2089
+ position: relative;
2090
+ width: 50px;
2091
+ }
2092
+ .subtitles[data-subtitles] button {
2093
+ background-color: transparent;
2094
+ color: #fff;
2095
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
2096
+ -webkit-font-smoothing: antialiased;
2097
+ border: none;
2098
+ font-size: 14px;
2099
+ cursor: pointer;
2100
+ }
2101
+ .subtitles[data-subtitles] button .subtitle-text svg {
2102
+ fill: white;
2103
+ }
2104
+ .subtitles[data-subtitles] button:hover {
2105
+ color: #c9c9c9;
2106
+ }
2107
+ .subtitles[data-subtitles] button.changing {
2108
+ animation: pulse 0.5s infinite alternate;
2109
+ }
2110
+ .subtitles[data-subtitles] > ul {
2111
+ width: 80px;
2112
+ list-style-type: none;
2113
+ position: absolute;
2114
+ bottom: 25px;
2115
+ border: 1px solid black;
2116
+ display: none;
2117
+ background-color: #e6e6e6;
2118
+ }
2119
+ .subtitles[data-subtitles] li {
2120
+ font-size: 10px;
2121
+ }
2122
+ .subtitles[data-subtitles] li[data-title] {
2123
+ background-color: #c3c2c2;
2124
+ padding: 5px;
2125
+ }
2126
+ .subtitles[data-subtitles] li a {
2127
+ color: #444;
2128
+ padding: 2px 10px;
2129
+ display: block;
2130
+ text-decoration: none;
2131
+ }
2132
+ .subtitles[data-subtitles] li a:hover {
2133
+ background-color: #555;
2134
+ color: white;
2135
+ }
2136
+ .subtitles[data-subtitles] li a:hover a {
2137
+ color: white;
2138
+ text-decoration: none;
2139
+ }
2140
+ .subtitles[data-subtitles] li.current a {
2141
+ color: #f00;
2142
+ background-color: #555;
2143
+ }
2144
+
2145
+ @keyframes pulse {
2146
+ 0% {
2147
+ color: #fff;
2148
+ }
2149
+ 50% {
2150
+ color: #ff0101;
2151
+ }
2152
+ 100% {
2153
+ color: #B80000;
2154
+ }
2155
+ }
2156
+ ::cue {
2157
+ visibility: hidden !important;
2158
+ font-size: 0 !important;
2159
+ }
2160
+
2161
+ .ios-fullscreen::cue {
2162
+ visibility: visible !important;
2163
+ font-size: 1em !important;
2164
2164
  }