a969c1b347
- Move map pin icon to right side of input with adjusted spacing - Change button styling from accent to primary color
114 lines
3.2 KiB
CSS
114 lines
3.2 KiB
CSS
@import 'tailwindcss';
|
|
@import '../../vendor/livewire/flux/dist/flux.css';
|
|
|
|
@source '../views';
|
|
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
|
|
@source '../../vendor/livewire/flux-pro/stubs/**/*.blade.php';
|
|
@source '../../vendor/livewire/flux/stubs/**/*.blade.php';
|
|
|
|
@custom-variant dark (&:where(.dark-mode-disabled));
|
|
|
|
@theme {
|
|
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
|
|
--color-zinc-50: #faf6f3; /* surface */
|
|
--color-zinc-100: #f5ede5; /* surface-page */
|
|
--color-zinc-200: #eeeae5; /* surface-subtle */
|
|
--color-zinc-300: #e5ded7; /* border */
|
|
--color-zinc-400: #c8b8b0;
|
|
--color-zinc-500: #89726c; /* text-muted */
|
|
--color-zinc-600: #6b5a55; /* text-dim */
|
|
--color-zinc-700: #5a4a45;
|
|
--color-zinc-800: #4a3f3b; /* text-base */
|
|
--color-zinc-900: #3a302c;
|
|
--color-zinc-950: #2a2220;
|
|
|
|
/* Brand accent — burnt sienna */
|
|
--color-accent: #bb5b3e;
|
|
--color-accent-content: #a34a31;
|
|
--color-accent-foreground: #ffffff;
|
|
|
|
/* Named semantic tokens */
|
|
--color-primary: #bb5b3e;
|
|
--color-primary-dark: #a34a31;
|
|
--color-surface: #faf6f3;
|
|
--color-surface-page: #f5ede5;
|
|
--color-surface-subtle: #eeeae5;
|
|
--color-border: #e5ded7;
|
|
--color-text-base: #4a3f3b;
|
|
--color-text-muted: #89726c;
|
|
--color-text-dim: #6b5a55;
|
|
|
|
/* Accent palette */
|
|
--color-teal: #4a7c7e;
|
|
--color-mauve: #8b4860;
|
|
--color-tan: #9b8b6b;
|
|
|
|
/* Status */
|
|
--color-status-good: #22c55e;
|
|
--color-status-warn: #f59e0b;
|
|
--color-status-bad: #ef4444;
|
|
|
|
/* Display font */
|
|
--font-display: 'Manrope', ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
|
|
|
|
@layer utilities {
|
|
.hero-gradient {
|
|
background:
|
|
radial-gradient(circle at top right, color-mix(in oklch, var(--color-primary) 8%, transparent), transparent 50%),
|
|
radial-gradient(circle at bottom left, color-mix(in oklch, var(--color-primary) 5%, transparent), transparent 40%);
|
|
}
|
|
|
|
.glass-card {
|
|
background: color-mix(in oklch, var(--color-surface) 90%, transparent);
|
|
backdrop-filter: blur(12px);
|
|
border: 1px solid color-mix(in oklch, var(--color-border) 60%, transparent);
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
|
|
body {
|
|
color: var(--color-zinc-800);
|
|
}
|
|
|
|
:root {
|
|
--primary: #bb5b3e;
|
|
--bg-main: #f5ede5;
|
|
--bg-card: #faf6f3;
|
|
--text-main: #4a3f3b;
|
|
--neutral: #89726c;
|
|
--rec-now: #8B4860;
|
|
--rec-wait: #4A7C7E;
|
|
--rec-hold: #9B8B6B;
|
|
}
|
|
|
|
*,
|
|
::after,
|
|
::before,
|
|
::backdrop,
|
|
::file-selector-button {
|
|
border-color: var(--color-gray-200, currentColor);
|
|
}
|
|
}
|
|
|
|
[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;
|
|
}
|
|
|
|
/* \[:where(&)\]:size-4 {
|
|
@apply size-4;
|
|
} */
|