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