File:
1.11.2a/server/web/css/iphone.css (
View as Code)
1: /*
2:
3: File:browser.css
4:
5: Abstract: Style rules for the Simple Browser sample - Modified for FreeNATS Sept 08
6:
7: Version: 1.0
8:
9: Disclaimer: IMPORTANT: This Apple software is supplied to you by
10: Apple Inc. ("Apple") in consideration of your agreement to the
11: following terms, and your use, installation, modification or
12: redistribution of this Apple software constitutes acceptance of these
13: terms. If you do not agree with these terms, please do not use,
14: install, modify or redistribute this Apple software.
15:
16: In consideration of your agreement to abide by the following terms, and
17: subject to these terms, Apple grants you a personal, non-exclusive
18: license, under Apple's copyrights in this original Apple software (the
19: "Apple Software"), to use, reproduce, modify and redistribute the Apple
20: Software, with or without modifications, in source and/or binary forms;
21: provided that if you redistribute the Apple Software in its entirety and
22: without modifications, you must retain this notice and the following
23: text and disclaimers in all such redistributions of the Apple Software.
24: Neither the name, trademarks, service marks or logos of Apple Inc.
25: may be used to endorse or promote products derived from the Apple
26: Software without specific prior written permission from Apple. Except
27: as expressly stated in this notice, no other rights or licenses, express
28: or implied, are granted by Apple herein, including but not limited to
29: any patent rights that may be infringed by your derivative works or by
30: other works in which the Apple Software may be incorporated.
31:
32: The Apple Software is provided by Apple on an "AS IS" basis. APPLE
33: MAKES NO WARRANTIES, EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION
34: THE IMPLIED WARRANTIES OF NON-INFRINGEMENT, MERCHANTABILITY AND FITNESS
35: FOR A PARTICULAR PURPOSE, REGARDING THE APPLE SOFTWARE OR ITS USE AND
36: OPERATION ALONE OR IN COMBINATION WITH YOUR PRODUCTS.
37:
38: IN NO EVENT SHALL APPLE BE LIABLE FOR ANY SPECIAL, INDIRECT, INCIDENTAL
39: OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
40: SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
41: INTERRUPTION) ARISING IN ANY WAY OUT OF THE USE, REPRODUCTION,
42: MODIFICATION AND/OR DISTRIBUTION OF THE APPLE SOFTWARE, HOWEVER CAUSED
43: AND WHETHER UNDER THEORY OF CONTRACT, TORT (INCLUDING NEGLIGENCE),
44: STRICT LIABILITY OR OTHERWISE, EVEN IF APPLE HAS BEEN ADVISED OF THE
45: POSSIBILITY OF SUCH DAMAGE.
46:
47: Copyright (C) 2008 Apple Inc. All Rights Reserved.
48:
49: */
50:
51: /* ==================== TOP-LEVEL CONTAINERS ==================== */
52:
53: body {
54: width: 320px;
55: margin: 0px;
56: padding: 0px;
57: background-image: url('../images/iphone/background_stripes.png');
58: background-repeat: repeat;
59: font-family: Helvetica;
60: /* ensure that we don't get the default callout following a long touch on
61: an element, which is a default behavior in Mobile Safari */
62: -webkit-touch-callout: none;
63: /* disable the Mobile Safari default behavior to adjust font size automatically
64: to improve readability */
65: -webkit-text-size-adjust: none;
66: }
67:
68: /*
69: when the orientation changes to landscape mode, the body is assigned the .landscape
70: class so that we can easily change metrics and other properties via simple CSS matching
71: */
72: body.landscape {
73: width: 480px;
74: }
75:
76: #browser {
77: /* ensure we always fill the whole screen */
78: min-height: 416px;
79: }
80:
81: body.landscape #browser {
82: min-height: 268px;
83: }
84:
85: /* ==================== HEADER ==================== */
86:
87: #header {
88: position: relative;
89: height: 40px;
90: background-image: url('../images/iphone/header_middle.png');
91: border-bottom: 1px solid rgb(45, 54, 66);
92: }
93:
94: .button {
95: /* use absolute positioning and transforms as these will be subject to hardware transitions */
96: position: absolute;
97: -webkit-transform: translate(0px, 0px);
98: /* the buttons should be displayed on top of the titles so that they can always receive touches */
99: z-index: 1;
100: /* set up the font appearance */
101: font-size: 12px;
102: font-weight: bold;
103: text-align: center;
104: color: white;
105: text-shadow: rgba(0, 0, 0, .6) 0px -1px 0px;
106: /* set up the chrome background */
107: -webkit-border-image : url('../images/iphone/back_button.png') 0 4 0 13;
108: border-width : 0 4px 0 13px;
109: padding-top: 7px;
110: top: 5px;
111: padding-right: 4px;
112: /* base metrics used to ensure a minumum size and specify a max size that can be used to trim the contents */
113: min-width: 40px;
114: max-width: 60px;
115: height: 23px;
116: /* enfore trimming if the label is too long */
117: white-space : nowrap;
118: overflow : hidden;
119: text-overflow: ellipsis;
120: }
121:
122: body.landscape .button {
123: max-width: 90px;
124: }
125:
126: /* touched state for the buttons */
127: .button:active {
128: -webkit-border-image : url('../images/iphone/back_button_touched.png') 0 4 0 13;
129: }
130:
131: .title {
132: /* use absolute positioning and transforms as these will be subject to hardware transitions */
133: position: absolute;
134: -webkit-transform: translate(0px, 0px);
135: /* base metrics */
136: left: 75px;
137: height: 31px;
138: margin-top: 7px;
139: /* the titles should be displayed below the button so that they don't receive touches */
140: z-index: 0;
141: /* set up the font appearance */
142: font-size: 16pt;
143: font-weight: bold;
144: color: white;
145: text-shadow: rgba(0, 0, 0, .6) 0px -1px 0px;
146: /* enfore trimming if the label is too long */
147: white-space : nowrap;
148: overflow : hidden;
149: text-overflow: ellipsis;
150: }
151:
152: /* ==================== MAIN PAGES CONTENT ==================== */
153:
154: #pages_container > div {
155: position: absolute;
156: /*
157: add a default transform so that the contents of the pages
158: are already composited as hardware elements and will animate
159: smoothly later on when we launch transitions
160: */
161: -webkit-transform: translate(0px,0px);
162: }
163:
164: ul {
165: width: 300px;
166: padding: 0px;
167: margin: 10px 0px 6px 10px;
168: font-size: 18px;
169: font-weight: bold;
170: }
171:
172: body.landscape ul {
173: width: 460px;
174: }
175:
176: li {
177: /* height: 32px; */
178: list-style-type: none;
179: background-color: white;
180: border-style: solid;
181: border-width: 1px 1px 0px 1px;
182: border-color: rgb(171,173,176);
183: margin: 0px;
184: padding-top: 14px;
185: padding-left: 10px;
186: padding-right: 20px;
187: padding-bottom: 14px;
188: /* ensure that long pieces of text get trimmed */
189: white-space : nowrap;
190: overflow: hidden;
191: text-overflow: ellipsis;
192: }
193:
194: /*
195: this matches the first list item, which needs rounding in the top corners
196: and no bottom border as the item below will already draw a border at its top
197: */
198: li:first-child {
199: -webkit-border-top-left-radius: 8px;
200: -webkit-border-top-right-radius: 8px;
201: border: 1px solid rgb(171,173,176);
202: border-bottom-width: 0;
203: }
204:
205: /*
206: this matches the last list item, which needs rounding in the bottom corners
207: and a bottom border
208: */
209: li:last-child {
210: -webkit-border-bottom-left-radius: 8px;
211: -webkit-border-bottom-right-radius: 8px;
212: border: 1px solid rgb(171,173,176);
213: margin-bottom: 5px;
214: }
215:
216: /*
217: list items with the .group class are those that can be tapped to drill
218: further down and therefore need an arrow in the background to indicate that
219: */
220: li.group {
221: background-image: url('../images/iphone/chevron.png');
222: background-repeat: no-repeat;
223: background-position: 280px 18px;
224: }
225:
226: li.grouptitle {
227: font-weight: bold;
228: /* background-image: url('../images/iphone/header_middle.png'); */
229: background: #a0a0e0;
230: color: white;
231: font-size: 14pt;
232: }
233:
234: body.landscape li.group {
235: background-position: 440px 18px;
236: }
237:
238:
239:
240: body.landscape li.group:active {
241: background-position: 440px 18px, 0 0;
242: }
243:
244: b.al-1 { color: black; }
245: b.al0 { color: green; }
246: b.al1 { color: orange; }
247: b.al2 { color: red; }
248:
249: i.subtext { font-size: 8pt; color: #909090; }
250:
251: div.sectitle { font-size: 10pt; color: black; font-weight: bold; margin-top: 10px; }
252: