Improve CSS.

3 files changed, 110 insertions, 10 deletions

diff --git a/index.html b/index.html
index d6be025..2e03554 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,7 @@
         <i class="bi bi-stack"></i>
       </button>
     </div>
-    <div id="layer-selection-dialog" class="ol-control map-dialog map-dialog-hidden">
+    <div id="layer-selection-panel" class="map-panel map-panel-hidden">
       <div class="form-check form-switch">
         <input class="form-check-input" type="checkbox" role="switch" id="layer-topowebb_nedtonad">
         <label class="form-check-label" for="layer-topowebb_nedtonad">Nedtonad bakgrund karta</label>
diff --git a/main.js b/main.js
index dd365e3..b70ff56 100644
--- a/main.js
+++ b/main.js
@@ -95,12 +95,27 @@ const map = new Map({
   controls: [
     new Zoom({
       zoomInTipLabel: 'Zooma in',
+      zoomInLabel: (function() {
+        const label = document.createElement('i');
+        label.classList.add('bi', 'bi-plus');
+        return label;
+      })(),
       zoomOutTipLabel: 'Zooma ut',
+      zoomOutLabel: (function() {
+        const label = document.createElement('i');
+        label.classList.add('bi', 'bi-dash');
+        return label;
+      })(),
     }),
     new Attribution({
       collapsible: true,
       collapsed: true,
       tipLabel: 'Information',
+      label: (function() {
+        const label = document.createElement('i');
+        label.classList.add('bi', 'bi-info');
+        return label;
+      })(),
     }),
   ],
   view: new View({
@@ -128,8 +143,8 @@ const map = new Map({
     element: element,
   }));
   element.onclick = function(event) {
-    document.getElementById('layer-selection-dialog').classList.toggle('map-dialog-hidden');
-    element.classList.toggle('map-dialog-expanded');
+    document.getElementById('layer-selection-panel').classList.toggle('map-panel-hidden');
+    element.classList.toggle('map-panel-expanded');
   };
 })();
 
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 {