Mercurial > hg > mgallery

comparison dark.css @ 329:872be876e0f2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Add 'dark mode' stylesheet.
author Matti Hamalainen <ccr@tnsp.org>
date Fri, 11 Feb 2022 19:50:24 +0200
parents
children
comparison
equal deleted inserted replaced
328:2e9326abe254 329:872be876e0f2
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