diff options
Diffstat (limited to 'style.css')
-rw-r--r-- | style.css | 99 |
1 files changed, 92 insertions, 7 deletions
@@ -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 { |