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