@gcorevideo/player 2.19.11 → 2.19.12

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.
package/dist/index.css CHANGED
@@ -122,6 +122,201 @@
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 {
138
+ 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;
165
+ }
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;
169
+ }
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;
174
+ }
175
+
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;
183
+ }
184
+ .gear-wrapper .go-back .arrow-left-icon {
185
+ float: left;
186
+ padding-top: 2px;
187
+ padding-right: 2px;
188
+ }
189
+ .gear-wrapper .go-back .arrow-left-icon svg {
190
+ height: 16px;
191
+ }
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);
198
+ }
199
+ .gear-wrapper ul.gear-sub-menu li {
200
+ font-size: 12px;
201
+ text-align: left;
202
+ }
203
+ .gear-wrapper ul.gear-sub-menu li[data-title] {
204
+ background-color: #c3c2c2;
205
+ padding: 5px;
206
+ }
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 {
216
+ color: white;
217
+ background-color: rgba(0, 0, 0, 0.4);
218
+ }
219
+ .gear-wrapper ul.gear-sub-menu li a:hover a {
220
+ color: white;
221
+ text-decoration: none;
222
+ }
223
+ .gear-wrapper ul.gear-sub-menu li a .check-icon {
224
+ width: 30px;
225
+ height: 20px;
226
+ float: left;
227
+ display: block;
228
+ }
229
+ .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
230
+ display: none;
231
+ }
232
+ .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
233
+ display: inline;
234
+ }
235
+ .gear-wrapper svg {
236
+ height: 20px;
237
+ }.big-mute-icon-wrapper[data-big-mute] {
238
+ position: absolute;
239
+ z-index: 9998;
240
+ background-color: transparent;
241
+ display: flex;
242
+ justify-content: center;
243
+ width: 100%;
244
+ height: calc(100% - 50px);
245
+ margin: 0 auto;
246
+ opacity: 0.75;
247
+ transition: opacity 0.1s ease;
248
+ pointer-events: auto;
249
+ }
250
+ .big-mute-icon-wrapper[data-big-mute].hide {
251
+ display: none;
252
+ }
253
+ .big-mute-icon-wrapper[data-big-mute]:hover {
254
+ cursor: pointer;
255
+ }
256
+
257
+ .big-mute-icon[data-big-mute-icon] {
258
+ display: flex;
259
+ align-items: center;
260
+ justify-content: center;
261
+ align-self: center;
262
+ width: 120px;
263
+ height: 120px;
264
+ border: 2px solid white;
265
+ border-radius: 50%;
266
+ filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
267
+ filter: alpha(opacity=60);
268
+ opacity: 1;
269
+ box-shadow: 0 0 1px 0 white;
270
+ background: rgba(240, 243, 247, 0.9411764706);
271
+ z-index: 10000;
272
+ }
273
+ .big-mute-icon[data-big-mute-icon] svg {
274
+ margin-left: 5px;
275
+ width: 80px;
276
+ height: 80px;
277
+ }
278
+ .big-mute-icon[data-big-mute-icon] svg path {
279
+ fill: #1f1e1e !important;
280
+ }
281
+ .big-mute-icon[data-big-mute-icon]:hover {
282
+ background: rgba(240, 243, 247, 0.8784313725);
283
+ }
284
+ .big-mute-icon[data-big-mute-icon]:hover svg path {
285
+ fill: #151515 !important;
286
+ }div.player-error-screen, [data-player] div.player-error-screen {
287
+ color: #CCCACA;
288
+ position: absolute;
289
+ top: 0;
290
+ height: 100%;
291
+ width: 100%;
292
+ background-color: rgba(0, 0, 0, 0.7);
293
+ z-index: 2000;
294
+ display: flex;
295
+ flex-direction: column;
296
+ justify-content: center;
297
+ }
298
+ div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
299
+ font-size: 14px;
300
+ color: #CCCACA;
301
+ margin-top: 45px;
302
+ }
303
+ div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
304
+ font-weight: bold;
305
+ line-height: 30px;
306
+ font-size: 18px;
307
+ }
308
+ div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
309
+ width: 90%;
310
+ margin: 0 auto;
311
+ }
312
+ div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
313
+ font-size: 13px;
314
+ margin-top: 15px;
315
+ }
316
+ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
317
+ cursor: pointer;
318
+ width: 30px;
319
+ margin: 15px auto 0;
125
320
  }.dvr-controls[data-dvr-controls] {
126
321
  display: inline-block;
127
322
  float: left;
@@ -228,145 +423,176 @@
228
423
 
229
424
  .media-control.live[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {
230
425
  background-color: #ff0101;
426
+ }.context-menu {
427
+ z-index: 999;
428
+ position: absolute;
429
+ top: 0;
430
+ left: 0;
431
+ text-align: center;
432
+ }
433
+ .context-menu .context-menu-list {
434
+ font-family: "Proxima Nova", sans-serif;
435
+ font-size: 12px;
436
+ line-height: 12px;
437
+ list-style-type: none;
438
+ text-align: left;
439
+ padding: 5px;
440
+ margin-left: auto;
441
+ margin-right: auto;
442
+ background-color: rgba(0, 0, 0, 0.75);
443
+ border: 1px solid #666;
444
+ border-radius: 4px;
445
+ }
446
+ .context-menu .context-menu-list .context-menu-list-item {
447
+ color: white;
448
+ padding: 5px;
449
+ cursor: pointer;
231
450
  }*, :focus, :visited {
232
451
  outline: none !important;
233
452
  }
234
453
 
235
- .gear-wrapper .go-back {
236
- font-weight: 600;
454
+ .audio_selector[data-track-selector] {
455
+ float: right;
456
+ margin-top: 4px;
457
+ position: relative;
458
+ width: 50px;
459
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
460
+ }
461
+ .audio_selector[data-track-selector] button {
462
+ background-color: transparent;
463
+ color: #fff;
464
+ -webkit-font-smoothing: antialiased;
465
+ border: none;
237
466
  font-size: 14px;
238
- line-height: 20px;
239
- width: 100%;
240
- text-align: left;
241
- padding: 12px;
467
+ cursor: pointer;
242
468
  }
243
- .gear-wrapper .go-back .arrow-left-icon {
244
- float: left;
245
- padding-top: 2px;
246
- padding-right: 2px;
469
+ .audio_selector[data-track-selector] button .audio-text {
470
+ text-overflow: ellipsis;
471
+ overflow: hidden;
472
+ white-space: nowrap;
473
+ max-width: 100px;
474
+ background-color: transparent;
475
+ -webkit-font-smoothing: antialiased;
476
+ border: none;
477
+ font-size: 14px;
478
+ cursor: pointer;
479
+ padding-top: 5px;
247
480
  }
248
- .gear-wrapper .go-back .arrow-left-icon svg {
249
- height: 16px;
481
+ .audio_selector[data-track-selector] button:hover {
482
+ color: #c9c9c9;
250
483
  }
251
- .gear-wrapper ul.gear-sub-menu {
252
- width: 100%;
484
+ .audio_selector[data-track-selector] button.changing {
485
+ animation: pulse 0.5s infinite alternate;
486
+ }
487
+ .audio_selector[data-track-selector] button span.audio-arrow {
488
+ width: 9px;
489
+ height: 6px;
490
+ margin-top: 11px;
491
+ margin-left: 5px;
492
+ }
493
+ .audio_selector[data-track-selector] > ul {
494
+ max-width: 114px;
253
495
  list-style-type: none;
254
- background-color: transparent;
255
- min-width: 60px;
256
- border-top: 2px solid rgb(36, 36, 36);
496
+ position: absolute;
497
+ bottom: 25px;
498
+ border: 1px solid black;
499
+ display: none;
500
+ background-color: #e6e6e6;
257
501
  }
258
- .gear-wrapper ul.gear-sub-menu li {
259
- font-size: 12px;
260
- text-align: left;
502
+ .audio_selector[data-track-selector] li {
503
+ font-size: 10px;
261
504
  }
262
- .gear-wrapper ul.gear-sub-menu li[data-title] {
505
+ .audio_selector[data-track-selector] li[data-title] {
263
506
  background-color: #c3c2c2;
264
507
  padding: 5px;
265
508
  }
266
- .gear-wrapper ul.gear-sub-menu li a {
509
+ .audio_selector[data-track-selector] li a {
510
+ color: #444;
511
+ padding: 2px 10px;
267
512
  display: block;
268
513
  text-decoration: none;
269
- height: 32px;
270
- padding: 5px 10px;
271
- line-height: 22px;
272
- color: #fffffe;
514
+ text-overflow: ellipsis;
515
+ overflow: hidden;
516
+ white-space: nowrap;
273
517
  }
274
- .gear-wrapper ul.gear-sub-menu li a:hover {
518
+ .audio_selector[data-track-selector] li a:hover {
519
+ background-color: #555;
275
520
  color: white;
276
- background-color: rgba(0, 0, 0, 0.4);
277
521
  }
278
- .gear-wrapper ul.gear-sub-menu li a:hover a {
522
+ .audio_selector[data-track-selector] li a:hover a {
279
523
  color: white;
280
- text-decoration: none;
281
- }
282
- .gear-wrapper ul.gear-sub-menu li a .check-icon {
283
- width: 30px;
284
- height: 20px;
285
- float: left;
286
- display: block;
287
- }
288
- .gear-wrapper ul.gear-sub-menu li a .check-icon svg {
289
- display: none;
524
+ text-decoration: none;
290
525
  }
291
- .gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {
292
- display: inline;
526
+ .audio_selector[data-track-selector] li.current a {
527
+ color: #f00;
293
528
  }
294
- .gear-wrapper svg {
295
- height: 20px;
296
- }.media-control-skin-1[data-media-control-skin-1] .media-control-gear {
297
- float: right;
298
- font-family: Roboto, "Open Sans", Arial, sans-serif;
529
+
530
+ .audio_selector[data-track-selector] {
531
+ width: auto;
532
+ margin-top: 7px;
533
+ margin-right: 20px;
299
534
  }
300
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear {
301
- height: 40px;
302
- width: 40px;
303
- padding-right: 20px;
535
+ .audio_selector[data-track-selector] button[data-level-selector-button],
536
+ .audio_selector[data-track-selector] button[data-track-selector-button] {
537
+ display: flex;
538
+ justify-content: center;
539
+ padding: 0;
304
540
  }
305
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .button-gear svg {
306
- height: 20px;
541
+ .audio_selector[data-track-selector] button[data-level-selector-button]:hover,
542
+ .audio_selector[data-track-selector] button[data-track-selector-button]:hover {
543
+ color: white;
307
544
  }
308
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper {
309
- position: absolute;
310
- right: 16px;
311
- bottom: 52px;
312
- display: none;
313
- width: 250px;
314
- min-height: 48px;
315
- z-index: 9999;
545
+ .audio_selector[data-track-selector] ul {
546
+ background-color: rgba(74, 74, 74, 0.6);
547
+ border: none;
548
+ min-width: 60px;
549
+ transform: rotate(180deg);
316
550
  border-radius: 4px;
551
+ bottom: 40px;
552
+ right: -2px;
317
553
  }
318
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {
319
- padding: 8px 0;
554
+ .audio_selector[data-track-selector] ul li {
555
+ transform: rotate(-180deg);
556
+ font-size: 16px;
557
+ text-align: right;
558
+ height: 30px;
320
559
  }
321
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list svg {
322
- float: left;
323
- margin-right: 10px;
560
+ .audio_selector[data-track-selector] ul li a {
561
+ height: 30px;
562
+ padding: 5px 10px;
563
+ color: #fffffe;
324
564
  }
325
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option {
326
- margin: 0;
327
- text-align: left;
328
- line-height: 22px;
329
- padding: 5px 14px;
330
- width: 250px;
331
- font-size: 12px;
565
+ .audio_selector[data-track-selector] ul li a:hover {
566
+ background-color: rgba(0, 0, 0, 0.4);
332
567
  }
333
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_arrow-right-icon {
334
- float: right;
335
- margin-right: -14px;
568
+ .audio_selector[data-track-selector] ul li:first-child a {
569
+ border-bottom-left-radius: 4px;
570
+ border-bottom-right-radius: 4px;
336
571
  }
337
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option .gear-option_value {
572
+ .audio_selector[data-track-selector] ul li:last-child a {
573
+ border-top-left-radius: 4px;
574
+ border-top-right-radius: 4px;
575
+ }
576
+
577
+ @keyframes pulse {
578
+ 0% {
579
+ color: #fff;
580
+ }
581
+ 50% {
582
+ color: #ff0101;
583
+ }
584
+ 100% {
585
+ color: #B80000;
586
+ }
587
+ }.media-control-pip button {
338
588
  float: right;
339
- margin-right: 8px;
589
+ height: 40px;
590
+ margin-right: 20px;
340
591
  }
341
- .media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option svg {
592
+ .media-control-pip button svg {
342
593
  height: 20px;
343
- }.context-menu {
344
- z-index: 999;
345
- position: absolute;
346
- top: 0;
347
- left: 0;
348
- text-align: center;
349
- }
350
- .context-menu .context-menu-list {
351
- font-family: "Proxima Nova", sans-serif;
352
- font-size: 12px;
353
- line-height: 12px;
354
- list-style-type: none;
355
- text-align: left;
356
- padding: 5px;
357
- margin-left: auto;
358
- margin-right: auto;
359
- background-color: rgba(0, 0, 0, 0.75);
360
- border: 1px solid #666;
361
- border-radius: 4px;
362
- }
363
- .context-menu .context-menu-list .context-menu-list-item {
364
- color: white;
365
- padding: 5px;
366
- cursor: pointer;
367
- }.level-disabled {
368
- opacity: 0.5;
369
- pointer-events: none;
594
+ }.clips.bar-container[data-seekbar] {
595
+ clip-path: url("#myClip");
370
596
  }*, :focus, :visited {
371
597
  outline: none !important;
372
598
  }
@@ -515,76 +741,6 @@
515
741
  100% {
516
742
  color: #B80000;
517
743
  }
518
- }.media-control-skin-1[data-media-control-skin-1] .media-control-quality,
519
- .media-control-skin-1[data-media-control-skin-1] .media-control-audio-tracks {
520
- display: block;
521
- }
522
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] {
523
- width: 40px;
524
- margin-top: 0;
525
- }
526
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button] {
527
- display: flex;
528
- justify-content: center;
529
- padding: 0;
530
- align-items: center;
531
- }
532
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button]:hover {
533
- color: white;
534
- }
535
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul {
536
- background-color: rgba(74, 74, 74, 0.6);
537
- border: none;
538
- width: auto;
539
- transform: rotate(180deg);
540
- border-radius: 4px;
541
- bottom: 52px;
542
- margin-left: -28px;
543
- }
544
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li {
545
- transform: rotate(-180deg);
546
- font-size: 16px;
547
- text-align: center;
548
- white-space: nowrap;
549
- height: 30px;
550
- }
551
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a {
552
- height: 30px;
553
- padding: 5px 10px;
554
- color: #fffffe;
555
- }
556
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a:hover {
557
- background-color: rgba(0, 0, 0, 0.4);
558
- }
559
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li.current a {
560
- background-color: rgba(0, 0, 0, 0.4);
561
- }
562
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:first-child a {
563
- border-bottom-left-radius: 4px;
564
- border-bottom-right-radius: 4px;
565
- }
566
- .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:last-child a {
567
- border-top-left-radius: 4px;
568
- border-top-right-radius: 4px;
569
- }
570
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] {
571
- height: 26px;
572
- line-height: 26px;
573
- bottom: 52px;
574
- border-radius: 3px;
575
- background-color: rgba(74, 74, 74, 0.7);
576
- }
577
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span {
578
- letter-spacing: 0.8px;
579
- font-size: 14px;
580
- font-family: Roboto, "Open Sans", Arial, sans-serif;
581
- }
582
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-seek-time] {
583
- padding-left: 8px;
584
- padding-right: 8px;
585
- }
586
- .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-duration] {
587
- display: none !important;
588
744
  }[data-player] {
589
745
  --bottom-panel: 40px;
590
746
  }
@@ -1181,15 +1337,85 @@
1181
1337
  box-shadow: inset 2px 0 0 white;
1182
1338
  transition: transform 0.2s ease-out;
1183
1339
  }
1184
- .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 {
1185
- box-shadow: inset 2px 0 0 #fff;
1186
- opacity: 1;
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].fill {
1341
+ box-shadow: inset 2px 0 0 #fff;
1342
+ opacity: 1;
1343
+ }
1344
+ .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) {
1345
+ padding-left: 0;
1346
+ }
1347
+ .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:hover {
1348
+ transform: scaleY(1.5);
1349
+ }.media-control-skin-1[data-media-control-skin-1] .media-control-quality,
1350
+ .media-control-skin-1[data-media-control-skin-1] .media-control-audio-tracks {
1351
+ display: block;
1352
+ }
1353
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] {
1354
+ width: 40px;
1355
+ margin-top: 0;
1356
+ }
1357
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button] {
1358
+ display: flex;
1359
+ justify-content: center;
1360
+ padding: 0;
1361
+ align-items: center;
1362
+ }
1363
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] button[data-subtitles-button]:hover {
1364
+ color: white;
1365
+ }
1366
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul {
1367
+ background-color: rgba(74, 74, 74, 0.6);
1368
+ border: none;
1369
+ width: auto;
1370
+ transform: rotate(180deg);
1371
+ border-radius: 4px;
1372
+ bottom: 52px;
1373
+ margin-left: -28px;
1374
+ }
1375
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li {
1376
+ transform: rotate(-180deg);
1377
+ font-size: 16px;
1378
+ text-align: center;
1379
+ white-space: nowrap;
1380
+ height: 30px;
1381
+ }
1382
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a {
1383
+ height: 30px;
1384
+ padding: 5px 10px;
1385
+ color: #fffffe;
1386
+ }
1387
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li a:hover {
1388
+ background-color: rgba(0, 0, 0, 0.4);
1389
+ }
1390
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li.current a {
1391
+ background-color: rgba(0, 0, 0, 0.4);
1392
+ }
1393
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:first-child a {
1394
+ border-bottom-left-radius: 4px;
1395
+ border-bottom-right-radius: 4px;
1396
+ }
1397
+ .media-control-skin-1[data-media-control-skin-1] .media-control-subtitles .subtitles[data-subtitles] ul li:last-child a {
1398
+ border-top-left-radius: 4px;
1399
+ border-top-right-radius: 4px;
1400
+ }
1401
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] {
1402
+ height: 26px;
1403
+ line-height: 26px;
1404
+ bottom: 52px;
1405
+ border-radius: 3px;
1406
+ background-color: rgba(74, 74, 74, 0.7);
1407
+ }
1408
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span {
1409
+ letter-spacing: 0.8px;
1410
+ font-size: 14px;
1411
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1187
1412
  }
1188
- .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) {
1189
- padding-left: 0;
1413
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-seek-time] {
1414
+ padding-left: 8px;
1415
+ padding-right: 8px;
1190
1416
  }
1191
- .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 {
1192
- transform: scaleY(1.5);
1417
+ .media-control-skin-1[data-media-control-skin-1] .seek-time[data-seek-time] span[data-duration] {
1418
+ display: none !important;
1193
1419
  }:root {
1194
1420
  --primary-background-color: #000;
1195
1421
  --secondary-background-color: #262626;
@@ -1572,143 +1798,6 @@
1572
1798
  .mobile .clappr-nerd-stats[data-clappr-nerd-stats] .stats-box ul {
1573
1799
  width: 25%;
1574
1800
  }
1575
- }*, :focus, :visited {
1576
- outline: none !important;
1577
- }
1578
-
1579
- .audio_selector[data-track-selector] {
1580
- float: right;
1581
- margin-top: 4px;
1582
- position: relative;
1583
- width: 50px;
1584
- font-family: Roboto, "Open Sans", Arial, sans-serif;
1585
- }
1586
- .audio_selector[data-track-selector] button {
1587
- background-color: transparent;
1588
- color: #fff;
1589
- -webkit-font-smoothing: antialiased;
1590
- border: none;
1591
- font-size: 14px;
1592
- cursor: pointer;
1593
- }
1594
- .audio_selector[data-track-selector] button .audio-text {
1595
- text-overflow: ellipsis;
1596
- overflow: hidden;
1597
- white-space: nowrap;
1598
- max-width: 100px;
1599
- background-color: transparent;
1600
- -webkit-font-smoothing: antialiased;
1601
- border: none;
1602
- font-size: 14px;
1603
- cursor: pointer;
1604
- padding-top: 5px;
1605
- }
1606
- .audio_selector[data-track-selector] button:hover {
1607
- color: #c9c9c9;
1608
- }
1609
- .audio_selector[data-track-selector] button.changing {
1610
- animation: pulse 0.5s infinite alternate;
1611
- }
1612
- .audio_selector[data-track-selector] button span.audio-arrow {
1613
- width: 9px;
1614
- height: 6px;
1615
- margin-top: 11px;
1616
- margin-left: 5px;
1617
- }
1618
- .audio_selector[data-track-selector] > ul {
1619
- max-width: 114px;
1620
- list-style-type: none;
1621
- position: absolute;
1622
- bottom: 25px;
1623
- border: 1px solid black;
1624
- display: none;
1625
- background-color: #e6e6e6;
1626
- }
1627
- .audio_selector[data-track-selector] li {
1628
- font-size: 10px;
1629
- }
1630
- .audio_selector[data-track-selector] li[data-title] {
1631
- background-color: #c3c2c2;
1632
- padding: 5px;
1633
- }
1634
- .audio_selector[data-track-selector] li a {
1635
- color: #444;
1636
- padding: 2px 10px;
1637
- display: block;
1638
- text-decoration: none;
1639
- text-overflow: ellipsis;
1640
- overflow: hidden;
1641
- white-space: nowrap;
1642
- }
1643
- .audio_selector[data-track-selector] li a:hover {
1644
- background-color: #555;
1645
- color: white;
1646
- }
1647
- .audio_selector[data-track-selector] li a:hover a {
1648
- color: white;
1649
- text-decoration: none;
1650
- }
1651
- .audio_selector[data-track-selector] li.current a {
1652
- color: #f00;
1653
- }
1654
-
1655
- .audio_selector[data-track-selector] {
1656
- width: auto;
1657
- margin-top: 7px;
1658
- margin-right: 20px;
1659
- }
1660
- .audio_selector[data-track-selector] button[data-level-selector-button],
1661
- .audio_selector[data-track-selector] button[data-track-selector-button] {
1662
- display: flex;
1663
- justify-content: center;
1664
- padding: 0;
1665
- }
1666
- .audio_selector[data-track-selector] button[data-level-selector-button]:hover,
1667
- .audio_selector[data-track-selector] button[data-track-selector-button]:hover {
1668
- color: white;
1669
- }
1670
- .audio_selector[data-track-selector] ul {
1671
- background-color: rgba(74, 74, 74, 0.6);
1672
- border: none;
1673
- min-width: 60px;
1674
- transform: rotate(180deg);
1675
- border-radius: 4px;
1676
- bottom: 40px;
1677
- right: -2px;
1678
- }
1679
- .audio_selector[data-track-selector] ul li {
1680
- transform: rotate(-180deg);
1681
- font-size: 16px;
1682
- text-align: right;
1683
- height: 30px;
1684
- }
1685
- .audio_selector[data-track-selector] ul li a {
1686
- height: 30px;
1687
- padding: 5px 10px;
1688
- color: #fffffe;
1689
- }
1690
- .audio_selector[data-track-selector] ul li a:hover {
1691
- background-color: rgba(0, 0, 0, 0.4);
1692
- }
1693
- .audio_selector[data-track-selector] ul li:first-child a {
1694
- border-bottom-left-radius: 4px;
1695
- border-bottom-right-radius: 4px;
1696
- }
1697
- .audio_selector[data-track-selector] ul li:last-child a {
1698
- border-top-left-radius: 4px;
1699
- border-top-right-radius: 4px;
1700
- }
1701
-
1702
- @keyframes pulse {
1703
- 0% {
1704
- color: #fff;
1705
- }
1706
- 50% {
1707
- color: #ff0101;
1708
- }
1709
- 100% {
1710
- color: #B80000;
1711
- }
1712
1801
  }.player-poster[data-poster] {
1713
1802
  display: flex;
1714
1803
  justify-content: center;
@@ -1743,124 +1832,87 @@
1743
1832
  }
1744
1833
  .player-poster[data-poster] .play-wrapper[data-poster] svg path {
1745
1834
  fill: #fff;
1746
- }.clips.bar-container[data-seekbar] {
1747
- clip-path: url("#myClip");
1748
- }div.player-error-screen, [data-player] div.player-error-screen {
1749
- color: #CCCACA;
1750
- position: absolute;
1751
- top: 0;
1752
- height: 100%;
1753
- width: 100%;
1754
- background-color: rgba(0, 0, 0, 0.7);
1755
- z-index: 2000;
1756
- display: flex;
1757
- flex-direction: column;
1758
- justify-content: center;
1759
- }
1760
- div.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {
1761
- font-size: 14px;
1762
- color: #CCCACA;
1763
- margin-top: 45px;
1764
- }
1765
- div.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {
1766
- font-weight: bold;
1767
- line-height: 30px;
1768
- font-size: 18px;
1769
- }
1770
- div.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {
1771
- width: 90%;
1772
- margin: 0 auto;
1835
+ }*, :focus, :visited {
1836
+ outline: none !important;
1773
1837
  }
1774
- div.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {
1775
- font-size: 13px;
1776
- margin-top: 15px;
1838
+
1839
+ .subtitles[data-subtitles] {
1840
+ float: right;
1841
+ position: relative;
1842
+ width: 50px;
1777
1843
  }
1778
- div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1779
- cursor: pointer;
1780
- width: 30px;
1781
- margin: 15px auto 0;
1782
- }.big-mute-icon-wrapper[data-big-mute] {
1783
- position: absolute;
1784
- z-index: 9998;
1844
+ .subtitles[data-subtitles] button {
1785
1845
  background-color: transparent;
1786
- display: flex;
1787
- justify-content: center;
1788
- width: 100%;
1789
- height: calc(100% - 50px);
1790
- margin: 0 auto;
1791
- opacity: 0.75;
1792
- transition: opacity 0.1s ease;
1793
- pointer-events: auto;
1846
+ color: #fff;
1847
+ font-family: Roboto, "Open Sans", Arial, sans-serif;
1848
+ -webkit-font-smoothing: antialiased;
1849
+ border: none;
1850
+ font-size: 14px;
1851
+ cursor: pointer;
1794
1852
  }
1795
- .big-mute-icon-wrapper[data-big-mute].hide {
1796
- display: none;
1853
+ .subtitles[data-subtitles] button .subtitle-text svg {
1854
+ fill: white;
1797
1855
  }
1798
- .big-mute-icon-wrapper[data-big-mute]:hover {
1799
- cursor: pointer;
1856
+ .subtitles[data-subtitles] button:hover {
1857
+ color: #c9c9c9;
1800
1858
  }
1801
-
1802
- .big-mute-icon[data-big-mute-icon] {
1803
- display: flex;
1804
- align-items: center;
1805
- justify-content: center;
1806
- align-self: center;
1807
- width: 120px;
1808
- height: 120px;
1809
- border: 2px solid white;
1810
- border-radius: 50%;
1811
- filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
1812
- filter: alpha(opacity=60);
1813
- opacity: 1;
1814
- box-shadow: 0 0 1px 0 white;
1815
- background: rgba(240, 243, 247, 0.9411764706);
1816
- z-index: 10000;
1859
+ .subtitles[data-subtitles] button.changing {
1860
+ animation: pulse 0.5s infinite alternate;
1817
1861
  }
1818
- .big-mute-icon[data-big-mute-icon] svg {
1819
- margin-left: 5px;
1862
+ .subtitles[data-subtitles] > ul {
1820
1863
  width: 80px;
1821
- height: 80px;
1864
+ list-style-type: none;
1865
+ position: absolute;
1866
+ bottom: 25px;
1867
+ border: 1px solid black;
1868
+ display: none;
1869
+ background-color: #e6e6e6;
1822
1870
  }
1823
- .big-mute-icon[data-big-mute-icon] svg path {
1824
- fill: #1f1e1e !important;
1871
+ .subtitles[data-subtitles] li {
1872
+ font-size: 10px;
1825
1873
  }
1826
- .big-mute-icon[data-big-mute-icon]:hover {
1827
- background: rgba(240, 243, 247, 0.8784313725);
1874
+ .subtitles[data-subtitles] li[data-title] {
1875
+ background-color: #c3c2c2;
1876
+ padding: 5px;
1828
1877
  }
1829
- .big-mute-icon[data-big-mute-icon]:hover svg path {
1830
- fill: #151515 !important;
1831
- }.seek-time[data-seek-time] {
1832
- position: absolute;
1833
- white-space: nowrap;
1834
- height: 20px;
1835
- line-height: 20px;
1836
- font-size: 0;
1837
- left: -100%;
1838
- bottom: 55px;
1839
- background-color: rgba(2, 2, 2, 0.5);
1840
- z-index: 9999;
1841
- transition: opacity 0.1s ease;
1878
+ .subtitles[data-subtitles] li a {
1879
+ color: #444;
1880
+ padding: 2px 10px;
1881
+ display: block;
1882
+ text-decoration: none;
1842
1883
  }
1843
- .seek-time[data-seek-time].hidden[data-seek-time] {
1844
- opacity: 0;
1884
+ .subtitles[data-subtitles] li a:hover {
1885
+ background-color: #555;
1886
+ color: white;
1845
1887
  }
1846
- .seek-time[data-seek-time] [data-seek-time] {
1847
- display: inline-block;
1888
+ .subtitles[data-subtitles] li a:hover a {
1848
1889
  color: white;
1849
- font-size: 10px;
1850
- padding-left: 7px;
1851
- padding-right: 7px;
1852
- vertical-align: top;
1890
+ text-decoration: none;
1853
1891
  }
1854
- .seek-time[data-seek-time] [data-duration] {
1855
- display: inline-block;
1856
- color: rgba(255, 255, 255, 0.5);
1857
- font-size: 10px;
1858
- padding-right: 7px;
1859
- vertical-align: top;
1892
+ .subtitles[data-subtitles] li.current a {
1893
+ color: #f00;
1894
+ background-color: #555;
1860
1895
  }
1861
- .seek-time[data-seek-time] [data-duration]::before {
1862
- content: "|";
1863
- margin-right: 7px;
1896
+
1897
+ @keyframes pulse {
1898
+ 0% {
1899
+ color: #fff;
1900
+ }
1901
+ 50% {
1902
+ color: #ff0101;
1903
+ }
1904
+ 100% {
1905
+ color: #B80000;
1906
+ }
1907
+ }
1908
+ ::cue {
1909
+ visibility: hidden !important;
1910
+ font-size: 0 !important;
1911
+ }
1912
+
1913
+ .ios-fullscreen::cue {
1914
+ visibility: visible !important;
1915
+ font-size: 1em !important;
1864
1916
  }.share_plugin[data-share] {
1865
1917
  pointer-events: auto;
1866
1918
  z-index: 5;
@@ -1944,13 +1996,47 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
1944
1996
  display: inline-block;
1945
1997
  margin-right: 5px;
1946
1998
  cursor: pointer;
1947
- }.media-control-pip button {
1948
- float: right;
1949
- height: 40px;
1950
- margin-right: 20px;
1999
+ }.level-disabled {
2000
+ opacity: 0.5;
2001
+ pointer-events: none;
2002
+ }.spinner-three-bounce[data-spinner] {
2003
+ position: absolute;
2004
+ width: 70px;
2005
+ text-align: center;
2006
+ z-index: 999;
2007
+ left: 0;
2008
+ right: 0;
2009
+ margin: 0 auto;
2010
+ margin-left: auto;
2011
+ margin-right: auto;
2012
+ /* center vertically */
2013
+ top: 50%;
2014
+ transform: translateY(-50%);
1951
2015
  }
1952
- .media-control-pip button svg {
1953
- height: 20px;
2016
+ .spinner-three-bounce[data-spinner] > div {
2017
+ width: 18px;
2018
+ height: 18px;
2019
+ background-color: #FFF;
2020
+ border-radius: 100%;
2021
+ display: inline-block;
2022
+ animation: bouncedelay 1.4s infinite ease-in-out;
2023
+ /* Prevent first frame from flickering when animation starts */
2024
+ animation-fill-mode: both;
2025
+ }
2026
+ .spinner-three-bounce[data-spinner] [data-bounce1] {
2027
+ animation-delay: -0.32s;
2028
+ }
2029
+ .spinner-three-bounce[data-spinner] [data-bounce2] {
2030
+ animation-delay: -0.16s;
2031
+ }
2032
+
2033
+ @keyframes bouncedelay {
2034
+ 0%, 80%, 100% {
2035
+ transform: scale(0);
2036
+ }
2037
+ 40% {
2038
+ transform: scale(1);
2039
+ }
1954
2040
  }.container-with-poster-clickable .skip_time_plugin[data-skip-time] {
1955
2041
  height: 0;
1956
2042
  }
@@ -2033,125 +2119,39 @@ div.player-error-screen__reload, [data-player] div.player-error-screen__reload {
2033
2119
  }
2034
2120
  .scrub-thumbnails .backdrop .carousel img {
2035
2121
  width: auto;
2036
- }.spinner-three-bounce[data-spinner] {
2037
- position: absolute;
2038
- width: 70px;
2039
- text-align: center;
2040
- z-index: 999;
2041
- left: 0;
2042
- right: 0;
2043
- margin: 0 auto;
2044
- margin-left: auto;
2045
- margin-right: auto;
2046
- /* center vertically */
2047
- top: 50%;
2048
- transform: translateY(-50%);
2049
- }
2050
- .spinner-three-bounce[data-spinner] > div {
2051
- width: 18px;
2052
- height: 18px;
2053
- background-color: #FFF;
2054
- border-radius: 100%;
2055
- display: inline-block;
2056
- animation: bouncedelay 1.4s infinite ease-in-out;
2057
- /* Prevent first frame from flickering when animation starts */
2058
- animation-fill-mode: both;
2059
- }
2060
- .spinner-three-bounce[data-spinner] [data-bounce1] {
2061
- animation-delay: -0.32s;
2062
- }
2063
- .spinner-three-bounce[data-spinner] [data-bounce2] {
2064
- animation-delay: -0.16s;
2065
- }
2066
-
2067
- @keyframes bouncedelay {
2068
- 0%, 80%, 100% {
2069
- transform: scale(0);
2070
- }
2071
- 40% {
2072
- transform: scale(1);
2073
- }
2074
- }*, :focus, :visited {
2075
- outline: none !important;
2076
- }
2077
-
2078
- .subtitles[data-subtitles] {
2079
- float: right;
2080
- position: relative;
2081
- width: 50px;
2082
- }
2083
- .subtitles[data-subtitles] button {
2084
- background-color: transparent;
2085
- color: #fff;
2086
- font-family: Roboto, "Open Sans", Arial, sans-serif;
2087
- -webkit-font-smoothing: antialiased;
2088
- border: none;
2089
- font-size: 14px;
2090
- cursor: pointer;
2091
- }
2092
- .subtitles[data-subtitles] button .subtitle-text svg {
2093
- fill: white;
2094
- }
2095
- .subtitles[data-subtitles] button:hover {
2096
- color: #c9c9c9;
2097
- }
2098
- .subtitles[data-subtitles] button.changing {
2099
- animation: pulse 0.5s infinite alternate;
2100
- }
2101
- .subtitles[data-subtitles] > ul {
2102
- width: 80px;
2103
- list-style-type: none;
2122
+ }.seek-time[data-seek-time] {
2104
2123
  position: absolute;
2105
- bottom: 25px;
2106
- border: 1px solid black;
2107
- display: none;
2108
- background-color: #e6e6e6;
2109
- }
2110
- .subtitles[data-subtitles] li {
2111
- font-size: 10px;
2112
- }
2113
- .subtitles[data-subtitles] li[data-title] {
2114
- background-color: #c3c2c2;
2115
- padding: 5px;
2116
- }
2117
- .subtitles[data-subtitles] li a {
2118
- color: #444;
2119
- padding: 2px 10px;
2120
- display: block;
2121
- text-decoration: none;
2124
+ white-space: nowrap;
2125
+ height: 20px;
2126
+ line-height: 20px;
2127
+ font-size: 0;
2128
+ left: -100%;
2129
+ bottom: 55px;
2130
+ background-color: rgba(2, 2, 2, 0.5);
2131
+ z-index: 9999;
2132
+ transition: opacity 0.1s ease;
2122
2133
  }
2123
- .subtitles[data-subtitles] li a:hover {
2124
- background-color: #555;
2125
- color: white;
2134
+ .seek-time[data-seek-time].hidden[data-seek-time] {
2135
+ opacity: 0;
2126
2136
  }
2127
- .subtitles[data-subtitles] li a:hover a {
2137
+ .seek-time[data-seek-time] [data-seek-time] {
2138
+ display: inline-block;
2128
2139
  color: white;
2129
- text-decoration: none;
2130
- }
2131
- .subtitles[data-subtitles] li.current a {
2132
- color: #f00;
2133
- background-color: #555;
2134
- }
2135
-
2136
- @keyframes pulse {
2137
- 0% {
2138
- color: #fff;
2139
- }
2140
- 50% {
2141
- color: #ff0101;
2142
- }
2143
- 100% {
2144
- color: #B80000;
2145
- }
2140
+ font-size: 10px;
2141
+ padding-left: 7px;
2142
+ padding-right: 7px;
2143
+ vertical-align: top;
2146
2144
  }
2147
- ::cue {
2148
- visibility: hidden !important;
2149
- font-size: 0 !important;
2145
+ .seek-time[data-seek-time] [data-duration] {
2146
+ display: inline-block;
2147
+ color: rgba(255, 255, 255, 0.5);
2148
+ font-size: 10px;
2149
+ padding-right: 7px;
2150
+ vertical-align: top;
2150
2151
  }
2151
-
2152
- .ios-fullscreen::cue {
2153
- visibility: visible !important;
2154
- font-size: 1em !important;
2152
+ .seek-time[data-seek-time] [data-duration]::before {
2153
+ content: "|";
2154
+ margin-right: 7px;
2155
2155
  }.player-logo[data-logo] {
2156
2156
  position: absolute;
2157
2157
  z-index: 2;