iD/css/20_map.css

/* base styles */
.layer-osm path:not(.oneway-marker-path) {                /* IE/Edge needs :not(.oneway) */
    fill: none;
}
.layer-osm path.viewfield-marker-path {                   /* IE/Edge rule for <use> marker style */
    fill: #333;
    fill-opacity: 0.75;
    stroke: #fff;
    stroke-width: 0.5px;
    stroke-opacity: 0.75;
}
.fill-wireframe .layer-osm path.viewfield-marker-path {   /* IE/Edge rule for <use> marker style */
    fill: none;
}

/* 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 */


/* No interactivity except what we specifically allow */
.layer-osm * {
    pointer-events: none;
}

.lasso #map {
    pointer-events: visibleStroke;
}


/* `.target` objects are interactive */
/* They can be picked up, clicked, hovered, or things can connect to them */
.node.target {
    pointer-events: fill;
    fill-opacity: 0.8;
    fill: currentColor;
    stroke: none;
}

.way.target {
    pointer-events: stroke;
    fill: none;
    stroke-width: 12;
    stroke-opacity: 0.8;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* `.target-nope` objects are explicitly forbidden to join to */
.surface:not(.nope-disabled) .node.target.target-nope,
.surface:not(.nope-disabled) .way.target.target-nope {
    cursor: not-allowed;
}


/* `.active` objects (currently being drawn or dragged) are not interactive */
/* This is important to allow the events to drop through to whatever is */
/* below them on the map, so you can still hover and connect to other things. */
.layer-osm .active {
    pointer-events: none !important;
}


/* points */

g.point .stroke {
    stroke: #444;
    stroke-width: 1;
    fill: #fff;
}

g.point .shadow {
    fill: none;
    stroke: #f6634f;
    stroke-width: 16;
    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 ellipse.stroke {
    display: none;
}

.mode-drag-node g.point.active ellipse.stroke {
    display: block;
}


/* vertices and midpoints */

g.vertex .fill {
    fill: #000;
}

g.vertex .stroke {
    stroke: #666;
    stroke-width: 1;
    fill: white;
}

g.vertex.shared .stroke {
    fill: #bbb;
}

g.midpoint .fill {
    fill: #eee;
    stroke: #444;
    stroke-opacity: .6;
    opacity: .7;
}

g.vertex .shadow,
g.midpoint .shadow {
    stroke-width: 6;
    fill: #f6634f;
    fill-opacity: 0;
}

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;
}


/* lines */

.preset-icon .icon.other-line {
    color: #fff;
    fill: #777;
}

path.line {
    stroke-linecap: round;
    stroke-linejoin: round;
}

path.stroke {
    stroke: #000;
    stroke-width: 4;
}

path.shadow {
    stroke: #f6634f;
    stroke-width: 16;
    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;
}


/* Labels / Markers */

text {
    font-size: 10px;
    color: #222;
    opacity: 1;
}

.oneway .textpath.tag-waterway {
    fill: #002F35;
}

.onewaygroup path.oneway,
.viewfieldgroup path.viewfield {
    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;
    -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-labels-halo text {
    opacity: 0.7;
    stroke: #fff;
    stroke-width: 5px;
    stroke-miterlimit: 1;
}

text.nolabel {
    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;
}


/* Turn Restrictions */

g.turn rect,
g.turn circle {
    fill: none;
    pointer-events: all;
}

.form-field-restrictions .vertex {
    cursor: auto !important;
    pointer-events: none;
}

/* Turn restriction paths and vertices */
.surface.tr .way.target,
.surface.tr path.shadow.selected,
.surface.tr path.shadow.related {
    stroke-width: 25px;
}

.surface.tr path.shadow.selected,
.surface.tr path.shadow.related,
.surface.tr g.vertex.selected .shadow,
.surface.tr g.vertex.related .shadow {
    stroke-opacity: 0.7;
    stroke: #777;
}
.surface.tr path.shadow.related.allow,
.surface.tr g.vertex.related.allow .shadow {
    stroke: #5b3;
}
.surface.tr path.shadow.related.restrict,
.surface.tr g.vertex.related.restrict .shadow {
    stroke: #d53;
}
.surface.tr path.shadow.related.only,
.surface.tr g.vertex.related.only .shadow {
    stroke: #68f;
}


/* GPX Paths */

.layer-gpx {
    pointer-events: none;
}

path.gpx {
    stroke: #ff26d4;
    stroke-width: 2;
    fill: none;
}

text.gpxlabel-halo,
text.gpxlabel {
    font-size: 10px;
    font-weight: bold;
    dominant-baseline: middle;
}

text.gpxlabel {
    fill: #ff26d4;
}

text.gpxlabel-halo {
    opacity: 0.7;
    stroke: #000;
    stroke-width: 5px;
    stroke-miterlimit: 1;
}