mapshaper 0.7.67 → 0.7.69

package/www/page.css

@@ -944,46 +944,160 @@ body.sidebar-panels-resizing .sidebar-panels-resize-handle::before,
 	}
 }
 
+:root {
+	--sidebar-strip-height: 33px;
+}
+
+/* Icon buttons for opening the sidebar, shown on the map while the sidebar is
+   closed. Sized and styled to mirror the .nav-buttons on the right, and like
+   them hidden on the splash screen: body.map-view is set once data is
+   imported or the splash popup is dismissed. */
 .sidebar-tabs {
 	position: absolute;
-	top: 66px; /* below line intersection repair link */
+	top: 35px; /* 29px header + the 6px offset of .nav-buttons */
 	left: 0;
 	z-index: 40;
+	padding: 3px;
+	background-color: white;
+	border-radius: 7px;
 	pointer-events: auto;
 }
 
+body:not(.map-view) .sidebar-tabs {
+	display: none;
+}
+
 body.sidebar-open .sidebar-tabs {
-	left: var(--left-sidebar-width);
-	margin-left: -1.5px;
+	display: none;
 }
 
 body.sidebar-tabs-over-popup .sidebar-tabs {
 	z-index: 90;
 }
 
+/* keep the line intersection readout clear of the buttons */
+body:not(.sidebar-open) .intersection-display {
+	left: 44px;
+}
+
 .sidebar-tab {
-	border: 1px solid rgba(255,255,255,0.8);
-	border-right: none;																										;
-	writing-mode: vertical-rl;
-	transform: rotate(180deg);
-	background-color: var(--theme-col);
-	color: white;
-	padding: 9px 4px;
-	margin-bottom: 4px;
-	border-radius: 5px 0 0 5px;
+	position: relative;
+	padding: 3px 4px;
+	line-height: 1;
+	cursor: pointer;
+}
+
+.sidebar-icon {
+	display: block;
+}
+
+.sidebar-icon * {
+	fill: var(--theme-col);
+}
+
+.sidebar-tab.layer-tab {
+	padding-bottom: 6px;
+}
+
+.sidebar-tab.console-tab {
+	padding-top: 7px;
+}
+
+.sidebar-tab:hover .sidebar-icon * {
+	fill: #166689;
+}
+
+/* Tooltip to the right of the button, matching the .nav-btn tooltips */
+.sidebar-tab[data-tooltip]:hover::after {
+	content: attr(data-tooltip);
+	position: absolute;
+	top: 50%;
+	left: calc(100% + 3px);
+	transform: translateY(-50%);
+	pointer-events: none;
+	background-color: rgba(255, 255, 255, 0.85);
+	color: var(--colored-text);
+	font-size: 12px;
+	line-height: 12px;
+	padding: 3px 6px 4px 6px;
+	white-space: nowrap;
+}
+
+/* centre on the icon, which the console button's extra top padding lowers */
+.sidebar-tab.console-tab[data-tooltip]:hover::after {
+	top: calc(50% + 2px);
+}
+
+/* Panel toggles at the top of the open sidebar. Each toggles its own panel,
+   so both can be on at once. */
+.sidebar-strip {
+	display: none;
+	position: absolute;
+	top: 29px;
+	left: 0;
+	z-index: 30;
+	width: var(--left-sidebar-width);
+	max-width: 100%;
+	height: var(--sidebar-strip-height);
+	box-sizing: border-box;
+	align-items: flex-start;
+	gap: 6px;
+	padding: 7px 10px 0 10px;
+	background-color: white;
+	border-right: 1px solid #c6c6c6;
+}
+
+body.sidebar-open .sidebar-strip {
+	display: flex;
+}
+
+body.sidebar-open .sidebar-panels {
+	margin-top: calc(29px + var(--sidebar-strip-height));
+}
+
+.sidebar-strip-btn {
+	display: flex;
+	align-items: center;
+	gap: 5px;
+	padding: 2px 8px 2px 6px;
+	border: 1px solid #cfdde4;
+	border-radius: 12px;
+	color: var(--theme-col);
 	font-size: 13px;
 	font-weight: 500;
+	line-height: 14px;
 	cursor: pointer;
-	pointer-events: auto;
+	user-select: none;
 }
 
