diff --git a/proxy/css/ui.css b/proxy/css/ui.css index 4be598a8..69a5d6d3 100644 --- a/proxy/css/ui.css +++ b/proxy/css/ui.css @@ -55,6 +55,29 @@ body { background-size: 24px; background-image: url("data:image/svg+xml,%3Csvg width='800' height='800' viewBox='0 0 200 200' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36.5 75C41 89.5 54 100 70 100s29-10.5 33.5-25H170a10 10 0 0 0 0-20h-66.5C99 40.5 86 30 70 30S41 40.5 36.5 55H25a10 10 0 0 0 0 20ZM70 50a15 15 0 1 1-15 15 14.73 14.73 0 0 1 15-15Zm105 75h-11.5c-4.5-14.5-17.5-25-33.5-25s-29 10.5-33.5 25H30a10 10 0 0 0 0 20h66.5c4.5 14.5 17.5 25 33.5 25s29-10.5 33.5-25H175a10 10 0 0 0 0-20Zm-45 25a15 15 0 1 1 15-15 14.73 14.73 0 0 1-15 15Z'/%3E%3C/svg%3E"); } + +/** Patch Maplibre GL to respect the page theme */ +#map-container .maplibregl-ctrl-group, +.maplibregl-ctrl-attrib.maplibregl-compact, +.maplibregl-ctrl-attrib a, +.maplibregl-ctrl-scale { + background: var(--bs-body-bg); + color: var(--bs-body-color); +} +.maplibregl-ctrl-scale { + background: rgba(var(--bs-body-bg-rgb), 0.8); + color: var(--bs-body-color); +} +[data-bs-theme="dark"] .maplibregl-ctrl-scale { + border-top-color: var(--bs-border-color); + border-right-color: var(--bs-light); + border-left-color: var(--bs-light); + border-bottom-color: var(--bs-light); +} +[data-bs-theme="dark"] .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button { + background-color: var(--bs-light); +} + .maplibregl-ctrl-group button.maplibregl-ctrl-search { padding: 4px; width: auto;