Mercurial > ~darius > hgwebdir.cgi > iwws
comparison static/themes/default/theme.css @ 0:2d9ee2b3ae82
Initial commit of iWWS.
author | Daniel O'Connor <darius@dons.net.au> |
---|---|
date | Mon, 15 Aug 2011 17:44:56 +0930 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:2d9ee2b3ae82 |
---|---|
1 body { | |
2 background: #000; | |
3 color: #ddd; | |
4 } | |
5 #jqt > * { | |
6 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#5e5e65)); | |
7 } | |
8 #jqt h1, #jqt h2 { | |
9 font: bold 18px "Helvetica Neue", Helvetica; | |
10 text-shadow: rgba(255,255,255,.2) 0 1px 1px; | |
11 color: #000; | |
12 margin: 10px 20px 5px; | |
13 } | |
14 /* @group Toolbar */ | |
15 #jqt .toolbar { | |
16 -webkit-box-sizing: border-box; | |
17 border-bottom: 1px solid #000; | |
18 padding: 10px; | |
19 height: 45px; | |
20 background: url(img/toolbarBackground.png) #000000 repeat-x; | |
21 position: relative; | |
22 } | |
23 #jqt .black-translucent .toolbar { | |
24 margin-top: 20px; | |
25 } | |
26 #jqt .toolbar > h1 { | |
27 position: absolute; | |
28 overflow: hidden; | |
29 left: 50%; | |
30 top: 10px; | |
31 line-height: 1em; | |
32 margin: 1px 0 0 -75px; | |
33 height: 40px; | |
34 font-size: 20px; | |
35 width: 150px; | |
36 font-weight: bold; | |
37 text-shadow: rgba(0,0,0,1) 0 -1px 1px; | |
38 text-align: center; | |
39 text-overflow: ellipsis; | |
40 white-space: nowrap; | |
41 color: #fff; | |
42 } | |
43 #jqt.landscape .toolbar > h1 { | |
44 margin-left: -125px; | |
45 width: 250px; | |
46 } | |
47 #jqt .button, #jqt .back, #jqt .cancel, #jqt .add { | |
48 position: absolute; | |
49 overflow: hidden; | |
50 top: 8px; | |
51 right: 10px; | |
52 margin: 0; | |
53 border-width: 0 5px; | |
54 padding: 0 3px; | |
55 width: auto; | |
56 height: 30px; | |
57 line-height: 30px; | |
58 font-family: inherit; | |
59 font-size: 12px; | |
60 font-weight: bold; | |
61 color: #fff; | |
62 text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0; | |
63 text-overflow: ellipsis; | |
64 text-decoration: none; | |
65 white-space: nowrap; | |
66 background: none; | |
67 -webkit-border-image: url(img/button.png) 0 5 0 5; | |
68 } | |
69 #jqt .button.active, | |
70 #jqt .cancel.active, | |
71 #jqt .add.active { | |
72 -webkit-border-image: url(img/buttonActive.png) 0 5 0 5; | |
73 } | |
74 #jqt .back { | |
75 left: 6px; | |
76 right: auto; | |
77 padding: 0; | |
78 max-width: 55px; | |
79 border-width: 0 8px 0 14px; | |
80 -webkit-border-image: url(img/backButton.png) 0 8 0 14; | |
81 } | |
82 #jqt .back.active { | |
83 -webkit-border-image: url(img/backButtonActive.png) 0 8 0 14; | |
84 } | |
85 #jqt .leftButton, #jqt .cancel { | |
86 left: 6px; | |
87 right: auto; | |
88 } | |
89 #jqt .add { | |
90 font-size: 24px; | |
91 line-height: 24px; | |
92 font-weight: bold; | |
93 } | |
94 #jqt .bigButton { | |
95 -webkit-border-image: url(img/bigButton.png) 0 12 0 12; | |
96 border-width: 0 12px; | |
97 color: #000000; | |
98 display: block; | |
99 font-size: 20px; | |
100 font-weight: bold; | |
101 line-height: 46px; | |
102 text-align: center; | |
103 text-decoration: inherit; | |
104 text-shadow: rgba(255,255,255,.8) 0 1px 0; | |
105 } | |
106 #jqt .bigButton.active { | |
107 -webkit-border-image: url(img/bigButtonActive.png) 0 12 0 12; | |
108 color: #000000; | |
109 } | |
110 | |
111 | |
112 /* @end */ | |
113 /* @group Lists */ | |
114 #jqt h1 + ul, #jqt h2 + ul, #jqt h3 + ul, #jqt h4 + ul, #jqt h5 + ul, #jqt h6 + ul { | |
115 margin-top: 0; | |
116 } | |
117 #jqt ul { | |
118 color: #aaa; | |
119 border: 1px solid #333333; | |
120 font: bold 18px "Helvetica Neue", Helvetica; | |
121 padding: 0; | |
122 margin: 15px 10px 17px 10px; | |
123 } | |
124 #jqt ul.rounded { | |
125 -webkit-border-radius: 8px; | |
126 -webkit-box-shadow: rgba(0,0,0,.3) 1px 1px 3px; | |
127 } | |
128 #jqt ul.rounded li:first-child, #jqt ul.rounded li:first-child a { | |
129 border-top: 0; | |
130 -webkit-border-top-left-radius: 8px; | |
131 -webkit-border-top-right-radius: 8px; | |
132 } | |
133 #jqt ul.rounded li:last-child, #jqt ul.rounded li:last-child a { | |
134 -webkit-border-bottom-left-radius: 8px; | |
135 -webkit-border-bottom-right-radius: 8px; | |
136 } | |
137 #jqt ul li { | |
138 color: #666; | |
139 border-top: 1px solid #333; | |
140 border-bottom: #555858; | |
141 list-style-type: none; | |
142 padding: 10px 10px 10px 10px; | |
143 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142)); | |
144 overflow: hidden; | |
145 } | |
146 #jqt ul li.arrow { | |
147 background-color: #4c4d4e !important; | |
148 background-image: url(img/chevron.png), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142)); | |
149 background-position: right center !important; | |
150 background-repeat: no-repeat !important; | |
151 } | |
152 | |
153 #jqt ul li.arrow a { | |
154 padding: 12px 22px 12px 10px; | |
155 } | |
156 | |
157 #jqt ul li.forward { | |
158 background-image: url(img/chevronCircle.png), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142)); | |
159 background-position: right center; | |
160 background-repeat: no-repeat; | |
161 } | |
162 /* universal links on list */ | |
163 #jqt ul li a, #jqt li.img a + a { | |
164 color: #fff; | |
165 text-decoration: none; | |
166 text-overflow: ellipsis; | |
167 white-space: nowrap; | |
168 overflow: hidden; | |
169 display: block; | |
170 padding: 12px 10px 12px 10px; | |
171 margin: -10px; | |
172 -webkit-tap-highlight-color: rgba(0,0,0,0); | |
173 text-shadow: rgba(0,0,0,.2) 0 1px 1px; | |
174 } | |
175 #jqt ul li a.active, | |
176 #jqt ul li a.button { | |
177 background-color: #53b401; | |
178 color: #fff; | |
179 } | |
180 #jqt ul li a.active.loading { | |
181 background-image: url(img/loading.gif); | |
182 background-position: 95% center; | |
183 background-repeat: no-repeat; | |
184 } | |
185 #jqt ul li.arrow a.active { | |
186 background-image: url(img/chevronActive.png); | |
187 background-position: right center; | |
188 background-repeat: no-repeat; | |
189 } | |
190 #jqt ul li.forward a.active { | |
191 background-image: url(img/chevronCircleActive.png); | |
192 background-position: right center; | |
193 background-repeat: no-repeat; | |
194 } | |
195 #jqt ul li.img a + a { | |
196 margin: -10px 10px -20px -5px; | |
197 font-size: 17px; | |
198 font-weight: bold; | |
199 } | |
200 #jqt ul li.img a + a + a { | |
201 font-size: 14px; | |
202 font-weight: normal; | |
203 margin-left: -10px; | |
204 margin-bottom: -10px; | |
205 margin-top: 0; | |
206 } | |
207 #jqt ul li.img a + small + a { | |
208 margin-left: -5px; | |
209 } | |
210 #jqt ul li.img a + small + a + a { | |
211 margin-left: -10px; | |
212 margin-top: -20px; | |
213 margin-bottom: -10px; | |
214 font-size: 14px; | |
215 font-weight: normal; | |
216 } | |
217 #jqt ul li.img a + small + a + a + a { | |
218 margin-left: 0px !important; | |
219 margin-bottom: 0; | |
220 } | |
221 #jqt ul li a + a { | |
222 color: #000; | |
223 font: 14px "Helvetica Neue", Helvetica; | |
224 text-overflow: ellipsis; | |
225 white-space: nowrap; | |
226 overflow: hidden; | |
227 display: block; | |
228 margin: 0; | |
229 padding: 0; | |
230 } | |
231 #jqt ul li a + a + a, #jqt ul li.img a + a + a + a, #jqt ul li.img a + small + a + a + a { | |
232 color: #666; | |
233 font: 13px "Helvetica Neue", Helvetica; | |
234 margin: 0; | |
235 text-overflow: ellipsis; | |
236 white-space: nowrap; | |
237 overflow: hidden; | |
238 display: block; | |
239 padding: 0; | |
240 } | |
241 /* | |
242 @end */ | |
243 /* @group Forms */ | |
244 #jqt ul.form li { | |
245 padding: 7px 10px; | |
246 } | |
247 #jqt ul.form li.error { | |
248 border: 2px solid red; | |
249 } | |
250 #jqt ul.form li.error + li.error { | |
251 border-top: 0; | |
252 } | |
253 #jqt ul li input[type="text"], | |
254 #jqt ul li input[type="password"], | |
255 #jqt ul li input[type="tel"], | |
256 #jqt ul li input[type="number"], | |
257 #jqt ul li input[type="search"], | |
258 #jqt ul li input[type="email"], | |
259 #jqt ul li input[type="url"], | |
260 #jqt ul li textarea, | |
261 #jqt ul li select { | |
262 color: #777; | |
263 background: transparent url('data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='); | |
264 border: 0; | |
265 font: normal 17px "Helvetica Neue", Helvetica; | |
266 padding: 0; | |
267 display: inline-block; | |
268 margin-left: 0px; | |
269 width: 100%; | |
270 -webkit-appearance: textarea; | |
271 } | |
272 #jqt ul li textarea { | |
273 height: 120px; | |
274 padding: 0; | |
275 text-indent: -2px; | |
276 } | |
277 #jqt ul li select { | |
278 text-indent: 0px; | |
279 background: transparent url(img/chevron.png) no-repeat right center; | |
280 -webkit-appearance: textfield; | |
281 margin-left: -6px; | |
282 width: 104%; | |
283 } | |
284 #jqt ul li input[type="checkbox"], #jqt ul li input[type="radio"] { | |
285 margin: 0; | |
286 padding: 10px 10px; | |
287 } | |
288 #jqt ul li input[type="checkbox"]:after, #jqt ul li input[type="radio"]:after { | |
289 content: attr(title); | |
290 font: 17px "Helvetica Neue", Helvetica; | |
291 display: block; | |
292 width: 246px; | |
293 color: #777; | |
294 margin: -12px 0 0 17px; | |
295 } | |
296 /* @end */ | |
297 /* @group Mini Label */ | |
298 #jqt ul li small { | |
299 color: #64c114; | |
300 font: 17px "Helvetica Neue", Helvetica; | |
301 text-align: right; | |
302 text-overflow: ellipsis; | |
303 white-space: nowrap; | |
304 overflow: hidden; | |
305 display: block; | |
306 width: 23%; | |
307 float: right; | |
308 padding: 0; | |
309 } | |
310 #jqt ul li.arrow small { | |
311 padding: 0 15px; | |
312 } | |
313 #jqt ul li small.counter { | |
314 font-size: 17px; | |
315 line-height: 13px; | |
316 font-weight: bold; | |
317 background: rgba(0,0,0,.15); | |
318 color: #fff; | |
319 -webkit-border-radius: 11px; | |
320 padding: 4px 10px 5px 10px; | |
321 display: block; | |
322 width: auto; | |
323 margin-top: -22px; | |
324 -webkit-box-shadow: rgba(255,255,255,.1) 0 1px 0; | |
325 } | |
326 #jqt ul li.arrow small.counter { | |
327 margin-right: 15px; | |
328 } | |
329 /* @end */ | |
330 /* @group Individual */ | |
331 #jqt ul.individual { | |
332 border: 0; | |
333 background: none; | |
334 clear: both; | |
335 overflow: hidden; | |
336 padding-bottom: 3px; | |
337 -webkit-box-shadow: none; | |
338 } | |
339 #jqt ul.individual li { | |
340 background: #4c4d4e; | |
341 border: 1px solid #333; | |
342 font-size: 14px; | |
343 text-align: center; | |
344 -webkit-border-radius: 8px; | |
345 -webkit-box-sizing: border-box; | |
346 width: 48%; | |
347 float: left; | |
348 display: block; | |
349 padding: 11px 10px 14px 10px; | |
350 -webkit-box-shadow: rgba(0,0,0,.2) 1px 1px 3px; | |
351 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142)); | |
352 } | |
353 #jqt ul.individual li + li { | |
354 float: right; | |
355 } | |
356 #jqt ul.individual li a { | |
357 color: #fff; | |
358 line-height: 16px; | |
359 margin: -11px -10px -14px -10px; | |
360 padding: 11px 10px 14px 10px; | |
361 -webkit-border-radius: 8px; | |
362 } | |
363 /* @end */ | |
364 /* @group Toggle */ | |
365 #jqt .toggle { | |
366 width: 94px; | |
367 position: relative; | |
368 height: 27px; | |
369 display: block; | |
370 overflow: hidden; | |
371 float: right; | |
372 } | |
373 #jqt .toggle input[type="checkbox"]:checked { | |
374 left: 0px; | |
375 } | |
376 #jqt .toggle input[type="checkbox"] { | |
377 -webkit-appearance: textarea; | |
378 -webkit-border-radius: 5px; | |
379 -webkit-tap-highlight-color: rgba(0,0,0,0); | |
380 -webkit-transition: left .15s; | |
381 background-color: transparent; | |
382 background: #fff url(img/toggleSwitch.png) 0 0 no-repeat; | |
383 border: 0; | |
384 height: 27px; | |
385 left: -55px; | |
386 margin: 0; | |
387 overflow: hidden; | |
388 position: absolute; | |
389 top: 0; | |
390 width: 149px; | |
391 } | |
392 /* @end */ | |
393 /* @group Info */ | |
394 #jqt .info { | |
395 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccc), to(#aaa), color-stop(.6,#CCCCCC)); | |
396 border-top: 1px solid rgba(255,255,255,.2); | |
397 color: #444; | |
398 font-size: 12px; | |
399 font-weight: bold; | |
400 line-height: 16px; | |
401 padding: 15px; | |
402 text-align: center; | |
403 text-shadow: rgba(255,255,255,.8) 0 1px 0; | |
404 } | |
405 /* @end */ | |
406 /* @group Edge to edge */ | |
407 #jqt ul.edgetoedge { | |
408 border-width: 1px 0; | |
409 margin: 0; | |
410 padding: 0; | |
411 } | |
412 #jqt ul.edgetoedge li { | |
413 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1e1f21), to(#272729)); | |
414 border-bottom: 2px solid #000; | |
415 border-top: 1px solid #4a4b4d; | |
416 font-size: 20px; | |
417 margin-bottom: -1px; | |
418 } | |
419 #jqt ul.edgetoedge li.arrow { | |
420 background-color: #404142 !important; | |
421 background-image: url(img/chevron.png), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1e1f21), to(#272729)); | |
422 background-position: right center; | |
423 background-repeat: no-repeat; | |
424 } | |
425 #jqt ul.edgetoedge li.sep { | |
426 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,0)), to(rgba(0,0,0,.5))); | |
427 border-bottom: 1px solid #111113; | |
428 border-top: 1px solid #666; | |
429 color: #3e9ac3; | |
430 font-size: 16px; | |
431 margin: 1px 0 0 0; | |
432 padding: 2px 10px; | |
433 text-shadow: #000 0 1px 0; | |
434 } | |
435 #jqt ul.edgetoedge li em { | |
436 font-weight: normal; | |
437 font-style: normal; | |
438 } | |
439 /* @end */ | |
440 /* @group Plastic */ | |
441 #jqt #plastic { | |
442 background: #17181a; | |
443 } | |
444 #jqt ul.plastic { | |
445 background: #17181a; | |
446 color: #aaa; | |
447 font: bold 18px "Helvetica Neue", Helvetica; | |
448 margin: 0; | |
449 padding: 0; | |
450 border-width: 0 0 1px 0; | |
451 } | |
452 #jqt ul.plastic li { | |
453 border-width: 1px 0; | |
454 border-style: solid; | |
455 border-top-color: #222; | |
456 border-bottom-color: #000; | |
457 color: #666; | |
458 list-style-type: none; | |
459 overflow: hidden; | |
460 padding: 10px 10px 10px 10px; | |
461 } | |
462 #jqt ul.plastic li a.active.loading { | |
463 background-image: url(img/loading.gif); | |
464 background-position: 95% center; | |
465 background-repeat: no-repeat; | |
466 } | |
467 #jqt ul.plastic li small { | |
468 color: #888; | |
469 font-size: 13px; | |
470 font-weight: bold; | |
471 line-height: 24px; | |
472 text-transform: uppercase; | |
473 } | |
474 #jqt ul.plastic li:nth-child(odd) { | |
475 background-color: #1c1c1f; | |
476 } | |
477 #jqt ul.plastic li.arrow { | |
478 background-image: url(img/chevron.png); | |
479 background-position: right center; | |
480 background-repeat: no-repeat; | |
481 } | |
482 #jqt ul.plastic li.arrow a.active { | |
483 background-image: url(img/chevron.png); | |
484 background-position: right center; | |
485 background-repeat: no-repeat; | |
486 } | |
487 #jqt ul.plastic li.forward { | |
488 background-image: url(img/chevronCircle.png); | |
489 background-position: right center; | |
490 background-repeat: no-repeat; | |
491 } | |
492 #jqt ul.plastic li.forward a.active { | |
493 background-image: url(img/chevronCircle.png); | |
494 background-position: right center; | |
495 background-repeat: no-repeat; | |
496 } | |
497 /* @group Metal */ | |
498 #jqt ul.metal { | |
499 border-bottom: 0; | |
500 border-left: 0; | |
501 border-right: 0; | |
502 border-top: 0; | |
503 margin: 0; | |
504 } | |
505 #jqt ul.metal li { | |
506 background-image: none; | |
507 border-top: 1px solid #fff; | |
508 border-bottom: 1px solid #666; | |
509 font-size: 26px; | |
510 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(238,238,238,1)), to(rgba(156,158,160,1))); | |
511 } | |
512 #jqt ul.metal li a { | |
513 line-height: 26px; | |
514 margin: 0; | |
515 text-shadow: #fff 0 1px 0; | |
516 padding: 13px 0; | |
517 } | |
518 #jqt ul.metal li a em { | |
519 display: block; | |
520 font-size: 14px; | |
521 font-style: normal; | |
522 color: #444; | |
523 width: 50%; | |
524 line-height: 14px; | |
525 } | |
526 #jqt ul.metal li a.active { | |
527 color: rgb(0,0,0); | |
528 } | |
529 #jqt ul.metal li small { | |
530 float: right; | |
531 position: relative; | |
532 margin-top: 10px; | |
533 font-weight: bold; | |
534 } | |
535 #jqt ul.metal li.arrow { | |
536 background-image: url(img/chevron.png); | |
537 background-position: right center; | |
538 background-repeat: no-repeat; | |
539 background-image: url(img/chevron.png), -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(238,238,238,1)), to(rgba(156,158,160,1))); | |
540 background-repeat: no-repeat; | |
541 background-position: right center; | |
542 } | |
543 #jqt ul.metal li.arrow a small { | |
544 padding-right: 15px; | |
545 line-height: 17px; | |
546 } | |
547 /* @end */ | |
548 input[type='submit'] { | |
549 -webkit-border-radius: 4px; | |
550 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(238,238,238,1)), to(rgba(156,158,160,1))); | |
551 border: 1px outset black; | |
552 display: block; | |
553 font-size: inherit; | |
554 font-weight: inherit; | |
555 padding: 10px; | |
556 } |