UNPKG

8.94 kBCSSView Raw
1.lg-group:after {
2 content: '';
3 display: table;
4 clear: both;
5}
6
7.lg-container {
8 display: none;
9 outline: none;
10}
11
12.lg-container.lg-show {
13 display: block;
14}
15
16.lg-on {
17 scroll-behavior: unset;
18}
19
20.lg-overlay-open {
21 overflow: hidden;
22}
23
24.lg-toolbar,
25.lg-prev,
26.lg-next,
27.lg-pager-outer,
28.lg-hide-sub-html .lg-sub-html {
29 opacity: 0;
30 will-change: transform, opacity;
31 -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;
32 -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;
33 -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;
34 transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
35}
36
37.lg-show-in .lg-toolbar,
38.lg-show-in .lg-prev,
39.lg-show-in .lg-next,
40.lg-show-in .lg-pager-outer {
41 opacity: 1;
42}
43
44.lg-show-in.lg-hide-sub-html .lg-sub-html {
45 opacity: 1;
46}
47
48.lg-show-in .lg-hide-items .lg-prev {
49 opacity: 0;
50 -webkit-transform: translate3d(-10px, 0, 0);
51 transform: translate3d(-10px, 0, 0);
52}
53
54.lg-show-in .lg-hide-items .lg-next {
55 opacity: 0;
56 -webkit-transform: translate3d(10px, 0, 0);
57 transform: translate3d(10px, 0, 0);
58}
59
60.lg-show-in .lg-hide-items .lg-toolbar {
61 opacity: 0;
62 -webkit-transform: translate3d(0, -10px, 0);
63 transform: translate3d(0, -10px, 0);
64}
65
66.lg-show-in .lg-hide-items.lg-hide-sub-html .lg-sub-html {
67 opacity: 0;
68 -webkit-transform: translate3d(0, 20px, 0);
69 transform: translate3d(0, 20px, 0);
70}
71
72.lg-outer {
73 width: 100%;
74 height: 100%;
75 position: fixed;
76 top: 0;
77 left: 0;
78 z-index: 1050;
79 text-align: left;
80 opacity: 0.001;
81 outline: none;
82 will-change: auto;
83 overflow: hidden;
84 -webkit-transition: opacity 0.15s ease 0s;
85 -o-transition: opacity 0.15s ease 0s;
86 transition: opacity 0.15s ease 0s;
87}
88
89.lg-outer * {
90 -webkit-box-sizing: border-box;
91 -moz-box-sizing: border-box;
92 box-sizing: border-box;
93}
94
95.lg-outer.lg-zoom-from-image {
96 opacity: 1;
97}
98
99.lg-outer.lg-visible {
100 opacity: 1;
101}
102
103.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 {
104 -webkit-transition-duration: inherit !important;
105 transition-duration: inherit !important;
106 -webkit-transition-timing-function: inherit !important;
107 transition-timing-function: inherit !important;
108}
109
110.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 {
111 -webkit-transition-duration: 0s !important;
112 transition-duration: 0s !important;
113 opacity: 1;
114}
115
116.lg-outer.lg-grab img.lg-object {
117 cursor: -webkit-grab;
118 cursor: -moz-grab;
119 cursor: -o-grab;
120 cursor: -ms-grab;
121 cursor: grab;
122}
123
124.lg-outer.lg-grabbing img.lg-object {
125 cursor: move;
126 cursor: -webkit-grabbing;
127 cursor: -moz-grabbing;
128 cursor: -o-grabbing;
129 cursor: -ms-grabbing;
130 cursor: grabbing;
131}
132
133.lg-outer .lg-content {
134 position: absolute;
135 top: 0;
136 left: 0;
137 right: 0;
138 bottom: 0;
139}
140
141.lg-outer .lg-inner {
142 width: 100%;
143 position: absolute;
144 left: 0;
145 top: 0;
146 bottom: 0;
147 -webkit-transition: opacity 0s;
148 -o-transition: opacity 0s;
149 transition: opacity 0s;
150 white-space: nowrap;
151}
152
153.lg-outer .lg-item {
154 display: none !important;
155}
156
157.lg-outer .lg-item:not(.lg-start-end-progress) {
158 background: url("../images/loading.gif") no-repeat scroll center center transparent;
159}
160
161.lg-outer.lg-css3 .lg-prev-slide,
162.lg-outer.lg-css3 .lg-current,
163.lg-outer.lg-css3 .lg-next-slide {
164 display: inline-block !important;
165}
166
167.lg-outer.lg-css .lg-current {
168 display: inline-block !important;
169}
170
171.lg-outer .lg-item,
172.lg-outer .lg-img-wrap {
173 display: inline-block;
174 text-align: center;
175 position: absolute;
176 width: 100%;
177 height: 100%;
178}
179
180.lg-outer .lg-item:before,
181.lg-outer .lg-img-wrap:before {
182 content: '';
183 display: inline-block;
184 height: 100%;
185 vertical-align: middle;
186}
187
188.lg-outer .lg-img-wrap {
189 position: absolute;
190 left: 0;
191 right: 0;
192 top: 0;
193 bottom: 0;
194 white-space: nowrap;
195 font-size: 0;
196}
197
198.lg-outer .lg-item.lg-complete {
199 background-image: none;
200}
201
202.lg-outer .lg-item.lg-current {
203 z-index: 1060;
204}
205
206.lg-outer .lg-object {
207 display: inline-block;
208 vertical-align: middle;
209 max-width: 100%;
210 max-height: 100%;
211 width: auto;
212 height: auto;
213 position: relative;
214}
215
216.lg-outer .lg-empty-html.lg-sub-html,
217.lg-outer .lg-empty-html .lg-sub-html {
218 display: none;
219}
220
221.lg-outer.lg-hide-download .lg-download {
222 opacity: 0.75;
223 pointer-events: none;
224}
225
226.lg-outer .lg-first-slide .lg-dummy-img {
227 position: absolute;
228 top: 50%;
229 left: 50%;
230}
231
232.lg-outer.lg-components-open:not(.lg-zoomed) .lg-components {
233 -webkit-transform: translate3d(0, 0%, 0);
234 transform: translate3d(0, 0%, 0);
235 opacity: 1;
236}
237
238.lg-outer.lg-components-open:not(.lg-zoomed) .lg-sub-html {
239 opacity: 1;
240 transition: opacity 0.2s ease-out 0.15s;
241}
242
243.lg-backdrop {
244 position: fixed;
245 top: 0;
246 left: 0;
247 right: 0;
248 bottom: 0;
249 z-index: 1040;
250 background-color: #000;
251 opacity: 0;
252 will-change: auto;
253 -webkit-transition: opacity 333ms ease-in 0s;
254 -o-transition: opacity 333ms ease-in 0s;
255 transition: opacity 333ms ease-in 0s;
256}
257
258.lg-backdrop.in {
259 opacity: 1;
260}
261
262.lg-css3.lg-no-trans .lg-prev-slide,
263.lg-css3.lg-no-trans .lg-next-slide,
264.lg-css3.lg-no-trans .lg-current {
265 -webkit-transition: none 0s ease 0s !important;
266 -moz-transition: none 0s ease 0s !important;
267 -o-transition: none 0s ease 0s !important;
268 transition: none 0s ease 0s !important;
269}
270
271.lg-css3.lg-use-css3 .lg-item {
272 -webkit-backface-visibility: hidden;
273 -moz-backface-visibility: hidden;
274 backface-visibility: hidden;
275}
276
277.lg-css3.lg-fade .lg-item {
278 opacity: 0;
279}
280
281.lg-css3.lg-fade .lg-item.lg-current {
282 opacity: 1;
283}
284
285.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 {
286 -webkit-transition: opacity 0.1s ease 0s;
287 -moz-transition: opacity 0.1s ease 0s;
288 -o-transition: opacity 0.1s ease 0s;
289 transition: opacity 0.1s ease 0s;
290}
291
292.lg-css3.lg-use-css3 .lg-item.lg-start-progress {
293 -webkit-transition: -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
294 -moz-transition: -moz-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
295 -o-transition: -o-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
296 transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
297}
298
299.lg-css3.lg-use-css3 .lg-item.lg-start-end-progress {
300 -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
301 -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
302 -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
303 transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
304}
305
306.lg-css3.lg-slide.lg-use-css3 .lg-item {
307 opacity: 0;
308}
309
310.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide {
311 -webkit-transform: translate3d(-100%, 0, 0);
312 transform: translate3d(-100%, 0, 0);
313}
314
315.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide {
316 -webkit-transform: translate3d(100%, 0, 0);
317 transform: translate3d(100%, 0, 0);
318}
319
320.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current {
321 -webkit-transform: translate3d(0, 0, 0);
322 transform: translate3d(0, 0, 0);
323 opacity: 1;
324}
325
326.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 {
327 -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
328 -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
329 -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
330 transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
331}
332
333.lg-container {
334 display: none;
335}
336
337.lg-container.lg-show {
338 display: block;
339}
340
341.lg-container.lg-dragging-vertical .lg-backdrop {
342 -webkit-transition-duration: 0s !important;
343 transition-duration: 0s !important;
344}
345
346.lg-container.lg-dragging-vertical .lg-css3 .lg-item.lg-current {
347 -webkit-transition-duration: 0s !important;
348 transition-duration: 0s !important;
349 opacity: 1;
350}
351
352.lg-inline .lg-backdrop,
353.lg-inline .lg-outer {
354 position: absolute;
355}
356
357.lg-inline .lg-backdrop {
358 z-index: 1;
359}
360
361.lg-inline .lg-outer {
362 z-index: 2;
363}
364
365.lg-inline .lg-maximize:after {
366 content: '\e909';
367}
368
369.lg-components {
370 -webkit-transform: translate3d(0, 100%, 0);
371 transform: translate3d(0, 100%, 0);
372 will-change: transform;
373 -webkit-transition: -webkit-transform 0.35s ease-out 0s;
374 -moz-transition: -moz-transform 0.35s ease-out 0s;
375 -o-transition: -o-transform 0.35s ease-out 0s;
376 transition: transform 0.35s ease-out 0s;
377 z-index: 1080;
378 position: absolute;
379 bottom: 0;
380 right: 0;
381 left: 0;
382}