.ideditor button,
.ideditor input {
- line-height: normal;
+ line-height: inherit;
+ letter-spacing: inherit;
}
/* Hide default number spinner controls */
.ideditor input[type="number"]::-webkit-inner-spin-button,
.ideditor input[type="number"]::-webkit-outer-spin-button {
-display: none;
+ display: none;
+}
+.ideditor input[type=number] {
+ -moz-appearance: textfield;
}
/*
.ideditor input[type="search"] {
-webkit-appearance: none; /* 1 */
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box; /* 2 */
box-sizing: border-box;
}
/* No interactivity except what we specifically allow */
.ideditor .data-layer.osm *,
.ideditor .data-layer.notes *,
-.ideditor .data-layer.keepRight *,
-.ideditor .data-layer.improveOSM * {
+.ideditor .data-layer.keepRight * {
pointer-events: none;
}
-.ideditor .lasso #map {
+.ideditor .lasso .main-map {
pointer-events: visibleStroke;
}
/* `.target` objects are interactive */
/* They can be picked up, clicked, hovered, or things can connect to them */
-.ideditor .qa_error.target,
+.ideditor .qaItem.target,
.ideditor .note.target,
.ideditor .node.target,
.ideditor .turn .target {
stroke-linejoin: round;
}
+.ideditor[pointer='pen'] .way.target {
+ stroke-width: 18;
+}
+.ideditor[pointer='touch'] .way.target {
+ stroke-width: 32;
+}
+.ideditor[pointer='touch'] .node.vertex.target {
+ pointer-events: painted;
+ stroke: currentColor;
+ stroke-width: 10;
+}
/* `.target-nope` objects are explicitly forbidden to join to */
.ideditor .surface:not(.nope-disabled) .node.target.target-nope,
/* points, notes & QA */
/* points, notes, markers */
-.ideditor g.qa_error .stroke,
+.ideditor g.qaItem .stroke,
.ideditor g.note .stroke {
stroke: #222;
stroke-width: 1;
opacity: 0.6;
}
-.ideditor g.qa_error.active .stroke,
+.ideditor g.qaItem.active .stroke,
.ideditor g.note.active .stroke {
stroke: #222;
stroke-width: 1;
}
-.ideditor g.qa_error .shadow,
+.ideditor g.qaItem .shadow,
.ideditor g.point .shadow,
.ideditor g.note .shadow {
fill: none;
stroke-opacity: 0;
}
-.ideditor g.qa_error.hover:not(.selected) .shadow,
+.ideditor g.qaItem.hover:not(.selected) .shadow,
.ideditor g.note.hover:not(.selected) .shadow,
.ideditor g.point.related:not(.selected) .shadow,
.ideditor g.point.hover:not(.selected) .shadow {
stroke-opacity: 0.5;
}
-.ideditor g.qa_error.selected .shadow,
+.ideditor g.qaItem.selected .shadow,
.ideditor g.note.selected .shadow,
.ideditor g.point.selected .shadow {
stroke-opacity: 0.7;
font-size: 12px;
font-weight: bold;
fill: #333;
- -webkit-transition: opacity 100ms linear;
transition: opacity 100ms linear;
- -moz-transition: opacity 100ms linear;
}
/* Opera doesn't support dominant-baseline. See #715 */
/* Wikidata-tagged */
-.ideditor g.point.tag-wikidata path.stroke {
+.ideditor g.point.tag-wikidata path.stroke,
+.ideditor g.vertex.tag-wikidata circle.stroke {
stroke-width: 2px;
stroke: #666;
fill: #eee;
}
-.ideditor g.point.tag-wikidata .icon {
+.ideditor g.point.tag-wikidata .icon,
+.ideditor g.vertex.tag-wikidata .icon {
color: #666;
}
.ideditor path.stroke.tag-leisure-pitch,
.ideditor path.stroke.tag-leisure-track,
.ideditor path.stroke.tag-natural,
-.ideditor path.stroke.tag-natural-wood {
+.ideditor path.stroke.tag-natural-wood,
+.ideditor path.stroke.tag-golf-tee,
+.ideditor path.stroke.tag-golf-fairway,
+.ideditor path.stroke.tag-golf-rough,
+.ideditor path.stroke.tag-golf-green {
stroke: rgb(140, 208, 95);
}
.ideditor path.fill.tag-barrier-hedge,
.ideditor path.fill.tag-leisure-pitch,
.ideditor path.fill.tag-leisure-track,
.ideditor path.fill.tag-natural,
-.ideditor path.fill.tag-natural-wood {
+.ideditor path.fill.tag-natural-wood,
+.ideditor path.fill.tag-golf-tee,
+.ideditor path.fill.tag-golf-fairway,
+.ideditor path.fill.tag-golf-rough,
+.ideditor path.fill.tag-golf-green {
stroke: rgba(140, 208, 95, 0.3);
fill: rgba(140, 208, 95, 0.3);
}
.ideditor path.stroke.tag-amenity-fountain,
.ideditor path.stroke.tag-leisure-swimming_pool,
.ideditor path.stroke.tag-natural-bay,
+.ideditor path.stroke.tag-natural-strait,
.ideditor path.stroke.tag-natural-water {
stroke: rgb(119, 211, 222);
}
.ideditor path.fill.tag-amenity-fountain,
.ideditor path.fill.tag-leisure-swimming_pool,
.ideditor path.fill.tag-natural-bay,
+.ideditor path.fill.tag-natural-strait,
.ideditor path.fill.tag-natural-water {
stroke: rgba(119, 211, 222, 0.3);
fill: rgba(119, 211, 222, 0.3);
/* Tan things */
-.ideditor path.stroke.tag-landuse-farmyard {
+.ideditor path.stroke.tag-landuse-farmyard,
+.ideditor path.stroke.tag-leisure-horse_riding {
stroke: rgb(245, 220, 186);
}
-.ideditor path.fill.tag-landuse-farmyard {
+.ideditor path.fill.tag-landuse-farmyard,
+.ideditor path.fill.tag-leisure-horse_riding {
stroke: rgba(245, 220, 186, 0.3);
fill: rgba(245, 220, 186, 0.3);
}
-.ideditor .preset-icon-fill path.area.stroke.tag-landuse-farmyard {
+.ideditor .preset-icon-fill path.area.stroke.tag-landuse-farmyard
+.preset-icon-fill path.area.stroke.tag-leisure-horse_riding {
stroke: rgb(226, 177, 111);
}
.ideditor .pattern-color-farmyard {
.ideditor path.line.stroke.tag-highway-road {
stroke-width: 5;
}
+.ideditor path.line.casing.tag-highway-service.tag-service-driveway {
+ stroke-width: 6.25;
+}
+.ideditor path.line.stroke.tag-highway-service.tag-service-driveway {
+ stroke-width: 4.25;
+}
.ideditor path.line.shadow.tag-highway-path,
.ideditor path.line.shadow.tag-highway-footway,
.ideditor path.line.shadow.tag-highway-cycleway,
.ideditor path.line.shadow.tag-highway-bridleway,
.ideditor path.line.shadow.tag-highway-corridor,
+.ideditor path.line.shadow.tag-highway-ladder,
.ideditor path.line.shadow.tag-highway-steps {
stroke-width: 16;
}
.ideditor path.line.casing.tag-highway-cycleway,
.ideditor path.line.casing.tag-highway-bridleway,
.ideditor path.line.casing.tag-highway-corridor,
+.ideditor path.line.casing.tag-highway-ladder,
.ideditor path.line.casing.tag-highway-steps {
stroke-width: 5;
}
.ideditor path.line.stroke.tag-highway-cycleway,
.ideditor path.line.stroke.tag-highway-bridleway,
.ideditor path.line.stroke.tag-highway-corridor,
+.ideditor path.line.stroke.tag-highway-ladder,
.ideditor path.line.stroke.tag-highway-steps {
stroke-width: 3;
}
.ideditor .low-zoom path.line.stroke.tag-highway-road {
stroke-width: 3;
}
+.ideditor .low-zoom path.line.casing.tag-highway-service.tag-service-driveway {
+ stroke-width: 4.25;
+}
+.ideditor .low-zoom path.line.stroke.tag-highway-service.tag-service-driveway {
+ stroke-width: 2.25;
+}
.ideditor .low-zoom path.line.shadow.tag-highway-path,
.ideditor .low-zoom path.line.shadow.tag-highway-footway,
.ideditor .low-zoom path.line.shadow.tag-highway-cycleway,
.ideditor .low-zoom path.line.shadow.tag-highway-bridleway,
.ideditor .low-zoom path.line.shadow.tag-highway-corridor,
+.ideditor .low-zoom path.line.shadow.tag-highway-ladder,
.ideditor .low-zoom path.line.shadow.tag-highway-steps {
stroke-width: 12;
}
.ideditor .low-zoom path.line.casing.tag-highway-cycleway,
.ideditor .low-zoom path.line.casing.tag-highway-bridleway,
.ideditor .low-zoom path.line.casing.tag-highway-corridor,
+.ideditor .low-zoom path.line.casing.tag-highway-ladder,
.ideditor .low-zoom path.line.casing.tag-highway-steps {
stroke-width: 3;
}
.ideditor .low-zoom path.line.stroke.tag-highway-cycleway,
.ideditor .low-zoom path.line.stroke.tag-highway-bridleway,
.ideditor .low-zoom path.line.stroke.tag-highway-corridor,
+.ideditor .low-zoom path.line.stroke.tag-highway-ladder,
.ideditor .low-zoom path.line.stroke.tag-highway-steps {
stroke-width: 1;
}
}
/* service roads */
-.ideditor .preset-icon .icon.tag-highway-service {
- color: #fff;
- fill: #666;
-}
.ideditor path.line.stroke.tag-highway-service,
.ideditor path.line.stroke.tag-service {
stroke: #fff;
stroke: #666;
}
+.ideditor path.line.stroke.tag-highway-service.tag-service-parking_aisle {
+ stroke: #cccac7;
+}
+.ideditor path.line.stroke.tag-highway-service.tag-service-driveway {
+ stroke: #fff6e4;
+}
+.ideditor path.line.stroke.tag-highway-service.tag-service-emergency_access {
+ stroke: #ddb2aa;
+}
+
/* unmaintained track roads */
.ideditor path.line.stroke.tag-highway-track,
.ideditor path.line.stroke.tag-track {
.ideditor path.line.stroke.tag-public_transport-platform,
.ideditor path.line.stroke.tag-highway-platform,
.ideditor path.line.stroke.tag-railway-platform,
+.ideditor path.line.stroke.tag-railway-platform_edge,
.ideditor path.line.stroke.tag-man_made-pier {
stroke: #dca;
}
}
/* steps */
-.ideditor .preset-icon .icon.tag-highway-steps {
+.ideditor .preset-icon .icon.tag-highway-steps,
+.ideditor .preset-icon .icon.tag-highway-ladder {
color: #81d25c;
fill: #fff;
}
-.ideditor path.line.stroke.tag-highway-steps {
+.ideditor path.line.stroke.tag-highway-steps,
+.ideditor path.line.stroke.tag-highway-ladder {
stroke-linecap: butt;
stroke-dasharray: 3, 3;
}
-.ideditor .low-zoom path.line.stroke.tag-highway-steps {
+.ideditor .low-zoom path.line.stroke.tag-highway-steps,
+.ideditor .low-zoom path.line.stroke.tag-highway-ladder {
stroke-dasharray: 2, 2;
}
-.ideditor path.line.casing.tag-highway-steps {
+.ideditor path.line.casing.tag-highway-steps,
+.ideditor path.line.casing.tag-highway-ladder {
stroke: #fff;
stroke-linecap: round;
stroke-dasharray: none;
}
.ideditor path.line.stroke.tag-highway-steps,
-.ideditor .preset-icon-container path.line.casing.tag-highway-steps {
+.ideditor path.line.stroke.tag-highway-ladder,
+.ideditor .preset-icon-container path.line.casing.tag-highway-steps,
+.ideditor .preset-icon-container path.line.casing.tag-highway-ladder {
stroke: #81d25c;
}
-.ideditor .preset-icon-container path.line.stroke.tag-highway-steps {
+.ideditor .preset-icon-container path.line.stroke.tag-highway-steps,
+.ideditor .preset-icon-container path.line.stroke.tag-highway-ladder {
stroke: #fff;
}
.ideditor path.line.stroke.tag-highway.tag-footway-access_aisle {
stroke-dasharray: 4, 2;
+ stroke: #4c4444;
}
.ideditor .low-zoom path.line.stroke.tag-highway.tag-footway-access_aisle,
.ideditor .preset-icon-container path.stroke.tag-highway.tag-footway-access_aisle {
stroke-dasharray: 2.5, 1.5;
}
-.ideditor path.line.stroke.tag-highway.tag-footway-access_aisle {
- stroke: #4c4444;
-}
.ideditor .preset-icon .icon.tag-highway.tag-footway-access_aisle {
color: #4c4444;
}
/* highway midpoints */
.ideditor g.midpoint.tag-highway-corridor .fill,
.ideditor g.midpoint.tag-highway-steps .fill,
+.ideditor g.midpoint.tag-highway-ladder .fill,
.ideditor g.midpoint.tag-highway-path .fill,
.ideditor g.midpoint.tag-highway-footway .fill,
.ideditor g.midpoint.tag-highway-cycleway .fill,
}
.ideditor path.line.casing.tag-aeroway-taxiway,
.ideditor path.line.casing.tag-taxiway {
+ stroke: #666;
stroke-width: 7;
}
.ideditor path.line.stroke.tag-aeroway-taxiway,
.ideditor path.line.stroke.tag-taxiway {
+ stroke: #ff0;
stroke-width: 5;
}
.ideditor .low-zoom path.line.shadow.tag-aeroway-taxiway,
stroke-width: 3;
}
-.ideditor path.line.stroke.tag-aeroway-taxiway,
-.ideditor path.line.stroke.tag-taxiway {
- stroke: #ff0;
-}
-.ideditor path.line.casing.tag-aeroway-taxiway,
-.ideditor path.line.casing.tag-taxiway {
- stroke: #666;
-}
-
/* wide aeroways (runway) */
.ideditor .preset-icon .icon.tag-aeroway-runway,
.ideditor .preset-icon .icon.tag-runway {
.ideditor path.line.stroke.tag-railway {
stroke-width: 2;
stroke-linecap: butt;
- stroke-dasharray: 12,12;
+ stroke-dasharray: 12, 12;
}
.ideditor .low-zoom path.line.shadow.tag-railway {
stroke-width: 12;
}
.ideditor .low-zoom path.line.stroke.tag-railway {
stroke-width: 2;
- stroke-dasharray: 6,6;
+ stroke-dasharray: 6, 6;
}
.ideditor .preset-icon-container path.line.stroke.tag-railway:not(.tag-status),
.ideditor .preset-icon-container path.line.stroke.tag-railway.tag-status-disused {
stroke-dasharray: 6;
}
+.ideditor path.line.casing.tag-railway.tag-railway-platform_edge,
.ideditor path.line.casing.tag-railway.tag-railway-platform {
stroke-width: 0;
}
+.ideditor path.line.stroke.tag-railway.tag-railway-platform_edge,
.ideditor path.line.stroke.tag-railway.tag-railway-platform {
stroke-dasharray: none;
}
stroke: #eee;
}
-
.ideditor .preset-icon .icon.tag-railway.tag-status {
color: #999;
}
stroke: #808080;
}
-
.ideditor path.line.casing.tag-railway-subway {
stroke: #222;
}
/* wide waterways (river) */
-.ideditor path.line.shadow.tag-waterway-river {
+.ideditor path.line.shadow.tag-waterway-river,
+.ideditor path.line.shadow.tag-waterway-flowline {
stroke-width: 20;
}
-.ideditor path.line.casing.tag-waterway-river {
+.ideditor path.line.casing.tag-waterway-river,
+.ideditor path.line.casing.tag-waterway-flowline {
stroke-width: 10;
}
-.ideditor path.line.stroke.tag-waterway-river {
+.ideditor path.line.stroke.tag-waterway-river,
+.ideditor path.line.stroke.tag-waterway-flowline {
stroke-width: 8;
}
-.ideditor .low-zoom path.line.shadow.tag-waterway-river {
+.ideditor .low-zoom path.line.shadow.tag-waterway-river,
+.ideditor .low-zoom path.line.shadow.tag-waterway-flowline {
stroke-width: 16;
}
-.ideditor .low-zoom path.line.casing.tag-waterway-river {
+.ideditor .low-zoom path.line.casing.tag-waterway-river,
+.ideditor .low-zoom path.line.casing.tag-waterway-flowline {
stroke-width: 7;
}
-.ideditor .low-zoom path.line.stroke.tag-waterway-river {
+.ideditor .low-zoom path.line.stroke.tag-waterway-river,
+.ideditor .low-zoom path.line.stroke.tag-waterway-flowline {
stroke-width: 5;
}
+.ideditor path.line.stroke.tag-waterway-flowline {
+ stroke-opacity: 0.5;
+}
+.ideditor path.line.casing.tag-waterway-flowline {
+ display: none;
+}
+
/* ditch */
.ideditor .preset-icon .icon.tag-waterway-ditch {
stroke: #39a;
}
-/* narrow width miscellanous things */
+/* narrow width miscellaneous things */
.ideditor path.line.shadow.tag-aerialway,
.ideditor path.line.shadow.tag-attraction-summer_toboggan,
.ideditor path.line.shadow.tag-attraction-water_slide,
.ideditor path.line.shadow.tag-golf-cartpath,
.ideditor path.line.shadow.tag-man_made-pipeline,
.ideditor path.line.shadow.tag-natural-tree_row,
+.ideditor path.line.shadow.tag-roller_coaster-track,
+.ideditor path.line.shadow.tag-roller_coaster-support,
.ideditor path.line.shadow.tag-piste {
stroke-width: 16;
}
.ideditor path.line.casing.tag-golf-cartpath,
.ideditor path.line.casing.tag-man_made-pipeline,
.ideditor path.line.casing.tag-natural-tree_row,
+.ideditor path.line.casing.tag-roller_coaster-track,
+.ideditor path.line.casing.tag-roller_coaster-support,
.ideditor path.line.casing.tag-piste {
stroke-width: 7;
}
.ideditor path.line.stroke.tag-golf-cartpath,
.ideditor path.line.stroke.tag-man_made-pipeline,
.ideditor path.line.stroke.tag-natural-tree_row,
+.ideditor path.line.stroke.tag-roller_coaster-track,
+.ideditor path.line.stroke.tag-roller_coaster-support,
.ideditor path.line.stroke.tag-piste {
stroke-width: 5;
}
.ideditor .low-zoom path.line.shadow.tag-golf-cartpath,
.ideditor .low-zoom path.line.shadow.tag-man_made-pipeline,
.ideditor .low-zoom path.line.shadow.tag-natural-tree_row,
+.ideditor .low-zoom path.line.shadow.tag-roller_coaster-track,
+.ideditor .low-zoom path.line.shadow.tag-roller_coaster-support,
.ideditor .low-zoom path.line.shadow.tag-piste {
stroke-width: 12;
}
.ideditor .low-zoom path.line.casing.tag-golf-cartpath,
.ideditor .low-zoom path.line.casing.tag-man_made-pipeline,
.ideditor .low-zoom path.line.casing.tag-natural-tree_row,
+.ideditor .low-zoom path.line.casing.tag-roller_coaster-track,
+.ideditor .low-zoom path.line.casing.tag-roller_coaster-support,
.ideditor .low-zoom path.line.casing.tag-piste {
stroke-width: 5;
}
.ideditor .low-zoom path.line.stroke.tag-golf-cartpath,
.ideditor .low-zoom path.line.stroke.tag-man_made-pipeline,
.ideditor .low-zoom path.line.stroke.tag-natural-tree_row,
+.ideditor .low-zoom path.line.stroke.tag-roller_coaster-track,
+.ideditor .low-zoom path.line.stroke.tag-roller_coaster-support,
.ideditor .low-zoom path.line.stroke.tag-piste {
stroke-width: 3;
}
stroke-width: 16;
}
.ideditor path.line.stroke.tag-route-ferry {
+ stroke: #58a9ed;
stroke-width: 3;
stroke-linecap: butt;
stroke-dasharray: 12,8;
stroke-width: 2;
stroke-dasharray: 6,4;
}
-.ideditor path.line.stroke.tag-route-ferry {
- stroke: #58a9ed;
-}
.ideditor path.line.casing.tag-route-ferry {
stroke: none;
}
stroke: #3d6c71;
}
+.ideditor path.line.stroke.tag-roller_coaster-track {
+ stroke: #dddddd;
+ stroke-width: 3;
+ stroke-dasharray: 5, 1;
+ stroke-linecap: butt;
+}
+.ideditor path.line.casing.tag-roller_coaster-track {
+ stroke: #707070;
+}
+
+.ideditor path.line.stroke.tag-roller_coaster-support {
+ stroke: #707070;
+}
+.ideditor path.line.casing.tag-roller_coaster-support {
+ visibility: hidden;
+}
+
/* golf cartpaths (like service roads) */
.ideditor .preset-icon .icon.tag-golf-cartpath {
.ideditor path.line.casing.tag-bridge {
stroke-opacity: 0.6;
stroke: #000 !important;
+ stroke-width: 16;
stroke-linecap: butt;
stroke-dasharray: none;
}
.ideditor path.line.shadow.tag-bridge {
stroke-width: 24;
}
-.ideditor path.line.casing.tag-bridge {
- stroke-width: 16;
-}
.ideditor .low-zoom path.line.shadow.tag-bridge {
stroke-width: 16;
}
.ideditor path.line.shadow.tag-highway-service.tag-bridge,
.ideditor path.line.shadow.tag-highway-track.tag-bridge,
.ideditor path.line.shadow.tag-highway-steps.tag-bridge,
+.ideditor path.line.shadow.tag-highway-ladder.tag-bridge,
.ideditor path.line.shadow.tag-highway-footway.tag-bridge,
.ideditor path.line.shadow.tag-highway-cycleway.tag-bridge,
.ideditor path.line.shadow.tag-highway-bridleway.tag-bridge {
.ideditor path.line.casing.tag-highway-service.tag-bridge,
.ideditor path.line.casing.tag-highway-track.tag-bridge,
.ideditor path.line.casing.tag-highway-steps.tag-bridge,
+.ideditor path.line.casing.tag-highway-ladder.tag-bridge,
.ideditor path.line.casing.tag-highway-footway.tag-bridge,
.ideditor path.line.casing.tag-highway-cycleway.tag-bridge,
.ideditor path.line.casing.tag-highway-bridleway.tag-bridge {
.ideditor .low-zoom path.line.shadow.tag-highway-service.tag-bridge,
.ideditor .low-zoom path.line.shadow.tag-highway-track.tag-bridge,
.ideditor .low-zoom path.line.shadow.tag-highway-steps.tag-bridge,
+.ideditor .low-zoom path.line.shadow.tag-highway-ladder.tag-bridge,
.ideditor .low-zoom path.line.shadow.tag-highway-footway.tag-bridge,
.ideditor .low-zoom path.line.shadow.tag-highway-cycleway.tag-bridge,
.ideditor .low-zoom path.line.shadow.tag-highway-bridleway.tag-bridge {
.ideditor .low-zoom path.line.casing.tag-highway-service.tag-bridge,
.ideditor .low-zoom path.line.casing.tag-highway-track.tag-bridge,
.ideditor .low-zoom path.line.casing.tag-highway-steps.tag-bridge,
+.ideditor .low-zoom path.line.casing.tag-highway-ladder.tag-bridge,
.ideditor .low-zoom path.line.casing.tag-highway-footway.tag-bridge,
.ideditor .low-zoom path.line.casing.tag-highway-cycleway.tag-bridge,
.ideditor .low-zoom path.line.casing.tag-highway-bridleway.tag-bridge {
}
.ideditor path.line.casing.tag-tunnel,
.ideditor path.line.casing.tag-location-underground,
-.ideditor path.line.stroke.tag-location-underwater {
+.ideditor path.line.casing.tag-location-underwater {
stroke-opacity: 0.5;
stroke-linecap: butt;
stroke-dasharray: none;
stroke-dasharray: 8, 8;
}
+/** Closed Paths */
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-path,
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-footway,
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-cycleway,
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-bridleway,
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-corridor,
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-steps,
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-construction.tag-construction-ladder {
+ stroke-width: 15;
+}
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-path,
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-footway,
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-cycleway,
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-bridleway,
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-corridor,
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-steps,
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-construction.tag-construction-ladder {
+ stroke-width: 5;
+ stroke-linecap: butt;
+ stroke-dasharray: none
+}
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-path,
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-footway,
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-cycleway,
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-bridleway,
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-corridor,
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-steps,
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-construction.tag-construction-ladder {
+ stroke-width: 4;
+ stroke-linecap: butt;
+ stroke-dasharray: 10, 10;
+}
+
+/** Proposed Paths */
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-path,
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-footway,
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-cycleway,
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-bridleway,
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-steps,
+.ideditor path.line.shadow.tag-highway.tag-status.tag-status-proposed.tag-proposed-ladder {
+ stroke-width: 15;
+}
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-path,
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-footway,
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-cycleway,
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-bridleway,
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-steps,
+.ideditor path.line.casing.tag-highway.tag-status.tag-status-proposed.tag-proposed-ladder {
+ stroke-width: 4.5;
+}
+.ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-path,
+.ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-footway,
+.ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-cycleway,
+.ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-bridleway,
+.ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-steps,
+.ideditor path.line.casing.tag-highway.tag-bridge.tag-status.tag-status-proposed.tag-proposed-ladder {
+ stroke-width: 10;
+}
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-path,
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-footway,
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-cycleway,
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-bridleway,
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-steps,
+.ideditor path.line.stroke.tag-highway.tag-status.tag-status-proposed.tag-proposed-ladder {
+ stroke-width: 3;
+}
/* Buildings */
.ideditor path.stroke.tag-building {
}
.ideditor .map-in-map,
-.ideditor #map {
+.ideditor .main-map {
cursor: auto; /* Opera */
cursor: url(<%= asset_path("iD/img/cursor-grab.png") %>) 9 9, auto; /* FF */
}
.ideditor.mode-browse .point,
-.ideditor.mode-select .point {
+.ideditor.mode-select .point,
+.ideditor.mode-select-data .point,
+.ideditor.mode-select-error .point,
+.ideditor.mode-select-note .point {
cursor: pointer; /* Opera */
cursor: url(<%= asset_path("iD/img/cursor-select-point.png") %>), pointer; /* FF */
}
+.ideditor.mode-browse .vertex,
.ideditor.mode-select .vertex,
-.ideditor.mode-browse .vertex {
+.ideditor.mode-select-data .vertex,
+.ideditor.mode-select-error .vertex,
+.ideditor.mode-select-note .vertex {
cursor: pointer; /* Opera */
cursor: url(<%= asset_path("iD/img/cursor-select-vertex.png") %>), pointer; /* FF */
}
.ideditor.mode-browse .line,
-.ideditor.mode-select .line {
+.ideditor.mode-select .line,
+.ideditor.mode-select-data .line,
+.ideditor.mode-select-error .line,
+.ideditor.mode-select-note .line {
cursor: pointer; /* Opera */
cursor: url(<%= asset_path("iD/img/cursor-select-line.png") %>), pointer; /* FF */
}
+.ideditor.mode-browse .area,
.ideditor.mode-select .area,
-.ideditor.mode-browse .area {
+.ideditor.mode-select-data .area,
+.ideditor.mode-select-error .area,
+.ideditor.mode-select-note .area {
cursor: pointer; /* Opera */
cursor: url(<%= asset_path("iD/img/cursor-select-area.png") %>), pointer; /* FF */
}
+.ideditor.mode-browse .midpoint,
.ideditor.mode-select .midpoint,
-.ideditor.mode-browse .midpoint {
+.ideditor.mode-select-data .midpoint,
+.ideditor.mode-select-error .midpoint,
+.ideditor.mode-select-note .midpoint {
cursor: pointer; /* Opera */
cursor: url(<%= asset_path("iD/img/cursor-select-split.png") %>), pointer; /* FF */
}
cursor: url(<%= asset_path("iD/img/cursor-select-remove.png") %>), pointer; /* FF */
}
-.ideditor.mode-add-preset #map,
-.ideditor.mode-draw-line #map,
-.ideditor.mode-draw-area #map,
-.ideditor.mode-add-line #map,
-.ideditor.mode-add-area #map,
-.ideditor.mode-drag-node #map,
-.ideditor.mode-drag-note #map {
+.ideditor.mode-add-preset .main-map,
+.ideditor.mode-draw-line .main-map,
+.ideditor.mode-draw-area .main-map,
+.ideditor.mode-add-line .main-map,
+.ideditor.mode-add-area .main-map,
+.ideditor.mode-drag-node .main-map,
+.ideditor.mode-drag-note .main-map {
cursor: crosshair; /* Opera */
cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */
}
cursor: url(<%= asset_path("iD/img/cursor-draw-connect-vertex.png") %>) 9 9, crosshair; /* FF */
}
-.ideditor.mode-add-point #map,
-.ideditor.mode-add-note #map,
-.ideditor.mode-browse.lasso #map,
+.ideditor.mode-add-point .main-map,
+.ideditor.mode-add-note .main-map,
+.ideditor.mode-browse.lasso .main-map,
.ideditor.mode-browse.lasso .way,
.ideditor.mode-browse.lasso .vertex,
.ideditor.mode-browse.lasso .midpoint,
-.ideditor.mode-select.lasso #map,
+.ideditor.mode-select.lasso .main-map,
.ideditor.mode-select.lasso .way,
.ideditor.mode-select.lasso .vertex,
.ideditor.mode-select.lasso .midpoint {
}
.ideditor.mode-browse .note,
-.ideditor.mode-browse .qa_error,
.ideditor.mode-select .note,
-.ideditor.mode-select .qa_error,
+.ideditor.mode-select-data .note,
+.ideditor.mode-select-error .note,
+.ideditor.mode-select-note .note {
+ cursor: pointer;
+}
+
+.ideditor.mode-browse .qaItem,
+.ideditor.mode-select .qaItem,
+.ideditor.mode-select-data .qaItem,
+.ideditor.mode-select-error .qaItem,
+.ideditor.mode-select-note .qaItem {
+ cursor: pointer;
+}
+
+/* turn restriction editor */
.ideditor .turn rect,
.ideditor .turn circle {
cursor: pointer;
}
+/* legend */
+.ideditor li.list-item-photos.active:after {
+ display: block;
+ content: "";
+ height: 100%;
+ position: absolute;
+ right: 0;
+ width: 8px;
+}
+.ideditor[dir='rtl'] li.list-item-photos.active:after {
+ right: auto;
+ left: 0;
+}
+
/* photo viewer div */
-.ideditor #photoviewer {
+.ideditor .photoviewer {
position: relative;
flex-shrink: 0;
margin-bottom: 10px;
padding: 5px;
background-color: #fff;
}
-.ideditor[dir='ltr'] #photoviewer {
+.ideditor[dir='ltr'] .photoviewer {
margin-left: 10px;
margin-right: 2px;
}
-.ideditor[dir='rtl'] #photoviewer {
+.ideditor[dir='rtl'] .photoviewer {
margin-right: 10px;
margin-left: 2px;
}
@media screen and (min-width: 1600px) {
- .ideditor #photoviewer {
+ .ideditor .photoviewer {
width: 490px;
height: 370px;
}
}
-.ideditor #photoviewer button.thumb-hide {
+.ideditor .photoviewer button.thumb-hide {
border-radius: 0;
padding: 5px;
position: absolute;
z-index: 50;
}
-.ideditor #photoviewer button.resize-handle-xy {
+.ideditor .photoviewer button.set-photo-from-viewer {
+ border-radius: 0;
+ padding: 5px;
+ position: absolute;
+ left: 5px;
+ top: 5px;
+ z-index: 50;
+}
+
+.ideditor .photoviewer button.resize-handle-xy {
border-radius: 0;
position: absolute;
top: 0;
width: 25px;
}
-.ideditor #photoviewer button.resize-handle-x {
+.ideditor .photoviewer button.resize-handle-x {
border-radius: 0;
position: absolute;
top: 0;
width: 6px;
}
-.ideditor #photoviewer button.resize-handle-y {
+.ideditor .photoviewer button.resize-handle-y {
border-radius: 0;
position: absolute;
top: 0;
}
-.ideditor .photo-wrapper,
-.ideditor .photo-wrapper img {
+.ideditor .photo-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
- object-fit: cover;
}
.ideditor .photo-wrapper .photo-attribution {
width: 100%;
font-size: 10px;
text-align: right;
- line-height: 1.1em;
- padding: 4px 2px;
+ line-height: 150%;
+ padding: 4px 8px;
z-index: 10;
}
+.ideditor .photo-attribution-dual {
+ display: flex;
+ justify-content: space-between;
+}
.ideditor .photo-attribution a,
.ideditor .photo-attribution a:visited,
.ideditor .photo-attribution span {
padding: 4px 2px;
color: #fff;
+ text-wrap: nowrap;
}
/* markers and sequences */
pointer-events: none;
}
.ideditor.mode-browse .viewfield-group,
-.ideditor.mode-select .viewfield-group {
+.ideditor.mode-select .viewfield-group,
+.ideditor.mode-select-data .viewfield-group,
+.ideditor.mode-select-error .viewfield-group,
+.ideditor.mode-select-note .viewfield-group {
pointer-events: visible;
cursor: pointer;
}
.ideditor .sequence {
fill: none;
stroke-width: 2;
- stroke-opacity: 0.4;
+ stroke-opacity: 0.6;
}
.ideditor .sequence.highlighted,
.ideditor .sequence.currentView {
/* Streetside Image Layer */
+.ideditor li.list-item-photos.list-item-streetside.active:after {
+ background-color: #0fffc4;
+}
.ideditor .layer-streetside-images {
pointer-events: none;
}
stroke-opacity: 0.85; /* bump opacity - only one per road */
}
+/* Vegbilder Image Layer */
+.ideditor li.list-item-photos.list-item-vegbilder.active:after {
+ background-color: #ed1c2e;
+}
+.ideditor .layer-vegbilder {
+ pointer-events: none;
+}
+.ideditor .layer-vegbilder .viewfield-group * {
+ fill: #ed1c2e;
+}
+.ideditor .layer-vegbilder .sequence {
+ stroke: #ed1c2e;
+ stroke-opacity: 0.85; /* bump opacity - only one per road */
+}
+
/* Mapillary Image Layer */
+.ideditor li.list-item-photos.list-item-mapillary.active:after {
+ background-color: #55ff22;
+}
.ideditor .layer-mapillary {
pointer-events: none;
}
.ideditor .layer-mapillary-detections .icon-detected rect {
fill: none;
}
-.ideditor .layer-mapillary-detections .icon-detected:hover rect {
+.ideditor .layer-mapillary-detections .icon-detected:active {
+ opacity: 1;
+}
+.ideditor .layer-mapillary-detections .icon-detected:active rect {
outline: 3px solid rgba(255, 238, 0, 0.6);
}
-.ideditor .layer-mapillary-detections .icon-detected.currentView rect {
- outline: 3px solid rgba(255, 238, 0, 1);
+@media (hover: hover) {
+ .ideditor .layer-mapillary-detections .icon-detected:hover {
+ opacity: 1;
+ }
+ .ideditor .layer-mapillary-detections .icon-detected:hover rect {
+ outline: 3px solid rgba(255, 238, 0, 0.6);
+ }
}
-.ideditor .layer-mapillary-detections .icon-detected:hover,
.ideditor .layer-mapillary-detections .icon-detected.currentView {
opacity: 1;
}
+.ideditor .layer-mapillary-detections .icon-detected.currentView rect {
+ outline: 3px solid rgba(255, 238, 0, 1);
+}
-/* OpenStreetCam Image Layer */
-.ideditor .layer-openstreetcam {
+/* KartaView Image Layer */
+.ideditor li.list-item-photos.list-item-kartaview.active:after {
+ background-color: #20c4ff;
+}
+.ideditor .layer-kartaview {
pointer-events: none;
}
-.ideditor .layer-openstreetcam .viewfield-group * {
+.ideditor .layer-kartaview .viewfield-group * {
fill: #20c4ff;
}
-.ideditor .layer-openstreetcam .sequence {
+.ideditor .layer-kartaview .sequence {
stroke: #20c4ff;
}
+/* Mapilio Image Layer */
+.ideditor li.list-item-photos.list-item-mapilio.active:after {
+ background-color: #0056f1;
+}
+.ideditor .layer-mapilio {
+ pointer-events: none;
+}
+.ideditor .layer-mapilio .viewfield-group * {
+ fill: #0056f1;
+ stroke: #ffffff;
+ stroke-opacity: .6;
+ fill-opacity: .6;
+}
+.ideditor .layer-mapilio .sequence {
+ stroke: #0056f1;
+}
+.ideditor .photo-controls-mapilio {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 4px;
+}
+.ideditor .photo-controls-mapilio button {
+ padding:0 6px;
+ pointer-events: initial;
+}
+.ideditor .mapilio-wrapper {
+ position: relative;
+ background-color: #000;
+ background-image: url(<%= asset_path("iD/img/loader-black.gif") %>);
+ background-position: center;
+ background-repeat: no-repeat;
+}
+.ideditor #ideditor-viewer-mapilio-simple-wrap {
+ height: 100%;
+}
+.ideditor #ideditor-viewer-mapilio-simple {
+ width: 100%;
+ height: 100%;
+ transform-origin: 0 0;
+}
+.ideditor #ideditor-viewer-mapilio-simple img {
+ width: 100%;
+ height: 100%;
+ -o-object-fit: cover;
+ object-fit: cover;
+ overflow: hidden;
+}
+
+/* panoramax Image Layer */
+.ideditor li.list-item-photos.list-item-panoramax.active:after {
+ background-color: #ff6f00;
+}
+.ideditor .layer-panoramax {
+ pointer-events: none;
+}
+.ideditor .layer-panoramax .viewfield-group * {
+ fill: #ff6f00;
+ stroke: #ffffff;
+ stroke-opacity: .6;
+ fill-opacity: .6;
+}
+.ideditor .layer-panoramax .sequence {
+ stroke: #ff6f00;
+}
+.ideditor .photo-controls-panoramax {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 4px;
+}
+.ideditor .photo-controls-panoramax button {
+ padding:0 6px;
+ pointer-events: initial;
+}
+
+.ideditor label.panoramax-hd {
+ float: left;
+ cursor: pointer;
+}
+.ideditor .panoramax-hd span {
+ margin-top: 2px;
+}
+.ideditor .panoramax-hd input[type="checkbox"] {
+ width: 12px;
+ height: 12px;
+ margin: 0 2px;
+}
+
+.ideditor .slider-wrap {
+ display: inline-block;
+}
+
+.ideditor .year-datalist {
+ display: flex;
+ justify-content: space-between;
+}
+
+.ideditor .list-option-date-slider{
+ direction: rtl
+}
+
+
/* Streetside Viewer (pannellum) */
+.ideditor .ms-wrapper .photo-attribution {
+ line-height: 1.1em;
+ padding: 4px 2px;
+}
.ideditor .ms-wrapper .photo-attribution .image-link {
display: block;
}
text-align: right;
}
-.ideditor .ms-wrapper .photo-attribution a:active,
-.ideditor .ms-wrapper .photo-attribution a:hover {
+.ideditor .ms-wrapper .photo-attribution a:active {
color: #0fffc4;
}
+@media (hover: hover) {
+ .ideditor .ms-wrapper .photo-attribution a:hover {
+ color: #0fffc4;
+ }
+}
-.ideditor .ms-wrapper .pnlm-compass.pnlm-control {
+.ideditor .ms-wrapper .pnlm-compass.pnlm-control,
+.ideditor .vegbilder-wrapper .pnlm-compass.pnlm-control,
+.ideditor .panoramax-wrapper .pnlm-compass.pnlm-control {
width: 26px;
height: 26px;
left: 4px;
margin: 0 5px;
}
+.ideditor .pnlm-zoom-controls {
+ margin-top: 6px;
+}
+
/* Mapillary viewer */
-.ideditor #mly .domRenderer .TagSymbol {
+.ideditor #ideditor-mly .domRenderer .TagSymbol {
font-size: 10px;
background-color: rgba(0,0,0,0.4);
padding: 0 4px;
border-radius: 4px;
top: -25px;
}
-.ideditor #mly .domRenderer .Attribution {
- /* we will roll our own to avoid async update issues like #4526 */
- display: none;
+
+.ideditor .mly-wrapper .mapillary-attribution-container {
+ display: flex;
+ align-items: center;
+}
+
+.ideditor .mly-wrapper .mapillary-attribution-container .mapillary-attribution-icon-container {
+ display: flex;
+ align-items: center;
}
-.ideditor .mly-wrapper .photo-attribution a:active,
-.ideditor .mly-wrapper .photo-attribution a:hover {
- color: #35af6d;
+.ideditor .mapillary-attribution-image-container {
+ height: auto;
}
-.ideditor .mly-wrapper .mapillary-js-dom {
- z-index: 9;
+.ideditor .mly-wrapper .mapillary-attribution-container .mapillary-attribution-username {
+ padding: 0px 8px 0 6px;
}
+.ideditor .mly-wrapper .mapillary-attribution-container .mapillary-attribution-date {
+ margin-right: 6px;
+}
-/* OpenStreetCam viewer */
-.ideditor .osc-wrapper {
+/* KartaView viewer */
+.ideditor .kartaview-wrapper {
position: relative;
background-color: #000;
background-image: url(<%= asset_path("iD/img/loader-black.gif") %>);
background-repeat: no-repeat;
}
-.ideditor .osc-wrapper .photo-attribution a:active,
-.ideditor .osc-wrapper .photo-attribution a:hover {
+.ideditor .kartaview-wrapper img {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ -o-object-fit: cover;
+ object-fit: cover;
+}
+
+.ideditor .kartaview-wrapper .photo-attribution a:active {
color: #20c4ff;
}
+@media (hover: hover) {
+ .ideditor .kartaview-wrapper .photo-attribution a:hover {
+ color: #20c4ff;
+ }
+}
-.ideditor .osc-image-wrap {
+.ideditor .kartaview-image-wrap {
width: 100%;
height: 100%;
- transform-origin:0 0;
- -ms-transform-origin:0 0;
- -webkit-transform-origin:0 0;
- -moz-transform-origin:0 0;
- -o-transform-origin:0 0;
+ transform-origin: 0 0;
+}
+
+.ideditor .photo-wrapper {
+ position: relative;
+ background-color: #000;
+ background-image: url(<%= asset_path("iD/img/loader-black.gif") %>);
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+.ideditor .photoviewer .plane-frame {
+ height: 100%;
+ width: 100%;
+ transform-origin: 0 0;
}
+.ideditor .photoviewer .plane-frame > img.plane-photo {
+ width: auto;
+ height: 100%;
+ transform-origin: 0 0;
+}
/* photo-controls (step forward, back, rotate) */
.ideditor .photo-controls-wrap {
top: 10px;
width: 100%;
z-index: 10;
+ pointer-events: none;
}
.ideditor .photo-controls {
display: inline-block;
z-index: 10;
+ pointer-events: initial;
}
.ideditor .photo-controls button,
.ideditor .photo-controls button:focus {
height: 18px;
width: 18px;
+ line-height: 18px;
background: rgba(0,0,0,0.65);
color: #eee;
border-radius: 0;
.ideditor .photo-controls button:last-of-type {
border-radius: 0 3px 3px 0;
}
-.ideditor .photo-controls button:hover,
.ideditor .photo-controls button:active {
background: rgba(0,0,0,0.85);
color: #fff;
}
-
-/* OSM Notes and KeepRight Layers */
-
-.ideditor .error-header-icon .qa_error-fill,
-.ideditor .layer-keepRight .qa_error .qa_error-fill,
-.ideditor .layer-improveOSM .qa_error .qa_error-fill {
- stroke: #333;
- stroke-width: 1.3px; /* NOTE: likely a better way to scale the icon stroke */
+@media (hover: hover) {
+ .ideditor .photo-controls button:hover {
+ background: rgba(0,0,0,0.85);
+ color: #fff;
+ }
}
-.ideditor .note-header-icon .note-fill,
-.ideditor .layer-notes .note .note-fill {
- color: #f30;
- stroke: #333;
- stroke-width: 40px;
+/* local georeferenced photos */
+.ideditor .layer-local-photos {
+ pointer-events: none;
}
-.ideditor .note-header-icon.new .note-fill,
-.ideditor .layer-notes .note.new .note-fill {
- color: #fe0;
- stroke: #333;
- stroke-width: 40px;
+.ideditor .layer-local-photos .viewfield-group * {
+ fill: #ed00d9;
}
-.ideditor .note-header-icon.closed .note-fill,
-.ideditor .layer-notes .note.closed .note-fill {
- color: #5d0;
- stroke: #333;
- stroke-width: 40px;
+.ideditor .local-photos {
+ display: flex;
}
-
-/* slight adjustments to preset icon for note icons */
-.ideditor .note-header-icon .preset-icon-28 {
- top: 18px;
+.ideditor .local-photos > div {
+ width: 50%;
}
-.ideditor .note-header-icon .note-icon-annotation {
- position: absolute;
+.ideditor .local-photos > div:first-child {
+ margin-right: 20px;
+}
+
+.ideditor .list-local-photos {
+ max-height: 40vh;
+ overflow-y: scroll;
+ overflow-x: auto;
+ /* workaround for something like "overflow-x: visible"
+ see https://stackoverflow.com/a/39554003 */
+ margin-left: -100px;
+ padding-left: 100px;
+ margin-top: -20px;
+ padding-top: 20px;
+ min-height: 100px;
+}
+.ideditor .list-local-photos::-webkit-scrollbar {
+ border-left: none;
+}
+.ideditor .list-local-photos li {
+ list-style: none;
+ display: flex;
+ justify-content: space-between;
+ height: 30px;
+}
+.ideditor .list-local-photos span.filename {
+ display: block;
+ width: 100%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ line-height: 30px;
+ padding-left: 8px;
+ border-bottom: 1px solid #ccc;
+ border-left: 1px solid #ccc;
+ border-right: 1px solid #ccc;
+}
+.ideditor .list-local-photos li:first-child span.filename {
+ border-top: 1px solid #ccc;
+ border-top-left-radius: 4px;
+}
+.ideditor .list-local-photos li:first-child button {
+ border-top: 1px solid #ccc;
+}
+.ideditor .list-local-photos li:first-child button.remove {
+ border-top-right-radius: 4px;
+}
+.ideditor .list-local-photos li:last-child span.filename {
+ border-bottom-left-radius: 4px;
+}
+.ideditor .list-local-photos li:last-child button.remove {
+ border-bottom-right-radius: 4px;
+}
+.ideditor .list-local-photos li.invalid button.zoom-to-data {
+ display: none;
+}
+.ideditor .list-local-photos li button.no-geolocation {
+ display: none;
+}
+.ideditor .list-local-photos li.invalid button.no-geolocation {
+ display: block;
+ color: red;
+}
+.ideditor .list-local-photos .placeholder div {
+ display: block;
+ height: 40px;
+ width: 40px;
+ background-position: center;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-image: url(<%= asset_path("iD/img/loader-black.gif") %>);
+ filter: invert(1);
+}
+.ideditor .local-photos label.button {
+ background: #7092ff;
+ color: #fff;
+ font-weight: bold;
+ padding: 10px 25px;
+ text-align: center;
+ font-size: 12px;
+ display: inline-block;
+ border-radius: 4px;
+ cursor: pointer;
+}
+
+
+/* OSM Notes and QA Layers */
+
+.ideditor .qa-header-icon .qaItem-fill,
+.ideditor .layer-keepRight .qaItem .qaItem-fill,
+.ideditor .layer-osmose .qaItem .qaItem-fill {
+ stroke: #333;
+ stroke-width: 1.3px; /* NOTE: likely a better way to scale the icon stroke */
+}
+
+.ideditor .note-header-icon .note-fill,
+.ideditor .layer-notes .note .note-fill {
+ color: #f30;
+ stroke: #333;
+ stroke-width: 40px;
+}
+.ideditor .note-header-icon.new .note-fill,
+.ideditor .layer-notes .note.new .note-fill {
+ color: #fe0;
+ stroke: #333;
+ stroke-width: 40px;
+}
+.ideditor .note-header-icon.closed .note-fill,
+.ideditor .layer-notes .note.closed .note-fill {
+ color: #5d0;
+ stroke: #333;
+ stroke-width: 40px;
+}
+
+/* slight adjustments to preset icon for note icons */
+.ideditor .note-header-icon .preset-icon-28 {
+ top: 18px;
+}
+.ideditor .note-header-icon .note-icon-annotation {
+ position: absolute;
top: 22px;
left: 22px;
margin: auto;
height: 15px;
}
-/* adjustment for error icon */
-
-.ideditor .error-header-icon .preset-icon-28 {
+/* adjustment to center QA icons */
+.ideditor .qa-header-icon .preset-icon-28 {
top: auto;
left: auto;
}
-
-.ideditor .error-header-icon {
+.ideditor .qa-header-icon {
display: flex;
align-items: center;
justify-content: center;
}
-/* Keep Right Errors
+/* Keep Right Issues
------------------------------------------------------- */
-.ideditor .keepRight.error_type-20,
-.ideditor .keepRight.error_type-40,
-.ideditor .keepRight.error_type-210,
-.ideditor .keepRight.error_type-270,
-.ideditor .keepRight.error_type-310,
-.ideditor .keepRight.error_type-320,
-.ideditor .keepRight.error_type-350 { /* improper bridge tag */
+.ideditor .keepRight.itemType-20,
+.ideditor .keepRight.itemType-40,
+.ideditor .keepRight.itemType-210,
+.ideditor .keepRight.itemType-270,
+.ideditor .keepRight.itemType-310,
+.ideditor .keepRight.itemType-320,
+.ideditor .keepRight.itemType-350 { /* improper bridge tag */
color: #ff9;
}
-.ideditor .keepRight.error_type-50 { /* almost junctions */
+.ideditor .keepRight.itemType-50 { /* almost junctions */
color: #88f;
}
-.ideditor .keepRight.error_type-60,
-.ideditor .keepRight.error_type-70,
-.ideditor .keepRight.error_type-90,
-.ideditor .keepRight.error_type-100,
-.ideditor .keepRight.error_type-110,
-.ideditor .keepRight.error_type-150,
-.ideditor .keepRight.error_type-220,
-.ideditor .keepRight.error_type-380 { /* non-physical sport tag */
+.ideditor .keepRight.itemType-60,
+.ideditor .keepRight.itemType-70,
+.ideditor .keepRight.itemType-90,
+.ideditor .keepRight.itemType-100,
+.ideditor .keepRight.itemType-110,
+.ideditor .keepRight.itemType-150,
+.ideditor .keepRight.itemType-220,
+.ideditor .keepRight.itemType-380 { /* non-physical sport tag */
color: #5d0;
}
-.ideditor .keepRight.error_type-130 { /* disconnected ways */
+.ideditor .keepRight.itemType-130 { /* disconnected ways */
color: #fa3;
}
-.ideditor .keepRight.error_type-170 { /* FIXME tag */
+.ideditor .keepRight.itemType-170 { /* FIXME tag */
color: #ff0;
}
-.ideditor .keepRight.error_type-190 { /* intersection without junction */
+.ideditor .keepRight.itemType-190 { /* intersection without junction */
color: #f33;
}
-.ideditor .keepRight.error_type-200 { /* overlapping ways */
+.ideditor .keepRight.itemType-200 { /* overlapping ways */
color: #fdbf6f;
}
-.ideditor .keepRight.error_type-160,
-.ideditor .keepRight.error_type-230 { /* layer conflict */
+.ideditor .keepRight.itemType-160,
+.ideditor .keepRight.itemType-230 { /* layer conflict */
color: #b60;
}
-.ideditor .keepRight.error_type-280 { /* boundary issues */
+.ideditor .keepRight.itemType-280 { /* boundary issues */
color: #5f47a0;
}
-.ideditor .keepRight.error_type-180,
-.ideditor .keepRight.error_type-290 { /* turn restriction issues */
+.ideditor .keepRight.itemType-180,
+.ideditor .keepRight.itemType-290 { /* turn restriction issues */
color: #ace;
}
-.ideditor .keepRight.error_type-300,
-.ideditor .keepRight.error_type-390 { /* missing tracktype */
+.ideditor .keepRight.itemType-300,
+.ideditor .keepRight.itemType-390 { /* missing tracktype */
color: #090;
}
-.ideditor .keepRight.error_type-360,
-.ideditor .keepRight.error_type-370,
-.ideditor .keepRight.error_type-410 { /* website issues */
+.ideditor .keepRight.itemType-360,
+.ideditor .keepRight.itemType-370,
+.ideditor .keepRight.itemType-410 { /* website issues */
color: #f9b;
}
-.ideditor .keepRight.error_type-120,
-.ideditor .keepRight.error_type-400 { /* geometry / turn angles */
+.ideditor .keepRight.itemType-120,
+.ideditor .keepRight.itemType-400 { /* geometry / turn angles */
color: #c35;
}
-/* ImproveOSM Errors
-------------------------------------------------------- */
-
-.ideditor .improveOSM.error_type-ow { /* missing one way */
- color: #1E90FF;
-}
-
-.ideditor .improveOSM.error_type-mr-road { /* missing road */
- color: #B452CD;
-}
-.ideditor .improveOSM.error_type-mr-path { /* missing path */
- color: #A0522D;
-}
-.ideditor .improveOSM.error_type-mr-parking { /* missing parking */
- color: #EEEE00;
-}
-.ideditor .improveOSM.error_type-mr-both { /* missing road+parking */
- color: #FFA500;
-}
-
-.ideditor .improveOSM.error_type-tr { /* missing turn restriction */
- color: #EC1C24;
-}
-
-
/* Custom Map Data (geojson, gpx, kml, vector tile) */
.ideditor .layer-mapdata {
pointer-events: none;
dominant-baseline: middle;
}
.ideditor .layer-mapdata text.label {
- fill: #ff26d4;
+ fill: #ddd;
}
.ideditor .layer-mapdata text.label.hover,
.ideditor .layer-mapdata text.label.selected {
- fill: #f6634f;
+ fill: #fff;
}
.ideditor .layer-mapdata text.label-halo {
opacity: 0.7;
stroke-width: 20px;
}
.ideditor.mode-browse .fill-partial path.area.fill,
-.ideditor.mode-select .fill-partial path.area.fill {
+.ideditor.mode-select .fill-partial path.area.fill,
+.ideditor.mode-select-data .fill-partial path.area.fill,
+.ideditor.mode-select-error .fill-partial path.area.fill,
+.ideditor.mode-select-note .fill-partial path.area.fill {
pointer-events: visibleStroke;
}
+.ideditor svg.preset-icon-category-border path {
+ stroke-width: 1;
+ stroke: rgb(170, 170, 170);
+ fill: rgba(170, 170, 170, 0.3);
+}
+
+.ideditor .preset-category-barrier svg.preset-icon-category-border path {
+ stroke: rgb(200, 144, 144);
+ fill: rgba(200, 144, 144, 0.3);
+}
+
+.ideditor .preset-category-building svg.preset-icon-category-border path {
+ stroke: rgb(224, 110, 95);
+ fill: rgba(224, 110, 95, 0.3);
+}
+
+.ideditor .preset-category-landuse svg.preset-icon-category-border path {
+ stroke: rgb(196, 189, 25);
+ fill: rgba(196, 189, 25, 0.3);
+}
+
+.ideditor .preset-category-natural svg.preset-icon-category-border path,
+.ideditor .preset-category-playground svg.preset-icon-category-border path,
+.ideditor .preset-category-golf svg.preset-icon-category-border path {
+ stroke: rgb(140, 208, 95);
+ fill: rgba(140, 208, 95, 0.3);
+}
+
+.ideditor .preset-category-water svg.preset-icon-category-border path,
+.ideditor .preset-category-waterway svg.preset-icon-category-border path {
+ stroke: rgb(119, 211, 222);
+ fill: rgba(119, 211, 222, 0.3);
+}
+
+.ideditor .preset-category-utility svg.preset-icon-category-border path {
+ stroke: rgb(125, 125, 125);
+ fill: rgba(219, 219, 125, 0.3);
+}
+
+.ideditor .preset-category-path svg.preset-icon-category-border path {
+ stroke: rgb(221, 221, 204);
+ fill: rgba(221, 221, 204, 0.3);
+}
+
+.ideditor .preset-category-road_service svg.preset-icon-category-border path,
+.ideditor .preset-category-road_minor svg.preset-icon-category-border path,
+.ideditor .preset-category-road_major svg.preset-icon-category-border path {
+ stroke: #999;
+}
+
+.ideditor .preset-category-rail svg.preset-icon-category-border path {
+ stroke: #555;
+}
/* Basics
------------------------------------------------------- */
/* the root element of iD */
border: 0;
overflow: hidden;
- font: normal 12px/1.6667 "-apple-system", BlinkMacSystemFont,
+ /* Establish a local stacking context so all elements within iD are on the
+ same layer relative to elements outside iD - #7457.
+ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+ */
+ position: relative;
+ z-index: 0;
+
+ font: normal 12px/1.6667 ui-sans-serif, "-apple-system", BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
sans-serif;
color: #333;
+ touch-action: none;
-ms-user-select: none;
-ms-content-zooming: none;
-
- /* Establish a local stacking context so all elements within iD are on the
- same layer relative to elements outside iD - #7457.
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
- */
- position: relative;
- z-index: 0;
+}
+.ideditor div {
+ /* disable pinch-to-zoom of the UI on touch devices */
+ touch-action: pan-x pan-y;
}
-.ideditor #content {
+.ideditor .main-content {
position: relative;
+ display: flex;
+ flex-direction: column;
overflow: hidden;
height: 100%;
+ touch-action: none;
}
-.ideditor #content.active {
- -webkit-filter: none !important;
+.ideditor .main-content.active {
filter: none !important;
- -webkit-duration: 200ms;
transition-duration: 200ms;
}
-.ideditor #content.inactive {
- -webkit-filter: grayscale(80%) brightness(80%);
+.ideditor .main-content.inactive {
filter: grayscale(80%) brightness(80%);
- -webkit-duration: 200ms;
transition-duration: 200ms;
}
-.ideditor #defs {
+.ideditor #ideditor-defs {
/* Can't be display: none or the clippaths are ignored. */
position: absolute;
width: 0;
}
.ideditor div, .ideditor textarea, .ideditor label, .ideditor input, .ideditor form, .ideditor span, .ideditor ul, .ideditor li, .ideditor ol, .ideditor a, .ideditor button, .ideditor h1, .ideditor h2, .ideditor h3, .ideditor h4, .ideditor h5, .ideditor p, .ideditor img {
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
box-sizing: border-box;
}
}
.ideditor a,
-.ideditor button,
-.ideditor .radial-menu-item {
+.ideditor button {
cursor: pointer;
}
font-weight: bold;
margin-bottom: 20px;
}
+.ideditor .header h2 {
+ font-size: 20px;
+ line-height: 1.25;
+ font-weight: bold;
+ margin-bottom: 0px;
+}
.ideditor h3:last-child,
-.ideditor h2:last-child,
.ideditor h4:last-child { margin-bottom: 0;}
.ideditor h3 {
padding-bottom: 10px;
}
-.ideditor :focus {
+.ideditor button:focus,
+.ideditor textarea:focus,
+.ideditor input[type=text]:focus,
+.ideditor input[type=search]:focus,
+.ideditor input[type=number]:focus,
+.ideditor input[type=url]:focus,
+.ideditor input[type=tel]:focus,
+.ideditor input[type=email]:focus,
+.ideditor input[type=date]:focus {
outline-color: transparent;
outline-style: none;
}
-.ideditor ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+.ideditor ::-moz-placeholder {
color: #aaa;
opacity: 1; /* Firefox */
}
-.ideditor :-ms-input-placeholder { /* Internet Explorer 10-11 */
- color: #aaa;
-}
-.ideditor ::-ms-input-placeholder { /* Microsoft Edge */
+
+.ideditor ::placeholder {
color: #aaa;
+ opacity: 1; /* Firefox */
}
.ideditor p {
.ideditor strong {
font-weight: bold;
}
-.ideditor a:visited, .ideditor a {
+.ideditor a,
+.ideditor a:visited,
+.ideditor a:active {
color: #7092ff;
}
-.ideditor a:hover {
+.ideditor a:focus {
color: #597be7;
}
+@media (hover: hover) {
+ .ideditor a:hover {
+ color: #597be7;
+ }
+}
.ideditor kbd {
display: inline-block;
text-align: center;
padding: 3px 5px;
font-size: 11px;
- line-height: 12px;
- min-width: 12px;
+ line-height: 1.3;
+ min-width: 0.9em;
vertical-align: baseline;
background-color: #fcfcfc;
border: solid 1px #ccc;
box-shadow: inset 0 -1px 0 #bbb;
}
-/* Forms
-------------------------------------------------------- */
-.ideditor textarea {
- resize: vertical;
- font:normal 12px/20px "-apple-system", BlinkMacSystemFont,
- "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
- "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
- sans-serif;
+.ideditor code {
+ font-family: ui-monospace, monospace, monospace;
+ background: rgba(174, 174, 174, 0.25);
+ padding: 1px 2px;
}
+/* Forms
+------------------------------------------------------- */
.ideditor textarea,
.ideditor input[type=text],
.ideditor input[type=search],
.ideditor input[type=number],
.ideditor input[type=url],
.ideditor input[type=tel],
-.ideditor input[type=email] {
+.ideditor input[type=email],
+.ideditor input[type=date] {
background-color: #fff;
color: #333;
border: 1px solid #ccc;
- padding: 5px 20px 5px 10px;
- height: 30px;
+ padding: 0px 10px 0px 10px;
border-radius: 4px;
text-overflow: ellipsis;
+ overflow: auto;
+}
+.ideditor input[type=text],
+.ideditor input[type=search],
+.ideditor input[type=number],
+.ideditor input[type=url],
+.ideditor input[type=tel],
+.ideditor input[type=email],
+.ideditor input[type=date],
+.ideditor input[type=color] {
+ /* need this since line-height interpretation may vary by font or browser */
+ height: 2.585em;
}
-.ideditor[dir='rtl'] textarea,
-.ideditor[dir='rtl'] input[type=text],
-.ideditor[dir='rtl'] input[type=search],
-.ideditor[dir='rtl'] input[type=number],
-.ideditor[dir='rtl'] input[type=url],
-.ideditor[dir='rtl'] input[type=tel],
-.ideditor[dir='rtl'] input[type=email] {
- padding: 5px 10px 5px 20px;
+.ideditor textarea {
+ min-height: 2em;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ resize: vertical;
+ font:normal 12px/20px "-apple-system", BlinkMacSystemFont,
+ "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
+ "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
+ sans-serif;
}
+.ideditor textarea:active,
+.ideditor input:active,
.ideditor textarea:focus,
.ideditor input:focus {
background-color: #f1f1f1;
.ideditor input[type="checkbox"],
.ideditor input[type="radio"] {
- float: left;
width: 14px;
height: 14px;
- margin-right: 5px;
- margin-top: 3px;
+ margin-right: 6px;
cursor: pointer;
+ vertical-align: middle;
}
.ideditor[dir='rtl'] input[type="checkbox"],
.ideditor[dir='rtl'] input[type="radio"] {
- float: right;
- margin-left: 5px;
+ margin-left: 6px;
margin-right: 0;
}
+.ideditor input.mixed::-moz-placeholder, .ideditor textarea.mixed::-moz-placeholder {
+ font-style: italic;
+}
+
+.ideditor input.mixed::placeholder,
+.ideditor textarea.mixed::placeholder {
+ font-style: italic;
+}
+
+/* keytraps need to be invisible yet not be display:none or visibility:hidden */
+.ideditor .keytrap {
+ width: 0;
+ height: 0;
+ padding: 0;
+ margin: 0;
+ border: 0;
+}
+
/* tables */
.ideditor table {
background-color: #fff;
------------------------------------------------------- */
.ideditor button {
text-align: center;
- line-height: 20px;
border: 0;
background: #fff;
- font-weight: bold;
color: #333;
font-size: 12px;
display: inline-block;
- height: 40px;
border-radius: 4px;
}
.ideditor button:focus,
-.ideditor button:hover {
+.ideditor button:active,
+.ideditor button.hover {
background-color: #ececec;
}
+@media (hover: hover) {
+ .ideditor button:hover {
+ background-color: #ececec;
+ }
+}
.ideditor button.active {
background: #7092ff;
}
.ideditor button.action {
background: #7092ff;
color: #fff;
+ font-weight: bold;
}
.ideditor button.action:focus,
-.ideditor button.action:hover {
+.ideditor button.action:active {
background: #597be7;
}
.ideditor button.secondary-action {
background: #ececec;
+ font-weight: bold;
}
.ideditor button.secondary-action:focus,
-.ideditor button.secondary-action:hover {
+.ideditor button.secondary-action:active {
background: #cccccc;
}
.ideditor button.action.disabled,
-.ideditor button.action.disabled:hover,
-.ideditor button[disabled].action,
-.ideditor button[disabled].action:hover {
+.ideditor button[disabled].action {
background: #cccccc;
color: #888;
cursor: not-allowed;
}
+.ideditor button.action,
+.ideditor button.secondary-action {
+ padding: 10px 5px;
+}
+
+@media (hover: hover) {
+ .ideditor button.action:hover {
+ background: #597be7;
+ }
+ .ideditor button.secondary-action:hover {
+ background: #cccccc;
+ }
+ .ideditor button.action.disabled:hover,
+ .ideditor button[disabled].action:hover {
+ background: #cccccc;
+ color: #888;
+ cursor: not-allowed;
+ }
+}
+
/* Icons
------------------------------------------------------- */
.ideditor .icon {
- vertical-align: top;
+ vertical-align: middle;
width: 20px;
height: 20px;
}
+.ideditor .icon.operation use {
+ fill: #222;
+ color: #79f;
+}
+.ideditor button.disabled .icon.operation use,
+.ideditor .icon.operation.disabled use {
+ fill: rgba(32,32,32,.2);
+ color: rgba(40,40,40,.2);
+}
+
+.ideditor .icon.monochrome use {
+ fill: currentColor;
+}
+
.ideditor .icon.inline {
vertical-align: text-top;
- width: 14px;
- height: 14px;
+ display: inline-block;
+ width: 1.17em;
+ height: 1.17em;
margin: 0px 3px;
}
.ideditor .icon.light {
color: #fff;
+ fill: currentColor;
}
.ideditor .icon.created {
color: #00ca07;
.ideditor .icon-annotation {
color: #333;
+ vertical-align: baseline;
}
-.ideditor .notification-badge {
- display: block;
- position: absolute;
- width: 10px;
- height: 10px;
- right: 7px;
- top: 9px;
-}
-
-.ideditor .notification-badge.hide {
- display: none;
+.ideditor button.loading .icon {
+ background-image: url(<%= asset_path("iD/img/mini-loader.gif") %>);
+ background-position: 0 0;
+ background-size: auto;
}
/* Toolbar / Persistent UI Elements
------------------------------------------------------- */
-.ideditor #bar-wrap {
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
+.ideditor .top-toolbar-wrap {
+ position: relative;
z-index: 101;
}
-.ideditor #bar {
+.ideditor .top-toolbar {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE, Edge */
}
-.ideditor #bar::-webkit-scrollbar {
+.ideditor .top-toolbar::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
-.ideditor #bar .toolbar-item {
+.ideditor .top-toolbar .toolbar-item {
display: flex;
flex: 0 1 auto;
flex-flow: column wrap;
justify-content: center;
}
-.ideditor #bar .toolbar-item .item-content {
+.ideditor .top-toolbar .toolbar-item .item-content {
display: flex;
flex: 0 1 auto;
flex-flow: row nowrap;
width: auto;
margin: 0 5px;
}
-.ideditor[dir='ltr'] #bar .toolbar-item:last-child .item-content,
-.ideditor[dir='rtl'] #bar .toolbar-item:first-child .item-content {
+.ideditor[dir='ltr'] .top-toolbar .toolbar-item:last-child .item-content,
+.ideditor[dir='rtl'] .top-toolbar .toolbar-item:first-child .item-content {
margin-right: 10px;
}
-.ideditor[dir='ltr'] #bar .toolbar-item:first-child .item-content,
-.ideditor[dir='rtl'] #bar .toolbar-item:last-child .item-content {
+.ideditor[dir='ltr'] .top-toolbar .toolbar-item:first-child .item-content,
+.ideditor[dir='rtl'] .top-toolbar .toolbar-item:last-child .item-content {
margin-left: 10px;
}
-.ideditor #bar .toolbar-item .item-label {
+.ideditor[dir='ltr'] .top-toolbar .toolbar-item:last-child .item-label,
+.ideditor[dir='rtl'] .top-toolbar .toolbar-item:first-child .item-label {
+ padding-right: 5px;
+}
+.ideditor[dir='ltr'] .top-toolbar .toolbar-item:first-child .item-label,
+.ideditor[dir='rtl'] .top-toolbar .toolbar-item:last-child .item-label {
+ padding-left: 5px;
+}
+.ideditor .top-toolbar .toolbar-item .item-label {
text-align: center;
font-size: 11px;
white-space: nowrap;
margin: 1px 2px 2px 2px;
}
-.ideditor #bar .toolbar-item.spacer {
+.ideditor .top-toolbar .toolbar-item.spacer {
width: 100%;
flex-grow: 2;
}
-.ideditor #bar .toolbar-item:first-child {
+.ideditor .top-toolbar .toolbar-item:first-child {
justify-content: flex-start;
}
-.ideditor #bar .toolbar-item:last-child {
+.ideditor .top-toolbar .toolbar-item:last-child {
justify-content: flex-end;
}
-.ideditor #bar .toolbar-item:empty:not(.spacer) {
+.ideditor .top-toolbar .toolbar-item:empty:not(.spacer) {
display: none;
}
.ideditor button.bar-button {
min-width: 30px;
white-space: nowrap;
display: flex;
+ font-weight: bold;
}
.ideditor button.bar-button .icon {
flex: 0 0 20px;
text-align: center;
}
-.ideditor .help-wrap svg.icon.pre-text.add-note,
+.ideditor .help-pane svg.icon.inline.add-note,
.ideditor button.add-note svg.icon {
height: 15px;
width: 15px;
margin-left: 4px;
margin-right: unset;
}
-.ideditor .help-wrap svg.icon.pre-text.add-note {
+.ideditor .help-pane svg.icon.inline.add-note {
margin-left: 3px;
margin-right: 3px;
}
opacity: .5;
position: absolute;
right: 4px;
- bottom: 26px;
-}
-.ideditor .spinner img {
+ bottom: 4px;
height: 20px;
width: 20px;
+}
+.ideditor .spinner img {
+ height: 100%;
+ width: 100%;
background: transparent;
border-radius: 100%;
}
.ideditor[dir='rtl'] .spinner img {
- -moz-transform: scaleX(-1);
- -o-transform: scaleX(-1);
- -webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
-.ideditor #bar.narrow .spinner,
-.ideditor #bar.narrow button.bar-button .label {
+.ideditor .top-toolbar.narrow .spinner,
+.ideditor .top-toolbar.narrow button.bar-button .label {
display: none;
}
-.ideditor #bar.narrow button .count {
+.ideditor .top-toolbar.narrow button .count {
border-left-width: 0;
border-right-width: 0;
}
------------------------------------------------------- */
.ideditor .header {
border-bottom: 1px solid #ccc;
- height: 60px;
+ padding: 20px 40px;
position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex: 0 0 auto;
}
.ideditor .header h3 {
text-align: center;
margin-bottom: 0;
- white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
- padding: 20px;
+ padding: 0;
}
.ideditor .header button,
}
.ideditor .field-help-title button.close,
-.ideditor .sidebar-component .header button.data-editor-close,
-.ideditor .sidebar-component .header button.note-editor-close,
-.ideditor .sidebar-component .header button.error-editor-close,
-.ideditor .entity-editor-pane .header button.preset-close,
+.ideditor .sidebar .header button.close,
.ideditor .preset-list-pane .header button.preset-choose {
position: absolute;
right: 0;
top: 0;
}
.ideditor[dir='rtl'] .field-help-title button.close,
-.ideditor[dir='rtl'] .sidebar-component .header button.data-editor-close,
-.ideditor[dir='rtl'] .sidebar-component .header button.note-editor-close,
-.ideditor[dir='rtl'] .sidebar-component .header button.error-editor-close,
-.ideditor[dir='rtl'] .entity-editor-pane .header button.preset-close,
+.ideditor[dir='rtl'] .sidebar .header button.close,
.ideditor[dir='rtl'] .preset-list-pane .header button.preset-choose {
left: 0;
right: auto;
position: absolute;
bottom: 0;
margin: 0;
- padding: 5px 20px 5px 20px;
+ padding: 0 15px;
border-top: 1px solid #ccc;
background-color: #f6f6f6;
width: 100%;
+ height: 2.5em;
z-index: 1;
flex-wrap: wrap;
justify-content: space-between;
+ align-items: center;
list-style: none;
display: flex;
}
justify-content: center;
}
-.ideditor .header-container {
- display: flex;
- justify-content: space-between;
-}
-
-.ideditor .header-block-outer {
- width: 20%;
-}
-
-.ideditor .header-block-close {
- display: flex;
- justify-content: flex-end;
-}
-
-/* Hide/Toggle collapsable sections (aka Disclosure)
+/* Hide/Toggle collapsible sections (aka Disclosure)
------------------------------------------------------- */
.ideditor .hide-toggle .icon.pre-text {
- vertical-align: text-top;
+ vertical-align: middle;
width: 16px;
height: 16px;
- margin-left: -3px;
-}
-.ideditor[dir='rtl'] .hide-toggle .icon.pre-text {
- margin-left: 0;
- margin-right: -3px;
+ margin-top: -3px;
}
.ideditor a:visited.hide-toggle,
display: inline-block;
font-size: 14px;
font-weight: bold;
- padding-bottom: 5px;
+ margin-bottom: 5px;
}
/* Sidebar / Inspector
------------------------------------------------------- */
-.ideditor #sidebar {
+.ideditor .sidebar {
position: relative;
float: left;
height: 100%;
border: 0px solid #ccc;
border-right-width: 1px;
}
-.ideditor[dir='rtl'] #sidebar {
+.ideditor[dir='rtl'] .sidebar {
float: right;
border-right-width: 0px;
border-left-width: 1px;
}
-.ideditor #sidebar-resizer {
+.ideditor .sidebar-resizer {
position: absolute;
top: 0;
- right: -6px;
+ right: -10px;
+ width: 10px;
height: 100%;
- width: 6px;
cursor: col-resize;
+ /* disable drag-to-select */
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
}
-.ideditor[dir='rtl'] #sidebar-resizer {
+.ideditor[dir='rtl'] .sidebar-resizer {
right: auto;
left: -6px;
}
-.ideditor #sidebar.collapsed #sidebar-resizer {
+.ideditor .sidebar.collapsed > *:not(.sidebar-resizer) {
+ display: none;
+}
+.ideditor .sidebar.collapsed .sidebar-resizer {
/* make target wider to avoid the user accidentally resizing window */
width: 10px;
right: -10px;
}
-.ideditor[dir='rtl'] #sidebar.collapsed #sidebar-resizer {
+.ideditor[dir='rtl'] .sidebar.collapsed .sidebar-resizer {
left: -10px;
}
left: 0;
bottom: 0;
right: 0;
+ display: flex;
+ flex-direction: column;
}
.ideditor .sidebar-component .body {
width: 100%;
- overflow: auto;
- top: 60px;
- bottom: 0;
- position: absolute;
+ height: 100%;
+ overflow-y: auto;
+ overflow-x: hidden;
+ position: relative;
}
.ideditor .panewrap {
position: absolute;
width: 50%;
top: 0;
- bottom: 30px;
+ bottom: 2.5em;
+ display: flex;
+ flex-direction: column;
}
.ideditor .pane:first-child {
.ideditor .pane:last-child {
right: 0;
}
+.ideditor .feature-list-pane {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
.ideditor .inspector-wrap {
width: 100%;
.ideditor .inspector-body {
overflow-y: scroll;
overflow-x: hidden;
- position: absolute;
- right: 0;
- left: 0;
- bottom: 0;
+ position: relative;
+ height: 100%;
+ flex: 1 1 100%;
}
-
-.ideditor .feature-list-pane .inspector-body,
-.ideditor .preset-list-pane .inspector-body {
- top: 120px;
+.ideditor .entity-editor {
+ padding: 20px;
}
-.ideditor .entity-editor-pane .inspector-body,
-.ideditor .selection-list-pane .inspector-body {
- top: 60px;
+/* preserve extra space at bottom of inspector to allow for dropdown options - #5280 */
+.ideditor .entity-editor > div:last-child {
+ margin-bottom: 150px;
}
-.ideditor .inspector-inner {
- padding: 20px 20px 5px 20px;
+.ideditor .sidebar .search-header {
position: relative;
+ overflow: hidden;
+ flex: 0 0 auto;
}
-
-.ideditor #sidebar .search-header .icon {
- display: block;
+.ideditor .sidebar .search-header .icon {
+ display: inline-block;
position: absolute;
left: 10px;
- top: 80px;
+ height: 100%;
pointer-events: none;
}
-.ideditor[dir='rtl'] #sidebar .search-header .icon {
+.ideditor[dir='rtl'] .sidebar .search-header .icon {
left: auto;
right: 10px;
}
-.ideditor #sidebar .search-header input {
- position: absolute;
- top: 60px;
- height: 60px;
+.ideditor .sidebar .search-header input {
width: 100%;
- padding: 5px 10px;
+ padding: 0 10px;
+ height: 3em;
border-radius: 0;
border-width: 0;
border-bottom-width: 1px;
font-weight: bold;
}
+.ideditor .section:not(:last-child),
+.ideditor .map-pane .section {
+ margin-bottom: 30px;
+}
+
/* Feature List / Search Results
------------------------------------------------------- */
width: 100%;
}
.ideditor .no-results-item,
-.ideditor .geocode-item,
.ideditor .feature-list-item {
width: 100%;
position: relative;
border-bottom: 1px solid #ccc;
border-radius: 0;
}
-
-.ideditor .geocode-item {
- width: 50%;
- background-color: #ccc;
- left: 25%;
- margin-top: 30px;
- border-radius: 2px;
-}
-
-.ideditor[dir='rtl'] .geocode-item {
- left: -25%;
+.ideditor .no-results-item {
+ padding: 10px;
+ font-weight: bold;
}
-.ideditor .geocode-item:hover {
- background-color: #aaa;
+.ideditor .geocode-item {
+ width: 100%;
+ max-width: 200px;
+ margin: 30px auto;
+ min-height: 40px;
}
.ideditor .feature-list-item {
- background-color: #fff;
- font-weight: bold;
- height: 40px;
- line-height: 20px;
-}
-.ideditor .feature-list-item:hover {
- background-color: #ececec;
-}
-.ideditor .feature-list-item button {
- background: transparent;
+ display: flex;
}
.ideditor .feature-list-item .label {
text-align: left;
- padding: 10px 10px;
+ padding: 10px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
- border-left: 1px solid rgba(0, 0, 0, .1);
+ flex: 1 1 auto;
}
.ideditor[dir='rtl'] .feature-list-item .label {
text-align: right;
opacity: .5;
}
.ideditor .feature-list-item .close {
- float: right;
padding: 10px;
+
}
.ideditor .feature-list-item .close .icon {
- opacity: 1;
+ opacity: 0.5;
}
.ideditor .feature-list-item .entity-type {
color: #7092ff;
+ font-weight: bold;
}
-.ideditor .feature-list-item:hover .entity-type {
+.ideditor .feature-list-item:active .entity-type,
+.ideditor .feature-list-item:focus .entity-type {
color: #597be7;
}
+@media (hover: hover) {
+ .ideditor .feature-list-item:hover .entity-type {
+ color: #597be7;
+ }
+}
.ideditor .feature-list-item .entity-name {
- font-weight: normal;
color: #666;
padding-left: 10px;
}
padding-left: 0;
padding-right: 10px;
}
-
+.ideditor .section-selected-features .feature-list {
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ overflow: hidden;
+ margin-top: 5px;
+}
+.ideditor .section-selected-features .feature-list-item:last-child {
+ border: none;
+}
+.ideditor[dir='ltr'] .section-selected-features .feature-list-item > button:not(:first-child) {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+.ideditor[dir='rtl'] .section-selected-features .feature-list-item > button:not(:last-child) {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
+.ideditor[dir='ltr'] .section-selected-features .feature-list-item > button:not(:last-child) {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
+.ideditor[dir='rtl'] .section-selected-features .feature-list-item > button:not(:last-child) {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
/* Preset List and Icons
------------------------------------------------------- */
.ideditor .preset-list {
width: 100%;
padding: 20px 20px 10px 20px;
- border-bottom: 1px solid #ccc;
}
.ideditor .preset-list-item {
}
.ideditor .preset-list-button-wrap {
- height: 62px;
+ min-height: 62px;
display: flex;
border: 1px solid #ccc;
border-radius: 4px;
height: 100%;
position: relative;
display: flex;
+ align-items: center;
}
.ideditor .preset-list.filtered .preset-list-item:first-child .preset-list-button {
display: flex;
align-items: center;
justify-content: center;
+ flex: 0 0 auto;
}
.ideditor .preset-icon-container.small {
width: 40px;
.ideditor .preset-icon-container img.image-icon {
width: 50px;
height: 50px;
- object-fit: contain;
+ -o-object-fit: contain;
+ object-fit: contain;
border-radius: 2px;
z-index: 2;
visibility: hidden;
visibility: visible;
}
.ideditor .preset-icon-container.showing-img *:not(.image-icon) {
- visibility: hidden;
+ display: none;
}
.ideditor .preset-icon-point-border path {
fill: transparent;
}
+.ideditor .preset-icon-category-border path {
+ stroke: #999;
+ stroke-width: 1px;
+ fill: transparent;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
+ vector-effect: non-scaling-stroke;
+}
+
.ideditor .preset-icon-line {
margin: auto;
position: absolute;
stroke-width: 1.5px;
stroke: #333;
fill: #efefef;
- backface-visibility: hidden;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
}
.ideditor .preset-icon {
.ideditor .preset-icon.framed .icon {
transform: scale(0.4);
}
-.ideditor .preset-icon.framed.line-geom .icon,
+.ideditor .preset-icon.framed.line-geom:not(.category) .icon,
.ideditor .preset-icon.framed.route-geom .icon {
top: 20%;
transform: translateY(-30%) scale(0.4);
.ideditor .preset-icon-iD.framed .icon {
transform: scale(0.74);
}
-.ideditor .preset-icon-iD.framed.line-geom .icon,
+.ideditor .preset-icon-iD.framed.line-geom:not(.category) .icon,
.ideditor .preset-icon-iD.framed.route-geom .icon {
transform: translateY(-30%) scale(0.74);
}
display: flex;
flex-flow: row wrap;
align-items: center;
- background-color: #f6f6f6;
+ background: #f6f6f6;
text-align: left;
- position: absolute;
- top: 0;
- bottom: 0;
- right: 0;
padding: 5px 10px;
- left: 60px;
border-left: 1px solid rgba(0, 0, 0, .1);
+ flex: 1 1 100%;
+ align-self: stretch;
}
.ideditor[dir='rtl'] .preset-list-button .label {
text-align: right;
- left: 0;
- right: 60px;
border-left: none;
border-right: 1px solid rgba(0, 0, 0, .1);
}
+.ideditor[dir='ltr'] .preset-list-item.mixed-types .preset-list-button .label {
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+}
+.ideditor[dir='rtl'] .preset-list-item.mixed-types .preset-list-button .label {
+ border-top-left-radius: 4px;
+ border-bottom-left-radius: 4px;
+}
.ideditor[dir='ltr'] .category .preset-list-button .label {
border-radius: 0px 4px 4px 0px;
}
border-radius: 4px 0px 0px 4px;
}
+.ideditor .preset-list-item.mixed-types .label {
+ font-style: italic;
+}
+
.ideditor .preset-list-button .label-inner {
width: 100%;
+ line-height: 1.35em;
}
.ideditor .preset-list-button .label-inner .namepart {
- height: 17px;
- white-space: nowrap;
text-overflow: ellipsis;
- overflow: hidden;
}
-.ideditor .preset-list-button .label-inner .namepart:nth-child(2) {
- font-weight: normal;
+.ideditor .preset-list-button .label-inner .namepart:nth-child(1) {
+ font-weight: bold;
}
-.ideditor .preset-list-button:hover .label,
.ideditor .preset-list-button:focus .label,
+.ideditor .preset-list-button:active .label,
.ideditor .preset-list-button.disabled,
.ideditor .preset-list-button.disabled .label {
background-color: #ececec;
}
+@media (hover: hover) {
+ .ideditor .preset-list-button:hover .label {
+ background-color: #ececec;
+ }
+}
-.ideditor .preset-list-item button.tag-reference-button {
- height: 100%;
+.ideditor .preset-list-button-wrap button.tag-reference-button {
width: 32px;
flex: 0 0 auto;
+}
+.ideditor .preset-list-button-wrap button.tag-reference-button:not(:hover):not(:active):not(:focus) {
background: #f6f6f6;
}
-.ideditor[dir='ltr'] .preset-list-item button.tag-reference-button {
+.ideditor[dir='ltr'] .preset-list-button-wrap button.tag-reference-button {
border-left: 1px solid #ccc;
}
-.ideditor[dir='rtl'] .preset-list-item button.tag-reference-button {
+.ideditor[dir='rtl'] .preset-list-button-wrap button.tag-reference-button {
border-right: 1px solid #ccc;
}
-.ideditor[dir='ltr'] .preset-list-item button:last-child {
+.ideditor[dir='ltr'] .preset-list-button-wrap:not(.category) button:last-child {
border-radius: 0 4px 4px 0;
}
-.ideditor[dir='rtl'] .preset-list-item button:last-child {
+.ideditor[dir='rtl'] .preset-list-button-wrap:not(.category) button:last-child {
border-radius: 4px 0 0 4px;
}
-
-.ideditor .preset-list-item button.tag-reference-button:hover {
- background: #f1f1f1;
-}
-.ideditor .preset-list-item button.tag-reference-button .icon {
+.ideditor .preset-list-button-wrap button.tag-reference-button .icon {
opacity: .5;
}
+.ideditor .preset-list-button-wrap .accessory-buttons {
+ display: flex;
+}
.ideditor .current .preset-list-button,
}
.ideditor .subgrid .preset-list {
+ width: auto;
padding: 10px;
- margin-top: 0;
+ margin: 0 -10px;
border: 0;
border-radius: 8px;
- width: -webkit-calc(100% + 20px);
- margin-left: -10px;
}
.ideditor .subgrid .preset-list > *:last-child {
margin-bottom: 0;
width: 0;
height: 0;
margin-left: 50%;
- margin-left: -webkit-calc(50% - 10px);
+ margin-left: calc(50% - 10px);
}
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
- padding: 0 20px;
+ padding: 5px 0 0 0;
}
.ideditor .quick-link {
margin: 0 5px;
}
-.ideditor .data-editor .quick-links,
-.ideditor .error-editor .quick-links,
-.ideditor .note-editor .quick-links {
- padding: 5px 0 0 0;
-}
-
/* Entity/Preset Editor
------------------------------------------------------- */
-.ideditor .entity-issues,
-.ideditor .preset-editor {
- overflow: hidden;
- padding: 10px 0px 5px 0px;
-}
-.ideditor .entity-issues a.hide-toggle,
-.ideditor .preset-editor a.hide-toggle {
- margin: 0 20px 5px 20px;
-}
-.ideditor .entity-issues .disclosure-wrap-entity_issues,
-.ideditor .preset-editor .form-fields-container {
+.ideditor .section .grouped-items-area {
padding: 10px;
- margin: 0 10px 10px 10px;
+ margin: 0 -10px 10px -10px;
border-radius: 8px;
background: #ececec;
}
-.ideditor .entity-issues .disclosure-wrap-entity_issues:empty,
-.ideditor .preset-editor .form-fields-container:empty {
+.ideditor .section .grouped-items-area:empty {
display: none;
}
-.ideditor .entity-editor-pane .preset-list-item {
- margin-bottom: 0;
-}
/*
The parts of a field:
flex-flow: row wrap;
margin-bottom: 10px;
width: 100%;
- -webkit-transition: margin-bottom 200ms;
- -moz-transition: margin-bottom 200ms;
- -o-transition: margin-bottom 200ms;
- transition: margin-bottom 200ms;
+ transition: margin-bottom 200ms;
}
.ideditor .form-field.nowrap,
display: flex;
flex-flow: row nowrap;
flex: 1 1 100%;
- height: 30px;
position: relative;
font-weight: bold;
color: #333;
overflow: hidden;
}
.ideditor .field-label .label-text {
+ overflow: hidden;
+ text-overflow: ellipsis;
flex: 1 1 auto;
- padding: 5px 0 5px 10px;
+ padding: 5px 0 4px 10px;
}
.ideditor[dir='rtl'] .field-label .label-text {
- padding: 5px 10px 5px 0;
+ padding: 5px 10px 4px 0;
+}
+.ideditor .field-label .label-text {
+ white-space: nowrap;
}
.ideditor .label-text .label-textannotation svg.icon {
}
.ideditor .field-label button {
- flex: 0 0 32px;
+ flex: 0 0 auto;
border-left: 1px solid #ccc;
width: 32px;
- height: 100%;
border-radius: 0;
- background: #f6f6f6;
}
.ideditor[dir='rtl'] .field-label button {
border-left: none;
border-right: 1px solid #ccc;
}
-.ideditor .field-label button:hover {
- background: #f1f1f1;
+.ideditor .field-label button:not(:hover):not(:active):not(:focus) {
+ background: none;
}
.ideditor .field-label .icon {
opacity: .5;
+
}
.ideditor .field-label .modified-icon,
flex-flow: row nowrap;
width: 100%;
flex: 1 1 auto;
- min-height: 30px;
border-top: 0;
border-radius: 0 0 4px 4px;
}
.ideditor .form-field-input-wrap > textarea,
.ideditor .form-field-input-wrap > ul.chiplist {
flex: 1 1 auto;
- min-height: 30px;
border: 1px solid #ccc;
border-top: 0;
border-radius: 0;
- overflow: hidden;
position: relative;
}
.ideditor .form-field-input-wrap > textarea {
height: 65px;
border-radius: 0 0 4px 4px;
- overflow: auto;
}
/* Buttons inside fields */
.ideditor .form-field-button {
flex: 0 0 auto;
- height: 30px;
width: 32px;
position: relative;
background-color: #fff;
border-left-width: 1px;
border-right-width: 0;
}
-.ideditor .form-field-button:hover {
+.ideditor .form-field-button:active,
+.ideditor .form-field-button:focus {
background-color: #f1f1f1;
}
+@media (hover: hover) {
+ .ideditor .form-field-button:hover {
+ background-color: #f1f1f1;
+ }
+}
.ideditor .form-field-button .icon {
fill: #333;
opacity: .5;
}
+.ideditor .form-field-button.colour-preview {
+ border-radius: 0 0 4px 0;
+}
+.ideditor .form-field-button.colour-preview > div.colour-box {
+ border: 3px solid #fff;
+ height: 100%;
+ border-radius: 8px;
+ cursor: pointer;
+ text-align: center;
+ line-height: 20px;
+ padding: 1px 0 0 1px;
+}
+.ideditor .inspector-hover .form-field-button.colour-preview > div.colour-box {
+ border-color: #ececec;
+}
+.ideditor .form-field-button.colour-preview:active > div.colour-box,
+.ideditor .form-field-button.colour-preview:focus > div.colour-box {
+ border-color: #f1f1f1;
+}
+@media (hover: hover) {
+ .ideditor .form-field-button.colour-preview:hover > div.colour-box {
+ border-color: #f1f1f1;
+ }
+}
+.ideditor input.colour-selector {
+ visibility: hidden;
+ position: absolute;
+}
+.ideditor input.date-selector {
+ visibility: hidden;
+ position: absolute;
+}
/* round corners of first/last child elements */
}
-/* Field - Access, Cycleway
+/* Field - Access, DirectionalCombo
------------------------------------------------------- */
.ideditor .form-field-input-access,
-.ideditor .form-field-input-cycleway {
+.ideditor .form-field-input-directionalcombo {
flex: 1 1 auto;
display: flex;
flex-flow: row wrap;
display: flex;
flex-flow: row nowrap;
}
-.ideditor .form-field ul.rows li.labeled-input > span,
.ideditor .form-field ul.rows li.labeled-input > div {
flex: 1 1 auto;
width: 100%;
border-radius: 0;
+ line-height: 0.95rem;
}
.ideditor .form-field ul.rows li input {
border-radius: 0;
border-right-width: 1px;
}
+/* Field - lists with labeled input items as table
+------------------------------------------------------- */
+.ideditor .form-field ul.rows.rows-table {
+ display: table;
+ width: 100%;
+}
+.ideditor .form-field ul.rows.rows-table li.labeled-input {
+ display: table-row;
+}
+.ideditor .form-field ul.rows.rows-table li.labeled-input > div:first-child {
+ display: table-cell;
+ width: auto;
+ max-width: 170px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+.ideditor .form-field ul.rows.rows-table li.labeled-input > div:nth-child(2) {
+ display: table-cell;
+ width: auto;
+}
+
/* Field - Structure
------------------------------------------------------- */
------------------------------------------------------- */
.ideditor .form-field-input-combo > input:only-of-type {
border-radius: 0 0 4px 4px;
+ width: 100%;
}
.ideditor .form-field-input-combo.empty-combobox input,
.ideditor .form-field-input-multicombo .empty-combobox input {
display: none;
}
+.ideditor .form-field-input-combo input.raw-value,
+.ideditor .form-field-input-semicombo input.raw-value,
+.ideditor .form-field-input-multicombo input.raw-value {
+ font-family: monospace;
+}
+.ideditor .form-field-input-combo input.known-value,
+.ideditor .form-field-input-semicombo input.known-value,
+.ideditor .form-field-input-multicombo input.known-value {
+ color: #7092ff;
+}
+
.ideditor .form-field-input-multicombo ul.chiplist {
padding: 5px 8px 5px 8px;
background: #fff;
.ideditor .form-field-input-multicombo li {
display: inline-flex;
flex-flow: row nowrap;
- align-items: center;
margin-bottom: 3px;
margin-top: 3px;
border-radius: 4px;
.ideditor .form-field-input-multicombo li.chip {
background-color: #eff2f7;
border: 1px solid #ccd5e3;
- line-height: 25px;
max-width: 100%;
+ color: #7092ff;
+}
+.ideditor .form-field-input-multicombo li.chip.negated span {
+ text-decoration: line-through;
+}
+.ideditor .form-field-input-multicombo li.chip input {
+ width: 1em;
+ height: 11px;
+ margin-top: 7px;
}
.ideditor[dir='ltr'] .form-field-input-multicombo li.chip {
padding: 2px 0px 2px 5px;
z-index: 3000;
cursor: grabbing;
}
+.ideditor .form-field-input-multicombo li.chip.raw-value {
+ font-family: monospace;
+ color: #333;
+}
+.ideditor .form-field-input-multicombo li.mixed {
+ border-color: #eff2f7;
+ color: #888;
+ font-style: italic;
+}
-.ideditor .form-field-input-multicombo li.chip span {
+.ideditor .form-field-input-multicombo li.chip > span {
display: block;
flex: 1 1 auto;
overflow: hidden;
word-wrap: break-word;
+ margin-top: 4px;
}
-.ideditor .form-field-input-multicombo a {
+.ideditor .form-field-input-multicombo a,
+.ideditor .form-field-input-multicombo button {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 16px !important;
padding: 0px 5px 0px 5px;
display: block;
text-align: center;
flex: 0 0 auto;
+ background: transparent;
+ border: 0;
+}
+
+.ideditor .form-field-input-multicombo li.chip .field_buttons {
+ display: inline-block;
+ text-align: right;
+ margin-right: 2px;
+ margin-top: 2px;
+ margin-bottom: 2px;
+}
+
+.ideditor .form-field-input-multicombo li.chip .field_buttons a {
+ display: block;
+ float: right;
+ margin-top: -2px;
+ margin-bottom: -2px;
+}
+
+.ideditor[dir='rtl'] .form-field-input-multicombo li.chip .field_buttons a {
+ float: left;
+}
+
+.ideditor .form-field-input-multicombo li.chip .field_buttons button {
+ display: inline-block;
+ margin-right: -4px;
+ margin-top: -4px;
+ margin-bottom: -2px;
+ margin-left: -2px;
+}
+
+.ideditor .form-field-input-multicombo li.chip .field_buttons button:hover {
+ background-color: transparent;
}
.ideditor .form-field-input-multicombo .input-wrap {
border: 1px solid #ddd;
- width: 100px;
- height: 31px;
+ width: 180px;
}
.ideditor .form-field-input-multicombo input {
border: none;
width: 100%;
- height: 100%;
}
.ideditor .form-field-input-multicombo input:focus {
width: auto;
}
+.ideditor .form-field-input-combo .tag-value-icon,
+.ideditor .form-field-input-semicombo .input-wrap .tag-value-icon,
+.ideditor .form-field-input-multicombo .input-wrap .tag-value-icon {
+ display: inline-block;
+ position: relative;
+ height: 24px;
+ width: 30px;
+ margin-right: -30px;
+ align-self: center;
+ vertical-align: middle;
+ z-index: 1;
+ padding-left: 11px;
+}
+.ideditor[dir='rtl'] .form-field-input-combo .tag-value-icon,
+.ideditor[dir='rtl'] .form-field-input-semicombo .input-wrap .tag-value-icon,
+.ideditor[dir='rtl'] .form-field-input-multicombo .input-wrap .tag-value-icon {
+ margin-right: 0;
+ margin-left: -30px;
+ padding-left: 0;
+ padding-right: 11px;
+}
+.ideditor .tag-value-icon .icon {
+ width: 21px;
+ height: 21px;
+ margin: auto;
+}
+.ideditor[dir='ltr'] .form-field-input-combo .tag-value-icon + input,
+.ideditor[dir='ltr'] .form-field-input-semicombo .input-wrap .tag-value-icon + input,
+.ideditor[dir='ltr'] .form-field-input-multicombo .input-wrap .tag-value-icon + input {
+ padding-left: 40px;
+}
+.ideditor[dir='rtl'] .form-field-input-combo .tag-value-icon + input,
+.ideditor[dir='rtl'] .form-field-input-semicombo .input-wrap .tag-value-icon + input,
+.ideditor[dir='rtl'] .form-field-input-multicombo .input-wrap .tag-value-icon + input {
+ padding-right: 40px;
+}
+.ideditor .combobox-option .tag-value-icon {
+ display: inline-block;
+ width: 28px;
+}
+.ideditor .form-field-input-multicombo li.chip .tag-value-icon .icon {
+ margin: 0;
+ margin-right: 6px;
+ display: inline-block;
+ vertical-align: center;
+}
+.ideditor[dir='rtl'] .form-field-input-multicombo li.chip .tag-value-icon .icon {
+ margin-right: 6px;
+ margin-left: 0;
+}
+
/* Field - Text / Numeric
------------------------------------------------------- */
-.ideditor .form-field-input-text > input:only-of-type,
+.ideditor .form-field-input-text > input:only-child,
.ideditor .form-field-input-tel > input:only-of-type,
.ideditor .form-field-input-email > input:only-of-type,
-.ideditor .form-field-input-url > input:only-of-type {
+.ideditor .form-field-input-url > input:only-child {
border-radius: 0 0 4px 4px;
}
+.ideditor .form-field-input-text > input:not(:only-child),
+.ideditor .form-field-input-url > input:not(:only-child) {
+ border-radius: 0 0 0 4px;
+}
.ideditor .form-field-input-number > input:only-of-type {
border-radius: 0 0 0 4px;
}
}
.ideditor .form-field-input-check > input[type="checkbox"] {
flex: 0 1 auto;
- min-height: 20px;
- width: 20px;
margin-top: 0;
}
.ideditor .form-field-input-check > span {
flex: 1 1 auto;
}
-.ideditor .form-field-input-check > .reverser.button {
+.ideditor .form-field-input-check > span.mixed {
+ font-style: italic;
+}
+.ideditor .form-field-input-check > .reverser {
flex: 0 1 auto;
background-color: #eff2f7;
border: 1px solid #ccd5e3;
border-radius: 2px;
padding: 0px 8px;
+ color: inherit;
}
-.ideditor[dir='ltr'] .form-field-input-check > .reverser.button {
+.ideditor[dir='ltr'] .form-field-input-check > .reverser {
padding-right: 2px;
}
-.ideditor[dir='rtl'] .form-field-input-check > .reverser.button {
+.ideditor[dir='rtl'] .form-field-input-check > .reverser {
padding-left: 2px;
}
-.ideditor .form-field-input-check > .reverser.button.hide {
+.ideditor .form-field-input-check > .reverser:active,
+.ideditor .form-field-input-check > .reverser:focus {
+ background: #e3e8ef;
+}
+@media (hover: hover) {
+ .ideditor .form-field-input-check > .reverser:hover {
+ background: #e3e8ef;
+ }
+}
+.ideditor .form-field-input-check > .reverser.hide {
display: none;
}
-
-.ideditor .form-field-input-check:hover {
+.ideditor .form-field-input-check:active,
+.ideditor .form-field-input-check:focus {
background: #f1f1f1;
}
+@media (hover: hover) {
+ .ideditor .form-field-input-check:hover {
+ background: #f1f1f1;
+ }
+}
.ideditor .form-field-input-check .set {
color: inherit;
}
flex: 1 1 auto;
display: flex;
flex-flow: row nowrap;
+ align-items: center;
width: 100%;
padding: 5px 10px;
- height: 30px;
background-color: #fff;
color: #7092ff;
cursor: pointer;
}
+.ideditor .form-field-input-radio > label.mixed {
+ font-style: italic;
+}
.ideditor .form-field-input-radio > label:last-child {
border-radius: 0 0 4px 4px;
}
-.ideditor .form-field-input-radio > label:hover {
+.ideditor .form-field-input-radio > label:active,
+.ideditor .form-field-input-radio > label:focus {
background-color: #ececec;
}
+@media (hover: hover) {
+ .ideditor .form-field-input-radio > label:hover {
+ background-color: #ececec;
+ }
+}
.ideditor .form-field-input-radio > label.active {
background-color: #e8ebff;
}
}
.ideditor .form-field-input-radio > label > input[type="radio"] {
flex: 0 1 auto;
- width: 20px;
}
.ideditor .form-field-input-radio > label > span {
flex: 1 1 auto;
padding: 0;
opacity: 0;
width: 0;
- line-height: 0;
+ height: 0;
display: block;
overflow: hidden;
}
-
-
-/* Field - Maxspeed
-------------------------------------------------------- */
-.ideditor .form-field-input-maxspeed > input:first-of-type {
+
+
+/* Field - roadheight and roadspeed
+------------------------------------------------------- */
+.ideditor .form-field-input-roadheight input.roadheight-number,
+.ideditor .form-field-input-roadheight input.roadheight-secondary-number,
+.ideditor .form-field-input-roadspeed input.roadspeed-number {
+ flex-basis: 0;
+ width: 0;
+}
+.ideditor .form-field-input-roadheight input.roadheight-unit,
+.ideditor .form-field-input-roadheight input.roadheight-secondary-unit {
+ flex: 0 1 auto;
+ width: 60px;
+}
+.ideditor .form-field-input-roadspeed input.roadspeed-unit {
+ flex: 0 1 auto;
+ width: 80px;
+}
+.ideditor[dir='ltr'] .form-field-input-roadheight > input:first-of-type,
+.ideditor[dir='ltr'] .form-field-input-roadspeed > input:first-of-type {
border-radius: 0 0 0 4px;
}
-.ideditor[dir='rtl'] .form-field-input-maxspeed > input:first-of-type {
+.ideditor[dir='rtl'] .form-field-input-roadheight > input:first-of-type,
+.ideditor[dir='rtl'] .form-field-input-roadspeed > input:first-of-type {
border-radius: 0 0 4px 0;
}
-.ideditor .form-field-input-maxspeed > input:last-of-type { /* unit field */
- flex: 0 1 80px;
- width: 80px;
+.ideditor[dir='ltr'] .form-field-input-roadheight > input:last-of-type,
+.ideditor[dir='ltr'] .form-field-input-roadspeed > input:last-of-type {
border-left: 0;
border-radius: 0 0 4px 0;
}
-.ideditor[dir='rtl'] .form-field-input-maxspeed > input:last-of-type {
+.ideditor[dir='rtl'] .form-field-input-roadheight > input:last-of-type,
+.ideditor[dir='rtl'] .form-field-input-roadspeed > input:last-of-type {
border-right: 0;
border-radius: 0 0 0 4px;
}
flex: 1 1 auto;
display: flex;
width: 100%;
- min-height: 30px;
}
.ideditor .addr-row > input {
.ideditor[dir='rtl'] .addr-row:last-of-type input:last-of-type {
border-radius: 0 0 0 4px;
}
+.ideditor .combobox-address-street-place .combobox-option.address-street,
+.ideditor .combobox-address-street-place .combobox-option.address-place {
+ padding-right: 20px;
+}
+.ideditor .combobox-address-street-place .combobox-option.address-street::after,
+.ideditor .combobox-address-street-place .combobox-option.address-place::after {
+ position: absolute;
+ right: 2px;
+ opacity: 0.4;
+}
+.ideditor .combobox-address-street-place .combobox-option.address-place::after {
+ content: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMCIgeT0iMCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiPg0KICAgIDxwYXRoIGQ9Ik0xMCwzIEM2LjY4NiwzIDQsNS42MTIgNCw4LjgzMyBDNCwxMi4wNTUgMTAsMTcgMTAsMTcgQzEwLDE3IDE2LDEyLjA1NSAxNiw4LjgzMyBDMTYsNS42MTIgMTMuMzE0LDMgMTAsMyB6IE0xMC4xODcsNi41IEMxMS41MTMsNi41IDEyLjU4Nyw3LjU0NSAxMi41ODcsOC44MzMgQzEyLjU4NywxMC4xMjIgMTEuNTEzLDExLjE2NyAxMC4xODcsMTEuMTY3IEM4Ljg2MiwxMS4xNjcgNy43ODcsMTAuMTIyIDcuNzg3LDguODMzIEM3Ljc4Nyw3LjU0NSA4Ljg2Miw2LjUgMTAuMTg3LDYuNSB6IiBmaWxsPSJjdXJyZW50Q29sb3IiLz4NCjwvc3ZnPg==);
+}
/* Field - Wikipedia
.ideditor .restriction-controls-container .restriction-controls {
display: table;
- -moz-user-select: none;
-webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
+ -moz-user-select: none;
+ user-select: none;
}
.ideditor .restriction-controls .restriction-control {
}
.ideditor .restriction-control input,
-.ideditor .restriction-control span {
+.ideditor .restriction-control > span {
display: table-cell;
text-align: start;
padding: 0px 5px;
}
-.ideditor .restriction-control span.restriction-control-label {
+.ideditor .restriction-control > span.restriction-control-label {
text-align: end;
}
color: #888;
text-align: center;
pointer-events: none;
-
- -moz-user-select: none;
-webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
+ -moz-user-select: none;
+ user-select: none;
}
.ideditor .restriction-help span {
/* Field - Combobox
------------------------------------------------------- */
+.ideditor[dir='ltr'] textarea.combobox-input,
+.ideditor[dir='ltr'] input.combobox-input {
+ /* leave room for the caret */
+ padding-right: 20px;
+}
+.ideditor[dir='rtl'] textarea.combobox-input,
+.ideditor[dir='rtl'] input.combobox-input {
+ padding-left: 20px;
+}
+
.ideditor div.combobox {
z-index: 9999;
display: none;
display: block;
padding: 5px 10px;
border-top: 1px solid #ccc;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
+ line-height: 0.95rem;
+ break: all;
}
.ideditor .combobox a.selected,
-.ideditor .combobox a:hover {
+.ideditor .combobox a:active,
+.ideditor .combobox a:focus {
background: #ececec;
}
+@media (hover: hover) {
+ .ideditor .combobox a:hover {
+ background: #ececec;
+ }
+}
.ideditor .combobox a:first-child {
border-top: 0;
.ideditor .combobox-caret {
display: inline-block;
position: relative;
- height: 30px;
+ height: 5px;
width: 30px !important;
margin-left: -30px;
- vertical-align: top;
+ align-self: center;
+ vertical-align: middle;
cursor: pointer;
}
.ideditor[dir='rtl'] .combobox-caret {
border-right: 5px solid transparent;
}
+.ideditor .combobox .combobox-option.raw-option {
+ font-family: monospace;
+ color: #333;
+}
+
+.ideditor .combobox .combobox-option.virtual-option {
+ font-style: italic;
+ color: #333;
+}
+
+.ideditor .form-field-input-wrap {
+ position: relative;
+}
+
+.ideditor .form-field-input-wrap span.length-indicator-wrap {
+ visibility: hidden;
+ position: absolute;
+ top: -5px;
+ left: 0;
+ right: 0;
+}
+
+.ideditor .form-field-input-wrap input:focus + span.length-indicator-wrap,
+.ideditor .form-field-input-wrap textarea:focus + span.length-indicator-wrap,
+.ideditor .form-field-input-wrap input:focus + div.combobox-caret + span.length-indicator-wrap,
+.ideditor .form-field-input-wrap textarea:focus + div.combobox-caret + span.length-indicator-wrap {
+ visibility: visible;
+}
+
+.ideditor .form-field-input-wrap span.length-indicator {
+ display: block;
+ left: 0;
+ right: 0;
+ height: 4px;
+ background-color: #7092ff;
+ border-right-style: solid;
+ border-right-color: lightgray;
+}
+
+.ideditor .form-field-input-wrap span.length-indicator.limit-reached {
+ border-right-color: red;
+}
+
+.ideditor .tooltip.max-length-warning {
+ z-index: 10;
+}
/* Field Help
------------------------------------------------------- */
color: #7092ff;
border-bottom: 2px solid;
}
-.ideditor .field-help-nav-item:hover {
+.ideditor .field-help-nav-item:active,
+.ideditor .field-help-nav-item:focus {
color: #597be7;
background-color: #efefef;
}
+@media (hover: hover) {
+ .ideditor .field-help-nav-item:hover {
+ color: #597be7;
+ background-color: #efefef;
+ }
+}
.ideditor .field-help-content {
padding: 10px;
/* More Fields dropdown
------------------------------------------------------- */
.ideditor .more-fields {
- padding: 0 20px 20px 20px;
+ margin-top: 10px;
font-weight: bold;
}
-.ideditor .changeset-editor .more-fields {
- padding: 15px 20px 0 20px;
-}
.ideditor .more-fields label {
display: flex;
.ideditor .more-fields input {
margin-left: 10px;
- flex: 1 1 50%;
+ flex: 1 1 auto;
}
.ideditor[dir='rtl'] .more-fields input {
margin-left: auto;
}
.ideditor .form-field-input-wrap .label {
- height: 30px;
background: #f6f6f6;
padding: 5px 10px;
}
.ideditor .raw-tag-options {
display: flex;
flex-flow: row nowrap;
- flex-direction: row-reverse;
- margin-top: -25px;
- padding: 0 3px;
+ justify-content: flex-end;
+ margin-top: -28px;
}
.ideditor button.raw-tag-option {
- flex: 0 0 20px;
- height: 20px;
- width: 20px;
+ flex: 0 0 auto;
+ padding: 3px;
background: #aaa;
color: #eee;
margin: 0 3px;
}
.ideditor button.raw-tag-option:focus,
-.ideditor button.raw-tag-option:hover,
.ideditor button.raw-tag-option.active {
color: #fff;
background: #597be7;
}
+@media (hover: hover) {
+ .ideditor button.raw-tag-option:hover {
+ color: #fff;
+ background: #597be7;
+ }
+}
.ideditor button.raw-tag-option.selected {
color: #fff;
background: #7092ff;
.ideditor button.raw-tag-option svg.icon {
width: 14px;
height: 14px;
- vertical-align: text-bottom;
+ display: block;
}
.ideditor[dir='ltr'] button.raw-tag-option-list {
- -moz-transform: scaleX(-1);
- -o-transform: scaleX(-1);
- -webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
.ideditor .tag-text {
width: 100%;
height: 100%;
+ min-height: 32px;
font-family: monospace;
white-space: pre;
}
}
.ideditor .tag-row input {
- height: 31px;
border: 0;
border-radius: 0;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.ideditor .tag-row button {
- flex: 0 0 32px;
- height: 31px;
+ flex: 0 0 auto;
width: 32px;
border: 1px solid #ccc;
border-top-width: 0;
border-right-width: 0;
}
-.ideditor .tag-row button:hover {
+.ideditor .tag-row button:active,
+.ideditor .tag-row button:focus {
background: #f1f1f1;
}
+@media (hover: hover) {
+ .ideditor .tag-row button:hover {
+ background: #f1f1f1;
+ }
+}
.ideditor .tag-row button .icon {
opacity: .5;
}
}
.ideditor .tag-reference-body.expanded {
padding-bottom: 10px;
- display: inline-block;
+ padding-left: 10px;
+ display: block;
}
-.ideditor .tag-reference-description {
-
+.ideditor[dir='rtl'] .tag-reference-body.expanded {
+ padding-left: 0;
+ padding-right: 10px;
}
.ideditor .tag-reference-link {
display: block;
}
+.ideditor .tag-reference-link .icon:first-child {
+ margin-left: 0;
+}
.ideditor img.tag-reference-wiki-image {
float: right;
/* Raw Member / Membership Editor
------------------------------------------------------- */
+.ideditor .section-raw-member-editor .member-list:empty,
+.ideditor .section-raw-membership-editor .member-list:empty {
+ display: none;
+}
-.ideditor .raw-member-editor .member-list,
-.ideditor .raw-membership-editor .member-list {
- padding-top: 10px;
+.ideditor .section-raw-member-editor .member-list,
+.ideditor .section-raw-membership-editor .member-list {
+ position: relative; /* required for drag-and-drop */
+ padding-top: 5px;
}
-.ideditor .raw-member-editor .member-list li,
-.ideditor .raw-membership-editor .member-list li {
+.ideditor .section-raw-member-editor .member-list li,
+.ideditor .section-raw-membership-editor .member-list li {
position: relative;
border-radius: 4px;
margin: 0;
padding-bottom: 10px;
}
-.ideditor .raw-member-editor .member-row .member-entity-name,
-.ideditor .raw-membership-editor .member-row .member-entity-name {
+.ideditor .section-raw-member-editor .member-row .member-entity-name,
+.ideditor .section-raw-membership-editor .member-row .member-entity-name {
font-weight: normal;
padding-left: 10px;
}
+.ideditor .section-raw-member-editor .member-row .member-entity-name.has-colour::before,
+.ideditor .section-raw-membership-editor .member-row .member-entity-name.has-colour::before,
+.ideditor .feature-list .entity-name.has-colour::before,
+.ideditor .combobox-parent-relation .has-colour::before {
+ display: inline-block;
+ content: '';
+ margin-left: -5px;
+ margin-right: 5px;
+ border-style: solid;
+ border-width: 4px;
+ border-radius: 4px;
+ border-color: inherit;
+}
+.ideditor .combobox-parent-relation .has-colour::before {
+ margin-left: 2px;
+}
-.ideditor[dir='rtl'] .raw-member-editor .member-row .member-entity-name,
-.ideditor[dir='rtl'] .raw-membership-editor .member-row .member-entity-name {
+.ideditor[dir='rtl'] .section-raw-member-editor .member-row .member-entity-name,
+.ideditor[dir='rtl'] .section-raw-membership-editor .member-row .member-entity-name {
padding-left:0;
padding-right: 10px;
}
-
-.ideditor .form-field-input-member > input.member-role {
- border-radius: 0 0 0 4px;
+.ideditor[dir='rtl'] .section-raw-member-editor .member-row .member-entity-name.has-colour::before,
+.ideditor[dir='rtl'] .section-raw-membership-editor .member-row .member-entity-name.has-colour::before,
+.ideditor[dir='rtl'] .feature-list .entity-name.has-colour::before {
+ margin-left: 5px;
+ margin-right: -5px;
}
-.ideditor[dir='rtl'] .form-field-input-member > input.member-role {
- border-radius: 0 0 4px 0;
+.ideditor[dir='rtl'] .combobox-parent-relation .has-colour::before {
+ margin-left: 5px;
+ margin-right: 2px;
}
-.ideditor .member-incomplete .form-field-input-member > input.member-role,
-.ideditor[dir='rtl'] .member-incomplete .form-field-input-member > input.member-role {
- border-radius: 0 0 4px 4px;
-}
-.ideditor .member-incomplete .member-delete {
- display: none;
+.ideditor .form-field-input-member > input.member-role {
+ border-radius: 0 0 4px 4px;
}
.ideditor .member-row-new .member-entity-input {
border: 0;
}
-.ideditor .raw-member-editor .member-row.dragging {
+.ideditor .section-raw-member-editor .member-row.dragging {
opacity: 0.75;
z-index: 3000;
/*
- -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
- -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
*/
}
-/* preserve extra space at bottom of inspector to allow for dropdown options - #5280 */
-.ideditor .raw-membership-editor.inspector-inner {
- margin-bottom: 150px;
-}
-
-/* hidden field to prevent user from tabbing out of the sidebar */
-.ideditor input.key-trap {
- height: 0px;
- width: 0px;
- padding: 0px;
- border: 1px solid rgba(0,0,0,0);
-}
-
-
/* add tag, add relation buttons */
.ideditor .add-row {
display: flex;
flex: 0 0 62px;
}
.ideditor .add-row button {
- height: 30px;
+ padding: 5px;
background: rgba(0,0,0,.5);
}
.ideditor .add-row button:focus,
-.ideditor .add-row button:hover {
+.ideditor .add-row button:active {
background: rgba(0,0,0,.8);
}
+@media (hover: hover) {
+ .ideditor .add-row button:hover {
+ background: rgba(0,0,0,.8);
+ }
+}
.ideditor .add-tag {
border-radius: 0 0 4px 4px;
}
-/* OSM Note / KeepRight Editors
+/* OSM Note / QA Editors
------------------------------------------------------- */
.ideditor .note-header,
-.ideditor .error-header {
+.ideditor .qa-header {
background-color: #f6f6f6;
border-radius: 5px;
border: 1px solid #ccc;
}
.ideditor .note-header-icon,
-.ideditor .error-header-icon {
+.ideditor .qa-header-icon {
background-color: #fff;
padding: 10px;
- flex: 0 0 62px;
+ flex: 0 0 auto;
position: relative;
width: 60px;
height: 60px;
border-radius: 5px 0 0 5px;
}
.ideditor[dir='rtl'] .note-header-icon,
-.ideditor[dir='rtl'] .error-header-icon {
+.ideditor[dir='rtl'] .qa-header-icon {
border-right: unset;
border-left: 1px solid #ccc;
border-radius: 0 5px 5px 0;
}
.ideditor .note-header-icon .icon-wrap,
-.ideditor .error-header-icon .icon-wrap {
+.ideditor .qa-header-icon .icon-wrap {
position: absolute;
top: 0px;
}
}
.ideditor .note-header-label,
-.ideditor .error-header-label {
+.ideditor .qa-header-label {
background-color: #f6f6f6;
padding: 0 15px;
flex: 1 1 100%;
border-radius: 0 5px 5px 0;
}
.ideditor[dir='rtl'] .note-header-label,
-.ideditor[dir='rtl'] .error-header-label {
+.ideditor[dir='rtl'] .qa-header-label {
border-radius: 5px 0 0 5px;
}
}
.ideditor .comment-avatar {
padding: 10px;
- flex: 0 0 62px;
+ flex: 0 0 auto;
}
.ideditor .comment-avatar .icon.comment-avatar-icon {
width: 40px;
height: 40px;
- object-fit: cover;
+ -o-object-fit: cover;
+ object-fit: cover;
border: 1px solid #ccc;
border-radius: 20px;
}
}
.ideditor .note-save,
-.ideditor .error-save {
+.ideditor .qa-save {
padding-top: 20px;
}
-.ideditor .error-details {
- padding: 10px;
-}
-.ideditor .error-details-container {
+.ideditor .qa-details-container {
background: #ececec;
padding: 10px;
margin-top: 20px;
border-radius: 4px;
border: 1px solid #ccc;
+ display: flex;
+ flex-direction: column;
}
-.ideditor .error-details-description {
- margin-bottom: 10px;
-}
-.ideditor .error-details-description-text::first-letter {
+.ideditor .qa-details-description-text::first-letter {
text-transform: capitalize;
}
-.ideditor[dir='rtl'] .error-details-description-text::first-letter {
+.ideditor[dir='rtl'] .qa-details-description-text::first-letter {
text-transform: none; /* #5877 */
}
+.ideditor .qa-details-subsection h4 {
+ padding-bottom: 2px;
+}
+.ideditor .qa-details-subsection:not(:last-child) {
+ margin-bottom: 10px;
+}
+.ideditor .qa-details-subsection:empty {
+ display: none;
+}
.ideditor .note-save .new-comment-input,
-.ideditor .error-save .new-comment-input {
+.ideditor .qa-save .new-comment-input {
width: 100%;
height: 100px;
max-height: 300px;
}
.ideditor .note-save .detail-section,
-.ideditor .error-save .detail-section {
+.ideditor .qa-save .detail-section {
margin: 10px 0;
}
.ideditor .data-header-icon {
background-color: #fff;
padding: 10px;
- flex: 0 0 62px;
+ flex: 0 0 auto;
position: relative;
width: 60px;
height: 60px;
}
+.ideditor .over-map {
+ position: relative;
+ height: 100%;
+ pointer-events: none;
+ display: flex;
+ flex-direction: row-reverse;
+ align-items: flex-end;
+ overflow: hidden;
+}
+.ideditor .over-map > * {
+ pointer-events: auto;
+ z-index: 5;
+}
+/* offscreen this without hiding it */
+.ideditor .over-map .select-trap {
+ position: absolute;
+ right: -1000%;
+ opacity: 0;
+}
+
/* Map Controls
------------------------------------------------------- */
+.ideditor .map-controls-wrap {
+ position: absolute;
+ left: 0;
+ right: 0;
+ height: 100%;
+ z-index: 100;
+ display: block;
+ overflow-x: hidden;
+ overflow-y: auto;
+ pointer-events: none;
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+}
+.ideditor .map-controls-wrap::-webkit-scrollbar {
+ display: none;
+}
.ideditor .map-controls {
right: 0;
- top: 141px;
+ top: 0;
width: 40px;
position: absolute;
- z-index: 100;
+ bottom: 0;
+ display: flex;
+ flex-direction: column;
+ padding: 5px 0;
+ pointer-events: none;
+}
+.ideditor .map-controls:before {
+ content: '';
+ display: inline-block;
+ pointer-events: none;
+ width: 40px;
+ height: 100%;
+ max-height: 70px;
+ flex: 0 1 auto;
}
.ideditor[dir='rtl'] .map-controls {
left: 0;
right: auto;
}
+.ideditor .map-control {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+}
.ideditor .map-control > button {
position: relative;
width: 40px;
+ height: 40px;
background: rgba(0,0,0,.5);
border-radius: 0;
+ pointer-events: auto;
}
-.ideditor .map-control > button:not(.disabled):hover,
-.ideditor .map-control > button:not(.disabled):focus {
+.ideditor .map-control > button:not(.disabled):focus,
+.ideditor .map-control > button:not(.disabled):active {
background: rgba(0, 0, 0, .8);
}
-
.ideditor .map-control > button.active,
-.ideditor .map-control > button.active:hover {
+.ideditor .map-control > button.active:active {
background: #7092ff;
}
+@media (hover: hover) {
+ .ideditor .map-control > button:not(.disabled):hover {
+ background: rgba(0, 0, 0, .8);
+ }
+ .ideditor .map-control > button.active:hover {
+ background: #7092ff;
+ }
+}
.ideditor .map-control > button.disabled .icon {
color: rgba(255, 255, 255, 0.5);
/* Fullscreen Button (disabled)
------------------------------------------------------- */
.ideditor div.full-screen {
- display: inline-block;
+ /*display: inline-block;*/
width: 40px;
margin-right: 10px;
display: none;
height: 40px;
background: transparent;
}
-
-.ideditor div.full-screen > button:hover {
+.ideditor div.full-screen > button:active,
+.ideditor div.full-screen > button:focus {
background-color: rgba(0, 0, 0, .8);
}
+@media (hover: hover) {
+ .ideditor div.full-screen > button:hover {
+ background-color: rgba(0, 0, 0, .8);
+ }
+}
-/* Zoom Buttons
+/* Map Controls
------------------------------------------------------- */
+
+/* Zoom in/out buttons */
.ideditor .zoombuttons > button.zoom-in {
border-radius: 4px 0 0 0;
}
border-radius: 0 4px 0 0;
}
-
-/* Geolocate Button
-------------------------------------------------------- */
+/* Geolocate button */
.ideditor .geolocate-control {
margin-bottom: 10px;
}
border-radius: 0 0 4px 0;
}
+/* Zoom to selection button */
+.ideditor .zoom-to-selection-control .icon {
+ width: 22px;
+ height: 22px;
+}
+
/* Background / Map Data / Help Pane buttons
------------------------------------------------------- */
/* Background / Map Data Settings
------------------------------------------------------- */
-.ideditor .map-data-control,
-.ideditor .background-control {
- position: relative;
-}
-
.ideditor .imagery-faq {
margin-bottom: 10px;
white-space: nowrap;
}
.ideditor .layer-list > li {
- height: 30px;
background-color: #fff;
color: #7092ff;
position: relative;
.ideditor .layer-list li:not(:last-child) {
border-bottom: 1px solid #ccc;
}
-.ideditor .layer-list li:hover {
+.ideditor .layer-list li:active {
background-color: #ececec;
}
+@media (hover: hover) {
+ .ideditor .layer-list li:hover {
+ background-color: #ececec;
+ }
+}
.ideditor .layer-list li.active button,
.ideditor .layer-list li.switch button,
.ideditor .layer-list li.best > div.best {
padding: 5px;
flex: 0 0 auto;
+ align-self: center;
}
.ideditor[dir='rtl'] .list-item-data-browse svg {
padding: 5px 10px;
cursor: pointer;
flex: 1 1 auto;
+ display: flex;
+ align-items: center;
+ overflow: hidden;
}
.ideditor[dir='ltr'] .layer-list .indented label {
.ideditor .layer-list label > span {
display: block;
overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
+ width: calc(100% - 20px); /* Ensures radio input width within flexbox */
+}
+
+.ideditor .layer-list label span.localized-text {
+ line-height: 0.95rem;
+}
+
+.ideditor .layer-list input.list-item-input {
+ height: 2.2em;
+ padding: 0px 4px;
+ width: 50%;
+ min-width: 160px;
}
.ideditor .map-data-pane .layer-list button,
.ideditor .background-pane .layer-list button {
- height: 100%;
border-left: 1px solid #ccc;
border-radius: 0;
padding-left: 4px;
display: flex;
flex-flow: row nowrap;
cursor: pointer;
+ text-align: initial;
+ background: none;
}
.ideditor .issue-text .issue-icon {
flex: 0 0 auto;
- padding: 5px 7px;
+ padding: 2px 3px;
}
.ideditor .issue-text .issue-message {
flex: 1 1 auto;
- padding: 5px 0;
+ padding: 4px 5px;
}
.ideditor .issue-label .issue-autofix {
flex: 0 0 auto;
color: #fff;
}
.ideditor button.autofix.action:focus,
-.ideditor button.autofix.action:hover,
+.ideditor button.autofix.action:active,
.ideditor button.autofix.action.active {
background: #597be7;
}
+@media (hover: hover) {
+ .ideditor button.autofix.action:hover {
+ background: #597be7;
+ }
+}
/* fix all */
.ideditor .autofix-all {
display: flex;
flex-flow: row nowrap;
- flex-direction: row-reverse;
+ justify-content: flex-end;
margin-top: -25px;
padding-bottom: 5px;
}
.ideditor .warnings-list .issue.severity-warning .issue-label,
.ideditor .issue.severity-warning .issue-fix-list,
-.ideditor.mode-save .warning-section {
+.ideditor .warning-section {
background: #ffc;
}
background: #ffa;
}
-.ideditor .warnings-list .issue.severity-warning .issue-label:hover,
-.ideditor .issue.severity-warning .issue-fix-item.actionable:hover {
- background: #ff8;
-}
-
.ideditor .issue.severity-warning .issue-icon {
color: #f90;
}
-.ideditor .issue.severity-warning .issue-fix-item.actionable,
+.ideditor .issue.severity-warning .issue-fix-item button.actionable,
.ideditor .issue-container.active .issue.severity-warning .issue-info-button {
color: #b15500;
fill: #b15500;
- /*color: #7092ff;*/
- /*fill: #7092ff;*/
}
-.ideditor .issue.severity-warning .issue-fix-item.actionable:hover,
-.ideditor .issue-container.active .issue.severity-warning .issue-info-button:hover {
+.ideditor .warnings-list .issue.severity-warning .issue-label:active,
+.ideditor .warnings-list .issue.severity-warning .issue-label:focus,
+.ideditor .issue.severity-warning .issue-fix-item button.actionable:active,
+.ideditor .issue.severity-warning .issue-fix-item button.actionable:focus {
+ background: #ff8;
+}
+.ideditor .issue.severity-warning .issue-fix-item button.actionable:active,
+.ideditor .issue.severity-warning .issue-fix-item button.actionable:focus,
+.ideditor .issue-container.active .issue.severity-warning .issue-info-button:active,
+.ideditor .issue-container.active .issue.severity-warning .issue-info-button:focus {
color: #7f3d00;
fill: #7f3d00;
- /*color: #597be7;*/
- /*fill: #597be7;*/
}
-
-.ideditor .notification-badge.warning {
- color: #ffdf5c;
+@media (hover: hover) {
+ .ideditor .warnings-list .issue.severity-warning .issue-label:hover,
+ .ideditor .issue.severity-warning .issue-fix-item button.actionable:hover {
+ background: #ff8;
+ }
+ .ideditor .issue.severity-warning .issue-fix-item button.actionable:hover,
+ .ideditor .issue-container.active .issue.severity-warning .issue-info-button:hover {
+ color: #7f3d00;
+ fill: #7f3d00;
+ }
}
.ideditor .errors-list .issue.severity-error .issue-label,
.ideditor .issue.severity-error .issue-fix-list,
-.ideditor.mode-save .error-section {
+.ideditor .error-section {
background: #ffd6d6;
}
background: #ffc6c6;
}
-.ideditor .errors-list .issue.severity-error .issue-label:hover,
-.ideditor .issue.severity-error .issue-fix-item.actionable:hover {
- background: #ffb6b6;
+.ideditor .issue.severity-error .issue-fix-item button.actionable,
+.ideditor .issue-container.active .issue.severity-error .issue-info-button {
+ color: #b91201;
+ fill: #b91201;
}
-
.ideditor .issue.severity-error .issue-icon {
color: #dd1400;
}
-
-.ideditor .issue.severity-error .issue-fix-item.actionable,
-.ideditor .issue-container.active .issue.severity-error .issue-info-button {
- color: #b91201;
- fill: #b91201;
- /*color: #7092ff;*/
- /*fill: #7092ff;*/
+.ideditor .errors-list .issue.severity-error .issue-label:active,
+.ideditor .errors-list .issue.severity-error .issue-label:focus,
+.ideditor .issue.severity-error .issue-fix-item button.actionable:active,
+.ideditor .issue.severity-error .issue-fix-item button.actionable:focus {
+ background: #ffb6b6;
}
-.ideditor .issue.severity-error .issue-fix-item.actionable:hover,
-.ideditor .issue-container.active .issue.severity-error .issue-info-button:hover {
+.ideditor .issue.severity-error .issue-fix-item button.actionable:active,
+.ideditor .issue.severity-error .issue-fix-item button.actionable:focus,
+.ideditor .issue-container.active .issue.severity-error .issue-info-button:active,
+.ideditor .issue-container.active .issue.severity-error .issue-info-button:focus {
color: #840c00;
fill: #840c00;
- /*color: #597be7;*/
- /*fill: #597be7;*/
}
-
-.ideditor .notification-badge.error {
- color: #ff0c05;
+@media (hover: hover) {
+ .ideditor .errors-list .issue.severity-error .issue-label:hover,
+ .ideditor .issue.severity-error .issue-fix-item button.actionable:hover {
+ background: #ffb6b6;
+ }
+ .ideditor .issue.severity-error .issue-fix-item button.actionable:hover,
+ .ideditor .issue-container.active .issue.severity-error .issue-info-button:hover {
+ color: #840c00;
+ fill: #840c00;
+ }
}
.ideditor .issues-option label {
display: table-cell;
padding: 0 10px;
+ white-space: nowrap;
}
.ideditor .layer-list.issues-list li.issue {
.ideditor .section-footer {
display: flex;
flex-flow: row nowrap;
- flex-direction: row-reverse;
+ justify-content: flex-end;
height: 30px;
}
.ideditor .section-footer a {
padding: 5px;
}
-.ideditor .issues-none .box {
+.ideditor .section-issues-status .box {
border-radius: 4px;
border: 1px solid #72d979;
background: #c6ffca;
padding: 5px !important;
display: flex;
}
-.ideditor .issues-none .icon {
+.ideditor .section-issues-status .icon {
color: #05ac10;
}
.ideditor input.square-degrees-input {
- padding: 2px !important; /* important needed for rtl */
- width: 40px;
- height: unset;
+ padding: 2px !important; /* important needed for rtl */
+ width: 3em;
+ height: 2em;
text-align: center;
background: rgba(0,0,0,0);
color: currentColor;
/* Entity Issues List */
-.ideditor .entity-issues .issue-container .issue {
+.ideditor .section-entity-issues .issue-container .issue {
border-radius: 4px;
border: 1px solid #ccc;
background: #f6f6f6;
}
-.ideditor .entity-issues .issue-container:not(.active) .issue-text:hover,
-.ideditor .entity-issues .issue-container:not(.active) .issue-info-button:hover {
+.ideditor .section-entity-issues .issue-container:not(.active) .issue-text:active,
+.ideditor .section-entity-issues .issue-container:not(.active) .issue-text:focus,
+.ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:active,
+.ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:focus {
background: #f1f1f1;
}
-.ideditor .entity-issues .issue .issue-label .issue-text {
+@media (hover: hover) {
+ .ideditor .section-entity-issues .issue-container:not(.active) .issue-text:hover,
+ .ideditor .section-entity-issues .issue-container:not(.active) .issue-info-button:hover {
+ background: #f1f1f1;
+ }
+}
+.ideditor .section-entity-issues .issue .issue-label .issue-text {
padding-right: 10px;
}
-.ideditor[dir='rtl'] .entity-issues .issue .issue-label .issue-text {
+.ideditor[dir='rtl'] .section-entity-issues .issue .issue-label .issue-text {
padding-right: unset;
padding-left: 10px;
}
-.ideditor .entity-issues .issue-container.active .issue-label .issue-text {
+.ideditor .section-entity-issues .issue-container.active .issue-label button.issue-text {
font-weight: bold;
}
-.ideditor .entity-issues .issue-container:not(:last-of-type) {
+.ideditor .section-entity-issues .issue-container:not(:last-of-type) {
margin-bottom: 5px;
}
-.ideditor .entity-issues .issue-container.active:not(:first-of-type) {
+.ideditor .section-entity-issues .issue-container.active:not(:first-of-type) {
margin-top: 10px;
}
-.ideditor .entity-issues .issue-container.active:not(:last-of-type) {
+.ideditor .section-entity-issues .issue-container.active:not(:last-of-type) {
margin-bottom: 10px;
}
/* fixes */
-.ideditor .entity-issues .issue-fix-list {
+.ideditor .section-entity-issues .issue-fix-list {
border-top: 1px solid;
border-color: inherit;
}
-.ideditor .entity-issues .issue-container.active .issue-fix-list:empty {
+.ideditor .section-entity-issues .issue-container.active .issue-fix-list:empty {
display: none;
}
-.ideditor li.issue-fix-item {
+.ideditor li.issue-fix-item button {
padding: 2px 10px 2px 20px;
+ background: transparent;
+ width: 100%;
+ text-align: initial;
}
-.ideditor[dir='rtl'] li.issue-fix-item {
+.ideditor[dir='rtl'] li.issue-fix-item button {
padding: 2px 20px 2px 10px;
}
-.ideditor li.issue-fix-item:first-of-type {
+.ideditor li.issue-fix-item:first-of-type button {
padding-top: 5px;
}
-.ideditor li.issue-fix-item:last-of-type {
+.ideditor li.issue-fix-item:last-of-type button {
padding-bottom: 5px;
}
-.ideditor li.issue-fix-item .fix-message {
+.ideditor li.issue-fix-item button .fix-message {
padding: 0 10px;
+ vertical-align: middle;
}
-.ideditor li.issue-fix-item.actionable {
+.ideditor li.issue-fix-item button.actionable {
cursor: pointer;
}
-.ideditor li.issue-fix-item:not(.actionable) .fix-icon {
+.ideditor li.issue-fix-item button:not(.actionable) .fix-icon {
color: #555;
fill: #555;
}
.ideditor .issue-container:not(.active) ul.issue-fix-list {
display: none;
}
+.ideditor .issue-container:not(.active) .issue-info {
+ display: none;
+}
.ideditor .issue-info {
flex: 1 1 auto;
padding: 10px;
}
-.ideditor .display-control h5 {
+.ideditor .display-options-container label {
padding-bottom: 0;
padding-top: 10px;
}
-.ideditor .display-control h5 span {
+.ideditor .display-options-container label span {
+ font-weight: bold;
margin: 5px;
}
+.ideditor .display-control .control-wrap {
+ display: flex;
+ align-items: center;
+ width: 100%;
+}
.ideditor .display-control .display-option-input {
height: 20px;
- width: 155px;
+ flex: 1 1 100%;
}
.ideditor .display-control button {
margin-right: 0px;
vertical-align: text-bottom;
border-radius: 4px;
+ flex: 0 0 auto;
}
.ideditor[dir='rtl'] .display-control button {
margin-left: 0px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
+ position: relative;
}
-.ideditor .nudge-container .nudge-instructions {
- padding-bottom: 15px;
+.ideditor .nudge-container .nudge-controls-wrap {
+ position: relative;
+ width: 100%;
+ overflow: hidden;
}
.ideditor .nudge-container .nudge-outer-rect {
border: 1px solid #ccc;
border-radius: 2px;
padding: 20px 0;
- width: 70%;
display: flex;
justify-content: center;
align-items: center;
- margin: 0 auto;
- margin-top: 20px;
+ margin: 45px;
cursor: move;
+ /* prevent scrolling pane while dragging on touchscreen */
+ touch-action: none;
+ /* disable drag-to-select */
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ position: relative;
}
.ideditor .nudge-container .nudge-inner-rect {
.ideditor .nudge-container input {
width: 100%;
- height: 20px;
+ padding: 2px;
text-align: center;
border: 0;
}
background: #ffb;
}
-.ideditor .nudge-container input:focus {
- background-color: transparent;
-}
-
.ideditor .nudge-container button {
- float: left;
- display: block;
- width: 20%;
- position: relative;
- background-color: transparent;
+ position: absolute;
+ height: 40px;
+ width: 40px;
+}
+.ideditor .nudge-container button.right,
+.ideditor .nudge-container button.left {
+ top: 0;
+ bottom: 0;
+ margin-top: auto;
+ margin-bottom: auto;
+ vertical-align: middle;
}
-
.ideditor .nudge-container button.right {
- top: -50px;
- right: -85%;
+ right: 0;
}
-
.ideditor .nudge-container button.left {
- top: -50px;
- right: 45%;
+ left: 0;
+}
+.ideditor .nudge-container button.top,
+.ideditor .nudge-container button.bottom {
+ left: 0;
+ right: 0;
+ margin-left: auto;
+ margin-right: auto;
}
-
.ideditor .nudge-container button.top {
- left: 20%;
- top: -104px;
+ top: 0;
}
-
.ideditor .nudge-container button.bottom {
- left: -20%;
+ bottom: 0;
}
.ideditor .nudge-container button.nudge-reset {
- right: -10px;
+ right: 0;
+ bottom: 0;
}
.ideditor .nudge-surface {
flex: 0 1 auto;
position: relative;
height: 100%;
+ max-width: 100%;
}
.ideditor .map-pane {
position: relative;
top: 0;
width: 400px;
+ max-width: 100%;
height: 100%;
- padding-bottom: 60px;
- overflow: hidden;
z-index: 10;
+ display: flex;
+ flex-direction: column;
}
-.ideditor .map-pane.help-wrap {
+.ideditor .map-pane.help-pane {
width: 600px;
}
flex-flow: row nowrap;
justify-content: space-between;
border-bottom: 1px solid #ccc;
- height: 60px;
+ flex: 0 0 auto;
}
.ideditor .pane-heading h2 {
.ideditor .pane-heading button {
width: 40px;
- height: 100%;
border-radius: 0;
}
.ideditor .pane-content {
height: 100%;
- padding: 10px 40px 20px 20px;
+ padding: 10px 50px 20px 20px;
overflow-x: hidden;
overflow-y: scroll;
position: relative;
}
.ideditor[dir='rtl'] .pane-content {
- padding: 10px 20px 20px 40px;
+ padding: 10px 20px 20px 50px;
}
-.ideditor .pane-content > div {
+.ideditor .help-pane .pane-content > div {
padding-bottom: 15px;
}
/* Help
------------------------------------------------------- */
-.ideditor .help-wrap p {
+.ideditor .help-pane p {
font-size: 15px;
margin-bottom: 20px;
}
-.ideditor .help-wrap .left-content .body p code {
- padding: 3px 4px;
- font-size: 12px;
- color: #555;
- vertical-align: baseline;
- background-color: #f6f6f6;
- border: solid 1px #ccc;
- margin: 0 2px;
- border-bottom-color: #bbb;
- border-radius: 3px;
- box-shadow: inset 0 -1px 0 #bbb;
-}
-
-.ideditor .help-wrap .left-content .icon.pre-text {
- vertical-align: text-top;
+.ideditor .help-pane .left-content .icon.inline,
+.ideditor .curtain-tooltip .icon.inline {
margin-right: 0;
margin-left: 0;
- display: inline-block;
+ height: 1.34em;
+ width: 1.34em;
}
-.ideditor .help-wrap .toc {
- width: 40%;
+.ideditor .help-pane .toc {
+ width: 100%;
+ max-width: 200px;
float: right;
margin-left: 20px;
margin-bottom: 20px;
padding-left: 5px;
}
-.ideditor .help-wrap .toc li a,
-.ideditor .help-wrap .nav a {
+.ideditor .help-pane .toc li a,
+.ideditor .help-pane .nav a {
display: block;
border: 1px solid #ccc;
padding: 5px 10px;
}
-.ideditor .help-wrap .toc li a {
+.ideditor .help-pane .toc li a {
border-bottom: 0;
}
-
-.ideditor .help-wrap .toc li a:hover,
-.ideditor .help-wrap .nav a:hover {
+.ideditor .help-pane .toc li a:focus,
+.ideditor .help-pane .nav a:focus,
+.ideditor .help-pane .toc li a:active,
+.ideditor .help-pane .nav a:active {
background: #ececec;
}
+@media (hover: hover) {
+ .ideditor .help-pane .toc li a:hover,
+ .ideditor .help-pane .nav a:hover {
+ background: #ececec;
+ }
+}
-.ideditor .help-wrap .toc li a.selected {
+.ideditor .help-pane .toc li a.selected {
background: #e8ebff;
}
-.ideditor .help-wrap .toc li:first-child a {
+.ideditor .help-pane .toc li:first-child a {
border-radius: 4px 4px 0 0;
}
-.ideditor .help-wrap .toc li:nth-last-child(3) a {
+.ideditor .help-pane .toc li:nth-last-child(3) a {
border-bottom: 1px solid #ccc;
border-radius: 0 0 4px 4px
}
-.ideditor .help-wrap .toc li.shortcuts a,
-.ideditor .help-wrap .toc li.walkthrough a {
+.ideditor .help-pane .toc li.shortcuts a,
+.ideditor .help-pane .toc li.walkthrough a {
overflow: hidden;
margin-top: 10px;
border-bottom: 1px solid #ccc;
border-radius: 4px;
}
-.ideditor .help-wrap .toc li.walkthrough a {
+.ideditor .help-pane .toc li.walkthrough a {
text-align: center;
}
-.ideditor .help-wrap .nav {
+.ideditor .help-pane .nav {
position: relative;
padding-bottom: 30px;
}
-.ideditor .help-wrap .nav a {
+.ideditor .help-pane .nav a {
float: left;
width: 50%;
text-align: center;
}
-.ideditor .help-wrap .nav a:first-child {
+.ideditor .help-pane .nav a:first-child {
border-radius: 4px 0 0 4px;
}
-.ideditor .help-wrap .nav a:last-child:not(:only-child) {
+.ideditor .help-pane .nav a:last-child:not(:only-child) {
border-radius: 0 4px 4px 0;
border-left: 0;
}
-.ideditor .help-wrap .nav a:only-child {
+.ideditor .help-pane .nav a:only-child {
width: 100%;
border-radius: 4px;
}
/* Inspector (hover styles)
------------------------------------------------------- */
-.ideditor .inspector-hover .entity-issues .issue-container .issue .issue-label,
+.ideditor .inspector-hover .section-entity-issues .issue-container .issue .issue-label,
.ideditor .inspector-hover .form-field-input-wrap .label,
.ideditor .inspector-hover .form-field-input-multicombo .chiplist,
.ideditor .inspector-hover .form-field-button,
.ideditor .inspector-hover a,
.ideditor .inspector-hover .form-field-input-multicombo .chip,
.ideditor .inspector-hover .form-field-input-check span,
-.ideditor .inspector-hover .entity-issues .issue .icon {
+.ideditor .inspector-hover .section-entity-issues .issue .icon {
color: #666;
}
border: 1px solid #ccc;
}
-/* no scrollbars */
+/* scrollbars only when necessary*/
.ideditor .inspector-hover div {
- overflow-x: hidden;
- overflow-y: hidden;
+ overflow-x: visible;
+ overflow-y: auto;
}
/* hide and remove from layout */
.ideditor .inspector-hover .form-field-input-radio label,
.ideditor .inspector-hover .form-field-input-radio label span,
.ideditor .inspector-hover .form-field-input-radio label.remove .icon,
-.ideditor .inspector-hover .inspector-inner .add-row,
-.ideditor .inspector-hover .entity-issues .issue-container .issue-fix-list,
-.ideditor .inspector-hover .entity-issues .issue-container .issue-info-button {
+.ideditor .inspector-hover .add-row,
+.ideditor .inspector-hover .section-entity-issues .issue-container .issue-fix-list,
+.ideditor .inspector-hover .section-entity-issues .issue-container .issue-info-button {
display: none;
}
}
/* Unstyle the active entity issue on hover */
-.ideditor .inspector-hover .entity-issues .issue-container.active {
+.ideditor .inspector-hover .section-entity-issues .issue-container.active {
margin-top: 1px;
margin-bottom: 1px;
}
-.ideditor .inspector-hover .entity-issues .issue-container * {
+.ideditor .inspector-hover .section-entity-issues .issue-container * {
border-color: #ccc !important;
}
-.ideditor .inspector-hover .entity-issues .issue-container.active .issue-label {
+.ideditor .inspector-hover .section-entity-issues .issue-container.active .issue-label {
border-bottom: 0;
}
-.ideditor .inspector-hover .entity-issues .issue-container.active .issue-label .issue-text {
+.ideditor .inspector-hover .section-entity-issues .issue-container.active .issue-label button.issue-text {
font-weight: normal;
}
opacity: 1;
color: #666;
padding: 5px 10px;
- line-height: 20px;
width: 100%;
+ height: auto;
border: 0;
}
.ideditor .inspector-hover .form-field-input-radio .structure-extras-wrap {
.ideditor img.tile {
position: absolute;
transform-origin: 0 0;
- -ms-transform-origin: 0 0;
- -webkit-transform-origin: 0 0;
- -moz-transform-origin: 0 0;
- -o-transform-origin: 0 0;
- -moz-user-select: none;
-webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
+
+ -moz-user-select: none;
+
+ user-select: none;
+
+ pointer-events: none;
+
+ -webkit-user-drag: none;
opacity: 0;
- -webkit-transition: opacity 200ms linear;
- -moz-transition: opacity 200ms linear;
transition: opacity 200ms linear;
}
margin-top: -20px;
transform-origin: 0 0;
- -ms-transform-origin: 0 0;
- -webkit-transform-origin: 0 0;
- -moz-transform-origin: 0 0;
- -o-transform-origin: 0 0;
- -moz-user-select: none;
-webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
+
+ -moz-user-select: none;
+
+ user-select: none;
}
.ideditor img.tile-debug {
/* Map
------------------------------------------------------- */
-.ideditor #map {
- position: relative;
+.ideditor .main-map {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
overflow: hidden;
height: 100%;
+ width: 100%;
background: #000;
- -moz-user-select: none;
-webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ touch-action: none;
+ -webkit-touch-callout: none;
+}
+.ideditor .main-map * {
+ touch-action: none;
}
-.ideditor #supersurface {
+.ideditor .supersurface {
transform-origin: 0 0;
- -ms-transform-origin: 0 0;
- -webkit-transform-origin: 0 0;
- -moz-transform-origin: 0 0;
- -o-transform-origin: 0 0;
}
-.ideditor #supersurface, .ideditor .layer {
+.ideditor .supersurface, .ideditor .layer {
position: absolute;
top: 0;
left: 0;
top: 10px;
width: 200px;
height: 150px;
- z-index: 5;
+ z-index: 2;
background: #000;
border: #aaa 1px solid;
+ border-radius: 4px;
box-shadow: 0 0 2em black;
}
.ideditor[dir='ltr'] .map-in-map {
.ideditor .map-in-map-tiles {
transform-origin: 0 0;
- -ms-transform-origin: 0 0;
- -webkit-transform-origin: 0 0;
- -moz-transform-origin: 0 0;
- -o-transform-origin: 0 0;
-
- -moz-user-select: none;
-webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
+ -moz-user-select: none;
+ user-select: none;
}
.ideditor .map-in-map-viewport,
}
-.ideditor .over-map {
- position: absolute;
- left: 0;
- right: 0;
- top: 71px;
- bottom: 30px;
- pointer-events: none;
- display: flex;
- flex-direction: row-reverse;
- align-items: flex-end;
-}
-.ideditor .over-map > * {
- pointer-events: auto;
-}
-
/* Information Panels
------------------------------------------------------- */
.ideditor .info-panels {
display: flex;
- flex-flow: row-reverse wrap-reverse;
+ flex-flow: row wrap-reverse;
+ justify-content: flex-end;
width: 100%;
z-index: 1;
-ms-user-select: element;
pointer-events: none;
+ overflow: hidden;
}
.ideditor .panel-container h1,
border: 1px solid rgba(0, 0, 0, 0.75);
padding-bottom: 10px;
width: 250px;
+ max-width: 100%;
pointer-events: auto;
}
.ideditor .panel-title {
padding: 5px 10px;
+ display: flex;
+ justify-content: space-between;
}
.ideditor .panel-title button.close {
- float: right;
- height: 20px;
+ padding: 2px;
background: none;
color: #ddd;
}
.ideditor[dir='rtl'] .panel-title button.close {
float: left;
}
-
-.ideditor .panel-title button.close:hover {
+.ideditor .panel-title button.close:focus,
+.ideditor .panel-title button.close:active {
color: #fff;
}
+@media (hover: hover) {
+ .ideditor .panel-title button.close:hover {
+ color: #fff;
+ }
+}
.ideditor .panel-title button.close .icon {
height: 20px;
width: 16px;
position: relative;
}
-.ideditor .panel-content li span {
+.ideditor .panel-content ul:empty {
+ display: none;
+}
+
+.ideditor .panel-content li span:not(.localized-text) {
display: inline-block;
white-space: nowrap;
margin: 0 8px;
}
-/* About Section, Attribution, Footer
+/* Map Footer
------------------------------------------------------- */
-.ideditor #about {
+.ideditor .map-footer {
width: 100%;
- position: absolute;
- right: 0;
- bottom: 0;
+ position: relative;
border-radius: 0;
pointer-events: none;
display: flex;
flex-direction: column;
-ms-user-select: element;
+ flex: 0 0 auto;
}
-.ideditor #attrib {
- width: 100%;
- height: 20px;
- margin-bottom: 5px;
+.ideditor .map-footer-bar {
+ pointer-events: all;
+ display: block;
+ height: 2.5em;
+ position: relative;
+}
+
+.ideditor .main-footer-wrap,
+.ideditor .flash-wrap {
+ display: flex;
+ flex: 0 0 100%;
+ flex-flow: row nowrap;
+ justify-content: space-between;
+ height: 100%;
+ position: absolute;
+ right: 0;
+ left: 0;
+}
+
+.ideditor .footer-show {
+ bottom: 0px;
+ transition: bottom 75ms linear;
+}
+
+.ideditor .footer-hide {
+ bottom: -100%;
+ transition: bottom 75ms linear;
}
-.ideditor #attrib * { pointer-events: all; }
-.ideditor .base-layer-attribution,
-.ideditor .overlay-layer-attribution {
+/* Attribution
+------------------------------------------------------- */
+.ideditor .attribution-wrap {
position: absolute;
- color: #ccc;
- font-size: 10px;
+ bottom: 5px;
+ left: 5px;
+ right: 5px;
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-end;
+ z-index: 0;
+ pointer-events: none;
}
-.ideditor .base-layer-attribution {
- left: 10px;
+.ideditor .attribution-wrap > * {
+ pointer-events: auto;
}
-.ideditor .overlay-layer-attribution {
- right: 10px;
+.ideditor .attribution-wrap .base-layer-attribution,
+.ideditor .attribution-wrap .overlay-layer-attribution {
+ color: #ccc;
+ font-size: 10px;
+}
+.ideditor .attribution-wrap .overlay-layer-attribution {
+ text-align: right;
}
-.ideditor .overlay-layer-attribution .attribution:not(:last-child):after {
+.ideditor .attribution-wrap .overlay-layer-attribution .attribution:not(:last-child):after {
content: '; ';
}
-.ideditor .attribution a,
-.ideditor .attribution a:visited {
+.ideditor .attribution-wrap .attribution a,
+.ideditor .attribution-wrap .attribution a:visited {
color: #ccf;
}
-
-.ideditor .attribution a:hover {
+.ideditor .attribution-wrap .attribution a:focus,
+.ideditor .attribution-wrap .attribution a:hover {
color: #aaf;
}
+@media (hover: hover) {
+ .ideditor .attribution-wrap .attribution a:hover {
+ color: #aaf;
+ }
+}
-.ideditor .attribution .source-image {
+.ideditor .attribution-wrap .attribution .source-image {
height: 20px;
vertical-align: middle;
border-radius: 3px;
}
-.ideditor .attribution span {
+.ideditor .attribution-wrap .attribution span {
margin: 0 3px;
}
-.ideditor #footer {
- pointer-events: all;
- display: block;
- height: 30px;
-}
-
/* Footer - Flash messages
------------------------------------------------------- */
-.ideditor #flash-wrap {
- display: flex;
- flex: 0 0 100%;
- flex-flow: row nowrap;
- justify-content: space-between;
- max-height: 30px;
- position: absolute;
- right: 0;
- left: 0;
-}
-
.ideditor .flash-content {
display: flex;
flex: 1 0 auto;
flex-flow: row nowrap;
align-items: center;
padding: 2px;
- height: 30px;
}
.ideditor .flash-icon {
.ideditor .flash-icon use {
color: #222;
}
-.ideditor .flash-icon.disabled use {
- color: rgba(32,32,32,0.7);
-}
-
-.ideditor .flash-icon.operation use {
- fill: #222;
- color: #79f;
-}
+.ideditor .flash-icon.disabled use,
.ideditor .flash-icon.operation.disabled use {
fill: rgba(32,32,32,0.7);
color: rgba(40,40,40,0.7);
flex: 1 1 auto;
}
-.ideditor #footer-wrap {
- display: flex;
- flex: 0 0 100%;
- flex-flow: row nowrap;
- justify-content: space-between;
- max-height: 30px;
- position: absolute;
- right: 0;
- left: 0;
-}
-
-.ideditor .footer-show {
- bottom: 0px;
- transition: bottom 75ms linear;
- -moz-transition: bottom 75ms linear;
- -webkit-transition: bottom 75ms linear;
-}
-
-.ideditor .footer-hide {
- bottom: -35px;
- transition: bottom 75ms linear;
- -moz-transition: bottom 75ms linear;
- -webkit-transition: bottom 75ms linear;
-}
-
-
-/* Footer - Scale bar, About, Source Switcher
+/* Scale bar
------------------------------------------------------- */
-.ideditor #scale-block {
+.ideditor .map-footer-bar .scale-block {
vertical-align: bottom;
width: 250px;
- max-height: 30px;
- flex: 0 0 250px;
- -moz-user-select: none;
+ flex: 0 0 auto;
-webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.ideditor #info-block {
- max-height: 30px;
- flex: 1 1 auto;
+ -moz-user-select: none;
+ user-select: none;
+ height: 30px;
+ align-self: center;
}
-.ideditor #scale {
- height: 30px;
+.ideditor .scale-block .scale {
+ height: 100%;
width: 100%;
+ cursor: pointer;
+ display: block;
}
-.ideditor[dir='rtl'] #scale {
+.ideditor[dir='rtl'] .scale-block .scale {
transform: scaleX(-1);
}
-.ideditor #scale:hover {
- cursor: pointer;
-}
-
-.ideditor #scale text {
- font: 12px sans-serif;
- stroke: none;
- fill: #ccc;
- text-anchor: start;
-}
-.ideditor[dir='rtl'] #scale text {
- transform: scaleX(-1);
+.ideditor .scale-block .scale-text {
+ display: inline-block;
+ position: absolute;
+ color: #ccc;
+ top: 0.45em;
}
-.ideditor #scale path {
+.ideditor .scale-block .scale path {
fill: none;
stroke: #ccc;
stroke-width: 1;
shape-rendering: crispEdges;
}
-.ideditor #about-list {
- text-align: right;
- margin-right: 10px;
- clear: right;
+/* Footer - About, Source Switcher
+------------------------------------------------------- */
+.ideditor .map-footer-bar .info-block {
+ flex: 1 1 100%;
overflow: hidden;
}
-.ideditor[dir='rtl'] #about-list {
- text-align: left;
- clear: left;
- margin-left: 10px;
- margin-right: 0;
+
+.ideditor .map-footer-list {
+ display: flex;
+ flex-flow: row nowrap;
+ height: 100%;
+ justify-content: flex-end;
}
-.ideditor #about-list li {
- float: right;
- border-left: 1px solid rgba(255,255,255,.5);
- padding: 5px 0 5px 5px;
- margin-left: 5px;
+.ideditor .map-footer-list li {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ white-space: nowrap;
+ padding: 5px;
}
-.ideditor[dir='rtl'] #about-list li {
- float: left;
- border-left: none;
+.ideditor[dir='ltr'] .map-footer-list li:not(:last-child) {
border-right: 1px solid rgba(255,255,255,.5);
- margin-left: 0;
- margin-right: 5px;
- padding: 5px 5px 5px 0;
-}
-.ideditor #about-list li:empty {
- display: none;
}
-
-.ideditor #about-list li:last-child {
- border-left: 0;
- margin-left: 0;
- padding-left: 0;
+.ideditor[dir='rtl'] .map-footer-list li:not(:last-child) {
+ border-left: 1px solid rgba(255,255,255,.5);
}
-.ideditor[dir='rtl'] #about-list li:last-child {
- border-right: none;
+.ideditor .map-footer-list li:empty {
+ display: none;
}
-.ideditor #about-list a.chip {
- padding: 2px 4px 3px 4px;
+.ideditor .map-footer-list a.chip {
+ padding: 1px 4px 1px 4px;
border-radius: 2px;
color: #eee;
}
-.ideditor #about-list a.chip .icon {
+.ideditor .map-footer-list a.chip .icon {
width: 14px;
height: 14px;
- margin-top: 3px;
-}
-.ideditor[dir='ltr'] #about-list a.chip .icon,
-.ideditor[dir='ltr'] #about-list a.chip span {
- margin-right: 3px;
+ margin-top: -2px;
}
-.ideditor[dir='rtl'] #about-list a.chip .icon,
-.ideditor[dir='rtl'] #about-list a.chip span {
- margin-left: 3px;
+.ideditor .map-footer-list a.chip span.count {
+ margin: 0 3px;
}
.ideditor .source-switch a.chip.live {
.ideditor[dir='rtl'] .api-status {
text-align: left;
}
+.ideditor .api-status:empty {
+ display: none;
+}
.ideditor .api-status.offline,
.ideditor .api-status.readonly,
color: #ccc;
pointer-events: all;
}
-.ideditor .api-status a:hover {
+.ideditor .api-status a:focus,
+.ideditor .api-status a:active {
color: inherit;
}
+@media (hover: hover) {
+ .ideditor .api-status a:hover {
+ color: inherit;
+ }
+}
+
+.ideditor .local-storage-full {
+ display: block;
+ width: 100%;
+}
/* Notification Badges
------------------------------------------------------- */
/* For an icon (e.g. new version) */
.ideditor .badge {
- display: inline-block;
+ display: inline-flex;
background: #d32232;
width: 21px;
- height: 20px;
- border-radius: 11px;
+ height: 21px;
+ border-radius: 50%;
+ align-items: center;
+ justify-content: center;
+}
+.ideditor[dir='ltr'] .badge {
margin-left: 6px;
}
.ideditor[dir='rtl'] .badge {
- margin-left: 0;
margin-right: 6px;
}
-.ideditor .badge a {
- margin-right: 5px;
-}
-.ideditor[dir='rtl'] .badge a {
- margin-right: 0;
- margin-left: 5px;
-}
.ideditor .badge .icon {
vertical-align: baseline;
width: 11px;
height: 11px;
color: #fff;
+ flex: 0 0 auto;
}
/* For text (e.g. upcoming events) */
/* Modals / Prompts
------------------------------------------------------- */
.ideditor .modal {
- top: 40px;
- display: inline-block;
- position: absolute;
+ top: 5%;
+ max-height: 90%;
+ position: relative;
border-radius: 3px;
overflow: hidden;
- left: 0;
- right: 0;
margin: auto;
z-index: 50;
- width: 50%;
+ width: 80%;
min-width: 200px;
- max-width: 600px;
+ max-width: 550px;
+ display: flex;
+ flex-direction: column;
+}
+
+.ideditor .modal .content {
+ overflow-x: hidden;
+ overflow-y: auto;
}
.ideditor .modal .loader {
.ideditor .modal-section p:not(:last-of-type) {
padding-bottom: 20px;
}
-.ideditor .modal-section.header h3 {
- padding: 0;
+.ideditor .modal-section h4 {
+ padding-bottom: 0;
}
.ideditor .modal-section.buttons {
text-align: center;
.ideditor .modal-section.buttons .action {
display: inline-block;
margin: 0 10px;
- text-align: center;
- vertical-align: middle;
}
.ideditor .save-section .buttons {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
- margin-bottom: 30px;
}
.ideditor .save-section .buttons .action,
display: flex;
}
.ideditor .modal-actions button {
- font-weight: normal;
color: #7092ff;
border-bottom: 1px solid #ccc;
border-radius: 0;
- height: 160px;
+ min-height: 160px;
text-align: center;
width: 100%;
}
-.ideditor .modal-actions button:hover {
- background-color: #ececec;
-}
.ideditor .logo-small {
height: 40px;
}
.ideditor .save-summary,
+.ideditor .save-supporting,
.ideditor .save-communityLinks {
padding: 0px 20px 15px 20px;
}
+.ideditor .save-supporting,
.ideditor .save-communityLinks {
border-top: 1px solid #ccc;
}
.ideditor .save-success td.community-detail {
padding-bottom: 15px;
}
+.ideditor .save-success .community-table h3 {
+ margin: 0;
+}
.ideditor .summary-view-on-osm,
+.ideditor .support-the-map,
.ideditor .community-name {
font-size: 14px;
font-weight: bold;
color: #7092ff;
}
+.ideditor .modal-splash .section-preferences-third-party {
+ margin-top: 20px;
+}
+
+.ideditor .modal-splash .section-preferences-third-party .privacy-link {
+ display: none;
+}
+
/* Shortcuts Modal
------------------------------------------------------- */
.ideditor .modal-shortcuts {
width: 90%;
- max-width: 950px;
+ max-width: 1050px;
}
.ideditor .modal-shortcuts .modal-section:last-child {
- padding-top: 10px;
+ padding: 10px 15px 20px 15px;
min-height: 275px;
}
.ideditor .modal-shortcuts .tabs-bar {
- text-align: center;
padding-bottom: 5px;
- font-size: 16px;
- font-weight: bold;
+ text-align: center;
}
-.ideditor .modal-shortcuts .tab {
+.ideditor .modal-shortcuts a.tab {
display: inline-block;
padding: 5px 10px;
margin: 0 5px;
cursor: pointer;
color: #666;
+ font-size: 16px;
+ font-weight: bold;
}
-.ideditor .modal-shortcuts .tab.active {
+.ideditor .modal-shortcuts a.tab.active {
color: #7092ff;
border-bottom: 2px solid;
}
-.ideditor .modal-shortcuts .tab:hover {
+.ideditor .modal-shortcuts a.tab:focus,
+.ideditor .modal-shortcuts a.tab:active {
color: #597be7;
background-color: #efefef;
}
+@media (hover: hover) {
+ .ideditor .modal-shortcuts a.tab:hover {
+ color: #597be7;
+ background-color: #efefef;
+ }
+}
.ideditor .modal-shortcuts .shortcut-tab {
display: flex;
color: #555;
}
-.ideditor svg.mouseclick use.left {
- fill: rgba(112, 146, 255, 1);
- color: rgba(112, 146, 255, 0);
-}
-.ideditor svg.mouseclick use.right {
- fill: rgba(112, 146, 255, 0);
- color: rgba(112, 146, 255, 1);
-}
-
.ideditor .modal-shortcuts .shortcut-keys .gesture {
color: #333;
padding: 3px;
.ideditor .settings-custom-background .instructions-template {
margin-bottom: 20px;
}
+.ideditor .settings-custom-background .instructions-template p {
+ margin-bottom: 0;
+}
+.ideditor .settings-custom-background .instructions-template ul {
+ padding-bottom: 20px;
+}
+.ideditor .settings-custom-background .instructions-template ul li {
+ list-style-type: disc;
+ list-style-position: inside;
+}
.ideditor .settings-custom-data .instructions-url {
margin-bottom: 10px;
/* Save Mode
------------------------------------------------------- */
-.ideditor.mode-save a.user-info {
+.ideditor a.user-info {
display: inline-block;
}
-.ideditor.mode-save .commit-form {
+.ideditor .commit-form {
margin-bottom: 0;
}
-.ideditor.mode-save .user-info img {
- float: left;
-}
-
-.ideditor.mode-save h3 small.count {
- margin-right: 10px;
- text-align: center;
+.ideditor .user-info img {
float: left;
- height: 12px;
- min-width: 12px;
- font-size: 12px;
- line-height: 12px;
- border-radius: 24px;
- padding: 5px;
- background: #7092ff;
- color: #fff;
}
.ideditor .note-save .field-warning,
-.ideditor.mode-save .field-warning {
+.ideditor .field-warning {
background: #ffb;
border: 1px solid #ccc;
border-radius: 4px;
}
.ideditor .note-save .field-warning:empty,
-.ideditor.mode-save .field-warning:empty {
+.ideditor .field-warning:empty {
display: none;
}
-.ideditor.mode-save .field-warning,
-.ideditor.mode-save .changeset-info,
-.ideditor.mode-save .request-review,
-.ideditor.mode-save .commit-info {
+.ideditor .changeset-info,
+.ideditor .request-review,
+.ideditor .commit-info {
margin-bottom: 10px;
}
-.ideditor.mode-save .request-review label {
+.ideditor .field-warning {
+ margin-top: 10px;
+}
+
+.ideditor .request-review label {
cursor: pointer;
}
-.ideditor.mode-save .changeset-list {
+.ideditor .changeset-list {
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
margin-bottom: 10px;
+ overflow: hidden;
}
-.ideditor.mode-save .warning-section .changeset-list button {
- border-left: 1px solid #ccc;
+.ideditor .changeset-list li button {
+ padding: 5px 10px;
+ width: 100%;
+ border-radius: 0;
+ text-align: initial;
}
-
-.ideditor.mode-save .changeset-list li {
- position: relative;
+.ideditor .changeset-list li {
border-top: 1px solid #ccc;
- padding: 5px 10px;
- cursor: pointer;
}
-
-.ideditor.mode-save .changeset-list li:hover {
- background-color: #ececec;
+.ideditor .changeset-list li:first-child {
+ border-top: 0;
}
-
-.ideditor.mode-save .changeset-list .alert {
+.ideditor .changeset-list .alert {
opacity: 0.5;
}
-.ideditor .changeset-list li span.count {
- font-size: 10px;
- color: #555;
-}
-
-.ideditor.mode-save .commit-section .changeset-list button {
- border-left: 1px solid #ccc;
-}
-
-.ideditor .changeset-list li span.count:before { content: '('; }
-
-.ideditor .changeset-list li span.count:after { content: ')'; }
-
-.ideditor .changeset-list li:first-child { border-top: 0;}
-
/* Conflict resolution
------------------------------------------------------- */
padding: 20px;
}
-.ideditor.mode-save button.conflicts-button {
+.ideditor button.conflicts-button {
float: left;
}
.ideditor .notice .zoom-to {
margin: auto;
width: 300px;
- height: 70px;
+ padding: 20px 5px;
font-size: 150%;
border-radius: 8px;
+ font-weight: bold;
}
-.ideditor .notice .zoom-to:hover,
-.ideditor .notice .zoom-to:focus {
+.ideditor .notice .zoom-to:focus,
+.ideditor .notice .zoom-to:active {
background: rgba(0,0,0,0.6);
}
+@media (hover: hover) {
+ .ideditor .notice .zoom-to:hover {
+ background: rgba(0,0,0,0.6);
+ }
+}
.ideditor .notice .zoom-to .icon {
width: 30px;
background-color: #fff;
}
-.ideditor .tail {
- width: 200px;
- height: 400px;
- pointer-events: none;
- opacity: .8;
- margin-top: -200px;
- position: absolute;
- background: transparent;
-}
-.ideditor .tail::after {
- content: "";
- position: absolute;
- width: 0;
- height: 0;
- border-color: transparent;
- border-style: solid;
- top: 50%;
- right: -5px;
- margin-top: -5px;
- border-left-color: #fff;
- border-width: 5px 0 5px 5px;
-}
-
-.ideditor .tail div {
- border-radius: 3px;
- padding: 10px;
- background: #fff;
- position: absolute;
- top: 180px;
- left: 0;
- right: 0;
- margin: auto;
-}
-
-.ideditor .left.tail::after {
- content: "";
- position: absolute;
- width: 0;
- height: 0;
- border-color: transparent;
- border-style: solid;
- top: 50%;
- left: -5px;
- margin-top: -5px;
- border-right-color: #fff;
- border-width: 5px 5px 5px 0;
-}
.ideditor .popover-arrow {
position: absolute;
width: 0;
/* dark tooltips for sidebar / panels */
.ideditor .tooltip.dark.top .popover-arrow,
.ideditor .map-pane .tooltip.top .popover-arrow,
-.ideditor #sidebar .tooltip.top .popover-arrow {
+.ideditor .sidebar .tooltip.top .popover-arrow,
+.ideditor .modal .tooltip.top .popover-arrow {
border-top-color: #000;
}
.ideditor .tooltip.dark.bottom .popover-arrow,
.ideditor .map-pane .tooltip.bottom .popover-arrow,
-.ideditor #sidebar .tooltip.bottom .popover-arrow {
+.ideditor .sidebar .tooltip.bottom .popover-arrow,
+.ideditor .modal .tooltip.bottom .popover-arrow {
border-bottom-color: #000;
}
.ideditor .tooltip.dark.left .popover-arrow,
.ideditor .map-pane .tooltip.left .popover-arrow,
-.ideditor #sidebar .tooltip.left .popover-arrow {
+.ideditor .sidebar .tooltip.left .popover-arrow,
+.ideditor .modal .tooltip.left .popover-arrow {
border-left-color: #000;
}
.ideditor .tooltip.dark.right .popover-arrow,
.ideditor .map-pane .tooltip.right .popover-arrow,
-.ideditor #sidebar .tooltip.right .popover-arrow {
+.ideditor .sidebar .tooltip.right .popover-arrow,
+.ideditor .modal .tooltip.right .popover-arrow {
border-right-color: #000;
}
.ideditor .tooltip.dark .popover-inner,
.ideditor .map-pane .popover-inner,
.ideditor .map-pane .tooltip-heading,
.ideditor .map-pane .keyhint-wrap,
-.ideditor #sidebar .popover-inner,
-.ideditor #sidebar .tooltip-heading,
-.ideditor #sidebar .keyhint-wrap {
+.ideditor .sidebar .popover-inner,
+.ideditor .sidebar .tooltip-heading,
+.ideditor .sidebar .keyhint-wrap,
+.ideditor .modal .popover-inner {
background: #000;
color: #ccc;
}
.ideditor .tooltip.dark kbd,
.ideditor .map-pane .tooltip kbd,
-.ideditor #sidebar .tooltip kbd {
+.ideditor .sidebar .tooltip kbd {
background-color: #666;
border: solid 1px #444;
border-bottom-color: #333;
}
-/* Contextual Radial Menu (deprecated)
-------------------------------------------------------- */
-.ideditor .radial-menu-tooltip {
- opacity: 0.8;
- display: none;
- position: absolute;
- width: 200px;
-}
-
-.ideditor .radial-menu-background {
- fill: none;
- stroke: black;
- stroke-opacity: 0.5;
-}
-
-.ideditor .radial-menu-item circle {
- fill: #eee;
-}
-
-.ideditor .radial-menu-item circle:active,
-.ideditor .radial-menu-item circle:hover {
- fill: #fff;
-}
-
-.ideditor .radial-menu-item.disabled circle {
- cursor: auto;
- fill: rgba(255,255,255,.5);
-}
-
-.ideditor .radial-menu-item use {
- fill: #222;
- color: #79f;
-}
-
-.ideditor .radial-menu-item.disabled use {
- fill: rgba(32,32,32,.5);
- color: rgba(40,40,40,.5);
-}
-
-
/* Contextual Edit Menu
------------------------------------------------------- */
-.ideditor .edit-menu-tooltip {
- width: 200px;
+.ideditor .edit-menu {
+ position: absolute;
+ display: flex;
+ flex-direction: column;
+ background: #fff;
+ border-radius: 4px;
+ /* padding is set in edit_menu.js */
}
-.ideditor .edit-menu-background {
- fill: #eee;
+.ideditor .edit-menu .tooltip {
+ width: 200px; /* see also edit_menu.js */
}
-.ideditor .edit-menu-item rect {
- fill: #eee;
- cursor: default;
+.ideditor .edit-menu-item {
+ display: flex;
+ align-items: center;
+ border-radius: 0;
+ padding: 0 12px;
+ /* height is set in edit_menu.js */
}
-
-.ideditor .edit-menu-item rect:active,
-.ideditor .edit-menu-item rect:hover {
- fill: #ccc;
+.ideditor .edit-menu-item .label {
+ max-width: 120px;
+ text-align: initial;
+ line-height: 1.1em;
+ font-weight: bold;
}
-
-.ideditor .edit-menu-item.disabled rect {
- cursor: not-allowed;
+.ideditor[dir='ltr'] .edit-menu-item .label {
+ margin-left: 8px;
}
-.ideditor .edit-menu-item.disabled rect:hover {
- cursor: not-allowed;
- fill: #eee;
+.ideditor[dir='rtl'] .edit-menu-item .label {
+ margin-right: 8px;
}
.ideditor .edit-menu-item use {
- fill: #222;
- color: #79f;
pointer-events: none;
}
-.ideditor .edit-menu-item.disabled use {
- fill: rgba(32,32,32,.2);
- color: rgba(40,40,40,.2);
-}
-
/* Lasso
------------------------------------------------------- */
/* Scrollbars
----------------------------------------------------- */
.ideditor ::-webkit-scrollbar {
- height: 20px;
+ height: 10px;
overflow: visible;
width: 10px;
- background: #fff;
border-left: 1px solid #DDD;
}
border-width: 3px 3px 3px 4px;
border-radius: 6px;
}
-.ideditor ::-webkit-scrollbar-track:hover,
.ideditor ::-webkit-scrollbar-track:active {
background-color: rgba(0,0,0,.05);
}
+@media (hover: hover) {
+ .ideditor ::-webkit-scrollbar-track:hover {
+ background-color: rgba(0,0,0,.05);
+ }
+}
+body {
+ scrollbar-width: 10px;
+}
/* Intro walkthrough
----------------------------------------------------- */
+.ideditor .curtain {
+ z-index: 1000;
+ pointer-events: none;
+ position: absolute;
+}
+
.ideditor .curtain-darkness {
pointer-events: all;
fill-opacity: 0.7;
.ideditor .intro-nav-wrap button.chapter {
flex: 1 1 100%;
- padding: 0px 20px;
+ padding: 0px 5px;
+ font-weight: bold;
}
.ideditor .intro-nav-wrap button.chapter.next {
display: inline-block;
}
+.ideditor .curtain-tooltip {
+ z-index: 1002;
+}
+
.ideditor .curtain-tooltip.tooltip.in {
opacity: 1;
}
}
.ideditor .curtain-tooltip.intro-mouse {
- -moz-user-select: none;
-webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
+ -moz-user-select: none;
+ user-select: none;
}
.ideditor .curtain-tooltip.intro-mouse .counter {
.ideditor .huge-modal-button {
width: 100%;
- height: auto;
padding: 20px;
}
width: 100px;
color: #7092ff;
}
-
-
-.ideditor .list-item-photos.list-item-mapillary-map-features .request-data-link {
- float: right;
- margin-top: -20px;
-}
-.ideditor[dir='rtl'] .list-item-photos.list-item-mapillary-map-features .request-data-link {
- float: left;
-}
projects / rails.git / blobdiff