root / snf-astakos-app / astakos / im / static / im / css / uniform.default.css @ f932b578
History | View | Annotate | Download (10.5 kB)
1 |
/*
|
---|---|
2 |
|
3 |
Uniform Theme: Uniform Default
|
4 |
Version: 1.6
|
5 |
By: Josh Pyles
|
6 |
License: MIT License
|
7 |
---
|
8 |
For use with the Uniform plugin:
|
9 |
http://pixelmatrixdesign.com/uniform/
|
10 |
---
|
11 |
Generated by Uniform Theme Generator:
|
12 |
http://pixelmatrixdesign.com/uniform/themer.html
|
13 |
|
14 |
*/
|
15 |
|
16 |
/* Global Declaration */
|
17 |
|
18 |
div.selector, |
19 |
div.selector span, |
20 |
div.checker span, |
21 |
div.radio span, |
22 |
div.uploader, |
23 |
div.uploader span.action, |
24 |
div.button, |
25 |
div.button span { |
26 |
background-image: url(../images/sprite.png); |
27 |
background-repeat: no-repeat; |
28 |
-webkit-font-smoothing: antialiased; |
29 |
} |
30 |
|
31 |
.selector,
|
32 |
.radio,
|
33 |
.checker,
|
34 |
.uploader,
|
35 |
.button,
|
36 |
.selector *, |
37 |
.radio *, |
38 |
.checker *, |
39 |
.uploader *, |
40 |
.button *{ |
41 |
margin: 0; |
42 |
padding: 0; |
43 |
} |
44 |
|
45 |
/* INPUT & TEXTAREA */
|
46 |
|
47 |
input.text, |
48 |
input.email, |
49 |
input.password, |
50 |
textarea.uniform { |
51 |
font-size: 12px; |
52 |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
53 |
font-weight: normal; |
54 |
padding: 3px; |
55 |
color: #777; |
56 |
background: url('../images/bg-input-focus.png') repeat-x 0px 0px; |
57 |
background: url('../images/bg-input.png') repeat-x 0px 0px; |
58 |
border-top: solid 1px #aaa; |
59 |
border-left: solid 1px #aaa; |
60 |
border-bottom: solid 1px #ccc; |
61 |
border-right: solid 1px #ccc; |
62 |
-webkit-border-radius: 3px; |
63 |
-moz-border-radius: 3px; |
64 |
border-radius: 3px; |
65 |
outline: 0; |
66 |
} |
67 |
|
68 |
input.text:focus, |
69 |
input.email:focus, |
70 |
input.password:focus, |
71 |
textarea.uniform:focus { |
72 |
-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.3); |
73 |
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.3); |
74 |
box-shadow: 0px 0px 4px rgba(0,0,0,0.3); |
75 |
border-color: #999; |
76 |
background: url('../images/bg-input-focus.png') repeat-x 0px 0px; |
77 |
} |
78 |
|
79 |
/* SPRITES */
|
80 |
|
81 |
/* Select */
|
82 |
|
83 |
div.selector { |
84 |
background-position: -483px -130px; |
85 |
line-height: 26px; |
86 |
height: 26px; |
87 |
} |
88 |
|
89 |
div.selector span { |
90 |
background-position: right 0px; |
91 |
height: 26px; |
92 |
line-height: 26px; |
93 |
} |
94 |
|
95 |
div.selector select { |
96 |
/* change these to adjust positioning of select element */
|
97 |
top: 0px; |
98 |
left: 0px; |
99 |
} |
100 |
|
101 |
div.selector:active, |
102 |
div.selector.active { |
103 |
background-position: -483px -156px; |
104 |
} |
105 |
|
106 |
div.selector:active span, |
107 |
div.selector.active span { |
108 |
background-position: right -26px; |
109 |
} |
110 |
|
111 |
div.selector.focus, div.selector.hover, div.selector:hover { |
112 |
background-position: -483px -182px; |
113 |
} |
114 |
|
115 |
div.selector.focus span, div.selector.hover span, div.selector:hover span { |
116 |
background-position: right -52px; |
117 |
} |
118 |
|
119 |
div.selector.focus:active, |
120 |
div.selector.focus.active, |
121 |
div.selector:hover:active, |
122 |
div.selector.active:hover { |
123 |
background-position: -483px -208px; |
124 |
} |
125 |
|
126 |
div.selector.focus:active span, |
127 |
div.selector:hover:active span, |
128 |
div.selector.active:hover span, |
129 |
div.selector.focus.active span { |
130 |
background-position: right -78px; |
131 |
} |
132 |
|
133 |
div.selector.disabled { |
134 |
background-position: -483px -234px; |
135 |
} |
136 |
|
137 |
div.selector.disabled span { |
138 |
background-position: right -104px; |
139 |
} |
140 |
|
141 |
/* Checkbox */
|
142 |
|
143 |
div.checker { |
144 |
width: 19px; |
145 |
height: 19px; |
146 |
} |
147 |
|
148 |
div.checker input { |
149 |
width: 19px; |
150 |
height: 19px; |
151 |
} |
152 |
|
153 |
div.checker span { |
154 |
background-position: 0px -260px; |
155 |
height: 19px; |
156 |
width: 19px; |
157 |
} |
158 |
|
159 |
div.checker:active span, |
160 |
div.checker.active span { |
161 |
background-position: -19px -260px; |
162 |
} |
163 |
|
164 |
div.checker.focus span, |
165 |
div.checker:hover span { |
166 |
background-position: -38px -260px; |
167 |
} |
168 |
|
169 |
div.checker.focus:active span, |
170 |
div.checker:active:hover span, |
171 |
div.checker.active:hover span, |
172 |
div.checker.focus.active span { |
173 |
background-position: -57px -260px; |
174 |
} |
175 |
|
176 |
div.checker span.checked { |
177 |
background-position: -76px -260px; |
178 |
} |
179 |
|
180 |
div.checker:active span.checked, |
181 |
div.checker.active span.checked { |
182 |
background-position: -95px -260px; |
183 |
} |
184 |
|
185 |
div.checker.focus span.checked, |
186 |
div.checker:hover span.checked { |
187 |
background-position: -114px -260px; |
188 |
} |
189 |
|
190 |
div.checker.focus:active span.checked, |
191 |
div.checker:hover:active span.checked, |
192 |
div.checker.active:hover span.checked, |
193 |
div.checker.active.focus span.checked { |
194 |
background-position: -133px -260px; |
195 |
} |
196 |
|
197 |
div.checker.disabled span, |
198 |
div.checker.disabled:active span, |
199 |
div.checker.disabled.active span { |
200 |
background-position: -152px -260px; |
201 |
} |
202 |
|
203 |
div.checker.disabled span.checked, |
204 |
div.checker.disabled:active span.checked, |
205 |
div.checker.disabled.active span.checked { |
206 |
background-position: -171px -260px; |
207 |
} |
208 |
|
209 |
/* Radio */
|
210 |
|
211 |
div.radio { |
212 |
width: 25px; |
213 |
height: 25px; |
214 |
|
215 |
} |
216 |
|
217 |
div.radio input { |
218 |
width: 25px; |
219 |
height: 25px; |
220 |
} |
221 |
|
222 |
div.radio span { |
223 |
height: 25px; |
224 |
width: 25px; |
225 |
background:transparent; |
226 |
|
227 |
} |
228 |
|
229 |
div.radio span span { |
230 |
border:1px solid grey; |
231 |
} |
232 |
div.radio:active span, |
233 |
div.radio.active span { |
234 |
background-image: url(../images/checkbox.png); |
235 |
background-position:top left; |
236 |
} |
237 |
|
238 |
div.radio.focus span, |
239 |
div.radio:hover span { |
240 |
background:transparent; |
241 |
} |
242 |
|
243 |
div.radio.focus:active span, |
244 |
div.radio:active:hover span, |
245 |
div.radio.active:hover span, |
246 |
div.radio.active.focus span { |
247 |
background-image: url(../images/checkbox.png); |
248 |
} |
249 |
|
250 |
div.radio span.checked { |
251 |
background-image: url(../images/checkbox.png); |
252 |
} |
253 |
|
254 |
div.radio:active span.checked, |
255 |
div.radio.active span.checked { |
256 |
background-image: url(../images/checkbox.png); |
257 |
} |
258 |
|
259 |
div.radio.focus span.checked, div.radio:hover span.checked { |
260 |
background-image: url(../images/checkbox.png); |
261 |
} |
262 |
|
263 |
div.radio.focus:active span.checked, |
264 |
div.radio:hover:active span.checked, |
265 |
div.radio.focus.active span.checked, |
266 |
div.radio.active:hover span.checked { |
267 |
background-image: url(../images/checkbox.png); |
268 |
} |
269 |
|
270 |
div.radio.disabled span, |
271 |
div.radio.disabled:active span, |
272 |
div.radio.disabled.active span { |
273 |
background-position: -144px -279px; |
274 |
} |
275 |
|
276 |
div.radio.disabled span.checked, |
277 |
div.radio.disabled:active span.checked, |
278 |
div.radio.disabled.active span.checked { |
279 |
background-position: -162px -279px; |
280 |
} |
281 |
|
282 |
/* Uploader */
|
283 |
|
284 |
div.uploader { |
285 |
background-position: 0px -297px; |
286 |
height: 28px; |
287 |
} |
288 |
|
289 |
div.uploader span.action { |
290 |
background-position: right -409px; |
291 |
height: 24px; |
292 |
line-height: 24px; |
293 |
} |
294 |
|
295 |
div.uploader span.filename { |
296 |
height: 24px; |
297 |
/* change this line to adjust positioning of filename area */
|
298 |
margin: 2px 0px 2px 2px; |
299 |
line-height: 24px; |
300 |
} |
301 |
|
302 |
div.uploader.focus, |
303 |
div.uploader.hover, |
304 |
div.uploader:hover { |
305 |
background-position: 0px -353px; |
306 |
} |
307 |
|
308 |
div.uploader.focus span.action, |
309 |
div.uploader.hover span.action, |
310 |
div.uploader:hover span.action { |
311 |
background-position: right -437px; |
312 |
} |
313 |
|
314 |
div.uploader.active span.action, |
315 |
div.uploader:active span.action { |
316 |
background-position: right -465px; |
317 |
} |
318 |
|
319 |
div.uploader.focus.active span.action, |
320 |
div.uploader:focus.active span.action, |
321 |
div.uploader.focus:active span.action, |
322 |
div.uploader:focus:active span.action { |
323 |
background-position: right -493px; |
324 |
} |
325 |
|
326 |
div.uploader.disabled { |
327 |
background-position: 0px -325px; |
328 |
} |
329 |
|
330 |
div.uploader.disabled span.action { |
331 |
background-position: right -381px; |
332 |
} |
333 |
|
334 |
div.button { |
335 |
background-position: 0px -523px; |
336 |
} |
337 |
|
338 |
div.button span { |
339 |
background-position: right -643px; |
340 |
} |
341 |
|
342 |
div.button.focus, |
343 |
div.button:focus, |
344 |
div.button:hover, |
345 |
div.button.hover { |
346 |
background-position: 0px -553px; |
347 |
} |
348 |
|
349 |
div.button.focus span, |
350 |
div.button:focus span, |
351 |
div.button:hover span, |
352 |
div.button.hover span { |
353 |
background-position: right -673px; |
354 |
} |
355 |
|
356 |
div.button.active, |
357 |
div.button:active { |
358 |
background-position: 0px -583px; |
359 |
} |
360 |
|
361 |
div.button.active span, |
362 |
div.button:active span { |
363 |
background-position: right -703px; |
364 |
color: #555; |
365 |
} |
366 |
|
367 |
div.button.disabled, |
368 |
div.button:disabled { |
369 |
background-position: 0px -613px; |
370 |
} |
371 |
|
372 |
div.button.disabled span, |
373 |
div.button:disabled span { |
374 |
background-position: right -733px; |
375 |
color: #bbb; |
376 |
cursor: default; |
377 |
} |
378 |
|
379 |
/* PRESENTATION */
|
380 |
|
381 |
/* Button */
|
382 |
|
383 |
div.button { |
384 |
height: 30px; |
385 |
} |
386 |
|
387 |
div.button span { |
388 |
margin-left: 13px; |
389 |
height: 22px; |
390 |
padding-top: 8px; |
391 |
font-weight: bold; |
392 |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
393 |
font-size: 12px; |
394 |
letter-spacing: 1px; |
395 |
text-transform: uppercase; |
396 |
padding-left: 2px; |
397 |
padding-right: 15px; |
398 |
} |
399 |
|
400 |
/* Select */
|
401 |
div.selector { |
402 |
width: 190px; |
403 |
font-size: 12px; |
404 |
} |
405 |
|
406 |
div.selector select { |
407 |
min-width: 190px; |
408 |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
409 |
font-size: 12px; |
410 |
border: solid 1px #fff; |
411 |
} |
412 |
|
413 |
div.selector span { |
414 |
padding: 0px 25px 0px 2px; |
415 |
cursor: pointer; |
416 |
} |
417 |
|
418 |
div.selector span { |
419 |
color: #666; |
420 |
width: 158px; |
421 |
text-shadow: 0 1px 0 #fff; |
422 |
} |
423 |
|
424 |
div.selector.disabled span { |
425 |
color: #bbb; |
426 |
} |
427 |
|
428 |
/* Checker */
|
429 |
div.checker { |
430 |
margin-right: 5px; |
431 |
} |
432 |
|
433 |
/* Radio */
|
434 |
div.radio { |
435 |
margin-right: 3px; |
436 |
} |
437 |
|
438 |
/* Uploader */
|
439 |
div.uploader { |
440 |
width: 190px; |
441 |
cursor: pointer; |
442 |
} |
443 |
|
444 |
div.uploader span.action { |
445 |
width: 85px; |
446 |
text-align: center; |
447 |
text-shadow: #fff 0px 1px 0px; |
448 |
background-color: #fff; |
449 |
font-size: 11px; |
450 |
font-weight: bold; |
451 |
} |
452 |
|
453 |
div.uploader span.filename { |
454 |
color: #777; |
455 |
width: 82px; |
456 |
border-right: solid 1px #bbb; |
457 |
font-size: 11px; |
458 |
} |
459 |
|
460 |
div.uploader input { |
461 |
width: 190px; |
462 |
} |
463 |
|
464 |
div.uploader.disabled span.action { |
465 |
color: #aaa; |
466 |
} |
467 |
|
468 |
div.uploader.disabled span.filename { |
469 |
border-color: #ddd; |
470 |
color: #aaa; |
471 |
} |
472 |
/*
|
473 |
|
474 |
CORE FUNCTIONALITY
|
475 |
|
476 |
Not advised to edit stuff below this line
|
477 |
-----------------------------------------------------
|
478 |
*/
|
479 |
|
480 |
.selector,
|
481 |
.checker,
|
482 |
.button,
|
483 |
.radio,
|
484 |
.uploader {
|
485 |
display: -moz-inline-box; |
486 |
display: inline-block; |
487 |
vertical-align: middle; |
488 |
zoom: 1; |
489 |
*display: inline; |
490 |
} |
491 |
|
492 |
.selector select:focus, .radio input:focus, .checker input:focus, .uploader input:focus { |
493 |
outline: 0; |
494 |
} |
495 |
|
496 |
/* Button */
|
497 |
|
498 |
div.button a, |
499 |
div.button button, |
500 |
div.button input { |
501 |
position: absolute; |
502 |
} |
503 |
|
504 |
div.button { |
505 |
cursor: pointer; |
506 |
position: relative; |
507 |
} |
508 |
|
509 |
div.button span { |
510 |
display: -moz-inline-box; |
511 |
display: inline-block; |
512 |
line-height: 1; |
513 |
text-align: center; |
514 |
} |
515 |
|
516 |
/* Select */
|
517 |
|
518 |
div.selector { |
519 |
position: relative; |
520 |
padding-left: 10px; |
521 |
overflow: hidden; |
522 |
} |
523 |
|
524 |
div.selector span { |
525 |
display: block; |
526 |
overflow: hidden; |
527 |
text-overflow: ellipsis; |
528 |
white-space: nowrap; |
529 |
} |
530 |
|
531 |
div.selector select { |
532 |
position: absolute; |
533 |
opacity: 0; |
534 |
filter: alpha(opacity:0); |
535 |
height: 25px; |
536 |
border: none; |
537 |
background: none; |
538 |
} |
539 |
|
540 |
/* Checker */
|
541 |
|
542 |
div.checker { |
543 |
position: relative; |
544 |
} |
545 |
|
546 |
div.checker span { |
547 |
display: -moz-inline-box; |
548 |
display: inline-block; |
549 |
text-align: center; |
550 |
} |
551 |
|
552 |
div.checker input { |
553 |
opacity: 0; |
554 |
filter: alpha(opacity:0); |
555 |
display: inline-block; |
556 |
background: none; |
557 |
} |
558 |
|
559 |
/* Radio */
|
560 |
|
561 |
div.radio { |
562 |
position: relative; |
563 |
} |
564 |
|
565 |
div.radio span { |
566 |
display: -moz-inline-box; |
567 |
display: inline-block; |
568 |
text-align: center; |
569 |
} |
570 |
|
571 |
div.radio input { |
572 |
opacity: 0; |
573 |
filter: alpha(opacity:0); |
574 |
text-align: center; |
575 |
display: inline-block; |
576 |
background: none; |
577 |
} |
578 |
|
579 |
/* Uploader */
|
580 |
|
581 |
div.uploader { |
582 |
position: relative; |
583 |
overflow: hidden; |
584 |
cursor: default; |
585 |
} |
586 |
|
587 |
div.uploader span.action { |
588 |
float: left; |
589 |
display: inline; |
590 |
padding: 2px 0px; |
591 |
overflow: hidden; |
592 |
cursor: pointer; |
593 |
} |
594 |
|
595 |
div.uploader span.filename { |
596 |
padding: 0px 10px; |
597 |
float: left; |
598 |
display: block; |
599 |
overflow: hidden; |
600 |
text-overflow: ellipsis; |
601 |
white-space: nowrap; |
602 |
cursor: default; |
603 |
} |
604 |
|
605 |
div.uploader input { |
606 |
opacity: 0; |
607 |
filter: alpha(opacity:0); |
608 |
position: absolute; |
609 |
top: 0; |
610 |
right: 0; |
611 |
bottom: 0; |
612 |
float: right; |
613 |
height: 25px; |
614 |
border: none; |
615 |
cursor: default; |
616 |
} |