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 /* Rules for export sidebar */
 733
 734 .export_form {
 735   .export_area_inputs,
 736   .export_button {
 737     text-align: center;
 738   }
 739
 740   .export_area_inputs {
 741     margin-bottom: $spacer;
 742     input[type="text"] {
 743       width: 100px;
 744       text-align: center;
 745     }
 746   }
 747
 748   .export_boxy {
 749     background: $lightgrey;
 750
 751     #maxlat { margin-top: -1px; }
 752     #minlon {
 753       float: left;
 754       /*rtl:ignore*/ margin-left: -1px;
 755     }
 756     #maxlon {
 757       float: right;
 758       /*rtl:ignore*/ margin-right: -1px;
 759     }
 760     #minlat { margin-bottom: -1px; }
 761   }
 762 }
 763
 764 /* Rules for edit pages */
 765
 766 .site-edit {
 767   #content {
 768     position: absolute;
 769     top: $headerHeight;
 770     bottom: 0;
 771     width: 100%;
 772   }
 773 }
 774
 775 /* Rules for non-map content pages */
 776
 777 .content-heading {
 778   background: $lightgrey;
 779 }
 780
 781 .content-inner {
 782   position: relative;
 783   max-width: 960px;
 784   margin: auto;
 785   padding: $lineheight;
 786 }
 787
 788 /* Overrides for pages that use new layout conventions */
 789
 790 .header-illustration {
 791   background-position: 0 0;
 792   background-repeat: no-repeat;
 793   position: relative;
 794   min-height: 200px;
 795   width: 100%;
 796   left: 0;
 797   bottom: 0;
 798
 799   &.new-user-main {
 800     background-image: image-url("sign-up-illustration.png");
 801   }
 802
 803   &.confirm-main {
 804     background-image: image-url("confirm-illustration.png");
 805   }
 806
 807   &.new-user-terms {
 808     background-image: image-url("terms-illustration.png");
 809   }
 810
 811   &.new-user-arm {
 812     height: 110px;
 813     width: 130px;
 814     left: 280px;
 815     top: 180px;
 816     background-image: image-url("sign-up-illustration-arm.png");
 817     position: absolute;
 818     z-index: 100;
 819     pointer-events: none;
 820   }
 821 }
 822
 823 [dir=rtl] .header-illustration {
 824   transform: scaleX(-1);
 825
 826   h1 {
 827     transform: scaleX(-1);
 828   }
 829 }
 830
 831 /* Rules for small maps in content areas */
 832
 833 .content_map {
 834   height: 200px;
 835   margin-bottom: $lineheight;
 836 }
 837
 838 @include media-breakpoint-up(md) {
 839   .content_map {
 840     height: 400px;
 841   }
 842 }
 843
 844 /* Rules for the user map */
 845
 846 .content_map .leaflet-popup-content {
 847   margin: $spacer;
 848   min-height: 50px;
 849 }
 850
 851 /* Rules for user popups on maps */
 852
 853 .user_popup {
 854   min-width: 200px;
 855   p {
 856     padding: 0 0 5px 0;
 857     margin: 0 0 0 60px;
 858     font-size: 12px;
 859   }
 860 }
 861
 862 /* Rules for the diary entry page */
 863
 864 .diary_entries {
 865   #map {
 866     height: 400px;
 867     display: none;
 868   }
 869   .comments {
 870     max-width: 740px;
 871   }
 872   .diary-comment {
 873     border-top: 1px dashed $grey;
 874     &:first-child {
 875       border-top: 1px solid $grey;
 876     }
 877   }
 878 }
 879
 880 /* Rules for the account confirmation page */
 881
 882 .users-terms {
 883   .legale {
 884     padding: $lineheight;
 885     margin-bottom: $lineheight;
 886     overflow: auto;
 887     height: 20em;
 888
 889     li {
 890       list-style: inherit;
 891     }
 892
 893     ol ol {
 894       list-style-type: lower-alpha;
 895     }
 896   }
 897 }
 898
 899 /* Rules for messages pages */
 900
 901 .messages {
 902   .inbox-row {
 903     background: $offwhite;
 904   }
 905
 906   .inbox-row-unread td {
 907     background: #CBEEA7;
 908   }
 909 }
 910
 911 .search_form {
 912   background-color: $lightgrey;
 913
 914   #query {
 915     z-index: 0;
 916   }
 917
 918   .describe_location {
 919     font-size: 10px;
 920   }
 921 }
 922
 923 .directions_form {
 924   background-color: $lightgrey;
 925 }
 926
 927 /* Rules for user images */
 928
 929 img.user_image {
 930   max-width: 100px;
 931   max-height: 100px;
 932 }
 933
 934 img.user_thumbnail {
 935   max-width: 50px;
 936   max-height: 50px;
 937 }
 938
 939 img.user_thumbnail_tiny {
 940   width: auto;
 941   height: auto;
 942   max-width: 25px;
 943   max-height: 25px;
 944 }
 945
 946 /* General styles for action lists / subnavs */
 947
 948 nav.secondary-actions {
 949   margin-left: -11px;
 950   overflow: hidden;
 951   > ul {
 952     display: flex;
 953     flex-direction: row;
 954     flex-wrap: wrap;
 955     margin-bottom: 0;
 956     margin-left: -1px;
 957     padding: 0;
 958     > li {
 959       flex-basis: auto;
 960       list-style: none;
 961       border-left: 1px solid $grey;
 962       padding-left: $lineheight * 0.5;
 963       margin-right: $lineheight * 0.5;
 964       margin-bottom: $lineheight * 0.125;
 965     }
 966   }
 967 }
 968
 969 div.secondary-actions {
 970   padding: 10px;
 971   text-align: center;
 972 }
 973
 974 /* Rules for rich text */
 975
 976 .richtext,
 977 .prose {
 978   code {
 979     background: $lightgrey;
 980     padding: 2px 3px;
 981   }
 982
 983   pre {
 984     background: $lightgrey;
 985     padding: 2px 3px;
 986     white-space: pre-wrap;
 987
 988     code {
 989       padding: 0;
 990     }
 991   }
 992
 993   img {
 994     padding: $lineheight;
 995     background-color: $offwhite;
 996     display: block;
 997     max-width: 100%;
 998     margin: auto;
 999   }
1000
1001   blockquote {
1002     border-left: $lineheight solid $offwhite;
1003     padding-left: $lineheight;
1004     margin: 0;
1005     color: $darkgrey;
1006   }
1007 }
1008
1009 /* Rules for the "Welcome" page */
1010 .site-welcome, .site-fixthemap {
1011   .sprite {
1012     background-image: image-url("welcome-sprite.png");
1013     background-size: 500px 250px;
1014     display: block;
1015   }
1016
1017   .sprite.small {
1018     width: 50px;
1019     height: 50px;
1020   }
1021
1022   .sprite.x {
1023     /*rtl:ignore*/ background-position: -50px 0;
1024   }
1025
1026   .sprite.term {
1027     margin-right: 10px;
1028     vertical-align: middle;
1029   }
1030
1031   .sprite.node {
1032     /*rtl:ignore*/ background-position: -100px 0;
1033   }
1034
1035   .sprite.way {
1036     /*rtl:ignore*/ background-position: -150px 0;
1037   }
1038
1039   .sprite.tag {
1040     /*rtl:ignore*/ background-position: -200px 0;
1041   }
1042
1043   .sprite.editor {
1044     /*rtl:ignore*/ background-position: -250px 0;
1045   }
1046
1047   .sprite.question {
1048     /*rtl:ignore*/ background-position: -300px 0;
1049   }
1050
1051   .sprite.rules {
1052     /*rtl:ignore*/ background-position: -350px 0;
1053   }
1054
1055   .icon.note {
1056     background-color: #333;
1057     border-radius: 4px;
1058   }
1059 }
1060
1061 .site-about #content {
1062   background-color: $lightgrey;
1063
1064   .content-inner {
1065     max-width: 760px;
1066   }
1067
1068   .attr {
1069     margin-top: -20px;
1070
1071     h1 {
1072       span {
1073         color: $vibrant-green;
1074       }
1075     }
1076
1077     .user-image {
1078       height: 150px;
1079       background-position: 0 50%;
1080       background-repeat: no-repeat;
1081       background-image: image-url('about/osm.png');
1082       background-size: cover;
1083       background-color: $vibrant-green;
1084     }
1085
1086     .byosm {
1087       background: $vibrant-green;
1088     }
1089
1090     .byosm span {
1091       display: inline-block;
1092       width: 1em;
1093       margin-left: -1em;
1094     }
1095   }
1096
1097   .icon {
1098     width: 30px;
1099     height: 30px;
1100     background: 40px 40px image-url('about/sprite.png') no-repeat;
1101
1102     &.local {
1103       /*rtl:ignore*/
1104       background-position: 0px 0px;
1105     }
1106     &.community {
1107       /*rtl:ignore*/
1108       background-position: 0px -40px;
1109     }
1110     &.open {
1111       /*rtl:ignore*/
1112       background-position: 0px -80px;
1113     }
1114     &.partners {
1115       /*rtl:ignore*/
1116       background-position: 0px -120px;
1117     }
1118     &.infringement {
1119       /*rtl:ignore*/
1120       background-position: 0px -160px;
1121     }
1122     &.legal {
1123       /*rtl:ignore*/
1124       background-position: -45px -160px;
1125     }
1126   }
1127 }
1128
1129 @import 'browse';