mirror of
https://github.com/HolgerHatGarKeineNode/einundzwanzig-nostr.git
synced 2026-01-28 07:43:18 +00:00
🎨 Add new Flux icons: implement multiple reusable icon components (e.g., hand-raised, hand-thumb-up, heart, hashtag, home) with variant support for improved UI consistency.
This commit is contained in:
HolgerHatGarKeineNode
@@ -20,36 +20,79 @@
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
/* ----------------------------------------
|
||||
Theme tokens
|
||||
Theme tokens (Einundzwanzig Design System)
|
||||
----------------------------------------- */
|
||||
@theme {
|
||||
--font-sans: "Inconsolata", monospace;
|
||||
|
||||
--color-zinc-50: var(--color-neutral-50);
|
||||
--color-zinc-100: var(--color-neutral-100);
|
||||
--color-zinc-200: var(--color-neutral-200);
|
||||
--color-zinc-300: var(--color-neutral-300);
|
||||
--color-zinc-400: var(--color-neutral-400);
|
||||
--color-zinc-500: var(--color-neutral-500);
|
||||
--color-zinc-600: var(--color-neutral-600);
|
||||
--color-zinc-700: var(--color-neutral-700);
|
||||
--color-zinc-800: var(--color-neutral-800);
|
||||
--color-zinc-900: var(--color-neutral-900);
|
||||
--color-zinc-950: var(--color-neutral-950);
|
||||
/* Background colors */
|
||||
--color-bg-page: #0A0A0B;
|
||||
--color-bg-surface: #111113;
|
||||
--color-bg-elevated: #1A1A1D;
|
||||
|
||||
--color-accent: var(--color-neutral-800);
|
||||
--color-accent-content: var(--color-neutral-800);
|
||||
--color-accent-foreground: var(--color-white);
|
||||
/* Border colors */
|
||||
--color-border-default: #2A2A2E;
|
||||
--color-border-subtle: #1F1F23;
|
||||
|
||||
/* Text colors */
|
||||
--color-text-primary: #FFFFFF;
|
||||
--color-text-secondary: #ADADB0;
|
||||
--color-text-tertiary: #8B8B90;
|
||||
--color-text-muted: #FFFFFFCC;
|
||||
--color-text-disabled: #6B6B70;
|
||||
|
||||
/* Brand colors */
|
||||
--color-orange-primary: #FF5C00;
|
||||
--color-orange-light: #FF8A4C;
|
||||
--color-green-success: #22C55E;
|
||||
--color-purple-accent: #7c3aed;
|
||||
--color-green-nostr: #4a7c59;
|
||||
|
||||
/* Zinc aliases for compatibility */
|
||||
--color-zinc-50: #fafafa;
|
||||
--color-zinc-100: #f4f4f5;
|
||||
--color-zinc-200: #e4e4e7;
|
||||
--color-zinc-300: #d4d4d8;
|
||||
--color-zinc-400: #a1a1aa;
|
||||
--color-zinc-500: #71717a;
|
||||
--color-zinc-600: #52525b;
|
||||
--color-zinc-700: #3f3f46;
|
||||
--color-zinc-800: #27272a;
|
||||
--color-zinc-900: #18181b;
|
||||
--color-zinc-950: #09090b;
|
||||
|
||||
/* Accent colors (orange brand) */
|
||||
--color-accent: var(--color-orange-primary);
|
||||
--color-accent-content: var(--color-orange-primary);
|
||||
--color-accent-foreground: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* ----------------------------------------
|
||||
Dark mode overrides
|
||||
Dark mode overrides (Dark is default for Einundzwanzig)
|
||||
----------------------------------------- */
|
||||
@layer theme {
|
||||
.dark {
|
||||
--color-accent: var(--color-white);
|
||||
--color-accent-content: var(--color-white);
|
||||
--color-accent-foreground: var(--color-neutral-800);
|
||||
.dark,
|
||||
:root {
|
||||
--color-accent: var(--color-orange-primary);
|
||||
--color-accent-content: var(--color-orange-primary);
|
||||
--color-accent-foreground: var(--color-text-primary);
|
||||
|
||||
/* Flux UI color overrides */
|
||||
--white: var(--color-text-primary);
|
||||
--black: var(--color-bg-page);
|
||||
|
||||
/* Zinc scale for dark mode */
|
||||
--zinc-50: var(--color-bg-elevated);
|
||||
--zinc-100: var(--color-bg-surface);
|
||||
--zinc-200: var(--color-border-default);
|
||||
--zinc-300: var(--color-border-subtle);
|
||||
--zinc-400: var(--color-text-disabled);
|
||||
--zinc-500: var(--color-text-tertiary);
|
||||
--zinc-600: var(--color-text-secondary);
|
||||
--zinc-700: var(--color-text-secondary);
|
||||
--zinc-800: var(--color-text-primary);
|
||||
--zinc-900: var(--color-text-primary);
|
||||
--zinc-950: var(--color-text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -68,6 +111,17 @@
|
||||
button {
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
|
||||
/* Ensure body has grid layout for Flux components */
|
||||
body:has(>[data-flux-main]) {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
grid-template-columns: min-content minmax(0, 1fr) min-content;
|
||||
grid-template-areas:
|
||||
"header header header"
|
||||
"sidebar main aside"
|
||||
"sidebar footer aside";
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------
|
||||
@@ -115,3 +169,188 @@ select:focus[data-flux-control] {
|
||||
.leaflet-container a {
|
||||
color: unset !important;
|
||||
}
|
||||
|
||||
/* ----------------------------------------
|
||||
Einundzwanzig Design System - Flux Overrides
|
||||
----------------------------------------- */
|
||||
@layer components {
|
||||
/* Page backgrounds */
|
||||
body {
|
||||
@apply bg-bg-page text-text-primary;
|
||||
}
|
||||
|
||||
/* Cards and surfaces */
|
||||
[data-flux-card] {
|
||||
@apply bg-bg-surface border-border-subtle;
|
||||
}
|
||||
|
||||
/* Primary buttons (orange) */
|
||||
[data-flux-button][data-variant="primary"] {
|
||||
@apply bg-orange-primary text-text-primary hover:bg-orange-light;
|
||||
}
|
||||
|
||||
/* Default/ghost buttons */
|
||||
[data-flux-button]:not([data-variant]) {
|
||||
@apply border-border-default text-text-secondary hover:text-text-primary hover:border-border-default;
|
||||
}
|
||||
|
||||
/* Input fields */
|
||||
[data-flux-input],
|
||||
[data-flux-control] {
|
||||
@apply bg-bg-surface border-border-default text-text-primary placeholder:text-text-disabled;
|
||||
}
|
||||
|
||||
[data-flux-input]:focus,
|
||||
[data-flux-control]:focus {
|
||||
@apply border-orange-primary ring-orange-primary/20;
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
[data-flux-navbar] {
|
||||
@apply bg-bg-surface border-b border-border-default;
|
||||
}
|
||||
|
||||
[data-flux-navbar-item][data-current="true"] {
|
||||
@apply border-b-2 border-orange-primary text-text-primary;
|
||||
}
|
||||
|
||||
/* Modals */
|
||||
[data-flux-modal] {
|
||||
@apply bg-bg-surface border-border-subtle;
|
||||
}
|
||||
|
||||
/* Dropdowns/Menus */
|
||||
[data-flux-menu] {
|
||||
@apply bg-bg-elevated border-border-default;
|
||||
}
|
||||
|
||||
[data-flux-menu-item]:hover {
|
||||
@apply bg-bg-surface;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
[data-flux-table] {
|
||||
@apply bg-bg-surface;
|
||||
}
|
||||
|
||||
[data-flux-table] th {
|
||||
@apply bg-bg-elevated text-text-secondary border-border-default;
|
||||
}
|
||||
|
||||
[data-flux-table] td {
|
||||
@apply border-border-subtle text-text-primary;
|
||||
}
|
||||
|
||||
/* Badges */
|
||||
[data-flux-badge] {
|
||||
@apply bg-bg-elevated text-text-secondary border-border-default;
|
||||
}
|
||||
|
||||
[data-flux-badge][data-color="green"] {
|
||||
@apply bg-green-success/20 text-green-success border-green-success/30;
|
||||
}
|
||||
|
||||
[data-flux-badge][data-color="orange"] {
|
||||
@apply bg-orange-primary/20 text-orange-primary border-orange-primary/30;
|
||||
}
|
||||
|
||||
/* Tabs */
|
||||
[data-flux-tab][data-selected="true"] {
|
||||
@apply border-orange-primary text-text-primary;
|
||||
}
|
||||
|
||||
/* Switch */
|
||||
[data-flux-switch][data-checked="true"] {
|
||||
@apply bg-orange-primary;
|
||||
}
|
||||
|
||||
/* Checkbox */
|
||||
[data-flux-checkbox]:checked {
|
||||
@apply bg-orange-primary border-orange-primary;
|
||||
}
|
||||
|
||||
/* Radio */
|
||||
[data-flux-radio]:checked {
|
||||
@apply border-orange-primary;
|
||||
}
|
||||
|
||||
[data-flux-radio]:checked::before {
|
||||
@apply bg-orange-primary;
|
||||
}
|
||||
|
||||
/* Separators */
|
||||
[data-flux-separator] {
|
||||
@apply bg-border-default;
|
||||
}
|
||||
|
||||
/* Callouts - Info boxes */
|
||||
.callout-warning {
|
||||
@apply bg-gradient-to-b from-amber-500/20 to-transparent border border-amber-500;
|
||||
}
|
||||
|
||||
.callout-success {
|
||||
@apply bg-gradient-to-b from-green-nostr/20 to-transparent border border-green-nostr;
|
||||
}
|
||||
|
||||
.callout-purple {
|
||||
@apply bg-gradient-to-b from-purple-accent/20 to-transparent border border-purple-accent;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------
|
||||
Einundzwanzig Custom Components
|
||||
----------------------------------------- */
|
||||
@layer components {
|
||||
/* Feature cards with accent borders */
|
||||
.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 with gradients */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Header navigation */
|
||||
.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 */
|
||||
.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 */
|
||||
.brand-icon {
|
||||
@apply w-8 h-8 rounded-lg bg-orange-primary flex items-center justify-center;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user