X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/315df40f19cab71bf2d0b393cb84ba7a64afaef0..ce761b3193c41081182e129d4f4aa18268e69264:/vendor/assets/iD/iD.css.erb

diff --git a/vendor/assets/iD/iD.css.erb b/vendor/assets/iD/iD.css.erb
index 05d0cbe16..6ed4c3c09 100644
--- a/vendor/assets/iD/iD.css.erb
+++ b/vendor/assets/iD/iD.css.erb
@@ -470,66 +470,6 @@ g.turn circle {
 }
 
 
-/* GPX Paths */
-
-.layer-gpx {
-    pointer-events: none;
-}
-
-path.gpx {
-    stroke: #ff26d4;
-    stroke-width: 2;
-    fill: none;
-}
-
-text.gpxlabel-halo,
-text.gpxlabel {
-    font-size: 10px;
-    font-weight: bold;
-    dominant-baseline: middle;
-}
-
-text.gpxlabel {
-    fill: #ff26d4;
-}
-
-text.gpxlabel-halo {
-    opacity: 0.7;
-    stroke: #000;
-    stroke-width: 5px;
-    stroke-miterlimit: 1;
-}
-
-/* MVT Paths */
-
-.layer-mvt {
-    pointer-events: none;
-}
-
-path.mvt {
-    stroke: #ff26d4;
-    stroke-width: 2;
-    fill: none;
-}
-
-text.mvtlabel-halo,
-text.mvtlabel {
-    font-size: 10px;
-    font-weight: bold;
-    dominant-baseline: middle;
-}
-
-text.mvtlabel {
-    fill: #ff26d4;
-}
-
-text.mvtlabel-halo {
-    opacity: 0.7;
-    stroke: #000;
-    stroke-width: 5px;
-    stroke-miterlimit: 1;
-}
-
 /* Default - light gray */
 path.area.stroke {
     stroke: #ddd;
@@ -2197,6 +2137,10 @@ path.stroke.tag-crossing.tag-crossing-zebra {
 
 /* markers and sequences */
 .viewfield-group {
+    pointer-events: none;
+}
+.mode-browse .viewfield-group,
+.mode-select .viewfield-group {
     pointer-events: visible;
     cursor: pointer;
 }
@@ -2459,7 +2403,10 @@ label.streetside-hires {
 .layer-notes .note * {
     pointer-events: none;
 }
-.layer-notes .note .note-fill {
+.mode-browse .layer-notes .note .note-fill,
+.mode-select .layer-notes .note .note-fill,
+.mode-select-data .layer-notes .note .note-fill,
+.mode-select-note .layer-notes .note .note-fill {
     pointer-events: visible;
     cursor: pointer; /* Opera */
     cursor: url(<%= asset_path("iD/img/cursor-select-point.png") %>), pointer; /* FF */
@@ -2492,143 +2439,79 @@ label.streetside-hires {
 .note-header-icon .preset-icon-28 {
     top: 18px;
 }
-
 .note-header-icon .note-icon-annotation {
     position: absolute;
     top: 22px;
     left: 22px;
     margin: auto;
 }
-
 .note-header-icon .note-icon-annotation .icon {
     width: 15px;
     height: 15px;
 }
 
 
-/* OSM Note UI */
-.note-header {
-    background-color: #f6f6f6;
-    border-radius: 5px;
-    border: 1px solid #ccc;
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-}
+/* Custom Map Data (geojson, gpx, kml, vector tile) */
 
-.note-header-icon {
-    background-color: #fff;
-    padding: 10px;
-    flex: 0 0 62px;
-    position: relative;
-    width: 60px;
-    height: 60px;
-    border-right: 1px solid #ccc;
-    border-radius: 5px 0 0 5px;
-}
-[dir='rtl'] .note-header-icon {
-    border-right: unset;
-    border-left: 1px solid #ccc;
-    border-radius: 0 5px 5px 0;
+.layer-mapdata {
+    pointer-events: none;
 }
 
-.note-header-icon .icon-wrap {
-    position: absolute;
-    top: 0px;
+.layer-mapdata path.shadow {
+    pointer-events: stroke;
+    stroke: #f6634f;
+    stroke-width: 16;
+    stroke-opacity: 0;
+    fill: none;
 }
-
-.note-header-label {
-    background-color: #f6f6f6;
-    padding: 0 15px;
-    flex: 1 1 100%;
-    font-size: 14px;
-    font-weight: bold;
-    border-radius: 0 5px 5px 0;
+.layer-mapdata path.MultiPoint.shadow,
+.layer-mapdata path.Point.shadow {
+    pointer-events: fill;
+    fill: #f6634f;
+    fill-opacity: 0;
 }
-[dir='rtl'] .note-header-label {
-    border-radius: 5px 0 0 5px;
+.layer-mapdata path.shadow.hover:not(.selected) {
+    stroke-opacity: 0.4;
 }
-
-.note-category {
-    margin: 20px 0px;
+.layer-mapdata path.shadow.selected {
+    stroke-opacity: 0.7;
 }
 
-.comments-container {
-    background: #ececec;
-    padding: 1px 10px;
-    border-radius: 8px;
-    margin-top: 20px;
+.layer-mapdata path.stroke {
+    stroke: #ff26d4;
+    stroke-width: 2;
+    fill: none;
 }
 
-.comment {
-    background-color: #fff;
-    border-radius: 5px;
-    border: 1px solid #ccc;
-    margin: 10px auto;
-    display: flex;
-    flex-flow: row nowrap;
-}
-.comment-avatar {
-    padding: 10px;
-    flex: 0 0 62px;
-}
-.comment-avatar .icon.comment-avatar-icon {
-    width: 40px;
-    height: 40px;
-    object-fit: cover;
-    border: 1px solid #ccc;
-    border-radius: 20px;
-}
-.comment-main {
-    padding: 10px 10px 10px 0;
-    flex: 1 1 100%;
-    flex-flow: column nowrap;
-    overflow: hidden;
-    overflow-wrap: break-word;
-}
-[dir='rtl'] .comment-main {
-    padding: 10px 0 10px 10px;
+.layer-mapdata path.fill {
+    stroke-width: 0;
+    stroke-opacity: 0.3;
+    stroke: #ff26d4;
+    fill: #ff26d4;
+    fill-opacity: 0.3;
+    fill-rule: evenodd;
 }
 
-.comment-metadata {
-    flex-flow: row nowrap;
-    justify-content: space-between;
-}
-.comment-author {
+.layer-mapdata text.label-halo,
+.layer-mapdata text.label {
+    font-size: 10px;
     font-weight: bold;
-    color: #333;
-}
-.comment-date {
-    color: #aaa;
-}
-.comment-text {
-    color: #333;
-    margin-top: 10px;
-    overflow-y: auto;
-    max-height: 250px;
-}
-.comment-text::-webkit-scrollbar {
-    border-left: none;
+    dominant-baseline: middle;
 }
-
-.note-save {
-    padding: 10px;
+.layer-mapdata text.label {
+    fill: #ff26d4;
 }
-
-.note-save #new-comment-input {
-    width: 100%;
-    height: 100px;
-    max-height: 300px;
-    min-height: 100px;
+.layer-mapdata text.label.hover,
+.layer-mapdata text.label.selected {
+    fill: #f6634f;
 }
-
-.note-save .detail-section {
-    margin: 10px 0;
+.layer-mapdata text.label-halo {
+    opacity: 0.7;
+    stroke: #000;
+    stroke-width: 5px;
+    stroke-miterlimit: 1;
 }
 
-.note-report {
-    float: right;
-}
 /* Fill Styles */
 
 .low-zoom.fill-wireframe path.stroke,
@@ -2638,6 +2521,11 @@ label.streetside-hires {
     stroke-dasharray: none !important;
     fill: none !important;
 }
+.low-zoom.fill-wireframe .layer-mapdata path.stroke,
+.fill-wireframe .layer-mapdata path.stroke {
+    stroke-width: 2 !important;
+    stroke-opacity: 1 !important;
+}
 
 .low-zoom.fill-wireframe path.shadow,
 .fill-wireframe path.shadow {
@@ -2673,7 +2561,6 @@ label.streetside-hires {
 }
 /* Basics
 ------------------------------------------------------- */
-
 /*
   Opera misbehaves when the window is resized vertically unless 100% width + height are
   applied to both html and body. https://gist.github.com/jfirebaugh/bd225bcfdd3a633850c4
@@ -2875,7 +2762,6 @@ a:hover {
 
 /* Forms
 ------------------------------------------------------- */
-
 textarea  {
     resize: vertical;
     font:normal 12px/20px "-apple-system", BlinkMacSystemFont,
@@ -2961,7 +2847,6 @@ table.tags, table.tags td, table.tags th {
 
 /* Grid
 ------------------------------------------------------- */
-
 .col0    { float: left; width: 04.1666%; }
 .col1    { float: left; width: 08.3333%; }
 .col2    { float: left; width: 16.6666%; }
@@ -2978,7 +2863,6 @@ table.tags, table.tags td, table.tags th {
 
 /* UI Lists
 ------------------------------------------------------- */
-
 ul li { list-style: none;}
 
 .toggle-list > label {
@@ -3021,22 +2905,18 @@ ul li { list-style: none;}
     background: #fff;
     color: #333;
 }
-
 .fillL2 {
     background: #f6f6f6;
     color: #333;
 }
-
 .fillL3 {
     background: #ececec;
     color: #333;
 }
-
 .fillD {
     background: rgba(0,0,0,.5);
     color: #fff;
 }
-
 .fillD2 {
     background: rgba(0,0,0,.75);
     color: #fff;
@@ -3069,31 +2949,9 @@ li.hide {
     background-size: 5px 5px;
 }
 
-.panewrap {
-    position: absolute;
-    width: 200%;
-    height: 100%;
-    right: -100%;
-}
-
-
-.pane {
-    position: absolute;
-    width: 50%;
-    top: 0;
-    bottom: 30px;
-}
-
-.pane:first-child {
-    left: 0;
-}
-
-.pane:last-child {
-    right: 0;
-}
-
-/* Buttons */
 
+/* Buttons
+------------------------------------------------------- */
 button {
     text-align: center;
     line-height: 20px;
@@ -3284,8 +3142,8 @@ button.add-note svg.icon {
 }
 
 
-/* Icons */
-
+/* Icons
+------------------------------------------------------- */
 .icon {
     vertical-align: top;
     width: 20px;
@@ -3337,9 +3195,8 @@ button.add-note svg.icon {
 }
 
 
-/* ToolBar / Persistent UI Elements
+/* Toolbar / Persistent UI Elements
 ------------------------------------------------------- */
-
 #bar {
     position: fixed;
     padding: 10px 0;
@@ -3360,7 +3217,6 @@ button.add-note svg.icon {
 
 /* Header for modals / panes
 ------------------------------------------------------- */
-
 .header {
     border-bottom: 1px solid #ccc;
     height: 60px;
@@ -3390,6 +3246,7 @@ button.add-note svg.icon {
 }
 
 .field-help-title button.close,
+.sidebar-component .header button.data-editor-close,
 .sidebar-component .header button.note-editor-close,
 .entity-editor-pane .header button.preset-close,
 .preset-list-pane .header button.preset-choose {
@@ -3398,6 +3255,7 @@ button.add-note svg.icon {
     top: 0;
 }
 [dir='rtl'] .field-help-title button.close,
+[dir='rtl'] .sidebar-component .header button.data-editor-close,
 [dir='rtl'] .sidebar-component .header button.note-editor-close,
 [dir='rtl'] .entity-editor-pane .header button.preset-close,
 [dir='rtl'] .preset-list-pane .header button.preset-choose {
@@ -3446,7 +3304,6 @@ button.add-note svg.icon {
     justify-content: space-between;
     list-style: none;
     display: flex;
-
 }
 
 .footer > a {
@@ -3462,9 +3319,8 @@ button.add-note svg.icon {
 }
 
 
-/* Hide-Toggle
+/* Hide/Toggle collapsable sections (aka Disclosure)
 ------------------------------------------------------- */
-
 .hide-toggle .icon.pre-text {
     vertical-align: text-top;
     width: 16px;
@@ -3485,9 +3341,8 @@ a.hide-toggle {
 }
 
 
-/* Inspector
+/* Sidebar / Inspector
 ------------------------------------------------------- */
-
 #sidebar {
     position: relative;
     float: left;
@@ -3509,6 +3364,28 @@ a.hide-toggle {
     right: 0;
 }
 
+.panewrap {
+    position: absolute;
+    width: 200%;
+    height: 100%;
+    right: -100%;
+}
+
+.pane {
+    position: absolute;
+    width: 50%;
+    top: 0;
+    bottom: 30px;
+}
+
+.pane:first-child {
+    left: 0;
+}
+
+.pane:last-child {
+    right: 0;
+}
+
 .inspector-wrap {
     width: 100%;
     height: 100%;
@@ -3530,15 +3407,12 @@ a.hide-toggle {
 .feature-list-pane .inspector-body {
     top: 120px;
 }
-
 .preset-list-pane .inspector-body {
     top: 120px;
 }
-
 .entity-editor-pane .inspector-body {
     top: 60px;
 }
-
 .selection-list-pane .inspector-body {
     top: 60px;
 }
@@ -3574,12 +3448,12 @@ a.hide-toggle {
     font-weight: bold;
 }
 
-/* Feature list */
 
+/* Feature List / Search Results
+------------------------------------------------------- */
 .feature-list  {
     width: 100%;
 }
-
 .no-results-item,
 .geocode-item,
 .feature-list-item {
@@ -3648,11 +3522,8 @@ a.hide-toggle {
 }
 
 
-/* Presets
+/* Preset List and Icons
 ------------------------------------------------------- */
-
-/* Preset grid  */
-
 .preset-list  {
     width: 100%;
     padding: 20px 20px 10px 20px;
@@ -3830,7 +3701,6 @@ a.hide-toggle {
 .preset-list-item button.tag-reference-button:hover {
     background: #f1f1f1;
 }
-
 .preset-list-item button.tag-reference-button .icon {
     opacity: .5;
 }
@@ -3877,27 +3747,23 @@ a.hide-toggle {
 }
 
 
-/* preset form basics */
-
+/* Entity/Preset Editor
+------------------------------------------------------- */
 .preset-editor {
     overflow: hidden;
     padding-bottom: 10px;
 }
-
 .preset-editor a.hide-toggle {
     margin: 0 20px 5px 20px;
 }
-
 .preset-editor .form-fields-container {
     padding: 10px;
     margin: 0 10px 10px 10px;
     border-radius: 8px;
 }
-
 .preset-editor .form-fields-container:empty {
     display: none;
 }
-
 .entity-editor-pane .preset-list-item .preset-list-button-wrap {
     margin-bottom: 0;
 }
@@ -3997,8 +3863,8 @@ a.hide-toggle {
     border-bottom: 1px solid #ccc
 }
 
-/* Preset form (hover mode) */
-
+/* Inspector (hover styles)
+------------------------------------------------------- */
 .inspector-hover .checkselect label:last-of-type,
 .inspector-hover .preset-input-wrap .label,
 .inspector-hover .form-field-multicombo,
@@ -4065,6 +3931,10 @@ a.hide-toggle {
 .inspector-hover .tag-row .form-field.input-wrap-position {
     width: 50%;
 }
+.inspector-hover .tag-row .key-wrap,
+.inspector-hover .tag-row .input-wrap-position {
+    height: 31px;
+}
 
 .inspector-hover .tag-row:first-child input.value {
     border-top-right-radius: 4px;
@@ -4129,8 +3999,8 @@ a.hide-toggle {
     overflow: hidden;
 }
 
-/* adding additional preset fields */
-
+/* More Fields dropdown
+------------------------------------------------------- */
 .more-fields {
     padding: 0 20px 20px 20px;
     font-weight: bold;
@@ -4166,10 +4036,8 @@ a.hide-toggle {
 }
 
 
-/* preset form access */
-/* preset form cycleway */
-/* preset form structure extras */
-
+/* Field - Access, Cycleway, Structure
+------------------------------------------------------- */
 .structure-extras-wrap li,
 .form-field-cycleway .preset-input-wrap li,
 .form-field-access .preset-input-wrap li {
@@ -4238,8 +4106,8 @@ a.hide-toggle {
 }
 
 
-/* preset form multicombo */
-
+/* Field - Multicombo
+------------------------------------------------------- */
 .form-field-multicombo {
     border: 1px solid #cfcfcf;
     border-top: 0px;
@@ -4249,11 +4117,9 @@ a.hide-toggle {
     border-radius: 0 0 4px 4px;
     overflow: hidden;
 }
-
 .form-field-multicombo:focus {
     border-bottom: 0px;
 }
-
 .form-field-multicombo.active {
     border-bottom-left-radius: 0px;
     border-bottom-right-radius: 0px;
@@ -4298,8 +4164,8 @@ a.hide-toggle {
 }
 
 
-/* preset form numbers */
-
+/* Field - Numeric
+------------------------------------------------------- */
 input[type=number] {
     position: relative;
     padding-right: 20%;
@@ -4352,13 +4218,11 @@ input[type=number] {
     left: 0; right: 0; bottom: 0; top: 0;
     margin: auto;
 }
-
 .spin-control button.decrement::after {
     border-top: 5px solid #ccc;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
 }
-
 .spin-control button.increment::after {
     border-bottom: 5px solid #ccc;
     border-left: 5px solid transparent;
@@ -4366,27 +4230,23 @@ input[type=number] {
 }
 
 
-/* preset form checkbox */
-
+/* Field - Checkbox
+------------------------------------------------------- */
 .checkselect label:last-of-type {
     display: block;
     background: #fff;
     padding: 5px 10px;
     color: #7092ff;
 }
-
 .checkselect label:hover {
     background: #f1f1f1;
 }
-
 .checkselect .set {
     color: inherit;
 }
-
 .checkselect label:not(.set) input[type="checkbox"] {
     opacity: .5;
 }
-
 .checkselect .reverser.button {
     display: block;
     float: right;
@@ -4402,21 +4262,23 @@ input[type=number] {
     display: none;
 }
 
-/* Preset form radio button */
 
+/* Field - Radio button
+------------------------------------------------------- */
 .toggle-list button.remove {
     border-radius: 0 0 3px 3px;
 }
-
 .toggle-list button.remove .icon {
     position: absolute;
     left: 5px;
 }
-
 .toggle-list button.remove::before {
     content: none;
 }
 
+
+/* Field - Maxspeed
+------------------------------------------------------- */
 #preset-input-maxspeed_advisory,
 #preset-input-maxspeed {
     border-right: none;
@@ -4438,7 +4300,9 @@ input[type=number] {
     border-radius: 0 0 0 4px;
 }
 
-/* Wikipedia field */
+
+/* Field - Wikipedia
+------------------------------------------------------- */
 .form-field .wiki-lang {
     border-radius: 0;
 }
@@ -4458,7 +4322,9 @@ input[type=number] {
     left: 32px;
 }
 
-/* Localized field */
+
+/* Field - Localized Name
+------------------------------------------------------- */
 .form-field .localized-main {
     padding-right: 12%;
 }
@@ -4489,7 +4355,6 @@ input[type=number] {
 .form-field .localized-wrap {
     padding: 0 10px;
 }
-
 .form-field .localized-wrap .entry {
     position: relative;
     overflow: hidden;
@@ -4512,18 +4377,17 @@ input[type=number] {
     border-radius: 0;
     border-top-width: 0;
 }
-
 .form-field .localized-wrap .entry .localized-value {
     border-top-width: 0;
     border-radius: 0 0 4px 4px;
 }
-
 .form-field .localized-wrap .form-label button {
     border-top-right-radius: 3px;
 }
 
-/* Preset form address */
 
+/* Field - Address
+------------------------------------------------------- */
 .addr-row input {
     border-right: 0;
     border-bottom: 0;
@@ -4562,8 +4426,9 @@ input[type=number] {
     border-radius: 0 0 0 4px;
 }
 
-/* Restrictions editor */
 
+/* Field - Restriction Editor
+------------------------------------------------------- */
 .form-field-restrictions .restriction-controls-container {
     background-color: #fff;
     border-top: 1px solid #ccc;
@@ -4653,8 +4518,9 @@ input[type=number] {
     color: #78f;
 }
 
-/* Changeset editor while comment text is empty */
 
+/* Field - Changeset Comment
+------------------------------------------------------- */
 .form-field-comment:not(.present) #preset-input-comment {
     border-color: rgb(230, 100, 100);
 }
@@ -4675,8 +4541,9 @@ input[type=number] {
     border-color: rgb(230, 100, 100);
 }
 
-/* combobox dropdown */
 
+/* Field - Combobox
+------------------------------------------------------- */
 div.combobox {
     z-index: 9999;
     display: none;
@@ -4733,8 +4600,9 @@ div.combobox {
     border-right: 5px solid transparent;
 }
 
-/* Field Help */
 
+/* Field Help
+------------------------------------------------------- */
 .field-help-body {
     display: block;
     position: absolute;
@@ -4834,8 +4702,8 @@ div.combobox {
 }
 
 
-/* Raw Tag Editor */
-
+/* Raw Tag Editor
+------------------------------------------------------- */
 .tag-list {
     padding-top: 10px;
 }
@@ -4961,7 +4829,6 @@ div.combobox {
 }
 
 /* Adding form fields to tag editor */
-
 .raw-tag-editor .add-tag {
     width: 40%;
     height: 30px;
@@ -4979,7 +4846,6 @@ div.combobox {
 }
 
 /* Tag reference */
-
 button.minor.tag-reference-loading {
     background-color: #f5f5f5;
 }
@@ -5041,8 +4907,8 @@ img.tag-reference-wiki-image {
 }
 
 
-/* Raw relation membership editor */
-
+/* Raw Member / Membership Editor
+------------------------------------------------------- */
 .raw-member-editor .member-list li:first-child,
 .raw-membership-editor .member-list li:first-child {
     padding-top: 10px;
@@ -5088,29 +4954,189 @@ input.key-trap {
     border: 1px solid rgba(0,0,0,0);
 }
 
-/* Fullscreen button */
-div.full-screen {
-    float: right;
-    width: 40px;
-    margin-right: 10px;
+
+/* OSM Note Editor
+------------------------------------------------------- */
+.note-header {
+    background-color: #f6f6f6;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
 }
 
-div.full-screen .tooltip {
-    min-width: 160px;
+.note-header-icon {
+    background-color: #fff;
+    padding: 10px;
+    flex: 0 0 62px;
+    position: relative;
+    width: 60px;
+    height: 60px;
+    border-right: 1px solid #ccc;
+    border-radius: 5px 0 0 5px;
+}
+[dir='rtl'] .note-header-icon {
+    border-right: unset;
+    border-left: 1px solid #ccc;
+    border-radius: 0 5px 5px 0;
 }
 
-div.full-screen > button, div.full-screen > button.active {
+.note-header-icon .icon-wrap {
+    position: absolute;
+    top: 0px;
+}
+
+.note-header-label {
+    background-color: #f6f6f6;
+    padding: 0 15px;
+    flex: 1 1 100%;
+    font-size: 14px;
+    font-weight: bold;
+    border-radius: 0 5px 5px 0;
+}
+[dir='rtl'] .note-header-label {
+    border-radius: 5px 0 0 5px;
+}
+
+.note-category {
+    margin: 20px 0px;
+}
+
+.comments-container {
+    background: #ececec;
+    padding: 1px 10px;
+    border-radius: 8px;
+    margin-top: 20px;
+}
+
+.comment {
+    background-color: #fff;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    margin: 10px auto;
+    display: flex;
+    flex-flow: row nowrap;
+}
+.comment-avatar {
+    padding: 10px;
+    flex: 0 0 62px;
+}
+.comment-avatar .icon.comment-avatar-icon {
     width: 40px;
     height: 40px;
-    background: transparent;
+    object-fit: cover;
+    border: 1px solid #ccc;
+    border-radius: 20px;
+}
+.comment-main {
+    padding: 10px 10px 10px 0;
+    flex: 1 1 100%;
+    flex-flow: column nowrap;
+    overflow: hidden;
+    overflow-wrap: break-word;
+}
+[dir='rtl'] .comment-main {
+    padding: 10px 0 10px 10px;
 }
 
-div.full-screen > button:hover {
-    background-color: rgba(0, 0, 0, .8);
+.comment-metadata {
+    flex-flow: row nowrap;
+    justify-content: space-between;
+}
+.comment-author {
+    font-weight: bold;
+    color: #333;
+}
+.comment-date {
+    color: #aaa;
+}
+.comment-text {
+    color: #333;
+    margin-top: 10px;
+    overflow-y: auto;
+    max-height: 250px;
+}
+.comment-text::-webkit-scrollbar {
+    border-left: none;
+}
+
+.note-save {
+    padding: 10px;
+}
+
+.note-save #new-comment-input {
+    width: 100%;
+    height: 100px;
+    max-height: 300px;
+    min-height: 100px;
+}
+
+.note-save .detail-section {
+    margin: 10px 0;
+}
+
+.note-report {
+    float: right;
+}
+
+
+/* Custom Data Editor
+------------------------------------------------------- */
+.data-header {
+    background-color: #f6f6f6;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+}
+
+.data-header-icon {
+    background-color: #fff;
+    padding: 10px;
+    flex: 0 0 62px;
+    position: relative;
+    width: 60px;
+    height: 60px;
+    border-right: 1px solid #ccc;
+    border-radius: 5px 0 0 5px;
+}
+[dir='rtl'] .data-header-icon {
+    border-right: unset;
+    border-left: 1px solid #ccc;
+    border-radius: 0 5px 5px 0;
+}
+
+.data-header-icon .icon-wrap {
+    position: absolute;
+    top: 0px;
 }
 
-/* Map Controls */
+.data-header-label {
+    background-color: #f6f6f6;
+    padding: 0 15px;
+    flex: 1 1 100%;
+    font-size: 14px;
+    font-weight: bold;
+    border-radius: 0 5px 5px 0;
+}
+[dir='rtl'] .data-header-label {
+    border-radius: 5px 0 0 5px;
+}
 
+/* tag editor - no buttons */
+.data-editor.raw-tag-editor button {
+    display: none;
+}
+.data-editor.raw-tag-editor .tag-row .key-wrap,
+.data-editor.raw-tag-editor .tag-row .input-wrap-position {
+    width: 50%;
+}
+
+
+/* Map Controls
+------------------------------------------------------- */
 .map-controls {
     right: 0;
     top: 132px;
@@ -5138,7 +5164,32 @@ div.full-screen > button:hover {
     background: #7092ff;
 }
 
-/* Zoomer */
+
+/* Fullscreen Button (disabled)
+------------------------------------------------------- */
+div.full-screen {
+    float: right;
+    width: 40px;
+    margin-right: 10px;
+}
+
+div.full-screen .tooltip {
+    min-width: 160px;
+}
+
+div.full-screen > button, div.full-screen > button.active {
+    width: 40px;
+    height: 40px;
+    background: transparent;
+}
+
+div.full-screen > button:hover {
+    background-color: rgba(0, 0, 0, .8);
+}
+
+
+/* Zoom Buttons
+------------------------------------------------------- */
 .zoombuttons > button.zoom-in {
     border-radius: 4px 0 0 0;
 }
@@ -5146,7 +5197,9 @@ div.full-screen > button:hover {
     border-radius: 0 4px 0 0;
 }
 
-/* Geolocator */
+
+/* Geolocate Button
+------------------------------------------------------- */
 .geolocate-control {
     margin-bottom: 10px;
 }
@@ -5157,7 +5210,9 @@ div.full-screen > button:hover {
     border-radius: 0 0 4px 0;
 }
 
-/* Pane Buttons */
+
+/* Background / Map Data / Help Pane buttons
+------------------------------------------------------- */
 .help-control > button {
     border-radius: 0 0 0 4px;
 }
@@ -5177,8 +5232,8 @@ div.full-screen > button:hover {
 }
 
 
-/* Background / Map Data Settings */
-
+/* Background / Map Data Settings
+------------------------------------------------------- */
 .map-data-control,
 .background-control {
     position: relative;
@@ -5209,23 +5264,21 @@ div.full-screen > button:hover {
 .layer-list > li:first-child {
     border-radius: 3px 3px 0 0;
 }
-
 .layer-list > li:last-child {
     border-radius: 0 0 3px 3px;
 }
-
 .layer-list > li:only-child {
     border-radius: 3px;
 }
-
 .layer-list li:not(:last-child) {
     border-bottom: 1px solid #ccc;
 }
-
 .layer-list li:hover {
     background-color: #ececec;
 }
 
+.layer-list li.active button,
+.layer-list li.switch button,
 .layer-list li.active,
 .layer-list li.switch {
     background: #e8ebff;
@@ -5237,11 +5290,7 @@ div.full-screen > button:hover {
     float: right;
 }
 
-[dir='rtl'] .list-item-gpx-browse svg {
-    transform: rotateY(180deg);
-}
-
-[dir='rtl'] .list-item-mvt-browse svg {
+[dir='rtl'] .list-item-data-browse svg {
     transform: rotateY(180deg);
 }
 
@@ -5264,9 +5313,45 @@ div.full-screen > button:hover {
     text-overflow: ellipsis;
 }
 
+.map-data-control .layer-list button,
+.background-control .layer-list button {
+    float: right;
+    height: 100%;
+    width: 10%;
+    border-left: 1px solid #ccc;
+    border-radius: 0;
+}
+[dir='rtl'] .map-data-control .layer-list button,
+[dir='rtl'] .background-control .layer-list button {
+    float: left;
+    border-left: none;
+    border-right: 1px solid #ccc;
+}
+
+.map-data-control .layer-list button .icon,
+.background-control .layer-list button .icon {
+    opacity: 0.5;
+}
+
+.map-data-control .layer-list button:first-of-type,
+.background-control .layer-list button:first-of-type {
+    border-radius: 0 3px 3px 0;
+}
+[dir='rtl'] .map-data-control .layer-list button:first-of-type,
+[dir='rtl'] .background-control .layer-list button:first-of-type {
+    border-radius: 3px 0 0 3px;
+}
+
+.map-data-control .vectortile-container .vectortile-header {
+    padding-bottom: 5px;
+}
+.map-data-control .vectortile-container .vectortile-footer {
+    padding-bottom: 10px;
+}
 
-/* Background Display Options */
 
+/* Background - Display Options Sliders
+------------------------------------------------------- */
 .display-options-container {
     padding: 10px;
 }
@@ -5299,8 +5384,8 @@ div.full-screen > button:hover {
 }
 
 
-/* Adjust Alignment controls */
-
+/* Background - Adjust Alignment
+------------------------------------------------------- */
 .background-control .nudge-container {
     border: 1px solid #ccc;
     border-radius: 4px;
@@ -5427,36 +5512,8 @@ div.full-screen > button:hover {
 }
 
 
-.map-data-control .layer-list button,
-.background-control .layer-list button {
-    float: right;
-    height: 100%;
-    width: 10%;
-    border-left: 1px solid #ccc;
-    border-radius: 0;
-}
-[dir='rtl'] .map-data-control .layer-list button,
-[dir='rtl'] .background-control .layer-list button {
-    float: left;
-    border-left: none;
-    border-right: 1px solid #ccc;
-}
-
-.map-data-control .layer-list button .icon,
-.background-control .layer-list button .icon {
-    opacity: 0.5;
-}
-
-.map-data-control .layer-list button:first-of-type,
-.background-control .layer-list button:first-of-type {
-    border-radius: 0 3px 3px 0;
-}
-[dir='rtl'] .map-data-control .layer-list button:first-of-type,
-[dir='rtl'] .background-control .layer-list button:first-of-type {
-    border-radius: 3px 0 0 3px;
-}
-
-/* Side panes */
+/* Side Panes - Background / Map Data / Help
+------------------------------------------------------- */
 .map-pane {
     position: fixed;
     top: 60px;
@@ -5502,9 +5559,9 @@ div.full-screen > button:hover {
     padding-bottom: 15px;
 }
 
-/* Help */
-
 
+/* Help
+------------------------------------------------------- */
 .help-wrap p {
     font-size: 15px;
     margin-bottom: 20px;
@@ -5605,9 +5662,8 @@ div.full-screen > button:hover {
 }
 
 
-/* Tiles
+/* Raster Background Tiles
 ------------------------------------------------------- */
-
 img.tile {
     position: absolute;
     transform-origin: 0 0;
@@ -5667,7 +5723,6 @@ img.tile-debug {
 
 /* Map
 ------------------------------------------------------- */
-
 #map {
     position: relative;
     overflow: hidden;
@@ -5695,6 +5750,7 @@ img.tile-debug {
     bottom: 0;
 }
 
+
 /* Map-In-Map
 ------------------------------------------------------- */
 .map-in-map {
@@ -5752,7 +5808,7 @@ img.tile-debug {
 }
 
 
-/* Debug
+/* Debug Data
 ------------------------------------------------------- */
 .debug {
     stroke: currentColor;
@@ -5791,7 +5847,8 @@ img.tile-debug {
     padding: 0 5px;
 }
 
-/* Info Box
+
+/* Information Panels
 ------------------------------------------------------- */
 .info-panels {
     display: flex;
@@ -5848,7 +5905,6 @@ img.tile-debug {
 .panel-title button.close:hover {
     color: #fff;
 }
-
 .panel-title button.close .icon {
     height: 20px;
     width: 16px;
@@ -5897,9 +5953,8 @@ img.tile-debug {
 }
 
 
-/* About Section
+/* About Section, Attribution, Footer
 ------------------------------------------------------- */
-
 #about {
     width: 100%;
     position: absolute;
@@ -5964,8 +6019,9 @@ img.tile-debug {
     height: 30px;
 }
 
-/* footer flash message */
 
+/* Footer - Flash messages
+------------------------------------------------------- */
 #flash-wrap {
     display: flex;
     flex: 0 0 100%;
@@ -6047,8 +6103,8 @@ img.tile-debug {
 }
 
 
-/* footer scale */
-
+/* Footer - Scale bar, About, Source Switcher
+------------------------------------------------------- */
 #scale-block {
     vertical-align: bottom;
     width: 250px;
@@ -6094,7 +6150,6 @@ img.tile-debug {
     shape-rendering: crispEdges;
 }
 
-
 #about-list {
     text-align: right;
     margin-right: 10px;
@@ -6123,7 +6178,6 @@ img.tile-debug {
     padding: 5px 5px 5px 0;
 }
 
-
 #about-list li:last-child {
     border-left: 0;
     margin-left: 0;
@@ -6176,8 +6230,8 @@ img.tile-debug {
     color: #ccf;
 }
 
-/* Notification Badges */
-
+/* Notification Badges
+------------------------------------------------------- */
 /* For an icon (e.g. new version) */
 .badge {
     display: inline-block;
@@ -6224,9 +6278,8 @@ img.tile-debug {
 }
 
 
-/* Modals
+/* Modals / Prompts
 ------------------------------------------------------- */
-
 .modal {
     top: 40px;
     display: inline-block;
@@ -6242,7 +6295,6 @@ img.tile-debug {
 .modal .loader {
     margin-bottom: 10px;
 }
-
 .modal .description {
     text-align: center;
 }
@@ -6256,7 +6308,6 @@ img.tile-debug {
     right: 0;
     overflow: auto;
 }
-
 .shaded:before {
     content:'';
     background: rgba(0,0,0,0.5);
@@ -6268,11 +6319,9 @@ img.tile-debug {
     padding: 20px;
     border-bottom: 1px solid #ccc;
 }
-
 .modal-section.header h3 {
     padding: 0;
 }
-
 .modal-section.buttons {
     text-align: center;
 }
@@ -6346,7 +6395,7 @@ img.tile-debug {
     color: #e06c5e;
 }
 
-/* Success Modal
+/* Success Screen / Community Index
 ------------------------------------------------------- */
 .save-success.body {
     overflow-y: scroll;
@@ -6548,6 +6597,28 @@ svg.mouseclick use.right {
 }
 
 
+/* Settings Modals
+------------------------------------------------------- */
+.settings-modal textarea {
+    height: 70px;
+}
+.settings-modal .buttons .button.col3 {
+    float: none;   /* undo float left */
+}
+
+.settings-custom-background .instructions-template {
+    margin-bottom: 20px;
+}
+
+.settings-custom-data .instructions-url {
+    margin-bottom: 10px;
+}
+.settings-custom-data .field-file,
+.settings-custom-data .instructions-template {
+    margin-bottom: 20px;
+}
+
+
 /* Save Mode
 ------------------------------------------------------- */
 .mode-save a.user-info {
@@ -6645,9 +6716,9 @@ svg.mouseclick use.right {
 
 .changeset-list li:first-child { border-top: 0;}
 
+
 /* Conflict resolution
 ------------------------------------------------------- */
-
 .conflicts-help {
     padding: 20px;
     background-color: #ffffbb;
@@ -6695,9 +6766,9 @@ svg.mouseclick use.right {
     height: 30px;
 }
 
-/* Notices
-------------------------------------------------------- */
 
+/* Notices (Zoom in to Edit)
+------------------------------------------------------- */
 .notice {
     position: absolute;
     top: 45px;
@@ -6729,9 +6800,9 @@ svg.mouseclick use.right {
     margin-right: 0;
 }
 
+
 /* Tooltips
 ------------------------------------------------------- */
-
 .tooltip {
     position: absolute;
     display: none;
@@ -6972,8 +7043,8 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
 }
 
 
-/* radial menu (deprecated) */
-
+/* Contextual Radial Menu (deprecated)
+------------------------------------------------------- */
 .radial-menu-tooltip {
     opacity: 0.8;
     display: none;
@@ -7011,8 +7082,9 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
     color: rgba(40,40,40,.5);
 }
 
-/* edit menu */
 
+/* Contextual Edit Menu
+------------------------------------------------------- */
 .edit-menu-tooltip {
     display: none;
     position: absolute;
@@ -7046,13 +7118,14 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
     color: #79f;
     pointer-events: none;
 }
-
 .edit-menu-item.disabled use {
     fill: rgba(32,32,32,.2);
     color: rgba(40,40,40,.2);
 }
 
 
+/* Lasso
+------------------------------------------------------- */
 .lasso-path {
     fill-opacity: 0.3;
     stroke: #fff;
@@ -7061,22 +7134,19 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
     stroke-dasharray: 5, 5;
 }
 
+
 /* Media Queries
 ------------------------------------------------------- */
-
 @media only screen and (max-width: 840px) {
     /* override hide for save button */
     #bar .save .label { display: block;}
 }
-
 @media screen and (max-width: 1200px) {
     .user-list { display: none !important; }
 }
-
 @media screen and (max-width: 1000px) {
     #userLink { display: none !important; }
 }
-
 @media screen and (max-width: 900px) {
     #scale-block { display: none !important; }
 }
@@ -7084,7 +7154,6 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
 
 /* Scrollbars
  ----------------------------------------------------- */
-
 ::-webkit-scrollbar {
     height: 20px;
     overflow: visible;
@@ -7111,9 +7180,9 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
     background-color: rgba(0,0,0,.05);
 }
 
+
 /* Intro walkthrough
  ----------------------------------------------------- */
-
 .curtain-darkness {
     pointer-events: all;
     fill-opacity: 0.7;
@@ -7275,3 +7344,5 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
     width: 100px;
     color: #7092ff;
 }
+
+