diff options
-rw-r--r-- | main.js | 4 | ||||
-rw-r--r-- | style.css | 14 |
2 files changed, 14 insertions, 4 deletions
@@ -3792,7 +3792,9 @@ const infoMetadataAccordions = []; value.nodeValue = formatters[1].format(v/10_000); } else { unit.nodeValue = 'km²'; - value.nodeValue = formatters[1].format(v/1_000_000); + v /= 1_000_000; + const i = v < 1_000_000 ? 1 : 0; /* ≥10⁶ km² overflows the box with 2 decimals */ + value.nodeValue = formatters[i].format(v); } }; })(); @@ -506,28 +506,36 @@ body.inprogress { #measure-panel .measure-value { font-family: Inter; font-variant-numeric: tabular-nums; - text-align: right; --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; background: rgb(from var(--bs-secondary-bg-subtle) r g b / calc(alpha*.30)); - height: calc(var(--bs-body-line-height) * 1.25rem + 2*var(--measure-value-padding) + 2*var(--measure-value-border-width)); + 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: 125%; + 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%; } |