Merge pull request #4761 from AntonKhorev:dark-mode-with-close-button

Enable dark theme if user prefers dark color scheme - no javascript version

diff --combined app/assets/stylesheets/common.scss
index c4391be2d1f8084b1ec63573fd8934db2becefd8,307a990e40d9f0f4ecbb0c58821df92a1b92279f..c432bd848d3e9cc907210e8443f28c05a8843b0e
--- 1/app/assets/stylesheets/common.scss
--- 2/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@@ -16,6 -16,8 +16,6 @@@ time[title] 
    text-decoration: underline dotted;
  }
  
 -#container { position: relative; }
 -
  /* Rules for icons */
  
  .icon {
@@@ -48,7 -50,7 +48,7 @@@
  
  /* Utility for de-emphasizing content */
  
 -.text-muted a {
 +.text-body-secondary a {
    color: $blue;
  }
  
@@@ -70,18 -72,16 +70,28 @@@
    }
  }
  
 +/* Utility for delayed loading spinner */
 +
 +.delayed-fade-in {
 +  animation: 300ms linear forwards delayed-fade-in;
 +}
 +
 +@keyframes delayed-fade-in {
 +  0%   { opacity: 0 }
 +  66%  { opacity: 0 }
 +  100% { opacity: 1 }
 +}
 +
+ /* Bootstrap close button overrides for nested light/dark themes */
+ 
+ [data-bs-theme="dark"] .btn-close {
+   filter: var(--bs-btn-close-white-filter);
+ }
+ 
+ [data-bs-theme="light"] .btn-close {
+   filter: none;
+ }
+ 
  /* Rules for the header */
  
  #menu-icon {
@@@ -89,7 -89,7 +99,7 @@@
    position: absolute;
    top: 0;
    right: 0;
 -  background: image-url("menu-icon.png") no-repeat;
 +  background: image-url("menu-icon.svg") no-repeat;
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
@@@ -108,13 -108,23 +118,13 @@@ header 
    position: relative;
    font-size: 14px;
  
 -  h1, nav, nav > ul, nav > ul > li {
 -    display: inline-block;
 -  }
 -
    > * {
 -    height: 100%;
      padding: $lineheight * 0.5;
    }
  
 -  img.logo {
 -    margin-top: -2px;
 -  }
 -
    h1 {
 +    height: $headerHeight;
      font-size: 18px;
 -    line-height: 1.2;
 -    padding-top: 15px;
    }
  
    .btn {
@@@ -124,14 -134,10 +134,14 @@@
    nav.primary {
      margin-right: auto;
    }
 +
 +  .username {
 +    max-width: 12em;
 +  }
  }
  
  nav.primary {
 -  & > .btn-group .btn-outline-primary {
 +  #edit_tab .btn-outline-primary {
      @include button-outline-variant($green, $color-hover: $white, $active-color: $white);
    }
  
@@@ -164,7 -170,7 +174,7 @@@
  
  nav.secondary {
    .nav-link {
 -    padding: 0.2rem;
 +    padding: 0.3rem;
    }
  }
  
@@@ -201,7 -207,7 +211,7 @@@ body.small-nav 
      min-height: $headerHeight;
  
      &.closed nav {
 -      display: none;
 +      display: none !important;
      }
  
      .search_forms {
@@@ -209,7 -215,9 +219,7 @@@
      }
    }
  
 -  #sidebar .search_forms,
 -  #edit_tab,
 -  #export_tab {
 +  #sidebar .search_forms {
      display: none;
    }
  
@@@ -217,15 -225,13 +227,15 @@@
      margin-right: 0;
      padding: 0;
  
 -    .btn-group {
 +    #edit_tab {
        width: 100%;
        padding: 10px;
      }
    }
  
    nav.secondary {
 +    flex-direction: column;
 +
      .user-menu, .login-menu {
        width: 100%;
      }
@@@ -378,14 -384,6 +388,14 @@@
      .leaflet-marker-draggable {
        cursor: move;
      }
 +
 +    .query-marker {
 +      animation: 1500ms forwards query-marker-fade;
 +
 +      @keyframes query-marker-fade {
 +        to { opacity: 0 }
 +      }
 +    }
    }
  
    #map-ui {
@@@ -413,7 -411,7 +423,7 @@@
        overflow-y: scroll;
      }
  
 -    .overlay-sidebar {
 +    .overlay-sidebar.overlay-right-sidebar {
        #sidebar {
          position: absolute;
          width: 350px;
@@@ -421,7 -419,7 +431,7 @@@
          overflow: hidden;
        }
  
 -      #map, #map-ui {
 +      #map {
          height: 100%;
        }
      }
@@@ -430,12 -428,9 +440,12 @@@
  
  .layers-ui {
    .base-layers > * {
 -    height: 56px;
 +    height: 3.5rem;
  
      > .btn {
 +      box-sizing: content-box;
 +      top: - map.get($border-widths, 4);
 +      left: - map.get($border-widths, 4);
        --bs-btn-border-color: var(--bs-body-bg);
      }
      > .btn:hover {
@@@ -444,6 -439,10 +454,6 @@@
    }
  
    .overlay-layers {
 -    p {
 -      font-size: 13px;
 -      margin-bottom: 8px;
 -    }
      li.disabled { color: $darkgrey; }
    }
  }
@@@ -502,7 -501,7 +512,7 @@@
    }
  
    .leaflet-control-scale-line {
-     @extend .border-light, .border-opacity-75;
+     border-color: rgba(var(--bs-light-rgb), .75) !important;
    }
  }
  
