Mercurial > hg > mgallery
annotate basic.css @ 348:596196f2b0c5 default tip
Improve relative URL translation in header text blobs.
author | Matti Hamalainen <ccr@tnsp.org> |
---|---|
date | Wed, 20 Dec 2023 09:17:55 +0200 |
parents | 2e9326abe254 |
children |
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> |
326 | 5 * (C) Copyright 2015-2022 Tecnic Software productions (TNSP) |
218
024b22f8401a
Add copyright blurb here as well.
Matti Hamalainen <ccr@tnsp.org>
parents:
217
diff
changeset
|
6 */ |
237 | 7 html, body { |
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. */ |
231
2731d2d8400e
Set meta viewport tag and initial scale, and try to "fix" things for some
Matti Hamalainen <ccr@tnsp.org>
parents:
230
diff
changeset
|
9 -webkit-text-size-adjust: 100%; |
2731d2d8400e
Set meta viewport tag and initial scale, and try to "fix" things for some
Matti Hamalainen <ccr@tnsp.org>
parents:
230
diff
changeset
|
10 -moz-text-size-adjust: 100%; |
2731d2d8400e
Set meta viewport tag and initial scale, and try to "fix" things for some
Matti Hamalainen <ccr@tnsp.org>
parents:
230
diff
changeset
|
11 -ms-text-size-adjust: 100%; |
327
8aa86090e85f
Add unprefixed text-size-adjust: 100%
Matti Hamalainen <ccr@tnsp.org>
parents:
326
diff
changeset
|
12 text-size-adjust: 100%; |
212
c3512a94189d
Prevent idiotic Chrome text scaling / boosting.
Matti Hamalainen <ccr@tnsp.org>
parents:
211
diff
changeset
|
13 } |
c3512a94189d
Prevent idiotic Chrome text scaling / boosting.
Matti Hamalainen <ccr@tnsp.org>
parents:
211
diff
changeset
|
14 |
0 | 15 body { |
231
2731d2d8400e
Set meta viewport tag and initial scale, and try to "fix" things for some
Matti Hamalainen <ccr@tnsp.org>
parents:
230
diff
changeset
|
16 font-size: 0.9em; |
207 | 17 font-family: Verdana, Arial, helvetica, sans-serif; |
18 | |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
19 color: white; |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
20 background: #454; |
207 | 21 |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
22 margin: 0; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
23 padding: 0; |
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 | |
244 | 36 .note { |
37 color: #fd0; | |
38 text-shadow: 1px 1px 2px #000; | |
39 } | |
40 | |
0 | 41 |
199
d03fad24f4bc
Make separate containing div elements for gallery and image view page types.
Matti Hamalainen <ccr@tnsp.org>
parents:
198
diff
changeset
|
42 #galleryPage, #imagePage { |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
43 padding: 0; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
44 margin: 0; |
0 | 45 } |
46 | |
199
d03fad24f4bc
Make separate containing div elements for gallery and image view page types.
Matti Hamalainen <ccr@tnsp.org>
parents:
198
diff
changeset
|
47 #imagePage { |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
48 position: absolute; |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
49 top: 0; |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
50 bottom: 0; |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
51 left: 0; |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
52 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
|
53 } |
d03fad24f4bc
Make separate containing div elements for gallery and image view page types.
Matti Hamalainen <ccr@tnsp.org>
parents:
198
diff
changeset
|
54 |
82
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
55 h1 { |
123 | 56 font-size: 1.5em; |
0 | 57 font-family: helvetica; |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
58 margin: 0; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
59 padding: 0.25em; |
0 | 60 color: white; |
61 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
|
62 background: #787; |
0 | 63 |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
64 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
|
65 border-top-right-radius: 0.25em; |
0 | 66 } |
67 | |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
68 #pageInfoHeader { |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
69 background: #565; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
70 margin: 0; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
71 padding: 0.25em; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
72 |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
73 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
|
74 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
|
75 } |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
76 |
102
f8e6e0f2471d
Use CSS id instead of generic selector.
Matti Hamalainen <ccr@tnsp.org>
parents:
94
diff
changeset
|
77 #pageInfoFooter { |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
78 position: fixed; |
203 | 79 |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
80 bottom: 0; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
81 left: 0; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
82 right: 0; |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
83 height: 1.5em; |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
84 |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
85 margin: 0; |
0 | 86 padding: 0.25em; |
87 text-align: right; | |
88 font-size: 0.75em; | |
89 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
|
90 |
328 | 91 background: #232; |
152
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 |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
95 div.imagePageHeader { |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
96 position: fixed; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
97 |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
98 z-index: 12; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
99 |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
100 top: 0; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
101 left: 0; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
102 right: 0; |
0 | 103 } |
104 | |
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
|
105 #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
|
106 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
|
107 text-decoration: none; |
229 | 108 |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
109 position: fixed; |
176
d7d773f6b246
Adjust hovering control button positions, size and opacity.
Matti Hamalainen <ccr@tnsp.org>
parents:
168
diff
changeset
|
110 left: 0.15em; |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
111 z-index: 30; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
112 |
176
d7d773f6b246
Adjust hovering control button positions, size and opacity.
Matti Hamalainen <ccr@tnsp.org>
parents:
168
diff
changeset
|
113 text-align: center; |
d7d773f6b246
Adjust hovering control button positions, size and opacity.
Matti Hamalainen <ccr@tnsp.org>
parents:
168
diff
changeset
|
114 width: 1em; |
d7d773f6b246
Adjust hovering control button positions, size and opacity.
Matti Hamalainen <ccr@tnsp.org>
parents:
168
diff
changeset
|
115 height: 1em; |
237 | 116 font-size: 1.1em; |
152
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 background: black; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
119 color: white; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
120 |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
121 border: 0.2em solid white; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
122 border-radius: 0.3em; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
123 padding: 1em; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
124 } |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
125 |
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
|
126 #pageInfoButton:hover, #pageUpNaviButton:hover { |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
127 background: white; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
128 color: black; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
129 } |
0 | 130 |
197 | 131 #pageInfoButton { |
132 top: 4em; | |
133 } | |
134 | |
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
|
135 #pageUpNaviButton { |
197 | 136 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
|
137 } |
ba02d12cb4be
Add "up" navigation button, to go back to the main gallery from image page.
Matti Hamalainen <ccr@tnsp.org>
parents:
156
diff
changeset
|
138 |
179 | 139 |
0 | 140 /* |
141 * Albums | |
142 */ | |
143 div.albumHeaderText { | |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
144 padding: 0.25em; |
0 | 145 } |
146 | |
20
12916fcdb8b8
Improve the non-tabled mode.
Matti Hamalainen <ccr@tnsp.org>
parents:
18
diff
changeset
|
147 .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
|
148 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
|
149 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
|
150 width: 100%; |
156 | 151 margin-bottom: 1em; |
104 | 152 display: flex; |
153 flex-wrap: wrap; | |
0 | 154 } |
155 | |
235
028291a78acb
Get rid of the "use tables" option.
Matti Hamalainen <ccr@tnsp.org>
parents:
231
diff
changeset
|
156 .galleryEntry { |
227
a57b5fa51e07
Attempt to get rid of the hard-coded pixel sizes for thumbnails in the stylesheet.
Matti Hamalainen <ccr@tnsp.org>
parents:
225
diff
changeset
|
157 width: 12em; |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
158 padding: 1em; |
0 | 159 text-align: center; |
160 } | |
161 | |
235
028291a78acb
Get rid of the "use tables" option.
Matti Hamalainen <ccr@tnsp.org>
parents:
231
diff
changeset
|
162 .galleryEntry img { |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
163 width: 100%; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
164 } |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
165 |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
166 .galleryTable + .imageTable { |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
167 border-top: 2px solid #232; |
0 | 168 } |
169 | |
20
12916fcdb8b8
Improve the non-tabled mode.
Matti Hamalainen <ccr@tnsp.org>
parents:
18
diff
changeset
|
170 .galleryTable a, .galleryTable a:visited { |
0 | 171 text-decoration: none; |
172 color: white; | |
173 outline: 0; | |
174 } | |
175 | |
20
12916fcdb8b8
Improve the non-tabled mode.
Matti Hamalainen <ccr@tnsp.org>
parents:
18
diff
changeset
|
176 .galleryTable a:hover, .galleryTable a:active, .galleryTable a:focus { |
0 | 177 text-shadow: 1px 1px 2px #000; |
178 text-decoration: underline; | |
179 } | |
180 | |
235
028291a78acb
Get rid of the "use tables" option.
Matti Hamalainen <ccr@tnsp.org>
parents:
231
diff
changeset
|
181 .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; |
258
c5a5899f4869
Minor stylesheet adjustments.
Matti Hamalainen <ccr@tnsp.org>
parents:
244
diff
changeset
|
230 min-width: 8em; |
c5a5899f4869
Minor stylesheet adjustments.
Matti Hamalainen <ccr@tnsp.org>
parents:
244
diff
changeset
|
231 width: 10%; |
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; |
227
a57b5fa51e07
Attempt to get rid of the hard-coded pixel sizes for thumbnails in the stylesheet.
Matti Hamalainen <ccr@tnsp.org>
parents:
225
diff
changeset
|
259 width: 85%; |
82
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 |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
263 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
|
264 z-index: 1; |
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 |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
267 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
|
268 opacity: 0; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
269 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
|
270 z-index: 10; |
0 | 271 } |
272 | |
82
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
273 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
|
274 opacity: 1; |
0 | 275 } |
276 | |
82
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
277 |
180
05fba4ce0b5a
Add #imageImageBox style def.
Matti Hamalainen <ccr@tnsp.org>
parents:
179
diff
changeset
|
278 #imageImageBox { |
215
23995179ecd8
Use flexbox for centering the image on image pages.
Matti Hamalainen <ccr@tnsp.org>
parents:
213
diff
changeset
|
279 position: absolute; |
23995179ecd8
Use flexbox for centering the image on image pages.
Matti Hamalainen <ccr@tnsp.org>
parents:
213
diff
changeset
|
280 top: 0; |
23995179ecd8
Use flexbox for centering the image on image pages.
Matti Hamalainen <ccr@tnsp.org>
parents:
213
diff
changeset
|
281 left: 0; |
23995179ecd8
Use flexbox for centering the image on image pages.
Matti Hamalainen <ccr@tnsp.org>
parents:
213
diff
changeset
|
282 right: 0; |
23995179ecd8
Use flexbox for centering the image on image pages.
Matti Hamalainen <ccr@tnsp.org>
parents:
213
diff
changeset
|
283 bottom: 0; |
23995179ecd8
Use flexbox for centering the image on image pages.
Matti Hamalainen <ccr@tnsp.org>
parents:
213
diff
changeset
|
284 |
23995179ecd8
Use flexbox for centering the image on image pages.
Matti Hamalainen <ccr@tnsp.org>
parents:
213
diff
changeset
|
285 display: flex; |
23995179ecd8
Use flexbox for centering the image on image pages.
Matti Hamalainen <ccr@tnsp.org>
parents:
213
diff
changeset
|
286 align-items: center; |
23995179ecd8
Use flexbox for centering the image on image pages.
Matti Hamalainen <ccr@tnsp.org>
parents:
213
diff
changeset
|
287 justify-content: center; |
180
05fba4ce0b5a
Add #imageImageBox style def.
Matti Hamalainen <ccr@tnsp.org>
parents:
179
diff
changeset
|
288 } |
05fba4ce0b5a
Add #imageImageBox style def.
Matti Hamalainen <ccr@tnsp.org>
parents:
179
diff
changeset
|
289 |
203 | 290 |
82
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
291 #imageImage { |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
292 position: relative; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
293 z-index: 5; |
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 |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
296 div.imageCtrl * img { |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
297 position: absolute; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
298 top: 40%; |
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 |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
302 |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
303 div.albumTitle, div.imageCaption { |
0 | 304 text-align: center; |
305 text-shadow: 1px 1px 2px black; | |
306 padding: 0.5em; | |
307 } | |
308 | |
24 | 309 .galleryEntry div.imageCaption { |
0 | 310 } |
311 | |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
312 #pageImageCaption { |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
313 position: absolute; |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
314 bottom: 1.5em; |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
315 left: 0; |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
316 right: 0; |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
317 height: 2em; |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
318 background: #350; |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
319 border-top: 1px solid black; |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
320 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
|
321 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
|
322 } |
0 | 323 |
197 | 324 #infoBox { |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
325 position: fixed; |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
326 bottom: 0; |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
327 left: 0.1em; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
328 right: 0.1em; |
82
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
329 height: auto; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
330 min-height: 5em; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
331 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
|
332 |
0 | 333 text-align: center; |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
334 margin: 0; |
156 | 335 padding-top: 0.5em; |
336 padding-bottom: 2em; | |
0 | 337 border: 0.2em solid white; |
338 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
|
339 |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
340 opacity: 0; |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
341 z-index: 15; |
0 | 342 } |
343 | |
197 | 344 #infoBox:hover { |
82
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
345 opacity: 1; |
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 |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
348 |
94
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
349 #imageLink { |
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
350 position: absolute; |
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
351 left: 0; |
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
352 right: 0; |
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
353 bottom: 0; |
155 | 354 |
94
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
355 background: white; |
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
356 color: black; |
155 | 357 |
94
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
358 text-shadow: none; |
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
359 text-decoration: none; |
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
360 font-size: 1.25em; |
155 | 361 |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
362 padding: 0.5em; |
94
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 |
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
365 |
0 | 366 span.infoDateTime { |
367 display: block; | |
368 color: white; | |
369 font-weight: bold; | |
370 text-shadow: 1px 1px 2px black; | |
371 } | |
372 | |
40 | 373 |
0 | 374 /* |
40 | 375 * Navigation controls |
0 | 376 */ |
3
c85f630a4198
Improve bread crumb navigation by making the current album a link as well.
Matti Hamalainen <ccr@tnsp.org>
parents:
0
diff
changeset
|
377 .naviBreadCrumbItem { |
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 |
c85f630a4198
Improve bread crumb navigation by making the current album a link as well.
Matti Hamalainen <ccr@tnsp.org>
parents:
0
diff
changeset
|
380 .naviBreadCrumbCurr { |
244 | 381 color: #fd0; |
0 | 382 } |
383 | |
3
c85f630a4198
Improve bread crumb navigation by making the current album a link as well.
Matti Hamalainen <ccr@tnsp.org>
parents:
0
diff
changeset
|
384 .naviBreadCrumbSep:before { |
0 | 385 content: " → "; |
386 color: #0f0; | |
387 font-weight: bold; | |
388 font-size: 1.5em; | |
389 } | |
390 | |
118
6739c52e110c
Change naviBreadCrumbs to CSS id instead of class.
Matti Hamalainen <ccr@tnsp.org>
parents:
116
diff
changeset
|
391 #naviBreadCrumbs { |
0 | 392 text-shadow: 1px 1px 1px black; |
393 padding: 0.5em; | |
394 padding-top: 0; | |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
395 font-size: 1.25em; |
0 | 396 |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
397 background: #676; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
398 box-shadow: 0px 2px 4px -4px black; |
0 | 399 } |
44
bc9da3b71888
Implement imgur-style image zoom/de-zoom via image click/enter.
Matti Hamalainen <ccr@tnsp.org>
parents:
42
diff
changeset
|
400 |
bc9da3b71888
Implement imgur-style image zoom/de-zoom via image click/enter.
Matti Hamalainen <ccr@tnsp.org>
parents:
42
diff
changeset
|
401 |
48
5a2dd41ff7ad
Initial implementation of language selector.
Matti Hamalainen <ccr@tnsp.org>
parents:
44
diff
changeset
|
402 #languages { |
5a2dd41ff7ad
Initial implementation of language selector.
Matti Hamalainen <ccr@tnsp.org>
parents:
44
diff
changeset
|
403 position: absolute; |
135 | 404 right: 0.5em; |
405 top: 0.5em; | |
73
5e98fe999fac
Adjust language selector CSS.
Matti Hamalainen <ccr@tnsp.org>
parents:
72
diff
changeset
|
406 background: black; |
5e98fe999fac
Adjust language selector CSS.
Matti Hamalainen <ccr@tnsp.org>
parents:
72
diff
changeset
|
407 border-radius: 0.35em; |
135 | 408 padding: 0.5em; |
48
5a2dd41ff7ad
Initial implementation of language selector.
Matti Hamalainen <ccr@tnsp.org>
parents:
44
diff
changeset
|
409 } |
116
7964b6a27f8a
Adjust language selection box.
Matti Hamalainen <ccr@tnsp.org>
parents:
110
diff
changeset
|
410 |
7964b6a27f8a
Adjust language selection box.
Matti Hamalainen <ccr@tnsp.org>
parents:
110
diff
changeset
|
411 #languages a { |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
412 display: inline-block; |
116
7964b6a27f8a
Adjust language selection box.
Matti Hamalainen <ccr@tnsp.org>
parents:
110
diff
changeset
|
413 padding: 0.5em; |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
414 margin: 0.1em; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
415 background: white; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
416 color: black; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
417 border-radius: 0.35em; |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
418 text-align: center; |
116
7964b6a27f8a
Adjust language selection box.
Matti Hamalainen <ccr@tnsp.org>
parents:
110
diff
changeset
|
419 } |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
420 |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
421 |
213
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
422 /* |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
423 * Mobile device rules via media queries |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
424 */ |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
425 @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
|
426 |
225 | 427 /* |
428 * Orientation related | |
429 */ | |
213
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
430 @media (orientation: landscape) { |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
431 body { |
231
2731d2d8400e
Set meta viewport tag and initial scale, and try to "fix" things for some
Matti Hamalainen <ccr@tnsp.org>
parents:
230
diff
changeset
|
432 font-size: 1em; |
213
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 } |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
435 |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
436 |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
437 @media (orientation: portrait) { |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
438 body { |
231
2731d2d8400e
Set meta viewport tag and initial scale, and try to "fix" things for some
Matti Hamalainen <ccr@tnsp.org>
parents:
230
diff
changeset
|
439 font-size: 1.4em; |
213
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 |
235
028291a78acb
Get rid of the "use tables" option.
Matti Hamalainen <ccr@tnsp.org>
parents:
231
diff
changeset
|
442 .galleryEntry { |
213
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
443 width: 40%; |
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 |
215
23995179ecd8
Use flexbox for centering the image on image pages.
Matti Hamalainen <ccr@tnsp.org>
parents:
213
diff
changeset
|
446 #pageInfoHeader, h1 { |
213
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
447 font-size: 1.25em; |
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 |
228
a0a1fe8d2fe0
Commonize some CSS settings for mobile landscape/portrait.
Matti Hamalainen <ccr@tnsp.org>
parents:
227
diff
changeset
|
450 } |
a0a1fe8d2fe0
Commonize some CSS settings for mobile landscape/portrait.
Matti Hamalainen <ccr@tnsp.org>
parents:
227
diff
changeset
|
451 |
236 | 452 |
453 /* | |
454 * Common rules | |
455 */ | |
228
a0a1fe8d2fe0
Commonize some CSS settings for mobile landscape/portrait.
Matti Hamalainen <ccr@tnsp.org>
parents:
227
diff
changeset
|
456 #pageInfoButton, #pageUpNaviButton { |
a0a1fe8d2fe0
Commonize some CSS settings for mobile landscape/portrait.
Matti Hamalainen <ccr@tnsp.org>
parents:
227
diff
changeset
|
457 font-size: 1.5em; |
a0a1fe8d2fe0
Commonize some CSS settings for mobile landscape/portrait.
Matti Hamalainen <ccr@tnsp.org>
parents:
227
diff
changeset
|
458 bottom: 3em; |
213
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
459 } |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
460 |
236 | 461 |
225 | 462 div.imageCtrl a img { |
237 | 463 top: 3%; |
225 | 464 } |
203 | 465 |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
466 div.albumTitle, div.imageCaption { |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
467 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
|
468 } |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
469 |
236 | 470 |
120
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; |
237 | 476 margin: 0; |
477 padding: 0.2em; | |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
478 text-align: right; |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
479 } |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
480 |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
481 #languages a { |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
482 width: 5em; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
483 padding: 1em; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
484 } |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
485 |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
486 #naviBreadCrumbs { |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
487 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
|
488 } |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
489 |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
490 div.albumHeaderText { |
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 |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
493 #pageImageCaption { |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
494 bottom: 0; |
210
0a0a2936d779
Adjust image adjustment etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
209
diff
changeset
|
495 height: 2.5em; |
0a0a2936d779
Adjust image adjustment etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
209
diff
changeset
|
496 overflow: hidden; |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
497 } |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
498 |
237 | 499 #imageImage { |
500 border: none; | |
501 border-radius: 0; | |
502 box-shadow: none; | |
503 } | |
504 | |
505 #imagePage #pageInfoFooter { | |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
506 display: none; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
507 } |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
508 |
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 #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
|
510 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
|
511 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
|
512 } |
ba02d12cb4be
Add "up" navigation button, to go back to the main gallery from image page.
Matti Hamalainen <ccr@tnsp.org>
parents:
156
diff
changeset
|
513 |
ba02d12cb4be
Add "up" navigation button, to go back to the main gallery from image page.
Matti Hamalainen <ccr@tnsp.org>
parents:
156
diff
changeset
|
514 #pageInfoButton { |
213
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
515 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
|
516 } |
ba02d12cb4be
Add "up" navigation button, to go back to the main gallery from image page.
Matti Hamalainen <ccr@tnsp.org>
parents:
156
diff
changeset
|
517 |
ba02d12cb4be
Add "up" navigation button, to go back to the main gallery from image page.
Matti Hamalainen <ccr@tnsp.org>
parents:
156
diff
changeset
|
518 #pageUpNaviButton { |
213
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
519 right: 4em; |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
520 } |
230
6b34b61b956b
Add a horrible kludge for using the info button to display also the image info on mobile.
Matti Hamalainen <ccr@tnsp.org>
parents:
229
diff
changeset
|
521 |
6b34b61b956b
Add a horrible kludge for using the info button to display also the image info on mobile.
Matti Hamalainen <ccr@tnsp.org>
parents:
229
diff
changeset
|
522 #infoBox { |
6b34b61b956b
Add a horrible kludge for using the info button to display also the image info on mobile.
Matti Hamalainen <ccr@tnsp.org>
parents:
229
diff
changeset
|
523 background: black; |
6b34b61b956b
Add a horrible kludge for using the info button to display also the image info on mobile.
Matti Hamalainen <ccr@tnsp.org>
parents:
229
diff
changeset
|
524 display: none; |
6b34b61b956b
Add a horrible kludge for using the info button to display also the image info on mobile.
Matti Hamalainen <ccr@tnsp.org>
parents:
229
diff
changeset
|
525 opacity: 1; |
6b34b61b956b
Add a horrible kludge for using the info button to display also the image info on mobile.
Matti Hamalainen <ccr@tnsp.org>
parents:
229
diff
changeset
|
526 } |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
527 } |
258
c5a5899f4869
Minor stylesheet adjustments.
Matti Hamalainen <ccr@tnsp.org>
parents:
244
diff
changeset
|
528 |
c5a5899f4869
Minor stylesheet adjustments.
Matti Hamalainen <ccr@tnsp.org>
parents:
244
diff
changeset
|
529 |
c5a5899f4869
Minor stylesheet adjustments.
Matti Hamalainen <ccr@tnsp.org>
parents:
244
diff
changeset
|
530 @media screen and (max-width: 400px), screen and (max-height: 400px) { |
c5a5899f4869
Minor stylesheet adjustments.
Matti Hamalainen <ccr@tnsp.org>
parents:
244
diff
changeset
|
531 body { |
c5a5899f4869
Minor stylesheet adjustments.
Matti Hamalainen <ccr@tnsp.org>
parents:
244
diff
changeset
|
532 font-size: 10px; |
c5a5899f4869
Minor stylesheet adjustments.
Matti Hamalainen <ccr@tnsp.org>
parents:
244
diff
changeset
|
533 } |
c5a5899f4869
Minor stylesheet adjustments.
Matti Hamalainen <ccr@tnsp.org>
parents:
244
diff
changeset
|
534 |
c5a5899f4869
Minor stylesheet adjustments.
Matti Hamalainen <ccr@tnsp.org>
parents:
244
diff
changeset
|
535 #pageInfoHeader { |
c5a5899f4869
Minor stylesheet adjustments.
Matti Hamalainen <ccr@tnsp.org>
parents:
244
diff
changeset
|
536 } |
c5a5899f4869
Minor stylesheet adjustments.
Matti Hamalainen <ccr@tnsp.org>
parents:
244
diff
changeset
|
537 } |
c5a5899f4869
Minor stylesheet adjustments.
Matti Hamalainen <ccr@tnsp.org>
parents:
244
diff
changeset
|
538 |