style.css improvements for map

This commit is contained in:
partisan 2024-05-21 22:43:13 +02:00
parent fb8508777c
commit 5f64173135
2 changed files with 125 additions and 1 deletions

View file

@ -6,11 +6,12 @@
- [x] Image results
- [X] Video results
- [X] Map results
- [X] Forums results
- [x] HTML+CSS site (no JS version)
- [X] Results cache
## Pending Tasks
- [ ] Forums results
- [ ] Torrent results
- [ ] Website with JS version
- [ ] JS applets for results (such as calculator)

View file

@ -1349,6 +1349,8 @@ p {
letter-spacing: normal;
}
/* MAP */
.message {
position: absolute;
bottom: 20px;
@ -1366,6 +1368,127 @@ p {
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 */
:root {
--background-color: #ffffff;