|
329
|
1 /*
|
|
|
2 * Yet Another Image Gallery
|
|
|
3 * -- Base CSS stylesheet
|
|
|
4 * Programmed and designed by Matti 'ccr' Hamalainen <ccr@tnsp.org>
|
|
|
5 * (C) Copyright 2015-2022 Tecnic Software productions (TNSP)
|
|
|
6 */
|
|
|
7 html, body {
|
|
|
8 /* Prevent automatic text size adjustment, which happens on some mobile browsers. */
|
|
|
9 -webkit-text-size-adjust: 100%;
|
|
|
10 -moz-text-size-adjust: 100%;
|
|
|
11 -ms-text-size-adjust: 100%;
|
|
|
12 text-size-adjust: 100%;
|
|
|
13 }
|
|
|
14
|
|
|
15 body {
|
|
|
16 font-size: 0.9em;
|
|
|
17 font-family: Verdana, Arial, helvetica, sans-serif;
|
|
|
18
|
|
|
19 color: white;
|
|
|
20 background: #111;
|
|
|
21
|
|
|
22 margin: 0;
|
|
|
23 padding: 0;
|
|
|
24 }
|
|
|
25
|
|
|
26 a {
|
|
|
27 color: white;
|
|
|
28 }
|
|
|
29
|
|
|
30 a:hover {
|
|
|
31 text-decoration: none;
|
|
|
32 color: yellow;
|
|
|
33 text-shadow: 1px 1px 2px #000;
|
|
|
34 }
|
|
|
35
|
|
|
36 .note {
|
|
|
37 color: #fd0;
|
|
|
38 text-shadow: 1px 1px 2px #000;
|
|
|
39 }
|
|
|
40
|
|
|
41
|
|
|
42 #galleryPage, #imagePage {
|
|
|
43 padding: 0;
|
|
|
44 margin: 0;
|
|
|
45 }
|
|
|
46
|
|
|
47 #imagePage {
|
|
|
48 position: absolute;
|
|
|
49 top: 0;
|
|
|
50 bottom: 0;
|
|
|
51 left: 0;
|
|
|
52 right: 0;
|
|
|
53 }
|
|
|
54
|
|
|
55 h1 {
|
|
|
56 font-size: 1.5em;
|
|
|
57 font-family: helvetica;
|
|
|
58 margin: 0;
|
|
|
59 padding: 0.25em;
|
|
|
60 color: white;
|
|
|
61 text-shadow: 2px 2px 2px #000;
|
|
|
62 background: #777;
|
|
|
63
|
|
|
64 border-top-left-radius: 0.25em;
|
|
|
65 border-top-right-radius: 0.25em;
|
|
|
66 }
|
|
|
67
|
|
|
68 #pageInfoHeader {
|
|
|
69 background: #444;
|
|
|
70 margin: 0;
|
|
|
71 padding: 0.25em;
|
|
|
72
|
|
|
73 border-top-left-radius: 0.5em;
|
|
|
74 border-top-right-radius: 0.5em;
|
|
|
75 }
|
|
|
76
|
|
|
77 #pageInfoFooter {
|
|
|
78 position: fixed;
|
|
|
79
|
|
|
80 bottom: 0;
|
|
|
81 left: 0;
|
|
|
82 right: 0;
|
|
|
83 height: 1.5em;
|
|
|
84
|
|
|
85 margin: 0;
|
|
|
86 padding: 0.25em;
|
|
|
87 text-align: right;
|
|
|
88 font-size: 0.75em;
|
|
|
89 text-shadow: 1px 1px 1px black;
|
|
|
90
|
|
|
91 background: black;
|
|
|
92 border-top: 1px solid black;
|
|
|
93 z-index: 12;
|
|
|
94 }
|
|
|
95
|
|
|
96 div.imagePageHeader {
|
|
|
97 position: fixed;
|
|
|
98
|
|
|
99 z-index: 12;
|
|
|
100
|
|
|
101 top: 0;
|
|
|
102 left: 0;
|
|
|
103 right: 0;
|
|
|
104 }
|
|
|
105
|
|
|
106 #pageInfoButton, #pageUpNaviButton {
|
|
|
107 display: block;
|
|
|
108 text-decoration: none;
|
|
|
109
|
|
|
110 position: fixed;
|
|
|
111 left: 0.15em;
|
|
|
112 z-index: 30;
|
|
|
113
|
|
|
114 text-align: center;
|
|
|
115 width: 1em;
|
|
|
116 height: 1em;
|
|
|
117 font-size: 1.1em;
|
|
|
118
|
|
|
119 background: black;
|
|
|
120 color: white;
|
|
|
121
|
|
|
122 border: 0.2em solid white;
|
|
|
123 border-radius: 0.3em;
|
|
|
124 padding: 1em;
|
|
|
125 }
|
|
|
126
|
|
|
127 #pageInfoButton:hover, #pageUpNaviButton:hover {
|
|
|
128 background: white;
|
|
|
129 color: black;
|
|
|
130 }
|
|
|
131
|
|
|
132 #pageInfoButton {
|
|
|
133 top: 4em;
|
|
|
134 }
|
|
|
135
|
|
|
136 #pageUpNaviButton {
|
|
|
137 top: 0.25em;
|
|
|
138 }
|
|
|
139
|
|
|
140
|
|
|
141 /*
|
|
|
142 * Albums
|
|
|
143 */
|
|
|
144 div.albumHeaderText {
|
|
|
145 padding: 0.25em;
|
|
|
146 }
|
|
|
147
|
|
|
148 .galleryTable {
|
|
|
149 align-items: center;
|
|
|
150 justify-content: center;
|
|
|
151 width: 100%;
|
|
|
152
|
|
|
153 margin-bottom: 1em;
|
|
|
154 display: flex;
|
|
|
155 flex-wrap: wrap;
|
|
|
156 }
|
|
|
157
|
|
|
158 .galleryEntry {
|
|
|
159 width: 12em;
|
|
|
160 padding: 1em;
|
|
|
161 text-align: center;
|
|
|
162 }
|
|
|
163
|
|
|
164 .galleryEntry img {
|
|
|
165 width: 100%;
|
|
|
166 }
|
|
|
167
|
|
|
168 .galleryTable + .imageTable {
|
|
|
169 border-top: 2px solid #222;
|
|
|
170 }
|
|
|
171
|
|
|
172 .galleryTable a, .galleryTable a:visited {
|
|
|
173 text-decoration: none;
|
|
|
174 color: white;
|
|
|
175 outline: 0;
|
|
|
176 }
|
|
|
177
|
|
|
178 .galleryTable a:hover, .galleryTable a:active, .galleryTable a:focus {
|
|
|
179 text-shadow: 1px 1px 2px #600;
|
|
|
180 text-decoration: underline;
|
|
|
181 }
|
|
|
182
|
|
|
183 .galleryTable .galleryEntry {
|
|
|
184 display: inline-block;
|
|
|
185 vertical-align: middle;
|
|
|
186 }
|
|
|
187
|
|
|
188
|
|
|
189 /*
|
|
|
190 *
|
|
|
191 */
|
|
|
192 #pageImageBox {
|
|
|
193 position: absolute;
|
|
|
194 top: 0;
|
|
|
195 bottom: 4.5em;
|
|
|
196 left: 0;
|
|
|
197 right: 0;
|
|
|
198 }
|
|
|
199
|
|
|
200
|
|
|
201 .imageBox {
|
|
|
202 text-align: center;
|
|
|
203 }
|
|
|
204
|
|
|
205 .imageBox img,
|
|
|
206 div.imageCtrl img {
|
|
|
207 border: 0.2em solid #666;
|
|
|
208 border-radius: 0.3em;
|
|
|
209 }
|
|
|
210
|
|
|
211 .imageBox a:hover img, .imageBox a:active img, .imageBox a:focus img,
|
|
|
212 div.imageCtrl a:hover img, div.imageCtrl a:active img, div.imageCtrl a:focus img {
|
|
|
213 border: 0.2em solid white;
|
|
|
214 }
|
|
|
215
|
|
|
216 .galleryEntry .imageBox img {
|
|
|
217 box-shadow: 2px 2px 4px -2px black;
|
|
|
218 }
|
|
|
219
|
|
|
220 img.albumIcon {
|
|
|
221 border: 0.2em solid #666;
|
|
|
222 border-radius: 0.3em;
|
|
|
223 box-shadow: 0px 0px 2px black;
|
|
|
224 }
|
|
|
225
|
|
|
226 a:hover img.albumIcon, a:active img.albumIcon, a:focus img.albumIcon {
|
|
|
227 border: 0.2em solid white;
|
|
|
228 }
|
|
|
229
|
|
|
230 div.imageCtrl {
|
|
|
231 position: absolute;
|
|
|
232 min-width: 8em;
|
|
|
233 width: 10%;
|
|
|
234 top: 0;
|
|
|
235 bottom: 0;
|
|
|
236 background: rgba(0,0,0, 0.35);
|
|
|
237 }
|
|
|
238
|
|
|
239 div.imageCtrl.next, div.imageCtrl.nextBtm {
|
|
|
240 right: 0;
|
|
|
241 }
|
|
|
242
|
|
|
243
|
|
|
244 div.imageCtrl.prev, div.imageCtrl.prevBtm {
|
|
|
245 left: 0;
|
|
|
246 }
|
|
|
247
|
|
|
248 div.imageCtrl a {
|
|
|
249 display: block;
|
|
|
250 position: absolute;
|
|
|
251 top: 0;
|
|
|
252 bottom: 0;
|
|
|
253 left: 0;
|
|
|
254 right: 0;
|
|
|
255 }
|
|
|
256
|
|
|
257 div.imageCtrl a img {
|
|
|
258 position: relative;
|
|
|
259 display: block;
|
|
|
260 margin: auto;
|
|
|
261 width: 85%;
|
|
|
262 }
|
|
|
263
|
|
|
264
|
|
|
265 div.imageCtrl.nextBtm, div.imageCtrl.prevBtm {
|
|
|
266 z-index: 1;
|
|
|
267 }
|
|
|
268
|
|
|
269 div.imageCtrl.prev, div.imageCtrl.next {
|
|
|
270 opacity: 0;
|
|
|
271 transition: opacity 0.15s linear;
|
|
|
272 z-index: 10;
|
|
|
273 }
|
|
|
274
|
|
|
275 div.imageCtrl.prev:hover, div.imageCtrl.next:hover {
|
|
|
276 opacity: 1;
|
|
|
277 }
|
|
|
278
|
|
|
279
|
|
|
280 #imageImageBox {
|
|
|
281 position: absolute;
|
|
|
282 top: 0;
|
|
|
283 left: 0;
|
|
|
284 right: 0;
|
|
|
285 bottom: 0;
|
|
|
286
|
|
|
287 display: flex;
|
|
|
288 align-items: center;
|
|
|
289 justify-content: center;
|
|
|
290 }
|
|
|
291
|
|
|
292
|
|
|
293 #imageImage {
|
|
|
294 position: relative;
|
|
|
295 z-index: 5;
|
|
|
296 }
|
|
|
297
|
|
|
298 div.imageCtrl * img {
|
|
|
299 position: absolute;
|
|
|
300 top: 40%;
|
|
|
301 }
|
|
|
302
|
|
|
303
|
|
|
304
|
|
|
305 div.albumTitle, div.imageCaption {
|
|
|
306 text-align: center;
|
|
|
307 text-shadow: 1px 1px 2px black;
|
|
|
308 padding: 0.5em;
|
|
|
309 }
|
|
|
310
|
|
|
311 .galleryEntry div.imageCaption {
|
|
|
312 }
|
|
|
313
|
|
|
314 #pageImageCaption {
|
|
|
315 position: absolute;
|
|
|
316 bottom: 1.5em;
|
|
|
317 left: 0;
|
|
|
318 right: 0;
|
|
|
319 height: 2em;
|
|
|
320 background: #222;
|
|
|
321 border-top: 1px solid black;
|
|
|
322 border-bottom: 1px solid black;
|
|
|
323 z-index: 12;
|
|
|
324 }
|
|
|
325
|
|
|
326 #infoBox {
|
|
|
327 position: fixed;
|
|
|
328 bottom: 0;
|
|
|
329 left: 0.1em;
|
|
|
330 right: 0.1em;
|
|
|
331 height: auto;
|
|
|
332 min-height: 5em;
|
|
|
333 background: rgba(0,0,0, 0.5);
|
|
|
334
|
|
|
335 text-align: center;
|
|
|
336 margin: 0;
|
|
|
337 padding-top: 0.5em;
|
|
|
338 padding-bottom: 2em;
|
|
|
339 border: 0.2em solid white;
|
|
|
340 border-radius: 0.5em;
|
|
|
341
|
|
|
342 opacity: 0;
|
|
|
343 z-index: 15;
|
|
|
344 }
|
|
|
345
|
|
|
346 #infoBox:hover {
|
|
|
347 opacity: 1;
|
|
|
348 }
|
|
|
349
|
|
|
350
|
|
|
351 #imageLink {
|
|
|
352 position: absolute;
|
|
|
353 left: 0;
|
|
|
354 right: 0;
|
|
|
355 bottom: 0;
|
|
|
356
|
|
|
357 background: white;
|
|
|
358 color: black;
|
|
|
359
|
|
|
360 text-shadow: none;
|
|
|
361 text-decoration: none;
|
|
|
362 font-size: 1.25em;
|
|
|
363
|
|
|
364 padding: 0.5em;
|
|
|
365 }
|
|
|
366
|
|
|
367
|
|
|
368 span.infoDateTime {
|
|
|
369 display: block;
|
|
|
370 color: white;
|
|
|
371 font-weight: bold;
|
|
|
372 text-shadow: 1px 1px 2px black;
|
|
|
373 }
|
|
|
374
|
|
|
375
|
|
|
376 /*
|
|
|
377 * Navigation controls
|
|
|
378 */
|
|
|
379 .naviBreadCrumbItem {
|
|
|
380 }
|
|
|
381
|
|
|
382 .naviBreadCrumbCurr {
|
|
|
383 color: #fd0;
|
|
|
384 }
|
|
|
385
|
|
|
386 .naviBreadCrumbSep:before {
|
|
|
387 content: " → ";
|
|
|
388 color: #0f0;
|
|
|
389 font-weight: bold;
|
|
|
390 font-size: 1.5em;
|
|
|
391 }
|
|
|
392
|
|
|
393 #naviBreadCrumbs {
|
|
|
394 text-shadow: 1px 1px 1px black;
|
|
|
395 padding: 0.5em;
|
|
|
396 padding-top: 0;
|
|
|
397 font-size: 1.25em;
|
|
|
398
|
|
|
399 background: #555;
|
|
|
400 box-shadow: 0px 2px 4px -4px black;
|
|
|
401 }
|
|
|
402
|
|
|
403
|
|
|
404 #languages {
|
|
|
405 position: absolute;
|
|
|
406 right: 0.5em;
|
|
|
407 top: 0.5em;
|
|
|
408 background: black;
|
|
|
409 border-radius: 0.35em;
|
|
|
410 padding: 0.5em;
|
|
|
411 }
|
|
|
412
|
|
|
413 #languages a {
|
|
|
414 display: inline-block;
|
|
|
415 padding: 0.5em;
|
|
|
416 margin: 0.1em;
|
|
|
417 background: white;
|
|
|
418 color: black;
|
|
|
419 border-radius: 0.35em;
|
|
|
420 text-align: center;
|
|
|
421 }
|
|
|
422
|
|
|
423
|
|
|
424 /*
|
|
|
425 * Mobile device rules via media queries
|
|
|
426 */
|
|
|
427 @media screen and (min-resolution: 2dppx) and (min-resolution: 150dpi) {
|
|
|
428
|
|
|
429 /*
|
|
|
430 * Orientation related
|
|
|
431 */
|
|
|
432 @media (orientation: landscape) {
|
|
|
433 body {
|
|
|
434 font-size: 1em;
|
|
|
435 }
|
|
|
436 }
|
|
|
437
|
|
|
438
|
|
|
439 @media (orientation: portrait) {
|
|
|
440 body {
|
|
|
441 font-size: 1.4em;
|
|
|
442 }
|
|
|
443
|
|
|
444 .galleryEntry {
|
|
|
445 width: 40%;
|
|
|
446 }
|
|
|
447
|
|
|
448 #pageInfoHeader, h1 {
|
|
|
449 font-size: 1.25em;
|
|
|
450 }
|
|
|
451
|
|
|
452 }
|
|
|
453
|
|
|
454
|
|
|
455 /*
|
|
|
456 * Common rules
|
|
|
457 */
|
|
|
458 #pageInfoButton, #pageUpNaviButton {
|
|
|
459 font-size: 1.5em;
|
|
|
460 bottom: 3em;
|
|
|
461 }
|
|
|
462
|
|
|
463
|
|
|
464 div.imageCtrl a img {
|
|
|
465 top: 3%;
|
|
|
466 }
|
|
|
467
|
|
|
468 div.albumTitle, div.imageCaption {
|
|
|
469 font-size: 1.2em;
|
|
|
470 }
|
|
|
471
|
|
|
472
|
|
|
473 #languages {
|
|
|
474 position: relative;
|
|
|
475 top: 0;
|
|
|
476 right: 0;
|
|
|
477 left: 0;
|
|
|
478 margin: 0;
|
|
|
479 padding: 0.2em;
|
|
|
480 text-align: right;
|
|
|
481 }
|
|
|
482
|
|
|
483 #languages a {
|
|
|
484 width: 5em;
|
|
|
485 padding: 1em;
|
|
|
486 }
|
|
|
487
|
|
|
488 #naviBreadCrumbs {
|
|
|
489 font-size: 1.5em;
|
|
|
490 }
|
|
|
491
|
|
|
492 div.albumHeaderText {
|
|
|
493 }
|
|
|
494
|
|
|
495 #pageImageCaption {
|
|
|
496 bottom: 0;
|
|
|
497 height: 2.5em;
|
|
|
498 overflow: hidden;
|
|
|
499 }
|
|
|
500
|
|
|
501 #imageImage {
|
|
|
502 border: none;
|
|
|
503 border-radius: 0;
|
|
|
504 box-shadow: none;
|
|
|
505 }
|
|
|
506
|
|
|
507 #imagePage #pageInfoFooter {
|
|
|
508 display: none;
|
|
|
509 }
|
|
|
510
|
|
|
511 #pageInfoButton, #pageUpNaviButton {
|
|
|
512 top: auto;
|
|
|
513 left: auto;
|
|
|
514 }
|
|
|
515
|
|
|
516 #pageInfoButton {
|
|
|
517 right: 0.25em;
|
|
|
518 }
|
|
|
519
|
|
|
520 #pageUpNaviButton {
|
|
|
521 right: 4em;
|
|
|
522 }
|
|
|
523
|
|
|
524 #infoBox {
|
|
|
525 background: black;
|
|
|
526 display: none;
|
|
|
527 opacity: 1;
|
|
|
528 }
|
|
|
529 }
|
|
|
530
|
|
|
531
|
|
|
532 @media screen and (max-width: 400px), screen and (max-height: 400px) {
|
|
|
533 body {
|
|
|
534 font-size: 10px;
|
|
|
535 }
|
|
|
536
|
|
|
537 #pageInfoHeader {
|
|
|
538 }
|
|
|
539 }
|
|
|
540
|
