feat: add style to webui

2026-05-12 19:05:02 +02:00 · 2026-05-12 19:05:02 +02:00 · ed82a3b54d
commit ed82a3b54d
parent 915433bb48
3 changed files with 171 additions and 8 deletions
--- a/server/frontend/public/assets/css/main.css
+++ b/server/frontend/public/assets/css/main.css
@ -0,0 +1,146 @@
+:root {
+  --color-bg: #f7f6f2;
+  --color-surface: #f9f8f5;
+  --color-surface-2: #ffffff;
+  --color-text: #28251d;
+  --color-text-muted: #7a7974;
+  --color-text-faint: #bab9b4;
+  --color-border: #bab9b4;
+  --color-text-inverse: #f9f8f4;
+  --color-primary: #01696f;
+  --color-primary-hover: #0c4e54;
+  --color-chart: #01696f;
+  --font-body: "Ubuntu", "Helvetica", "Arial", sans-serif;
+  --content-width: 1200px;
+  --radius: 1rem;
+}
+
+html {
+  -webkit-font-smoothing: antialiased;
+  scroll-behavior: smooth;
+}
+
+body {
+  color: var(--color-text);
+  background-color: var(--color-bg);
+}
+
+header {
+  background-color: var(--color-surface-2);
+  color: var(--color-primary);
+  margin-top: 0;
+  margin-bottom: 1rem;
+  padding-bottom: 0.3rem;
+  padding-top: 0.3rem;
+  & h1 {
+    padding-left: 3rem;
+  }
+}
+
+main {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: var(--content-width);
+}
+
+.filters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 1rem;
+  justify-content: center;
+
+  button {
+    cursor: pointer;
+    align-self: center;
+
+    &.btn-primary {
+      padding: 0.75rem;
+      background: var(--color-primary);
+      color: var(--color-text-inverse);
+      border-radius: var(--radius);
+      border: 1px solid var(--color-primary-hover);
+      font-weight: bold;
+      font-size: 1.25rem;
+
+      &:hover {
+        background: var(--color-primary-hover);
+      }
+
+      &:active {
+        opacity: 0.85;
+      }
+    }
+  }
+
+  fieldset {
+    background: var(--color-surface);
+    border-radius: var(--radius);
+    border-color: var(--color-text-faint);
+    border-width: 1px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: 0.5rem;
+    align-self: center;
+
+    label {
+      color: var(--color-text-muted);
+    }
+
+    legend {
+      color: var(--color-text-faint);
+    }
+
+    input,
+    select {
+      height: 2rem;
+      padding: 0 0.75rem;
+      background: var(--color-surface-2);
+      border: 1px solid var(--color-border);
+      border-radius: 0.5rem;
+      color: var(--color-text);
+    }
+
+    .filter-field {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+      align-items: center;
+    }
+  }
+}
+
+.kpis {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
+  gap: 1rem;
+
+  dl {
+    background: var(--color-surface);
+    border: 1px solid var(--color-text-faint);
+    border-radius: var(--radius);
+    padding: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+    align-items: center;
+
+    dt {
+      font-size: 0.75rem;
+      font-weight: 500;
+      color: var(--color-text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    dd {
+      font-size: 2rem;
+      font-weight: bold;
+      color: var(--color-text);
+      font-variant-numeric: tabular-nums;
+      line-height: 1.1;
+      margin-left: 0;
+    }
+  }
+}