mirror of
https://github.com/HolgerHatGarKeineNode/einundzwanzig-nostr.git
synced 2026-01-28 07:43:18 +00:00
357 lines
9.7 KiB
CSS
357 lines
9.7 KiB
CSS
@import "tailwindcss";
|
|
@import "../../vendor/livewire/flux/dist/flux.css";
|
|
@import '../../vendor/power-components/livewire-powergrid/resources/css/tailwind4.css';
|
|
|
|
/* ----------------------------------------
|
|
CONTENT SCANNING (Tailwind v4 CSS-first)
|
|
Keep paths MINIMAL and NON-RECURSIVE
|
|
----------------------------------------- */
|
|
@source "../views/**/*.blade.php";
|
|
@source "../js/**/*.js";
|
|
@source '../../vendor/power-components/livewire-powergrid/src/Themes/Tailwind.php';
|
|
@source '../../vendor/power-components/livewire-powergrid/resources/views/**/*.php';
|
|
|
|
/* Flux runtime templates ONLY (no stubs) */
|
|
@source "../../vendor/livewire/flux/dist/**/*.blade.php";
|
|
|
|
/* ----------------------------------------
|
|
Custom variants
|
|
----------------------------------------- */
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
/* ----------------------------------------
|
|
Theme tokens (Einundzwanzig Design System)
|
|
----------------------------------------- */
|
|
@theme {
|
|
--font-sans: "Inconsolata", monospace;
|
|
|
|
/* Background colors */
|
|
--color-bg-page: #0A0A0B;
|
|
--color-bg-surface: #111113;
|
|
--color-bg-elevated: #1A1A1D;
|
|
|
|
/* 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 is default for Einundzwanzig)
|
|
----------------------------------------- */
|
|
@layer theme {
|
|
.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);
|
|
}
|
|
}
|
|
|
|
/* ----------------------------------------
|
|
Base layer tweaks
|
|
----------------------------------------- */
|
|
@layer base {
|
|
*,
|
|
::after,
|
|
::before,
|
|
::backdrop,
|
|
::file-selector-button {
|
|
border-color: var(--color-gray-200, currentColor);
|
|
}
|
|
|
|
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";
|
|
}
|
|
}
|
|
|
|
/* ----------------------------------------
|
|
Alpine.js helpers
|
|
----------------------------------------- */
|
|
[x-cloak=""] {
|
|
display: none;
|
|
}
|
|
|
|
@media screen and (max-width: theme(screens.lg)) {
|
|
[x-cloak="lg"] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* ----------------------------------------
|
|
Flux UI helpers
|
|
----------------------------------------- */
|
|
[data-flux-field]:not(ui-radio, ui-checkbox) {
|
|
@apply grid gap-2;
|
|
}
|
|
|
|
[data-flux-label] {
|
|
@apply !mb-0 !leading-tight;
|
|
}
|
|
|
|
input:focus[data-flux-control],
|
|
textarea:focus[data-flux-control],
|
|
select:focus[data-flux-control] {
|
|
@apply outline-hidden ring-2 ring-accent ring-offset-2 ring-offset-accent-foreground;
|
|
}
|
|
|
|
/* ----------------------------------------
|
|
Leaflet overrides
|
|
----------------------------------------- */
|
|
.leaflet-popup-content-wrapper {
|
|
background-color: #404040 !important;
|
|
}
|
|
|
|
.leaflet-control-zoom-in,
|
|
.leaflet-control-zoom-out {
|
|
background-color: #404040 !important;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|