انجمن کدستانMoisrex

@import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);@import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono);

input, button { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

::-moz-focus-inner { padding: 0; border: 0;}

body { font: 12px/20px "Lucida Grande", Tahoma, Verdana, sans-serif; color: #404040;}

.calc { margin: 20px auto; padding: 15px; width: 177px; background: #3d4543; border: 1px solid #222222; border-radius: 4px; background-image: -webkit-linear-gradient(top, #3d4543, #2f2a2f); background-image: -moz-linear-gradient(top, #3d4543, #2f2a2f); background-image: -o-linear-gradient(top, #3d4543, #2f2a2f); background-image: linear-gradient(to bottom, #3d4543, #2f2a2f); -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 4px rgba(0, 0, 0, 0.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 4px rgba(0, 0, 0, 0.5);}

.calc-display { margin: 0 0 20px; padding: 3px; background: #222; border-radius: 3px; -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.08);}

.calc-display-input { display: block; width: 100%; height: 35px; padding: 0 8px; font: 26px/35px 'Ubuntu Mono', monospace; color: #444; text-align: right; background: #bccd95; background-clip: padding-box; /* Don't let the background bleed outside the border */ border: 1px solid #222222; border-radius: 2px; background-image: -webkit-linear-gradient(top, #bccd95, #e0f5b1); background-image: -moz-linear-gradient(top, #bccd95, #e0f5b1); background-image: -o-linear-gradient(top, #bccd95, #e0f5b1); background-image: linear-gradient(to bottom, #bccd95, #e0f5b1); -webkit-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.12); box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.12);}

.calc-row { margin-top: 7px; zoom: 1;}

.calc-row:before, .calc-row:after { content: ''; display: table;}

.calc-row:after { clear: both;}

.calc-button { float: left; padding: 0; margin: 0 0 0 7px; width: 39px; font: 14px/23px 'Ubuntu Mono', monospace; color: white; text-align: center; text-decoration: none; text-shadow: 0 1px rgba(0, 0, 0, 0.4); background: #313131; background-clip: padding-box !important; /* Firefox overrides the value on :active */ border: 0; /* IE 8 fix */ border: 1px solid rgba(0, 0, 0, 0.8); border-radius: 3px; cursor: pointer; background-image: -webkit-linear-gradient(top, #313131, #1c1c1c); background-image: -moz-linear-gradient(top, #313131, #1c1c1c); background-image: -o-linear-gradient(top, #313131, #1c1c1c); background-image: linear-gradient(to bottom, #313131, #1c1c1c); -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08);}

.calc-button:first-child { margin-left: 0;}

.calc-button:active { background: #282828; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05);}

.calc-button-gray { background: #6f6f6f; background-image: -webkit-linear-gradient(top, #6f6f6f, #515151); background-image: -moz-linear-gradient(top, #6f6f6f, #515151); background-image: -o-linear-gradient(top, #6f6f6f, #515151); background-image: linear-gradient(to bottom, #6f6f6f, #515151);}

.calc-button-gray:active { background: #555;}

.calc-button-red { background: #ff4561; background-image: -webkit-linear-gradient(top, #ff7286, #ff4561); background-image: -moz-linear-gradient(top, #ff7286, #ff4561); background-image: -o-linear-gradient(top, #ff7286, #ff4561); background-image: linear-gradient(to bottom, #ff7286, #ff4561);}

.calc-button-red:active { background: #ff4561;}

.calc-button-yellow { background: #ffa70c; background-image: -webkit-linear-gradient(top, #ffb935, #ffa70c); background-image: -moz-linear-gradient(top, #ffb935, #ffa70c); background-image: -o-linear-gradient(top, #ffb935, #ffa70c); background-image: linear-gradient(to bottom, #ffb935, #ffa70c);}

.calc-button-yellow:active { background: #ffa70c;}

.calc-button-big { font-size: 16px;}

.lt-ie8 .calc-display-input { /* border-box fix */ width: 152px;}

.lt-ie7 .calc-row { /* first-child fix */ margin-left: -7px;}

</style></head>

<body><!DOCTYPE html><!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--><!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]--><!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]--><!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]--><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Chunky Calculator</title> <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--></head><body> <form class="calc"> <p class="calc-display"> <input type="text" name="res" id="res" value="" class="calc-display-input" onfocus="this.blur()"> </p> <p class="calc-row"> <button type="button" class="calc-button calc-button-gray" onclick="s('Just....')">mrc</button> <button type="button" class="calc-button calc-button-gray" onclick="s('....do..')">m-</button> <button type="button" class="calc-button calc-button-gray" onclick="s('......it')">m+</button> <button type="button" class="calc-button calc-button-red calc-button-big" onclick="a('/')">÷</button> </p> <p class="calc-row"> <button type="button" class="calc-button" onclick="a('7')">7</button> <button type="button" class="calc-button" onclick="a('8')">8</button> <button type="button" class="calc-button" onclick="a('9')">9</button> <button type="button" class="calc-button calc-button-red calc-button-big" onclick="a('*')">x</button> </p> <p class="calc-row"> <button type="button" class="calc-button" onclick="a('4')">4</button> <button type="button" class="calc-button" onclick="a('5')">5</button> <button type="button" class="calc-button" onclick="a('6')">6</button> <button type="button" class="calc-button calc-button-red calc-button-big" onclick="a('-')">-</button> </p> <p class="calc-row"> <button type="button" class="calc-button" onclick="a('1')">1</button> <button type="button" class="calc-button" onclick="a('2')">2</button> <button type="button" class="calc-button" onclick="a('3')">3</button> <button type="button" class="calc-button calc-button-red calc-button-big" onclick="a('+')">+</button> </p> <p class="calc-row"> <button type="button" class="calc-button" onclick="a('0')">0</button> <button type="button" class="calc-button" onclick="a('.')">.</button> <button type="button" class="calc-button" onclick="s('')">C</button> <button type="button" class="calc-button calc-button-yellow calc-button-big" onclick="e()">=</button> </p> </form>