CSS: Make the feel more bootstrap-y.

1 files changed, 168 insertions, 188 deletions

diff --git a/style.css b/style.css
index 8eda3c6..106315e 100644
--- a/style.css
+++ b/style.css
@@ -5,234 +5,214 @@
 html, body {
   margin: 0;
   height: 100%;
-  --ol-partial-background-color: rgba(255, 255, 255, .9);
-  --ol-background-color: var(--bs-body-bg);
   --ol-foreground-color: var(--bs-body-color);
-  --menu-factor-size: 1.75;
-  --menu-border-width: 2px;
-  --menu-border-radius: 4px;
-  --menu-border-color: var(--ol-subtle-background-color);
-  --menu-button-size: 1.75em;
-  --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;
-    --menu-border-width: 1px;
-    --menu-border-radius: 2px;
-  }
+  --ol-background-color: var(--bs-body-bg);
+
+  /* highlight non-bootstrapy style */
+  --ol-accent-background-color: red;
+  --ol-subtle-background-color: red;
+  --ol-partial-background-color: red;
+  --ol-subtle-foreground-color: red;
+  --ol-brand-color: red;
 }
+
+
 #map {
   position: absolute;
   top: 0;
   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;
-}
-.ol-control button:focus:not(:focus-visible, :hover) {
-  color: var(--ol-subtle-foreground-color);
-  text-decoration: none;
-  outline: none;
-}
-#map-menu, .ol-zoom, .ol-zoomslider {
-  font-size: calc(100% * var(--menu-factor-size));
-}
-#map-menu, .ol-control {
-  background-color: transparent;
-}
-#map-menu[aria-hidden="true"],
-#layer-selection-panel[aria-hidden="true"] {
-  display: none;
+
+#map-control-container {
+  --map-container-padding: 1rem;
+  position: absolute;
+  padding: var(--map-container-padding);
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  height: 100%;
 }
-.ol-control button,
-#map-menu button,
-#layer-selection-panel {
-  border: var(--menu-border-width) solid var(--menu-border-color);
-  background-color: var(--ol-background-color);
-  background-clip: padding-box;
-  border-radius: var(--menu-border-radius);
-  color: var(--ol-subtle-foreground-color);
+@media screen and (max-width: 576px) {
+  #map-control-container {
+    --map-container-padding: .5rem;
+  }
 }
-.ol-control button, #map-menu button {
-  width: var(--menu-button-size);
-  height: var(--menu-button-size);
-  font-size: inherit;
-  text-align: center;
-  font-weight: bold;
-  text-decoration: none;
+
+#zoom-control {
   display: block;
-  line-height: .4em;
-  padding: 0;
-}
-.ol-control button:hover,
-.ol-control button:focus,
-#map-menu button:hover,
-#map-menu button:focus {
-  outline: none;
-}
-.ol-control button:hover,
-.ol-control button:focus-visible,
-#map-menu button:hover,
-#map-menu button:focus-visible {
-  --menu-border-color: var(--ol-subtle-foreground-color);
-  color: var(--ol-foreground-color);
-}
-.ol-zoom > .ol-zoom-in,
-.ol-zoom > .ol-zoom-out,
-.ol-zoomslider {
-  --menu-button-size: 1.375em;
-}
-.ol-zoom > .ol-zoom-in,
-.ol-zoom > .ol-zoom-out {
-  margin: 0;
-  height: calc(var(--menu-button-size) - var(--menu-border-width) * .5) !important;
+  margin-right: auto;
 }
