3 Universal iPhone UI Kit 1.0
4 Author: Diego MartÃn Lafuente.
5 E-Mail: dlafuente@gmail.com
11 SVN URL: http://code.google.com/p/iphone-universal/source/checkout
12 Download: http://code.google.com/p/iphone-universal/downloads/list
18 background: rgb(197,204,211) url(../images/stripes.png);
19 font-family: Helvetica;
22 -webkit-user-select: none;
23 -webkit-text-size-adjust: none;
26 /* standard header on body */
28 div#header + h1, ul + h1 {
29 color: rgb(76,86,108);
30 font: bold 18px Helvetica;
31 text-shadow: #fff 0 1px 0;
32 margin: 15px 0 0 10px;
36 background-color: #7ec8b2;
39 background-color: #000;
43 border-bottom-width: 0px;
44 border-bottom-top: 0px;
47 margin: 10px 5px 0 5px;
52 border-bottom-width: 0px;
53 border-bottom-top: 0px;
57 text-transform: uppercase;
62 vertical-align: bottom;
66 text-decoration: none;
74 /* standard paragraph on body */
76 ul + p, ul.data + p + p, ul.form + p + p {
77 color: rgb(76,86,108);
80 text-shadow: white 0 1px 0;
81 margin: 0 10px 17px 0;
101 background: rgb(109,133,163) url(../images/bgHeader.png) repeat-x top;
102 border-top: 1px solid rgb(205,213,223);
103 border-bottom: 1px solid rgb(46,55,68);
107 -webkit-box-sizing: border-box;
113 font: bold 20px/30px Helvetica;
114 text-shadow: #2d3642 0 -1px 0;
116 text-overflow: ellipsis;
121 margin: 2px 0 0 -24%;
130 font: bold 12px/30px Helvetica;
136 text-shadow: rgb(46,55,68) 0 -1px 0;
137 text-overflow: ellipsis;
138 text-decoration: none;
144 -webkit-border-image: url(../images/toolButton.png) 0 5 0 5;
147 div#header #backButton {
152 border-width: 0 8px 0 14px;
153 -webkit-border-image: url(../images/backButton.png) 0 8 0 14;
159 -webkit-border-image: url(../images/actionButton.png) 0 5 0 5;
169 color: rgb(60,70,80);
179 text-shadow: #C0CBDB 0 1px 0;
180 text-overflow: ellipsis;
191 top: 18px !important;
195 top: 25px !important;
199 div.pre a#Backbutton {
200 left: 6px !important;
207 /***** List (base) ******/
212 border: 1px solid #B4B4B4;
213 font: bold 17px Helvetica;
215 margin: 15px 10px 17px 0;
216 -webkit-border-radius: 8px;
223 list-style-type: none;
224 padding: 10px 10px 10px 10px;
229 /* when you have a first LI item on any list */
233 -webkit-border-top-left-radius: 8px;
234 -webkit-border-top-right-radius: 8px;
238 -webkit-border-bottom-left-radius: 8px;
239 -webkit-border-bottom-right-radius: 8px;
243 /* universal arrows */
246 background-image: url(../images/chevron.png);
247 background-position: right center;
248 background-repeat: no-repeat;
252 #plastic ul li.arrow, #metal ul li.arrow {
253 background-image: url(../images/chevron_dg.png);
254 background-position: right center;
255 background-repeat: no-repeat;
260 /* universal links on list */
262 ul li a, li.img a + a {
264 text-decoration: none;
265 text-overflow: ellipsis;
269 padding: 12px 10px 12px 10px;
271 -webkit-tap-highlight-color:rgba(0,0,0,0);
275 margin: -10px 10px -20px -5px;
280 ul li.img a + a + a {
284 margin-bottom: -10px;
289 ul li.img a + small + a {
294 ul li.img a + small + a + a {
297 margin-bottom: -10px;
302 ul li.img a + small + a + a + a {
303 margin-left: 0px !important;
310 font: 14px Helvetica;
311 text-overflow: ellipsis;
319 ul li a + a + a, ul li.img a + a + a + a, ul li.img a + small + a + a + a {
321 font: 13px Helvetica;
323 text-overflow: ellipsis;
334 /* standard mini-label */
338 font: 17px Helvetica;
340 text-overflow: ellipsis;
355 ul li small.counter {
356 font-size: 17px !important;
357 line-height: 13px !important;
359 background: rgb(154,159,170);
361 -webkit-border-radius: 11px;
362 padding: 4px 10px 5px 10px;
363 display: inline !important;
369 ul li.arrow small.counter {
376 /* resize without labels */
388 ul li.arrow small + a {
401 background: url(../images/standard-img.png) no-repeat;
402 display: inline-block;
405 margin: -10px 0 -20px -115px;
423 color: rgb(183,190,205);
425 border: 1px solid rgb(180,180,180);
428 -webkit-border-radius: 8px;
429 -webkit-box-sizing: border-box;
433 padding: 11px 10px 14px 10px;
436 ul.individual li + li {
443 color: rgb(50,79,133);
445 margin: -11px -10px -14px -10px;
446 padding: 11px 10px 14px 10px;
447 -webkit-border-radius: 8px;
450 ul.individual li a:hover {
458 /* Normal lists and metal */
462 /* 002863 rgb(154,159,170) */
463 background: rgb(0,40,99) url(../images/bglight.png) top left repeat-x;
464 border-top: 1px solid rgb(0,40,99); /* rgb(165,177,186); */
465 text-shadow: #666 0 1px 0;
471 body#normal, body#metal {
474 background-color: rgb(255,255,255);
477 body#normal ul, body#metal ul, body#plastic ul {
478 -webkit-border-radius: 0;
488 background: rgb(180,180,180);
498 body#normal ul li small {
503 body#normal li, body#metal li {
504 -webkit-border-radius: 0;
512 body#normal h4 + ul {
514 # border-top: 1px solid rgb(152,158,164);
515 border-bottom: 1px solid rgb(113,125,133);
520 border-top: 1px solid rgb(238,238,238);
521 border-bottom: 1px solid rgb(156,158,165);
522 background: url(../images/bgMetal.png) top left repeat-x;
524 text-shadow: #fff 0 1px 0;
533 body#metal ul li a:hover {
537 body#metal ul li:hover small {
542 body#metal ul li a em {
551 body#metal ul li small {
559 body#metal ul li.arrow a small {
565 body#metal ul li.arrow {
566 background: url(../images/bgMetal.png) top left repeat-x,
567 url(../images/chevron_dg.png) right center no-repeat;
575 background: url(../images/blackbg.png) top left repeat-x;
577 padding: 20px 10px 15px 10px;
587 text-shadow: #000 0 1px 0;
594 /***** BUTTONS *****/
598 font: bold 20px/46px Helvetica;
599 text-decoration: none;
601 text-shadow: #000 0 1px 0;
602 border-width: 0px 14px 0px 14px;
607 .green { -webkit-border-image: url(../images/greenButton.png) 0 14 0 14; }
608 .red { -webkit-border-image: url(../images/redButton.png) 0 14 0 14; }
612 text-shadow: #fff 0px 1px 0;
613 -webkit-border-image: url(../images/whiteButton.png) 0 14 0 14;
616 .black { -webkit-border-image: url(../images/grayButton.png) 0 14 0 14; }
631 ul.form li.error { border: 2px solid red; }
632 ul.form li.error + li.error { border-top: 0; }
634 ul.form li:hover { background: #fff; }
636 ul li input[type="text"], ul li input[type="password"], ul li textarea, ul li select {
638 background: #fff url(../.png); /* this is a hack due the default input shadow that iphones uses on textfields */
640 font: normal 17px Helvetica;
642 display: inline-block;
645 -webkit-appearance: textarea;
656 background: transparent url(../images/chevron.png) no-repeat 103% 3px;
657 -webkit-appearance: textfield;
662 ul li input[type="checkbox"], ul li input[type="radio"] {
664 color: rgb(50,79,133);
668 ul li input[type="checkbox"]:after, ul li input[type="radio"]:after {
669 content: attr(title);
670 font: 17px Helvetica;
673 margin: -12px 0 0 17px;
678 /**** INFORMATION FIELDS ****/
681 margin: 10px 0 5px 0;
692 ul.data li p + p { margin-top: 10px; }
704 text-decoration: underline;
716 color: rgb(76,86,108);
724 text-overflow: ellipsis;
734 display: inline-block;
747 display: inline-block;
762 /* this is for profiling */
773 background: #fff url(../images/profile-user.png) no-repeat;
774 border: 1px solid #B4B4B4;
777 -webkit-border-radius: 4px;
778 -webkit-box-sizing: border-box;
789 ul.profile li + li h2, ul.profile li + li p {
790 color: rgb(46,55,68);
791 text-shadow: #fff 0 1px 0;
795 ul.profile li + li h2 {
796 font: bold 18px/22px Helvetica;
797 text-overflow: ellipsis;
802 ul.profile li + li p {
803 font: 14px/18px Helvetica;
804 text-overflow: ellipsis;
810 /* any A element inside this kind of field list will scale 62x62 */
821 /***** PLASTIC LISTS *****/
826 background: rgb(173,173,173);
830 -webkit-border-radius: 0;
835 background-color: rgb(173,173,173);
840 -webkit-border-radius: 0;
841 border-top: 1px solid rgb(191,191,191);
842 border-bottom: 1px solid rgb(157,157,157);
846 body#plastic ul li:nth-child(odd) {
847 background-color: rgb(152,152,152);
848 border-top: 1px solid rgb(181,181,181);
849 border-bottom: 1px solid rgb(138,138,138);
853 body#plastic ul + p {
860 body#plastic ul + p strong {
863 text-shadow: #fff 0 1px 0;
866 body#plastic ul li a {
867 text-shadow: rgb(211,211,211) 0 1px 0;
870 body#plastic ul li:nth-child(odd) a {
871 text-shadow: rgb(191,191,191) 0 1px 0;
875 body#plastic ul li small {
877 text-shadow: rgb(211,211,211) 0 1px 0;
880 text-transform: uppercase;
886 /**** MINI & BIG BANNERS ****/
888 #plastic ul.minibanner, #plastic ul.bigbanner {
895 #plastic ul.bigbanner {
896 height: 140px !important;
899 #plastic ul.minibanner li {
900 border: 1px solid rgb(138,138,138);
901 background-color: rgb(152,152,152);
905 -webkit-border-radius: 5px;
909 #plastic ul.bigbanner li {
910 border: 1px solid rgb(138,138,138);
911 background-color: rgb(152,152,152);
915 -webkit-border-radius: 5px;
920 #plastic ul.minibanner li:first-child {
925 #plastic ul.minibanner li a {
933 #plastic ul.bigbanner li a {
950 body#chat div.bubble {
951 margin: 10px 10px 0 0px;
958 body#chat div.right {
967 body#chat div.right p {
968 border-width: 10px 20px 12px 10px;
971 body#chat div.left p {
972 border-width: 10px 10px 12px 20px;
977 body#chat div.left p.lime {
978 -webkit-border-image: url(../images/chat_bubbles_lime_l.png) 10 10 13 19;
981 body#chat div.left p.lemon {
982 -webkit-border-image: url(../images/chat_bubbles_lemon_l.png) 10 10 13 19;
985 body#chat div.left p.orange {
986 -webkit-border-image: url(../images/chat_bubbles_orange_l.png) 10 10 13 19;
989 body#chat div.left p.aqua {
990 -webkit-border-image: url(../images/chat_bubbles_aqua_l.png) 10 10 13 19;
993 body#chat div.left p.purple {
994 -webkit-border-image: url(../images/chat_bubbles_purple_l.png) 10 10 13 19;
997 body#chat div.left p.pink {
998 -webkit-border-image: url(../images/chat_bubbles_pink_l.png) 10 10 13 19;
1001 body#chat div.left p.graphite {
1002 -webkit-border-image: url(../images/chat_bubbles_graphite_l.png) 10 10 13 19;
1005 body#chat div.left p.clear {
1006 -webkit-border-image: url(../images/chat_bubbles_clear_l.png) 10 10 13 19;
1014 body#chat div.right p.aqua {
1015 -webkit-border-image: url(../images/chat_bubbles_aqua_r.png) 10 19 13 10;
1018 body#chat div.right p.lemon {
1019 -webkit-border-image: url(../images/chat_bubbles_lemon_r.png) 10 19 13 10;
1022 body#chat div.right p.lime {
1023 -webkit-border-image: url(../images/chat_bubbles_lime_r.png) 10 19 13 10;
1026 body#chat div.right p.purple {
1027 -webkit-border-image: url(../images/chat_bubbles_purple_r.png) 10 19 13 10;
1030 body#chat div.right p.pink {
1031 -webkit-border-image: url(../images/chat_bubbles_pink_r.png) 10 19 13 10;
1034 body#chat div.right p.graphite {
1035 -webkit-border-image: url(../images/chat_bubbles_graphite_r.png) 10 19 13 10;
1038 body#chat div.right p.clear {
1039 -webkit-border-image: url(../images/chat_bubbles_clear_r.png) 10 19 13 10;
1048 body#chat div.bubble p {
1054 body#chat div.bubble + p {
1060 padding: 10px 0 0 0;
1069 /**** image grids ****/
1078 margin: 4px 4px 4px 0;
1080 -webkit-border-radius: 0;
1084 border: 1px solid #C0D5DD;
1085 -webkit-border-radius: 0;
1089 margin: 0 0 4px 4px;
1090 background: #F4FBFE url(../images/image-loading.gif) no-repeat center center;
1094 body#images ul li a {
1103 /*** BLANK PAGES ***/
1113 margin: 250px 0 0 0;
1119 /**** ICONFIED LIST ****/
1122 ul li a img.ico, ul li img.ico {
1125 margin: -4px 10px -4px -1px;