mirror of
https://github.com/FoggedLens/iD.git
synced 2026-03-31 01:09:22 +02:00
better styles for map features.
This commit is contained in:
136
css/map.css
136
css/map.css
@@ -17,11 +17,11 @@ g.point .shadow {
|
||||
-moz-transition: fill 100ms linear;
|
||||
}
|
||||
.behavior-hover g.point.hover:not(.selected) .shadow {
|
||||
fill: #E96666;
|
||||
fill-opacity: 0.3;
|
||||
fill: #f6634f;
|
||||
fill-opacity: 0.5;
|
||||
}
|
||||
g.point.selected .shadow {
|
||||
fill: #E96666;
|
||||
fill: #f6634f;
|
||||
fill-opacity: 0.7;
|
||||
}
|
||||
|
||||
@@ -30,8 +30,10 @@ g.point.selected .shadow {
|
||||
g.vertex .fill {
|
||||
fill:white;
|
||||
}
|
||||
|
||||
g.vertex .stroke {
|
||||
stroke:#333;
|
||||
stroke:black;
|
||||
stroke-opacity: .5;
|
||||
stroke-width:2;
|
||||
fill:white;
|
||||
}
|
||||
@@ -60,69 +62,72 @@ svg[data-zoom="17"] g.vertex .fill {
|
||||
transform:scale(0.7, 0.7);
|
||||
}
|
||||
|
||||
g.vertex.shared .shadow {
|
||||
g.vertex.sha#f6634f .shadow {
|
||||
-webkit-transform:scale(1.2, 1.2);
|
||||
-moz-transform:scale(1.2, 1.2);
|
||||
transform:scale(1.2, 1.2);
|
||||
}
|
||||
g.vertex.shared .fill,
|
||||
g.vertex.shared .stroke {
|
||||
g.vertex.sha#f6634f .fill,
|
||||
g.vertex.sha#f6634f .stroke {
|
||||
-webkit-transform:scale(1.1, 1.1);
|
||||
-moz-transform:scale(1.1, 1.1);
|
||||
transform:scale(1.1, 1.1);
|
||||
}
|
||||
svg[data-zoom="16"] g.vertex.shared .shadow {
|
||||
svg[data-zoom="16"] g.vertex.sha#f6634f .shadow {
|
||||
-webkit-transform:scale(0.9, 0.9);
|
||||
-moz-transform:scale(0.9, 0.9);
|
||||
transform:scale(0.9, 0.9);
|
||||
}
|
||||
svg[data-zoom="16"] g.vertex.shared .fill,
|
||||
svg[data-zoom="16"] g.vertex.shared .stroke {
|
||||
svg[data-zoom="16"] g.vertex.sha#f6634f .fill,
|
||||
svg[data-zoom="16"] g.vertex.sha#f6634f .stroke {
|
||||
-webkit-transform:scale(0.8, 0.8);
|
||||
-moz-transform:scale(0.8, 0.8);
|
||||
transform:scale(0.8, 0.8);
|
||||
}
|
||||
svg[data-zoom="17"] g.vertex.shared .shadow {
|
||||
svg[data-zoom="17"] g.vertex.sha#f6634f .shadow {
|
||||
-webkit-transform:scale(1, 1);
|
||||
-moz-transform:scale(1, 1);
|
||||
transform:scale(1, 1);
|
||||
}
|
||||
svg[data-zoom="17"] g.vertex.shared .fill,
|
||||
svg[data-zoom="17"] g.vertex.shared .stroke {
|
||||
svg[data-zoom="17"] g.vertex.sha#f6634f .fill,
|
||||
svg[data-zoom="17"] g.vertex.sha#f6634f .stroke {
|
||||
-webkit-transform:scale(0.9, 0.9);
|
||||
-moz-transform:scale(0.9, 0.9);
|
||||
transform:scale(0.9, 0.9);
|
||||
}
|
||||
|
||||
g.vertex.shared .fill {
|
||||
g.vertex.sha#f6634f .fill {
|
||||
fill:#aaa;
|
||||
}
|
||||
|
||||
g.vertex .shadow {
|
||||
fill: none;
|
||||
pointer-events: all;
|
||||
stroke-width: 10;
|
||||
stroke-width: 20;
|
||||
-webkit-transition: -webkit-transform 100ms linear;
|
||||
transition: transform 100ms linear;
|
||||
-moz-transition: fill 100ms linear;
|
||||
}
|
||||
.behavior-hover g.vertex.hover:not(.selected) .shadow {
|
||||
fill: #E96666;
|
||||
fill: #f6634f;
|
||||
fill-opacity: 0.3;
|
||||
}
|
||||
}
|
||||
g.vertex.selected .shadow {
|
||||
fill: #E96666;
|
||||
fill-opacity: 0.7;
|
||||
fill: #f6634f;
|
||||
fill-opacity: 0.5;
|
||||
}
|
||||
|
||||
/* midpoints */
|
||||
|
||||
g.midpoint .fill {
|
||||
fill:#aaa;
|
||||
fill:#ddd;
|
||||
stroke:black;
|
||||
stroke-opacity: .5;
|
||||
opacity: .5;
|
||||
}
|
||||
.behavior-hover g.midpoint .fill.hover:not(.selected) {
|
||||
fill:#fff;
|
||||
stroke:#000;
|
||||
fill:white;
|
||||
opacity: .75;
|
||||
}
|
||||
|
||||
g.midpoint .shadow {
|
||||
@@ -134,7 +139,7 @@ g.midpoint .shadow {
|
||||
-moz-transition: fill 100ms linear;
|
||||
}
|
||||
.behavior-hover g.midpoint .shadow.hover:not(.selected) {
|
||||
fill:#E96666;
|
||||
fill:#f6634f;
|
||||
fill-opacity: 0.3;
|
||||
}
|
||||
|
||||
@@ -146,8 +151,8 @@ path.line {
|
||||
}
|
||||
|
||||
path.stroke {
|
||||
stroke: #222;
|
||||
stroke-width: 2;
|
||||
stroke: black;
|
||||
stroke-width: 4;
|
||||
}
|
||||
|
||||
path.shadow {
|
||||
@@ -157,12 +162,12 @@ path.shadow {
|
||||
}
|
||||
|
||||
.behavior-hover path.shadow.hover:not(.selected) {
|
||||
stroke: #E96666;
|
||||
stroke: #f6634f;
|
||||
stroke-opacity: 0.3;
|
||||
}
|
||||
|
||||
path.shadow.selected {
|
||||
stroke: #E96666;
|
||||
stroke: #f6634f;
|
||||
stroke-opacity: 0.7;
|
||||
}
|
||||
|
||||
@@ -191,31 +196,31 @@ path.area.stroke.selected {
|
||||
|
||||
path.area.stroke.tag-natural,
|
||||
path.multipolygon.tag-natural {
|
||||
stroke: #ADD6A5;
|
||||
stroke: #b6e199;
|
||||
stroke-width:1;
|
||||
}
|
||||
path.area.fill.tag-natural,
|
||||
path.multipolygon.tag-natural {
|
||||
fill: #ADD6A5;
|
||||
fill: #b6e199;
|
||||
}
|
||||
|
||||
path.area.stroke.tag-natural-water,
|
||||
path.multipolygon.tag-natural-water {
|
||||
stroke: #6382FF;
|
||||
stroke: #77d3de;
|
||||
}
|
||||
path.area.fill.tag-natural-water,
|
||||
path.multipolygon.tag-natural-water {
|
||||
fill: #ADBEFF;
|
||||
fill: #77d3de;
|
||||
}
|
||||
|
||||
path.area.stroke.tag-building,
|
||||
path.multipolygon.tag-building {
|
||||
stroke: #9E176A;
|
||||
stroke: #e06e5f;
|
||||
stroke-width: 1;
|
||||
}
|
||||
path.area.fill.tag-building,
|
||||
path.multipolygon.tag-building {
|
||||
fill: #ff6ec7;
|
||||
fill: #e06e5f;
|
||||
}
|
||||
|
||||
path.area.stroke.tag-landuse,
|
||||
@@ -228,7 +233,7 @@ path.multipolygon.tag-natural-wood,
|
||||
path.multipolygon.tag-natural-tree,
|
||||
path.multipolygon.tag-natural-grassland,
|
||||
path.multipolygon.tag-leisure-park {
|
||||
stroke: #006B34;
|
||||
stroke: #8cd05f;
|
||||
stroke-width: 1;
|
||||
}
|
||||
path.area.fill.tag-landuse,
|
||||
@@ -241,18 +246,18 @@ path.multipolygon.tag-natural-wood,
|
||||
path.multipolygon.tag-natural-tree,
|
||||
path.multipolygon.tag-natural-grassland,
|
||||
path.multipolygon.tag-leisure-park {
|
||||
fill: #189E59;
|
||||
fill: #8cd05f;
|
||||
fill-opacity: 0.2;
|
||||
}
|
||||
|
||||
path.area.stroke.tag-amenity-parking,
|
||||
path.multipolygon.tag-amenity-parking {
|
||||
stroke: #beb267;
|
||||
stroke: #aaa;
|
||||
stroke-width: 1;
|
||||
}
|
||||
path.area.fill.tag-amenity-parking,
|
||||
path.multipolygon.tag-amenity-parking {
|
||||
fill: #edecc0;
|
||||
fill: #aaa;
|
||||
}
|
||||
|
||||
path.multipolygon.tag-boundary {
|
||||
@@ -286,56 +291,57 @@ svg[data-zoom="16"] path.stroke.tag-highway {
|
||||
path.stroke.tag-highway-motorway,
|
||||
path.stroke.tag-highway-motorway_link,
|
||||
path.stroke.tag-construction-motorway {
|
||||
stroke:#809bc0;
|
||||
stroke:#58a9ed;
|
||||
}
|
||||
|
||||
path.casing.tag-highway-motorway,
|
||||
path.casing.tag-highway-motorway_link,
|
||||
path.casing.tag-construction-motorway {
|
||||
stroke:#506077;
|
||||
stroke:#2c5476;
|
||||
}
|
||||
|
||||
path.stroke.tag-highway-trunk,
|
||||
path.stroke.tag-highway-trunk_link,
|
||||
path.stroke.tag-construction-trunk {
|
||||
stroke:#97d397;
|
||||
stroke:#8cd05f;
|
||||
}
|
||||
path.casing.tag-highway-trunk,
|
||||
path.casing.tag-highway-trunk_link,
|
||||
path.casing.tag-construction-trunk {
|
||||
stroke:#477147;
|
||||
stroke:#46682f;
|
||||
}
|
||||
|
||||
path.stroke.tag-highway-primary,
|
||||
path.stroke.tag-highway-primary_link,
|
||||
path.stroke.tag-construction-primary {
|
||||
stroke:#ec989a;
|
||||
stroke:#e06d5f;
|
||||
}
|
||||
path.casing.tag-highway-primary,
|
||||
path.casing.tag-highway-primary_link,
|
||||
path.casing.tag-construction-primary {
|
||||
stroke:#8d4346;
|
||||
stroke:#70372f;
|
||||
}
|
||||
|
||||
path.stroke.tag-highway-secondary,
|
||||
path.stroke.tag-highway-secondary_link,
|
||||
path.stroke.tag-construction-secondary {
|
||||
stroke:#fecc8b;
|
||||
stroke:#eab056;
|
||||
}
|
||||
path.casing.tag-highway-secondary,
|
||||
path.casing.tag-highway-secondary_link,
|
||||
path.casing.tag-construction-secondary {
|
||||
stroke:#a37b48;
|
||||
stroke:#75582b;
|
||||
}
|
||||
|
||||
path.stroke.tag-highway-tertiary,
|
||||
path.stroke.tag-highway-tertiary_link,
|
||||
path.stroke.tag-construction-tertiary {
|
||||
stroke:#ffffb3;
|
||||
stroke:#ffff7e;
|
||||
}
|
||||
path.casing.tag-highway-tertiary,
|
||||
path.casing.tag-highway-tertiary_link,
|
||||
path.casing.tag-construction-tertiary {
|
||||
stroke:#bbb;
|
||||
stroke:#7f7f3f;
|
||||
}
|
||||
|
||||
path.stroke.tag-highway-unclassified,
|
||||
@@ -372,7 +378,7 @@ path.stroke.tag-highway-pedestrian {
|
||||
shapeRendering: auto;
|
||||
}
|
||||
path.casing.tag-highway-pedestrian {
|
||||
stroke:#84C382;
|
||||
stroke:#8cd05f;
|
||||
stroke-width:6 !important;
|
||||
}
|
||||
|
||||
@@ -445,17 +451,17 @@ svg[data-zoom="16"] path.casing.tag-highway-bridleway {
|
||||
}
|
||||
|
||||
path.stroke.tag-highway-footway {
|
||||
stroke: #996600;
|
||||
stroke: #ae8681;
|
||||
}
|
||||
path.stroke.tag-highway-cycleway {
|
||||
stroke: #69f;
|
||||
stroke: #58a9ed;
|
||||
}
|
||||
path.stroke.tag-highway-bridleway {
|
||||
stroke: green;
|
||||
stroke: #e06d5f;
|
||||
}
|
||||
|
||||
path.stroke.tag-highway-steps {
|
||||
stroke: #ff6257;
|
||||
stroke: #81d25c;
|
||||
stroke-width: 4;
|
||||
stroke-linecap: butt;
|
||||
stroke-dasharray: 3, 3;
|
||||
@@ -467,7 +473,7 @@ path.casing.tag-highway-steps {
|
||||
|
||||
path.casing.tag-bridge-yes {
|
||||
stroke-width: 14;
|
||||
stroke: #000;
|
||||
stroke: #333;
|
||||
}
|
||||
|
||||
path.stroke.tag-highway-construction,
|
||||
@@ -511,12 +517,16 @@ path.casing.tag-railway-subway {
|
||||
|
||||
/* waterways */
|
||||
|
||||
path.area.fill.tag-waterway {
|
||||
fill: #77d3de;
|
||||
}
|
||||
|
||||
path.stroke.tag-waterway {
|
||||
stroke: #10539a;
|
||||
stroke: #77d3de;
|
||||
stroke-width: 2;
|
||||
}
|
||||
path.casing.tag-waterway {
|
||||
stroke: #6AA2FF;
|
||||
stroke: #77d3de;
|
||||
stroke-width: 4;
|
||||
}
|
||||
|
||||
@@ -535,11 +545,11 @@ svg[data-zoom="16"] path.casing.tag-waterway-river {
|
||||
}
|
||||
|
||||
path.stroke.tag-waterway-ditch {
|
||||
stroke: #10539a;
|
||||
stroke: #6591ff;
|
||||
stroke-width: 1;
|
||||
}
|
||||
path.casing.tag-waterway-ditch {
|
||||
stroke: #999692;
|
||||
stroke: #6591ff;
|
||||
stroke-width: 3;
|
||||
}
|
||||
|
||||
@@ -568,17 +578,22 @@ path.casing.tag-boundary {
|
||||
|
||||
path.casing.tag-boundary-protected_area,
|
||||
path.casing.tag-boundary-national_park {
|
||||
stroke: #4D9849;
|
||||
stroke: #b0e298;
|
||||
}
|
||||
|
||||
|
||||
text {
|
||||
font-size:10px;
|
||||
pointer-events: none;
|
||||
color: #222;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.oneway .textpath {
|
||||
pointer-events: none;
|
||||
font-size: 7px;
|
||||
baseline-shift: 2px;
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
text.tag-oneway {
|
||||
@@ -606,7 +621,7 @@ text.pathlabel,
|
||||
text.pointlabel {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
fill: black;
|
||||
fill: #333;
|
||||
text-anchor: middle;
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -632,7 +647,8 @@ text.pointlabel {
|
||||
|
||||
|
||||
text.point {
|
||||
font-size: 9px;
|
||||
font-size: 10px;
|
||||
baseline-shift: 2px;
|
||||
}
|
||||
|
||||
/* Cursors */
|
||||
|
||||
BIN
icons/tree.png
BIN
icons/tree.png
Binary file not shown.
|
Before Width: | Height: | Size: 102 B After Width: | Height: | Size: 158 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 338 B |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 156 KiB After Width: | Height: | Size: 157 KiB |
@@ -1,6 +1,6 @@
|
||||
iD.svg.Lines = function(projection) {
|
||||
|
||||
var arrowtext = '►\u3000\u3000',
|
||||
var arrowtext = '►\u3000\u3000\u3000',
|
||||
alength;
|
||||
|
||||
var highway_stack = {
|
||||
|
||||
@@ -38,7 +38,7 @@ iD.svg.Midpoints = function(projection) {
|
||||
.attr('class', 'midpoint');
|
||||
|
||||
group.append('circle')
|
||||
.attr('r', 7)
|
||||
.attr('r', 8)
|
||||
.attr('class', 'shadow');
|
||||
|
||||
group.append('circle')
|
||||
|
||||
@@ -26,7 +26,7 @@ iD.svg.Vertices = function(projection) {
|
||||
.attr('class', 'shadow');
|
||||
|
||||
group.append('circle')
|
||||
.attr('r', 6)
|
||||
.attr('r', 4)
|
||||
.attr('class', 'stroke');
|
||||
|
||||
group.append('circle')
|
||||
|
||||
Reference in New Issue
Block a user