-.ol-zoom > button.ol-zoom-in:hover,
-.ol-zoom > button.ol-zoom-in:focus-visible,
-.ol-zoom > button.ol-zoom-out:hover,
-.ol-zoom > button.ol-zoom-out:focus-visible {
+#zoom-control .ol-zoom {
   position: relative;
-  z-index: 1;
-  height: var(--menu-button-size) !important;
-}
-.ol-zoom > .ol-zoom-in {
-  border-radius: var(--menu-border-radius) var(--menu-border-radius) 0 0;
-  border-bottom-width: calc(var(--menu-border-width) * .5);
-}
-.ol-zoom > button.ol-zoom-in:hover,
-.ol-zoom > button.ol-zoom-in:focus-visible {
-  border-bottom-width: var(--menu-border-width);
-  margin-bottom: calc(-.5 * var(--menu-border-width));
-}
-.ol-zoom > .ol-zoom-out {
-  border-radius: 0 0 var(--menu-border-radius) var(--menu-border-radius);
-  border-top-width: calc(var(--menu-border-width) * .5);
-}
-.ol-zoom > button.ol-zoom-out:hover,
-.ol-zoom > button.ol-zoom-out:focus-visible {
-  border-top-width: var(--menu-border-width);
-  margin-top: calc(-.5 * var(--menu-border-width));
-}
-@media screen and (max-height: 500px) {
-  .ol-zoomslider {
-    display: none;
-  }
-}
-.ol-zoomslider {
-  --ol-zoomslider-thumb-height: 15px;
-  --ol-zoomslider-margin: 14px;
-}
-@media screen and (max-width: 500px) {
-  .ol-zoomslider {
-    --ol-zoomslider-thumb-height: 10px;
-    --ol-zoomslider-margin: 8px;
-  }
-}
-.ol-zoomslider, button.ol-zoomslider-thumb {
-  --menu-border-width2: 1px;
+  display: block;
+  width: revert;
+  top: auto;
+  left: auto;
 }
-.ol-zoomslider {
-  background-color: rgba(255, 255, 255, .7);
-  background-color: rgb(from var(--ol-partial-background-color) r g b / .7);
-  border-radius: var(--menu-border-radius);
-  border: var(--menu-border-width) solid var(--menu-border-color);
-  width: var(--menu-button-size);
-  padding: calc(var(--ol-zoomslider-margin) + var(--ol-zoomslider-thumb-height)*.3) 0;
-  left: var(--menu-spacing);
-  top: calc(var(--menu-spacing) + var(--menu-button-size)*2 - var(--menu-border-width) + var(--menu-spacing));
+#zoom-control .ol-zoomslider {
+  margin-top: .5rem;
+  position: relative;
+  display: block;
+  width: revert;
+  top: auto;
+  left: auto;
+  padding: 10px 0;
+
+  background-color: var(--bs-body-bg);
+  border-radius: var(--bs-modal-border-radius);
+  border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
+  overflow-y: hidden;
+  z-index: 0;
 }
-.ol-zoomslider::after {
+#zoom-control .ol-zoomslider::after {
   content: "";
   position: absolute;
-  top: var(--ol-zoomslider-margin);
-  left: var(--ol-zoomslider-margin);
-  right: var(--ol-zoomslider-margin);
-  bottom: var(--ol-zoomslider-margin);
-  background-color: var(--ol-subtle-background-color);
-  border-radius: calc((var(--menu-button-size) - var(--menu-border-width))*.5 - var(--ol-zoomslider-margin));
-  border: var(--menu-border-width2) solid var(--menu-border-color);
+  top: 3%;
+  left: calc(50% - 3px);
+  width: 6px;
+  height: 94%;
+  background-color: RGBA(211, 212, 213, .4);
+  border-radius: 5px;
+  border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
   cursor: pointer;
 }
-.ol-zoomslider:hover {
-  background-color: var(--ol-partial-background-color);
-}
-.ol-zoomslider button.ol-zoomslider-thumb {
-  z-index: 1;
-  height: var(--ol-zoomslider-thumb-height);
-  width: calc((var(--menu-button-size) - 2*var(--menu-border-width))*.85);
+#zoom-control button.ol-zoomslider-thumb {
+  z-index: 10;
+  height: 10px;
+  width: 80%;
   margin: 0 auto;
-  border: var(--menu-border-width2) solid var(--menu-border-color);
+  padding: 0;
 }
+
 .ol-scale-line {
-  position: absolute;
-  bottom: calc(var(--menu-spacing) * var(--menu-factor-size));
-  left: calc(var(--menu-spacing) * var(--menu-factor-size));
-  border: var(--menu-border-width) solid var(--menu-border-color);
-  background-color: var(--ol-partial-background-color);
+  display: block;
+  width: revert;
+  height: revert;
+  top: auto;
+  bottom: var(--map-container-padding);
+  left: var(--map-container-padding);
+
+  padding: .5rem;
+  background-color: var(--bs-modal-bg);
   background-clip: padding-box;
-  border-radius: var(--menu-border-radius);
-  padding: calc(.5ex * var(--menu-factor-size));
-}
-.ol-scale-line .ol-scale-line-inner {
-  font-size: 80%;
+  border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
+  border-radius: var(--bs-modal-border-radius);
+}
+.ol-scale-line-inner {
+  border: 1px solid var(--bs-body-color);
+  border-top: none;
+  color: var(--bs-body-color);
+  font-size: small;
   margin: 0;
 }
