Split styles into modular CSS files

2026-02-04 20:46:24 +01:00
parent fc373ffb91
commit d6d3566f47
8 changed files with 749 additions and 706 deletions
--- a/wwwroot/css/base.css
+++ b/wwwroot/css/base.css
@@ -0,0 +1,178 @@
+:root {
+    font-family:
+        "Baloo 2",
+        "Nunito",
+        "Segoe UI",
+        system-ui,
+        -apple-system,
+        sans-serif;
+    color: #2c1c0d;
+}
+
+html {
+    background: #f6e9d6;
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+.split {
+    display: flex;
+    justify-content: space-between;
+    gap: 16px;
+    align-items: flex-start;
+    flex-wrap: wrap;
+}
+
+.stack {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+.stack.horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+input,
+textarea,
+select,
+button {
+    font: inherit;
+    border-radius: 8px;
+    border: 1px solid #d5c7b5;
+    background: #fffaf3;
+    color: #2c1c0d;
+    padding: 10px 12px;
+    min-width: 0;
+}
+
+textarea {
+    min-height: 80px;
+    resize: vertical;
+}
+
+button {
+    cursor: pointer;
+    background: linear-gradient(-5deg, #30afea, #80e2ff);
+    border-color: #124b88;
+    font-weight: 700;
+    color: #2c1c0d;
+}
+button:hover {
+    background: linear-gradient(-5deg, #40e2ff, #e0f0ff);
+}
+button.danger {
+    background: #e0564f;
+    border-color: #c54740;
+    color: #fffaf3;
+}
+button.danger:hover {
+    background: #c9473f;
+    border-color: #a83a35;
+}
+button.ghost {
+    background: transparent;
+    border-color: #d5c7b5;
+    color: #2c1c0d;
+}
+button.ghost:hover {
+    background: linear-gradient(-5deg, #e7f5ff, #cbeaff);
+    border-color: #b4d9f3;
+    color: #1a3d64;
+}
+
+.label {
+    color: #6c5a42;
+    font-size: 14px;
+}
+.label-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+}
+.char-counter {
+    color: #8c7a63;
+    font-size: 12px;
+    white-space: nowrap;
+}
+.hint {
+    color: #8c7a63;
+    font-size: 12px;
+    margin: 8px 0 12px 0;
+}
+.hint.warning {
+    color: #c26c1a;
+}
+.disabled-form {
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+.hidden {
+    display: none !important;
+}
+
+p {
+    margin: 0;
+}
+h3 {
+    margin: 0;
+    font-size: 18px;
+}
+.muted {
+    color: #7a6a53;
+    margin: 0;
+}
+.link {
+    color: #30afea;
+    text-decoration: none;
+    font-weight: 700;
+}
+.link:hover {
+    text-decoration: underline;
+}
+.link.compact {
+    font-size: 14px;
+}
+.inline-link {
+    font-size: 14px;
+    margin-left: 5px;
+}
+.auth-toggle-link {
+    text-align: center;
+    display: inline-block;
+    margin-top: 10px;
+}
+
+.toast {
+    position: fixed;
+    bottom: 16px;
+    right: 16px;
+    background: #1db4ac;
+    color: #0f2f2d;
+    padding: 10px 14px;
+    border-radius: 8px;
+    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
+    max-width: 320px;
+}
+.toast.error {
+    background: #e0564f;
+    color: #fffaf3;
+}
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}