Spitfire/Search
Spitfire/Search
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

added dynamic lloading for images

Browse source
This commit is contained in:
partisan 2024-06-19 14:33:00 +02:00
parent 8f3f1e2d3e
commit 78c8fdbb4a
3 changed files with 211 additions and 133 deletions
Download patch file Download diff file Expand all files Collapse all files

190
static/css/style.css
View file

@ -1357,10 +1357,10 @@ p {
left: 50%;
transform: translateX(-50%);
padding: 10px;
background-color: var(--html-bg);
background-color: var(--search-bg);
border: 1px solid var(--border);
border-radius: 15px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
border-radius: 5px;
box-shadow: 0 0 10px var(--box-shadow);
z-index: 1000;
width: auto;
max-width: 80%;
@ -1370,9 +1370,9 @@ p {
/* Map container */
#map {
height: calc(100% - 60px); /* Adjust this value based on the header height */
height: calc(100% - 60px);
width: 100%;
top: 60px; /* Same value as in the results-search-container margin-top */
top: 60px;
}
/* Leaflet control buttons */
@ -1465,86 +1465,22 @@ p {
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;
--text-color: #000000;
--highlight: #007bff;
--border-color: #dddddd;
--search-bg: #f1f3f4;
--search-bg-input: #ffffff;
--search-bg-input-border: #dfe1e5;
--button: #f8f9fa;
--link: #1a0dab;
--fg: #202124;
--html-bg: #ffffff;
--snip-border: #dfe1e5;
--snip-background: #ffffff;
--image-view: #ffffff;
--image-view-titlebar: #f1f3f4;
--search-button: #5f6368;
--image-select: #e8f0fe;
--view-image-color: #f8f9fa;
--footer-bg: #f2f2f2;
--footer-font: #70757a;
--border: #e0e0e0;
--link-visited: #660099;
--publish-info: #70757a;
--green: #3c802c;
}
/* Styles for dark theme */
@media (prefers-color-scheme: dark) {
:root {
--background-color: #202124;
--text-color: #e8eaed;
--highlight: #8ab4f8;
--border-color: #5f6368;
--search-bg: #303134;
--search-bg-input: #202124;
--search-bg-input-border: #5f6368;
--button: #3c4043;
--link: #8ab4f8;
--fg: #e8eaed;
--html-bg: #202124;
--snip-border: #5f6368;
--snip-background: #303134;
--image-view: #202124;
--image-view-titlebar: #303134;
--search-button: #e8eaed;
--image-select: #5f6368;
--view-image-color: #202124;
--footer-bg: #303134;
--footer-font: #e8eaed;
--border: #5f6368;
--link-visited: #c79fff;
--publish-info: #e8eaed;
--green: #8ab4f8;
}
.message-bottom-left {
display: none;
align-items: center;
justify-content: center;
position: fixed;
bottom: 20px;
right: 20px;
background-color: var(--search-bg);
color: var(--text-color);
padding: 10px;
border-radius: 5px;
z-index: 1000;
text-align: center;
flex-direction: column;
border: 1px solid var(--border);
box-shadow: 0 0 10px var(--box-shadow);
}
body, h1, p, a, input, button {
@ -1889,3 +1825,87 @@ body, h1, p, a, input, button {
}
}
/* --- */
/* 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;
--text-color: #000000;
--highlight: #007bff;
--border-color: #dddddd;
--search-bg: #f1f3f4;
--search-bg-input: #ffffff;
--search-bg-input-border: #dfe1e5;
--button: #f8f9fa;
--link: #1a0dab;
--fg: #202124;
--html-bg: #ffffff;
--snip-border: #dfe1e5;
--snip-background: #ffffff;
--image-view: #ffffff;
--image-view-titlebar: #f1f3f4;
--search-button: #5f6368;
--image-select: #e8f0fe;
--view-image-color: #f8f9fa;
--footer-bg: #f2f2f2;
--footer-font: #70757a;
--border: #e0e0e0;
--link-visited: #660099;
--publish-info: #70757a;
--green: #3c802c;
--box-shadow: #00000020;
}
/* Styles for dark theme */
@media (prefers-color-scheme: dark) {
:root {
--background-color: #202124;
--text-color: #e8eaed;
--highlight: #8ab4f8;
--border-color: #5f6368;
--search-bg: #303134;
--search-bg-input: #202124;
--search-bg-input-border: #5f6368;
--button: #3c4043;
--link: #8ab4f8;
--fg: #e8eaed;
--html-bg: #202124;
--snip-border: #5f6368;
--snip-background: #303134;
--image-view: #202124;
--image-view-titlebar: #303134;
--search-button: #e8eaed;
--image-select: #5f6368;
--view-image-color: #202124;
--footer-bg: #303134;
--footer-font: #e8eaed;
--border: #5f6368;
--link-visited: #c79fff;
--publish-info: #e8eaed;
--green: #8ab4f8;
--box-shadow: #ffffff20;
}
}