More CSS improvements and minor refactoring.

1 files changed, 79 insertions, 55 deletions

diff --git a/style.css b/style.css
index a173a7e..7840390 100644
--- a/style.css
+++ b/style.css
@@ -5,12 +5,23 @@
 html, body {
   margin: 0;
   height: 100%;
-  --ol-partial-background-color: rgba(255, 255, 255, .95);
-  --ol-control-factor-size: 1;
-  --ol-control-border-width: 10px;
-  --ol-control-border-radius: 40px;
-  --ol-control-border-color: var(--ol-subtle-background-color);
-  --ol-control-button-size: 3em;
+  --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;
+}
+@media screen and (max-width: 500px) {
+  html, body {
+    --menu-factor-size: 1;
+    --menu-border-width: 1px;
+    --menu-border-radius: 2px;
+  }
 }
 #map {
   position: absolute;
@@ -26,90 +37,103 @@ html, body {
   text-decoration: none;
   outline: none;
 }
-@media screen and (min-width: 501px) {
-  .ol-control {
-    --ol-control-factor-size: 1.75;
-  }
-}
-.ol-control {
-  font-size: calc(100% * var(--ol-control-factor-size));
+.ol-control, #map-menu {
+  font-size: calc(100% * var(--menu-factor-size));
   background-color: transparent;
-  /* border-radius: var(--ol-control-border-radius); */
 }
-.ol-control button {
-  border: var(--ol-control-border-width) solid var(--ol-control-border-color);
-  background-color: var(--ol-partial-background-color);
+.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(--ol-control-border-radius);
-  width: var(--ol-control-button-size);
-  height: var(--ol-control-button-size);
+  border-radius: var(--menu-border-radius);
+  color: var(--ol-subtle-foreground-color);
+}
+.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;
+  display: block;
+  line-height: .4em;
+  padding: 0;
 }
 .ol-control button:hover,
-.ol-control button:focus {
+.ol-control button:focus,
+#map-menu button:hover,
+#map-menu button:focus {
   outline: none;
 }
 .ol-control button:hover,
-.ol-control button:focus-visible {
-  --ol-control-border-color: var(--ol-subtle-foreground-color);
+.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 {
   margin: 0;
-  height: calc(var(--ol-control-button-size) - var(--ol-control-border-width) * .5);
+  --menu-button-size: 1.375em;
+  height: calc(var(--menu-button-size) - var(--menu-border-width) * .5) !important;
 }
 .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 {
-  height: var(--ol-control-button-size);
+  position: relative;
+  z-index: 1;
+  height: var(--menu-button-size) !important;
 }
 .ol-zoom > .ol-zoom-in {
-  border-radius: var(--ol-control-border-radius) var(--ol-control-border-radius) 0 0;
-  border-bottom-width: calc(var(--ol-control-border-width) * .5);
+  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(--ol-control-border-width);
-  margin-bottom: calc(-.5 * var(--ol-control-border-width));
+  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(--ol-control-border-radius) var(--ol-control-border-radius);
-  border-top-width: calc(var(--ol-control-border-width) * .5);
+  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(--ol-control-border-width);
-  margin-top: calc(-.5 * var(--ol-control-border-width));
-}
-#layer-selection-btn {
-  right: .5em;
-  top: .5em;
+  border-top-width: var(--menu-border-width);
+  margin-top: calc(-.5 * var(--menu-border-width));
 }
-.map-panel {
-  border-radius: 4px;
+#map-menu {
+  position: absolute;
+  right: var(--menu-spacing);
+  top: var(--menu-spacing);
+  margin: 0;
 }
-.map-panel.map-panel-hidden {
-  display: none;
+#map-menu button {
+  margin-top: var(--menu-spacing-interline);
 }
-.map-panel {
-  position: absolute;
-  top: calc(.5em * var(--ol-control-factor-size));
-  right: calc((.5em + 1.375em) * var(--ol-control-factor-size) + 1px
-    + .2em * var(--ol-control-factor-size));
-  background-color: var(--ol-subtle-background-color);
-}
-.map-panel > div {
-  background-color: var(--ol-partial-background-color);
-  margin: 10px;
-  padding: .75ex;
+#map-menu button:first-child {
+  margin-top: 0;
 }
-#layer-selection-btn.map-panel-expanded button {
+
+#map-menu button[aria-expanded="true"] {
   background-color: var(--ol-subtle-foreground-color);
   color: var(--ol-background-color);
 }
-#layer-selection-btn.map-panel-expanded button:hover,
-#layer-selection-btn.map-panel-expanded button:focus-visible {
+#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);
+}
+#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);
 }
 @media screen and (max-width: 500px) {
   #layer-selection-btn {