diff options
| author | Guilhem Moulin <guilhem@fripost.org> | 2024-01-20 21:15:18 +0100 |
|---|---|---|
| committer | Guilhem Moulin <guilhem@fripost.org> | 2024-01-22 01:18:51 +0100 |
| commit | 1b6b4952f53c90e7e071fa5a71cea48d74e8d2e4 (patch) | |
| tree | b506c7becadf76c20c35a4442f334df2d091ad51 /style.css | |
| parent | 46fc2671c139cdce834b29e700deba60e626820f (diff) | |
Show feature properties on popover via singleclick on map.
We use bootstrap's Popover for that:
https://getbootstrap.com/docs/5.3/components/popovers/#options
Diffstat (limited to 'style.css')
| -rw-r--r-- | style.css | 73 |
1 files changed, 73 insertions, 0 deletions
@@ -303,3 +303,76 @@ html, body { #layer-selection-panel .accordion-item .form-check > .form-check-label { display: inline; } + +.popover { + --bs-popover-header-padding-x: .5rem; + --bs-popover-header-padding-y: .5rem; + --bs-popover-body-padding-x: .25rem; + --bs-popover-body-padding-y: .25rem; + --bs-popover-header-bg: var(--bs-popover-bg); + --bs-popover-zindex: 1000; + --bs-popover-max-width: 450px; + width: var(--bs-popover-max-width); +} +.popover-body { + max-height: 1024px; + overflow: auto auto; +} +.popover-body h6, .popover-body h5 { + margin-bottom: var(--bs-popover-body-padding-y); + margin-left: calc(var(--bs-popover-header-padding-x) - var(--bs-popover-body-padding-x)); + margin-right: calc(var(--bs-popover-header-padding-x) - var(--bs-popover-body-padding-x)); +} +.popover-body .table { + --bs-table-bg: none; + --bs-table-hover-bg: rgba(0, 0, 0, 0.04); + margin: 0; +} +.popover-body table > tbody > tr > td:first-child { + font-style: italic; + white-space: nowrap; + padding-right: .75em; +} +.popover-body table > tbody > tr > td { + padding: 0.1rem var(--bs-popover-body-padding-x); +} + +/* inspired from bootstrap's .btn-close */ +.popover-header .popover-button { + box-sizing: content-box; + width: 1em; + height: 1em; + padding: 0.25em 0.25em; + color: #000; + background: transparent var(--popover-button-icon) center/1em auto no-repeat; + border: 0; + border-radius: 0.375rem; + opacity: .5; +} +.popover-header .popover-button:hover { + text-decoration: none; + opacity: .75; +} +.popover-header .popover-button:focus { + outline: 0; + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); + opacity: 1; +} +.popover-header .popover-button:disabled, .popover-header .popover-button.disabled { + pointer-events: none; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + opacity: .25; +} + +/* SVG from bootstrap icons v1.11.0 (released under MIT License) */ +.popover-header .popover-button-prev { + --popover-button-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath transform='scale(1.3799) translate(-2.2025 -2.2025)' d='M10 12.796V3.204L4.519 8zm-.659.753-5.48-4.796a1 1 0 0 1 0-1.506l5.48-4.796A1 1 0 0 1 11 3.204v9.592a1 1 0 0 1-1.659.753'/%3e%3c/svg%3e"); +} +.popover-header .popover-button-next { + --popover-button-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath transform='scale(1.3799) translate(-2.2025 -2.2025)' d='M6 12.796V3.204L11.481 8zm.659.753 5.48-4.796a1 1 0 0 0 0-1.506L6.66 2.451C6.011 1.885 5 2.345 5 3.204v9.592a1 1 0 0 0 1.659.753'/%3e%3c/svg%3e"); +} +.popover-header .popover-button-close { + --popover-button-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath transform='scale(1.3332) translate(-2 -2)' d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z'/%3e%3c/svg%3e"); +} |