Commit | Line | Data |
---|---|---|
6088ac61 AE |
1 | #lbOverlay { |
2 | background-color: #000; | |
3 | bottom: 0; | |
6088ac61 AE |
4 | left: 0; |
5 | position: fixed; | |
6 | right: 0; | |
7 | top: 0; | |
8 | z-index: 399; | |
9 | } | |
10 | ||
11 | #lbPrevLink, | |
12 | #lbNextLink { | |
13 | display: block; | |
14 | overflow: hidden; | |
15 | position: absolute; | |
16 | top: 0; | |
17 | width: 50%; | |
18 | outline: none; | |
9f959ced | 19 | |
6088ac61 AE |
20 | > span { |
21 | background-color: #fff; | |
a1d53e07 | 22 | display: none; |
6088ac61 AE |
23 | padding: @wcfGapSmall; |
24 | position: absolute; | |
6088ac61 AE |
25 | top: 20%; |
26 | } | |
27 | ||
28 | &:hover > span { | |
54efc050 | 29 | .boxShadow(0, 0, @wcfButtonHoverBorderColor, 20px); |
6088ac61 AE |
30 | } |
31 | } | |
32 | ||
33 | #lbPrevLink { | |
34 | left: 0; | |
35 | ||
36 | > span { | |
8ce85e3a | 37 | border-radius: 0 30px 30px 0; |
6088ac61 AE |
38 | left: 0; |
39 | padding-right: @wcfGapMedium; | |
6088ac61 AE |
40 | } |
41 | } | |
42 | ||
43 | #lbNextLink { | |
44 | right: 0; | |
9f959ced | 45 | |
6088ac61 | 46 | > span { |
8ce85e3a | 47 | border-radius: 30px 0 0 30px; |
6088ac61 AE |
48 | padding-left: @wcfGapMedium; |
49 | right: 0; | |
6088ac61 AE |
50 | } |
51 | } | |
52 | ||
53 | #lbEnlarge, | |
54 | #lbCloseLink { | |
55 | cursor: pointer; | |
56 | display: block; | |
57 | float: right; | |
6088ac61 AE |
58 | padding-right: @wcfGapSmall; |
59 | outline: none; | |
60 | } | |
61 | ||
6088ac61 AE |
62 | #lbCenter, #lbBottomContainer { |
63 | background-color: #fff; | |
64 | overflow: hidden; | |
65 | position: absolute; | |
66 | z-index: 400; | |
67 | } | |
68 | ||
341b056c AE |
69 | #lbCenter > .icon-spinner { |
70 | left: 50%; | |
71 | margin: -21px 0 0 -21px; | |
72 | position: absolute; | |
73 | top: 50%; | |
74 | } | |
75 | ||
6088ac61 AE |
76 | .lbLoading { |
77 | background: #fff url(../icon/spinner.svg) no-repeat center; | |
78 | background-size: 48px; | |
79 | } | |
80 | ||
81 | #lbImage { | |
82 | background-repeat: no-repeat; | |
4c51a0e9 | 83 | background-size: cover; |
6088ac61 AE |
84 | border: 10px solid #fff; |
85 | left: 0; | |
86 | position: absolute; | |
87 | top: 0; | |
4c51a0e9 AE |
88 | |
89 | &:hover { | |
90 | #lbNextLink, | |
91 | #lbPrevLink { | |
a1d53e07 MW |
92 | > span { |
93 | display: block; | |
94 | } | |
4c51a0e9 AE |
95 | } |
96 | } | |
6088ac61 AE |
97 | } |
98 | ||
99 | #lbBottom { | |
100 | border: 10px solid #fff; | |
101 | border-top-style: none; | |
102 | color: #666; | |
103 | } | |
104 | ||
105 | #lbCaption, #lbNumber { | |
106 | margin-right: 71px; | |
107 | } | |
108 | ||
109 | #lbCaption { | |
110 | font-weight: bold; | |
111 | } | |
dd5df48e AE |
112 | |
113 | /* ImageViewer for WCF */ | |
114 | @wcfImageViewerBorderColor: rgba(51, 51, 51, 1); | |
8bd36be5 | 115 | @wcfImageViewerFontColor: rgba(211, 211, 211, 1); |
dd5df48e AE |
116 | |
117 | .wcfImageViewer { | |
118 | background-color: rgba(0, 0, 0, 1); | |
119 | bottom: 0; | |
120 | display: none; | |
121 | left: 0; | |
122 | opacity: 0; | |
123 | position: fixed; | |
124 | right: 0; | |
125 | top: 0; | |
126 | z-index: 399; | |
127 | ||
8bd36be5 MW |
128 | .icon { |
129 | color: rgba(102, 102, 102, 1); | |
130 | ||
131 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); | |
132 | } | |
133 | ||
dd5df48e AE |
134 | &.open { |
135 | display: block; | |
136 | opacity: 1; | |
137 | } | |
138 | ||
139 | &.maximized { | |
140 | > header { | |
141 | top: -100px; | |
142 | } | |
143 | ||
144 | > div { | |
145 | bottom: 0; | |
146 | border-color: fade(@wcfImageViewerBorderColor, 0%); | |
147 | top: 0; | |
148 | } | |
149 | ||
150 | > footer { | |
151 | bottom: -100px; | |
152 | } | |
153 | } | |
154 | ||
155 | > header, | |
156 | > div, | |
157 | > footer { | |
158 | box-sizing: border-box; | |
8bd36be5 | 159 | -moz-box-sizing: border-box; |
dd5df48e AE |
160 | left: 0; |
161 | position: fixed; | |
162 | right: 0; | |
163 | z-index: 400; | |
164 | } | |
165 | ||
166 | > header { | |
167 | height: 100px; | |
168 | padding: 1rem; | |
169 | top: 0; | |
170 | ||
8bd36be5 | 171 | .transition(top, .3s); |
dd5df48e AE |
172 | |
173 | > div { | |
174 | > h1, | |
175 | > h2, | |
176 | > h3 { | |
177 | color: @wcfImageViewerFontColor; | |
178 | margin-left: 80px !important; | |
8bd36be5 MW |
179 | |
180 | > a { | |
181 | color: @wcfImageViewerFontColor; | |
182 | } | |
dd5df48e AE |
183 | } |
184 | ||
185 | > h1 { | |
186 | font-size: 1.75rem; | |
187 | } | |
188 | ||
189 | > h2 { | |
190 | font-size: 1.25rem; | |
191 | } | |
192 | ||
193 | > h3 { | |
8bd36be5 | 194 | color: @wcfImageViewerFontColor; |
dd5df48e AE |
195 | font-size: .85rem; |
196 | margin-top: .25rem; | |
197 | } | |
feffd97d AE |
198 | |
199 | > a > img { | |
200 | height: 64px; | |
201 | width: 64px; | |
202 | } | |
dd5df48e AE |
203 | } |
204 | ||
205 | > .wcfImageViewerButtonClose { | |
206 | opacity: .6; | |
207 | position: absolute; | |
208 | right: 26px; | |
209 | top: 26px; | |
210 | ||
8bd36be5 | 211 | .transition(opacity, .3s); |
dd5df48e AE |
212 | |
213 | &:hover { | |
214 | opacity: 1; | |
215 | } | |
216 | } | |
217 | } | |
218 | ||
219 | > div { | |
220 | background-color: rgba(0, 0, 0, 1); | |
221 | border-bottom: 1px solid @wcfImageViewerBorderColor; | |
222 | border-top: 1px solid @wcfImageViewerBorderColor; | |
223 | bottom: 100px; | |
224 | top: 100px; | |
225 | z-index: 401; | |
226 | ||
8bd36be5 | 227 | .transition(~"top, bottom, border-color", .3s); |
dd5df48e | 228 | |
ff34ee1f AE |
229 | &.loading:before { |
230 | content: @spinner; | |
231 | margin: -24px 0 0 -24px; | |
232 | left: 50%; | |
233 | position: absolute; | |
234 | top: 50%; | |
235 | ||
e5ebf582 AE |
236 | color: @wcfColor; |
237 | display: inline-block; | |
238 | font-family: FontAwesome; | |
239 | font-weight: normal !important; | |
240 | font-style: normal !important; | |
241 | line-height: 1em; | |
242 | text-align: center; | |
243 | ||
244 | -webkit-user-select: none; | |
245 | -moz-user-select: none; | |
246 | -ms-user-select: none; | |
247 | ||
248 | .textShadow(@wcfContentBackgroundColor); | |
249 | ||
ff34ee1f AE |
250 | .icon; |
251 | .icon48; | |
252 | .icon-spinner; | |
253 | } | |
254 | ||
dd5df48e AE |
255 | > img { |
256 | opacity: 0; | |
257 | position: absolute; | |
258 | top: 50%; | |
259 | ||
8bd36be5 | 260 | .transition(opacity, .75s); |
dd5df48e AE |
261 | |
262 | &.animateTransformation { | |
8bd36be5 | 263 | transition: left .3s, margin-top .3s, height .3s, width .3s, opacity .75s; |
dd5df48e AE |
264 | -webkit-transition: left .3s, margin-top .3s, height .3s, width .3s, opacity .75s; |
265 | } | |
266 | ||
267 | &.active { | |
268 | opacity: 1; | |
269 | } | |
270 | } | |
271 | ||
272 | > ul { | |
273 | background-color: rgba(0, 0, 0, 1); | |
274 | border: 1px solid @wcfImageViewerBorderColor; | |
275 | border-bottom-width: 0; | |
276 | border-radius: 5px 5px 0 0; | |
277 | bottom: 0; | |
278 | display: inline-block; | |
279 | left: 50%; | |
280 | margin-left: -122px; | |
281 | opacity: .4; | |
282 | position: absolute; | |
283 | ||
8bd36be5 | 284 | .transition(opacity, .5s); |
dd5df48e AE |
285 | |
286 | &:hover { | |
287 | opacity: 1; | |
288 | } | |
289 | ||
290 | > li { | |
291 | display: inline-block; | |
292 | opacity: .6; | |
293 | ||
8bd36be5 | 294 | .transition(opacity, .5s); |
dd5df48e AE |
295 | |
296 | &.pointer > span.icon { | |
297 | cursor: pointer; | |
298 | } | |
299 | ||
300 | &.active, | |
301 | &.pointer:hover { | |
302 | opacity: 1; | |
303 | } | |
304 | ||
305 | &.wcfImageViewerSlideshowButtonToggle > span, | |
306 | &.wcfImageViewerSlideshowButtonEnlarge > span, | |
307 | &.wcfImageViewerSlideshowButtonFull > span { | |
308 | font-size: 28px; | |
309 | ||
310 | &:before { | |
311 | left: 2px; | |
312 | position: relative; | |
313 | top: 9px; | |
314 | } | |
315 | } | |
316 | ||
11f8b89c AE |
317 | &.wcfImageViewerSlideshowButtonEnlarge, |
318 | &.wcfImageViewerSlideshowButtonFull { | |
dd5df48e AE |
319 | border-left: 1px solid @wcfImageViewerBorderColor; |
320 | box-sizing: border-box; | |
321 | } | |
322 | ||
323 | > span { | |
324 | vertical-align: middle; | |
325 | } | |
326 | } | |
327 | } | |
328 | } | |
329 | ||
330 | > footer { | |
331 | bottom: 0; | |
332 | height: 100px; | |
333 | padding: 10px; | |
334 | ||
8bd36be5 | 335 | .transition(bottom, .3s); |
dd5df48e | 336 | |
ff34ee1f | 337 | &:hover > div > ul > li > img { |
dd5df48e AE |
338 | filter: none; |
339 | -webkit-filter: none; | |
340 | } | |
341 | ||
342 | > span { | |
343 | bottom: 0; | |
344 | font-size: 48px; | |
345 | padding-top: 26px; | |
346 | opacity: 0; | |
347 | position: absolute; | |
348 | top: 0; | |
349 | width: 30px; | |
350 | z-index: 2; | |
351 | ||
8bd36be5 | 352 | .transition(opacity, .5s); |
dd5df48e AE |
353 | |
354 | &.pointer { | |
355 | opacity: .6; | |
356 | ||
357 | &:hover { | |
358 | opacity: 1; | |
359 | } | |
360 | } | |
361 | ||
362 | &.wcfImageViewerButtonPrevious { | |
363 | left: 5px; | |
364 | } | |
365 | ||
366 | &.wcfImageViewerButtonNext { | |
367 | right: 5px; | |
368 | } | |
369 | } | |
370 | ||
371 | > div { | |
372 | height: 80px; | |
373 | margin: 0 35px; | |
374 | overflow: hidden; | |
375 | white-space: nowrap; | |
376 | ||
377 | > ul { | |
378 | font-size: 0; | |
379 | height: 80px; | |
380 | z-index: 1; | |
381 | ||
382 | transition: margin-left cubic-bezier(.5, 1.595, .56, .98) .75s; | |
8bd36be5 | 383 | -webkit-transition: margin-left cubic-bezier(.5, 1.595, .56, .98) .75s; |
dd5df48e AE |
384 | |
385 | > li { | |
386 | display: inline-block; | |
ff34ee1f | 387 | height: 80px; |
dd5df48e | 388 | opacity: .6; |
ff34ee1f AE |
389 | position: relative; |
390 | width: 80px; | |
dd5df48e | 391 | |
8bd36be5 | 392 | .transition(opacity, .5s); |
dd5df48e AE |
393 | |
394 | &.active, | |
ff34ee1f | 395 | &:hover { |
dd5df48e AE |
396 | opacity: 1; |
397 | } | |
398 | ||
399 | &:not(:last-child) { | |
400 | margin-right: 10px; | |
401 | } | |
402 | ||
ff34ee1f | 403 | &.active > img { |
dd5df48e AE |
404 | filter: none; |
405 | -webkit-filter: none; | |
406 | } | |
407 | ||
ff34ee1f AE |
408 | &.loading{ |
409 | &:before { | |
410 | content: @spinner; | |
411 | margin: -16px 0 0 -16px; | |
412 | left: 50%; | |
413 | position: absolute; | |
414 | top: 50%; | |
415 | z-index: -1; | |
416 | ||
417 | .icon; | |
418 | .icon32; | |
419 | .icon-spinner; | |
420 | } | |
421 | ||
422 | > img { | |
423 | opacity: 0; | |
424 | } | |
425 | } | |
426 | ||
427 | > img { | |
dd5df48e | 428 | height: 80px; |
ff34ee1f | 429 | opacity: 1; |
dd5df48e AE |
430 | width: 80px; |
431 | ||
432 | .grayscale; | |
8bd36be5 | 433 | transition: filter .5s, opacity 1s; |
ff34ee1f | 434 | -webkit-transition: -webkit-filter .5s, opacity 1s; |
dd5df48e AE |
435 | } |
436 | } | |
437 | } | |
438 | } | |
439 | } | |
440 | } |