You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
1.8 KiB
CSS
86 lines
1.8 KiB
CSS
*{
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
body{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
background-color: black;
|
|
}
|
|
|
|
/* full calcu div */
|
|
.calcu{
|
|
/* display: flex; */
|
|
justify-content: center;
|
|
align-items: center;
|
|
/* height: 200px; */
|
|
max-width: 400px;
|
|
width: 100%;
|
|
border-radius: 12px;
|
|
padding: 10px 20px 20px;
|
|
position: relative;
|
|
background-color: lightblue;
|
|
}
|
|
|
|
/* input bar */
|
|
.display{
|
|
height: 40px;
|
|
width: 80%;
|
|
border: none;
|
|
outline: none;
|
|
text-align: right;
|
|
margin-bottom: 5px;
|
|
font-size: 20px;
|
|
pointer-events: none;
|
|
/* display: inline-block; */
|
|
/* align-items: center;
|
|
justify-content: center; */
|
|
}
|
|
|
|
/* operator buttons */
|
|
.opt-buttons{
|
|
display: grid;
|
|
grid-gap: 10px;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
|
|
.opt-buttons button{
|
|
padding: 10px;
|
|
border-radius: 6px;
|
|
border: none;
|
|
font-size: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.opt-buttons button:active{
|
|
transform: scale(0.99);
|
|
}
|
|
|
|
/* container: display and clear */
|
|
.con{
|
|
display: grid;
|
|
grid-gap: 10px;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.con button{
|
|
padding: 10px;
|
|
margin-bottom: 5px;
|
|
border-radius: 6px;
|
|
border: none;
|
|
font-size: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.con button:active{
|
|
transform: scale(0.99);
|
|
}
|
|
|
|
.opt, .clear{
|
|
color: grey;
|
|
} |