UNPKG

15.8 kBCSSView Raw
1@font-face {
2 font-family: 'lg';
3 src: url("../fonts/lg.woff2?io9a6k") format("woff2"), url("../fonts/lg.ttf?io9a6k") format("truetype"), url("../fonts/lg.woff?io9a6k") format("woff"), url("../fonts/lg.svg?io9a6k#lg") format("svg");
4 font-weight: normal;
5 font-style: normal;
6 font-display: block;
7}
8
9.lg-icon {
10 /* use !important to prevent issues with browser extensions that change fonts */
11 font-family: 'lg' !important;
12 speak: never;
13 font-style: normal;
14 font-weight: normal;
15 font-variant: normal;
16 text-transform: none;
17 line-height: 1;
18 /* Better Font Rendering =========== */
19 -webkit-font-smoothing: antialiased;
20 -moz-osx-font-smoothing: grayscale;
21}
22
23.lg-container {
24 font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
25}
26
27.lg-next,
28.lg-prev {
29 background-color: rgba(0, 0, 0, 0.45);
30 border-radius: 2px;
31 color: #999;
32 cursor: pointer;
33 display: block;
34 font-size: 22px;
35 margin-top: -10px;
36 padding: 8px 10px 9px;
37 position: absolute;
38 top: 50%;
39 z-index: 1084;
40 outline: none;
41 border: none;
42}
43
44.lg-next.disabled,
45.lg-prev.disabled {
46 opacity: 0 !important;
47 cursor: default;
48}
49
50.lg-next:hover:not(.disabled),
51.lg-prev:hover:not(.disabled) {
52 color: #fff;
53}
54
55.lg-single-item .lg-next, .lg-single-item
56.lg-prev {
57 display: none;
58}
59
60.lg-next {
61 right: 20px;
62}
63
64.lg-next:before {
65 content: '\e095';
66}
67
68.lg-prev {
69 left: 20px;
70}
71
72.lg-prev:after {
73 content: '\e094';
74}
75
76@-webkit-keyframes lg-right-end {
77 0% {
78 left: 0;
79 }
80 50% {
81 left: -30px;
82 }
83 100% {
84 left: 0;
85 }
86}
87
88@-moz-keyframes lg-right-end {
89 0% {
90 left: 0;
91 }
92 50% {
93 left: -30px;
94 }
95 100% {
96 left: 0;
97 }
98}
99
100@-ms-keyframes lg-right-end {
101 0% {
102 left: 0;
103 }
104 50% {
105 left: -30px;
106 }
107 100% {
108 left: 0;
109 }
110}
111
112@keyframes lg-right-end {
113 0% {
114 left: 0;
115 }
116 50% {
117 left: -30px;
118 }
119 100% {
120 left: 0;
121 }
122}
123
124@-webkit-keyframes lg-left-end {
125 0% {
126 left: 0;
127 }
128 50% {
129 left: 30px;
130 }
131 100% {
132 left: 0;
133 }
134}
135
136@-moz-keyframes lg-left-end {
137 0% {
138 left: 0;
139 }
140 50% {
141 left: 30px;
142 }
143 100% {
144 left: 0;
145 }
146}
147
148@-ms-keyframes lg-left-end {
149 0% {
150 left: 0;
151 }
152 50% {
153 left: 30px;
154 }
155 100% {
156 left: 0;
157 }
158}
159
160@keyframes lg-left-end {
161 0% {
162 left: 0;
163 }
164 50% {
165 left: 30px;
166 }
167 100% {
168 left: 0;
169 }
170}
171
172.lg-outer.lg-right-end .lg-object {
173 -webkit-animation: lg-right-end 0.3s;
174 -o-animation: lg-right-end 0.3s;
175 animation: lg-right-end 0.3s;
176 position: relative;
177}
178
179.lg-outer.lg-left-end .lg-object {
180 -webkit-animation: lg-left-end 0.3s;
181 -o-animation: lg-left-end 0.3s;
182 animation: lg-left-end 0.3s;
183 position: relative;
184}
185
186.lg-toolbar {
187 z-index: 1082;
188 left: 0;
189 position: absolute;
190 top: 0;
191 width: 100%;
192}
193
194.lg-media-overlap .lg-toolbar {
195 background-image: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
196}
197
198.lg-toolbar .lg-icon {
199 color: #999;
200 cursor: pointer;
201 float: right;
202 font-size: 24px;
203 height: 47px;
204 line-height: 27px;
205 padding: 10px 0;
206 text-align: center;
207 width: 50px;
208 text-decoration: none !important;
209 outline: medium none;
210 will-change: color;
211 -webkit-transition: color 0.2s linear;
212 -o-transition: color 0.2s linear;
213 transition: color 0.2s linear;
214 background: none;
215 border: none;
216 box-shadow: none;
217}
218
219.lg-toolbar .lg-icon.lg-icon-18 {
220 font-size: 18px;
221}
222
223.lg-toolbar .lg-icon:hover {
224 color: #fff;
225}
226
227.lg-toolbar .lg-close:after {
228 content: '\e070';
229}
230
231.lg-toolbar .lg-maximize {
232 font-size: 22px;
233}
234
235.lg-toolbar .lg-maximize:after {
236 content: '\e90a';
237}
238
239.lg-toolbar .lg-download:after {
240 content: '\e0f2';
241}
242
243.lg-sub-html {
244 color: #eee;
245 font-size: 16px;
246 padding: 10px 40px;
247 text-align: center;
248 z-index: 1080;
249 opacity: 0;
250 -webkit-transition: opacity 0.2s ease-out 0s;
251 -o-transition: opacity 0.2s ease-out 0s;
252 transition: opacity 0.2s ease-out 0s;
253}
254
255.lg-sub-html h4 {
256 margin: 0;
257 font-size: 13px;
258 font-weight: bold;
259}
260
261.lg-sub-html p {
262 font-size: 12px;
263 margin: 5px 0 0;
264}
265
266.lg-sub-html a {
267 color: inherit;
268}
269
270.lg-sub-html a:hover {
271 text-decoration: underline;
272}
273
274.lg-media-overlap .lg-sub-html {
275 background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
276}
277
278.lg-item .lg-sub-html {
279 position: absolute;
280 bottom: 0;
281 right: 0;
282 left: 0;
283}
284
285.lg-error-msg {
286 font-size: 14px;
287 color: #999;
288}
289
290.lg-counter {
291 color: #999;
292 display: inline-block;
293 font-size: 16px;
294 padding-left: 20px;
295 padding-top: 12px;
296 height: 47px;
297 vertical-align: middle;
298}
299
300.lg-closing .lg-toolbar,
301.lg-closing .lg-prev,
302.lg-closing .lg-next,
303.lg-closing .lg-sub-html {
304 opacity: 0;
305 -webkit-transition: -webkit-transform 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, color 0.08 linear;
306 -moz-transition: -moz-transform 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, color 0.08 linear;
307 -o-transition: -o-transform 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, color 0.08 linear;
308 transition: transform 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, color 0.08 linear;
309}
310
311body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable) .lg-img-wrap,
312body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable) .lg-video-cont {
313 opacity: 0;
314 -moz-transform: scale3d(0.5, 0.5, 0.5);
315 -o-transform: scale3d(0.5, 0.5, 0.5);
316 -ms-transform: scale3d(0.5, 0.5, 0.5);
317 -webkit-transform: scale3d(0.5, 0.5, 0.5);
318 transform: scale3d(0.5, 0.5, 0.5);
319 will-change: transform, opacity;
320 -webkit-transition: -webkit-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
321 -moz-transition: -moz-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
322 -o-transition: -o-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
323 transition: transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
324}
325
326body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable).lg-complete .lg-img-wrap,
327body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable).lg-complete .lg-video-cont {
328 opacity: 1;
329 -moz-transform: scale3d(1, 1, 1);
330 -o-transform: scale3d(1, 1, 1);
331 -ms-transform: scale3d(1, 1, 1);
332 -webkit-transform: scale3d(1, 1, 1);
333 transform: scale3d(1, 1, 1);
334}
335
336.lg-icon:focus-visible {
337 color: #fff;
338 border-radius: 3px;
339 outline: 1px dashed rgba(255, 255, 255, 0.6);
340}
341
342.lg-toolbar .lg-icon:focus-visible {
343 border-radius: 8px;
344 outline-offset: -5px;
345}
346
347.lg-group:after {
348 content: '';
349 display: table;
350 clear: both;
351}
352
353.lg-container {
354 display: none;
355 outline: none;
356}
357
358.lg-container.lg-show {
359 display: block;
360}
361
362.lg-on {
363 scroll-behavior: unset;
364}
365
366.lg-overlay-open {
367 overflow: hidden;
368}
369
370.lg-toolbar,
371.lg-prev,
372.lg-next,
373.lg-pager-outer,
374.lg-hide-sub-html .lg-sub-html {
375 opacity: 0;
376 will-change: transform, opacity;
377 -webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
378 -moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
379 -o-transition: -o-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
380 transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
381}
382
383.lg-show-in .lg-toolbar,
384.lg-show-in .lg-prev,
385.lg-show-in .lg-next,
386.lg-show-in .lg-pager-outer {
387 opacity: 1;
388}
389
390.lg-show-in.lg-hide-sub-html .lg-sub-html {
391 opacity: 1;
392}
393
394.lg-show-in .lg-hide-items .lg-prev {
395 opacity: 0;
396 -webkit-transform: translate3d(-10px, 0, 0);
397 transform: translate3d(-10px, 0, 0);
398}
399
400.lg-show-in .lg-hide-items .lg-next {
401 opacity: 0;
402 -webkit-transform: translate3d(10px, 0, 0);
403 transform: translate3d(10px, 0, 0);
404}
405
406.lg-show-in .lg-hide-items .lg-toolbar {
407 opacity: 0;
408 -webkit-transform: translate3d(0, -10px, 0);
409 transform: translate3d(0, -10px, 0);
410}
411
412.lg-show-in .lg-hide-items.lg-hide-sub-html .lg-sub-html {
413 opacity: 0;
414 -webkit-transform: translate3d(0, 20px, 0);
415 transform: translate3d(0, 20px, 0);
416}
417
418.lg-outer {
419 width: 100%;
420 height: 100%;
421 position: fixed;
422 top: 0;
423 left: 0;
424 z-index: 1050;
425 text-align: left;
426 opacity: 0.001;
427 outline: none;
428 will-change: auto;
429 overflow: hidden;
430 -webkit-transition: opacity 0.15s ease 0s;
431 -o-transition: opacity 0.15s ease 0s;
432 transition: opacity 0.15s ease 0s;
433}
434
435.lg-outer * {
436 -webkit-box-sizing: border-box;
437 -moz-box-sizing: border-box;
438 box-sizing: border-box;
439}
440
441.lg-outer.lg-zoom-from-image {
442 opacity: 1;
443}
444
445.lg-outer.lg-visible {
446 opacity: 1;
447}
448
449.lg-outer.lg-css3 .lg-item:not(.lg-start-end-progress).lg-prev-slide, .lg-outer.lg-css3 .lg-item:not(.lg-start-end-progress).lg-next-slide, .lg-outer.lg-css3 .lg-item:not(.lg-start-end-progress).lg-current {
450 -webkit-transition-duration: inherit !important;
451 transition-duration: inherit !important;
452 -webkit-transition-timing-function: inherit !important;
453 transition-timing-function: inherit !important;
454}
455
456.lg-outer.lg-css3.lg-dragging .lg-item.lg-prev-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-next-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-current {
457 -webkit-transition-duration: 0s !important;
458 transition-duration: 0s !important;
459 opacity: 1;
460}
461
462.lg-outer.lg-grab img.lg-object {
463 cursor: -webkit-grab;
464 cursor: -moz-grab;
465 cursor: -o-grab;
466 cursor: -ms-grab;
467 cursor: grab;
468}
469
470.lg-outer.lg-grabbing img.lg-object {
471 cursor: move;
472 cursor: -webkit-grabbing;
473 cursor: -moz-grabbing;
474 cursor: -o-grabbing;
475 cursor: -ms-grabbing;
476 cursor: grabbing;
477}
478
479.lg-outer .lg-content {
480 position: absolute;
481 top: 0;
482 left: 0;
483 right: 0;
484 bottom: 0;
485}
486
487.lg-outer .lg-inner {
488 width: 100%;
489 position: absolute;
490 left: 0;
491 top: 0;
492 bottom: 0;
493 -webkit-transition: opacity 0s;
494 -o-transition: opacity 0s;
495 transition: opacity 0s;
496 white-space: nowrap;
497}
498
499.lg-outer .lg-item {
500 display: none !important;
501}
502
503.lg-outer .lg-item:not(.lg-start-end-progress) {
504 background: url("../images/loading.gif") no-repeat scroll center center transparent;
505}
506
507.lg-outer.lg-css3 .lg-prev-slide,
508.lg-outer.lg-css3 .lg-current,
509.lg-outer.lg-css3 .lg-next-slide {
510 display: inline-block !important;
511}
512
513.lg-outer.lg-css .lg-current {
514 display: inline-block !important;
515}
516
517.lg-outer .lg-item,
518.lg-outer .lg-img-wrap {
519 display: inline-block;
520 text-align: center;
521 position: absolute;
522 width: 100%;
523 height: 100%;
524}
525
526.lg-outer .lg-item:before,
527.lg-outer .lg-img-wrap:before {
528 content: '';
529 display: inline-block;
530 height: 100%;
531 vertical-align: middle;
532}
533
534.lg-outer .lg-img-wrap {
535 position: absolute;
536 left: 0;
537 right: 0;
538 top: 0;
539 bottom: 0;
540 white-space: nowrap;
541 font-size: 0;
542}
543
544.lg-outer .lg-item.lg-complete {
545 background-image: none;
546}
547
548.lg-outer .lg-item.lg-current {
549 z-index: 1060;
550}
551
552.lg-outer .lg-object {
553 display: inline-block;
554 vertical-align: middle;
555 max-width: 100%;
556 max-height: 100%;
557 width: auto;
558 height: auto;
559 position: relative;
560}
561
562.lg-outer .lg-empty-html.lg-sub-html,
563.lg-outer .lg-empty-html .lg-sub-html {
564 display: none;
565}
566
567.lg-outer.lg-hide-download .lg-download {
568 opacity: 0.75;
569 pointer-events: none;
570}
571
572.lg-outer .lg-first-slide .lg-dummy-img {
573 position: absolute;
574 top: 50%;
575 left: 50%;
576}
577
578.lg-outer.lg-components-open:not(.lg-zoomed) .lg-components {
579 -webkit-transform: translate3d(0, 0%, 0);
580 transform: translate3d(0, 0%, 0);
581 opacity: 1;
582}
583
584.lg-outer.lg-components-open:not(.lg-zoomed) .lg-sub-html {
585 opacity: 1;
586 transition: opacity 0.2s ease-out 0.15s;
587}
588
589.lg-backdrop {
590 position: fixed;
591 top: 0;
592 left: 0;
593 right: 0;
594 bottom: 0;
595 z-index: 1040;
596 background-color: #000;
597 opacity: 0;
598 will-change: auto;
599 -webkit-transition: opacity 333ms ease-in 0s;
600 -o-transition: opacity 333ms ease-in 0s;
601 transition: opacity 333ms ease-in 0s;
602}
603
604.lg-backdrop.in {
605 opacity: 1;
606}
607
608.lg-css3.lg-no-trans .lg-prev-slide,
609.lg-css3.lg-no-trans .lg-next-slide,
610.lg-css3.lg-no-trans .lg-current {
611 -webkit-transition: none 0s ease 0s !important;
612 -moz-transition: none 0s ease 0s !important;
613 -o-transition: none 0s ease 0s !important;
614 transition: none 0s ease 0s !important;
615}
616
617.lg-css3.lg-use-css3 .lg-item {
618 -webkit-backface-visibility: hidden;
619 -moz-backface-visibility: hidden;
620 backface-visibility: hidden;
621}
622
623.lg-css3.lg-fade .lg-item {
624 opacity: 0;
625}
626
627.lg-css3.lg-fade .lg-item.lg-current {
628 opacity: 1;
629}
630
631.lg-css3.lg-fade .lg-item.lg-prev-slide, .lg-css3.lg-fade .lg-item.lg-next-slide, .lg-css3.lg-fade .lg-item.lg-current {
632 -webkit-transition: opacity 0.1s ease 0s;
633 -moz-transition: opacity 0.1s ease 0s;
634 -o-transition: opacity 0.1s ease 0s;
635 transition: opacity 0.1s ease 0s;
636}
637
638.lg-css3.lg-use-css3 .lg-item.lg-start-progress {
639 -webkit-transition: -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
640 -moz-transition: -moz-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
641 -o-transition: -o-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
642 transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
643}
644
645.lg-css3.lg-use-css3 .lg-item.lg-start-end-progress {
646 -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
647 -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
648 -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
649 transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
650}
651
652.lg-css3.lg-slide.lg-use-css3 .lg-item {
653 opacity: 0;
654}
655
656.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide {
657 -webkit-transform: translate3d(-100%, 0, 0);
658 transform: translate3d(-100%, 0, 0);
659}
660
661.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide {
662 -webkit-transform: translate3d(100%, 0, 0);
663 transform: translate3d(100%, 0, 0);
664}
665
666.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current {
667 -webkit-transform: translate3d(0, 0, 0);
668 transform: translate3d(0, 0, 0);
669 opacity: 1;
670}
671
672.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current {
673 -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
674 -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
675 -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
676 transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
677}
678
679.lg-container {
680 display: none;
681}
682
683.lg-container.lg-show {
684 display: block;
685}
686
687.lg-container.lg-dragging-vertical .lg-backdrop {
688 -webkit-transition-duration: 0s !important;
689 transition-duration: 0s !important;
690}
691
692.lg-container.lg-dragging-vertical .lg-css3 .lg-item.lg-current {
693 -webkit-transition-duration: 0s !important;
694 transition-duration: 0s !important;
695 opacity: 1;
696}
697
698.lg-inline .lg-backdrop,
699.lg-inline .lg-outer {
700 position: absolute;
701}
702
703.lg-inline .lg-backdrop {
704 z-index: 1;
705}
706
707.lg-inline .lg-outer {
708 z-index: 2;
709}
710
711.lg-inline .lg-maximize:after {
712 content: '\e909';
713}
714
715.lg-components {
716 -webkit-transform: translate3d(0, 100%, 0);
717 transform: translate3d(0, 100%, 0);
718 will-change: transform;
719 -webkit-transition: -webkit-transform 0.35s ease-out 0s;
720 -moz-transition: -moz-transform 0.35s ease-out 0s;
721 -o-transition: -o-transform 0.35s ease-out 0s;
722 transition: transform 0.35s ease-out 0s;
723 z-index: 1080;
724 position: absolute;
725 bottom: 0;
726 right: 0;
727 left: 0;
728}