Merge remote-tracking branch 'openstreetmap/pull/1298'

[rails.git] / vendor / assets / iD / iD.css.erb

diff --git a/vendor/assets/iD/iD.css.erb b/vendor/assets/iD/iD.css.erb
index da02a408626db6facd4ebe745b32685667acc2d7..f0a1441328065e4c95bf5f9c1ae28a6e0ba56390 100644 (file)
--- a/vendor/assets/iD/iD.css.erb
+++ b/vendor/assets/iD/iD.css.erb
@@ -161,28 +161,6 @@ input::-moz-focus-inner {
 .cf:after {
     clear: both;
 }
 .cf:after {
     clear: both;
 }

-/* tiles */
-img.tile {
-    position:absolute;
-    transform-origin:0 0;
-    -ms-transform-origin:0 0;
-    -webkit-transform-origin:0 0;
-    -moz-transform-origin:0 0;
-    -o-transform-origin:0 0;
-
-    opacity: 0;
-
-    -webkit-transition: opacity 200ms linear;
-    transition: opacity 200ms linear;
-    -moz-transition: opacity 200ms linear;
-}
-
-img.tile-loaded {
-    opacity: 1;
-}
-img.tile-removing {
-    opacity: 0;
-}

 
 use { pointer-events: none; }
 
 
 use { pointer-events: none; }
 


@@ -829,9 +807,22 @@ 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,
 /* narrow highways */
 path.stroke.tag-highway-living_street,

-path.stroke.tag-highway-unclassified,

 path.stroke.tag-highway-service,
 path.stroke.tag-highway-track,
 path.stroke.tag-highway-path,
 path.stroke.tag-highway-service,
 path.stroke.tag-highway-track,
 path.stroke.tag-highway-path,


@@ -843,7 +834,6 @@ path.stroke.tag-highway-pedestrian,
 path.stroke.tag-highway-steps,
 path.stroke.tag-highway-road,
 path.stroke.tag-living_street,
 path.stroke.tag-highway-steps,
 path.stroke.tag-highway-road,
 path.stroke.tag-living_street,

-path.stroke.tag-unclassified,

 path.stroke.tag-service,
 path.stroke.tag-track,
 path.stroke.tag-path,
 path.stroke.tag-service,
 path.stroke.tag-track,
 path.stroke.tag-path,


@@ -857,7 +847,6 @@ path.stroke.tag-road {
     stroke-width:4;
 }
 path.casing.tag-highway-living_street,
     stroke-width:4;
 }
 path.casing.tag-highway-living_street,

-path.casing.tag-highway-unclassified,

 path.casing.tag-highway-service,
 path.casing.tag-highway-track,
 path.casing.tag-highway-path,
 path.casing.tag-highway-service,
 path.casing.tag-highway-track,
 path.casing.tag-highway-path,


@@ -869,7 +858,6 @@ path.casing.tag-highway-pedestrian,
 path.casing.tag-highway-steps,
 path.casing.tag-highway-road,
 path.casing.tag-living_street,
 path.casing.tag-highway-steps,
 path.casing.tag-highway-road,
 path.casing.tag-living_street,

-path.casing.tag-unclassified,

 path.casing.tag-service,
 path.casing.tag-track,
 path.casing.tag-path,
 path.casing.tag-service,
 path.casing.tag-track,
 path.casing.tag-path,


@@ -884,7 +872,6 @@ path.casing.tag-road {
 }
 
 .low-zoom path.stroke.tag-highway-living_street,
 }
 
 .low-zoom path.stroke.tag-highway-living_street,

-.low-zoom path.stroke.tag-highway-unclassified,

 .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-service,
 .low-zoom path.stroke.tag-highway-track,
 .low-zoom path.stroke.tag-highway-path,


@@ -896,7 +883,6 @@ path.casing.tag-road {
 .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-highway-steps,
 .low-zoom path.stroke.tag-highway-road,
 .low-zoom path.stroke.tag-living_street,

-.low-zoom path.stroke.tag-unclassified,

 .low-zoom path.stroke.tag-service,
 .low-zoom path.stroke.tag-track,
 .low-zoom path.stroke.tag-path,
 .low-zoom path.stroke.tag-service,
 .low-zoom path.stroke.tag-track,
 .low-zoom path.stroke.tag-path,


@@ -910,7 +896,6 @@ path.casing.tag-road {
     stroke-width:2;
 }
 .low-zoom path.casing.tag-highway-living_street,
     stroke-width:2;
 }
 .low-zoom path.casing.tag-highway-living_street,

