Add more controls: a zoom slider and a scale line.

1 files changed, 72 insertions, 2 deletions

diff --git a/style.css b/style.css
index 7840390..df2c454 100644
--- a/style.css
+++ b/style.css
@@ -37,8 +37,10 @@ html, body {
   text-decoration: none;
   outline: none;
 }
-.ol-control, #map-menu {
+#map-menu, .ol-zoom, .ol-zoomslider {
   font-size: calc(100% * var(--menu-factor-size));
+}
+#map-menu, .ol-control {
   background-color: transparent;
 }
 .ol-control button,
@@ -75,9 +77,13 @@ html, body {
   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;
-  --menu-button-size: 1.375em;
   height: calc(var(--menu-button-size) - var(--menu-border-width) * .5) !important;
 }
 .ol-zoom > button.ol-zoom-in:hover,
@@ -106,6 +112,70 @@ html, body {
   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;
+}
+.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));
+}
+.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);
+  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);
+  margin: 0 auto;
+  border: var(--menu-border-width2) solid var(--menu-border-color);
+}
+.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);
+  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%;
+  margin: 0;
+}
 #map-menu {
   position: absolute;
   right: var(--menu-spacing);