flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/skywatched. review movies and tv shows, based on at proto
skywatched.app
37 kB
1347 lines
1@charset "UTF-8";
2@keyframes plyr-progress {
3 to {
4 background-position: 25px 0;
5 background-position: var(--plyr-progress-loading-size, 25px) 0;
6 }
7}
8@keyframes plyr-popup {
9 0% {
10 opacity: 0.5;
11 transform: translateY(10px);
12 }
13 to {
14 opacity: 1;
15 transform: translateY(0);
16 }
17}
18@keyframes plyr-fade-in {
19 0% {
20 opacity: 0;
21 }
22 to {
23 opacity: 1;
24 }
25}
26.plyr {
27 -moz-osx-font-smoothing: grayscale;
28 -webkit-font-smoothing: antialiased;
29 align-items: center;
30 direction: ltr;
31 display: flex;
32 flex-direction: column;
33 font-family: inherit;
34 font-family: var(--plyr-font-family, inherit);
35 font-variant-numeric: tabular-nums;
36 font-weight: 400;
37 font-weight: var(--plyr-font-weight-regular, 400);
38 line-height: 1.7;
39 line-height: var(--plyr-line-height, 1.7);
40 max-width: 100%;
41 min-width: 200px;
42 position: relative;
43 text-shadow: none;
44 transition: box-shadow 0.3s ease;
45 z-index: 0;
46}
47.plyr audio,
48.plyr iframe,
49.plyr video {
50 display: block;
51 height: 100%;
52 width: 100%;
53}
54.plyr button {
55 font: inherit;
56 line-height: inherit;
57 width: auto;
58}
59.plyr:focus {
60 outline: 0;
61}
62.plyr--full-ui {
63 box-sizing: border-box;
64}
65.plyr--full-ui *,
66.plyr--full-ui :after,
67.plyr--full-ui :before {
68 box-sizing: inherit;
69}
70.plyr--full-ui a,
71.plyr--full-ui button,
72.plyr--full-ui input,
73.plyr--full-ui label {
74 touch-action: manipulation;
75}
76.plyr__badge {
77 background: #4a5464;
78 background: var(--plyr-badge-background, #4a5464);
79 border-radius: 2px;
80 border-radius: var(--plyr-badge-border-radius, 2px);
81 color: #fff;
82 color: var(--plyr-badge-text-color, #fff);
83 font-size: 9px;
84 font-size: var(--plyr-font-size-badge, 9px);
85 line-height: 1;
86 padding: 3px 4px;
87}
88.plyr--full-ui ::-webkit-media-text-track-container {
89 display: none;
90}
91.plyr__captions {
92 animation: plyr-fade-in 0.3s ease;
93 bottom: 0;
94 display: none;
95 font-size: 13px;
96 font-size: var(--plyr-font-size-small, 13px);
97 left: 0;
98 padding: 10px;
99 padding: var(--plyr-control-spacing, 10px);
100 position: absolute;
101 text-align: center;
102 transition: transform 0.4s ease-in-out;
103 width: 100%;
104}
105.plyr__captions span:empty {
106 display: none;
107}
108@media (min-width: 480px) {
109 .plyr__captions {
110 font-size: 15px;
111 font-size: var(--plyr-font-size-base, 15px);
112 padding: 20px;
113 padding: calc(var(--plyr-control-spacing, 10px) * 2);
114 }
115}
116@media (min-width: 768px) {
117 .plyr__captions {
118 font-size: 18px;
119 font-size: var(--plyr-font-size-large, 18px);
120 }
121}
122.plyr--captions-active .plyr__captions {
123 display: block;
124}
125.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
126 transform: translateY(-40px);
127 transform: translateY(calc(var(--plyr-control-spacing, 10px) * -4));
128}
129.plyr__caption {
130 background: #000c;
131 background: var(--plyr-captions-background, #000c);
132 border-radius: 2px;
133 -webkit-box-decoration-break: clone;
134 box-decoration-break: clone;
135 color: #fff;
136 color: var(--plyr-captions-text-color, #fff);
137 line-height: 185%;
138 padding: 0.2em 0.5em;
139 white-space: pre-wrap;
140}
141.plyr__caption div {
142 display: inline;
143}
144.plyr__control {
145 background: #0000;
146 border: 0;
147 border-radius: 4px;
148 border-radius: var(--plyr-control-radius, 4px);
149 color: inherit;
150 cursor: pointer;
151 flex-shrink: 0;
152 overflow: visible;
153 padding: 7px;
154 padding: calc(var(--plyr-control-spacing, 10px) * 0.7);
155 position: relative;
156 transition: all 0.3s ease;
157}
158.plyr__control svg {
159 fill: currentColor;
160 display: block;
161 height: 18px;
162 height: var(--plyr-control-icon-size, 18px);
163 pointer-events: none;
164 width: 18px;
165 width: var(--plyr-control-icon-size, 18px);
166}
167.plyr__control:focus {
168 outline: 0;
169}
170.plyr__control:focus-visible {
171 outline: 2px dashed #00b2ff;
172 outline: 2px dashed
173 var(--plyr-focus-visible-color, var(--plyr-color-main, var(--plyr-color-main, #00b2ff)));
174 outline-offset: 2px;
175}
176a.plyr__control {
177 text-decoration: none;
178}
179.plyr__control.plyr__control--pressed .icon--not-pressed,
180.plyr__control.plyr__control--pressed .label--not-pressed,
181.plyr__control:not(.plyr__control--pressed) .icon--pressed,
182.plyr__control:not(.plyr__control--pressed) .label--pressed,
183a.plyr__control:after,
184a.plyr__control:before {
185 display: none;
186}
187.plyr--full-ui ::-webkit-media-controls {
188 display: none;
189}
190.plyr__controls {
191 align-items: center;
192 display: flex;
193 justify-content: flex-end;
194 text-align: center;
195}
196.plyr__controls .plyr__progress__container {
197 flex: 1;
198 min-width: 0;
199}
200.plyr__controls .plyr__controls__item {
201 margin-left: 2.5px;
202 margin-left: calc(var(--plyr-control-spacing, 10px) / 4);
203}
204.plyr__controls .plyr__controls__item:first-child {
205 margin-left: 0;
206 margin-right: auto;
207}
208.plyr__controls .plyr__controls__item.plyr__progress__container {
209 padding-left: 2.5px;
210 padding-left: calc(var(--plyr-control-spacing, 10px) / 4);
211}
212.plyr__controls .plyr__controls__item.plyr__time {
213 padding: 0 5px;
214 padding: 0 calc(var(--plyr-control-spacing, 10px) / 2);
215}
216.plyr__controls .plyr__controls__item.plyr__progress__container:first-child,
217.plyr__controls .plyr__controls__item.plyr__time + .plyr__time,
218.plyr__controls .plyr__controls__item.plyr__time:first-child {
219 padding-left: 0;
220}
221.plyr [data-plyr='airplay'],
222.plyr [data-plyr='captions'],
223.plyr [data-plyr='fullscreen'],
224.plyr [data-plyr='pip'],
225.plyr__controls:empty {
226 display: none;
227}
228.plyr--airplay-supported [data-plyr='airplay'],
229.plyr--captions-enabled [data-plyr='captions'],
230.plyr--fullscreen-enabled [data-plyr='fullscreen'],
231.plyr--pip-supported [data-plyr='pip'] {
232 display: inline-block;
233}
234.plyr__menu {
235 display: flex;
236 position: relative;
237}
238.plyr__menu .plyr__control svg {
239 transition: transform 0.3s ease;
240}
241.plyr__menu .plyr__control[aria-expanded='true'] svg {
242 transform: rotate(90deg);
243}
244.plyr__menu .plyr__control[aria-expanded='true'] .plyr__tooltip {
245 display: none;
246}
247.plyr__menu__container {
248 animation: plyr-popup 0.2s ease;
249 background: #ffffffe6;
250 background: var(--plyr-menu-background, #ffffffe6);
251 border-radius: 8px;
252 border-radius: var(--plyr-menu-radius, 8px);
253 bottom: 100%;
254 box-shadow: 0 1px 2px #00000026;
255 box-shadow: var(--plyr-menu-shadow, 0 1px 2px #00000026);
256 color: #4a5464;
257 color: var(--plyr-menu-color, #4a5464);
258 font-size: 15px;
259 font-size: var(--plyr-font-size-base, 15px);
260 margin-bottom: 10px;
261 position: absolute;
262 right: -3px;
263 text-align: left;
264 white-space: nowrap;
265 z-index: 3;
266}
267.plyr__menu__container > div {
268 overflow: hidden;
269 transition:
270 height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
271 width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
272}
273.plyr__menu__container:after {
274 border: 4px solid #0000;
275 border-top-color: #ffffffe6;
276 border: var(--plyr-menu-arrow-size, 4px) solid #0000;
277 border-top-color: var(--plyr-menu-background, #ffffffe6);
278 content: '';
279 height: 0;
280 position: absolute;
281 right: 14px;
282 right: calc(
283 var(--plyr-control-icon-size, 18px) / 2 + var(--plyr-control-spacing, 10px) * 0.7 -
284 var(--plyr-menu-arrow-size, 4px) / 2
285 );
286 top: 100%;
287 width: 0;
288}
289.plyr__menu__container [role='menu'] {
290 padding: 7px;
291 padding: calc(var(--plyr-control-spacing, 10px) * 0.7);
292}
293.plyr__menu__container [role='menuitem'],
294.plyr__menu__container [role='menuitemradio'] {
295 margin-top: 2px;
296}
297.plyr__menu__container [role='menuitem']:first-child,
298.plyr__menu__container [role='menuitemradio']:first-child {
299 margin-top: 0;
300}
301.plyr__menu__container .plyr__control {
302 align-items: center;
303 color: #4a5464;
304 color: var(--plyr-menu-color, #4a5464);
305 display: flex;
306 font-size: 13px;
307 font-size: var(--plyr-font-size-menu, var(--plyr-font-size-small, 13px));
308 padding: 4.66667px 10.5px;
309 padding: calc(var(--plyr-control-spacing, 10px) * 0.7/1.5)
310 calc(var(--plyr-control-spacing, 10px) * 0.7 * 1.5);
311 -webkit-user-select: none;
312 user-select: none;
313 width: 100%;
314}
315.plyr__menu__container .plyr__control > span {
316 align-items: inherit;
317 display: flex;
318 width: 100%;
319}
320.plyr__menu__container .plyr__control:after {
321 border: 4px solid #0000;
322 border: var(--plyr-menu-item-arrow-size, 4px) solid #0000;
323 content: '';
324 position: absolute;
325 top: 50%;
326 transform: translateY(-50%);
327}
328.plyr__menu__container .plyr__control--forward {
329 padding-right: 28px;
330 padding-right: calc(var(--plyr-control-spacing, 10px) * 0.7 * 4);
331}
332.plyr__menu__container .plyr__control--forward:after {
333 border-left-color: #728197;
334 border-left-color: var(--plyr-menu-arrow-color, #728197);
335 right: 6.5px;
336 right: calc(
337 var(--plyr-control-spacing, 10px) * 0.7 * 1.5 - var(--plyr-menu-item-arrow-size, 4px)
338 );
339}
340.plyr__menu__container .plyr__control--forward:focus-visible:after,
341.plyr__menu__container .plyr__control--forward:hover:after {
342 border-left-color: initial;
343}
344.plyr__menu__container .plyr__control--back {
345 font-weight: 400;
346 font-weight: var(--plyr-font-weight-regular, 400);
347 margin: 7px;
348 margin: calc(var(--plyr-control-spacing, 10px) * 0.7);
349 margin-bottom: 3.5px;
350 margin-bottom: calc(var(--plyr-control-spacing, 10px) * 0.7/2);
351 padding-left: 28px;
352 padding-left: calc(var(--plyr-control-spacing, 10px) * 0.7 * 4);
353 position: relative;
354 width: calc(100% - 14px);
355 width: calc(100% - var(--plyr-control-spacing, 10px) * 0.7 * 2);
356}
357.plyr__menu__container .plyr__control--back:after {
358 border-right-color: #728197;
359 border-right-color: var(--plyr-menu-arrow-color, #728197);
360 left: 6.5px;
361 left: calc(var(--plyr-control-spacing, 10px) * 0.7 * 1.5 - var(--plyr-menu-item-arrow-size, 4px));
362}
363.plyr__menu__container .plyr__control--back:before {
364 background: #dcdfe5;
365 background: var(--plyr-menu-back-border-color, #dcdfe5);
366 box-shadow: 0 1px 0 #fff;
367 box-shadow: 0 1px 0 var(--plyr-menu-back-border-shadow-color, #fff);
368 content: '';
369 height: 1px;
370 left: 0;
371 margin-top: 3.5px;
372 margin-top: calc(var(--plyr-control-spacing, 10px) * 0.7/2);
373 overflow: hidden;
374 position: absolute;
375 right: 0;
376 top: 100%;
377}
378.plyr__menu__container .plyr__control--back:focus-visible:after,
379.plyr__menu__container .plyr__control--back:hover:after {
380 border-right-color: initial;
381}
382.plyr__menu__container .plyr__control[role='menuitemradio'] {
383 padding-left: 7px;
384 padding-left: calc(var(--plyr-control-spacing, 10px) * 0.7);
385}
386.plyr__menu__container .plyr__control[role='menuitemradio']:after,
387.plyr__menu__container .plyr__control[role='menuitemradio']:before {
388 border-radius: 100%;
389}
390.plyr__menu__container .plyr__control[role='menuitemradio']:before {
391 background: #0000001a;
392 content: '';
393 display: block;
394 flex-shrink: 0;
395 height: 16px;
396 margin-right: 10px;
397 margin-right: var(--plyr-control-spacing, 10px);
398 transition: all 0.3s ease;
399 width: 16px;
400}
401.plyr__menu__container .plyr__control[role='menuitemradio']:after {
402 background: #fff;
403 border: 0;
404 height: 6px;
405 left: 12px;
406 opacity: 0;
407 top: 50%;
408 transform: translateY(-50%) scale(0);
409 transition:
410 transform 0.3s ease,
411 opacity 0.3s ease;
412 width: 6px;
413}
414.plyr__menu__container .plyr__control[role='menuitemradio'][aria-checked='true']:before {
415 background: #00b2ff;
416 background: var(
417 --plyr-control-toggle-checked-background,
418 var(--plyr-color-main, var(--plyr-color-main, #00b2ff))
419 );
420}
421.plyr__menu__container .plyr__control[role='menuitemradio'][aria-checked='true']:after {
422 opacity: 1;
423 transform: translateY(-50%) scale(1);
424}
425.plyr__menu__container .plyr__control[role='menuitemradio']:focus-visible:before,
426.plyr__menu__container .plyr__control[role='menuitemradio']:hover:before {
427 background: #23282f1a;
428}
429.plyr__menu__container .plyr__menu__value {
430 align-items: center;
431 display: flex;
432 margin-left: auto;
433 margin-right: -5px;
434 margin-right: calc(var(--plyr-control-spacing, 10px) * 0.7 * -1 - -2px);
435 overflow: hidden;
436 padding-left: 24.5px;
437 padding-left: calc(var(--plyr-control-spacing, 10px) * 0.7 * 3.5);
438 pointer-events: none;
439}
440.plyr--full-ui input[type='range'] {
441 -webkit-appearance: none;
442 appearance: none;
443 background: #0000;
444 border: 0;
445 border-radius: 26px;
446 border-radius: calc(var(--plyr-range-thumb-height, 13px) * 2);
447 color: #00b2ff;
448 color: var(--plyr-range-fill-background, var(--plyr-color-main, var(--plyr-color-main, #00b2ff)));
449 display: block;
450 height: 19px;
451 height: calc(
452 var(--plyr-range-thumb-active-shadow-width, 3px) * 2 + var(--plyr-range-thumb-height, 13px)
453 );
454 margin: 0;
455 min-width: 0;
456 padding: 0;
457 transition: box-shadow 0.3s ease;
458 width: 100%;
459}
460.plyr--full-ui input[type='range']::-webkit-slider-runnable-track {
461 background: #0000;
462 background-image: linear-gradient(90deg, currentColor 0, #0000 0);
463 background-image: linear-gradient(to right, currentColor var(--value, 0), #0000 var(--value, 0));
464 border: 0;
465 border-radius: 2.5px;
466 border-radius: calc(var(--plyr-range-track-height, 5px) / 2);
467 height: 5px;
468 height: var(--plyr-range-track-height, 5px);
469 -webkit-transition: box-shadow 0.3s ease;
470 transition: box-shadow 0.3s ease;
471 -webkit-user-select: none;
472 user-select: none;
473}
474.plyr--full-ui input[type='range']::-webkit-slider-thumb {
475 -webkit-appearance: none;
476 appearance: none;
477 background: #fff;
478 background: var(--plyr-range-thumb-background, #fff);
479 border: 0;
480 border-radius: 100%;
481 box-shadow:
482 0 1px 1px #23282f26,
483 0 0 0 1px #23282f33;
484 box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px #23282f26, 0 0 0 1px #23282f33);
485 height: 13px;
486 height: var(--plyr-range-thumb-height, 13px);
487 margin-top: -4px;
488 margin-top: calc(
489 (var(--plyr-range-thumb-height, 13px) - var(--plyr-range-track-height, 5px)) / 2 * -1
490 );
491 position: relative;
492 -webkit-transition: all 0.2s ease;
493 transition: all 0.2s ease;
494 width: 13px;
495 width: var(--plyr-range-thumb-height, 13px);
496}
497.plyr--full-ui input[type='range']::-moz-range-track {
498 background: #0000;
499 border: 0;
500 border-radius: 2.5px;
501 border-radius: calc(var(--plyr-range-track-height, 5px) / 2);
502 height: 5px;
503 height: var(--plyr-range-track-height, 5px);
504 -moz-transition: box-shadow 0.3s ease;
505 transition: box-shadow 0.3s ease;
506 user-select: none;
507}
508.plyr--full-ui input[type='range']::-moz-range-thumb {
509 background: #fff;
510 background: var(--plyr-range-thumb-background, #fff);
511 border: 0;
512 border-radius: 100%;
513 box-shadow:
514 0 1px 1px #23282f26,
515 0 0 0 1px #23282f33;
516 box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px #23282f26, 0 0 0 1px #23282f33);
517 height: 13px;
518 height: var(--plyr-range-thumb-height, 13px);
519 position: relative;
520 -moz-transition: all 0.2s ease;
521 transition: all 0.2s ease;
522 width: 13px;
523 width: var(--plyr-range-thumb-height, 13px);
524}
525.plyr--full-ui input[type='range']::-moz-range-progress {
526 background: currentColor;
527 border-radius: 2.5px;
528 border-radius: calc(var(--plyr-range-track-height, 5px) / 2);
529 height: 5px;
530 height: var(--plyr-range-track-height, 5px);
531}
532.plyr--full-ui input[type='range']::-ms-track {
533 color: #0000;
534}
535.plyr--full-ui input[type='range']::-ms-fill-upper,
536.plyr--full-ui input[type='range']::-ms-track {
537 background: #0000;
538 border: 0;
539 border-radius: 2.5px;
540 border-radius: calc(var(--plyr-range-track-height, 5px) / 2);
541 height: 5px;
542 height: var(--plyr-range-track-height, 5px);
543 -ms-transition: box-shadow 0.3s ease;
544 transition: box-shadow 0.3s ease;
545 user-select: none;
546}
547.plyr--full-ui input[type='range']::-ms-fill-lower {
548 background: #0000;
549 background: currentColor;
550 border: 0;
551 border-radius: 2.5px;
552 border-radius: calc(var(--plyr-range-track-height, 5px) / 2);
553 height: 5px;
554 height: var(--plyr-range-track-height, 5px);
555 -ms-transition: box-shadow 0.3s ease;
556 transition: box-shadow 0.3s ease;
557 user-select: none;
558}
559.plyr--full-ui input[type='range']::-ms-thumb {
560 background: #fff;
561 background: var(--plyr-range-thumb-background, #fff);
562 border: 0;
563 border-radius: 100%;
564 box-shadow:
565 0 1px 1px #23282f26,
566 0 0 0 1px #23282f33;
567 box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px #23282f26, 0 0 0 1px #23282f33);
568 height: 13px;
569 height: var(--plyr-range-thumb-height, 13px);
570 margin-top: 0;
571 position: relative;
572 -ms-transition: all 0.2s ease;
573 transition: all 0.2s ease;
574 width: 13px;
575 width: var(--plyr-range-thumb-height, 13px);
576}
577.plyr--full-ui input[type='range']::-ms-tooltip {
578 display: none;
579}
580.plyr--full-ui input[type='range']::-moz-focus-outer {
581 border: 0;
582}
583.plyr--full-ui input[type='range']:focus {
584 outline: 0;
585}
586.plyr--full-ui input[type='range']:focus-visible::-webkit-slider-runnable-track {
587 outline: 2px dashed #00b2ff;
588 outline: 2px dashed
589 var(--plyr-focus-visible-color, var(--plyr-color-main, var(--plyr-color-main, #00b2ff)));
590 outline-offset: 2px;
591}
592.plyr--full-ui input[type='range']:focus-visible::-moz-range-track {
593 outline: 2px dashed #00b2ff;
594 outline: 2px dashed
595 var(--plyr-focus-visible-color, var(--plyr-color-main, var(--plyr-color-main, #00b2ff)));
596 outline-offset: 2px;
597}
598.plyr--full-ui input[type='range']:focus-visible::-ms-track {
599 outline: 2px dashed #00b2ff;
600 outline: 2px dashed
601 var(--plyr-focus-visible-color, var(--plyr-color-main, var(--plyr-color-main, #00b2ff)));
602 outline-offset: 2px;
603}
604.plyr__poster {
605 background-color: #000;
606 background-color: var(--plyr-video-background, var(--plyr-video-background, #000));
607 background-position: 50% 50%;
608 background-repeat: no-repeat;
609 background-size: contain;
610 height: 100%;
611 left: 0;
612 opacity: 0;
613 position: absolute;
614 top: 0;
615 transition: opacity 0.2s ease;
616 width: 100%;
617 z-index: 1;
618}
619.plyr--stopped.plyr__poster-enabled .plyr__poster {
620 opacity: 1;
621}
622.plyr--youtube.plyr--paused.plyr__poster-enabled:not(.plyr--stopped) .plyr__poster {
623 display: none;
624}
625.plyr__time {
626 font-size: 13px;
627 font-size: var(--plyr-font-size-time, var(--plyr-font-size-small, 13px));
628}
629.plyr__time + .plyr__time:before {
630 content: '⁄';
631 margin-right: 10px;
632 margin-right: var(--plyr-control-spacing, 10px);
633}
634@media (max-width: 767px) {
635 .plyr__time + .plyr__time {
636 display: none;
637 }
638}
639.plyr__tooltip {
640 background: #fff;
641 background: var(--plyr-tooltip-background, #fff);
642 border-radius: 5px;
643 border-radius: var(--plyr-tooltip-radius, 5px);
644 bottom: 100%;
645 box-shadow: 0 1px 2px #00000026;
646 box-shadow: var(--plyr-tooltip-shadow, 0 1px 2px #00000026);
647 color: #4a5464;
648 color: var(--plyr-tooltip-color, #4a5464);
649 font-size: 13px;
650 font-size: var(--plyr-font-size-small, 13px);
651 font-weight: 400;
652 font-weight: var(--plyr-font-weight-regular, 400);
653 left: 50%;
654 line-height: 1.3;
655 margin-bottom: 10px;
656 margin-bottom: calc(var(--plyr-control-spacing, 10px) / 2 * 2);
657 opacity: 0;
658 padding: 5px 7.5px;
659 padding: calc(var(--plyr-control-spacing, 10px) / 2)
660 calc(var(--plyr-control-spacing, 10px) / 2 * 1.5);
661 pointer-events: none;
662 position: absolute;
663 transform: translate(-50%, 10px) scale(0.8);
664 transform-origin: 50% 100%;
665 transition:
666 transform 0.2s ease 0.1s,
667 opacity 0.2s ease 0.1s;
668 white-space: nowrap;
669 z-index: 2;
670}
671.plyr__tooltip:before {
672 border-left: 4px solid #0000;
673 border-left: var(--plyr-tooltip-arrow-size, 4px) solid #0000;
674 border-right: 4px solid #0000;
675 border-right: var(--plyr-tooltip-arrow-size, 4px) solid #0000;
676 border-top: 4px solid #fff;
677 border-top: var(--plyr-tooltip-arrow-size, 4px) solid var(--plyr-tooltip-background, #fff);
678 bottom: -4px;
679 bottom: calc(var(--plyr-tooltip-arrow-size, 4px) * -1);
680 content: '';
681 height: 0;
682 left: 50%;
683 position: absolute;
684 transform: translateX(-50%);
685 width: 0;
686 z-index: 2;
687}
688.plyr .plyr__control:focus-visible .plyr__tooltip,
689.plyr .plyr__control:hover .plyr__tooltip,
690.plyr__tooltip--visible {
691 opacity: 1;
692 transform: translate(-50%) scale(1);
693}
694.plyr .plyr__control:hover .plyr__tooltip {
695 z-index: 3;
696}
697.plyr__controls > .plyr__control:first-child .plyr__tooltip,
698.plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip {
699 left: 0;
700 transform: translateY(10px) scale(0.8);
701 transform-origin: 0 100%;
702}
703.plyr__controls > .plyr__control:first-child .plyr__tooltip:before,
704.plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip:before {
705 left: 16px;
706 left: calc(var(--plyr-control-icon-size, 18px) / 2 + var(--plyr-control-spacing, 10px) * 0.7);
707}
708.plyr__controls > .plyr__control:last-child .plyr__tooltip {
709 left: auto;
710 right: 0;
711 transform: translateY(10px) scale(0.8);
712 transform-origin: 100% 100%;
713}
714.plyr__controls > .plyr__control:last-child .plyr__tooltip:before {
715 left: auto;
716 right: 16px;
717 right: calc(var(--plyr-control-icon-size, 18px) / 2 + var(--plyr-control-spacing, 10px) * 0.7);
718 transform: translateX(50%);
719}
720.plyr__controls > .plyr__control:first-child .plyr__tooltip--visible,
721.plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip--visible,
722.plyr__controls > .plyr__control:first-child + .plyr__control:focus-visible .plyr__tooltip,
723.plyr__controls > .plyr__control:first-child + .plyr__control:hover .plyr__tooltip,
724.plyr__controls > .plyr__control:first-child:focus-visible .plyr__tooltip,
725.plyr__controls > .plyr__control:first-child:hover .plyr__tooltip,
726.plyr__controls > .plyr__control:last-child .plyr__tooltip--visible,
727.plyr__controls > .plyr__control:last-child:focus-visible .plyr__tooltip,
728.plyr__controls > .plyr__control:last-child:hover .plyr__tooltip {
729 transform: translate(0) scale(1);
730}
731.plyr__progress {
732 left: 6.5px;
733 left: calc(var(--plyr-range-thumb-height, 13px) * 0.5);
734 margin-right: 13px;
735 margin-right: var(--plyr-range-thumb-height, 13px);
736 position: relative;
737}
738.plyr__progress input[type='range'],
739.plyr__progress__buffer {
740 margin-left: -6.5px;
741 margin-left: calc(var(--plyr-range-thumb-height, 13px) * -0.5);
742 margin-right: -6.5px;
743 margin-right: calc(var(--plyr-range-thumb-height, 13px) * -0.5);
744 width: calc(100% + 13px);
745 width: calc(100% + var(--plyr-range-thumb-height, 13px));
746}
747.plyr__progress input[type='range'] {
748 position: relative;
749 z-index: 2;
750}
751.plyr__progress .plyr__tooltip {
752 left: 0;
753 max-width: 120px;
754 overflow-wrap: break-word;
755}
756.plyr__progress__buffer {
757 -webkit-appearance: none;
758 background: #0000;
759 border: 0;
760 border-radius: 100px;
761 height: 5px;
762 height: var(--plyr-range-track-height, 5px);
763 left: 0;
764 margin-top: -2.5px;
765 margin-top: calc((var(--plyr-range-track-height, 5px) / 2) * -1);
766 padding: 0;
767 position: absolute;
768 top: 50%;
769}
770.plyr__progress__buffer::-webkit-progress-bar {
771 background: #0000;
772}
773.plyr__progress__buffer::-webkit-progress-value {
774 background: currentColor;
775 border-radius: 100px;
776 min-width: 5px;
777 min-width: var(--plyr-range-track-height, 5px);
778 -webkit-transition: width 0.2s ease;
779 transition: width 0.2s ease;
780}
781.plyr__progress__buffer::-moz-progress-bar {
782 background: currentColor;
783 border-radius: 100px;
784 min-width: 5px;
785 min-width: var(--plyr-range-track-height, 5px);
786 -moz-transition: width 0.2s ease;
787 transition: width 0.2s ease;
788}
789.plyr__progress__buffer::-ms-fill {
790 border-radius: 100px;
791 -ms-transition: width 0.2s ease;
792 transition: width 0.2s ease;
793}
794.plyr--loading .plyr__progress__buffer {
795 animation: plyr-progress 1s linear infinite;
796 background-image: linear-gradient(
797 -45deg,
798 #23282f99 25%,
799 #0000 0,
800 #0000 50%,
801 #23282f99 0,
802 #23282f99 75%,
803 #0000 0,
804 #0000
805 );
806 background-image: linear-gradient(
807 -45deg,
808 var(--plyr-progress-loading-background, #23282f99) 25%,
809 #0000 25%,
810 #0000 50%,
811 var(--plyr-progress-loading-background, #23282f99) 50%,
812 var(--plyr-progress-loading-background, #23282f99) 75%,
813 #0000 75%,
814 #0000
815 );
816 background-repeat: repeat-x;
817 background-size: 25px 25px;
818 background-size: var(--plyr-progress-loading-size, 25px) var(--plyr-progress-loading-size, 25px);
819 color: #0000;
820}
821.plyr--video.plyr--loading .plyr__progress__buffer {
822 background-color: #ffffff40;
823 background-color: var(--plyr-video-progress-buffered-background, #ffffff40);
824}
825.plyr--audio.plyr--loading .plyr__progress__buffer {
826 background-color: #c1c8d199;
827 background-color: var(--plyr-audio-progress-buffered-background, #c1c8d199);
828}
829.plyr__progress__marker {
830 background-color: #fff;
831 background-color: var(--plyr-progress-marker-background, #fff);
832 border-radius: 1px;
833 height: 5px;
834 height: var(--plyr-range-track-height, 5px);
835 position: absolute;
836 top: 50%;
837 transform: translate(-50%, -50%);
838 width: 3px;
839 width: var(--plyr-progress-marker-width, 3px);
840 z-index: 3;
841}
842.plyr__volume {
843 align-items: center;
844 display: flex;
845 position: relative;
846}
847.plyr__volume input[type='range'] {
848 margin-left: 5px;
849 margin-left: calc(var(--plyr-control-spacing, 10px) / 2);
850 margin-right: 5px;
851 margin-right: calc(var(--plyr-control-spacing, 10px) / 2);
852 max-width: 90px;
853 min-width: 60px;
854 position: relative;
855 z-index: 2;
856}
857.plyr--audio {
858 display: block;
859}
860.plyr--audio .plyr__controls {
861 background: #fff;
862 background: var(--plyr-audio-controls-background, #fff);
863 border-radius: inherit;
864 color: #4a5464;
865 color: var(--plyr-audio-control-color, #4a5464);
866 padding: 10px;
867 padding: var(--plyr-control-spacing, 10px);
868}
869.plyr--audio .plyr__control:focus-visible,
870.plyr--audio .plyr__control:hover,
871.plyr--audio .plyr__control[aria-expanded='true'] {
872 background: #00b2ff;
873 background: var(
874 --plyr-audio-control-background-hover,
875 var(--plyr-color-main, var(--plyr-color-main, #00b2ff))
876 );
877 color: #fff;
878 color: var(--plyr-audio-control-color-hover, #fff);
879}
880.plyr--full-ui.plyr--audio input[type='range']::-webkit-slider-runnable-track {
881 background-color: #c1c8d199;
882 background-color: var(
883 --plyr-audio-range-track-background,
884 var(--plyr-audio-progress-buffered-background, #c1c8d199)
885 );
886}
887.plyr--full-ui.plyr--audio input[type='range']::-moz-range-track {
888 background-color: #c1c8d199;
889 background-color: var(
890 --plyr-audio-range-track-background,
891 var(--plyr-audio-progress-buffered-background, #c1c8d199)
892 );
893}
894.plyr--full-ui.plyr--audio input[type='range']::-ms-track {
895 background-color: #c1c8d199;
896 background-color: var(
897 --plyr-audio-range-track-background,
898 var(--plyr-audio-progress-buffered-background, #c1c8d199)
899 );
900}
901.plyr--full-ui.plyr--audio input[type='range']:active::-webkit-slider-thumb {
902 box-shadow:
903 0 1px 1px #23282f26,
904 0 0 0 1px #23282f33,
905 0 0 0 3px #23282f1a;
906 box-shadow:
907 var(--plyr-range-thumb-shadow, 0 1px 1px #23282f26, 0 0 0 1px #23282f33),
908 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px)
909 var(--plyr-audio-range-thumb-active-shadow-color, #23282f1a);
910}
911.plyr--full-ui.plyr--audio input[type='range']:active::-moz-range-thumb {
912 box-shadow:
913 0 1px 1px #23282f26,
914 0 0 0 1px #23282f33,
915 0 0 0 3px #23282f1a;
916 box-shadow:
917 var(--plyr-range-thumb-shadow, 0 1px 1px #23282f26, 0 0 0 1px #23282f33),
918 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px)
919 var(--plyr-audio-range-thumb-active-shadow-color, #23282f1a);
920}
921.plyr--full-ui.plyr--audio input[type='range']:active::-ms-thumb {
922 box-shadow:
923 0 1px 1px #23282f26,
924 0 0 0 1px #23282f33,
925 0 0 0 3px #23282f1a;
926 box-shadow:
927 var(--plyr-range-thumb-shadow, 0 1px 1px #23282f26, 0 0 0 1px #23282f33),
928 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px)
929 var(--plyr-audio-range-thumb-active-shadow-color, #23282f1a);
930}
931.plyr--audio .plyr__progress__buffer {
932 color: #c1c8d199;
933 color: var(--plyr-audio-progress-buffered-background, #c1c8d199);
934}
935.plyr--video {
936 overflow: hidden;
937}
938.plyr--video.plyr--menu-open {
939 overflow: visible;
940}
941.plyr__video-wrapper {
942 background: #000;
943 background: var(--plyr-video-background, var(--plyr-video-background, #000));
944 border-radius: inherit;
945 height: 100%;
946 margin: auto;
947 overflow: hidden;
948 position: relative;
949 width: 100%;
950}
951.plyr__video-embed,
952.plyr__video-wrapper--fixed-ratio {
953 aspect-ratio: 16/9;
954}
955@supports not (aspect-ratio: 16/9) {
956 .plyr__video-embed,
957 .plyr__video-wrapper--fixed-ratio {
958 height: 0;
959 padding-bottom: 56.25%;
960 position: relative;
961 }
962}
963.plyr__video-embed iframe,
964.plyr__video-wrapper--fixed-ratio video {
965 border: 0;
966 height: 100%;
967 left: 0;
968 position: absolute;
969 top: 0;
970 width: 100%;
971}
972.plyr--full-ui .plyr__video-embed > .plyr__video-embed__container {
973 padding-bottom: 240%;
974 position: relative;
975 transform: translateY(-38.28125%);
976}
977.plyr--video .plyr__controls {
978 background: linear-gradient(#0000, #000000bf);
979 background: var(--plyr-video-controls-background, linear-gradient(#0000, #000000bf));
980 border-bottom-left-radius: inherit;
981 border-bottom-right-radius: inherit;
982 bottom: 0;
983 color: #fff;
984 color: var(--plyr-video-control-color, #fff);
985 left: 0;
986 padding: 5px;
987 padding: calc(var(--plyr-control-spacing, 10px) / 2);
988 padding-top: 20px;
989 padding-top: calc(var(--plyr-control-spacing, 10px) * 2);
990 position: absolute;
991 right: 0;
992 transition:
993 opacity 0.4s ease-in-out,
994 transform 0.4s ease-in-out;
995 z-index: 3;
996}
997@media (min-width: 480px) {
998 .plyr--video .plyr__controls {
999 padding: 10px;
1000 padding: var(--plyr-control-spacing, 10px);
1001 padding-top: 35px;
1002 padding-top: calc(var(--plyr-control-spacing, 10px) * 3.5);
1003 }
1004}
1005.plyr--video.plyr--hide-controls .plyr__controls {
1006 opacity: 0;
1007 pointer-events: none;
1008 transform: translateY(100%);
1009}
1010.plyr--video .plyr__control:focus-visible,
1011.plyr--video .plyr__control:hover,
1012.plyr--video .plyr__control[aria-expanded='true'] {
1013 background: #00b2ff;
1014 background: var(
1015 --plyr-video-control-background-hover,
1016 var(--plyr-color-main, var(--plyr-color-main, #00b2ff))
1017 );
1018 color: #fff;
1019 color: var(--plyr-video-control-color-hover, #fff);
1020}
1021.plyr__control--overlaid {
1022 background: #00b2ff;
1023 background: var(
1024 --plyr-video-control-background-hover,
1025 var(--plyr-color-main, var(--plyr-color-main, #00b2ff))
1026 );
1027 border: 0;
1028 border-radius: 100%;
1029 color: #fff;
1030 color: var(--plyr-video-control-color, #fff);
1031 display: none;
1032 left: 50%;
1033 opacity: 0.9;
1034 padding: 15px;
1035 padding: calc(var(--plyr-control-spacing, 10px) * 1.5);
1036 position: absolute;
1037 top: 50%;
1038 transform: translate(-50%, -50%);
1039 transition: 0.3s;
1040 z-index: 2;
1041}
1042.plyr__control--overlaid svg {
1043 left: 2px;
1044 position: relative;
1045}
1046.plyr__control--overlaid:focus,
1047.plyr__control--overlaid:hover {
1048 opacity: 1;
1049}
1050.plyr--playing .plyr__control--overlaid {
1051 opacity: 0;
1052 visibility: hidden;
1053}
1054.plyr--full-ui.plyr--video .plyr__control--overlaid {
1055 display: block;
1056}
1057.plyr--full-ui.plyr--video input[type='range']::-webkit-slider-runnable-track {
1058 background-color: #ffffff40;
1059 background-color: var(
1060 --plyr-video-range-track-background,
1061 var(--plyr-video-progress-buffered-background, #ffffff40)
1062 );
1063}
1064.plyr--full-ui.plyr--video input[type='range']::-moz-range-track {
1065 background-color: #ffffff40;
1066 background-color: var(
1067 --plyr-video-range-track-background,
1068 var(--plyr-video-progress-buffered-background, #ffffff40)
1069 );
1070}
1071.plyr--full-ui.plyr--video input[type='range']::-ms-track {
1072 background-color: #ffffff40;
1073 background-color: var(
1074 --plyr-video-range-track-background,
1075 var(--plyr-video-progress-buffered-background, #ffffff40)
1076 );
1077}
1078.plyr--full-ui.plyr--video input[type='range']:active::-webkit-slider-thumb {
1079 box-shadow:
1080 0 1px 1px #23282f26,
1081 0 0 0 1px #23282f33,
1082 0 0 0 3px #ffffff80;
1083 box-shadow:
1084 var(--plyr-range-thumb-shadow, 0 1px 1px #23282f26, 0 0 0 1px #23282f33),
1085 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px)
1086 var(--plyr-audio-range-thumb-active-shadow-color, #ffffff80);
1087}
1088.plyr--full-ui.plyr--video input[type='range']:active::-moz-range-thumb {
1089 box-shadow:
1090 0 1px 1px #23282f26,
1091 0 0 0 1px #23282f33,
1092 0 0 0 3px #ffffff80;
1093 box-shadow:
1094 var(--plyr-range-thumb-shadow, 0 1px 1px #23282f26, 0 0 0 1px #23282f33),
1095 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px)
1096 var(--plyr-audio-range-thumb-active-shadow-color, #ffffff80);
1097}
1098.plyr--full-ui.plyr--video input[type='range']:active::-ms-thumb {
1099 box-shadow:
1100 0 1px 1px #23282f26,
1101 0 0 0 1px #23282f33,
1102 0 0 0 3px #ffffff80;
1103 box-shadow:
1104 var(--plyr-range-thumb-shadow, 0 1px 1px #23282f26, 0 0 0 1px #23282f33),
1105 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px)
1106 var(--plyr-audio-range-thumb-active-shadow-color, #ffffff80);
1107}
1108.plyr--video .plyr__progress__buffer {
1109 color: #ffffff40;
1110 color: var(--plyr-video-progress-buffered-background, #ffffff40);
1111}
1112.plyr:fullscreen {
1113 background: #000;
1114 border-radius: 0 !important;
1115 height: 100%;
1116 margin: 0;
1117 width: 100%;
1118}
1119.plyr:fullscreen video {
1120 height: 100%;
1121}
1122.plyr:fullscreen .plyr__control .icon--exit-fullscreen {
1123 display: block;
1124}
1125.plyr:fullscreen .plyr__control .icon--exit-fullscreen + svg {
1126 display: none;
1127}
1128.plyr:fullscreen.plyr--hide-controls {
1129 cursor: none;
1130}
1131@media (min-width: 1024px) {
1132 .plyr:fullscreen .plyr__captions {
1133 font-size: 21px;
1134 font-size: var(--plyr-font-size-xlarge, 21px);
1135 }
1136}
1137.plyr--fullscreen-fallback {
1138 background: #000;
1139 border-radius: 0 !important;
1140 bottom: 0;
1141 height: 100%;
1142 left: 0;
1143 margin: 0;
1144 position: fixed;
1145 right: 0;
1146 top: 0;
1147 width: 100%;
1148 z-index: 10000000;
1149}
1150.plyr--fullscreen-fallback video {
1151 height: 100%;
1152}
1153.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen {
1154 display: block;
1155}
1156.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen + svg {
1157 display: none;
1158}
1159.plyr--fullscreen-fallback.plyr--hide-controls {
1160 cursor: none;
1161}
1162@media (min-width: 1024px) {
1163 .plyr--fullscreen-fallback .plyr__captions {
1164 font-size: 21px;
1165 font-size: var(--plyr-font-size-xlarge, 21px);
1166 }
1167}
1168.plyr__ads {
1169 border-radius: inherit;
1170 bottom: 0;
1171 cursor: pointer;
1172 left: 0;
1173 overflow: hidden;
1174 position: absolute;
1175 right: 0;
1176 top: 0;
1177 z-index: -1;
1178}
1179.plyr__ads > div,
1180.plyr__ads > div iframe {
1181 height: 100%;
1182 position: absolute;
1183 width: 100%;
1184}
1185.plyr__ads:after {
1186 background: #23282f;
1187 border-radius: 2px;
1188 bottom: 10px;
1189 bottom: var(--plyr-control-spacing, 10px);
1190 color: #fff;
1191 content: attr(data-badge-text);
1192 font-size: 11px;
1193 padding: 2px 6px;
1194 pointer-events: none;
1195 position: absolute;
1196 right: 10px;
1197 right: var(--plyr-control-spacing, 10px);
1198 z-index: 3;
1199}
1200.plyr__ads:empty:after {
1201 display: none;
1202}
1203.plyr__cues {
1204 background: currentColor;
1205 display: block;
1206 height: 5px;
1207 height: var(--plyr-range-track-height, 5px);
1208 left: 0;
1209 opacity: 0.8;
1210 position: absolute;
1211 top: 50%;
1212 transform: translateY(-50%);
1213 width: 3px;
1214 z-index: 3;
1215}
1216.plyr__preview-thumb {
1217 background-color: #fff;
1218 background-color: var(--plyr-tooltip-background, #fff);
1219 border-radius: 8px;
1220 border-radius: var(--plyr-menu-radius, 8px);
1221 bottom: 100%;
1222 box-shadow: 0 1px 2px #00000026;
1223 box-shadow: var(--plyr-tooltip-shadow, 0 1px 2px #00000026);
1224 margin-bottom: 10px;
1225 margin-bottom: calc(var(--plyr-control-spacing, 10px) / 2 * 2);
1226 opacity: 0;
1227 padding: 3px;
1228 pointer-events: none;
1229 position: absolute;
1230 transform: translateY(10px) scale(0.8);
1231 transform-origin: 50% 100%;
1232 transition:
1233 transform 0.2s ease 0.1s,
1234 opacity 0.2s ease 0.1s;
1235 z-index: 2;
1236}
1237.plyr__preview-thumb--is-shown {
1238 opacity: 1;
1239 transform: translate(0) scale(1);
1240}
1241.plyr__preview-thumb:before {
1242 border-left: 4px solid #0000;
1243 border-left: var(--plyr-tooltip-arrow-size, 4px) solid #0000;
1244 border-right: 4px solid #0000;
1245 border-right: var(--plyr-tooltip-arrow-size, 4px) solid #0000;
1246 border-top: 4px solid #fff;
1247 border-top: var(--plyr-tooltip-arrow-size, 4px) solid var(--plyr-tooltip-background, #fff);
1248 bottom: -4px;
1249 bottom: calc(var(--plyr-tooltip-arrow-size, 4px) * -1);
1250 content: '';
1251 height: 0;
1252 left: calc(50% + var(--preview-arrow-offset));
1253 position: absolute;
1254 transform: translateX(-50%);
1255 width: 0;
1256 z-index: 2;
1257}
1258.plyr__preview-thumb__image-container {
1259 background: #c1c8d1;
1260 border-radius: 7px;
1261 border-radius: calc(var(--plyr-menu-radius, 8px) - 1px);
1262 overflow: hidden;
1263 position: relative;
1264 z-index: 0;
1265}
1266.plyr__preview-thumb__image-container img,
1267.plyr__preview-thumb__image-container:after {
1268 height: 100%;
1269 left: 0;
1270 position: absolute;
1271 top: 0;
1272 width: 100%;
1273}
1274.plyr__preview-thumb__image-container:after {
1275 border-radius: inherit;
1276 box-shadow: inset 0 0 0 1px #00000026;
1277 content: '';
1278 pointer-events: none;
1279}
1280.plyr__preview-thumb__image-container img {
1281 max-height: none;
1282 max-width: none;
1283}
1284.plyr__preview-thumb__time-container {
1285 background: linear-gradient(#0000, #000000bf);
1286 background: var(--plyr-video-controls-background, linear-gradient(#0000, #000000bf));
1287 border-bottom-left-radius: 7px;
1288 border-bottom-left-radius: calc(var(--plyr-menu-radius, 8px) - 1px);
1289 border-bottom-right-radius: 7px;
1290 border-bottom-right-radius: calc(var(--plyr-menu-radius, 8px) - 1px);
1291 bottom: 0;
1292 left: 0;
1293 line-height: 1.1;
1294 padding: 20px 6px 6px;
1295 position: absolute;
1296 right: 0;
1297 z-index: 3;
1298}
1299.plyr__preview-thumb__time-container span {
1300 color: #fff;
1301 font-size: 13px;
1302 font-size: var(--plyr-font-size-time, var(--plyr-font-size-small, 13px));
1303}
1304.plyr__preview-scrubbing {
1305 bottom: 0;
1306 filter: blur(1px);
1307 height: 100%;
1308 left: 0;
1309 margin: auto;
1310 opacity: 0;
1311 overflow: hidden;
1312 pointer-events: none;
1313 position: absolute;
1314 right: 0;
1315 top: 0;
1316 transition: opacity 0.3s ease;
1317 width: 100%;
1318 z-index: 1;
1319}
1320.plyr__preview-scrubbing--is-shown {
1321 opacity: 1;
1322}
1323.plyr__preview-scrubbing img {
1324 height: 100%;
1325 left: 0;
1326 max-height: none;
1327 max-width: none;
1328 object-fit: contain;
1329 position: absolute;
1330 top: 0;
1331 width: 100%;
1332}
1333.plyr--no-transition {
1334 transition: none !important;
1335}
1336.plyr__sr-only {
1337 clip: rect(1px, 1px, 1px, 1px);
1338 border: 0 !important;
1339 height: 1px !important;
1340 overflow: hidden;
1341 padding: 0 !important;
1342 position: absolute !important;
1343 width: 1px !important;
1344}
1345.plyr [hidden] {
1346 display: none !important;
1347}