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