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 7body { 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