-#map-menu {
-  position: absolute;
-  right: var(--menu-spacing);
-  top: var(--menu-spacing);
-  margin: 0;
+
+#map-menu, #zoom-control {
+  position: relative;
+}
+@media screen and (min-width: 577px) {
+  #map-menu > .ol-control > button {
+    font-size: 200%;
+  }
 }
 #map-menu > * {
-  margin-top: var(--menu-spacing-interline);
+  margin-top: .5rem;
+}
+@media screen and (max-width: 576px) {
+  #map-menu > * {
+    margin-top: .25rem;
+  }
 }
 #map-menu > *:first-child {
   margin-top: 0;
 }
+
 #map-menu > .ol-control {
   position: relative;
   inset: initial;
 }
 
-#map-menu button[aria-expanded="true"] {
-  background-color: var(--ol-subtle-foreground-color);
-  color: var(--ol-background-color);
+.ol-control {
+  background: none;
+  border: none;
+  outline: none;
 }
-#map-menu button[aria-expanded="true"]:hover,
-#map-menu button[aria-expanded="true"]:focus-visible {
-  background-color: var(--ol-foreground-color);
-  border-color: var(--ol-foreground-color);
+.ol-control button.btn {
+  --bs-btn-padding-x: 0.5rem;
+  --bs-btn-padding-y: 0.5rem;
+  display: block;
+  margin: 0;
+  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
+  width: auto;
+  height: auto;
+  font-weight: bold;
+  text-decoration: none;
+  font-size: inherit;
+  text-align: center;
+  color: var(--bs-btn-color);
+  background-color: var(--bs-btn-bg);
+  border-radius: var(--bs-btn-border-radius);
+  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
+}
+.ol-control button.btn:focus:not(:focus-visible, :hover) {
+  text-decoration: none;
+  color: var(--bs-btn-color);
+  background-color: var(--bs-btn-bg);
+  border-color: var(--bs-btn-border-color);
+  outline: none;
+}
+.ol-control button.btn:hover,
+.ol-control button.btn:focus-visible {
+  text-decoration: none;
+  color: var(--bs-btn-hover-color);
+  background-color: var(--bs-btn-hover-bg);
+  border-color: var(--bs-btn-hover-border-color);
+  outline: none;
+}
+.btn-light, .btn-dark {
+  --bs-btn-border-color: var(--bs-btn-hover-border-color);
+}
+
+#map-control-container[aria-hidden="true"],
+#layer-selection-panel[aria-hidden="true"] {
+  display: none;
 }
 #layer-selection-panel {
-  position: absolute;
-  top: calc(var(--menu-spacing) * var(--menu-factor-size));
-  right: calc((var(--menu-spacing) + var(--menu-button-size) + var(--menu-spacing-interline)) * var(--menu-factor-size));
-  padding: .75ex;
-  color: var(--ol-foreground-color);
+  position: relative;
+  display: block;
+  min-width: min-content;
+  max-width: 35%;
+  width: revert;
+  margin-right: 1rem;
+  font-size: medium;
+  z-index: 0;
+  --bs-modal-color: var(--bs-body-color);
+  --bs-modal-padding: .75rem;
+}
+@media screen and (max-width: 576px) {
+  #layer-selection-panel {
+    max-width: 100%;
+    margin-right: .5rem;
+    display: none;
+  }
+  #layer-selection-button,
+  #map-menu #layer-selection-panel,
+  #map-menu .ol-full-screen {
+    display: none;
+  }
+  #map-menu #info-button {
+    bottom: 0;
+    right: 0;
+    position: absolute;
+  }
 }
-@media screen and (max-width: 500px) {
-  #layer-selection-btn {
+@media screen and (max-height: 576px) {
+  #zoom-control .ol-zoomslider {
     display: none;
   }
 }
+@media screen and (max-width: 768px) {
+  #layer-selection-panel {
+    max-width: 60%;
+  }
+}