Add some base styles

2025-11-22 19:01:35 +01:00 · 2024-08-02 15:33:18 +02:00
parent b0666f4a8c
commit c86bc68e5c
9 changed files with 520 additions and 204 deletions
--- a/web-app/src/app.css
+++ b/web-app/src/app.css
@@ -0,0 +1,169 @@
+:root {
+  --bg-primary: white;
+  --bg-secondary: hsl(0 0% 95%);
+  --bg-tertiary: hsl(0 0% 90%);
+
+  --color-text: black;
+  --color-text-invert: white;
+  --color-accent: hsl(210, 100%, 30%);
+  --color-success: hsl(105, 100%, 30%);
+  --color-error: hsl(0, 100%, 30%);
+
+  --border-primary: 0.0625rem solid var(--bg-tertiary);
+  --border-radius: 0.125rem;
+
+  color-scheme: light;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-primary: hsl(0 0% 15%);
+    --bg-secondary: hsl(0 0% 20%);
+    --bg-tertiary: hsl(0 0% 25%);
+
+    --color-text: white;
+    --color-text-invert: black;
+    --color-accent: hsl(210, 100%, 80%);
+    --color-success: hsl(105, 100%, 80%);
+    --color-error: hsl(0, 100%, 80%);
+
+    color-scheme: dark;
+  }
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  line-height: 1.5;
+  font-family: system-ui, sans-serif;
+  background-color: var(--bg-primary);
+  display: flex;
+  flex-direction: column;
+  min-block-size: 100vh;
+}
+
+section {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+section + section {
+  margin-block-start: 2rem;
+}
+
+button,
+label,
+select,
+summary,
+[role="button"],
+[role="option"] {
+  cursor: pointer;
+}
+
+input,
+button,
+textarea,
+select,
+a[role="button"] {
+  font: inherit;
+  color: inherit;
+  border: var(--border-primary);
+  border-radius: var(--border-radius);
+  padding-inline: 0.5rem;
+  padding-block: 0.25rem;
+}
+
+input,
+textarea,
+select {
+  background-color: var(--bg-primary);
+}
+
+a {
+  color: var(--color-accent);
+}
+
+a[role="button"] {
+  display: inline-block;
+  max-inline-size: fit-content;
+  text-decoration: none;
+}
+
+button,
+a[role="button"] {
+  background-color: var(--bg-secondary);
+}
+
+:is(button, a[role="button"]):hover {
+  background-color: var(--bg-tertiary);
+}
+
+img,
+picture,
+svg,
+video {
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
+ul,
+ol {
+  list-style: none;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  line-height: 1.2;
+  text-wrap: balance;
+}
+
+form[method="POST"] {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+form > button[type="submit"] {
+  max-inline-size: 30ch;
+}
+
+form[method="GET"] {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20ch), 1fr));
+  align-items: start;
+}
+
+form[method="GET"] > button[type="submit"] {
+  align-self: end;
+}
+
+form > label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  max-inline-size: 30ch;
+}
+
+form > label:has(textarea) {
+  max-inline-size: 65ch;
+}