src_aurelia-bodylight-plugin/src/elements/calculator.css
:root {
--background: #f6f6f6;
--font: #222;
--border: #333;
--screen: #eee;
--calculator: rgb(241, 232, 188);
--btn: rgb(236, 222, 202);
--btn-hover: #ddd;
--btn-active: #ccc;
--btn-red: rgb(245, 114, 114);
--btn-red-hover: #e99;
--btn-red-active: #d88;
--btn-blue: #aaf;
--btn-blue-hover: #99e;
--btn-blue-active: #88d;
}
.main {
display: flex;
align-items: center;
justify-content: center;
/*height: 75vh;*/
min-height: 300px;
/*padding: 10px;
margin-top: 20px;*/
}
.calculator {
width: 230px;
border: 2px var(--border) solid;
border-radius: 15px;
padding: 10px;
background-color: var(--calculator);
}
.screen {
padding: 10px 10px;
border: 2px var(--border) solid;
border-radius: 5px;
margin-bottom: 10px;
background-color: var(--screen);
text-align: right;
word-wrap: break-word;
word-break: break-all;
}
.screen-last {
min-height: 32px;
font-size: 20px;
}
.screen-current {
min-height: 34px;
font-size: 30px;
}
.buttons-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 5px;
}
.span-2 {
grid-column: span 2;
}
.btn {
padding: 10px;
border: 2px var(--border) solid;
border-radius: 3px;
background-color: var(--btn);
font-size: 20px;
}
.btn:hover {
background-color: var(--btn-hover);
}
.btn:active {
background-color: var(--btn-active);
}
.btn-red {
background-color: var(--btn-red);
}
.btn-red:hover {
background-color: var(--btn-red-hover);
}
.btn-red:active {
background-color: var(--btn-red-active);
}
.btn-blue {
background-color: var(--btn-blue);
}
.btn-blue:hover {
background-color: var(--btn-blue-hover);
}
.btn-blue:active {
background-color: var(--btn-blue-active);
}
/* Disables input spinners in calc screen */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}