aboutsummaryrefslogtreecommitdiffstats
path: root/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'style.css')
-rw-r--r--style.css367
1 files changed, 335 insertions, 32 deletions
diff --git a/style.css b/style.css
index 6a1b1eb..8bb4033 100644
--- a/style.css
+++ b/style.css
@@ -1,6 +1,7 @@
@import "~bootstrap/dist/css/bootstrap.css";
@import "~bootstrap-icons/font/bootstrap-icons.css";
@import "~ol/ol.css";
+@import "~fontsource/inter/latin-400.css";
html, body {
margin: 0;
@@ -154,9 +155,9 @@ body.inprogress {
.ol-control {
background: none;
border: none;
- outline: none;
+ outline: none; /* eslint-disable-line css/use-baseline */
}
-.ol-control button.btn {
+.ol-control button.btn, #help-body button.btn.help-button {
--bs-btn-padding-x: 0.5rem;
--bs-btn-padding-y: 0.5rem;
display: block;
@@ -178,7 +179,7 @@ body.inprogress {
color: var(--bs-btn-color);
background-color: var(--bs-btn-bg);
border-color: var(--bs-btn-border-color);
- outline: none;
+ outline: none; /* eslint-disable-line css/use-baseline */
}
.ol-control button.btn:hover,
.ol-control button.btn:focus-visible {
@@ -186,7 +187,7 @@ body.inprogress {
color: var(--bs-btn-hover-color);
background-color: var(--bs-btn-hover-bg);
border-color: var(--bs-btn-hover-border-color);
- outline: none;
+ outline: none; /* eslint-disable-line css/use-baseline */
}
.btn-light, .btn-dark {
--bs-btn-border-color: var(--bs-btn-hover-border-color);
@@ -194,24 +195,36 @@ body.inprogress {
#map-control-container[aria-hidden="true"],
#layer-selection-panel[aria-hidden="true"],
-#map-legend-panel[aria-hidden="true"] {
+#map-legend-panel[aria-hidden="true"],
+#measure-panel[aria-hidden="true"] {
display: none;
}
#layer-selection-panel,
-#map-legend-panel {
+#map-legend-panel,
+#measure-panel {
position: relative;
- /*min-width: min-content;*/
- /*max-width: 35%;*/
- /*width: revert;*/
- max-width: 360px;
margin-left: 0;
margin-right: var(--map-menu-spacing);
font-size: medium;
z-index: 11;
+ height: max-content;
+ max-height: 100%;
pointer-events: auto;
--bs-modal-color: var(--bs-body-color);
--bs-modal-padding: .75rem;
}
+#layer-selection-panel {
+ /*min-width: min-content;*/
+ /*max-width: 35%;*/
+ /*width: revert;*/
+ max-width: 360px;
+}
+#map-legend-panel {
+ max-width: 410px;
+}
+#measure-panel {
+ max-width: 15em;
+}
@keyframes fade-in {
from {
opacity: 0;
@@ -220,8 +233,14 @@ body.inprogress {
opacity: 1;
}
}
+#map-legend-panel .modal-body {
+ -webkit-user-select: text;
+ -moz-user-select: text;
+ user-select: text; /* eslint-disable-line css/use-baseline */
+}
#layer-selection-panel[aria-hidden="false"],
-#map-legend-panel[aria-hidden="false"] {
+#map-legend-panel[aria-hidden="false"],
+#measure-panel[aria-hidden="false"] {
animation: fade-in .25s ease-in-out both;
display: block;
}
@@ -243,17 +262,25 @@ body.inprogress {
display: none;
}
#layer-selection-panel,
- #map-legend-panel {
+ #map-legend-panel,
+ #measure-panel {
margin: var(--map-menu-spacing) 0 0 auto;
}
}
+#map-legend-button.disabled button {
+ color: rgb(from var(--bs-btn-color) r g b / calc(alpha*.25));
+ pointer-events: none;
+}
@media screen and (max-width: 200px) {
#layer-selection-button,
#map-legend-button,
+ #measure-button,
+ #age-filter-button,
#export-to-image,
#layer-selection-panel,
#map-legend-panel,
+ #measure-panel,
#map-menu .ol-full-screen {
display: none;
}
@@ -272,23 +299,150 @@ body.inprogress {
--bs-btn-padding-y: 0.4rem;
}
}
-#modal-info {
- pointer-events: auto;
+#info-modal, #help-modal {
+ /* close the modal when clicking the backdrop */
+ pointer-events: none;
-webkit-user-select: text;
-moz-user-select: text;
- user-select: text;
+ user-select: text; /* eslint-disable-line css/use-baseline */
+ --bs-modal-header-padding: 1rem;
+ --modal-info-padding-x: var(--bs-modal-header-padding);
+ --modal-info-padding-y: .5rem;
+ --modal-info-bg-light: rgba(0, 0, 0, .08);
+}
+#help-modal {
+ --modal-info-padding-x: 1rem;
+ --modal-info-padding-y: 1rem;
}
-#modal-info .modal-body ul > li {
- padding: 0.05rem 0;
+#info-modal .modal-header,
+#help-modal .modal-header {
+ padding: var(--modal-info-padding-y) var(--modal-info-padding-x);
}
-#modal-info .modal-body a {
+#info-modal .list-group-item,
+#info-modal {
+ --bs-list-group-border-width: 1px;
+}
+#info-accordion {
+ --bs-accordion-active-bg: var(--bs-accordion-bg);
+ --bs-accordion-active-color: var(--bs-body-color);
+ --bs-accordion-btn-padding-x: 0;
+ --bs-accordion-btn-padding-y: .025rem;
+ --bs-accordion-btn-focus-box-shadow: none;
+ --bs-accordion-body-padding-x: 0;
+ --bs-accordion-body-padding-y: 0;
+ --bs-accordion-btn-active-bg: var(--modal-info-bg-light);
+ padding: 0 var(--modal-info-padding-x);
+}
+#info-modal .accordion-item {
+ border: none;
+}
+#info-modal .accordion-header > .accordion-button[aria-expanded="false"]:hover {
+ background-color: rgb(from var(--modal-info-bg-light) r g b / calc(alpha*.4));
+}
+#info-modal .accordion-header > .accordion-button[aria-expanded="true"] {
+ background-color: var(--bs-accordion-btn-active-bg);
+}
+#info-modal ul.list-group > li.list-group-item {
+ padding: .3rem 0;
+ border: none;
+}
+#info-modal ul.list-group > li.list-group-item:last-child {
+ padding-bottom: var(--modal-info-padding-y);
+}
+#info-body > ul.list-group {
+ margin-top: var(--modal-info-padding-y);
+ border-top: var(--bs-list-group-border-width) solid var(--modal-info-bg-light);
+ padding: 0 var(--modal-info-padding-x);
+}
+#info-modal ul.list-group > li.list-group-item:not(:first-child) {
+ border-top: var(--bs-list-group-border-width) solid var(--modal-info-bg-light);
+}
+#info-accordion > .accordion-item:not(:last-child) ul.list-group > li.list-group-item:last-child {
+ border-bottom: var(--bs-list-group-border-width) solid var(--modal-info-bg-light);
+}
+#info-modal .modal-body ul.list-group > li.list-group-item:not(.text-muted):hover {
+ background-color: rgb(from var(--modal-info-bg-light) r g b / calc(alpha*.4));
+}
+#info-body {
+ padding: var(--modal-info-padding-y) 0;
+}
+#info-body > ul.list-group > li.list-group-item p,
+#info-modal .accordion-body ul.list-group > li.list-group-item p {
+ margin: 0;
+}
+#info-body > ul.list-group > li.list-group-item h6,
+#info-modal .accordion-body ul.list-group > li.list-group-item h6 {
+ margin: .05rem 0 .15rem 0;
+ font-size: 1.15rem;
+}
+#info-modal .modal-body a {
color: inherit;
text-decoration: none;
}
-#modal-info .modal-body a:hover {
+#info-modal .modal-body a:hover {
opacity: .8;
text-decoration: underline;
}
+#info-modal .modal-body .info-credits {
+ border-top: var(--bs-list-group-border-width) solid var(--modal-info-bg-light);
+ padding: var(--modal-info-padding-y) var(--modal-info-padding-x) 0 var(--modal-info-padding-x);
+ margin: 0;
+}
+#help-body {
+ padding: var(--modal-info-padding-y) var(--modal-info-padding-x);
+ hyphens: auto; /* eslint-disable-line css/use-baseline */
+}
+#help-body .popover-header {
+ -webkit-user-select: inherit;
+ -moz-user-select: inherit;
+ user-select: inherit; /* eslint-disable-line css/use-baseline */
+ border: none;
+ margin: 0;
+ padding: 0;
+}
+#help-body .popover-header .popover-button {
+ height: var(--bs-body-font-size);
+ width: var(--bs-body-font-size);
+ padding: 0;
+ border: none;
+ vertical-align: middle;
+}
+#help-body button.btn.help-button {
+ --bs-btn-padding-x: .1rem;
+ --bs-btn-padding-y: .1rem;
+ width: 1.75rem;
+ height: 1.75rem;
+ display: inline-block;
+ font-size: var(--bs-body-font-size);
+ font-weight: var(--bs-body-font-weight);
+ line-height: var(--bs-body-line-height);
+ margin: 0;
+}
+#help-body .help-button {
+ pointer-events: none;
+}
+#help-body .accordion .accordion-button {
+ display: inline;
+ padding: 0;
+ opacity: .75;
+}
+#help-body .accordion .accordion-button::after {
+ display: inline-block;
+ margin: 0;
+ height: 1rem;
+ vertical-align: middle;
+}
+#help-body .help-button-description > button.btn.help-button {
+ margin-right: .5rem;
+}
+#help-body p:last-child {
+ margin-bottom: 0;
+}
+@media (min-width: 992px) {
+ #help-body {
+ text-align: justify;
+ }
+}
.ol-overlaycontainer-stopevent .modal-backdrop.show {
pointer-events: auto;
@@ -337,18 +491,146 @@ body.inprogress {
#layer-selection-panel .accordion-item .form-check > .form-check-label {
display: inline;
}
+#map-legend-panel .list-group-flush > .list-group-item {
+ border: none;
+ padding: 0;
+}
+#map-legend-panel .modal-body > ul.list-group > li.list-group-item:not(.d-none) ~ li.list-group-item:not(.d-none) {
+ border-top: var(--bs-list-group-border-width) solid var(--bs-list-group-border-color);
+ margin-top: .5rem;
+ padding-top: .5rem;
+}
+#map-legend-panel .list-group .list-group-item.h4,
+#map-legend-panel .list-group .list-group-item.h5,
+#map-legend-panel .list-group .list-group-item.h6 {
+ margin: 0 0 .25rem 0;
+}
+#map-legend-panel .list-group .list-group-item:not(.d-none) ~ .list-group-item.h5:not(.d-none) {
+ margin-top: .125rem;
+}
+#map-legend-panel .list-group .list-group-item.h4 {
+ font-size: 1.3rem;
+}
+#map-legend-panel .list-group .list-group-item.h5 {
+ font-size: 1.05rem;
+}
+#map-legend-panel .list-group .list-group-item.h6 {
+ font-size: 1rem;
+}
+#map-legend-panel .list-group .list-group-item .map-legend-symbol {
+ /* 24px */
+ height: calc(var(--bs-body-line-height) * var(--bs-body-font-size)) !important;
+}
+#map-legend-panel .list-group .list-group-item .map-legend-symbol > * {
+ width: 32px;
+ margin-right: .5rem;
+}
+#map-legend-panel .list-group .list-group-item .map-legend-symbol img {
+ margin-left: auto;
+ margin-right: auto;
+ display: block;
+}
+#map-legend-panel .list-group .list-group-item:not(.h4,.h5,.h6):hover {
+ background-color: var(--bs-list-group-action-hover-bg);
+}
+
+#age-filter-modal .modal-body .btn-group {
+ width: 100%;
+}
+#age-filter-modal .age-filter-infotext {
+ margin: 0 0 var(--bs-modal-padding) 0;
+}
+#age-filter-form .age-filter-settings .age-filter-settings-desc {
+ margin: var(--bs-modal-padding) 0;
+}
+#age-filter-form .age-filter-settings {
+ margin: 0 0 var(--bs-modal-padding) 0;
+}
+#age-filter-form .age-filter-settings p.text-muted {
+ margin: 0;
+}
+#age-filter-modal p {
+ -webkit-user-select: text;
+ -moz-user-select: text;
+ user-select: text; /* eslint-disable-line css/use-baseline */
+}
+#measure-panel .modal-header {
+ border-bottom: none;
+ padding: var(--bs-modal-padding);
+}
+#measure-panel .modal-header .h5 {
+ font-size: 1.25rem;
+ margin: 0;
+}
+#measure-panel .modal-body {
+ padding-top: 0;
+}
+#measure-panel .modal-body .btn-group > .btn.btn-lg {
+ --bs-btn-padding-y: .375rem; /* revert to non-large size */
+}
+#age-filter-modal .btn-group > .btn-check:not(:checked) + label.btn:hover,
+#measure-panel .btn-group > .btn-check:not(:checked) + label.btn:hover {
+ background: color-mix(in srgb, var(--bs-btn-bg) 35%, var(--bs-btn-hover-bg)); /* eslint-disable-line css/use-baseline */
+ color: var(--bs-btn-hover-color);
+}
+#measure-panel .measure-value {
+ font-family: Inter;
+ font-variant-numeric: tabular-nums;
+ --measure-value-padding: .75rem;
+ --measure-value-border-width: 3px;
+ --measure-value-font-size: calc(var(--bs-body-font-size) * 1.5);
+ --bs-border-opacity: .75;
+ border-width: var(--measure-value-border-width);
+ border-style: solid;
+ border-color: rgb(from var(--bs-secondary) r g b / .75);
+ border-radius: var(--bs-border-radius-lg);
+ background: rgb(from var(--bs-secondary-bg-subtle) r g b / calc(alpha*.30));
+ height: calc(var(--bs-body-line-height) * var(--bs-body-font-size) * var(--measure-value-font-size)
+ + 2*var(--measure-value-padding) + 2*var(--measure-value-border-width));
+ padding: var(--measure-value-padding) var(--measure-value-padding);
+ margin: calc(var(--measure-value-padding)*1.5) 0;
+ display: flex;
+ justify-content: flex-end; /* overflow on the left */
+ overflow: hidden;
+ -webkit-user-select: text;
+ -moz-user-select: text;
+ user-select: text; /* eslint-disable-line css/use-baseline */
+}
+#measure-panel .measure-value :not(.measure-unit) {
+ font-size: var(--measure-value-font-size);
+ font-weight: 400;
+}
+#measure-panel .measure-value .measure-unit:before {
+ font-size: calc(.5*(var(--measure-value-font-size) + var(--bs-body-font-size)));
+ content: '\00A0'; /* U+00A0 NO-BREAK SPACE */
+}
+#measure-panel .measure-value .measure-unit {
+ font-size: var(--bs-body-font-size);
+ line-height: calc(var(--bs-body-line-height) * var(--measure-value-font-size));
+}
+#measure-panel .btn-group {
+ width: 100%;
+}
.popover {
--bs-popover-header-padding-x: .75rem;
--bs-popover-header-padding-y: .5rem;
- --bs-popover-body-padding-x: .45rem;
+ --bs-popover-body-offset-x: .3rem;
+ --bs-popover-body-padding-x: calc(var(--bs-popover-header-padding-x) - var(--bs-popover-body-offset-x));
--bs-popover-body-padding-y: .5rem;
--bs-popover-header-bg: var(--bs-popover-bg);
--bs-popover-zindex: 1000;
- --bs-popover-max-width: 450px;
+ --bs-popover-max-width: min(450px, 90vw);
width: var(--bs-popover-max-width);
pointer-events: auto;
}
+.popover.popover-maximized {
+ --bs-popover-header-padding-x: 1rem;
+ --bs-popover-header-padding-y: 1rem;
+ --bs-popover-body-padding-y: 1rem;
+ --bs-popover-body-offset-x: .5rem;
+ --bs-popover-font-size: 1rem;
+}
.popover.inprogress > .popover-header,
.popover.inprogress > .popover-body {
filter: opacity(70%);
@@ -357,42 +639,63 @@ body.inprogress {
.popover-header {
-webkit-user-select: none;
-moz-user-select: none;
- user-select: none;
+ user-select: none; /* eslint-disable-line css/use-baseline */
--bs-heading-color: var(--bs-popover-header-color);
}
+.popover-header h5, .popover-header h6 {
+ line-height: var(--bs-body-line-height);
+ vertical-align: middle;
+ margin: 0;
+}
.popover-body {
-webkit-user-select: text;
-moz-user-select: text;
- user-select: text;
+ user-select: text; /* eslint-disable-line css/use-baseline */
max-height: 40vh;
overflow: auto auto;
}
+.popover.popover-maximized .popover-body {
+ max-height: calc(100% - 2*var(--bs-popover-header-padding-y) - var(--bs-body-line-height)*var(--bs-popover-font-size) - var(--bs-popover-border-width));
+}
.popover-body h6, .popover-body h5 {
- margin-bottom: .25rem;
+ 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.popover-maximized .popover-body h5,
+.popover.popover-maximized .popover-body h6 {
+ font-size: calc(1.2 * var(--bs-popover-font-size));
+}
.popover-body .table {
--bs-table-bg: none;
- --bs-table-hover-bg: rgba(0, 0, 0, 0.04);
+ --bs-table-hover-bg: rgba(0, 0, 0, .04);
+ --bs-table-bg-padding-y: .1rem;
margin: 0;
}
-.popover-body table > tbody > tr > td:first-child {
+.popover.popover-maximized .popover-body .table {
+ --bs-table-hover-bg: none;
+ --bs-table-bg-padding-y: .5rem;
+}
+.popover.popover-maximized .popover-body .table tr:nth-of-type(2n+1) {
+ background: rgba(0, 0, 0, .05);
+}
+.popover-body table > tbody > tr > th[scope="row"] {
font-style: italic;
- width: 9.75em;
padding-right: .75em;
+ font-weight: normal;
}
+.popover .popover-body table > tbody > tr > th[scope="row"] {
+ width: 35%;
+}
+.popover-body table > tbody > tr > th[scope="row"],
.popover-body table > tbody > tr > td {
- padding: 0.1rem 0.3rem;
+ padding: var(--bs-table-bg-padding-y) var(--bs-popover-body-offset-x);
}
.feature-attr-mrr-license-id, .feature-attr-dnr, .feature-objid, .feature-orgnr {
font-family: var(--bs-font-monospace);
word-wrap: break-word;
}
-.popover-header h6 {
- margin: 0;
-}
/* inspired from bootstrap's .btn-close */
.popover-header .popover-button {
box-sizing: content-box;
@@ -410,7 +713,7 @@ body.inprogress {
opacity: .75;
}
.popover-header .popover-button:focus {
- outline: 0;
+ outline: 0; /* eslint-disable-line css/use-baseline */
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
opacity: 1;
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-14 09:51:16 +0000