77 lines
1.5 KiB
CSS
77 lines
1.5 KiB
CSS
* {
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
|
|
body{
|
|
background: linear-gradient( to bottom right, #c9be2b 0%, #61b167 85%);
|
|
|
|
}
|
|
|
|
|
|
/* Style the calculator container */
|
|
.calculator {
|
|
background: radial-gradient(rgb(70, 66, 10), rgb(216, 216, 22), rgb(24, 211, 86) 65% );
|
|
width: 300px;
|
|
height: 520px;
|
|
margin: auto;
|
|
border: 1px solid black;
|
|
border-radius: 15px;
|
|
padding: 10px;
|
|
background-color: rgba(136, 119, 119, 0.753);
|
|
}
|
|
|
|
/* Style the display screen */
|
|
.screen {
|
|
padding-top: 5px;
|
|
width: 280px;
|
|
height: 60px;
|
|
margin: 10px;
|
|
margin-top: 6px;
|
|
border: 1px solid black;
|
|
border-radius: 10px;
|
|
background-color: rgb(240, 209, 209);
|
|
font-size: 50px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Style the buttons */
|
|
.button:hover{
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.button:active{
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.button {
|
|
width: 60px;
|
|
height: 60px;
|
|
margin: 5px;
|
|
border: none;
|
|
font-size: 25px;
|
|
color: white;
|
|
transition: opacity 0.15s;
|
|
box-shadow: 0px 0px 5px #aaaaaa;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/* Style the number buttons */
|
|
.number {
|
|
background-color: rgb(48, 45, 45);
|
|
}
|
|
|
|
/* Style the operator buttons */
|
|
.operator {
|
|
background-color: rgb(45, 179, 56);
|
|
}
|
|
|
|
/* Style the function buttons */
|
|
.function {
|
|
background-color: rgb(230, 163, 41);
|
|
}
|
|
|
|
/* Style the clear button */
|
|
.clear {
|
|
background-color: rgb(175, 18, 18);
|
|
} |