style.css

/**
 * Copyright (c) 2012 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 **/

body {
  font: bold 16px
        'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  margin: 0;
  overflow: hidden;
}

#calculator {
  height: 100%;
  width: 100%;
}

#calculator-buttons {
  background: gray;
  bottom: 0;
  height: 225px;
  left: 0;
  position: absolute;
  right: 0;
}

#calculator-buttons div {
  font-size: 0;
  margin: 0 auto;
  position: relative;
  width: 243px;
}

#calculator-buttons button {
  border: none;
  height: 45px;
  width: 61px;
}

@media all and (-webkit-max-device-pixel-ratio: 1.5) {
  #calculator-buttons button {
    background: url('images/buttons_1x.png');
    background-size: 486px 225px;  /* Chrome requires this be defined _with_ */
  }                                /* or _after_ the image, Safari requires */
}                                  /* _before_ or _after_, so using _after_. */

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  #calculator-buttons button {
    background: url('images/buttons_2x.png');
    background-size: 486px 225px;  /* Chrome requires this be defined _with_ */
  }                                /* or _after_ the image, Safari requires */
}                                  /* _before_ or _after_, so using _after_. */

#calculator-buttons button.add {
  background-position: -183px -90px;
  width: 60px;
}

#calculator-buttons button.add[data-active="touch"],
#calculator-buttons button.add[data-active="mouse"]:active {
  background-position: -426px -90px;
}

#calculator-buttons button.clear {
  /* The default background-position: 0 0; is fine */
}

#calculator-buttons button.clear[data-active="touch"],
#calculator-buttons button.clear[data-active="mouse"]:active {
  background-position: -243px 0;
}

#calculator-buttons button.divide {
  background-position: -122px 0;
}

#calculator-buttons button.divide[data-active="touch"],
#calculator-buttons button.divide[data-active="mouse"]:active {
  background-position: -365px 0;
}

#calculator-buttons button.eight {
  background-position: -61px -45px;
}

#calculator-buttons button.eight[data-active="touch"],
#calculator-buttons button.eight[data-active="mouse"]:active {
  background-position: -304px -45px;
}

#calculator-buttons button.equals {
  background-position: -183px -135px;
  height: 90px;
  margin: 0 0 -45px;
  vertical-align: top;
  width: 60px;
}

#calculator-buttons button.equals[data-active="touch"],
#calculator-buttons button.equals[data-active="mouse"]:active {
  background-position: -426px -135px;
}

#calculator-buttons button.five {
  background-position: -61px -90px;
}

#calculator-buttons button.five[data-active="touch"],
#calculator-buttons button.five[data-active="mouse"]:active {
  background-position: -304px -90px;
}

#calculator-buttons button.four {
  background-position: 0 -90px;
}

#calculator-buttons button.four[data-active="touch"],
#calculator-buttons button.four[data-active="mouse"]:active {
  background-position: -243px -90px;
}

#calculator-buttons button.multiply {
  background-position: -183px 0;
  width: 60px;
}

#calculator-buttons button.multiply[data-active="touch"],
#calculator-buttons button.multiply[data-active="mouse"]:active {
  background-position: -426px 0;
}

#calculator-buttons button.negate {
  background-position: -61px 0;
}

#calculator-buttons button.negate[data-active="touch"],
#calculator-buttons button.negate[data-active="mouse"]:active {
  background-position: -304px 0;
}

#calculator-buttons button.nine {
  background-position: -122px -45px;
}

#calculator-buttons button.nine[data-active="touch"],
#calculator-buttons button.nine[data-active="mouse"]:active {
  background-position: -365px -45px;
}

#calculator-buttons button.one {
  background-position: 0 -135px;
}

#calculator-buttons button.one[data-active="touch"],
#calculator-buttons button.one[data-active="mouse"]:active {
  background-position: -243px -135px;
}

#calculator-buttons button.point {
  background-position: -122px -180px;
}

#calculator-buttons button.point[data-active="touch"],
#calculator-buttons button.point[data-active="mouse"]:active {
  background-position: -365px -180px;
}

#calculator-buttons button.seven {
  background-position: 0 -45px;
}

#calculator-buttons button.seven[data-active="touch"],
#calculator-buttons button.seven[data-active="mouse"]:active {
  background-position: -243px -45px;
}

#calculator-buttons button.six {
  background-position: -122px -90px;
}

#calculator-buttons button.six[data-active="touch"],
#calculator-buttons button.six[data-active="mouse"]:active {
  background-position: -365px -90px;
}

#calculator-buttons button.subtract {
  background-position: -183px -45px;
  width: 60px;
}

#calculator-buttons button.subtract[data-active="touch"],
#calculator-buttons button.subtract[data-active="mouse"]:active {
  background-position: -426px -45px;
}

#calculator-buttons button.three {
  background-position: -122px -135px;
}

#calculator-buttons button.three[data-active="touch"],
#calculator-buttons button.three[data-active="mouse"]:active {
  background-position: -365px -135px;
}

#calculator-buttons button.two {
  background-position: -61px -135px;
}

#calculator-buttons button.two[data-active="touch"],
#calculator-buttons button.two[data-active="mouse"]:active {
  background-position: -304px -135px;
}

#calculator-buttons button.zero {
  background-position: 0 -180px;
  width: 122px;
}

#calculator-buttons button.zero[data-active="touch"],
#calculator-buttons button.zero[data-active="mouse"]:active {
  background-position: -243px -180px;
}

#calculator-display,
#calculator-display:focus {
  background: white;
  bottom: 225px;
  left: auto;
  letter-spacing: 1px;
  overflow: scroll;
  padding: 20px;
  position: absolute;
  right: auto;
  top: 0;
  width: 203px;
}

#calculator-display .equation {
  display: table;  /* Table display is required to allow baseline vertical */
                   /* alignment of accumulator, operator, and operand text */
                   /* with different font sizes whose actual pixel heights */
                   /* will be different on different platforms. */
  height: 22px;
  padding: 0 0 6px;
  width: 100%;
}

#calculator-display .equation * {
  display: table-cell;
  text-align: left;
  vertical-align: baseline;
}

#calculator-display .equation .accumulator {
  color: rgb(136, 136, 136);
  font-size: 13px;
  width: 100%;
}

#calculator-display .equation .operation {
  color: rgb(44, 44, 44);
  display: table;
}

#calculator-display .equation .operation .operator .spacer {
  display: block;  /* Keeps operator 15px wide even though it's a table-cell. */
  height: 0px;
  width: 15px;
}

#calculator-display .equation .operation .operator .value {
  display: block;
}

#calculator-display .hr {
  border-top: 1px solid rgb(217, 217, 217);
  height: 0;
  position: relative;
  top: -6px;
  width: 100%;
}

#calculator-display .hr + .equation {
  margin: -1px 0 0;  /* Keeps spacing between lines uniform even with .hr. */
}

#calculator-fade {
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 99;
}

#calculator-fade-edge {
  background: white;
  height: 5px;
}

#calculator-fade-gradient {
  background: -webkit-linear-gradient(rgba(255, 255, 255, 1),
                                      rgba(255, 255, 255, 0));
  height: 20px;
}

::-webkit-scrollbar {
  display: none;
}