X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/76d8bed5d12fc10a785366bfa1a411aa4e0c39d8..0814b4096c443e2ab3c09baa058aa81a00d205d1:/vendor/assets/iD/iD.css.erb?ds=sidebyside diff --git a/vendor/assets/iD/iD.css.erb b/vendor/assets/iD/iD.css.erb index 44176cdf5..758d1518c 100644 --- a/vendor/assets/iD/iD.css.erb +++ b/vendor/assets/iD/iD.css.erb @@ -161,37 +161,18 @@ input::-moz-focus-inner { .cf:after { clear: both; } -/* tiles */ -img.tile { - position:absolute; - transform-origin:0 0; - -ms-transform-origin:0 0; - -webkit-transform-origin:0 0; - -moz-transform-origin:0 0; - -o-transform-origin:0 0; - - opacity: 0; - - -webkit-transition: opacity 200ms linear; - transition: opacity 200ms linear; - -moz-transition: opacity 200ms linear; -} -img.tile-loaded { - opacity: 1; -} -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 +184,6 @@ path.shadow { pointer-events: stroke; } -.shadow { - -webkit-transition: 200ms; - -moz-transition: 200ms; - transition: 200ms; -} /* points */ @@ -224,6 +200,7 @@ g.point .shadow { stroke-opacity: 0; } +g.point.related:not(.selected) .shadow, g.point.hover:not(.selected) .shadow { stroke-opacity: 0.5; } @@ -253,10 +230,23 @@ g.vertex.shared .stroke { } g.midpoint .fill { - fill: #ddd; - stroke: black; - stroke-opacity: .5; - opacity: .5; + fill: #eee; + stroke: #444; + stroke-opacity: .6; + opacity: .7; +} + +g.midpoint.tag-highway-corridor .fill, +g.midpoint.tag-highway-pedestrian .fill, +g.midpoint.tag-highway-steps .fill, +g.midpoint.tag-highway-path .fill, +g.midpoint.tag-highway-footway .fill, +g.midpoint.tag-highway-cycleway .fill, +g.midpoint.tag-highway-bridleway .fill { + fill: #fff; + stroke: #333; + stroke-opacity: .8; + opacity: .8; } g.vertex .shadow, @@ -278,13 +268,15 @@ g.vertex.vertex-hover { display: block; } +g.vertex.related:not(.selected) .shadow, g.vertex.hover:not(.selected) .shadow, +g.midpoint.related: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, @@ -297,13 +289,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; } @@ -313,252 +310,340 @@ path.shadow { stroke-opacity: 0; } +path.shadow.related:not(.selected), path.shadow.hover:not(.selected) { - stroke-opacity: 0.3; + stroke-opacity: 0.4; } path.shadow.selected { stroke-opacity: 0.7; } +path.line.stroke { + stroke: #fff; + stroke-width: 2; +} + path.area.stroke { - stroke: white; + stroke: #fff; stroke-width: 1; } - path.area.fill { - fill:#fff; - fill-opacity:0.3; + stroke-width: 0; + stroke: rgba(255, 255, 255, 0.3); + fill: rgba(255, 255, 255, 0.3); fill-rule: evenodd; } - -path.line.stroke { - stroke: white; - stroke-width: 2; +.preset-icon-fill-area { + border: 1px solid rgb(170, 170, 170); + background-color: rgba(170, 170, 170, 0.3); } path.stroke.tag-natural { - stroke: #b6e199; + stroke: rgb(182, 225, 153); } path.fill.tag-natural { - fill: #b6e199; -} - -path.stroke.tag-natural-water { - stroke: #77d3de; + stroke: rgba(182, 225, 153, 0.3); + fill: rgba(182, 225, 153, 0.3); } -path.fill.tag-natural-water { - fill: #77d3de; +.preset-icon-fill-area.tag-natural { + border-color: rgb(182, 225, 153); + background-color: rgba(182, 225, 153, 0.3); } -path.stroke.tag-amenity-school { - stroke: #ffff94; +path.stroke.tag-landuse, +path.stroke.tag-natural-wood, +path.stroke.tag-natural-tree, +path.stroke.tag-natural-grassland, +path.stroke.tag-natural-grass, +path.stroke.tag-leisure-nature_reserve, +path.stroke.tag-leisure-pitch, +path.stroke.tag-leisure-park { + stroke: rgb(140, 208, 95); } -path.fill.tag-amenity-school { - fill: #ffff94; - fill-opacity: 0.2; +path.fill.tag-landuse, +path.fill.tag-natural-wood, +path.fill.tag-natural-tree, +path.fill.tag-natural-grassland, +path.fill.tag-natural-grass, +path.fill.tag-leisure-nature_reserve, +path.fill.tag-leisure-pitch, +path.fill.tag-leisure-park { + stroke: rgba(140, 208, 95, 0.3); + fill: rgba(140, 208, 95, 0.3); +} +.preset-icon-fill-area.tag-landuse, +.preset-icon-fill-area.tag-natural-wood, +.preset-icon-fill-area.tag-natural-tree, +.preset-icon-fill-area.tag-natural-grassland, +.preset-icon-fill-area.tag-natural-grass, +.preset-icon-fill-area.tag-leisure-nature_reserve, +.preset-icon-fill-area.tag-leisure-pitch, +.preset-icon-fill-area.tag-leisure-park { + border-color: rgb(140, 208, 95); + background-color: rgba(140, 208, 95, 0.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 { + border-color: rgb(119, 211, 222); + background-color: rgba(119, 211, 222, 0.3); +} + +path.stroke.tag-amenity-childcare, +path.stroke.tag-amenity-kindergarten, +path.stroke.tag-amenity-school, +path.stroke.tag-amenity-college, path.stroke.tag-amenity-university { - stroke: #ffff94; + stroke: rgb(255, 255, 148); } +path.fill.tag-amenity-childcare, +path.fill.tag-amenity-kindergarten, +path.fill.tag-amenity-school, +path.fill.tag-amenity-college, path.fill.tag-amenity-university { - fill: #ffff94; - fill-opacity: 0.1; + stroke: rgba(255, 255, 148, 0.15); + fill: rgba(255, 255, 148, 0.15); +} +.preset-icon-fill-area.tag-amenity-childcare, +.preset-icon-fill-area.tag-amenity-kindergarten, +.preset-icon-fill-area.tag-amenity-school, +.preset-icon-fill-area.tag-amenity-college, +.preset-icon-fill-area.tag-amenity-university { + border-color: rgb(232, 232, 0); + background-color: rgba(255, 255, 148, 0.15); } -path.stroke.tag-building { - stroke: #e06e5f; +path.stroke.tag-landuse-residential { + stroke: rgb(196, 189, 25); } -path.fill.tag-building { - fill: #e06e5f; +path.fill.tag-landuse-residential { + stroke: rgba(196, 189, 25, 0.3); + fill: rgba(196, 189, 25, 0.3); } - -/* Landuse */ - - -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; +.preset-icon-fill-area.tag-landuse-residential { + border-color: rgb(196, 189, 25); + background: rgba(196, 189, 25, 0.3); } path.stroke.tag-landuse-retail, path.stroke.tag-landuse-commercial { - stroke: #eab056; + stroke: rgb(214, 136, 26); } - -path.stroke.tag-landuse-industrial { - stroke: #e4a4f5; +path.fill.tag-landuse-retail, +path.fill.tag-landuse-commercial { + stroke: rgba(214, 136, 26, 0.3); + fill: rgba(214, 136, 26, 0.3); +} +.preset-icon-fill-area.tag-landuse-retail, +.preset-icon-fill-area.tag-landuse-commercial { + border-color: rgb(214, 136, 26); + background-color: rgba(214, 136, 26, 0.3); } -path.stroke.tag-landuse-basin, -path.stroke.tag-landuse-reservoir { - stroke: #77d3de; +path.stroke.tag-landuse-industrial, +path.stroke.tag-power-plant { + stroke: rgb(228, 164, 245); +} +path.fill.tag-landuse-industrial, +path.fill.tag-power-plant { + stroke: rgba(228, 164, 245, 0.3); + fill: rgba(228, 164, 245, 0.3); +} +.preset-icon-fill-area.tag-landuse-industrial, +.preset-icon-fill-area.tag-power-plant { + border-color: rgb(228, 164, 245); + background-color: rgba(228, 164, 245, 0.3); } +path.stroke.tag-natural-bare_rock, +path.stroke.tag-natural-scree, path.stroke.tag-landuse-quarry { - stroke: #a6957b; + stroke: rgb(166, 149, 123); } - -path.stroke.tag-landuse-residential, -path.stroke.tag-landuse-construction { - stroke: #e06e5f; +path.fill.tag-natural-bare_rock, +path.fill.tag-natural-scree, +path.fill.tag-landuse-quarry { + stroke: rgba(166, 149, 123, 0.2); + fill: rgba(166, 149, 123, 0.2); } - -path.stroke.tag-landuse-meadow, -path.stroke.tag-natural-wetland { - stroke: #b6e199; +.preset-icon-fill-area.tag-natural-bare_rock, +.preset-icon-fill-area.tag-natural-scree, +.preset-icon-fill-area.tag-landuse-quarry { + border-color: rgb(166, 149, 123); + background-color: rgba(166, 149, 123, 0.2); } -path.stroke.tag-natural-beach { - stroke: #ffff7e; +path.stroke.tag-landuse-landfill { + stroke: rgb(255, 153, 51); } - -path.stroke.tag-natural-scrub { - stroke: #dbf08b; +path.fill.tag-landuse-landfill { + stroke: rgba(255, 153, 51, 0.2); + fill: rgba(255, 153, 51, 0.2); } - -path.fill.tag-landuse, -path.fill.tag-natural-wood, -path.fill.tag-natural-tree, -path.fill.tag-natural-grassland, -path.fill.tag-natural-grass, -path.fill.tag-leisure-pitch, -path.fill.tag-leisure-park { - fill: #8cd05f; - fill-opacity: 0.2; +.preset-icon-fill-area.tag-landuse-landfill { + border-color: rgb(255, 153, 51); + background-color: rgba(255, 153, 51, 0.2); } -path.fill.tag-landuse-retail, -path.fill.tag-landuse-residential, -path.fill.tag-landuse-commercial, -path.fill.tag-landuse-industrial { - fill-opacity: 0.1; +.pattern-color-construction { + fill: rgba(196, 189, 25, 0.2); } - -path.fill.tag-natural-wetland, -path.fill.tag-natural-beach, -path.fill.tag-natural-scrub, -path.fill.tag-landuse-cemetery, -path.fill.tag-landuse-meadow, -path.fill.tag-landuse-farm, -path.fill.tag-landuse-farmland, -path.fill.tag-landuse-construction, -path.fill.tag-landuse-orchard { - /* background color is applied a further opacity later */ - fill-opacity: 0.8; +path.stroke.tag-landuse.tag-status, +path.stroke.tag-landuse-construction { + stroke: rgb(196, 189, 25); } - -.pattern-color-beach, -.pattern-color-scrub, -.pattern-color-meadow, -.pattern-color-wetland, -.pattern-color-cemetery, -.pattern-color-farm, -.pattern-color-farmland, -.pattern-color-construction, -.pattern-color-orchard { - fill-opacity: 0.2; +.preset-icon-fill-area.tag-landuse.tag-status, +.preset-icon-fill-area.tag-landuse-construction { + border-color: rgb(196, 189, 25); + background-color: rgba(196, 189, 25, 0.2); } -path.fill.tag-landuse-basin, -path.fill.tag-landuse-reservoir { - fill: #77d3de; +path.stroke.tag-military, +path.stroke.tag-landuse-military { + stroke: rgb(214, 136, 26); } - -path.fill.tag-landuse-quarry { - fill: #a6957b; +path.fill.tag-military, +path.fill.tag-landuse-military { + stroke: rgba(214, 136, 26, 0.2); + fill: rgba(214, 136, 26, 0.2); } - -path.fill.tag-landuse-residential { - fill: #e06e5f; +.preset-icon-fill-area.tag-military, +.preset-icon-fill-area.tag-landuse-military { + border-color: rgb(214, 136, 26); + background-color: rgba(214, 136, 26, 0.2); } -path.fill.tag-landuse-farm, -path.fill.tag-landuse-farmland { - fill: url(#pattern-farmland) #8cd05f; +.pattern-color-wetland { + fill: rgba(182, 225, 153, 0.2); } - -.pattern-color-farm, -.pattern-color-farmland { - fill: url(#pattern-farmland) #8cd05f; +path.stroke.tag-natural-wetland { + stroke: rgb(182, 225, 153); } - -path.fill.tag-landuse-meadow { - fill: url(#pattern-meadow) #b6e199; +.preset-icon-fill-area.tag-natural-wetland { + border-color: rgb(182, 225, 153); + background-color: rgba(182, 225, 153, 0.2); } + .pattern-color-meadow { - fill: #b6e199; + fill: rgba(182, 225, 153, 0.2); } - -path.fill.tag-natural-wetland { - fill: url(#pattern-wetland) #b6e199; +path.stroke.tag-landuse-meadow { + stroke: rgb(182, 225, 153); } -.pattern-color-wetland { - fill: #B6E199; +.preset-icon-fill-area.tag-landuse-meadow { + border-color: rgb(182, 225, 153); + background-color: rgba(182, 225, 153, 0.2); } -path.fill.tag-natural-beach { - fill: url(#pattern-beach) #ffff7e; +.pattern-color-beach, +.pattern-color-sand { + fill: rgba(255, 255, 126, 0.2); } -.pattern-color-beach { - fill: #ffff7e; +path.stroke.tag-natural-beach, +path.stroke.tag-natural-sand { + stroke: rgb(255, 255, 126); } - -path.fill.tag-natural-scrub { - fill: url(#pattern-scrub) #dbf08b; +.preset-icon-fill-area.tag-natural-beach, +.preset-icon-fill-area.tag-natural-sand { + border-color: rgb(255, 255, 126); + background-color: rgba(255, 255, 126, 0.2); } + .pattern-color-scrub { - fill: #dbf08b; + fill: rgba(219, 240, 139, 0.2); } - -path.fill.tag-landuse-cemetery { - fill: url(#pattern-cemetery) #8cd05f; +path.stroke.tag-natural-scrub { + stroke: rgb(219, 240, 139); } -.pattern-color-cemetery { - fill: #8cd05f +.preset-icon-fill-area.tag-natural-scrub { + border-color: rgb(219, 240, 139); + background-color: rgba(219, 240, 139, 0.2); } -path.fill.tag-landuse-orchard { - fill: url(#pattern-orchard) #8cd05f; +.pattern-color-farm, +.pattern-color-farmland { + fill: rgba(140, 208, 95, 0.2); } -.pattern-color-orchard { - fill: #8cd05f +path.stroke.tag-landuse-farm, +path.stroke.tag-landuse-farmland { + stroke: rgb(140, 208, 95); +} +.preset-icon-fill-area.tag-landuse-farm, +.preset-icon-fill-area.tag-landuse-farmland { + background-color: rgba(140, 208, 95, 0.2); } -path.fill.tag-landuse-construction { - fill: url(#pattern-construction) #e06e5f; +path.stroke.tag-landuse-farmyard { + stroke: rgb(245, 220, 186); } -.pattern-color-construction { - fill: #e06e5f; +path.fill.tag-landuse-farmyard { + stroke: rgba(245, 220, 186, 0.3); + fill: rgba(245, 220, 186, 0.3); } - -path.fill.tag-landuse-retail, -path.fill.tag-landuse-commercial { - fill: #eab056; +.preset-icon-fill-area.tag-landuse-farmyard { + border-color: rgb(245, 220, 186); + background: rgba(245, 220, 186, 0.3); } -path.fill.tag-landuse-industrial { - fill: #e4a4f5; +.pattern-color-cemetery, +.pattern-color-orchard { + fill: rgba(140, 208, 95, 0.2); +} +path.stroke.tag-landuse-cemetery, +path.stroke.tag-landuse-orchard { + stroke: rgb(140, 208, 95); +} +.preset-icon-fill-area.tag-landuse-cemetery, +.preset-icon-fill-area.tag-landuse-orchard { + background-color: rgba(140, 208, 95, 0.2); } path.stroke.tag-amenity-parking { - stroke: #aaa; + stroke: rgb(170, 170, 170); } path.fill.tag-amenity-parking { - fill: #aaa; + stroke: rgba(170, 170, 170, 0.3); + fill: rgba(170, 170, 170, 0.3); +} +.preset-icon-fill-area.tag-amenity-parking { + border-color: rgb(170, 170, 170); + background-color: rgba(170, 170, 170, 0.3); } -path.fill.tag-place, -path.fill.tag-boundary { - fill: none; + +/* highway areas */ + +path.stroke.area.tag-highway { + stroke:#fff; + stroke-dasharray: none; + stroke-width: 2; } -/* highways */ +/* wide highways */ + +.preset-icon .icon.tag-highway.other-line { + color: #fff; + fill: #777; +} path.shadow.tag-highway { stroke-width:16; @@ -572,208 +657,467 @@ path.stroke.tag-highway { stroke-width:8; } -svg[data-zoom="16"] path.shadow.tag-highway { +.low-zoom path.shadow.tag-highway { stroke-width:12; } -svg[data-zoom="16"] path.casing.tag-highway { +.low-zoom path.casing.tag-highway { stroke-width:6; } -svg[data-zoom="16"] path.stroke.tag-highway { +.low-zoom path.stroke.tag-highway { stroke-width:4; } +.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-construction-motorway { - stroke:#58a9ed; +path.stroke.tag-motorway { + stroke:#CF2081; } - path.casing.tag-highway-motorway, path.casing.tag-highway-motorway_link, -path.casing.tag-construction-motorway { - stroke:#2c5476; +path.casing.tag-motorway { + 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-construction-trunk { - stroke:#8cd05f; +path.stroke.tag-trunk { + stroke:#DD2F22; } path.casing.tag-highway-trunk, path.casing.tag-highway-trunk_link, -path.casing.tag-construction-trunk { - stroke:#46682f; +path.casing.tag-trunk { + 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-construction-primary { - stroke:#e06d5f; +path.stroke.tag-primary { + stroke:#F99806; } path.casing.tag-highway-primary, path.casing.tag-highway-primary_link, -path.casing.tag-construction-primary { +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-construction-secondary { - stroke:#eab056; +path.stroke.tag-secondary { + stroke:#F3F312; } path.casing.tag-highway-secondary, path.casing.tag-highway-secondary_link, -path.casing.tag-construction-secondary { - stroke:#75582b; +path.casing.tag-secondary { + 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-construction-tertiary { - stroke:#ffff7e; +path.stroke.tag-tertiary { + stroke:#FFF9B3; } path.casing.tag-highway-tertiary, path.casing.tag-highway-tertiary_link, -path.casing.tag-construction-tertiary { - stroke:#7f7f3f; +path.casing.tag-tertiary { + stroke:#70372f; } -path.stroke.tag-highway-unclassified, -path.stroke.tag-construction-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-construction-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; } -path.stroke.tag-highway-residential, -path.stroke.tag-construction-residential { - stroke:#fff; +.legacy-carto .preset-icon .icon.highway-trunk, +.legacy-carto .preset-icon .icon.highway-trunk-link { + color: #8cd05f; + fill: #46682f; } -path.casing.tag-highway-residential, -path.casing.tag-construction-residential { - stroke:#444; +.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; } -path.stroke.tag-highway-living_street { - stroke:#ccc; - stroke-width:4; +.legacy-carto .preset-icon .icon.highway-primary, +.legacy-carto .preset-icon .icon.highway-primary-link { + color: #e06d5f; + fill: #70372f; } -path.casing.tag-highway-living_street { - stroke:#fff; - stroke-width:6; +.legacy-carto path.stroke.tag-highway-primary, +.legacy-carto path.stroke.tag-highway-primary_link, +.legacy-carto path.stroke.tag-primary { + stroke:#e06d5f; } - -path.stroke.line.tag-highway-pedestrian { - stroke:#fff; - stroke-dasharray: 2, 8; - stroke-width:4 !important; - shapeRendering: auto; +.legacy-carto path.casing.tag-highway-primary, +.legacy-carto path.casing.tag-highway-primary_link, +.legacy-carto path.casing.tag-primary { + stroke:#70372f; } -path.casing.line.tag-highway-pedestrian { - stroke:#8cd05f; - stroke-width:6 !important; + +.legacy-carto .preset-icon .icon.highway-secondary, +.legacy-carto .preset-icon .icon.highway-secondary-link { + color: #eab056; + fill: #75582b; } -path.stroke.area.tag-highway-pedestrian { - stroke:#fff; - stroke-width: 2; +.legacy-carto path.stroke.tag-highway-secondary, +.legacy-carto path.stroke.tag-highway-secondary_link, +.legacy-carto path.stroke.tag-secondary { + stroke:#eab056; } -path.fill.area.tag-highway-pedestrian { - fill:#ccc; +.legacy-carto path.casing.tag-highway-secondary, +.legacy-carto path.casing.tag-highway-secondary_link, +.legacy-carto path.casing.tag-secondary { + stroke:#75582b; } -path.stroke.tag-highway-service { - stroke:#fff; - stroke-width:4; +.legacy-carto .preset-icon .icon.highway-tertiary, +.legacy-carto .preset-icon .icon.highway-tertiary-link { + color: #ffff7e; + fill: #7f7f3f; } -path.casing.tag-highway-service { - stroke:#666; - stroke-width:6; -} -svg[data-zoom="16"] path.stroke.tag-highway-service { - stroke-width:2; +.legacy-carto path.stroke.tag-highway-tertiary, +.legacy-carto path.stroke.tag-highway-tertiary_link, +.legacy-carto path.stroke.tag-tertiary { + stroke:#ffff7e; } -svg[data-zoom="16"] path.casing.tag-highway-service { - stroke-width:4; +.legacy-carto path.casing.tag-highway-tertiary, +.legacy-carto path.casing.tag-highway-tertiary_link, +.legacy-carto path.casing.tag-tertiary { + stroke:#7f7f3f; } -path.stroke.tag-highway-track { - stroke: #fff; - stroke-width: 4; -} -path.casing.tag-highway-track { - stroke: #996600; - stroke-width: 6; - stroke-linecap: butt; - stroke-dasharray: 6, 6; +.preset-icon .icon.highway-residential { + color: #fff; + fill: #444; } -svg[data-zoom="16"] path.stroke.tag-highway-track { - stroke-width:2; +path.stroke.tag-highway-residential, +path.stroke.tag-residential { + stroke:#fff; } -svg[data-zoom="16"] path.casing.tag-highway-track { - stroke-width:4; +path.casing.tag-highway-residential, +path.casing.tag-residential { + stroke:#444; } -path.stroke.tag-highway-path { - stroke: #000; - stroke-width: 1 !important; - stroke-linecap: butt; - stroke-dasharray: 8, 4; +.preset-icon .icon.highway-unclassified { + color: #dcd9b9; + fill: #444; } -path.casing.tag-highway-path { - stroke-width: 1 !important; - stroke: #fff; +path.stroke.tag-highway-unclassified, +path.stroke.tag-unclassified { + stroke:#dcd9b9; } +path.casing.tag-highway-unclassified, +path.casing.tag-unclassified { + stroke:#444; +} + +/* narrow highways */ +path.stroke.tag-highway-living_street, +path.stroke.tag-highway-service, +path.stroke.tag-highway-track, +path.stroke.tag-highway-path, path.stroke.tag-highway-footway, path.stroke.tag-highway-cycleway, -path.stroke.tag-highway-bridleway { - stroke-width: 4; - stroke-linecap: butt; - stroke-dasharray: 6, 6; +path.stroke.tag-highway-bridleway, +path.stroke.tag-highway-corridor, +path.stroke.tag-highway-pedestrian, +path.stroke.tag-highway-steps, +path.stroke.tag-highway-road, +path.stroke.tag-living_street, +path.stroke.tag-service, +path.stroke.tag-track, +path.stroke.tag-path, +path.stroke.tag-footway, +path.stroke.tag-cycleway, +path.stroke.tag-bridleway, +path.stroke.tag-corridor, +path.stroke.tag-pedestrian, +path.stroke.tag-steps, +path.stroke.tag-road { + stroke-width:4; } +path.casing.tag-highway-living_street, +path.casing.tag-highway-service, +path.casing.tag-highway-track, +path.casing.tag-highway-path, path.casing.tag-highway-footway, path.casing.tag-highway-cycleway, -path.casing.tag-highway-bridleway { - stroke-width: 6; - stroke: #fff; +path.casing.tag-highway-bridleway, +path.casing.tag-highway-corridor, +path.casing.tag-highway-pedestrian, +path.casing.tag-highway-steps, +path.casing.tag-highway-road, +path.casing.tag-living_street, +path.casing.tag-service, +path.casing.tag-track, +path.casing.tag-path, +path.casing.tag-footway, +path.casing.tag-cycleway, +path.casing.tag-bridleway, +path.casing.tag-corridor, +path.casing.tag-pedestrian, +path.casing.tag-steps, +path.casing.tag-road { + stroke-width:6; } -svg[data-zoom="16"] path.stroke.tag-highway-footway, -svg[data-zoom="16"] path.stroke.tag-highway-cycleway, -svg[data-zoom="16"] path.stroke.tag-highway-bridleway { - stroke-width: 2; +.low-zoom path.stroke.tag-highway-living_street, +.low-zoom path.stroke.tag-highway-service, +.low-zoom path.stroke.tag-highway-track, +.low-zoom path.stroke.tag-highway-path, +.low-zoom path.stroke.tag-highway-footway, +.low-zoom path.stroke.tag-highway-cycleway, +.low-zoom path.stroke.tag-highway-bridleway, +.low-zoom path.stroke.tag-highway-corridor, +.low-zoom path.stroke.tag-highway-pedestrian, +.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-service, +.low-zoom path.stroke.tag-track, +.low-zoom path.stroke.tag-path, +.low-zoom path.stroke.tag-footway, +.low-zoom path.stroke.tag-cycleway, +.low-zoom path.stroke.tag-bridleway, +.low-zoom path.stroke.tag-corridor, +.low-zoom path.stroke.tag-pedestrian, +.low-zoom path.stroke.tag-steps, +.low-zoom path.stroke.tag-road { + stroke-width:2; } -svg[data-zoom="16"] path.casing.tag-highway-footway, -svg[data-zoom="16"] path.casing.tag-highway-cycleway, -svg[data-zoom="16"] path.casing.tag-highway-bridleway { - stroke-width: 4; +.low-zoom path.casing.tag-highway-living_street, +.low-zoom path.casing.tag-highway-service, +.low-zoom path.casing.tag-highway-track, +.low-zoom path.casing.tag-highway-path, +.low-zoom path.casing.tag-highway-footway, +.low-zoom path.casing.tag-highway-cycleway, +.low-zoom path.casing.tag-highway-bridleway, +.low-zoom path.casing.tag-highway-corridor, +.low-zoom path.casing.tag-highway-pedestrian, +.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-service, +.low-zoom path.casing.tag-track, +.low-zoom path.casing.tag-path, +.low-zoom path.casing.tag-footway, +.low-zoom path.casing.tag-cycleway, +.low-zoom path.casing.tag-bridleway, +.low-zoom path.casing.tag-corridor, +.low-zoom path.casing.tag-pedestrian, +.low-zoom path.casing.tag-steps, +.low-zoom path.casing.tag-road { + stroke-width:4; } -path.stroke.tag-highway-footway { - stroke: #ae8681; +.preset-icon .icon.highway-living-street { + color: #ccc; + fill: #fff; +} +path.stroke.tag-highway-living_street, +path.stroke.tag-living_street { + stroke:#ccc; +} +path.casing.tag-highway-living_street, +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, +path.stroke.tag-pedestrian { + stroke:#fff; + stroke-dasharray: 2, 8; +} +path.casing.tag-highway-corridor, +path.casing.tag-highway-pedestrian, +path.casing.tag-corridor, +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-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:#666; +} + +.preset-icon .icon.highway-service { + color: #fff; + fill: #666; +} +path.stroke.tag-highway-service, +path.stroke.tag-service { + stroke:#fff; +} +path.casing.tag-highway-service, +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: #c5b59f; +} +path.casing.tag-highway-track, +path.casing.tag-track { + stroke: #746f6f; +} + +path.stroke.tag-highway-path, +path.stroke.tag-highway-footway, +path.stroke.tag-highway-cycleway, +path.stroke.tag-highway-bridleway { + stroke-linecap: butt; + stroke-dasharray: 6, 6; +} + +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-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.tag-route-horse, +.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-width: 4; stroke-linecap: butt; stroke-dasharray: 3, 3; } -path.casing.tag-highway-steps { - stroke-width: 6; +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; @@ -793,121 +1137,95 @@ path.casing.tag-aeroway-runway { stroke-linecap: square; } path.fill.tag-aeroway-runway { - fill: #000; - fill-opacity: 0.6; + stroke: rgba(0, 0, 0, 0.6); + fill: rgba(0, 0, 0, 0.6); } path.stroke.tag-aeroway-apron { stroke: #805C80; } path.fill.tag-aeroway-apron { - fill: #805C80; - fill-opacity: 0.2; + stroke: rgba(128, 92, 128, 0.2); + fill: rgba(128, 92, 128, 0.2); } -/* bridges */ - -path.casing.tag-bridge { - stroke-width: 14; - stroke-opacity: 0.5; - stroke: #000; -} - -path.casing.tag-highway-living_street.tag-bridge, -path.casing.tag-highway-path.tag-bridge { - stroke-width: 6; -} - -path.casing.line.tag-highway-pedestrian, -path.casing.tag-highway-service.tag-bridge, -path.casing.tag-highway-track.tag-bridge, -path.casing.tag-highway-steps.tag-bridge, -path.casing.tag-highway-footway.tag-bridge, -path.casing.tag-highway-cycleway.tag-bridge, -path.casing.tag-highway-bridleway.tag-bridge { - stroke-width: 8; -} - -path.shadow.tag-highway-residential.tag-bridge { - stroke-width:22; -} - -path.shadow.tag-highway-living_street.tag-bridge, -path.shadow.tag-highway-path.tag-bridge, -path.shadow.line.tag-highway-pedestrian, -path.shadow.tag-highway-service.tag-bridge, -path.shadow.tag-highway-track.tag-bridge, -path.shadow.tag-highway-steps.tag-bridge, -path.shadow.tag-highway-footway.tag-bridge, -path.shadow.tag-highway-cycleway.tag-bridge, -path.shadow.tag-highway-bridleway.tag-bridge { - stroke-width: 16; -} - -/* tunnels */ - -path.stroke.tag-highway.tag-tunnel { - stroke-opacity: 0.3; -} - -path.casing.tag-highway.tag-tunnel { - stroke-opacity: 0.5; +/* railways */ +.preset-icon .icon.tag-railway.other-line { + color: #fff; + fill: #777; } - -path.stroke.tag-highway-construction, -path.casing.tag-highway-construction { - stroke-linecap: butt; - stroke-dasharray: 7, 7; +.preset-icon .icon.tag-railway { + color: #555; + fill: #eee; } - -/* construction */ - -svg[data-zoom="16"] path.stroke.tag-highway-construction, -svg[data-zoom="16"] path.casing.tag-highway-construction { - stroke-linecap: butt; - stroke-dasharray: 5, 5; -} - -/* railways */ - -.line.stroke.tag-railway { +path.stroke.tag-railway { stroke: #eee; stroke-width: 2; stroke-linecap: butt; stroke-dasharray: 12,12; } -.line.casing.tag-railway { +path.casing.tag-railway { stroke: #555; stroke-width: 4; } -.line.stroke.tag-railway-abandoned { +.preset-icon .icon.tag-railway-disused, +.preset-icon .icon.tag-railway-abandoned { + color: #999; + fill: #eee; +} +path.stroke.tag-railway-abandoned { stroke: #eee; } -.line.casing.tag-railway-abandoned { +path.casing.tag-railway-abandoned { stroke: #999; } -.line.stroke.tag-railway-subway { - stroke: #666; +.preset-icon .icon.tag-railway-subway { + color: #222; + fill: #bbb; } -.line.casing.tag-railway-subway { +path.stroke.tag-railway-subway { + stroke: #bbb; +} +path.casing.tag-railway-subway { stroke: #222; } -.line.stroke.tag-railway-platform { +path.stroke.tag-railway-platform { stroke: #999; stroke-width: 4; stroke-dasharray: none; } -.line.casing.tag-railway-platform { +path.casing.tag-railway-platform { stroke: none; } +.area.stroke.tag-railway { + stroke: white; + stroke-width: 1; + stroke-dasharray: none; +} +.area.casing.tag-railway { + stroke: none; +} + + /* waterways */ +.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 { - fill: #77d3de; + stroke: rgba(119, 211, 222, 0.3); + fill: rgba(119, 211, 222, 0.3); } path.stroke.tag-waterway { @@ -926,13 +1244,9 @@ path.casing.tag-waterway-river { stroke-width: 6; } -svg[data-zoom="16"] path.stroke.tag-waterway-river { - stroke-width: 4; -} -svg[data-zoom="16"] path.casing.tag-waterway-river { - stroke-width: 6; +.preset-icon .icon.tag-waterway-ditch { + color: #6591ff; } - path.stroke.tag-waterway-ditch { stroke: #6591ff; stroke-width: 1; @@ -942,7 +1256,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; @@ -952,8 +1290,8 @@ path.casing.tag-power { stroke: none; } -/* boundary */ +/* boundaries */ path.stroke.tag-boundary { stroke: #fff; stroke-width: 2; @@ -971,6 +1309,181 @@ path.casing.tag-boundary-national_park { } +/* barriers */ +path.stroke.tag-barrier { + stroke: #ddd; + stroke-width: 3px; + stroke-linecap: round; + stroke-dasharray: 15, 5, 1, 5; +} +.low-zoom path.stroke.tag-barrier { + stroke-width: 2px; + stroke-linecap: butt; + stroke-dasharray: 8, 2, 2, 2; +} + + +/* bridges */ +path.casing.tag-bridge { + stroke-width: 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, +path.casing.tag-highway-corridor.tag-bridge, +path.casing.line.tag-highway-pedestrian.tag-bridge, +path.casing.tag-highway-service.tag-bridge, +path.casing.tag-highway-track.tag-bridge, +path.casing.tag-highway-steps.tag-bridge, +path.casing.tag-highway-footway.tag-bridge, +path.casing.tag-highway-cycleway.tag-bridge, +path.casing.tag-highway-bridleway.tag-bridge { + stroke-width: 10; +} +path.shadow.line.tag-railway.tag-bridge, +path.shadow.tag-highway-living_street.tag-bridge, +path.shadow.tag-highway-path.tag-bridge, +path.shadow.tag-highway-corridor.tag-bridge, +path.shadow.line.tag-highway-pedestrian.tag-bridge, +path.shadow.tag-highway-service.tag-bridge, +path.shadow.tag-highway-track.tag-bridge, +path.shadow.tag-highway-steps.tag-bridge, +path.shadow.tag-highway-footway.tag-bridge, +path.shadow.tag-highway-cycleway.tag-bridge, +path.shadow.tag-highway-bridleway.tag-bridge { + stroke-width: 17; +} +.low-zoom path.casing.tag-bridge { + stroke-width: 10; +} +.low-zoom path.shadow.tag-bridge { + stroke-width: 14; +} + +.low-zoom path.casing.line.tag-railway.tag-bridge, +.low-zoom path.casing.tag-highway-living_street.tag-bridge, +.low-zoom path.casing.tag-highway-path.tag-bridge, +.low-zoom path.casing.tag-highway-corridor.tag-bridge, +.low-zoom path.casing.line.tag-highway-pedestrian.tag-bridge, +.low-zoom path.casing.tag-highway-service.tag-bridge, +.low-zoom path.casing.tag-highway-track.tag-bridge, +.low-zoom path.casing.tag-highway-steps.tag-bridge, +.low-zoom path.casing.tag-highway-footway.tag-bridge, +.low-zoom path.casing.tag-highway-cycleway.tag-bridge, +.low-zoom path.casing.tag-highway-bridleway.tag-bridge { + stroke-width: 6; +} + +.low-zoom path.shadow.line.tag-railway.tag-bridge, +.low-zoom path.shadow.tag-highway-living_street.tag-bridge, +.low-zoom path.shadow.tag-highway-path.tag-bridge, +.low-zoom path.shadow.tag-highway-corridor.tag-bridge, +.low-zoom path.shadow.line.tag-highway-pedestrian.tag-bridge, +.low-zoom path.shadow.tag-highway-service.tag-bridge, +.low-zoom path.shadow.tag-highway-track.tag-bridge, +.low-zoom path.shadow.tag-highway-steps.tag-bridge, +.low-zoom path.shadow.tag-highway-footway.tag-bridge, +.low-zoom path.shadow.tag-highway-cycleway.tag-bridge, +.low-zoom path.shadow.tag-highway-bridleway.tag-bridge { + stroke-width: 13; +} + + +/* tunnels */ +path.stroke.tag-tunnel { + stroke-opacity: 0.3; +} +path.casing.tag-tunnel { + stroke-opacity: 0.5; + stroke-linecap: butt; + stroke-dasharray: none; +} + + +/* embankments / cuttings */ +path.casing.tag-embankment, +path.casing.tag-cutting { + stroke-opacity: 0.5; + stroke: #000; + stroke-width: 22; + stroke-dasharray: 2, 4; + stroke-linecap: butt; +} + +path.shadow.tag-embankment, +path.shadow.tag-cutting { + stroke-width: 28; +} + +.low-zoom path.casing.tag-embankment, +.low-zoom path.casing.tag-cutting { + stroke-width: 10; +} + +.low-zoom path.shadow.tag-embankment, +.low-zoom path.shadow.tag-cutting { + stroke-width: 14; +} + + +/* Surface - unpaved */ +path.casing.tag-unpaved { + stroke: #ccc; + stroke-linecap: butt; + stroke-dasharray: 4, 3; +} +.low-zoom path.casing.tag-unpaved { + stroke-dasharray: 3, 2; +} +path.casing.tag-bridge.tag-unpaved { + stroke: #000; + stroke-dasharray: 4, 3; +} +.low-zoom path.casing.tag-bridge.tag-unpaved { + stroke: #000; + stroke-dasharray: 3, 2; +} + + +/* 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 */ +path.stroke.tag-building, +path.stroke.tag-amenity-shelter { + stroke: rgb(224, 110, 95); +} +path.fill.tag-building, +path.fill.tag-amenity-shelter { + stroke: rgba(224, 110, 95, 0.3); + fill: rgba(224, 110, 95, 0.3); +} +.preset-icon-fill-area.tag-building, +.preset-icon-fill-area.tag-amenity-shelter { + border-color: rgb(224, 110, 95); + background-color: rgba(224, 110, 95, 0.3); +} + + +/* Labels / Markers */ + text { font-size:10px; pointer-events: none; @@ -982,18 +1495,10 @@ text { fill: #002F35; } -marker#oneway-marker path { - fill:#000; - opacity: .5; -} - path.oneway { stroke-width: 6px; } -/* - * Labels - */ text.arealabel-halo, text.linelabel-halo, @@ -1001,24 +1506,21 @@ text.pointlabel-halo, text.arealabel, text.linelabel, text.pointlabel { + dominant-baseline: middle; + text-anchor: middle; font-size: 12px; font-weight: bold; fill: #333; - text-anchor: middle; pointer-events: none; -webkit-transition: opacity 100ms linear; transition: opacity 100ms linear; -moz-transition: opacity 100ms linear; } +/* Opera doesn't support dominant-baseline. See #715 */ +/* Safari 10 seems to have regressed too */ .linelabel-halo .textpath, .linelabel .textpath { - dominant-baseline: middle; -} - -/* Opera doesn't support dominant-baseline. See #715 */ -.opera .linelabel-halo .textpath, -.opera .linelabel .textpath { baseline-shift: -33%; dominant-baseline: auto; } @@ -1035,68 +1537,71 @@ text.proximate { } text.point { - font-size: 10px; + font-size: 10px; +} + +.icon.areaicon-halo { + opacity: 0.6; + stroke: #999; + stroke-width: 2px; + stroke-miterlimit: 1; +} + +.icon.areaicon { + fill: #222; + opacity: 0.8; +} + + +/* Turns */ + +g.turn rect, +g.turn circle { + fill: none; + pointer-events: all; +} + +.form-field-restrictions .vertex { + pointer-events: none; + cursor: auto !important; } /* Cursors */ +.map-in-map, #map { cursor: auto; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-grab.png") %>) 9 9, auto; /* FF */ - cursor: -webkit-image-set( - url(<%= asset_path("iD/img/cursor-grab.png") %>) 1x, - url(<%= asset_path("iD/img/cursor-grab2x.png") %>) 2x - ) 9 9, auto; } .mode-browse .point, .mode-select .point { cursor: pointer; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-select-point.png") %>), pointer; /* FF */ - cursor: -webkit-image-set( - url(<%= asset_path("iD/img/cursor-select-point.png") %>) 1x, - url(<%= asset_path("iD/img/cursor-select-point2x.png") %>) 2x - ), pointer; } .mode-select .vertex, .mode-browse .vertex { cursor: pointer; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-select-vertex.png") %>), pointer; /* FF */ - cursor: -webkit-image-set( - url(<%= asset_path("iD/img/cursor-select-vertex.png") %>) 1x, - url(<%= asset_path("iD/img/cursor-select-vertex2x.png") %>) 2x - ), pointer; } .mode-browse .line, .mode-select .line { cursor: pointer; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-select-line.png") %>), pointer; /* FF */ - cursor: -webkit-image-set( - url(<%= asset_path("iD/img/cursor-select-line.png") %>) 1x, - url(<%= asset_path("iD/img/cursor-select-line2x.png") %>) 2x - ), pointer; } .mode-select .area, .mode-browse .area { cursor: pointer; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-select-area.png") %>), pointer; /* FF */ - cursor: -webkit-image-set( - url(<%= asset_path("iD/img/cursor-select-area.png") %>) 1x, - url(<%= asset_path("iD/img/cursor-select-area2x.png") %>) 2x - ), pointer; } .mode-select .midpoint, .mode-browse .midpoint { cursor: pointer; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-select-split.png") %>), pointer; /* FF */ - cursor: -webkit-image-set( - url(<%= asset_path("iD/img/cursor-select-split.png") %>) 1x, - url(<%= asset_path("iD/img/cursor-select-split2x.png") %>) 2x - ), pointer; } .mode-select .behavior-multiselect .point, @@ -1105,19 +1610,11 @@ text.point { .mode-select .behavior-multiselect .area { cursor: pointer; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-select-add.png") %>), pointer; /* FF */ - cursor: -webkit-image-set( - url(<%= asset_path("iD/img/cursor-select-add.png") %>) 1x, - url(<%= asset_path("iD/img/cursor-select-add2x.png") %>) 2x - ), pointer; } .mode-select .behavior-multiselect .selected { cursor: pointer; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-select-remove.png") %>), pointer; /* FF */ - cursor: -webkit-image-set( - url(<%= asset_path("iD/img/cursor-select-remove.png") %>) 1x, - url(<%= asset_path("iD/img/cursor-select-remove2x.png") %>) 2x - ), pointer; } #map .point:active, @@ -1128,10 +1625,6 @@ text.point { #map .mode-select .selected { cursor: pointer; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-select-acting.png") %>), pointer; /* FF */ - cursor: -webkit-image-set( - url(<%= asset_path("iD/img/cursor-select-acting.png") %>) 1x, - url(<%= asset_path("iD/img/cursor-select-acting2x.png") %>) 2x - ), pointer; } .mode-draw-line #map, @@ -1141,10 +1634,6 @@ text.point { .mode-drag-node #map { cursor: crosshair; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */ - cursor: -webkit-image-set( - url(<%= asset_path("iD/img/cursor-draw.png") %>) 1x, - url(<%= asset_path("iD/img/cursor-draw2x.png") %>) 2x - ) 9 9, crosshair; } .mode-draw-line .way.hover, @@ -1154,10 +1643,6 @@ text.point { .mode-drag-node .way.hover { cursor: crosshair; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-draw-connect-line.png") %>) 9 9, crosshair; /* FF */ - cursor: -webkit-image-set( - url(<%= asset_path("iD/img/cursor-draw-connect-line.png") %>) 1x, - url(<%= asset_path("iD/img/cursor-draw-connect-line2x.png") %>) 2x - ) 9 9, crosshair; } .mode-draw-line .vertex.hover, @@ -1167,22 +1652,25 @@ text.point { .mode-drag-node .vertex.hover { cursor: crosshair; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-draw-connect-vertex.png") %>) 9 9, crosshair; /* FF */ - cursor: -webkit-image-set( - url(<%= asset_path("iD/img/cursor-draw-connect-vertex.png") %>) 1x, - url(<%= asset_path("iD/img/cursor-draw-connect-vertex2x.png") %>) 2x - ) 9 9, crosshair; } .mode-add-point #map, -.lasso #map, -.lasso .way, -.lasso .vertex { +.mode-browse.lasso #map, +.mode-browse.lasso .way, +.mode-browse.lasso .vertex, +.mode-browse.lasso .midpoint, +.mode-select.lasso #map, +.mode-select.lasso .way, +.mode-select.lasso .vertex, +.mode-select.lasso .midpoint { cursor: crosshair; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-draw.png") %>) 9 9, crosshair; /* FF */ - cursor: -webkit-image-set( - url(<%= asset_path("iD/img/cursor-draw.png") %>) 1x, - url(<%= asset_path("iD/img/cursor-draw2x.png") %>) 2x - ) 9 9, crosshair; +} + +.turn rect, +.turn circle { + cursor: pointer; /* Opera */ + cursor: url(<%= asset_path("iD/img/cursor-pointer.png") %>) 6 1, pointer; /* FF */ } .lasso #map { @@ -1190,16 +1678,96 @@ text.point { } /* GPX Paths */ +.layer-gpx { + pointer-events: none; +} + path.gpx { stroke: #FF26D4; stroke-width: 2; fill: none; - pointer-events: none; } -/* GPS Labels */ text.gpx { - fill:#FF26D4; + fill: #FF26D4; +} + +/* Mapillary Image Layer */ + +.layer-mapillary-images { + pointer-events: none; +} + +.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-images .viewfield-group * { + stroke-width: 1; + stroke: #444; + fill: #ffc600; + z-index: 50; +} + +.layer-mapillary-images .viewfield-group:hover * { + stroke-width: 1; + stroke: #333; + fill: #ff9900; + z-index: 60; +} + +.layer-mapillary-images .viewfield-group.selected * { + stroke-width: 2; + stroke: #222; + fill: #ff5800; + z-index: 60; +} + +.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 .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; + overflow: visible; +} + +.layer-mapillary-signs .icon-sign:hover .icon-sign-body { + border: 2px solid rgba(255,198,0,0.8); + z-index: 80; + } + +.layer-mapillary-signs .icon-sign.selected .icon-sign-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; +} + +.layer-mapillary-signs .icon-sign:hover .t, +.layer-mapillary-signs .icon-sign.selected .t { + z-index: 80; } /* Modes */ @@ -1225,6 +1793,43 @@ text.gpx { .mode-drag-node .area.fill { pointer-events: none; } + + +/* Fill Styles */ +.low-zoom.fill-wireframe path.stroke, +.fill-wireframe path.stroke { + stroke-width: 1; + stroke-opacity: 0.5; + stroke-dasharray: none; + fill: none; +} + +.low-zoom.fill-wireframe path.shadow, +.fill-wireframe path.shadow { + stroke-width: 8; +} + +.fill-wireframe path.shadow.related:not(.selected), +.fill-wireframe path.shadow.hover:not(.selected) { + stroke-opacity: 0.4; +} +.fill-wireframe path.shadow.selected { + stroke-opacity: 0.6; +} + +.fill-wireframe .point, +.fill-wireframe .areaicon, +.fill-wireframe path.casing, +.fill-wireframe path.fill, +.fill-wireframe path.oneway { + display: none; +} + +.fill-partial path.fill { + fill-opacity: 0; + stroke-width: 60px; + pointer-events: visibleStroke; +} /* Basics ------------------------------------------------------- */ @@ -1238,7 +1843,10 @@ html, body { } body { - font:normal 12px/1.6667 'Helvetica Neue', Arial, sans-serif; + font: normal 12px/1.6667 -apple-system, BlinkMacSystemFont, + "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", + "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial", + sans-serif; margin:0; padding:0; min-width: 768px; @@ -1256,7 +1864,6 @@ body { .id-container { height: 100%; width: 100%; - position: fixed; min-width: 768px; } @@ -1266,6 +1873,27 @@ body { height: 100%; } +#content.active { + -webkit-filter: none !important; + filter: none !important; + -webkit-duration: 200ms; + transition-duration: 200ms; +} + +#content.inactive { + -webkit-filter: grayscale(80%) brightness(80%); + filter: grayscale(80%) brightness(80%); + -webkit-duration: 200ms; + transition-duration: 200ms; +} + +#defs { + /* Can't be display: none or the clippaths are ignored. */ + position: absolute; + width: 0; + height: 0; +} + .spacer { height: 40px; margin-right: 10px; @@ -1278,14 +1906,12 @@ body { .spinner { opacity: .5; + float: right; } .spinner img { - position: absolute; height: 40px; width: 40px; - right: 10px; - top: 10px; border-radius: 4px; margin-right: 10px; background: black; @@ -1309,10 +1935,6 @@ button, .radial-menu-item { cursor: pointer; /* Opera */ cursor: url(<%= asset_path("iD/img/cursor-pointer.png") %>) 6 1, pointer; /* FF */ - cursor: -webkit-image-set( - url(<%= asset_path("iD/img/cursor-pointer.png") %>) 1x, - url(<%= asset_path("iD/img/cursor-pointer2x.png") %>) 2x - ) 6 1, pointer; } h2 { @@ -1364,10 +1986,6 @@ strong { a:visited, a { color: #7092ff; - -webkit-transition: all 100ms; - -moz-transition: all 100ms; - -o-transition: all 100ms; - transition: all 100ms; } a:hover { @@ -1379,7 +1997,10 @@ a:hover { textarea { resize: vertical; - font:normal 12px/20px 'Helvetica Neue', Arial, sans-serif; + font:normal 12px/20px -apple-system, BlinkMacSystemFont, + "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", + "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial", + sans-serif; } textarea, @@ -1390,17 +2011,13 @@ input[type=url], input[type=tel], input[type=email] { background-color: white; + color: #333; border:1px solid #ccc; padding:5px 10px; height:30px; width: 100%; border-radius:4px; text-overflow: ellipsis; - overflow: hidden; - -webkit-transition: all 200ms; - -moz-transition: all 200ms; - -o-transition: all 200ms; - transition: all 200ms; } textarea:focus, @@ -1442,6 +2059,10 @@ table.tags, table.tags td, table.tags th { padding: 4px; } +::-ms-clear { + display: none; +} + /* Grid ------------------------------------------------------- */ @@ -1464,73 +2085,39 @@ table.tags, table.tags td, table.tags th { ul li { list-style: none;} -.toggle-list { - border-radius: 4px; - border: 1px solid #CCC; -} - .toggle-list > label { position: relative; padding: 5px 10px; - display:block; + display: block; height: 30px; - border-bottom: 1px solid #ccc; background-color: white; color: #7092FF; cursor: pointer; - -moz-transition: all 100ms; - -o-transition: all 100ms; - transition: all 100ms; } .toggle-list > label:hover { background-color: #ececec; } -.toggle-list > label:first-child { - border-radius: 3px 3px 0 0; +.toggle-list > label:not(:last-child) { + border-bottom: 1px solid #ccc; } .toggle-list > label:last-child { border-radius: 0 0 3px 3px; - border-bottom-width: 0; } -.toggle-list > label:only-child { - border-radius: 3px; -} - -.toggle-list label > span { +.toggle-list label > span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } -.toggle-list > label.remove span.icon { - display: block; - width: 14px; - float: left; - margin-right: 5px; - background-position: -204px 0; -} - .toggle-list > label.active { background: #E8EBFF; } -.link-list li { - float: right; - border-left: 1px solid rgba(255,255,255,.5); - padding: 5px 0 5px 5px; - margin-left: 5px; -} - -ul.link-list li:last-child { - border-left: 0; - margin-left: 0; - padding-left: 0; -} /* Utility Classes ------------------------------------------------------- */ @@ -1554,13 +2141,22 @@ ul.link-list li:last-child { color: white; } +.fillD2 { + background:rgba(0,0,0,.75); + color: white; +} + .fl { float: left;} .fr { float: right;} +.al { left: 0; } +.ar { right: 0; } +input.hide, div.hide, form.hide, button.hide, -a.hide { +a.hide, +li.hide { display: none; } @@ -1584,6 +2180,7 @@ a.hide { right: -100%; } + .pane { position:absolute; width:50%; @@ -1612,11 +2209,6 @@ button { display: inline-block; height:40px; border-radius:4px; - /* Crashes Safari: https://github.com/systemed/iD/issues/1188 */ - /*-webkit-transition: all 100ms;*/ - -moz-transition: all 100ms; - -o-transition: all 100ms; - transition: all 100ms; } button:focus, @@ -1627,7 +2219,7 @@ button:hover { button[disabled], button.disabled { background-color: rgba(255,255,255,.25); - color: rgba(0,0,0,.5); + color: rgba(0,0,0,.4); cursor: auto; } @@ -1672,6 +2264,10 @@ button.minor:hover { border-right: 1px solid rgba(0,0,0,.5); } +.fillL .joined button { + border-right: 1px solid white; +} + .joined button:first-child { border-radius:4px 0 0 4px; } @@ -1683,6 +2279,13 @@ button.minor:hover { button.action { background: #7092ff; + color: white; +} + +button[disabled].action, +button[disabled].action:hover { + background: #cccccc; + color: #888; } button.action:focus, @@ -1690,8 +2293,13 @@ button.action:hover { background: #597BE7; } -button.save.has-count { - padding: 9px; +button.secondary-action { + background: #ececec; +} + +button.secondary-action:focus, +button.secondary-action:hover { + background: #cccccc; } button.save .count { @@ -1702,14 +2310,16 @@ button.save.has-count .count { display: block; position: absolute; top: 5px; - background: rgba(255, 255, 255, .5); + background: #fff; + border-color: #fff; + opacity: 0.5; color: #333; padding: 10px; height: 30px; line-height: 12px; border-radius: 4px; margin: auto; - margin-left: 8.3333%; + margin-left: 9.3333%; } button.save.has-count .count::before { @@ -1723,23 +2333,44 @@ button.save.has-count .count::before { bottom: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; - border-right: 6px solid rgba(255,255,255,.5); + border-right-width: 6px; + border-right-style: solid; + border-right-color: inherit; } /* 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; - } + 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: 5px; +} + +.icon.light { + color: #fff; +} + +.icon.created { + color: #00ca07; +} + +.icon.modified { + color: #666; +} -.icon-pre-text { - margin-right: 3px; +.icon.deleted { + color: #ea0000; } .user-icon { @@ -1750,88 +2381,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.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.back.blue { background-position: -420px -20px;} -.icon.forward.blue { background-position: -440px -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;} - -/* 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 ------------------------------------------------------- */ @@ -1843,7 +2392,7 @@ a:hover .icon.out-link { background-position: -500px -14px;} top:0; right:0; height:60px; - z-index: 1; + z-index: 9; min-width: 768px; } @@ -1857,12 +2406,12 @@ a:hover .icon.out-link { background-position: -500px -14px;} } .header h3 { - text-align: center; + text-align: left; margin-bottom: 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; - padding: 20px; + padding: 20px 20px 20px 40px; } .header button, @@ -1878,24 +2427,37 @@ 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; top: 0; height: 59px; - z-index: 3; + z-index: 50; } .footer { position: absolute; bottom: 0; - padding: 5px 30px 5px 30px; + padding: 5px 20px 5px 20px; border-top: 1px solid #ccc; background-color: #fafafa; width: 100%; @@ -1917,7 +2479,7 @@ a:hover .icon.out-link { background-position: -500px -14px;} float: left; height: 100%; overflow: hidden; - z-index: 2; + z-index: 10; background: #f6f6f6; } @@ -1947,6 +2509,9 @@ a:hover .icon.out-link { background-position: -500px -14px;} bottom: 0; } + + + .feature-list-pane .inspector-body { top: 120px; } @@ -1959,6 +2524,10 @@ a:hover .icon.out-link { background-position: -500px -14px;} top: 60px; } +.selection-list-pane .inspector-body { + top: 60px; +} + .inspector-inner { padding: 20px; position: relative; @@ -2001,24 +2570,41 @@ a:hover .icon.out-link { background-position: -500px -14px;} border-radius: 0; } +.feature-list-item { + background-color: white; + font-weight: bold; + height: 40px; + line-height: 20px; +} + +.feature-list-item:hover { + background-color: #ececec; +} + +.feature-list-item button { + background: transparent; +} + .feature-list-item .label { text-align: left; - padding: 5px 10px; + padding: 10px 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; } .feature-list-item .label .icon { opacity: .5; } -.feature-list-item:hover .label { - background-color: #ececec; +.feature-list-item .close { + float: right; + padding: 10px; +} + +.feature-list-item .close .icon { + opacity: 1; } .feature-list-item .entity-type { @@ -2063,17 +2649,76 @@ 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-28 { + position: absolute; + top: 16px; + left: 16px; + margin: auto; +} + +.preset-icon-28 .icon { + width: 28px; + height: 28px; +} + +.preset-icon-24 { + position: absolute; + top: 18px; + left: 18px; + margin: auto; +} + +.preset-icon-24 .icon { + width: 24px; + height: 24px; } .preset-list-button .label { @@ -2090,9 +2735,6 @@ a:hover .icon.out-link { background-position: -500px -14px;} text-overflow: ellipsis; overflow: hidden; border-left: 1px solid rgba(0, 0, 0, .1); - -moz-transition: all 100ms; - -o-transition: all 100ms; - transition: all 100ms; border-radius: 0 3px 3px 0; } @@ -2104,6 +2746,19 @@ a:hover .icon.out-link { background-position: -500px -14px;} height: 100%; border: 1px solid #CCC; border-radius: 0 3px 3px 0; + position: absolute; + top: 0; + right: 0; + width: 10%; + background: #fafafa; +} + +.preset-list-item button.tag-reference-button:hover { + background: #f1f1f1; +} + +.preset-list-item button.tag-reference-button .icon { + opacity: .5; } .current .preset-list-button, @@ -2147,70 +2802,28 @@ a:hover .icon.out-link { background-position: -500px -14px;} margin-top: -10px; } -/* Preset icon colors */ - -.preset-icon-fill.icon-area { - cursor: inherit; - height: 45px; - width: 45px; - margin: auto; - position: absolute; - left: 7px; top: 7px; - background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat -240px -80px; -} - -.preset-icon-fill.tag-shop, -.preset-icon-fill.tag-building { - background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 -80px; -} - -.preset-icon-fill.tag-natural-water { - background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat -60px -80px; -} - -.preset-icon-fill.tag-landuse, -.preset-icon-fill.tag-natural-wood, -.preset-icon-fill.tag-natural-tree, -.preset-icon-fill.tag-natural-grassland, -.preset-icon-fill.tag-leisure-park { - background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat -120px -80px; -} - -.preset-icon-fill.tag-amenity-parking { - background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat -180px -80px; -} /* preset form basics */ .inspector-preset { overflow: hidden; + padding-bottom: 10px; +} + +.inspector-preset a.hide-toggle { + margin: 0 20px 10px 20px; } .inspector-preset .preset-form { padding: 10px; - margin: 0 10px 20px 10px; + margin: 0 10px 10px 10px; 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%; @@ -2232,32 +2845,52 @@ a:hover .icon.out-link { background-position: -500px -14px;} background: #f6f6f6; display: block; border-radius: 4px 4px 0 0; + overflow: hidden; } -.form-label button { - border-left: 1px solid #CCC; +.form-label-button-wrap { + position: absolute; + top: 0; + right: 0; + height: 100%; + width: 100%; + background: transparent; + text-align: right; } -.form-label .modified-icon { - border-right: 0; - opacity: 0; - z-index: -10; - right: 10%; +.form-label-button-wrap .tag-reference-button { + border-radius: 0 3px 0 0; } -.modified .form-label .modified-icon { - opacity: 1; - z-index: 1; +.form-label-button-wrap .icon { + opacity: .5; } -.form-label button.tag-reference-button { - border-top-right-radius: 3px; +.form-label button { + border-left: 1px solid #ccc; + width: 10%; + height: 100%; + border-radius: 0; + background: #f6f6f6; +} +.form-label button:hover { + background: #f1f1f1; +} + +.form-label .modified-icon, +.form-field .remove-icon { + display: none; +} + +.modified .form-label .modified-icon, +.present .form-label .remove-icon { + display: inline-block; } .form-field > input, .form-field > textarea, .form-field .preset-input-wrap { - border: 1px solid #CCC; + border: 1px solid #ccc; min-height: 30px; border-top: 0; border-radius: 0 0 4px 4px; @@ -2268,36 +2901,40 @@ a:hover .icon.out-link { background-position: -500px -14px;} height: 65px; } -.form-field button.remove { - border-radius: 0 0 4px 0; -} - .inspector-border { - border-bottom: 1px solid #CCC + border-bottom: 1px solid #ccc } /* Preset form (hover mode) */ .inspector-hover .checkselect label:last-of-type, .inspector-hover .preset-input-wrap .label, +.inspector-hover .form-field-multicombo, .inspector-hover input, .inspector-hover label { background: #ececec; } .inspector-hover a, +.inspector-hover .form-field-multicombo .chips, .inspector-hover .checkselect label:last-of-type { color: #666; } +.inspector-hover .form-field-multicombo .chips { + background: #eee; + border: 1px solid #ccc; +} + /* 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, .inspector-hover .toggle-list label span, .inspector-hover .inspector-inner .add-tag, .inspector-hover .inspector-inner .add-relation, +.inspector-hover .form-field-multicombo .combobox-input, .inspector-hover .toggle-list label.remove .icon { height: 0; width: 0; @@ -2309,20 +2946,22 @@ a:hover .icon.out-link { background-position: -500px -14px;} } /* hide but preserve in layout */ -.inspector-hover .modified .form-label .modified-icon, .inspector-hover .entity-editor-pane button.minor, -.inspector-hover .combobox-carat, +.inspector-hover .combobox-caret, .inspector-hover .entity-editor-pane .header button, .inspector-hover .spin-control, +.inspector-hover .form-field-multicombo .chips .remove, .inspector-hover .hide-toggle:before, -.inspector-hover .more-buttons, +.inspector-hover .more-fields, +.inspector-hover .form-label-button-wrap, +.inspector-hover .tag-reference-button, .inspector-hover .view-on-osm { opacity: 0; } /* Styles for raw tag inspector on hover */ .inspector-hover .tag-row .key-wrap, -.inspector-hover .tag-row .input-wrap-position { +.inspector-hover .tag-row .form-field.input-wrap-position { width: 50%; } @@ -2338,9 +2977,9 @@ a:hover .icon.out-link { background-position: -500px -14px;} border-bottom-left-radius: 4px; } -.inspector-hover .inspector-body .more-buttons { +.inspector-hover .more-fields { max-height: 0; - padding-bottom: 0; + margin-bottom: -10px; } /* Unstyle button fields */ @@ -2375,169 +3014,117 @@ a:hover .icon.out-link { background-position: -500px -14px;} line-height: 0; display: block; overflow: hidden; - -webkit-transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms; - -moz-transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms; - -o-transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms; - transition: opacity 200ms, width 0 200ms, padding 0 200ms, line-height 0 200ms; -} - -/* first phase hover-to-active animations */ - -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 */ +/* adding additional preset fields */ -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; +.more-fields { + padding: 0 20px 20px 20px; + font-weight: bold; } -.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; +.more-fields input { + margin-left: 10px; + width: 50%; } -/* 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; -} +/* preset form access */ -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; +.preset-input-wrap .label { + height: 30px; + background: #F6F6F6; + padding: 5px 10px; } -button.preset-add-field:hover { - background: #ececec; +.form-field-access .preset-input-wrap li { + border-bottom: 1px solid #CCC; } - -/* set width based on # of buttons */ - -button.preset-add-field:only-child { - width: 100%; +.form-field-access .preset-input-wrap li:last-child { + border-bottom: 0; } -button.preset-add-field:nth-last-child(2), -button.preset-add-field:nth-last-child(2) ~ button.preset-add-field { - width: 50%; +.preset-input-access-wrap input { + border-radius: 0; + border-width: 0; + border-left-width: 1px; } -button.preset-add-field:nth-last-child(3), -button.preset-add-field:nth-last-child(3) ~ button.preset-add-field { - width: 33.3333%; +.preset-input-wrap li:last-child input { + border-bottom-right-radius: 4px; } -button.preset-add-field:nth-last-child(4), -button.preset-add-field:nth-last-child(4) ~ button.preset-add-field { - width: 25%; +/* preset form multicombo */ + +.form-field-multicombo { + border: 1px solid #cfcfcf; + border-top: 0px; + padding: 5px 0 5px 10px; + background: #fff; + display: block; + border-radius: 0 0 4px 4px; + overflow: hidden; } -button.preset-add-field:nth-last-child(5), -button.preset-add-field:nth-last-child(5) ~ button.preset-add-field { - width: 20%; +.form-field-multicombo:focus { + border-bottom: 0px; } -button.preset-add-field:nth-last-child(6), -button.preset-add-field:nth-last-child(6) ~ button.preset-add-field { - width: 16.6666%; +.form-field-multicombo.active { + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; } -button.preset-add-field:nth-last-child(7), -button.preset-add-field:nth-last-child(7) ~ button.preset-add-field { - width: 14.2857%; +.form-field-multicombo li { + background-color: #eff2f7; + border: 1px solid #ccd5e3; + border-radius: 4px; + line-height: 25px; + display: inline-block; + padding: 2px 5px; + margin: 3px; + height: 30px; } -button.preset-add-field:nth-last-child(8), -button.preset-add-field:nth-last-child(8) ~ button.preset-add-field { - width: 12.5%; +.form-field-multicombo a { + font-family: Arial, Helvetica, sans-serif !important; + font-size: 16px !important; + line-height: 24px; + float: right; + margin: 1px 0 0 5px; + padding: 0; + cursor: pointer; + color: #a6b4ce; } -.preset-fav button.fav { - height: 30px; - margin: 5px; - padding: 0 10px; +.form-field-multicombo input { + border: 1px solid #ddd; + width: 100px; + margin: 3px; } -/* preset form access */ +.form-field-multicombo .combobox-caret { + margin: 3px 3px 3px -30px; +} -.preset-input-wrap .label { - height: 30px; - background: #F6F6F6; - padding: 5px 10px; +.form-field-multicombo input:focus { + border-radius: 4px !important; } -.form-field-access .preset-input-wrap li { +/* preset form cycleway */ + +.form-field-cycleway .preset-input-wrap li { border-bottom: 1px solid #CCC; } -.form-field-access .preset-input-wrap li:last-child { +.form-field-cycleway .preset-input-wrap li:last-child { border-bottom: 0; } -.preset-input-access-wrap input { +.preset-input-cycleway-wrap input { border-radius: 0; border-width: 0; border-left-width: 1px; } -.preset-input-wrap li:last-child input { - border-bottom-right-radius: 4px; -} - /* preset form numbers */ input[type=number] { @@ -2634,7 +3221,7 @@ input[type=number] { padding-right: 10%; } -.form-field .wiki-title ~ .combobox-carat { +.form-field .wiki-title ~ .combobox-caret { margin-left: -18%; margin-right: 9%; } @@ -2708,47 +3295,65 @@ input[type=number] { } .form-field .localized-wrap .entry .localized-value { - padding-right: 10%; border-top-width: 0; border-radius: 0 0 4px 4px; } +.form-field .localized-wrap .form-label button { + border-top-right-radius: 3px; +} + /* Preset form address */ -.form-field .addr-housename { - border: 0; - border-radius: 0; +.addr-row input { + border-right: 0; + border-bottom: 0; } -.form-field .addr-number { - width: 33.3333%; +.addr-row:first-of-type input { + border-top: 0; +} + +.addr-row input:first-of-type { border-left: 0; - border-right: 0; - border-bottom: 0; - border-radius: 0; } -.form-field .addr-street { - width: 66.6666%; - border-right: 0; - border-bottom: 0; +.addr-row input { border-radius: 0; } -.form-field .addr-city { - width: 66.6666%; - border-left: 0; - border-right: 0; - border-bottom: 0; +.addr-row:last-of-type input:first-of-type { border-radius: 0 0 0 4px; } -.form-field .addr-postcode { - width: 33.3333%; - border-right: 0; - border-bottom: 0; +.addr-row:last-of-type input:last-of-type { border-radius: 0 0 4px 0; } + +/* Restrictions editor */ + +.form-field-restrictions .preset-input-wrap { + position: relative; + height: 300px; +} + +.form-field-restrictions svg { + width: 100%; + height: 100%; +} + +.form-field-restrictions .restriction-help { + z-index: 1; + position: absolute; + top: 0; + left: 0; + right: 0; + padding: 2px 6px; + background-color: rgba(255, 255, 255, .8); + color: #999; + text-align: center; +} + /* combobox dropdown */ div.combobox { @@ -2782,10 +3387,21 @@ div.combobox { border-top: 0; } -.combobox-carat { - margin-left: -20px; - margin-right: 10px; - display:inline-block; +.combobox-caret { + display: inline-block; + position: relative; + height: 30px; + width: 30px; + margin-left: -30px; + vertical-align: top; +} + +.combobox-caret::after { + content:""; + height: 0; width: 0; + position: absolute; + left: 0; right: 0; bottom: 0; top: 0; + margin: auto; border-top: 5px solid #ccc; border-left: 5px solid transparent; border-right: 5px solid transparent; @@ -2816,10 +3432,6 @@ div.combobox { width: 40%; float: left; height: 30px; - -webkit-transition: width 200ms; - -moz-transition: width 200ms; - -o-transition: width 200ms; - transition: width 200ms; } .tag-row input.key { @@ -2871,6 +3483,10 @@ div.combobox { .tag-row .tag-reference-button { right: 0; + border-radius: 0; + width: 10%; + top: 0; + background: #fafafa; } /* Adding form fields to tag editor */ @@ -2904,6 +3520,7 @@ button.minor.tag-reference-loading { .tag-reference-body { overflow: hidden; + clear: both; } .tag-reference-body p, @@ -2978,6 +3595,10 @@ img.wiki-image { padding-left: 10px; } +.member-incomplete .member-delete { + display: none; +} + .member-row-new .member-entity-input { border-radius: 4px 4px 0 0; border: 1px solid #cfcfcf; @@ -2995,6 +3616,27 @@ img.wiki-image { background: rgba(0,0,0,.8); } +/* Fullscreen button */ +div.full-screen { + float: right; + width: 40px; + margin-right: 10px; +} + +div.full-screen .tooltip { + min-width: 160px; +} + +div.full-screen > button, div.full-screen > button.active { + width: 40px; + height: 40px; + background: transparent; +} + +div.full-screen > button:hover { + background-color: rgba(0, 0, 0, .8); +} + /* Map Controls */ .map-controls { @@ -3015,63 +3657,122 @@ img.wiki-image { background: rgba(0, 0, 0, .8); } +.map-control > button.active, .map-control > button.active:hover { background: #7092ff; } -.map-overlay { - z-index: -1; - right: 75%; - max-width: 260px; - min-width: 210px; - position: fixed; - left: 30px; - display: block; - padding: 10px 10px 0 10px; -} - /* Zoomer */ .zoombuttons button.zoom-in { border-radius: 4px 0 0 0; } -/* Background Settings */ - +/* Background / Map Data Settings */ -.toggle-list.layer-list { - margin-bottom: 10px; +.map-data-control button { + border-radius: 0; } .background-control button { border-radius: 4px 0 0 0; } +.map-data-control, +.background-control { + position: relative; +} -.background-control button.active { - border-radius: 0; +.imagery-faq { + margin-bottom: 10px; } -.background-control { +.map-data-control .hide-toggle, +.background-control .hide-toggle { + padding-bottom: 10px; +} + +.layer-list, .controls-list { + margin-bottom: 10px; + border: 1px solid #CCC; + border-radius: 4px; +} + +.layer-list li { position: relative; + height: 30px; + background-color: white; + color: #7092FF; } -.background-control .map-overlay { - position: absolute; - top: 0; +.layer-list:empty { + display: none; } -.nudge-container { - border-top: 1px solid #CCC; - margin: 0 -10px; +.layer-list > li:first-child { + border-radius: 3px 3px 0 0; } -.background-control .adjustments button:last-child { - border: 0; +.layer-list > li:last-child { + border-radius: 0 0 3px 3px; } -.background-control .hide-toggle { - padding-bottom: 10px; +.layer-list > li:only-child { + border-radius: 3px; +} + +.layer-list li:not(:last-child) { + border-bottom: 1px solid #ccc; +} + +.layer-list li:hover { + background-color: #ececec; +} + +.layer-list li.active, +.layer-list li.switch { + 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; + cursor: pointer; +} + +.layer-list label > span { + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.minimap-toggle { + display: block; + padding: 5px 10px; + cursor: pointer; + color: #7092FF; + border-radius: 3px; +} + +.minimap-toggle.active { + background: #E8EBFF; +} + +.minimap-toggle:hover { + background-color: #ececec; } .hide-toggle { @@ -3100,16 +3801,41 @@ img.wiki-image { border-left: 4px solid transparent; } -.background-control .nudge-container button { - float: left; - display: block; - width:20%; - border-radius: 0; - border-right: 1px solid #CCC; - position: relative; +/* Adjust Alignment controls */ + +.background-control .nudge-container { + border: 1px solid #ccc; + border-radius: 4px; + padding: 10px; +} + +.nudge-container .nudge-instructions { + padding-bottom: 15px; +} + +.nudge-container .nudge-outer-rect { + background-color: #eee; + border: 1px solid #ccc; + border-radius: 2px; + padding: 20px 0; + width: 70%; + display: flex; + justify-content: center; + align-items: center; + margin: 0 auto; + margin-top: 20px; + cursor: move; +} + +.nudge-container .nudge-inner-rect { + background-color: #fff; + border: 1px solid #ccc; + border-radius: 2px; + width: 65%; + min-height: 20px; } -.background-control .nudge::after { +.nudge-container .nudge::after { content: ''; display: block; position: absolute; @@ -3119,13 +3845,72 @@ img.wiki-image { width: 0; } -.background-control .nudge.left::after { +.nudge-container input { + width: 100%; + height: 20px; + text-align: center; + border: 0; +} + +.nudge-container input.error { + border: 1px solid #FF7878; + border-radius: 2px; + background: #ffb; +} + +.nudge-container input:focus { + background-color: transparent; +} + +.nudge-container button { + float: left; + display: block; + width: 20%; + position: relative; + background-color: transparent; +} + +.nudge-container button.right { + top: -50px; + right: -85%; +} + +.nudge-container button.left { + top: -50px; + right: 45%; +} + +.nudge-container button.top { + left: 20%; + top: -104px; +} + +.nudge-container button.bottom { + left: -20%; +} + +.nudge-container button.nudge-reset { + right: -10px; +} + +.nudge-surface { + position: absolute; + z-index: 5000; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: transparent; + cursor: move; +} + +.background-control .nudge.right::after { border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #222; } -.background-control .nudge.right::after { +.background-control .nudge.left::after { border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid #222; @@ -3146,10 +3931,10 @@ img.wiki-image { .opacity-options { background: url(<%= asset_path("iD/img/background-pattern-opacity.png") %>) 0 0 repeat; height:20px; - width:62px; + width:82px; position: absolute; - right: 10px; - top: 10px; + right: 50px; + top: 20px; border: 1px solid #ccc; } @@ -3166,6 +3951,8 @@ img.wiki-image { z-index: 9999; } +.map-data-control li:hover .select-box, +.map-data-control li.selected .select-box, .background-control li:hover .select-box, .background-control li.selected .select-box { border: 2px solid #7092ff; @@ -3173,6 +3960,8 @@ img.wiki-image { opacity: .5; } +.map-data-control li.selected:hover .select-box, +.map-data-control li.selected .select-box, .background-control li.selected:hover .select-box, .background-control li.selected .select-box { opacity: 1; @@ -3185,15 +3974,32 @@ img.wiki-image { height:18px; } -.background-control .layer-toggle-gpx .layer-extent { +.map-data-control .layer-list button, +.background-control .layer-list button { + float: right; + height: 100%; + width: 10%; border-left: 1px solid #CCC; - border-radius: 0 4px 4px 0; + border-radius: 0; } -.background-control .layer-toggle-gpx.selected .layer-extent { - display:inline-block; +.map-data-control .layer-list button .icon, +.background-control .layer-list button .icon { + opacity: 0.5; +} + +.map-data-control .layer-list button:first-of-type, +.background-control .layer-list button:first-of-type { + border-radius: 0 3px 3px 0; } +.map-data-control .map-overlay, +.background-control .map-overlay, +.help-control .map-overlay { + z-index: -1; +} + + /* Geolocator */ .geolocate-control { @@ -3204,19 +4010,19 @@ img.wiki-image { border-radius: 0 0 0 4px; } -/* Help */ - -.help-control button { - border-radius: 0 0 0 4px; -} - -.help-wrap { +.map-overlay.content { position: fixed; top:60px; bottom: 30px; padding: 20px 50px 20px 20px; right: 0; - overflow-y: scroll; + overflow: auto; +} + +/* Help */ + +.help-control button { + border-radius: 0 0 0 4px; } .help-wrap p { @@ -3235,7 +4041,7 @@ img.wiki-image { float:right; margin-left: 20px; margin-bottom: 20px; - padding-left: 5px + padding-left: 5px; } .help-wrap .toc li a, @@ -3298,6 +4104,64 @@ img.wiki-image { border-radius: 4px; } + +/* Tiles +------------------------------------------------------- */ + +img.tile { + position:absolute; + transform-origin:0 0; + -ms-transform-origin:0 0; + -webkit-transform-origin:0 0; + -moz-transform-origin:0 0; + -o-transform-origin:0 0; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + + opacity: 0; + + -webkit-transition: opacity 200ms linear; + transition: opacity 200ms linear; + -moz-transition: opacity 200ms linear; +} + +.tile-label-debug { + background: rgba(0, 0, 0, 0.7); + color: #fff; + position: absolute; + text-align: center; + width: 128px; + border-radius: 3px; + z-index: 2; + + transform-origin:0 0; + -ms-transform-origin:0 0; + -webkit-transform-origin:0 0; + -moz-transform-origin:0 0; + -o-transform-origin:0 0; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +img.tile-debug { + border: 1px solid red; +} + +img.tile-loaded { + opacity: 1; +} + +img.tile-removing { + opacity: 0; +} + + /* Map ------------------------------------------------------- */ @@ -3314,13 +4178,14 @@ img.wiki-image { -webkit-transform-origin:0 0; -moz-transform-origin:0 0; -o-transform-origin:0 0; + -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } -#supersurface, .layer-layer { +#supersurface, .layer { position: absolute; top: 0; left: 0; @@ -3328,27 +4193,246 @@ img.wiki-image { bottom: 0; } +/* Map-In-Map +------------------------------------------------------- */ +.map-in-map { + position: absolute; + overflow: hidden; + top: 60px; + width: 200px; + height: 150px; + z-index: 5; + background: #000; + border: #aaa 1px solid; + box-shadow: 0 0 2em black; +} + +.map-in-map-tiles { + transform-origin:0 0; + -ms-transform-origin:0 0; + -webkit-transform-origin:0 0; + -moz-transform-origin:0 0; + -o-transform-origin:0 0; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.map-in-map-viewport, +.map-in-map-data { + top: 0; + left: 0; + overflow: hidden; + height: 100%; + width: 100%; +} + +.map-in-map-viewport { + position: absolute; +} + +.map-in-map-data { + position: relative; + z-index: 10; +} + +.map-in-map-bbox { + fill: none; + stroke: rgba(255, 255, 0, 0.75); + stroke-width: 1; + shape-rendering: crispEdges; +} + +.map-in-map-bbox.thick { + stroke-width: 5; +} + + +/* Debug +------------------------------------------------------- */ +.debug { + stroke: currentColor; + fill: none; + stroke-width: 2; +} +.map-in-map-data .debug { + stroke-width: 1; +} + +.red { color: rgba(255, 0, 0, 0.75); } +.green { color: rgba(0, 255, 0, 0.75); } +.blue { color: rgba(0, 0, 255, 0.75); } +.yellow { color: rgba(255, 255, 0, 0.75); } +.cyan { color: rgba(0, 255, 255, 0.75); } +.magenta { color: rgba(255, 0, 255, 0.75); } +.orange { color: rgba(255, 153, 0, 0.75); } +.pink { color: rgba(255, 0, 153, 0.75); } +.purple { color: rgba(153, 0, 255, 0.75); } + +.debug-legend { + position: absolute; + top: 70px; + right: 80px; + padding: 5px; + border-radius: 4px; + pointer-events: none; +} + +.debug-legend-item { + padding-right: 5px; +} +.debug-legend-item:before { + content: "\25A0"; + padding: 0 5px; +} + +/* Info Box +------------------------------------------------------- */ +.infobox { + position: absolute; + z-index: 1; + right: 0; + bottom: 30px; + width: 240px; + border-radius: 4px 0 0 0; + border-bottom: 1px solid black; +} + +.infobox .infobox-heading { + display: block; + border-radius: 4px 0 0 0; + padding: 5px 10px; + height: 30px; +} + +.infobox ul { + padding: 5px 10px; +} + +.infobox .button { + position: absolute; + background: #7092ff; + border-radius: 2px; + padding: 0 4px; + color: white; + top: 40px; + right: 10px; +} + /* About Section ------------------------------------------------------- */ -.about-block { +#about { + width: 100%; position: absolute; right:0; bottom:0; border-radius: 0; - opacity: .625; - -webkit-transition: opacity 200ms; - -moz-transition: opacity 200ms; - transition: opacity 200ms; + pointer-events: none; } -.about-block:hover { - opacity: 1; +#attrib { + width: 100%; + height: 20px; + margin-bottom: 5px; + float: left; + clear: both; } -#about { +#attrib * { pointer-events: all; } + +.base-layer-attribution, +.overlay-layer-attribution { + position: absolute; + color: #888; + font-size: 10px; +} + +.base-layer-attribution { + left: 10px; +} + +.overlay-layer-attribution { + right: 10px; +} + +.overlay-layer-attribution .attribution:not(:last-child):after { + content: '; '; +} + +.source-image { + height:20px; + vertical-align:top; +} + +#footer { + width: 100%; + float: left; + clear: both; + pointer-events: all; +} + +#scale-block { + display: table-cell; + vertical-align: bottom; + width: 250px; + max-height: 30px; + float: left; + clear: left; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +#info-block { + max-height: 30px; + clear: right; +} + +#scale { + height: 30px; + width: 100%; +} + +#scale:hover { + cursor: pointer; +} + +#scale text { + font: 12px sans-serif; + stroke: none; + fill: #ccc; + text-anchor: start; +} + +#scale path { + fill: none; + stroke: #ccc; + stroke-width: 1; + shape-rendering: crispEdges; +} + +#about-list { text-align: right; margin-right: 10px; + clear: right; + overflow: hidden; +} + +#about-list li { + float: right; + border-left: 1px solid rgba(255,255,255,.5); + padding: 5px 0 5px 5px; + margin-left: 5px; +} + +#about-list li:last-child { + border-left: 0; + margin-left: 0; + padding-left: 0; } .source-switch a { @@ -3360,59 +4444,52 @@ img.wiki-image { color:#fff; } -/* Attribution overlay */ -.attribution { - position: absolute; - bottom: 35px; - left:10px; - color:#888; - font-size:10px; -} - -.source-image { - height:20px; - vertical-align:top; +.feature-warning a { + background: #1e90ff; + padding: 2px 4px 4px 4px; + border-radius: 2px; + color: #eee; } .user-list a:not(:last-child):after { content: ', '; } -/* API Status */ - .api-status { - float: left; + float: right; + clear: both; + text-align: right; + width: 100%; + padding: 0px 10px; + color: #eee; } .api-status.offline, -.api-status.readonly { - background: red; - padding: 5px 10px; +.api-status.readonly, +.api-status.error { + background: #a22; } -/* Account Information */ - -.account { - float: left; - padding: 5px 10px; +.api-status-login { + color: #aaf; } - -.account .logout { - margin-left:10px; - border-left: 1px solid white; - padding-left: 10px; +.api-status-login:hover { + color: #ccf; } /* Modals ------------------------------------------------------- */ .modal { + top: 40px; display: inline-block; position:absolute; + border-radius: 3px; + overflow: hidden; left: 0; right: 0; margin: auto; - z-index: 3; + z-index: 50; } .modal .loader { @@ -3424,7 +4501,7 @@ img.wiki-image { } .shaded { - z-index: 2; + z-index: 49; position: absolute; top: 0; bottom: 0; @@ -3445,8 +4522,27 @@ img.wiki-image { border-bottom: 1px solid #CCC; } -.modal-section:last-child { - border-bottom: 0; +.modal-section.header h3 { + padding: 0; +} + +.modal-section.buttons { + text-align: center; +} + +.modal-section.buttons .action { + display: inline-block; + margin: 0 10px; + text-align: center; + vertical-align: middle; +} + +.save-section .buttons .action, +.save-section .buttons .secondary-action { + display: inline-block; + margin: 0 20px 0 0; + text-align: center; + vertical-align: middle; } .loading-modal { @@ -3470,65 +4566,62 @@ img.wiki-image { } .modal-actions button:before, -.save-success a.button:before, +.save-success a.button.osm:before, .walkthrough a:before { display: block; content: ''; height: 100px; - width: 100px; + width: 100%; + max-width: 100px; margin: auto; margin-bottom: 10px; - background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 -220px; + background:transparent url(<%= asset_path("iD/img/iD-sprite.svg") %>) no-repeat -200px -460px; } .modal-actions :first-child { border-right: 1px solid #CCC; } +.modal-section:last-child { + border-bottom: 0; +} + /* Restore Modal ------------------------------------------------------- */ .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 @@ -3536,11 +4629,11 @@ img.wiki-image { .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 @@ -3554,12 +4647,6 @@ img.wiki-image { margin-bottom: 0; } -.mode-save button.action { - float: none; - margin: auto; - display: block; -} - .mode-save .user-info img { float: left; } @@ -3578,12 +4665,14 @@ img.wiki-image { color:#fff; } +.mode-save .commit-info { + margin-bottom: 10px; +} + .mode-save .changeset-list { - overflow: auto; border:1px solid #ccc; border-radius: 4px; background:#fff; - max-height: 160px; } .mode-save .warning-section .changeset-list button { @@ -3594,6 +4683,15 @@ img.wiki-image { position: relative; border-top:1px solid #ccc; padding:5px 10px; + cursor: pointer; +} + +.mode-save .changeset-list li:hover { + background-color: #ececec; +} + +.mode-save .changeset-list .alert { + opacity: 0.5; } .changeset-list li span.count { @@ -3601,12 +4699,66 @@ img.wiki-image { color:#555; } +.mode-save .commit-section .changeset-list button { + border-left: 1px solid #CCC; +} + .changeset-list li span.count:before { content: '('; } .changeset-list li span.count:after { content: ')'; } .changeset-list li:first-child { border-top: 0;} +/* Conflict resolution +------------------------------------------------------- */ + +.conflicts-help { + padding: 20px; + background-color: #ffffbb; + border-bottom: 1px solid #ccc; +} + +.conflicts-buttons { + padding: 20px; +} + +.mode-save button.conflicts-button { + float: left; +} + +.conflict-container { + border-bottom: 1px solid #ccc; +} + +.conflict-description { + padding: 5px 20px; + display: block; +} + +.conflicts-done { + padding: 20px 20px 0 20px; +} + +.conflict-detail-container { + padding: 10px 20px; +} + +.conflict-count { + padding: 10px 20px; +} + +.conflict-choices { + margin-top: 10px; +} + +.conflict-nav-buttons { + padding: 10px 0 20px 0; +} + +.conflict-nav-button { + height: 30px; +} + /* Notices ------------------------------------------------------- */ @@ -3639,10 +4791,6 @@ img.wiki-image { margin-right:10px; } -.icon.zoom-in-invert { - background-position: -240px -40px; -} - /* Tooltips ------------------------------------------------------- */ @@ -3682,6 +4830,7 @@ img.wiki-image { .tooltip-inner { display: inline-block; + border-radius: 3px; max-width: 200px; min-width: 80px; padding: 10px; @@ -3714,6 +4863,7 @@ img.wiki-image { } .tail div { + border-radius: 3px; padding: 10px; background: white; position: absolute; @@ -3781,56 +4931,51 @@ img.wiki-image { background: #F6F6F6; padding: 10px; margin: 10px -10px -10px; + border-radius: 0 0 3px 3px; } .tooltip-inner .keyhint { - font-size: 10px; - padding: 0 7px; font-weight: bold; - display: inline-block; - border-radius: 2px; - border: 1px solid #CCC; - position: relative; - z-index: 1; - text-align: left; -} - -.tooltip-inner .keyhint::after { - content: ""; - position: absolute; - border-radius: 2px; - height: 10px; - width: 100%; - z-index: 0; - bottom: -4px; - left: -1px; - border: 1px solid #CCC; - border-top: 0; } /* Exceptions for tooltip layouts */ -/* make tooltips in editor pane dark */ -.entity-editor-pane .tooltip.top .tooltip-arrow { +/* make tooltips in panels dark */ +.map-overlay .tooltip.top .tooltip-arrow, +.entity-editor-pane .tooltip.top .tooltip-arrow, +.warning-section .tooltip.top .tooltip-arrow { border-top-color: #000; } -.entity-editor-pane .tooltip.bottom .tooltip-arrow { +.map-overlay .tooltip.bottom .tooltip-arrow, +.entity-editor-pane .tooltip.bottom .tooltip-arrow, +.warning-section .tooltip.bottom .tooltip-arrow { border-bottom-color: #000; } -.entity-editor-pane .tooltip.left .tooltip-arrow { +.map-overlay .tooltip.left .tooltip-arrow, +.entity-editor-pane .tooltip.left .tooltip-arrow, +.warning-section .tooltip.left .tooltip-arrow { border-left-color: #000; } -.entity-editor-pane .tooltip.right .tooltip-arrow { +.map-overlay .tooltip.right .tooltip-arrow, +.entity-editor-pane .tooltip.right .tooltip-arrow, +.warning-section .tooltip.right .tooltip-arrow { border-right-color: #000; } -.entity-editor-pane .tooltip-inner { +.map-overlay .tooltip-inner, +.map-overlay .keyhint-wrap, +.entity-editor-pane .tooltip-inner, +.warning-section .tooltip-inner { background: #000; color: #ccc; } +/* commit warning tooltips need to be closer */ +.warning-section .tooltip.top { + margin-top: -5px; +} /* Uncramp map-control tooltips */ .map-control .tooltip { @@ -3838,7 +4983,7 @@ img.wiki-image { } /* Move over tooltips that are near the edge of screen */ .add-point .tooltip { - left: 33.3333% !important; + left: 33.3333% !important; } .curtain-tooltip.intro-points-add .tooltip-arrow, @@ -3854,33 +4999,37 @@ img.wiki-image { } .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 .icon { - pointer-events: none; +.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; +.lasso-path { + fill-opacity:0.3; stroke: #fff; stroke-width: 1; stroke-opacity: 1; @@ -3891,11 +5040,23 @@ img.wiki-image { ------------------------------------------------------- */ @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;} } +@media screen and (max-width: 1200px) { + .user-list { display: none !important; } +} + +@media screen and (max-width: 1000px) { + #userLink { display: none !important; } +} + +@media screen and (max-width: 900px) { + #scale-block { display: none !important; } +} + + /* Scrollbars ----------------------------------------------------- */ @@ -3952,11 +5113,12 @@ img.wiki-image { background: #8cd05f; } -.intro-nav-wrap button.step .icon { +.intro-nav-wrap button.step .status { + margin-left: 3px; display: none; } -.intro-nav-wrap button.step.finished .icon { +.intro-nav-wrap button.step.finished .status { display: inline-block; } @@ -4000,7 +5162,7 @@ img.wiki-image { 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 { @@ -4020,159 +5182,380 @@ img.wiki-image { .huge-modal-button .illustration { height: 100px; width: 100px; - background: rgba(0, 0, 0, 0) url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat -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-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;} + +.mapillary-wrap { + position: absolute; + bottom: 30px; + width: 330px; + height: 250px; + padding: 5px; + background-color: #fff; +} + +.mapillary-wrap.hidden { + visibility: hidden; +} + +.mapillary-wrap button.thumb-hide { + border-radius: 0; + padding: 5px; + position: absolute; + right: 0; + top: 0; + z-index: 500; +} + +.mly-wrapper { + visibility: hidden; + width: 100%; + height: 100%; +} + +.mly-wrapper.active { + visibility: visible; +} + +/* Right-to-left localization settings */ + +[dir='rtl'] #sidebar { + float: right; +} + +[dir='rtl'] #sidebar .search-header .icon { + left: auto; + right: 10px; +} + +/* header */ +[dir='rtl'] .header h3 { + text-align: right; + padding: 20px 40px 20px 20px; +} + +[dir='rtl'] .entity-editor-pane .header button.preset-choose { + left: auto; + right: 0; +} + +[dir='rtl'] .entity-editor-pane .header button.preset-close, [dir='rtl'] .preset-list-pane .header button.preset-choose { + left: 0; + right: auto; +} + +[dir='rtl'] .preset-icon-fill-area { + left: auto; + right: 10px; +} + +[dir='rtl'] .map-data-control .layer-list button, [dir='rtl'] .background-control .layer-list button { + float: left; + border-left: none; + border-right: 1px solid #CCC; +} + +[dir='rtl'] .map-data-control .layer-list button:first-of-type, [dir='rtl'] .background-control .layer-list button:first-of-type { + border-radius: 3px 0 0 3px; +} + +/* search */ +[dir='rtl'] .feature-list-item .label { + text-align: right; +} + +[dir='rtl'] .feature-list-item .entity-name { + padding-left: 0; + padding-right: 10px; +} + +/* preset form */ +[dir='rtl'] .form-label { + padding: 5px 10px 5px 0; +} + +[dir='rtl'] .form-label button { + border-left: none; + border-right: 1px solid #CCC; +} + +[dir='rtl'] .more-fields label { + padding: 5px 0 5px 10px; +} + +[dir='rtl'] .form-label-button-wrap { + text-align: left; +} + +[dir='rtl'] button.minor { + left: 0; + right: auto; +} + +[dir='rtl'] .form-field .localized-main { + padding-left: 10%; + padding-right: 10px; +} + +[dir='rtl'] .combobox-caret { + margin-left: 0; + margin-right: -30px; +} + +[dir='rtl'] .form-field .button-input-action { + margin-left: 0; + margin-right: -10%; +} + +[dir='rtl'] .icon.pre-text { + margin-left: 5px; + margin-right: 0; +} + +[dir='rtl'] .notice .zoom-to .icon { + margin-left: 10px; + margin-right: 0; +} + +[dir='rtl'] .preset-list-button .label { + text-align: right; + left: 0; + right: 60px; + border-left: none; + border-right: 1px solid rgba(0, 0, 0, .1); + border-radius: 3px 0 0 3px; +} + +[dir='rtl'] .preset-icon-frame { + left: auto; + right: 7px; +} + +[dir='rtl'] .preset-list-item button.tag-reference-button { + left: 0; + right: auto; + border-radius: 3px 0 0 3px; +} + +[dir='rtl'] .preset-list-button-wrap .preset-icon { + left: auto; + right: auto; +} + +[dir='rtl'] .preset-list-button-wrap .preset-icon-28 { + right: 16px; +} + +[dir='rtl'] .preset-list-button-wrap .preset-icon-24 { + right: 18px; +} + +[dir='rtl'] .form-field .maxspeed-unit { + border-radius: 0 0 0 4px; +} + +[dir='rtl'] input[type="checkbox"], [dir='rtl'] input[type="radio"] { + float: right; + margin-left: 5px; + margin-right: 0; +} + +[dir='rtl'] .preset-input-wrap .col6 { + float: right; +} + +/* tags form */ +[dir='rtl'] .tag-row .key-wrap, +[dir='rtl'] .tag-row .input-wrap-position { + float: right; +} + +[dir='rtl'] .tag-row input { + border-left: none; + border-right: 1px solid #CCC; +} + +[dir='rtl'] .tag-row:first-child input.key { + border-top-left-radius: 0; + border-top-right-radius: 4px; +} + +[dir='rtl'] .tag-row button { + left: 10%; + border-left-width: 1px; +} + +[dir='rtl'] .tag-row .tag-reference-button { + left: auto; + right: auto; + margin-right: 35px; + border-left-width: 1px; + border-right-width: 0; +} + +[dir='rtl'] .tag-row:first-child .tag-reference-button { + border-top-left-radius: 4px; + border-top-right-radius: 0; +} + +[dir='rtl'] .tag-row:last-child .tag-reference-button { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 0; +} + +/* map control buttons */ +[dir='rtl'] .map-controls { + left: 0; + right: auto; +} + +[dir='rtl'] .background-control button, +[dir='rtl'] .zoombuttons button.zoom-in { + border-radius: 0 4px 0 0; +} + +[dir='rtl'] .help-control button, +[dir='rtl'] .geolocate-control button { + border-radius: 0 0 4px 0; +} + +[dir='rtl'] .list-item-gpx-browse svg { + transform: rotateY(180deg); +} + +/* map control button overlays */ +[dir='rtl'] .map-overlay { + padding: 20px 20px 20px 50px; + left: 0; + right: auto !important; +} + +[dir='rtl'] .opacity-options { + left: 50px; + right: auto; +} + +[dir='rtl'] .hide-toggle { + padding-left: 0; + padding-right: 12px; +} + +[dir='rtl'] .hide-toggle:before { + left: auto; + right: 0; + border-left: none; + border-right: 8px solid #7092ff; +} + +[dir='rtl'] .hide-toggle.expanded:before { + border-left: 4px solid transparent; + border-right: 4px solid transparent; +} + +/* navbar */ +[dir='rtl'] #bar .spacer, +[dir='rtl'] #bar .button-wrap, +[dir='rtl'] #bar .button-wrap button { + float: right; +} + +[dir='rtl'] .add-point .tooltip { + left: inherit !important; +} + +[dir='rtl'] .button-wrap:last-of-type { + padding-left: 0; + padding-right: 10px; +} + +[dir='rtl'] button.save.has-count .count { + margin-left: auto; + margin-right: 8%; +} + +[dir='rtl'] button.save.has-count .count::before { + border-left: 6px solid rgba(255,255,255,.5); + border-right: none; + left: auto; + right: -6px; +} + +[dir='rtl'] .joined button { + border-left: 1px solid rgba(0,0,0,.5); + border-right: none; +} + +[dir='rtl'] .joined button:first-child { + border-radius: 0 4px 4px 0; +} + +[dir='rtl'] .joined button:last-child { + border-radius: 4px 0 0 4px; +} + +[dir='rtl'] .spinner { + float: left; +} + +[dir='rtl'] .spinner img { + margin-left: 10px; + margin-right: auto; + -moz-transform: scaleX(-1); + -o-transform: scaleX(-1); + -webkit-transform: scaleX(-1); + transform: scaleX(-1); + filter: FlipH; + -ms-filter: "FlipH"; +} + +/* footer */ +[dir='rtl'] #scale-block { + float: right; + clear: right; +} + +[dir='rtl'] #info-block { + clear: left; +} + +[dir='rtl'] #about-list { + text-align: left; + clear: left; + margin-left: 10px; + margin-right: 0; +} + +[dir='rtl'] #about-list li { + float: left; + border-left: none; + border-right: 1px solid rgba(255,255,255,.5); + margin-left: 0; + margin-right: 5px; + padding: 5px 5px 5px 0; +} + +[dir='rtl'] #about-list li:last-child { + border-right: none; +} + +[dir='rtl'] #scale text { + text-anchor: end; +} + +/* increment / decrement control - code by Naoufel Razouane */ + +[dir='rtl'] .spin-control{ + margin-left: 0; + margin-right: -20%; +} +[dir='rtl'] .spin-control button{ + border-left: 0; + border-right: 1px solid #CCC; +} +[dir='rtl'] .spin-control button.decrement{ + border-bottom-right-radius: 0; +} +[dir='rtl'] .spin-control button.increment{ + border-bottom-left-radius: 3px; +}