@latest-thinking/lt-player 1.1.0-u → 1.1.0-x

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.
@@ -1,3795 +0,0 @@
1
- @charset "UTF-8";
2
- *,
3
- *::before,
4
- *::after {
5
- box-sizing: border-box;
6
- }
7
-
8
- body {
9
- margin: 0;
10
- }
11
-
12
- .lt-player {
13
- display: flex;
14
- width: 100%;
15
- }
16
-
17
- .lt-player-orientation--portrait {
18
- container: portrait/inline-size;
19
- }
20
- .lt-player-orientation--landscape {
21
- container: landscape/inline-size;
22
- }
23
-
24
- .invisible {
25
- visibility: hidden;
26
- }
27
-
28
- .overflow-hidden-body-important {
29
- overflow: hidden !important;
30
- }
31
-
32
- .d-none {
33
- display: none !important;
34
- }
35
-
36
- .lt-player-orientation--portrait .lt-player-notification .lt-player-video-content .poster-title, .lt-player-notification .lt-player-video-content .poster-title, .plyr .lt-player__poster__body .content__body .poster-paragraph, .plyr .lt-player__poster__body .content__header .poster-title {
37
- display: -webkit-box;
38
- overflow: hidden;
39
- -webkit-box-orient: vertical;
40
- -webkit-line-clamp: 3;
41
- word-break: break-word;
42
- }
43
-
44
- .plyr .share-controller .share-active .share-controller-content .share-controller-icons a .share-icon__icon, .plyr .share-controller .share-active .share-controller-content .share-controller-icons, .plyr .share-controller .share-active .share-controller-content .share-controller-link-wrapper, .lt-player-mobile-share-modal .share-controller .share-inactive .share-controller-content .share-controller-icons a .share-icon__icon, .lt-player-mobile-share-modal .share-controller .share-inactive .share-controller-content .share-controller-icons, .lt-player-mobile-share-modal .share-controller .share-inactive .share-controller-content .share-controller-link-wrapper, .plyr .lt-player-mini-player-controls {
45
- display: flex;
46
- justify-content: center;
47
- align-items: center;
48
- }
49
-
50
- .plyr .share-controller .share-active .share-controller-content .share-controller-link-wrapper .share-controller-link, .lt-player-mobile-share-modal .share-controller .share-inactive .share-controller-content .share-controller-link-wrapper .share-controller-link, .plyr__controls .settings-controllers-enable__button-save .button-save, .lt-player-mobile-settings-modal .settings-controllers-enable__button-save .button-save, .lt-player__additional-info-mobile button,
51
- .lt-player .lt-player__additional-info__is_set_in-side button, .lt-player__additional-info button, .lt-player-notification__notification-button-state .player-state, .plyr .lt-player-mini-player-controls__play-button, .plyr .lt-player-mini-player-controls__exit, .plyr__controls .bottom-controller__play-button_body .play-button, .plyr__controls .bottom-controller button, .plyr__controls .top-controllers button, .plyr__controls-enable .top-controllers button, .plyr__controls-enable-settings .top-controllers button, .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-lt-player-share, .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-button-watch-now, .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-button-play, .player-lt__modal-content button,
52
- .player-lt__modal-content a, .player-lt__mobile__modal-content button,
53
- .player-lt__mobile__modal-content a {
54
- display: flex;
55
- align-items: center;
56
- justify-content: center;
57
- font-size: 18px;
58
- font-weight: 600;
59
- font-style: normal;
60
- text-decoration: none;
61
- vertical-align: middle;
62
- line-height: 150%;
63
- padding: 8px 8px;
64
- text-align: center;
65
- border: none;
66
- border-radius: 0;
67
- cursor: pointer;
68
- }
69
- .plyr .share-controller .share-active .share-controller-content .share-controller-link-wrapper .share-controller-link img, .lt-player-mobile-share-modal .share-controller .share-inactive .share-controller-content .share-controller-link-wrapper .share-controller-link img, .plyr__controls .settings-controllers-enable__button-save .button-save img, .lt-player-mobile-settings-modal .settings-controllers-enable__button-save .button-save img, .lt-player__additional-info-mobile button img,
70
- .lt-player .lt-player__additional-info__is_set_in-side button img, .lt-player__additional-info button img, .lt-player-notification__notification-button-state .player-state img, .plyr .lt-player-mini-player-controls__play-button img, .plyr .lt-player-mini-player-controls__exit img, .plyr__controls .bottom-controller__play-button_body .play-button img, .plyr__controls .bottom-controller button img, .plyr__controls .top-controllers button img, .plyr__controls-enable .top-controllers button img, .plyr__controls-enable-settings .top-controllers button img, .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-lt-player-share img, .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-button-watch-now img, .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-button-play img, .player-lt__modal-content button img,
71
- .player-lt__modal-content a img, .player-lt__mobile__modal-content button img,
72
- .player-lt__mobile__modal-content a img {
73
- width: 24px;
74
- height: 24px;
75
- min-width: 24px;
76
- min-height: 24px;
77
- }
78
-
79
- .plyr__controls .settings-controllers .line-button, .lt-player-mobile-settings-modal .settings-controllers .line-button, .player-lt__mobile__modal-header .line-button {
80
- display: flex;
81
- width: 56px;
82
- height: 6px;
83
- background-color: #E6E6E6;
84
- margin: 0.5rem auto;
85
- cursor: pointer;
86
- }
87
-
88
- .plyr__controls .settings-controllers-enable__speed-range .speed-range-input-body .speed-range-input::-moz-range-progress, .lt-player-mobile-settings-modal .settings-controllers-enable__speed-range .speed-range-input-body .speed-range-input::-moz-range-progress, .plyr__controls .bottom-controller .volume-control-enable .volume_control__background__area .volume_control__background__area__range::-moz-range-progress, .plyr--full-ui.plyr--video input[type=range]::-moz-range-progress {
89
- height: 3px;
90
- cursor: pointer;
91
- }
92
-
93
- .plyr__controls .settings-controllers-enable__speed-range .speed-range-input-body .speed-range-input::-webkit-slider-runnable-track, .lt-player-mobile-settings-modal .settings-controllers-enable__speed-range .speed-range-input-body .speed-range-input::-webkit-slider-runnable-track, .plyr__controls .bottom-controller .volume-control-enable .volume_control__background__area .volume_control__background__area__range::-webkit-slider-runnable-track, .plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track {
94
- height: 2px;
95
- background-color: #27282A;
96
- }
97
-
98
- .plyr__controls .settings-controllers-enable__speed-range .speed-range-input-body .speed-range-input::-moz-range-track, .lt-player-mobile-settings-modal .settings-controllers-enable__speed-range .speed-range-input-body .speed-range-input::-moz-range-track, .plyr__controls .bottom-controller .volume-control-enable .volume_control__background__area .volume_control__background__area__range::-moz-range-track, .plyr--full-ui.plyr--video input[type=range]::-moz-range-track {
99
- height: 2px;
100
- background-color: #27282A;
101
- }
102
-
103
- .plyr__controls .settings-controllers-enable__speed-range .speed-range-input-body .speed-range-input::-ms-track, .lt-player-mobile-settings-modal .settings-controllers-enable__speed-range .speed-range-input-body .speed-range-input::-ms-track, .plyr__controls .bottom-controller .volume-control-enable .volume_control__background__area .volume_control__background__area__range::-ms-track {
104
- height: 2px;
105
- }
106
-
107
- .plyr__controls .settings-controllers-enable__speed-range .speed-range-input-body .speed-range-input::-webkit-slider-thumb, .lt-player-mobile-settings-modal .settings-controllers-enable__speed-range .speed-range-input-body .speed-range-input::-webkit-slider-thumb, .plyr__controls .bottom-controller .volume-control-enable .volume_control__background__area .volume_control__background__area__range::-webkit-slider-thumb, .plyr--full-ui.plyr--video input[type=range]::-webkit-slider-thumb {
108
- box-shadow: 0 1px 0 #27282A;
109
- border: 4px solid #fff;
110
- height: 13px;
111
- width: 13px;
112
- border-radius: 0;
113
- background: #000;
114
- cursor: pointer;
115
- -webkit-appearance: none;
116
- margin-top: -5.5px;
117
- }
118
-
119
- .plyr__controls .settings-controllers-enable__speed-range .speed-range-input-body .speed-range-input::-moz-range-thumb, .lt-player-mobile-settings-modal .settings-controllers-enable__speed-range .speed-range-input-body .speed-range-input::-moz-range-thumb, .plyr__controls .bottom-controller .volume-control-enable .volume_control__background__area .volume_control__background__area__range::-moz-range-thumb, .plyr--full-ui.plyr--video input[type=range]::-moz-range-thumb {
120
- color: #27282A;
121
- box-shadow: 1px 1px 1px #27282A;
122
- border: 4px solid #fff;
123
- height: 5px;
124
- width: 5px;
125
- border-radius: 0;
126
- background: #000;
127
- cursor: pointer;
128
- }
129
-
130
- .plyr__controls .settings-controllers-enable__speed-range .speed-range-input-body .speed-range-input::-ms-thumb, .lt-player-mobile-settings-modal .settings-controllers-enable__speed-range .speed-range-input-body .speed-range-input::-ms-thumb, .plyr__controls .bottom-controller .volume-control-enable .volume_control__background__area .volume_control__background__area__range::-ms-thumb, .plyr--full-ui.plyr--video input[type=range]::-ms-thumb {
131
- margin-top: 2px;
132
- box-shadow: 1px 1px 1px #27282A;
133
- border: 5px solid #fff;
134
- height: 16px;
135
- width: 16px;
136
- border-radius: 1px;
137
- background: #000;
138
- cursor: pointer;
139
- }
140
-
141
- @font-face {
142
- font-family: "MuseoSans";
143
- src: url("../../fonts/museo/MuseoSans-100.otf") format("opentype");
144
- font-weight: 100;
145
- }
146
- @font-face {
147
- font-family: "MuseoSans";
148
- src: url("../../fonts/museo/MuseoSans-300.otf") format("opentype");
149
- font-weight: 300;
150
- }
151
- @font-face {
152
- font-family: "MuseoSans";
153
- src: url("../../fonts/museo/MuseoSans-500.otf") format("opentype");
154
- font-weight: 500;
155
- }
156
- @font-face {
157
- font-family: "MuseoSans";
158
- src: url("../../fonts/museo/MuseoSans-700.otf") format("opentype");
159
- font-weight: 700;
160
- }
161
- @font-face {
162
- font-family: "MuseoSans";
163
- src: url("../../fonts/museo/MuseoSans-900.otf") format("opentype");
164
- font-weight: 900;
165
- }
166
- .lt-player-orientation--portrait .plyr iframe,
167
- .lt-player-orientation--portrait .plyr video {
168
- border-radius: 0 0 0 32px !important;
169
- background: #000 !important;
170
- }
171
- .lt-player-orientation--portrait .plyr video {
172
- background: transparent !important;
173
- }
174
-
175
- .poster-lt-player-share,
176
- .mini-player-control {
177
- visibility: hidden;
178
- }
179
-
180
- .plyr--video {
181
- background: transparent !important;
182
- }
183
-
184
- .plyr__video-wrapper {
185
- background: transparent !important;
186
- }
187
-
188
- .plyr {
189
- border-radius: 0 0 0 30px;
190
- z-index: unset !important;
191
- width: 100%;
192
- }
193
- .plyr__video-embed__container {
194
- transform: none !important;
195
- position: unset !important;
196
- padding-bottom: 0 !important;
197
- }
198
- .plyr__video-embed__poster {
199
- background-size: cover !important;
200
- background-repeat: no-repeat !important;
201
- background-position: center center !important;
202
- }
203
-
204
- .lt-player-portrate--mobile .fullscreen-custom-control {
205
- display: none !important;
206
- }
207
-
208
- .lt-player-wrapper {
209
- width: 100%;
210
- height: 100%;
211
- -o-object-fit: cover;
212
- object-fit: cover;
213
- }
214
-
215
- .lt-player.fullscreen-disabled .fullscreen-custom-control {
216
- display: none;
217
- }
218
-
219
- .lt-player {
220
- font-family: "MuseoSans", sans-serif !important;
221
- }
222
- .lt-player h1,
223
- .lt-player h2,
224
- .lt-player h3,
225
- .lt-player h4,
226
- .lt-player h5,
227
- .lt-player h6,
228
- .lt-player p {
229
- font-family: "MuseoSans", sans-serif !important;
230
- }
231
-
232
- .lt-player-onload-poster {
233
- display: flex;
234
- justify-content: center;
235
- align-items: center;
236
- width: 100%;
237
- height: 100%;
238
- }
239
-
240
- img.filter {
241
- filter: brightness(0) invert(1) !important;
242
- }
243
-
244
- .lt-player-portrate--mobile.lt-player--portrait__lg .player-lt__modal-body, .lt-player-portrate--mobile.lt-player--portrait__md .player-lt__modal-body, .lt-player-portrate--mobile.lt-player--portrait__sm .player-lt__modal-body, .lt-player-portrate--mobile.lt-player--portrait__xs .player-lt__modal-body {
245
- padding: 0;
246
- }
247
- .lt-player-portrate--mobile.lt-player--portrait__xs .player-lt__mobile__modal-content h1,
248
- .lt-player-portrate--mobile.lt-player--portrait__xs .player-lt__mobile__modal-content h2,
249
- .lt-player-portrate--mobile.lt-player--portrait__xs .player-lt__mobile__modal-content h3,
250
- .lt-player-portrate--mobile.lt-player--portrait__xs .player-lt__mobile__modal-content h4,
251
- .lt-player-portrate--mobile.lt-player--portrait__xs .player-lt__mobile__modal-content h5,
252
- .lt-player-portrate--mobile.lt-player--portrait__xs .player-lt__mobile__modal-content h6,
253
- .lt-player-portrate--mobile.lt-player--portrait__xs .player-lt__mobile__modal-content p,
254
- .lt-player-portrate--mobile.lt-player--portrait__xs .player-lt__mobile__modal-content b,
255
- .lt-player-portrate--mobile.lt-player--portrait__xs .player-lt__mobile__modal-content strong,
256
- .lt-player-portrate--mobile.lt-player--portrait__xs .player-lt__mobile__modal-content span {
257
- font-size: 16px;
258
- }
259
-
260
- .player-lt__mobile {
261
- transition: 0.4s;
262
- position: absolute;
263
- width: 100%;
264
- z-index: 30;
265
- left: 0;
266
- background: #fff;
267
- display: flex;
268
- flex-direction: column;
269
- padding: 0;
270
- height: 90%;
271
- border-radius: 10px 10px 0 0;
272
- }
273
- .player-lt__mobile__modal-header {
274
- position: sticky;
275
- top: 0;
276
- display: flex;
277
- justify-content: space-between;
278
- align-items: center;
279
- background-color: #F9F9F9;
280
- min-height: 50px;
281
- padding: 0 16px;
282
- border-radius: 15px 15px 0 0;
283
- }
284
- .player-lt__mobile__modal-header .player-lt__close-button {
285
- margin-bottom: 0;
286
- }
287
- .player-lt__mobile__modal-content {
288
- color: #27282A;
289
- text-align: left;
290
- overflow: auto;
291
- padding: 20px;
292
- font-family: "MuseoSans", sans-serif !important;
293
- }
294
- .player-lt__mobile__modal-content button,
295
- .player-lt__mobile__modal-content a {
296
- color: #27282A;
297
- background-color: #D8D846;
298
- }
299
- .player-lt__mobile__modal-content button:hover,
300
- .player-lt__mobile__modal-content a:hover {
301
- color: #27282A;
302
- background-color: #c2c229;
303
- }
304
- .player-lt__mobile__modal-content button:active, .player-lt__mobile__modal-content button:focus,
305
- .player-lt__mobile__modal-content a:active,
306
- .player-lt__mobile__modal-content a:focus {
307
- color: #27282A;
308
- background-color: #D8D846;
309
- }
310
- .player-lt__mobile__modal-content button:focus-visible, .player-lt__mobile__modal-content button:focus,
311
- .player-lt__mobile__modal-content a:focus-visible,
312
- .player-lt__mobile__modal-content a:focus {
313
- outline: transparent;
314
- }
315
- .player-lt__mobile__modal-content img {
316
- max-width: 100%;
317
- height: auto;
318
- margin-bottom: 16px;
319
- }
320
- .player-lt__mobile__modal-content h2,
321
- .player-lt__mobile__modal-content h4,
322
- .player-lt__mobile__modal-content p {
323
- color: #3E4345 !important;
324
- }
325
- .player-lt__mobile__modal-content h1,
326
- .player-lt__mobile__modal-content h2 {
327
- font-size: 30px;
328
- font-weight: 600;
329
- margin-top: 0;
330
- margin-bottom: 16px;
331
- color: #3E4345 !important;
332
- }
333
- .player-lt__mobile__modal-content h3,
334
- .player-lt__mobile__modal-content h4,
335
- .player-lt__mobile__modal-content h5,
336
- .player-lt__mobile__modal-content h6 {
337
- font-size: 24px;
338
- font-weight: 600;
339
- margin-bottom: 0;
340
- margin-top: 16px;
341
- color: #3E4345 !important;
342
- }
343
- .player-lt__mobile__modal-content b,
344
- .player-lt__mobile__modal-content strong,
345
- .player-lt__mobile__modal-content span {
346
- display: block;
347
- font-size: 16px;
348
- margin-top: 16px;
349
- color: #3E4345 !important;
350
- }
351
- .player-lt__mobile__modal-content p {
352
- font-weight: 300;
353
- line-height: 1.5;
354
- font-size: 16px;
355
- margin-bottom: 0;
356
- color: #3E4345 !important;
357
- }
358
- .player-lt__modal {
359
- z-index: 9999;
360
- position: fixed;
361
- left: 0;
362
- top: 0;
363
- width: 100%;
364
- height: 100%;
365
- }
366
- @media (min-width: 620px) {
367
- .player-lt__modal {
368
- background-color: rgba(0, 0, 0, 0.5);
369
- }
370
- }
371
- .player-lt__modal__mobile {
372
- position: absolute;
373
- width: 100%;
374
- z-index: 50;
375
- left: 0;
376
- background: #fff;
377
- padding: 0 0 32px 0;
378
- bottom: 0;
379
- transition: 0.3s;
380
- max-height: 90%;
381
- overflow: auto;
382
- border-radius: 10px 10px 0 0;
383
- }
384
- .player-lt__modal__mobile__background {
385
- position: absolute;
386
- width: 100%;
387
- height: 100%;
388
- top: 0;
389
- background: #27282A;
390
- opacity: 0.75;
391
- z-index: 10;
392
- }
393
- .player-lt__modal-content {
394
- word-break: break-word;
395
- z-index: 20;
396
- position: absolute;
397
- top: 50%;
398
- left: 50%;
399
- transform: translate(-50%, -50%);
400
- background-color: #fff;
401
- color: #3E4345;
402
- border-radius: 0;
403
- font-family: "MuseoSans", sans-serif !important;
404
- width: 100%;
405
- max-height: calc(100% - 50px);
406
- overflow: auto;
407
- max-width: 620px;
408
- }
409
- @media (max-width: 620px) {
410
- .player-lt__modal-content {
411
- max-height: unset;
412
- width: auto;
413
- height: 100%;
414
- position: unset;
415
- transform: unset;
416
- border: 1px solid #A8ADB0;
417
- border-radius: 0 0 0 30px;
418
- }
419
- }
420
- .player-lt__modal-content .modal-flex {
421
- display: flex;
422
- align-items: end;
423
- gap: 24px;
424
- flex-wrap: wrap;
425
- }
426
- .player-lt__modal-content .modal-flex img {
427
- max-width: 220px;
428
- margin-bottom: 0;
429
- flex: 50%;
430
- }
431
- .player-lt__modal-content .modal-flex h3 {
432
- flex: 50%;
433
- word-break: unset;
434
- }
435
- .player-lt__modal-content::-webkit-scrollbar-track {
436
- -webkit-box-shadow: transparent;
437
- background-color: transparent;
438
- }
439
- .player-lt__modal-content::-webkit-scrollbar {
440
- width: 10px;
441
- background-color: transparent;
442
- }
443
- .player-lt__modal-content::-webkit-scrollbar-thumb {
444
- background-color: #D9D9D9;
445
- }
446
- .player-lt__modal-content hr {
447
- margin: 24px 0;
448
- border-top: 1px solid #808689;
449
- }
450
- .player-lt__modal-content button,
451
- .player-lt__modal-content a {
452
- color: #27282A;
453
- background-color: #D8D846;
454
- }
455
- .player-lt__modal-content button:hover,
456
- .player-lt__modal-content a:hover {
457
- color: #27282A;
458
- background-color: #c2c229;
459
- }
460
- .player-lt__modal-content button:active, .player-lt__modal-content button:focus,
461
- .player-lt__modal-content a:active,
462
- .player-lt__modal-content a:focus {
463
- color: #27282A;
464
- background-color: #D8D846;
465
- }
466
- .player-lt__modal-content button:focus-visible, .player-lt__modal-content button:focus,
467
- .player-lt__modal-content a:focus-visible,
468
- .player-lt__modal-content a:focus {
469
- outline: transparent;
470
- }
471
- .player-lt__modal-content img {
472
- max-width: 100%;
473
- height: auto;
474
- margin-bottom: 16px;
475
- }
476
- .player-lt__modal-content h2,
477
- .player-lt__modal-content h4,
478
- .player-lt__modal-content p {
479
- color: #3E4345 !important;
480
- }
481
- .player-lt__modal-content h1,
482
- .player-lt__modal-content h2 {
483
- font-size: 30px;
484
- font-weight: 600;
485
- margin-top: 0;
486
- margin-bottom: 16px;
487
- color: #3E4345 !important;
488
- margin-bottom: 32px;
489
- }
490
- .player-lt__modal-content h3,
491
- .player-lt__modal-content h4,
492
- .player-lt__modal-content h5,
493
- .player-lt__modal-content h6 {
494
- font-size: 24px;
495
- font-weight: 600;
496
- margin-bottom: 0;
497
- margin-top: 16px;
498
- color: #3E4345 !important;
499
- margin-top: 0;
500
- }
501
- .player-lt__modal-content b,
502
- .player-lt__modal-content strong,
503
- .player-lt__modal-content span {
504
- display: block;
505
- font-size: 16px;
506
- margin-top: 16px;
507
- color: #3E4345 !important;
508
- }
509
- .player-lt__modal-content p {
510
- font-weight: 300;
511
- line-height: 1.5;
512
- font-size: 16px;
513
- margin-bottom: 0;
514
- color: #3E4345 !important;
515
- margin-top: 8px;
516
- margin-bottom: 32px;
517
- }
518
- .player-lt__modal-content p:last-child {
519
- margin-bottom: 0;
520
- }
521
- .player-lt__modal-body {
522
- padding: 40px;
523
- }
524
- @media (max-width: 620px) {
525
- .player-lt__modal-body {
526
- padding: 20px;
527
- }
528
- }
529
- .player-lt__close-button {
530
- z-index: 20;
531
- width: 24px;
532
- font-size: 30px !important;
533
- line-height: 1;
534
- padding: 0;
535
- text-align: center;
536
- cursor: pointer;
537
- border-radius: 0.25rem;
538
- background-color: transparent;
539
- color: #27282A;
540
- transition: color 0.12s ease-in-out;
541
- position: absolute;
542
- top: 40px;
543
- right: 40px;
544
- margin-top: 0 !important;
545
- }
546
- @media (max-width: 620px) {
547
- .player-lt__close-button {
548
- top: 20px;
549
- right: 20px;
550
- }
551
- }
552
- .player-lt__close-button:hover {
553
- color: #d75b4c;
554
- }
555
-
556
- .lt-player-spinner__loader {
557
- position: absolute;
558
- width: 100%;
559
- height: 100%;
560
- display: flex;
561
- justify-content: center;
562
- align-items: center;
563
- z-index: 999;
564
- background: rgba(251, 251, 251, 0.9);
565
- }
566
- .lt-player-spinner__loader__circle-svg {
567
- animation: rotate 2s linear infinite;
568
- width: 50px;
569
- height: 50px;
570
- }
571
- .lt-player-spinner__loader__circle-svg .path {
572
- stroke: #D8D846;
573
- stroke-linecap: round;
574
- animation: dash 1.5s ease-in-out infinite;
575
- }
576
-
577
- @keyframes rotate {
578
- 100% {
579
- transform: rotate(360deg);
580
- }
581
- }
582
- @keyframes dash {
583
- 0% {
584
- stroke-dasharray: 1, 150;
585
- stroke-dashoffset: 0;
586
- }
587
- 50% {
588
- stroke-dasharray: 90, 150;
589
- stroke-dashoffset: -35;
590
- }
591
- 100% {
592
- stroke-dasharray: 90, 150;
593
- stroke-dashoffset: -124;
594
- }
595
- }
596
- .plyr--full-ui.plyr--video input[type=range] {
597
- cursor: pointer;
598
- }
599
- .plyr--full-ui.plyr--video input[type=range]:active {
600
- outline: unset;
601
- }
602
- .plyr .lt-player__preload-hide {
603
- opacity: 0 !important;
604
- }
605
- .plyr .lt-player__poster {
606
- position: absolute;
607
- inset: 0;
608
- color: #fff !important;
609
- z-index: 90;
610
- }
611
- .plyr .lt-player__poster__image-body {
612
- position: absolute;
613
- width: 100%;
614
- height: 100%;
615
- z-index: 2;
616
- opacity: 1;
617
- transition: all 0.2s ease-in-out;
618
- }
619
- .plyr .lt-player__poster__image-body--preload {
620
- opacity: 0;
621
- transition: all 0.2s ease-in-out;
622
- }
623
- .plyr .lt-player__poster__img--set-custom {
624
- -o-object-fit: cover;
625
- object-fit: cover;
626
- width: 100%;
627
- height: 100%;
628
- }
629
- .plyr .lt-player__poster__img__set-default {
630
- position: absolute;
631
- top: 50%;
632
- left: 50%;
633
- transform: translate(-50%, -50%);
634
- z-index: 10;
635
- }
636
- .plyr .lt-player__poster--background {
637
- position: absolute;
638
- inset: 0;
639
- background-color: #A8ADB0;
640
- z-index: -1;
641
- }
642
- .plyr .lt-player__poster__body {
643
- position: absolute;
644
- width: 100%;
645
- height: 100%;
646
- z-index: 3;
647
- }
648
- .plyr .lt-player__poster__body:hover .poster-paragraph {
649
- text-decoration: underline;
650
- }
651
- .plyr .lt-player__poster__body:hover .content__footer .poster-buttons .poster-button-play,
652
- .plyr .lt-player__poster__body:hover .content__footer .poster-buttons .poster-button-watch-now {
653
- color: #27282A;
654
- background-color: #c2c229;
655
- }
656
- .plyr .lt-player__poster__body .content {
657
- position: relative;
658
- display: flex;
659
- flex-direction: column;
660
- height: 100%;
661
- z-index: 2;
662
- cursor: pointer;
663
- }
664
- .plyr .lt-player__poster__body .content__header {
665
- padding: 25px 25px 0;
666
- }
667
- .plyr .lt-player__poster__body .content__header .poster-title {
668
- -webkit-line-clamp: 3;
669
- color: #fff;
670
- font-size: 16px;
671
- font-weight: 100;
672
- margin: 0;
673
- }
674
- .plyr .lt-player__poster__body .content__body {
675
- padding: 0 25px;
676
- }
677
- .plyr .lt-player__poster__body .content__body .poster-paragraph {
678
- -webkit-line-clamp: 4;
679
- font-weight: 600;
680
- font-size: 16px;
681
- line-height: 1.2;
682
- margin: 8px 0;
683
- color: #fff;
684
- width: 70%;
685
- }
686
- .plyr .lt-player__poster__body .content__footer {
687
- margin-top: auto;
688
- padding: 0 25px 25px;
689
- }
690
- .plyr .lt-player__poster__body .content__footer .poster-buttons {
691
- display: flex;
692
- gap: 5px;
693
- }
694
- .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-button-play {
695
- color: #27282A;
696
- background-color: #D8D846;
697
- padding: 6px;
698
- font-size: 12px;
699
- }
700
- .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-button-play:hover {
701
- color: #27282A;
702
- background-color: #c2c229;
703
- }
704
- .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-button-play:active, .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-button-play:focus {
705
- color: #27282A;
706
- background-color: #D8D846;
707
- }
708
- .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-button-play:focus-visible, .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-button-play:focus {
709
- outline: transparent;
710
- }
711
- .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-button-play img {
712
- width: 14px;
713
- height: 14px;
714
- min-width: 14px;
715
- min-height: 14px;
716
- }
717
- .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-button-watch-now {
718
- color: #27282A;
719
- background-color: #D8D846;
720
- padding: 7px 7px;
721
- padding: 0 16px;
722
- font-size: 12px;
723
- font-weight: 700;
724
- }
725
- .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-button-watch-now:hover {
726
- color: #27282A;
727
- background-color: #c2c229;
728
- }
729
- .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-button-watch-now:active, .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-button-watch-now:focus {
730
- color: #27282A;
731
- background-color: #D8D846;
732
- }
733
- .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-button-watch-now:focus-visible, .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-button-watch-now:focus {
734
- outline: transparent;
735
- }
736
- .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-button-watch-now img {
737
- width: 16px;
738
- height: 16px;
739
- min-width: 16px;
740
- min-height: 16px;
741
- }
742
- .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-lt-player-share {
743
- color: #27282A;
744
- background-color: #808689;
745
- padding: 6px;
746
- margin-left: auto;
747
- }
748
- .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-lt-player-share:hover {
749
- color: #27282A;
750
- background-color: #676c6f;
751
- }
752
- .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-lt-player-share:active, .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-lt-player-share:focus {
753
- color: #27282A;
754
- background-color: #808689;
755
- }
756
- .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-lt-player-share:focus-visible, .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-lt-player-share:focus {
757
- outline: transparent;
758
- }
759
- .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-lt-player-share img {
760
- width: 14px;
761
- height: 14px;
762
- min-width: 14px;
763
- min-height: 14px;
764
- }
765
-
766
- .lt-player-orientation--portrait .plyr .lt-player__poster__img--set-custom {
767
- -o-object-position: 90% 50%;
768
- object-position: 90% 50%;
769
- }
770
- .lt-player-orientation--portrait .plyr .lt-player__poster__body .content__header .poster-title {
771
- font-size: 16px;
772
- font-weight: 400;
773
- }
774
- .lt-player-orientation--portrait .plyr .lt-player__poster__body .content__body {
775
- margin-top: auto;
776
- }
777
- .lt-player-orientation--portrait .plyr .lt-player__poster__body .content__body .poster-paragraph {
778
- font-size: 21px;
779
- line-height: 1.2;
780
- margin-top: 12px;
781
- margin-bottom: 20px;
782
- width: 100%;
783
- text-decoration: underline;
784
- }
785
- .lt-player-orientation--portrait .plyr .lt-player__poster__body .content__footer {
786
- margin-top: unset;
787
- }
788
- .lt-player-orientation--portrait .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-button-play,
789
- .lt-player-orientation--portrait .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-button-watch-now,
790
- .lt-player-orientation--portrait .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-lt-player-share {
791
- padding: 8px 8px;
792
- font-size: 18px;
793
- font-weight: 600;
794
- }
795
- .lt-player-orientation--portrait .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-button-play img,
796
- .lt-player-orientation--portrait .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-button-watch-now img,
797
- .lt-player-orientation--portrait .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-lt-player-share img {
798
- width: 24px;
799
- height: 24px;
800
- min-width: 24px;
801
- min-height: 24px;
802
- }
803
- .lt-player-orientation--portrait .plyr .lt-player__poster__body .content__footer .poster-buttons .poster-button-watch-now {
804
- padding: 6px 16px;
805
- }
806
-
807
- @container landscape (width > 375px) {
808
- .lt-player-orientation--landscape .lt-player__poster__body .content__body .poster-paragraph {
809
- width: 50%;
810
- }
811
- }
812
- @container landscape (width > 479px) {
813
- .lt-player-orientation--landscape .lt-player__poster__body .content__header {
814
- padding: 25px 50px 0;
815
- }
816
- .lt-player-orientation--landscape .lt-player__poster__body .content__header .poster-title {
817
- font-weight: 700;
818
- }
819
- .lt-player-orientation--landscape .lt-player__poster__body .content__body {
820
- padding: 0 50px;
821
- }
822
- .lt-player-orientation--landscape .lt-player__poster__body .content__body .poster-paragraph {
823
- font-size: 20px;
824
- margin: 25px 0 8px;
825
- width: 60%;
826
- }
827
- .lt-player-orientation--landscape .lt-player__poster__body .content__footer {
828
- padding: 0 50px 25px;
829
- }
830
- }
831
- @container landscape (width > 639px) {
832
- .lt-player-orientation--landscape .lt-player__poster__body .content__header {
833
- padding: 50px 50px 0;
834
- }
835
- .lt-player-orientation--landscape .lt-player__poster__body .content__body .poster-paragraph {
836
- font-size: 28px;
837
- margin: 25px 0 8px;
838
- width: 60%;
839
- }
840
- .lt-player-orientation--landscape .lt-player__poster__body .content__footer {
841
- padding: 50px;
842
- }
843
- .lt-player-orientation--landscape .lt-player__poster__body .content__footer .poster-buttons .poster-button-play {
844
- padding: 8px 8px;
845
- }
846
- .lt-player-orientation--landscape .lt-player__poster__body .content__footer .poster-buttons .poster-button-play img {
847
- width: 24px;
848
- height: 24px;
849
- min-width: 24px;
850
- min-height: 24px;
851
- }
852
- .lt-player-orientation--landscape .lt-player__poster__body .content__footer .poster-buttons .poster-button-watch-now {
853
- padding: 8px 8px;
854
- padding: 0 16px;
855
- font-size: 16px;
856
- }
857
- .lt-player-orientation--landscape .lt-player__poster__body .content__footer .poster-buttons .poster-button-watch-now img {
858
- width: 24px;
859
- height: 24px;
860
- min-width: 24px;
861
- min-height: 24px;
862
- }
863
- .lt-player-orientation--landscape .lt-player__poster__body .content__footer .poster-buttons .poster-lt-player-share {
864
- padding: 8px 8px;
865
- }
866
- .lt-player-orientation--landscape .lt-player__poster__body .content__footer .poster-buttons .poster-lt-player-share img {
867
- width: 24px;
868
- height: 24px;
869
- min-width: 24px;
870
- min-height: 24px;
871
- }
872
- }
873
- @container landscape (width > 759px) {
874
- .lt-player-orientation--landscape .lt-player__poster__body .content__body .poster-paragraph {
875
- font-size: 32px;
876
- width: 60%;
877
- }
878
- }
879
- .plyr .plyr__controls-enable-settings {
880
- opacity: 1;
881
- }
882
- .plyr .plyr__controls-enable-share {
883
- opacity: 1;
884
- }
885
- .plyr__controls .top-controllers, .plyr__controls-enable .top-controllers, .plyr__controls-enable-settings .top-controllers {
886
- width: 100%;
887
- padding: 10px 10px 0;
888
- margin-bottom: auto;
889
- }
890
- .plyr__controls .top-controllers button, .plyr__controls-enable .top-controllers button, .plyr__controls-enable-settings .top-controllers button {
891
- color: #fff;
892
- background-color: #27282A;
893
- padding: 7px 7px;
894
- }
895
- .plyr__controls .top-controllers button:hover, .plyr__controls-enable .top-controllers button:hover, .plyr__controls-enable-settings .top-controllers button:hover {
896
- color: #fff;
897
- background-color: #404144;
898
- }
899
- .plyr__controls .top-controllers button:active, .plyr__controls .top-controllers button:focus, .plyr__controls-enable .top-controllers button:active, .plyr__controls-enable .top-controllers button:focus, .plyr__controls-enable-settings .top-controllers button:active, .plyr__controls-enable-settings .top-controllers button:focus {
900
- color: #fff;
901
- background-color: #27282A;
902
- }
903
- .plyr__controls .top-controllers button:focus-visible, .plyr__controls .top-controllers button:focus, .plyr__controls-enable .top-controllers button:focus-visible, .plyr__controls-enable .top-controllers button:focus, .plyr__controls-enable-settings .top-controllers button:focus-visible, .plyr__controls-enable-settings .top-controllers button:focus {
904
- outline: transparent;
905
- }
906
- .plyr__controls .top-controllers button img, .plyr__controls-enable .top-controllers button img, .plyr__controls-enable-settings .top-controllers button img {
907
- width: 16px;
908
- height: 16px;
909
- min-width: 16px;
910
- min-height: 16px;
911
- }
912
- .plyr__controls .top-controllers__background, .plyr__controls-enable .top-controllers__background, .plyr__controls-enable-settings .top-controllers__background {
913
- position: absolute;
914
- width: 100%;
915
- left: 0;
916
- top: 0;
917
- height: 20%;
918
- background: var(--plyr-video-controls-background, linear-gradient(transparent, rgba(0, 0, 0, 0.75)));
919
- rotate: 180deg;
920
- display: none;
921
- }
922
- .plyr__controls .top-controllers__body, .plyr__controls-enable .top-controllers__body, .plyr__controls-enable-settings .top-controllers__body {
923
- display: flex;
924
- justify-content: space-between;
925
- }
926
- .plyr__controls .top-controllers__body__left, .plyr__controls .top-controllers__body__right, .plyr__controls-enable .top-controllers__body__left, .plyr__controls-enable .top-controllers__body__right, .plyr__controls-enable-settings .top-controllers__body__left, .plyr__controls-enable-settings .top-controllers__body__right {
927
- display: flex;
928
- flex-direction: column;
929
- flex: 0 0 12%;
930
- z-index: 5;
931
- }
932
- .plyr__controls .top-controllers__body__left, .plyr__controls-enable .top-controllers__body__left, .plyr__controls-enable-settings .top-controllers__body__left {
933
- align-items: flex-start;
934
- }
935
- .plyr__controls .top-controllers__body__right, .plyr__controls-enable .top-controllers__body__right, .plyr__controls-enable-settings .top-controllers__body__right {
936
- align-items: end;
937
- }
938
- .plyr__controls .top-controllers__body__center, .plyr__controls-enable .top-controllers__body__center, .plyr__controls-enable-settings .top-controllers__body__center {
939
- flex: 1;
940
- width: 100%;
941
- word-break: break-word;
942
- }
943
- .plyr__controls .top-controllers__body__center .chapter, .plyr__controls-enable .top-controllers__body__center .chapter, .plyr__controls-enable-settings .top-controllers__body__center .chapter {
944
- font-size: 16px;
945
- font-weight: 500;
946
- position: relative;
947
- z-index: 90;
948
- margin: 0;
949
- color: #fff !important;
950
- }
951
- .plyr__controls .top-controllers__body__right .mini-player-control, .plyr__controls-enable .top-controllers__body__right .mini-player-control, .plyr__controls-enable-settings .top-controllers__body__right .mini-player-control {
952
- margin-top: 20px;
953
- }
954
-
955
- .lt-player-orientation--portrait .plyr__controls .top-controllers {
956
- padding: 16px;
957
- }
958
-
959
- @container portrait (width > 319px) {
960
- .lt-player-orientation--portrait .plyr__controls .top-controllers {
961
- padding: 20px 20px 0;
962
- }
963
- .lt-player-orientation--portrait .plyr__controls .top-controllers__body__center .chapter {
964
- margin-top: 6px;
965
- }
966
- .lt-player-orientation--portrait .plyr__controls .top-controllers button {
967
- padding: 8px 8px;
968
- }
969
- .lt-player-orientation--portrait .plyr__controls .top-controllers button img {
970
- width: 24px;
971
- height: 24px;
972
- min-width: 24px;
973
- min-height: 24px;
974
- }
975
- }
976
- @container landscape (width > 479px) {
977
- .lt-player-orientation--landscape .plyr__controls .top-controllers {
978
- padding: 20px 20px 0;
979
- }
980
- }
981
- @container landscape (width > 639px) {
982
- .lt-player-orientation--landscape .plyr__controls .top-controllers {
983
- padding: 20px 40px 0;
984
- }
985
- .lt-player-orientation--landscape .plyr__controls .top-controllers__body__center .chapter {
986
- font-size: 18px;
987
- }
988
- }
989
- @container landscape (width > 912px) {
990
- .lt-player-orientation--landscape .plyr__controls .top-controllers button {
991
- padding: 8px 8px;
992
- }
993
- .lt-player-orientation--landscape .plyr__controls .top-controllers button img {
994
- width: 24px;
995
- height: 24px;
996
- min-width: 24px;
997
- min-height: 24px;
998
- }
999
- .lt-player-orientation--landscape .plyr__controls .top-controllers__body__center .chapter {
1000
- font-size: 24px;
1001
- }
1002
- }
1003
- .plyr__progress {
1004
- z-index: 9;
1005
- }
1006
- .plyr__progress--wrapper {
1007
- width: 100%;
1008
- padding: 0 10px;
1009
- display: none;
1010
- }
1011
- .plyr__progress--wrapper-enable {
1012
- display: block;
1013
- }
1014
- .plyr__controls .bottom-controller {
1015
- display: none;
1016
- justify-content: space-between;
1017
- align-items: flex-end;
1018
- padding: 15px 10px;
1019
- width: 100%;
1020
- max-width: 100%;
1021
- }
1022
- .plyr__controls .bottom-controller button {
1023
- color: #fff;
1024
- background-color: #27282A;
1025
- padding: 7px 7px;
1026
- z-index: 10;
1027
- flex: 0 0 auto;
1028
- }
1029
- .plyr__controls .bottom-controller button:hover {
1030
- color: #fff;
1031
- background-color: #404144;
1032
- }
1033
- .plyr__controls .bottom-controller button:active, .plyr__controls .bottom-controller button:focus {
1034
- color: #fff;
1035
- background-color: #27282A;
1036
- }
1037
- .plyr__controls .bottom-controller button:focus-visible, .plyr__controls .bottom-controller button:focus {
1038
- outline: transparent;
1039
- }
1040
- .plyr__controls .bottom-controller button img {
1041
- width: 16px;
1042
- height: 16px;
1043
- min-width: 16px;
1044
- min-height: 16px;
1045
- }
1046
- .plyr__controls .bottom-controller__left-buttons {
1047
- margin-right: auto;
1048
- justify-content: start;
1049
- flex: 1;
1050
- }
1051
- .plyr__controls .bottom-controller__left-buttons, .plyr__controls .bottom-controller__center-buttons, .plyr__controls .bottom-controller__right-buttons {
1052
- display: flex;
1053
- gap: 16px;
1054
- align-items: flex-end;
1055
- }
1056
- .plyr__controls .bottom-controller__right-buttons {
1057
- margin-left: auto;
1058
- justify-content: end;
1059
- flex: 1;
1060
- }
1061
- .plyr__controls .bottom-controller__right-buttons .plyr__controls_speed-button {
1062
- width: 30px;
1063
- height: 30px;
1064
- background-color: #074566;
1065
- font-size: 12px;
1066
- font-weight: 400;
1067
- }
1068
- .plyr__controls .bottom-controller__right-buttons .plyr__controls_speed-button:hover {
1069
- background-color: #05354e;
1070
- }
1071
- .plyr__controls .bottom-controller__right-buttons .plyr__controls_speed-button:focus, .plyr__controls .bottom-controller__right-buttons .plyr__controls_speed-button:active {
1072
- background-color: #074566;
1073
- }
1074
- .plyr__controls .bottom-controller__right-buttons .plyr__controls_speed-button span {
1075
- font-size: 10px;
1076
- }
1077
- .plyr__controls .bottom-controller .skip-backward-seconds,
1078
- .plyr__controls .bottom-controller .skip-forward-seconds {
1079
- display: none;
1080
- }
1081
- .plyr__controls .bottom-controller__previous-chapter-view-wrapper, .plyr__controls .bottom-controller__next-chapter-view-wrapper {
1082
- display: flex;
1083
- gap: 16px;
1084
- align-items: center;
1085
- }
1086
- .plyr__controls .bottom-controller__previous-chapter-view, .plyr__controls .bottom-controller__next-chapter-view {
1087
- display: none;
1088
- }
1089
- .plyr__controls .bottom-controller__previous-chapter-view {
1090
- justify-content: flex-end;
1091
- }
1092
- .plyr__controls .bottom-controller__next-chapter-view {
1093
- justify-content: flex-start;
1094
- }
1095
- .plyr__controls .bottom-controller__next-chapter-view, .plyr__controls .bottom-controller__previous-chapter-view {
1096
- display: none;
1097
- align-items: flex-end;
1098
- margin-top: 0;
1099
- margin-bottom: 0;
1100
- width: 90px;
1101
- font-size: 14px;
1102
- font-weight: 300;
1103
- color: #fff !important;
1104
- }
1105
- .plyr__controls .bottom-controller__background {
1106
- position: absolute;
1107
- width: 100%;
1108
- left: 0;
1109
- bottom: 0;
1110
- height: 40%;
1111
- background: var(--plyr-video-controls-background, linear-gradient(transparent, rgba(0, 0, 0, 0.75)));
1112
- border-radius: 0 0 0 30px;
1113
- }
1114
- .plyr__controls .bottom-controller__volume_control {
1115
- display: none;
1116
- }
1117
- .plyr__controls .bottom-controller .mini-player-control {
1118
- display: none;
1119
- }
1120
- .plyr__controls .bottom-controller__play-button_body {
1121
- position: relative;
1122
- }
1123
- .plyr__controls .bottom-controller__play-button_body .play-button {
1124
- color: #27282A;
1125
- background-color: #D8D846;
1126
- bottom: -5px;
1127
- }
1128
- .plyr__controls .bottom-controller__play-button_body .play-button:hover {
1129
- color: #27282A;
1130
- background-color: #c2c229;
1131
- }
1132
- .plyr__controls .bottom-controller__play-button_body .play-button:active, .plyr__controls .bottom-controller__play-button_body .play-button:focus {
1133
- color: #27282A;
1134
- background-color: #D8D846;
1135
- }
1136
- .plyr__controls .bottom-controller__play-button_body .play-button:focus-visible, .plyr__controls .bottom-controller__play-button_body .play-button:focus {
1137
- outline: transparent;
1138
- }
1139
- .plyr__controls .bottom-controller__current {
1140
- display: flex;
1141
- justify-content: space-between;
1142
- margin-left: -8px;
1143
- margin-right: -8px;
1144
- }
1145
- .plyr__controls .bottom-controller__current .plyr__time {
1146
- font-size: 12px;
1147
- color: #A8ADB0;
1148
- }
1149
- .plyr__controls .bottom-controller .volume-control-enable {
1150
- position: absolute;
1151
- display: flex;
1152
- height: 200px;
1153
- justify-content: center;
1154
- align-items: flex-end;
1155
- background: #fff;
1156
- z-index: 30;
1157
- }
1158
- .plyr__controls .bottom-controller .volume-control-enable .volume_control__background__area {
1159
- position: absolute;
1160
- rotate: 270deg !important;
1161
- bottom: 80px;
1162
- max-width: 110px;
1163
- min-width: 80px;
1164
- width: 20%;
1165
- }
1166
- .plyr__controls .bottom-controller .volume-control-enable .volume_control__background__area .volume_control__background__area__range {
1167
- color: #27282A !important;
1168
- min-width: 128px;
1169
- -webkit-appearance: none;
1170
- -moz-appearance: none;
1171
- appearance: none;
1172
- background: transparent;
1173
- cursor: pointer;
1174
- }
1175
- .plyr__controls .bottom-controller .volume-control-enable .volume_control__background__area .volume_control__background__area__range::-webkit-slider-thumb {
1176
- border-color: #000;
1177
- background: #fff;
1178
- }
1179
- .plyr__controls .bottom-controller .volume-control-enable .volume_control__background__area .volume_control__background__area__range::-moz-range-thumb {
1180
- border-color: #000;
1181
- background: #fff;
1182
- }
1183
- .plyr__controls .bottom-controller .volume-control-enable .volume_control__background__area .volume_control__background__area__range::-ms-thumb {
1184
- margin-top: 3px;
1185
- border: 7px solid black;
1186
- height: 20px;
1187
- width: 20px;
1188
- background: #fff;
1189
- cursor: pointer;
1190
- }
1191
- .plyr__controls .bottom-controller .volume-control-enable .volume_control__background .volume_control__volume-button-close {
1192
- bottom: 80px;
1193
- background: #fff;
1194
- display: flex;
1195
- justify-content: center;
1196
- align-items: center;
1197
- border: none;
1198
- }
1199
- .plyr__controls .bottom-controller-enable {
1200
- display: flex;
1201
- }
1202
- .plyr .fade-animation-controllers .bottom-controller {
1203
- opacity: 1 !important;
1204
- transition-property: opacity, left, top, height;
1205
- transition-duration: 1s, 3s;
1206
- }
1207
- .plyr .fade-animation-controllers .bottom-controller__background {
1208
- position: absolute;
1209
- width: 100%;
1210
- height: 160px;
1211
- bottom: 0;
1212
- right: 0;
1213
- background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)) !important;
1214
- background: var(--plyr-video-controls-background, linear-gradient(transparent, rgba(0, 0, 0, 0.75))) !important;
1215
- opacity: 1 !important;
1216
- transition-property: opacity, left, top, height;
1217
- transition-duration: 1s, 3s;
1218
- }
1219
- .plyr .fade-animation-controllers .top-controllers {
1220
- background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)) !important;
1221
- background: var(--plyr-video-controls-background, linear-gradient(transparent, rgba(0, 0, 0, 0.75))) !important;
1222
- opacity: 1 !important;
1223
- transition-property: opacity, left, top, height;
1224
- transition-duration: 1s, 3s;
1225
- }
1226
-
1227
- .lt-player-orientation--portrait .plyr__progress--wrapper {
1228
- padding: 0 16px;
1229
- }
1230
- .lt-player-orientation--portrait .plyr__controls .bottom-controller {
1231
- padding: 0 16px 20px;
1232
- }
1233
- .lt-player-orientation--portrait .plyr__controls .bottom-controller button {
1234
- padding: 7px 7px;
1235
- }
1236
- .lt-player-orientation--portrait .plyr__controls .bottom-controller button img {
1237
- width: 16px;
1238
- height: 16px;
1239
- min-width: 16px;
1240
- min-height: 16px;
1241
- }
1242
- .lt-player-orientation--portrait .plyr__controls .bottom-controller .play-button {
1243
- padding: 12px;
1244
- }
1245
- .lt-player-orientation--portrait .plyr__controls .bottom-controller__left-buttons {
1246
- margin-right: auto;
1247
- flex: 0 0 40px;
1248
- }
1249
- .lt-player-orientation--portrait .plyr__controls .bottom-controller__right-buttons {
1250
- margin-left: auto;
1251
- flex: 0 0 40px;
1252
- }
1253
- .lt-player-orientation--portrait .plyr__controls .bottom-controller__center-buttons {
1254
- justify-content: center;
1255
- flex: 100;
1256
- gap: 16px;
1257
- }
1258
- .lt-player-orientation--portrait .plyr__controls .bottom-controller__volume_control {
1259
- display: flex;
1260
- }
1261
-
1262
- @container portrait (width > 319px) {
1263
- .lt-player-orientation--portrait .plyr__progress--wrapper {
1264
- padding: 0 20px;
1265
- }
1266
- .lt-player-orientation--portrait .plyr__controls .bottom-controller {
1267
- padding: 0 20px 28px 20px;
1268
- }
1269
- .lt-player-orientation--portrait .plyr__controls .bottom-controller button {
1270
- padding: 8px 8px;
1271
- }
1272
- .lt-player-orientation--portrait .plyr__controls .bottom-controller button img {
1273
- width: 24px;
1274
- height: 24px;
1275
- min-width: 24px;
1276
- min-height: 24px;
1277
- }
1278
- .lt-player-orientation--portrait .plyr__controls .bottom-controller .play-button {
1279
- padding: 16px;
1280
- }
1281
- .lt-player-orientation--portrait .plyr__controls .plyr__controls_speed-button {
1282
- width: 40px;
1283
- height: 40px;
1284
- }
1285
- .lt-player-orientation--portrait .plyr__controls .plyr__controls_speed-button span {
1286
- font-size: 14px;
1287
- }
1288
- }
1289
- @container portrait (width > 374px) {
1290
- .lt-player-orientation--portrait .plyr__controls .bottom-controller__center-buttons {
1291
- gap: 32px;
1292
- }
1293
- }
1294
- @container landscape (width > 479px) {
1295
- .lt-player-orientation--landscape .plyr__progress--wrapper {
1296
- padding: 0 20px;
1297
- }
1298
- .lt-player-orientation--landscape .plyr__controls .bottom-controller {
1299
- padding: 25px 20px;
1300
- }
1301
- .lt-player-orientation--landscape .plyr__controls .bottom-controller__center-buttons {
1302
- gap: 20px;
1303
- }
1304
- .lt-player-orientation--landscape .plyr__controls .bottom-controller__previous-chapter-view, .lt-player-orientation--landscape .plyr__controls .bottom-controller__next-chapter-view {
1305
- display: flex;
1306
- }
1307
- }
1308
- @container landscape (width > 639px) {
1309
- .lt-player-orientation--landscape .plyr__progress--wrapper {
1310
- padding: 0 40px;
1311
- }
1312
- .lt-player-orientation--landscape .plyr__controls .bottom-controller {
1313
- padding: 25px 40px;
1314
- }
1315
- .lt-player-orientation--landscape .plyr__controls .bottom-controller__left-buttons, .lt-player-orientation--landscape .plyr__controls .bottom-controller__right-buttons {
1316
- gap: 10px;
1317
- }
1318
- .lt-player-orientation--landscape .plyr__controls .bottom-controller__center-buttons {
1319
- gap: 16px;
1320
- }
1321
- .lt-player-orientation--landscape .plyr__controls .bottom-controller__volume_control {
1322
- display: flex;
1323
- left: 100px;
1324
- }
1325
- .lt-player-orientation--landscape .plyr__controls .bottom-controller .mini-player-control {
1326
- display: flex;
1327
- }
1328
- .lt-player-orientation--landscape .plyr__controls .bottom-controller .skip-backward-seconds,
1329
- .lt-player-orientation--landscape .plyr__controls .bottom-controller .skip-forward-seconds {
1330
- display: flex;
1331
- }
1332
- }
1333
- @container landscape (width > 759px) {}
1334
- @container landscape (width > 912px) {
1335
- .lt-player-orientation--landscape .plyr__progress--wrapper {
1336
- padding: 0 40px;
1337
- }
1338
- .lt-player-orientation--landscape .plyr__controls .bottom-controller {
1339
- padding: 28px 40px;
1340
- }
1341
- .lt-player-orientation--landscape .plyr__controls .bottom-controller__left-buttons, .lt-player-orientation--landscape .plyr__controls .bottom-controller__right-buttons {
1342
- gap: 20px;
1343
- }
1344
- .lt-player-orientation--landscape .plyr__controls .bottom-controller__center-buttons {
1345
- gap: 32px;
1346
- }
1347
- .lt-player-orientation--landscape .plyr__controls .bottom-controller__next-chapter-view, .lt-player-orientation--landscape .plyr__controls .bottom-controller__previous-chapter-view {
1348
- font-size: 19px;
1349
- }
1350
- .lt-player-orientation--landscape .plyr__controls .bottom-controller button {
1351
- padding: 8px 8px;
1352
- }
1353
- .lt-player-orientation--landscape .plyr__controls .bottom-controller button img {
1354
- width: 24px;
1355
- height: 24px;
1356
- min-width: 24px;
1357
- min-height: 24px;
1358
- }
1359
- .lt-player-orientation--landscape .plyr__controls .bottom-controller .play-button {
1360
- padding: 16px;
1361
- }
1362
- }
1363
- @container landscape (width > 1066px) {
1364
- .lt-player-orientation--landscape .plyr__controls .bottom-controller__previous-chapter-view, .lt-player-orientation--landscape .plyr__controls .bottom-controller__next-chapter-view {
1365
- display: flex;
1366
- }
1367
- }
1368
- .plyr .lt-player-mini-player-background {
1369
- width: 100%;
1370
- height: 100%;
1371
- }
1372
- .plyr .lt-player-mini-player-observe {
1373
- min-height: 200px;
1374
- max-height: 600px;
1375
- height: auto;
1376
- }
1377
- .plyr .lt-player-mini-enable {
1378
- position: fixed;
1379
- z-index: 10000;
1380
- bottom: 20px;
1381
- right: 20px;
1382
- opacity: 1;
1383
- overflow: unset;
1384
- }
1385
- .plyr .lt-player-mini-enable .plyr__video-embed__container {
1386
- transform: unset !important;
1387
- position: unset !important;
1388
- }
1389
- .plyr .lt-player-mini-2 {
1390
- max-width: 344px;
1391
- max-height: 194px;
1392
- }
1393
- .plyr .lt-player-mini-1 {
1394
- max-width: 160px;
1395
- max-height: 290px;
1396
- }
1397
- .plyr .lt-player-mini-player-background {
1398
- z-index: 100;
1399
- }
1400
- .plyr .lt-player-mini-player-background .logo {
1401
- display: flex;
1402
- justify-content: center;
1403
- align-items: center;
1404
- height: 100%;
1405
- background: #cfd1d4;
1406
- }
1407
- .plyr .lt-player-mini-player-controls-enable {
1408
- opacity: 1 !important;
1409
- transition-property: opacity, left, top, height;
1410
- transition-duration: 1s, 3s;
1411
- }
1412
- .plyr .lt-player-mini-player-controls {
1413
- position: absolute;
1414
- z-index: 100;
1415
- width: 100%;
1416
- height: 100%;
1417
- bottom: 0;
1418
- right: 0;
1419
- opacity: 0;
1420
- transition-property: opacity, left, top, height;
1421
- transition-duration: 1s, 3s;
1422
- }
1423
- .plyr .lt-player-mini-player-controls__exit {
1424
- color: #fff;
1425
- background-color: #27282A;
1426
- position: absolute;
1427
- top: -16px;
1428
- right: -16px;
1429
- padding: 5px;
1430
- }
1431
- .plyr .lt-player-mini-player-controls__exit:hover {
1432
- color: #fff;
1433
- background-color: #404144;
1434
- }
1435
- .plyr .lt-player-mini-player-controls__exit:active, .plyr .lt-player-mini-player-controls__exit:focus {
1436
- color: #fff;
1437
- background-color: #27282A;
1438
- }
1439
- .plyr .lt-player-mini-player-controls__exit:focus-visible, .plyr .lt-player-mini-player-controls__exit:focus {
1440
- outline: transparent;
1441
- }
1442
- .plyr .lt-player-mini-player-controls__play-button {
1443
- color: #27282A;
1444
- background-color: #D8D846;
1445
- padding: 12px;
1446
- }
1447
- .plyr .lt-player-mini-player-controls__play-button:hover {
1448
- color: #27282A;
1449
- background-color: #c2c229;
1450
- }
1451
- .plyr .lt-player-mini-player-controls__play-button:active, .plyr .lt-player-mini-player-controls__play-button:focus {
1452
- color: #27282A;
1453
- background-color: #D8D846;
1454
- }
1455
- .plyr .lt-player-mini-player-controls__play-button:focus-visible, .plyr .lt-player-mini-player-controls__play-button:focus {
1456
- outline: transparent;
1457
- }
1458
- .plyr .lt-player-mini-player-controls__progress__seek {
1459
- position: absolute;
1460
- bottom: 0;
1461
- background: rgba(255, 255, 255, 0.3);
1462
- border-radius: 0 !important;
1463
- height: 6px !important;
1464
- color: transparent !important;
1465
- }
1466
- .plyr .lt-player-mini-player-controls input[type=range]::-webkit-slider-thumb {
1467
- -webkit-appearance: none;
1468
- border: 0px double transparent !important;
1469
- height: 0px;
1470
- width: 0px;
1471
- border-radius: 20px;
1472
- background: transparent !important;
1473
- cursor: pointer;
1474
- margin-top: 4px;
1475
- box-shadow: transparent !important;
1476
- }
1477
- .plyr .lt-player-mini-player-controls input[type=range]::-moz-range-thumb {
1478
- box-shadow: none !important;
1479
- border: 0px double transparent !important;
1480
- height: 0px;
1481
- width: 0px;
1482
- border-radius: 20px;
1483
- background: transparent;
1484
- cursor: pointer;
1485
- }
1486
- .plyr .lt-player-mini-player-controls input[type=range]::-ms-thumb {
1487
- box-shadow: none !important;
1488
- border: 0px double transparent !important;
1489
- height: 0px;
1490
- width: 0px;
1491
- border-radius: 20px;
1492
- background: transparent !important;
1493
- cursor: pointer;
1494
- }
1495
- .plyr .lt-player-mini-player-controls input[type=range]::-webkit-slider-runnable-track {
1496
- height: 8px;
1497
- cursor: pointer;
1498
- box-shadow: none !important;
1499
- background: transparent !important;
1500
- border-radius: 0px;
1501
- border: 0px solid transparent !important;
1502
- }
1503
- .plyr .lt-player-mini-player-controls input[type=range]:focus::-webkit-slider-runnable-track {
1504
- background: transparent !important;
1505
- }
1506
- .plyr .lt-player-mini-player-controls input[type=range]::-moz-range-track {
1507
- height: 8px;
1508
- cursor: pointer;
1509
- box-shadow: none;
1510
- background: transparent !important;
1511
- border-radius: 0px;
1512
- border: 0px solid transparent !important;
1513
- }
1514
- .plyr .lt-player-mini-player-controls input[type=range]::-ms-track {
1515
- height: 8px;
1516
- cursor: pointer;
1517
- background: transparent !important;
1518
- border-color: transparent !important;
1519
- border-width: 16px 0;
1520
- color: transparent !important;
1521
- }
1522
- .plyr .lt-player-mini-player-controls input[type=range]::-ms-fill-lower {
1523
- background: transparent !important;
1524
- border: 0px solid transparent !important;
1525
- border-radius: 0px;
1526
- box-shadow: none;
1527
- }
1528
- .plyr .lt-player-mini-player-controls input[type=range]:focus::-ms-fill-lower {
1529
- background: transparent !important;
1530
- }
1531
- .plyr .lt-player-mini-player-controls input[type=range]::-ms-fill-upper {
1532
- background: transparent !important;
1533
- border: 0px solid transparent !important;
1534
- border-radius: 0px;
1535
- box-shadow: none;
1536
- }
1537
- .plyr .lt-player-mini-player-controls input[type=range]:focus::-ms-fill-upper {
1538
- background: transparent !important;
1539
- }
1540
-
1541
- .lt-player-notification {
1542
- width: 100%;
1543
- padding: 20px 20px 28px 20px;
1544
- }
1545
- .lt-player-notification__notification-button-state {
1546
- position: absolute;
1547
- top: 50%;
1548
- left: 50%;
1549
- transform: translate(-50%, -50%);
1550
- }
1551
- .lt-player-notification__notification-button-state .player-state {
1552
- opacity: 0;
1553
- transition: all 0.8s ease-in-out;
1554
- pointer-events: none;
1555
- color: #fff;
1556
- background-color: #27282A;
1557
- background: rgba(39, 40, 42, 0.5);
1558
- padding: 16px;
1559
- }
1560
- .lt-player-notification__notification-button-state .player-state:hover {
1561
- color: #fff;
1562
- background-color: #404144;
1563
- }
1564
- .lt-player-notification__notification-button-state .player-state:active, .lt-player-notification__notification-button-state .player-state:focus {
1565
- color: #fff;
1566
- background-color: #27282A;
1567
- }
1568
- .lt-player-notification__notification-button-state .player-state:focus-visible, .lt-player-notification__notification-button-state .player-state:focus {
1569
- outline: transparent;
1570
- }
1571
- .lt-player-notification__notification-button-state .active {
1572
- opacity: 1;
1573
- transition: all 0.2s ease-in-out;
1574
- }
1575
- .lt-player-notification .lt-player-video-content {
1576
- text-align: left;
1577
- display: none;
1578
- padding: 0;
1579
- width: 100%;
1580
- -webkit-user-select: none;
1581
- -moz-user-select: none;
1582
- user-select: none;
1583
- align-items: end;
1584
- }
1585
- .lt-player-notification .lt-player-video-content .content__body {
1586
- z-index: 2;
1587
- width: 100%;
1588
- }
1589
- .lt-player-notification .lt-player-video-content .poster-title {
1590
- -webkit-line-clamp: 4;
1591
- color: #fff !important;
1592
- font-size: 14px;
1593
- font-weight: 600;
1594
- line-height: 1.5;
1595
- margin: 0;
1596
- }
1597
- .lt-player-notification .lt-player-video-content .poster-paragraph__content {
1598
- display: -webkit-box;
1599
- -webkit-line-clamp: 2;
1600
- -webkit-box-orient: vertical;
1601
- word-wrap: break-word;
1602
- text-overflow: ellipsis;
1603
- overflow: hidden;
1604
- font-size: 14px;
1605
- font-weight: 300;
1606
- color: #fff !important;
1607
- margin-bottom: 0;
1608
- max-height: 50px;
1609
- transition: max-height 0.3s ease-in-out;
1610
- }
1611
- .lt-player-notification .lt-player-video-content .poster-paragraph .open-content {
1612
- display: block;
1613
- transition: max-height 0.3s ease-in-out;
1614
- }
1615
- .lt-player-notification .lt-player-video-content-enable {
1616
- display: flex;
1617
- }
1618
- .lt-player-notification .poster-paragraph__button {
1619
- background: none;
1620
- box-shadow: none;
1621
- padding: 0;
1622
- border: none;
1623
- margin: 0;
1624
- text-decoration: none;
1625
- font-size: 12px;
1626
- color: white;
1627
- cursor: pointer;
1628
- position: absolute;
1629
- bottom: 144px;
1630
- right: 96px;
1631
- z-index: 8;
1632
- }
1633
- .lt-player-notification .lt-player-rewind-area,
1634
- .lt-player-notification .lt-player-forward-area {
1635
- touch-action: inherit !important;
1636
- width: 50%;
1637
- height: 100%;
1638
- z-index: 4;
1639
- position: absolute;
1640
- top: 0;
1641
- }
1642
- .lt-player-notification .lt-player-forward-area {
1643
- right: 0;
1644
- }
1645
- .lt-player-notification .lt-player-rewind-area {
1646
- left: 0;
1647
- }
1648
- .lt-player-notification .lt-player-rewind,
1649
- .lt-player-notification .lt-player-forward {
1650
- width: 50%;
1651
- top: 10%;
1652
- display: flex;
1653
- position: absolute;
1654
- text-align: center;
1655
- height: unset;
1656
- bottom: 10%;
1657
- }
1658
- .lt-player-notification .lt-player-rewind__icon-wrapper,
1659
- .lt-player-notification .lt-player-forward__icon-wrapper {
1660
- display: flex;
1661
- -webkit-user-select: none;
1662
- -moz-user-select: none;
1663
- user-select: none;
1664
- }
1665
- .lt-player-notification .lt-player-rewind__icon-wrapper.rotate,
1666
- .lt-player-notification .lt-player-forward__icon-wrapper.rotate {
1667
- rotate: 180deg;
1668
- }
1669
- .lt-player-notification .lt-player-rewind__icon-wrapper img,
1670
- .lt-player-notification .lt-player-forward__icon-wrapper img {
1671
- max-width: 20px;
1672
- }
1673
- .lt-player-notification .lt-player-rewind__icon,
1674
- .lt-player-notification .lt-player-forward__icon {
1675
- display: flex;
1676
- justify-content: flex-start;
1677
- align-items: center;
1678
- color: rgb(255, 255, 255);
1679
- -webkit-user-select: none;
1680
- -moz-user-select: none;
1681
- user-select: none;
1682
- }
1683
- .lt-player-notification .lt-player-rewind span,
1684
- .lt-player-notification .lt-player-forward span {
1685
- font-size: 16px;
1686
- font-weight: 300;
1687
- -webkit-user-select: none;
1688
- -moz-user-select: none;
1689
- user-select: none;
1690
- padding: 0 8px;
1691
- }
1692
- .lt-player-notification .lt-player-rewind {
1693
- left: 0;
1694
- }
1695
- .lt-player-notification .lt-player-rewind__icon {
1696
- flex-direction: row-reverse;
1697
- }
1698
- .lt-player-notification .lt-player-rewind__icon__portrait {
1699
- margin: auto auto auto 45px;
1700
- }
1701
- .lt-player-notification .lt-player-rewind__icon__landscape {
1702
- margin: auto 60px auto auto;
1703
- }
1704
- .lt-player-notification .lt-player-forward {
1705
- right: 0;
1706
- }
1707
- .lt-player-notification .lt-player-forward__icon__portrait {
1708
- margin: auto 45px auto auto;
1709
- }
1710
- .lt-player-notification .lt-player-forward__icon__landscape {
1711
- margin: auto auto auto 60px;
1712
- }
1713
- .lt-player-notification .lt-player-notify {
1714
- transition: background 0.8s;
1715
- opacity: 0;
1716
- }
1717
- .lt-player-notification .animate-in {
1718
- opacity: 1;
1719
- display: flex;
1720
- animation: ripple 1s forwards;
1721
- }
1722
-
1723
- @keyframes ripple {
1724
- 0% {
1725
- transition: background 0s;
1726
- opacity: 1;
1727
- }
1728
- 100% {
1729
- display: flex;
1730
- opacity: 0;
1731
- }
1732
- }
1733
- @keyframes fadeInLeft {
1734
- 0% {
1735
- opacity: 1;
1736
- transform: translateX(-20px);
1737
- }
1738
- 100% {
1739
- opacity: 1;
1740
- transform: translateX(0);
1741
- }
1742
- }
1743
- @keyframes fadeInRight {
1744
- 0% {
1745
- opacity: 1;
1746
- transform: translateX(0px);
1747
- }
1748
- 100% {
1749
- opacity: 1;
1750
- transform: translateX(-20px);
1751
- }
1752
- }
1753
- @container portrait (width > 319px) {
1754
- .lt-player-orientation--portrait .lt-player-notification .lt-player-video-content .poster-title {
1755
- -webkit-line-clamp: 3;
1756
- font-size: 21px;
1757
- }
1758
- .lt-player-orientation--portrait .lt-player-notification .lt-player-video-content .poster-paragraph__content {
1759
- font-size: 16px;
1760
- }
1761
- }
1762
- .lt-player-portrait--desktop.lt-player--portrait .plyr__controls-enable {
1763
- transition-property: opacity, left, top, height;
1764
- transition-duration: 1s, 3s;
1765
- }
1766
-
1767
- .plyr .plyr--video, .plyr__controls {
1768
- touch-action: none !important;
1769
- pointer-events: auto !important;
1770
- opacity: 0;
1771
- height: 100%;
1772
- width: 100%;
1773
- background: none !important;
1774
- display: flex !important;
1775
- flex-direction: column;
1776
- position: relative;
1777
- padding: 0 !important;
1778
- }
1779
- .plyr__controls {
1780
- touch-action: inherit !important;
1781
- }
1782
- .plyr__controls__mobile-background {
1783
- touch-action: inherit !important;
1784
- position: absolute;
1785
- width: 100%;
1786
- height: 100%;
1787
- z-index: 9999;
1788
- }
1789
- .plyr__controls__mobile-background .lt-player-notification .lt-player-rewind {
1790
- height: 100%;
1791
- top: 0;
1792
- }
1793
- .plyr__controls__mobile-background .lt-player-notification .lt-player-rewind__icon__portrait {
1794
- margin: auto auto auto 2rem;
1795
- }
1796
- .plyr__controls__mobile-background .lt-player-notification .lt-player-forward {
1797
- height: 100%;
1798
- top: 0;
1799
- }
1800
- .plyr__controls__mobile-background .lt-player-notification .lt-player-forward__icon__portrait {
1801
- margin: auto 2rem auto auto;
1802
- }
1803
- .plyr__controls-enable {
1804
- opacity: 1 !important;
1805
- }
1806
- .plyr__controls-enable-addInfo {
1807
- opacity: 1 !important;
1808
- }
1809
-
1810
- .plyr--video .plyr__controls {
1811
- background: none !important;
1812
- }
1813
-
1814
- .plyr .plyr__controls:not(:empty) ~ .plyr__captions {
1815
- transform: unset !important;
1816
- color: #fff !important;
1817
- }
1818
-
1819
- .plyr .plyr__controls-enable:not(:empty) ~ .plyr__captions {
1820
- transform: unset !important;
1821
- }
1822
-
1823
- .plyr .plyr__controls-enable-settings:not(:empty) ~ .plyr__captions {
1824
- transform: unset !important;
1825
- }
1826
-
1827
- .plyr--video.plyr--hide-controls .plyr__controls {
1828
- opacity: 0;
1829
- pointer-events: none;
1830
- transform: unset !important;
1831
- }
1832
-
1833
- .plyr--video.plyr--hide-controls .plyr__controls-enable-settings .player-lt__modal__mobile-show-modal {
1834
- opacity: 1 !important;
1835
- pointer-events: none !important;
1836
- transform: none !important;
1837
- }
1838
-
1839
- .plyr__time + .plyr__time:before {
1840
- content: none !important;
1841
- }
1842
-
1843
- .plyr__time + .plyr__time {
1844
- display: flex !important;
1845
- }
1846
-
1847
- .lt-player-portrate--mobile.lt-player--portrait__xs .lt-player__additional-info-mobile {
1848
- gap: 0;
1849
- }
1850
- .lt-player-portrate--mobile.lt-player--portrait__xs .lt-player__additional-info-mobile button {
1851
- padding: 7px 7px;
1852
- }
1853
- .lt-player-portrate--mobile.lt-player--portrait__xs .lt-player__additional-info-mobile button img {
1854
- width: 16px;
1855
- height: 16px;
1856
- min-width: 16px;
1857
- min-height: 16px;
1858
- }
1859
-
1860
- .lt-player .plyr__controls-enable .lt-player__additional-info-mobile {
1861
- z-index: 5;
1862
- }
1863
- .lt-player__additional-info {
1864
- width: 80px;
1865
- align-items: end;
1866
- display: flex;
1867
- flex-direction: column;
1868
- justify-content: flex-end;
1869
- gap: 32px;
1870
- background: transparent;
1871
- padding-bottom: 25px;
1872
- z-index: 30;
1873
- }
1874
- .lt-player__additional-info button {
1875
- color: #27282A;
1876
- background-color: #fff;
1877
- }
1878
- .lt-player__additional-info button:hover {
1879
- color: #27282A;
1880
- background-color: #e6e6e6;
1881
- }
1882
- .lt-player__additional-info button:active, .lt-player__additional-info button:focus {
1883
- color: #27282A;
1884
- background-color: #fff;
1885
- }
1886
- .lt-player__additional-info button:focus-visible, .lt-player__additional-info button:focus {
1887
- outline: transparent;
1888
- }
1889
- .lt-player__additional-info-mobile,
1890
- .lt-player .lt-player__additional-info__is_set_in-side {
1891
- align-items: end;
1892
- display: flex;
1893
- flex-direction: column;
1894
- justify-content: flex-end;
1895
- gap: 16px;
1896
- background: transparent;
1897
- padding-bottom: 0;
1898
- }
1899
- .lt-player__additional-info-mobile button,
1900
- .lt-player .lt-player__additional-info__is_set_in-side button {
1901
- color: #27282A;
1902
- background-color: #fff;
1903
- background: transparent;
1904
- }
1905
- .lt-player__additional-info-mobile button:hover,
1906
- .lt-player .lt-player__additional-info__is_set_in-side button:hover {
1907
- color: #27282A;
1908
- background-color: #e6e6e6;
1909
- }
1910
- .lt-player__additional-info-mobile button:active, .lt-player__additional-info-mobile button:focus,
1911
- .lt-player .lt-player__additional-info__is_set_in-side button:active,
1912
- .lt-player .lt-player__additional-info__is_set_in-side button:focus {
1913
- color: #27282A;
1914
- background-color: #fff;
1915
- }
1916
- .lt-player__additional-info-mobile button:focus-visible, .lt-player__additional-info-mobile button:focus,
1917
- .lt-player .lt-player__additional-info__is_set_in-side button:focus-visible,
1918
- .lt-player .lt-player__additional-info__is_set_in-side button:focus {
1919
- outline: transparent;
1920
- }
1921
- .lt-player__additional-info-mobile button:focus, .lt-player__additional-info-mobile button:hover, .lt-player__additional-info-mobile button:active,
1922
- .lt-player .lt-player__additional-info__is_set_in-side button:focus,
1923
- .lt-player .lt-player__additional-info__is_set_in-side button:hover,
1924
- .lt-player .lt-player__additional-info__is_set_in-side button:active {
1925
- background-color: unset;
1926
- }
1927
- .lt-player__additional-info-mobile button img,
1928
- .lt-player .lt-player__additional-info__is_set_in-side button img {
1929
- filter: brightness(0) invert(1);
1930
- }
1931
-
1932
- .lt-player-additional-info {
1933
- display: none !important;
1934
- }
1935
-
1936
- .lt-player-mobile-add-info-modal {
1937
- position: fixed;
1938
- bottom: 0;
1939
- width: 100%;
1940
- height: 100%;
1941
- }
1942
-
1943
- .lt-state-fullscreen .lt-player__additional-info,
1944
- .lt-state-fullscreen .lt-player__additional-info-mobile {
1945
- display: none;
1946
- }
1947
-
1948
- .lt-player-mobile-settings-modal .settings-controllers {
1949
- position: fixed;
1950
- width: 100%;
1951
- z-index: 10;
1952
- left: 0;
1953
- background: #fff;
1954
- padding: 0 0 32px 0;
1955
- bottom: 0;
1956
- transition: 0.3s;
1957
- }
1958
- .lt-player-mobile-settings-modal .settings-controllers .settings-text {
1959
- font-size: 16px;
1960
- font-weight: 300;
1961
- color: #27282A !important;
1962
- margin: 0;
1963
- }
1964
- .lt-player-mobile-settings-modal .settings-controllers-enable {
1965
- position: absolute;
1966
- width: 100%;
1967
- z-index: 30;
1968
- left: 0;
1969
- background: #fff;
1970
- border-radius: 0 0 0 30px;
1971
- bottom: 0;
1972
- display: flex;
1973
- flex-direction: column;
1974
- padding: 0 0 24px 0;
1975
- }
1976
- .lt-player-mobile-settings-modal .settings-controllers-enable__speed-range {
1977
- padding: 24px 24px 0 24px;
1978
- align-items: center;
1979
- color: #000;
1980
- display: flex;
1981
- position: relative;
1982
- }
1983
- .lt-player-mobile-settings-modal .settings-controllers-enable__speed-range .mobile {
1984
- display: flex;
1985
- width: 80% !important;
1986
- }
1987
- .lt-player-mobile-settings-modal .settings-controllers-enable__speed-range .speed-range-input-body {
1988
- color: #000;
1989
- width: 65%;
1990
- margin-left: auto;
1991
- position: relative;
1992
- }
1993
- .lt-player-mobile-settings-modal .settings-controllers-enable__speed-range .speed-range-input-body button {
1994
- color: #27282A;
1995
- background-color: #D8D846;
1996
- width: 16%;
1997
- margin: 0 2px;
1998
- }
1999
- .lt-player-mobile-settings-modal .settings-controllers-enable__speed-range .speed-range-input-body .button_active {
2000
- background-color: #27282A;
2001
- color: grey;
2002
- }
2003
- .lt-player-mobile-settings-modal .settings-controllers-enable__speed-range .speed-range-input-body output {
2004
- font-size: 16px;
2005
- font-weight: 600;
2006
- color: #074566;
2007
- position: absolute;
2008
- left: 50%;
2009
- top: -20px;
2010
- }
2011
- .lt-player-mobile-settings-modal .settings-controllers-enable__speed-range .speed-range-input-body .speed-range-input::-webkit-slider-thumb {
2012
- border: 7px solid #074566;
2013
- height: 20px;
2014
- width: 20px;
2015
- background: #fff;
2016
- margin-top: -9.5px;
2017
- }
2018
- .lt-player-mobile-settings-modal .settings-controllers-enable__speed-range .speed-range-input-body .speed-range-input::-moz-range-thumb {
2019
- color: #fff;
2020
- box-shadow: none;
2021
- border: 7px solid #074566;
2022
- background: #fff;
2023
- }
2024
- .lt-player-mobile-settings-modal .settings-controllers-enable__speed-range .speed-range-input-body .speed-range-input::-ms-thumb {
2025
- margin-top: 3px;
2026
- box-shadow: 1px 1px 1px #fff;
2027
- border: 7px solid #074566;
2028
- height: 20px;
2029
- width: 20px;
2030
- background: #fff;
2031
- }
2032
- .lt-player-mobile-settings-modal .settings-controllers-enable__speed-range .speed-range-input-body .speed-range-input {
2033
- color: #074566;
2034
- height: 32px;
2035
- cursor: pointer;
2036
- width: 100%;
2037
- -webkit-appearance: none;
2038
- -moz-appearance: none;
2039
- appearance: none;
2040
- }
2041
- .lt-player-mobile-settings-modal .settings-controllers-enable__speed-range .speed-range-input-body .speed-range-input::-webkit-slider-runnable-track {
2042
- color: #074566;
2043
- background: #074566;
2044
- }
2045
- .lt-player-mobile-settings-modal .settings-controllers-enable__speed-range .speed-range-input-body .speed-range-input::-moz-range-track {
2046
- color: #074566;
2047
- background: #074566;
2048
- }
2049
- .lt-player-mobile-settings-modal .settings-controllers-enable__speed-range .speed-range-input-body .speed-range-input::-ms-track {
2050
- color: #074566;
2051
- background: #074566;
2052
- }
2053
- .lt-player-mobile-settings-modal .settings-controllers-enable__speed-range .speed-range-input-body .speed-range-input::-moz-range-progress {
2054
- height: 4px;
2055
- }
2056
- .lt-player-mobile-settings-modal .settings-controllers-enable__subtitles {
2057
- display: flex;
2058
- justify-content: space-between;
2059
- padding: 16px 24px 0 24px;
2060
- align-items: center;
2061
- }
2062
- .lt-player-mobile-settings-modal .settings-controllers-enable__subtitles .subtitles-body__input-switch:checked + .subtitles-body__slider {
2063
- background-color: #D8D846;
2064
- }
2065
- .lt-player-mobile-settings-modal .settings-controllers-enable__subtitles .subtitles-body__input-switch:checked + .subtitles-body__slider::before {
2066
- transform: translateX(26px);
2067
- }
2068
- .lt-player-mobile-settings-modal .settings-controllers-enable__subtitles .subtitles-body__switch {
2069
- z-index: 4;
2070
- position: relative;
2071
- display: inline-block;
2072
- min-width: 60px;
2073
- height: 34px;
2074
- margin-left: 10px;
2075
- }
2076
- .lt-player-mobile-settings-modal .settings-controllers-enable__subtitles .subtitles-body__input-switch {
2077
- opacity: 0;
2078
- width: 0;
2079
- height: 0;
2080
- accent-color: #D8D846;
2081
- margin: 0;
2082
- font-family: inherit;
2083
- font-size: inherit;
2084
- line-height: inherit;
2085
- }
2086
- .lt-player-mobile-settings-modal .settings-controllers-enable__subtitles .subtitles-body__slider {
2087
- position: absolute;
2088
- cursor: pointer;
2089
- top: 0;
2090
- left: 0;
2091
- right: 0;
2092
- bottom: 0;
2093
- background-color: #E6E6E6;
2094
- transition: 0.4s;
2095
- display: inline-block;
2096
- margin-bottom: 0 !important;
2097
- margin-top: 0 !important;
2098
- }
2099
- .lt-player-mobile-settings-modal .settings-controllers-enable__subtitles .subtitles-body__slider:focus {
2100
- box-shadow: 0 0 1px #D8D846;
2101
- }
2102
- .lt-player-mobile-settings-modal .settings-controllers-enable__subtitles .subtitles-body__slider:before {
2103
- width: 26px;
2104
- height: 26px;
2105
- background-color: #fff;
2106
- position: absolute;
2107
- content: "";
2108
- left: 4px;
2109
- bottom: 4px;
2110
- transition: 0.4s;
2111
- }
2112
- .lt-player-mobile-settings-modal .settings-controllers-enable__button-save {
2113
- padding: 16px 24px 0 24px;
2114
- color: black;
2115
- display: flex;
2116
- justify-content: left;
2117
- }
2118
- .lt-player-mobile-settings-modal .settings-controllers-enable__button-save .button-save {
2119
- color: #27282A;
2120
- background-color: #D8D846;
2121
- padding: 12px 32px;
2122
- }
2123
- .lt-player-mobile-settings-modal .settings-controllers-enable__button-save .button-save:hover {
2124
- color: #27282A;
2125
- background-color: #c2c229;
2126
- }
2127
- .lt-player-mobile-settings-modal .settings-controllers-enable__button-save .button-save:active, .lt-player-mobile-settings-modal .settings-controllers-enable__button-save .button-save:focus {
2128
- color: #27282A;
2129
- background-color: #D8D846;
2130
- }
2131
- .lt-player-mobile-settings-modal .settings-controllers-enable__button-save .button-save:focus-visible, .lt-player-mobile-settings-modal .settings-controllers-enable__button-save .button-save:focus {
2132
- outline: transparent;
2133
- }
2134
- .lt-player-mobile-settings-modal .settings-controllers-enable__exit-button {
2135
- padding: 16px;
2136
- }
2137
- .lt-player-mobile-settings-modal .settings-controllers-enable__exit-button span {
2138
- display: flex;
2139
- justify-content: center;
2140
- align-items: center;
2141
- padding: 0.2em;
2142
- }
2143
- .lt-player-mobile-settings-modal .settings-controllers-enable__exit-button span:hover {
2144
- color: black;
2145
- }
2146
- .lt-player-mobile-settings-modal .settings-controllers-enable__background {
2147
- position: fixed;
2148
- width: 100%;
2149
- height: 100%;
2150
- top: 0;
2151
- background: #27282A;
2152
- opacity: 0.75;
2153
- z-index: 10;
2154
- }
2155
-
2156
- .plyr__controls .settings-controllers {
2157
- position: absolute;
2158
- width: 100%;
2159
- z-index: 5;
2160
- left: 0;
2161
- background: #fff;
2162
- border-radius: 0 0 0 30px;
2163
- bottom: 0;
2164
- opacity: 0;
2165
- }
2166
- .plyr__controls .settings-controllers .settings-text {
2167
- font-size: 16px;
2168
- font-weight: 300;
2169
- color: #27282A !important;
2170
- margin: 0;
2171
- }
2172
- .plyr__controls .settings-controllers-enable {
2173
- position: absolute;
2174
- width: 100%;
2175
- z-index: 30;
2176
- left: 0;
2177
- background: #fff;
2178
- border-radius: 0 0 0 30px;
2179
- bottom: 0;
2180
- opacity: 1;
2181
- display: flex;
2182
- flex-direction: column;
2183
- padding: 0 0 24px 0;
2184
- border: 1px solid #A8ADB0;
2185
- }
2186
- .plyr__controls .settings-controllers-enable__speed-range {
2187
- padding: 24px 24px 0 24px;
2188
- align-items: center;
2189
- color: #000;
2190
- display: flex;
2191
- position: relative;
2192
- }
2193
- .plyr__controls .settings-controllers-enable__speed-range .mobile {
2194
- display: flex;
2195
- width: 80% !important;
2196
- }
2197
- .plyr__controls .settings-controllers-enable__speed-range .speed-range-input-body {
2198
- color: #000;
2199
- width: 65%;
2200
- margin-left: auto;
2201
- position: relative;
2202
- }
2203
- .plyr__controls .settings-controllers-enable__speed-range .speed-range-input-body button {
2204
- color: #27282A;
2205
- background-color: #D8D846;
2206
- width: 16%;
2207
- margin: 0 2px;
2208
- }
2209
- .plyr__controls .settings-controllers-enable__speed-range .speed-range-input-body .button_active {
2210
- background-color: #27282A;
2211
- color: grey;
2212
- }
2213
- .plyr__controls .settings-controllers-enable__speed-range .speed-range-input-body output {
2214
- font-size: 16px;
2215
- font-weight: 600;
2216
- color: #074566;
2217
- position: absolute;
2218
- left: 50%;
2219
- top: -20px;
2220
- }
2221
- .plyr__controls .settings-controllers-enable__speed-range .speed-range-input-body .speed-range-input::-webkit-slider-thumb {
2222
- border: 7px solid #074566;
2223
- height: 20px;
2224
- width: 20px;
2225
- background: #fff;
2226
- margin-top: -9.5px;
2227
- }
2228
- .plyr__controls .settings-controllers-enable__speed-range .speed-range-input-body .speed-range-input::-moz-range-thumb {
2229
- color: #fff;
2230
- box-shadow: none;
2231
- border: 7px solid #074566;
2232
- background: #fff;
2233
- }
2234
- .plyr__controls .settings-controllers-enable__speed-range .speed-range-input-body .speed-range-input::-ms-thumb {
2235
- margin-top: 3px;
2236
- box-shadow: 1px 1px 1px #fff;
2237
- border: 7px solid #074566;
2238
- height: 20px;
2239
- width: 20px;
2240
- background: #fff;
2241
- }
2242
- .plyr__controls .settings-controllers-enable__speed-range .speed-range-input-body .speed-range-input {
2243
- color: #074566;
2244
- height: 32px;
2245
- cursor: pointer;
2246
- }
2247
- .plyr__controls .settings-controllers-enable__speed-range .speed-range-input-body .speed-range-input::-webkit-slider-runnable-track {
2248
- color: #074566;
2249
- background: #074566;
2250
- }
2251
- .plyr__controls .settings-controllers-enable__speed-range .speed-range-input-body .speed-range-input::-moz-range-track {
2252
- color: #074566;
2253
- background: #074566;
2254
- }
2255
- .plyr__controls .settings-controllers-enable__speed-range .speed-range-input-body .speed-range-input::-ms-track {
2256
- color: #074566;
2257
- background: #074566;
2258
- }
2259
- .plyr__controls .settings-controllers-enable__speed-range .speed-range-input-body .speed-range-input::-moz-range-progress {
2260
- height: 4px;
2261
- }
2262
- .plyr__controls .settings-controllers-enable__subtitles {
2263
- display: flex;
2264
- justify-content: space-between;
2265
- padding: 16px 24px 0 24px;
2266
- align-items: center;
2267
- }
2268
- .plyr__controls .settings-controllers-enable__subtitles .subtitles-body__input-switch:checked + .subtitles-body__slider {
2269
- background-color: #D8D846;
2270
- }
2271
- .plyr__controls .settings-controllers-enable__subtitles .subtitles-body__input-switch:checked + .subtitles-body__slider::before {
2272
- transform: translateX(26px);
2273
- }
2274
- .plyr__controls .settings-controllers-enable__subtitles .subtitles-body__switch {
2275
- z-index: 4;
2276
- position: relative;
2277
- display: inline-block;
2278
- min-width: 60px;
2279
- height: 34px;
2280
- margin-left: 10px;
2281
- }
2282
- .plyr__controls .settings-controllers-enable__subtitles .subtitles-body__input-switch {
2283
- opacity: 0;
2284
- width: 0;
2285
- height: 0;
2286
- accent-color: #D8D846;
2287
- margin: 0;
2288
- font-family: inherit;
2289
- font-size: inherit;
2290
- line-height: inherit;
2291
- }
2292
- .plyr__controls .settings-controllers-enable__subtitles .subtitles-body__slider {
2293
- position: absolute;
2294
- cursor: pointer;
2295
- top: 0;
2296
- left: 0;
2297
- right: 0;
2298
- bottom: 0;
2299
- background-color: #E6E6E6;
2300
- transition: 0.4s;
2301
- display: inline-block;
2302
- margin-bottom: 0 !important;
2303
- margin-top: 0 !important;
2304
- }
2305
- .plyr__controls .settings-controllers-enable__subtitles .subtitles-body__slider:focus {
2306
- box-shadow: 0 0 1px #D8D846;
2307
- }
2308
- .plyr__controls .settings-controllers-enable__subtitles .subtitles-body__slider:before {
2309
- width: 26px;
2310
- height: 26px;
2311
- background-color: #fff;
2312
- position: absolute;
2313
- content: "";
2314
- left: 4px;
2315
- bottom: 4px;
2316
- transition: 0.4s;
2317
- }
2318
- .plyr__controls .settings-controllers-enable__button-save {
2319
- padding: 16px 24px 0 24px;
2320
- color: black;
2321
- display: flex;
2322
- justify-content: left;
2323
- }
2324
- .plyr__controls .settings-controllers-enable__button-save .button-save {
2325
- color: #27282A;
2326
- background-color: #D8D846;
2327
- padding: 12px 32px;
2328
- }
2329
- .plyr__controls .settings-controllers-enable__button-save .button-save:hover {
2330
- color: #27282A;
2331
- background-color: #c2c229;
2332
- }
2333
- .plyr__controls .settings-controllers-enable__button-save .button-save:active, .plyr__controls .settings-controllers-enable__button-save .button-save:focus {
2334
- color: #27282A;
2335
- background-color: #D8D846;
2336
- }
2337
- .plyr__controls .settings-controllers-enable__button-save .button-save:focus-visible, .plyr__controls .settings-controllers-enable__button-save .button-save:focus {
2338
- outline: transparent;
2339
- }
2340
- .plyr__controls .settings-controllers-enable__exit-button {
2341
- padding: 16px;
2342
- }
2343
- .plyr__controls .settings-controllers-enable__exit-button span {
2344
- display: flex;
2345
- justify-content: center;
2346
- align-items: center;
2347
- padding: 0.2em;
2348
- }
2349
- .plyr__controls .settings-controllers-enable__exit-button span:hover {
2350
- color: black;
2351
- }
2352
- .plyr__controls .settings-controllers-enable__background {
2353
- position: absolute;
2354
- width: 100%;
2355
- height: 100%;
2356
- top: 0;
2357
- background: #27282A;
2358
- opacity: 0.75;
2359
- z-index: 10;
2360
- }
2361
-
2362
- .lt-player-orientation--landscape .plyr__controls .settings-controllers {
2363
- transition: none;
2364
- }
2365
- .lt-player-orientation--landscape .plyr__controls .settings-controllers-enable {
2366
- top: 50%;
2367
- left: 50%;
2368
- right: 0;
2369
- bottom: 0;
2370
- max-width: 345px;
2371
- height: -moz-fit-content;
2372
- height: fit-content;
2373
- transform: translate(-50%, -50%);
2374
- transition: none;
2375
- width: 100%;
2376
- border-radius: 0;
2377
- border: none;
2378
- }
2379
- .lt-player-orientation--landscape .plyr__controls .settings-controllers-enable__subtitles {
2380
- padding: 16px 24px 24px;
2381
- }
2382
- .lt-player-orientation--landscape .plyr__controls .settings-controllers-enable .line-button {
2383
- display: none;
2384
- }
2385
-
2386
- .lt-player-mobile-share-modal .share-controller .share-inactive {
2387
- align-items: end;
2388
- background: rgba(0, 0, 0, 0.3);
2389
- -webkit-backdrop-filter: blur(14px);
2390
- backdrop-filter: blur(14px);
2391
- bottom: 0;
2392
- color: #fff;
2393
- display: flex;
2394
- justify-content: center;
2395
- left: 0;
2396
- position: absolute;
2397
- right: 0;
2398
- top: 0;
2399
- z-index: 9999999;
2400
- }
2401
- .lt-player-mobile-share-modal .share-controller .share-inactive .share-controller-content {
2402
- background: #fff;
2403
- padding: 0 28px 20px;
2404
- text-align: center;
2405
- width: 100%;
2406
- }
2407
- .lt-player-mobile-share-modal .share-controller .share-inactive .share-controller-content .share-controller-mobile-modal-header {
2408
- position: sticky;
2409
- top: 0;
2410
- display: flex;
2411
- justify-content: space-between;
2412
- align-items: center;
2413
- background-color: transparent;
2414
- padding: 0 16px;
2415
- border-radius: 15px 15px 0 0;
2416
- }
2417
- .lt-player-mobile-share-modal .share-controller .share-inactive .share-controller-content .line-button {
2418
- display: flex;
2419
- width: 56px;
2420
- height: 6px;
2421
- background-color: #E6E6E6;
2422
- margin: 6px auto 32px;
2423
- cursor: pointer;
2424
- visibility: visible;
2425
- }
2426
- .lt-player-mobile-share-modal .share-controller .share-inactive .share-controller-content .share-controller-frame {
2427
- position: relative;
2428
- }
2429
- .lt-player-mobile-share-modal .share-controller .share-inactive .share-controller-content .share-controller-frame .player-share-close-button {
2430
- color: #000;
2431
- position: absolute;
2432
- right: -20px;
2433
- top: -20px;
2434
- }
2435
- .lt-player-mobile-share-modal .share-controller .share-inactive .share-controller-content .share-controller-title h3,
2436
- .lt-player-mobile-share-modal .share-controller .share-inactive .share-controller-content .share-controller-via h3 {
2437
- color: #27282A;
2438
- font-size: 16px;
2439
- font-weight: 600;
2440
- margin-top: 0;
2441
- }
2442
- .lt-player-mobile-share-modal .share-controller .share-inactive .share-controller-content .share-controller-via {
2443
- margin-bottom: 25px;
2444
- }
2445
- .lt-player-mobile-share-modal .share-controller .share-inactive .share-controller-content .share-controller-link-wrapper {
2446
- flex-flow: column wrap;
2447
- gap: 20px;
2448
- word-break: break-word;
2449
- }
2450
- .lt-player-mobile-share-modal .share-controller .share-inactive .share-controller-content .share-controller-link-wrapper .share-controller-url {
2451
- font-size: 16px;
2452
- color: #3E4345;
2453
- font-weight: 300;
2454
- text-decoration: underline;
2455
- cursor: pointer;
2456
- max-width: 90%;
2457
- }
2458
- .lt-player-mobile-share-modal .share-controller .share-inactive .share-controller-content .share-controller-link-wrapper .share-controller-link {
2459
- color: #27282A;
2460
- background-color: #D8D846;
2461
- color: #27282A !important;
2462
- max-width: 142px;
2463
- width: 100%;
2464
- }
2465
- .lt-player-mobile-share-modal .share-controller .share-inactive .share-controller-content .share-controller-link-wrapper .share-controller-link:hover {
2466
- color: #27282A;
2467
- background-color: #c2c229;
2468
- }
2469
- .lt-player-mobile-share-modal .share-controller .share-inactive .share-controller-content .share-controller-link-wrapper .share-controller-link:active, .lt-player-mobile-share-modal .share-controller .share-inactive .share-controller-content .share-controller-link-wrapper .share-controller-link:focus {
2470
- color: #27282A;
2471
- background-color: #D8D846;
2472
- }
2473
- .lt-player-mobile-share-modal .share-controller .share-inactive .share-controller-content .share-controller-link-wrapper .share-controller-link:focus-visible, .lt-player-mobile-share-modal .share-controller .share-inactive .share-controller-content .share-controller-link-wrapper .share-controller-link:focus {
2474
- outline: transparent;
2475
- }
2476
- .lt-player-mobile-share-modal .share-controller .share-inactive .share-controller-content .share-controller-hr {
2477
- opacity: 0.3;
2478
- margin: 20px 0;
2479
- }
2480
- .lt-player-mobile-share-modal .share-controller .share-inactive .share-controller-content .share-controller-icons {
2481
- gap: 15px;
2482
- flex-wrap: wrap;
2483
- }
2484
- .lt-player-mobile-share-modal .share-controller .share-inactive .share-controller-content .share-controller-icons div {
2485
- display: none;
2486
- }
2487
- .lt-player-mobile-share-modal .share-controller .share-inactive .share-controller-content .share-controller-icons a {
2488
- padding: 0;
2489
- }
2490
- .lt-player-mobile-share-modal .share-controller .share-inactive .share-controller-content .share-controller-icons a:hover .share-icon__icon {
2491
- background-color: #D8D846;
2492
- }
2493
- .lt-player-mobile-share-modal .share-controller .share-inactive .share-controller-content .share-controller-icons a .share-icon__icon {
2494
- width: 32px;
2495
- height: 32px;
2496
- max-width: 32px;
2497
- max-height: 32px;
2498
- background: #27282A;
2499
- }
2500
-
2501
- .plyr .share-controller .share-inactive {
2502
- display: none;
2503
- }
2504
- .plyr .share-controller .share-active {
2505
- align-items: center;
2506
- background: rgba(0, 0, 0, 0.3);
2507
- -webkit-backdrop-filter: blur(14px);
2508
- backdrop-filter: blur(14px);
2509
- bottom: 0;
2510
- color: #fff;
2511
- display: flex;
2512
- justify-content: center;
2513
- left: 0;
2514
- position: absolute;
2515
- right: 0;
2516
- top: 0;
2517
- z-index: 99;
2518
- }
2519
- .plyr .share-controller .share-active .share-controller-content {
2520
- background: #fff;
2521
- padding: 0 28px 20px;
2522
- text-align: center;
2523
- width: 100%;
2524
- max-width: 376px;
2525
- }
2526
- .plyr .share-controller .share-active .share-controller-content .line-button {
2527
- display: flex;
2528
- width: 56px;
2529
- height: 6px;
2530
- background-color: #E6E6E6;
2531
- margin: 6px auto 32px;
2532
- cursor: pointer;
2533
- visibility: hidden;
2534
- }
2535
- .plyr .share-controller .share-active .share-controller-content .share-controller-frame {
2536
- position: relative;
2537
- }
2538
- .plyr .share-controller .share-active .share-controller-content .share-controller-frame .player-share-close-button {
2539
- color: #000;
2540
- position: absolute;
2541
- right: -20px;
2542
- top: -20px;
2543
- }
2544
- .plyr .share-controller .share-active .share-controller-content .share-controller-title h3,
2545
- .plyr .share-controller .share-active .share-controller-content .share-controller-via h3 {
2546
- color: #27282A;
2547
- font-size: 16px;
2548
- font-weight: 600;
2549
- margin-top: 0;
2550
- }
2551
- .plyr .share-controller .share-active .share-controller-content .share-controller-via {
2552
- margin-bottom: 25px;
2553
- }
2554
- .plyr .share-controller .share-active .share-controller-content .share-controller-link-wrapper {
2555
- flex-flow: column wrap;
2556
- gap: 20px;
2557
- word-break: break-word;
2558
- }
2559
- .plyr .share-controller .share-active .share-controller-content .share-controller-link-wrapper .share-controller-url {
2560
- font-size: 16px;
2561
- color: #3E4345;
2562
- font-weight: 300;
2563
- text-decoration: underline;
2564
- cursor: pointer;
2565
- max-width: 90%;
2566
- }
2567
- .plyr .share-controller .share-active .share-controller-content .share-controller-link-wrapper .share-controller-link {
2568
- color: #27282A;
2569
- background-color: #D8D846;
2570
- color: #27282A !important;
2571
- max-width: 142px;
2572
- width: 100%;
2573
- }
2574
- .plyr .share-controller .share-active .share-controller-content .share-controller-link-wrapper .share-controller-link:hover {
2575
- color: #27282A;
2576
- background-color: #c2c229;
2577
- }
2578
- .plyr .share-controller .share-active .share-controller-content .share-controller-link-wrapper .share-controller-link:active, .plyr .share-controller .share-active .share-controller-content .share-controller-link-wrapper .share-controller-link:focus {
2579
- color: #27282A;
2580
- background-color: #D8D846;
2581
- }
2582
- .plyr .share-controller .share-active .share-controller-content .share-controller-link-wrapper .share-controller-link:focus-visible, .plyr .share-controller .share-active .share-controller-content .share-controller-link-wrapper .share-controller-link:focus {
2583
- outline: transparent;
2584
- }
2585
- .plyr .share-controller .share-active .share-controller-content .share-controller-hr {
2586
- opacity: 0.3;
2587
- margin: 20px 0;
2588
- }
2589
- .plyr .share-controller .share-active .share-controller-content .share-controller-icons {
2590
- gap: 15px;
2591
- flex-wrap: wrap;
2592
- }
2593
- .plyr .share-controller .share-active .share-controller-content .share-controller-icons div {
2594
- display: none;
2595
- }
2596
- .plyr .share-controller .share-active .share-controller-content .share-controller-icons a {
2597
- padding: 0;
2598
- }
2599
- .plyr .share-controller .share-active .share-controller-content .share-controller-icons a .share-icon__icon {
2600
- width: 32px;
2601
- height: 32px;
2602
- max-width: 32px;
2603
- max-height: 32px;
2604
- background: #27282A;
2605
- }
2606
-
2607
- .plyr__caption {
2608
- display: none;
2609
- }
2610
- .plyr__caption span:empty {
2611
- display: none;
2612
- }
2613
-
2614
- .lt-player-custom-captions {
2615
- margin-bottom: 16px;
2616
- }
2617
- .lt-player-custom-captions span {
2618
- display: flex;
2619
- justify-content: center;
2620
- margin: auto;
2621
- width: 100%;
2622
- color: #000;
2623
- background-color: rgba(216, 216, 70, 0.7);
2624
- font-size: 18px;
2625
- line-height: 1.5;
2626
- font-weight: 400;
2627
- padding: 8px 12px;
2628
- border-radius: 40px;
2629
- font-family: "MuseoSans", sans-serif;
2630
- white-space: unset;
2631
- -webkit-box-decoration-break: clone;
2632
- box-decoration-break: clone;
2633
- }
2634
- .lt-player-custom-captions span:empty {
2635
- padding: 0;
2636
- }
2637
-
2638
- @container portrait (width < 319px) {
2639
- .lt-player-custom-captions span {
2640
- font-size: 14px;
2641
- }
2642
- }
2643
- @keyframes plyr-progress {
2644
- to {
2645
- background-position: var(--plyr-progress-loading-size, 25px) 0;
2646
- }
2647
- }
2648
- @keyframes plyr-popup {
2649
- 0% {
2650
- opacity: 0.5;
2651
- transform: translateY(10px);
2652
- }
2653
- to {
2654
- opacity: 1;
2655
- transform: translateY(0);
2656
- }
2657
- }
2658
- @keyframes plyr-fade-in {
2659
- from {
2660
- opacity: 0;
2661
- }
2662
- to {
2663
- opacity: 1;
2664
- }
2665
- }
2666
- .plyr {
2667
- -moz-osx-font-smoothing: grayscale;
2668
- -webkit-font-smoothing: antialiased;
2669
- align-items: center;
2670
- direction: ltr;
2671
- display: flex;
2672
- flex-direction: column;
2673
- font-family: var(--plyr-font-family, inherit);
2674
- font-variant-numeric: tabular-nums;
2675
- font-weight: var(--plyr-font-weight-regular, 400);
2676
- line-height: var(--plyr-line-height, 1.7);
2677
- max-width: 100%;
2678
- min-width: 200px;
2679
- position: relative;
2680
- text-shadow: none;
2681
- transition: box-shadow 0.3s ease;
2682
- z-index: 0;
2683
- }
2684
- .plyr video,
2685
- .plyr audio,
2686
- .plyr iframe {
2687
- display: block;
2688
- height: 100%;
2689
- width: 100%;
2690
- }
2691
- .plyr button {
2692
- font: inherit;
2693
- line-height: inherit;
2694
- width: auto;
2695
- }
2696
- .plyr:focus {
2697
- outline: 0;
2698
- }
2699
-
2700
- .plyr--full-ui {
2701
- box-sizing: border-box;
2702
- }
2703
- .plyr--full-ui *,
2704
- .plyr--full-ui *::after,
2705
- .plyr--full-ui *::before {
2706
- box-sizing: inherit;
2707
- }
2708
-
2709
- .plyr--full-ui a,
2710
- .plyr--full-ui button,
2711
- .plyr--full-ui input,
2712
- .plyr--full-ui label {
2713
- touch-action: manipulation;
2714
- }
2715
-
2716
- .plyr__badge {
2717
- background: var(--plyr-badge-background, hsl(216, 15%, 34%));
2718
- border-radius: var(--plyr-badge-border-radius, 2px);
2719
- color: var(--plyr-badge-text-color, #fff);
2720
- font-size: var(--plyr-font-size-badge, 9px);
2721
- line-height: 1;
2722
- padding: 3px 4px;
2723
- }
2724
-
2725
- .plyr--full-ui ::-webkit-media-text-track-container {
2726
- display: none;
2727
- }
2728
-
2729
- .plyr__captions {
2730
- animation: plyr-fade-in 0.3s ease;
2731
- bottom: 0;
2732
- display: none;
2733
- font-size: var(--plyr-font-size-small, 13px);
2734
- left: 0;
2735
- padding: var(--plyr-control-spacing, 10px);
2736
- position: absolute;
2737
- text-align: center;
2738
- transition: transform 0.4s ease-in-out;
2739
- width: 100%;
2740
- }
2741
- .plyr__captions span:empty {
2742
- display: none;
2743
- }
2744
- @media (min-width: 480px) {
2745
- .plyr__captions {
2746
- font-size: var(--plyr-font-size-base, 15px);
2747
- padding: calc(var(--plyr-control-spacing, 10px) * 2);
2748
- }
2749
- }
2750
- @media (min-width: 768px) {
2751
- .plyr__captions {
2752
- font-size: var(--plyr-font-size-large, 18px);
2753
- }
2754
- }
2755
-
2756
- .plyr--captions-active .plyr__captions {
2757
- display: block;
2758
- }
2759
-
2760
- .plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
2761
- transform: translateY(calc(var(--plyr-control-spacing, 10px) * -4));
2762
- }
2763
-
2764
- .plyr__caption {
2765
- background: var(--plyr-captions-background, rgba(0, 0, 0, 0.8));
2766
- border-radius: 2px;
2767
- -webkit-box-decoration-break: clone;
2768
- box-decoration-break: clone;
2769
- color: var(--plyr-captions-text-color, #fff);
2770
- line-height: 185%;
2771
- padding: 0.2em 0.5em;
2772
- white-space: pre-wrap;
2773
- }
2774
- .plyr__caption div {
2775
- display: inline;
2776
- }
2777
-
2778
- .plyr__control {
2779
- background: transparent;
2780
- border: 0;
2781
- border-radius: var(--plyr-control-radius, 4px);
2782
- color: inherit;
2783
- cursor: pointer;
2784
- flex-shrink: 0;
2785
- overflow: visible;
2786
- padding: calc(var(--plyr-control-spacing, 10px) * 0.7);
2787
- position: relative;
2788
- transition: all 0.3s ease;
2789
- }
2790
- .plyr__control svg {
2791
- display: block;
2792
- fill: currentColor;
2793
- height: var(--plyr-control-icon-size, 18px);
2794
- pointer-events: none;
2795
- width: var(--plyr-control-icon-size, 18px);
2796
- }
2797
- .plyr__control:focus {
2798
- outline: 0;
2799
- }
2800
- .plyr__control:focus-visible {
2801
- outline: 2px dashed var(--plyr-focus-visible-color, var(--plyr-color-main, var(--plyr-color-main, hsl(198, 100%, 50%))));
2802
- outline-offset: 2px;
2803
- }
2804
-
2805
- a.plyr__control {
2806
- text-decoration: none;
2807
- }
2808
- a.plyr__control::after, a.plyr__control::before {
2809
- display: none;
2810
- }
2811
-
2812
- .plyr__control:not(.plyr__control--pressed) .icon--pressed,
2813
- .plyr__control.plyr__control--pressed .icon--not-pressed,
2814
- .plyr__control:not(.plyr__control--pressed) .label--pressed,
2815
- .plyr__control.plyr__control--pressed .label--not-pressed {
2816
- display: none;
2817
- }
2818
-
2819
- .plyr--full-ui ::-webkit-media-controls {
2820
- display: none;
2821
- }
2822
-
2823
- .plyr__controls {
2824
- align-items: center;
2825
- display: flex;
2826
- justify-content: flex-end;
2827
- text-align: center;
2828
- }
2829
- .plyr__controls .plyr__progress__container {
2830
- flex: 1;
2831
- min-width: 0;
2832
- }
2833
- .plyr__controls .plyr__controls__item {
2834
- margin-left: calc(var(--plyr-control-spacing, 10px) / 4);
2835
- }
2836
- .plyr__controls .plyr__controls__item:first-child {
2837
- margin-left: 0;
2838
- margin-right: auto;
2839
- }
2840
- .plyr__controls .plyr__controls__item.plyr__progress__container {
2841
- padding-left: calc(var(--plyr-control-spacing, 10px) / 4);
2842
- }
2843
- .plyr__controls .plyr__controls__item.plyr__time {
2844
- padding: 0 calc(var(--plyr-control-spacing, 10px) / 2);
2845
- }
2846
- .plyr__controls .plyr__controls__item.plyr__progress__container:first-child, .plyr__controls .plyr__controls__item.plyr__time:first-child, .plyr__controls .plyr__controls__item.plyr__time + .plyr__time {
2847
- padding-left: 0;
2848
- }
2849
- .plyr__controls:empty {
2850
- display: none;
2851
- }
2852
-
2853
- .plyr [data-plyr=captions],
2854
- .plyr [data-plyr=pip],
2855
- .plyr [data-plyr=airplay],
2856
- .plyr [data-plyr=fullscreen] {
2857
- display: none;
2858
- }
2859
-
2860
- .plyr--captions-enabled [data-plyr=captions],
2861
- .plyr--pip-supported [data-plyr=pip],
2862
- .plyr--airplay-supported [data-plyr=airplay],
2863
- .plyr--fullscreen-enabled [data-plyr=fullscreen] {
2864
- display: inline-block;
2865
- }
2866
-
2867
- .plyr__menu {
2868
- display: flex;
2869
- position: relative;
2870
- }
2871
- .plyr__menu .plyr__control svg {
2872
- transition: transform 0.3s ease;
2873
- }
2874
- .plyr__menu .plyr__control[aria-expanded=true] svg {
2875
- transform: rotate(90deg);
2876
- }
2877
- .plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip {
2878
- display: none;
2879
- }
2880
- .plyr__menu__container {
2881
- animation: plyr-popup 0.2s ease;
2882
- background: var(--plyr-menu-background, rgba(255, 255, 255, 0.9));
2883
- border-radius: var(--plyr-menu-radius, 8px);
2884
- bottom: 100%;
2885
- box-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba(0, 0, 0, 0.15));
2886
- color: var(--plyr-menu-color, hsl(216, 15%, 34%));
2887
- font-size: var(--plyr-font-size-base, 15px);
2888
- margin-bottom: 10px;
2889
- position: absolute;
2890
- right: -3px;
2891
- text-align: left;
2892
- white-space: nowrap;
2893
- z-index: 3;
2894
- }
2895
- .plyr__menu__container > div {
2896
- overflow: hidden;
2897
- transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
2898
- }
2899
- .plyr__menu__container::after {
2900
- border: var(--plyr-menu-arrow-size, 4px) solid transparent;
2901
- border-top-color: var(--plyr-menu-background, rgba(255, 255, 255, 0.9));
2902
- content: "";
2903
- height: 0;
2904
- position: absolute;
2905
- right: calc(((var(--plyr-control-icon-size, 18px) / 2) + calc(var(--plyr-control-spacing, 10px) * 0.7)) - (var(--plyr-menu-arrow-size, 4px) / 2));
2906
- top: 100%;
2907
- width: 0;
2908
- }
2909
- .plyr__menu__container [role=menu] {
2910
- padding: calc(var(--plyr-control-spacing, 10px) * 0.7);
2911
- }
2912
- .plyr__menu__container [role=menuitem],
2913
- .plyr__menu__container [role=menuitemradio] {
2914
- margin-top: 2px;
2915
- }
2916
- .plyr__menu__container [role=menuitem]:first-child,
2917
- .plyr__menu__container [role=menuitemradio]:first-child {
2918
- margin-top: 0;
2919
- }
2920
- .plyr__menu__container .plyr__control {
2921
- align-items: center;
2922
- color: var(--plyr-menu-color, hsl(216, 15%, 34%));
2923
- display: flex;
2924
- font-size: var(--plyr-font-size-menu, var(--plyr-font-size-small, 13px));
2925
- padding: calc(calc(var(--plyr-control-spacing, 10px) * 0.7) / 1.5) calc(calc(var(--plyr-control-spacing, 10px) * 0.7) * 1.5);
2926
- -webkit-user-select: none;
2927
- -moz-user-select: none;
2928
- user-select: none;
2929
- width: 100%;
2930
- }
2931
- .plyr__menu__container .plyr__control > span {
2932
- align-items: inherit;
2933
- display: flex;
2934
- width: 100%;
2935
- }
2936
- .plyr__menu__container .plyr__control::after {
2937
- border: var(--plyr-menu-item-arrow-size, 4px) solid transparent;
2938
- content: "";
2939
- position: absolute;
2940
- top: 50%;
2941
- transform: translateY(-50%);
2942
- }
2943
- .plyr__menu__container .plyr__control--forward {
2944
- padding-right: calc(calc(var(--plyr-control-spacing, 10px) * 0.7) * 4);
2945
- }
2946
- .plyr__menu__container .plyr__control--forward::after {
2947
- border-left-color: var(--plyr-menu-arrow-color, hsl(216, 15%, 52%));
2948
- right: calc((calc(var(--plyr-control-spacing, 10px) * 0.7) * 1.5) - var(--plyr-menu-item-arrow-size, 4px));
2949
- }
2950
- .plyr__menu__container .plyr__control--forward:focus-visible::after, .plyr__menu__container .plyr__control--forward:hover::after {
2951
- border-left-color: currentColor;
2952
- }
2953
- .plyr__menu__container .plyr__control--back {
2954
- font-weight: var(--plyr-font-weight-regular, 400);
2955
- margin: calc(var(--plyr-control-spacing, 10px) * 0.7);
2956
- margin-bottom: calc(calc(var(--plyr-control-spacing, 10px) * 0.7) / 2);
2957
- padding-left: calc(calc(var(--plyr-control-spacing, 10px) * 0.7) * 4);
2958
- position: relative;
2959
- width: calc(100% - (calc(var(--plyr-control-spacing, 10px) * 0.7) * 2));
2960
- }
2961
- .plyr__menu__container .plyr__control--back::after {
2962
- border-right-color: var(--plyr-menu-arrow-color, hsl(216, 15%, 52%));
2963
- left: calc((calc(var(--plyr-control-spacing, 10px) * 0.7) * 1.5) - var(--plyr-menu-item-arrow-size, 4px));
2964
- }
2965
- .plyr__menu__container .plyr__control--back::before {
2966
- background: var(--plyr-menu-back-border-color, hsl(216, 15%, 88%));
2967
- box-shadow: 0 1px 0 var(--plyr-menu-back-border-shadow-color, #fff);
2968
- content: "";
2969
- height: 1px;
2970
- left: 0;
2971
- margin-top: calc(calc(var(--plyr-control-spacing, 10px) * 0.7) / 2);
2972
- overflow: hidden;
2973
- position: absolute;
2974
- right: 0;
2975
- top: 100%;
2976
- }
2977
- .plyr__menu__container .plyr__control--back:focus-visible::after, .plyr__menu__container .plyr__control--back:hover::after {
2978
- border-right-color: currentColor;
2979
- }
2980
- .plyr__menu__container .plyr__control[role=menuitemradio] {
2981
- padding-left: calc(var(--plyr-control-spacing, 10px) * 0.7);
2982
- }
2983
- .plyr__menu__container .plyr__control[role=menuitemradio]::before, .plyr__menu__container .plyr__control[role=menuitemradio]::after {
2984
- border-radius: 100%;
2985
- }
2986
- .plyr__menu__container .plyr__control[role=menuitemradio]::before {
2987
- background: rgba(0, 0, 0, 0.1);
2988
- content: "";
2989
- display: block;
2990
- flex-shrink: 0;
2991
- height: 16px;
2992
- margin-right: var(--plyr-control-spacing, 10px);
2993
- transition: all 0.3s ease;
2994
- width: 16px;
2995
- }
2996
- .plyr__menu__container .plyr__control[role=menuitemradio]::after {
2997
- background: #fff;
2998
- border: 0;
2999
- height: 6px;
3000
- left: 12px;
3001
- opacity: 0;
3002
- top: 50%;
3003
- transform: translateY(-50%) scale(0);
3004
- transition: transform 0.3s ease, opacity 0.3s ease;
3005
- width: 6px;
3006
- }
3007
- .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {
3008
- background: var(--plyr-control-toggle-checked-background, var(--plyr-color-main, var(--plyr-color-main, hsl(198, 100%, 50%))));
3009
- }
3010
- .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::after {
3011
- opacity: 1;
3012
- transform: translateY(-50%) scale(1);
3013
- }
3014
- .plyr__menu__container .plyr__control[role=menuitemradio]:focus-visible::before, .plyr__menu__container .plyr__control[role=menuitemradio]:hover::before {
3015
- background: rgba(35, 40, 47, 0.1);
3016
- }
3017
- .plyr__menu__container .plyr__menu__value {
3018
- align-items: center;
3019
- display: flex;
3020
- margin-left: auto;
3021
- margin-right: calc((calc(var(--plyr-control-spacing, 10px) * 0.7) - 2px) * -1);
3022
- overflow: hidden;
3023
- padding-left: calc(calc(var(--plyr-control-spacing, 10px) * 0.7) * 3.5);
3024
- pointer-events: none;
3025
- }
3026
-
3027
- .plyr--full-ui input[type=range] {
3028
- -webkit-appearance: none;
3029
- -moz-appearance: none;
3030
- appearance: none;
3031
- background: transparent;
3032
- border: 0;
3033
- border-radius: calc(var(--plyr-range-thumb-height, 13px) * 2);
3034
- color: var(--plyr-range-fill-background, var(--plyr-color-main, var(--plyr-color-main, hsl(198, 100%, 50%))));
3035
- display: block;
3036
- height: calc((var(--plyr-range-thumb-active-shadow-width, 3px) * 2) + var(--plyr-range-thumb-height, 13px));
3037
- margin: 0;
3038
- min-width: 0;
3039
- padding: 0;
3040
- transition: box-shadow 0.3s ease;
3041
- width: 100%;
3042
- }
3043
- .plyr--full-ui input[type=range]::-webkit-slider-runnable-track {
3044
- background: transparent;
3045
- border: 0;
3046
- border-radius: calc(var(--plyr-range-track-height, 5px) / 2);
3047
- height: var(--plyr-range-track-height, 5px);
3048
- -webkit-transition: box-shadow 0.3s ease;
3049
- transition: box-shadow 0.3s ease;
3050
- -webkit-user-select: none;
3051
- user-select: none;
3052
- background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%));
3053
- }
3054
- .plyr--full-ui input[type=range]::-webkit-slider-thumb {
3055
- background: var(--plyr-range-thumb-background, #fff);
3056
- border: 0;
3057
- border-radius: 100%;
3058
- box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2));
3059
- height: var(--plyr-range-thumb-height, 13px);
3060
- position: relative;
3061
- -webkit-transition: all 0.2s ease;
3062
- transition: all 0.2s ease;
3063
- width: var(--plyr-range-thumb-height, 13px);
3064
- -webkit-appearance: none;
3065
- appearance: none;
3066
- margin-top: calc((var(--plyr-range-thumb-height, 13px) - var(--plyr-range-track-height, 5px)) / 2 * -1);
3067
- }
3068
- .plyr--full-ui input[type=range]::-moz-range-track {
3069
- background: transparent;
3070
- border: 0;
3071
- border-radius: calc(var(--plyr-range-track-height, 5px) / 2);
3072
- height: var(--plyr-range-track-height, 5px);
3073
- -moz-transition: box-shadow 0.3s ease;
3074
- transition: box-shadow 0.3s ease;
3075
- -moz-user-select: none;
3076
- user-select: none;
3077
- }
3078
- .plyr--full-ui input[type=range]::-moz-range-thumb {
3079
- background: var(--plyr-range-thumb-background, #fff);
3080
- border: 0;
3081
- border-radius: 100%;
3082
- box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2));
3083
- height: var(--plyr-range-thumb-height, 13px);
3084
- position: relative;
3085
- -moz-transition: all 0.2s ease;
3086
- transition: all 0.2s ease;
3087
- width: var(--plyr-range-thumb-height, 13px);
3088
- }
3089
- .plyr--full-ui input[type=range]::-moz-range-progress {
3090
- background: currentColor;
3091
- border-radius: calc(var(--plyr-range-track-height, 5px) / 2);
3092
- height: var(--plyr-range-track-height, 5px);
3093
- }
3094
- .plyr--full-ui input[type=range]::-ms-track {
3095
- background: transparent;
3096
- border: 0;
3097
- border-radius: calc(var(--plyr-range-track-height, 5px) / 2);
3098
- height: var(--plyr-range-track-height, 5px);
3099
- -ms-transition: box-shadow 0.3s ease;
3100
- transition: box-shadow 0.3s ease;
3101
- user-select: none;
3102
- color: transparent;
3103
- }
3104
- .plyr--full-ui input[type=range]::-ms-fill-upper {
3105
- background: transparent;
3106
- border: 0;
3107
- border-radius: calc(var(--plyr-range-track-height, 5px) / 2);
3108
- height: var(--plyr-range-track-height, 5px);
3109
- -ms-transition: box-shadow 0.3s ease;
3110
- transition: box-shadow 0.3s ease;
3111
- user-select: none;
3112
- }
3113
- .plyr--full-ui input[type=range]::-ms-fill-lower {
3114
- background: transparent;
3115
- border: 0;
3116
- border-radius: calc(var(--plyr-range-track-height, 5px) / 2);
3117
- height: var(--plyr-range-track-height, 5px);
3118
- -ms-transition: box-shadow 0.3s ease;
3119
- transition: box-shadow 0.3s ease;
3120
- user-select: none;
3121
- background: currentColor;
3122
- }
3123
- .plyr--full-ui input[type=range]::-ms-thumb {
3124
- background: var(--plyr-range-thumb-background, #fff);
3125
- border: 0;
3126
- border-radius: 100%;
3127
- box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2));
3128
- height: var(--plyr-range-thumb-height, 13px);
3129
- position: relative;
3130
- -ms-transition: all 0.2s ease;
3131
- transition: all 0.2s ease;
3132
- width: var(--plyr-range-thumb-height, 13px);
3133
- margin-top: 0;
3134
- }
3135
- .plyr--full-ui input[type=range]::-ms-tooltip {
3136
- display: none;
3137
- }
3138
- .plyr--full-ui input[type=range]::-moz-focus-outer {
3139
- border: 0;
3140
- }
3141
- .plyr--full-ui input[type=range]:focus {
3142
- outline: 0;
3143
- }
3144
- .plyr--full-ui input[type=range]:focus-visible::-webkit-slider-runnable-track {
3145
- outline: 2px dashed var(--plyr-focus-visible-color, var(--plyr-color-main, var(--plyr-color-main, hsl(198, 100%, 50%))));
3146
- outline-offset: 2px;
3147
- }
3148
- .plyr--full-ui input[type=range]:focus-visible::-moz-range-track {
3149
- outline: 2px dashed var(--plyr-focus-visible-color, var(--plyr-color-main, var(--plyr-color-main, hsl(198, 100%, 50%))));
3150
- outline-offset: 2px;
3151
- }
3152
- .plyr--full-ui input[type=range]:focus-visible::-ms-track {
3153
- outline: 2px dashed var(--plyr-focus-visible-color, var(--plyr-color-main, var(--plyr-color-main, hsl(198, 100%, 50%))));
3154
- outline-offset: 2px;
3155
- }
3156
-
3157
- .plyr__poster {
3158
- background-color: var(--plyr-video-background, var(--plyr-video-background, rgb(0, 0, 0)));
3159
- background-position: 50% 50%;
3160
- background-repeat: no-repeat;
3161
- background-size: contain;
3162
- height: 100%;
3163
- left: 0;
3164
- opacity: 0;
3165
- position: absolute;
3166
- top: 0;
3167
- transition: opacity 0.2s ease;
3168
- width: 100%;
3169
- z-index: 1;
3170
- }
3171
-
3172
- .plyr--stopped.plyr__poster-enabled .plyr__poster {
3173
- opacity: 1;
3174
- }
3175
-
3176
- .plyr--youtube.plyr--paused.plyr__poster-enabled:not(.plyr--stopped) .plyr__poster {
3177
- display: none;
3178
- }
3179
-
3180
- .plyr__time {
3181
- font-size: var(--plyr-font-size-time, var(--plyr-font-size-small, 13px));
3182
- }
3183
-
3184
- .plyr__time + .plyr__time::before {
3185
- content: "⁄";
3186
- margin-right: var(--plyr-control-spacing, 10px);
3187
- }
3188
- @media (max-width: 767px) {
3189
- .plyr__time + .plyr__time {
3190
- display: none;
3191
- }
3192
- }
3193
-
3194
- /* stylelint-disable selector-max-compound-selectors */
3195
- .plyr__tooltip {
3196
- background: var(--plyr-tooltip-background, #fff);
3197
- border-radius: var(--plyr-tooltip-radius, 5px);
3198
- bottom: 100%;
3199
- box-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, 0.15));
3200
- color: var(--plyr-tooltip-color, hsl(216, 15%, 34%));
3201
- font-size: var(--plyr-font-size-small, 13px);
3202
- font-weight: var(--plyr-font-weight-regular, 400);
3203
- left: 50%;
3204
- line-height: 1.3;
3205
- margin-bottom: calc(calc(var(--plyr-control-spacing, 10px) / 2) * 2);
3206
- opacity: 0;
3207
- padding: calc(var(--plyr-control-spacing, 10px) / 2) calc(calc(var(--plyr-control-spacing, 10px) / 2) * 1.5);
3208
- pointer-events: none;
3209
- position: absolute;
3210
- transform: translate(-50%, 10px) scale(0.8);
3211
- transform-origin: 50% 100%;
3212
- transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
3213
- white-space: nowrap;
3214
- z-index: 2;
3215
- }
3216
- .plyr__tooltip::before {
3217
- border-left: var(--plyr-tooltip-arrow-size, 4px) solid transparent;
3218
- border-right: var(--plyr-tooltip-arrow-size, 4px) solid transparent;
3219
- border-top: var(--plyr-tooltip-arrow-size, 4px) solid var(--plyr-tooltip-background, #fff);
3220
- bottom: calc(var(--plyr-tooltip-arrow-size, 4px) * -1);
3221
- content: "";
3222
- height: 0;
3223
- left: 50%;
3224
- position: absolute;
3225
- transform: translateX(-50%);
3226
- width: 0;
3227
- z-index: 2;
3228
- }
3229
-
3230
- .plyr .plyr__control:hover .plyr__tooltip,
3231
- .plyr .plyr__control:focus-visible .plyr__tooltip,
3232
- .plyr__tooltip--visible {
3233
- opacity: 1;
3234
- transform: translate(-50%, 0) scale(1);
3235
- }
3236
-
3237
- .plyr .plyr__control:hover .plyr__tooltip {
3238
- z-index: 3;
3239
- }
3240
-
3241
- .plyr__controls > .plyr__control:first-child .plyr__tooltip,
3242
- .plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip {
3243
- left: 0;
3244
- transform: translate(0, 10px) scale(0.8);
3245
- transform-origin: 0 100%;
3246
- }
3247
- .plyr__controls > .plyr__control:first-child .plyr__tooltip::before,
3248
- .plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip::before {
3249
- left: calc((var(--plyr-control-icon-size, 18px) / 2) + calc(var(--plyr-control-spacing, 10px) * 0.7));
3250
- }
3251
-
3252
- .plyr__controls > .plyr__control:last-child .plyr__tooltip {
3253
- left: auto;
3254
- right: 0;
3255
- transform: translate(0, 10px) scale(0.8);
3256
- transform-origin: 100% 100%;
3257
- }
3258
- .plyr__controls > .plyr__control:last-child .plyr__tooltip::before {
3259
- left: auto;
3260
- right: calc((var(--plyr-control-icon-size, 18px) / 2) + calc(var(--plyr-control-spacing, 10px) * 0.7));
3261
- transform: translateX(50%);
3262
- }
3263
-
3264
- .plyr__controls > .plyr__control:first-child:hover .plyr__tooltip, .plyr__controls > .plyr__control:first-child:focus-visible .plyr__tooltip,
3265
- .plyr__controls > .plyr__control:first-child .plyr__tooltip--visible,
3266
- .plyr__controls > .plyr__control:first-child + .plyr__control:hover .plyr__tooltip,
3267
- .plyr__controls > .plyr__control:first-child + .plyr__control:focus-visible .plyr__tooltip,
3268
- .plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip--visible,
3269
- .plyr__controls > .plyr__control:last-child:hover .plyr__tooltip,
3270
- .plyr__controls > .plyr__control:last-child:focus-visible .plyr__tooltip,
3271
- .plyr__controls > .plyr__control:last-child .plyr__tooltip--visible {
3272
- transform: translate(0, 0) scale(1);
3273
- }
3274
-
3275
- .plyr__progress {
3276
- left: calc(var(--plyr-range-thumb-height, 13px) * 0.5);
3277
- margin-right: var(--plyr-range-thumb-height, 13px);
3278
- position: relative;
3279
- }
3280
- .plyr__progress input[type=range], .plyr__progress__buffer {
3281
- margin-left: calc(var(--plyr-range-thumb-height, 13px) * -0.5);
3282
- margin-right: calc(var(--plyr-range-thumb-height, 13px) * -0.5);
3283
- width: calc(100% + var(--plyr-range-thumb-height, 13px));
3284
- }
3285
- .plyr__progress input[type=range] {
3286
- position: relative;
3287
- z-index: 2;
3288
- }
3289
- .plyr__progress .plyr__tooltip {
3290
- left: 0;
3291
- max-width: 120px;
3292
- overflow-wrap: break-word;
3293
- }
3294
-
3295
- .plyr__progress__buffer {
3296
- -webkit-appearance: none; /* stylelint-disable-line */
3297
- background: transparent;
3298
- border: 0;
3299
- border-radius: 100px;
3300
- height: var(--plyr-range-track-height, 5px);
3301
- left: 0;
3302
- margin-top: calc((var(--plyr-range-track-height, 5px) / 2) * -1);
3303
- padding: 0;
3304
- position: absolute;
3305
- top: 50%;
3306
- }
3307
- .plyr__progress__buffer::-webkit-progress-bar {
3308
- background: transparent;
3309
- }
3310
- .plyr__progress__buffer::-webkit-progress-value {
3311
- background: currentColor;
3312
- border-radius: 100px;
3313
- min-width: var(--plyr-range-track-height, 5px);
3314
- -webkit-transition: width 0.2s ease;
3315
- transition: width 0.2s ease;
3316
- }
3317
- .plyr__progress__buffer::-moz-progress-bar {
3318
- background: currentColor;
3319
- border-radius: 100px;
3320
- min-width: var(--plyr-range-track-height, 5px);
3321
- -moz-transition: width 0.2s ease;
3322
- transition: width 0.2s ease;
3323
- }
3324
- .plyr__progress__buffer::-ms-fill {
3325
- border-radius: 100px;
3326
- -ms-transition: width 0.2s ease;
3327
- transition: width 0.2s ease;
3328
- }
3329
-
3330
- .plyr--loading .plyr__progress__buffer {
3331
- animation: plyr-progress 1s linear infinite;
3332
- background-image: linear-gradient(-45deg, var(--plyr-progress-loading-background, rgba(35, 40, 47, 0.6)) 25%, transparent 25%, transparent 50%, var(--plyr-progress-loading-background, rgba(35, 40, 47, 0.6)) 50%, var(--plyr-progress-loading-background, rgba(35, 40, 47, 0.6)) 75%, transparent 75%, transparent);
3333
- background-repeat: repeat-x;
3334
- background-size: var(--plyr-progress-loading-size, 25px) var(--plyr-progress-loading-size, 25px);
3335
- color: transparent;
3336
- }
3337
-
3338
- .plyr--video.plyr--loading .plyr__progress__buffer {
3339
- background-color: var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, 0.25));
3340
- }
3341
-
3342
- .plyr--audio.plyr--loading .plyr__progress__buffer {
3343
- background-color: var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, 0.6));
3344
- }
3345
-
3346
- .plyr__progress__marker {
3347
- background-color: var(--plyr-progress-marker-background, #fff);
3348
- border-radius: 1px;
3349
- height: var(--plyr-range-track-height, 5px);
3350
- position: absolute;
3351
- top: 50%;
3352
- transform: translate(-50%, -50%);
3353
- width: var(--plyr-progress-marker-width, 3px);
3354
- z-index: 3;
3355
- }
3356
-
3357
- .plyr__volume {
3358
- align-items: center;
3359
- display: flex;
3360
- position: relative;
3361
- }
3362
- .plyr__volume input[type=range] {
3363
- margin-left: calc(var(--plyr-control-spacing, 10px) / 2);
3364
- margin-right: calc(var(--plyr-control-spacing, 10px) / 2);
3365
- max-width: 90px;
3366
- min-width: 60px;
3367
- position: relative;
3368
- z-index: 2;
3369
- }
3370
-
3371
- .plyr--audio {
3372
- display: block;
3373
- }
3374
-
3375
- .plyr--audio .plyr__controls {
3376
- background: var(--plyr-audio-controls-background, #fff);
3377
- border-radius: inherit;
3378
- color: var(--plyr-audio-control-color, hsl(216, 15%, 34%));
3379
- padding: var(--plyr-control-spacing, 10px);
3380
- }
3381
-
3382
- .plyr--audio .plyr__control:focus-visible, .plyr--audio .plyr__control:hover, .plyr--audio .plyr__control[aria-expanded=true] {
3383
- background: var(--plyr-audio-control-background-hover, var(--plyr-color-main, var(--plyr-color-main, hsl(198, 100%, 50%))));
3384
- color: var(--plyr-audio-control-color-hover, #fff);
3385
- }
3386
-
3387
- .plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track {
3388
- background-color: var(--plyr-audio-range-track-background, var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, 0.6)));
3389
- }
3390
- .plyr--full-ui.plyr--audio input[type=range]::-moz-range-track {
3391
- background-color: var(--plyr-audio-range-track-background, var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, 0.6)));
3392
- }
3393
- .plyr--full-ui.plyr--audio input[type=range]::-ms-track {
3394
- background-color: var(--plyr-audio-range-track-background, var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, 0.6)));
3395
- }
3396
- .plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb {
3397
- box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, rgba(35, 40, 47, 0.1));
3398
- }
3399
- .plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb {
3400
- box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, rgba(35, 40, 47, 0.1));
3401
- }
3402
- .plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb {
3403
- box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, rgba(35, 40, 47, 0.1));
3404
- }
3405
-
3406
- .plyr--audio .plyr__progress__buffer {
3407
- color: var(--plyr-audio-progress-buffered-background, rgba(193, 200, 209, 0.6));
3408
- }
3409
-
3410
- .plyr--video {
3411
- overflow: hidden;
3412
- }
3413
- .plyr--video.plyr--menu-open {
3414
- overflow: visible;
3415
- }
3416
-
3417
- .plyr__video-wrapper {
3418
- background: var(--plyr-video-background, var(--plyr-video-background, rgb(0, 0, 0)));
3419
- border-radius: inherit;
3420
- height: 100%;
3421
- margin: auto;
3422
- overflow: hidden;
3423
- position: relative;
3424
- width: 100%;
3425
- }
3426
-
3427
- .plyr__video-embed,
3428
- .plyr__video-wrapper--fixed-ratio {
3429
- aspect-ratio: 16/9;
3430
- }
3431
- @supports not (aspect-ratio: 16/9) {
3432
- .plyr__video-embed,
3433
- .plyr__video-wrapper--fixed-ratio {
3434
- height: 0;
3435
- padding-bottom: 56.25%;
3436
- position: relative;
3437
- }
3438
- }
3439
-
3440
- .plyr__video-embed iframe,
3441
- .plyr__video-wrapper--fixed-ratio video {
3442
- border: 0;
3443
- height: 100%;
3444
- left: 0;
3445
- position: absolute;
3446
- top: 0;
3447
- width: 100%;
3448
- }
3449
-
3450
- .plyr--full-ui .plyr__video-embed > .plyr__video-embed__container {
3451
- padding-bottom: 240%;
3452
- position: relative;
3453
- transform: translateY(-38.28125%);
3454
- }
3455
-
3456
- .plyr--video .plyr__controls {
3457
- background: var(--plyr-video-controls-background, linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75)));
3458
- border-bottom-left-radius: inherit;
3459
- border-bottom-right-radius: inherit;
3460
- bottom: 0;
3461
- color: var(--plyr-video-control-color, #fff);
3462
- left: 0;
3463
- padding: calc(var(--plyr-control-spacing, 10px) / 2);
3464
- padding-top: calc(var(--plyr-control-spacing, 10px) * 2);
3465
- position: absolute;
3466
- right: 0;
3467
- transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
3468
- z-index: 3;
3469
- }
3470
- @media (min-width: 480px) {
3471
- .plyr--video .plyr__controls {
3472
- padding: var(--plyr-control-spacing, 10px);
3473
- padding-top: calc(var(--plyr-control-spacing, 10px) * 3.5);
3474
- }
3475
- }
3476
-
3477
- .plyr--video.plyr--hide-controls .plyr__controls {
3478
- opacity: 0;
3479
- pointer-events: none;
3480
- transform: translateY(100%);
3481
- }
3482
-
3483
- .plyr--video .plyr__control:focus-visible, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true] {
3484
- background: var(--plyr-video-control-background-hover, var(--plyr-color-main, var(--plyr-color-main, hsl(198, 100%, 50%))));
3485
- color: var(--plyr-video-control-color-hover, #fff);
3486
- }
3487
-
3488
- .plyr__control--overlaid {
3489
- background: var(--plyr-video-control-background-hover, var(--plyr-color-main, var(--plyr-color-main, hsl(198, 100%, 50%))));
3490
- border: 0;
3491
- border-radius: 100%;
3492
- color: var(--plyr-video-control-color, #fff);
3493
- display: none;
3494
- left: 50%;
3495
- opacity: 0.9;
3496
- padding: calc(var(--plyr-control-spacing, 10px) * 1.5);
3497
- position: absolute;
3498
- top: 50%;
3499
- transform: translate(-50%, -50%);
3500
- transition: 0.3s;
3501
- z-index: 2;
3502
- }
3503
- .plyr__control--overlaid svg {
3504
- left: 2px;
3505
- position: relative;
3506
- }
3507
- .plyr__control--overlaid:hover, .plyr__control--overlaid:focus {
3508
- opacity: 1;
3509
- }
3510
-
3511
- .plyr--playing .plyr__control--overlaid {
3512
- opacity: 0;
3513
- visibility: hidden;
3514
- }
3515
-
3516
- .plyr--full-ui.plyr--video .plyr__control--overlaid {
3517
- display: block;
3518
- }
3519
-
3520
- .plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track {
3521
- background-color: var(--plyr-video-range-track-background, var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, 0.25)));
3522
- }
3523
- .plyr--full-ui.plyr--video input[type=range]::-moz-range-track {
3524
- background-color: var(--plyr-video-range-track-background, var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, 0.25)));
3525
- }
3526
- .plyr--full-ui.plyr--video input[type=range]::-ms-track {
3527
- background-color: var(--plyr-video-range-track-background, var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, 0.25)));
3528
- }
3529
- .plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb {
3530
- box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, rgba(255, 255, 255, 0.5));
3531
- }
3532
- .plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb {
3533
- box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, rgba(255, 255, 255, 0.5));
3534
- }
3535
- .plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb {
3536
- box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) var(--plyr-audio-range-thumb-active-shadow-color, rgba(255, 255, 255, 0.5));
3537
- }
3538
-
3539
- .plyr--video .plyr__progress__buffer {
3540
- color: var(--plyr-video-progress-buffered-background, rgba(255, 255, 255, 0.25));
3541
- }
3542
-
3543
- .plyr:-webkit-full-screen {
3544
- background: #000;
3545
- border-radius: 0 !important;
3546
- height: 100%;
3547
- margin: 0;
3548
- width: 100%;
3549
- }
3550
-
3551
- .plyr:fullscreen {
3552
- background: #000;
3553
- border-radius: 0 !important;
3554
- height: 100%;
3555
- margin: 0;
3556
- width: 100%;
3557
- }
3558
- .plyr:-webkit-full-screen video {
3559
- height: 100%;
3560
- }
3561
- .plyr:fullscreen video {
3562
- height: 100%;
3563
- }
3564
- .plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen {
3565
- display: block;
3566
- }
3567
- .plyr:fullscreen .plyr__control .icon--exit-fullscreen {
3568
- display: block;
3569
- }
3570
- .plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen + svg {
3571
- display: none;
3572
- }
3573
- .plyr:fullscreen .plyr__control .icon--exit-fullscreen + svg {
3574
- display: none;
3575
- }
3576
- .plyr:-webkit-full-screen.plyr--hide-controls {
3577
- cursor: none;
3578
- }
3579
- .plyr:fullscreen.plyr--hide-controls {
3580
- cursor: none;
3581
- }
3582
- @media (min-width: 1024px) {
3583
- .plyr:-webkit-full-screen .plyr__captions {
3584
- font-size: var(--plyr-font-size-xlarge, 21px);
3585
- }
3586
- .plyr:fullscreen .plyr__captions {
3587
- font-size: var(--plyr-font-size-xlarge, 21px);
3588
- }
3589
- }
3590
-
3591
- .plyr--fullscreen-fallback {
3592
- background: #000;
3593
- border-radius: 0 !important;
3594
- height: 100%;
3595
- margin: 0;
3596
- width: 100%;
3597
- bottom: 0;
3598
- left: 0;
3599
- position: fixed;
3600
- right: 0;
3601
- top: 0;
3602
- z-index: 10000000;
3603
- }
3604
- .plyr--fullscreen-fallback video {
3605
- height: 100%;
3606
- }
3607
- .plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen {
3608
- display: block;
3609
- }
3610
- .plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen + svg {
3611
- display: none;
3612
- }
3613
- .plyr--fullscreen-fallback.plyr--hide-controls {
3614
- cursor: none;
3615
- }
3616
- @media (min-width: 1024px) {
3617
- .plyr--fullscreen-fallback .plyr__captions {
3618
- font-size: var(--plyr-font-size-xlarge, 21px);
3619
- }
3620
- }
3621
-
3622
- .plyr__ads {
3623
- border-radius: inherit;
3624
- bottom: 0;
3625
- cursor: pointer;
3626
- left: 0;
3627
- overflow: hidden;
3628
- position: absolute;
3629
- right: 0;
3630
- top: 0;
3631
- z-index: -1;
3632
- }
3633
- .plyr__ads > div,
3634
- .plyr__ads > div iframe {
3635
- height: 100%;
3636
- position: absolute;
3637
- width: 100%;
3638
- }
3639
- .plyr__ads::after {
3640
- background: hsl(216, 15%, 16%);
3641
- border-radius: 2px;
3642
- bottom: var(--plyr-control-spacing, 10px);
3643
- color: #fff;
3644
- content: attr(data-badge-text);
3645
- font-size: 11px;
3646
- padding: 2px 6px;
3647
- pointer-events: none;
3648
- position: absolute;
3649
- right: var(--plyr-control-spacing, 10px);
3650
- z-index: 3;
3651
- }
3652
- .plyr__ads:empty::after {
3653
- display: none;
3654
- }
3655
-
3656
- .plyr__cues {
3657
- background: currentColor;
3658
- display: block;
3659
- height: var(--plyr-range-track-height, 5px);
3660
- left: 0;
3661
- opacity: 0.8;
3662
- position: absolute;
3663
- top: 50%;
3664
- transform: translateY(-50%);
3665
- width: 3px;
3666
- z-index: 3;
3667
- }
3668
-
3669
- .plyr__preview-thumb {
3670
- background-color: var(--plyr-tooltip-background, #fff);
3671
- border-radius: var(--plyr-menu-radius, 8px);
3672
- bottom: 100%;
3673
- box-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, 0.15));
3674
- margin-bottom: calc(calc(var(--plyr-control-spacing, 10px) / 2) * 2);
3675
- opacity: 0;
3676
- padding: 3px;
3677
- pointer-events: none;
3678
- position: absolute;
3679
- transform: translate(0, 10px) scale(0.8);
3680
- transform-origin: 50% 100%;
3681
- transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
3682
- z-index: 2;
3683
- }
3684
- .plyr__preview-thumb--is-shown {
3685
- opacity: 1;
3686
- transform: translate(0, 0) scale(1);
3687
- }
3688
- .plyr__preview-thumb::before {
3689
- border-left: var(--plyr-tooltip-arrow-size, 4px) solid transparent;
3690
- border-right: var(--plyr-tooltip-arrow-size, 4px) solid transparent;
3691
- border-top: var(--plyr-tooltip-arrow-size, 4px) solid var(--plyr-tooltip-background, #fff);
3692
- bottom: calc(var(--plyr-tooltip-arrow-size, 4px) * -1);
3693
- content: "";
3694
- height: 0;
3695
- left: calc(50% + var(--preview-arrow-offset));
3696
- position: absolute;
3697
- transform: translateX(-50%);
3698
- width: 0;
3699
- z-index: 2;
3700
- }
3701
- .plyr__preview-thumb__image-container {
3702
- background: hsl(216, 15%, 79%);
3703
- border-radius: calc(var(--plyr-menu-radius, 8px) - 1px);
3704
- overflow: hidden;
3705
- position: relative;
3706
- z-index: 0;
3707
- }
3708
- .plyr__preview-thumb__image-container img, .plyr__preview-thumb__image-container::after {
3709
- height: 100%;
3710
- left: 0;
3711
- position: absolute;
3712
- top: 0;
3713
- width: 100%;
3714
- }
3715
- .plyr__preview-thumb__image-container::after {
3716
- border-radius: inherit;
3717
- box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
3718
- content: "";
3719
- pointer-events: none;
3720
- }
3721
- .plyr__preview-thumb__image-container img {
3722
- max-height: none;
3723
- max-width: none;
3724
- }
3725
- .plyr__preview-thumb__time-container {
3726
- background: var(--plyr-video-controls-background, linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75)));
3727
- border-bottom-left-radius: calc(var(--plyr-menu-radius, 8px) - 1px);
3728
- border-bottom-right-radius: calc(var(--plyr-menu-radius, 8px) - 1px);
3729
- bottom: 0;
3730
- left: 0;
3731
- line-height: 1.1;
3732
- padding: 20px 6px 6px;
3733
- position: absolute;
3734
- right: 0;
3735
- z-index: 3;
3736
- }
3737
- .plyr__preview-thumb__time-container span {
3738
- color: #fff;
3739
- font-size: var(--plyr-font-size-time, var(--plyr-font-size-small, 13px));
3740
- }
3741
-
3742
- .plyr__preview-scrubbing {
3743
- bottom: 0;
3744
- filter: blur(1px);
3745
- height: 100%;
3746
- left: 0;
3747
- margin: auto;
3748
- opacity: 0;
3749
- overflow: hidden;
3750
- pointer-events: none;
3751
- position: absolute;
3752
- right: 0;
3753
- top: 0;
3754
- transition: opacity 0.3s ease;
3755
- width: 100%;
3756
- z-index: 1;
3757
- }
3758
- .plyr__preview-scrubbing--is-shown {
3759
- opacity: 1;
3760
- }
3761
- .plyr__preview-scrubbing img {
3762
- height: 100%;
3763
- left: 0;
3764
- max-height: none;
3765
- max-width: none;
3766
- -o-object-fit: contain;
3767
- object-fit: contain;
3768
- position: absolute;
3769
- top: 0;
3770
- width: 100%;
3771
- }
3772
-
3773
- .plyr--no-transition {
3774
- transition: none !important;
3775
- }
3776
-
3777
- .plyr__sr-only {
3778
- clip: rect(1px, 1px, 1px, 1px);
3779
- overflow: hidden;
3780
- border: 0 !important;
3781
- height: 1px !important;
3782
- padding: 0 !important;
3783
- position: absolute !important;
3784
- width: 1px !important;
3785
- }
3786
-
3787
- .plyr [hidden] {
3788
- display: none !important;
3789
- }
3790
-
3791
- :root {
3792
- --plyr-color-main: $default_color_player;
3793
- }
3794
-
3795
- /*# sourceMappingURL=lt-player.css.map*/