]>
Commit | Line | Data |
---|---|---|
e04c7a62 JF |
1 | /* iPhone.css - iPhone Interface Cascading Style Sheet |
2 | * Copyright (C) 2007-2008 Jay Freeman (saurik) | |
3 | */ | |
4 | ||
5 | /* | |
6 | * Redistribution and use in source and binary | |
7 | * forms, with or without modification, are permitted | |
8 | * provided that the following conditions are met: | |
9 | * | |
10 | * 1. Redistributions of source code must retain the | |
11 | * above copyright notice, this list of conditions | |
12 | * and the following disclaimer. | |
13 | * 2. Redistributions in binary form must reproduce the | |
14 | * above copyright notice, this list of conditions | |
15 | * and the following disclaimer in the documentation | |
16 | * and/or other materials provided with the | |
17 | * distribution. | |
18 | * 3. The name of the author may not be used to endorse | |
19 | * or promote products derived from this software | |
20 | * without specific prior written permission. | |
21 | * | |
22 | * THIS SOFTWARE IS PROVIDED BY THE AUTHOR ``AS IS'' | |
23 | * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, | |
24 | * BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF | |
25 | * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE | |
26 | * ARE DISCLAIMED. IN NO EVENT SHALL THE AUTHOR BE | |
27 | * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, | |
28 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT | |
29 | * NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR | |
30 | * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS | |
31 | * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF | |
32 | * LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR | |
33 | * TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN | |
34 | * ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF | |
35 | * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. | |
36 | */ | |
37 | ||
6f1a15d9 JF |
38 | /* .clearfix {{{ */ |
39 | .clearfix:after { | |
40 | content: "."; | |
41 | display: block; | |
42 | clear: both; | |
43 | visibility: hidden; | |
44 | line-height: 0; | |
45 | height: 0; | |
46 | } | |
47 | ||
48 | .clearfix { | |
6f1a15d9 JF |
49 | display: block; |
50 | } | |
6f1a15d9 JF |
51 | /* }}} */ |
52 | ||
53 | * { | |
680eb135 JF |
54 | border: 0; |
55 | -webkit-border-radius: 0; | |
6f1a15d9 JF |
56 | box-sizing: border-box; |
57 | -moz-box-sizing: border-box; | |
680eb135 JF |
58 | font-family: inherit; |
59 | font-size: 100%; | |
60 | font-style: inherit; | |
61 | font-weight: inherit; | |
62 | margin: 0; | |
63 | outline: 0; | |
64 | padding: 0; | |
65 | vertical-align: baseline; | |
66 | } | |
67 | ||
68 | select { | |
69 | border: 1px solid #999999; | |
6f1a15d9 JF |
70 | } |
71 | ||
72 | body { | |
73 | font-family: Helvetica; | |
6f1a15d9 JF |
74 | -webkit-text-size-adjust: none; |
75 | -webkit-user-select: none; | |
76 | } | |
77 | ||
680eb135 JF |
78 | body.pinstripe { |
79 | background: #c7ced5 url(pinstripes.png); | |
6f1a15d9 JF |
80 | } |
81 | ||
680eb135 JF |
82 | dialog { |
83 | display: block; | |
6f1a15d9 JF |
84 | position: absolute; |
85 | width: 100%; | |
86 | } | |
87 | ||
680eb135 JF |
88 | dialog > panel { |
89 | display: block; | |
90 | padding: 1px 0; | |
6f1a15d9 JF |
91 | } |
92 | ||
93 | a { | |
680eb135 | 94 | color: inherit; |
6f1a15d9 JF |
95 | text-decoration: none; |
96 | text-underline-style: dotted; | |
97 | } | |
98 | ||
680eb135 JF |
99 | a { |
100 | color: blue; | |
101 | } | |
102 | ||
6f1a15d9 JF |
103 | strong { |
104 | font-weight: bold | |
105 | } | |
106 | ||
680eb135 JF |
107 | pre, tt { |
108 | font-family: monospace; | |
109 | } | |
110 | ||
affeffc7 JF |
111 | pre { |
112 | letter-spacing: -2px; | |
113 | } | |
114 | ||
6f1a15d9 | 115 | /* #toolbar {{{ */ |
680eb135 | 116 | dialog > toolbar { |
6f1a15d9 JF |
117 | background: url(toolbar.png) #6d84a2 repeat-x; |
118 | border-bottom: 1px solid #2d3642; | |
119 | height: 45px; | |
120 | padding: 10px; | |
121 | } | |
122 | ||
680eb135 | 123 | dialog > toolbar > h1 { |
6f1a15d9 JF |
124 | color: #ffffff; |
125 | font-size: 20px; | |
126 | font-weight: bold; | |
127 | height: 100%; | |
128 | margin: 1px auto 0 auto; | |
129 | text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0; | |
130 | text-align: center; | |
131 | white-space: nowrap; | |
132 | } | |
133 | /* }}} */ | |
134 | /* (back|forward)-button {{{ */ | |
680eb135 JF |
135 | dialog > toolbar > a.back-button, |
136 | dialog > toolbar > a.forward-button { | |
6f1a15d9 JF |
137 | color: #ffffff; |
138 | font-size: 12px; | |
139 | font-weight: bold; | |
140 | height: 30px; | |
141 | line-height: 30px; | |
142 | margin-top: -28px; | |
143 | padding: 0 3px; | |
144 | text-decoration: none; | |
145 | text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0; | |
146 | white-space: nowrap; | |
147 | } | |
148 | ||
680eb135 | 149 | dialog > toolbar > a.back-button { |
6f1a15d9 JF |
150 | -webkit-border-image: url(backButton.png) 0 8 0 14; |
151 | border-width: 0 8px 0 14px; | |
152 | float: left; | |
153 | } | |
154 | ||
680eb135 | 155 | dialog > toolbar > a.forward-button { |
6f1a15d9 JF |
156 | -webkit-border-image: url(toolButton.png) 0 5 0 5; |
157 | border-width: 0 5px; | |
158 | float: right; | |
159 | } | |
160 | /* }}} */ | |
161 | /* fieldset {{{ */ | |
680eb135 | 162 | dialog > panel > block { |
9487f027 JF |
163 | background-color: #c7ced5; |
164 | border-bottom: 1px solid #999999; | |
165 | border-top: 1px solid #999999; | |
166 | display: block; | |
167 | font-size: 16px; | |
168 | margin: 9px 10px; | |
169 | padding: 0 10px; | |
170 | } | |
171 | ||
680eb135 | 172 | dialog > panel > block > hr { |
9487f027 JF |
173 | border-width: 1px 0 0 0; |
174 | } | |
175 | ||
680eb135 | 176 | dialog > panel > fieldset { |
9487f027 | 177 | background-color: #ffffff; |
6f1a15d9 JF |
178 | border: 1px solid #999999; |
179 | -webkit-border-radius: 10px; | |
180 | font-size: 16px; | |
181 | margin: 9px; | |
6f1a15d9 JF |
182 | } |
183 | ||
680eb135 | 184 | dialog > panel > label { |
6f1a15d9 JF |
185 | display: block; |
186 | margin: 13px 0 -4px 27px; | |
187 | line-height: 24px; | |
188 | font-size: inherit; | |
189 | font-weight: bold; | |
190 | color: #4d4d70; | |
191 | text-shadow: rgba(255, 255, 255, 0.75) 1px 1px 0; | |
192 | } | |
193 | ||
680eb135 JF |
194 | fieldset > a, |
195 | fieldset > div, | |
196 | fieldset > textarea { | |
6f1a15d9 JF |
197 | border-top: 1px solid #999999; |
198 | min-height: 19px; | |
affeffc7 | 199 | padding: 12px 17px 11px 17px; |
6f1a15d9 JF |
200 | } |
201 | ||
680eb135 JF |
202 | fieldset > a:first-child, |
203 | fieldset > div:first-child { | |
6f1a15d9 JF |
204 | border-top: none; |
205 | } | |
206 | ||
680eb135 JF |
207 | fieldset > a img.icon, |
208 | fieldset > div img.icon { | |
6f1a15d9 JF |
209 | height: auto; |
210 | margin: -13px 5px -10px -10px; | |
211 | max-height: 30px; | |
212 | min-width: 30px; | |
6f1a15d9 JF |
213 | width: 30px; |
214 | } | |
215 | ||
680eb135 JF |
216 | panel > block > p, |
217 | fieldset > div > p { | |
7d2ac47f | 218 | margin: 11px 0; |
6f1a15d9 JF |
219 | text-align: center; |
220 | } | |
221 | ||
680eb135 | 222 | fieldset > div > ul { |
affeffc7 JF |
223 | margin-left: -20px; |
224 | } | |
225 | ||
680eb135 JF |
226 | fieldset > div > p:first-child, |
227 | fieldset > div > ul:first-child { | |
6f1a15d9 JF |
228 | margin-top: 0; |
229 | } | |
230 | ||
680eb135 JF |
231 | fieldset > div > p:last-child, |
232 | fieldset > div > ul:last-child { | |
7d2ac47f JF |
233 | margin-bottom: 0; |
234 | } | |
235 | ||
680eb135 JF |
236 | dialog > fieldset > a { |
237 | background: 295px 13px no-repeat url(listArrow.png); | |
238 | } | |
239 | ||
240 | dialog > panel > fieldset > a { | |
365d45da | 241 | background: 275px 13px no-repeat url(listArrow.png); |
680eb135 JF |
242 | } |
243 | ||
244 | fieldset > a { | |
6f1a15d9 JF |
245 | color: inherit; |
246 | display: block; | |
247 | } | |
248 | ||
680eb135 JF |
249 | dialog > fieldset > div > select { |
250 | background: none; | |
251 | margin: -13px -17px -13px 86px; | |
252 | border-left: 0; | |
253 | border-right: 0; | |
254 | height: 44px; | |
255 | width: 217px; | |
256 | } | |
257 | ||
258 | dialog > panel > fieldset > div > select { | |
affeffc7 | 259 | margin: -5px -10px -5px 86px; |
680eb135 | 260 | -webkit-border-radius: 5px; |
6f1a15d9 JF |
261 | width: 190px; |
262 | } | |
263 | ||
680eb135 JF |
264 | fieldset > textarea, |
265 | fieldset > div > input { | |
6f1a15d9 | 266 | background: none; |
680eb135 JF |
267 | } |
268 | ||
269 | fieldset > textarea, | |
270 | fieldset > div > input, | |
271 | fieldset > div > select, | |
272 | fieldset > a > label + div, | |
273 | fieldset > div > label + div { | |
6f1a15d9 | 274 | color: #193250; |
680eb135 JF |
275 | } |
276 | ||
277 | fieldset > textarea, | |
278 | fieldset > div > input, | |
279 | fieldset > div > select { | |
6f1a15d9 | 280 | font-size: 16px; |
680eb135 JF |
281 | } |
282 | ||
283 | fieldset > div > input { | |
284 | border: none; | |
6f1a15d9 | 285 | height: 45px; |
affeffc7 JF |
286 | margin: -13px -18px; |
287 | padding: 13px 10px 0 111px; | |
680eb135 JF |
288 | } |
289 | ||
290 | fieldset > textarea { | |
291 | padding: 10px; | |
292 | width: 320px; | |
293 | } | |
294 | ||
295 | dialog > panel > fieldset > div > input { | |
6f1a15d9 JF |
296 | width: 302px; |
297 | } | |
298 | ||
680eb135 JF |
299 | dialog > fieldset > div > input { |
300 | width: 320px; | |
301 | } | |
302 | ||
303 | fieldset > div > input[type="submit"] { | |
6f1a15d9 JF |
304 | border-width: 0 12px; |
305 | color: #000000; | |
306 | display: block; | |
307 | font-size: 20px; | |
308 | font-weight: bold; | |
309 | padding: 10px; | |
310 | text-align: center; | |
311 | -webkit-border-image: url(whiteButton.png) 0 12 0 12; | |
312 | } | |
313 | ||
680eb135 JF |
314 | fieldset > a > label, |
315 | fieldset > div > label { | |
6f1a15d9 | 316 | font-weight: bold; |
affeffc7 | 317 | padding: 1px 0 0 0; |
6f1a15d9 JF |
318 | position: absolute; |
319 | } | |
320 | ||
680eb135 | 321 | fieldset > a > label + div { |
6f1a15d9 JF |
322 | margin-right: 16px; |
323 | } | |
324 | ||
680eb135 JF |
325 | dialog > fieldset > a > label + div, |
326 | dialog > fieldset > div > label + div { | |
327 | margin-left: 94px; | |
328 | } | |
329 | ||
330 | dialog > panel > fieldset > a > label + div, | |
331 | dialog > panel > fieldset > div > label + div { | |
affeffc7 | 332 | float: right; |
6f1a15d9 JF |
333 | text-align: right; |
334 | } | |
affeffc7 | 335 | |
680eb135 | 336 | dialog > panel > img { |
affeffc7 JF |
337 | display: block; |
338 | margin: 9px auto 4px auto; | |
339 | height: auto; | |
340 | width: 300px; | |
341 | } | |
6f1a15d9 | 342 | /* }}} */ |