mapshaper 0.7.66 → 0.7.68

package/www/page.css

@@ -944,46 +944,156 @@ 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.console-tab {
+	padding-top: 8px;
+}
+
+.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-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-tab:hover {
+.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 +1308,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 +1352,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 +1443,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 +1543,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 +1623,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;
@@ -2021,12 +2184,24 @@ div.basemap-style-btn.active {
 	cursor: default;
 }
 
-/* Over a label's knot or anchor handle, where a drag moves the handle rather
-   than placing a label or panning the map. */
-.map-layers.label-handle {
+/* Over a selected label's text, where a drag moves the text (or the whole
+   label) rather than placing a label or panning the map. */
+.map-layers.label-text-drag {
 	cursor: move;
 }
 
+/* Over one of a selected label's control points -- a knot, its anchor, or a
+   callout handle -- which a drag moves on its own. Not the text's cursor,
+   because the two are often close together or on top of each other. */
+.map-layers.label-handle {
+	cursor: pointer;
+}
+
+/* Over a selected label's width handle, which only moves sideways. */
+.map-layers.label-resize {
+	cursor: ew-resize;
+}
+
 .map-layers.ruler-dragging {
 	cursor: grabbing;
 }
@@ -2259,6 +2434,43 @@ body.pan.panning .map-layers:not(.drawing) {
 	vector-effect: non-scaling-stroke;
 }
 
+/* A selected text block's column: the width handle's box, drawn fainter than
+   the box around the text, which is the label itself. */
+.label-cue-column {
+	fill: none;
+	stroke: #3a7ddc;
+	stroke-width: 1px;
+	stroke-dasharray: 3 3;
+	stroke-opacity: 0.6;
+	vector-effect: non-scaling-stroke;
+}
+
+/* A selected label's width and callout handles. The callout's end at the text
+   is filled, so that the two ends of the line read differently. */
+.label-cue-handle {
+	fill: #fff;
+	stroke: #3a7ddc;
+	stroke-width: 1.5px;
+	vector-effect: non-scaling-stroke;
+}
+
+.label-cue-attach {
+	fill: #3a7ddc;
+	stroke: #fff;
+	stroke-width: 1px;
+}
+
+/* The width being dragged out for a new text block: a line's height, dashed
+   like the other things the tool draws that are not yet a label. */
+.label-block-guide {
+	fill: none;
+	stroke: #3a7ddc;
+	stroke-width: 1px;
+	stroke-dasharray: 3 2;
+	vector-effect: non-scaling-stroke;
+	pointer-events: none;
+}
+
 /* The cue for a selection too large to outline label by label -- selecting a
    whole layer to restyle it. A halo in the selection's own blue, the same
    treatment the older styling mode uses in yellow: at that size the question
@@ -2311,6 +2523,18 @@ body.pan.panning .map-layers:not(.drawing) {
 	vector-effect: non-scaling-stroke;
 }
 
+/* A text block's column, the width its text wraps to, behind the box around
+   the text itself. Fainter and dashed, because it is a limit rather than the
+   label: the box is what a callout meets. */
+.label-edit-column {
+	fill: none;
+	stroke: #cc6acc;
+	stroke-width: 1px;
+	stroke-dasharray: 3 3;
+	stroke-opacity: 0.6;
+	vector-effect: non-scaling-stroke;
+}
+
 .label-edit-selection {
 	fill: #cc6acc;
 	fill-opacity: 0.3;
@@ -2441,8 +2665,8 @@ body.pan.panning .map-layers:not(.drawing) {
 	pointer-events: none;
 	background-color: rgba(255, 255, 255, 0.85);
 	color: var(--colored-text);
-	font-size: 13px;
-	line-height: 13px;
+	font-size: 12px;
+	line-height: 12px;
 	padding: 3px 6px 4px 6px;
 	white-space: nowrap;
 }
@@ -2533,7 +2757,7 @@ body.pan.panning .map-layers:not(.drawing) {
 	   and the button beside them are all the same height. */
 	--label-field-height: 22px;
 	--label-field-radius: 4px;
-	--label-field-border: #bbb;
+	--label-field-border: #c6c6c6;
 	/* The narrow column of a split row, wide enough for the longest caption
 	   over it -- "Letter spacing", which measures 71px -- and the same in
 	   every row of every panel, so that the field edges line up down the
@@ -2588,12 +2812,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
@@ -2671,9 +2895,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;
@@ -2682,11 +2903,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;
@@ -2723,6 +2939,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;
@@ -2777,7 +2994,8 @@ body.pan.panning .map-layers:not(.drawing) {
 
 .label-style-row {
 	display: block;
-	margin-top: 7px;
+	margin-top: 2px;
+	margin-bottom: 5px;
 }
 
 .label-style-row span,
@@ -3018,8 +3236,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);
@@ -3034,28 +3253,26 @@ 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: 12px;
+	font-size: 11px;
+	color: #555;
 }
 
 .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"] {
@@ -3129,7 +3346,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;
 }
@@ -3148,18 +3365,17 @@ body.pan.panning .map-layers:not(.drawing) {
 	align-self: center;
 }
 
-/* .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. */
+/* A section switched off shows only its heading (see setSectionCollapsed()). */
+.label-style-panel .label-style-section.collapsed > :not(.label-style-section-title) {
+	display: none;
+}
+
 .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;
 }
 
@@ -3181,20 +3397,15 @@ 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;
+/* Where text blocks are wrapped (gui-label-wrap.mjs), for the same reason. The
+   wrapping <div> sets its own width, which the clipped box does not limit. */
+.label-wrap-measure {
+	position: absolute;
+	left: -10000px;
+	top: -10000px;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
 }
 
 /* Darker than the app's default placeholder. These fields show the value the
@@ -3240,9 +3451,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;
@@ -3254,6 +3462,7 @@ body.pan.panning .map-layers:not(.drawing) {
    on, some off -- is both halves at once with the knob over the join. */
 .label-toggle {
 	position: relative;
+	top: -1px;
 	flex: none;
 	width: 26px;
 	height: 15px;
@@ -3300,7 +3509,7 @@ body.pan.panning .map-layers:not(.drawing) {
 }
 
 .label-style-section-title {
-	margin-top: 11px;
+	margin-top: 8px;
 	font-weight: 600;
 	color: #333;
 }
@@ -3309,9 +3518,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;
 }
@@ -3334,10 +3540,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;
@@ -3347,6 +3549,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;
@@ -3368,9 +3571,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;
@@ -3391,8 +3591,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,
@@ -3424,6 +3624,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;
 }
@@ -3433,10 +3650,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;
@@ -3586,10 +3799,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);
@@ -3620,7 +3829,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;
 }
 
@@ -3701,12 +3910,30 @@ body.dragging-color-picker * {
 	transform: scale(1.4);
 }
 
-.label-align-buttons .label-panel-btn {
+.label-align-buttons .label-panel-btn,
+.label-callout-buttons .label-panel-btn {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }
 
+/* Lines like the alignment glyphs, with the arrowhead and the dot filled. */
+.label-callout-symbol {
+	display: block;
+	width: 16px;
+	height: 16px;
+	fill: none;
+	stroke: currentColor;
+	stroke-width: 1.4;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+}
+
+.label-callout-symbol .fill {
+	fill: currentColor;
+	stroke: none;
+}
+
 /* Drawn larger than the icon symbols above, which share its viewBox but not
    its proportions: three rules across the middle are ink over less than half
    of the box, where a circle or a square fills most of its own, so at the same
@@ -3874,6 +4101,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;