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