diff --git a/app/src/interfaces/map/map.vue b/app/src/interfaces/map/map.vue index 583b35cb70..cc912fa133 100644 --- a/app/src/interfaces/map/map.vue +++ b/app/src/interfaces/map/map.vue @@ -456,7 +456,7 @@ export default defineComponent({ .v-info { padding: 20px; - background-color: var(--background-subdued); + background-color: var(--background-input); border-radius: var(--border-radius); box-shadow: var(--card-shadow); } diff --git a/app/src/layouts/map/components/map.vue b/app/src/layouts/map/components/map.vue index ca1f9f5d5c..b9c4728ad7 100644 --- a/app/src/layouts/map/components/map.vue +++ b/app/src/layouts/map/components/map.vue @@ -84,7 +84,7 @@ export default defineComponent({ closeOnClick: false, className: 'mapboxgl-point-popup', maxWidth: 'unset', - offset: 10, + offset: 12, }); const attributionControl = new AttributionControl({ compact: true }); @@ -335,8 +335,9 @@ export default defineComponent({ button { width: 36px; height: 36px; - background: var(--background-subdued) !important; + background: var(--background-input) !important; border: none !important; + transition: background-color var(--fast) var(--transition); span { display: none !important; @@ -372,6 +373,22 @@ export default defineComponent({ } } +.mapboxgl-user-location-dot, +.maplibregl-user-location-dot { + width: 12px; + height: 12px; + + &::before { + width: 12px; + height: 12px; + } + + &::after { + width: 16px; + height: 16px; + } +} + .maplibregl-ctrl-top-right { max-width: 80%; } @@ -407,8 +424,26 @@ export default defineComponent({ .mapboxgl-ctrl-attrib.mapboxgl-compact { min-width: 24px; min-height: 24px; - color: var(--foreground-normal); - background: var(--background-subdued) !important; + color: var(--foreground-subdued); + background: var(--background-input) !important; + box-shadow: var(--card-shadow); + + button { + opacity: 0.25; + transition: opacity var(--fast) var(--transition); + } + + &:hover { + button { + opacity: 0.75; + } + } + + .maplibregl-ctrl-attrib-inner, + .mapboxgl-ctrl-attrib-inner { + font-size: 12px; + line-height: 20px; + } } .mapboxgl-ctrl-geocoder { @@ -474,28 +509,18 @@ export default defineComponent({ } .mapboxgl-point-popup { - &.mapboxgl-popup-anchor-left .mapboxgl-popup-tip { - border-right-color: var(--background-normal); - } - - &.mapboxgl-popup-anchor-top .mapboxgl-popup-tip { - border-bottom-color: var(--background-normal); - } - - &.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip { - border-top-color: var(--background-normal); - } - - &.mapboxgl-popup-anchor-right .mapboxgl-popup-tip { - border-left-color: var(--background-normal); + .maplibregl-popup-tip, + .mapboxgl-popup-tip { + display: none; } .mapboxgl-popup-content { + padding: 6px 10px 6px; color: var(--foreground-normal-alt); font-weight: 500; font-size: 14px; font-family: var(--family-sans-serif); - background-color: var(--background-normal); + background-color: var(--background-page); border-radius: var(--border-radius); box-shadow: var(--card-shadow); pointer-events: none; diff --git a/app/src/layouts/map/map.vue b/app/src/layouts/map/map.vue index 50f400adb6..b96c2c6f65 100644 --- a/app/src/layouts/map/map.vue +++ b/app/src/layouts/map/map.vue @@ -311,6 +311,7 @@ export default defineComponent({ position: absolute; top: 10px; left: 50%; + box-shadow: var(--card-shadow); transform: translate(-50%, 0%); } diff --git a/app/src/layouts/map/style.ts b/app/src/layouts/map/style.ts index eea7e93f11..76130b1a74 100644 --- a/app/src/layouts/map/style.ts +++ b/app/src/layouts/map/style.ts @@ -1,7 +1,7 @@ import { AnyLayer, Expression } from 'maplibre-gl'; const baseColor = '#00c897'; -const selectColor = '#FFA500'; +const selectColor = '#17826d'; const fill: Expression = ['case', ['boolean', ['feature-state', 'selected'], false], selectColor, baseColor]; const outline: Expression = [ 'case', @@ -50,7 +50,7 @@ export const layers: AnyLayer[] = [ filter: ['all', ['!has', 'point_count'], ['==', '$type', 'Point']], layout: {}, paint: { - 'circle-radius': 5, + 'circle-radius': 4, 'circle-color': fill, 'circle-stroke-color': outline, 'circle-stroke-width': 3,