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); | |
115 | @wcfImageViewerFontColor: rgba(192, 192, 192, 1); | |
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 | ||
128 | &.open { | |
129 | display: block; | |
130 | opacity: 1; | |
131 | } | |
132 | ||
133 | &.maximized { | |
134 | > header { | |
135 | top: -100px; | |
136 | } | |
137 | ||
138 | > div { | |
139 | bottom: 0; | |
140 | border-color: fade(@wcfImageViewerBorderColor, 0%); | |
141 | top: 0; | |
142 | } | |
143 | ||
144 | > footer { | |
145 | bottom: -100px; | |
146 | } | |
147 | } | |
148 | ||
149 | > header, | |
150 | > div, | |
151 | > footer { | |
152 | box-sizing: border-box; | |
153 | left: 0; | |
154 | position: fixed; | |
155 | right: 0; | |
156 | z-index: 400; | |
157 | } | |
158 | ||
159 | > header { | |
160 | height: 100px; | |
161 | padding: 1rem; | |
162 | top: 0; | |
163 | ||
164 | transition: top linear .3s; | |
165 | ||
166 | > div { | |
167 | > h1, | |
168 | > h2, | |
169 | > h3 { | |
170 | color: @wcfImageViewerFontColor; | |
171 | margin-left: 80px !important; | |
172 | } | |
173 | ||
174 | > h1 { | |
175 | font-size: 1.75rem; | |
176 | } | |
177 | ||
178 | > h2 { | |
179 | font-size: 1.25rem; | |
180 | } | |
181 | ||
182 | > h3 { | |
183 | color: rgba(153, 153, 153, 1); | |
184 | font-size: .85rem; | |
185 | margin-top: .25rem; | |
186 | } | |
187 | } | |
188 | ||
189 | > .wcfImageViewerButtonClose { | |
190 | opacity: .6; | |
191 | position: absolute; | |
192 | right: 26px; | |
193 | top: 26px; | |
194 | ||
195 | transition: opacity linear .3s; | |
196 | ||
197 | &:hover { | |
198 | opacity: 1; | |
199 | } | |
200 | } | |
201 | } | |
202 | ||
203 | > div { | |
204 | background-color: rgba(0, 0, 0, 1); | |
205 | border-bottom: 1px solid @wcfImageViewerBorderColor; | |
206 | border-top: 1px solid @wcfImageViewerBorderColor; | |
207 | bottom: 100px; | |
208 | top: 100px; | |
209 | z-index: 401; | |
210 | ||
211 | -webkit-transition: top .3s, bottom .3s, border-color .3s; | |
212 | ||
213 | > img { | |
214 | opacity: 0; | |
215 | position: absolute; | |
216 | top: 50%; | |
217 | ||
218 | transition: opacity linear .75s; | |
219 | ||
220 | &.animateTransformation { | |
221 | -webkit-transition: left .3s, margin-top .3s, height .3s, width .3s, opacity .75s; | |
222 | } | |
223 | ||
224 | &.active { | |
225 | opacity: 1; | |
226 | } | |
227 | } | |
228 | ||
229 | > ul { | |
230 | background-color: rgba(0, 0, 0, 1); | |
231 | border: 1px solid @wcfImageViewerBorderColor; | |
232 | border-bottom-width: 0; | |
233 | border-radius: 5px 5px 0 0; | |
234 | bottom: 0; | |
235 | display: inline-block; | |
236 | left: 50%; | |
237 | margin-left: -122px; | |
238 | opacity: .4; | |
239 | position: absolute; | |
240 | ||
241 | transition: opacity linear .5s; | |
242 | ||
243 | &:hover { | |
244 | opacity: 1; | |
245 | } | |
246 | ||
247 | > li { | |
248 | display: inline-block; | |
249 | opacity: .6; | |
250 | ||
251 | transition: opacity linear .5s; | |
252 | ||
253 | &.pointer > span.icon { | |
254 | cursor: pointer; | |
255 | } | |
256 | ||
257 | &.active, | |
258 | &.pointer:hover { | |
259 | opacity: 1; | |
260 | } | |
261 | ||
262 | &.wcfImageViewerSlideshowButtonToggle > span, | |
263 | &.wcfImageViewerSlideshowButtonEnlarge > span, | |
264 | &.wcfImageViewerSlideshowButtonFull > span { | |
265 | font-size: 28px; | |
266 | ||
267 | &:before { | |
268 | left: 2px; | |
269 | position: relative; | |
270 | top: 9px; | |
271 | } | |
272 | } | |
273 | ||
274 | .wcfImageViewerSlideshowButtonEnlarge, | |
275 | .wcfImageViewerSlideshowButtonFull { | |
276 | border-left: 1px solid @wcfImageViewerBorderColor; | |
277 | box-sizing: border-box; | |
278 | } | |
279 | ||
280 | > span { | |
281 | vertical-align: middle; | |
282 | } | |
283 | } | |
284 | } | |
285 | } | |
286 | ||
287 | > footer { | |
288 | bottom: 0; | |
289 | height: 100px; | |
290 | padding: 10px; | |
291 | ||
292 | transition: bottom linear .3s; | |
293 | ||
294 | &:hover > div > ul > li > a { | |
295 | filter: none; | |
296 | -webkit-filter: none; | |
297 | } | |
298 | ||
299 | > span { | |
300 | bottom: 0; | |
301 | font-size: 48px; | |
302 | padding-top: 26px; | |
303 | opacity: 0; | |
304 | position: absolute; | |
305 | top: 0; | |
306 | width: 30px; | |
307 | z-index: 2; | |
308 | ||
309 | transition: opacity linear .5s; | |
310 | ||
311 | &.pointer { | |
312 | opacity: .6; | |
313 | ||
314 | &:hover { | |
315 | opacity: 1; | |
316 | } | |
317 | } | |
318 | ||
319 | &.wcfImageViewerButtonPrevious { | |
320 | left: 5px; | |
321 | } | |
322 | ||
323 | &.wcfImageViewerButtonNext { | |
324 | right: 5px; | |
325 | } | |
326 | } | |
327 | ||
328 | > div { | |
329 | height: 80px; | |
330 | margin: 0 35px; | |
331 | overflow: hidden; | |
332 | white-space: nowrap; | |
333 | ||
334 | > ul { | |
335 | font-size: 0; | |
336 | height: 80px; | |
337 | z-index: 1; | |
338 | ||
339 | transition: margin-left cubic-bezier(.5, 1.595, .56, .98) .75s; | |
340 | ||
341 | > li { | |
342 | display: inline-block; | |
343 | opacity: .6; | |
344 | ||
345 | transition: opacity linear .5s; | |
346 | ||
347 | &.active, | |
348 | &.hover { | |
349 | opacity: 1; | |
350 | } | |
351 | ||
352 | &:not(:last-child) { | |
353 | margin-right: 10px; | |
354 | } | |
355 | ||
356 | &.active > a { | |
357 | filter: none; | |
358 | -webkit-filter: none; | |
359 | } | |
360 | ||
361 | > a { | |
362 | background-position: center; | |
363 | background-repeat: no-repeat; | |
364 | background-size: contain; | |
365 | display: block; | |
366 | height: 80px; | |
367 | width: 80px; | |
368 | ||
369 | .grayscale; | |
370 | -webkit-filter: grayscale(100%); | |
371 | -webkit-transition: filter,-webkit-filter .5s linear; | |
372 | } | |
373 | } | |
374 | } | |
375 | } | |
376 | } | |
377 | } |