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;
37 background-color: #4AB694;
41 background-color: #000;
45 border-bottom-width: 0px;
46 border-bottom-top: 0px;
49 margin: 10px 5px 0 5px;
51 padding: 10px 5px 10px 5px;
54 border-bottom-width: 0px;
55 border-bottom-top: 0px;
59 text-transform: uppercase;
65 vertical-align: bottom;
74 text-decoration: none;
82 /* standard paragraph on body */
84 ul + p, ul.data + p + p, ul.form + p + p {
85 color: rgb(76,86,108);
88 text-shadow: white 0 1px 0;
89 margin: 0 10px 17px 0;
109 background: rgb(109,133,163) url(../images/bgHeader.png) repeat-x top;
110 border-top: 1px solid rgb(205,213,223);
111 border-bottom: 1px solid rgb(46,55,68);
115 //position: absolute;
116 -webkit-box-sizing: border-box;
122 font: bold 20px/30px Helvetica;
123 text-shadow: #2d3642 0 -1px 0;
125 text-overflow: ellipsis;
130 margin: 2px 0 0 -24%;
139 font: bold 12px/30px Helvetica;
145 text-shadow: rgb(46,55,68) 0 -1px 0;
146 text-overflow: ellipsis;
147 text-decoration: none;
153 -webkit-border-image: url(../images/toolButton.png) 0 5 0 5;
156 div#header #backButton {
161 border-width: 0 8px 0 14px;
162 -webkit-border-image: url(../images/backButton.png) 0 8 0 14;
168 -webkit-border-image: url(../images/actionButton.png) 0 5 0 5;
178 color: rgb(60,70,80);
188 text-shadow: #C0CBDB 0 1px 0;
189 text-overflow: ellipsis;
200 top: 18px !important;
204 top: 25px !important;
208 div.pre a#Backbutton {
209 left: 6px !important;
216 /***** List (base) ******/
221 border: 1px solid #B4B4B4;
222 font: normal 17px Helvetica;
224 margin: 15px 10px 17px 0;
225 -webkit-border-radius: 8px;
232 list-style-type: none;
233 // padding: 10px 10px 10px 10px;
234 // border: 1px solid #B4B4B4;
240 list-style-type: none;
241 padding: 10px 10px 10px 10px;
242 border: 1px solid #B4B4B4;
245 -webkit-tap-highlight-color:rgba(0,0,0,0);
250 /* when you have a first LI item on any list */
254 -webkit-border-top-left-radius: 8px;
255 -webkit-border-top-right-radius: 8px;
259 -webkit-border-bottom-left-radius: 8px;
260 -webkit-border-bottom-right-radius: 8px;
264 /* universal arrows */
267 border-bottom: 1px solid rgb(180,180,180);
271 background-image: url(../images/chevron.png);
272 background-position: right center;
273 background-repeat: no-repeat;
274 border: 1px solid rgb(180,180,180);
278 #plastic ul li.arrow, #metal ul li.arrow {
279 background-image: url(../images/chevron_dg.png);
280 background-position: right center;
281 background-repeat: no-repeat;
286 /* universal links on list */
288 ul li a, li.img a + a {
290 text-decoration: none;
291 text-overflow: ellipsis;
295 padding: 0px 0px 0px 0px;
297 -webkit-tap-highlight-color:rgba(0,0,0,0);
301 margin: 0px 10px 0px -5px;
306 ul li.img a + a + a {
315 ul li.img a + small + a {
320 ul li.img a + small + a + a {
328 ul li.img a + small + a + a + a {
329 margin-left: 0px !important;
336 font: 14px Helvetica;
337 text-overflow: ellipsis;
345 ul li a + a + a, ul li.img a + a + a + a, ul li.img a + small + a + a + a {
347 font: 13px Helvetica;
349 text-overflow: ellipsis;
360 /* standard mini-label */
364 font: 17px Helvetica;
366 text-overflow: ellipsis;
381 ul li small.counter {
382 font-size: 17px !important;
383 line-height: 13px !important;
385 background: rgb(154,159,170);
387 -webkit-border-radius: 11px;
388 padding: 4px 10px 5px 10px;
389 display: inline !important;
395 ul li.arrow small.counter {
402 /* resize without labels */
414 ul li.arrow small + a {
428 /* background: url(../images/standard-img.png) no-repeat; */
429 display: inline-block;
432 margin: 0px 0px 0px -60px;
433 padding: 0px 0px 0px 0px;
451 color: rgb(183,190,205);
453 border: 1px solid rgb(180,180,180);
456 -webkit-border-radius: 8px;
457 -webkit-box-sizing: border-box;
461 padding: 11px 10px 14px 10px;
464 ul.individual li + li {
471 color: rgb(50,79,133);
473 margin: -11px -10px -14px -10px;
474 padding: 11px 10px 14px 10px;
475 -webkit-border-radius: 8px;
478 ul.individual li a:hover {
486 /* Normal lists and metal */
490 /* 002863 rgb(154,159,170) */
491 background: rgb(0,40,99) url(../images/bglight.png) top left repeat-x;
492 border-top: 0px solid rgb(0,40,99); /* rgb(165,177,186); */
493 text-shadow: #666 0 1px 0;
499 body#normal, body#metal {
502 background-color: rgb(255,255,255);
505 body#normal ul, body#metal ul, body#plastic ul {
506 -webkit-border-radius: 0;
516 background: rgb(180,180,180);
522 /* body#normal ul li {
527 body#normal ul li small {
532 body#normal li, body#metal li {
533 -webkit-border-radius: 0;
541 body#normal h4 + ul {
542 border-top: 0px solid rgb(113,125,133);
543 border-bottom: 0px solid rgb(113,125,133);
548 border-top: 1px solid rgb(238,238,238);
549 border-bottom: 1px solid rgb(156,158,165);
550 background: url(../images/bgMetal.png) top left repeat-x;
552 text-shadow: #fff 0 1px 0;
561 body#metal ul li a:hover {
565 body#metal ul li:hover small {
570 body#metal ul li a em {
579 body#metal ul li small {
587 body#metal ul li.arrow a small {
593 body#metal ul li.arrow {
594 background: url(../images/bgMetal.png) top left repeat-x,
595 url(../images/chevron_dg.png) right center no-repeat;
603 background: url(../images/blackbg.png) top left repeat-x;
605 padding: 20px 10px 15px 10px;
615 text-shadow: #000 0 1px 0;
622 /***** BUTTONS *****/
626 font: bold 20px/46px Helvetica;
627 text-decoration: none;
629 text-shadow: #000 0 1px 0;
630 border-width: 0px 14px 0px 14px;
635 .green { -webkit-border-image: url(../images/greenButton.png) 0 14 0 14; }
636 .red { -webkit-border-image: url(../images/redButton.png) 0 14 0 14; }
640 text-shadow: #fff 0px 1px 0;
641 -webkit-border-image: url(../images/whiteButton.png) 0 14 0 14;
644 .black { -webkit-border-image: url(../images/grayButton.png) 0 14 0 14; }
659 ul.form li.error { border: 2px solid red; }
660 ul.form li.error + li.error { border-top: 0; }
662 ul.form li:hover { background: #fff; }
664 ul li input[type="text"], ul li input[type="password"], ul li textarea, ul li select {
666 background: #fff url(../.png); /* this is a hack due the default input shadow that iphones uses on textfields */
668 font: normal 17px Helvetica;
670 display: inline-block;
673 -webkit-appearance: textarea;
684 background: transparent url(../images/chevron.png) no-repeat 103% 3px;
685 -webkit-appearance: textfield;
690 ul li input[type="checkbox"], ul li input[type="radio"] {
692 color: rgb(50,79,133);
696 ul li input[type="checkbox"]:after, ul li input[type="radio"]:after {
697 content: attr(title);
698 font: 17px Helvetica;
701 margin: -12px 0 0 17px;
706 /**** INFORMATION FIELDS ****/
709 margin: 10px 0 5px 0;
720 ul.data li p + p { margin-top: 10px; }
732 text-decoration: underline;
752 /* line-height: 18px;*/
757 text-overflow: ellipsis;
763 display: inline-block;
768 /* line-height: 18px; */
771 display: inline-block;
775 /*vertical-align: top;*/
780 /* line-height: 18px; */
781 /* font-weight: bold; */
784 display: inline-block;
791 display: inline-block;
795 /* this is for profiling */
806 background: #fff url(../images/profile-user.png) no-repeat;
807 border: 1px solid #B4B4B4;
810 -webkit-border-radius: 4px;
811 -webkit-box-sizing: border-box;
822 ul.profile li + li h2, ul.profile li + li p {
823 color: rgb(46,55,68);
824 text-shadow: #fff 0 1px 0;
828 ul.profile li + li h2 {
829 font: bold 18px/22px Helvetica;
830 text-overflow: ellipsis;
835 ul.profile li + li p {
836 font: 14px/18px Helvetica;
837 text-overflow: ellipsis;
843 /* any A element inside this kind of field list will scale 62x62 */
854 /***** PLASTIC LISTS *****/
859 background: rgb(173,173,173);
863 -webkit-border-radius: 0;
868 background-color: rgb(173,173,173);
873 -webkit-border-radius: 0;
874 border-top: 1px solid rgb(191,191,191);
875 border-bottom: 1px solid rgb(157,157,157);
879 body#plastic ul li:nth-child(odd) {
880 background-color: rgb(152,152,152);
881 border-top: 1px solid rgb(181,181,181);
882 border-bottom: 1px solid rgb(138,138,138);
886 body#plastic ul + p {
893 body#plastic ul + p strong {
896 text-shadow: #fff 0 1px 0;
899 body#plastic ul li a {
900 text-shadow: rgb(211,211,211) 0 1px 0;
903 body#plastic ul li:nth-child(odd) a {
904 text-shadow: rgb(191,191,191) 0 1px 0;
908 body#plastic ul li small {
910 text-shadow: rgb(211,211,211) 0 1px 0;
913 text-transform: uppercase;
919 /**** MINI & BIG BANNERS ****/
921 #plastic ul.minibanner, #plastic ul.bigbanner {
928 #plastic ul.bigbanner {
929 height: 140px !important;
932 #plastic ul.minibanner li {
933 border: 1px solid rgb(138,138,138);
934 background-color: rgb(152,152,152);
938 -webkit-border-radius: 5px;
942 #plastic ul.bigbanner li {
943 border: 1px solid rgb(138,138,138);
944 background-color: rgb(152,152,152);
948 -webkit-border-radius: 5px;
953 #plastic ul.minibanner li:first-child {
958 #plastic ul.minibanner li a {
966 #plastic ul.bigbanner li a {
983 body#chat div.bubble {
984 margin: 10px 10px 0 0px;
991 body#chat div.right {
1000 body#chat div.right p {
1001 border-width: 10px 20px 12px 10px;
1004 body#chat div.left p {
1005 border-width: 10px 10px 12px 20px;
1010 body#chat div.left p.lime {
1011 -webkit-border-image: url(../images/chat_bubbles_lime_l.png) 10 10 13 19;
1014 body#chat div.left p.lemon {
1015 -webkit-border-image: url(../images/chat_bubbles_lemon_l.png) 10 10 13 19;
1018 body#chat div.left p.orange {
1019 -webkit-border-image: url(../images/chat_bubbles_orange_l.png) 10 10 13 19;
1022 body#chat div.left p.aqua {
1023 -webkit-border-image: url(../images/chat_bubbles_aqua_l.png) 10 10 13 19;
1026 body#chat div.left p.purple {
1027 -webkit-border-image: url(../images/chat_bubbles_purple_l.png) 10 10 13 19;
1030 body#chat div.left p.pink {
1031 -webkit-border-image: url(../images/chat_bubbles_pink_l.png) 10 10 13 19;
1034 body#chat div.left p.graphite {
1035 -webkit-border-image: url(../images/chat_bubbles_graphite_l.png) 10 10 13 19;
1038 body#chat div.left p.clear {
1039 -webkit-border-image: url(../images/chat_bubbles_clear_l.png) 10 10 13 19;
1047 body#chat div.right p.aqua {
1048 -webkit-border-image: url(../images/chat_bubbles_aqua_r.png) 10 19 13 10;
1051 body#chat div.right p.lemon {
1052 -webkit-border-image: url(../images/chat_bubbles_lemon_r.png) 10 19 13 10;
1055 body#chat div.right p.lime {
1056 -webkit-border-image: url(../images/chat_bubbles_lime_r.png) 10 19 13 10;
1059 body#chat div.right p.purple {
1060 -webkit-border-image: url(../images/chat_bubbles_purple_r.png) 10 19 13 10;
1063 body#chat div.right p.pink {
1064 -webkit-border-image: url(../images/chat_bubbles_pink_r.png) 10 19 13 10;
1067 body#chat div.right p.graphite {
1068 -webkit-border-image: url(../images/chat_bubbles_graphite_r.png) 10 19 13 10;
1071 body#chat div.right p.clear {
1072 -webkit-border-image: url(../images/chat_bubbles_clear_r.png) 10 19 13 10;
1081 body#chat div.bubble p {
1087 body#chat div.bubble + p {
1093 padding: 10px 0 0 0;
1102 /**** image grids ****/
1111 margin: 4px 4px 4px 0;
1113 -webkit-border-radius: 0;
1117 border: 1px solid #C0D5DD;
1118 -webkit-border-radius: 0;
1122 margin: 0 0 4px 4px;
1123 background: #F4FBFE url(../images/image-loading.gif) no-repeat center center;
1127 body#images ul li a {
1136 /*** BLANK PAGES ***/
1146 margin: 250px 0 0 0;
1152 /**** ICONFIED LIST ****/
1155 ul li a img.ico, ul li img.ico {
1158 margin: -4px 10px -4px -1px;