From 3194e8b8b30e0b5e17a5b5843aa04802927fd350 Mon Sep 17 00:00:00 2001 From: Guilhem Moulin Date: Thu, 11 Jan 2024 21:11:01 +0100 Subject: Improve CSS. --- index.html | 2 +- main.js | 19 ++++++++++-- style.css | 99 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++----- 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 @@ -
+
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 { -- cgit v1.2.3