🎨 Modularize and refactor CSS: restructure styles into theme.css, base.css, utilities.css, and component-specific files (flux-overrides.css, custom.css, leaflet.css) to improve maintainability and align with the Einundzwanzig Design System.

2026-01-28 07:43:18 +00:00 · 2026-01-23 23:16:09 +01:00
parent b30fec150c
commit fe92418dbb
9 changed files with 408 additions and 346 deletions
--- a/resources/css/components/custom.css
+++ b/resources/css/components/custom.css
@@ -0,0 +1,84 @@
+/**
+ * Einundzwanzig Custom Components
+ *
+ * Projekt-spezifische UI-Komponenten wie Feature-Cards,
+ * Info-Boxen, Navigation und Status-Badges.
+ */
+
+@layer components {
+    /**
+     * Feature Cards
+     *
+     * Karten für die Darstellung von Features/Benefits.
+     * Varianten: Standard, Nostr (grün), Lightning (lila)
+     */
+    .feature-card {
+        @apply bg-bg-surface rounded-xl p-5 border border-border-subtle;
+    }
+
+    .feature-card-nostr {
+        @apply bg-bg-surface rounded-xl p-5 border border-green-nostr;
+    }
+
+    .feature-card-lightning {
+        @apply bg-bg-surface rounded-xl p-5 border border-purple-accent;
+    }
+
+    /**
+     * Info Boxes
+     *
+     * Hervorgehobene Informationsbereiche mit Gradient-Hintergrund.
+     * Varianten: Warning (amber), Success (grün)
+     */
+    .info-box {
+        @apply rounded-xl p-4 border;
+    }
+
+    .info-box-warning {
+        @apply rounded-xl p-4 border border-amber-500 bg-gradient-to-b from-amber-500/20 to-transparent;
+    }
+
+    .info-box-success {
+        @apply rounded-xl p-4 border border-green-nostr bg-gradient-to-b from-green-nostr/20 to-transparent;
+    }
+
+    /**
+     * Navigation Items
+     *
+     * Header-Navigation mit Active-State.
+     */
+    .nav-item {
+        @apply px-4 py-3 text-text-secondary hover:text-text-primary transition-colors;
+    }
+
+    .nav-item-active {
+        @apply px-4 py-3 text-text-primary hover:text-text-primary transition-colors border-b-2 border-orange-primary;
+    }
+
+    /**
+     * Status Badges
+     *
+     * Inline-Status-Anzeigen für verschiedene Zustände.
+     * Varianten: Active (grün), Pending (amber)
+     */
+    .status-badge {
+        @apply inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm;
+    }
+
+    .status-badge-active {
+        @apply inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm bg-green-success/20 text-green-success;
+    }
+
+    .status-badge-pending {
+        @apply inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm bg-amber-500/20 text-amber-500;
+    }
+
+    /**
+     * Brand Icon Container
+     *
+     * Container für das Einundzwanzig-Logo/Icon.
+     */
+    .brand-icon {
+        @apply w-8 h-8 rounded-lg bg-orange-primary flex items-center justify-center;
+    }
+}