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

diff --combined app/assets/stylesheets/common.scss
index 3f43eb2a15e4eeafb0b3be08c9a7744c10269814,a6b9a32de3a2f416c76ba428e93df262242e3ee3..3e22052a220ac36ccfa5a16810de6dcf34f62441
--- 1/app/assets/stylesheets/common.scss
--- 2/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@@ -150,6 -150,11 +150,6 @@@ nav.primary 
  nav.secondary {
    .nav-link {
      padding: 0.2rem;
 -    color: $darkgrey;
 -  }
 -
 -  > ul li.current a {
 -    color: darken($darkgrey, 25%);
    }
  
    #inboxanchor {
@@@ -377,6 -382,7 +377,6 @@@ body.small-nav 
      float: right;
      width: 250px;
      height: 100%;
 -    background: white;
      overflow: auto;
  
      .section {
@@@ -418,14 -424,43 +418,14 @@@
  }
  
  .layers-ui {
 -  .base-layers {
 -    .leaflet-container {
 -      width: 100%;
 -      height: 50px;
 -      cursor: pointer;
 -    }
 -
 -    li  {
 -      overflow: hidden;
 -      border-radius: 3px;
 -      border: 2px solid #fff;
 -      margin-bottom: 8px;
 -      position: relative;
 -      transition: border-color 0.08s ease-in;
 -
 -      label {
 -        position: absolute;
 -        top: 0;
 -        left: 0;
 -        padding: 2px 6px;
 -        border-bottom-right-radius: 3px;
 -        cursor: pointer;
 -        font-weight: 600;
 -        font-size: 16px;
 -        text-stroke: 2px #fff;
 -        background: rgba(255,255,255,.9);
 -        z-index: 1000;
 -        input[type="radio"] {
 -          display: none;
 -        }
 -      }
 +  .base-layers > * {
 +    height: 56px;
  
 -      &.active { border-color: darken($green, 10%); }
 -      &:hover {
 -        border-color: $grey;
 -        &.active { border-color: darken($green, 20%); }
 -      }
 +    > .btn {
 +      --bs-btn-border-color: var(--bs-body-bg);
 +    }
 +    > .btn:hover {
 +      --bs-btn-border-color: var(--bs-primary-border-subtle);
      }
    }
  
@@@ -540,6 -575,12 +540,12 @@@ div.direction 
  div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
  }
  
+ @include color-mode(dark) {
+   div.direction {
+     filter: invert(1);
+   }
+ }
+ 
  td.distance {
      font-size: x-small;
  }
@@@ -656,15 -697,18 +662,15 @@@ tr.turn:hover 
    }
  
    .export_boxy {
 -    background: $lightgrey;
 -
 -    #maxlat { margin-top: -1px; }
 +    > * {
 +        margin: -1px;
 +    }
      #minlon {
 -      float: left;
 -      /*rtl:ignore*/ margin-left: -1px;
 +      /*rtl:ignore*/ float: left;
      }
      #maxlon {
 -      float: right;
 -      /*rtl:ignore*/ margin-right: -1px;
 +      /*rtl:ignore*/ float: right;
      }
 -    #minlat { margin-bottom: -1px; }
    }
  }
  
@@@ -809,6 -853,8 +815,6 @@@
  }
  
  .search_form {
 -  background-color: $lightgrey;
 -
    #query {
      z-index: 0;
    }
@@@ -818,6 -864,10 +824,6 @@@
    }
  }
  
 -.directions_form {
 -  background-color: $lightgrey;
 -}
 -
  /* Rules for user images */
  
  img.user_image {
@@@ -869,12 -919,12 +875,12 @@@ div.secondary-actions 
  .richtext,
  .prose {
    code {
 -    background: $lightgrey;
 +    background: var(--bs-secondary-bg);
      padding: 2px 3px;
    }
  
    pre {
 -    background: $lightgrey;
 +    background: var(--bs-secondary-bg);
      padding: 2px 3px;
      white-space: pre-wrap;
  
@@@ -885,17 -935,17 +891,17 @@@
  
    img {
      padding: $lineheight;
 -    background-color: $offwhite;
 +    background-color: var(--bs-tertiary-bg);
      display: block;
      max-width: 100%;
      margin: auto;
    }
  
    blockquote {
 -    border-left: $lineheight solid $offwhite;
 +    border-left: $lineheight solid var(--bs-tertiary-bg);
      padding-left: $lineheight;
      margin: 0;
 -    color: $darkgrey;
 +    color: var(--bs-secondary-color);
    }
  }
  
@@@ -952,6 -1002,8 +958,6 @@@
  }
  
  .site-about #content {
 -  background-color: $lightgrey;
 -
    .content-inner {
      max-width: 760px;
    }