]> git.openstreetmap.org Git - rails.git/blobdiff - vendor/assets/iD/iD.css.erb
Update to iD v1.9.2
[rails.git] / vendor / assets / iD / iD.css.erb
index 3a6602e30cd5bbbd0ed02d835281ff6366498164..b1b94aef85ac322b2f487dce9d1d23d7edf377b1 100644 (file)
@@ -187,11 +187,11 @@ img.tile-removing {
 use { pointer-events: none; }
 
 /* base styles */
 use { pointer-events: none; }
 
 /* base styles */
-.layer path:not(.oneway) { fill: none; }     /* IE needs :not(.oneway) */
+.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 */
 
 /* the above fill: none rule affects paths in <use> shadow dom only in Firefox */
-.layer use.icon path { fill: #333; }                       /* FF svg Maki icons */
-.layer .turn use path { fill: #000; }                      /* FF turn restriction icons */
+.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 */
 #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 */
@@ -206,11 +206,6 @@ path.shadow {
     pointer-events: stroke;
 }
 
     pointer-events: stroke;
 }
 
-.shadow {
-    -webkit-transition: 200ms;
-       -moz-transition: 200ms;
-            transition: 200ms;
-}
 
 /* points */
 
 
 /* points */
 
@@ -296,11 +291,11 @@ g.vertex.vertex-hover {
 
 g.vertex.hover:not(.selected) .shadow,
 g.midpoint.hover:not(.selected) .shadow {
 
 g.vertex.hover:not(.selected) .shadow,
 g.midpoint.hover:not(.selected) .shadow {
-    fill-opacity: 0.3;
+    fill-opacity: 0.5;
 }
 
 g.vertex.selected .shadow {
 }
 
 g.vertex.selected .shadow {
-    fill-opacity: 0.5;
+    fill-opacity: 0.7;
 }
 
 .mode-draw-area g.midpoint,
 }
 
 .mode-draw-area g.midpoint,
@@ -335,7 +330,7 @@ path.shadow {
 }
 
 path.shadow.hover:not(.selected) {
 }
 
 path.shadow.hover:not(.selected) {
-    stroke-opacity: 0.3;
+    stroke-opacity: 0.4;
 }
 
 path.shadow.selected {
 }
 
 path.shadow.selected {
@@ -407,17 +402,23 @@ path.fill.tag-leisure-park {
     background-color: rgba(140, 208, 95, 0.3);
 }
 
     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.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);
 }
 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 {
 .preset-icon-fill-area.tag-landuse-basin,
 .preset-icon-fill-area.tag-landuse-reservoir,
 .preset-icon-fill-area.tag-natural-water {
@@ -815,19 +816,6 @@ path.casing.tag-tertiary {
     stroke:#7f7f3f;
 }
 
     stroke:#7f7f3f;
 }
 
-.preset-icon .icon.highway-unclassified {
-    color: #eaeaea;
-    fill: #444;
-}
-path.stroke.tag-highway-unclassified,
-path.stroke.tag-unclassified {
-    stroke:#eaeaea;
-}
-path.casing.tag-highway-unclassified,
-path.casing.tag-unclassified {
-    stroke:#444;
-}
-
 .preset-icon .icon.highway-residential {
     color: #fff;
     fill: #444;
 .preset-icon .icon.highway-residential {
     color: #fff;
     fill: #444;
@@ -841,6 +829,20 @@ path.casing.tag-residential {
     stroke:#444;
 }
 
     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,
 /* narrow highways */
 path.stroke.tag-highway-living_street,
 path.stroke.tag-highway-service,
@@ -953,7 +955,8 @@ path.casing.tag-living_street {
     stroke:#fff;
 }
 
     stroke:#fff;
 }
 
-.preset-icon .icon.highway-pedestrian {
+.preset-icon .icon.highway-footway.tag-highway-corridor,
+.preset-icon .icon.highway-footway.tag-highway-pedestrian {
     color: #8cd05f;
     fill: #fff;
 }
     color: #8cd05f;
     fill: #fff;
 }
@@ -1060,6 +1063,14 @@ path.stroke.tag-highway-footway {
     stroke: #ae8681;
 }
 
     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;
 .preset-icon .icon.tag-route-bicycle,
 .preset-icon .icon.highway-cycleway {
     color: #58a9ed;
@@ -1232,13 +1243,20 @@ path.casing.tag-waterway-ditch {
     stroke: #6591ff;
     stroke-width: 3;
 }
     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.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.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);
 path.area.fill.tag-waterway-fuel {
     stroke: rgba(255, 255, 255, 0.3);
     fill: rgba(255, 255, 255, 0.3);
@@ -1406,7 +1424,7 @@ path.shadow.tag-cutting {
 
 /* Surface - unpaved */
 path.casing.tag-unpaved {
 
 /* Surface - unpaved */
 path.casing.tag-unpaved {
-    stroke: #eaeaea;
+    stroke: #ccc;
     stroke-linecap: butt;
     stroke-dasharray: 4, 3;
 }
     stroke-linecap: butt;
     stroke-dasharray: 4, 3;
 }
@@ -1638,7 +1656,7 @@ g.turn circle {
 }
 
 /* GPX Paths */
 }
 
 /* GPX Paths */
-div.layer-gpx {
+.layer-gpx {
     pointer-events: none;
 }
 
     pointer-events: none;
 }
 
@@ -1652,43 +1670,84 @@ text.gpx {
     fill: #FF26D4;
 }
 
     fill: #FF26D4;
 }
 
-/* Mapillary Layer */
+/* Mapillary Image Layer */
 
 
-.layer-mapillary {
+.layer-mapillary-images {
     pointer-events: none;
 }
 
     pointer-events: none;
 }
 
-.layer-mapillary g {
+.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 */
 }
 
     pointer-events: visible;
     cursor: pointer; /* Opera */
     cursor: url(<%= asset_path("iD/img/cursor-select-mapillary.png") %>) 6 1, pointer; /* FF */
 }
 
-.layer-mapillary g * {
+.layer-mapillary-images .viewfield-group * {
     stroke-width: 1;
     stroke: #444;
     fill: #ffc600;
     stroke-width: 1;
     stroke: #444;
     fill: #ffc600;
+    z-index: 50;
 }
 
 }
 
-.layer-mapillary g:hover * {
+.layer-mapillary-images .viewfield-group:hover * {
     stroke-width: 1;
     stroke: #333;
     fill: #ff9900;
     stroke-width: 1;
     stroke: #333;
     fill: #ff9900;
+    z-index: 60;
 }
 
 }
 
-.layer-mapillary g.selected  * {
+.layer-mapillary-images .viewfield-group.selected  * {
     stroke-width: 2;
     stroke: #222;
     fill: #ff5800;
     stroke-width: 2;
     stroke: #222;
     fill: #ff5800;
+    z-index: 60;
 }
 
 }
 
-.layer-mapillary g:hover path.viewfield,
-.layer-mapillary g.selected path.viewfield,
-.layer-mapillary g path.viewfield {
+.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;
 }
 
     stroke-width: 0;
     fill-opacity: 0.6;
 }
 
+/* Mapillary Sign Layer */
+
+.layer-mapillary-signs {
+    pointer-events: none;
+}
+
+.layer-mapillary-signs .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;
+}
+
+.layer-mapillary-signs .icon-sign:hover body {
+    border: 2px solid rgba(255,198,0,0.8);
+    z-index: 80;
+ }
+
+.layer-mapillary-signs .icon-sign.selected 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;
+    position: absolute;
+}
+
+.layer-mapillary-signs .icon-sign:hover .t,
+.layer-mapillary-signs .icon-sign.selected .t {
+    z-index: 80;
+}
+
 /* Modes */
 
 .mode-draw-line .vertex.active,
 /* Modes */
 
 .mode-draw-line .vertex.active,
