Update to iD v1.8.0
[rails.git] / vendor / assets / iD / iD.css.erb
index 69374d7db9ece90656f0738f6d5aaee114939812..25103657d84ec12eb8c0b738c6574c82b960bd28 100644 (file)
@@ -184,14 +184,11 @@ img.tile-removing {
     opacity: 0;
 }
 
-/* base styles */
-path {
-    fill: none;
-}
+use { pointer-events: none; }
 
-use {
-    pointer-events: none;
-}
+/* base styles */
+.layer path { fill: none; }
+.layer use path { fill: #333; }  /* FF svg icons */
 
 g.point .shadow,
 g.vertex .shadow,
@@ -310,13 +307,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;
 }
 
@@ -335,12 +337,12 @@ path.shadow.selected {
 }
 
 path.line.stroke {
-    stroke: white;
+    stroke: #fff;
     stroke-width: 2;
 }
 
 path.area.stroke {
-    stroke: white;
+    stroke: #fff;
     stroke-width: 1;
 }
 path.area.fill {
@@ -450,8 +452,7 @@ path.fill.tag-landuse-residential {
 }
 .preset-icon-fill-area.tag-landuse-residential {
     border-color: rgb(196, 189, 25);
-    background: none;
-    box-shadow: inset 0 0 0 5px rgba(196, 189, 25, 0.3);
+    background: rgba(196, 189, 25, 0.3);
 }
 
 path.stroke.tag-landuse-retail,
@@ -466,8 +467,7 @@ path.fill.tag-landuse-commercial {
 .preset-icon-fill-area.tag-landuse-retail,
 .preset-icon-fill-area.tag-landuse-commercial {
     border-color: rgb(214, 136, 26);
-    background: none;
-    box-shadow: inset 0 0 0 5px rgba(214, 136, 26, 0.3);
+    background-color: rgba(214, 136, 26, 0.3);
 }
 
 path.stroke.tag-landuse-industrial {
@@ -479,8 +479,7 @@ path.fill.tag-landuse-industrial {
 }
 .preset-icon-fill-area.tag-landuse-industrial {
     border-color: rgb(228, 164, 245);
-    background: none;
-    box-shadow: inset 0 0 0 5px rgba(228, 164, 245, 0.3);
+    background-color: rgba(228, 164, 245, 0.3);
 }
 
 path.stroke.tag-landuse-quarry {
@@ -627,6 +626,11 @@ path.stroke.area.tag-highway {
 
 /* wide highways */
 
+.preset-icon .icon.tag-highway.other-line {
+    color: #fff;
+    fill: #777;
+}
+
 path.shadow.tag-highway {
     stroke-width:16;
 }
@@ -649,33 +653,47 @@ path.stroke.tag-highway {
     stroke-width:4;
 }
 
+.preset-icon .icon.highway-motorway,
+.preset-icon .icon.highway-motorway-link {
+    color: #CF2081;
+    fill: #70372f;
+}
 path.stroke.tag-highway-motorway,
 path.stroke.tag-highway-motorway_link,
 path.stroke.tag-motorway {
-    stroke:#58a9ed;
+    stroke:#CF2081;
 }
-
 path.casing.tag-highway-motorway,
 path.casing.tag-highway-motorway_link,
 path.casing.tag-motorway {
-    stroke:#2c5476;
+    stroke:#70372f;
 }
 
+.preset-icon .icon.highway-trunk,
+.preset-icon .icon.highway-trunk-link {
+    color: #DD2F22;
+    fill: #70372f;
+}
 path.stroke.tag-highway-trunk,
 path.stroke.tag-highway-trunk_link,
 path.stroke.tag-trunk {
-    stroke:#8cd05f;
+    stroke:#DD2F22;
 }
 path.casing.tag-highway-trunk,
 path.casing.tag-highway-trunk_link,
 path.casing.tag-trunk {
-    stroke:#46682f;
+    stroke:#70372f;
 }
 
+.preset-icon .icon.highway-primary,
+.preset-icon .icon.highway-primary-link {
+    color: #F99806;
+    fill: #70372f;
+}
 path.stroke.tag-highway-primary,
 path.stroke.tag-highway-primary_link,
 path.stroke.tag-primary {
-    stroke:#e06d5f;
+    stroke:#F99806;
 }
 path.casing.tag-highway-primary,
 path.casing.tag-highway-primary_link,
@@ -683,28 +701,122 @@ path.casing.tag-primary {
     stroke:#70372f;
 }
 
+.preset-icon .icon.highway-secondary,
+.preset-icon .icon.highway-secondary-link {
+    color: #F3F312;
+    fill: #70372f;
+}
 path.stroke.tag-highway-secondary,
 path.stroke.tag-highway-secondary_link,
 path.stroke.tag-secondary {
-    stroke:#eab056;
+    stroke:#F3F312;
 }
 path.casing.tag-highway-secondary,
 path.casing.tag-highway-secondary_link,
 path.casing.tag-secondary {
-    stroke:#75582b;
+    stroke:#70372f;
 }
 
+.preset-icon .icon.highway-tertiary,
+.preset-icon .icon.highway-tertiary-link {
+    color: #FFF9B3;
+    fill: #70372f;
+}
 path.stroke.tag-highway-tertiary,
 path.stroke.tag-highway-tertiary_link,
 path.stroke.tag-tertiary {
-    stroke:#ffff7e;
+    stroke:#FFF9B3;
 }
 path.casing.tag-highway-tertiary,
 path.casing.tag-highway-tertiary_link,
 path.casing.tag-tertiary {
+    stroke:#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-unclassified {
+    color: #eaeaea;
+    fill: #444;
+}
 path.stroke.tag-highway-unclassified,
 path.stroke.tag-unclassified {
     stroke:#eaeaea;
@@ -714,6 +826,10 @@ path.casing.tag-unclassified {
     stroke:#444;
 }
 
+.preset-icon .icon.highway-residential {
+    color: #fff;
+    fill: #444;
+}
 path.stroke.tag-highway-residential,
 path.stroke.tag-residential {
     stroke:#fff;
@@ -822,7 +938,10 @@ path.casing.tag-road {
     stroke-width:4;
 }
 
-
+.preset-icon .icon.highway-living-street {
+    color: #ccc;
+    fill: #fff;
+}
 path.stroke.tag-highway-living_street,
 path.stroke.tag-living_street {
     stroke:#ccc;
@@ -832,6 +951,10 @@ path.casing.tag-living_street {
     stroke:#fff;
 }
 
+.preset-icon .icon.highway-pedestrian {
+    color: #8cd05f;
+    fill: #fff;
+}
 path.stroke.tag-highway-corridor,
 path.stroke.tag-highway-pedestrian,
 path.stroke.tag-corridor,
@@ -846,15 +969,23 @@ path.casing.tag-pedestrian {
     stroke:#8cd05f;
 }
 
+.preset-icon .icon.highway-road {
+    color: #9e9e9e;
+    fill: #666;
+}
 path.stroke.tag-highway-road,
 path.stroke.tag-road {
     stroke:#9e9e9e;
 }
 path.casing.tag-highway-road,
 path.casing.tag-road {
-    stroke:#444;
+    stroke:#666;
 }
 
+.preset-icon .icon.highway-service {
+    color: #fff;
+    fill: #666;
+}
 path.stroke.tag-highway-service,
 path.stroke.tag-service {
     stroke:#fff;
@@ -864,6 +995,10 @@ path.casing.tag-service {
     stroke:#666;
 }
 
+.preset-icon .icon.highway-track {
+    color: #ccc;
+    fill: #996600;
+}
 path.stroke.tag-highway-track,
 path.stroke.tag-track {
     stroke: #ccc;
@@ -893,19 +1028,46 @@ path.casing.tag-highway-bridleway {
     stroke: #fff;
 }
 
+.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.tag-route-bicycle,
+.preset-icon .icon.highway-cycleway {
+    color: #58a9ed;
+    fill: #fff;
+}
 path.stroke.tag-highway-cycleway {
     stroke: #58a9ed;
 }
+
+.preset-icon .icon.highway-bridleway {
+    color: #e06d5f;
+    fill: #fff;
+}
 path.stroke.tag-highway-bridleway {
     stroke: #e06d5f;
 }
 
+.preset-icon .icon.highway-steps {
+    color: #81d25c;
+    fill: #fff;
+}
 path.stroke.tag-highway-steps {
     stroke: #81d25c;
     stroke-linecap: butt;
@@ -949,19 +1111,30 @@ path.fill.tag-aeroway-apron {
 
 
 /* railways */
-
+.preset-icon .icon.tag-railway.other-line {
+    color: #fff;
+    fill: #777;
+}
+.preset-icon .icon.tag-railway {
+    color: #555;
+    fill: #eee;
+}
 path.stroke.tag-railway {
     stroke: #eee;
     stroke-width: 2;
     stroke-linecap: butt;
     stroke-dasharray: 12,12;
 }
-
 path.casing.tag-railway {
     stroke: #555;
     stroke-width: 4;
 }
 
+.preset-icon .icon.tag-railway-disused,
+.preset-icon .icon.tag-railway-abandoned {
+    color: #999;
+    fill: #eee;
+}
 path.stroke.tag-railway-abandoned {
     stroke: #eee;
 }
@@ -969,8 +1142,12 @@ path.casing.tag-railway-abandoned {
     stroke: #999;
 }
 
+.preset-icon .icon.tag-railway-subway {
+    color: #222;
+    fill: #bbb;
+}
 path.stroke.tag-railway-subway {
-    stroke: #666;
+    stroke: #bbb;
 }
 path.casing.tag-railway-subway {
     stroke: #222;
@@ -995,6 +1172,16 @@ path.casing.tag-railway-platform {
 }
 
 /* waterways */
+.preset-icon .icon.tag-waterway.other-line {
+    color: #77d3de;
+    fill: #77d3de;
+}
+.preset-icon .icon.category-water,
+.preset-icon .icon.tag-route-ferry,
+.preset-icon .icon.tag-waterway {
+    color: #77d3de;
+    fill: #fff;
+}
 
 path.fill.tag-waterway {
     stroke: rgba(119, 211, 222, 0.3);
@@ -1017,6 +1204,9 @@ path.casing.tag-waterway-river {
     stroke-width: 6;
 }
 
+.preset-icon .icon.tag-waterway-ditch {
+    color: #6591ff;
+}
 path.stroke.tag-waterway-ditch {
     stroke: #6591ff;
     stroke-width: 1;
@@ -1027,6 +1217,11 @@ path.casing.tag-waterway-ditch {
 }
 
 /* power */
+.preset-icon .icon.tag-man_made-pipeline,
+.preset-icon .icon.tag-power {
+    color: #939393;
+    fill: #939393;
+}
 
 path.stroke.tag-power {
     stroke: #939393;
@@ -2003,19 +2198,38 @@ button.save.has-count .count::before {
 /* Icons */
 
 .icon {
-  display:inline-block;
-  vertical-align:top;
-  width:20px;
-  height:20px;
-  background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 0;
-  text-indent:-9999px;
-  overflow:hidden;
-  }
-
-.icon-pre-text {
+    vertical-align: top;
+    width: 20px;
+    height: 20px;
+}
+
+.icon.inline {
+    vertical-align: text-top;
+    width: 14px;
+    height: 14px;
+    margin: 0px 3px;
+}
+
+.icon.pre-text {
     margin-right: 3px;
 }
 
+.icon.light {
+    color: #fff;
+}
+
+.icon.created {
+    color: #00ca07;
+}
+
+.icon.modified {
+    color: #666;
+}
+
+.icon.deleted {
+    color: #ea0000;
+}
+
 .user-icon {
     max-height: 20px;
     max-width: 20px;
@@ -2024,107 +2238,6 @@ button.save.has-count .count::before {
     border-radius: 3px;
 }
 
-/* Definitions for every icon */
-.icon.alert     { background-position:   0 0;}
-.icon.point,
-.icon.add-point  { background-position: -20px 0;}
-.icon.line,
-.icon.add-line   { background-position: -40px 0;}
-.icon.area,
-.icon.add-area   { background-position: -60px 0;}
-.icon.undo       { background-position: -80px 0;}
-.icon.redo       { background-position: -100px 0;}
-.icon.apply      { background-position: -120px 0;}
-.icon.save       { background-position: -140px 0;}
-.icon.close      { background-position: -160px 0;}
-.icon.delete     { background-position: -180px 0;}
-.icon.remove     { background-position: -200px 0;}
-.icon.inspect    { background-position: -220px 0;}
-.icon.plus       { background-position: -240px 0;}
-.icon.search     { background-position: -280px 0;}
-.icon.geocode    { background-position: -280px 0;}
-.icon.layers     { background-position: -300px 0;}
-.icon.avatar     { background-position: -320px 0;}
-.icon.nearby     { background-position: -340px 0;}
-.icon.geolocate  { background-position: -360px 0;}
-.icon.warning    { background-position: -380px 0;}
-.icon.bug        { background-position: -400px 0;}
-.icon.back       { background-position: -420px 0;}
-.icon.forward    { background-position: -440px 0;}
-.icon.help       { background-position: -460px 0;}
-.icon.relation    { background-position: -520px 0;}
-.icon.relation.route         { background-position: -540px 0;}
-.icon.relation.multipolygon  { background-position: -560px 0;}
-.icon.vertex     { background-position: -580px 0;}
-.icon.data       { background-position: -600px 0;}
-
-.icon.inspect.light    { background-position: -220px -20px;}
-.icon.plus.light       { background-position: -240px -20px;}
-.icon.zoom-in          { background-position: -240px -20px;}
-.icon.zoom-out         { background-position: -260px -20px;}
-.icon.geocode.light    { background-position: -280px -20px;}
-.icon.layers.light     { background-position: -300px -20px;}
-.icon.avatar.light     { background-position: -320px -20px;}
-.icon.nearby.light     { background-position: -340px -20px;}
-.icon.geolocate.light  { background-position: -360px -20px;}
-.icon.bug.light        { background-position: -400px -20px;}
-.icon.help.light       { background-position: -460px -20px;}
-.icon.data.light       { background-position: -600px -20px;}
-
-.icon.back.blue        { background-position: -420px -20px;}
-.icon.forward.blue     { background-position: -440px -20px;}
-
-.icon.full-screen              { background-position: -620px -20px;}
-.active .icon.full-screen      { background-position: -640px -20px;}
-
-button[disabled] .icon.alert      { background-position:   0 -40px;}
-button[disabled] .icon.add-point  { background-position: -20px -40px;}
-button[disabled] .icon.add-line   { background-position: -40px -40px;}
-button[disabled] .icon.add-area   { background-position: -60px -40px;}
-button.disabled  .icon.undo       { background-position: -80px -40px;}
-button.disabled  .icon.redo       { background-position: -100px -40px;}
-button[disabled] .apply.icon      { background-position: -120px -40px;}
-button[disabled] .close.icon      { background-position: -160px -40px;}
-button[disabled] .delete.icon     { background-position: -180px -40px;}
-button[disabled] .icon.remove     { background-position: -200px -40px;}
-button[disabled] .icon.inspect    { background-position: -220px -40px;}
-button[disabled] .icon.zoom-in    { background-position: -240px -40px;}
-button[disabled] .icon.zoom-out   { background-position: -260px -40px;}
-button[disabled] .icon.geocode    { background-position: -280px -40px;}
-button[disabled] .icon.layers     { background-position: -300px -40px;}
-button[disabled] .icon.avatar     { background-position: -320px -40px;}
-button[disabled] .icon.nearby     { background-position: -340px -40px;}
-button[disabled] .icon.data       { background-position: -600px -40px;}
-
-.icon.point.deleted  { background-position: -480px -80px;}
-.icon.line.deleted   { background-position: -500px -80px;}
-.icon.area.deleted   { background-position: -520px -80px;}
-
-.icon.point.created  { background-position: -480px -100px;}
-.icon.line.created   { background-position: -500px -100px;}
-.icon.area.created   { background-position: -520px -100px;}
-
-.icon.point.modified  { background-position: -22px 0; }
-
-.icon.modified { opacity: .5; }
-
-/* Out link is special */
-
-.icon.out-link   { height: 14px; width: 14px; background-position: -500px 0;}
-a:hover .icon.out-link   { background-position: -500px -14px;}
-
-.icon.plus-dark    { background-position: -240px -40px;}
-
-/* Universal preset icons */
-
-.icon.source     { background-position:   0 -200px;}
-.icon.address    { background-position: -20px -200px;}
-.icon.telephone  { background-position: -40px -200px;}
-.icon.website    { background-position: -60px -200px;}
-.icon.elevation  { background-position: -80px -200px;}
-.icon.wikipedia  { background-position: -100px -200px;}
-.icon.note       { background-position: -120px -200px;}
-.icon.wheelchair { background-position: -140px -200px;}
 
 /* ToolBar / Persistent UI Elements
 ------------------------------------------------------- */
@@ -2177,6 +2290,12 @@ a:hover .icon.out-link   { background-position: -500px -14px;}
     top: 0;
 }
 
+.preset-choose {
+    font-size: 16px;
+    line-height: 1.25;
+    font-weight: bold;
+}
+
 .modal > button {
     position: absolute;
     right: 0;
@@ -2399,17 +2518,52 @@ 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;
-    top: 17px;
-    left: 17px;
+    left: 10px;
+    top: 10px;
+}
+
+.preset-icon-frame {
+    position: absolute;
+    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-32 {
+    position: absolute;
+    top: 14px;
+    left: 13px;   /* Maki icons off center? */
+    margin: auto;
+}
+
+.preset-icon-32 .icon {
+    width: 32px;
+    height: 32px;
 }
 
 .preset-list-button .label {
@@ -2444,6 +2598,10 @@ a:hover .icon.out-link   { background-position: -500px -14px;}
     background: #fafafa;
 }
 
+.preset-list-item button.tag-reference-button:hover {
+    background: #f1f1f1;
+}
+
 .preset-list-item button.tag-reference-button .icon {
     opacity: .5;
 }
@@ -2489,27 +2647,6 @@ a:hover .icon.out-link   { background-position: -500px -14px;}
     margin-top: -10px;
 }
 
-/* Preset icon colors */
-
-.preset-icon-fill-area {
-    cursor: inherit;
-    height: 39px;
-    width: 39px;
-    margin: auto;
-    position: absolute;
-    left: 10px;
-    top: 10px;
-}
-
-.preset-icon-fill-area:after {
-    content: '';
-    left: -4px;
-    top: -4px;
-    height: 45px;
-    width: 45px;
-    position: absolute;
-    background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 -80px;
-}
 
 /* preset form basics */
 
@@ -2589,7 +2726,10 @@ a:hover .icon.out-link   { background-position: -500px -14px;}
     width: 10%;
     height: 100%;
     border-radius: 0;
-    background: #fafafa;
+    background: #f6f6f6;
+}
+.form-label button:hover {
+    background: #f1f1f1;
 }
 
 .form-label .modified-icon,
@@ -3781,6 +3921,7 @@ div.full-screen > button:hover {
     right:0;
     bottom:0;
     border-radius: 0;
+    pointer-events: none;
 }
 
 #attrib {
@@ -3789,7 +3930,6 @@ div.full-screen > button:hover {
     margin-bottom: 5px;
     float: left;
     clear: both;
-    pointer-events: none;
 }
 
 #attrib * { pointer-events: all; }
@@ -3822,19 +3962,20 @@ div.full-screen > button:hover {
     width: 100%;
     float: left;
     clear: both;
+    pointer-events: all;
 }
 
 #scale-block {
     display: table-cell;
     vertical-align: bottom;
     width: 250px;
-    height: 30px;
+    max-height: 30px;
     float: left;
     clear: left;
 }
 
 #info-block {
-    float: right;
+    max-height: 30px;
     clear: right;
 }
 
@@ -3861,6 +4002,7 @@ div.full-screen > button:hover {
     text-align: right;
     margin-right: 10px;
     clear: right;
+    overflow: hidden;
 }
 
 #about-list li {
@@ -3998,7 +4140,7 @@ div.full-screen > button:hover {
 }
 
 .modal-actions button:before,
-.save-success a.button:before,
+.save-success a.button.osm:before,
 .walkthrough a:before {
     display: block;
     content: '';
@@ -4007,7 +4149,7 @@ div.full-screen > button:hover {
     max-width: 100px;
     margin: auto;
     margin-bottom: 10px;
-    background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 -220px;
+    background:transparent url(<%= asset_path("iD/img/iD-sprite.svg") %>) no-repeat -200px -460px;
 }
 
 .modal-actions :first-child {
@@ -4022,11 +4164,11 @@ div.full-screen > button:hover {
 ------------------------------------------------------- */
 
 .modal-actions .restore:before {
-    background-position: -600px -220px;
+    background-position: -500px -460px;
 }
 
 .modal-actions .reset:before {
-    background-position: -700px -220px;
+    background-position: -600px -460px;
 }
 
 /* Success Modal
@@ -4040,28 +4182,18 @@ div.full-screen > button:hover {
     padding-top: 15px;
 }
 
-.save-success .button.social {
-    height: 80px;
+.save-success a.button.social {
+    height: auto;
 }
 
-.save-success .button.social:before {
-    height: 50px;
+.save-success .icon.social {
+    height: 80px;
+    width: 80px;
+    color: #7092FF;
 }
 
 .save-success .button.osm:before {
-    background-position: 0px -220px;
-}
-
-.save-success .button.twitter:before {
-    background-position: -100px -245px;
-}
-
-.save-success .button.facebook:before {
-    background-position: -200px -245px;
-}
-
-.save-success .button.google:before {
-    background-position: -300px -245px;
+    background-position: -200px -460px;
 }
 
 /* Splash Modal
@@ -4069,11 +4201,11 @@ div.full-screen > button:hover {
 
 .modal-actions .walkthrough:before,
 .walkthrough a:before {
-    background-position: -400px -220px;
+    background-position: -300px -460px;
 }
 
 .modal-actions .start:before {
-    background-position: -500px -220px;
+    background-position: -400px -460px;
 }
 
 /* Commit Modal
@@ -4231,10 +4363,6 @@ div.full-screen > button:hover {
     margin-right:10px;
 }
 
-.icon.zoom-in-invert {
-    background-position: -240px -40px;
-}
-
 /* Tooltips
 ------------------------------------------------------- */
 
@@ -4443,27 +4571,35 @@ div.full-screen > button:hover {
 }
 
 .radial-menu-background {
+    fill: none;
     stroke: black;
     stroke-opacity: 0.5;
 }
 
-.radial-menu-item {
-    fill: white;
-}
-
-.radial-menu-item:hover {
-    fill: #ececec;
+.radial-menu-item circle {
+    fill: #eee;
 }
 
-.radial-menu-item:active {
-    fill: #ececec;
+.radial-menu-item circle:active,
+.radial-menu-item circle:hover {
+    fill: #fff;
 }
 
-.radial-menu-item.disabled {
+.radial-menu-item.disabled circle {
     cursor: auto;
     fill: rgba(255,255,255,.5);
 }
 
+.radial-menu-item use {
+    fill: #222;
+    color: #79f;
+}
+
+.radial-menu-item.disabled use {
+    fill: rgba(32,32,32,.5);
+    color: rgba(40,40,40,.5);
+}
+
 .lasso-box {
     fill-opacity:0.1;
     stroke: #fff;
@@ -4476,7 +4612,6 @@ div.full-screen > button:hover {
 ------------------------------------------------------- */
 
 @media only screen and (max-width: 840px) {
-    #bar .icon.icon-pre-text { margin-right: 0;}
     /* override hide for save button */
     #bar .save .label { display: block;}
 }
@@ -4598,7 +4733,7 @@ div.full-screen > button:hover {
     content: "";
     height: 80px;
     width: 200px;
-    background:transparent url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat 0 -320px;
+    background:transparent url(<%= asset_path("iD/img/iD-sprite.svg") %>) no-repeat 0 -320px;
 }
 
 .intro-areas-add .tooltip-inner::before {
@@ -4618,189 +4753,6 @@ div.full-screen > button:hover {
 .huge-modal-button .illustration {
     height: 100px;
     width: 100px;
-    background: rgba(0, 0, 0, 0) url(<%= asset_path("iD/img/sprite.svg") %>) no-repeat -400px -220px;
+    background: rgba(0, 0, 0, 0) url(<%= asset_path("iD/img/iD-sprite.svg") %>) no-repeat -300px -460px;
     margin: auto;
 }
-/* This file is generated by make. Do NOT edit manually. */
-
-.preset-icon{background-image:url(<%= asset_path("iD/img/maki-sprite.png") %>);background-repeat:no-repeat;width:24px;height:24px;}
-.preset-icon-line{background-image:url(<%= asset_path("iD/img/line-presets.png") %>);background-repeat:no-repeat;width:60px;height:60px;}
-.preset-icon-relation{background-image:url(<%= asset_path("iD/img/relation-presets.png") %>);background-repeat:no-repeat;width:60px;height:60px;}
-.feature-circle-stroked{background-position:-0px -0px;}
-.feature-circle{background-position:-54px -0px;}
-.feature-square-stroked{background-position:-108px -0px;}
-.feature-square{background-position:-162px -0px;}
-.feature-triangle-stroked{background-position:-216px -0px;}
-.feature-triangle{background-position:-0px -24px;}
-.feature-star-stroked{background-position:-54px -24px;}
-.feature-star{background-position:-108px -24px;}
-.feature-cross{background-position:-162px -24px;}
-.feature-marker-stroked{background-position:-216px -24px;}
-.feature-marker{background-position:-0px -48px;}
-.feature-religious-jewish{background-position:-54px -48px;}
-.feature-religious-christian{background-position:-108px -48px;}
-.feature-religious-muslim{background-position:-162px -48px;}
-.feature-cemetery{background-position:-216px -48px;}
-.feature-rocket{background-position:-0px -72px;}
-.feature-airport{background-position:-54px -72px;}
-.feature-heliport{background-position:-108px -72px;}
-.feature-rail{background-position:-162px -72px;}
-.feature-rail-metro{background-position:-216px -72px;}
-.feature-rail-light{background-position:-0px -96px;}
-.feature-bus{background-position:-54px -96px;}
-.feature-fuel{background-position:-108px -96px;}
-.feature-parking{background-position:-162px -96px;}
-.feature-parking-garage{background-position:-216px -96px;}
-.feature-airfield{background-position:-0px -120px;}
-.feature-roadblock{background-position:-54px -120px;}
-.feature-ferry{background-position:-108px -120px;}
-.feature-harbor{background-position:-162px -120px;}
-.feature-bicycle{background-position:-216px -120px;}
-.feature-park{background-position:-0px -144px;}
-.feature-park2{background-position:-54px -144px;}
-.feature-museum{background-position:-108px -144px;}
-.feature-lodging{background-position:-162px -144px;}
-.feature-monument{background-position:-216px -144px;}
-.feature-zoo{background-position:-0px -168px;}
-.feature-garden{background-position:-54px -168px;}
-.feature-campsite{background-position:-108px -168px;}
-.feature-theatre{background-position:-162px -168px;}
-.feature-art-gallery{background-position:-216px -168px;}
-.feature-pitch{background-position:-0px -192px;}
-.feature-soccer{background-position:-54px -192px;}
-.feature-america-football{background-position:-108px -192px;}
-.feature-tennis{background-position:-162px -192px;}
-.feature-basketball{background-position:-216px -192px;}
-.feature-baseball{background-position:-0px -216px;}
-.feature-golf{background-position:-54px -216px;}
-.feature-swimming{background-position:-108px -216px;}
-.feature-cricket{background-position:-162px -216px;}
-.feature-skiing{background-position:-216px -216px;}
-.feature-school{background-position:-0px -240px;}
-.feature-college{background-position:-54px -240px;}
-.feature-library{background-position:-108px -240px;}
-.feature-post{background-position:-162px -240px;}
-.feature-fire-station{background-position:-216px -240px;}
-.feature-town-hall{background-position:-0px -264px;}
-.feature-police{background-position:-54px -264px;}
-.feature-prison{background-position:-108px -264px;}
-.feature-embassy{background-position:-162px -264px;}
-.feature-beer{background-position:-216px -264px;}
-.feature-restaurant{background-position:-0px -288px;}
-.feature-cafe{background-position:-54px -288px;}
-.feature-shop{background-position:-108px -288px;}
-.feature-fast-food{background-position:-162px -288px;}
-.feature-bar{background-position:-216px -288px;}
-.feature-bank{background-position:-0px -312px;}
-.feature-grocery{background-position:-54px -312px;}
-.feature-cinema{background-position:-108px -312px;}
-.feature-pharmacy{background-position:-162px -312px;}
-.feature-hospital{background-position:-216px -312px;}
-.feature-danger{background-position:-0px -336px;}
-.feature-industrial{background-position:-54px -336px;}
-.feature-warehouse{background-position:-108px -336px;}
-.feature-commercial{background-position:-162px -336px;}
-.feature-building{background-position:-216px -336px;}
-.feature-place-of-worship{background-position:-0px -360px;}
-.feature-alcohol-shop{background-position:-54px -360px;}
-.feature-logging{background-position:-108px -360px;}
-.feature-oil-well{background-position:-162px -360px;}
-.feature-slaughterhouse{background-position:-216px -360px;}
-.feature-dam{background-position:-0px -384px;}
-.feature-water{background-position:-54px -384px;}
-.feature-wetland{background-position:-108px -384px;}
-.feature-disability{background-position:-162px -384px;}
-.feature-telephone{background-position:-216px -384px;}
-.feature-emergency-telephone{background-position:-0px -408px;}
-.feature-toilets{background-position:-54px -408px;}
-.feature-waste-basket{background-position:-108px -408px;}
-.feature-music{background-position:-162px -408px;}
-.feature-land-use{background-position:-216px -408px;}
-.feature-city{background-position:-0px -432px;}
-.feature-town{background-position:-54px -432px;}
-.feature-village{background-position:-108px -432px;}
-.feature-farm{background-position:-162px -432px;}
-.feature-bakery{background-position:-216px -432px;}
-.feature-dog-park{background-position:-0px -456px;}
-.feature-lighthouse{background-position:-54px -456px;}
-.feature-clothing-store{background-position:-108px -456px;}
-.feature-polling-place{background-position:-162px -456px;}
-.feature-playground{background-position:-216px -456px;}
-.feature-entrance{background-position:-0px -480px;}
-.feature-heart{background-position:-54px -480px;}
-.feature-london-underground{background-position:-108px -480px;}
-.feature-minefield{background-position:-162px -480px;}
-.feature-rail-underground{background-position:-216px -480px;}
-.feature-rail-above{background-position:-0px -504px;}
-.feature-camera{background-position:-54px -504px;}
-.feature-laundry{background-position:-108px -504px;}
-.feature-car{background-position:-162px -504px;}
-.feature-suitcase{background-position:-216px -504px;}
-.feature-hairdresser{background-position:-0px -528px;}
-.feature-chemist{background-position:-54px -528px;}
-.feature-mobilephone{background-position:-108px -528px;}
-.feature-scooter{background-position:-162px -528px;}
-.feature-gift{background-position:-216px -528px;}
-.feature-ice-cream{background-position:-0px -552px;}
-.preset-icon-line.feature-highway-motorway{background-position:-20px -25px;}
-.preset-icon-line.feature-highway-trunk{background-position:-80px -25px;}
-.preset-icon-line.feature-highway-primary{background-position:-140px -25px;}
-.preset-icon-line.feature-highway-secondary{background-position:-200px -25px;}
-.preset-icon-line.feature-highway-tertiary{background-position:-260px -25px;}
-.preset-icon-line.feature-highway-motorway-link{background-position:-320px -25px;}
-.preset-icon-line.feature-highway-trunk-link{background-position:-380px -25px;}
-.preset-icon-line.feature-highway-primary-link{background-position:-440px -25px;}
-.preset-icon-line.feature-highway-secondary-link{background-position:-500px -25px;}
-.preset-icon-line.feature-highway-tertiary-link{background-position:-560px -25px;}
-.preset-icon-line.feature-highway-residential{background-position:-620px -25px;}
-.preset-icon-line.feature-highway-unclassified{background-position:-680px -25px;}
-.preset-icon-line.feature-highway-service{background-position:-740px -25px;}
-.preset-icon-line.feature-highway-road{background-position:-800px -25px;}
-.preset-icon-line.feature-highway-track{background-position:-860px -25px;}
-.preset-icon-line.feature-highway-living-street{background-position:-920px -25px;}
-.preset-icon-line.feature-highway-path{background-position:-980px -25px;}
-.preset-icon-line.feature-highway-cycleway{background-position:-1040px -25px;}
-.preset-icon-line.feature-highway-footway{background-position:-1100px -25px;}
-.preset-icon-line.feature-highway-bridleway{background-position:-1160px -25px;}
-.preset-icon-line.feature-highway-steps{background-position:-1220px -25px;}
-.preset-icon-line.feature-railway-rail{background-position:-1280px -25px;}
-.preset-icon-line.feature-railway-disused{background-position:-1340px -25px;}
-.preset-icon-line.feature-railway-abandoned{background-position:-1400px -25px;}
-.preset-icon-line.feature-railway-subway{background-position:-1460px -25px;}
-.preset-icon-line.feature-railway-light-rail{background-position:-1520px -25px;}
-.preset-icon-line.feature-railway-monorail{background-position:-1580px -25px;}
-.preset-icon-line.feature-waterway-river{background-position:-1640px -25px;}
-.preset-icon-line.feature-waterway-stream{background-position:-1700px -25px;}
-.preset-icon-line.feature-waterway-canal{background-position:-1760px -25px;}
-.preset-icon-line.feature-waterway-ditch{background-position:-1820px -25px;}
-.preset-icon-line.feature-power-line{background-position:-1880px -25px;}
-.preset-icon-line.feature-other-line{background-position:-1940px -25px;}
-.preset-icon-line.feature-category-roads{background-position:-2000px -25px;}
-.preset-icon-line.feature-category-rail{background-position:-2060px -25px;}
-.preset-icon-line.feature-category-path{background-position:-2120px -25px;}
-.preset-icon-line.feature-category-water{background-position:-2180px -25px;}
-.preset-icon-line.feature-ferry{background-position:-2240px -25px;}
-.preset-icon-line.feature-pipeline{background-position:-2300px -25px;}
-.preset-icon-relation.feature-relation{background-position:-20px -25px;}
-.preset-icon-relation.feature-restriction{background-position:-80px -25px;}
-.preset-icon-relation.feature-multipolygon{background-position:-141px -25px;}
-.preset-icon-relation.feature-boundary{background-position:-200px -25px;}
-.preset-icon-relation.feature-route{background-position:-260px -25px;}
-.preset-icon-relation.feature-route-road{background-position:-320px -25px;}
-.preset-icon-relation.feature-route-bicycle{background-position:-380px -25px;}
-.preset-icon-relation.feature-route-foot{background-position:-440px -25px;}
-.preset-icon-relation.feature-route-bus{background-position:-500px -25px;}
-.preset-icon-relation.feature-route-train{background-position:-560px -25px;}
-.preset-icon-relation.feature-route-detour{background-position:-620px -25px;}
-.preset-icon-relation.feature-route-tram{background-position:-680px -25px;}
-.preset-icon-relation.feature-route-ferry{background-position:-740px -25px;}
-.preset-icon-relation.feature-route-power{background-position:-800px -25px;}
-.preset-icon-relation.feature-route-pipeline{background-position:-860px -25px;}
-.preset-icon-relation.feature-route-master{background-position:-920px -25px;}
-.preset-icon-relation.feature-restriction-no-straight-on{background-position:-980px -25px;}
-.preset-icon-relation.feature-restriction-no-u-turn{background-position:-1040px -25px;}
-.preset-icon-relation.feature-restriction-no-left-turn{background-position:-1100px -25px;}
-.preset-icon-relation.feature-restriction-no-right-turn{background-position:-1160px -25px;}
-.preset-icon-relation.feature-restriction-only-straight-on{background-position:-1220px -25px;}
-.preset-icon-relation.feature-restriction-only-left-turn{background-position:-1280px -25px;}
-.preset-icon-relation.feature-restriction-only-right-turn{background-position:-1340px -25px;}