js-calculator/style.css
2023-05-04 12:12:25 -07:00

61 lines
No EOL
1.1 KiB
CSS

*{
padding: 0;
margin: 0;
background-color: rgb(35, 35, 35);
font-family: Helvetica;
}
#header {
padding-top: 10px;
padding-bottom: 10px;
}
#header, #results {
color: white;
}
#header, #theGrid {
width: 350px;
}
#results {
width: 334px;
font-family: monospace;
font-size: 28px;
text-align: left;
font-weight: bolder;
border: 2px solid white;
height: 50px;
margin-left: 5px;
margin-right: 5px;
padding-left: 5px;
padding-right: 5px;
}
#theGrid {
display: grid;
height: 350px;
grid-template-rows: repeat(5, auto);
grid-template-columns: repeat(4, 1fr);
}
[id^="button"] {
border-width: 1px;
color: white;
border: 1px solid rgb(35, 35, 35);
display: flex;
align-items: center;
justify-content: center;
}
#button0, #button1, #button2, #button3, #button7, #button11, #button15 {
background-color: rgb(20, 20, 20);
}
#button4, #button5, #button6, #button8, #button9, #button10, #button12, #button13, #button14, #button16, #button17, #button18 {
background-color: rgb(7, 7, 7);
}
#button19 {
background-color: rgb(51, 50, 49);
}