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;
46 margin: 10px 5px 0 5px;
54 text-transform: uppercase;
59 vertical-align: bottom;
63 text-decoration: none;
71 /* standard paragraph on body */
73 ul + p, ul.data + p + p, ul.form + p + p {
74 color: rgb(76,86,108);
77 text-shadow: white 0 1px 0;
78 margin: 0 10px 17px 0;
98 background: rgb(109,133,163) url(../images/bgHeader.png) repeat-x top;
99 border-top: 1px solid rgb(205,213,223);
100 border-bottom: 1px solid rgb(46,55,68);
104 -webkit-box-sizing: border-box;
110 font: bold 20px/30px Helvetica;
111 text-shadow: #2d3642 0 -1px 0;
113 text-overflow: ellipsis;
118 margin: 2px 0 0 -24%;
127 font: bold 12px/30px Helvetica;
133 text-shadow: rgb(46,55,68) 0 -1px 0;
134 text-overflow: ellipsis;
135 text-decoration: none;
141 -webkit-border-image: url(../images/toolButton.png) 0 5 0 5;
144 div#header #backButton {
149 border-width: 0 8px 0 14px;
150 -webkit-border-image: url(../images/backButton.png) 0 8 0 14;
156 -webkit-border-image: url(../images/actionButton.png) 0 5 0 5;
166 color: rgb(60,70,80);
176 text-shadow: #C0CBDB 0 1px 0;
177 text-overflow: ellipsis;
188 top: 18px !important;
192 top: 25px !important;
196 div.pre a#Backbutton {
197 left: 6px !important;
204 /***** List (base) ******/
209 border: 1px solid #B4B4B4;
210 font: bold 17px Helvetica;
212 margin: 15px 10px 17px 0;
213 -webkit-border-radius: 8px;
219 border-top: 1px solid #B4B4B4;
220 list-style-type: none;
221 padding: 10px 10px 10px 10px;
226 /* when you have a first LI item on any list */
230 -webkit-border-top-left-radius: 8px;
231 -webkit-border-top-right-radius: 8px;
235 -webkit-border-bottom-left-radius: 8px;
236 -webkit-border-bottom-right-radius: 8px;
240 /* universal arrows */
243 background-image: url(../images/chevron.png);
244 background-position: right center;
245 background-repeat: no-repeat;
249 #plastic ul li.arrow, #metal ul li.arrow {
250 background-image: url(../images/chevron_dg.png);
251 background-position: right center;
252 background-repeat: no-repeat;
257 /* universal links on list */
259 ul li a, li.img a + a {
261 text-decoration: none;
262 text-overflow: ellipsis;
266 padding: 12px 10px 12px 10px;
268 -webkit-tap-highlight-color:rgba(0,0,0,0);
272 margin: -10px 10px -20px -5px;
277 ul li.img a + a + a {
281 margin-bottom: -10px;
286 ul li.img a + small + a {
291 ul li.img a + small + a + a {
294 margin-bottom: -10px;
299 ul li.img a + small + a + a + a {
300 margin-left: 0px !important;
307 font: 14px Helvetica;
308 text-overflow: ellipsis;
316 ul li a + a + a, ul li.img a + a + a + a, ul li.img a + small + a + a + a {
318 font: 13px Helvetica;
320 text-overflow: ellipsis;
331 /* standard mini-label */
335 font: 17px Helvetica;
337 text-overflow: ellipsis;
352 ul li small.counter {
353 font-size: 17px !important;
354 line-height: 13px !important;
356 background: rgb(154,159,170);
358 -webkit-border-radius: 11px;
359 padding: 4px 10px 5px 10px;
360 display: inline !important;
366 ul li.arrow small.counter {
373 /* resize without labels */
385 ul li.arrow small + a {
398 background: url(../images/standard-img.png) no-repeat;
399 display: inline-block;
402 margin: -10px 0 -20px -115px;
420 color: rgb(183,190,205);
422 border: 1px solid rgb(180,180,180);
425 -webkit-border-radius: 8px;
426 -webkit-box-sizing: border-box;
430 padding: 11px 10px 14px 10px;
433 ul.individual li + li {
440 color: rgb(50,79,133);
442 margin: -11px -10px -14px -10px;
443 padding: 11px 10px 14px 10px;
444 -webkit-border-radius: 8px;
447 ul.individual li a:hover {
455 /* Normal lists and metal */
459 /* 002863 rgb(154,159,170) */
460 background: rgb(0,40,99) url(../images/bglight.png) top left repeat-x;
461 border-top: 1px solid rgb(0,40,99); /* rgb(165,177,186); */
462 text-shadow: #666 0 1px 0;
468 body#normal, body#metal {
471 background-color: rgb(255,255,255);
474 body#normal ul, body#metal ul, body#plastic ul {
475 -webkit-border-radius: 0;
485 background: rgb(180,180,180);
495 body#normal ul li small {
500 body#normal li, body#metal li {
501 -webkit-border-radius: 0;
509 body#normal h4 + ul {
511 # border-top: 1px solid rgb(152,158,164);
512 border-bottom: 1px solid rgb(113,125,133);
517 border-top: 1px solid rgb(238,238,238);
518 border-bottom: 1px solid rgb(156,158,165);
519 background: url(../images/bgMetal.png) top left repeat-x;
521 text-shadow: #fff 0 1px 0;
530 body#metal ul li a:hover {
534 body#metal ul li:hover small {
539 body#metal ul li a em {
548 body#metal ul li small {
556 body#metal ul li.arrow a small {
562 body#metal ul li.arrow {
563 background: url(../images/bgMetal.png) top left repeat-x,
564 url(../images/chevron_dg.png) right center no-repeat;
572 background: url(../images/blackbg.png) top left repeat-x;
574 padding: 20px 10px 15px 10px;
584 text-shadow: #000 0 1px 0;
591 /***** BUTTONS *****/
595 font: bold 20px/46px Helvetica;
596 text-decoration: none;
598 text-shadow: #000 0 1px 0;
599 border-width: 0px 14px 0px 14px;
604 .green { -webkit-border-image: url(../images/greenButton.png) 0 14 0 14; }
605 .red { -webkit-border-image: url(../images/redButton.png) 0 14 0 14; }
609 text-shadow: #fff 0px 1px 0;
610 -webkit-border-image: url(../images/whiteButton.png) 0 14 0 14;
613 .black { -webkit-border-image: url(../images/grayButton.png) 0 14 0 14; }
628 ul.form li.error { border: 2px solid red; }
629 ul.form li.error + li.error { border-top: 0; }
631 ul.form li:hover { background: #fff; }
633 ul li input[type="text"], ul li input[type="password"], ul li textarea, ul li select {
635 background: #fff url(../.png); /* this is a hack due the default input shadow that iphones uses on textfields */
637 font: normal 17px Helvetica;
639 display: inline-block;
642 -webkit-appearance: textarea;
653 background: transparent url(../images/chevron.png) no-repeat 103% 3px;
654 -webkit-appearance: textfield;
659 ul li input[type="checkbox"], ul li input[type="radio"] {
661 color: rgb(50,79,133);
665 ul li input[type="checkbox"]:after, ul li input[type="radio"]:after {
666 content: attr(title);
667 font: 17px Helvetica;
670 margin: -12px 0 0 17px;
675 /**** INFORMATION FIELDS ****/
678 margin: 10px 0 5px 0;
689 ul.data li p + p { margin-top: 10px; }
701 text-decoration: underline;
713 color: rgb(76,86,108);
721 text-overflow: ellipsis;
731 display: inline-block;
744 display: inline-block;
759 /* this is for profiling */
770 background: #fff url(../images/profile-user.png) no-repeat;
771 border: 1px solid #B4B4B4;
774 -webkit-border-radius: 4px;
775 -webkit-box-sizing: border-box;
786 ul.profile li + li h2, ul.profile li + li p {
787 color: rgb(46,55,68);
788 text-shadow: #fff 0 1px 0;
792 ul.profile li + li h2 {
793 font: bold 18px/22px Helvetica;
794 text-overflow: ellipsis;
799 ul.profile li + li p {
800 font: 14px/18px Helvetica;
801 text-overflow: ellipsis;
807 /* any A element inside this kind of field list will scale 62x62 */
818 /***** PLASTIC LISTS *****/
823 background: rgb(173,173,173);
827 -webkit-border-radius: 0;
832 background-color: rgb(173,173,173);
837 -webkit-border-radius: 0;
838 border-top: 1px solid rgb(191,191,191);
839 border-bottom: 1px solid rgb(157,157,157);
843 body#plastic ul li:nth-child(odd) {
844 background-color: rgb(152,152,152);
845 border-top: 1px solid rgb(181,181,181);
846 border-bottom: 1px solid rgb(138,138,138);
850 body#plastic ul + p {
857 body#plastic ul + p strong {
860 text-shadow: #fff 0 1px 0;
863 body#plastic ul li a {
864 text-shadow: rgb(211,211,211) 0 1px 0;
867 body#plastic ul li:nth-child(odd) a {
868 text-shadow: rgb(191,191,191) 0 1px 0;
872 body#plastic ul li small {
874 text-shadow: rgb(211,211,211) 0 1px 0;
877 text-transform: uppercase;
883 /**** MINI & BIG BANNERS ****/
885 #plastic ul.minibanner, #plastic ul.bigbanner {
892 #plastic ul.bigbanner {
893 height: 140px !important;
896 #plastic ul.minibanner li {
897 border: 1px solid rgb(138,138,138);
898 background-color: rgb(152,152,152);
902 -webkit-border-radius: 5px;
906 #plastic ul.bigbanner li {
907 border: 1px solid rgb(138,138,138);
908 background-color: rgb(152,152,152);
912 -webkit-border-radius: 5px;
917 #plastic ul.minibanner li:first-child {
922 #plastic ul.minibanner li a {
930 #plastic ul.bigbanner li a {
947 body#chat div.bubble {
948 margin: 10px 10px 0 0px;
955 body#chat div.right {
964 body#chat div.right p {
965 border-width: 10px 20px 12px 10px;
968 body#chat div.left p {
969 border-width: 10px 10px 12px 20px;
974 body#chat div.left p.lime {
975 -webkit-border-image: url(../images/chat_bubbles_lime_l.png) 10 10 13 19;
978 body#chat div.left p.lemon {
979 -webkit-border-image: url(../images/chat_bubbles_lemon_l.png) 10 10 13 19;
982 body#chat div.left p.orange {
983 -webkit-border-image: url(../images/chat_bubbles_orange_l.png) 10 10 13 19;
986 body#chat div.left p.aqua {
987 -webkit-border-image: url(../images/chat_bubbles_aqua_l.png) 10 10 13 19;
990 body#chat div.left p.purple {
991 -webkit-border-image: url(../images/chat_bubbles_purple_l.png) 10 10 13 19;
994 body#chat div.left p.pink {
995 -webkit-border-image: url(../images/chat_bubbles_pink_l.png) 10 10 13 19;
998 body#chat div.left p.graphite {
999 -webkit-border-image: url(../images/chat_bubbles_graphite_l.png) 10 10 13 19;
1002 body#chat div.left p.clear {
1003 -webkit-border-image: url(../images/chat_bubbles_clear_l.png) 10 10 13 19;
1011 body#chat div.right p.aqua {
1012 -webkit-border-image: url(../images/chat_bubbles_aqua_r.png) 10 19 13 10;
1015 body#chat div.right p.lemon {
1016 -webkit-border-image: url(../images/chat_bubbles_lemon_r.png) 10 19 13 10;
1019 body#chat div.right p.lime {
1020 -webkit-border-image: url(../images/chat_bubbles_lime_r.png) 10 19 13 10;
1023 body#chat div.right p.purple {
1024 -webkit-border-image: url(../images/chat_bubbles_purple_r.png) 10 19 13 10;
1027 body#chat div.right p.pink {
1028 -webkit-border-image: url(../images/chat_bubbles_pink_r.png) 10 19 13 10;
1031 body#chat div.right p.graphite {
1032 -webkit-border-image: url(../images/chat_bubbles_graphite_r.png) 10 19 13 10;
1035 body#chat div.right p.clear {
1036 -webkit-border-image: url(../images/chat_bubbles_clear_r.png) 10 19 13 10;
1045 body#chat div.bubble p {
1051 body#chat div.bubble + p {
1057 padding: 10px 0 0 0;
1066 /**** image grids ****/
1075 margin: 4px 4px 4px 0;
1077 -webkit-border-radius: 0;
1081 border: 1px solid #C0D5DD;
1082 -webkit-border-radius: 0;
1086 margin: 0 0 4px 4px;
1087 background: #F4FBFE url(../images/image-loading.gif) no-repeat center center;
1091 body#images ul li a {
1100 /*** BLANK PAGES ***/
1110 margin: 250px 0 0 0;
1116 /**** ICONFIED LIST ****/
1119 ul li a img.ico, ul li img.ico {
1122 margin: -4px 10px -4px -1px;