X-Git-Url: https://git.openstreetmap.org/rails.git/blobdiff_plain/56fd5c4d90c7d3757fb97ff16c40aaa307ae1d22..407b7d717d3fca9c70504e7755b4428d68870fff:/vendor/assets/iD/iD.css.erb diff --git a/vendor/assets/iD/iD.css.erb b/vendor/assets/iD/iD.css.erb index 6463f2f1c..a1348383c 100644 --- a/vendor/assets/iD/iD.css.erb +++ b/vendor/assets/iD/iD.css.erb @@ -253,10 +253,22 @@ g.vertex.shared .stroke { } g.midpoint .fill { - fill: #ddd; - stroke: black; - stroke-opacity: .5; - opacity: .5; + fill: #eee; + stroke: #444; + stroke-opacity: .6; + opacity: .7; +} + +g.midpoint.tag-highway-pedestrian .fill, +g.midpoint.tag-highway-steps .fill, +g.midpoint.tag-highway-path .fill, +g.midpoint.tag-highway-footway .fill, +g.midpoint.tag-highway-cycleway .fill, +g.midpoint.tag-highway-bridleway .fill { + fill: #fff; + stroke: #333; + stroke-opacity: .8; + opacity: .8; } g.vertex .shadow, @@ -321,240 +333,276 @@ path.shadow.selected { stroke-opacity: 0.7; } +path.line.stroke { + stroke: white; + stroke-width: 2; +} + path.area.stroke { stroke: white; stroke-width: 1; } - path.area.fill { - fill:#fff; - fill-opacity:0.3; + fill: rgba(255, 255, 255, 0.3); fill-rule: evenodd; } - -path.line.stroke { - stroke: white; - stroke-width: 2; +.preset-icon-fill-area { + border: 1px solid rgb(170, 170, 170); + background-color: rgba(170, 170, 170, 0.3); } path.stroke.tag-natural { - stroke: #b6e199; + stroke: rgb(182, 225, 153); } path.fill.tag-natural { - fill: #b6e199; + fill: rgba(182, 225, 153, 0.3); +} +.preset-icon-fill-area.tag-natural { + border-color: rgb(182, 225, 153); + background-color: rgba(182, 225, 153, 0.3); } path.stroke.tag-natural-water { - stroke: #77d3de; + stroke: rgb(119, 211, 222); } path.fill.tag-natural-water { - fill: #77d3de; + fill: rgba(119, 211, 222, 0.3); } - -path.stroke.tag-amenity-school { - stroke: #ffff94; -} -path.fill.tag-amenity-school { - fill: #ffff94; - fill-opacity: 0.2; +.preset-icon-fill-area.tag-natural-water { + border-color: rgb(119, 211, 222); + background-color: rgba(119, 211, 222, 0.3); } +path.stroke.tag-amenity-childcare, +path.stroke.tag-amenity-kindergarten, +path.stroke.tag-amenity-school, +path.stroke.tag-amenity-college, path.stroke.tag-amenity-university { - stroke: #ffff94; + stroke: rgb(255, 255, 148); } +path.fill.tag-amenity-childcare, +path.fill.tag-amenity-kindergarten, +path.fill.tag-amenity-school, +path.fill.tag-amenity-college, path.fill.tag-amenity-university { - fill: #ffff94; - fill-opacity: 0.1; -} - -path.stroke.tag-building { - stroke: #e06e5f; + fill: rgba(255, 255, 148, 0.15); } -path.fill.tag-building { - fill: #e06e5f; +.preset-icon-fill-area.tag-amenity-childcare, +.preset-icon-fill-area.tag-amenity-kindergarten, +.preset-icon-fill-area.tag-amenity-school, +.preset-icon-fill-area.tag-amenity-college, +.preset-icon-fill-area.tag-amenity-university { + border-color: rgb(255, 255, 148); + background-color: rgba(255, 255, 148, 0.15); } -/* Landuse */ - - path.stroke.tag-landuse, path.stroke.tag-natural-wood, path.stroke.tag-natural-tree, path.stroke.tag-natural-grassland, +path.stroke.tag-natural-grass, path.stroke.tag-leisure-pitch, path.stroke.tag-leisure-park { - stroke: #8cd05f; + stroke: rgb(140, 208, 95); +} +path.fill.tag-landuse, +path.fill.tag-natural-wood, +path.fill.tag-natural-tree, +path.fill.tag-natural-grassland, +path.fill.tag-natural-grass, +path.fill.tag-leisure-pitch, +path.fill.tag-leisure-park { + fill: rgba(140, 208, 95, 0.2); +} +.preset-icon-fill-area.tag-landuse, +.preset-icon-fill-area.tag-natural-wood, +.preset-icon-fill-area.tag-natural-tree, +.preset-icon-fill-area.tag-natural-grassland, +.preset-icon-fill-area.tag-natural-grass, +.preset-icon-fill-area.tag-leisure-pitch, +.preset-icon-fill-area.tag-leisure-park { + border-color: rgb(140, 208, 95); + background-color: rgba(140, 208, 95, 0.2); +} + +path.fill.tag-landuse-residential, +path.fill.tag-landuse-retail, +path.fill.tag-landuse-commercial, +path.fill.tag-landuse-industrial { + fill: none; + stroke-width: 60px; } path.stroke.tag-landuse-residential { - stroke: #e06e5f; + stroke: rgb(196, 189, 25); +} +path.fill.tag-landuse-residential { + stroke: rgba(196, 189, 25, 0.3); +} +.preset-icon-fill-area.tag-landuse-residential { + border-color: rgb(196, 189, 25); + background: none; + box-shadow: inset 0 0 0 5px rgba(196, 189, 25, 0.3); } path.stroke.tag-landuse-retail, path.stroke.tag-landuse-commercial { - stroke: #eab056; + stroke: rgb(214, 136, 26); +} +path.fill.tag-landuse-retail, +path.fill.tag-landuse-commercial { + stroke: rgba(214, 136, 26, 0.3); +} +.preset-icon-fill-area.tag-landuse-retail, +.preset-icon-fill-area.tag-landuse-commercial { + border-color: rgb(214, 136, 26); + background: none; + box-shadow: inset 0 0 0 5px rgba(214, 136, 26, 0.3); } path.stroke.tag-landuse-industrial { - stroke: #e4a4f5; + stroke: rgb(228, 164, 245); +} +path.fill.tag-landuse-industrial { + stroke: rgba(228, 164, 245, 0.3); +} +.preset-icon-fill-area.tag-landuse-industrial { + border-color: rgb(228, 164, 245); + background: none; + box-shadow: inset 0 0 0 5px rgba(228, 164, 245, 0.3); } path.stroke.tag-landuse-basin, path.stroke.tag-landuse-reservoir { - stroke: #77d3de; + stroke: rgb(119, 211, 222); +} +path.fill.tag-landuse-basin, +path.fill.tag-landuse-reservoir { + fill: rgba(119, 211, 222, 0.3); +} +.preset-icon-fill-area.tag-landuse-basin, +.preset-icon-fill-area.tag-landuse-reservoir { + border-color: rgb(119, 211, 222); + background-color: rgba(119, 211, 222, 0.3); } path.stroke.tag-landuse-quarry { - stroke: #a6957b; + stroke: rgb(166, 149, 123); } - -path.stroke.tag-landuse-residential, -path.stroke.tag-landuse-construction { - stroke: #e06e5f; +path.fill.tag-landuse-quarry { + fill: rgba(166, 149, 123, 0.2); } - -path.stroke.tag-landuse-meadow, -path.stroke.tag-natural-wetland { - stroke: #b6e199; +.preset-icon-fill-area.tag-landuse-quarry { + border-color: rgb(166, 149, 123); + background-color: rgba(166, 149, 123, 0.2); } -path.stroke.tag-natural-beach { - stroke: #ffff7e; +path.stroke.tag-landuse-landfill { + stroke: rgb(255, 153, 51); } - -path.stroke.tag-natural-scrub { - stroke: #dbf08b; +path.fill.tag-landuse-landfill { + fill: rgba(255, 153, 51, 0.2); } - -path.fill.tag-landuse, -path.fill.tag-natural-wood, -path.fill.tag-natural-tree, -path.fill.tag-natural-grassland, -path.fill.tag-natural-grass, -path.fill.tag-leisure-pitch, -path.fill.tag-leisure-park { - fill: #8cd05f; - fill-opacity: 0.2; +.preset-icon-fill-area.tag-landuse-landfill { + border-color: rgb(255, 153, 51); + background-color: rgba(255, 153, 51, 0.2); } -path.fill.tag-landuse-retail, -path.fill.tag-landuse-residential, -path.fill.tag-landuse-commercial, -path.fill.tag-landuse-industrial { - fill-opacity: 0.1; -} - -path.fill.tag-natural-wetland, -path.fill.tag-natural-beach, -path.fill.tag-natural-scrub, -path.fill.tag-landuse-cemetery, -path.fill.tag-landuse-meadow, -path.fill.tag-landuse-farm, -path.fill.tag-landuse-farmland, -path.fill.tag-landuse-construction, -path.fill.tag-landuse-orchard { - /* background color is applied a further opacity later */ - fill-opacity: 0.8; -} - -.pattern-color-beach, -.pattern-color-scrub, -.pattern-color-meadow, -.pattern-color-wetland, -.pattern-color-cemetery, -.pattern-color-farm, -.pattern-color-farmland, -.pattern-color-construction, -.pattern-color-orchard { - fill-opacity: 0.2; +path.stroke.tag-landuse-construction { + stroke: rgb(196, 189, 25); } - -path.fill.tag-landuse-basin, -path.fill.tag-landuse-reservoir { - fill: #77d3de; +.pattern-color-construction { + fill: rgba(196, 189, 25, 0.2); } - -path.fill.tag-landuse-quarry { - fill: #a6957b; +.preset-icon-fill-area.tag-landuse-construction { + border-color: rgb(196, 189, 25); + background-color: rgba(196, 189, 25, 0.2); } -path.fill.tag-landuse-residential { - fill: #e06e5f; +path.stroke.tag-landuse-military { + stroke: rgb(214, 136, 26); } - -path.fill.tag-landuse-farm, -path.fill.tag-landuse-farmland { - fill: url(#pattern-farmland) #8cd05f; +.preset-icon-fill-area.tag-landuse-military { + border-color: rgb(214, 136, 26); + background-color: rgba(214, 136, 26, 0.2); } -.pattern-color-farm, -.pattern-color-farmland { - fill: url(#pattern-farmland) #8cd05f; +path.stroke.tag-natural-wetland { + stroke: rgb(182, 225, 153); } - -path.fill.tag-landuse-meadow { - fill: url(#pattern-meadow) #b6e199; +.pattern-color-wetland { + fill: rgba(182, 225, 153, 0.2); } -.pattern-color-meadow { - fill: #b6e199; +.preset-icon-fill-area.tag-natural-wetland { + border-color: rgb(182, 225, 153); + background-color: rgba(182, 225, 153, 0.2); } -path.fill.tag-natural-wetland { - fill: url(#pattern-wetland) #b6e199; +path.stroke.tag-landuse-meadow { + stroke: rgb(182, 225, 153); } -.pattern-color-wetland { - fill: #B6E199; +.pattern-color-meadow { + fill: rgba(182, 225, 153, 0.2); +} +.preset-icon-fill-area.tag-landuse-meadow { + border-color: rgb(182, 225, 153); + background-color: rgba(182, 225, 153, 0.2); } -path.fill.tag-natural-beach { - fill: url(#pattern-beach) #ffff7e; +path.stroke.tag-natural-beach { + stroke: rgb(255, 255, 126); } .pattern-color-beach { - fill: #ffff7e; + fill: rgba(255, 255, 126, 0.2); +} +.preset-icon-fill-area.tag-natural-beach { + border-color: rgb(255, 255, 126); + background-color: rgba(255, 255, 126, 0.2); } -path.fill.tag-natural-scrub { - fill: url(#pattern-scrub) #dbf08b; +path.stroke.tag-natural-scrub { + stroke: rgb(219, 240, 139); } .pattern-color-scrub { - fill: #dbf08b; + fill: rgba(219, 240, 139, 0.2); } - -path.fill.tag-landuse-cemetery { - fill: url(#pattern-cemetery) #8cd05f; -} -.pattern-color-cemetery { - fill: #8cd05f +.preset-icon-fill-area.tag-natural-scrub { + border-color: rgb(219, 240, 139); + background-color: rgba(219, 240, 139, 0.2); } -path.fill.tag-landuse-orchard { - fill: url(#pattern-orchard) #8cd05f; +.pattern-color-farm, +.pattern-color-farmland { + fill: rgba(140, 208, 95, 0.2); } -.pattern-color-orchard { - fill: #8cd05f +.preset-icon-fill-area.tag-landuse-farm, +.preset-icon-fill-area.tag-landuse-farmland { + background-color: rgba(140, 208, 95, 0.2); } -path.fill.tag-landuse-construction { - fill: url(#pattern-construction) #e06e5f; +.pattern-color-cemetery { + fill: rgba(140, 208, 95, 0.2) } -.pattern-color-construction { - fill: #e06e5f; +.preset-icon-fill-area.tag-landuse-cemetery { + background-color: rgba(140, 208, 95, 0.2); } -path.fill.tag-landuse-retail, -path.fill.tag-landuse-commercial { - fill: #eab056; +.pattern-color-orchard { + fill: rgba(140, 208, 95, 0.2) } - -path.fill.tag-landuse-industrial { - fill: #e4a4f5; +.preset-icon-fill-area.tag-landuse-orchard { + background-color: rgba(140, 208, 95, 0.8); } path.stroke.tag-amenity-parking { - stroke: #aaa; + stroke: rgb(170, 170, 170); } path.fill.tag-amenity-parking { - fill: #aaa; + fill: rgba(170, 170, 170, 0.3); +} +.preset-icon-fill-area.tag-amenity-parking { + border-color: rgb(170, 170, 170); + background-color: rgba(170, 170, 170, 0.3); } path.fill.tag-place, @@ -576,13 +624,13 @@ path.stroke.tag-highway { stroke-width:8; } -svg[data-zoom="16"] path.shadow.tag-highway { +.low-zoom path.shadow.tag-highway { stroke-width:12; } -svg[data-zoom="16"] path.casing.tag-highway { +.low-zoom path.casing.tag-highway { stroke-width:6; } -svg[data-zoom="16"] path.stroke.tag-highway { +.low-zoom path.stroke.tag-highway { stroke-width:4; } @@ -683,9 +731,6 @@ path.stroke.area.tag-highway-pedestrian { stroke:#fff; stroke-width: 2; } -path.fill.area.tag-highway-pedestrian { - fill:#ccc; -} path.stroke.tag-highway-service { stroke:#fff; @@ -695,10 +740,10 @@ path.casing.tag-highway-service { stroke:#666; stroke-width:6; } -svg[data-zoom="16"] path.stroke.tag-highway-service { +.low-zoom path.stroke.tag-highway-service { stroke-width:2; } -svg[data-zoom="16"] path.casing.tag-highway-service { +.low-zoom path.casing.tag-highway-service { stroke-width:4; } @@ -712,10 +757,10 @@ path.casing.tag-highway-track { stroke-linecap: butt; stroke-dasharray: 6, 6; } -svg[data-zoom="16"] path.stroke.tag-highway-track { +.low-zoom path.stroke.tag-highway-track { stroke-width:2; } -svg[data-zoom="16"] path.casing.tag-highway-track { +.low-zoom path.casing.tag-highway-track { stroke-width:4; } @@ -744,14 +789,14 @@ path.casing.tag-highway-bridleway { stroke: #fff; } -svg[data-zoom="16"] path.stroke.tag-highway-footway, -svg[data-zoom="16"] path.stroke.tag-highway-cycleway, -svg[data-zoom="16"] path.stroke.tag-highway-bridleway { +.low-zoom path.stroke.tag-highway-footway, +.low-zoom path.stroke.tag-highway-cycleway, +.low-zoom path.stroke.tag-highway-bridleway { stroke-width: 2; } -svg[data-zoom="16"] path.casing.tag-highway-footway, -svg[data-zoom="16"] path.casing.tag-highway-cycleway, -svg[data-zoom="16"] path.casing.tag-highway-bridleway { +.low-zoom path.casing.tag-highway-footway, +.low-zoom path.casing.tag-highway-cycleway, +.low-zoom path.casing.tag-highway-bridleway { stroke-width: 4; } @@ -797,121 +842,66 @@ path.casing.tag-aeroway-runway { stroke-linecap: square; } path.fill.tag-aeroway-runway { - fill: #000; - fill-opacity: 0.6; + fill: rgba(0, 0, 0, 0.6); } path.stroke.tag-aeroway-apron { stroke: #805C80; } path.fill.tag-aeroway-apron { - fill: #805C80; - fill-opacity: 0.2; -} - - -/* bridges */ - -path.casing.tag-bridge { - stroke-width: 14; - stroke-opacity: 0.5; - stroke: #000; + fill: rgba(128, 92, 128, 0.2); } -path.casing.tag-highway-living_street.tag-bridge, -path.casing.tag-highway-path.tag-bridge { - stroke-width: 6; -} - -path.casing.line.tag-highway-pedestrian, -path.casing.tag-highway-service.tag-bridge, -path.casing.tag-highway-track.tag-bridge, -path.casing.tag-highway-steps.tag-bridge, -path.casing.tag-highway-footway.tag-bridge, -path.casing.tag-highway-cycleway.tag-bridge, -path.casing.tag-highway-bridleway.tag-bridge { - stroke-width: 8; -} - -path.shadow.tag-highway-residential.tag-bridge { - stroke-width:22; -} - -path.shadow.tag-highway-living_street.tag-bridge, -path.shadow.tag-highway-path.tag-bridge, -path.shadow.line.tag-highway-pedestrian, -path.shadow.tag-highway-service.tag-bridge, -path.shadow.tag-highway-track.tag-bridge, -path.shadow.tag-highway-steps.tag-bridge, -path.shadow.tag-highway-footway.tag-bridge, -path.shadow.tag-highway-cycleway.tag-bridge, -path.shadow.tag-highway-bridleway.tag-bridge { - stroke-width: 16; -} - -/* tunnels */ - -path.stroke.tag-highway.tag-tunnel { - stroke-opacity: 0.3; -} - -path.casing.tag-highway.tag-tunnel { - stroke-opacity: 0.5; -} - -path.stroke.tag-highway-construction, -path.casing.tag-highway-construction { - stroke-linecap: butt; - stroke-dasharray: 7, 7; -} - -/* construction */ - -svg[data-zoom="16"] path.stroke.tag-highway-construction, -svg[data-zoom="16"] path.casing.tag-highway-construction { - stroke-linecap: butt; - stroke-dasharray: 5, 5; -} /* railways */ -.line.stroke.tag-railway { +path.stroke.tag-railway { stroke: #eee; stroke-width: 2; stroke-linecap: butt; stroke-dasharray: 12,12; } -.line.casing.tag-railway { + +path.casing.tag-railway { stroke: #555; stroke-width: 4; } -.line.stroke.tag-railway-abandoned { +path.stroke.tag-railway-abandoned { stroke: #eee; } -.line.casing.tag-railway-abandoned { +path.casing.tag-railway-abandoned { stroke: #999; } -.line.stroke.tag-railway-subway { +path.stroke.tag-railway-subway { stroke: #666; } -.line.casing.tag-railway-subway { +path.casing.tag-railway-subway { stroke: #222; } -.line.stroke.tag-railway-platform { +path.stroke.tag-railway-platform { stroke: #999; stroke-width: 4; stroke-dasharray: none; } -.line.casing.tag-railway-platform { +path.casing.tag-railway-platform { + stroke: none; +} + +.area.stroke.tag-railway { + stroke: white; + stroke-width: 1; + stroke-dasharray: none; +} +.area.casing.tag-railway { stroke: none; } /* waterways */ path.fill.tag-waterway { - fill: #77d3de; + fill: rgba(119, 211, 222, 0.3); } path.stroke.tag-waterway { @@ -930,13 +920,6 @@ path.casing.tag-waterway-river { stroke-width: 6; } -svg[data-zoom="16"] path.stroke.tag-waterway-river { - stroke-width: 4; -} -svg[data-zoom="16"] path.casing.tag-waterway-river { - stroke-width: 6; -} - path.stroke.tag-waterway-ditch { stroke: #6591ff; stroke-width: 1; @@ -975,6 +958,136 @@ path.casing.tag-boundary-national_park { } +/* bridges */ + +path.casing.tag-bridge { + stroke-width: 16; + stroke-opacity: 0.6; + stroke: #000; + stroke-linecap: butt; +} + +path.shadow.tag-bridge { + stroke-width: 22; +} + +path.casing.line.tag-railway.tag-bridge, +path.casing.tag-highway-living_street.tag-bridge, +path.casing.tag-highway-path.tag-bridge, +path.casing.line.tag-highway-pedestrian.tag-bridge, +path.casing.tag-highway-service.tag-bridge, +path.casing.tag-highway-track.tag-bridge, +path.casing.tag-highway-steps.tag-bridge, +path.casing.tag-highway-footway.tag-bridge, +path.casing.tag-highway-cycleway.tag-bridge, +path.casing.tag-highway-bridleway.tag-bridge { + stroke-width: 10; +} + +path.shadow.line.tag-railway.tag-bridge, +path.shadow.tag-highway-living_street.tag-bridge, +path.shadow.tag-highway-path.tag-bridge, +path.shadow.line.tag-highway-pedestrian.tag-bridge, +path.shadow.tag-highway-service.tag-bridge, +path.shadow.tag-highway-track.tag-bridge, +path.shadow.tag-highway-steps.tag-bridge, +path.shadow.tag-highway-footway.tag-bridge, +path.shadow.tag-highway-cycleway.tag-bridge, +path.shadow.tag-highway-bridleway.tag-bridge { + stroke-width: 17; +} + + +.low-zoom path.casing.tag-bridge { + stroke-width: 10; + stroke-opacity: 0.6; + stroke: #000; + stroke-linecap: butt; +} + +.low-zoom path.shadow.tag-bridge { + stroke-width: 14; +} + +.low-zoom path.casing.line.tag-railway.tag-bridge, +.low-zoom path.casing.tag-highway-living_street.tag-bridge, +.low-zoom path.casing.tag-highway-path.tag-bridge, +.low-zoom path.casing.line.tag-highway-pedestrian.tag-bridge, +.low-zoom path.casing.tag-highway-service.tag-bridge, +.low-zoom path.casing.tag-highway-track.tag-bridge, +.low-zoom path.casing.tag-highway-steps.tag-bridge, +.low-zoom path.casing.tag-highway-footway.tag-bridge, +.low-zoom path.casing.tag-highway-cycleway.tag-bridge, +.low-zoom path.casing.tag-highway-bridleway.tag-bridge { + stroke-width: 6; +} + +.low-zoom path.shadow.line.tag-railway.tag-bridge, +.low-zoom path.shadow.tag-highway-living_street.tag-bridge, +.low-zoom path.shadow.tag-highway-path.tag-bridge, +.low-zoom path.shadow.line.tag-highway-pedestrian.tag-bridge, +.low-zoom path.shadow.tag-highway-service.tag-bridge, +.low-zoom path.shadow.tag-highway-track.tag-bridge, +.low-zoom path.shadow.tag-highway-steps.tag-bridge, +.low-zoom path.shadow.tag-highway-footway.tag-bridge, +.low-zoom path.shadow.tag-highway-cycleway.tag-bridge, +.low-zoom path.shadow.tag-highway-bridleway.tag-bridge { + stroke-width: 13; +} + + + +/* tunnels */ + +path.stroke.tag-tunnel { + stroke-opacity: 0.3; +} + +path.casing.tag-tunnel { + stroke-opacity: 0.5; +} + +/* embankments / cuttings */ + +path.casing.tag-embankment, +path.casing.tag-cutting { + stroke-opacity: 0.5; + stroke: #000; + stroke-width: 22; + stroke-dasharray: 2, 4; + stroke-linecap: butt; +} + +path.shadow.tag-embankment, +path.shadow.tag-cutting { + stroke-width: 28; +} + +.low-zoom path.casing.tag-embankment, +.low-zoom path.casing.tag-cutting { + stroke-width: 10; +} + +.low-zoom path.shadow.tag-embankment, +.low-zoom path.shadow.tag-cutting { + stroke-width: 14; +} + + +/* construction */ + +path.stroke.tag-highway-construction, +path.casing.tag-highway-construction { + stroke-linecap: butt; + stroke-dasharray: 7, 7; +} + +.low-zoom path.stroke.tag-highway-construction, +.low-zoom path.casing.tag-highway-construction { + stroke-linecap: butt; + stroke-dasharray: 5, 5; +} + text { font-size:10px; pointer-events: none; @@ -995,6 +1108,23 @@ path.oneway { stroke-width: 6px; } +/* Buildings */ + +path.stroke.tag-building, +path.stroke.tag-amenity-shelter { + stroke: rgb(224, 110, 95); +} +path.fill.tag-building, +path.fill.tag-amenity-shelter { + fill: rgba(224, 110, 95, 0.3); +} +.preset-icon-fill-area.tag-building, +.preset-icon-fill-area.tag-amenity-shelter { + border-color: rgb(224, 110, 95); + background-color: rgba(224, 110, 95, 0.3); +} + + /* * Labels */ @@ -1042,65 +1172,54 @@ text.point { font-size: 10px; } +/* Turns */ + +g.turn rect, +g.turn circle { + fill: none; + pointer-events: all; +} + +.form-field-restrictions .vertex { + pointer-events: none; + cursor: auto !important; +} + /* Cursors */ #map { cursor: auto; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-grab.png") %>) 9 9, auto; /* FF */ - cursor: -webkit-image-set( - url(<%= asset_path("iD/img/cursor-grab.png") %>) 1x, - url(<%= asset_path("iD/img/cursor-grab2x.png") %>) 2x - ) 9 9, auto; } .mode-browse .point, .mode-select .point { cursor: pointer; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-select-point.png") %>), pointer; /* FF */ - cursor: -webkit-image-set( - url(<%= asset_path("iD/img/cursor-select-point.png") %>) 1x, - url(<%= asset_path("iD/img/cursor-select-point2x.png") %>) 2x - ), pointer; } .mode-select .vertex, .mode-browse .vertex { cursor: pointer; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-select-vertex.png") %>), pointer; /* FF */ - cursor: -webkit-image-set( - url(<%= asset_path("iD/img/cursor-select-vertex.png") %>) 1x, - url(<%= asset_path("iD/img/cursor-select-vertex2x.png") %>) 2x - ), pointer; } .mode-browse .line, .mode-select .line { cursor: pointer; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-select-line.png") %>), pointer; /* FF */ - cursor: -webkit-image-set( - url(<%= asset_path("iD/img/cursor-select-line.png") %>) 1x, - url(<%= asset_path("iD/img/cursor-select-line2x.png") %>) 2x - ), pointer; } .mode-select .area, .mode-browse .area { cursor: pointer; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-select-area.png") %>), pointer; /* FF */ - cursor: -webkit-image-set( - url(<%= asset_path("iD/img/cursor-select-area.png") %>) 1x, - url(<%= asset_path("iD/img/cursor-select-area2x.png") %>) 2x - ), pointer; } .mode-select .midpoint, .mode-browse .midpoint { cursor: pointer; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-select-split.png") %>), pointer; /* FF */ - cursor: -webkit-image-set( - url(<%= asset_path("iD/img/cursor-select-split.png") %>) 1x, - url(<%= asset_path("iD/img/cursor-select-split2x.png") %>) 2x - ), pointer; } .mode-select .behavior-multiselect .point, @@ -1109,19 +1228,11 @@ text.point { .mode-select .behavior-multiselect .area { cursor: pointer; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-select-add.png") %>), pointer; /* FF */ - cursor: -webkit-image-set( - url(<%= asset_path("iD/img/cursor-select-add.png") %>) 1x, - url(<%= asset_path("iD/img/cursor-select-add2x.png") %>) 2x - ), pointer; } .mode-select .behavior-multiselect .selected { cursor: pointer; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-select-remove.png") %>), pointer; /* FF */ - cursor: -webkit-image-set( - url(<%= asset_path("iD/img/cursor-select-remove.png") %>) 1x, - url(<%= asset_path("iD/img/cursor-select-remove2x.png") %>) 2x - ), pointer; } #map .point:active, @@ -1132,10 +1243,6 @@ text.point { #map .mode-select .selected { cursor: pointer; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-select-acting.png") %>), pointer; /* FF */ - cursor: -webkit-image-set( - url(<%= asset_path("iD/img/cursor-select-acting.png") %>) 1x, - url(<%= asset_path("iD/img/cursor-select-acting2x.png") %>) 2x - ), pointer; } .mode-draw-line #map, @@ -1145,10 +1252,6 @@ text.point { .mode-drag-node #map { cursor: crosshair; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */ - cursor: -webkit-image-set( - url(<%= asset_path("iD/img/cursor-draw.png") %>) 1x, - url(<%= asset_path("iD/img/cursor-draw2x.png") %>) 2x - ) 9 9, crosshair; } .mode-draw-line .way.hover, @@ -1158,10 +1261,6 @@ text.point { .mode-drag-node .way.hover { cursor: crosshair; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-draw-connect-line.png") %>) 9 9, crosshair; /* FF */ - cursor: -webkit-image-set( - url(<%= asset_path("iD/img/cursor-draw-connect-line.png") %>) 1x, - url(<%= asset_path("iD/img/cursor-draw-connect-line2x.png") %>) 2x - ) 9 9, crosshair; } .mode-draw-line .vertex.hover, @@ -1171,10 +1270,6 @@ text.point { .mode-drag-node .vertex.hover { cursor: crosshair; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-draw-connect-vertex.png") %>) 9 9, crosshair; /* FF */ - cursor: -webkit-image-set( - url(<%= asset_path("iD/img/cursor-draw-connect-vertex.png") %>) 1x, - url(<%= asset_path("iD/img/cursor-draw-connect-vertex2x.png") %>) 2x - ) 9 9, crosshair; } .mode-add-point #map, @@ -1183,10 +1278,12 @@ text.point { .lasso .vertex { cursor: crosshair; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */ - cursor: -webkit-image-set( - url(<%= asset_path("iD/img/cursor-draw.png") %>) 1x, - url(<%= asset_path("iD/img/cursor-draw2x.png") %>) 2x - ) 9 9, crosshair; +} + +.turn rect, +.turn circle { + cursor: pointer; /* Opera */ + cursor: url(<%= asset_path("iD/img/cursor-pointer.png") %>) 6 1, pointer; /* FF */ } .lasso #map { @@ -1195,12 +1292,47 @@ text.point { /* GPX Paths */ path.gpx { - stroke: #6AFF25; + stroke: #FF26D4; stroke-width: 2; fill: none; pointer-events: none; } +/* GPS Labels */ +text.gpx { + fill:#FF26D4; +} + +/* Mapillary Layer */ + +.layer-mapillary { + pointer-events: none; +} + +.layer-mapillary g { + pointer-events: visible; + cursor: pointer; /* Opera */ + cursor: url(<%= asset_path("iD/img/cursor-select-mapillary.png") %>) 6 1, pointer; /* FF */ +} + +.layer-mapillary g * { + stroke-width: 2; + stroke: #ffc600; + fill: #ffc600; +} + +.layer-mapillary g:hover * { + stroke-width: 2; + stroke: #ff9900; + fill: #ff9900; +} + +.layer-mapillary g.selected * { + stroke-width: 4; + stroke: #ff5800; + fill: #ff5800; +} + /* Modes */ .mode-draw-line .vertex.active, @@ -1265,6 +1397,13 @@ body { height: 100%; } +#defs { + /* Can't be display: none or the clippaths are ignored. */ + position: absolute; + width: 0; + height: 0; +} + .spacer { height: 40px; margin-right: 10px; @@ -1308,10 +1447,6 @@ button, .radial-menu-item { cursor: pointer; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-pointer.png") %>) 6 1, pointer; /* FF */ - cursor: -webkit-image-set( - url(<%= asset_path("iD/img/cursor-pointer.png") %>) 1x, - url(<%= asset_path("iD/img/cursor-pointer2x.png") %>) 2x - ) 6 1, pointer; } h2 { @@ -1395,7 +1530,6 @@ input[type=email] { width: 100%; border-radius:4px; text-overflow: ellipsis; - overflow: hidden; -webkit-transition: all 200ms; -moz-transition: all 200ms; -o-transition: all 200ms; @@ -1463,17 +1597,11 @@ table.tags, table.tags td, table.tags th { ul li { list-style: none;} -.toggle-list { - border-radius: 4px; - border: 1px solid #CCC; -} - .toggle-list > label { position: relative; padding: 5px 10px; - display:block; + display: block; height: 30px; - border-bottom: 1px solid #ccc; background-color: white; color: #7092FF; cursor: pointer; @@ -1486,34 +1614,21 @@ ul li { list-style: none;} background-color: #ececec; } -.toggle-list > label:first-child { - border-radius: 3px 3px 0 0; +.toggle-list > label:not(:last-child) { + border-bottom: 1px solid #ccc; } .toggle-list > label:last-child { border-radius: 0 0 3px 3px; - border-bottom-width: 0; -} - -.toggle-list > label:only-child { - border-radius: 3px; } -.toggle-list label > span { +.toggle-list label > span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } -.toggle-list > label.remove span.icon { - display: block; - width: 14px; - float: left; - margin-right: 5px; - background-position: -204px 0; -} - .toggle-list > label.active { background: #E8EBFF; } @@ -1583,6 +1698,7 @@ a.hide { right: -100%; } + .pane { position:absolute; width:50%; @@ -1611,7 +1727,7 @@ button { display: inline-block; height:40px; border-radius:4px; - /* Crashes Safari: https://github.com/systemed/iD/issues/1188 */ + /* Crashes Safari: https://github.com/openstreetmap/iD/issues/1188 */ /*-webkit-transition: all 100ms;*/ -moz-transition: all 100ms; -o-transition: all 100ms; @@ -1780,6 +1896,7 @@ button.save.has-count .count::before { .icon.relation { background-position: -520px 0;} .icon.relation.route { background-position: -540px 0;} .icon.relation.multipolygon { background-position: -560px 0;} +.icon.vertex { background-position: -580px 0;} .icon.inspect.light { background-position: -220px -20px;} .icon.plus.light { background-position: -240px -20px;} @@ -1814,6 +1931,18 @@ button[disabled] .icon.layers { background-position: -300px -40px;} button[disabled] .icon.avatar { background-position: -320px -40px;} button[disabled] .icon.nearby { background-position: -340px -40px;} +.icon.point.deleted { background-position: -302px -80px;} +.icon.line.deleted { background-position: -320px -80px;} +.icon.area.deleted { background-position: -340px -80px;} + +.icon.point.created { background-position: -302px -100px;} +.icon.line.created { background-position: -320px -100px;} +.icon.area.created { background-position: -340px -100px;} + +.icon.point.modified { background-position: -22px 0; } + +.icon.modified { opacity: .5; } + /* Out link is special */ .icon.out-link { height: 14px; width: 14px; background-position: -500px 0;} @@ -1946,6 +2075,48 @@ a:hover .icon.out-link { background-position: -500px -14px;} bottom: 0; } +.mapillary-image { + position: absolute; + right: 0; + bottom: 30px; + width: 330px; + height: 250px; + padding: 5px; + background-color: #fff; +} + +.mapillary-image a { + display: block; + position: absolute; + height: auto; + background-color: rgba(0,0,0,.5); + bottom: 0; + right: 0; + padding: 5px 10px; +} + +.mapillary-image img { + width: 100%; + height: auto; + display: block; +} + +.mapillary-image.hidden { + visibility: hidden; +} + +.mapillary-image.temp button { + display: none; +} + +.mapillary-image button { + border-radius: 0; + padding: 5px; + position: absolute; + right: 0; + top: 0; +} + .feature-list-pane .inspector-body { top: 120px; } @@ -1958,6 +2129,10 @@ a:hover .icon.out-link { background-position: -500px -14px;} top: 60px; } +.selection-list-pane .inspector-body { + top: 60px; +} + .inspector-inner { padding: 20px; position: relative; @@ -2103,6 +2278,15 @@ a:hover .icon.out-link { background-position: -500px -14px;} height: 100%; border: 1px solid #CCC; border-radius: 0 3px 3px 0; + position: absolute; + top: 0; + right: 0; + width: 10%; + background: #fafafa; +} + +.preset-list-item button.tag-reference-button .icon { + opacity: .5; } .current .preset-list-button, @@ -2148,37 +2332,26 @@ a:hover .icon.out-link { background-position: -500px -14px;} /* Preset icon colors */ -.preset-icon-fill.icon-area { +.preset-icon-fill-area { cursor: inherit; - height: 45px; - width: 45px; + height: 39px; + width: 39px; margin: auto; position: absolute; - left: 7px; top: 7px; - background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat -240px -80px; + left: 10px; + top: 10px; } -.preset-icon-fill.tag-shop, -.preset-icon-fill.tag-building { +.preset-icon-fill-area:after { + content: ''; + left: -4px; + top: -4px; + height: 45px; + width: 45px; + position: absolute; background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 -80px; } -.preset-icon-fill.tag-natural-water { - background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat -60px -80px; -} - -.preset-icon-fill.tag-landuse, -.preset-icon-fill.tag-natural-wood, -.preset-icon-fill.tag-natural-tree, -.preset-icon-fill.tag-natural-grassland, -.preset-icon-fill.tag-leisure-park { - background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat -120px -80px; -} - -.preset-icon-fill.tag-amenity-parking { - background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat -180px -80px; -} - /* preset form basics */ .inspector-preset { @@ -2231,26 +2404,39 @@ a:hover .icon.out-link { background-position: -500px -14px;} background: #f6f6f6; display: block; border-radius: 4px 4px 0 0; + overflow: hidden; +} + +.form-label-button-wrap { + position: absolute; + top: 0; + right: 0; + height: 100%; + width: 100%; + background: transparent; + text-align: right; +} + +.form-label-button-wrap .icon { + opacity: .5; } .form-label button { border-left: 1px solid #CCC; + width: 10%; + height: 100%; + border-radius: 0; + background: #fafafa; } -.form-label .modified-icon { - border-right: 0; - opacity: 0; - z-index: -10; - right: 10%; -} - -.modified .form-label .modified-icon { - opacity: 1; - z-index: 1; +.form-label .modified-icon, +.form-field .remove-icon { + display: none; } -.form-label button.tag-reference-button { - border-top-right-radius: 3px; +.modified .form-label .modified-icon, +.present .form-label .remove-icon { + display: inline-block; } .form-field > input, @@ -2260,17 +2446,12 @@ a:hover .icon.out-link { background-position: -500px -14px;} min-height: 30px; border-top: 0; border-radius: 0 0 4px 4px; - overflow: hidden; } .form-field textarea { height: 65px; } -.form-field button.remove { - border-radius: 0 0 4px 0; -} - .inspector-border { border-bottom: 1px solid #CCC } @@ -2293,7 +2474,7 @@ a:hover .icon.out-link { background-position: -500px -14px;} .inspector-hidden, .inspector-hover label input[type="checkbox"], .inspector-hover label input[type="radio"], -.inspector-hover .toggle-list label:not(.active), +.inspector-hover .toggle-list label, .inspector-hover .toggle-list label span, .inspector-hover .inspector-inner .add-tag, .inspector-hover .inspector-inner .add-relation, @@ -2308,13 +2489,14 @@ a:hover .icon.out-link { background-position: -500px -14px;} } /* hide but preserve in layout */ -.inspector-hover .modified .form-label .modified-icon, .inspector-hover .entity-editor-pane button.minor, -.inspector-hover .combobox-carat, +.inspector-hover .combobox-caret, .inspector-hover .entity-editor-pane .header button, .inspector-hover .spin-control, .inspector-hover .hide-toggle:before, .inspector-hover .more-buttons, +.inspector-hover .form-label-button-wrap, +.inspector-hover .tag-reference-button, .inspector-hover .view-on-osm { opacity: 0; } @@ -2402,9 +2584,8 @@ input, transition: opacity 200ms 200ms, width 200ms 200ms, margin-right 200ms 200ms; } -.modified .form-label .modified-icon, .entity-editor-pane button.minor, -.combobox-carat, +.combobox-caret, .entity-editor-pane .header button, .toggle-list label span, .spin-control, @@ -2633,7 +2814,7 @@ input[type=number] { padding-right: 10%; } -.form-field .wiki-title ~ .combobox-carat { +.form-field .wiki-title ~ .combobox-caret { margin-left: -18%; margin-right: 9%; } @@ -2679,13 +2860,13 @@ input[type=number] { vertical-align: top; } +.form-field .localized-wrap { + padding: 0 10px; +} + .form-field .localized-wrap .entry { position: relative; overflow: hidden; - background: #f1f1f1; - border: 1px solid #ccc; - border-width: 0; - border-radius: 4px; } .form-field .localized-wrap .entry::before { @@ -2707,47 +2888,65 @@ input[type=number] { } .form-field .localized-wrap .entry .localized-value { - padding-right: 10%; border-top-width: 0; border-radius: 0 0 4px 4px; } +.form-field .localized-wrap .form-label button { + border-top-right-radius: 3px; +} + /* Preset form address */ -.form-field .addr-housename { - border: 0; - border-radius: 0; +.addr-row input { + border-right: 0; + border-bottom: 0; } -.form-field .addr-number { - width: 33.3333%; +.addr-row:first-of-type input { + border-top: 0; +} + +.addr-row input:first-of-type { border-left: 0; - border-right: 0; - border-bottom: 0; - border-radius: 0; } -.form-field .addr-street { - width: 66.6666%; - border-right: 0; - border-bottom: 0; +.addr-row input { border-radius: 0; } -.form-field .addr-city { - width: 66.6666%; - border-left: 0; - border-right: 0; - border-bottom: 0; +.addr-row:last-of-type input:first-of-type { border-radius: 0 0 0 4px; } -.form-field .addr-postcode { - width: 33.3333%; - border-right: 0; - border-bottom: 0; +.addr-row:last-of-type input:last-of-type { border-radius: 0 0 4px 0; } + +/* Restrictions editor */ + +.form-field-restrictions .preset-input-wrap { + position: relative; + height: 300px; +} + +.form-field-restrictions svg { + width: 100%; + height: 100%; +} + +.form-field-restrictions .restriction-help { + z-index: 1; + position: absolute; + top: 0; + left: 0; + right: 0; + padding: 2px 6px; + background-color: rgba(255, 255, 255, .8); + color: #999; + text-align: center; +} + /* combobox dropdown */ div.combobox { @@ -2781,10 +2980,21 @@ div.combobox { border-top: 0; } -.combobox-carat { - margin-left: -20px; - margin-right: 10px; - display:inline-block; +.combobox-caret { + display: inline-block; + position: relative; + height: 30px; + width: 30px; + margin-left: -30px; + vertical-align: top; +} + +.combobox-caret::after { + content:""; + height: 0; width: 0; + position: absolute; + left: 0; right: 0; bottom: 0; top: 0; + margin: auto; border-top: 5px solid #ccc; border-left: 5px solid transparent; border-right: 5px solid transparent; @@ -2870,6 +3080,10 @@ div.combobox { .tag-row .tag-reference-button { right: 0; + border-radius: 0; + width: 10%; + top: 0; + background: #fafafa; } /* Adding form fields to tag editor */ @@ -2903,6 +3117,7 @@ button.minor.tag-reference-loading { .tag-reference-body { overflow: hidden; + clear: both; } .tag-reference-body p, @@ -2977,6 +3192,10 @@ img.wiki-image { padding-left: 10px; } +.member-incomplete .member-delete { + display: none; +} + .member-row-new .member-entity-input { border-radius: 4px 4px 0 0; border: 1px solid #cfcfcf; @@ -3014,21 +3233,11 @@ img.wiki-image { background: rgba(0, 0, 0, .8); } +.map-control > button.active, .map-control > button.active:hover { background: #7092ff; } -.map-overlay { - z-index: -1; - right: 75%; - max-width: 260px; - min-width: 210px; - position: fixed; - left: 30px; - display: block; - padding: 10px 10px 0 10px; -} - /* Zoomer */ .zoombuttons button.zoom-in { @@ -3037,32 +3246,16 @@ img.wiki-image { /* Background Settings */ - -.toggle-list.layer-list { - margin-bottom: 10px; -} - .background-control button { border-radius: 4px 0 0 0; } - -.background-control button.active { - border-radius: 0; -} - .background-control { position: relative; } -.background-control .map-overlay { - position: absolute; - top: 0; -} - .nudge-container { - border-top: 1px solid #CCC; - margin: 0 -10px; + border: 1px solid #CCC; } .background-control .adjustments button:last-child { @@ -3073,6 +3266,56 @@ img.wiki-image { padding-bottom: 10px; } +.layer-list { + margin-bottom: 10px; + border: 1px solid #CCC; + border-radius: 4px; +} + +.layer-list li { + position: relative; + height: 30px; + background-color: white; + color: #7092FF; +} + +.layer-list > li:first-child { + border-radius: 3px 3px 0 0; +} + +.layer-list > li:last-child { + border-radius: 0 0 3px 3px; +} + +.layer-list > li:only-child { + border-radius: 3px; +} + +.layer-list li:not(:last-child) { + border-bottom: 1px solid #ccc; +} + +.layer-list li:hover { + background-color: #ececec; +} + +.layer-list li.active { + background: #E8EBFF; +} + +.layer-list label { + display: block; + padding: 5px 10px; + cursor: pointer; +} + +.layer-list label > span { + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + .hide-toggle { display: block; padding-left:12px; @@ -3103,7 +3346,6 @@ img.wiki-image { float: left; display: block; width:20%; - border-radius: 0; border-right: 1px solid #CCC; position: relative; } @@ -3145,10 +3387,10 @@ img.wiki-image { .opacity-options { background: url(<%= asset_path("iD/img/background-pattern-opacity.png") %>) 0 0 repeat; height:20px; - width:62px; + width:82px; position: absolute; - right: 10px; - top: 10px; + right: 50px; + top: 20px; border: 1px solid #ccc; } @@ -3184,13 +3426,20 @@ img.wiki-image { height:18px; } -.background-control .layer-toggle-gpx .layer-extent { +.background-control .layer-list button { + float: right; + height: 100%; + width: 10%; border-left: 1px solid #CCC; - border-radius: 0 4px 4px 0; + border-radius: 0; } -.background-control .layer-toggle-gpx.selected .layer-extent { - display:inline-block; +.background-control .layer-list button .icon { + opacity: 0.5; +} + +.background-control .layer-list button:first-of-type { + border-radius: 0 3px 3px 0; } /* Geolocator */ @@ -3203,19 +3452,22 @@ img.wiki-image { border-radius: 0 0 0 4px; } -/* Help */ - -.help-control button { - border-radius: 0 0 0 4px; -} - -.help-wrap { +.map-overlay.content { position: fixed; top:60px; bottom: 30px; padding: 20px 50px 20px 20px; right: 0; - overflow-y: scroll; + overflow: auto; +} + +.background-control .map-overlay { + z-index: -1; +} +/* Help */ + +.help-control button { + border-radius: 0 0 0 4px; } .help-wrap p { @@ -3330,7 +3582,8 @@ img.wiki-image { /* About Section ------------------------------------------------------- */ -.about-block { +#footer { + width: 100%; position: absolute; right:0; bottom:0; @@ -3341,13 +3594,47 @@ img.wiki-image { transition: opacity 200ms; } -.about-block:hover { +#footer:hover { opacity: 1; } -#about { +#scale-block { + display: table-cell; + vertical-align: bottom; + width: 250px; + height: 30px; + float: left; + clear: left; +} + +#info-block { + float: right; + clear: right; +} + +#scale { + height: 30px; + width: 100%; +} + +#scale text { + font: 12px sans-serif; + stroke: none; + fill: #ccc; + text-anchor: start; +} + +#scale path { + fill: none; + stroke: #ccc; + stroke-width: 1; + shape-rendering: crispEdges; +} + +#about-list { text-align: right; margin-right: 10px; + clear: right; } .source-switch a { @@ -3360,12 +3647,24 @@ img.wiki-image { } /* Attribution overlay */ -.attribution { +.base-layer-attribution, +.overlay-layer-attribution { position: absolute; bottom: 35px; - left:10px; - color:#888; - font-size:10px; + color: #888; + font-size: 10px; +} + +.base-layer-attribution { + left: 10px; +} + +.overlay-layer-attribution { + right: 10px; +} + +.overlay-layer-attribution .attribution:not(:last-child):after { + content: '; '; } .source-image { @@ -3377,29 +3676,18 @@ img.wiki-image { content: ', '; } -/* API Status */ - .api-status { - float: left; + float: right; + clear: both; + text-align: right; + width: 100%; } .api-status.offline, -.api-status.readonly { +.api-status.readonly, +.api-status.error { background: red; - padding: 5px 10px; -} - -/* Account Information */ - -.account { - float: left; - padding: 5px 10px; -} - -.account .logout { - margin-left:10px; - border-left: 1px solid white; - padding-left: 10px; + padding: 0px 5px; } /* Modals @@ -3488,11 +3776,11 @@ img.wiki-image { ------------------------------------------------------- */ .modal-actions .restore:before { - background-position: -500px -220px; + background-position: -600px -220px; } .modal-actions .reset:before { - background-position: -600px -220px; + background-position: -700px -220px; } /* Success Modal @@ -3506,16 +3794,28 @@ img.wiki-image { padding-top: 15px; } +.save-success .button.social { + height: 80px; +} + +.save-success .button.social:before { + height: 50px; +} + .save-success .button.osm:before { background-position: 0px -220px; } .save-success .button.twitter:before { - background-position: -100px -220px; + background-position: -100px -245px; } .save-success .button.facebook:before { - background-position: -200px -220px; + background-position: -200px -245px; +} + +.save-success .button.google:before { + background-position: -300px -245px; } /* Splash Modal @@ -3523,11 +3823,11 @@ img.wiki-image { .modal-actions .walkthrough:before, .walkthrough a:before { - background-position: -300px -220px; + background-position: -400px -220px; } .modal-actions .start:before { - background-position: -400px -220px; + background-position: -500px -220px; } /* Commit Modal @@ -3545,6 +3845,8 @@ img.wiki-image { float: none; margin: auto; display: block; + color: white; + font-size: 14px; } .mode-save .user-info img { @@ -3565,12 +3867,14 @@ img.wiki-image { color:#fff; } +.mode-save .commit-info { + margin-bottom: 10px; +} + .mode-save .changeset-list { - overflow: auto; border:1px solid #ccc; border-radius: 4px; background:#fff; - max-height: 160px; } .mode-save .warning-section .changeset-list button { @@ -3581,6 +3885,15 @@ img.wiki-image { position: relative; border-top:1px solid #ccc; padding:5px 10px; + cursor: pointer; +} + +.mode-save .changeset-list li:hover { + background-color: #ececec; +} + +.mode-save .changeset-list .alert { + opacity: 0.5; } .changeset-list li span.count { @@ -3588,6 +3901,10 @@ img.wiki-image { color:#555; } +.mode-save .commit-section .changeset-list button { + border-left: 1px solid #CCC; +} + .changeset-list li span.count:before { content: '('; } .changeset-list li span.count:after { content: ')'; } @@ -3797,27 +4114,41 @@ img.wiki-image { /* Exceptions for tooltip layouts */ -/* make tooltips in editor pane dark */ -.entity-editor-pane .tooltip.top .tooltip-arrow { +/* make tooltips in panels dark */ +.map-overlay .tooltip.top .tooltip-arrow, +.entity-editor-pane .tooltip.top .tooltip-arrow, +.warning-section .tooltip.top .tooltip-arrow { border-top-color: #000; } -.entity-editor-pane .tooltip.bottom .tooltip-arrow { +.map-overlay .tooltip.bottom .tooltip-arrow, +.entity-editor-pane .tooltip.bottom .tooltip-arrow, +.warning-section .tooltip.bottom .tooltip-arrow { border-bottom-color: #000; } -.entity-editor-pane .tooltip.left .tooltip-arrow { +.map-overlay .tooltip.left .tooltip-arrow, +.entity-editor-pane .tooltip.left .tooltip-arrow, +.warning-section .tooltip.left .tooltip-arrow { border-left-color: #000; } -.entity-editor-pane .tooltip.right .tooltip-arrow { +.map-overlay .tooltip.right .tooltip-arrow, +.entity-editor-pane .tooltip.right .tooltip-arrow, +.warning-section .tooltip.right .tooltip-arrow { border-right-color: #000; } -.entity-editor-pane .tooltip-inner { +.map-overlay .tooltip-inner, +.entity-editor-pane .tooltip-inner, +.warning-section .tooltip-inner { background: #000; color: #ccc; } +/* commit warning tooltips need to be closer */ +.warning-section .tooltip.top { + margin-top: -5px; +} /* Uncramp map-control tooltips */ .map-control .tooltip { @@ -3825,7 +4156,7 @@ img.wiki-image { } /* Move over tooltips that are near the edge of screen */ .add-point .tooltip { - left: 33.3333% !important; + left: 33.3333% !important; } .curtain-tooltip.intro-points-add .tooltip-arrow, @@ -3862,10 +4193,6 @@ img.wiki-image { fill: rgba(255,255,255,.5); } -.radial-menu .icon { - pointer-events: none; -} - .lasso-box { fill-opacity:0.1; stroke: #fff; @@ -4007,7 +4334,7 @@ img.wiki-image { .huge-modal-button .illustration { height: 100px; width: 100px; - background: rgba(0, 0, 0, 0) url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat -301px -220px; + background: rgba(0, 0, 0, 0) url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat -400px -220px; margin: auto; } /* This file is generated by make. Do NOT edit manually. */ @@ -4015,99 +4342,120 @@ img.wiki-image { .preset-icon{background-image:url(<%= asset_path("iD/img/maki-sprite.png") %>);background-repeat:no-repeat;width:24px;height:24px;} .preset-icon-line{background-image:url(<%= asset_path("iD/img/line-presets.png") %>);background-repeat:no-repeat;width:60px;height:60px;} .preset-icon-relation{background-image:url(<%= asset_path("iD/img/relation-presets.png") %>);background-repeat:no-repeat;width:60px;height:60px;} -.feature-airfield{background-position:-0px -34px;} -.feature-airport{background-position:-0px -94px;} -.feature-alcohol-shop{background-position:-0px -154px;} -.feature-america-football{background-position:-0px -214px;} -.feature-art-gallery{background-position:-0px -274px;} -.feature-bank{background-position:-0px -334px;} -.feature-bar{background-position:-0px -394px;} -.feature-baseball{background-position:-0px -454px;} -.feature-basketball{background-position:-0px -514px;} -.feature-beer{background-position:-0px -574px;} -.feature-bicycle{background-position:-0px -634px;} -.feature-building{background-position:-0px -694px;} -.feature-bus{background-position:-0px -754px;} -.feature-cafe{background-position:-0px -814px;} -.feature-campsite{background-position:-0px -874px;} -.feature-cemetery{background-position:-0px -934px;} -.feature-cinema{background-position:-0px -994px;} -.feature-circle{background-position:-0px -1054px;} -.feature-circle-stroked{background-position:-0px -1114px;} -.feature-city{background-position:-0px -1174px;} -.feature-college{background-position:-0px -1234px;} -.feature-commercial{background-position:-0px -1294px;} -.feature-cricket{background-position:-0px -1354px;} -.feature-cross{background-position:-0px -1414px;} -.feature-dam{background-position:-0px -1474px;} -.feature-danger{background-position:-0px -1534px;} -.feature-disability{background-position:-0px -1594px;} -.feature-embassy{background-position:-0px -1654px;} -.feature-emergency-telephone{background-position:-0px -1714px;} -.feature-farm{background-position:-0px -1774px;} -.feature-fast-food{background-position:-0px -1834px;} -.feature-ferry{background-position:-0px -1894px;} -.feature-fire-station{background-position:-0px -1954px;} -.feature-fuel{background-position:-0px -2014px;} -.feature-garden{background-position:-0px -2074px;} -.feature-golf{background-position:-0px -2134px;} -.feature-grocery{background-position:-0px -2194px;} -.feature-harbor{background-position:-0px -2254px;} -.feature-heliport{background-position:-0px -2314px;} -.feature-hospital{background-position:-0px -2374px;} -.feature-industrial{background-position:-0px -2434px;} -.feature-land-use{background-position:-0px -2494px;} -.feature-library{background-position:-0px -2554px;} -.feature-lodging{background-position:-0px -2614px;} -.feature-logging{background-position:-0px -2674px;} -.feature-marker{background-position:-0px -2734px;} -.feature-marker-stroked{background-position:-0px -2794px;} -.feature-monument{background-position:-0px -2854px;} -.feature-museum{background-position:-0px -2914px;} -.feature-music{background-position:-0px -2974px;} -.feature-oil-well{background-position:-0px -3034px;} -.feature-park{background-position:-0px -3094px;} -.feature-park2{background-position:-0px -3154px;} -.feature-parking{background-position:-0px -3214px;} -.feature-parking-garage{background-position:-0px -3274px;} -.feature-pharmacy{background-position:-0px -3334px;} -.feature-pitch{background-position:-0px -3394px;} -.feature-place-of-worship{background-position:-0px -3454px;} -.feature-police{background-position:-0px -3514px;} -.feature-post{background-position:-0px -3574px;} -.feature-prison{background-position:-0px -3634px;} -.feature-rail{background-position:-0px -3694px;} -.feature-rail-above{background-position:-0px -3754px;} -.feature-rail-underground{background-position:-0px -3814px;} -.feature-religious-christian{background-position:-0px -3874px;} -.feature-religious-jewish{background-position:-0px -3934px;} -.feature-religious-muslim{background-position:-0px -3994px;} -.feature-restaurant{background-position:-0px -4054px;} -.feature-roadblock{background-position:-0px -4114px;} -.feature-school{background-position:-0px -4174px;} -.feature-shop{background-position:-0px -4234px;} -.feature-skiing{background-position:-0px -4294px;} -.feature-slaughterhouse{background-position:-0px -4354px;} -.feature-soccer{background-position:-0px -4414px;} -.feature-square{background-position:-0px -4474px;} -.feature-square-stroked{background-position:-0px -4534px;} -.feature-star{background-position:-0px -4594px;} -.feature-star-stroked{background-position:-0px -4654px;} -.feature-swimming{background-position:-0px -4714px;} -.feature-telephone{background-position:-0px -4774px;} -.feature-tennis{background-position:-0px -4834px;} -.feature-theatre{background-position:-0px -4894px;} -.feature-toilets{background-position:-0px -4954px;} -.feature-town{background-position:-0px -5014px;} -.feature-town-hall{background-position:-0px -5074px;} -.feature-triangle{background-position:-0px -5134px;} -.feature-triangle-stroked{background-position:-0px -5194px;} -.feature-village{background-position:-0px -5254px;} -.feature-warehouse{background-position:-0px -5314px;} -.feature-waste-basket{background-position:-0px -5374px;} -.feature-water{background-position:-0px -5434px;} -.feature-wetland{background-position:-0px -5494px;} -.feature-zoo{background-position:-0px -5554px;} +.feature-circle-stroked{background-position:-0px -0px;} +.feature-circle{background-position:-54px -0px;} +.feature-square-stroked{background-position:-108px -0px;} +.feature-square{background-position:-162px -0px;} +.feature-triangle-stroked{background-position:-216px -0px;} +.feature-triangle{background-position:-0px -24px;} +.feature-star-stroked{background-position:-54px -24px;} +.feature-star{background-position:-108px -24px;} +.feature-cross{background-position:-162px -24px;} +.feature-marker-stroked{background-position:-216px -24px;} +.feature-marker{background-position:-0px -48px;} +.feature-religious-jewish{background-position:-54px -48px;} +.feature-religious-christian{background-position:-108px -48px;} +.feature-religious-muslim{background-position:-162px -48px;} +.feature-cemetery{background-position:-216px -48px;} +.feature-rocket{background-position:-0px -72px;} +.feature-airport{background-position:-54px -72px;} +.feature-heliport{background-position:-108px -72px;} +.feature-rail{background-position:-162px -72px;} +.feature-rail-metro{background-position:-216px -72px;} +.feature-rail-light{background-position:-0px -96px;} +.feature-bus{background-position:-54px -96px;} +.feature-fuel{background-position:-108px -96px;} +.feature-parking{background-position:-162px -96px;} +.feature-parking-garage{background-position:-216px -96px;} +.feature-airfield{background-position:-0px -120px;} +.feature-roadblock{background-position:-54px -120px;} +.feature-ferry{background-position:-108px -120px;} +.feature-harbor{background-position:-162px -120px;} +.feature-bicycle{background-position:-216px -120px;} +.feature-park{background-position:-0px -144px;} +.feature-park2{background-position:-54px -144px;} +.feature-museum{background-position:-108px -144px;} +.feature-lodging{background-position:-162px -144px;} +.feature-monument{background-position:-216px -144px;} +.feature-zoo{background-position:-0px -168px;} +.feature-garden{background-position:-54px -168px;} +.feature-campsite{background-position:-108px -168px;} +.feature-theatre{background-position:-162px -168px;} +.feature-art-gallery{background-position:-216px -168px;} +.feature-pitch{background-position:-0px -192px;} +.feature-soccer{background-position:-54px -192px;} +.feature-america-football{background-position:-108px -192px;} +.feature-tennis{background-position:-162px -192px;} +.feature-basketball{background-position:-216px -192px;} +.feature-baseball{background-position:-0px -216px;} +.feature-golf{background-position:-54px -216px;} +.feature-swimming{background-position:-108px -216px;} +.feature-cricket{background-position:-162px -216px;} +.feature-skiing{background-position:-216px -216px;} +.feature-school{background-position:-0px -240px;} +.feature-college{background-position:-54px -240px;} +.feature-library{background-position:-108px -240px;} +.feature-post{background-position:-162px -240px;} +.feature-fire-station{background-position:-216px -240px;} +.feature-town-hall{background-position:-0px -264px;} +.feature-police{background-position:-54px -264px;} +.feature-prison{background-position:-108px -264px;} +.feature-embassy{background-position:-162px -264px;} +.feature-beer{background-position:-216px -264px;} +.feature-restaurant{background-position:-0px -288px;} +.feature-cafe{background-position:-54px -288px;} +.feature-shop{background-position:-108px -288px;} +.feature-fast-food{background-position:-162px -288px;} +.feature-bar{background-position:-216px -288px;} +.feature-bank{background-position:-0px -312px;} +.feature-grocery{background-position:-54px -312px;} +.feature-cinema{background-position:-108px -312px;} +.feature-pharmacy{background-position:-162px -312px;} +.feature-hospital{background-position:-216px -312px;} +.feature-danger{background-position:-0px -336px;} +.feature-industrial{background-position:-54px -336px;} +.feature-warehouse{background-position:-108px -336px;} +.feature-commercial{background-position:-162px -336px;} +.feature-building{background-position:-216px -336px;} +.feature-place-of-worship{background-position:-0px -360px;} +.feature-alcohol-shop{background-position:-54px -360px;} +.feature-logging{background-position:-108px -360px;} +.feature-oil-well{background-position:-162px -360px;} +.feature-slaughterhouse{background-position:-216px -360px;} +.feature-dam{background-position:-0px -384px;} +.feature-water{background-position:-54px -384px;} +.feature-wetland{background-position:-108px -384px;} +.feature-disability{background-position:-162px -384px;} +.feature-telephone{background-position:-216px -384px;} +.feature-emergency-telephone{background-position:-0px -408px;} +.feature-toilets{background-position:-54px -408px;} +.feature-waste-basket{background-position:-108px -408px;} +.feature-music{background-position:-162px -408px;} +.feature-land-use{background-position:-216px -408px;} +.feature-city{background-position:-0px -432px;} +.feature-town{background-position:-54px -432px;} +.feature-village{background-position:-108px -432px;} +.feature-farm{background-position:-162px -432px;} +.feature-bakery{background-position:-216px -432px;} +.feature-dog-park{background-position:-0px -456px;} +.feature-lighthouse{background-position:-54px -456px;} +.feature-clothing-store{background-position:-108px -456px;} +.feature-polling-place{background-position:-162px -456px;} +.feature-playground{background-position:-216px -456px;} +.feature-entrance{background-position:-0px -480px;} +.feature-heart{background-position:-54px -480px;} +.feature-london-underground{background-position:-108px -480px;} +.feature-minefield{background-position:-162px -480px;} +.feature-rail-underground{background-position:-216px -480px;} +.feature-rail-above{background-position:-0px -504px;} +.feature-camera{background-position:-54px -504px;} +.feature-laundry{background-position:-108px -504px;} +.feature-car{background-position:-162px -504px;} +.feature-suitcase{background-position:-216px -504px;} +.feature-hairdresser{background-position:-0px -528px;} +.feature-chemist{background-position:-54px -528px;} +.feature-mobilephone{background-position:-108px -528px;} +.feature-scooter{background-position:-162px -528px;} .preset-icon-line.feature-highway-motorway{background-position:-20px -25px;} .preset-icon-line.feature-highway-trunk{background-position:-80px -25px;} .preset-icon-line.feature-highway-primary{background-position:-140px -25px;} @@ -4163,3 +4511,10 @@ img.wiki-image { .preset-icon-relation.feature-route-power{background-position:-800px -25px;} .preset-icon-relation.feature-route-pipeline{background-position:-860px -25px;} .preset-icon-relation.feature-route-master{background-position:-920px -25px;} +.preset-icon-relation.feature-restriction-no-straight-on{background-position:-980px -25px;} +.preset-icon-relation.feature-restriction-no-u-turn{background-position:-1040px -25px;} +.preset-icon-relation.feature-restriction-no-left-turn{background-position:-1100px -25px;} +.preset-icon-relation.feature-restriction-no-right-turn{background-position:-1160px -25px;} +.preset-icon-relation.feature-restriction-only-straight-on{background-position:-1220px -25px;} +.preset-icon-relation.feature-restriction-only-left-turn{background-position:-1280px -25px;} +.preset-icon-relation.feature-restriction-only-right-turn{background-position:-1340px -25px;}