diff options
Diffstat (limited to 'style.css')
| -rw-r--r-- | style.css | 134 |
1 files changed, 79 insertions, 55 deletions
@@ -5,12 +5,23 @@ 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; + --ol-partial-background-color: rgba(255, 255, 255, .9); + --ol-background-color: var(--bs-body-bg); + --ol-foreground-color: var(--bs-body-color); + --menu-factor-size: 1.75; + --menu-border-width: 2px; + --menu-border-radius: 4px; + --menu-border-color: var(--ol-subtle-background-color); + --menu-button-size: 1.75em; + --menu-spacing: .5em; + --menu-spacing-interline: .25em; +} +@media screen and (max-width: 500px) { + html, body { + --menu-factor-size: 1; + --menu-border-width: 1px; + --menu-border-radius: 2px; + } } #map { position: absolute; @@ -26,90 +37,103 @@ html, body { 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)); +.ol-control, #map-menu { + font-size: calc(100% * var(--menu-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); +.ol-control button, +#map-menu button, +#layer-selection-panel { + border: var(--menu-border-width) solid var(--menu-border-color); + background-color: var(--ol-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); + border-radius: var(--menu-border-radius); + color: var(--ol-subtle-foreground-color); +} +.ol-control button, #map-menu button { + width: var(--menu-button-size); + height: var(--menu-button-size); + font-size: inherit; + text-align: center; + font-weight: bold; + text-decoration: none; + display: block; + line-height: .4em; + padding: 0; } .ol-control button:hover, -.ol-control button:focus { +.ol-control button:focus, +#map-menu button:hover, +#map-menu button:focus { outline: none; } .ol-control button:hover, -.ol-control button:focus-visible { - --ol-control-border-color: var(--ol-subtle-foreground-color); +.ol-control button:focus-visible, +#map-menu button:hover, +#map-menu button:focus-visible { + --menu-border-color: var(--ol-subtle-foreground-color); + color: var(--ol-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); + --menu-button-size: 1.375em; + height: calc(var(--menu-button-size) - var(--menu-border-width) * .5) !important; } .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); + position: relative; + z-index: 1; + height: var(--menu-button-size) !important; } .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); + border-radius: var(--menu-border-radius) var(--menu-border-radius) 0 0; + border-bottom-width: calc(var(--menu-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)); + border-bottom-width: var(--menu-border-width); + margin-bottom: calc(-.5 * var(--menu-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); + border-radius: 0 0 var(--menu-border-radius) var(--menu-border-radius); + border-top-width: calc(var(--menu-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; + border-top-width: var(--menu-border-width); + margin-top: calc(-.5 * var(--menu-border-width)); } -.map-panel { - border-radius: 4px; +#map-menu { + position: absolute; + right: var(--menu-spacing); + top: var(--menu-spacing); + margin: 0; } -.map-panel.map-panel-hidden { - display: none; +#map-menu button { + margin-top: var(--menu-spacing-interline); } -.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; +#map-menu button:first-child { + margin-top: 0; } -#layer-selection-btn.map-panel-expanded button { + +#map-menu button[aria-expanded="true"] { 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 { +#map-menu button[aria-expanded="true"]:hover, +#map-menu button[aria-expanded="true"]:focus-visible { background-color: var(--ol-foreground-color); + border-color: var(--ol-foreground-color); +} +#layer-selection-panel { + position: absolute; + top: calc(var(--menu-spacing) * var(--menu-factor-size)); + right: calc((var(--menu-spacing) + var(--menu-button-size) + var(--menu-spacing-interline)) * var(--menu-factor-size)); + padding: .75ex; + color: var(--ol-foreground-color); } @media screen and (max-width: 500px) { #layer-selection-btn { |