Add a modal with information text.

1 files changed, 22 insertions, 0 deletions

diff --git a/style.css b/style.css
index 9d4383a..8eda3c6 100644
--- a/style.css
+++ b/style.css
@@ -16,6 +16,20 @@ html, body {
   --menu-spacing: .5em;
   --menu-spacing-interline: .25em;
 }
+.modal {
+  --bs-modal-border-width: var(--menu-border-width);
+  --bs-border-radius-lg: var(--menu-border-radius);
+  --bs-modal-border-radius: var(--menu-border-radius);
+  --bs-modal-bg: var(--bs-body-bg);
+  --bs-modal-color: var(--bs-body-color);
+}
+#modal-info .modal-header {
+  border-bottom: none;
+  --bs-modal-header-border-width: 0;
+}
+.btn-close {
+  --bs-btn-close-focus-shadow: none;
+}
 @media screen and (max-width: 500px) {
   html, body {
     --menu-factor-size: 1;
@@ -29,6 +43,10 @@ html, body {
   bottom: 0;
   width: 100%;
 }
+#modal-info.modal {
+  --link-dark-rgb: var(--bs-modal-color);
+  --bs-emphasis-color-rgb: var(--bs-modal-color);
+}
 .form-check-input:focus:not(:focus-visible, :hover) {
   box-shadow: none;
 }
@@ -43,6 +61,10 @@ html, body {
 #map-menu, .ol-control {
   background-color: transparent;
 }
+#map-menu[aria-hidden="true"],
+#layer-selection-panel[aria-hidden="true"] {
+  display: none;
+}
 .ol-control button,
 #map-menu button,
 #layer-selection-panel {