Source of “iphone.css”.
328 lines, 5.9 KBytes.   Last modified 3:44 pm, 1st November 2015 PST.
1 /* Emacs settings: -*- mode: Fundamental; tab-width: 4; -*- 2 3 //////////////////////////////////////////////////////////////////////////// 4 // // 5 // Pachylet: Andrew's Web Mail Interface, Version 2 // 6 // // 7 // Copyright (c) 2002-2014 // 8 // // 9 // See http://birrell.org/pachylet/help.html // 10 // // 11 // Stylesheet for iPhone // 12 // // 13 //////////////////////////////////////////////////////////////////////////// 14 15 */ 16 17 A:link { color: #000099; } 18 A:active { color: #ff0000; } 19 A:visited { color: #000099; } 20 21 body { 22 background-color: #ffffff; 23 color: #000000; 24 margin: 0px; 25 padding: 0px; 26 -webkit-text-size-adjust: 100%; 27 -moz-text-size-adjust: 100%; 28 -ms-text-size-adjust: 100%; 29 font-size: 16px; 30 overflow: hidden; 31 } 32 33 34 /* 35 * General screen layout 36 */ 37 38 div.screen { /* switchable screens */ 39 position: absolute; 40 width: 100%; 41 display: none; 42 background-color: #ffffee; 43 } 44 div.contents { /* contents of each screen */ 45 padding-left: 3px; 46 padding-right: 3px; 47 } 48 .scrollable { 49 overflow-x: auto; 50 overflow-y: scroll; 51 -webkit-overflow-scrolling: touch; 52 } 53 .fixedNoWrap, .fixedButWrap { 54 font-family: monospace, courier, "courier new", lucida; 55 font-size: 1em; 56 } 57 .fixedNoWrap { 58 white-space: pre; 59 } 60 #toc { 61 overflow-x: auto; 62 -webkit-overflow-scrolling: touch; 63 } 64 /* Note: overflow-x in #msgHead causes message body scrolling to fail, 65 for some messages, when message is not cached, in iOS 8.4 at least */ 66 /* Note: overflow-x in #msgBody produces a strange scrolling experience */ 67 /* Note: #msgBody has automatic height, so overflow-y there does nothing */ 68 #msgHead { 69 } 70 #msgBody { 71 padding-bottom: 3px; 72 } 73 input { 74 font-size: 1em; 75 } 76 .right { 77 text-align: right; 78 } 79 .center { 80 text-align: center; 81 } 82 hr { 83 height: 0.0625em; 84 } 85 86 87 /* 88 * Login screen 89 */ 90 91 #loginScreen { 92 display: block; 93 background-color: #99cc99; 94 } 95 #login { 96 height: 3000px; /* taller than screen, to avoid flicker at start-up */ 97 } 98 #loginTitle { 99 text-align: center; 100 } 101 #loginTable { 102 margin-left: auto; 103 margin-right: auto; 104 padding-top: 0.5em; 105 font-size: 1.1em; 106 visibility: hidden; 107 } 108 #loginComment { /* coment at foot of login table */ 109 font-size: 0.75em; 110 text-align: center; 111 } 112 #loginElephant { 113 display: block; 114 width: 88px; 115 height: 108px; 116 margin-left: auto; 117 margin-right: auto; 118 margin-top: 1.5em; 119 } 120 121 122 /* 123 * Menu bars 124 */ 125 126 div.menu { /* menu at top and bottom of each screen */ 127 background-color: #cccccc; 128 background-image: url("menuBar.png"); 129 font-size: 1.33em; 130 font-style: bold; 131 } 132 div.menuTop { /* menu at top of screen */ 133 height: 43px; 134 background-position: bottom; 135 } 136 div.menuBottom { /* menu at bottom of screen */ 137 height: 40px; 138 padding-top: 3px; 139 } 140 div.menu span { /* menu caption text */ 141 display: block; 142 padding-top: 0.35em; 143 white-space: pre; 144 overflow: hidden; 145 } 146 div.menuLeft { /* for each button at left of menu */ 147 float: left; 148 } 149 div.menuRight { /* for each button at right of menu */ 150 float: right; 151 } 152 div.menuPad { /* padding at RHS of menu bar */ 153 float: right; 154 width: 2px; 155 font-size: 1px; 156 } 157 div.btn { /* a button in the menu */ 158 width: 51px; 159 height: 100%; 160 padding-left: 2px; 161 background-image: url("button.png"); 162 text-align: center; 163 font-family: sans-serif; 164 font-size: 0.6em; 165 } 166 div.btnBack { /* "back" buttons at top-left */ 167 width: 53px; 168 padding-left: 10px; 169 background-image: url("buttonBack.png"); 170 } 171 div.btnBlank { /* blank btn placeholder */ 172 background-image: none; 173 } 174 div.btn a { /* button anchor; "block" to extend active area */ 175 display: block; 176 padding-top: 1em; 177 padding-bottom: 0.8em; 178 color: #000000; 179 text-decoration: none; 180 } 181 #tocCounters, #msgCounters, #draftSavedAt { 182 padding-top: 0.2em; 183 font-size: 0.7em; 184 font-style: plain; 185 text-align: center; 186 } 187 188 189 /* 190 * Scrollbars 191 */ 192 193 #tocWrapper { /* define coordinates for heights in scrollbar */ 194 position: relative; 195 } 196 .scrollbarUnderlay { /* line under the scrollbar */ 197 position: absolute; 198 right: 0px; 199 width: 15px; 200 height: 100%; 201 z-index: 2; 202 border-left: 2px #cccccc ridge; 203 } 204 .scrollbar { 205 position: absolute; 206 right: 0px; 207 top: 0px; 208 bottom: 0px; 209 width: 30px; 210 z-index: 2; 211 background-color: transparent; 212 cursor: pointer; 213 -webkit-user-select: none; 214 } 215 .scroller, .scrollDragging { 216 margin-left: 15px; 217 border-width: 1px; 218 } 219 .scroller { 220 border-style: outset; 221 border-color: #88bbee; 222 background-color: #6699cc; 223 } 224 .scrollDragging { 225 border-style: inset; 226 border-color: #aaddff; 227 background-color: #88bbee; 228 } 229 230 231 /* 232 * Folder list and TOC 233 */ 234 235 .clickList hr { 236 margin: 0px; 237 } 238 .clickList a { 239 display: block; 240 height: 41px; 241 padding-top: 2px; 242 text-decoration: none; 243 white-space: pre; 244 } 245 #folderList a, #moveDestList a { 246 font-size: 1.5em; 247 height: 37px; 248 padding-top: 6px; 249 } 250 251 252 /* 253 * find screen 254 */ 255 256 .findLabel { 257 display: inline-block; 258 width: 3em; 259 } 260 261 262 /* 263 * moveOp, moveDest, and markOp screens 264 */ 265 266 div.opSel { /* container for operation selection buttons */ 267 padding: 2em; 268 } 269 div.btnWide { /* 4x wide button */ 270 width: 159px; 271 margin-left: auto; 272 margin-right: auto; 273 margin-bottom: 0.75em; 274 background-image: url("buttonWide.png"); 275 text-align: center; 276 font-family: sans-serif; 277 } 278 div.btnWide a { /* button anchor; "block" to extend active area */ 279 padding-top: 0.65em; 280 padding-bottom: 0.75em; 281 display: block; 282 color: #000000; 283 text-decoration: none; 284 } 285 286 287 /* 288 * composition screen 289 */ 290 291 #draftWrapper { 292 position: relative; /* make this the offsetParent of draftBody */ 293 } 294 #draftHeader { /* avoids having a border on draftBody */ 295 padding-top: 2px; 296 padding-bottom: 2px; 297 border-bottom: 3px outset; 298 } 299 #draftBody { /* border, etc all 0 to make height calc. easier */ 300 margin: 0px; 301 border: 0px; 302 padding: 0px; 303 width: 100%; 304 font-family: monospace; 305 font-size: 1em; 306 line-height: 1.25em; 307 } 308 309 310 /* 311 * add-recipient screen 312 */ 313 314 #draftContactsFinder { /* "find" div */ 315 padding-top: 5px; 316 } 317 #draftContactsFilter { /* "find" text */ 318 font-size: 0.75em; 319 } 320 321 322 /* 323 * attach screen 324 */ 325 326 #attachForm { 327 padding: 4em; 328 }
End of listing