Merge remote-tracking branch 'upstream/pull/4455'

diff --combined app/assets/stylesheets/common.scss
index 17d20c812fde63b1b9fec1b5b237f5448dbdaf2e,a7d07e74e92ed8179f8de323e427785a25efaa68..53a60a3b2c862bc0c3313f11605651499b5c4370
--- 1/app/assets/stylesheets/common.scss
--- 2/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@@ -1,6 -1,4 +1,6 @@@
 +@use "sass:map";
  @import "parameters";
 +@import "browse";
  @import "bootstrap";
  @import "rails_bootstrap_forms";
  
@@@ -12,12 -10,26 +12,12 @@@ body 
    font-size: $typeheight;
  }
  
 -p > img {
 -  width: auto;
 -  max-width: 100%;
 -}
 -
 -small, aside {
 -  font-size: 12px;
 -}
 -
  time[title] {
    text-decoration: underline dotted;
  }
  
  #container { position: relative; }
  
 -.small_icon {
 -  vertical-align: middle;
 -  margin-right: $lineheight * 0.25;
 -}
 -
  /* Rules for icons */
  
  .icon {
@@@ -162,6 -174,10 +162,6 @@@ nav.secondary 
    .nav-link {
      padding: 0.2rem;
    }
 -
 -  #inboxanchor {
 -    background-color: lighten($grey, 10%);
 -  }
  }
  
  nav.primary, nav.secondary {
@@@ -458,16 -474,10 +458,16 @@@ body.small-nav 
  }
  
  .leaflet-popup-content-wrapper,
 -.leaflet-popup-tip {
 +.leaflet-popup-tip,
 +.leaflet-contextmenu,
 +.leaflet-contextmenu-item {
    @extend .bg-body, .text-body;
  }
  
 +.leaflet-contextmenu-item.over {
 +  @extend .bg-body-secondary, .border-secondary, .border-opacity-10;
 +}
 +
  .leaflet-popup-content-wrapper {
    @extend .rounded-1;
  
@@@ -476,13 -486,6 +476,13 @@@
    }
  }
  
 +@include color-mode(dark) {
 +  .leaflet-tile-container,
 +  .mapkey-table-entry td:first-child > * {
 +    filter: brightness(.8);
 +  }
 +}
 +
  /* Rules for attribution text under the main map shown on printouts */
  
  .donate-attr { color: darken($green, 10%) !important; }
@@@ -546,6 -549,10 +546,6 @@@ header .search_forms
  /* Rules for search sidebar */
  
  #sidebar .search_results_entry {
 -  ul li.selected {
 -    background: $list-highlight;
 -  }
 -
    .search_more .loader {
      display: none;
    }
@@@ -637,6 -644,14 +637,6 @@@ tr.turn 
  
    .query-results {
      display: none;
 -
 -    ul {
 -      li {
 -        &.query-result {
 -          cursor: pointer;
 -        }
 -      }
 -    }
    }
  }
  
@@@ -711,6 -726,7 +711,7 @@@
  
    &.new-user-main {
      background-image: image-url("sign-up-illustration.png");
+     background-position-x: 50px;
    }
  
    &.confirm-main {
@@@ -720,17 -736,6 +721,6 @@@
    &.new-user-terms {
      background-image: image-url("terms-illustration.png");
    }
- 
-   &.new-user-arm {
-     height: 110px;
-     width: 130px;
-     left: 280px;
-     top: 180px;
-     background-image: image-url("sign-up-illustration-arm.png");
-     position: absolute;
-     z-index: 100;
-     pointer-events: none;
-   }
  }
  
  [dir=rtl] .header-illustration {
@@@ -930,6 -935,11 +920,6 @@@ div.secondary-actions 
    .sprite.rules {
      /*rtl:ignore*/ background-position: -350px 0;
    }
 -
 -  .icon.note {
 -    background-color: #333;
 -    border-radius: 4px;
 -  }
  }
  
  .site-about #content {
@@@ -998,6 -1008,10 +988,10 @@@
    }
  }
  
+ .auth-container {
+   max-width: 600px;
+ }
+ 
  /* Rules for tabs inside secondary background sections */
  
  .bg-body-secondary .nav-tabs {
@@@ -1019,32 -1033,4 +1013,32 @@@ img.trace_image 
    }
  }
  
 -@import 'browse';
 +/* Rules for map sidebar icons */
 +
 +.browse-section {
 +  .node::before,
 +  .way::before,
 +  .relation::before {
 +    display: inline-block;
 +    width: 25px;
 +    margin-left: -25px;
 +  }
 +
 +  .node, .way, .relation {
 +    margin-left: 25px;
 +  }
 +}
 +
 +@each $class, $item in $map-sidebar-icons {
 +  .browse-section #{$class}::before {
 +    content: image-url('browse/#{map.get($item, "filename")}');
 +  }
 +
 +  @if map.get($item, "invert") {
 +    @include color-mode(dark) {
 +      .browse-section #{$class}::before {
 +        filter: invert(.8) hue-rotate(180deg);
 +      }
 +    }
 +  }
 +}