app/assets/stylesheets/common.scss

   1 @import "parameters";
   2 @import "bootstrap";
   3 @import "rails_bootstrap_forms";
   4
   5 /* Styles common to large and small screens */
   6
   7 /* Default rules for the body of every page */
   8
   9 body {
  10   font-size: $typeheight;
  11 }
  12
  13 p > img {
  14   width: auto;
  15   max-width: 100%;
  16 }
  17
  18 small, aside {
  19   font-size: 12px;
  20 }
  21
  22 #container { position: relative; }
  23
  24 .small_icon {
  25   vertical-align: middle;
  26   margin-right: $lineheight * 0.25;
  27 }
  28
  29 [dir=rtl] { /* no-r2 */ text-align: right; }
  30
  31 [dir=ltr] { /* no-r2 */ text-align: left; }
  32
  33 /* Rules for icons */
  34
  35 .icon {
  36   display: inline-block;
  37   vertical-align: top;
  38   width: 20px;
  39   height: 20px;
  40   background: transparent image-url("sprite.png") no-repeat 0 0;
  41   background-image: image-url("sprite.svg");
  42   text-indent: -9999px;
  43   overflow: hidden;
  44 }
  45
  46 .icon.search      { /* no-r2 */ background-position: 0 0; }
  47 .icon.donate      { /* no-r2 */ background-position: -20px 0; }
  48 .icon.zoomin      { /* no-r2 */ background-position: -40px 0; }
  49 .icon.zoomout     { /* no-r2 */ background-position: -60px 0; }
  50 .icon.geolocate   { /* no-r2 */ background-position: -80px 0; }
  51 .active .icon.geolocate   { /* no-r2 */ background-position: -80px -20px; }
  52 .icon.layers      { /* no-r2 */ background-position: -100px 0; }
  53 .icon.key         { /* no-r2 */ background-position: -120px 0; }
  54 .icon.share       { /* no-r2 */ background-position: -140px 0; }
  55 .icon.clipboard   { /* no-r2 */ background-position: -160px 0; }
  56 .icon.link        { /* no-r2 */ background-position: -180px 0; }
  57 .icon.close       { /* no-r2 */ background-position: -200px 0; }
  58 .icon.close:hover { /* no-r2 */ background-position: -200px -20px; }
  59 .icon.check       { /* no-r2 */ background-position: -220px 0; }
  60 .icon.note        { /* no-r2 */ background-position: -240px 0; }
  61 .icon.note.grey   { /* no-r2 */ background-position: -240px -20px; }
  62 .icon.query       { /* no-r2 */ background-position: -260px 0; }
  63
  64 /* Utility for de-emphasizing content */
  65
  66 .text-muted a {
  67   color: $blue;
  68 }
  69
  70 /* Rules for borders */
  71 /* These add additional colours to those provided by bootstrap */
  72 .border-grey {
  73   border-color: $grey !important;
  74 }
  75
  76 .border-lightgrey {
  77   border-color: $lightgrey !important;
  78 }
  79
  80 /* Rules for the header */
  81
  82 #menu-icon {
  83   display: none;
  84   float: right;
  85   background: image-url("menu-icon.png") no-repeat;
  86   background-size: 30px 30px;
  87   width: 30px;
  88   height: 30px;
  89   margin: 14px 10px 0 0;
  90   opacity: 0.6;
  91 }
  92
  93 header {
  94   height: $headerHeight;
  95   position: relative;
  96   z-index: 1001;
  97   font-size: 14px;
  98
  99   h1, nav, nav > ul, nav > ul > li {
 100     display: inline-block;
 101   }
 102
 103   > * {
 104     height: 100%;
 105     padding: $lineheight * 0.5;
 106   }
 107
 108   h1, nav.primary {
 109     float: left;
 110   }
 111
 112   a, a:hover {
 113     text-decoration: none;
 114   }
 115
 116   img.logo {
 117     width: 30px;
 118     height: 30px;
 119     margin-top: -2px;
 120     vertical-align: middle;
 121   }
 122
 123   h1 {
 124     font-size: 18px;
 125     font-weight: 600;
 126     line-height: 1.2;
 127     margin: 0;
 128     padding-top: 15px;
 129
 130     a {
 131       color: #000;
 132     }
 133
 134     a:hover {
 135       color: #000;
 136     }
 137   }
 138
 139   .btn {
 140     font-size: 14px;
 141   }
 142 }
 143
 144
 145 nav.primary {
 146   .btn-outline-primary {
 147     @include button-outline-variant($green, $color-hover: $white, $active-color: $white);
 148   }
 149
 150   .disabled {
 151     .btn-outline-primary {
 152       color: $grey;
 153       cursor: default;
 154
 155       .caret {
 156         border-top-color: $grey;
 157       }
 158
 159       &:hover {
 160         background-color: lighten($green, 30%);
 161       }
 162     }
 163   }
 164
 165   // Small tweaks to the toggle to stop the primary colour showing through
 166   // when the menu is shown
 167   .show > .btn-outline-primary.dropdown-toggle {
 168     background-color: $green;
 169     border-color: $green;
 170
 171     &:focus {
 172       box-shadow: 0 0 0 0.2rem fade-out($green, 0.5);
 173     }
 174   }
 175 }
 176
 177 nav.secondary {
 178   position: absolute;
 179   right: 0;
 180
 181   .nav-link {
 182     padding: 0.2rem;
 183     color: $darkgrey;
 184   }
 185
 186   > ul li.current a {
 187     color: darken($darkgrey, 25%);
 188   }
 189
 190   .login-menu {
 191     .btn-outline-secondary {
 192       @include button-outline-variant($darkgrey, $color-hover: $white, $active-color: $white);
 193     }
 194   }
 195
 196   .user-menu {
 197     .btn-outline-secondary {
 198       @include button-outline-variant($darkgrey, $color-hover: $darkgrey, $active-background: white, $active-border: $darkgrey);
 199       border-color: $grey;
 200       &:hover {
 201         border-color: $grey;
 202       }
 203     }
 204   }
 205
 206   #inboxanchor {
 207     background-color: lighten($grey, 10%);
 208   }
 209 }
 210
 211 nav.primary, nav.secondary {
 212   .dropdown-item {
 213     &:hover, &:active {
 214       background-color: $green;
 215       color: white;
 216     }
 217   }
 218 }
 219
 220 #compact-secondary-nav {
 221   display: none;
 222 }
 223
 224 body.compact-nav {
 225   #compact-secondary-nav {
 226     display: inline-block;
 227   }
 228   .compact-hide {
 229     display: none;
 230   }
 231 }
 232
 233 body.small-nav {
 234   #menu-icon {
 235     display: block;
 236   }
 237
 238   nav.primary,
 239   nav.secondary {
 240     float: none !important;
 241     position: relative;
 242     display: block;
 243     clear: both;
 244   }
 245
 246   header {
 247     height: auto;
 248     min-height: $headerHeight;
 249     background: #fff;
 250
 251     &.closed nav {
 252       display: none;
 253     }
 254
 255     .search_forms {
 256       display: block;
 257     }
 258   }
 259
 260   #sidebar .search_forms,
 261   #edit_tab,
 262   #export_tab {
 263     display: none;
 264   }
 265
 266   nav.primary {
 267     padding: 0;
 268
 269     ul, li {
 270       border: none;
 271       border-radius: 0;
 272       width: 100%;
 273     }
 274
 275     ul {
 276       border-top: 1px solid #eee;
 277       li {
 278         border-bottom: 1px solid #eee;
 279         border-right: none;
 280         > a {
 281           border-radius: 0;
 282           width: 100%;
 283           text-align: center;
 284           font-size: 15px;
 285         }
 286       }
 287     }
 288
 289     .btn-group {
 290       width: 100%;
 291       padding: 10px;
 292     }
 293   }
 294
 295   nav.secondary {
 296     .user-menu, .login-menu {
 297       width: 100%;
 298     }
 299   }
 300
 301   #compact-secondary-nav {
 302     display: none;
 303   }
 304
 305   .compact-hide {
 306     display: inline-block;
 307   }
 308
 309   .overlay-sidebar #sidebar .welcome {
 310     display: none;
 311   }
 312
 313   .overlay-sidebar #sidebar #banner {
 314     display: none;
 315   }
 316 }
 317
 318 /* Utility for styling notification numbers */
 319
 320 .count-number {
 321   background: lighten($green, 30%);
 322   color: $gray-800;
 323   font-weight: $font-weight-normal;
 324 }
 325
 326 /* Rules for the message shown in place of the map when javascript is disabled */
 327
 328 #noscript {
 329   z-index: 20000000;
 330   margin-left: 400px;
 331   margin-top: 50px;
 332 }
 333
 334 /* Rules for Leaflet maps */
 335
 336 .leaflet-top.leaflet-right,
 337 .leaflet-top.leaflet-left {
 338   height: 100%;
 339   column-gap: 10px;
 340   display: flex;
 341   flex-direction: column;
 342   flex-wrap: wrap-reverse;
 343 }
 344
 345 .leaflet-control .control-button {
 346   display: block;
 347   height: 40px;
 348   width: 40px;
 349   background-color: #333;
 350   background-color: rgba(0,0,0,.6);
 351   outline: none;
 352
 353   &:hover,
 354   &:focus {
 355     background-color: black;
 356   }
 357
 358   &.disabled,
 359   &.leaflet-disabled {
 360     background-color: #333;
 361     background-color: rgba(0,0,0,.5);
 362     cursor: default;
 363   }
 364
 365   &.active {
 366     background-color: $vibrant-green;
 367   }
 368
 369   &-first {
 370     border-start-start-radius: 4px;
 371   }
 372
 373   &-last {
 374     border-end-start-radius: 4px;
 375     margin-bottom: 10px;
 376   }
 377
 378   .icon {
 379     margin: 10px;
 380   }
 381 }
 382
 383 /* Rules for the sidebar and main map area */
 384
 385 .map-layout {
 386   #content {
 387     overflow: hidden;
 388     position: absolute;
 389     top: $headerHeight;
 390     bottom: 0;
 391     width: 100%;
 392   }
 393
 394   #sidebar, #map {
 395     position: relative;
 396     height: 100%;
 397     overflow-x: hidden;
 398     overflow-y: auto;
 399   }
 400
 401   #sidebar {
 402     float: left;
 403     width: $sidebarWidth;
 404     background: #fff;
 405
 406     #sidebar_loader {
 407       display: none;
 408     }
 409
 410     #sidebar_content {
 411       padding: $spacer;
 412     }
 413
 414     > div {
 415       position: relative;
 416     }
 417   }
 418
 419   .overlay-sidebar #sidebar {
 420     position: absolute;
 421     z-index: 1000;
 422     height: auto;
 423     overflow: hidden;
 424
 425     #banner {
 426       display: block;
 427     }
 428
 429     .welcome {
 430       display: block;
 431     }
 432
 433     #sidebar_content {
 434       display: none;
 435     }
 436   }
 437
 438   .welcome {
 439     display: none;
 440
 441     p {
 442       font-size: 110%;
 443       font-weight: 300;
 444     }
 445   }
 446
 447   #banner {
 448     display: none;
 449
 450     img {
 451       display: block;
 452       width: $sidebarWidth;
 453     }
 454
 455     button.btn-close {
 456       background-color: rgba(255, 255, 255, 0.5);
 457       opacity: 1.0;
 458     }
 459   }
 460
 461   #map {
 462     height: 100%;
 463     overflow: hidden;
 464
 465     &.query-active {
 466       cursor: help;
 467     }
 468
 469     &.query-disabled {
 470       cursor: not-allowed;
 471     }
 472
 473     .leaflet-marker-draggable {
 474       cursor: move;
 475     }
 476   }
 477
 478   #map-ui {
 479     display: none;
 480     position: relative;
 481     float: right;
 482     width: 250px;
 483     height: 100%;
 484     background: white;
 485     overflow: auto;
 486
 487     .section {
 488       border-bottom: 1px solid $grey;
 489       padding: $spacer;
 490     }
 491   }
 492 }
 493
 494 @include media-breakpoint-down(md) {
 495   body.map-layout {
 496     #sidebar, #map {
 497       position: relative;
 498       overflow-x: hidden;
 499       width: 100%;
 500       height: 50%;
 501     }
 502
 503     #map-ui {
 504       z-index: 9999;
 505       width: 100%;
 506       height: 50%;
 507       overflow-y: scroll;
 508     }
 509
 510     .overlay-sidebar {
 511       #sidebar {
 512         position: absolute;
 513         width: 350px;
 514         height: auto;
 515         overflow: hidden;
 516       }
 517
 518       #map, #map-ui {
 519         height: 100%;
 520       }
 521     }
 522   }
 523 }
 524
 525 .layers-ui {
 526   .base-layers {
 527     .leaflet-container {
 528       width: 100%;
 529       height: 50px;
 530       cursor: pointer;
 531     }
 532
 533     li  {
 534       overflow: hidden;
 535       border-radius: 3px;
 536       border: 2px solid #fff;
 537       margin-bottom: 8px;
 538       position: relative;
 539       transition: border-color 0.08s ease-in;
 540
 541       label {
 542         position: absolute;
 543         top: 0;
 544         left: 0;
 545         padding: 2px 6px;
 546         border-bottom-right-radius: 3px;
 547         cursor: pointer;
 548         font-weight: 600;
 549         font-size: 16px;
 550         text-stroke: 2px #fff;
 551         background: rgba(255,255,255,.9);
 552         z-index: 1000;
 553         input[type="radio"] {
 554           display: none;
 555         }
 556       }
 557
 558       &.active { border-color: darken($green, 10%); }
 559       &:hover {
 560         border-color: $grey;
 561         &.active { border-color: darken($green, 20%); }
 562       }
 563     }
 564   }
 565
 566   .overlay-layers {
 567     p {
 568       font-size: 13px;
 569       margin-bottom: 8px;
 570     }
 571     li.disabled { color: $darkgrey; }
 572   }
 573 }
 574
 575 .share-ui {
 576   #mapnik_scale {
 577     width: 100px;
 578   }
 579 }
 580
 581 .leaflet-top {
 582   top: 10px !important;
 583   .leaflet-control {
 584     margin-right: 0px !important;
 585     margin-top: 0px !important;
 586   }
 587 }
 588
 589 .leaflet-popup-scrolled {
 590   padding-right: $lineheight;
 591   border-bottom: 0px !important;
 592   border-top: 0px !important;
 593 }
 594
 595 .leaflet-popup-content-wrapper {
 596   border-radius: 4px !important;
 597 }
 598
 599 /* Rules for attribution text under the main map shown on printouts */
 600
 601 #attribution {
 602   display: none;
 603 }
 604
 605 .donate-attr { color: darken($green, 10%) !important; }
 606
 607 /* Rules for the sidebar */
 608
 609 #browse_status {
 610   input {
 611     display: block;
 612     margin-left: auto;
 613     margin-right: auto;
 614   }
 615
 616   > div {
 617    padding: $spacer;
 618   }
 619 }
 620
 621 /* Temporary label size override until we remove site-wide font customisation */
 622
 623 form {
 624   label {
 625     font-size: 16px;
 626   }
 627   .col-form-label {
 628     font-size: 16px;
 629   }
 630 }
 631
 632 /* Stop bootstrap 5 from floating legends when they don't need to be */
 633 legend {
 634   float: none;
 635 }
 636
 637 /* Override the text colour for primary and secondary buttons, to match our
 638    bootstrap 4 colours. Note this has accessibility issues, which is why
 639    bootstrap 5 calculates black as the appropriate colour, and we should
 640    reconsider our colours at some point with that in mind. */
 641
 642 .btn-primary {
 643   @include button-variant($primary, $primary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
 644 }
 645
 646 .btn-secondary {
 647   @include button-variant($secondary, $secondary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
 648 }
 649
 650 .btn-outline-secondary {
 651   @include button-outline-variant($secondary, $color-hover: $white, $active-color: $white);
 652 }
 653
 654 /* Rules for the search and direction forms */
 655
 656 header .search_forms,
 657 .directions_form {
 658   display: none;
 659 }
 660
 661 /* Rules for the map key which appears in the popout sidebar */
 662
 663 #mapkey {
 664  .mapkey-table-key img {
 665     display: block;
 666     margin-left: auto;
 667     margin-right: auto;
 668   }
 669 }
 670
 671 /* Rules for search sidebar */
 672
 673 #sidebar .search_results_entry {
 674   ul li {
 675     cursor: pointer;
 676     &.selected { background: $list-highlight; }
 677   }
 678
 679   .search_more .loader {
 680     display: none;
 681   }
 682 }
 683
 684 .search_results_error {
 685   color: #f00;
 686   padding: 10px 20px;
 687 }
 688
 689 /* Rules for routing */
 690
 691 div.direction {
 692   background-image: image-url('routing-sprite.png');
 693   width: 20px;
 694   height: 20px;
 695   background-repeat: no-repeat;
 696 }
 697 @for $i from 0 through 25 {
 698 div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
 699 }
 700
 701 td.distance {
 702     color: $darkgrey;
 703     text-align: right;
 704     font-size: x-small;
 705 }
 706 tr.turn {
 707     cursor: pointer;
 708 }
 709 tr.turn:hover {
 710     background: $list-highlight;
 711 }
 712
 713 .routing_marker { width: 15px; cursor: move; }
 714
 715 .browse_status {
 716   display: none;
 717 }
 718
 719 /* Rules for the history sidebar */
 720
 721 #sidebar .changesets {
 722   li {
 723     &.selected { background: $list-highlight; }
 724     /* color is derived from changeset bbox fillColor in history.js */
 725
 726     a.stretched-link > span, a:not(.stretched-link), [title] {
 727       position: relative;
 728       z-index: 2; /* needs to be higher than Bootstrap's stretched link ::after z-index */
 729     }
 730   }
 731
 732   .comments {
 733     color: $darkgrey;
 734   }
 735
 736   .changeset_more .loader {
 737     display: none;
 738     width: 100%;
 739   }
 740 }
 741
 742 /* Rules for the browse sidebar */
 743
 744 #sidebar_content {
 745   .browse-section {
 746     padding-bottom: $spacer;
 747     margin-bottom: $spacer;
 748     border-bottom: 1px solid $grey;
 749
 750     h4:first-child {
 751       word-wrap: break-word;
 752     }
 753   }
 754
 755   .browse-section:last-of-type {
 756     border-bottom: none;
 757   }
 758
 759   .browse-tag-list {
 760     background-color: $offwhite;
 761     table-layout: fixed;
 762     border-collapse: separate;
 763     border-spacing: 0;
 764     width: 100%;
 765     margin-bottom: $spacer;
 766
 767     th, td {
 768       border-bottom: 1px solid $grey;
 769     }
 770
 771     tr:last-child th, tr:last-child td {
 772       border-bottom: 0;
 773     }
 774
 775     .browse-tag-k,
 776     .browse-tag-v {
 777       width: 50%;
 778       padding: 6px 10px;
 779       word-wrap: break-word;
 780       white-space: pre-wrap;
 781     }
 782
 783     .browse-tag-k {
 784       font-weight: 500;
 785       background-color: $offwhite;
 786     }
 787
 788     .browse-tag-v {
 789       border-left: 1px solid $grey;
 790       background-color: #fff;
 791     }
 792
 793     .colour-preview-box {
 794       float: right;
 795       width: 14px;
 796       height: 14px;
 797       margin: 4px 0px;
 798       border: 1px solid rgba(0, 0, 0, .1);
 799       // add color via inline css on element: background-color: <tag value>;
 800     }
 801   }
 802
 803   .subscribe-buttons input {
 804     font-size: 90%;
 805     line-height: 15px;
 806     min-height: 20px;
 807   }
 808
 809   span.action-button:hover {
 810     cursor: pointer;
 811     text-decoration: underline;
 812   }
 813
 814   .note-description {
 815     overflow: hidden;
 816     margin: 0 0 10px 10px;
 817   }
 818
 819   .query-results {
 820     display: none;
 821
 822     ul {
 823       li {
 824         &.query-result {
 825           cursor: pointer;
 826         }
 827
 828         &.selected {
 829           background: $list-highlight;
 830         }
 831       }
 832     }
 833   }
 834 }
 835
 836 /* Bootstrap buttons don't have any vertical margin, so
 837    they touch when adjacent buttons wrap onto a new line
 838    e.g. wide form buttons on a narrow sidebar */
 839
 840 .btn-wrapper {
 841   > .btn {
 842     margin-bottom: $spacer * 0.25;
 843   }
 844 }
 845
 846 /* Rules for export sidebar */
 847
 848 .export_form {
 849   .export_area_inputs,
 850   .export_button {
 851     text-align: center;
 852   }
 853
 854   .export_area_inputs {
 855     margin-bottom: $spacer;
 856     input[type="text"] {
 857       width: 100px;
 858       text-align: center;
 859     }
 860   }
 861
 862   .export_boxy {
 863     background: $lightgrey;
 864
 865     #maxlat { margin-top: -1px; }
 866     #minlon {
 867       float: left;
 868       /* no-r2 */ margin-left: -1px;
 869     }
 870     #maxlon {
 871       float: right;
 872       /* no-r2 */ margin-right: -1px;
 873     }
 874     #minlat { margin-bottom: -1px; }
 875   }
 876 }
 877
 878 /* Rules for edit pages */
 879
 880 .site-edit {
 881   #content {
 882     position: absolute;
 883     top: $headerHeight;
 884     bottom: 0;
 885     width: 100%;
 886   }
 887
 888   #map {
 889     height: 100%;
 890     overflow: hidden;
 891   }
 892 }
 893
 894 /* Rules for non-map content pages */
 895
 896 .content-heading {
 897   background: $lightgrey;
 898 }
 899
 900 .content-inner {
 901   position: relative;
 902   max-width: 960px;
 903   margin: auto;
 904   padding: $lineheight;
 905 }
 906
 907 /* Overrides for pages that use new layout conventions */
 908
 909 .header-illustration {
 910   background-position: 0 0;
 911   background-repeat: no-repeat;
 912   position: relative;
 913   min-height: 200px;
 914   width: 100%;
 915   left: 0;
 916   bottom: 0;
 917
 918   &.new-user-main {
 919     background-image: image-url("sign-up-illustration.png");
 920   }
 921
 922   &.confirm-main {
 923     background-image: image-url("confirm-illustration.png");
 924   }
 925
 926   &.new-user-terms {
 927     background-image: image-url("terms-illustration.png");
 928   }
 929
 930   &.new-user-arm {
 931     height: 110px;
 932     width: 130px;
 933     left: 280px;
 934     top: 180px;
 935     background-image: image-url("sign-up-illustration-arm.png");
 936     position: absolute;
 937     z-index: 100;
 938     pointer-events: none;
 939   }
 940 }
 941
 942 [dir=rtl] .header-illustration {
 943   transform: scaleX(-1);
 944
 945   h1 {
 946     transform: scaleX(-1);
 947   }
 948 }
 949
 950 #content.maximised {
 951   top: 0;
 952   left: 0;
 953   right: 0;
 954   bottom: 0;
 955   border: 0;
 956   z-index: 2000;
 957 }
 958
 959 /* Rules for small maps in content areas */
 960
 961 .content_map {
 962   height: 200px;
 963   margin-bottom: $lineheight;
 964 }
 965
 966 @include media-breakpoint-up(md) {
 967   .content_map {
 968     height: 400px;
 969   }
 970 }
 971
 972 /* Rules for the user map */
 973
 974 .content_map .leaflet-popup-content {
 975   margin: $spacer;
 976   min-height: 50px;
 977 }
 978
 979 /* Rules for user popups on maps */
 980
 981 .user_popup {
 982   min-width: 200px;
 983   p {
 984     padding: 0 0 5px 0;
 985     margin: 0 0 0 60px;
 986     font-size: 12px;
 987   }
 988 }
 989
 990 /* Rules for the user list */
 991
 992 #user_list {
 993   width: 100%;
 994 }
 995
 996 /* Rules for the diary entry page */
 997
 998 .diary_entries {
 999   #map {
1000     height: 400px;
1001     display: none;
1002   }
1003   .comments {
1004     max-width: 740px;
1005   }
1006   .diary-comment {
1007     border-top: 1px dashed $grey;
1008     &:first-child {
1009       border-top: 1px solid $grey;
1010     }
1011   }
1012 }
1013
1014 /* Rules for the account confirmation page */
1015
1016 .users-terms {
1017   .legale {
1018     padding: $lineheight;
1019     margin-bottom: $lineheight;
1020     overflow: auto;
1021     height: 20em;
1022
1023     li {
1024       list-style: inherit;
1025     }
1026
1027     ol ol {
1028       list-style-type: lower-alpha;
1029     }
1030   }
1031 }
1032
1033 /* Rules for the oauth authorization page */
1034
1035 .oauth-authorize ul {
1036   list-style: none;
1037 }
1038
1039 /* Rules for messages pages */
1040
1041 .messages {
1042   .inbox-row {
1043     background: $offwhite;
1044   }
1045
1046   .inbox-row-unread {
1047     background: #CBEEA7;
1048   }
1049 }
1050
1051 .search_form {
1052   background-color: $lightgrey;
1053
1054   .describe_location {
1055     top: 6px;
1056     right: 6px;
1057     font-size: 10px;
1058     color: $blue;
1059   }
1060 }
1061
1062 .directions_form {
1063   background-color: $lightgrey;
1064 }
1065
1066 /* Rules for user images */
1067
1068 img.user_image {
1069   max-width: 100px;
1070   max-height: 100px;
1071 }
1072
1073 img.user_thumbnail {
1074   max-width: 50px;
1075   max-height: 50px;
1076 }
1077
1078 img.user_thumbnail_tiny {
1079   width: auto;
1080   height: auto;
1081   max-width: 25px;
1082   max-height: 25px;
1083 }
1084
1085 /* General styles for action lists / subnavs */
1086
1087 nav.secondary-actions {
1088   margin-left: -11px;
1089   overflow: hidden;
1090   > ul {
1091     display: flex;
1092     flex-direction: row;
1093     flex-wrap: wrap;
1094     margin-bottom: 0;
1095     margin-left: -1px;
1096     padding: 0;
1097     > li {
1098       flex-basis: auto;
1099       list-style: none;
1100       border-left: 1px solid $grey;
1101       padding-left: $lineheight * 0.5;
1102       margin-right: $lineheight * 0.5;
1103       margin-bottom: $lineheight * 0.125;
1104     }
1105   }
1106 }
1107
1108 div.secondary-actions {
1109   padding: 10px;
1110   text-align: center;
1111 }
1112
1113 /* Rules for rich text */
1114
1115 .richtext,
1116 .prose {
1117   code {
1118     background: $lightgrey;
1119     padding: 2px 3px;
1120     direction: inherit; /* fix for Bootstrap < 5.2 */
1121     unicode-bidi: unset; /* fix for Bootstrap < 5.2 */
1122   }
1123
1124   pre {
1125     background: $lightgrey;
1126     padding: 2px 3px;
1127     white-space: pre-wrap;
1128
1129     code {
1130       padding: 0;
1131     }
1132   }
1133
1134   img {
1135     padding: $lineheight;
1136     background-color: $offwhite;
1137     display: block;
1138     max-width: 100%;
1139     margin: auto;
1140   }
1141
1142   blockquote {
1143     border-left: $lineheight solid $offwhite;
1144     padding-left: $lineheight;
1145     margin: 0;
1146     color: $darkgrey;
1147   }
1148 }
1149
1150 /* Rules for the iD editor */
1151
1152 .id-embed {
1153   width: 100%;
1154   height: 100%;
1155 }
1156
1157 /* Rules for the "Welcome" page */
1158 .site-welcome, .site-fixthemap {
1159   .sprite {
1160     background-image: image-url("welcome-sprite.png");
1161     background-size: 500px 250px;
1162     display: block;
1163   }
1164
1165   .sprite.small {
1166     width: 50px;
1167     height: 50px;
1168   }
1169
1170   .sprite.x {
1171     /* no-r2 */ background-position: -50px 0;
1172   }
1173
1174   .sprite.term {
1175     margin-right: 10px;
1176     vertical-align: middle;
1177   }
1178
1179   .sprite.node {
1180     /* no-r2 */ background-position: -100px 0;
1181   }
1182
1183   .sprite.way {
1184     /* no-r2 */ background-position: -150px 0;
1185   }
1186
1187   .sprite.tag {
1188     /* no-r2 */ background-position: -200px 0;
1189   }
1190
1191   .sprite.editor {
1192     /* no-r2 */ background-position: -250px 0;
1193   }
1194
1195   .sprite.question {
1196     /* no-r2 */ background-position: -300px 0;
1197   }
1198
1199   .sprite.rules {
1200     /* no-r2 */ background-position: -350px 0;
1201   }
1202
1203   .icon.note {
1204     background-color: #333;
1205     border-radius: 4px;
1206   }
1207 }
1208
1209 .site-about #content {
1210   background-color: $lightgrey;
1211
1212   .content-inner {
1213     max-width: 760px;
1214   }
1215
1216   .attr {
1217     margin-top: -20px;
1218
1219     h1 {
1220       span {
1221         color: $vibrant-green;
1222       }
1223     }
1224
1225     .user-image {
1226       height: 150px;
1227       background-position: 0 50%;
1228       background-repeat: no-repeat;
1229       background-image: image-url('about/osm.png');
1230       background-size: cover;
1231       background-color: $vibrant-green;
1232     }
1233
1234     .byosm {
1235       background: $vibrant-green;
1236     }
1237
1238     .byosm span {
1239       display: inline-block;
1240       width: 1em;
1241       margin-left: -1em;
1242     }
1243   }
1244
1245   .icon {
1246     width: 30px;
1247     height: 30px;
1248     background: 40px 40px image-url('about/sprite.png') no-repeat;
1249
1250     &.local {
1251       /* no-r2 */
1252       background-position: 0px 0px;
1253     }
1254     &.community {
1255       /* no-r2 */
1256       background-position: 0px -40px;
1257     }
1258     &.open {
1259       /* no-r2 */
1260       background-position: 0px -80px;
1261     }
1262     &.partners {
1263       /* no-r2 */
1264       background-position: 0px -120px;
1265     }
1266     &.infringement {
1267       /* no-r2 */
1268       background-position: 0px -160px;
1269     }
1270     &.legal {
1271       /* no-r2 */
1272       background-position: -45px -160px;
1273     }
1274   }
1275 }
1276
1277 @import 'browse';