Mercurial > hg > mgallery
annotate basic.css @ 225:3b8fd5a7a4cf
CSS cleanups.
author | Matti Hamalainen <ccr@tnsp.org> |
---|---|
date | Fri, 23 Mar 2018 01:28:33 +0200 |
parents | 024b22f8401a |
children | a57b5fa51e07 |
rev | line source |
---|---|
218
024b22f8401a
Add copyright blurb here as well.
Matti Hamalainen <ccr@tnsp.org>
parents:
217
diff
changeset
|
1 /* |
024b22f8401a
Add copyright blurb here as well.
Matti Hamalainen <ccr@tnsp.org>
parents:
217
diff
changeset
|
2 * Yet Another Image Gallery |
024b22f8401a
Add copyright blurb here as well.
Matti Hamalainen <ccr@tnsp.org>
parents:
217
diff
changeset
|
3 * -- Base CSS stylesheet |
024b22f8401a
Add copyright blurb here as well.
Matti Hamalainen <ccr@tnsp.org>
parents:
217
diff
changeset
|
4 * Programmed and designed by Matti 'ccr' Hamalainen <ccr@tnsp.org> |
024b22f8401a
Add copyright blurb here as well.
Matti Hamalainen <ccr@tnsp.org>
parents:
217
diff
changeset
|
5 * (C) Copyright 2015-2018 Tecnic Software productions (TNSP) |
024b22f8401a
Add copyright blurb here as well.
Matti Hamalainen <ccr@tnsp.org>
parents:
217
diff
changeset
|
6 */ |
212
c3512a94189d
Prevent idiotic Chrome text scaling / boosting.
Matti Hamalainen <ccr@tnsp.org>
parents:
211
diff
changeset
|
7 html { |
218
024b22f8401a
Add copyright blurb here as well.
Matti Hamalainen <ccr@tnsp.org>
parents:
217
diff
changeset
|
8 /* Prevent automatic text size adjustment, which happens on some mobile browsers. */ |
212
c3512a94189d
Prevent idiotic Chrome text scaling / boosting.
Matti Hamalainen <ccr@tnsp.org>
parents:
211
diff
changeset
|
9 -webkit-text-size-adjust: none; |
c3512a94189d
Prevent idiotic Chrome text scaling / boosting.
Matti Hamalainen <ccr@tnsp.org>
parents:
211
diff
changeset
|
10 -moz-text-size-adjust: none; |
c3512a94189d
Prevent idiotic Chrome text scaling / boosting.
Matti Hamalainen <ccr@tnsp.org>
parents:
211
diff
changeset
|
11 -ms-text-size-adjust: none; |
c3512a94189d
Prevent idiotic Chrome text scaling / boosting.
Matti Hamalainen <ccr@tnsp.org>
parents:
211
diff
changeset
|
12 } |
c3512a94189d
Prevent idiotic Chrome text scaling / boosting.
Matti Hamalainen <ccr@tnsp.org>
parents:
211
diff
changeset
|
13 |
0 | 14 body { |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
15 font-size: 14px; |
207 | 16 font-family: Verdana, Arial, helvetica, sans-serif; |
17 | |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
18 color: white; |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
19 background: #454; |
207 | 20 |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
21 margin: 0; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
22 padding: 0; |
0 | 23 } |
24 | |
25 a { | |
26 color: white; | |
27 } | |
28 | |
29 a:hover { | |
30 text-decoration: none; | |
31 color: yellow; | |
32 text-shadow: 1px 1px 2px #000; | |
33 } | |
34 | |
35 | |
199
d03fad24f4bc
Make separate containing div elements for gallery and image view page types.
Matti Hamalainen <ccr@tnsp.org>
parents:
198
diff
changeset
|
36 #galleryPage, #imagePage { |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
37 padding: 0; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
38 margin: 0; |
0 | 39 } |
40 | |
199
d03fad24f4bc
Make separate containing div elements for gallery and image view page types.
Matti Hamalainen <ccr@tnsp.org>
parents:
198
diff
changeset
|
41 #imagePage { |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
42 position: absolute; |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
43 top: 0; |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
44 bottom: 0; |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
45 left: 0; |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
46 right: 0; |
199
d03fad24f4bc
Make separate containing div elements for gallery and image view page types.
Matti Hamalainen <ccr@tnsp.org>
parents:
198
diff
changeset
|
47 } |
d03fad24f4bc
Make separate containing div elements for gallery and image view page types.
Matti Hamalainen <ccr@tnsp.org>
parents:
198
diff
changeset
|
48 |
82
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
49 h1 { |
123 | 50 font-size: 1.5em; |
0 | 51 font-family: helvetica; |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
52 margin: 0; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
53 padding: 0.25em; |
0 | 54 color: white; |
55 text-shadow: 2px 2px 2px #000; | |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
56 background: #787; |
0 | 57 |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
58 border-top-left-radius: 0.25em; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
59 border-top-right-radius: 0.25em; |
0 | 60 } |
61 | |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
62 #pageInfoHeader { |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
63 background: #565; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
64 margin: 0; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
65 padding: 0.25em; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
66 |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
67 border-top-left-radius: 0.5em; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
68 border-top-right-radius: 0.5em; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
69 } |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
70 |
102
f8e6e0f2471d
Use CSS id instead of generic selector.
Matti Hamalainen <ccr@tnsp.org>
parents:
94
diff
changeset
|
71 #pageInfoFooter { |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
72 position: fixed; |
203 | 73 |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
74 bottom: 0; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
75 left: 0; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
76 right: 0; |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
77 height: 1.5em; |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
78 |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
79 background: #565; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
80 margin: 0; |
0 | 81 padding: 0.25em; |
82 text-align: right; | |
83 font-size: 0.75em; | |
84 text-shadow: 1px 1px 1px black; | |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
85 |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
86 z-index: 12; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
87 } |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
88 |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
89 div.imagePageHeader { |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
90 position: fixed; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
91 |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
92 z-index: 12; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
93 |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
94 top: 0; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
95 left: 0; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
96 right: 0; |
0 | 97 } |
98 | |
168
ba02d12cb4be
Add "up" navigation button, to go back to the main gallery from image page.
Matti Hamalainen <ccr@tnsp.org>
parents:
156
diff
changeset
|
99 #pageInfoButton, #pageUpNaviButton { |
ba02d12cb4be
Add "up" navigation button, to go back to the main gallery from image page.
Matti Hamalainen <ccr@tnsp.org>
parents:
156
diff
changeset
|
100 display: block; |
ba02d12cb4be
Add "up" navigation button, to go back to the main gallery from image page.
Matti Hamalainen <ccr@tnsp.org>
parents:
156
diff
changeset
|
101 text-decoration: none; |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
102 position: fixed; |
176
d7d773f6b246
Adjust hovering control button positions, size and opacity.
Matti Hamalainen <ccr@tnsp.org>
parents:
168
diff
changeset
|
103 left: 0.15em; |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
104 z-index: 30; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
105 |
176
d7d773f6b246
Adjust hovering control button positions, size and opacity.
Matti Hamalainen <ccr@tnsp.org>
parents:
168
diff
changeset
|
106 text-align: center; |
d7d773f6b246
Adjust hovering control button positions, size and opacity.
Matti Hamalainen <ccr@tnsp.org>
parents:
168
diff
changeset
|
107 width: 1em; |
d7d773f6b246
Adjust hovering control button positions, size and opacity.
Matti Hamalainen <ccr@tnsp.org>
parents:
168
diff
changeset
|
108 height: 1em; |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
109 font-size: 1.25em; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
110 |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
111 background: black; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
112 color: white; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
113 |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
114 border: 0.2em solid white; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
115 border-radius: 0.3em; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
116 padding: 1em; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
117 } |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
118 |
168
ba02d12cb4be
Add "up" navigation button, to go back to the main gallery from image page.
Matti Hamalainen <ccr@tnsp.org>
parents:
156
diff
changeset
|
119 #pageInfoButton:hover, #pageUpNaviButton:hover { |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
120 background: white; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
121 color: black; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
122 } |
0 | 123 |
197 | 124 #pageInfoButton { |
125 top: 4em; | |
126 } | |
127 | |
168
ba02d12cb4be
Add "up" navigation button, to go back to the main gallery from image page.
Matti Hamalainen <ccr@tnsp.org>
parents:
156
diff
changeset
|
128 #pageUpNaviButton { |
197 | 129 top: 0.25em; |
168
ba02d12cb4be
Add "up" navigation button, to go back to the main gallery from image page.
Matti Hamalainen <ccr@tnsp.org>
parents:
156
diff
changeset
|
130 } |
ba02d12cb4be
Add "up" navigation button, to go back to the main gallery from image page.
Matti Hamalainen <ccr@tnsp.org>
parents:
156
diff
changeset
|
131 |
179 | 132 |
0 | 133 /* |
134 * Albums | |
135 */ | |
136 div.albumHeaderText { | |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
137 padding: 0.25em; |
0 | 138 } |
139 | |
20
12916fcdb8b8
Improve the non-tabled mode.
Matti Hamalainen <ccr@tnsp.org>
parents:
18
diff
changeset
|
140 .galleryTable { |
143
be2e9d5e127d
Fix CSS so that use_tables actually works with the default example CSS.
Matti Hamalainen <ccr@tnsp.org>
parents:
139
diff
changeset
|
141 align-items: center; |
be2e9d5e127d
Fix CSS so that use_tables actually works with the default example CSS.
Matti Hamalainen <ccr@tnsp.org>
parents:
139
diff
changeset
|
142 justify-content: center; |
be2e9d5e127d
Fix CSS so that use_tables actually works with the default example CSS.
Matti Hamalainen <ccr@tnsp.org>
parents:
139
diff
changeset
|
143 width: 100%; |
be2e9d5e127d
Fix CSS so that use_tables actually works with the default example CSS.
Matti Hamalainen <ccr@tnsp.org>
parents:
139
diff
changeset
|
144 background: #454; |
156 | 145 margin-bottom: 1em; |
143
be2e9d5e127d
Fix CSS so that use_tables actually works with the default example CSS.
Matti Hamalainen <ccr@tnsp.org>
parents:
139
diff
changeset
|
146 } |
be2e9d5e127d
Fix CSS so that use_tables actually works with the default example CSS.
Matti Hamalainen <ccr@tnsp.org>
parents:
139
diff
changeset
|
147 |
be2e9d5e127d
Fix CSS so that use_tables actually works with the default example CSS.
Matti Hamalainen <ccr@tnsp.org>
parents:
139
diff
changeset
|
148 div.galleryTable { |
104 | 149 display: flex; |
150 flex-wrap: wrap; | |
0 | 151 } |
152 | |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
153 div.galleryEntry { |
42
002c19b4618b
Add minimum width for image cells.
Matti Hamalainen <ccr@tnsp.org>
parents:
40
diff
changeset
|
154 min-width: 145px; |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
155 width: 15em; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
156 padding: 1em; |
0 | 157 text-align: center; |
158 } | |
159 | |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
160 div.galleryEntry img { |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
161 min-width: 145px; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
162 width: 100%; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
163 } |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
164 |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
165 .galleryTable + .imageTable { |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
166 border-top: 2px solid #232; |
0 | 167 } |
168 | |
20
12916fcdb8b8
Improve the non-tabled mode.
Matti Hamalainen <ccr@tnsp.org>
parents:
18
diff
changeset
|
169 .galleryTable a, .galleryTable a:visited { |
0 | 170 text-decoration: none; |
171 color: white; | |
172 outline: 0; | |
173 } | |
174 | |
20
12916fcdb8b8
Improve the non-tabled mode.
Matti Hamalainen <ccr@tnsp.org>
parents:
18
diff
changeset
|
175 .galleryTable a:hover, .galleryTable a:active, .galleryTable a:focus { |
0 | 176 text-shadow: 1px 1px 2px #000; |
177 text-decoration: underline; | |
178 color: #f00; | |
179 } | |
180 | |
143
be2e9d5e127d
Fix CSS so that use_tables actually works with the default example CSS.
Matti Hamalainen <ccr@tnsp.org>
parents:
139
diff
changeset
|
181 div.galleryTable .galleryEntry { |
20
12916fcdb8b8
Improve the non-tabled mode.
Matti Hamalainen <ccr@tnsp.org>
parents:
18
diff
changeset
|
182 display: inline-block; |
12916fcdb8b8
Improve the non-tabled mode.
Matti Hamalainen <ccr@tnsp.org>
parents:
18
diff
changeset
|
183 vertical-align: middle; |
12916fcdb8b8
Improve the non-tabled mode.
Matti Hamalainen <ccr@tnsp.org>
parents:
18
diff
changeset
|
184 } |
0 | 185 |
186 | |
187 /* | |
188 * | |
189 */ | |
203 | 190 #pageImageBox { |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
191 position: absolute; |
203 | 192 top: 0; |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
193 bottom: 4.5em; |
203 | 194 left: 0; |
195 right: 0; | |
196 } | |
197 | |
198 | |
177
724fac3d21e9
Use .imageBox class selector instead of more specific div.imageBox.
Matti Hamalainen <ccr@tnsp.org>
parents:
176
diff
changeset
|
199 .imageBox { |
0 | 200 text-align: center; |
201 } | |
202 | |
177
724fac3d21e9
Use .imageBox class selector instead of more specific div.imageBox.
Matti Hamalainen <ccr@tnsp.org>
parents:
176
diff
changeset
|
203 .imageBox img, |
150 | 204 div.imageCtrl img { |
0 | 205 border: 0.2em solid black; |
206 border-radius: 0.3em; | |
207 } | |
208 | |
177
724fac3d21e9
Use .imageBox class selector instead of more specific div.imageBox.
Matti Hamalainen <ccr@tnsp.org>
parents:
176
diff
changeset
|
209 .imageBox a:hover img, .imageBox a:active img, .imageBox a:focus img, |
0 | 210 div.imageCtrl a:hover img, div.imageCtrl a:active img, div.imageCtrl a:focus img { |
211 border: 0.2em solid white; | |
212 } | |
213 | |
177
724fac3d21e9
Use .imageBox class selector instead of more specific div.imageBox.
Matti Hamalainen <ccr@tnsp.org>
parents:
176
diff
changeset
|
214 .galleryEntry .imageBox img { |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
215 box-shadow: 2px 2px 4px -2px black; |
82
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
216 } |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
217 |
18 | 218 img.albumIcon { |
219 border: 0.2em solid black; | |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
220 border-radius: 0.4em; |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
221 box-shadow: 0px 0px 2px black; |
18 | 222 } |
223 | |
224 a:hover img.albumIcon, a:active img.albumIcon, a:focus img.albumIcon { | |
225 border: 0.2em solid white; | |
0 | 226 } |
227 | |
82
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
228 div.imageCtrl { |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
229 position: absolute; |
82
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
230 min-width: 150px; |
104 | 231 width: 14%; |
82
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
232 top: 0; |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
233 bottom: 0; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
234 background: rgba(0,0,0, 0.35); |
82
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
235 } |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
236 |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
237 div.imageCtrl.next, div.imageCtrl.nextBtm { |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
238 right: 0; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
239 } |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
240 |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
241 |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
242 div.imageCtrl.prev, div.imageCtrl.prevBtm { |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
243 left: 0; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
244 } |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
245 |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
246 div.imageCtrl a { |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
247 display: block; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
248 position: absolute; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
249 top: 0; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
250 bottom: 0; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
251 left: 0; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
252 right: 0; |
0 | 253 } |
254 | |
82
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
255 div.imageCtrl a img { |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
256 position: relative; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
257 display: block; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
258 margin: auto; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
259 } |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
260 |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
261 |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
262 div.imageCtrl.nextBtm, div.imageCtrl.prevBtm { |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
263 z-index: 1; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
264 } |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
265 |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
266 div.imageCtrl.prev, div.imageCtrl.next { |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
267 opacity: 0; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
268 transition: opacity 0.15s linear; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
269 z-index: 10; |
0 | 270 } |
271 | |
82
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
272 div.imageCtrl.prev:hover, div.imageCtrl.next:hover { |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
273 opacity: 1; |
0 | 274 } |
275 | |
82
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
276 |
180
05fba4ce0b5a
Add #imageImageBox style def.
Matti Hamalainen <ccr@tnsp.org>
parents:
179
diff
changeset
|
277 #imageImageBox { |
215
23995179ecd8
Use flexbox for centering the image on image pages.
Matti Hamalainen <ccr@tnsp.org>
parents:
213
diff
changeset
|
278 position: absolute; |
23995179ecd8
Use flexbox for centering the image on image pages.
Matti Hamalainen <ccr@tnsp.org>
parents:
213
diff
changeset
|
279 top: 0; |
23995179ecd8
Use flexbox for centering the image on image pages.
Matti Hamalainen <ccr@tnsp.org>
parents:
213
diff
changeset
|
280 left: 0; |
23995179ecd8
Use flexbox for centering the image on image pages.
Matti Hamalainen <ccr@tnsp.org>
parents:
213
diff
changeset
|
281 right: 0; |
23995179ecd8
Use flexbox for centering the image on image pages.
Matti Hamalainen <ccr@tnsp.org>
parents:
213
diff
changeset
|
282 bottom: 0; |
23995179ecd8
Use flexbox for centering the image on image pages.
Matti Hamalainen <ccr@tnsp.org>
parents:
213
diff
changeset
|
283 |
23995179ecd8
Use flexbox for centering the image on image pages.
Matti Hamalainen <ccr@tnsp.org>
parents:
213
diff
changeset
|
284 display: flex; |
23995179ecd8
Use flexbox for centering the image on image pages.
Matti Hamalainen <ccr@tnsp.org>
parents:
213
diff
changeset
|
285 align-items: center; |
23995179ecd8
Use flexbox for centering the image on image pages.
Matti Hamalainen <ccr@tnsp.org>
parents:
213
diff
changeset
|
286 justify-content: center; |
180
05fba4ce0b5a
Add #imageImageBox style def.
Matti Hamalainen <ccr@tnsp.org>
parents:
179
diff
changeset
|
287 } |
05fba4ce0b5a
Add #imageImageBox style def.
Matti Hamalainen <ccr@tnsp.org>
parents:
179
diff
changeset
|
288 |
203 | 289 |
82
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
290 #imageImage { |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
291 position: relative; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
292 z-index: 5; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
293 } |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
294 |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
295 div.imageCtrl * img { |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
296 position: absolute; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
297 top: 40%; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
298 } |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
299 |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
300 |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
301 |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
302 div.albumTitle, div.imageCaption { |
0 | 303 text-align: center; |
304 text-shadow: 1px 1px 2px black; | |
305 padding: 0.5em; | |
306 } | |
307 | |
24 | 308 .galleryEntry div.imageCaption { |
0 | 309 } |
310 | |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
311 #pageImageCaption { |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
312 position: absolute; |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
313 bottom: 1.5em; |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
314 left: 0; |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
315 right: 0; |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
316 height: 2em; |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
317 background: #350; |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
318 border-top: 1px solid black; |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
319 border-bottom: 1px solid black; |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
320 z-index: 12; |
144
c0c0708bd94d
Make image caption stand out a bit better on the image page.
Matti Hamalainen <ccr@tnsp.org>
parents:
143
diff
changeset
|
321 } |
0 | 322 |
197 | 323 #infoBox { |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
324 position: fixed; |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
325 bottom: 0; |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
326 left: 0.1em; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
327 right: 0.1em; |
82
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
328 height: auto; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
329 min-height: 5em; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
330 background: rgba(0,0,0, 0.5); |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
331 |
0 | 332 text-align: center; |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
333 margin: 0; |
156 | 334 padding-top: 0.5em; |
335 padding-bottom: 2em; | |
0 | 336 border: 0.2em solid white; |
337 border-radius: 0.5em; | |
82
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
338 |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
339 opacity: 0; |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
340 z-index: 15; |
0 | 341 } |
342 | |
197 | 343 #infoBox:hover { |
82
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
344 opacity: 1; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
345 } |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
346 |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
347 |
94
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
348 #imageLink { |
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
349 position: absolute; |
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
350 left: 0; |
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
351 right: 0; |
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
352 bottom: 0; |
155 | 353 |
94
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
354 background: white; |
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
355 color: black; |
155 | 356 |
94
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
357 text-shadow: none; |
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
358 text-decoration: none; |
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
359 font-size: 1.25em; |
155 | 360 |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
361 padding: 0.5em; |
94
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
362 } |
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
363 |
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
364 |
0 | 365 span.infoDateTime { |
366 display: block; | |
367 color: white; | |
368 font-weight: bold; | |
369 text-shadow: 1px 1px 2px black; | |
370 } | |
371 | |
40 | 372 |
0 | 373 /* |
40 | 374 * Navigation controls |
0 | 375 */ |
3
c85f630a4198
Improve bread crumb navigation by making the current album a link as well.
Matti Hamalainen <ccr@tnsp.org>
parents:
0
diff
changeset
|
376 .naviBreadCrumbItem { |
c85f630a4198
Improve bread crumb navigation by making the current album a link as well.
Matti Hamalainen <ccr@tnsp.org>
parents:
0
diff
changeset
|
377 } |
c85f630a4198
Improve bread crumb navigation by making the current album a link as well.
Matti Hamalainen <ccr@tnsp.org>
parents:
0
diff
changeset
|
378 |
c85f630a4198
Improve bread crumb navigation by making the current album a link as well.
Matti Hamalainen <ccr@tnsp.org>
parents:
0
diff
changeset
|
379 .naviBreadCrumbCurr { |
0 | 380 color: red; |
381 } | |
382 | |
3
c85f630a4198
Improve bread crumb navigation by making the current album a link as well.
Matti Hamalainen <ccr@tnsp.org>
parents:
0
diff
changeset
|
383 .naviBreadCrumbSep:before { |
0 | 384 content: " → "; |
385 color: #0f0; | |
386 font-weight: bold; | |
387 font-size: 1.5em; | |
388 } | |
389 | |
118
6739c52e110c
Change naviBreadCrumbs to CSS id instead of class.
Matti Hamalainen <ccr@tnsp.org>
parents:
116
diff
changeset
|
390 #naviBreadCrumbs { |
0 | 391 text-shadow: 1px 1px 1px black; |
392 padding: 0.5em; | |
393 padding-top: 0; | |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
394 font-size: 1.25em; |
0 | 395 |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
396 background: #676; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
397 box-shadow: 0px 2px 4px -4px black; |
0 | 398 } |
44
bc9da3b71888
Implement imgur-style image zoom/de-zoom via image click/enter.
Matti Hamalainen <ccr@tnsp.org>
parents:
42
diff
changeset
|
399 |
bc9da3b71888
Implement imgur-style image zoom/de-zoom via image click/enter.
Matti Hamalainen <ccr@tnsp.org>
parents:
42
diff
changeset
|
400 |
48
5a2dd41ff7ad
Initial implementation of language selector.
Matti Hamalainen <ccr@tnsp.org>
parents:
44
diff
changeset
|
401 #languages { |
5a2dd41ff7ad
Initial implementation of language selector.
Matti Hamalainen <ccr@tnsp.org>
parents:
44
diff
changeset
|
402 position: absolute; |
135 | 403 right: 0.5em; |
404 top: 0.5em; | |
73
5e98fe999fac
Adjust language selector CSS.
Matti Hamalainen <ccr@tnsp.org>
parents:
72
diff
changeset
|
405 background: black; |
5e98fe999fac
Adjust language selector CSS.
Matti Hamalainen <ccr@tnsp.org>
parents:
72
diff
changeset
|
406 border-radius: 0.35em; |
135 | 407 padding: 0.5em; |
48
5a2dd41ff7ad
Initial implementation of language selector.
Matti Hamalainen <ccr@tnsp.org>
parents:
44
diff
changeset
|
408 } |
116
7964b6a27f8a
Adjust language selection box.
Matti Hamalainen <ccr@tnsp.org>
parents:
110
diff
changeset
|
409 |
7964b6a27f8a
Adjust language selection box.
Matti Hamalainen <ccr@tnsp.org>
parents:
110
diff
changeset
|
410 #languages a { |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
411 display: inline-block; |
116
7964b6a27f8a
Adjust language selection box.
Matti Hamalainen <ccr@tnsp.org>
parents:
110
diff
changeset
|
412 padding: 0.5em; |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
413 margin: 0.1em; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
414 background: white; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
415 color: black; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
416 border-radius: 0.35em; |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
417 text-align: center; |
116
7964b6a27f8a
Adjust language selection box.
Matti Hamalainen <ccr@tnsp.org>
parents:
110
diff
changeset
|
418 } |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
419 |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
420 |
213
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
421 /* |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
422 * Mobile device rules via media queries |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
423 */ |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
424 @media screen and (min-resolution: 2dppx) and (min-resolution: 150dpi) { |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
425 |
225 | 426 /* |
427 * Orientation related | |
428 */ | |
213
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
429 @media (orientation: landscape) { |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
430 body { |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
431 font-size: 18px; |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
432 } |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
433 |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
434 #pageInfoButton, #pageUpNaviButton { |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
435 font-size: 1.5em; |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
436 bottom: 3em; |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
437 } |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
438 } |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
439 |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
440 |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
441 @media (orientation: portrait) { |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
442 body { |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
443 font-size: 24px; |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
444 } |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
445 |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
446 div.galleryEntry { |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
447 width: 40%; |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
448 } |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
449 |
215
23995179ecd8
Use flexbox for centering the image on image pages.
Matti Hamalainen <ccr@tnsp.org>
parents:
213
diff
changeset
|
450 #pageInfoHeader, h1 { |
213
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
451 font-size: 1.25em; |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
452 } |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
453 |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
454 #pageInfoButton, #pageUpNaviButton { |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
455 font-size: 2em; |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
456 bottom: 2.5em; |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
457 } |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
458 } |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
459 |
225 | 460 /* |
461 * Common rules | |
462 */ | |
463 div.imageCtrl a img { | |
464 top: 5%; | |
465 } | |
203 | 466 |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
467 div.albumTitle, div.imageCaption { |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
468 font-size: 1.2em; |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
469 } |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
470 |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
471 #languages { |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
472 position: relative; |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
473 top: 0; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
474 right: 0; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
475 left: 0; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
476 text-align: right; |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
477 } |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
478 |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
479 #languages a { |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
480 width: 5em; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
481 padding: 1em; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
482 } |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
483 |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
484 #naviBreadCrumbs { |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
485 font-size: 1.5em; |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
486 } |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
487 |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
488 div.albumHeaderText { |
217
3209568d2a69
Adjust album header text font size.
Matti Hamalainen <ccr@tnsp.org>
parents:
216
diff
changeset
|
489 font-size: 1.25em; |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
490 } |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
491 |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
492 #pageImageCaption { |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
493 bottom: 0; |
210
0a0a2936d779
Adjust image adjustment etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
209
diff
changeset
|
494 height: 2.5em; |
0a0a2936d779
Adjust image adjustment etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
209
diff
changeset
|
495 overflow: hidden; |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
496 } |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
497 |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
498 #pageInfoFooter { |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
499 display: none; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
500 } |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
501 |
168
ba02d12cb4be
Add "up" navigation button, to go back to the main gallery from image page.
Matti Hamalainen <ccr@tnsp.org>
parents:
156
diff
changeset
|
502 #pageInfoButton, #pageUpNaviButton { |
ba02d12cb4be
Add "up" navigation button, to go back to the main gallery from image page.
Matti Hamalainen <ccr@tnsp.org>
parents:
156
diff
changeset
|
503 top: auto; |
ba02d12cb4be
Add "up" navigation button, to go back to the main gallery from image page.
Matti Hamalainen <ccr@tnsp.org>
parents:
156
diff
changeset
|
504 left: auto; |
ba02d12cb4be
Add "up" navigation button, to go back to the main gallery from image page.
Matti Hamalainen <ccr@tnsp.org>
parents:
156
diff
changeset
|
505 } |
ba02d12cb4be
Add "up" navigation button, to go back to the main gallery from image page.
Matti Hamalainen <ccr@tnsp.org>
parents:
156
diff
changeset
|
506 |
ba02d12cb4be
Add "up" navigation button, to go back to the main gallery from image page.
Matti Hamalainen <ccr@tnsp.org>
parents:
156
diff
changeset
|
507 #pageInfoButton { |
213
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
508 right: 0.25em; |
168
ba02d12cb4be
Add "up" navigation button, to go back to the main gallery from image page.
Matti Hamalainen <ccr@tnsp.org>
parents:
156
diff
changeset
|
509 } |
ba02d12cb4be
Add "up" navigation button, to go back to the main gallery from image page.
Matti Hamalainen <ccr@tnsp.org>
parents:
156
diff
changeset
|
510 |
ba02d12cb4be
Add "up" navigation button, to go back to the main gallery from image page.
Matti Hamalainen <ccr@tnsp.org>
parents:
156
diff
changeset
|
511 #pageUpNaviButton { |
213
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
512 right: 4em; |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
513 } |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
514 } |