/* * MapLibre's popup and controls ship a fixed light palette, so in dark mode * they arrive as bright white cards on a dark map. These follow the app's * theme instead — the `.dark` class the theme controller puts on . * * Plain CSS rather than Tailwind classes on purpose: popup markup is built in * Ruby and injected with setHTML, so it is never scanned by Tailwind and any * utility classes in it would be purged. */ .lo-popup { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 13px; line-height: 1.45; color: #0f172a; } .lo-popup-title { font-weight: 600; font-size: 14px; } .lo-popup-muted { color: #475569; } .lo-popup-strong { margin-top: 4px; font-weight: 600; } .lo-popup-link { display: inline-block; margin-top: 6px; color: #0b4f6c; font-weight: 600; text-decoration: none; } .lo-popup-link:hover { text-decoration: underline; } .maplibregl-popup-content { border-radius: 12px; /* Right padding leaves room for the close button rather than letting it sit on top of the text. */ padding: 14px 44px 14px 16px; box-shadow: 0 8px 24px rgb(15 23 42 / 18%); min-width: 200px; } /* * MapLibre's close button is a ~12px glyph tucked into the corner. This is an * app used on a boat with wet gloves, so it gets a real 32px target with * margin, and enough contrast to find. */ .maplibregl-popup-close-button { width: 32px; height: 32px; top: 6px; right: 6px; border-radius: 8px; font-size: 22px; line-height: 1; color: #64748b; transition: background-color 120ms ease, color 120ms ease; } .maplibregl-popup-close-button:hover, .maplibregl-popup-close-button:focus-visible { background: #f1f5f9; color: #0f172a; } .dark .lo-popup { color: #f1f5f9; } .dark .lo-popup-muted { color: #94a3b8; } .dark .lo-popup-link { color: #7dd3fc; } .dark .maplibregl-popup-content { background: #0f172a; color: #f1f5f9; box-shadow: 0 8px 24px rgb(0 0 0 / 45%); } /* The little arrow is a separate element and has to be recoloured too, or it stays white and floats under a dark card. */ .dark .maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: #0f172a; } .dark .maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: #0f172a; } .dark .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: #0f172a; } .dark .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: #0f172a; } .dark .maplibregl-popup-close-button { color: #94a3b8; } .dark .maplibregl-popup-close-button:hover, .dark .maplibregl-popup-close-button:focus-visible { background: #1e293b; color: #f1f5f9; } .dark .maplibregl-ctrl-group { background: #1e293b; box-shadow: 0 0 0 2px rgb(0 0 0 / 20%); } .dark .maplibregl-ctrl-group button + button { border-top-color: #334155; } .dark .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1) brightness(1.6); } .dark .maplibregl-ctrl-attrib, .dark .maplibregl-ctrl-scale { background: rgb(15 23 42 / 80%); color: #cbd5e1; border-color: #334155; } .dark .maplibregl-ctrl-attrib a { color: #7dd3fc; }