90 lines
1.7 KiB
CSS
90 lines
1.7 KiB
CSS
|
* {
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.calculator {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(4, 1fr);
|
||
|
|
grid-template-rows: minmax(100px, auto) repeat(5, 1fr);
|
||
|
|
gap: .5rem;
|
||
|
|
width: 100vw;
|
||
|
|
padding: 10px;
|
||
|
|
border-radius: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.display {
|
||
|
|
grid-column: span 4;
|
||
|
|
color: white;
|
||
|
|
font-size: 3rem;
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
align-items: center;
|
||
|
|
padding: 0.5rem;
|
||
|
|
border-radius: 10px;
|
||
|
|
position: relative;
|
||
|
|
/* Allows us to absolutely position child elements */
|
||
|
|
overflow: hidden;
|
||
|
|
/* Hide characters when they move outside the display */
|
||
|
|
}
|
||
|
|
|
||
|
|
.display-text span {
|
||
|
|
position: absolute;
|
||
|
|
opacity: 0;
|
||
|
|
top: 50%;
|
||
|
|
transform: translateY(-100%);
|
||
|
|
/* Vertically centered */
|
||
|
|
font-size: 2.5rem;
|
||
|
|
white-space: nowrap;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.display-text {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
/* Characters start from the right */
|
||
|
|
}
|
||
|
|
|
||
|
|
.button {
|
||
|
|
background-color: var(--button-primary);
|
||
|
|
border: none;
|
||
|
|
border-radius: 50%;
|
||
|
|
color: white;
|
||
|
|
font-size: 1.25rem;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
padding: .5rem;
|
||
|
|
aspect-ratio: 1;
|
||
|
|
/* This will make the buttons perfectly circular */
|
||
|
|
cursor: pointer;
|
||
|
|
|
||
|
|
transition: transform 0.1s ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button.operation {
|
||
|
|
background-color: var(--button-secondary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.button.settings {
|
||
|
|
background-color: var(--button-settings);
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button.settings img {
|
||
|
|
width: 1.5rem;
|
||
|
|
height: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button:active {
|
||
|
|
transform: scale(0.85);
|
||
|
|
}
|
||
|
|
|
||
|
|
.button.zero {
|
||
|
|
grid-column: span 1;
|
||
|
|
/* Make the '0' button normal size again */
|
||
|
|
}
|