X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/92d284a67823dbcbafdb91d2c0d757755c8ff5fd..2d7a678772b50c04042b03ed58c94b8c4d3e9d15:/vendor/assets/iD/iD.css.erb diff --git a/vendor/assets/iD/iD.css.erb b/vendor/assets/iD/iD.css.erb index 69374d7db..da02a4086 100644 --- a/vendor/assets/iD/iD.css.erb +++ b/vendor/assets/iD/iD.css.erb @@ -184,14 +184,17 @@ img.tile-removing { opacity: 0; } +use { pointer-events: none; } + /* base styles */ -path { - fill: none; -} +.layer-osm path:not(.oneway) { fill: none; } /* IE needs :not(.oneway) */ -use { - pointer-events: none; -} +/* the above fill: none rule affects paths in shadow dom only in Firefox */ +.layer-osm use.icon path { fill: #333; } /* FF svg Maki icons */ +.layer-osm .turn use path { fill: #000; } /* FF turn restriction icons */ +#turn-only-shape2, #turn-only-u-shape2 { fill: #7092FF; } /* FF turn-only, turn-only-u */ +#turn-no-shape2, #turn-no-u-shape2 { fill: #E06D5F; } /* FF turn-no, turn-no-u */ +#turn-yes-shape2, #turn-yes-u-shape2 { fill: #8CD05F; } /* FF turn-yes, turn-yes-u */ g.point .shadow, g.vertex .shadow, @@ -203,11 +206,6 @@ path.shadow { pointer-events: stroke; } -.shadow { - -webkit-transition: 200ms; - -moz-transition: 200ms; - transition: 200ms; -} /* points */ @@ -293,11 +291,11 @@ g.vertex.vertex-hover { g.vertex.hover:not(.selected) .shadow, g.midpoint.hover:not(.selected) .shadow { - fill-opacity: 0.3; + fill-opacity: 0.5; } g.vertex.selected .shadow { - fill-opacity: 0.5; + fill-opacity: 0.7; } .mode-draw-area g.midpoint, @@ -310,13 +308,18 @@ g.vertex.selected .shadow { /* lines */ +.preset-icon .icon.other-line { + color: #fff; + fill: #777; +} + path.line { stroke-linecap: round; stroke-linejoin: bevel; } path.stroke { - stroke: black; + stroke: #000; stroke-width: 4; } @@ -327,7 +330,7 @@ path.shadow { } path.shadow.hover:not(.selected) { - stroke-opacity: 0.3; + stroke-opacity: 0.4; } path.shadow.selected { @@ -335,12 +338,12 @@ path.shadow.selected { } path.line.stroke { - stroke: white; + stroke: #fff; stroke-width: 2; } path.area.stroke { - stroke: white; + stroke: #fff; stroke-width: 1; } path.area.fill { @@ -399,17 +402,23 @@ path.fill.tag-leisure-park { background-color: rgba(140, 208, 95, 0.3); } +path.stroke.tag-amenity-swimming_pool, +path.stroke.tag-leisure-swimming_pool, path.stroke.tag-natural-water, path.stroke.tag-landuse-basin, path.stroke.tag-landuse-reservoir { stroke: rgb(119, 211, 222); } +path.fill.tag-amenity-swimming_pool, +path.fill.tag-leisure-swimming_pool, path.fill.tag-landuse-basin, path.fill.tag-landuse-reservoir, path.fill.tag-natural-water { stroke: rgba(119, 211, 222, 0.3); fill: rgba(119, 211, 222, 0.3); } +.preset-icon-fill-area.tag-amenity-swimming_pool, +.preset-icon-fill-area.tag-leisure-swimming_pool, .preset-icon-fill-area.tag-landuse-basin, .preset-icon-fill-area.tag-landuse-reservoir, .preset-icon-fill-area.tag-natural-water { @@ -450,8 +459,7 @@ path.fill.tag-landuse-residential { } .preset-icon-fill-area.tag-landuse-residential { border-color: rgb(196, 189, 25); - background: none; - box-shadow: inset 0 0 0 5px rgba(196, 189, 25, 0.3); + background: rgba(196, 189, 25, 0.3); } path.stroke.tag-landuse-retail, @@ -466,8 +474,7 @@ path.fill.tag-landuse-commercial { .preset-icon-fill-area.tag-landuse-retail, .preset-icon-fill-area.tag-landuse-commercial { border-color: rgb(214, 136, 26); - background: none; - box-shadow: inset 0 0 0 5px rgba(214, 136, 26, 0.3); + background-color: rgba(214, 136, 26, 0.3); } path.stroke.tag-landuse-industrial { @@ -479,8 +486,7 @@ path.fill.tag-landuse-industrial { } .preset-icon-fill-area.tag-landuse-industrial { border-color: rgb(228, 164, 245); - background: none; - box-shadow: inset 0 0 0 5px rgba(228, 164, 245, 0.3); + background-color: rgba(228, 164, 245, 0.3); } path.stroke.tag-landuse-quarry { @@ -510,10 +516,10 @@ path.fill.tag-landuse-landfill { .pattern-color-construction { fill: rgba(196, 189, 25, 0.2); } -path.stroke.tag-landuse.tag-ephemeral { +path.stroke.tag-landuse.tag-status { stroke: rgb(196, 189, 25); } -.preset-icon-fill-area.tag-landuse.tag-ephemeral { +.preset-icon-fill-area.tag-landuse.tag-status { border-color: rgb(196, 189, 25); background-color: rgba(196, 189, 25, 0.2); } @@ -612,10 +618,6 @@ path.fill.tag-amenity-parking { background-color: rgba(170, 170, 170, 0.3); } -path.fill.tag-place, -path.fill.tag-boundary { - fill: none; -} /* highway areas */ @@ -627,6 +629,11 @@ path.stroke.area.tag-highway { /* wide highways */ +.preset-icon .icon.tag-highway.other-line { + color: #fff; + fill: #777; +} + path.shadow.tag-highway { stroke-width:16; } @@ -649,33 +656,47 @@ path.stroke.tag-highway { stroke-width:4; } +.preset-icon .icon.highway-motorway, +.preset-icon .icon.highway-motorway-link { + color: #CF2081; + fill: #70372f; +} path.stroke.tag-highway-motorway, path.stroke.tag-highway-motorway_link, path.stroke.tag-motorway { - stroke:#58a9ed; + stroke:#CF2081; } - path.casing.tag-highway-motorway, path.casing.tag-highway-motorway_link, path.casing.tag-motorway { - stroke:#2c5476; + stroke:#70372f; } +.preset-icon .icon.highway-trunk, +.preset-icon .icon.highway-trunk-link { + color: #DD2F22; + fill: #70372f; +} path.stroke.tag-highway-trunk, path.stroke.tag-highway-trunk_link, path.stroke.tag-trunk { - stroke:#8cd05f; + stroke:#DD2F22; } path.casing.tag-highway-trunk, path.casing.tag-highway-trunk_link, path.casing.tag-trunk { - stroke:#46682f; + stroke:#70372f; } +.preset-icon .icon.highway-primary, +.preset-icon .icon.highway-primary-link { + color: #F99806; + fill: #70372f; +} path.stroke.tag-highway-primary, path.stroke.tag-highway-primary_link, path.stroke.tag-primary { - stroke:#e06d5f; + stroke:#F99806; } path.casing.tag-highway-primary, path.casing.tag-highway-primary_link, @@ -683,37 +704,122 @@ path.casing.tag-primary { stroke:#70372f; } +.preset-icon .icon.highway-secondary, +.preset-icon .icon.highway-secondary-link { + color: #F3F312; + fill: #70372f; +} path.stroke.tag-highway-secondary, path.stroke.tag-highway-secondary_link, path.stroke.tag-secondary { - stroke:#eab056; + stroke:#F3F312; } path.casing.tag-highway-secondary, path.casing.tag-highway-secondary_link, path.casing.tag-secondary { - stroke:#75582b; + stroke:#70372f; } +.preset-icon .icon.highway-tertiary, +.preset-icon .icon.highway-tertiary-link { + color: #FFF9B3; + fill: #70372f; +} path.stroke.tag-highway-tertiary, path.stroke.tag-highway-tertiary_link, path.stroke.tag-tertiary { - stroke:#ffff7e; + stroke:#FFF9B3; } path.casing.tag-highway-tertiary, path.casing.tag-highway-tertiary_link, path.casing.tag-tertiary { - stroke:#7f7f3f; + stroke:#70372f; } -path.stroke.tag-highway-unclassified, -path.stroke.tag-unclassified { - stroke:#eaeaea; +.legacy-carto .preset-icon .icon.highway-motorway, +.legacy-carto .preset-icon .icon.highway-motorway-link { + color: #58a9ed; + fill: #2c5476; } -path.casing.tag-highway-unclassified, -path.casing.tag-unclassified { - stroke:#444; +.legacy-carto path.stroke.tag-highway-motorway, +.legacy-carto path.stroke.tag-highway-motorway_link, +.legacy-carto path.stroke.tag-motorway { + stroke:#58a9ed; +} +.legacy-carto path.casing.tag-highway-motorway, +.legacy-carto path.casing.tag-highway-motorway_link, +.legacy-carto path.casing.tag-motorway { + stroke:#2c5476; +} + +.legacy-carto .preset-icon .icon.highway-trunk, +.legacy-carto .preset-icon .icon.highway-trunk-link { + color: #8cd05f; + fill: #46682f; +} +.legacy-carto path.stroke.tag-highway-trunk, +.legacy-carto path.stroke.tag-highway-trunk_link, +.legacy-carto path.stroke.tag-trunk { + stroke:#8cd05f; +} +.legacy-carto path.casing.tag-highway-trunk, +.legacy-carto path.casing.tag-highway-trunk_link, +.legacy-carto path.casing.tag-trunk { + stroke:#46682f; +} + +.legacy-carto .preset-icon .icon.highway-primary, +.legacy-carto .preset-icon .icon.highway-primary-link { + color: #e06d5f; + fill: #70372f; +} +.legacy-carto path.stroke.tag-highway-primary, +.legacy-carto path.stroke.tag-highway-primary_link, +.legacy-carto path.stroke.tag-primary { + stroke:#e06d5f; +} +.legacy-carto path.casing.tag-highway-primary, +.legacy-carto path.casing.tag-highway-primary_link, +.legacy-carto path.casing.tag-primary { + stroke:#70372f; +} + +.legacy-carto .preset-icon .icon.highway-secondary, +.legacy-carto .preset-icon .icon.highway-secondary-link { + color: #eab056; + fill: #75582b; +} +.legacy-carto path.stroke.tag-highway-secondary, +.legacy-carto path.stroke.tag-highway-secondary_link, +.legacy-carto path.stroke.tag-secondary { + stroke:#eab056; +} +.legacy-carto path.casing.tag-highway-secondary, +.legacy-carto path.casing.tag-highway-secondary_link, +.legacy-carto path.casing.tag-secondary { + stroke:#75582b; +} + +.legacy-carto .preset-icon .icon.highway-tertiary, +.legacy-carto .preset-icon .icon.highway-tertiary-link { + color: #ffff7e; + fill: #7f7f3f; +} +.legacy-carto path.stroke.tag-highway-tertiary, +.legacy-carto path.stroke.tag-highway-tertiary_link, +.legacy-carto path.stroke.tag-tertiary { + stroke:#ffff7e; +} +.legacy-carto path.casing.tag-highway-tertiary, +.legacy-carto path.casing.tag-highway-tertiary_link, +.legacy-carto path.casing.tag-tertiary { + stroke:#7f7f3f; } +.preset-icon .icon.highway-residential { + color: #fff; + fill: #444; +} path.stroke.tag-highway-residential, path.stroke.tag-residential { stroke:#fff; @@ -725,6 +831,7 @@ path.casing.tag-residential { /* narrow highways */ path.stroke.tag-highway-living_street, +path.stroke.tag-highway-unclassified, path.stroke.tag-highway-service, path.stroke.tag-highway-track, path.stroke.tag-highway-path, @@ -736,6 +843,7 @@ path.stroke.tag-highway-pedestrian, path.stroke.tag-highway-steps, path.stroke.tag-highway-road, path.stroke.tag-living_street, +path.stroke.tag-unclassified, path.stroke.tag-service, path.stroke.tag-track, path.stroke.tag-path, @@ -749,6 +857,7 @@ path.stroke.tag-road { stroke-width:4; } path.casing.tag-highway-living_street, +path.casing.tag-highway-unclassified, path.casing.tag-highway-service, path.casing.tag-highway-track, path.casing.tag-highway-path, @@ -760,6 +869,7 @@ path.casing.tag-highway-pedestrian, path.casing.tag-highway-steps, path.casing.tag-highway-road, path.casing.tag-living_street, +path.casing.tag-unclassified, path.casing.tag-service, path.casing.tag-track, path.casing.tag-path, @@ -774,6 +884,7 @@ path.casing.tag-road { } .low-zoom path.stroke.tag-highway-living_street, +.low-zoom path.stroke.tag-highway-unclassified, .low-zoom path.stroke.tag-highway-service, .low-zoom path.stroke.tag-highway-track, .low-zoom path.stroke.tag-highway-path, @@ -785,6 +896,7 @@ path.casing.tag-road { .low-zoom path.stroke.tag-highway-steps, .low-zoom path.stroke.tag-highway-road, .low-zoom path.stroke.tag-living_street, +.low-zoom path.stroke.tag-unclassified, .low-zoom path.stroke.tag-service, .low-zoom path.stroke.tag-track, .low-zoom path.stroke.tag-path, @@ -798,6 +910,7 @@ path.casing.tag-road { stroke-width:2; } .low-zoom path.casing.tag-highway-living_street, +.low-zoom path.casing.tag-highway-unclassified, .low-zoom path.casing.tag-highway-service, .low-zoom path.casing.tag-highway-track, .low-zoom path.casing.tag-highway-path, @@ -809,6 +922,7 @@ path.casing.tag-road { .low-zoom path.casing.tag-highway-steps, .low-zoom path.casing.tag-highway-road, .low-zoom path.casing.tag-living_street, +.low-zoom path.casing.tag-unclassified, .low-zoom path.casing.tag-service, .low-zoom path.casing.tag-track, .low-zoom path.casing.tag-path, @@ -822,7 +936,10 @@ path.casing.tag-road { stroke-width:4; } - +.preset-icon .icon.highway-living-street { + color: #ccc; + fill: #fff; +} path.stroke.tag-highway-living_street, path.stroke.tag-living_street { stroke:#ccc; @@ -832,6 +949,11 @@ path.casing.tag-living_street { stroke:#fff; } +.preset-icon .icon.highway-footway.tag-highway-corridor, +.preset-icon .icon.highway-footway.tag-highway-pedestrian { + color: #8cd05f; + fill: #fff; +} path.stroke.tag-highway-corridor, path.stroke.tag-highway-pedestrian, path.stroke.tag-corridor, @@ -842,19 +964,46 @@ path.stroke.tag-pedestrian { path.casing.tag-highway-corridor, path.casing.tag-highway-pedestrian, path.casing.tag-corridor, -path.casing.tag-pedestrian { - stroke:#8cd05f; +path.casing.tag-pedestrian, +path.casing.tag-highway-corridor.tag-unpaved, +path.casing.tag-highway-pedestrian.tag-unpaved, +path.casing.tag-corridor.tag-unpaved, +path.casing.tag-pedestrian.tag-unpaved { + stroke: #8cd05f; + stroke-linecap: round; + stroke-dasharray: none; +} + +.preset-icon .icon.highway-unclassified { + color: #eee; + fill: #444; +} +path.stroke.tag-highway-unclassified, +path.stroke.tag-unclassified { + stroke:#eee; +} +path.casing.tag-highway-unclassified, +path.casing.tag-unclassified { + stroke:#444; } +.preset-icon .icon.highway-road { + color: #9e9e9e; + fill: #666; +} path.stroke.tag-highway-road, path.stroke.tag-road { stroke:#9e9e9e; } path.casing.tag-highway-road, path.casing.tag-road { - stroke:#444; + stroke:#666; } +.preset-icon .icon.highway-service { + color: #fff; + fill: #666; +} path.stroke.tag-highway-service, path.stroke.tag-service { stroke:#fff; @@ -864,16 +1013,17 @@ path.casing.tag-service { stroke:#666; } +.preset-icon .icon.highway-track { + color: #eaeaea; + fill: #c5b59f; +} path.stroke.tag-highway-track, path.stroke.tag-track { - stroke: #ccc; + stroke: #c5b59f; } path.casing.tag-highway-track, path.casing.tag-track { - stroke: #996600; - stroke-linecap: butt; - stroke-dasharray: 6, 6; - stroke-width:7; + stroke: #746f6f; } path.stroke.tag-highway-path, @@ -884,39 +1034,85 @@ path.stroke.tag-highway-bridleway { stroke-dasharray: 6, 6; } -path.casing.tag-highway-path{ +path.casing.tag-highway-path, +path.casing.tag-highway-path.tag-unpaved { stroke: #c5b59f; + stroke-linecap: round; + stroke-dasharray: none; } path.casing.tag-highway-footway, path.casing.tag-highway-cycleway, -path.casing.tag-highway-bridleway { +path.casing.tag-highway-bridleway, +path.casing.tag-highway-footway.tag-unpaved, +path.casing.tag-highway-cycleway.tag-unpaved, +path.casing.tag-highway-bridleway.tag-unpaved { stroke: #fff; + stroke-linecap: round; + stroke-dasharray: none; } +.preset-icon .icon.category-path, +.preset-icon .icon.highway-path { + color: #746f6f; + fill: #c5b59f; +} path.stroke.tag-highway-path { stroke: #746f6f; } + +.preset-icon .icon.tag-route-foot, +.preset-icon .icon.tag-route-hiking, +.preset-icon .icon.highway-footway { + color: #ae8681; + fill: #fff; +} path.stroke.tag-highway-footway { stroke: #ae8681; } + +.preset-icon .icon.highway-footway.tag-crossing { + color: #444; +} +path.stroke.tag-highway-footway.tag-crossing { + stroke: #444; + stroke-dasharray: 6, 4; +} + +.preset-icon .icon.tag-route-bicycle, +.preset-icon .icon.highway-cycleway { + color: #58a9ed; + fill: #fff; +} path.stroke.tag-highway-cycleway { stroke: #58a9ed; } + +.preset-icon .icon.highway-bridleway { + color: #e06d5f; + fill: #fff; +} path.stroke.tag-highway-bridleway { stroke: #e06d5f; } +.preset-icon .icon.highway-steps { + color: #81d25c; + fill: #fff; +} path.stroke.tag-highway-steps { stroke: #81d25c; stroke-linecap: butt; stroke-dasharray: 3, 3; } -path.casing.tag-highway-steps { +path.casing.tag-highway-steps, +path.casing.tag-highway-steps.tag-unpaved { stroke: #fff; + stroke-linecap: round; + stroke-dasharray: none; } -/* aeroways */ +/* aeroways */ path.stroke.tag-aeroway-taxiway { stroke: #805C80; stroke-width: 4; @@ -949,19 +1145,30 @@ path.fill.tag-aeroway-apron { /* railways */ - +.preset-icon .icon.tag-railway.other-line { + color: #fff; + fill: #777; +} +.preset-icon .icon.tag-railway { + color: #555; + fill: #eee; +} path.stroke.tag-railway { stroke: #eee; stroke-width: 2; stroke-linecap: butt; stroke-dasharray: 12,12; } - path.casing.tag-railway { stroke: #555; stroke-width: 4; } +.preset-icon .icon.tag-railway-disused, +.preset-icon .icon.tag-railway-abandoned { + color: #999; + fill: #eee; +} path.stroke.tag-railway-abandoned { stroke: #eee; } @@ -969,8 +1176,12 @@ path.casing.tag-railway-abandoned { stroke: #999; } +.preset-icon .icon.tag-railway-subway { + color: #222; + fill: #bbb; +} path.stroke.tag-railway-subway { - stroke: #666; + stroke: #bbb; } path.casing.tag-railway-subway { stroke: #222; @@ -994,7 +1205,18 @@ path.casing.tag-railway-platform { stroke: none; } + /* waterways */ +.preset-icon .icon.tag-waterway.other-line { + color: #77d3de; + fill: #77d3de; +} +.preset-icon .icon.category-water, +.preset-icon .icon.tag-route-ferry, +.preset-icon .icon.tag-waterway { + color: #77d3de; + fill: #fff; +} path.fill.tag-waterway { stroke: rgba(119, 211, 222, 0.3); @@ -1017,6 +1239,9 @@ path.casing.tag-waterway-river { stroke-width: 6; } +.preset-icon .icon.tag-waterway-ditch { + color: #6591ff; +} path.stroke.tag-waterway-ditch { stroke: #6591ff; stroke-width: 1; @@ -1026,7 +1251,31 @@ path.casing.tag-waterway-ditch { stroke-width: 3; } +path.area.stroke.tag-waterway-dock, +path.area.stroke.tag-waterway-boatyard, +path.area.stroke.tag-waterway-fuel { + stroke: white; + stroke-width: 1; +} +path.area.casing.tag-waterway-dock, +path.area.casing.tag-waterway-boatyard, +path.area.casing.tag-waterway-fuel { + stroke: none; +} +path.area.fill.tag-waterway-dock, +path.area.fill.tag-waterway-boatyard, +path.area.fill.tag-waterway-fuel { + stroke: rgba(255, 255, 255, 0.3); + fill: rgba(255, 255, 255, 0.3); +} + + /* power */ +.preset-icon .icon.tag-man_made-pipeline, +.preset-icon .icon.tag-power { + color: #939393; + fill: #939393; +} path.stroke.tag-power { stroke: #939393; @@ -1036,8 +1285,8 @@ path.casing.tag-power { stroke: none; } -/* boundary */ +/* boundaries */ path.stroke.tag-boundary { stroke: #fff; stroke-width: 2; @@ -1054,8 +1303,8 @@ path.casing.tag-boundary-national_park { stroke: #b0e298; } -/* barriers */ +/* barriers */ path.stroke.tag-barrier { stroke: #ddd; stroke-width: 3px; @@ -1068,19 +1317,19 @@ path.stroke.tag-barrier { stroke-dasharray: 8, 2, 2, 2; } -/* bridges */ +/* bridges */ path.casing.tag-bridge { stroke-width: 16; stroke-opacity: 0.6; stroke: #000; stroke-linecap: butt; + stroke-dasharray: none; } path.shadow.tag-bridge { stroke-width: 22; } - path.casing.line.tag-railway.tag-bridge, path.casing.tag-highway-living_street.tag-bridge, path.casing.tag-highway-path.tag-bridge, @@ -1094,7 +1343,6 @@ path.casing.tag-highway-cycleway.tag-bridge, path.casing.tag-highway-bridleway.tag-bridge { stroke-width: 10; } - path.shadow.line.tag-railway.tag-bridge, path.shadow.tag-highway-living_street.tag-bridge, path.shadow.tag-highway-path.tag-bridge, @@ -1108,15 +1356,9 @@ path.shadow.tag-highway-cycleway.tag-bridge, path.shadow.tag-highway-bridleway.tag-bridge { stroke-width: 17; } - - .low-zoom path.casing.tag-bridge { stroke-width: 10; - stroke-opacity: 0.6; - stroke: #000; - stroke-linecap: butt; } - .low-zoom path.shadow.tag-bridge { stroke-width: 14; } @@ -1149,18 +1391,19 @@ path.shadow.tag-highway-bridleway.tag-bridge { stroke-width: 13; } -/* tunnels */ +/* tunnels */ path.stroke.tag-tunnel { stroke-opacity: 0.3; } - path.casing.tag-tunnel { stroke-opacity: 0.5; + stroke-linecap: butt; + stroke-dasharray: none; } -/* embankments / cuttings */ +/* embankments / cuttings */ path.casing.tag-embankment, path.casing.tag-cutting { stroke-opacity: 0.5; @@ -1186,42 +1429,38 @@ path.shadow.tag-cutting { } -/* Ephemeral */ - -path.stroke.tag-ephemeral, -path.casing.tag-ephemeral { +/* Surface - unpaved */ +path.casing.tag-unpaved { + stroke: #ccc; stroke-linecap: butt; - stroke-dasharray: 7, 3; + stroke-dasharray: 4, 3; } - -.low-zoom path.stroke.tag-ephemeral, -.low-zoom path.casing.tag-ephemeral { - stroke-linecap: butt; - stroke-dasharray: 5, 2; +.low-zoom path.casing.tag-unpaved { + stroke-dasharray: 3, 2; } - -text { - font-size:10px; - pointer-events: none; - color: #222; - opacity: 1; +path.casing.tag-bridge.tag-unpaved { + stroke: #000; + stroke-dasharray: 4, 3; } - -.oneway .textpath.tag-waterway { - fill: #002F35; +.low-zoom path.casing.tag-bridge.tag-unpaved { + stroke: #000; + stroke-dasharray: 3, 2; } -marker#oneway-marker path { - fill:#000; - opacity: .5; -} -path.oneway { - stroke-width: 6px; +/* Status (e.g. construction, proposed, abandoned) */ +path.stroke.tag-status, +path.casing.tag-status { + stroke-linecap: butt; + stroke-dasharray: 7, 3; +} +.low-zoom path.stroke.tag-status, +.low-zoom path.casing.tag-status { + stroke-dasharray: 5, 2; } -/* Buildings */ +/* Buildings */ path.stroke.tag-building, path.stroke.tag-amenity-shelter { stroke: rgb(224, 110, 95); @@ -1238,9 +1477,23 @@ path.fill.tag-amenity-shelter { } -/* - * Labels - */ +/* Labels / Markers */ + +text { + font-size:10px; + pointer-events: none; + color: #222; + opacity: 1; +} + +.oneway .textpath.tag-waterway { + fill: #002F35; +} + +path.oneway { + stroke-width: 6px; +} + text.arealabel-halo, text.linelabel-halo, @@ -1410,7 +1663,7 @@ g.turn circle { } /* GPX Paths */ -div.layer-gpx { +.layer-gpx { pointer-events: none; } @@ -1424,43 +1677,84 @@ text.gpx { fill: #FF26D4; } -/* Mapillary Layer */ +/* Mapillary Image Layer */ -.layer-mapillary { +.layer-mapillary-images { pointer-events: none; } -.layer-mapillary g { +.layer-mapillary-images .viewfield-group { pointer-events: visible; cursor: pointer; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-select-mapillary.png") %>) 6 1, pointer; /* FF */ } -.layer-mapillary g * { +.layer-mapillary-images .viewfield-group * { stroke-width: 1; stroke: #444; fill: #ffc600; + z-index: 50; } -.layer-mapillary g:hover * { +.layer-mapillary-images .viewfield-group:hover * { stroke-width: 1; stroke: #333; fill: #ff9900; + z-index: 60; } -.layer-mapillary g.selected * { +.layer-mapillary-images .viewfield-group.selected * { stroke-width: 2; stroke: #222; fill: #ff5800; + z-index: 60; } -.layer-mapillary g:hover path.viewfield, -.layer-mapillary g.selected path.viewfield, -.layer-mapillary g path.viewfield { +.layer-mapillary-images .viewfield-group:hover path.viewfield, +.layer-mapillary-images .viewfield-group.selected path.viewfield, +.layer-mapillary-images .viewfield-group path.viewfield { stroke-width: 0; fill-opacity: 0.6; } +/* Mapillary Sign Layer */ + +.layer-mapillary-signs { + pointer-events: none; +} + +.layer-mapillary-signs .icon-sign body { + min-width: 20px; + height: 28px; + width: 28px; + border: 2px solid transparent; + pointer-events: visible; + cursor: pointer; /* Opera */ + cursor: url(<%= asset_path("iD/img/cursor-select-mapillary.png") %>) 6 1, pointer; /* FF */ + z-index: 70; +} + +.layer-mapillary-signs .icon-sign:hover body { + border: 2px solid rgba(255,198,0,0.8); + z-index: 80; + } + +.layer-mapillary-signs .icon-sign.selected body { + border: 2px solid rgba(255,0,0,0.8); + z-index: 80; + } + +.layer-mapillary-signs .icon-sign .t { + font-size: 28px; + z-index: 70; + position: absolute; +} + +.layer-mapillary-signs .icon-sign:hover .t, +.layer-mapillary-signs .icon-sign.selected .t { + z-index: 80; +} + /* Modes */ .mode-draw-line .vertex.active, @@ -1501,14 +1795,14 @@ text.gpx { } .fill-wireframe path.shadow.hover:not(.selected) { - stroke-opacity: 0.2; + stroke-opacity: 0.4; } .fill-wireframe path.shadow.selected { - stroke-opacity: 0.4; + stroke-opacity: 0.6; } .fill-wireframe .point, -.fill-wireframe .icon, +.fill-wireframe .areaicon, .fill-wireframe path.casing, .fill-wireframe path.fill, .fill-wireframe path.oneway { @@ -1728,6 +2022,10 @@ table.tags, table.tags td, table.tags th { padding: 4px; } +::-ms-clear { + display: none; +} + /* Grid ------------------------------------------------------- */ @@ -1813,6 +2111,8 @@ ul li { list-style: none;} .fl { float: left;} .fr { float: right;} +.al { left: 0; } +.ar { right: 0; } div.hide, form.hide, @@ -2003,19 +2303,38 @@ button.save.has-count .count::before { /* Icons */ .icon { - display:inline-block; - vertical-align:top; - width:20px; - height:20px; - background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 0; - text-indent:-9999px; - overflow:hidden; - } - -.icon-pre-text { + vertical-align: top; + width: 20px; + height: 20px; +} + +.icon.inline { + vertical-align: text-top; + width: 14px; + height: 14px; + margin: 0px 3px; +} + +.icon.pre-text { margin-right: 3px; } +.icon.light { + color: #fff; +} + +.icon.created { + color: #00ca07; +} + +.icon.modified { + color: #666; +} + +.icon.deleted { + color: #ea0000; +} + .user-icon { max-height: 20px; max-width: 20px; @@ -2024,107 +2343,6 @@ button.save.has-count .count::before { border-radius: 3px; } -/* Definitions for every icon */ -.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;} -.icon.apply { background-position: -120px 0;} -.icon.save { background-position: -140px 0;} -.icon.close { background-position: -160px 0;} -.icon.delete { background-position: -180px 0;} -.icon.remove { background-position: -200px 0;} -.icon.inspect { background-position: -220px 0;} -.icon.plus { background-position: -240px 0;} -.icon.search { background-position: -280px 0;} -.icon.geocode { background-position: -280px 0;} -.icon.layers { background-position: -300px 0;} -.icon.avatar { background-position: -320px 0;} -.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.vertex { background-position: -580px 0;} -.icon.data { background-position: -600px 0;} - -.icon.inspect.light { background-position: -220px -20px;} -.icon.plus.light { background-position: -240px -20px;} -.icon.zoom-in { background-position: -240px -20px;} -.icon.zoom-out { background-position: -260px -20px;} -.icon.geocode.light { background-position: -280px -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.data.light { background-position: -600px -20px;} - -.icon.back.blue { background-position: -420px -20px;} -.icon.forward.blue { background-position: -440px -20px;} - -.icon.full-screen { background-position: -620px -20px;} -.active .icon.full-screen { background-position: -640px -20px;} - -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;} -button.disabled .icon.undo { background-position: -80px -40px;} -button.disabled .icon.redo { background-position: -100px -40px;} -button[disabled] .apply.icon { background-position: -120px -40px;} -button[disabled] .close.icon { background-position: -160px -40px;} -button[disabled] .delete.icon { background-position: -180px -40px;} -button[disabled] .icon.remove { background-position: -200px -40px;} -button[disabled] .icon.inspect { background-position: -220px -40px;} -button[disabled] .icon.zoom-in { background-position: -240px -40px;} -button[disabled] .icon.zoom-out { background-position: -260px -40px;} -button[disabled] .icon.geocode { background-position: -280px -40px;} -button[disabled] .icon.layers { background-position: -300px -40px;} -button[disabled] .icon.avatar { background-position: -320px -40px;} -button[disabled] .icon.nearby { background-position: -340px -40px;} -button[disabled] .icon.data { background-position: -600px -40px;} - -.icon.point.deleted { background-position: -480px -80px;} -.icon.line.deleted { background-position: -500px -80px;} -.icon.area.deleted { background-position: -520px -80px;} - -.icon.point.created { background-position: -480px -100px;} -.icon.line.created { background-position: -500px -100px;} -.icon.area.created { background-position: -520px -100px;} - -.icon.point.modified { background-position: -22px 0; } - -.icon.modified { opacity: .5; } - -/* 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;} -.icon.address { background-position: -20px -200px;} -.icon.telephone { background-position: -40px -200px;} -.icon.website { background-position: -60px -200px;} -.icon.elevation { background-position: -80px -200px;} -.icon.wikipedia { background-position: -100px -200px;} -.icon.note { background-position: -120px -200px;} -.icon.wheelchair { background-position: -140px -200px;} /* ToolBar / Persistent UI Elements ------------------------------------------------------- */ @@ -2155,7 +2373,7 @@ a:hover .icon.out-link { background-position: -500px -14px;} white-space: nowrap; text-overflow: ellipsis; overflow: hidden; - padding: 20px; + padding: 20px 20px 20px 40px; } .header button, @@ -2171,12 +2389,25 @@ a:hover .icon.out-link { background-position: -500px -14px;} height: 100%; } -.preset-list-pane .header button { +.entity-editor-pane .header button.preset-close, +.preset-list-pane .header button.preset-choose { position: absolute; right: 0; top: 0; } +.entity-editor-pane .header button.preset-choose { + position: absolute; + left: 0; + top: 0; +} + +.preset-choose { + font-size: 16px; + line-height: 1.25; + font-weight: bold; +} + .modal > button { position: absolute; right: 0; @@ -2242,7 +2473,6 @@ a:hover .icon.out-link { background-position: -500px -14px;} .mapillary-image { position: absolute; - right: 0; bottom: 30px; width: 330px; height: 250px; @@ -2256,7 +2486,6 @@ a:hover .icon.out-link { background-position: -500px -14px;} height: auto; background-color: rgba(0,0,0,.5); bottom: 0; - right: 0; padding: 5px 10px; } @@ -2399,17 +2628,64 @@ a:hover .icon.out-link { background-position: -500px -14px;} background: #ececec; } -.preset-icon { +.preset-icon-fill-area { + cursor: inherit; + height: 40px; + width: 40px; + margin: auto; + position: absolute; + left: 10px; + top: 10px; +} + +.preset-icon-frame { position: absolute; - top: 17px; - left: 17px; + top: 7px; + left: 7px; + height: 42px; + width: 42px; margin: auto; } -.preset-icon-line, -.preset-icon-relation { - top: 0; - left: 0; +.preset-icon-frame .icon { + width: 46px; + height: 46px; +} + +.preset-icon-60 { + position: absolute; + top: 0px; + left: 0px; + margin: auto; +} + +.preset-icon-60 .icon { + width: 60px; + height: 60px; +} + +.preset-icon-44 { + position: absolute; + top: 9px; + left: 8px; + margin: auto; +} + +.preset-icon-44 .icon { + width: 44px; + height: 44px; +} + +.preset-icon-32 { + position: absolute; + top: 14px; + left: 13px; /* Maki icons off center? */ + margin: auto; +} + +.preset-icon-32 .icon { + width: 32px; + height: 32px; } .preset-list-button .label { @@ -2444,6 +2720,10 @@ a:hover .icon.out-link { background-position: -500px -14px;} background: #fafafa; } +.preset-list-item button.tag-reference-button:hover { + background: #f1f1f1; +} + .preset-list-item button.tag-reference-button .icon { opacity: .5; } @@ -2489,32 +2769,16 @@ a:hover .icon.out-link { background-position: -500px -14px;} margin-top: -10px; } -/* Preset icon colors */ - -.preset-icon-fill-area { - cursor: inherit; - height: 39px; - width: 39px; - margin: auto; - position: absolute; - left: 10px; - top: 10px; -} - -.preset-icon-fill-area:after { - content: ''; - left: -4px; - top: -4px; - height: 45px; - width: 45px; - position: absolute; - background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 -80px; -} /* preset form basics */ .inspector-preset { overflow: hidden; + padding-bottom: 10px; +} + +.inspector-preset a.hide-toggle { + margin: 0 20px 10px 20px; } .inspector-preset .preset-form { @@ -2523,25 +2787,10 @@ a:hover .icon.out-link { background-position: -500px -14px;} border-radius: 8px; } -.entity-editor-pane .preset-list-item::after { - content: ""; - position: absolute; - height: 0; - width: 0; - bottom: 0; - left: 0; - right: 0; - margin: auto; - border: solid rgba(0, 0, 0, 0); - border-width: 10px; - border-bottom-color: #ececec; -} - .entity-editor-pane .preset-list-item .preset-list-button-wrap { margin-bottom: 0; } - .form-field { margin-bottom: 10px; width: 100%; @@ -2589,7 +2838,10 @@ a:hover .icon.out-link { background-position: -500px -14px;} width: 10%; height: 100%; border-radius: 0; - background: #fafafa; + background: #f6f6f6; +} +.form-label button:hover { + background: #f1f1f1; } .form-label .modified-icon, @@ -2609,6 +2861,7 @@ a:hover .icon.out-link { background-position: -500px -14px;} min-height: 30px; border-top: 0; border-radius: 0 0 4px 4px; + overflow: hidden; } .form-field textarea { @@ -3334,6 +3587,10 @@ div.full-screen > button:hover { border: 1px solid #CCC; } +.imagery-faq { + margin-bottom: 10px; +} + .background-control .adjustments button:last-child { border: 0; } @@ -3356,6 +3613,10 @@ div.full-screen > button:hover { color: #7092FF; } +.layer-list:empty { + display: none; +} + .layer-list > li:first-child { border-radius: 3px 3px 0 0; } @@ -3380,6 +3641,18 @@ div.full-screen > button:hover { background: #E8EBFF; } +.layer-list li.best > div.best { + display: inline-block; + padding: 5px; + float: right; +} + +/* make sure tooltip fits in map-control panel */ +/* if too wide, placement will be wrong the first time it displays */ +.layer-list li.best .tooltip-inner { + max-width: 160px; +} + .layer-list label { display: block; padding: 5px 10px; @@ -3675,7 +3948,7 @@ div.full-screen > button:hover { user-select: none; } -#supersurface, .layer-layer { +#supersurface, .layer { position: absolute; top: 0; left: 0; @@ -3751,7 +4024,7 @@ div.full-screen > button:hover { border-bottom: 1px solid black; } -.infobox .selection-heading { +.infobox .infobox-heading { display: block; border-radius: 4px 0 0 0; padding: 5px 10px; @@ -3781,6 +4054,7 @@ div.full-screen > button:hover { right:0; bottom:0; border-radius: 0; + pointer-events: none; } #attrib { @@ -3789,7 +4063,6 @@ div.full-screen > button:hover { margin-bottom: 5px; float: left; clear: both; - pointer-events: none; } #attrib * { pointer-events: all; } @@ -3822,19 +4095,20 @@ div.full-screen > button:hover { width: 100%; float: left; clear: both; + pointer-events: all; } #scale-block { display: table-cell; vertical-align: bottom; width: 250px; - height: 30px; + max-height: 30px; float: left; clear: left; } #info-block { - float: right; + max-height: 30px; clear: right; } @@ -3861,6 +4135,7 @@ div.full-screen > button:hover { text-align: right; margin-right: 10px; clear: right; + overflow: hidden; } #about-list li { @@ -3998,7 +4273,7 @@ div.full-screen > button:hover { } .modal-actions button:before, -.save-success a.button:before, +.save-success a.button.osm:before, .walkthrough a:before { display: block; content: ''; @@ -4007,7 +4282,7 @@ div.full-screen > button:hover { max-width: 100px; margin: auto; margin-bottom: 10px; - background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 -220px; + background:transparent url(<%= asset_path("iD/img/iD-sprite.svg") %>) no-repeat -200px -460px; } .modal-actions :first-child { @@ -4022,46 +4297,38 @@ div.full-screen > button:hover { ------------------------------------------------------- */ .modal-actions .restore:before { - background-position: -600px -220px; + background-position: -500px -460px; } .modal-actions .reset:before { - background-position: -700px -220px; + background-position: -600px -460px; } /* Success Modal ------------------------------------------------------- */ .save-success p { - padding: 15px; + padding: 15px 15px 0 15px; +} +.save-success a.details { + padding-left: 15px; } - .save-success .button { padding-top: 15px; } -.save-success .button.social { - height: 80px; +.save-success a.button.social { + height: auto; } -.save-success .button.social:before { - height: 50px; +.save-success .icon.social { + height: 80px; + width: 80px; + color: #7092FF; } .save-success .button.osm:before { - background-position: 0px -220px; -} - -.save-success .button.twitter:before { - background-position: -100px -245px; -} - -.save-success .button.facebook:before { - background-position: -200px -245px; -} - -.save-success .button.google:before { - background-position: -300px -245px; + background-position: -200px -460px; } /* Splash Modal @@ -4069,11 +4336,11 @@ div.full-screen > button:hover { .modal-actions .walkthrough:before, .walkthrough a:before { - background-position: -400px -220px; + background-position: -300px -460px; } .modal-actions .start:before { - background-position: -500px -220px; + background-position: -400px -460px; } /* Commit Modal @@ -4231,10 +4498,6 @@ div.full-screen > button:hover { margin-right:10px; } -.icon.zoom-in-invert { - background-position: -240px -40px; -} - /* Tooltips ------------------------------------------------------- */ @@ -4443,27 +4706,35 @@ div.full-screen > button:hover { } .radial-menu-background { + fill: none; stroke: black; stroke-opacity: 0.5; } -.radial-menu-item { - fill: white; -} - -.radial-menu-item:hover { - fill: #ececec; +.radial-menu-item circle { + fill: #eee; } -.radial-menu-item:active { - fill: #ececec; +.radial-menu-item circle:active, +.radial-menu-item circle:hover { + fill: #fff; } -.radial-menu-item.disabled { +.radial-menu-item.disabled circle { cursor: auto; fill: rgba(255,255,255,.5); } +.radial-menu-item use { + fill: #222; + color: #79f; +} + +.radial-menu-item.disabled use { + fill: rgba(32,32,32,.5); + color: rgba(40,40,40,.5); +} + .lasso-box { fill-opacity:0.1; stroke: #fff; @@ -4476,7 +4747,6 @@ div.full-screen > button:hover { ------------------------------------------------------- */ @media only screen and (max-width: 840px) { - #bar .icon.icon-pre-text { margin-right: 0;} /* override hide for save button */ #bar .save .label { display: block;} } @@ -4598,7 +4868,7 @@ div.full-screen > button:hover { content: ""; height: 80px; width: 200px; - background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 -320px; + background:transparent url(<%= asset_path("iD/img/iD-sprite.svg") %>) no-repeat 0 -320px; } .intro-areas-add .tooltip-inner::before { @@ -4618,189 +4888,6 @@ div.full-screen > button:hover { .huge-modal-button .illustration { height: 100px; width: 100px; - background: rgba(0, 0, 0, 0) url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat -400px -220px; + background: rgba(0, 0, 0, 0) url(<%= asset_path("iD/img/iD-sprite.svg") %>) no-repeat -300px -460px; margin: auto; } -/* 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-circle-stroked{background-position:-0px -0px;} -.feature-circle{background-position:-54px -0px;} -.feature-square-stroked{background-position:-108px -0px;} -.feature-square{background-position:-162px -0px;} -.feature-triangle-stroked{background-position:-216px -0px;} -.feature-triangle{background-position:-0px -24px;} -.feature-star-stroked{background-position:-54px -24px;} -.feature-star{background-position:-108px -24px;} -.feature-cross{background-position:-162px -24px;} -.feature-marker-stroked{background-position:-216px -24px;} -.feature-marker{background-position:-0px -48px;} -.feature-religious-jewish{background-position:-54px -48px;} -.feature-religious-christian{background-position:-108px -48px;} -.feature-religious-muslim{background-position:-162px -48px;} -.feature-cemetery{background-position:-216px -48px;} -.feature-rocket{background-position:-0px -72px;} -.feature-airport{background-position:-54px -72px;} -.feature-heliport{background-position:-108px -72px;} -.feature-rail{background-position:-162px -72px;} -.feature-rail-metro{background-position:-216px -72px;} -.feature-rail-light{background-position:-0px -96px;} -.feature-bus{background-position:-54px -96px;} -.feature-fuel{background-position:-108px -96px;} -.feature-parking{background-position:-162px -96px;} -.feature-parking-garage{background-position:-216px -96px;} -.feature-airfield{background-position:-0px -120px;} -.feature-roadblock{background-position:-54px -120px;} -.feature-ferry{background-position:-108px -120px;} -.feature-harbor{background-position:-162px -120px;} -.feature-bicycle{background-position:-216px -120px;} -.feature-park{background-position:-0px -144px;} -.feature-park2{background-position:-54px -144px;} -.feature-museum{background-position:-108px -144px;} -.feature-lodging{background-position:-162px -144px;} -.feature-monument{background-position:-216px -144px;} -.feature-zoo{background-position:-0px -168px;} -.feature-garden{background-position:-54px -168px;} -.feature-campsite{background-position:-108px -168px;} -.feature-theatre{background-position:-162px -168px;} -.feature-art-gallery{background-position:-216px -168px;} -.feature-pitch{background-position:-0px -192px;} -.feature-soccer{background-position:-54px -192px;} -.feature-america-football{background-position:-108px -192px;} -.feature-tennis{background-position:-162px -192px;} -.feature-basketball{background-position:-216px -192px;} -.feature-baseball{background-position:-0px -216px;} -.feature-golf{background-position:-54px -216px;} -.feature-swimming{background-position:-108px -216px;} -.feature-cricket{background-position:-162px -216px;} -.feature-skiing{background-position:-216px -216px;} -.feature-school{background-position:-0px -240px;} -.feature-college{background-position:-54px -240px;} -.feature-library{background-position:-108px -240px;} -.feature-post{background-position:-162px -240px;} -.feature-fire-station{background-position:-216px -240px;} -.feature-town-hall{background-position:-0px -264px;} -.feature-police{background-position:-54px -264px;} -.feature-prison{background-position:-108px -264px;} -.feature-embassy{background-position:-162px -264px;} -.feature-beer{background-position:-216px -264px;} -.feature-restaurant{background-position:-0px -288px;} -.feature-cafe{background-position:-54px -288px;} -.feature-shop{background-position:-108px -288px;} -.feature-fast-food{background-position:-162px -288px;} -.feature-bar{background-position:-216px -288px;} -.feature-bank{background-position:-0px -312px;} -.feature-grocery{background-position:-54px -312px;} -.feature-cinema{background-position:-108px -312px;} -.feature-pharmacy{background-position:-162px -312px;} -.feature-hospital{background-position:-216px -312px;} -.feature-danger{background-position:-0px -336px;} -.feature-industrial{background-position:-54px -336px;} -.feature-warehouse{background-position:-108px -336px;} -.feature-commercial{background-position:-162px -336px;} -.feature-building{background-position:-216px -336px;} -.feature-place-of-worship{background-position:-0px -360px;} -.feature-alcohol-shop{background-position:-54px -360px;} -.feature-logging{background-position:-108px -360px;} -.feature-oil-well{background-position:-162px -360px;} -.feature-slaughterhouse{background-position:-216px -360px;} -.feature-dam{background-position:-0px -384px;} -.feature-water{background-position:-54px -384px;} -.feature-wetland{background-position:-108px -384px;} -.feature-disability{background-position:-162px -384px;} -.feature-telephone{background-position:-216px -384px;} -.feature-emergency-telephone{background-position:-0px -408px;} -.feature-toilets{background-position:-54px -408px;} -.feature-waste-basket{background-position:-108px -408px;} -.feature-music{background-position:-162px -408px;} -.feature-land-use{background-position:-216px -408px;} -.feature-city{background-position:-0px -432px;} -.feature-town{background-position:-54px -432px;} -.feature-village{background-position:-108px -432px;} -.feature-farm{background-position:-162px -432px;} -.feature-bakery{background-position:-216px -432px;} -.feature-dog-park{background-position:-0px -456px;} -.feature-lighthouse{background-position:-54px -456px;} -.feature-clothing-store{background-position:-108px -456px;} -.feature-polling-place{background-position:-162px -456px;} -.feature-playground{background-position:-216px -456px;} -.feature-entrance{background-position:-0px -480px;} -.feature-heart{background-position:-54px -480px;} -.feature-london-underground{background-position:-108px -480px;} -.feature-minefield{background-position:-162px -480px;} -.feature-rail-underground{background-position:-216px -480px;} -.feature-rail-above{background-position:-0px -504px;} -.feature-camera{background-position:-54px -504px;} -.feature-laundry{background-position:-108px -504px;} -.feature-car{background-position:-162px -504px;} -.feature-suitcase{background-position:-216px -504px;} -.feature-hairdresser{background-position:-0px -528px;} -.feature-chemist{background-position:-54px -528px;} -.feature-mobilephone{background-position:-108px -528px;} -.feature-scooter{background-position:-162px -528px;} -.feature-gift{background-position:-216px -528px;} -.feature-ice-cream{background-position:-0px -552px;} -.preset-icon-line.feature-highway-motorway{background-position:-20px -25px;} -.preset-icon-line.feature-highway-trunk{background-position:-80px -25px;} -.preset-icon-line.feature-highway-primary{background-position:-140px -25px;} -.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:-141px -25px;} -.preset-icon-relation.feature-boundary{background-position:-200px -25px;} -.preset-icon-relation.feature-route{background-position:-260px -25px;} -.preset-icon-relation.feature-route-road{background-position:-320px -25px;} -.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;} -.preset-icon-relation.feature-restriction-no-straight-on{background-position:-980px -25px;} -.preset-icon-relation.feature-restriction-no-u-turn{background-position:-1040px -25px;} -.preset-icon-relation.feature-restriction-no-left-turn{background-position:-1100px -25px;} -.preset-icon-relation.feature-restriction-no-right-turn{background-position:-1160px -25px;} -.preset-icon-relation.feature-restriction-only-straight-on{background-position:-1220px -25px;} -.preset-icon-relation.feature-restriction-only-left-turn{background-position:-1280px -25px;} -.preset-icon-relation.feature-restriction-only-right-turn{background-position:-1340px -25px;}