Admin/panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Enhance map controls and overlay visibility in project map components

Browse Source
This commit is contained in:
RKWojs
2025-09-16 12:11:52 +02:00
parent e5e72b597a
commit c75982818c
4 changed files with 68 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/app/globals.css
View File

@@ -92,5 +92,66 @@ body {
/* Map controls positioning */
.leaflet-control-container .leaflet-top.leaflet-right {
top: 80px !important; /* Account for floating header */
top: 10px !important; /* Position closer to top for project page */
right: 10px !important;
}
/* Style the layer control to make it prettier */
.leaflet-control-layers {
border-radius: 6px !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
font-family: inherit !important;
font-size: 13px !important;
min-width: 180px !important;
max-width: 220px !important;
}
.leaflet-control-layers-toggle {
background-color: #3b82f6 !important;
color: white !important;
border-radius: 4px !important;
width: 30px !important;
height: 30px !important;
border: none !important;
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2) !important;
transition: all 0.2s ease !important;
font-size: 16px !important;
line-height: 1 !important;
}
.leaflet-control-layers-toggle:hover {
background-color: #2563eb !important;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
transform: scale(1.05) !important;
}
.leaflet-control-layers-list {
border-radius: 4px !important;
padding: 6px !important;
}
.leaflet-control-layers-base label,
.leaflet-control-layers-overlays label {
padding: 4px 8px !important;
border-radius: 3px !important;
margin: 1px 0 !important;
transition: background-color 0.2s ease !important;
cursor: pointer !important;
font-size: 12px !important;
line-height: 1.3 !important;
}
.leaflet-control-layers-base label:hover,
.leaflet-control-layers-overlays label:hover {
background-color: rgba(59, 130, 246, 0.08) !important;
}
.leaflet-control-layers input[type="radio"],
.leaflet-control-layers input[type="checkbox"] {
margin-right: 6px !important;
transform: scale(0.9) !important;
}