app/assets/stylesheets/common.scss

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