backend/public/css/app.css

:root {
  --dark: #222f3e;
  --light-grey: #576574;
  --light: #c8d6e5;
  --green: #1dd1a1;
  --yellow: #feca57;
  --red: #ff6b6b;
  --pink: #ff9ff3;
  --purple: #5f27cd;
  --cyan: #48dbfb;
  --blue: #54a0ff;
}
@font-face {
  font-family: 'robotomono-light';
  src: url('/assets/font/RobotoMono-Light.ttf');
}
* {
  font-family: "robotomono-light";
}
body {
  background-color: var(--dark);
  color: var(--light);
}
.nav {
  width: 1200px;
  margin: auto;
  padding: 10px;
  border: 1px solid;
}
.container {
  width: 1200px;
  margin: auto;
  padding: 10px;
  border: 1px solid;
}
a {
  color: var(--cyan);
  padding: 5px;
}
details {
  width: 100%;
}
form {
  display: flex;
  flex-wrap: wrap;
}
form .form-group {
  width: 100%;
}
form .form-group.half {
  width: 50%;
}
form .form-group .text {
  width: 200px;
  text-align: right;
  padding: 5px;
  flex-shrink: 0;
}
form .form-group .input {
  width: 100%;
  padding: 5px;
}
form .form-group .input input,
form .form-group .input textarea,
form .form-group .input select {
  width: 100%;
  box-sizing: border-box;
}
form .form-group {
  display: flex;
}
input[type="number"],
input[type="time"],
input[type="date"],
select {
  text-align: right;
}
input[type="number"],
input[type="time"],
input[type="date"],
select,
input[type="text"],
textarea {
  background: #576574;
  border-color: transparent;
}
table {
  width: 100%;
}
table td.amount {
  text-align: right;
}
table td.income {
  color: var(--green);
}
table td.expense {
  color: var(--red);
}
table td.transfer {
  color: var(--pink);
}
table td.amount:after {
  content: " €";
}
th {
  text-align: left;
}
th.middle {
  text-align: center;
}
th.right {
  text-align: right;
}
tr:nth-child(3n+2) {
  background-color: #2b3b4e;
}
tr:nth-child(3n+3) {
  background-color: #34485f;
}
tr td:nth-child(1) {
  border-left: solid transparent 5px;
  text-align: right;
  padding-right: 5px;
}
table.fullList tr.transfer:nth-child(2n+1) td:nth-child(1) {
  border-top: 1px solid #ff9ff3;
  border-left: 5px solid #ff9ff3;
}
table.fullList tr.transfer:nth-child(2n+1) td:nth-child(2) {
  border-top: 1px solid #ff9ff3;
}
table.fullList tr.transfer:nth-child(2n+2) td:nth-child(1) {
  border-left: 5px solid #ff9ff3;
  border-bottom: 1px solid #ff9ff3;
}
table.fullList tr.transfer:nth-child(2n+2) td:nth-child(2) {
  border-bottom: 1px solid #ff9ff3;
}
@media (max-width: 1250px) {
  .nav,
  .container {
    width: 95vw;
    margin: auto;
    padding: 1vw;
  }
}
@media (max-width: 800px) {
  form .form-group.half {
    width: 100%;
  }
}