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