Files
iD/css/map.css
2017-02-05 16:37:21 -05:00

1670 lines
38 KiB
CSS

use { pointer-events: none; }
/* base styles */
.layer-osm path:not(.oneway) { fill: none; } /* IE needs :not(.oneway) */
/* the above fill: none rule affects paths in <use> 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,
g.midpoint .shadow {
pointer-events: all;
}
path.shadow {
pointer-events: stroke;
}
/* points */
g.point .stroke {
stroke: #444;
stroke-width: 1;
fill: #fff;
}
g.point .shadow {
fill: none;
stroke: #f6634f;
stroke-width: 8;
stroke-opacity: 0;
}
g.point.related:not(.selected) .shadow,
g.point.hover:not(.selected) .shadow {
stroke-opacity: 0.5;
}
g.point.selected .shadow {
stroke-opacity: 0.7;
}
g.point.active, g.point.active * {
pointer-events: none;
}
/* vertices and midpoints */
g.vertex .fill {
fill: #000;
}
g.vertex .stroke {
stroke: #666;
stroke-width: 1;
fill: white;
}
g.vertex.shared .stroke {
fill: #aaa;
}
g.midpoint .fill {
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,
g.midpoint .shadow {
fill: #f6634f;
fill-opacity: 0;
}
g.vertex.vertex-hover {
display: none;
}
.mode-draw-area g.vertex.vertex-hover,
.mode-draw-line g.vertex.vertex-hover,
.mode-add-area g.vertex.vertex-hover,
.mode-add-line g.vertex.vertex-hover,
.mode-add-point g.vertex.vertex-hover,
.mode-drag-node g.vertex.vertex-hover {
display: block;
}
g.vertex.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.5;
}
g.vertex.selected .shadow {
fill-opacity: 0.7;
}
.mode-draw-area g.midpoint,
.mode-draw-line g.midpoint,
.mode-add-area g.midpoint,
.mode-add-line g.midpoint,
.mode-add-point g.midpoint {
display: none;
}
/* lines */
.preset-icon .icon.other-line {
color: #fff;
fill: #777;
}
path.line {
stroke-linecap: round;
stroke-linejoin: bevel;
}
path.stroke {
stroke: #000;
stroke-width: 4;
}
path.shadow {
stroke: #f6634f;
stroke-width: 10;
stroke-opacity: 0;
}
path.shadow.related:not(.selected),
path.shadow.hover:not(.selected) {
stroke-opacity: 0.4;
}
path.shadow.selected {
stroke-opacity: 0.7;
}
path.line.stroke {
stroke: #fff;
stroke-width: 2;
}
path.area.stroke {
stroke: #fff;
stroke-width: 1;
}
path.area.fill {
stroke-width: 0;
stroke: rgba(255, 255, 255, 0.3);
fill: rgba(255, 255, 255, 0.3);
fill-rule: evenodd;
}
.preset-icon-fill-area {
border: 1px solid rgb(170, 170, 170);
background-color: rgba(170, 170, 170, 0.3);
}
path.stroke.tag-natural {
stroke: rgb(182, 225, 153);
}
path.fill.tag-natural {
stroke: rgba(182, 225, 153, 0.3);
fill: rgba(182, 225, 153, 0.3);
}
.preset-icon-fill-area.tag-natural {
border-color: rgb(182, 225, 153);
background-color: rgba(182, 225, 153, 0.3);
}
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-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: rgb(255, 255, 148);
}
path.fill.tag-amenity-childcare,
path.fill.tag-amenity-kindergarten,
path.fill.tag-amenity-school,
path.fill.tag-amenity-college,
path.fill.tag-amenity-university {
stroke: rgba(255, 255, 148, 0.15);
fill: rgba(255, 255, 148, 0.15);
}
.preset-icon-fill-area.tag-amenity-childcare,
.preset-icon-fill-area.tag-amenity-kindergarten,
.preset-icon-fill-area.tag-amenity-school,
.preset-icon-fill-area.tag-amenity-college,
.preset-icon-fill-area.tag-amenity-university {
border-color: rgb(232, 232, 0);
background-color: rgba(255, 255, 148, 0.15);
}
path.stroke.tag-landuse-residential {
stroke: rgb(196, 189, 25);
}
path.fill.tag-landuse-residential {
stroke: rgba(196, 189, 25, 0.3);
fill: rgba(196, 189, 25, 0.3);
}
.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: rgb(214, 136, 26);
}
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-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: rgb(166, 149, 123);
}
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);
}
.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-landuse-landfill {
stroke: rgb(255, 153, 51);
}
path.fill.tag-landuse-landfill {
stroke: rgba(255, 153, 51, 0.2);
fill: rgba(255, 153, 51, 0.2);
}
.preset-icon-fill-area.tag-landuse-landfill {
border-color: rgb(255, 153, 51);
background-color: rgba(255, 153, 51, 0.2);
}
.pattern-color-construction {
fill: rgba(196, 189, 25, 0.2);
}
path.stroke.tag-landuse.tag-status,
path.stroke.tag-landuse-construction {
stroke: rgb(196, 189, 25);
}
.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.stroke.tag-military,
path.stroke.tag-landuse-military {
stroke: rgb(214, 136, 26);
}
path.fill.tag-military,
path.fill.tag-landuse-military {
stroke: rgba(214, 136, 26, 0.2);
fill: rgba(214, 136, 26, 0.2);
}
.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);
}
.pattern-color-wetland {
fill: rgba(182, 225, 153, 0.2);
}
path.stroke.tag-natural-wetland {
stroke: rgb(182, 225, 153);
}
.preset-icon-fill-area.tag-natural-wetland {
border-color: rgb(182, 225, 153);
background-color: rgba(182, 225, 153, 0.2);
}
.pattern-color-meadow {
fill: rgba(182, 225, 153, 0.2);
}
path.stroke.tag-landuse-meadow {
stroke: rgb(182, 225, 153);
}
.preset-icon-fill-area.tag-landuse-meadow {
border-color: rgb(182, 225, 153);
background-color: rgba(182, 225, 153, 0.2);
}
.pattern-color-beach,
.pattern-color-sand {
fill: rgba(255, 255, 126, 0.2);
}
path.stroke.tag-natural-beach,
path.stroke.tag-natural-sand {
stroke: rgb(255, 255, 126);
}
.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: rgba(219, 240, 139, 0.2);
}
path.stroke.tag-natural-scrub {
stroke: rgb(219, 240, 139);
}
.preset-icon-fill-area.tag-natural-scrub {
border-color: rgb(219, 240, 139);
background-color: rgba(219, 240, 139, 0.2);
}
.pattern-color-farm,
.pattern-color-farmland {
fill: rgba(140, 208, 95, 0.2);
}
path.stroke.tag-landuse-farm,
path.stroke.tag-landuse-farmland {
stroke: rgb(140, 208, 95);
}
.preset-icon-fill-area.tag-landuse-farm,
.preset-icon-fill-area.tag-landuse-farmland {
background-color: rgba(140, 208, 95, 0.2);
}
path.stroke.tag-landuse-farmyard {
stroke: rgb(245, 220, 186);
}
path.fill.tag-landuse-farmyard {
stroke: rgba(245, 220, 186, 0.3);
fill: rgba(245, 220, 186, 0.3);
}
.preset-icon-fill-area.tag-landuse-farmyard {
border-color: rgb(245, 220, 186);
background: rgba(245, 220, 186, 0.3);
}
.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: rgb(170, 170, 170);
}
path.fill.tag-amenity-parking {
stroke: rgba(170, 170, 170, 0.3);
fill: rgba(170, 170, 170, 0.3);
}
.preset-icon-fill-area.tag-amenity-parking {
border-color: rgb(170, 170, 170);
background-color: rgba(170, 170, 170, 0.3);
}
/* highway areas */
path.stroke.area.tag-highway {
stroke:#fff;
stroke-dasharray: none;
stroke-width: 2;
}
/* wide highways */
.preset-icon .icon.tag-highway.other-line {
color: #fff;
fill: #777;
}
path.shadow.tag-highway {
stroke-width:16;
}
path.casing.tag-highway {
stroke:#444;
stroke-width:10;
}
path.stroke.tag-highway {
stroke:#ccc;
stroke-width:8;
}
.low-zoom path.shadow.tag-highway {
stroke-width:12;
}
.low-zoom path.casing.tag-highway {
stroke-width:6;
}
.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-motorway {
stroke:#CF2081;
}
path.casing.tag-highway-motorway,
path.casing.tag-highway-motorway_link,
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-trunk {
stroke:#DD2F22;
}
path.casing.tag-highway-trunk,
path.casing.tag-highway-trunk_link,
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-primary {
stroke:#F99806;
}
path.casing.tag-highway-primary,
path.casing.tag-highway-primary_link,
path.casing.tag-primary {
stroke:#70372f;
}
.preset-icon .icon.highway-secondary,
.preset-icon .icon.highway-secondary-link {
color: #F3F312;
fill: #70372f;
}
path.stroke.tag-highway-secondary,
path.stroke.tag-highway-secondary_link,
path.stroke.tag-secondary {
stroke:#F3F312;
}
path.casing.tag-highway-secondary,
path.casing.tag-highway-secondary_link,
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-tertiary {
stroke:#FFF9B3;
}
path.casing.tag-highway-tertiary,
path.casing.tag-highway-tertiary_link,
path.casing.tag-tertiary {
stroke:#70372f;
}
.legacy-carto .preset-icon .icon.highway-motorway,
.legacy-carto .preset-icon .icon.highway-motorway-link {
color: #58a9ed;
fill: #2c5476;
}
.legacy-carto path.stroke.tag-highway-motorway,
.legacy-carto path.stroke.tag-highway-motorway_link,
.legacy-carto path.stroke.tag-motorway {
stroke:#58a9ed;
}
.legacy-carto path.casing.tag-highway-motorway,
.legacy-carto path.casing.tag-highway-motorway_link,
.legacy-carto path.casing.tag-motorway {
stroke:#2c5476;
}
.legacy-carto .preset-icon .icon.highway-trunk,
.legacy-carto .preset-icon .icon.highway-trunk-link {
color: #8cd05f;
fill: #46682f;
}
.legacy-carto path.stroke.tag-highway-trunk,
.legacy-carto path.stroke.tag-highway-trunk_link,
.legacy-carto path.stroke.tag-trunk {
stroke:#8cd05f;
}
.legacy-carto path.casing.tag-highway-trunk,
.legacy-carto path.casing.tag-highway-trunk_link,
.legacy-carto path.casing.tag-trunk {
stroke:#46682f;
}
.legacy-carto .preset-icon .icon.highway-primary,
.legacy-carto .preset-icon .icon.highway-primary-link {
color: #e06d5f;
fill: #70372f;
}
.legacy-carto path.stroke.tag-highway-primary,
.legacy-carto path.stroke.tag-highway-primary_link,
.legacy-carto path.stroke.tag-primary {
stroke:#e06d5f;
}
.legacy-carto path.casing.tag-highway-primary,
.legacy-carto path.casing.tag-highway-primary_link,
.legacy-carto path.casing.tag-primary {
stroke:#70372f;
}
.legacy-carto .preset-icon .icon.highway-secondary,
.legacy-carto .preset-icon .icon.highway-secondary-link {
color: #eab056;
fill: #75582b;
}
.legacy-carto path.stroke.tag-highway-secondary,
.legacy-carto path.stroke.tag-highway-secondary_link,
.legacy-carto path.stroke.tag-secondary {
stroke:#eab056;
}
.legacy-carto path.casing.tag-highway-secondary,
.legacy-carto path.casing.tag-highway-secondary_link,
.legacy-carto path.casing.tag-secondary {
stroke:#75582b;
}
.legacy-carto .preset-icon .icon.highway-tertiary,
.legacy-carto .preset-icon .icon.highway-tertiary-link {
color: #ffff7e;
fill: #7f7f3f;
}
.legacy-carto path.stroke.tag-highway-tertiary,
.legacy-carto path.stroke.tag-highway-tertiary_link,
.legacy-carto path.stroke.tag-tertiary {
stroke:#ffff7e;
}
.legacy-carto path.casing.tag-highway-tertiary,
.legacy-carto path.casing.tag-highway-tertiary_link,
.legacy-carto path.casing.tag-tertiary {
stroke:#7f7f3f;
}
.preset-icon .icon.highway-residential {
color: #fff;
fill: #444;
}
path.stroke.tag-highway-residential,
path.stroke.tag-residential {
stroke:#fff;
}
path.casing.tag-highway-residential,
path.casing.tag-residential {
stroke:#444;
}
.preset-icon .icon.highway-unclassified {
color: #dcd9b9;
fill: #444;
}
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,
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,
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;
}
.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;
}
.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;
}
.preset-icon .icon.highway-living-street {
color: #bbb;
fill: #ddd;
}
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-linecap: butt;
stroke-dasharray: 3, 3;
}
path.casing.tag-highway-steps,
path.casing.tag-highway-steps.tag-unpaved {
stroke: #fff;
stroke-linecap: round;
stroke-dasharray: none;
}
/* aeroways */
path.stroke.tag-aeroway-taxiway {
stroke: #805C80;
stroke-width: 4;
}
path.shadow.tag-aeroway-runway {
stroke-width: 20;
}
path.stroke.tag-aeroway-runway {
stroke: #fff;
stroke-width: 2;
stroke-linecap: butt;
stroke-dasharray: 24, 48;
}
path.casing.tag-aeroway-runway {
stroke-width: 10;
stroke: #000;
stroke-linecap: square;
}
path.fill.tag-aeroway-runway {
stroke: rgba(0, 0, 0, 0.6);
fill: rgba(0, 0, 0, 0.6);
}
path.stroke.tag-aeroway-apron {
stroke: #805C80;
}
path.fill.tag-aeroway-apron {
stroke: rgba(128, 92, 128, 0.2);
fill: rgba(128, 92, 128, 0.2);
}
/* railways */
.preset-icon .icon.tag-railway.other-line {
color: #fff;
fill: #777;
}
.preset-icon .icon.tag-railway {
color: #555;
fill: #eee;
}
path.stroke.tag-railway {
stroke: #eee;
stroke-width: 2;
stroke-linecap: butt;
stroke-dasharray: 12,12;
}
path.casing.tag-railway {
stroke: #555;
stroke-width: 4;
}
.preset-icon .icon.tag-railway-disused,
.preset-icon .icon.tag-railway-abandoned {
color: #999;
fill: #eee;
}
path.stroke.tag-railway-abandoned {
stroke: #eee;
}
path.casing.tag-railway-abandoned {
stroke: #999;
}
.preset-icon .icon.tag-railway-subway {
color: #222;
fill: #bbb;
}
path.stroke.tag-railway-subway {
stroke: #bbb;
}
path.casing.tag-railway-subway {
stroke: #222;
}
path.stroke.tag-railway-platform {
stroke: #999;
stroke-width: 4;
stroke-dasharray: none;
}
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 {
stroke: rgba(119, 211, 222, 0.3);
fill: rgba(119, 211, 222, 0.3);
}
path.stroke.tag-waterway {
stroke: #77d3de;
stroke-width: 2;
}
path.casing.tag-waterway {
stroke: #77d3de;
stroke-width: 4;
}
path.stroke.tag-waterway-river {
stroke-width: 4;
}
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;
}
path.casing.tag-waterway-ditch {
stroke: #6591ff;
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;
stroke-width: 2;
}
path.casing.tag-power {
stroke: none;
}
/* boundaries */
path.stroke.tag-boundary {
stroke: #fff;
stroke-width: 2;
stroke-linecap: butt;
stroke-dasharray: 20, 5, 5, 5;
}
path.casing.tag-boundary {
stroke: #82B5FE;
stroke-width: 6;
}
path.casing.tag-boundary-protected_area,
path.casing.tag-boundary-national_park {
stroke: #b0e298;
}
/* barriers */
path.stroke.tag-barrier {
stroke: #ddd;
stroke-width: 3px;
stroke-linecap: round;
stroke-dasharray: 15, 5, 1, 5;
}
.low-zoom path.stroke.tag-barrier {
stroke-width: 2px;
stroke-linecap: butt;
stroke-dasharray: 8, 2, 2, 2;
}
/* bridges */
path.casing.tag-bridge {
stroke-width: 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;
color: #222;
opacity: 1;
}
.oneway .textpath.tag-waterway {
fill: #002F35;
}
path.oneway {
stroke-width: 6px;
}
text.arealabel-halo,
text.linelabel-halo,
text.pointlabel-halo,
text.arealabel,
text.linelabel,
text.pointlabel {
dominant-baseline: middle;
text-anchor: middle;
font-size: 12px;
font-weight: bold;
fill: #333;
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 {
baseline-shift: -33%;
dominant-baseline: auto;
}
.layer-halo text {
opacity: 0.7;
stroke: #fff;
stroke-width: 5px;
stroke-miterlimit: 1;
}
text.proximate {
opacity: 0;
}
text.point {
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(img/cursor-grab.png) 9 9, auto; /* FF */
}
.mode-browse .point,
.mode-select .point {
cursor: pointer; /* Opera */
cursor: url(img/cursor-select-point.png), pointer; /* FF */
}
.mode-select .vertex,
.mode-browse .vertex {
cursor: pointer; /* Opera */
cursor: url(img/cursor-select-vertex.png), pointer; /* FF */
}
.mode-browse .line,
.mode-select .line {
cursor: pointer; /* Opera */
cursor: url(img/cursor-select-line.png), pointer; /* FF */
}
.mode-select .area,
.mode-browse .area {
cursor: pointer; /* Opera */
cursor: url(img/cursor-select-area.png), pointer; /* FF */
}
.mode-select .midpoint,
.mode-browse .midpoint {
cursor: pointer; /* Opera */
cursor: url(img/cursor-select-split.png), pointer; /* FF */
}
.mode-select .behavior-multiselect .point,
.mode-select .behavior-multiselect .vertex,
.mode-select .behavior-multiselect .line,
.mode-select .behavior-multiselect .area {
cursor: pointer; /* Opera */
cursor: url(img/cursor-select-add.png), pointer; /* FF */
}
.mode-select .behavior-multiselect .selected {
cursor: pointer; /* Opera */
cursor: url(img/cursor-select-remove.png), pointer; /* FF */
}
#map .point:active,
#map .vertex:active,
#map .line:active,
#map .area:active,
#map .midpoint:active,
#map .mode-select .selected {
cursor: pointer; /* Opera */
cursor: url(img/cursor-select-acting.png), pointer; /* FF */
}
.mode-draw-line #map,
.mode-draw-area #map,
.mode-add-line #map,
.mode-add-area #map,
.mode-drag-node #map {
cursor: crosshair; /* Opera */
cursor: url(img/cursor-draw.png) 9 9, crosshair; /* FF */
}
.mode-draw-line .way.hover,
.mode-draw-area .way.hover,
.mode-add-line .way.hover,
.mode-add-area .way.hover,
.mode-drag-node .way.hover {
cursor: crosshair; /* Opera */
cursor: url(img/cursor-draw-connect-line.png) 9 9, crosshair; /* FF */
}
.mode-draw-line .vertex.hover,
.mode-draw-area .vertex.hover,
.mode-add-line .vertex.hover,
.mode-add-area .vertex.hover,
.mode-drag-node .vertex.hover {
cursor: crosshair; /* Opera */
cursor: url(img/cursor-draw-connect-vertex.png) 9 9, crosshair; /* FF */
}
.mode-add-point #map,
.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(img/cursor-draw.png) 9 9, crosshair; /* FF */
}
.turn rect,
.turn circle {
cursor: pointer; /* Opera */
cursor: url(img/cursor-pointer.png) 6 1, pointer; /* FF */
}
.lasso #map {
pointer-events: visibleStroke;
}
/* GPX Paths */
.layer-gpx {
pointer-events: none;
}
path.gpx {
stroke: #FF26D4;
stroke-width: 2;
fill: none;
}
text.gpx {
fill: #FF26D4;
}
/* Mapillary Image Layer */
.layer-mapillary-images {
pointer-events: none;
}
.layer-mapillary-images .viewfield-group {
pointer-events: visible;
cursor: pointer; /* Opera */
cursor: url(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(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 */
.mode-draw-line .vertex.active,
.mode-draw-area .vertex.active,
.mode-drag-node .vertex.active {
display: none;
}
.mode-draw-line .way.active,
.mode-draw-area .way.active,
.mode-drag-node .active {
pointer-events: none;
}
/* Ensure drawing doesn't interact with area fills. */
.mode-add-point .area.fill,
.mode-draw-line .area.fill,
.mode-draw-area .area.fill,
.mode-add-line .area.fill,
.mode-add-area .area.fill,
.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;
}