@gcorevideo/player 2.19.1 → 2.19.2

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