802f471047
`assets` already carried latitude/longitude, but `sites` had nowhere to put a pin — so there was no way to locate a site. Both fields added, matching the plant collection's shape so the same map component can plot either. Coordinates are entered as two plain number fields with an "open in maps" link to verify the point, rather than a drag-to-pin map: the in-app Leaflet map is still being worked on, and a coordinate is usually copied off some other map anyway. Clearing removes the pin rather than leaving half a coordinate, which would plot in the Gulf of Guinea and read as "located". Bounds are checked server-side, not just in the form: a point outside South Africa is refused with the numbers echoed back, because a swapped pair or a dropped digit is far likelier than a machine abroad. 0,0 is rejected by the same rule. The sites list marks each row as pinned or "no pin", with a banner counting the gaps, so an unlocated site is visible without opening it. While checking this, found that all 44 assets carry the SAME coordinate (-26.1016, 28.3487) — the Plant Map currently stacks every marker on one pin while reporting "44 located on the map". Left alone, but worth knowing. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
113 lines
4.1 KiB
CSS
113 lines
4.1 KiB
CSS
@import "tailwindcss";
|
||
|
||
/* Leaflet + marker-cluster must be global stylesheets. Importing them inside
|
||
components/PlantMap.tsx works for leaflet.css but the cluster stylesheet gets
|
||
dropped, because that component is behind a `next/dynamic` ssr:false boundary
|
||
whose CSS is not linked in the initial HTML. Without these, cluster bubbles
|
||
land unpositioned and unstyled. */
|
||
@import "leaflet/dist/leaflet.css";
|
||
@import "leaflet.markercluster/dist/MarkerCluster.css";
|
||
|
||
/* Enable dark mode via .dark class on html */
|
||
@custom-variant dark (&:where(.dark, .dark *));
|
||
|
||
/* Coolors palette — stays the same in both modes */
|
||
@theme {
|
||
--color-sunny: #EDAE49;
|
||
--color-brick: #D1495B;
|
||
--color-seaweed: #00798C;
|
||
--color-casual: #30638E;
|
||
--color-indigo: #003D5B;
|
||
|
||
/* Part A.4: chart hues — deeper steps of the same brand hues, validated for CVD/contrast.
|
||
Brand palette (#EDAE49/#00798C/#D1495B) does NOT change; these are read only by chart marks. */
|
||
--color-chart-income: #0090A6;
|
||
--color-chart-fixed: #BE851F;
|
||
--color-chart-running: #C13B4D;
|
||
|
||
--color-brand-blue: #30638E;
|
||
--color-brand-orange: #EDAE49;
|
||
--color-brand-red: #D1495B;
|
||
--color-brand-green: #00798C;
|
||
--color-brand-purple: #8B5CF6;
|
||
--color-brand-cyan: #00798C;
|
||
--color-brand-pink: #D1495B;
|
||
--color-brand-yellow: #EDAE49;
|
||
|
||
/* Light theme (default) */
|
||
--color-bg: #f5f7fb;
|
||
--color-surface: #ffffff;
|
||
--color-surface-muted: #f9fafb;
|
||
--color-border: #e5e7eb;
|
||
--color-border-soft: #f3f4f6;
|
||
--color-text: #003D5B;
|
||
--color-text-muted: #6b7280;
|
||
--color-text-soft: #9ca3af;
|
||
--color-row-hover: rgba(0, 0, 0, 0.02);
|
||
|
||
/* "Ink" steps — the light-mode colour for text that borrows a brand hue.
|
||
The base brand palette above is never used as text on a light surface unless
|
||
it clears 4.5:1; these names exist so `text-accent-ink` works in BOTH modes
|
||
and only its value changes. See the .dark block for the dark counterparts. */
|
||
--color-accent-ink: #30638E;
|
||
--color-brick-ink: #D1495B;
|
||
--color-indigo-ink: #003D5B;
|
||
}
|
||
|
||
/* Dark theme overrides */
|
||
.dark {
|
||
--color-bg: #0f151b;
|
||
--color-surface: #1e2732;
|
||
--color-surface-muted: #182029;
|
||
--color-border: #303c48;
|
||
--color-border-soft: #26313c;
|
||
--color-text: #e8eef4;
|
||
--color-text-muted: #adb8c2;
|
||
--color-text-soft: #87919a;
|
||
--color-row-hover: rgba(255, 255, 255, 0.04);
|
||
|
||
/* Dark "ink" steps. The base brand hues are correct as *fills* but fail WCAG AA
|
||
as text on a dark surface (seaweed 3.6:1, casual 2.9:1, brick 3.7:1, indigo 1.6:1).
|
||
These are lighter steps of the same hues, reaching 4.8–7.3:1. Text-only —
|
||
never a fill — so the @theme brand palette stays untouched. */
|
||
--color-accent-ink: #2BB0C4;
|
||
--color-brick-ink: #E86E7E;
|
||
--color-indigo-ink: #7FA8C9;
|
||
|
||
/* Part A.4: dark-mode chart hues */
|
||
--color-chart-income: #00A6BE;
|
||
--color-chart-fixed: #BE851F;
|
||
--color-chart-running: #D94F60;
|
||
}
|
||
|
||
html, body {
|
||
background: var(--color-bg);
|
||
color: var(--color-text);
|
||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||
}
|
||
|
||
* { -webkit-font-smoothing: antialiased; }
|
||
|
||
/* Smooth color transition when toggling themes */
|
||
body, .dark body { transition: background-color 0.2s ease, color 0.2s ease; }
|
||
|
||
.recharts-cartesian-axis-tick text { fill: var(--color-text-soft); font-size: 11px; }
|
||
.recharts-cartesian-grid line { stroke: var(--color-border-soft); }
|
||
.recharts-default-tooltip {
|
||
background: rgba(255,255,255,0.98) !important;
|
||
border: 1px solid #e5e7eb !important;
|
||
border-radius: 12px !important;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
|
||
font-size: 12px !important;
|
||
padding: 8px 12px !important;
|
||
}
|
||
.recharts-tooltip-label { color: #003D5B !important; font-weight: 600 !important; margin-bottom: 4px !important; }
|
||
.recharts-legend-item-text { color: #6b7280 !important; font-size: 12px !important; }
|
||
|
||
.dark .recharts-default-tooltip {
|
||
background: rgba(30, 39, 50, 0.98) !important;
|
||
border: 1px solid #303c48 !important;
|
||
color: #e8eef4 !important;
|
||
}
|
||
.dark .recharts-tooltip-label { color: #e8eef4 !important; }
|
||
.dark .recharts-legend-item-text { color: #adb8c2 !important; }
|