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