@@ -1729,10 +1788,10 @@ text.gpx {
 }
 
 .fill-wireframe path.shadow.hover:not(.selected) {
 }
 
 .fill-wireframe path.shadow.hover:not(.selected) {
-    stroke-opacity: 0.2;
+    stroke-opacity: 0.4;
 }
 .fill-wireframe path.shadow.selected {
 }
 .fill-wireframe path.shadow.selected {
-    stroke-opacity: 0.4;
+    stroke-opacity: 0.6;
 }
 
 .fill-wireframe .point,
 }
 
 .fill-wireframe .point,
@@ -2045,6 +2104,8 @@ ul li { list-style: none;}
 
 .fl { float: left;}
 .fr { float: right;}
 
 .fl { float: left;}
 .fr { float: right;}
+.al { left: 0; }
+.ar { right: 0; }
 
 div.hide,
 form.hide,
 
 div.hide,
 form.hide,
@@ -2305,7 +2366,7 @@ button.save.has-count .count::before {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    padding: 20px;
+    padding: 20px 20px 20px 40px;
 }
 
 .header button,
 }
 
 .header button,
@@ -2321,12 +2382,19 @@ button.save.has-count .count::before {
     height: 100%;
 }
 
     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;
 }
 
     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;
 .preset-choose {
     font-size: 16px;
     line-height: 1.25;
@@ -2398,7 +2466,6 @@ button.save.has-count .count::before {
 
 .mapillary-image {
     position: absolute;
 
 .mapillary-image {
     position: absolute;
-    right: 0;
     bottom: 30px;
     width: 330px;
     height: 250px;
     bottom: 30px;
     width: 330px;
     height: 250px;
@@ -2412,7 +2479,6 @@ button.save.has-count .count::before {
     height: auto;
     background-color: rgba(0,0,0,.5);
     bottom: 0;
     height: auto;
     background-color: rgba(0,0,0,.5);
     bottom: 0;
-    right: 0;
     padding: 5px 10px;
 }
 
     padding: 5px 10px;
 }
 
@@ -2591,6 +2657,18 @@ button.save.has-count .count::before {
     height: 60px;
 }
 
     height: 60px;
 }
 
+.preset-icon-44 {
+    position: absolute;
+    top: 9px;
+    left: 8px;
+    margin: auto;
+}
+
+.preset-icon-44 .icon {
+    width: 44px;
+    height: 44px;
+}
+
 .preset-icon-32 {
     position: absolute;
     top: 14px;
 .preset-icon-32 {
     position: absolute;
     top: 14px;
@@ -2689,6 +2767,11 @@ button.save.has-count .count::before {
 
 .inspector-preset {
     overflow: hidden;
 
 .inspector-preset {
     overflow: hidden;
+    padding-bottom: 10px;
+}
+
+.inspector-preset a.hide-toggle {
+    margin: 0 20px 10px 20px;
 }
 
 .inspector-preset .preset-form {
 }
 
 .inspector-preset .preset-form {
@@ -2697,25 +2780,10 @@ button.save.has-count .count::before {
     border-radius: 8px;
 }
 
     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;
 }
 
 .entity-editor-pane .preset-list-item .preset-list-button-wrap {
     margin-bottom: 0;
 }
 
-
 .form-field {
     margin-bottom: 10px;
     width: 100%;
 .form-field {
     margin-bottom: 10px;
     width: 100%;
@@ -3512,6 +3580,10 @@ div.full-screen > button:hover {
     border: 1px solid #CCC;
 }
 
     border: 1px solid #CCC;
 }
 
+.imagery-faq {
+  margin-bottom: 10px;
+}
+
 .background-control .adjustments button:last-child {
     border: 0;
 }
 .background-control .adjustments button:last-child {
     border: 0;
 }
@@ -3534,6 +3606,10 @@ div.full-screen > button:hover {
     color: #7092FF;
 }
 
     color: #7092FF;
 }
 
+.layer-list:empty {
+    display: none;
+}
+
 .layer-list > li:first-child {
     border-radius: 3px 3px 0 0;
 }
 .layer-list > li:first-child {
     border-radius: 3px 3px 0 0;
 }
@@ -3558,6 +3634,18 @@ div.full-screen > button:hover {
     background: #E8EBFF;
 }
 
     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;
 .layer-list label {
     display: block;
     padding: 5px 10px;
@@ -3853,7 +3941,7 @@ div.full-screen > button:hover {
     user-select: none;
 }
 
     user-select: none;
 }
 
-#supersurface, .layer-layer {
+#supersurface, .layer {
     position: absolute;
     top: 0;
     left: 0;
     position: absolute;
     top: 0;
     left: 0;
@@ -3929,7 +4017,7 @@ div.full-screen > button:hover {
     border-bottom: 1px solid black;
 }
 
     border-bottom: 1px solid black;
 }
 
-.infobox .selection-heading {
+.infobox .infobox-heading {
     display: block;
     border-radius: 4px 0 0 0;
     padding: 5px 10px;
     display: block;
     border-radius: 4px 0 0 0;
     padding: 5px 10px;
@@ -4213,9 +4301,11 @@ div.full-screen > button:hover {
 ------------------------------------------------------- */
 
 .save-success p {
 ------------------------------------------------------- */
 
 .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 {
     padding-top: 15px;
 }
@@ -4638,8 +4728,8 @@ div.full-screen > button:hover {
     color: rgba(40,40,40,.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;
     stroke: #fff;
     stroke-width: 1;
     stroke-opacity: 1;