X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/7a98913d0cf74887180aca3520c628a52b0e7071..b2c42d5521313dcac9622b07b17575383c030595:/vendor/assets/iD/iD.css.erb diff --git a/vendor/assets/iD/iD.css.erb b/vendor/assets/iD/iD.css.erb index 323b2bae4..322dad746 100644 --- a/vendor/assets/iD/iD.css.erb +++ b/vendor/assets/iD/iD.css.erb @@ -180,6 +180,9 @@ img.tile { img.tile-loaded { opacity: 1; } +img.tile-removing { + opacity: 0; +} /* base styles */ path { @@ -221,7 +224,7 @@ g.point .shadow { stroke-opacity: 0; } -.behavior-hover g.point.hover:not(.selected) .shadow { +g.point.hover:not(.selected) .shadow { stroke-opacity: 0.5; } @@ -236,7 +239,7 @@ g.point.active, g.point.active * { /* vertices and midpoints */ g.vertex .fill { - fill: none; + fill: #000; } g.vertex .stroke { @@ -249,10 +252,6 @@ g.vertex.shared .stroke { fill: #aaa; } -g.vertex.tagged .fill { - fill: #000; -} - g.midpoint .fill { fill: #ddd; stroke: black; @@ -266,8 +265,21 @@ g.midpoint .shadow { fill-opacity: 0; } -.behavior-hover g.vertex.hover:not(.selected) .shadow, -.behavior-hover g.midpoint.hover:not(.selected) .shadow { +g.vertex.vertex-hover { + display: none; +} + +.mode-draw-area g.vertex.vertex-hover, +.mode-draw-line g.vertex.vertex-hover, +.mode-add-area g.vertex.vertex-hover, +.mode-add-line g.vertex.vertex-hover, +.mode-add-point g.vertex.vertex-hover, +.mode-drag-node g.vertex.vertex-hover { + display: block; +} + +g.vertex.hover:not(.selected) .shadow, +g.midpoint.hover:not(.selected) .shadow { fill-opacity: 0.3; } @@ -279,8 +291,7 @@ g.vertex.selected .shadow { .mode-draw-line g.midpoint, .mode-add-area g.midpoint, .mode-add-line g.midpoint, -.mode-add-point g.midpoint, -.mode-drag-node g.midpoint { +.mode-add-point g.midpoint { display: none; } @@ -302,7 +313,7 @@ path.shadow { stroke-opacity: 0; } -.behavior-hover path.shadow.hover:not(.selected) { +path.shadow.hover:not(.selected) { stroke-opacity: 0.3; } @@ -310,18 +321,11 @@ path.shadow.selected { stroke-opacity: 0.7; } -path.area.stroke, -path.line.member-type-multipolygon.stroke { - stroke-width:2; -} -path.area.stroke.selected, -path.line.member-type-multipolygon.stroke.selected { - stroke-width:4 !important; -} - path.area.stroke { - stroke:#fff; + stroke: white; + stroke-width: 1; } + path.area.fill { fill:#fff; fill-opacity:0.3; @@ -335,7 +339,6 @@ path.line.stroke { path.stroke.tag-natural { stroke: #b6e199; - stroke-width:1; } path.fill.tag-natural { fill: #b6e199; @@ -348,9 +351,24 @@ path.fill.tag-natural-water { fill: #77d3de; } +path.stroke.tag-amenity-school { + stroke: #ffff94; +} +path.fill.tag-amenity-school { + fill: #ffff94; + fill-opacity: 0.2; +} + +path.stroke.tag-amenity-university { + stroke: #ffff94; +} +path.fill.tag-amenity-university { + fill: #ffff94; + fill-opacity: 0.1; +} + path.stroke.tag-building { stroke: #e06e5f; - stroke-width: 1; } path.fill.tag-building { fill: #e06e5f; @@ -363,9 +381,9 @@ path.stroke.tag-landuse, path.stroke.tag-natural-wood, path.stroke.tag-natural-tree, path.stroke.tag-natural-grassland, +path.stroke.tag-leisure-pitch, path.stroke.tag-leisure-park { stroke: #8cd05f; - stroke-width: 1; } path.stroke.tag-landuse-residential { @@ -413,6 +431,7 @@ 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; @@ -533,7 +552,6 @@ path.fill.tag-landuse-industrial { path.stroke.tag-amenity-parking { stroke: #aaa; - stroke-width: 1; } path.fill.tag-amenity-parking { fill: #aaa; @@ -793,24 +811,24 @@ path.fill.tag-aeroway-apron { /* bridges */ -path.casing.tag-bridge-yes { +path.casing.tag-bridge { stroke-width: 14; stroke-opacity: 0.5; stroke: #000; } -path.casing.tag-highway-living_street.tag-bridge-yes, -path.casing.tag-highway-path.tag-bridge-yes { +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-yes, -path.casing.tag-highway-track.tag-bridge-yes, -path.casing.tag-highway-steps.tag-bridge-yes, -path.casing.tag-highway-footway.tag-bridge-yes, -path.casing.tag-highway-cycleway.tag-bridge-yes, -path.casing.tag-highway-bridleway.tag-bridge-yes { +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; } @@ -818,25 +836,25 @@ path.shadow.tag-highway-residential.tag-bridge { stroke-width:22; } -path.shadow.tag-highway-living_street.tag-bridge-yes, -path.shadow.tag-highway-path.tag-bridge-yes, +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-yes, -path.shadow.tag-highway-track.tag-bridge-yes, -path.shadow.tag-highway-steps.tag-bridge-yes, -path.shadow.tag-highway-footway.tag-bridge-yes, -path.shadow.tag-highway-cycleway.tag-bridge-yes, -path.shadow.tag-highway-bridleway.tag-bridge-yes { +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-yes { +path.stroke.tag-highway.tag-tunnel { stroke-opacity: 0.3; } -path.casing.tag-highway.tag-tunnel-yes { +path.casing.tag-highway.tag-tunnel { stroke-opacity: 0.5; } @@ -973,11 +991,8 @@ marker#oneway-marker path { opacity: .5; } -text.tag-oneway { - fill:#91CFFF; - stroke:#2C6B9B; - stroke-width:1; - pointer-events:none; +path.oneway { + stroke-width: 6px; } /* @@ -1019,13 +1034,17 @@ text.pointlabel { stroke-miterlimit: 1; } +text.proximate { + opacity: 0; +} + text.point { font-size: 10px; } /* Cursors */ -#map:hover { +#map { cursor: auto; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-grab.png") %>) 9 9, auto; /* FF */ cursor: -webkit-image-set( @@ -1034,15 +1053,6 @@ text.point { ) 9 9, auto; } -#map:active { - cursor: pointer; /* Opera */ - cursor: url(<%= asset_path("iD/img/cursor-grabbing.png") %>) 9 9, auto; /* FF */ - cursor: -webkit-image-set( - url(<%= asset_path("iD/img/cursor-grabbing.png") %>) 1x, - url(<%= asset_path("iD/img/cursor-grabbing2x.png") %>) 2x - ) 9 9, auto; -} - .mode-browse .point, .mode-select .point { cursor: pointer; /* Opera */ @@ -1128,11 +1138,11 @@ text.point { ), pointer; } -.mode-draw-line #map:hover, -.mode-draw-area #map:hover, -.mode-add-line #map:hover, -.mode-add-area #map:hover, -.mode-drag-node #map:hover { +.mode-draw-line #map, +.mode-draw-area #map, +.mode-add-line #map, +.mode-add-area #map, +.mode-drag-node #map { cursor: crosshair; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */ cursor: -webkit-image-set( @@ -1141,11 +1151,11 @@ text.point { ) 9 9, crosshair; } -.mode-draw-line .behavior-hover .way, -.mode-draw-area .behavior-hover .way, -.mode-add-line .behavior-hover .way, -.mode-add-area .behavior-hover .way, -.mode-drag-node .behavior-hover .way { +.mode-draw-line .way.hover, +.mode-draw-area .way.hover, +.mode-add-line .way.hover, +.mode-add-area .way.hover, +.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( @@ -1154,11 +1164,11 @@ text.point { ) 9 9, crosshair; } -.mode-draw-line .behavior-hover .vertex, -.mode-draw-area .behavior-hover .vertex, -.mode-add-line .behavior-hover .vertex, -.mode-add-area .behavior-hover .vertex, -.mode-drag-node .behavior-hover .vertex { +.mode-draw-line .vertex.hover, +.mode-draw-area .vertex.hover, +.mode-add-line .vertex.hover, +.mode-add-area .vertex.hover, +.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( @@ -1167,8 +1177,8 @@ text.point { ) 9 9, crosshair; } -.mode-add-point #map:hover, -.lasso #map:hover, +.mode-add-point #map, +.lasso #map, .lasso .way, .lasso .vertex { cursor: crosshair; /* Opera */ @@ -1185,9 +1195,9 @@ text.point { /* GPX Paths */ path.gpx { - stroke:#6AFF25; - stroke-width:2; - fill:transparent; + stroke: #6AFF25; + stroke-width: 2; + fill: none; pointer-events: none; } @@ -1217,14 +1227,22 @@ path.gpx { /* Basics ------------------------------------------------------- */ +/* + Opera misbehaves when the window is resized vertically unless 100% width + height are + applied to both html and body. https://gist.github.com/jfirebaugh/bd225bcfdd3a633850c4 +*/ +html, body { + width: 100%; + height: 100%; +} + body { - font:normal 12px/1.6666 'Helvetica Neue', Arial, sans-serif; + font:normal 12px/1.6667 'Helvetica Neue', Arial, sans-serif; margin:0; padding:0; min-width: 768px; color:#333; overflow: hidden; - -webkit-font-smoothing: subpixel-antialiased; } .unsupported { @@ -1241,6 +1259,17 @@ body { min-width: 768px; } +#content { + position: relative; + overflow: hidden; + height: 100%; +} + +.spacer { + height: 40px; + margin-right: 10px; +} + .limiter { position: relative; max-width: 1200px; @@ -1248,18 +1277,16 @@ body { .spinner { opacity: .5; - z-index: 2; - position: relative; } .spinner img { - position: fixed; + position: absolute; height: 40px; width: 40px; right: 10px; top: 10px; - margin: auto; border-radius: 4px; + margin-right: 10px; background: black; } @@ -1367,10 +1394,12 @@ input[type=email] { height:30px; width: 100%; border-radius:4px; - -webkit-transition: all 100ms; - -moz-transition: all 100ms; - -o-transition: all 100ms; - transition: all 100ms; + text-overflow: ellipsis; + overflow: hidden; + -webkit-transition: all 200ms; + -moz-transition: all 200ms; + -o-transition: all 200ms; + transition: all 200ms; } textarea:focus, @@ -1378,19 +1407,20 @@ input:focus { background-color: #F1F1F1; } -input.major { - width: 100%; - padding:5px 10px; - font-size: 18px; - font-weight: bold; - height:60px; +input[type="checkbox"], +input[type="radio"] { + float: left; + width: 14px; + height: 14px; + margin-right: 5px; + margin-top: 3px; } -/* remove bottom border radius when combox is open */ -.combobox + div textarea:focus, -.combobox + div input:focus { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; +/* remove bottom border radius when combobox is open */ +.combobox + * textarea:focus, +.combobox + * input:focus { + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; } /* tables */ @@ -1433,37 +1463,62 @@ table.tags, table.tags td, table.tags th { ul li { list-style: none;} -ul.toggle-list { +.toggle-list { border-radius: 4px; border: 1px solid #CCC; - margin-bottom: 10px; } -ul.toggle-list li a { +.toggle-list > label { position: relative; - padding: 5px 10px 5px 25px; + padding: 5px 10px; display:block; - border-top: 1px solid #ccc; + height: 30px; + border-bottom: 1px solid #ccc; + background-color: white; + color: #7092FF; + cursor: pointer; + -moz-transition: all 100ms; + -o-transition: all 100ms; + transition: all 100ms; } -ul.toggle-list li:first-child a { - border-top: 0; +.toggle-list > label:hover { + background-color: #ececec; +} + +.toggle-list > label:first-child { border-radius: 3px 3px 0 0; } -ul.toggle-list li:last-child a { +.toggle-list > label:last-child { border-radius: 0 0 3px 3px; + border-bottom-width: 0; } -ul.toggle-list li:only-child a { +.toggle-list > label:only-child { border-radius: 3px; } -ul.toggle-list li a:hover { background-color: #ececec;} +.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; +} -ul.toggle-list li a.selected { background-color: #e8ebff;} +.toggle-list > label.active { + background: #E8EBFF; +} -ul.link-list li { +.link-list li { float: right; border-left: 1px solid rgba(255,255,255,.5); padding: 5px 0 5px 5px; @@ -1476,28 +1531,6 @@ ul.link-list li:last-child { padding-left: 0; } -.toggle-list a::before { - content: ""; - display: inline-block; - border-radius: 50%; - height: 12px; - width: 12px; - margin-right: 10px; - border: 1px solid #CCC; - position: absolute; - left: 5px; - top: 8px; -} - -.toggle-list a:hover::before { - box-shadow: inset 0 0 0 2px white; -} - -.toggle-list a.selected::before { - background: #7092ff; - box-shadow: inset 0 0 0 2px white; -} - /* Utility Classes ------------------------------------------------------- */ .fillL { @@ -1506,12 +1539,12 @@ ul.link-list li:last-child { } .fillL2 { - background: #f7f7f7 url(<%= asset_path("iD/img/background-pattern-1.png") %>) repeat; + background: #f6f6f6; color: #333; } .fillL3 { - background: #f1f1f1; + background: #ececec; color: #333; } @@ -1553,7 +1586,8 @@ a.hide { .pane { position:absolute; width:50%; - height:100%; + top: 0; + bottom: 30px; } .pane:first-child { @@ -1568,10 +1602,10 @@ a.hide { button { text-align: center; - font-weight:bold; line-height:20px; border:0; background: white; + font-weight: bold; color:#333; font-size:12px; display: inline-block; @@ -1596,7 +1630,7 @@ button.disabled { cursor: auto; } -button.active:not([disabled]):not(.disabled) { +button.active { background: #7092ff; } @@ -1605,9 +1639,17 @@ button.minor { top: 0; right: 0; height: 100%; - width: 20px; - opacity: .5; + width: 10%; border-radius: 0; + background-color: #fafafa; +} + +button.minor .icon { + opacity: .5; +} + +button.minor:hover { + background-color: #f1f1f1; } .button-wrap { @@ -1616,8 +1658,13 @@ button.minor { margin: 0; } -.button-wrap button:only-child { width: 100%;} -.button-wrap:last-of-type { padding-right: 0;} +.button-wrap button:only-child { + width: 100%; +} + +.button-wrap:last-of-type { + padding-right: 0; +} .joined button { border-radius:0; @@ -1637,6 +1684,7 @@ button.action { background: #7092ff; } +button.action:focus, button.action:hover { background: #597BE7; } @@ -1702,9 +1750,12 @@ button.save.has-count .count::before { } /* Definitions for every icon */ -.icon.browse { background-position: 0 0;} +.icon.alert { background-position: 0 0;} +.icon.point, .icon.add-point { background-position: -20px 0;} +.icon.line, .icon.add-line { background-position: -40px 0;} +.icon.area, .icon.add-area { background-position: -60px 0;} .icon.undo { background-position: -80px 0;} .icon.redo { background-position: -100px 0;} @@ -1714,8 +1765,6 @@ button.save.has-count .count::before { .icon.delete { background-position: -180px 0;} .icon.remove { background-position: -200px 0;} .icon.inspect { background-position: -220px 0;} -.icon.zoom-in { background-position: -240px 0;} -.icon.zoom-out { background-position: -260px 0;} .icon.plus { background-position: -240px 0;} .icon.search { background-position: -280px 0;} .icon.geocode { background-position: -280px 0;} @@ -1724,20 +1773,30 @@ button.save.has-count .count::before { .icon.nearby { background-position: -340px 0;} .icon.geolocate { background-position: -360px 0;} .icon.warning { background-position: -380px 0;} +.icon.bug { background-position: -400px 0;} .icon.back { background-position: -420px 0;} .icon.forward { background-position: -440px 0;} .icon.help { background-position: -460px 0;} +.icon.relation { background-position: -520px 0;} +.icon.relation.route { background-position: -540px 0;} +.icon.relation.multipolygon { background-position: -560px 0;} .icon.inspect.light { background-position: -220px -20px;} +.icon.plus.light { background-position: -240px -20px;} +.icon.zoom-in { background-position: -240px -20px;} +.icon.zoom-out { background-position: -260px -20px;} .icon.geocode.light { background-position: -280px -20px;} -.icon.help.light { background-position: -460px -20px;} +.icon.layers.light { background-position: -300px -20px;} .icon.avatar.light { background-position: -320px -20px;} .icon.nearby.light { background-position: -340px -20px;} +.icon.geolocate.light { background-position: -360px -20px;} +.icon.bug.light { background-position: -400px -20px;} +.icon.help.light { background-position: -460px -20px;} .icon.back.blue { background-position: -420px -20px;} .icon.forward.blue { background-position: -440px -20px;} -button[disabled] .icon.browse { background-position: 0 -40px;} +button[disabled] .icon.alert { background-position: 0 -40px;} button[disabled] .icon.add-point { background-position: -20px -40px;} button[disabled] .icon.add-line { background-position: -40px -40px;} button[disabled] .icon.add-area { background-position: -60px -40px;} @@ -1755,35 +1814,13 @@ 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-operation-delete { background-position: 0 -140px;} -.icon-operation-circularize { background-position: -20px -140px;} -.icon-operation-straighten { background-position: -40px -140px;} -.icon-operation-split { background-position: -60px -140px;} -.icon-operation-disconnect { background-position: -80px -140px;} -.icon-operation-reverse { background-position: -100px -140px;} -.icon-operation-move { background-position: -120px -140px;} -.icon-operation-merge { background-position: -140px -140px;} -.icon-operation-orthogonalize { background-position: -160px -140px;} -.icon-operation-rotate { background-position: -180px -140px;} -.icon-operation-simplify { background-position: -200px -140px;} - -.icon-operation-disabled-delete { background-position: 0 -160px;} -.icon-operation-disabled-circularize { background-position: -20px -160px;} -.icon-operation-disabled-straighten { background-position: -40px -160px;} -.icon-operation-disabled-split { background-position: -60px -160px;} -.icon-operation-disabled-disconnect { background-position: -80px -160px;} -.icon-operation-disabled-reverse { background-position: -100px -160px;} -.icon-operation-disabled-move { background-position: -120px -160px;} -.icon-operation-disabled-merge { background-position: -140px -160px;} -.icon-operation-disabled-orthogonalize { background-position: -160px -160px;} -.icon-operation-disabled-rotate { background-position: -180px -160px;} -.icon-operation-disabled-simplify { background-position: -200px -160px;} - /* Out link is special */ .icon.out-link { height: 14px; width: 14px; background-position: -500px 0;} a:hover .icon.out-link { background-position: -500px -14px;} +.icon.plus-dark { background-position: -240px -40px;} + /* Universal preset icons */ .icon.source { background-position: 0 -200px;} @@ -1799,12 +1836,14 @@ a:hover .icon.out-link { background-position: -500px -14px;} ------------------------------------------------------- */ #bar { - position:absolute; - padding: 10px; + position: fixed; + padding: 10px 0; left:0; top:0; right:0; height:60px; + z-index: 1; + min-width: 768px; } /* Header for modals / panes @@ -1812,45 +1851,90 @@ a:hover .icon.out-link { background-position: -500px -14px;} .header { border-bottom: 1px solid #ccc; - z-index: 2; height: 60px; position: relative; } .header h3 { - margin-right: 40px; + text-align: center; margin-bottom: 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; + padding: 20px; } -.modal > button, -.header button { - height: 100%; +.header button, +.modal > button { border-radius: 0; - border-left: 1px solid #CCC; width: 40px; text-align: center; overflow: hidden; +} + +.header button { + position: relative; + height: 100%; +} + +.preset-list-pane .header button { position: absolute; right: 0; top: 0; } .modal > button { + position: absolute; + right: 0; + top: 0; height: 59px; z-index: 3; } +.footer { + position: absolute; + bottom: 0; + padding: 5px 30px 5px 30px; + border-top: 1px solid #ccc; + background-color: #fafafa; + width: 100%; +} + +.sidebar-component .body { + width: 100%; + overflow: auto; + top: 60px; + bottom: 0; + position: absolute; +} + /* Inspector ------------------------------------------------------- */ -.inspector-wrap { - position: absolute; +#sidebar { + position: relative; + float: left; height: 100%; - right: 0; overflow: hidden; + z-index: 2; + background: #f6f6f6; +} + +.sidebar-component { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} + +.inspector-wrap { + width: 100%; + height: 100%; +} + +.inspector-hidden { + display: none; } .inspector-body { @@ -1859,232 +1943,218 @@ a:hover .icon.out-link { background-position: -500px -14px;} position: absolute; right: 0; left: 0; - bottom: 30px; - top: 60px; + bottom: 0; } -.pane:first-child .inspector-body { +.feature-list-pane .inspector-body { top: 120px; } -.inspector-inner { - padding: 20px; - position: relative; +.preset-list-pane .inspector-body { + top: 120px; } -.inspector-wrap .header button.preset-reset { - border-right: 1px solid #CCC; - position: relative; +.entity-editor-pane .inspector-body { + top: 60px; } -.inspector-wrap .header button.preset-reset > div { - height: 100%; - padding: 20px 0; +.inspector-inner { + padding: 20px; + position: relative; } -.inspector-wrap .header button.preset-reset .col12:last-child { +#sidebar .search-header .icon { + display: block; position: absolute; - width: 100%; - padding: 20px 0; - opacity: 0; + left: 10px; + top: 80px; + pointer-events: none; } -.inspector-wrap .header button:hover .col12:first-child { - opacity: 0; +#sidebar .search-header input { + position: absolute; + top: 60px; + height: 60px; + width: 100%; + padding: 5px 10px; + border-radius: 0; + border-width: 0; + border-bottom-width: 1px; + text-indent: 30px; + font-size: 18px; + font-weight: bold; } -.inspector-wrap .header button:hover .col12:last-child { - opacity: 1; -} +/* Feature list */ -.inspector-wrap .header button.line > div { - padding: 0; +.feature-list { + width:100%; } -.inspector-toggle { - color:#fff; +.no-results-item, +.geocode-item, +.feature-list-item { width: 100%; - display: block; - background:#7092ff; - border: 0; + position: relative; + border-bottom: 1px solid #ccc; + border-radius: 0; } -/* Presets -------------------------------------------------------- */ +.feature-list-item .label { + text-align: left; + padding: 5px 10px; + white-space: nowrap; + 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; +} -/* Preset grid */ +.feature-list-item .label .icon { + opacity: .5; +} -.preset-grid { - width:100%; - padding: 20px 10px 10px 20px; - border-bottom: 1px solid #ccc; +.feature-list-item:hover .label { + background-color: #ececec; } -.grid-button-wrap { - padding: 0 10px 10px 0; - height: 120px; +.feature-list-item .entity-type { + color:#7092ff; } -.grid-entry { +.feature-list-item:hover .entity-type { + color:#597be7; +} + +.feature-list-item .entity-name { + font-weight: normal; + color: #666; + padding-left: 10px; +} + +/* Presets +------------------------------------------------------- */ + +/* Preset grid */ + +.preset-list { + width:100%; + padding: 20px 20px 10px 20px; + border-bottom: 1px solid #ccc; +} + +.preset-list-button-wrap { + position: relative; + margin-bottom: 10px; + height: 60px; +} + +.preset-list-button { width: 100%; height: 100%; position: relative; border: 1px solid #ccc; - overflow: hidden; - float: left; -} - -.grid-inner { - margin-bottom: 20px; } -.preset-grid.filtered .grid-button-wrap:first-child .grid-entry { +.preset-list.filtered .preset-list-item:first-child .preset-list-button { background: #ececec; } .preset-icon { position: absolute; - top: 30px; - left: 0; - right: 0; + top: 17px; + left: 17px; margin: auto; } -.preset-icon-line { - top: 15px; - left: -10px; - right: -10px; +.preset-icon-line, +.preset-icon-relation { + top: 0; + left: 0; } -.grid-entry .label { - background: #f6f6f6; +.preset-list-button .label { + background-color: #f6f6f6; text-align: left; position: absolute; - padding: 5px 10px; - height: 30px; + top: 0; bottom: 0; - left: 0; right: 0; + right: 0; + padding: 5px 10px; + left: 60px; + line-height: 50px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; - border-top: 1px solid rgba(0, 0, 0, .1); + 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; } -.grid-button-wrap button.tag-reference-button { - float: right; - position: static; - margin-top: -30px; - margin-right: 1px; - height: 29px; - border-left: 1px solid #CCC; - border-radius: 0 0 3px 0; +.preset-list-button:hover .label { + background-color: #ececec; } -.current .grid-entry, -.current .grid-entry .label { +.preset-list-item button.tag-reference-button { + height: 100%; + border: 1px solid #CCC; + border-radius: 0 3px 3px 0; +} + +.current .preset-list-button, +.current .preset-list-button .label { background-color: #E8EBFF; } -.category .grid-entry:after, -.category .grid-entry:before { +.category .preset-list-button:after, +.category .preset-list-button:before { content: ""; position: absolute; - top: 7px; - left: 0; right: 0; - border-top: 1px solid #ccc; - border-radius: 6px; + top: -5px; + left: -1px; right: -1px; + border: 1px solid #ccc; + border-bottom: none; + border-radius: 6px 6px 0 0; height: 6px; } -.category .grid-entry:before { - top: 3px; -} - -.preset-grid-search-wrap .icon { - display: block; - position: absolute; - left: 10px; - top: 80px; - pointer-events: none; -} - -.preset-grid-search-wrap input { - position: absolute; - top: 60px; - border-radius: 0; - border-width: 0; - border-bottom-width: 1px; - text-indent: 30px; -} - -.preset-search-result { - padding: 0 10px; - height:30px; - margin: 5px; +.category .preset-list-button:before { + top: -3px; } -.subgrid { - width: 100%; - width: -webkit-calc(100% + 10px); - width: calc(100% + 10px); - margin-left: -10px; - overflow: hidden; -} - -.subgrid .preset-grid { - padding: 10px 0 0 10px; - border: 1px solid #CCC; +.subgrid .preset-list { + padding: 10px 10px 0 10px; margin-top: 0; + border: 0; border-radius: 8px; + width: -webkit-calc(100% + 20px); + margin-left: -10px; } .subgrid .arrow { border: solid rgba(0, 0, 0, 0); border-width: 10px; - border-bottom-color: #CCC; + border-bottom-color: #f1f1f1; width: 0; height: 0; - margin-left: 33.3333%; - margin-left: -webkit-calc(16.6666% - 10px); - margin-left: calc(16.6666% - 10px); - margin-top: -10px; -} -.subgrid.arrow-1 .arrow { margin-left: 50%; margin-left: -webkit-calc(50% - 10px); - margin-left: calc(50% - 10px); -} - -.subgrid.arrow-2 .arrow { - margin-left: 280px; - margin-left: -webkit-calc(84.4444% - 10px); - margin-left: calc(84.4444% - 10px); -} - -.show-more { - text-align: center; - width: 100%; - border-bottom: 1px solid #ccc; - border-radius: 0; -} - -.show-more a { - color: #222; + margin-top: -10px; } /* Preset icon colors */ -.inspector-body-line .icon.feature-marker-stroked { - top: 30px; -} - .preset-icon-fill.icon-area { cursor: inherit; height: 45px; width: 45px; margin: auto; position: absolute; - left: 0; right: 0; top: 19px; + left: 7px; top: 7px; background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat -240px -80px; } @@ -2111,12 +2181,17 @@ a:hover .icon.out-link { background-position: -500px -14px;} /* preset form basics */ -.tag-wrap .preset-icon-wrap { - border-bottom: 1px solid #CCC; - background-color: #e8ebff; +.inspector-preset { + overflow: hidden; +} + +.inspector-preset form.preset-form { + padding: 10px; + margin: 0 10px 20px 10px; + border-radius: 8px; } -.tag-wrap .preset-icon-wrap::after { +.entity-editor-pane .preset-list-item::after { content: ""; position: absolute; height: 0; @@ -2127,23 +2202,25 @@ a:hover .icon.out-link { background-position: -500px -14px;} margin: auto; border: solid rgba(0, 0, 0, 0); border-width: 10px; - border-bottom-color: #CCC; + border-bottom-color: #ececec; } -.tag-wrap .preset-icon-wrap > div { - height: 90px; - width: 33.3333%; - width: -webkit-calc(33.3333% - 10px); - width: calc(33.3333% - 10px); - margin: auto; - border-radius: 4px; - border: 1px solid #CCC; - position: relative; +.entity-editor-pane .preset-list-item .preset-list-button-wrap { + margin-bottom: 0; } -.inspector-preset .form-field { - padding-left: 20px; - padding-right: 20px; + +.form-field { + margin-bottom: 10px; + width: 100%; + -webkit-transition: margin-bottom 200ms; + -moz-transition: margin-bottom 200ms; + -o-transition: margin-bottom 200ms; + transition: margin-bottom 200ms; +} + +.form-field:last-child { + margin-bottom: 0; } .form-label { @@ -2163,11 +2240,13 @@ a:hover .icon.out-link { background-position: -500px -14px;} .form-label .modified-icon { border-right: 0; opacity: 0; - right: 20px; + z-index: -10; + right: 10%; } .modified .form-label .modified-icon { - opacity: .5; + opacity: 1; + z-index: 1; } .form-label button.tag-reference-button { @@ -2178,42 +2257,230 @@ a:hover .icon.out-link { background-position: -500px -14px;} .form-field > textarea, .form-field .preset-input-wrap { border: 1px solid #CCC; + min-height: 30px; border-top: 0; border-radius: 0 0 4px 4px; + overflow: hidden; } .form-field textarea { height: 65px; } -.form-field-name input.localized-main { - height: 35px; - font-size: 18px; - font-weight: bold; +.form-field button.remove { + border-radius: 0 0 4px 0; } -/* adding additional preset fields */ +.inspector-border { + border-bottom: 1px solid #CCC +} -.more-buttons { - margin-top: 20px; - border-top: 1px solid #CCC; +/* Preset form (hover mode) */ + +.inspector-hover .checkselect label:last-of-type, +.inspector-hover .preset-input-wrap .label, +.inspector-hover input, +.inspector-hover label { + background: #ececec; } -.more-buttons:nth-last-child(2) { - border-bottom: 1px solid #CCC; +.inspector-hover a, +.inspector-hover .checkselect label:last-of-type { + color: #666; +} + +/* hide and remove from layout */ +.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 span, +.inspector-hover .inspector-inner .add-tag, +.inspector-hover .inspector-inner .add-relation, +.inspector-hover .toggle-list label.remove .icon { + height: 0; + width: 0; + overflow: hidden; + opacity: 0 !important; + border-width: 0; + margin: 0; + padding: 0; +} + +/* 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 .entity-editor-pane .header button, +.inspector-hover .spin-control, +.inspector-hover .hide-toggle:before, +.inspector-hover .more-buttons, +.inspector-hover .view-on-osm { + opacity: 0; +} + +/* Styles for raw tag inspector on hover */ +.inspector-hover .tag-row .key-wrap, +.inspector-hover .tag-row .input-wrap-position { + width: 50%; +} + +.inspector-hover .tag-row:first-child input.value { + border-top-right-radius: 4px; +} + +.inspector-hover .tag-row:last-child input.value { + border-bottom-right-radius: 4px; +} + +.inspector-hover .tag-row:last-child input.key { + border-bottom-left-radius: 4px; +} + +.inspector-hover .inspector-body .more-buttons { + max-height: 0; + padding-bottom: 0; +} + +/* Unstyle button fields */ +.inspector-hover .toggle-list label.active, +.inspector-hover .entity-editor-pane a.hide-toggle { + opacity: 1; + background-color: transparent; + color: #666; + padding-left: 0; + border-width: 0; +} + +.inspector-hover .toggle-list button.active { + padding-left: 10px; +} + +/* Add placeholder only on hover for radio buttons */ +.inspector-hover .toggle-list .placeholder { + color: #a9a9a9; + padding: 5px 10px; + opacity: 1; + line-height: 20px; + width: 100%; +} + +/* Hide placeholder for radio buttons if another is active, or not in hover state */ +.toggle-list label.active ~ .placeholder, +.toggle-list .placeholder { + padding: 0; + opacity: 0; + width: 0; + 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 */ + +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; +} + +/* 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; +} + +.modified .form-label .modified-icon, +.entity-editor-pane button.minor, +.combobox-carat, +.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; + -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%; @@ -2239,15 +2506,6 @@ button.preset-add-field:nth-last-child(8) ~ button.preset-add-field { width: 12.5%; } -.preset-add-field .tooltip.top .tooltip-arrow { - border-top-color: #000; -} - -.preset-add-field .tooltip-inner { - background: #000; - color: #ccc; -} - .preset-fav button.fav { height: 30px; margin: 5px; @@ -2256,18 +2514,19 @@ button.preset-add-field:nth-last-child(8) ~ button.preset-add-field { /* preset form access */ -.preset-input-wrap li { +.preset-input-wrap .label { + height: 30px; + background: #F6F6F6; + padding: 5px 10px; +} + +.form-field-access .preset-input-wrap li { border-bottom: 1px solid #CCC; } -.preset-input-wrap li:last-child { +.form-field-access .preset-input-wrap li:last-child { border-bottom: 0; } -.preset-input-wrap .label { - background: #F6F6F6; - padding: 5px; -} - .preset-input-access-wrap input { border-radius: 0; border-width: 0; @@ -2282,28 +2541,26 @@ button.preset-add-field:nth-last-child(8) ~ button.preset-add-field { input[type=number] { position: relative; - padding-right: 65px; + padding-right: 20%; } .spin-control { - width: 41px; + width: 20%; height: 29px; - border-left: 1px solid #CCC; display: inline-block; - margin-left: -41px; + margin-left: -20%; margin-bottom: -11px; position: relative; } .spin-control button { + right: 1px; position: relative; float: left; height: 100%; width: 50%; border-left: 1px solid #CCC; - border-right: 1px solid #CCC; border-radius: 0; - border-left: 0; background: rgba(0, 0, 0, 0); } @@ -2336,9 +2593,9 @@ input[type=number] { .checkselect label:last-of-type { display: block; - padding: 5px; - box-sizing: border-box; - color: #999; + background: white; + padding: 5px 10px; + color: #7092FF; } .checkselect label:hover { @@ -2349,175 +2606,121 @@ input[type=number] { color: inherit; } -.checkselect input[type="checkbox"] { - margin-right: 5px; - width: 20px; - vertical-align: middle; - opacity: 0.5; -} - -.checkselect .set input[type="checkbox"] { - opacity: 1; +.checkselect label:not(.set) input[type="checkbox"] { + opacity: .5; } /* Preset form radio button */ -.radio-wrap button { - position: relative; - text-align: left; - font-weight: normal; - height: 30px; - border-radius: 0; - border-bottom: 1px solid #CCC; - color: #7092FF; - width: 100%; - padding-left: 25px; +.toggle-list button.remove { + border-radius: 0 0 3px 3px; } -.radio-wrap button::before { - content: ""; - display: inline-block; - border-radius: 50%; - height: 12px; - width: 12px; - margin-right: 10px; - border: 1px solid #CCC; +.toggle-list button.remove .icon { position: absolute; left: 5px; - top: 8px; } -.radio-wrap button:hover::before { - box-shadow: inset 0 0 0 2px white; +.toggle-list button.remove::before { + content: none; } -.radio-wrap button.active::before { - background: #7092ff; - box-shadow: inset 0 0 0 2px white; +.form-field .wiki-lang { + border-radius: 0; } -.radio-wrap button:last-child { - border-bottom: 0; +.form-field .wiki-title { + padding-right: 10%; } -.radio-wrap button.active { - background-color: #E8EBFF !important; +.form-field .wiki-title ~ .combobox-carat { + margin-left: -18%; + margin-right: 9%; } -.radio-wrap button.remove { - border-radius: 0 0 3px 3px; -} -.radio-wrap button.remove .icon { - position: absolute; - left: 2px; +.form-field .wiki-link { + float: right; + background: #fafafa; + padding: 5px; + text-align: center; } -.radio-wrap button.remove::before { - content: none; +.form-field .wiki-link:hover { + background: #f1f1f1; } -.form-field .localized-main { - width: 90%; +#preset-input-maxspeed { + border-right: none; border-radius: 0 0 0 4px; + width: 80%; } -.form-field .localized-add { - width: 10%; - height: 35px; +.form-field .maxspeed-unit { border-radius: 0 0 4px 0; - border-bottom: 1px solid #ccc; - border-right: 1px solid #ccc; - vertical-align: top; + width: 20%; } -.form-field .localized-wrap .entry .localized-lang { - border-top: none; - border-right: none; - border-radius: 0; - width: 30%; -} +/* Name + translate form */ -.form-field .localized-wrap .entry .localized-value { - border-top: none; - border-radius: 0; - width: 60%; +.form-field .localized-main { + padding-right: 10%; } -.form-field .localized-wrap .entry .localized-remove { - height: 30px; - border-radius: 0; - border-bottom: 1px solid #ccc; - border-right: 1px solid #ccc; - vertical-align: top; +.form-field .button-input-action { + position: relative; + right: 1px; width: 10%; -} - -.form-field .localized-wrap .entry:last-child .localized-lang { - border-radius: 0 0 0 4px; -} - -.form-field .localized-wrap .entry:last-child .localized-remove { + margin-left: -10%; + border: 1px solid #CCC; + border-top-width: 0; + border-right-width: 0; border-radius: 0 0 4px 0; + height: 30px; + vertical-align: top; } -.form-field .wiki-lang { - width: 30%; - border-right: none; - border-radius: 0 0 0 4px; -} - -.form-field .wiki-title { - width: 60%; - border-right: none; - border-radius: 0; -} - -.form-field .wiki-link { - border-radius: 0 0 4px 0; +.form-field .localized-wrap .entry { + position: relative; + overflow: hidden; + background: #f1f1f1; border: 1px solid #ccc; - border-top: none; - height: 30px; - width: 10%; - float: right; - padding: 5px; - text-align: center; - -webkit-transition: all 100ms; - -moz-transition: all 100ms; - -o-transition: all 100ms; - transition: all 100ms; + border-width: 0; + border-radius: 4px; } -.form-field .wiki-link:hover { - background: #ececec; +.form-field .localized-wrap .entry::before { + content: ""; + display: block; + position: absolute; + background:#ccc; + height: 11px; + width: 1px; + left: 0; + right: 0; + top: -11px; + margin: auto; } -#preset-input-maxspeed { - border-right: none; - border-radius: 0 0 0 4px; - width: 80%; +.form-field .localized-wrap .entry .localized-lang { + border-radius: 0; + border-top-width: 0; } -.form-field .maxspeed-unit { - border-radius: 0 0 4px 0; - border: 1px solid #ccc; - border-top: none; - height: 30px; - width: 20%; - float: right; - padding: 5px; - text-align: center; - color: #A9A9A9; - font-weight: bold; +.form-field .localized-wrap .entry .localized-value { + padding-right: 10%; + border-top-width: 0; + border-radius: 0 0 4px 4px; } /* Preset form address */ .form-field .addr-housename { border: 0; + border-radius: 0; } .form-field .addr-number { - width: 20%; + width: 33.3333%; border-left: 0; border-right: 0; border-bottom: 0; @@ -2525,19 +2728,26 @@ input[type=number] { } .form-field .addr-street { - width: 80%; + width: 66.6666%; border-right: 0; border-bottom: 0; border-radius: 0; } .form-field .addr-city { + width: 66.6666%; border-left: 0; border-right: 0; border-bottom: 0; - border-radius: 0 0 4px 4px; + border-radius: 0 0 0 4px; } +.form-field .addr-postcode { + width: 33.3333%; + border-right: 0; + border-bottom: 0; + border-radius: 0 0 4px 0; +} /* combobox dropdown */ div.combobox { @@ -2580,14 +2790,10 @@ div.combobox { border-right: 5px solid transparent; } -/* tag editor */ - -.inspector-inner.additional-tags { - border-top: 1px solid #ccc; -} +/* Raw Tag Editor */ .tag-list { - margin-right: 40px; + padding-top: 10px; } .tag-row { @@ -2597,13 +2803,26 @@ div.combobox { } .tag-row input { + height: 31px; border: 0; border-radius: 0; border-bottom: 1px solid #CCC; border-left: 1px solid #CCC; } +.tag-row .key-wrap, +.tag-row .input-wrap-position { + 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 { + font-weight: bold; background-color: #f6f6f6; } @@ -2622,13 +2841,11 @@ div.combobox { .tag-row button { position: absolute; - height: 30px; - right: -20px; + height: 31px; + right: 10%; border: 1px solid #CCC; - border-top-width: 0; border-left-width: 0; - border-radius: 0; - opacity: 1; - background: #fafafa; + border-top-width: 0; + border-left-width: 0; } .tag-row button:hover { @@ -2643,23 +2860,22 @@ div.combobox { border-top-width: 1px; } -.tag-row:first-child button.tag-help-button { +.tag-row:first-child .tag-reference-button { border-top-right-radius: 4px; } -.tag-row:last-child button.tag-help-button { +.tag-row:last-child .tag-reference-button { border-bottom-right-radius: 4px; } -.tag-row button.tag-help-button { - right: -40px; +.tag-row .tag-reference-button { + right: 0; } /* Adding form fields to tag editor */ .inspector-inner .add-tag { - width: -webkit-calc(50% - 20px); - width: calc(50% - 20px); + width: 40%; height: 30px; border-top: 0; background: rgba(0,0,0,.5); @@ -2676,59 +2892,120 @@ div.combobox { /* Tag reference */ -.preset-inspect { - position: relative; +button.minor.tag-reference-loading { + background-color: #f5f5f5; +} + +.tag-reference-loading .icon { + background-image: url(<%= asset_path("iD/img/mini-loader.gif") %>); + background-position: 0 0; } -.tag-help { +.tag-reference-body { overflow: hidden; } -.tag-help a { - margin-top: 5px; +.tag-reference-body p, +.tag-reference-body img { + margin-top: 20px; +} + +.tag-reference-body p:last-child { + padding-bottom: 10px; +} + +.tag-reference-body a { display: block; + padding-bottom: 10px; } -.grid-pane .tag-reference-wrap { - padding: 10px 0 20px 0; +.preset-list .tag-reference-body { + position: relative; + width: 100%; } -.tag-pane .tag-reference-wrap { - padding-top: 20px; +.preset-list .tag-reference-body a { + padding-bottom: 20px; } -.additional-tags .tag-reference-wrap { - border-bottom: 1px solid #ccc; - padding: 20px 0; +.preset-list .tag-reference-body p, +.preset-list .tag-reference-body img { + margin-top: 10px; } -.additional-tags div.tag-help { +.raw-tag-editor .tag-reference-body { + border-bottom: 1px solid #ccc; float: left; - width: 33.3333%; - width: -webkit-calc(100% - 40px); - width: calc(100% + 40px); + width: 100%; +} + +.raw-tag-editor .tag-reference-body p:last-child { + padding-bottom: 20px; +} + +.raw-tag-editor .tag-reference-body a { + padding-bottom: 20px; } img.wiki-image { - float: left; + float: right; width: 33.3333%; width: -webkit-calc(33.3333% - 10px); width: calc(33.3333% - 10px); - margin-right: 20px; + margin-left: 20px; + margin-right: 10px; border-radius: 4px; max-height: 200px; + margin-bottom: 20px; +} + +/* Raw relation membership editor */ + +.raw-member-editor .member-list li:first-child, +.raw-membership-editor .member-list li:first-child { + padding-top: 10px; +} + +.raw-member-editor .member-row, +.raw-membership-editor .member-row { + position: relative; +} + +.raw-member-editor .member-row .member-entity-name, +.raw-membership-editor .member-row .member-entity-name { + font-weight: normal; + padding-left: 10px; +} + +.member-row-new .member-entity-input { + border-radius: 4px 4px 0 0; + border: 1px solid #cfcfcf; +} + +.add-relation { + width: 40%; + height: 30px; + background: rgba(0,0,0,.5); + border-radius: 4px; + margin-top: 10px; +} + +.add-relation:hover { + background: rgba(0,0,0,.8); } /* Map Controls */ -.map-control { +.map-controls { + right: 0; + top: 70px; + width: 40px; + position: fixed; z-index: 100; - left:0px; - position:absolute; } .map-control > button { - width: 30px; + width: 40px; background: rgba(0,0,0,.5); border-radius: 0; } @@ -2754,29 +3031,35 @@ img.wiki-image { /* Zoomer */ -.zoombuttons { - top: 180px; - width: 30px; -} - .zoombuttons button.zoom-in { - border-radius:0 4px 0 0; + border-radius: 4px 0 0 0; } /* Background Settings */ -.background-control { - top: 80px; + +.toggle-list.layer-list { + margin-bottom: 10px; } .background-control button { - border-radius:0 4px 0 0; + 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; @@ -2786,9 +3069,13 @@ img.wiki-image { border: 0; } +.background-control .hide-toggle { + padding-bottom: 10px; +} + .hide-toggle { display: block; - padding: 0 0 10px 12px; + padding-left:12px; position: relative; } @@ -2899,75 +3186,35 @@ img.wiki-image { .background-control .layer-toggle-gpx .layer-extent { border-left: 1px solid #CCC; + border-radius: 0 4px 4px 0; } .background-control .layer-toggle-gpx.selected .layer-extent { display:inline-block; } -/* Geocoder */ - -.geocode-control, .geocode-control form { - top:260px; -} - -.geocode-control form { - padding: 5px; -} - -.geocode-control input { - width: 100%; -} - -.geocode-control div.map-overlay { - border-top: 1px solid #CCC; - z-index: 100; - max-height: 240px; - overflow-y: auto; - padding: 0; - margin-top: 40px; -} - -.geocode-control div.map-overlay span { - display: inline-block; - border-bottom: 1px solid #CCC; - padding: 5px 10px; -} -.geocode-control div.map-overlay span.not-found { - line-height: 28px; - width: 100%; -} - -.geocode-control a:focus { - text-decoration: underline; -} - /* Geolocator */ .geolocate-control { - top:300px; + margin-bottom: 10px; } .geolocate-control button { - border-radius: 0 0 4px 0; + border-radius: 0 0 0 4px; } /* Help */ -.help-control { - top: 120px; -} - .help-control button { - border-radius: 0 0 4px 0; + border-radius: 0 0 0 4px; } .help-wrap { - position: absolute; + position: fixed; top:60px; bottom: 30px; - padding: 20px 20px 20px 50px; - left: 0; + padding: 20px 50px 20px 20px; + right: 0; overflow-y: scroll; } @@ -3054,22 +3301,13 @@ img.wiki-image { ------------------------------------------------------- */ #map { - display:block; - position:absolute; + position:relative; overflow:hidden; - top:0px; - left:0; - right:0; - bottom:0; + height:100%; background:#000; } -#surface, #layer-g, .layer-layer { - position:absolute; - top:0; - left: 0; - right: 0; - bottom: 0; +#supersurface { transform-origin:0 0; -ms-transform-origin:0 0; -webkit-transform-origin:0 0; @@ -3081,8 +3319,12 @@ img.wiki-image { user-select: none; } -#surface { - position: static; +#supersurface, .layer-layer { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; } /* About Section @@ -3090,11 +3332,8 @@ img.wiki-image { .about-block { position: absolute; - right:0px; - bottom:0px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + right:0; + bottom:0; border-radius: 0; opacity: .625; -webkit-transition: opacity 200ms; @@ -3186,8 +3425,10 @@ img.wiki-image { .shaded { z-index: 2; position: absolute; - height: 100%; - width: 100%; + top: 0; + bottom: 0; + left: 0; + right: 0; overflow: auto; } @@ -3212,32 +3453,24 @@ img.wiki-image { } .modal-actions button, -.modal-actions a { - background-size: white; +.save-success a { font-weight: normal; color: #7092FF; border-bottom: 1px solid #CCC; border-radius: 0; - height: 180px; + height: 160px; text-align: center; display: inline-block; } -.modal-actions a { - /* `button` elements have box-algin: auto, need - compensate this for `a`*/ - padding-top: 25px; -} - -.modal-actions button:hover, -.modal-actions a:hover { +.modal-actions button:hover +.save-success a:hover { background-color: #ececec; } -.modal-actions a:before, .modal-actions button:before, +.save-success a:before, .walkthrough a:before { - background-size: white; display: block; content: ''; height: 100px; @@ -3255,49 +3488,66 @@ img.wiki-image { ------------------------------------------------------- */ .modal-actions .restore:before { - background-position: -400px -220px; + background-position: -500px -220px; } .modal-actions .reset:before { - background-position: -500px -220px; + background-position: -600px -220px; } /* Success Modal ------------------------------------------------------- */ -.modal-actions .twitter:before { +.save-success a { + padding-top: 15px; +} + +.save-success .osm:before { + background-position: 0px -220px; +} + +.save-success .twitter:before { background-position: -100px -220px; } +.save-success .facebook:before { + background-position: -200px -220px; +} + /* Splash Modal ------------------------------------------------------- */ .modal-actions .walkthrough:before, .walkthrough a:before { - background-position: -200px -220px; + background-position: -300px -220px; } .modal-actions .start:before { - background-position: -300px -220px; + background-position: -400px -220px; } /* Commit Modal ------------------------------------------------------- */ -.commit-modal a.user-info { +.mode-save a.user-info { display: inline-block; } -.commit-modal .commit-info { - margin-top: 10px; - padding-bottom: 20px; +.mode-save .commit-form { + margin-bottom: 0; +} + +.mode-save button.action { + float: none; + margin: auto; + display: block; } -.commit-modal .user-info img { +.mode-save .user-info img { float: left; } -.commit-modal h3 small.count { +.mode-save h3 small.count { margin-right: 10px; text-align: center; float: left; @@ -3311,7 +3561,7 @@ img.wiki-image { color:#fff; } -.commit-modal .changeset-list { +.mode-save .changeset-list { overflow: auto; border:1px solid #ccc; border-radius: 4px; @@ -3319,11 +3569,11 @@ img.wiki-image { max-height: 160px; } -.commit-modal .warning-section .changeset-list button { +.mode-save .warning-section .changeset-list button { border-left: 1px solid #CCC; } -.commit-modal .changeset-list li { +.mode-save .changeset-list li { position: relative; border-top:1px solid #ccc; padding:5px 10px; @@ -3344,18 +3594,21 @@ img.wiki-image { ------------------------------------------------------- */ .notice { - float:left; - width:25%; - padding-right: 10px; - text-align:center; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + text-align: center; + background: #fff; } .notice .zoom-to { - width:100%; - height: 40px; + margin: auto; + width: 80%; + height: 100px; border-radius: 5px; line-height: 40px; - background: #fff; color: #000; opacity: 0.9; } @@ -3377,7 +3630,6 @@ img.wiki-image { ------------------------------------------------------- */ .tooltip { - width: 200px; position: absolute; display: none; color:#333; @@ -3408,10 +3660,13 @@ img.wiki-image { .tooltip.left { margin-left: -20px; + text-align: right; } .tooltip-inner { display: inline-block; + max-width: 200px; + min-width: 80px; padding: 10px; font-weight: normal; background-color: white; @@ -3505,22 +3760,13 @@ img.wiki-image { border-width: 0 5px 5px; } - -/* Exceptions for tooltips that are up against the edge of the screen */ -.add-point .tooltip { - left: -20px !important; } - -.curtain-tooltip.intro-points-add .tooltip-arrow, -.add-point .tooltip .tooltip-arrow { - left: 60px; -} - -.tooltip .keyhint-wrap { - padding: 5px 0 5px 0; +.keyhint-wrap { + background: #F6F6F6; + padding: 10px; + margin: 10px -10px -10px; } .tooltip-inner .keyhint { - color: #222; font-size: 10px; padding: 0 7px; font-weight: bold; @@ -3530,11 +3776,6 @@ img.wiki-image { position: relative; z-index: 1; text-align: left; - clear: both; -} - -.tooltip .keyhint .keyhint-label { - display: inline-block; } .tooltip-inner .keyhint::after { @@ -3550,8 +3791,46 @@ img.wiki-image { border-top: 0; } +/* Exceptions for tooltip layouts */ + +/* make tooltips in editor pane dark */ +.entity-editor-pane .tooltip.top .tooltip-arrow { + border-top-color: #000; +} + +.entity-editor-pane .tooltip.bottom .tooltip-arrow { + border-bottom-color: #000; +} + +.entity-editor-pane .tooltip.left .tooltip-arrow { + border-left-color: #000; +} + +.entity-editor-pane .tooltip.right .tooltip-arrow { + border-right-color: #000; +} + +.entity-editor-pane .tooltip-inner { + background: #000; + color: #ccc; +} + +/* Uncramp map-control tooltips */ +.map-control .tooltip { + min-width: 160px; +} +/* Move over tooltips that are near the edge of screen */ +.add-point .tooltip { + left: 33.3333% !important; +} + +.curtain-tooltip.intro-points-add .tooltip-arrow, +.add-point .tooltip .tooltip-arrow { + left: 60px; +} + .radial-menu-tooltip { - background-color: rgba(255, 255, 255, 0.8); + opacity: 0.8; display: none; position: absolute; width: 200px; @@ -3595,7 +3874,6 @@ img.wiki-image { ------------------------------------------------------- */ @media only screen and (max-width: 840px) { - #bar .label {display: none;} #bar .icon.icon-pre-text { margin-right: 0;} /* override hide for save button */ #bar .save .label { display: block;} @@ -3700,6 +3978,7 @@ img.wiki-image { .intro-points-add .tooltip-inner::before, .intro-areas-add .tooltip-inner::before, .intro-lines-add .tooltip-inner::before { + margin-left: -20px; display: block; content: ""; height: 80px; @@ -3727,594 +4006,156 @@ img.wiki-image { background: rgba(0, 0, 0, 0) url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat -301px -220px; margin: auto; } -/* glue: 0.3 hash: 5d99d90788 */ -.feature-waterway-stream, -.feature-waterway-river, -.feature-waterway-ditch, -.feature-waterway-canal, -.feature-railway-subway, -.feature-railway-rail, -.feature-railway-monorail, -.feature-railway-light_rail, -.feature-railway-disused, -.feature-railway-abandoned, -.feature-power-line, -.feature-other-line, -.feature-highway-unclassified, -.feature-highway-trunk, -.feature-highway-trunk-link, -.feature-highway-track, -.feature-highway-tertiary, -.feature-highway-tertiary-link, -.feature-highway-steps, -.feature-highway-service, -.feature-highway-secondary, -.feature-highway-secondary-link, -.feature-highway-road, -.feature-highway-residential, -.feature-highway-primary, -.feature-highway-primary-link, -.feature-highway-path, -.feature-highway-motorway, -.feature-highway-motorway-link, -.feature-highway-living_street, -.feature-highway-footway, -.feature-highway-cycleway, -.feature-highway-bridleway, -.feature-category-water, -.feature-category-roads, -.feature-category-rail, -.feature-category-path, -.feature-zoo, -.feature-x, -.feature-wetland, -.feature-water, -.feature-waste-basket, -.feature-warehouse, -.feature-triangle, -.feature-triangle-stroked, -.feature-town-hall, -.feature-toilets, -.feature-theatre, -.feature-tennis, -.feature-swimming, -.feature-star, -.feature-star-stroked, -.feature-square, -.feature-square-stroked, -.feature-soccer, -.feature-slaughterhouse, -.feature-skiing, -.feature-shop, -.feature-school, -.feature-roadblock, -.feature-restaurant, -.feature-religious-muslim, -.feature-religious-jewish, -.feature-religious-christian, -.feature-rail, -.feature-rail-underground, -.feature-rail-above, -.feature-prison, -.feature-post, -.feature-police, -.feature-place-of-worship, -.feature-pitch, -.feature-pharmacy, -.feature-parking, -.feature-parking-garage, -.feature-park2, -.feature-park, -.feature-oil-well, -.feature-museum, -.feature-monument, -.feature-minefield, -.feature-marker, -.feature-marker-stroked, -.feature-london-underground, -.feature-logging, -.feature-lodging, -.feature-library, -.feature-industrial, -.feature-hospital, -.feature-heliport, -.feature-harbor, -.feature-grocery, -.feature-golf, -.feature-garden, -.feature-fuel, -.feature-fire-station, -.feature-ferry, -.feature-fast-food, -.feature-embassy, -.feature-danger, -.feature-dam, -.feature-cross, -.feature-cricket, -.feature-commercial, -.feature-college, -.feature-circle, -.feature-circle-stroked, -.feature-cinema, -.feature-cemetery, -.feature-campsite, -.feature-cafe, -.feature-bus, -.feature-bicycle, -.feature-beer, -.feature-basketball, -.feature-baseball, -.feature-bar, -.feature-bank, -.feature-art-gallery, -.feature-america-football, -.feature-alcohol-shop, -.feature-airport, -.feature-airfield, -.feature-zoo-18, -.feature-x-18, -.feature-wetland-18, -.feature-water-18, -.feature-waste-basket-18, -.feature-warehouse-18, -.feature-triangle-stroked-18, -.feature-triangle-18, -.feature-town-hall-18, -.feature-toilets-18, -.feature-theatre-18, -.feature-tennis-18, -.feature-swimming-18, -.feature-star-stroked-18, -.feature-star-18, -.feature-square-stroked-18, -.feature-square-18, -.feature-soccer-18, -.feature-slaughterhouse-18, -.feature-skiing-18, -.feature-shop-18, -.feature-school-18, -.feature-roadblock-18, -.feature-restaurant-18, -.feature-religious-muslim-18, -.feature-religious-jewish-18, -.feature-religious-christian-18, -.feature-rail-underground-18, -.feature-rail-above-18, -.feature-rail-18, -.feature-prison-18, -.feature-post-18, -.feature-police-18, -.feature-place-of-worship-18, -.feature-pitch-18, -.feature-pharmacy-18, -.feature-parking-garage-18, -.feature-parking-18, -.feature-park2-18, -.feature-park-18, -.feature-oil-well-18, -.feature-museum-18, -.feature-monument-18, -.feature-minefield-18, -.feature-marker-stroked-18, -.feature-marker-18, -.feature-london-underground-18, -.feature-logging-18, -.feature-lodging-18, -.feature-library-18, -.feature-industrial-18, -.feature-hospital-18, -.feature-heliport-18, -.feature-harbor-18, -.feature-grocery-18, -.feature-golf-18, -.feature-garden-18, -.feature-fuel-18, -.feature-fire-station-18, -.feature-ferry-18, -.feature-fast-food-18, -.feature-embassy-18, -.feature-danger-18, -.feature-dam-18, -.feature-cross-18, -.feature-cricket-18, -.feature-commercial-18, -.feature-college-18, -.feature-circle-stroked-18, -.feature-circle-18, -.feature-cinema-18, -.feature-cemetery-18, -.feature-campsite-18, -.feature-cafe-18, -.feature-bus-18, -.feature-bicycle-18, -.feature-beer-18, -.feature-basketball-18, -.feature-baseball-18, -.feature-bar-18, -.feature-bank-18, -.feature-art-gallery-18, -.feature-america-football-18, -.feature-alcohol-shop-18, -.feature-airport-18, -.feature-airfield-18, -.feature-zoo-12, -.feature-x-12, -.feature-wetland-12, -.feature-water-12, -.feature-waste-basket-12, -.feature-warehouse-12, -.feature-triangle-stroked-12, -.feature-triangle-12, -.feature-town-hall-12, -.feature-toilets-12, -.feature-theatre-12, -.feature-tennis-12, -.feature-swimming-12, -.feature-star-stroked-12, -.feature-star-12, -.feature-square-stroked-12, -.feature-square-12, -.feature-soccer-12, -.feature-slaughterhouse-12, -.feature-skiing-12, -.feature-shop-12, -.feature-school-12, -.feature-roadblock-12, -.feature-restaurant-12, -.feature-religious-muslim-12, -.feature-religious-jewish-12, -.feature-religious-christian-12, -.feature-rail-underground-12, -.feature-rail-above-12, -.feature-rail-12, -.feature-prison-12, -.feature-post-12, -.feature-police-12, -.feature-place-of-worship-12, -.feature-pitch-12, -.feature-pharmacy-12, -.feature-parking-garage-12, -.feature-parking-12, -.feature-park2-12, -.feature-park-12, -.feature-oil-well-12, -.feature-museum-12, -.feature-monument-12, -.feature-minefield-12, -.feature-marker-stroked-12, -.feature-marker-12, -.feature-london-underground-12, -.feature-logging-12, -.feature-lodging-12, -.feature-library-12, -.feature-industrial-12, -.feature-hospital-12, -.feature-heliport-12, -.feature-harbor-12, -.feature-grocery-12, -.feature-golf-12, -.feature-garden-12, -.feature-fuel-12, -.feature-fire-station-12, -.feature-ferry-12, -.feature-fast-food-12, -.feature-embassy-12, -.feature-danger-12, -.feature-dam-12, -.feature-cross-12, -.feature-cricket-12, -.feature-commercial-12, -.feature-college-12, -.feature-circle-stroked-12, -.feature-circle-12, -.feature-cinema-12, -.feature-cemetery-12, -.feature-campsite-12, -.feature-cafe-12, -.feature-bus-12, -.feature-bicycle-12, -.feature-beer-12, -.feature-basketball-12, -.feature-baseball-12, -.feature-bar-12, -.feature-bank-12, -.feature-art-gallery-12, -.feature-america-football-12, -.feature-alcohol-shop-12, -.feature-airport-12, -.feature-airfield-12{background-image:url(<%= asset_path("iD/img/feature-icons.png") %>);background-repeat:no-repeat} -.feature-waterway-stream{background-position:0px 0px;width:60px;height:60px;} -.feature-waterway-river{background-position:-60px 0px;width:60px;height:60px;} -.feature-waterway-ditch{background-position:0px -60px;width:60px;height:60px;} -.feature-waterway-canal{background-position:-60px -60px;width:60px;height:60px;} -.feature-railway-subway{background-position:-120px 0px;width:60px;height:60px;} -.feature-railway-rail{background-position:-120px -60px;width:60px;height:60px;} -.feature-railway-monorail{background-position:0px -120px;width:60px;height:60px;} -.feature-railway-light_rail{background-position:-60px -120px;width:60px;height:60px;} -.feature-railway-disused{background-position:-120px -120px;width:60px;height:60px;} -.feature-railway-abandoned{background-position:-180px 0px;width:60px;height:60px;} -.feature-power-line{background-position:-180px -60px;width:60px;height:60px;} -.feature-other-line{background-position:-180px -120px;width:60px;height:60px;} -.feature-highway-unclassified{background-position:0px -180px;width:60px;height:60px;} -.feature-highway-trunk{background-position:-60px -180px;width:60px;height:60px;} -.feature-highway-trunk-link{background-position:-120px -180px;width:60px;height:60px;} -.feature-highway-track{background-position:-180px -180px;width:60px;height:60px;} -.feature-highway-tertiary{background-position:-240px 0px;width:60px;height:60px;} -.feature-highway-tertiary-link{background-position:-240px -60px;width:60px;height:60px;} -.feature-highway-steps{background-position:-240px -120px;width:60px;height:60px;} -.feature-highway-service{background-position:-240px -180px;width:60px;height:60px;} -.feature-highway-secondary{background-position:0px -240px;width:60px;height:60px;} -.feature-highway-secondary-link{background-position:-60px -240px;width:60px;height:60px;} -.feature-highway-road{background-position:-120px -240px;width:60px;height:60px;} -.feature-highway-residential{background-position:-180px -240px;width:60px;height:60px;} -.feature-highway-primary{background-position:-240px -240px;width:60px;height:60px;} -.feature-highway-primary-link{background-position:-300px 0px;width:60px;height:60px;} -.feature-highway-path{background-position:-300px -60px;width:60px;height:60px;} -.feature-highway-motorway{background-position:-300px -120px;width:60px;height:60px;} -.feature-highway-motorway-link{background-position:-300px -180px;width:60px;height:60px;} -.feature-highway-living_street{background-position:-300px -240px;width:60px;height:60px;} -.feature-highway-footway{background-position:0px -300px;width:60px;height:60px;} -.feature-highway-cycleway{background-position:-60px -300px;width:60px;height:60px;} -.feature-highway-bridleway{background-position:-120px -300px;width:60px;height:60px;} -.feature-category-water{background-position:-180px -300px;width:60px;height:60px;} -.feature-category-roads{background-position:-240px -300px;width:60px;height:60px;} -.feature-category-rail{background-position:-300px -300px;width:60px;height:60px;} -.feature-category-path{background-position:-360px 0px;width:60px;height:60px;} -.feature-zoo{background-position:-360px -60px;width:24px;height:24px;} -.feature-x{background-position:-384px -60px;width:24px;height:24px;} -.feature-wetland{background-position:-360px -84px;width:24px;height:24px;} -.feature-water{background-position:-384px -84px;width:24px;height:24px;} -.feature-waste-basket{background-position:-360px -108px;width:24px;height:24px;} -.feature-warehouse{background-position:-384px -108px;width:24px;height:24px;} -.feature-triangle{background-position:-360px -132px;width:24px;height:24px;} -.feature-triangle-stroked{background-position:-384px -132px;width:24px;height:24px;} -.feature-town-hall{background-position:-360px -156px;width:24px;height:24px;} -.feature-toilets{background-position:-384px -156px;width:24px;height:24px;} -.feature-theatre{background-position:-360px -180px;width:24px;height:24px;} -.feature-tennis{background-position:-384px -180px;width:24px;height:24px;} -.feature-swimming{background-position:-360px -204px;width:24px;height:24px;} -.feature-star{background-position:-384px -204px;width:24px;height:24px;} -.feature-star-stroked{background-position:-360px -228px;width:24px;height:24px;} -.feature-square{background-position:-384px -228px;width:24px;height:24px;} -.feature-square-stroked{background-position:-360px -252px;width:24px;height:24px;} -.feature-soccer{background-position:-384px -252px;width:24px;height:24px;} -.feature-slaughterhouse{background-position:-360px -276px;width:24px;height:24px;} -.feature-skiing{background-position:-384px -276px;width:24px;height:24px;} -.feature-shop{background-position:-360px -300px;width:24px;height:24px;} -.feature-school{background-position:-384px -300px;width:24px;height:24px;} -.feature-roadblock{background-position:-360px -324px;width:24px;height:24px;} -.feature-restaurant{background-position:-384px -324px;width:24px;height:24px;} -.feature-religious-muslim{background-position:0px -360px;width:24px;height:24px;} -.feature-religious-jewish{background-position:-24px -360px;width:24px;height:24px;} -.feature-religious-christian{background-position:-48px -360px;width:24px;height:24px;} -.feature-rail{background-position:-72px -360px;width:24px;height:24px;} -.feature-rail-underground{background-position:-96px -360px;width:24px;height:24px;} -.feature-rail-above{background-position:-120px -360px;width:24px;height:24px;} -.feature-prison{background-position:-144px -360px;width:24px;height:24px;} -.feature-post{background-position:-168px -360px;width:24px;height:24px;} -.feature-police{background-position:-192px -360px;width:24px;height:24px;} -.feature-place-of-worship{background-position:-216px -360px;width:24px;height:24px;} -.feature-pitch{background-position:-240px -360px;width:24px;height:24px;} -.feature-pharmacy{background-position:-264px -360px;width:24px;height:24px;} -.feature-parking{background-position:-288px -360px;width:24px;height:24px;} -.feature-parking-garage{background-position:-312px -360px;width:24px;height:24px;} -.feature-park2{background-position:-336px -360px;width:24px;height:24px;} -.feature-park{background-position:-360px -360px;width:24px;height:24px;} -.feature-oil-well{background-position:-384px -360px;width:24px;height:24px;} -.feature-museum{background-position:0px -384px;width:24px;height:24px;} -.feature-monument{background-position:-24px -384px;width:24px;height:24px;} -.feature-minefield{background-position:-48px -384px;width:24px;height:24px;} -.feature-marker{background-position:-72px -384px;width:24px;height:24px;} -.feature-marker-stroked{background-position:-96px -384px;width:24px;height:24px;} -.feature-london-underground{background-position:-120px -384px;width:24px;height:24px;} -.feature-logging{background-position:-144px -384px;width:24px;height:24px;} -.feature-lodging{background-position:-168px -384px;width:24px;height:24px;} -.feature-library{background-position:-192px -384px;width:24px;height:24px;} -.feature-industrial{background-position:-216px -384px;width:24px;height:24px;} -.feature-hospital{background-position:-240px -384px;width:24px;height:24px;} -.feature-heliport{background-position:-264px -384px;width:24px;height:24px;} -.feature-harbor{background-position:-288px -384px;width:24px;height:24px;} -.feature-grocery{background-position:-312px -384px;width:24px;height:24px;} -.feature-golf{background-position:-336px -384px;width:24px;height:24px;} -.feature-garden{background-position:-360px -384px;width:24px;height:24px;} -.feature-fuel{background-position:-384px -384px;width:24px;height:24px;} -.feature-fire-station{background-position:-420px 0px;width:24px;height:24px;} -.feature-ferry{background-position:-420px -24px;width:24px;height:24px;} -.feature-fast-food{background-position:-420px -48px;width:24px;height:24px;} -.feature-embassy{background-position:-420px -72px;width:24px;height:24px;} -.feature-danger{background-position:-420px -96px;width:24px;height:24px;} -.feature-dam{background-position:-420px -120px;width:24px;height:24px;} -.feature-cross{background-position:-420px -144px;width:24px;height:24px;} -.feature-cricket{background-position:-420px -168px;width:24px;height:24px;} -.feature-commercial{background-position:-420px -192px;width:24px;height:24px;} -.feature-college{background-position:-420px -216px;width:24px;height:24px;} -.feature-circle{background-position:-420px -240px;width:24px;height:24px;} -.feature-circle-stroked{background-position:-420px -264px;width:24px;height:24px;} -.feature-cinema{background-position:-420px -288px;width:24px;height:24px;} -.feature-cemetery{background-position:-420px -312px;width:24px;height:24px;} -.feature-campsite{background-position:-420px -336px;width:24px;height:24px;} -.feature-cafe{background-position:-420px -360px;width:24px;height:24px;} -.feature-bus{background-position:-420px -384px;width:24px;height:24px;} -.feature-bicycle{background-position:0px -408px;width:24px;height:24px;} -.feature-beer{background-position:-24px -408px;width:24px;height:24px;} -.feature-basketball{background-position:-48px -408px;width:24px;height:24px;} -.feature-baseball{background-position:-72px -408px;width:24px;height:24px;} -.feature-bar{background-position:-96px -408px;width:24px;height:24px;} -.feature-bank{background-position:-120px -408px;width:24px;height:24px;} -.feature-art-gallery{background-position:-144px -408px;width:24px;height:24px;} -.feature-america-football{background-position:-168px -408px;width:24px;height:24px;} -.feature-alcohol-shop{background-position:-192px -408px;width:24px;height:24px;} -.feature-airport{background-position:-216px -408px;width:24px;height:24px;} -.feature-airfield{background-position:-240px -408px;width:24px;height:24px;} -.feature-zoo-18{background-position:-264px -408px;width:18px;height:18px;} -.feature-x-18{background-position:-282px -408px;width:18px;height:18px;} -.feature-wetland-18{background-position:-300px -408px;width:18px;height:18px;} -.feature-water-18{background-position:-318px -408px;width:18px;height:18px;} -.feature-waste-basket-18{background-position:-336px -408px;width:18px;height:18px;} -.feature-warehouse-18{background-position:-354px -408px;width:18px;height:18px;} -.feature-triangle-stroked-18{background-position:-372px -408px;width:18px;height:18px;} -.feature-triangle-18{background-position:-390px -408px;width:18px;height:18px;} -.feature-town-hall-18{background-position:-408px -408px;width:18px;height:18px;} -.feature-toilets-18{background-position:-426px -408px;width:18px;height:18px;} -.feature-theatre-18{background-position:-444px 0px;width:18px;height:18px;} -.feature-tennis-18{background-position:-444px -18px;width:18px;height:18px;} -.feature-swimming-18{background-position:-444px -36px;width:18px;height:18px;} -.feature-star-stroked-18{background-position:-444px -54px;width:18px;height:18px;} -.feature-star-18{background-position:-444px -72px;width:18px;height:18px;} -.feature-square-stroked-18{background-position:-444px -90px;width:18px;height:18px;} -.feature-square-18{background-position:-444px -108px;width:18px;height:18px;} -.feature-soccer-18{background-position:-444px -126px;width:18px;height:18px;} -.feature-slaughterhouse-18{background-position:-444px -144px;width:18px;height:18px;} -.feature-skiing-18{background-position:-444px -162px;width:18px;height:18px;} -.feature-shop-18{background-position:-444px -180px;width:18px;height:18px;} -.feature-school-18{background-position:-444px -198px;width:18px;height:18px;} -.feature-roadblock-18{background-position:-444px -216px;width:18px;height:18px;} -.feature-restaurant-18{background-position:-444px -234px;width:18px;height:18px;} -.feature-religious-muslim-18{background-position:-444px -252px;width:18px;height:18px;} -.feature-religious-jewish-18{background-position:-444px -270px;width:18px;height:18px;} -.feature-religious-christian-18{background-position:-444px -288px;width:18px;height:18px;} -.feature-rail-underground-18{background-position:-444px -306px;width:18px;height:18px;} -.feature-rail-above-18{background-position:-444px -324px;width:18px;height:18px;} -.feature-rail-18{background-position:-444px -342px;width:18px;height:18px;} -.feature-prison-18{background-position:-444px -360px;width:18px;height:18px;} -.feature-post-18{background-position:-444px -378px;width:18px;height:18px;} -.feature-police-18{background-position:-444px -396px;width:18px;height:18px;} -.feature-place-of-worship-18{background-position:-444px -414px;width:18px;height:18px;} -.feature-pitch-18{background-position:0px -432px;width:18px;height:18px;} -.feature-pharmacy-18{background-position:-18px -432px;width:18px;height:18px;} -.feature-parking-garage-18{background-position:-36px -432px;width:18px;height:18px;} -.feature-parking-18{background-position:-54px -432px;width:18px;height:18px;} -.feature-park2-18{background-position:-72px -432px;width:18px;height:18px;} -.feature-park-18{background-position:-90px -432px;width:18px;height:18px;} -.feature-oil-well-18{background-position:-108px -432px;width:18px;height:18px;} -.feature-museum-18{background-position:-126px -432px;width:18px;height:18px;} -.feature-monument-18{background-position:-144px -432px;width:18px;height:18px;} -.feature-minefield-18{background-position:-162px -432px;width:18px;height:18px;} -.feature-marker-stroked-18{background-position:-180px -432px;width:18px;height:18px;} -.feature-marker-18{background-position:-198px -432px;width:18px;height:18px;} -.feature-london-underground-18{background-position:-216px -432px;width:18px;height:18px;} -.feature-logging-18{background-position:-234px -432px;width:18px;height:18px;} -.feature-lodging-18{background-position:-252px -432px;width:18px;height:18px;} -.feature-library-18{background-position:-270px -432px;width:18px;height:18px;} -.feature-industrial-18{background-position:-288px -432px;width:18px;height:18px;} -.feature-hospital-18{background-position:-306px -432px;width:18px;height:18px;} -.feature-heliport-18{background-position:-324px -432px;width:18px;height:18px;} -.feature-harbor-18{background-position:-342px -432px;width:18px;height:18px;} -.feature-grocery-18{background-position:-360px -432px;width:18px;height:18px;} -.feature-golf-18{background-position:-378px -432px;width:18px;height:18px;} -.feature-garden-18{background-position:-396px -432px;width:18px;height:18px;} -.feature-fuel-18{background-position:-414px -432px;width:18px;height:18px;} -.feature-fire-station-18{background-position:-432px -432px;width:18px;height:18px;} -.feature-ferry-18{background-position:-462px 0px;width:18px;height:18px;} -.feature-fast-food-18{background-position:-462px -18px;width:18px;height:18px;} -.feature-embassy-18{background-position:-462px -36px;width:18px;height:18px;} -.feature-danger-18{background-position:-462px -54px;width:18px;height:18px;} -.feature-dam-18{background-position:-462px -72px;width:18px;height:18px;} -.feature-cross-18{background-position:-462px -90px;width:18px;height:18px;} -.feature-cricket-18{background-position:-462px -108px;width:18px;height:18px;} -.feature-commercial-18{background-position:-462px -126px;width:18px;height:18px;} -.feature-college-18{background-position:-462px -144px;width:18px;height:18px;} -.feature-circle-stroked-18{background-position:-462px -162px;width:18px;height:18px;} -.feature-circle-18{background-position:-462px -180px;width:18px;height:18px;} -.feature-cinema-18{background-position:-462px -198px;width:18px;height:18px;} -.feature-cemetery-18{background-position:-462px -216px;width:18px;height:18px;} -.feature-campsite-18{background-position:-462px -234px;width:18px;height:18px;} -.feature-cafe-18{background-position:-462px -252px;width:18px;height:18px;} -.feature-bus-18{background-position:-462px -270px;width:18px;height:18px;} -.feature-bicycle-18{background-position:-462px -288px;width:18px;height:18px;} -.feature-beer-18{background-position:-462px -306px;width:18px;height:18px;} -.feature-basketball-18{background-position:-462px -324px;width:18px;height:18px;} -.feature-baseball-18{background-position:-462px -342px;width:18px;height:18px;} -.feature-bar-18{background-position:-462px -360px;width:18px;height:18px;} -.feature-bank-18{background-position:-462px -378px;width:18px;height:18px;} -.feature-art-gallery-18{background-position:-462px -396px;width:18px;height:18px;} -.feature-america-football-18{background-position:-462px -414px;width:18px;height:18px;} -.feature-alcohol-shop-18{background-position:-462px -432px;width:18px;height:18px;} -.feature-airport-18{background-position:0px -450px;width:18px;height:18px;} -.feature-airfield-18{background-position:-18px -450px;width:18px;height:18px;} -.feature-zoo-12{background-position:-408px -60px;width:12px;height:12px;} -.feature-x-12{background-position:-408px -72px;width:12px;height:12px;} -.feature-wetland-12{background-position:-408px -84px;width:12px;height:12px;} -.feature-water-12{background-position:-408px -96px;width:12px;height:12px;} -.feature-waste-basket-12{background-position:-408px -108px;width:12px;height:12px;} -.feature-warehouse-12{background-position:-408px -120px;width:12px;height:12px;} -.feature-triangle-stroked-12{background-position:-408px -132px;width:12px;height:12px;} -.feature-triangle-12{background-position:-408px -144px;width:12px;height:12px;} -.feature-town-hall-12{background-position:-408px -156px;width:12px;height:12px;} -.feature-toilets-12{background-position:-408px -168px;width:12px;height:12px;} -.feature-theatre-12{background-position:-408px -180px;width:12px;height:12px;} -.feature-tennis-12{background-position:-408px -192px;width:12px;height:12px;} -.feature-swimming-12{background-position:-408px -204px;width:12px;height:12px;} -.feature-star-stroked-12{background-position:-408px -216px;width:12px;height:12px;} -.feature-star-12{background-position:-408px -228px;width:12px;height:12px;} -.feature-square-stroked-12{background-position:-408px -240px;width:12px;height:12px;} -.feature-square-12{background-position:-408px -252px;width:12px;height:12px;} -.feature-soccer-12{background-position:-408px -264px;width:12px;height:12px;} -.feature-slaughterhouse-12{background-position:-408px -276px;width:12px;height:12px;} -.feature-skiing-12{background-position:-408px -288px;width:12px;height:12px;} -.feature-shop-12{background-position:-408px -300px;width:12px;height:12px;} -.feature-school-12{background-position:-408px -312px;width:12px;height:12px;} -.feature-roadblock-12{background-position:-408px -324px;width:12px;height:12px;} -.feature-restaurant-12{background-position:-408px -336px;width:12px;height:12px;} -.feature-religious-muslim-12{background-position:-360px -348px;width:12px;height:12px;} -.feature-religious-jewish-12{background-position:-372px -348px;width:12px;height:12px;} -.feature-religious-christian-12{background-position:-384px -348px;width:12px;height:12px;} -.feature-rail-underground-12{background-position:-396px -348px;width:12px;height:12px;} -.feature-rail-above-12{background-position:-408px -348px;width:12px;height:12px;} -.feature-rail-12{background-position:-408px -360px;width:12px;height:12px;} -.feature-prison-12{background-position:-408px -372px;width:12px;height:12px;} -.feature-post-12{background-position:-408px -384px;width:12px;height:12px;} -.feature-police-12{background-position:-408px -396px;width:12px;height:12px;} -.feature-place-of-worship-12{background-position:-450px -432px;width:12px;height:12px;} -.feature-pitch-12{background-position:-36px -450px;width:12px;height:12px;} -.feature-pharmacy-12{background-position:-48px -450px;width:12px;height:12px;} -.feature-parking-garage-12{background-position:-60px -450px;width:12px;height:12px;} -.feature-parking-12{background-position:-72px -450px;width:12px;height:12px;} -.feature-park2-12{background-position:-84px -450px;width:12px;height:12px;} -.feature-park-12{background-position:-96px -450px;width:12px;height:12px;} -.feature-oil-well-12{background-position:-108px -450px;width:12px;height:12px;} -.feature-museum-12{background-position:-120px -450px;width:12px;height:12px;} -.feature-monument-12{background-position:-132px -450px;width:12px;height:12px;} -.feature-minefield-12{background-position:-144px -450px;width:12px;height:12px;} -.feature-marker-stroked-12{background-position:-156px -450px;width:12px;height:12px;} -.feature-marker-12{background-position:-168px -450px;width:12px;height:12px;} -.feature-london-underground-12{background-position:-180px -450px;width:12px;height:12px;} -.feature-logging-12{background-position:-192px -450px;width:12px;height:12px;} -.feature-lodging-12{background-position:-204px -450px;width:12px;height:12px;} -.feature-library-12{background-position:-216px -450px;width:12px;height:12px;} -.feature-industrial-12{background-position:-228px -450px;width:12px;height:12px;} -.feature-hospital-12{background-position:-240px -450px;width:12px;height:12px;} -.feature-heliport-12{background-position:-252px -450px;width:12px;height:12px;} -.feature-harbor-12{background-position:-264px -450px;width:12px;height:12px;} -.feature-grocery-12{background-position:-276px -450px;width:12px;height:12px;} -.feature-golf-12{background-position:-288px -450px;width:12px;height:12px;} -.feature-garden-12{background-position:-300px -450px;width:12px;height:12px;} -.feature-fuel-12{background-position:-312px -450px;width:12px;height:12px;} -.feature-fire-station-12{background-position:-324px -450px;width:12px;height:12px;} -.feature-ferry-12{background-position:-336px -450px;width:12px;height:12px;} -.feature-fast-food-12{background-position:-348px -450px;width:12px;height:12px;} -.feature-embassy-12{background-position:-360px -450px;width:12px;height:12px;} -.feature-danger-12{background-position:-372px -450px;width:12px;height:12px;} -.feature-dam-12{background-position:-384px -450px;width:12px;height:12px;} -.feature-cross-12{background-position:-396px -450px;width:12px;height:12px;} -.feature-cricket-12{background-position:-408px -450px;width:12px;height:12px;} -.feature-commercial-12{background-position:-420px -450px;width:12px;height:12px;} -.feature-college-12{background-position:-432px -450px;width:12px;height:12px;} -.feature-circle-stroked-12{background-position:-444px -450px;width:12px;height:12px;} -.feature-circle-12{background-position:-456px -450px;width:12px;height:12px;} -.feature-cinema-12{background-position:-468px -450px;width:12px;height:12px;} -.feature-cemetery-12{background-position:0px -468px;width:12px;height:12px;} -.feature-campsite-12{background-position:-12px -468px;width:12px;height:12px;} -.feature-cafe-12{background-position:-24px -468px;width:12px;height:12px;} -.feature-bus-12{background-position:-36px -468px;width:12px;height:12px;} -.feature-bicycle-12{background-position:-48px -468px;width:12px;height:12px;} -.feature-beer-12{background-position:-60px -468px;width:12px;height:12px;} -.feature-basketball-12{background-position:-72px -468px;width:12px;height:12px;} -.feature-baseball-12{background-position:-84px -468px;width:12px;height:12px;} -.feature-bar-12{background-position:-96px -468px;width:12px;height:12px;} -.feature-bank-12{background-position:-108px -468px;width:12px;height:12px;} -.feature-art-gallery-12{background-position:-120px -468px;width:12px;height:12px;} -.feature-america-football-12{background-position:-132px -468px;width:12px;height:12px;} -.feature-alcohol-shop-12{background-position:-144px -468px;width:12px;height:12px;} -.feature-airport-12{background-position:-156px -468px;width:12px;height:12px;} -.feature-airfield-12{background-position:-168px -468px;width:12px;height:12px;} +/* This file is generated by make. Do NOT edit manually. */ + +.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;} +.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;} +.preset-icon-line.feature-highway-secondary{background-position:-200px -25px;} +.preset-icon-line.feature-highway-tertiary{background-position:-260px -25px;} +.preset-icon-line.feature-highway-motorway-link{background-position:-320px -25px;} +.preset-icon-line.feature-highway-trunk-link{background-position:-380px -25px;} +.preset-icon-line.feature-highway-primary-link{background-position:-440px -25px;} +.preset-icon-line.feature-highway-secondary-link{background-position:-500px -25px;} +.preset-icon-line.feature-highway-tertiary-link{background-position:-560px -25px;} +.preset-icon-line.feature-highway-residential{background-position:-620px -25px;} +.preset-icon-line.feature-highway-unclassified{background-position:-680px -25px;} +.preset-icon-line.feature-highway-service{background-position:-740px -25px;} +.preset-icon-line.feature-highway-road{background-position:-800px -25px;} +.preset-icon-line.feature-highway-track{background-position:-860px -25px;} +.preset-icon-line.feature-highway-living-street{background-position:-920px -25px;} +.preset-icon-line.feature-highway-path{background-position:-980px -25px;} +.preset-icon-line.feature-highway-cycleway{background-position:-1040px -25px;} +.preset-icon-line.feature-highway-footway{background-position:-1100px -25px;} +.preset-icon-line.feature-highway-bridleway{background-position:-1160px -25px;} +.preset-icon-line.feature-highway-steps{background-position:-1220px -25px;} +.preset-icon-line.feature-railway-rail{background-position:-1280px -25px;} +.preset-icon-line.feature-railway-disused{background-position:-1340px -25px;} +.preset-icon-line.feature-railway-abandoned{background-position:-1400px -25px;} +.preset-icon-line.feature-railway-subway{background-position:-1460px -25px;} +.preset-icon-line.feature-railway-light-rail{background-position:-1520px -25px;} +.preset-icon-line.feature-railway-monorail{background-position:-1580px -25px;} +.preset-icon-line.feature-waterway-river{background-position:-1640px -25px;} +.preset-icon-line.feature-waterway-stream{background-position:-1700px -25px;} +.preset-icon-line.feature-waterway-canal{background-position:-1760px -25px;} +.preset-icon-line.feature-waterway-ditch{background-position:-1820px -25px;} +.preset-icon-line.feature-power-line{background-position:-1880px -25px;} +.preset-icon-line.feature-other-line{background-position:-1940px -25px;} +.preset-icon-line.feature-category-roads{background-position:-2000px -25px;} +.preset-icon-line.feature-category-rail{background-position:-2060px -25px;} +.preset-icon-line.feature-category-path{background-position:-2120px -25px;} +.preset-icon-line.feature-category-water{background-position:-2180px -25px;} +.preset-icon-line.feature-ferry{background-position:-2240px -25px;} +.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-boundary{background-position:-200px -25px;} +.preset-icon-relation.feature-route{background-position:-260px -25px;} +.preset-icon-relation.feature-route-road{background-position:-320px -25px;} +.preset-icon-relation.feature-route-bicycle{background-position:-380px -25px;} +.preset-icon-relation.feature-route-foot{background-position:-440px -25px;} +.preset-icon-relation.feature-route-bus{background-position:-500px -25px;} +.preset-icon-relation.feature-route-train{background-position:-560px -25px;} +.preset-icon-relation.feature-route-detour{background-position:-620px -25px;} +.preset-icon-relation.feature-route-tram{background-position:-680px -25px;} +.preset-icon-relation.feature-route-ferry{background-position:-740px -25px;} +.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;}