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