Improvements

More styling
2026-05-11 19:53:30 +02:00
parent 10de47b911
commit 928ca1de11
13 changed files with 331 additions and 189 deletions
@@ -0,0 +1,97 @@
+@use "../variables" as *;
+
+.form-container {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
+  margin-bottom: $spacing-lg;
+
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-md;
+
+    label {
+      display: flex;
+      flex-direction: column;
+      gap: $spacing-sm;
+      font-weight: 500;
+      color: $color-text;
+
+      @media (prefers-color-scheme: dark) {
+        color: $color-text-dark;
+      }
+    }
+
+    input, textarea, select {
+      padding: $spacing-md;
+      border: 1px solid #ccc;
+      border-radius: $border-radius;
+      font-family: Arial, sans-serif;
+      font-size: 1rem;
+
+      @media (prefers-color-scheme: dark) {
+        background-color: #6b6b6b;
+        color: $color-text-dark;
+        border-color: #555;
+      }
+
+      &:focus {
+        outline: none;
+        border-color: $color-primary;
+        box-shadow: 0 0 0 2px rgba($color-primary, 0.2);
+      }
+    }
+
+    textarea {
+      min-height: 120px;
+      resize: vertical;
+    }
+
+    button {
+      align-self: flex-start;
+      padding: $spacing-md $spacing-lg;
+      background-color: $color-primary;
+      color: white;
+      border: none;
+      border-radius: $border-radius;
+      font-size: 1rem;
+      font-weight: bold;
+      cursor: pointer;
+      transition: background-color 0.2s ease-in-out;
+
+      &:hover {
+        background-color: $color-primary-hover;
+      }
+
+      &:active {
+        transform: scale(0.98);
+      }
+    }
+
+    a {
+      display: inline-block;
+      padding: $spacing-md $spacing-lg;
+      background: $color-primary;
+      color: white;
+      text-decoration: none;
+      border-radius: $border-radius;
+      text-align: center;
+      transition: background-color 0.2s ease-in-out;
+      align-self: flex-start;
+
+      &:hover {
+        background-color: $color-primary-hover;
+      }
+    }
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 0;
+
+    li h3 {
+      margin-top: 0;
+    }
+  }
+}