Mercurial > hg > mgallery
annotate basic.css @ 235:028291a78acb
Get rid of the "use tables" option.
author | Matti Hamalainen <ccr@tnsp.org> |
---|---|
date | Tue, 27 Mar 2018 15:12:02 +0300 |
parents | 2731d2d8400e |
children | 9803200bc7f8 |
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. */ |
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%; |
212
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 { |
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
|
15 font-size: 0.9em; |
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; |
229 | 102 |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
103 position: fixed; |
176
d7d773f6b246
Adjust hovering control button positions, size and opacity.
Matti Hamalainen <ccr@tnsp.org>
parents:
168
diff
changeset
|
104 left: 0.15em; |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
105 z-index: 30; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
106 |
176
d7d773f6b246
Adjust hovering control button positions, size and opacity.
Matti Hamalainen <ccr@tnsp.org>
parents:
168
diff
changeset
|
107 text-align: center; |
d7d773f6b246
Adjust hovering control button positions, size and opacity.
Matti Hamalainen <ccr@tnsp.org>
parents:
168
diff
changeset
|
108 width: 1em; |
d7d773f6b246
Adjust hovering control button positions, size and opacity.
Matti Hamalainen <ccr@tnsp.org>
parents:
168
diff
changeset
|
109 height: 1em; |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
110 font-size: 1.25em; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
111 |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
112 background: black; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
113 color: white; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
114 |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
115 border: 0.2em solid white; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
116 border-radius: 0.3em; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
117 padding: 1em; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
118 } |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
119 |
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
|
120 #pageInfoButton:hover, #pageUpNaviButton:hover { |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
121 background: white; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
122 color: black; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
123 } |
0 | 124 |
197 | 125 #pageInfoButton { |
126 top: 4em; | |
127 } | |
128 | |
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
|
129 #pageUpNaviButton { |
197 | 130 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
|
131 } |
ba02d12cb4be
Add "up" navigation button, to go back to the main gallery from image page.
Matti Hamalainen <ccr@tnsp.org>
parents:
156
diff
changeset
|
132 |
179 | 133 |
0 | 134 /* |
135 * Albums | |
136 */ | |
137 div.albumHeaderText { | |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
138 padding: 0.25em; |
0 | 139 } |
140 | |
20
12916fcdb8b8
Improve the non-tabled mode.
Matti Hamalainen <ccr@tnsp.org>
parents:
18
diff
changeset
|
141 .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
|
142 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
|
143 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
|
144 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
|
145 background: #454; |
156 | 146 margin-bottom: 1em; |
104 | 147 display: flex; |
148 flex-wrap: wrap; | |
0 | 149 } |
150 | |
235
028291a78acb
Get rid of the "use tables" option.
Matti Hamalainen <ccr@tnsp.org>
parents:
231
diff
changeset
|
151 .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
|
152 width: 12em; |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
153 padding: 1em; |
0 | 154 text-align: center; |
155 } | |
156 | |
235
028291a78acb
Get rid of the "use tables" option.
Matti Hamalainen <ccr@tnsp.org>
parents:
231
diff
changeset
|
157 .galleryEntry img { |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
158 width: 100%; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
159 } |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
160 |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
161 .galleryTable + .imageTable { |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
162 border-top: 2px solid #232; |
0 | 163 } |
164 | |
20
12916fcdb8b8
Improve the non-tabled mode.
Matti Hamalainen <ccr@tnsp.org>
parents:
18
diff
changeset
|
165 .galleryTable a, .galleryTable a:visited { |
0 | 166 text-decoration: none; |
167 color: white; | |
168 outline: 0; | |
169 } | |
170 | |
20
12916fcdb8b8
Improve the non-tabled mode.
Matti Hamalainen <ccr@tnsp.org>
parents:
18
diff
changeset
|
171 .galleryTable a:hover, .galleryTable a:active, .galleryTable a:focus { |
0 | 172 text-shadow: 1px 1px 2px #000; |
173 text-decoration: underline; | |
174 color: #f00; | |
175 } | |
176 | |
235
028291a78acb
Get rid of the "use tables" option.
Matti Hamalainen <ccr@tnsp.org>
parents:
231
diff
changeset
|
177 .galleryTable .galleryEntry { |
20
12916fcdb8b8
Improve the non-tabled mode.
Matti Hamalainen <ccr@tnsp.org>
parents:
18
diff
changeset
|
178 display: inline-block; |
12916fcdb8b8
Improve the non-tabled mode.
Matti Hamalainen <ccr@tnsp.org>
parents:
18
diff
changeset
|
179 vertical-align: middle; |
12916fcdb8b8
Improve the non-tabled mode.
Matti Hamalainen <ccr@tnsp.org>
parents:
18
diff
changeset
|
180 } |
0 | 181 |
182 | |
183 /* | |
184 * | |
185 */ | |
203 | 186 #pageImageBox { |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
187 position: absolute; |
203 | 188 top: 0; |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
189 bottom: 4.5em; |
203 | 190 left: 0; |
191 right: 0; | |
192 } | |
193 | |
194 | |
177
724fac3d21e9
Use .imageBox class selector instead of more specific div.imageBox.
Matti Hamalainen <ccr@tnsp.org>
parents:
176
diff
changeset
|
195 .imageBox { |
0 | 196 text-align: center; |
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 img, |
150 | 200 div.imageCtrl img { |
0 | 201 border: 0.2em solid black; |
202 border-radius: 0.3em; | |
203 } | |
204 | |
177
724fac3d21e9
Use .imageBox class selector instead of more specific div.imageBox.
Matti Hamalainen <ccr@tnsp.org>
parents:
176
diff
changeset
|
205 .imageBox a:hover img, .imageBox a:active img, .imageBox a:focus img, |
0 | 206 div.imageCtrl a:hover img, div.imageCtrl a:active img, div.imageCtrl a:focus img { |
207 border: 0.2em solid white; | |
208 } | |
209 | |
177
724fac3d21e9
Use .imageBox class selector instead of more specific div.imageBox.
Matti Hamalainen <ccr@tnsp.org>
parents:
176
diff
changeset
|
210 .galleryEntry .imageBox img { |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
211 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
|
212 } |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
213 |
18 | 214 img.albumIcon { |
215 border: 0.2em solid black; | |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
216 border-radius: 0.4em; |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
217 box-shadow: 0px 0px 2px black; |
18 | 218 } |
219 | |
220 a:hover img.albumIcon, a:active img.albumIcon, a:focus img.albumIcon { | |
221 border: 0.2em solid white; | |
0 | 222 } |
223 | |
82
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
224 div.imageCtrl { |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
225 position: absolute; |
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
|
226 min-width: 10em; |
104 | 227 width: 14%; |
82
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
228 top: 0; |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
229 bottom: 0; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
230 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
|
231 } |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
232 |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
233 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
|
234 right: 0; |
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 |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
238 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
|
239 left: 0; |
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 a { |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
243 display: block; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
244 position: absolute; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
245 top: 0; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
246 bottom: 0; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
247 left: 0; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
248 right: 0; |
0 | 249 } |
250 | |
82
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
251 div.imageCtrl a img { |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
252 position: relative; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
253 display: block; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
254 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
|
255 width: 85%; |
82
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
256 } |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
257 |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
258 |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
259 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
|
260 z-index: 1; |
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.prev, div.imageCtrl.next { |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
264 opacity: 0; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
265 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
|
266 z-index: 10; |
0 | 267 } |
268 | |
82
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
269 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
|
270 opacity: 1; |
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 |
180
05fba4ce0b5a
Add #imageImageBox style def.
Matti Hamalainen <ccr@tnsp.org>
parents:
179
diff
changeset
|
274 #imageImageBox { |
215
23995179ecd8
Use flexbox for centering the image on image pages.
Matti Hamalainen <ccr@tnsp.org>
parents:
213
diff
changeset
|
275 position: absolute; |
23995179ecd8
Use flexbox for centering the image on image pages.
Matti Hamalainen <ccr@tnsp.org>
parents:
213
diff
changeset
|
276 top: 0; |
23995179ecd8
Use flexbox for centering the image on image pages.
Matti Hamalainen <ccr@tnsp.org>
parents:
213
diff
changeset
|
277 left: 0; |
23995179ecd8
Use flexbox for centering the image on image pages.
Matti Hamalainen <ccr@tnsp.org>
parents:
213
diff
changeset
|
278 right: 0; |
23995179ecd8
Use flexbox for centering the image on image pages.
Matti Hamalainen <ccr@tnsp.org>
parents:
213
diff
changeset
|
279 bottom: 0; |
23995179ecd8
Use flexbox for centering the image on image pages.
Matti Hamalainen <ccr@tnsp.org>
parents:
213
diff
changeset
|
280 |
23995179ecd8
Use flexbox for centering the image on image pages.
Matti Hamalainen <ccr@tnsp.org>
parents:
213
diff
changeset
|
281 display: flex; |
23995179ecd8
Use flexbox for centering the image on image pages.
Matti Hamalainen <ccr@tnsp.org>
parents:
213
diff
changeset
|
282 align-items: center; |
23995179ecd8
Use flexbox for centering the image on image pages.
Matti Hamalainen <ccr@tnsp.org>
parents:
213
diff
changeset
|
283 justify-content: center; |
180
05fba4ce0b5a
Add #imageImageBox style def.
Matti Hamalainen <ccr@tnsp.org>
parents:
179
diff
changeset
|
284 } |
05fba4ce0b5a
Add #imageImageBox style def.
Matti Hamalainen <ccr@tnsp.org>
parents:
179
diff
changeset
|
285 |
203 | 286 |
82
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
287 #imageImage { |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
288 position: relative; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
289 z-index: 5; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
290 } |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
291 |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
292 div.imageCtrl * img { |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
293 position: absolute; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
294 top: 40%; |
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 |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
297 |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
298 |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
299 div.albumTitle, div.imageCaption { |
0 | 300 text-align: center; |
301 text-shadow: 1px 1px 2px black; | |
302 padding: 0.5em; | |
303 } | |
304 | |
24 | 305 .galleryEntry div.imageCaption { |
0 | 306 } |
307 | |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
308 #pageImageCaption { |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
309 position: absolute; |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
310 bottom: 1.5em; |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
311 left: 0; |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
312 right: 0; |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
313 height: 2em; |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
314 background: #350; |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
315 border-top: 1px solid black; |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
316 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
|
317 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
|
318 } |
0 | 319 |
197 | 320 #infoBox { |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
321 position: fixed; |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
322 bottom: 0; |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
323 left: 0.1em; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
324 right: 0.1em; |
82
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
325 height: auto; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
326 min-height: 5em; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
327 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
|
328 |
0 | 329 text-align: center; |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
330 margin: 0; |
156 | 331 padding-top: 0.5em; |
332 padding-bottom: 2em; | |
0 | 333 border: 0.2em solid white; |
334 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
|
335 |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
336 opacity: 0; |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
337 z-index: 15; |
0 | 338 } |
339 | |
197 | 340 #infoBox:hover { |
82
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
341 opacity: 1; |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
342 } |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
343 |
e0e5e5197bb8
Refactor for somewhat more mobile-bullshit-friendly style and usage.
Matti Hamalainen <ccr@tnsp.org>
parents:
74
diff
changeset
|
344 |
94
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
345 #imageLink { |
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
346 position: absolute; |
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
347 left: 0; |
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
348 right: 0; |
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
349 bottom: 0; |
155 | 350 |
94
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
351 background: white; |
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
352 color: black; |
155 | 353 |
94
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
354 text-shadow: none; |
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
355 text-decoration: none; |
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
356 font-size: 1.25em; |
155 | 357 |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
358 padding: 0.5em; |
94
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
359 } |
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
360 |
1e9a6e773627
Improve best quality/"full size" link CSS styling.
Matti Hamalainen <ccr@tnsp.org>
parents:
91
diff
changeset
|
361 |
0 | 362 span.infoDateTime { |
363 display: block; | |
364 color: white; | |
365 font-weight: bold; | |
366 text-shadow: 1px 1px 2px black; | |
367 } | |
368 | |
40 | 369 |
0 | 370 /* |
40 | 371 * Navigation controls |
0 | 372 */ |
3
c85f630a4198
Improve bread crumb navigation by making the current album a link as well.
Matti Hamalainen <ccr@tnsp.org>
parents:
0
diff
changeset
|
373 .naviBreadCrumbItem { |
c85f630a4198
Improve bread crumb navigation by making the current album a link as well.
Matti Hamalainen <ccr@tnsp.org>
parents:
0
diff
changeset
|
374 } |
c85f630a4198
Improve bread crumb navigation by making the current album a link as well.
Matti Hamalainen <ccr@tnsp.org>
parents:
0
diff
changeset
|
375 |
c85f630a4198
Improve bread crumb navigation by making the current album a link as well.
Matti Hamalainen <ccr@tnsp.org>
parents:
0
diff
changeset
|
376 .naviBreadCrumbCurr { |
0 | 377 color: red; |
378 } | |
379 | |
3
c85f630a4198
Improve bread crumb navigation by making the current album a link as well.
Matti Hamalainen <ccr@tnsp.org>
parents:
0
diff
changeset
|
380 .naviBreadCrumbSep:before { |
0 | 381 content: " → "; |
382 color: #0f0; | |
383 font-weight: bold; | |
384 font-size: 1.5em; | |
385 } | |
386 | |
118
6739c52e110c
Change naviBreadCrumbs to CSS id instead of class.
Matti Hamalainen <ccr@tnsp.org>
parents:
116
diff
changeset
|
387 #naviBreadCrumbs { |
0 | 388 text-shadow: 1px 1px 1px black; |
389 padding: 0.5em; | |
390 padding-top: 0; | |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
391 font-size: 1.25em; |
0 | 392 |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
393 background: #676; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
394 box-shadow: 0px 2px 4px -4px black; |
0 | 395 } |
44
bc9da3b71888
Implement imgur-style image zoom/de-zoom via image click/enter.
Matti Hamalainen <ccr@tnsp.org>
parents:
42
diff
changeset
|
396 |
bc9da3b71888
Implement imgur-style image zoom/de-zoom via image click/enter.
Matti Hamalainen <ccr@tnsp.org>
parents:
42
diff
changeset
|
397 |
48
5a2dd41ff7ad
Initial implementation of language selector.
Matti Hamalainen <ccr@tnsp.org>
parents:
44
diff
changeset
|
398 #languages { |
5a2dd41ff7ad
Initial implementation of language selector.
Matti Hamalainen <ccr@tnsp.org>
parents:
44
diff
changeset
|
399 position: absolute; |
135 | 400 right: 0.5em; |
401 top: 0.5em; | |
73
5e98fe999fac
Adjust language selector CSS.
Matti Hamalainen <ccr@tnsp.org>
parents:
72
diff
changeset
|
402 background: black; |
5e98fe999fac
Adjust language selector CSS.
Matti Hamalainen <ccr@tnsp.org>
parents:
72
diff
changeset
|
403 border-radius: 0.35em; |
135 | 404 padding: 0.5em; |
48
5a2dd41ff7ad
Initial implementation of language selector.
Matti Hamalainen <ccr@tnsp.org>
parents:
44
diff
changeset
|
405 } |
116
7964b6a27f8a
Adjust language selection box.
Matti Hamalainen <ccr@tnsp.org>
parents:
110
diff
changeset
|
406 |
7964b6a27f8a
Adjust language selection box.
Matti Hamalainen <ccr@tnsp.org>
parents:
110
diff
changeset
|
407 #languages a { |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
408 display: inline-block; |
116
7964b6a27f8a
Adjust language selection box.
Matti Hamalainen <ccr@tnsp.org>
parents:
110
diff
changeset
|
409 padding: 0.5em; |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
410 margin: 0.1em; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
411 background: white; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
412 color: black; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
413 border-radius: 0.35em; |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
414 text-align: center; |
116
7964b6a27f8a
Adjust language selection box.
Matti Hamalainen <ccr@tnsp.org>
parents:
110
diff
changeset
|
415 } |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
416 |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
417 |
213
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
418 /* |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
419 * Mobile device rules via media queries |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
420 */ |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
421 @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
|
422 |
225 | 423 /* |
424 * Orientation related | |
425 */ | |
213
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
426 @media (orientation: landscape) { |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
427 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
|
428 font-size: 1em; |
213
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
429 } |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
430 } |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
431 |
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 @media (orientation: portrait) { |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
434 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
|
435 font-size: 1.4em; |
213
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 |
235
028291a78acb
Get rid of the "use tables" option.
Matti Hamalainen <ccr@tnsp.org>
parents:
231
diff
changeset
|
438 .galleryEntry { |
213
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
439 width: 40%; |
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 |
215
23995179ecd8
Use flexbox for centering the image on image pages.
Matti Hamalainen <ccr@tnsp.org>
parents:
213
diff
changeset
|
442 #pageInfoHeader, h1 { |
213
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
443 font-size: 1.25em; |
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 |
228
a0a1fe8d2fe0
Commonize some CSS settings for mobile landscape/portrait.
Matti Hamalainen <ccr@tnsp.org>
parents:
227
diff
changeset
|
446 } |
a0a1fe8d2fe0
Commonize some CSS settings for mobile landscape/portrait.
Matti Hamalainen <ccr@tnsp.org>
parents:
227
diff
changeset
|
447 |
a0a1fe8d2fe0
Commonize some CSS settings for mobile landscape/portrait.
Matti Hamalainen <ccr@tnsp.org>
parents:
227
diff
changeset
|
448 #pageInfoButton, #pageUpNaviButton { |
a0a1fe8d2fe0
Commonize some CSS settings for mobile landscape/portrait.
Matti Hamalainen <ccr@tnsp.org>
parents:
227
diff
changeset
|
449 font-size: 1.5em; |
a0a1fe8d2fe0
Commonize some CSS settings for mobile landscape/portrait.
Matti Hamalainen <ccr@tnsp.org>
parents:
227
diff
changeset
|
450 bottom: 3em; |
213
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
451 } |
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
452 |
225 | 453 /* |
454 * Common rules | |
455 */ | |
456 div.imageCtrl a img { | |
457 top: 5%; | |
458 } | |
203 | 459 |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
460 div.albumTitle, div.imageCaption { |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
461 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
|
462 } |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
463 |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
464 #languages { |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
465 position: relative; |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
466 top: 0; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
467 right: 0; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
468 left: 0; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
469 text-align: right; |
120
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 |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
472 #languages a { |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
473 width: 5em; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
474 padding: 1em; |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
475 } |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
476 |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
477 #naviBreadCrumbs { |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
478 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
|
479 } |
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
480 |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
481 div.albumHeaderText { |
217
3209568d2a69
Adjust album header text font size.
Matti Hamalainen <ccr@tnsp.org>
parents:
216
diff
changeset
|
482 font-size: 1.25em; |
209
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
483 } |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
484 |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
485 #pageImageCaption { |
671b7cfebf87
Various fixes and adjustments to style.
Matti Hamalainen <ccr@tnsp.org>
parents:
207
diff
changeset
|
486 bottom: 0; |
210
0a0a2936d779
Adjust image adjustment etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
209
diff
changeset
|
487 height: 2.5em; |
0a0a2936d779
Adjust image adjustment etc.
Matti Hamalainen <ccr@tnsp.org>
parents:
209
diff
changeset
|
488 overflow: hidden; |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
489 } |
152
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
490 |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
491 #pageInfoFooter { |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
492 display: none; |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
493 } |
606b05c31d5e
Improve mobile experience and also desktop image display, maybe.
Matti Hamalainen <ccr@tnsp.org>
parents:
150
diff
changeset
|
494 |
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
|
495 #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
|
496 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
|
497 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
|
498 } |
ba02d12cb4be
Add "up" navigation button, to go back to the main gallery from image page.
Matti Hamalainen <ccr@tnsp.org>
parents:
156
diff
changeset
|
499 |
ba02d12cb4be
Add "up" navigation button, to go back to the main gallery from image page.
Matti Hamalainen <ccr@tnsp.org>
parents:
156
diff
changeset
|
500 #pageInfoButton { |
213
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
501 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
|
502 } |
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 |
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 #pageUpNaviButton { |
213
8938fef384a2
CSS adjustments, use nesting media query blocks.
Matti Hamalainen <ccr@tnsp.org>
parents:
212
diff
changeset
|
505 right: 4em; |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
506 } |
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
|
507 |
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
|
508 #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
|
509 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
|
510 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
|
511 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
|
512 } |
120
d1ed6213f6d2
Various improvements/changes to CSS and usability on mobile devices.
Matti Hamalainen <ccr@tnsp.org>
parents:
118
diff
changeset
|
513 } |