@@@ -510,6 -509,16 +520,6 @@@
  
  .donate-attr { color: darken($green, 10%) !important; }
  
 -/* Rules for the sidebar */
 -
 -#browse_status {
 -  input {
 -    display: block;
 -    margin-left: auto;
 -    margin-right: auto;
 -  }
 -}
 -
  /* Temporary label size override until we remove site-wide font customisation */
  
  form {
@@@ -567,7 -576,7 +577,7 @@@ header .search_forms
  /* Rules for routing */
  
  div.direction {
 -  background-image: image-url('routing-sprite.png');
 +  background-image: image-url('routing-sprite.svg');
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
@@@ -589,12 -598,10 +599,12 @@@ tr.turn 
      cursor: pointer;
  }
  
 -.routing_marker { width: 15px; cursor: move; }
 +.routing_marker_column {
 +  width: 15px;
  
 -.browse_status {
 -  display: none;
 +  img {
 +    cursor: move;
 +  }
  }
  
  /* Rules for the history sidebar */
@@@ -645,11 -652,26 +655,11 @@@
      }
    }
  
 -  .note-description {
 -    overflow: hidden;
 -    margin: 0 0 10px 10px;
 -  }
 -
    .query-results {
      display: none;
    }
  }
  
 -/* Bootstrap buttons don't have any vertical margin, so
 -   they touch when adjacent buttons wrap onto a new line
 -   e.g. wide form buttons on a narrow sidebar */
 -
 -.btn-wrapper {
 -  > .btn {
 -    margin-bottom: $spacer * 0.25;
 -  }
 -}
 -
  /* Force LTR/RTL alignment for placeholder text */
  
  .form-control::placeholder {
@@@ -698,16 -720,10 +708,16 @@@
    padding: $lineheight;
  }
  
 -/* Overrides for pages that use new layout conventions */
 +/* Rules for login and signup pages */
 +
 +.sessions-new, .users-new, .users-create {
 +  #content .content-inner {
 +    max-width: 760px;
 +  }
 +}
  
  .header-illustration {
 -  background-position: 0 0;
 +  background-position: right;
    background-repeat: no-repeat;
    position: relative;
    min-height: 200px;
@@@ -716,16 -732,16 +726,16 @@@
    bottom: 0;
  
    &.new-user-main {
 -    background-image: image-url("sign-up-illustration.png");
 -    background-position-x: 50px;
 +    background-image: image-url("sign-up-illustration.svg");
 +    background-position-x: 70px;
    }
  
    &.confirm-main {
 -    background-image: image-url("confirm-illustration.png");
 +    background-image: image-url("confirm-illustration.svg");
    }
  
    &.new-user-terms {
 -    background-image: image-url("terms-illustration.png");
 +    background-image: image-url("terms-illustration.svg");
    }
  }
  
@@@ -735,10 -751,6 +745,10 @@@
    h1 {
      transform: scaleX(-1);
    }
 +
 +  ul {
 +    transform: scaleX(-1);
 +  }
  }
  
  /* Rules for small maps in content areas */
@@@ -885,7 -897,52 +895,7 @@@ div.secondary-actions 
    }
  }
  
 -/* Rules for the "Welcome" page */
 -.site-welcome, .site-fixthemap {
 -  .sprite {
 -    background-image: image-url("welcome-sprite.png");
 -    background-size: 500px 250px;
 -    display: block;
 -  }
 -
 -  .sprite.small {
 -    width: 50px;
 -    height: 50px;
 -  }
 -
 -  .sprite.x {
 -    /*rtl:ignore*/ background-position: -50px 0;
 -  }
 -
 -  .sprite.term {
 -    margin-right: 10px;
 -    vertical-align: middle;
 -  }
 -
 -  .sprite.node {
 -    /*rtl:ignore*/ background-position: -100px 0;
 -  }
 -
 -  .sprite.way {
 -    /*rtl:ignore*/ background-position: -150px 0;
 -  }
 -
 -  .sprite.tag {
 -    /*rtl:ignore*/ background-position: -200px 0;
 -  }
 -
 -  .sprite.editor {
 -    /*rtl:ignore*/ background-position: -250px 0;
 -  }
 -
 -  .sprite.question {
 -    /*rtl:ignore*/ background-position: -300px 0;
 -  }
 -
 -  .sprite.rules {
 -    /*rtl:ignore*/ background-position: -350px 0;
 -  }
 -}
 +/* Rules for the "About" page */
  
  .site-about #content {
    .content-inner {
@@@ -920,12 -977,41 +930,12 @@@
        margin-left: -1em;
      }
    }
 -
 -  .icon {
 -    width: 30px;
 -    height: 30px;
 -    background: 40px 40px image-url('about/sprite.png') no-repeat;
 -
 -    &.local {
 -      /*rtl:ignore*/
 -      background-position: 0px 0px;
 -    }
 -    &.community {
 -      /*rtl:ignore*/
 -      background-position: 0px -40px;
 -    }
 -    &.open {
 -      /*rtl:ignore*/
 -      background-position: 0px -80px;
 -    }
 -    &.partners {
 -      /*rtl:ignore*/
 -      background-position: 0px -120px;
 -    }
 -    &.infringement {
 -      /*rtl:ignore*/
 -      background-position: 0px -160px;
 -    }
 -    &.legal {
 -      /*rtl:ignore*/
 -      background-position: -45px -160px;
 -    }
 -  }
  }
  
 -.auth-container {
 -  max-width: 600px;
 +/* Rules for block pages */
 +
 +#block_list .username {
 +  max-width: 20em;
  }
  
  /* Rules for tabs inside secondary background sections */