-.low-zoom path.casing.tag-highway-unclassified,

 .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-service,
 .low-zoom path.casing.tag-highway-track,
 .low-zoom path.casing.tag-highway-path,


@@ -922,7 +907,6 @@ path.casing.tag-road {
 .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-highway-steps,
 .low-zoom path.casing.tag-highway-road,
 .low-zoom path.casing.tag-living_street,

-.low-zoom path.casing.tag-unclassified,

 .low-zoom path.casing.tag-service,
 .low-zoom path.casing.tag-track,
 .low-zoom path.casing.tag-path,
 .low-zoom path.casing.tag-service,
 .low-zoom path.casing.tag-track,
 .low-zoom path.casing.tag-path,


@@ -974,19 +958,6 @@ path.casing.tag-pedestrian.tag-unpaved {
     stroke-dasharray: none;
 }
 
     stroke-dasharray: none;
 }
 

-.preset-icon .icon.highway-unclassified {
-    color: #eee;
-    fill: #444;
-}
-path.stroke.tag-highway-unclassified,
-path.stroke.tag-unclassified {
-    stroke:#eee;
-}
-path.casing.tag-highway-unclassified,
-path.casing.tag-unclassified {
-    stroke:#444;
-}
-

 .preset-icon .icon.highway-road {
     color: #9e9e9e;
     fill: #666;
 .preset-icon .icon.highway-road {
     color: #9e9e9e;
     fill: #666;


@@ -1087,6 +1058,7 @@ path.stroke.tag-highway-cycleway {
     stroke: #58a9ed;
 }
 
     stroke: #58a9ed;
 }
 

+.preset-icon .icon.tag-route-horse,

 .preset-icon .icon.highway-bridleway {
     color: #e06d5f;
     fill: #fff;
 .preset-icon .icon.highway-bridleway {
     color: #e06d5f;
     fill: #fff;


@@ -1975,6 +1947,7 @@ input[type=url],
 input[type=tel],
 input[type=email] {
     background-color: white;
 input[type=tel],
 input[type=email] {
     background-color: white;

+    color: #333;

     border:1px solid #ccc;
     padding:5px 10px;
     height:30px;
     border:1px solid #ccc;
     padding:5px 10px;
     height:30px;


@@ -2114,6 +2087,7 @@ ul li { list-style: none;}
 .al { left: 0; }
 .ar { right: 0; }
 
 .al { left: 0; }
 .ar { right: 0; }
 

+input.hide,

 div.hide,
 form.hide,
 button.hide,
 div.hide,
 form.hide,
 button.hide,


@@ -2181,7 +2155,7 @@ button:hover {
 button[disabled],
 button.disabled {
     background-color: rgba(255,255,255,.25);
 button[disabled],
 button.disabled {
     background-color: rgba(255,255,255,.25);

-    color: rgba(0,0,0,.5);
+    color: rgba(0,0,0,.4);

     cursor: auto;
 }
 
     cursor: auto;
 }
 


@@ -2276,7 +2250,9 @@ button.save.has-count .count {
     display: block;
     position: absolute;
     top: 5px;
     display: block;
     position: absolute;
     top: 5px;

-    background: rgba(255, 255, 255, .5);
+    background: #fff;
+    border-color: #fff;
+    opacity: 0.5;

     color: #333;
     padding: 10px;
     height: 30px;
     color: #333;
     padding: 10px;
     height: 30px;


@@ -2297,7 +2273,9 @@ button.save.has-count .count::before {
     bottom: 0;
     border-top:    6px solid transparent;
     border-bottom: 6px solid transparent;
     bottom: 0;
     border-top:    6px solid transparent;
     border-bottom: 6px solid transparent;

-    border-right:  6px solid rgba(255,255,255,.5);
+    border-right-width: 6px;
+    border-right-style: solid;
+    border-right-color: inherit;

 }
 
 /* Icons */
 }
 
 /* Icons */


@@ -2471,45 +2449,8 @@ button.save.has-count .count::before {
     bottom: 0;
 }
 
     bottom: 0;
 }
 

-.mapillary-image {
-    position: absolute;
-    bottom: 30px;
-    width: 330px;
-    height: 250px;
-    padding: 5px;
-    background-color: #fff;
-}
-
-.mapillary-image a {
-    display: block;
-    position: absolute;
-    height: auto;
-    background-color: rgba(0,0,0,.5);
-    bottom: 0;
-    padding: 5px 10px;
-}

 
 

-.mapillary-image img {
-    width: 100%;
-    height: auto;
-    display: block;
-}

 
 

-.mapillary-image.hidden {
-    visibility: hidden;
-}
-
-.mapillary-image.temp button {
-    display: none;
-}
-
-.mapillary-image button {
-    border-radius: 0;
-    padding: 5px;
-    position: absolute;
-    right: 0;
-    top: 0;
-}

 
 .feature-list-pane .inspector-body {
     top: 120px;
 
 .feature-list-pane .inspector-body {
     top: 120px;


@@ -2834,7 +2775,7 @@ button.save.has-count .count::before {
 }
 
 .form-label button {
 }
 
 .form-label button {

-    border-left: 1px solid #CCC;
+    border-left: 1px solid #ccc;

     width: 10%;
     height: 100%;
     border-radius: 0;
     width: 10%;
     height: 100%;
     border-radius: 0;


@@ -2857,7 +2798,7 @@ button.save.has-count .count::before {
 .form-field > input,
 .form-field > textarea,
 .form-field .preset-input-wrap {
 .form-field > input,
 .form-field > textarea,
 .form-field .preset-input-wrap {

-    border: 1px solid #CCC;
+    border: 1px solid #ccc;

     min-height: 30px;
     border-top: 0;
     border-radius: 0 0 4px 4px;
     min-height: 30px;
     border-top: 0;
     border-radius: 0 0 4px 4px;


@@ -2869,23 +2810,30 @@ button.save.has-count .count::before {
 }
 
 .inspector-border {
 }
 
 .inspector-border {

-    border-bottom: 1px solid #CCC
+    border-bottom: 1px solid #ccc

 }
 
 /* Preset form (hover mode) */
 
 .inspector-hover .checkselect label:last-of-type,
 .inspector-hover .preset-input-wrap .label,
 }
 
 /* Preset form (hover mode) */
 
 .inspector-hover .checkselect label:last-of-type,
 .inspector-hover .preset-input-wrap .label,

+.inspector-hover .form-field-multicombo,

 .inspector-hover input,
 .inspector-hover label {
     background: #ececec;
 }
 
 .inspector-hover a,
 .inspector-hover input,
 .inspector-hover label {
     background: #ececec;
 }
 
 .inspector-hover a,

+.inspector-hover .form-field-multicombo .chips,

 .inspector-hover .checkselect label:last-of-type {
     color: #666;
 }
 
 .inspector-hover .checkselect label:last-of-type {
     color: #666;
 }
 

+.inspector-hover .form-field-multicombo .chips {
+    background: #eee;
+    border: 1px solid #ccc;
+}
+

 /* hide and remove from layout */
 .inspector-hidden,
 .inspector-hover label input[type="checkbox"],
 /* hide and remove from layout */
 .inspector-hidden,
 .inspector-hover label input[type="checkbox"],


@@ -2894,6 +2842,7 @@ button.save.has-count .count::before {
 .inspector-hover .toggle-list label span,
 .inspector-hover .inspector-inner .add-tag,
 .inspector-hover .inspector-inner .add-relation,
 .inspector-hover .toggle-list label span,
 .inspector-hover .inspector-inner .add-tag,
 .inspector-hover .inspector-inner .add-relation,

+.inspector-hover .form-field-multicombo .combobox-input,

 .inspector-hover .toggle-list label.remove .icon {
     height: 0;
     width: 0;
 .inspector-hover .toggle-list label.remove .icon {
     height: 0;
     width: 0;


@@ -2909,6 +2858,7 @@ button.save.has-count .count::before {
 .inspector-hover .combobox-caret,
 .inspector-hover .entity-editor-pane .header button,
 .inspector-hover .spin-control,
 .inspector-hover .combobox-caret,
 .inspector-hover .entity-editor-pane .header button,
 .inspector-hover .spin-control,

+.inspector-hover .form-field-multicombo .chips .remove,

 .inspector-hover .hide-toggle:before,
 .inspector-hover .more-fields,
 .inspector-hover .form-label-button-wrap,
 .inspector-hover .hide-toggle:before,
 .inspector-hover .more-fields,
 .inspector-hover .form-label-button-wrap,


@@ -3009,6 +2959,63 @@ button.save.has-count .count::before {
     border-bottom-right-radius: 4px;
 }
 
     border-bottom-right-radius: 4px;
 }
 

+/* preset form multicombo */
+
+.form-field-multicombo {
+    border: 1px solid #cfcfcf;
+    border-top: 0px;
+    padding: 5px 0 5px 10px;
+    background: #fff;
+    display: block;
+    border-radius: 0 0 4px 4px;
+    overflow: hidden;
+}
+
+.form-field-multicombo:focus {
+    border-bottom: 0px;
+}
+
+.form-field-multicombo.active {
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+}
+
+.form-field-multicombo li {
+    background-color: #eff2f7;
+    border: 1px solid #ccd5e3;
+    border-radius: 4px;
+    line-height: 25px;
+    display: inline-block;
+    padding: 2px 5px;
+    margin: 3px;
+    height: 30px;
+}
+
+.form-field-multicombo a {
+    font-family: Arial, Helvetica, sans-serif !important;
+    font-size: 16px !important;
+    line-height: 24px;
+    float: right;
+    margin: 1px 0 0 5px;
+    padding: 0;
+    cursor: pointer;
+    color: #a6b4ce;
+}
+
+.form-field-multicombo input {
+    border: 1px solid #ddd;
+    width: 100px;
+    margin: 3px;
+}
+
+.form-field-multicombo .combobox-caret {
+    margin: 3px 3px 3px -30px;
+}
+
+.form-field-multicombo input:focus {
+    border-radius: 4px !important;
+}
+

 /* preset form cycleway */
 
 .form-field-cycleway .preset-input-wrap li {
 /* preset form cycleway */
 
 .form-field-cycleway .preset-input-wrap li {


@@ -3569,7 +3576,6 @@ div.full-screen > button:hover {
 
 /* Background / Map Data Settings */
 
 
 /* Background / Map Data Settings */
 

-

 .map-data-control button {
     border-radius: 0;
 }
 .map-data-control button {
     border-radius: 0;
 }


@@ -3583,16 +3589,8 @@ div.full-screen > button:hover {
     position: relative;
 }
 
     position: relative;
 }
 

-.nudge-container {
-    border: 1px solid #CCC;
-}
-

 .imagery-faq {
 .imagery-faq {

-  margin-bottom: 10px;
-}
-
-.background-control .adjustments button:last-child {
-    border: 0;
+    margin-bottom: 10px;

 }
 
 .map-data-control .hide-toggle,
 }
 
 .map-data-control .hide-toggle,


@@ -3637,7 +3635,8 @@ div.full-screen > button:hover {
     background-color: #ececec;
 }
 
     background-color: #ececec;
 }
 

-.layer-list li.active {
+.layer-list li.active,
+.layer-list li.switch {

     background: #E8EBFF;
 }
 
     background: #E8EBFF;
 }
 


@@ -3708,15 +3707,41 @@ div.full-screen > button:hover {
     border-left:  4px solid transparent;
 }
 
     border-left:  4px solid transparent;
 }
 

-.background-control .nudge-container button {
-    float: left;
-    display: block;
-    width:20%;
-    border-right: 1px solid #CCC;
-    position: relative;
+/* Adjust Alignment controls */
+
+.background-control .nudge-container {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    padding: 10px;
+}
+
+.nudge-container .nudge-instructions {
+    padding-bottom: 15px;
+}
+
+.nudge-container .nudge-outer-rect {
+    background-color: #eee;
+    border: 1px solid #ccc;
+    border-radius: 2px;
+    padding: 20px 0;
+    width: 70%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 auto;
+    margin-top: 20px;
+    cursor: move;
+}
+
+.nudge-container .nudge-inner-rect {
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 2px;
+    width: 65%;
+    min-height: 20px;

 }
 
 }
 

-.background-control .nudge::after {
+.nudge-container .nudge::after {

     content: '';
     display: block;
     position: absolute;
     content: '';
     display: block;
     position: absolute;


@@ -3726,13 +3751,72 @@ div.full-screen > button:hover {
     width: 0;
 }
 
     width: 0;
 }
 

-.background-control .nudge.left::after {
+.nudge-container input {
+    width: 100%;
+    height: 20px;
+    text-align: center;
+    border: 0;
+}
+
+.nudge-container input.error {
+    border: 1px solid #FF7878;
+    border-radius: 2px;
+    background: #ffb;
+}
+
+.nudge-container input:focus {
+    background-color: transparent;
+}
+
+.nudge-container button {
+    float: left;
+    display: block;
+    width: 20%;
+    position: relative;
+    background-color: transparent;
+}
+
+.nudge-container button.right {
+    top: -50px;
+    right: -85%;
+}
+
+.nudge-container button.left {
+    top: -50px;
+    right: 45%;
+}
+
+.nudge-container button.top {
+    left: 20%;
+    top: -104px;
+}
+
+.nudge-container button.bottom {
+    left: -20%;
+}
+
+.nudge-container button.nudge-reset {
+    right: -10px;
+}
+
+.nudge-surface {
+   position: absolute;
+   z-index: 5000;
+   left: 0;
+   top: 0;
+   width: 100%;
+   height: 100%;
+   background-color: transparent;
+   cursor: move;
+}
+
+.background-control .nudge.right::after {

     border-top:  5px solid transparent;
     border-bottom:  5px solid transparent;
     border-left:  5px solid #222;
 }
 
     border-top:  5px solid transparent;
     border-bottom:  5px solid transparent;
     border-left:  5px solid #222;
 }
 

-.background-control .nudge.right::after {
+.background-control .nudge.left::after {

     border-top:  5px solid transparent;
     border-bottom:  5px solid transparent;
     border-right:  5px solid #222;
     border-top:  5px solid transparent;
     border-bottom:  5px solid transparent;
     border-right:  5px solid #222;


@@ -3863,7 +3947,7 @@ div.full-screen > button:hover {
     float:right;
     margin-left: 20px;
     margin-bottom: 20px;
     float:right;
     margin-left: 20px;
     margin-bottom: 20px;

-    padding-left: 5px
+    padding-left: 5px;

 }
 
 .help-wrap .toc li a,
 }
 
 .help-wrap .toc li a,


@@ -3926,6 +4010,64 @@ div.full-screen > button:hover {
     border-radius: 4px;
 }
 
     border-radius: 4px;
 }
 

+
+/* Tiles
+------------------------------------------------------- */
+
+img.tile {
+    position:absolute;
+    transform-origin:0 0;
+    -ms-transform-origin:0 0;
+    -webkit-transform-origin:0 0;
+    -moz-transform-origin:0 0;
+    -o-transform-origin:0 0;
+
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+    opacity: 0;
+
+    -webkit-transition: opacity 200ms linear;
+    transition: opacity 200ms linear;
+    -moz-transition: opacity 200ms linear;
+}
+
+.tile-label-debug {
+    background: rgba(0, 0, 0, 0.7);
+    color: #fff;
+    position: absolute;
+    text-align: center;
+    width: 128px;
+    border-radius: 3px;
+    z-index: 2;
+
+    transform-origin:0 0;
+    -ms-transform-origin:0 0;
+    -webkit-transform-origin:0 0;
+    -moz-transform-origin:0 0;
+    -o-transform-origin:0 0;
+
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+img.tile-debug {
+    border: 1px solid red;
+}
+
+img.tile-loaded {
+    opacity: 1;
+}
+
+img.tile-removing {
+    opacity: 0;
+}
+
+

 /* Map
 ------------------------------------------------------- */
 
 /* Map
 ------------------------------------------------------- */
 


@@ -3942,6 +4084,7 @@ div.full-screen > button:hover {
     -webkit-transform-origin:0 0;
     -moz-transform-origin:0 0;
     -o-transform-origin:0 0;
     -webkit-transform-origin:0 0;
     -moz-transform-origin:0 0;
     -o-transform-origin:0 0;

+

     -moz-user-select: none;
     -webkit-user-select: none;
     -ms-user-select: none;
     -moz-user-select: none;
     -webkit-user-select: none;
     -ms-user-select: none;


@@ -3958,7 +4101,6 @@ div.full-screen > button:hover {
 
 /* Map-In-Map
 ------------------------------------------------------- */
 
 /* Map-In-Map
 ------------------------------------------------------- */

-

 .map-in-map {
     position: absolute;
     overflow: hidden;
 .map-in-map {
     position: absolute;
     overflow: hidden;


@@ -3977,14 +4119,15 @@ div.full-screen > button:hover {
     -webkit-transform-origin:0 0;
     -moz-transform-origin:0 0;
     -o-transform-origin:0 0;
     -webkit-transform-origin:0 0;
     -moz-transform-origin:0 0;
     -o-transform-origin:0 0;

+

     -moz-user-select: none;
     -webkit-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }
 
     -moz-user-select: none;
     -webkit-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }
 

-.map-in-map-svg,
-.map-in-map-gpx {
+.map-in-map-viewport,
+.map-in-map-data {

     top: 0;
     left: 0;
     overflow: hidden;
     top: 0;
     left: 0;
     overflow: hidden;


@@ -3992,11 +4135,11 @@ div.full-screen > button:hover {
     width: 100%;
 }
 
     width: 100%;
 }
 

-.map-in-map-svg {
+.map-in-map-viewport {

     position: absolute;
 }
 
     position: absolute;
 }
 

-.map-in-map-gpx {
+.map-in-map-data {

     position: relative;
     z-index: 10;
 }
     position: relative;
     z-index: 10;
 }


@@ -4012,6 +4155,45 @@ div.full-screen > button:hover {
     stroke-width: 5;
 }
 
     stroke-width: 5;
 }
 

+
+/* Debug
+------------------------------------------------------- */
+.debug {
+    stroke: currentColor;
+    fill: none;
+    stroke-width: 2;
+}
+.map-in-map-data .debug {
+    stroke-width: 1;
+}
+
+.red     { color: rgba(255, 0, 0, 0.75); }
+.green   { color: rgba(0, 255, 0, 0.75); }
+.blue    { color: rgba(0, 0, 255, 0.75); }
+.yellow  { color: rgba(255, 255, 0, 0.75); }
+.cyan    { color: rgba(0, 255, 255, 0.75); }
+.magenta { color: rgba(255, 0, 255, 0.75); }
+.orange  { color: rgba(255, 153, 0, 0.75); }
+.pink    { color: rgba(255, 0, 153, 0.75); }
+.purple  { color: rgba(153, 0, 255, 0.75); }
+
+.debug-legend {
+    position: absolute;
+    top: 70px;
+    right: 80px;
+    padding: 5px;
+    border-radius: 4px;
+    pointer-events: none;
+}
+
+.debug-legend-item {
+    padding-right: 5px;
+}
+.debug-legend-item:before {
+    content: "\25A0";
+    padding: 0 5px;
+}
+

 /* Info Box
 ------------------------------------------------------- */
 .infobox {
 /* Info Box
 ------------------------------------------------------- */
 .infobox {


@@ -4105,6 +4287,10 @@ div.full-screen > button:hover {
     max-height: 30px;
     float: left;
     clear: left;
     max-height: 30px;
     float: left;
     clear: left;

+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;

 }
 
 #info-block {
 }
 
 #info-block {


@@ -4117,6 +4303,10 @@ div.full-screen > button:hover {
     width: 100%;
 }
 
     width: 100%;
 }
 

+#scale:hover {
+    cursor: pointer;
+}
+

 #scale text {
     font: 12px sans-serif;
     stroke: none;
 #scale text {
     font: 12px sans-serif;
     stroke: none;


@@ -4245,7 +4435,8 @@ div.full-screen > button:hover {
     vertical-align: middle;
 }
 
     vertical-align: middle;
 }
 

-.save-section .buttons .action {
+.save-section .buttons .action,
+.save-section .buttons .secondary-action {

     display: inline-block;
     margin: 0 20px 0 0;
     text-align: center;
     display: inline-block;
     margin: 0 20px 0 0;
     text-align: center;


@@ -4735,8 +4926,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;


@@ -4891,3 +5082,44 @@ div.full-screen > button:hover {
     background: rgba(0, 0, 0, 0) url(<%= asset_path("iD/img/iD-sprite.svg") %>) no-repeat -300px -460px;
     margin: auto;
 }
     background: rgba(0, 0, 0, 0) url(<%= asset_path("iD/img/iD-sprite.svg") %>) no-repeat -300px -460px;
     margin: auto;
 }

+
+/* Mapillary
+------------------------------------------------------- */
+.mapillary-wrap {
+    position: absolute;
+    bottom: 30px;
+    width: 330px;
+    height: 250px;
+    padding: 5px;
+    background-color: #fff;
+}
+
+.mapillary-wrap.hidden {
+    visibility: hidden;
+}
+
+.mapillary-wrap .uil-ripple-css {
+  top: -9px;
+  left: -15px;
+}
+
+.mapillary-wrap .uil-ripple-css div {
+    top: 38px;
+}
+
+.mapillary-wrap button.thumb-hide {
+    border-radius: 0;
+    padding: 5px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 500;
+}
+
+.mly-wrapper {
+  visibility: hidden;
+}
+
+.mly-wrapper.active {
+  visibility: visible;
+}