-.sidebar-tab:hover {
+.sidebar-strip-btn:hover {
+	border-color: var(--theme-col);
+}
+
+.sidebar-strip-btn.active {
+	background-color: var(--theme-col);
+	border-color: var(--theme-col);
+	color: white;
+}
+
+.sidebar-strip-btn.active:hover {
 	background-color: var(--dk-theme-col);
+	border-color: var(--dk-theme-col);
 }
 
-body.layers-open .layer-tab,
-body.console-open .console-tab {
-	background-color: black;
+.sidebar-strip-btn.active .sidebar-icon * {
+	fill: white;
+}
+
+/* matches the × of .label-style-close on the tool panels */
+.sidebar-hide-btn {
+	margin-left: auto;
+	padding: 3px 0 0 4px;
+	font-size: 16px;
+	line-height: 1;
+	cursor: pointer;
+	user-select: none;
+	color: black;
 }
 
 
@@ -1198,7 +1312,7 @@ body.simplify .layer-control-btn {
 	max-height: 500px;
 	overflow: hidden;
 	overflow-y: auto;
-	padding: 9px 14px 10px 14px;
+	padding: 2px 14px 10px 14px;
 	pointer-events: auto;
 	border-radius: 9px;
 }
@@ -1242,10 +1356,42 @@ body.simplify .layer-control-btn {
 	font-size: 13px;
 }
 
+/* "Add files" and "Draw: labels · points · ..." are two groups, and a narrow
+   sidebar wraps between them, so the second line starts with "Draw:". The dot
+   between them is each group's ::before, hung to the group's left: a group that
+   starts a line has its dot pushed past the left edge of the row and clipped,
+   so no line ends or begins with a stray dot. */
 .layer-add-links {
 	margin: 2px 0 2px 0;
 	font-size: 13px;
 	line-height: 1.2;
+	overflow: hidden;
+}
+
+.layer-add-links-inner {
+	display: flex;
+	flex-wrap: wrap;
+	margin-left: -1.6em;
+}
+
+/* The padding holds the dot, so that a group long enough to wrap starts its
+   later lines at the row's edge rather than under the clipped dot. */
+.layer-add-links-group {
+	padding-left: 1.6em;
+}
+
+.layer-add-links-group::before {
+	content: "·";
+	display: inline-block;
+	width: 1.6em;
+	margin-left: -1.6em;
+	text-align: center;
+	color: #777;
+	font-weight: bold;
+}
+
+.layer-add-links-group:first-child {
+	white-space: nowrap;
 }
 
 .layer-menu-link {
@@ -1301,7 +1447,7 @@ body.simplify .layer-control-btn {
 .map-frame-empty {
 	cursor: pointer;
 	font-size: 12px;
-	padding: 7px 4px 4px;
+	padding: 4px 0;
 }
 
 .pin-all img,
@@ -1401,12 +1547,47 @@ img.eye-btn {
 	z-index: 1;
 }
 
-.layer-item .row {
+/* Name and contents on one line. The contents column has a fixed width, so it
+   lines up from row to row, and the name takes the rest, truncated if long. */
+.layer-item .layer-row {
+	display: flex;
+	align-items: baseline;
+	gap: 12px;
+	margin-right: 44px; /* room for row controls */
 	line-height: 17px;
-	margin-bottom: 1px;
 	white-space: nowrap;
 }
 
+.layer-item .layer-name-col {
+	flex: 1 1 auto;
+	min-width: 0;
+}
+
+/* wraps a point layer that lists several kinds of feature */
+.layer-item .layer-contents {
+	flex: none;
+	width: 9em;
+	white-space: normal;
+	font-size: 12.5px;
+	color: #666;
+}
+
+/* bar on the left edge of the active layer; a shadow rather than a border, so
+   the row's text keeps its alignment with the other rows */
+.layer-menu .layer-item.active {
+	box-shadow: inset 5px 0 0 var(--theme-col);
+}
+
+/* hints at a tooltip that counts the features with null geometry */
+.layer-item .layer-contents.has-nulls span {
+	border-bottom: 1px dotted #999;
+}
+
+/* a name being edited is shown in full, over the contents column */
+.layer-item:has(.layer-name.editing) .layer-contents {
+	visibility: hidden;
+}
+
 .layer-item .layer-name {
 	display: inline-block;
 	max-width: 100%;
@@ -1446,20 +1627,6 @@ img.eye-btn {
 	background-color: #f7f7f7;
 }
 
-.layer-item .row > div {
-	display: inline-block;
-}
-
-.layer-item .col1 {
-	width: 84px;
-}
-
-.layer-item .row1 .col2 {
-	margin-right: 44px; /* room for row controls */
-	max-width: calc(100% - 132px);
-	vertical-align: top;
-}
-
 
 .layer-item.drag-target:not(.active) {
 	background-color: #f7f7f7;
@@ -2451,7 +2618,7 @@ body.pan.panning .map-layers:not(.drawing) {
 }
 
 .pointer-btn .nav-sub-menu {
-	top: -3px;
+	top: -2px;
 }
 
 .nav-btn.open .nav-sub-menu {
@@ -2649,12 +2816,12 @@ body.pan.panning .map-layers:not(.drawing) {
 	width: 100%;
 }
 
-/* Three columns on the appearance rows: the neatline's width sits with the
-   colour and opacity it applies to, and the background row leaves the last
-   column empty rather than pushing a lone field onto a line of its own. */
+/* The neatline's width sits beside the colour and opacity it applies to, and
+   the background row leaves the column empty rather than pushing a lone field
+   onto a line of its own. */
 .frame-properties-form .label-split-row {
 	column-gap: 8px;
-	grid-template-columns: 1fr 54px 54px;
+	grid-template-columns: 1fr 54px;
 }
 
 /* Wide enough for "Aspect ratio", and fixed rather than auto so that the ratio
@@ -2680,6 +2847,69 @@ body.pan.panning .map-layers:not(.drawing) {
 	width: 264px;
 }
 
+.scalebar-properties-popup {
+	width: 264px;
+}
+
+.scalebar-properties-form.label-style-panel {
+	background: transparent;
+	border: 0;
+	border-radius: 0;
+	box-shadow: none;
+	box-sizing: border-box;
+	max-height: none;
+	overflow: visible;
+	padding: 0;
+	position: static;
+	width: 100%;
+}
+
+.label-style-row.scalebar-row {
+	align-items: end;
+	display: grid;
+	gap: 6px;
+}
+
+.scalebar-two-col {
+	grid-template-columns: 1fr 1fr;
+}
+
+.scalebar-row select {
+	box-sizing: border-box;
+	min-width: 0;
+	width: 100%;
+}
+
+.scalebar-row > * {
+	min-width: 0;
+}
+
+/* The bottom padding puts the text on the baseline of the menu beside it.
+   Baseline alignment doesn't: Chrome puts a select's baseline 2px above the
+   text it shows. */
+.scalebar-checkbox {
+	align-items: center;
+	display: flex;
+	padding-bottom: 2px;
+	font-size: 12px;
+	gap: 4px;
+	white-space: nowrap;
+}
+
+/* centered on the menu, which the text's baseline alignment leaves it below */
+.scalebar-checkbox input {
+	margin: 0;
+	position: relative;
+	top: -2px;
+	width: auto;
+}
+
+.scalebar-properties-note {
+	color: #a33;
+	font-size: 12px;
+	margin-bottom: 8px;
+}
+
 /* The field tips are drawn above the "?" that opens them, which the box's own
    overflow would clip. The dialog is three rows and two buttons and never has
    anything to scroll. */
@@ -2732,9 +2962,6 @@ body.pan.panning .map-layers:not(.drawing) {
 	width: 130px;
 }
 
-/* Stretches so that the margin field ends where the fields above it do: the
-   row is shorter than they are, and a ragged right edge reads as unfinished
-   rather than as deliberate grouping. */
 .frame-create-margin {
 	align-items: center;
 	display: flex;
@@ -2743,11 +2970,6 @@ body.pan.panning .map-layers:not(.drawing) {
 	min-width: 0; /* a flex item defaults to min-width:auto and will not shrink below its field */
 }
 
-.frame-create-margin > span {
-	color: #555;
-	font-size: 12px;
-}
-
 .frame-create-margin > input {
 	box-sizing: border-box;
 	flex: 1;
@@ -2784,6 +3006,7 @@ body.pan.panning .map-layers:not(.drawing) {
 	grid-template-columns: 1fr 1fr 54px;
 }
 
+.frame-create-margin > span,
 .frame-input-cell > span {
 	color: #555;
 	font-size: 12px;
@@ -3080,8 +3303,9 @@ body.pan.panning .map-layers:not(.drawing) {
    different place.
 
    Bottom-aligned, so that a caption above one control cannot push it out of
-   line with the control beside it: the icon size has a "Size" over it and the
-   shape buttons beside it have nothing, and the two still have to be level. */
+   line with the control beside it: the frame's neatline width has a "Width"
+   over it and the colour beside it has a longer caption, and the two still
+   have to be level. */
 .label-split-row {
 	display: grid;
 	grid-template-columns: 1fr var(--label-split-b-width);
@@ -3096,28 +3320,57 @@ body.pan.panning .map-layers:not(.drawing) {
 	color: #555;
 }
 
-/* Captions a couple of sizes down from the values they name. They are read
-   once, when the panel is first met, and the narrow column of a split row is
-   only as wide as the longest of them -- "Letter spacing" is what set it --
-   so quieter captions are also a narrower panel. Direct children only: the
-   colour picker's H/S/B captions are spans in a row too. */
+.label-editing-status,
+.label-style-panel .label-style-row.label-style-selection-row > span {
+	font-size: 12px;
+	color: #555;
+}
+
 .label-style-panel .label-style-row > span,
-.label-style-panel .label-style-selection-row > span,
 .label-style-panel .label-split-cell > span,
 .label-style-panel .label-style-row > .label-style-row-label,
 .label-style-panel .label-split-cell > .label-style-row-label,
-.label-style-panel .label-icon-size-caption,
+.label-style-panel .frame-input-cell > span,
 .label-style-panel .point-style-note {
+	font-size: 11px;
+	color: #555;
+}
+
+/* A "?" just after its caption rather than floated to the far edge of the row,
+   and in the caption's size, so it reads as part of the caption. */
+.label-style-panel .label-style-row-label > .tip-button {
+	float: none;
+	margin: 0 0 0 4px;
 	font-size: 12px;
+	font-weight: bold;
+}
+
+/* The panel sits at the top of the map, where a bubble drawn above its "?"
+   would go under the page header, so these open downward, tail pointing up. */
+.label-style-panel .label-style-row-label > .tip-button .tip-anchor {
+	bottom: auto;
+	top: 22px;
+}
+
+.label-style-panel .label-style-row-label > .tip-button .tip:after,
+.label-style-panel .label-style-row-label > .tip-button .tip:before {
+	top: auto;
+	bottom: 100%;
+	border-top-color: transparent;
+}
+
+.label-style-panel .label-style-row-label > .tip-button .tip:after {
+	border-bottom-color: #fff;
+}
+
+.label-style-panel .label-style-row-label > .tip-button .tip:before {
+	border-bottom-color: #999;
 }
 
 .label-split-row .label-split-cell + .label-split-cell {
 	white-space: nowrap;
 }
 
-/* Each column's control fills its column: the widths are the grid's to decide
-   now, and a control keeping a width of its own would sit inside its cell
-   rather than lining up with the one above it. */
 .label-split-cell > select,
 .label-split-cell > .size-field,
 .label-split-cell > input[type="text"] {
@@ -3191,7 +3444,7 @@ body.pan.panning .map-layers:not(.drawing) {
 /* Whitespace and a bold heading separate the sections; a rule as well would be
    a third answer to a question already settled twice. */
 .label-style-panel .label-style-section + .label-style-section {
-	margin-top: 12px;
+	margin-top: 10px;
 	padding-top: 0;
 	border-top: 0;
 }
@@ -3210,25 +3463,17 @@ body.pan.panning .map-layers:not(.drawing) {
 	align-self: center;
 }
 
-/* A section switched off shows only its heading (see setSectionCollapsed()),
-   including the caption the Icon heading carries over its size column. */
-.label-style-panel .label-style-section.collapsed > :not(.label-style-section-title),
-.label-style-panel .label-style-section.collapsed .label-icon-size-caption {
+/* A section switched off shows only its heading (see setSectionCollapsed()). */
+.label-style-panel .label-style-section.collapsed > :not(.label-style-section-title) {
 	display: none;
 }
 
-/* .hidden is one class and the rule above is two, so a heading told to hide
-   would go on being laid out. The circle panel hides its Circles heading once
-   the points are circles: the panel's title says so, and the section is the
-   only thing left in it. */
 .label-style-panel .label-style-section-title.hidden {
 	display: none;
 }
 
-/* 15.5px is what the dialogs subhead at (.info-box h4); the weight is the
-   sketch's, which wants these read as headings rather than as captions. */
 .label-style-panel .label-style-section-name {
-	font-size: 15.5px;
+	font-size: 15px;
 	color: #222;
 }
 
@@ -3261,22 +3506,6 @@ body.pan.panning .map-layers:not(.drawing) {
 	overflow: hidden;
 }
 
-/* Closer to the heading above it than a row usually is, because that heading
-   line carries this row's "Size" caption: the gap between a caption and the
-   field it names is 2px everywhere else in the panel. */
-.text-style-panel .label-icon-shapes-row {
-	margin-top: 2px;
-}
-
-/* Pushed to the right and given the width of a split row's narrow column, so
-   that it sits over the size field a row below it. */
-.text-style-panel .label-icon-size-caption {
-	width: var(--label-split-b-width);
-	margin-left: auto;
-	font-weight: normal;
-	color: #555;
-}
-
 /* Darker than the app's default placeholder. These fields show the value the
    renderer will use when the property is absent -- 0 and auto are true of the
    label, they are just not stored on it -- so at #aaa they read as a control
@@ -3320,9 +3549,6 @@ body.pan.panning .map-layers:not(.drawing) {
 	background: #f0f0f0;
 }
 
-/* A grey fill, not the inverse the panel's other buttons use: the glyph is
-   what identifies the choice, and reversing it out makes the selected shape
-   the hardest one to read. */
 .label-style-panel .label-btn-group .label-panel-btn.selected {
 	background: #dcdcdc;
 	color: black;
@@ -3390,9 +3616,6 @@ body.pan.panning .map-layers:not(.drawing) {
 	margin-top: 0;
 }
 
-/* The cell a colour field sits in, which is also what its picker hangs from:
-   the picker is wider than the panel, so it opens over the map, and anchoring
-   it to the cell keeps it on the same side of the panel as its field. */
 .label-color-row {
 	position: relative;
 }
@@ -3415,10 +3638,6 @@ body.pan.panning .map-layers:not(.drawing) {
 	opacity: 0.45;
 }
 
-/* A button with a word on it: Clear style, Random fills, Create. The same
-   shape as Save current in the saved styles row, which is the same kind of
-   thing -- a named action, as wide as its name -- and the same height as the
-   fields above it. */
 .label-panel-action-btn {
 	box-sizing: border-box;
 	display: inline-flex;
@@ -3428,6 +3647,7 @@ body.pan.panning .map-layers:not(.drawing) {
 	border: 1px solid var(--label-field-border);
 	border-radius: var(--label-field-radius);
 	background-color: white;
+	font-size: 12px;
 	color: var(--normal-text);
 	cursor: pointer;
 	user-select: none;
@@ -3449,9 +3669,6 @@ body.pan.panning .map-layers:not(.drawing) {
 	gap: 4px 6px;
 }
 
-/* A swatch and its hex value inside one border: the pair is one answer to one
-   question, and a separate button beside a text box reads as two. The swatch
-   keeps its own outline so that white does not disappear into the field. */
 .label-style-panel .label-color-field {
 	display: flex;
 	align-items: center;
@@ -3472,8 +3689,8 @@ body.pan.panning .map-layers:not(.drawing) {
 	width: 13px;
 	height: 13px;
 	margin-right: 6px;
-	border: 1px solid #bbb;
-	border-radius: 2px;
+	border: 1px solid rgba(0,0,0,0.22);
+	/* border-radius: 2px; */
 }
 
 /* A swatch for a selection whose colours disagree: split rather than empty,
@@ -3505,6 +3722,23 @@ body.pan.panning .map-layers:not(.drawing) {
 	opacity: 0.45;
 }
 
+/* The opacity at the end of a colour field, behind a divider the height of the
+   field. Wide enough for "100%" and for "mixed", and no wider: the hex value
+   beside it gets the rest. Selectors as specific as the colour field's input
+   rules above, which would otherwise stretch it and take its divider away. */
+.label-style-panel .label-color-field input.label-opacity-input,
+.label-style-panel .label-color-field input.label-opacity-input:focus {
+	flex: none;
+	align-self: stretch;
+	width: 44px;
+	height: auto;
+	margin: 0 -3px 0 4px;
+	padding: 0 4px 0 6px;
+	border: none;
+	border-left: 1px solid var(--label-field-border);
+	border-radius: 0;
+}
+
 .label-color-row .label-color-picker input[type="text"] {
 	width: 45px;
 }
@@ -3514,10 +3748,6 @@ body.pan.panning .map-layers:not(.drawing) {
 	box-sizing: border-box;
 }
 
-/* What a section of this panel says when there is nothing in it to set: the
-   layer is drawn some way this panel cannot edit, or the thing the section is
-   for has to be made in the console. Set like a caption, not like a field's
-   value. */
 .point-style-note {
 	color: #555;
 	line-height: 1.3;
@@ -3667,10 +3897,6 @@ body.dragging-color-picker * {
 	display: none;
 }
 
-.label-editing-status {
-	color: #555;
-}
-
 .label-style-selection-row .label-editing-clear {
 	margin-left: 8px;
 	color: var(--colored-text);
@@ -3701,7 +3927,7 @@ body.dragging-color-picker * {
 .text-style-panel .label-position-grid {
 	grid-template-columns: repeat(3, 10px);
 	gap: 3px;
-	margin-top: -13px;
+	margin-top: -15px;
 	margin-bottom: 3px;
 }
 
@@ -3973,6 +4199,27 @@ body.dragging-color-picker * {
 	top: 1px;
 }
 
+/* Active-layer name at the top of the arrow menu. inline-size containment
+   keeps a long name from widening the menu: the heading takes the width set
+   by the tool names and cuts the layer name short with an ellipsis. */
+.nav-menu-heading {
+	contain: inline-size;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	margin: 1px 10px 3px 10px;
+	padding: 1px 0 3px 0;
+	border-bottom: 1px solid #e4e4e4;
+	color: #999;
+	font-size: 11px;
+	line-height: 12px;
+}
+
+.nav-menu-divider {
+	margin: 4px 10px;
+	border-top: 1px solid #e4e4e4;
+}
+
 .save-menu {
 	text-align: right;
 	padding-bottom: 5px;
@@ -4347,7 +4594,7 @@ body.dragging-color-picker * {
 
 .simplify-control .handle {
 	position: absolute;
-	top: -3px;
+	top: -2px;
 }
 
 .simplify-control .handle img {