mirror of
https://github.com/HolgerHatGarKeineNode/einundzwanzig-nostr.git
synced 2026-01-28 07:43:18 +00:00
85 lines
2.2 KiB
CSS
85 lines
2.2 KiB
CSS
/**
|
|
* 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;
|
|
}
|
|
}
|