124 lines
2.0 KiB
CSS
124 lines
2.0 KiB
CSS
html, body {
|
|
font-style: normal;
|
|
font-family: monospace;
|
|
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.account {
|
|
border-style: solid;
|
|
border-color: black;
|
|
}
|
|
|
|
.account__grid {
|
|
border-style: none;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
.account__title {
|
|
background-color: black;
|
|
color: white;
|
|
padding: 3px 6px;
|
|
}
|
|
|
|
.account__label {
|
|
margin: 0 .5em 0 .5em;
|
|
font-weight: bold;
|
|
border-bottom-style: solid;
|
|
}
|
|
|
|
.account__amount {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.account__accounts {
|
|
grid-column: 2 / 4;
|
|
grid-row: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.account__button {
|
|
color: black;
|
|
border-radius: 0;
|
|
border-color: black;
|
|
border-style: solid;
|
|
border-width: .2em;
|
|
padding: 1em;
|
|
margin: .5em;
|
|
background: linear-gradient(to top, darkgray, 20%, lightgray);
|
|
box-shadow: 3px 3px 3px black;
|
|
}
|
|
|
|
.account__button:hover:enabled {
|
|
background: linear-gradient(lightgray, darkgray);
|
|
}
|
|
|
|
.account__button:active:enabled {
|
|
transform: translateY(3px);
|
|
}
|
|
|
|
.account__button:disabled {
|
|
background: lightgray;
|
|
color: darkgray;
|
|
}
|
|
|
|
.account__input {
|
|
padding: 1em;
|
|
color: black;
|
|
margin: .5em;
|
|
background-color: #eeeeee;
|
|
border-radius: 0;
|
|
border-color: black;
|
|
border-style: solid;
|
|
border-width: .2em;
|
|
box-shadow: 3px 3px 3px black;
|
|
}
|
|
|
|
.accounts {
|
|
list-style-type: none;
|
|
padding: 0.5em;
|
|
border-style: solid;
|
|
border-color: black;
|
|
}
|
|
|
|
.accounts__item {
|
|
border-style: solid;
|
|
border-bottom-color: lightgray;
|
|
border-width: 0 0 0.1em 0;
|
|
}
|
|
|
|
.accounts__item-selected {
|
|
border-bottom-color: darkgray;
|
|
background-color: #eeeeee;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.error {
|
|
background: red;
|
|
padding: 1em;
|
|
color: white;
|
|
}
|
|
|
|
.content {
|
|
padding: 1em;
|
|
min-width: 370px;
|
|
}
|
|
|
|
@media (max-width: 605px) {
|
|
.account__grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.account__accounts {
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
}
|
|
}
|