2023.12.19.09.12

public/css/app.css

@@ -1,46 +1,151 @@
-:root{
-    --dark: #222f3e;
-    --light-grey: #576574;
-    --light: #c8d6e5;
-
-    --green: #1dd1a1;
-    --yellow: #feca57;
-    --red: #ff6b6b;
-    --pink: #ff9ff3;
-    --purple: #5f27cd;
-    --cyan: #48dbfb;
-    --blue: #54a0ff;
-
+: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';
+  src: url('/assets/font/RobotoMono-Light.ttf');
 }
-*{
-    font-family: "robotomono-light";
+* {
+  font-family: "robotomono-light";
 }
-body{
-    background-color: var(--dark);
-    color:var(--light);
+body {
+  background-color: var(--dark);
+  color: var(--light);
 }
-.container{
-    width: 1200px;
+.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: 10px;
-    border: 1px solid;
+    padding: 1vw;
+  }
 }
-table{
+@media (max-width: 800px) {
+  form .form-group.half {
     width: 100%;
+  }
 }
-table .amount{
-    text-align: right;
-}
-table .income{
-    color:var(--green);
-}
-table .expense{
-    color: var(--red);
-}
-table .transfer{
-    color: var(--pink);
-}