54644c7ce8
Enhance supplier map UX by introducing zoom-aware clustering and refined marker visuals. Adds clusterIcon, clusterDistanceForZoom, ZoomWatcher, ClusterMarker and SupplierPopup components; switches to dynamic cluster sizes and distances based on zoom, and flies into clusters on click. Shows individual supplier markers and optional permanent labels above configurable zoom breakpoints, and reduces marker sizes/shadows for a cleaner look. Also adds .supplier-map-label CSS for tooltip-style permanent labels.
186 lines
6.2 KiB
CSS
186 lines
6.2 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
@import "shadcn/tailwind.css";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
@custom-variant warm (&:is(.warm *));
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--font-sans: var(--font-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
--font-heading: var(--font-sans);
|
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
--color-sidebar-primary: var(--sidebar-primary);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-sidebar: var(--sidebar);
|
|
--color-chart-5: var(--chart-5);
|
|
--color-chart-4: var(--chart-4);
|
|
--color-chart-3: var(--chart-3);
|
|
--color-chart-2: var(--chart-2);
|
|
--color-chart-1: var(--chart-1);
|
|
--color-ring: var(--ring);
|
|
--color-input: var(--input);
|
|
--color-border: var(--border);
|
|
--color-destructive: var(--destructive);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-card: var(--card);
|
|
--radius-sm: calc(var(--radius) * 0.6);
|
|
--radius-md: calc(var(--radius) * 0.8);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) * 1.4);
|
|
--radius-2xl: calc(var(--radius) * 1.8);
|
|
--radius-3xl: calc(var(--radius) * 2.2);
|
|
--radius-4xl: calc(var(--radius) * 2.6);
|
|
}
|
|
|
|
:root {
|
|
--background: oklch(0.985 0.01 245);
|
|
--foreground: oklch(0.22 0.045 245);
|
|
--card: oklch(1 0 0);
|
|
--card-foreground: oklch(0.22 0.045 245);
|
|
--popover: oklch(1 0 0);
|
|
--popover-foreground: oklch(0.22 0.045 245);
|
|
--primary: oklch(0.47 0.16 245);
|
|
--primary-foreground: oklch(1 0 0);
|
|
--secondary: oklch(0.95 0.025 245);
|
|
--secondary-foreground: oklch(0.24 0.08 245);
|
|
--muted: oklch(0.95 0.012 245);
|
|
--muted-foreground: oklch(0.48 0.035 245);
|
|
--accent: oklch(0.88 0.13 82);
|
|
--accent-foreground: oklch(0.24 0.08 245);
|
|
--destructive: oklch(0.60 0.21 25);
|
|
--border: oklch(0.88 0.018 245);
|
|
--input: oklch(0.90 0.018 245);
|
|
--ring: oklch(0.47 0.16 245);
|
|
--chart-1: oklch(0.47 0.16 245);
|
|
--chart-2: oklch(0.66 0.20 32);
|
|
--chart-3: oklch(0.82 0.15 82);
|
|
--chart-4: oklch(0.58 0.15 205);
|
|
--chart-5: oklch(0.55 0.16 25);
|
|
--radius: 0.875rem;
|
|
--sidebar: oklch(0.97 0.015 245);
|
|
--sidebar-foreground: oklch(0.22 0.045 245);
|
|
--sidebar-primary: oklch(0.47 0.16 245);
|
|
--sidebar-primary-foreground: oklch(1 0 0);
|
|
--sidebar-accent: oklch(0.93 0.04 245);
|
|
--sidebar-accent-foreground: oklch(0.22 0.045 245);
|
|
--sidebar-border: oklch(0.86 0.025 245);
|
|
--sidebar-ring: oklch(0.47 0.16 245);
|
|
}
|
|
|
|
.warm {
|
|
--background: oklch(0.98 0.012 245);
|
|
--foreground: oklch(0.20 0.045 245);
|
|
--card: oklch(0.99 0.006 245);
|
|
--card-foreground: oklch(0.20 0.045 245);
|
|
--popover: oklch(0.99 0.006 245);
|
|
--popover-foreground: oklch(0.20 0.045 245);
|
|
--primary: oklch(0.47 0.16 245);
|
|
--primary-foreground: oklch(1 0 0);
|
|
--secondary: oklch(0.94 0.03 245);
|
|
--secondary-foreground: oklch(0.22 0.08 245);
|
|
--muted: oklch(0.93 0.015 245);
|
|
--muted-foreground: oklch(0.48 0.035 245);
|
|
--accent: oklch(0.88 0.13 82);
|
|
--accent-foreground: oklch(0.22 0.08 245);
|
|
--destructive: oklch(0.60 0.21 25);
|
|
--border: oklch(0.86 0.025 245);
|
|
--input: oklch(0.88 0.025 245);
|
|
--ring: oklch(0.47 0.16 245);
|
|
--chart-1: oklch(0.47 0.16 245);
|
|
--chart-2: oklch(0.66 0.20 32);
|
|
--chart-3: oklch(0.82 0.15 82);
|
|
--chart-4: oklch(0.58 0.15 205);
|
|
--chart-5: oklch(0.55 0.16 25);
|
|
--radius: 1rem;
|
|
--sidebar: oklch(0.97 0.015 245);
|
|
--sidebar-foreground: oklch(0.20 0.045 245);
|
|
--sidebar-primary: oklch(0.47 0.16 245);
|
|
--sidebar-primary-foreground: oklch(1 0 0);
|
|
--sidebar-accent: oklch(0.93 0.04 245);
|
|
--sidebar-accent-foreground: oklch(0.20 0.045 245);
|
|
--sidebar-border: oklch(0.86 0.025 245);
|
|
--sidebar-ring: oklch(0.47 0.16 245);
|
|
}
|
|
|
|
.dark {
|
|
--background: oklch(0.15 0.035 245);
|
|
--foreground: oklch(0.96 0.01 245);
|
|
--card: oklch(0.18 0.035 245);
|
|
--card-foreground: oklch(0.96 0.01 245);
|
|
--popover: oklch(0.18 0.035 245);
|
|
--popover-foreground: oklch(0.96 0.01 245);
|
|
--primary: oklch(0.66 0.16 245);
|
|
--primary-foreground: oklch(0.12 0.03 245);
|
|
--secondary: oklch(0.24 0.045 245);
|
|
--secondary-foreground: oklch(0.96 0.01 245);
|
|
--muted: oklch(0.23 0.035 245);
|
|
--muted-foreground: oklch(0.66 0.035 245);
|
|
--accent: oklch(0.78 0.15 82);
|
|
--accent-foreground: oklch(0.12 0.03 245);
|
|
--destructive: oklch(0.66 0.20 25);
|
|
--border: oklch(0.30 0.04 245);
|
|
--input: oklch(0.30 0.04 245);
|
|
--ring: oklch(0.66 0.16 245);
|
|
--chart-1: oklch(0.66 0.16 245);
|
|
--chart-2: oklch(0.70 0.20 32);
|
|
--chart-3: oklch(0.78 0.15 82);
|
|
--chart-4: oklch(0.63 0.14 205);
|
|
--chart-5: oklch(0.66 0.20 25);
|
|
--radius: 0.875rem;
|
|
--sidebar: oklch(0.16 0.04 245);
|
|
--sidebar-foreground: oklch(0.96 0.01 245);
|
|
--sidebar-primary: oklch(0.66 0.16 245);
|
|
--sidebar-primary-foreground: oklch(0.12 0.03 245);
|
|
--sidebar-accent: oklch(0.22 0.045 245);
|
|
--sidebar-accent-foreground: oklch(0.96 0.01 245);
|
|
--sidebar-border: oklch(0.30 0.04 245);
|
|
--sidebar-ring: oklch(0.66 0.16 245);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
background-image:
|
|
linear-gradient(135deg, color-mix(in oklch, var(--primary) 8%, transparent), transparent 34%),
|
|
linear-gradient(315deg, color-mix(in oklch, var(--accent) 10%, transparent), transparent 32%);
|
|
background-attachment: fixed;
|
|
}
|
|
html {
|
|
@apply font-sans;
|
|
}
|
|
}
|
|
|
|
.supplier-map-label {
|
|
border: 0;
|
|
border-radius: 999px;
|
|
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16);
|
|
color: var(--foreground);
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
padding: 3px 7px;
|
|
}
|
|
|
|
.supplier-map-label::before {
|
|
display: none;
|
|
}
|