@gcorevideo/player 2.19.1 → 2.19.3

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