X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/1031af317729ac345aed271d9a9b5c73fe62e10b..92384ed9565d6f6558417ea43958612cbf9a87d7:/vendor/assets/iD/iD.css.erb?ds=sidebyside diff --git a/vendor/assets/iD/iD.css.erb b/vendor/assets/iD/iD.css.erb index 70b63377c..3f733c3b4 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, @@ -331,6 +343,8 @@ path.area.stroke { stroke-width: 1; } path.area.fill { + stroke-width: 0; + stroke: rgba(255, 255, 255, 0.3); fill: rgba(255, 255, 255, 0.3); fill-rule: evenodd; } @@ -343,6 +357,7 @@ path.stroke.tag-natural { stroke: rgb(182, 225, 153); } path.fill.tag-natural { + stroke: rgba(182, 225, 153, 0.3); fill: rgba(182, 225, 153, 0.3); } .preset-icon-fill-area.tag-natural { @@ -350,44 +365,12 @@ path.fill.tag-natural { background-color: rgba(182, 225, 153, 0.3); } -path.stroke.tag-natural-water { - stroke: rgb(119, 211, 222); -} -path.fill.tag-natural-water { - fill: rgba(119, 211, 222, 0.3); -} -.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-school { - stroke: rgb(255, 255, 148); -} -path.fill.tag-amenity-school { - fill: rgba(255, 255, 148, 0.2); -} -.preset-icon-fill-area.tag-amenity-school { - border-color: rgb(255, 255, 148); - background-color: rgba(255, 255, 148, 0.2); -} - -path.stroke.tag-amenity-university { - stroke: rgb(255, 255, 148); -} -path.fill.tag-amenity-university { - fill: rgba(255, 255, 148, 0.1); -} -.preset-icon-fill-area.tag-amenity-university { - border-color: rgb(255, 255, 148); - background-color: rgba(255, 255, 148, 0.1); -} - 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-nature_reserve, path.stroke.tag-leisure-pitch, path.stroke.tag-leisure-park { stroke: rgb(140, 208, 95); @@ -397,75 +380,113 @@ path.fill.tag-natural-wood, path.fill.tag-natural-tree, path.fill.tag-natural-grassland, path.fill.tag-natural-grass, +path.fill.tag-leisure-nature_reserve, path.fill.tag-leisure-pitch, path.fill.tag-leisure-park { - fill: rgba(140, 208, 95, 0.2); + stroke: rgba(140, 208, 95, 0.3); + fill: rgba(140, 208, 95, 0.3); } .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-nature_reserve, .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); + background-color: rgba(140, 208, 95, 0.3); +} + +path.stroke.tag-natural-water, +path.stroke.tag-landuse-basin, +path.stroke.tag-landuse-reservoir { + stroke: rgb(119, 211, 222); +} +path.fill.tag-landuse-basin, +path.fill.tag-landuse-reservoir, +path.fill.tag-natural-water { + stroke: rgba(119, 211, 222, 0.3); + fill: rgba(119, 211, 222, 0.3); +} +.preset-icon-fill-area.tag-landuse-basin, +.preset-icon-fill-area.tag-landuse-reservoir, +.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: 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 { + stroke: rgba(255, 255, 148, 0.15); + fill: rgba(255, 255, 148, 0.15); +} +.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); } path.stroke.tag-landuse-residential { - stroke: rgb(224, 110, 95); + stroke: rgb(196, 189, 25); } path.fill.tag-landuse-residential { - fill: rgba(224, 110, 95, 0.1); + stroke: rgba(196, 189, 25, 0.3); + fill: rgba(196, 189, 25, 0.3); } .preset-icon-fill-area.tag-landuse-residential { - border-color: rgb(224, 110, 95); - background-color: rgba(224, 110, 95, 0.1); + 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: rgb(234, 176, 86); + stroke: rgb(214, 136, 26); } path.fill.tag-landuse-retail, path.fill.tag-landuse-commercial { - fill: rgba(234, 176, 86, 0.1); + stroke: rgba(214, 136, 26, 0.3); + fill: rgba(214, 136, 26, 0.3); } .preset-icon-fill-area.tag-landuse-retail, .preset-icon-fill-area.tag-landuse-commercial { - border-color: rgb(234, 176, 86); - background-color: rgba(234, 176, 86, 0.1); + 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: rgb(228, 164, 245); } path.fill.tag-landuse-industrial { - fill: rgba(228, 164, 245, 0.1); + stroke: rgba(228, 164, 245, 0.3); + fill: rgba(228, 164, 245, 0.3); } .preset-icon-fill-area.tag-landuse-industrial { border-color: rgb(228, 164, 245); - background-color: rgba(228, 164, 245, 0.1); -} - -path.stroke.tag-landuse-basin, -path.stroke.tag-landuse-reservoir { - 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); + background: none; + box-shadow: inset 0 0 0 5px rgba(228, 164, 245, 0.3); } path.stroke.tag-landuse-quarry { stroke: rgb(166, 149, 123); } path.fill.tag-landuse-quarry { + stroke: rgba(166, 149, 123, 0.2); fill: rgba(166, 149, 123, 0.2); } .preset-icon-fill-area.tag-landuse-quarry { @@ -477,6 +498,7 @@ path.stroke.tag-landuse-landfill { stroke: rgb(255, 153, 51); } path.fill.tag-landuse-landfill { + stroke: rgba(255, 153, 51, 0.2); fill: rgba(255, 153, 51, 0.2); } .preset-icon-fill-area.tag-landuse-landfill { @@ -484,64 +506,68 @@ path.fill.tag-landuse-landfill { background-color: rgba(255, 153, 51, 0.2); } -path.stroke.tag-landuse-construction { - stroke: rgb(224, 110, 95); -} .pattern-color-construction { - fill: rgba(224, 110, 95, 0.2); + fill: rgba(196, 189, 25, 0.2); +} +path.stroke.tag-landuse-construction { + stroke: rgb(196, 189, 25); } .preset-icon-fill-area.tag-landuse-construction { - border-color: rgb(224, 110, 95); - background-color: rgba(224, 110, 95, 0.2); + border-color: rgb(196, 189, 25); + background-color: rgba(196, 189, 25, 0.2); } path.stroke.tag-landuse-military { - stroke: rgb(224, 110, 95); + stroke: rgb(214, 136, 26); +} +path.fill.tag-landuse-military { + stroke: rgba(214, 136, 26, 0.2); + fill: rgba(214, 136, 26, 0.2); } .preset-icon-fill-area.tag-landuse-military { - border-color: rgb(224, 110, 95); - background-color: rgba(224, 110, 95, 0.2); + border-color: rgb(214, 136, 26); + background-color: rgba(214, 136, 26, 0.2); } -path.stroke.tag-natural-wetland { - stroke: rgb(182, 225, 153); -} .pattern-color-wetland { fill: rgba(182, 225, 153, 0.2); } +path.stroke.tag-natural-wetland { + stroke: rgb(182, 225, 153); +} .preset-icon-fill-area.tag-natural-wetland { border-color: rgb(182, 225, 153); background-color: rgba(182, 225, 153, 0.2); } -path.stroke.tag-landuse-meadow { - stroke: rgb(182, 225, 153); -} .pattern-color-meadow { fill: rgba(182, 225, 153, 0.2); } +path.stroke.tag-landuse-meadow { + stroke: rgb(182, 225, 153); +} .preset-icon-fill-area.tag-landuse-meadow { border-color: rgb(182, 225, 153); background-color: rgba(182, 225, 153, 0.2); } -path.stroke.tag-natural-beach { - stroke: rgb(255, 255, 126); -} .pattern-color-beach { fill: rgba(255, 255, 126, 0.2); } +path.stroke.tag-natural-beach { + stroke: rgb(255, 255, 126); +} .preset-icon-fill-area.tag-natural-beach { border-color: rgb(255, 255, 126); background-color: rgba(255, 255, 126, 0.2); } -path.stroke.tag-natural-scrub { - stroke: rgb(219, 240, 139); -} .pattern-color-scrub { fill: rgba(219, 240, 139, 0.2); } +path.stroke.tag-natural-scrub { + stroke: rgb(219, 240, 139); +} .preset-icon-fill-area.tag-natural-scrub { border-color: rgb(219, 240, 139); background-color: rgba(219, 240, 139, 0.2); @@ -551,29 +577,33 @@ path.stroke.tag-natural-scrub { .pattern-color-farmland { fill: rgba(140, 208, 95, 0.2); } +path.stroke.tag-landuse-farm, +path.stroke.tag-landuse-farmland { + stroke: rgb(140, 208, 95); +} .preset-icon-fill-area.tag-landuse-farm, .preset-icon-fill-area.tag-landuse-farmland { background-color: rgba(140, 208, 95, 0.2); } -.pattern-color-cemetery { - fill: rgba(140, 208, 95, 0.2) -} -.preset-icon-fill-area.tag-landuse-cemetery { - background-color: rgba(140, 208, 95, 0.2); -} - +.pattern-color-cemetery, .pattern-color-orchard { - fill: rgba(140, 208, 95, 0.2) + fill: rgba(140, 208, 95, 0.2); +} +path.stroke.tag-landuse-cemetery, +path.stroke.tag-landuse-orchard { + stroke: rgb(140, 208, 95); } +.preset-icon-fill-area.tag-landuse-cemetery, .preset-icon-fill-area.tag-landuse-orchard { - background-color: rgba(140, 208, 95, 0.8); + background-color: rgba(140, 208, 95, 0.2); } path.stroke.tag-amenity-parking { stroke: rgb(170, 170, 170); } path.fill.tag-amenity-parking { + stroke: rgba(170, 170, 170, 0.3); fill: rgba(170, 170, 170, 0.3); } .preset-icon-fill-area.tag-amenity-parking { @@ -693,18 +723,18 @@ path.casing.tag-highway-living_street { stroke-width:6; } -path.stroke.line.tag-highway-pedestrian { +path.stroke.tag-highway-pedestrian { stroke:#fff; stroke-dasharray: 2, 8; - stroke-width:4 !important; - shapeRendering: auto; + stroke-width:4; } -path.casing.line.tag-highway-pedestrian { +path.casing.tag-highway-pedestrian { stroke:#8cd05f; - stroke-width:6 !important; + stroke-width:6; } path.stroke.area.tag-highway-pedestrian { stroke:#fff; + stroke-dasharray: none; stroke-width: 2; } @@ -818,12 +848,14 @@ path.casing.tag-aeroway-runway { stroke-linecap: square; } path.fill.tag-aeroway-runway { + stroke: rgba(0, 0, 0, 0.6); fill: rgba(0, 0, 0, 0.6); } path.stroke.tag-aeroway-apron { stroke: #805C80; } path.fill.tag-aeroway-apron { + stroke: rgba(128, 92, 128, 0.2); fill: rgba(128, 92, 128, 0.2); } @@ -877,6 +909,7 @@ path.casing.tag-railway-platform { /* waterways */ path.fill.tag-waterway { + stroke: rgba(119, 211, 222, 0.3); fill: rgba(119, 211, 222, 0.3); } @@ -933,44 +966,95 @@ path.casing.tag-boundary-national_park { stroke: #b0e298; } +/* barriers */ + +path.stroke.tag-barrier { + stroke: #ddd; + stroke-width: 3px; + stroke-linecap: round; + stroke-dasharray: 15, 5, 1, 5; +} +.low-zoom path.stroke.tag-barrier { + stroke-width: 2px; + stroke-linecap: butt; + stroke-dasharray: 8, 2, 2, 2; +} /* bridges */ path.casing.tag-bridge { - stroke-width: 14; - stroke-opacity: 0.5; + stroke-width: 16; + stroke-opacity: 0.6; stroke: #000; + stroke-linecap: butt; } -path.casing.tag-highway-living_street.tag-bridge, -path.casing.tag-highway-path.tag-bridge { - stroke-width: 6; +path.shadow.tag-bridge { + stroke-width: 22; } -path.casing.line.tag-highway-pedestrian, +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: 8; -} - -path.shadow.tag-highway-residential.tag-bridge { - stroke-width:22; + 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, +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: 16; + 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 */ @@ -1052,6 +1136,7 @@ path.stroke.tag-amenity-shelter { } path.fill.tag-building, path.fill.tag-amenity-shelter { + stroke: rgba(224, 110, 95, 0.3); fill: rgba(224, 110, 95, 0.3); } .preset-icon-fill-area.tag-building, @@ -1123,6 +1208,7 @@ g.turn circle { /* Cursors */ +.map-in-map, #map { cursor: auto; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-grab.png") %>) 9 9, auto; /* FF */ @@ -1209,9 +1295,14 @@ g.turn circle { } .mode-add-point #map, -.lasso #map, -.lasso .way, -.lasso .vertex { +.mode-browse.lasso #map, +.mode-browse.lasso .way, +.mode-browse.lasso .vertex, +.mode-browse.lasso .midpoint, +.mode-select.lasso #map, +.mode-select.lasso .way, +.mode-select.lasso .vertex, +.mode-select.lasso .midpoint { cursor: crosshair; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */ } @@ -1227,16 +1318,48 @@ g.turn circle { } /* GPX Paths */ +div.layer-gpx { + pointer-events: none; +} + path.gpx { stroke: #FF26D4; stroke-width: 2; fill: none; - pointer-events: none; } -/* GPS Labels */ text.gpx { - fill:#FF26D4; + 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 */ @@ -1262,6 +1385,42 @@ text.gpx { .mode-drag-node .area.fill { pointer-events: none; } + + +/* Fill Styles */ +.low-zoom.fill-wireframe path.stroke, +.fill-wireframe path.stroke { + stroke-width: 1; + stroke-opacity: 0.5; + stroke-dasharray: none; + fill: none; +} + +.low-zoom.fill-wireframe path.shadow, +.fill-wireframe path.shadow { + stroke-width: 8; +} + +.fill-wireframe path.shadow.hover:not(.selected) { + stroke-opacity: 0.2; +} +.fill-wireframe path.shadow.selected { + stroke-opacity: 0.4; +} + +.fill-wireframe .point, +.fill-wireframe .icon, +.fill-wireframe path.casing, +.fill-wireframe path.fill, +.fill-wireframe path.oneway { + display: none; +} + +.fill-partial path.fill { + fill-opacity: 0; + stroke-width: 60px; + pointer-events: visibleStroke; +} /* Basics ------------------------------------------------------- */ @@ -1404,10 +1563,6 @@ strong { a:visited, a { color: #7092ff; - -webkit-transition: all 100ms; - -moz-transition: all 100ms; - -o-transition: all 100ms; - transition: all 100ms; } a:hover { @@ -1436,10 +1591,6 @@ input[type=email] { width: 100%; border-radius:4px; text-overflow: ellipsis; - -webkit-transition: all 200ms; - -moz-transition: all 200ms; - -o-transition: all 200ms; - transition: all 200ms; } textarea:focus, @@ -1511,9 +1662,6 @@ ul li { list-style: none;} background-color: white; color: #7092FF; cursor: pointer; - -moz-transition: all 100ms; - -o-transition: all 100ms; - transition: all 100ms; } .toggle-list > label:hover { @@ -1539,18 +1687,6 @@ ul li { list-style: none;} background: #E8EBFF; } -.link-list li { - float: right; - border-left: 1px solid rgba(255,255,255,.5); - padding: 5px 0 5px 5px; - margin-left: 5px; -} - -ul.link-list li:last-child { - border-left: 0; - margin-left: 0; - padding-left: 0; -} /* Utility Classes ------------------------------------------------------- */ @@ -1574,13 +1710,19 @@ ul.link-list li:last-child { color: white; } +.fillD2 { + background:rgba(0,0,0,.75); + color: white; +} + .fl { float: left;} .fr { float: right;} div.hide, form.hide, button.hide, -a.hide { +a.hide, +li.hide { display: none; } @@ -1604,6 +1746,7 @@ a.hide { right: -100%; } + .pane { position:absolute; width:50%; @@ -1632,11 +1775,6 @@ button { display: inline-block; height:40px; border-radius:4px; - /* Crashes Safari: https://github.com/openstreetmap/iD/issues/1188 */ - /*-webkit-transition: all 100ms;*/ - -moz-transition: all 100ms; - -o-transition: all 100ms; - transition: all 100ms; } button:focus, @@ -1692,6 +1830,10 @@ button.minor:hover { border-right: 1px solid rgba(0,0,0,.5); } +.fillL .joined button { + border-right: 1px solid white; +} + .joined button:first-child { border-radius:4px 0 0 4px; } @@ -1703,6 +1845,13 @@ button.minor:hover { button.action { background: #7092ff; + color: white; +} + +button[disabled].action, +button[disabled].action:hover { + background: #cccccc; + color: #888; } button.action:focus, @@ -1710,6 +1859,15 @@ button.action:hover { background: #597BE7; } +button.secondary-action { + background: #ececec; +} + +button.secondary-action:focus, +button.secondary-action:hover { + background: #cccccc; +} + button.save.has-count { padding: 9px; } @@ -1802,6 +1960,7 @@ button.save.has-count .count::before { .icon.relation.route { background-position: -540px 0;} .icon.relation.multipolygon { background-position: -560px 0;} .icon.vertex { background-position: -580px 0;} +.icon.data { background-position: -600px 0;} .icon.inspect.light { background-position: -220px -20px;} .icon.plus.light { background-position: -240px -20px;} @@ -1814,6 +1973,7 @@ button.save.has-count .count::before { .icon.geolocate.light { background-position: -360px -20px;} .icon.bug.light { background-position: -400px -20px;} .icon.help.light { background-position: -460px -20px;} +.icon.data.light { background-position: -600px -20px;} .icon.back.blue { background-position: -420px -20px;} .icon.forward.blue { background-position: -440px -20px;} @@ -1835,14 +1995,15 @@ button[disabled] .icon.geocode { background-position: -280px -40px;} button[disabled] .icon.layers { background-position: -300px -40px;} button[disabled] .icon.avatar { background-position: -320px -40px;} button[disabled] .icon.nearby { background-position: -340px -40px;} +button[disabled] .icon.data { background-position: -600px -40px;} -.icon.point.deleted { background-position: -302px -80px;} -.icon.line.deleted { background-position: -320px -80px;} -.icon.area.deleted { background-position: -340px -80px;} +.icon.point.deleted { background-position: -480px -80px;} +.icon.line.deleted { background-position: -500px -80px;} +.icon.area.deleted { background-position: -520px -80px;} -.icon.point.created { background-position: -302px -100px;} -.icon.line.created { background-position: -320px -100px;} -.icon.area.created { background-position: -340px -100px;} +.icon.point.created { background-position: -480px -100px;} +.icon.line.created { background-position: -500px -100px;} +.icon.area.created { background-position: -520px -100px;} .icon.point.modified { background-position: -22px 0; } @@ -1876,7 +2037,7 @@ a:hover .icon.out-link { background-position: -500px -14px;} top:0; right:0; height:60px; - z-index: 1; + z-index: 9; min-width: 768px; } @@ -1890,7 +2051,7 @@ a:hover .icon.out-link { background-position: -500px -14px;} } .header h3 { - text-align: center; + text-align: left; margin-bottom: 0; white-space: nowrap; text-overflow: ellipsis; @@ -1922,13 +2083,13 @@ a:hover .icon.out-link { background-position: -500px -14px;} right: 0; top: 0; height: 59px; - z-index: 3; + z-index: 50; } .footer { position: absolute; bottom: 0; - padding: 5px 30px 5px 30px; + padding: 5px 20px 5px 20px; border-top: 1px solid #ccc; background-color: #fafafa; width: 100%; @@ -1950,7 +2111,7 @@ a:hover .icon.out-link { background-position: -500px -14px;} float: left; height: 100%; overflow: hidden; - z-index: 2; + z-index: 10; background: #f6f6f6; } @@ -1980,6 +2141,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; } @@ -2045,9 +2248,6 @@ a:hover .icon.out-link { background-position: -500px -14px;} text-overflow: ellipsis; overflow: hidden; border-left: 1px solid rgba(0, 0, 0, .1); - -moz-transition: all 100ms; - -o-transition: all 100ms; - transition: all 100ms; } .feature-list-item .label .icon { @@ -2127,9 +2327,6 @@ a:hover .icon.out-link { background-position: -500px -14px;} text-overflow: ellipsis; overflow: hidden; border-left: 1px solid rgba(0, 0, 0, .1); - -moz-transition: all 100ms; - -o-transition: all 100ms; - transition: all 100ms; border-radius: 0 3px 3px 0; } @@ -2223,7 +2420,7 @@ a:hover .icon.out-link { background-position: -500px -14px;} .inspector-preset .preset-form { padding: 10px; - margin: 0 10px 20px 10px; + margin: 0 10px 10px 10px; border-radius: 8px; } @@ -2280,6 +2477,10 @@ a:hover .icon.out-link { background-position: -500px -14px;} text-align: right; } +.form-label-button-wrap .tag-reference-button { + border-radius: 0 3px 0 0; +} + .form-label-button-wrap .icon { opacity: .5; } @@ -2357,7 +2558,7 @@ a:hover .icon.out-link { background-position: -500px -14px;} .inspector-hover .entity-editor-pane .header button, .inspector-hover .spin-control, .inspector-hover .hide-toggle:before, -.inspector-hover .more-buttons, +.inspector-hover .more-fields, .inspector-hover .form-label-button-wrap, .inspector-hover .tag-reference-button, .inspector-hover .view-on-osm { @@ -2366,7 +2567,7 @@ a:hover .icon.out-link { background-position: -500px -14px;} /* Styles for raw tag inspector on hover */ .inspector-hover .tag-row .key-wrap, -.inspector-hover .tag-row .input-wrap-position { +.inspector-hover .tag-row .form-field.input-wrap-position { width: 50%; } @@ -2382,9 +2583,9 @@ a:hover .icon.out-link { background-position: -500px -14px;} border-bottom-left-radius: 4px; } -.inspector-hover .inspector-body .more-buttons { +.inspector-hover .more-fields { max-height: 0; - padding-bottom: 0; + margin-bottom: -10px; } /* Unstyle button fields */ @@ -2419,142 +2620,17 @@ a:hover .icon.out-link { background-position: -500px -14px;} line-height: 0; display: block; overflow: hidden; - -webkit-transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms; - -moz-transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms; - -o-transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms; - transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms; } -/* first phase hover-to-active animations */ +/* adding additional preset fields */ -textarea, -.form-label, -.preset-input-wrap, -.preset-input-wrap .label { - -webkit-transition: all 200ms; - -moz-transition: all 200ms; - -o-transition: all 200ms; - transition: all 200ms; +.more-fields { + padding: 0 20px 20px 20px; + font-weight: bold; } -/* second phase hover-to-active animations */ - -input, -.checkselect label:last-of-type { - -webkit-transition: opacity 200ms 200ms, width 200ms 200ms, margin-right 200ms 200ms; - -moz-transition: opacity 200ms 200ms, width 200ms 200ms, margin-right 200ms 200ms; - -o-transition: opacity 200ms 200ms, width 200ms 200ms, margin-right 200ms 200ms; - transition: opacity 200ms 200ms, width 200ms 200ms, margin-right 200ms 200ms; -} - -.entity-editor-pane button.minor, -.combobox-caret, -.entity-editor-pane .header button, -.toggle-list label span, -.spin-control, -.more-buttons, -.view-on-osm, -.hide-toggle:before, -.entity-editor-pane .toggle-list label::before, -.entity-editor-pane .toggle-list label.remove .icon { - -webkit-transition: opacity 200ms 200ms; - -moz-transition: opacity 200ms 200ms; - -o-transition: opacity 200ms 200ms; - transition: opacity 200ms 200ms; -} - -.entity-editor-pane a.hide-toggle { - -webkit-transition: padding-left 200ms 200ms, color 200ms 200ms; - -moz-transition: padding-left 200ms 200ms, color 200ms 200ms; - -o-transition: padding-left 200ms 200ms, color 200ms 200ms; - transition: padding-left 200ms 200ms, color 200ms 200ms; -} - -.entity-editor-pane .toggle-list label:not(.active) { - -webkit-transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms; - -moz-transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms; - -o-transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms; - transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms; -} - -.entity-editor-pane .toggle-list label { - -webkit-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms; - -moz-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms; - -o-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms; - transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms; -} - -/* adding additional preset fields */ - -.inspector-body .more-buttons { - max-height: 100px; - padding-top: 0; - -webkit-transition: padding 200ms 200ms, max-height 200ms 200ms; - -moz-transition: padding 200ms 200ms, max-height 200ms 200ms; - -o-transition: padding 200ms 200ms, max-height 200ms 200ms; - transition: padding 200ms 200ms, max-height 200ms 200ms; -} - -button.preset-add-field { - background: #f6f6f6; - width: 25%; - height: 40px; - -webkit-transition: width 200ms; - -moz-transition: width 200ms; - -o-transition: width 200ms; - transition: width 200ms; -} - -button.preset-add-field:hover { - background: #ececec; -} - -/* set width based on # of buttons */ - -button.preset-add-field:only-child { - width: 100%; -} - -button.preset-add-field:nth-last-child(2), -button.preset-add-field:nth-last-child(2) ~ button.preset-add-field { - width: 50%; -} - -button.preset-add-field:nth-last-child(3), -button.preset-add-field:nth-last-child(3) ~ button.preset-add-field { - width: 33.3333%; -} - -button.preset-add-field:nth-last-child(4), -button.preset-add-field:nth-last-child(4) ~ button.preset-add-field { - width: 25%; -} - -button.preset-add-field:nth-last-child(5), -button.preset-add-field:nth-last-child(5) ~ button.preset-add-field { - width: 20%; -} - -button.preset-add-field:nth-last-child(6), -button.preset-add-field:nth-last-child(6) ~ button.preset-add-field { - width: 16.6666%; -} - -button.preset-add-field:nth-last-child(7), -button.preset-add-field:nth-last-child(7) ~ button.preset-add-field { - width: 14.2857%; -} - -button.preset-add-field:nth-last-child(8), -button.preset-add-field:nth-last-child(8) ~ button.preset-add-field { - width: 12.5%; -} - -.preset-fav button.fav { - height: 30px; - margin: 5px; - padding: 0 10px; -} +.more-fields label { padding: 5px 10px 5px 0; } +.more-fields input { width: 50%;} /* preset form access */ @@ -2761,37 +2837,28 @@ input[type=number] { /* 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%; - border: 0; - border-radius: 0; +.addr-row:first-of-type input { + border-top: 0; } -.form-field .addr-street { - width: 66.6666%; - border-top: 0; - border-right: 0; - border-bottom: 0; +.addr-row input:first-of-type { + border-left: 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; } @@ -2897,10 +2964,6 @@ div.combobox { width: 40%; float: left; height: 30px; - -webkit-transition: width 200ms; - -moz-transition: width 200ms; - -o-transition: width 200ms; - transition: width 200ms; } .tag-row input.key { @@ -3116,12 +3179,18 @@ img.wiki-image { border-radius: 4px 0 0 0; } -/* Background Settings */ +/* Background / Map Data Settings */ + + +.map-data-control button { + border-radius: 0; +} .background-control button { border-radius: 4px 0 0 0; } +.map-data-control, .background-control { position: relative; } @@ -3134,7 +3203,8 @@ img.wiki-image { border: 0; } -.background-control .hide-toggle { +.map-data-control .hide-toggle, +.background-control .hide-toggle { padding-bottom: 10px; } @@ -3279,6 +3349,8 @@ img.wiki-image { z-index: 9999; } +.map-data-control li:hover .select-box, +.map-data-control li.selected .select-box, .background-control li:hover .select-box, .background-control li.selected .select-box { border: 2px solid #7092ff; @@ -3286,6 +3358,8 @@ img.wiki-image { opacity: .5; } +.map-data-control li.selected:hover .select-box, +.map-data-control li.selected .select-box, .background-control li.selected:hover .select-box, .background-control li.selected .select-box { opacity: 1; @@ -3298,6 +3372,7 @@ img.wiki-image { height:18px; } +.map-data-control .layer-list button, .background-control .layer-list button { float: right; height: 100%; @@ -3306,14 +3381,23 @@ img.wiki-image { border-radius: 0; } +.map-data-control .layer-list button .icon, .background-control .layer-list button .icon { opacity: 0.5; } +.map-data-control .layer-list button:first-of-type, .background-control .layer-list button:first-of-type { border-radius: 0 3px 3px 0; } +.map-data-control .map-overlay, +.background-control .map-overlay, +.help-control .map-overlay { + z-index: -1; +} + + /* Geolocator */ .geolocate-control { @@ -3333,9 +3417,6 @@ img.wiki-image { overflow: auto; } -.background-control .map-overlay { - z-index: -1; -} /* Help */ .help-control button { @@ -3451,43 +3532,109 @@ img.wiki-image { bottom: 0; } -/* About Section +/* Map-In-Map ------------------------------------------------------- */ -.about-block { +.map-in-map { position: absolute; - right:0; - bottom:0; - border-radius: 0; - opacity: .625; - -webkit-transition: opacity 200ms; - -moz-transition: opacity 200ms; - transition: opacity 200ms; + overflow: hidden; + top: 60px; + width: 200px; + height: 150px; + z-index: 5; + background: #000; + border: #aaa 1px solid; + box-shadow: 0 0 2em black; } -.about-block:hover { - opacity: 1; +.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; } -#about { - text-align: right; - margin-right: 10px; +.map-in-map-svg { + position: relative; + overflow: hidden; + height: 100%; + width: 100%; } -.source-switch a { - padding: 2px 4px 4px 4px; +.map-in-map-bbox { + fill: none; + stroke: rgba(255, 255, 0, 0.75); + stroke-width: 1; + shape-rendering: crispEdges; +} + +.map-in-map-bbox.thick { + stroke-width: 5; +} + +/* Info Box +------------------------------------------------------- */ +.infobox { + position: absolute; + z-index: 1; + right: 0; + bottom: 30px; + width: 240px; + border-radius: 4px 0 0 0; + border-bottom: 1px solid black; +} + +.infobox .selection-heading { + display: block; + border-radius: 4px 0 0 0; + padding: 5px 10px; + height: 30px; +} + +.infobox ul { + padding: 5px 10px; +} + +.infobox .button { + position: absolute; + background: #7092ff; border-radius: 2px; + padding: 0 4px; + color: white; + top: 40px; + right: 10px; } -.source-switch a.live { - background: #d32232; - color:#fff; + +/* About Section +------------------------------------------------------- */ + +#about { + width: 100%; + position: absolute; + right:0; + bottom:0; + border-radius: 0; } -/* Attribution overlay */ +#attrib { + width: 100%; + height: 20px; + margin-bottom: 5px; + float: left; + clear: both; + pointer-events: none; +} + +#attrib * { pointer-events: all; } + .base-layer-attribution, .overlay-layer-attribution { position: absolute; - bottom: 35px; color: #888; font-size: 10px; } @@ -3509,45 +3656,111 @@ img.wiki-image { vertical-align:top; } -.user-list a:not(:last-child):after { - content: ', '; +#footer { + width: 100%; + float: left; + clear: both; } -/* API Status */ - -.api-status { +#scale-block { + display: table-cell; + vertical-align: bottom; + width: 250px; + height: 30px; float: left; + clear: left; } -.api-status.offline, -.api-status.readonly { - background: red; - padding: 5px 10px; +#info-block { + float: right; + clear: right; } -/* Account Information */ +#scale { + height: 30px; + width: 100%; +} -.account { - float: left; - padding: 5px 10px; +#scale text { + font: 12px sans-serif; + stroke: none; + fill: #ccc; + text-anchor: start; } -.account .logout { - margin-left:10px; - border-left: 1px solid white; - padding-left: 10px; +#scale path { + fill: none; + stroke: #ccc; + stroke-width: 1; + shape-rendering: crispEdges; +} + +#about-list { + text-align: right; + margin-right: 10px; + clear: right; +} + +#about-list li { + float: right; + border-left: 1px solid rgba(255,255,255,.5); + padding: 5px 0 5px 5px; + margin-left: 5px; +} + +#about-list li:last-child { + border-left: 0; + margin-left: 0; + padding-left: 0; +} + +.source-switch a { + padding: 2px 4px 4px 4px; + border-radius: 2px; +} +.source-switch a.live { + background: #d32232; + color:#fff; +} + +.feature-warning a { + background: #1e90ff; + padding: 2px 4px 4px 4px; + border-radius: 2px; + color: #eee; +} + +.user-list a:not(:last-child):after { + content: ', '; +} + +.api-status { + float: right; + clear: both; + text-align: right; + width: 100%; + padding: 0px 10px; +} + +.api-status.offline, +.api-status.readonly, +.api-status.error { + background: red; } /* Modals ------------------------------------------------------- */ .modal { + top: 40px; display: inline-block; position:absolute; + border-radius: 3px; + overflow: hidden; left: 0; right: 0; margin: auto; - z-index: 3; + z-index: 50; } .modal .loader { @@ -3559,7 +3772,7 @@ img.wiki-image { } .shaded { - z-index: 2; + z-index: 49; position: absolute; top: 0; bottom: 0; @@ -3580,8 +3793,19 @@ img.wiki-image { border-bottom: 1px solid #CCC; } -.modal-section:last-child { - border-bottom: 0; +.modal-section.header h3 { + padding: 0; +} + +.modal-section.buttons { + text-align: center; +} + +.modal-section.buttons .action { + display: inline-block; + margin: 0 10px; + text-align: center; + vertical-align: middle; } .loading-modal { @@ -3610,7 +3834,8 @@ img.wiki-image { display: block; content: ''; height: 100px; - width: 100px; + width: 100%; + max-width: 100px; margin: auto; margin-bottom: 10px; background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 -220px; @@ -3620,6 +3845,10 @@ img.wiki-image { border-right: 1px solid #CCC; } +.modal-section:last-child { + border-bottom: 0; +} + /* Restore Modal ------------------------------------------------------- */ @@ -3689,14 +3918,6 @@ img.wiki-image { margin-bottom: 0; } -.mode-save button.action { - float: none; - margin: auto; - display: block; - color: white; - font-size: 14px; -} - .mode-save .user-info img { float: left; } @@ -3759,6 +3980,56 @@ img.wiki-image { .changeset-list li:first-child { border-top: 0;} +/* Conflict resolution +------------------------------------------------------- */ + +.conflicts-help { + padding: 20px; + background-color: #ffffbb; + border-bottom: 1px solid #ccc; +} + +.conflicts-buttons { + padding: 20px; +} + +.mode-save button.conflicts-button { + float: left; +} + +.conflict-container { + border-bottom: 1px solid #ccc; +} + +.conflict-description { + padding: 5px 20px; + display: block; +} + +.conflicts-done { + padding: 20px 20px 0 20px; +} + +.conflict-detail-container { + padding: 10px 20px; +} + +.conflict-count { + padding: 10px 20px; +} + +.conflict-choices { + margin-top: 10px; +} + +.conflict-nav-buttons { + padding: 10px 0 20px 0; +} + +.conflict-nav-button { + height: 30px; +} + /* Notices ------------------------------------------------------- */ @@ -3834,6 +4105,7 @@ img.wiki-image { .tooltip-inner { display: inline-block; + border-radius: 3px; max-width: 200px; min-width: 80px; padding: 10px; @@ -3866,6 +4138,7 @@ img.wiki-image { } .tail div { + border-radius: 3px; padding: 10px; background: white; position: absolute; @@ -3933,31 +4206,11 @@ img.wiki-image { background: #F6F6F6; padding: 10px; margin: 10px -10px -10px; + border-radius: 0 0 3px 3px; } .tooltip-inner .keyhint { - font-size: 10px; - padding: 0 7px; font-weight: bold; - display: inline-block; - border-radius: 2px; - border: 1px solid #CCC; - position: relative; - z-index: 1; - text-align: left; -} - -.tooltip-inner .keyhint::after { - content: ""; - position: absolute; - border-radius: 2px; - height: 10px; - width: 100%; - z-index: 0; - bottom: -4px; - left: -1px; - border: 1px solid #CCC; - border-top: 0; } /* Exceptions for tooltip layouts */ @@ -3988,6 +4241,7 @@ img.wiki-image { } .map-overlay .tooltip-inner, +.map-overlay .keyhint-wrap, .entity-editor-pane .tooltip-inner, .warning-section .tooltip-inner { background: #000; @@ -4058,6 +4312,19 @@ img.wiki-image { #bar .save .label { display: block;} } +@media screen and (max-width: 1200px) { + .user-list { display: none !important; } +} + +@media screen and (max-width: 1000px) { + #userLink { display: none !important; } +} + +@media screen and (max-width: 900px) { + #scale-block { display: none !important; } +} + + /* Scrollbars ----------------------------------------------------- */ @@ -4304,6 +4571,8 @@ img.wiki-image { .feature-chemist{background-position:-54px -528px;} .feature-mobilephone{background-position:-108px -528px;} .feature-scooter{background-position:-162px -528px;} +.feature-gift{background-position:-216px -528px;} +.feature-ice-cream{background-position:-0px -552px;} .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;} @@ -4345,7 +4614,7 @@ img.wiki-image { .preset-icon-line.feature-pipeline{background-position:-2300px -25px;} .preset-icon-relation.feature-relation{background-position:-20px -25px;} .preset-icon-relation.feature-restriction{background-position:-80px -25px;} -.preset-icon-relation.feature-multipolygon{background-position:-140px -25px;} +.preset-icon-relation.feature-multipolygon{background-position:-141px -25px;} .preset-icon-relation.feature-boundary{background-position:-200px -25px;} .preset-icon-relation.feature-route{background-position:-260px -25px;} .preset-icon-relation.feature-route-road{background-position:-320px -25px;}