1 /** 2 * Copyright (c) 2012 The Chromium Authors. All rights reserved. 3 * Use of this source code is governed by a BSD-style license that can be 4 * found in the LICENSE file. 5 **/ 6 7 body { 8 font: bold 16px 9 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; 10 margin: 0; 11 overflow: hidden; 12 } 13 14 #calculator { 15 height: 100%; 16 width: 100%; 17 } 18 19 #calculator-buttons { 20 background: gray; 21 bottom: 0; 22 height: 225px; 23 left: 0; 24 position: absolute; 25 right: 0; 26 } 27 28 #calculator-buttons div { 29 font-size: 0; 30 margin: 0 auto; 31 position: relative; 32 width: 243px; 33 } 34 35 #calculator-buttons button { 36 border: none; 37 height: 45px; 38 width: 61px; 39 } 40 41 @media all and (-webkit-max-device-pixel-ratio: 1.5) { 42 #calculator-buttons button { 43 background: url('images/buttons_1x.png'); 44 background-size: 486px 225px; /* Chrome requires this be defined _with_ */ 45 } /* or _after_ the image, Safari requires */ 46 } /* _before_ or _after_, so using _after_. */ 47 48 @media all and (-webkit-min-device-pixel-ratio: 1.5) { 49 #calculator-buttons button { 50 background: url('images/buttons_2x.png'); 51 background-size: 486px 225px; /* Chrome requires this be defined _with_ */ 52 } /* or _after_ the image, Safari requires */ 53 } /* _before_ or _after_, so using _after_. */ 54 55 #calculator-buttons button.add { 56 background-position: -183px -90px; 57 width: 60px; 58 } 59 60 #calculator-buttons button.add[data-active="touch"], 61 #calculator-buttons button.add[data-active="mouse"]:active { 62 background-position: -426px -90px; 63 } 64 65 #calculator-buttons button.clear { 66 /* The default background-position: 0 0; is fine */ 67 } 68 69 #calculator-buttons button.clear[data-active="touch"], 70 #calculator-buttons button.clear[data-active="mouse"]:active { 71 background-position: -243px 0; 72 } 73 74 #calculator-buttons button.divide { 75 background-position: -122px 0; 76 } 77 78 #calculator-buttons button.divide[data-active="touch"], 79 #calculator-buttons button.divide[data-active="mouse"]:active { 80 background-position: -365px 0; 81 } 82 83 #calculator-buttons button.eight { 84 background-position: -61px -45px; 85 } 86 87 #calculator-buttons button.eight[data-active="touch"], 88 #calculator-buttons button.eight[data-active="mouse"]:active { 89 background-position: -304px -45px; 90 } 91 92 #calculator-buttons button.equals { 93 background-position: -183px -135px; 94 height: 90px; 95 margin: 0 0 -45px; 96 vertical-align: top; 97 width: 60px; 98 } 99 100 #calculator-buttons button.equals[data-active="touch"], 101 #calculator-buttons button.equals[data-active="mouse"]:active { 102 background-position: -426px -135px; 103 } 104 105 #calculator-buttons button.five { 106 background-position: -61px -90px; 107 } 108 109 #calculator-buttons button.five[data-active="touch"], 110 #calculator-buttons button.five[data-active="mouse"]:active { 111 background-position: -304px -90px; 112 } 113 114 #calculator-buttons button.four { 115 background-position: 0 -90px; 116 } 117 118 #calculator-buttons button.four[data-active="touch"], 119 #calculator-buttons button.four[data-active="mouse"]:active { 120 background-position: -243px -90px; 121 } 122 123 #calculator-buttons button.multiply { 124 background-position: -183px 0; 125 width: 60px; 126 } 127 128 #calculator-buttons button.multiply[data-active="touch"], 129 #calculator-buttons button.multiply[data-active="mouse"]:active { 130 background-position: -426px 0; 131 } 132 133 #calculator-buttons button.negate { 134 background-position: -61px 0; 135 } 136 137 #calculator-buttons button.negate[data-active="touch"], 138 #calculator-buttons button.negate[data-active="mouse"]:active { 139 background-position: -304px 0; 140 } 141 142 #calculator-buttons button.nine { 143 background-position: -122px -45px; 144 } 145 146 #calculator-buttons button.nine[data-active="touch"], 147 #calculator-buttons button.nine[data-active="mouse"]:active { 148 background-position: -365px -45px; 149 } 150 151 #calculator-buttons button.one { 152 background-position: 0 -135px; 153 } 154 155 #calculator-buttons button.one[data-active="touch"], 156 #calculator-buttons button.one[data-active="mouse"]:active { 157 background-position: -243px -135px; 158 } 159 160 #calculator-buttons button.point { 161 background-position: -122px -180px; 162 } 163 164 #calculator-buttons button.point[data-active="touch"], 165 #calculator-buttons button.point[data-active="mouse"]:active { 166 background-position: -365px -180px; 167 } 168 169 #calculator-buttons button.seven { 170 background-position: 0 -45px; 171 } 172 173 #calculator-buttons button.seven[data-active="touch"], 174 #calculator-buttons button.seven[data-active="mouse"]:active { 175 background-position: -243px -45px; 176 } 177 178 #calculator-buttons button.six { 179 background-position: -122px -90px; 180 } 181 182 #calculator-buttons button.six[data-active="touch"], 183 #calculator-buttons button.six[data-active="mouse"]:active { 184 background-position: -365px -90px; 185 } 186 187 #calculator-buttons button.subtract { 188 background-position: -183px -45px; 189 width: 60px; 190 } 191 192 #calculator-buttons button.subtract[data-active="touch"], 193 #calculator-buttons button.subtract[data-active="mouse"]:active { 194 background-position: -426px -45px; 195 } 196 197 #calculator-buttons button.three { 198 background-position: -122px -135px; 199 } 200 201 #calculator-buttons button.three[data-active="touch"], 202 #calculator-buttons button.three[data-active="mouse"]:active { 203 background-position: -365px -135px; 204 } 205 206 #calculator-buttons button.two { 207 background-position: -61px -135px; 208 } 209 210 #calculator-buttons button.two[data-active="touch"], 211 #calculator-buttons button.two[data-active="mouse"]:active { 212 background-position: -304px -135px; 213 } 214 215 #calculator-buttons button.zero { 216 background-position: 0 -180px; 217 width: 122px; 218 } 219 220 #calculator-buttons button.zero[data-active="touch"], 221 #calculator-buttons button.zero[data-active="mouse"]:active { 222 background-position: -243px -180px; 223 } 224 225 #calculator-display, 226 #calculator-display:focus { 227 background: white; 228 bottom: 225px; 229 left: auto; 230 letter-spacing: 1px; 231 overflow: scroll; 232 padding: 20px; 233 position: absolute; 234 right: auto; 235 top: 0; 236 width: 203px; 237 } 238 239 #calculator-display .equation { 240 display: table; /* Table display is required to allow baseline vertical */ 241 /* alignment of accumulator, operator, and operand text */ 242 /* with different font sizes whose actual pixel heights */ 243 /* will be different on different platforms. */ 244 height: 22px; 245 padding: 0 0 6px; 246 width: 100%; 247 } 248 249 #calculator-display .equation * { 250 display: table-cell; 251 text-align: left; 252 vertical-align: baseline; 253 } 254 255 #calculator-display .equation .accumulator { 256 color: rgb(136, 136, 136); 257 font-size: 13px; 258 width: 100%; 259 } 260 261 #calculator-display .equation .operation { 262 color: rgb(44, 44, 44); 263 display: table; 264 } 265 266 #calculator-display .equation .operation .operator .spacer { 267 display: block; /* Keeps operator 15px wide even though it's a table-cell. */ 268 height: 0px; 269 width: 15px; 270 } 271 272 #calculator-display .equation .operation .operator .value { 273 display: block; 274 } 275 276 #calculator-display .hr { 277 border-top: 1px solid rgb(217, 217, 217); 278 height: 0; 279 position: relative; 280 top: -6px; 281 width: 100%; 282 } 283 284 #calculator-display .hr + .equation { 285 margin: -1px 0 0; /* Keeps spacing between lines uniform even with .hr. */ 286 } 287 288 #calculator-fade { 289 left: 0; 290 position: absolute; 291 right: 0; 292 top: 0; 293 z-index: 99; 294 } 295 296 #calculator-fade-edge { 297 background: white; 298 height: 5px; 299 } 300 301 #calculator-fade-gradient { 302 background: -webkit-linear-gradient(rgba(255, 255, 255, 1), 303 rgba(255, 255, 255, 0)); 304 height: 20px; 305 } 306 307 ::-webkit-scrollbar { 308 display: none; 309 } 310