Refactor CSS styles and introduce theme variables

- Removed redundant CSS rules and consolidated styles across dashboard, forms, imports, projects, and scenarios.
- Introduced new color variables in theme-default.css for better maintainability and consistency.
- Updated existing styles to utilize new color variables, enhancing the overall design.
- Improved responsiveness and layout of various components, including tables and cards.
- Ensured consistent styling for buttons, links, and headers across the application.
This commit is contained in:
2025-11-13 22:30:58 +01:00
parent fb6816de00
commit 1262a4a63f
8 changed files with 453 additions and 675 deletions

View File

@@ -19,6 +19,7 @@
.form-group label {
font-weight: 600;
color: var(--text);
color: var(--color-text-primary);
}
.form-group input,
@@ -28,7 +29,9 @@
border-radius: var(--radius-sm);
border: 1px solid var(--card-border);
background: rgba(8, 12, 19, 0.78);
background: color-mix(in srgb, var(--color-bg-elevated) 78%, transparent);
color: var(--text);
color: var(--color-text-primary);
transition: border-color 0.15s ease, background 0.2s ease,
box-shadow 0.2s ease;
}
@@ -42,6 +45,7 @@
.form-group select:focus,
.form-group textarea:focus {
outline: 2px solid var(--brand-2);
outline: 2px solid var(--color-brand-bright);
outline-offset: 1px;
}
@@ -56,7 +60,9 @@
.form-group--error select,
.form-group--error textarea {
border-color: rgba(209, 75, 75, 0.6);
border-color: color-mix(in srgb, var(--color-danger) 60%, transparent);
box-shadow: 0 0 0 1px rgba(209, 75, 75, 0.3);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-danger) 30%, transparent);
}
.field-help {
@@ -69,6 +75,7 @@
margin: 0;
font-size: 0.85rem;
color: var(--danger);
color: var(--color-danger);
}
.form-actions {
@@ -82,6 +89,7 @@
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: rgba(21, 27, 35, 0.85);
background: var(--color-surface-overlay);
box-shadow: var(--shadow);
padding: 1.5rem;
display: flex;
@@ -93,6 +101,7 @@
font-weight: 700;
padding: 0 0.5rem;
color: var(--text);
color: var(--color-text-primary);
}
@media (max-width: 640px) {