Keep the hover card's corners round without its tail

This commit is contained in:
Maurice
2026-08-10 09:18:48 +02:00
committed by Maurice
parent 2a94a5eb8e
commit 14d6f2ecc9
3 changed files with 68 additions and 4 deletions
+13 -4
View File
@@ -46,14 +46,23 @@ body { height: 100%; overflow: auto; overscroll-behavior: none; -webkit-overflow
background: #fff;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
}
/* No speech-bubble tail on the hover card. It is a label that follows the
cursor onto whatever it is over, not a popup anchored to one spot, and the
tail read as a stray notch hanging off the bottom edge. The popup's own
offset carries the gap to the marker instead. */
/* No speech-bubble tail on the hover card. The card stands off its marker by
26px and reads as a label, not as a callout pinned to a point — the tail
hung off the bottom edge as a stray notch. The popup's offset carries the
gap on its own. */
.trek-map-popup .mapboxgl-popup-tip,
.trek-map-popup .maplibregl-popup-tip {
display: none;
}
/* Both engines square off one corner per anchor so the tail meets the card
flush (.maplibregl-popup-anchor-bottom-left .maplibregl-popup-content and
its three siblings). Same specificity as the rule above, so which one wins
comes down to stylesheet order — and with no tail there, a squared corner is
just a squared corner. `[class]` buys the extra weight to settle it. */
.trek-map-popup[class] .mapboxgl-popup-content,
.trek-map-popup[class] .maplibregl-popup-content {
border-radius: 10px;
}
.atlas-tooltip {
background: rgba(10, 10, 20, 0.6) !important;