calculator7.css

/*
 * Calculator7: Calculator clone for iOS7 iPad by HTML5
 * author: ICHIKAWA, Yuji
 * Copyright (C) 2013 ICHIKAWA, Yuji (New 3 Rs)
 */
/*
 * generic
 */
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
/* Keep consistent line spacing with sup and sub
   http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=1&postId=5341 */
sup,
sub {
  height: 0;
  line-height: 1;
  vertical-align: baseline;
  _vertical-align: bottom;
  position: relative;
}
sup {
  bottom: 1ex;
}
sub {
  top: 0.5ex;
}
/*
 * main
 */
* {
  margin: 0;
  padding: 0;
  -webkit-border-horizontal-spacing: 0;
  -webkit-border-vertical-spacing: 0;
}
table {
  border-spacing: 0;
  /* firefox's default is 2px. */

}
html,
body {
  height: 100%;
}
body {
  font-family: 'HelveticaNeue-UltraLight';
  background-color: black;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#display {
  background-color: black;
  position: relative;
  /* in order to make height effective to children */

  color: white;
  text-align: right;
}
#view {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}
#angle {
  position: absolute;
  font-size: 14px;
  bottom: 2px;
  left: 15px;
}
#keypad-dimension {
  position: absolute;
  right: 0px;
  bottom: 0px;
}
#keypad {
  width: 100%;
  height: 100%;
  table-layout: fixed;
}
.key {
  color: black;
  text-align: center;
  border-top: solid 1px black;
  border-left: solid 1px black;
  position: relative;
}
.key.number,
#period {
  background-color: #d0d1d4;
}
.key.number:active,
#period:active {
  background-color: #bebfc1;
}
.key.function {
  background-color: #c4c5c8;
}
.key.function:active {
  background-color: #b5b5b7;
}
.key.operator,
#equal_key {
  color: white;
  background-color: #f38228;
}
.key.operator:active {
  background-color: #dc7d25;
}
.key .active {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  background-color: transparent;
  border: solid 2px #000000;
}
@media (orientation: portrait) {
  #keypad-dimension {
    width: 250%;
  }
}
@media (orientation: landscape) {
  #keypad-dimension {
    width: 100%;
  }
}
@media (orientation: landscape) {
  /* 480 * 300 for iPhone */
  #display {
    height: 60px;
    padding-right: 7px;
  }
  #view {
    font-size: 50px;
    line-height: 58px;
  }
  #keypad-dimension {
    top: 60px;
  }
  .key {
    line-height: 26px;
    font-size: 15px;
  }
  .key.small {
    font-size: 14px;
  }
}
@media (orientation: portrait) {
  /* 320 * 460 for iPhone */
  #display {
    height: 88px;
  }
  #view {
    font-size: 78px;
    line-height: 88px;
    /* equal to height */
  
  }
  #keypad-dimension {
    top: 88px;
  }
  .key {
    line-height: 39px;
    font-size: 21px;
  }
  .key.small {
    font-size: 17px;
  }
}
@media (min-width: 768px) and (orientation: portrait) {
  /* iPad Portrait 768x1004 */
  /* 2.4 times */
  #display {
    height: 211.2px;
  }
  #view {
    font-size: 187.2px;
    line-height: 211.2px;
    padding-right: 14px;
  }
  #angle {
    font-size: 33.6px;
    bottom: 4.8px;
    left: 36px;
  }
  #keypad-dimension {
    top: 211.2px;
  }
  .key {
    line-height: 95px;
    font-size: 55px;
  }
  .key.small {
    font-size: 44px;
  }
}
@media (min-width: 768px) and (orientation: landscape) {
  /* iPad Landscape 1024x748 */
  /* 2.13 times */
  #display {
    height: 127.8px;
  }
  #view {
    font-size: 106.5px;
    line-height: 123.53999999999999px;
    padding-right: 5px;
  }
  #angle {
    font-size: 29.82px;
    bottom: 4.26px;
    left: 31.95px;
  }
  #keypad-dimension {
    top: 127.8px;
  }
  .key {
    line-height: 60px;
    font-size: 38px;
  }
  .key.small {
    font-size: 35px;
  }
}