style.css improvements for map
This commit is contained in:
parent
8da387f8e9
commit
585684f15b
1 changed files with 123 additions and 0 deletions
|
@ -1349,6 +1349,8 @@ p {
|
||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* MAP */
|
||||||
|
|
||||||
.message {
|
.message {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 20px;
|
bottom: 20px;
|
||||||
|
@ -1366,6 +1368,127 @@ p {
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Map container */
|
||||||
|
#map {
|
||||||
|
height: calc(100% - 60px); /* Adjust this value based on the header height */
|
||||||
|
width: 100%;
|
||||||
|
top: 60px; /* Same value as in the results-search-container margin-top */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Leaflet control buttons */
|
||||||
|
.leaflet-control-locate,
|
||||||
|
.leaflet-control-layers-toggle {
|
||||||
|
background-color: var(--button) !important;
|
||||||
|
border: 1px solid var(--border) !important;
|
||||||
|
color: var(--fg) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-bar a,
|
||||||
|
.leaflet-bar a:hover {
|
||||||
|
background-color: var(--button) !important;
|
||||||
|
border: 1px solid var(--border) !important;
|
||||||
|
color: var(--fg) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-popup-content-wrapper,
|
||||||
|
.leaflet-popup-tip {
|
||||||
|
background: var(--html-bg) !important;
|
||||||
|
color: var(--text-color) !important;
|
||||||
|
border: 1px solid var(--border) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-popup-content-wrapper a {
|
||||||
|
color: var(--link) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-popup-content-wrapper a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Leaflet control buttons */
|
||||||
|
.leaflet-control-locate,
|
||||||
|
.leaflet-control-layers-toggle {
|
||||||
|
background-color: var(--button) !important;
|
||||||
|
border: 1px solid var(--border) !important;
|
||||||
|
color: var(--fg) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-bar a,
|
||||||
|
.leaflet-bar a:hover {
|
||||||
|
background-color: var(--button) !important;
|
||||||
|
border: 1px solid var(--border) !important;
|
||||||
|
color: var(--fg) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-popup-content-wrapper,
|
||||||
|
.leaflet-popup-tip {
|
||||||
|
background: var(--html-bg) !important;
|
||||||
|
color: var(--text-color) !important;
|
||||||
|
border: 1px solid var(--border) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-popup-content-wrapper a {
|
||||||
|
color: var(--link) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-popup-content-wrapper a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Leaflet attribution control */
|
||||||
|
.leaflet-control-attribution {
|
||||||
|
background: var(--button) !important;
|
||||||
|
border: 1px solid var(--border) !important;
|
||||||
|
color: var(--fg) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-control-attribution a {
|
||||||
|
color: var(--link) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-control-attribution a:hover {
|
||||||
|
text-decoration: underline !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Leaflet scale control */
|
||||||
|
.leaflet-control-scale {
|
||||||
|
background: var(--button) !important;
|
||||||
|
border: 1px solid var(--border) !important;
|
||||||
|
color: var(--fg) !important;
|
||||||
|
text-shadow: 1px 1px 2px var(--border) !important; /* Adjust text shadow */
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-control-scale-line {
|
||||||
|
background: var(--button) !important;
|
||||||
|
border: 1px solid var(--border) !important;
|
||||||
|
color: var(--fg) !important;
|
||||||
|
text-shadow: 1px 1px 2px var(--border) !important; /* Adjust text shadow */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensuring dark theme compliance */
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.leaflet-control-locate,
|
||||||
|
.leaflet-control-layers-toggle,
|
||||||
|
.leaflet-bar a,
|
||||||
|
.leaflet-bar a:hover,
|
||||||
|
.leaflet-popup-content-wrapper,
|
||||||
|
.leaflet-popup-tip,
|
||||||
|
.leaflet-control-attribution,
|
||||||
|
.leaflet-control-scale,
|
||||||
|
.leaflet-control-scale-line {
|
||||||
|
background-color: var(--button) !important;
|
||||||
|
border: 1px solid var(--border) !important;
|
||||||
|
color: var(--fg) !important;
|
||||||
|
text-shadow: 1px 1px 2px var(--background-color) !important; /* Dark theme shadow adjustment */
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-control-attribution a {
|
||||||
|
color: var(--link) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- */
|
||||||
|
|
||||||
/* Variables for light theme */
|
/* Variables for light theme */
|
||||||
:root {
|
:root {
|
||||||
--background-color: #ffffff;
|
--background-color: #ffffff;
|
||||||
|
|
Loading…
Add table
Reference in a new issue