Viewing File server/web/css/iphone.css of 1.06.2a
|
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: