diff --git a/frontend/src/app/site-finder/analysis/[cad]/v2/v2.module.css b/frontend/src/app/site-finder/analysis/[cad]/v2/v2.module.css index 1de65eef..44c8b2ea 100644 --- a/frontend/src/app/site-finder/analysis/[cad]/v2/v2.module.css +++ b/frontend/src/app/site-finder/analysis/[cad]/v2/v2.module.css @@ -1891,3 +1891,167 @@ transform: translateY(-3px); } } + +/* ===================================================================== + * MAP — per-theme title + resource legend overlay + * (matches prototype `ptica-v2/index.html` `.map-head` + `.legend .lg-res`) + * ===================================================================== */ + +/* Per-theme map title — both spans rendered, CSS shows one. Mirrors the + prototype `.tnum-d` / `.tnum-l` toggle. */ +.mapTitleDark, +.mapTitleLight { + display: none; +} +.v2Root[data-theme="dark"] .mapTitleDark { + display: inline; +} +.v2Root[data-theme="light"] .mapTitleLight { + display: inline; +} + +/* Resource legend (top-left, under the map title) — compact 5-row panel. */ +.mapLegend { + position: absolute; + left: 11px; + top: 34px; + z-index: 6; + min-width: 168px; + max-width: 200px; + background: var(--surface-strong); + border: 1px solid var(--border); + border-radius: var(--radius-xs); + padding: 8px 9px; + backdrop-filter: blur(3px); + pointer-events: none; +} +.mapLegendTitle { + font-family: var(--font-mono); + font-size: 7.5px; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--text-soft); + margin: 0 0 5px; +} +.mapLegendRow { + display: flex; + align-items: center; + gap: 6px; + height: 15px; + font-size: 9px; +} +.mapLegendDot { + width: 8px; + height: 8px; + border-radius: 50%; + flex: 0 0 auto; + box-shadow: 0 0 5px currentColor; +} +.mapLegendLabel { + font-family: var(--font-mono); + letter-spacing: 0.04em; + text-transform: uppercase; + color: var(--text); + font-size: 8.5px; +} +.mapLegendDist { + margin-left: auto; + font-family: var(--font-mono); + font-size: 8.5px; + color: var(--text-muted); + font-variant-numeric: tabular-nums; +} +.mapLegendDistEmpty { + color: var(--text-soft); + opacity: 0.7; +} + +/* ===================================================================== + * LIGHT THEME — targeted contrast polish + * Tokens stay; just bump the value-side text and the cyan accents that + * appear washed-out on white. Dark theme is untouched. + * ===================================================================== */ + +/* kv-row: value text on white needs darker ink. */ +.v2Root[data-theme="light"] .kv .v { + color: var(--text-strong); +} + +/* Инженерия status-row: distance was --text-soft (#768493 ≈ AA-borderline + at 12px on white); push to --text-muted (#51616f) for solid AA. */ +.v2Root[data-theme="light"] .engRow .st .dm { + color: var(--text-muted); +} +/* Status-dot glow on white reads as a halo — soften it. */ +.v2Root[data-theme="light"] .engRow .nm .sd { + box-shadow: none; +} + +/* Map-legend value column — same readability bump on white. */ +.v2Root[data-theme="light"] .mapLegendDist { + color: var(--text-strong); +} +.v2Root[data-theme="light"] .mapLegendLabel { + color: var(--text-strong); +} +.v2Root[data-theme="light"] .mapLegendDot { + box-shadow: none; +} +/* Map title (light): drop the dark text-shadow that makes thin uppercase + look smudgy on a satellite-light map base. */ +.v2Root[data-theme="light"] .mapHead .ttl { + text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6); + color: var(--text-strong); +} + +/* Cards `Подробнее →` — cyan on white is faint. Swap to the deeper blue. */ +.v2Root[data-theme="light"] .more { + color: var(--accent-blue); +} + +/* Drawer eyebrow (cyan in dark) — use blue on white for AA. */ +.v2Root[data-theme="light"] .drawerH .dhEyebrow { + color: var(--accent-blue); +} + +/* Topbar version-chip: cyan text on a white pill is illegible. */ +.v2Root[data-theme="light"] .ver { + color: var(--accent-blue); + border-color: var(--border-strong); + background: var(--surface); +} +/* Topbar clock — separator-like vertical line between time + date is faint; + strengthen the date line and the chip border for visible structure. */ +.v2Root[data-theme="light"] .clock .date { + color: var(--text-muted); +} + +/* Active tab underline — cyan + glow on white reads as a pale smudge. + Swap to brand blue + drop the glow halo. */ +.v2Root[data-theme="light"] .tabActive::after { + background: var(--accent-blue); + box-shadow: none; +} +/* Rail active marker — same treatment. */ +.v2Root[data-theme="light"] .railItemActive { + color: var(--accent-blue); +} +.v2Root[data-theme="light"] .railItemActive::before { + background: var(--accent-blue); + box-shadow: none; +} + +/* Generic note / drawer note / source — bump from --text-soft to --text-muted + on white so the caveat copy stays readable but still secondary. */ +.v2Root[data-theme="light"] .note, +.v2Root[data-theme="light"] .dnote, +.v2Root[data-theme="light"] .dsource { + color: var(--text-muted); +} + +/* Section separator line inside drawer (`::after` on .dsecT) — barely visible + on white at 10% alpha; strengthen the border-faint reach within drawer. */ +.v2Root[data-theme="light"] .dsecT::after, +.v2Root[data-theme="light"] .drow { + border-color: rgba(40, 70, 95, 0.16); +} diff --git a/frontend/src/components/site-finder/ptica-v2/V2Map.tsx b/frontend/src/components/site-finder/ptica-v2/V2Map.tsx index eeb8c383..3d5d25df 100644 --- a/frontend/src/components/site-finder/ptica-v2/V2Map.tsx +++ b/frontend/src/components/site-finder/ptica-v2/V2Map.tsx @@ -19,6 +19,7 @@ import styles from "@/app/site-finder/analysis/[cad]/v2/v2.module.css"; import type { ParcelAnalysis } from "@/types/site-finder"; import { useConnectionPoints } from "@/hooks/useConnectionPoints"; import { useCustomPois } from "@/hooks/useCustomPois"; +import { V2MapLegend } from "@/components/site-finder/ptica-v2/V2MapLegend"; const PticaMapInner = dynamic( () => import("@/components/site-finder/ptica/PticaMapInner"), @@ -49,9 +50,20 @@ export function V2Map({ analysis }: Props) { customPois={customPois} /> + {/* Map title — text differs per theme; only one span is shown at a time + via the [data-theme="..."] selectors in v2.module.css (mirrors the + prototype `.tnum-d` / `.tnum-l` toggle pattern). */}