doxa-life/doxa-maps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rounded corners reach the map canvas: the page's radius token rounds the canvas itself, which a compositing layer leaves unclipped

Browse source
This commit is contained in:
swift-river542 2026-09-17 01:26:21 -05:00
parent d92318e620
commit cde3291049
3 changed files with 14 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app-profiles/doxa-research-map/research-map.vue
View file

@ -326,7 +326,7 @@ useShadowStyles(`
down to the canvas instead of relying on the ancestor clip alone. */
.rm-root, .rm-map-area, .rm-map-canvas,
.rm-map-canvas .mapboxgl-canvas-container, .rm-map-canvas .mapboxgl-canvas,
.rm-map-canvas .maplibregl-canvas-container, .rm-map-canvas .maplibregl-canvas { border-radius: inherit; }
.rm-map-canvas .maplibregl-canvas-container, .rm-map-canvas .maplibregl-canvas { border-radius: var(--map-radius, 0px); }
.rm-map-canvas { position:absolute;inset:0; }
.rm-loading { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0f1216;color:#7c8cf8;font:13px -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;z-index:5; }
/* Failure state, NOT a cover: modelled on cities-internet's .gm-err so anything the

12
app-profiles/doxa-simple-map/doxa-simple-map.vue
View file

@ -58,7 +58,7 @@ useShadowStyles(`
down to the canvas instead of relying on the ancestor clip alone. */
.dsm-root, .dsm-map-area, .dsm-map-canvas,
.dsm-map-canvas .mapboxgl-canvas-container, .dsm-map-canvas .mapboxgl-canvas,
.dsm-map-canvas .maplibregl-canvas-container, .dsm-map-canvas .maplibregl-canvas { border-radius: inherit; }
.dsm-map-canvas .maplibregl-canvas-container, .dsm-map-canvas .maplibregl-canvas { border-radius: var(--map-radius, 0px); }
.dsm-map-canvas { position:absolute;inset:0; }
.dsm-loading { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0f1216;color:#7c8cf8;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px;z-index:5; } /* dark like the research map's cover: the basemap under it is night from frame one, so a light cover was the only "flash" left */
/* Failure state, NOT a cover: modelled on cities-internet's .gm-err so anything the
@ -419,9 +419,13 @@ let _containerObserver = null
function applyContainerScale(width) {
const el = dsmRoot.value
if (!el) return
// Unified corner roundedness across every profile (matches the prayer map).
el.style.setProperty('--map-radius', '16px')
el.style.setProperty('--map-radius-sm', '8px')
// Corner roundedness: the HOST PAGE decides when it rounds the element (the site publishes
// --map-radius from its slot); we only supply a default for a bare embed. Writing it
// unconditionally would be an inline style and would override the page.
if (!getComputedStyle(el).getPropertyValue('--map-radius').trim()) {
el.style.setProperty('--map-radius', '16px')
el.style.setProperty('--map-radius-sm', '8px')
}
if (width >= 700) {
el.style.setProperty('--map-btn-size', '40px')
el.style.setProperty('--map-toolbar-gap', '8px')

5
library/ProfileLoader.vue
View file

@ -197,6 +197,11 @@ provide('dataStore', dataStore)
<style scoped>
.profile-loader {
/* Pass the host's rounded corners down. The host page rounds the custom element; this
wrapper sits between the host and the profile, so without this every descendant —
including the WebGL canvas, which its own compositing layer leaves unclipped —
would inherit square corners and show through the rounded slot. */
border-radius: var(--map-radius, 0px);
width: 100%;
height: 100%;
position: relative;