Improve CSS.

1 files changed, 92 insertions, 7 deletions

diff --git a/style.css b/style.css
index d66db40..a173a7e 100644
--- a/style.css
+++ b/style.css
@@ -5,6 +5,12 @@
 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;
 }
 #map {
   position: absolute;
@@ -12,19 +18,98 @@ html, body {
   bottom: 0;
   width: 100%;
 }
+.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;
+}
+@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));
+  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);
+  background-clip: padding-box;
+  border-radius: var(--ol-control-border-radius);
+  width: var(--ol-control-button-size);
+  height: var(--ol-control-button-size);
+}
+.ol-control button:hover,
+.ol-control button:focus {
+  outline: none;
+}
+.ol-control button:hover,
+.ol-control button:focus-visible {
+  --ol-control-border-color: var(--ol-subtle-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);
+}
+.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);
+}
+.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);
+}
+.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));
+}
+.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);
+}
+.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;
 }
-.map-dialog-hidden {
+.map-panel {
+  border-radius: 4px;
+}
+.map-panel.map-panel-hidden {
   display: none;
 }
-.map-dialog {
-  top: .5em;
-  right: calc(.5em + 1.375em + 2px + .2em);
-  background: var(--ol-partial-background-color);
-  border: 1px solid var(--ol-subtle-background-color);
-  padding: 1ex;
+.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;
+}
+#layer-selection-btn.map-panel-expanded button {
+  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 {
+  background-color: var(--ol-foreground-color);
 }
 @media screen and (max-width: 500px) {
   #layer-selection-btn {