Overlay

Examples for the ss-c-overlay module.

A full-cover, click-through layer for floating UI over a map, canvas or 3D view. The layer itself is transparent to pointer events; each direct slot re-enables them. Requires a positioning context on the parent.

Slots

Lon 5.29 · Lat 52.13 · z14
HTML 
<div style="position: relative; height: 260px; background: var(--ss-color-surface-2);">
            <div class="ss-c-overlay">
                <aside class="ss-c-overlay__aside ss-c-overlay__aside--left">Layers</aside>
                <aside class="ss-c-overlay__aside ss-c-overlay__aside--right">Inspector</aside>
                <div class="ss-c-overlay__bottom-center">Lon 5.29 &middot; Lat 52.13 &middot; z14</div>
            </div>
        </div>

Top bar only

Rendering … 62%
HTML 
<div style="position: relative; height: 160px; background: var(--ss-color-surface-2);">
            <div class="ss-c-overlay">
                <div class="ss-c-overlay__top-center">Rendering &hellip; 62%</div>
            </div>
        </div>