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-family: 'Helvetica Neue',Arial,sans-serif;
  11   font-size: $typeheight;
  12   line-height: 1.6666;
  13   color: #222;
  14   background-color: #fff;
  15   margin: 0px;
  16   padding: 0px;
  17   text-align: left;
  18   height: 100%;
  19 }
  20
  21 p > img {
  22   width: auto;
  23   max-width: 100%;
  24 }
  25
  26 small, aside {
  27   font-size: 12px;
  28 }
  29
  30 #container { position: relative; }
  31
  32 .small_icon {
  33   vertical-align: middle;
  34   margin-right: $lineheight/4;
  35 }
  36
  37 [dir=rtl] { /* no-r2 */ text-align: right; }
  38
  39 [dir=ltr] { /* no-r2 */ text-align: left; }
  40
  41 /* Rules for icons */
  42
  43 .icon {
  44   display: inline-block;
  45   vertical-align: top;
  46   width: 20px;
  47   height: 20px;
  48   background: transparent image-url("sprite.png") no-repeat 0 0;
  49   background-image: image-url("sprite.svg");
  50   text-indent: -9999px;
  51   overflow: hidden;
  52 }
  53
  54 .icon.search      { /* no-r2 */ background-position: 0 0; }
  55 .icon.donate      { /* no-r2 */ background-position: -20px 0; }
  56 .icon.zoomin      { /* no-r2 */ background-position: -40px 0; }
  57 .icon.zoomout     { /* no-r2 */ background-position: -60px 0; }
  58 .icon.geolocate   { /* no-r2 */ background-position: -80px 0; }
  59 .active .icon.geolocate   { /* no-r2 */ background-position: -80px -20px; }
  60 .icon.layers      { /* no-r2 */ background-position: -100px 0; }
  61 .icon.key         { /* no-r2 */ background-position: -120px 0; }
  62 .icon.share       { /* no-r2 */ background-position: -140px 0; }
  63 .icon.clipboard   { /* no-r2 */ background-position: -160px 0; }
  64 .icon.link        { /* no-r2 */ background-position: -180px 0; }
  65 .icon.close       { /* no-r2 */ background-position: -200px 0; }
  66 .close-wrap:hover .icon.close,
  67 .icon.close:hover { /* no-r2 */ background-position: -200px -20px; }
  68 .icon.check       { /* no-r2 */ background-position: -220px 0; }
  69 .icon.note        { /* no-r2 */ background-position: -240px 0; }
  70 .icon.note.grey   { /* no-r2 */ background-position: -240px -20px; }
  71 .icon.query       { /* no-r2 */ background-position: -260px 0; }
  72
  73 /* Rules for links */
  74
  75 a {
  76   color: #24d;
  77   text-decoration: none;
  78   outline: 0;
  79   &:hover {
  80     text-decoration: underline;
  81   }
  82 }
  83
  84 /* Utility for de-emphasizing content */
  85
  86 .deemphasize {
  87   color: $darkgrey;
  88   a {
  89     color: $blue;
  90   }
  91 }
  92
  93 .text-muted a {
  94   color: $blue;
  95 }
  96
  97 /* Rules for the header */
  98
  99 #menu-icon {
 100   display: none !important;
 101   float: right;
 102   background: image-url("menu-icon.png") no-repeat;
 103   background-size: 30px 30px;
 104   display: block;
 105   width: 30px;
 106   height: 30px;
 107   margin: 14px 10px 0 0;
 108   opacity: 0.6;
 109 }
 110
 111 header {
 112   height: $headerHeight;
 113   position: relative;
 114   z-index: 1001;
 115   font-size: 14px;
 116
 117   h1, nav, nav > ul, nav > ul > li {
 118     display: inline-block;
 119   }
 120
 121   > * {
 122     height: 100%;
 123     padding: $lineheight/2;
 124   }
 125
 126   h1, nav.primary {
 127     float: left;
 128   }
 129
 130   a, a:hover {
 131     text-decoration: none;
 132   }
 133
 134   img.logo {
 135     width: 30px;
 136     height: 30px;
 137     margin-top: -2px;
 138     vertical-align: middle;
 139   }
 140
 141   h1 {
 142     font-size: 18px;
 143     font-weight: 600;
 144     line-height: 1.2;
 145     margin: 0;
 146     padding-top: 15px;
 147
 148     a {
 149       color: #000;
 150     }
 151
 152     a:hover {
 153       color: #000;
 154     }
 155   }
 156
 157   .btn {
 158     font-size: 14px;
 159   }
 160 }
 161
 162
 163 nav.primary {
 164   .btn-outline-primary {
 165     @include button-outline-variant($green, $white);
 166   }
 167
 168   .disabled {
 169     .btn-outline-primary {
 170       color: $grey;
 171       cursor: default;
 172
 173       .caret {
 174         border-top-color: $grey;
 175       }
 176
 177       &:hover {
 178         background-color: lighten($green, 30%);
 179       }
 180     }
 181   }
 182
 183   // Small tweaks to the toggle to stop the primary colour showing through
 184   // when the menu is shown
 185   .show > .btn-outline-primary.dropdown-toggle {
 186     background-color: $green;
 187     border-color: $green;
 188
 189     &:focus {
 190       box-shadow: 0 0 0 0.2rem fade-out($green, 0.5);
 191     }
 192   }
 193 }
 194
 195 nav.secondary {
 196   position: absolute;
 197   right: 0;
 198
 199   .nav-link {
 200     padding: 0.2rem;
 201     color: $darkgrey;
 202   }
 203
 204   > ul li.current a {
 205     color: darken($darkgrey, 25%);
 206   }
 207
 208   .login-menu {
 209     .btn-outline-secondary {
 210       @include button-outline-variant($darkgrey);
 211     }
 212   }
 213
 214   .user-menu {
 215     .btn-outline-secondary {
 216       @include button-outline-variant($darkgrey, $darkgrey, white, $darkgrey);
 217       border-color: $grey;
 218       &:hover {
 219         border-color: $grey;
 220       }
 221       &:focus {
 222         background-color: white;
 223         box-shadow: none;
 224       }
 225     }
 226     &.show .btn-outline-secondary {
 227       background-color: white;
 228       &:focus {
 229         box-shadow: none;
 230       }
 231     }
 232   }
 233
 234   img.user_thumbnail_tiny {
 235     border: 0;
 236     border-radius: 3px;
 237   }
 238
 239   #inboxanchor {
 240     display: inline-block;
 241     height: 25px;
 242     margin: 3px 0 3px 3px;
 243     background-color: lighten($grey, 10%);
 244     line-height: 20px;
 245     border-radius: 3;
 246   }
 247
 248   .dropdown-menu {
 249     .count-number {
 250       font-size: 14px;
 251     }
 252   }
 253 }
 254
 255 nav.primary, nav.secondary {
 256   .dropdown-item {
 257     &:hover, &:active {
 258       background-color: $green;
 259       color: white;
 260     }
 261   }
 262 }
 263
 264 #compact-secondary-nav {
 265   display: none;
 266 }
 267
 268 body.compact-nav {
 269   #compact-secondary-nav {
 270     display: inline-block;
 271   }
 272   .compact-hide {
 273     display: none;
 274   }
 275 }
 276
 277 /* Utility for styling notification numbers */
 278
 279 .count-number {
 280   padding: 2px $lineheight/4;
 281   border-radius: 2px;
 282   background: lighten($green, 30%);
 283   margin: 0 2px;
 284   font-size: 11px;
 285   color: #333;
 286 }
 287
 288 /* Rules for the message shown in place of the map when javascript is disabled */
 289
 290 #noscript {
 291   z-index: 20000000;
 292   margin-left: 400px;
 293   margin-top: 50px;
 294 }
 295
 296 /* Rules for Leaflet maps */
 297
 298 .leaflet-control .control-button {
 299   display: block;
 300   height: 40px;
 301   width: 40px;
 302   background-color: #333;
 303   background-color: rgba(0,0,0,.6);
 304   border-radius: 4px 0 0 4px;
 305   margin-bottom: 10px;
 306   outline: none;
 307
 308   &:hover {
 309     background-color: black;
 310   }
 311
 312   &.disabled,
 313   &.leaflet-disabled {
 314     background-color: #333;
 315     background-color: rgba(0,0,0,.5);
 316     cursor: default;
 317   }
 318
 319   &.active {
 320     background-color: $vibrant-green;
 321   }
 322
 323   .icon {
 324     margin: 10px;
 325   }
 326 }
 327
 328 .leaflet-control .zoomin,
 329 .control-layers .control-button {
 330   margin-bottom: 0px;
 331   border-radius: 4px 0 0 0;
 332 }
 333
 334 .leaflet-control .zoomout,
 335 .control-key .control-button {
 336   margin-bottom: 0;
 337   border-radius: 0;
 338 }
 339
 340 .control-locate .control-button,
 341 .control-share .control-button {
 342   border-radius: 0 0 0 4px;
 343 }
 344
 345 /* Rules for the sidebar and main map area */
 346
 347 .map-layout {
 348   #content {
 349     overflow: hidden;
 350     position: absolute;
 351     top: $headerHeight;
 352     bottom: 0;
 353     width: 100%;
 354   }
 355
 356   #sidebar, #map {
 357     position: relative;
 358     height: 100%;
 359     overflow-x: hidden;
 360     overflow-y: auto;
 361   }
 362
 363   #sidebar {
 364     float: left;
 365     width: $sidebarWidth;
 366     background: #fff;
 367
 368     #sidebar_loader {
 369       display: none;
 370     }
 371
 372     > div {
 373       position: relative;
 374       float: left;
 375       clear: both;
 376       width: 100%;
 377     }
 378
 379     h2 {
 380       padding: $lineheight $lineheight $lineheight/2;
 381       font-size: 1.5rem;
 382     }
 383
 384     h3, h4 {
 385       margin-top: $lineheight;
 386       margin-bottom: $lineheight/2;
 387       font-size: 1.25rem;
 388     }
 389
 390     .close-wrap {
 391       cursor: pointer;
 392       position: absolute;
 393       top: 0;
 394       right: 0;
 395       width: 60px;
 396       height: 60px;
 397
 398       .icon.close {
 399         pointer-events: none;
 400         position: absolute;
 401         right: 20px;
 402         top: 20px;
 403       }
 404     }
 405
 406     .icon.close {
 407       float: right;
 408       cursor: pointer;
 409     }
 410
 411     .flash {
 412       padding: 15px;
 413
 414       picture {
 415         margin-right: -25px;
 416       }
 417
 418       div.message {
 419         margin-left: 30px;
 420       }
 421     }
 422   }
 423
 424   .overlay-sidebar #sidebar {
 425     position: absolute;
 426     z-index: 1000;
 427     height: auto;
 428     overflow: hidden;
 429
 430     #banner {
 431       display: block;
 432     }
 433
 434     .welcome {
 435       display: none;
 436
 437       &.visible {
 438         display: block;
 439       }
 440     }
 441
 442     #sidebar_content {
 443       display: none;
 444     }
 445   }
 446
 447   .welcome {
 448     display: none;
 449
 450     p {
 451       font-size: 110%;
 452       font-weight: 300;
 453     }
 454   }
 455
 456   #banner {
 457     display: none;
 458
 459     img {
 460       display: block;
 461       width: $sidebarWidth;
 462     }
 463   }
 464
 465   #map {
 466     height: 100%;
 467     overflow: hidden;
 468
 469     &.query-active {
 470       cursor: help;
 471     }
 472
 473     &.query-disabled {
 474       cursor: not-allowed;
 475     }
 476
 477     .leaflet-marker-draggable {
 478       cursor: move;
 479     }
 480   }
 481
 482   #map-ui {
 483     display: none;
 484     position: relative;
 485     float: right;
 486     width: 250px;
 487     height: 100%;
 488     background: white;
 489     overflow: auto;
 490
 491     .section {
 492       border-bottom: 1px solid $grey;
 493       padding: 10px 20px;
 494     }
 495
 496     a.close-button {
 497       float: right;
 498       padding:5px;
 499       font-size:20px;
 500       line-height:10px;
 501       color:#222;
 502       border:1px solid $grey;
 503     }
 504
 505     .tooltip {
 506       opacity: 1;
 507       border: 1px solid $grey;
 508       .tooltip-arrow {
 509         border-top-color: $grey;
 510       }
 511     }
 512   }
 513 }
 514
 515 .layers-ui,
 516 .share-ui {
 517   li:last-child {
 518     margin-bottom: 0;
 519   }
 520 }
 521
 522 .layers-ui {
 523   .base-layers {
 524     .leaflet-container {
 525       width: 100%;
 526       height: 50px;
 527       cursor: pointer;
 528     }
 529
 530     li  {
 531       overflow: hidden;
 532       border-radius: 3px;
 533       border: 2px solid #fff;
 534       margin-bottom: 8px;
 535       position: relative;
 536       transition: border-color 0.08s ease-in;
 537
 538       label {
 539         position: absolute;
 540         top: 0;
 541         left: 0;
 542         padding: 2px 6px;
 543         border-bottom-right-radius: 3px;
 544         cursor: pointer;
 545         font-weight: 600;
 546         font-size: 16px;
 547         text-stroke: 2px #fff;
 548         background: rgba(255,255,255,.9);
 549         z-index: 1000;
 550         input[type="radio"] {
 551           display: none;
 552         }
 553       }
 554
 555       &.active { border-color: darken($green, 10%); }
 556       &:hover {
 557         border-color: $grey;
 558         &.active { border-color: darken($green, 20%); }
 559       }
 560     }
 561   }
 562
 563   .overlay-layers {
 564     p {
 565       font-size: 13px;
 566       margin-bottom: 8px;
 567     }
 568     li.disabled { color: $darkgrey; }
 569   }
 570 }
 571
 572 .share-ui {
 573   .share-tabs {
 574     margin-bottom: 10px;
 575
 576     a {
 577       color: #fff;
 578       text-decoration: none;
 579       background-color: $lightblue;
 580       padding: 5px 10px;
 581       border-right: 1px solid #fff;
 582     }
 583
 584     a:first-child {
 585       border-right: 1px solid #fff;
 586       border-radius: 4px 0 0 4px;
 587     }
 588
 589     a:last-child {
 590       border-radius: 0 4px 4px 0;
 591     }
 592
 593     a.active {
 594       background-color: $blue;
 595     }
 596   }
 597
 598   .share-tab {
 599     display: none;
 600   }
 601
 602   .share-link {
 603     input[type=text],
 604     textarea {
 605       width: 100%;
 606       font-family: monospace;
 607       font-size: small;
 608       line-height: 1.3;
 609     }
 610   }
 611
 612   .share-image {
 613     label {
 614       margin-right: 10px;
 615     }
 616   }
 617
 618   #embed_html {
 619     resize: vertical;
 620   }
 621
 622   #mapnik_scale {
 623     width: 100px;
 624   }
 625 }
 626
 627 .leaflet-top {
 628   top: $lineheight/2 !important;
 629   .leaflet-control {
 630     margin-right: 0px !important;
 631     margin-top: 0px !important;
 632   }
 633 }
 634
 635 .leaflet-popup-scrolled {
 636   padding-right: $lineheight;
 637   border-bottom: 0px !important;
 638   border-top: 0px !important;
 639 }
 640
 641 .leaflet-popup-content-wrapper {
 642   border-radius: 4px !important;
 643 }
 644
 645 /* Rules for attribution text under the main map shown on printouts */
 646
 647 #attribution {
 648   display: none;
 649
 650   table {
 651     width: 100%
 652   }
 653 }
 654
 655 .attribution_license,
 656 .attribution_project {
 657   text-align: left;
 658 }
 659
 660 .attribution_notice {
 661   text-align: center;
 662 }
 663
 664 .donate-attr { color: darken($green, 10%) !important; }
 665
 666 /* Rules for the sidebar */
 667
 668 .sidebar_heading {
 669   position: relative;
 670   padding: $lineheight/2 $lineheight;
 671   // background: $offwhite;
 672   // border-bottom: 1px solid $grey;
 673   > .close {
 674     float: right;
 675     margin-top: 2px;
 676     cursor: pointer;
 677   }
 678 }
 679
 680 #browse_status {
 681   input {
 682     display: block;
 683     margin-left: auto;
 684     margin-right: auto;
 685   }
 686 }
 687
 688 #sidebar {
 689   #sidebar_loader,
 690   .search_more {
 691     width: 100%;
 692     margin: $lineheight auto;
 693   }
 694
 695   .loader {
 696     text-align: center;
 697     margin: auto;
 698     width: 40px;
 699     display: block;
 700   }
 701 }
 702
 703 /* Temporary label size override until we remove site-wide font customisation */
 704
 705 form {
 706   label {
 707     font-size: 16px;
 708   }
 709 }
 710
 711 /* Rules for the search and direction forms */
 712
 713 header .search_forms,
 714 .directions_form {
 715   display: none;
 716 }
 717
 718 /* Rules for the map key which appears in the popout sidebar */
 719
 720 #mapkey {
 721  .mapkey-table-key img {
 722     display: block;
 723     margin-left: auto;
 724     margin-right: auto;
 725   }
 726 }
 727
 728 /* Rules for search sidebar */
 729
 730 #sidebar .search_results_entry {
 731   ul li {
 732     cursor: pointer;
 733     &.selected { background: $list-highlight; }
 734   }
 735
 736   .search_more .loader {
 737     display: none;
 738     width: 100%;
 739   }
 740 }
 741
 742 .search_results_error {
 743   color: #f00;
 744   padding: 10px 20px;
 745 }
 746
 747 /* Rules for routing */
 748
 749 #sidebar_content>table {
 750     padding: 5px 20px 10px 15px;
 751     width: 100%;
 752     border-collapse: separate;
 753     border-spacing: 0;
 754 }
 755
 756 div.direction {
 757   background-image: image-url('routing-sprite.png');
 758   width: 20px;
 759   height: 20px;
 760   background-repeat: no-repeat;
 761 }
 762 @for $i from 0 through 25 {
 763 div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
 764 }
 765
 766 p#routing_summary {
 767     padding: 0 $lineheight $lineheight/4;
 768 }
 769
 770 td.instruction, td.distance {
 771     padding-top: $lineheight/5;
 772     padding-bottom: $lineheight/5;
 773     border-bottom: 1px solid $grey;
 774 }
 775 td.distance {
 776     color: $darkgrey;
 777     text-align: right;
 778     font-size: x-small;
 779 }
 780 tr.turn {
 781     cursor: pointer;
 782 }
 783 tr.turn:hover {
 784     background: $list-highlight;
 785 }
 786
 787 .routing_marker { width: 15px; cursor: move; }
 788
 789 /* Rules for entity history */
 790
 791 #sidebar_content {
 792   .browse_details {
 793     position: relative;
 794     border-bottom: $keyline;
 795   }
 796 }
 797
 798 .browse_status {
 799   display: none;
 800 }
 801
 802 /* Rules for the history sidebar */
 803
 804 #sidebar .changesets {
 805   li {
 806     cursor: pointer;
 807
 808     &.selected { background: $list-highlight; }
 809     /* color is derived from changeset bbox fillColor in history.js */
 810   }
 811
 812   .comments {
 813     float: right;
 814     color: $darkgrey;
 815   }
 816
 817   .comments-0 {
 818     opacity: 0.5;
 819   }
 820
 821   .changeset_more .loader {
 822     display: none;
 823     width: 100%;
 824   }
 825 }
 826
 827 /* Rules for the browse sidebar */
 828
 829 #sidebar_content {
 830   .browse-section {
 831     padding: $lineheight/2 $lineheight;
 832     border-bottom: 1px solid $grey;
 833
 834     h4:first-child {
 835       margin-top: 0;
 836       word-wrap: break-word;
 837     }
 838   }
 839
 840   .browse-section:last-of-type {
 841     border-bottom: none;
 842   }
 843
 844   .paginate {
 845     float: right;
 846     padding: 1px 6px;
 847     border: 1px solid $lightgrey;
 848     border-radius: 3px;
 849   }
 850
 851   .browse-field {
 852     margin-bottom: 10px;
 853
 854     h4 {
 855       padding: 5px 0 5px 10px;
 856       font-size: 12px;
 857       border: 1px solid $grey;
 858       border-radius: 4px 4px 0 0;
 859       background-color: $offwhite;
 860     }
 861
 862     p {
 863       padding: 7px 10px;
 864       font-size: 12px;
 865       background-color: #FFF;
 866       border: 1px solid $grey;
 867       border-top: 0;
 868       border-radius: 0 0 4px 4px;
 869     }
 870   }
 871
 872   .browse-tag-list {
 873     background-color: $offwhite;
 874     border: 1px solid $grey;
 875     border-radius: 3px;
 876     table-layout: fixed;
 877     border-collapse: separate;
 878     border-spacing: 0;
 879     width: 100%;
 880
 881     th, td {
 882       border-bottom: 1px solid $grey;
 883     }
 884
 885     tr:last-child th, tr:last-child td {
 886       border-bottom: 0;
 887     }
 888
 889     .browse-tag-k,
 890     .browse-tag-v {
 891       width: 50%;
 892       padding: 6px 10px;
 893       word-wrap: break-word;
 894       white-space: pre-wrap;
 895     }
 896
 897     .browse-tag-k {
 898       font-weight: 500;
 899       background-color: $offwhite;
 900     }
 901
 902     .browse-tag-v {
 903       border-left: 1px solid $grey;
 904       background-color: #fff;
 905     }
 906
 907     .colour-preview-box {
 908       float: right;
 909       width: 14px;
 910       height: 14px;
 911       margin: 4px 0px;
 912       border: 1px solid rgba(0, 0, 0, .1);
 913       // add color via inline css on element: background-color: <tag value>;
 914     }
 915   }
 916
 917   .note-comments li, .changeset-comments li {
 918     margin: $lineheight/2 0;
 919
 920     p {
 921       margin: 10px 6px 0 6px;
 922       line-height: 1.5;
 923     }
 924   }
 925
 926   .comments-header {
 927     float: left;
 928   }
 929
 930   .subscribe-buttons {
 931     float: left;
 932     margin: 18px 10px 10px;
 933     min-width: 80px;
 934   }
 935
 936   .subscribe-buttons input {
 937     font-size: 90%;
 938     line-height: 15px;
 939     min-height: 20px;
 940   }
 941
 942   span.action-button:hover {
 943     cursor: pointer;
 944     text-decoration: underline;
 945   }
 946
 947   .note-description {
 948     overflow: hidden;
 949     margin: 0 0 10px 10px;
 950   }
 951
 952   .query-intro p {
 953     padding: $lineheight $lineheight $lineheight/2;
 954   }
 955
 956   .query-results {
 957     display: none;
 958     padding-bottom: $lineheight/2;
 959
 960     h3 {
 961       padding: 0 $lineheight;
 962     }
 963
 964     ul {
 965       li {
 966         &.query-result {
 967           cursor: pointer;
 968         }
 969
 970         &.selected {
 971           background: $list-highlight;
 972         }
 973       }
 974     }
 975   }
 976 }
 977
 978 /* Bootstrap buttons don't have any vertical margin, so
 979    they touch when adjacent buttons wrap onto a new line
 980    e.g. wide form buttons on a narrow sidebar */
 981
 982 .btn-wrapper {
 983   > .btn {
 984     margin-bottom: $spacer * 0.25;
 985   }
 986 }
 987
 988 /* Rules for export sidebar */
 989
 990 .export_form {
 991   padding: $lineheight;
 992
 993   .export_area_inputs,
 994   .export_button {
 995     text-align: center;
 996   }
 997
 998   .export_area_inputs {
 999     margin-bottom: $lineheight/2;
1000     input[type="text"] {
1001       width: 100px;
1002       text-align: center;
1003     }
1004   }
1005
1006   .export_boxy {
1007     background: $lightgrey;
1008     border: 1px solid $grey;
1009     border-radius: 3px;
1010
1011     #maxlat { margin-top: -1px; }
1012     #minlon {
1013       float: left;
1014       /* no-r2 */ margin-left: -1px;
1015     }
1016     #maxlon {
1017       float: right;
1018       /* no-r2 */ margin-right: -1px;
1019     }
1020     #minlat { margin-bottom: -1px; }
1021   }
1022
1023   .export_bound {
1024     margin: $lineheight/4;
1025   }
1026
1027   dl {
1028     padding-left: $lineheight/2;
1029     dd {
1030       margin-left: 0;
1031       margin-bottom: 10px;
1032     }
1033   }
1034 }
1035
1036 /* Rules for the routing sidebar */
1037
1038 #sidebar_content {
1039   #routing_credit {
1040     text-align: center;
1041     padding: 0.5em;
1042   }
1043 }
1044
1045 /* Rules for edit pages */
1046
1047 .site-edit {
1048   #content {
1049     position: absolute;
1050     top: $headerHeight;
1051     bottom: 0;
1052     width: 100%;
1053   }
1054
1055   #map {
1056     height: 100%;
1057     overflow: hidden;
1058   }
1059 }
1060
1061 /* Rules for non-map content pages */
1062
1063 .content-heading {
1064   background: $lightgrey;
1065 }
1066
1067 .content-inner {
1068   position: relative;
1069   max-width: 900px;
1070   margin: auto;
1071   padding: $lineheight;
1072 }
1073
1074 /* Overrides for pages that use new layout conventions */
1075
1076 .users-new,
1077 .users-create,
1078 .users-terms,
1079 .users-confirm {
1080   .content-heading .content-inner {
1081     height: 200px;
1082   }
1083 }
1084
1085 .header-illustration {
1086   background-position: 0 0;
1087   background-repeat: no-repeat;
1088   position: absolute;
1089   height: 200px;
1090   width: 100%;
1091   left: 0;
1092   bottom: 0;
1093
1094   &.new-user-main {
1095     background-image: image-url("sign-up-illustration.png");
1096   }
1097
1098   &.confirm-main {
1099     background-image: image-url("confirm-illustration.png");
1100   }
1101
1102   &.new-user-terms {
1103     background-image: image-url("terms-illustration.png");
1104   }
1105
1106   &.new-user-arm {
1107     height: 110px;
1108     width: 130px;
1109     left: 260px;
1110     top: 160px;
1111     background-image: image-url("sign-up-illustration-arm.png");
1112     z-index: 100;
1113   }
1114 }
1115
1116 [dir=rtl] .header-illustration {
1117   transform: scaleX(-1);
1118 }
1119
1120 #content.maximised {
1121   top: 0;
1122   left: 0;
1123   right: 0;
1124   bottom: 0;
1125   border: 0;
1126   z-index: 2000;
1127 }
1128
1129 /* Rules for small maps in content areas */
1130
1131 .content_map {
1132   height: 200px;
1133   border: 1px solid $grey;
1134   margin-bottom: $lineheight;
1135 }
1136
1137 @include media-breakpoint-up(md) {
1138   .content_map {
1139     height: 400px;
1140   }
1141 }
1142
1143 /* Rules for the user profile page */
1144
1145 #userinformation {
1146   min-height: 100px;
1147   .userinformation-inner {
1148     float: left;
1149   }
1150   .user-description {
1151     width: 100%;
1152     clear: both;
1153   }
1154 }
1155
1156 .admin-user-info small {
1157   margin-bottom: $lineheight/2;
1158   display: inline;
1159   margin-right: $lineheight;
1160 }
1161
1162 .contact-activity {
1163   margin-top: $lineheight;
1164   width: 100%;
1165 }
1166
1167 .activity-details p {
1168   margin-left: 70px;
1169   margin-bottom: 0;
1170 }
1171
1172 .users-show {
1173   // Silly exception; remove when user page is redesigned.
1174   .content-inner {
1175     max-width: none;
1176   }
1177   p#no_home_location {
1178     margin: $lineheight;
1179   }
1180   .user_thumbnail {
1181     margin-top: $lineheight/4;
1182     float: left;
1183   }
1184 }
1185
1186 /* Rules for the user map */
1187
1188 .content_map .leaflet-popup-content {
1189   margin: $lineheight/2;
1190   min-height: 50px;
1191 }
1192
1193 /* Rules for user popups on maps */
1194
1195 .user_popup {
1196   min-width: 200px;
1197   p {
1198     padding: 0 0 5px 0;
1199     margin-top: 0 0 0 60px;
1200     font-size: 12px;
1201   }
1202   img.user_thumbnail {
1203     float: left;
1204     margin: 0 $lineheight/2 0 0;
1205   }
1206 }
1207
1208 /* Rules for the user list */
1209
1210 #user_list {
1211   width: 100%;
1212
1213   tr {
1214     vertical-align: middle;
1215   }
1216
1217   p {
1218     margin-top: 0px;
1219     margin-bottom: 0px;
1220   }
1221 }
1222
1223 #user_list_actions {
1224   float: right;
1225   margin-top: $lineheight/2;
1226 }
1227
1228 /* Rules for the diary list page */
1229
1230 .diary_post {
1231   position: relative;
1232   padding-top: $lineheight;
1233   padding-bottom: $lineheight/2;
1234   border-top: 1px solid $grey;
1235
1236   &:first-of-type {
1237     margin-top: $lineheight/2;
1238   }
1239
1240   &.deleted {
1241     background-color: #fee;
1242   }
1243
1244   .post_heading {
1245     margin-bottom: $lineheight;
1246
1247     h2 {
1248       margin-top: 0;
1249       margin-bottom: $lineheight/2;
1250     }
1251   }
1252
1253   img.user_thumbnail {
1254     float: left;
1255   }
1256
1257   small.deemphasize {
1258     float: left;
1259     display: block;
1260   }
1261 }
1262
1263 /* Rules for the diary entry page */
1264
1265 .diary_entries {
1266   #map {
1267     height: 400px;
1268     border: 1px solid $grey;
1269     display: none;
1270     margin-bottom: $lineheight;
1271   }
1272   .comments {
1273     max-width: 740px;
1274   }
1275   .diary-comment {
1276     border-top: 1px dashed $grey;
1277     padding-top: $lineheight/2;
1278     padding-bottom: $lineheight/2;
1279     &:first-child {
1280       margin-top: $lineheight/2;
1281       padding-top: $lineheight;
1282       border-top: 1px solid $grey;
1283     }
1284     &.deleted {
1285       background-color: #fee;
1286     }
1287     p {
1288       margin-bottom: $lineheight/2;
1289     }
1290     .comment-heading {
1291       margin-bottom: 0;
1292       margin-top: 0;
1293     }
1294   }
1295 }
1296
1297 .diary_entries-show img.user_thumbnail {
1298   float: left;
1299 }
1300
1301 /* Rules for the log in page */
1302
1303 #login_auth_buttons {
1304   margin-bottom: 0;
1305
1306   li {
1307     float: left;
1308     padding: $lineheight/4 $lineheight/2;
1309   }
1310 }
1311
1312 /* Rules for the account confirmation page */
1313
1314 .users-terms {
1315   .legale {
1316     border: 1px solid $grey;
1317     padding: $lineheight;
1318     margin-bottom: $lineheight;
1319     overflow: auto;
1320     height: 20em;
1321
1322     li {
1323       list-style: inherit;
1324     }
1325
1326     ol ol {
1327       list-style-type: lower-alpha;
1328     }
1329   }
1330 }
1331
1332 /* Rules for the account settings page */
1333
1334 #accountForm .user_image {
1335   margin-bottom: 0;
1336 }
1337
1338 #accountForm #user_image {
1339   margin-left: 20px;
1340 }
1341
1342 #accountForm ul.accountImage-options {
1343   margin-left: 120px;
1344 }
1345
1346 .nohome .location {
1347   display: none;
1348 }
1349
1350 #homerow .message {
1351   display: none;
1352 }
1353
1354 .nohome .message {
1355   display: inline !important;
1356 }
1357
1358 /* Rules for the oauth settings page */
1359
1360 .oauth_clients .buttons .oauth-edit {
1361   border-radius: 2px 0 0 2px;
1362 }
1363
1364 .oauth_clients .buttons .oauth-delete {
1365   border-radius: 0 2px 2px 0;
1366 }
1367
1368 /* Rules for the oauth authorization page */
1369
1370 .oauth-authorize ul {
1371   list-style: none;
1372 }
1373
1374 /* Rules for messages pages */
1375
1376 .messages {
1377   input[type="submit"] {
1378     margin: auto;
1379   }
1380
1381   .inbox-row {
1382     background: $offwhite;
1383   }
1384
1385   .inbox-row-unread {
1386     background: #CBEEA7;
1387   }
1388
1389   .right {
1390     float: right;
1391   }
1392 }
1393
1394 .inbox-row .inbox-mark-read {
1395   display: none;
1396 }
1397
1398 .info-line {
1399   margin-bottom: $lineheight;
1400   padding: $lineheight/4 0px 4px 0px;
1401   border-bottom: 1px solid $grey;
1402
1403   form, form div {
1404     display: inline;
1405   }
1406 }
1407
1408 .info-line .user_thumbnail_tiny {
1409   vertical-align: middle;
1410 }
1411
1412 .inbox-sent {
1413   white-space: nowrap;
1414 }
1415
1416 .inbox-mark-unread,
1417 .inbox-mark-read,
1418 .inbox-delete {
1419   width: 1%;
1420 }
1421
1422 .inbox-row-unread .inbox-mark-unread {
1423   display: none;
1424 }
1425
1426 /* Rules for "flash" notice boxes shown at the top of the content area */
1427
1428 .flash {
1429   padding: $lineheight;
1430
1431   &.error {
1432     background-color: #ff7070;
1433   }
1434
1435   &.warning {
1436     background-color: #ffe0cc;
1437   }
1438
1439   &.notice {
1440     background-color: #CBEEA7;
1441   }
1442
1443   div.message {
1444     display: inline-block;
1445     margin-left: $lineheight / 2;
1446     vertical-align: middle;
1447
1448     p {
1449       margin-top: $lineheight * 0.5;
1450       margin-bottom: $lineheight * 0.5;
1451
1452       &:first-child {
1453         margin-top: 0px;
1454       }
1455
1456       &:last-child {
1457         margin-bottom: 0px;
1458       }
1459     }
1460   }
1461 }
1462
1463 /* Rules for highlighting fields with rails validation errors */
1464
1465 .formError {
1466   display: inline-block;
1467   padding: 5px 10px;
1468   margin-top: 5px;
1469   border-radius: 4px;
1470   font-size: 12px;
1471   color: #fff;
1472   background-color: #ff7070;
1473 }
1474
1475 /* Rules for rails validation error boxes */
1476
1477 #errorExplanation {
1478   width: 400px;
1479   border: 2px solid #ff7070;
1480   padding: 0 $lineheight/2;
1481   margin-bottom: $lineheight;
1482   background-color: #f0f0f0;
1483
1484   h2 {
1485     margin: 0 -10px 10px -10px;
1486     padding: $lineheight/4 $lineheight/4 $lineheight/4 15px;
1487     font-weight: bold;
1488     font-size: 12px;
1489     background-color: #c00;
1490     color: #fff;
1491     text-align: left;
1492   }
1493
1494   p {
1495     color: #333;
1496     margin-bottom: 0px;
1497     padding: $lineheight/4;
1498   }
1499 }
1500
1501 .search_form {
1502   background-color: $lightgrey;
1503
1504   .describe_location {
1505     top: 6px;
1506     right: 6px;
1507     font-size: 10px;
1508     color: $blue;
1509   }
1510 }
1511
1512 .directions_form {
1513   background-color: $lightgrey;
1514
1515   .loader_copy {
1516     display: none;
1517
1518     img {
1519       vertical-align: middle;
1520     }
1521   }
1522
1523   a.reverse_directions {
1524     cursor: pointer;
1525   }
1526 }
1527
1528 /* Rules for user images */
1529
1530 img.user_image {
1531   max-width: 100px;
1532   max-height: 100px;
1533   border: 1px solid $grey;
1534   margin-bottom: $lineheight;
1535   float: left;
1536   margin-right: $lineheight;
1537 }
1538
1539 img.user_thumbnail {
1540   max-width: 50px;
1541   max-height: 50px;
1542   border: 1px solid $grey;
1543   margin-right: $lineheight;
1544 }
1545
1546 img.user_thumbnail_tiny {
1547   width: auto;
1548   height: auto;
1549   max-width: 25px;
1550   max-height: 25px;
1551   border: 1px solid $grey;
1552 }
1553
1554 /* Rules for geo microformats */
1555
1556 abbr.geo {
1557   border-bottom: none;
1558 }
1559
1560 /* General styles for action lists / subnavs / pager navs */
1561
1562 ul.secondary-actions {
1563   font-style: normal;
1564   margin-bottom: 0;
1565   margin-left: 0;
1566   padding: 0;
1567   &.pager {
1568     display: inline-block;
1569     margin-right: 60px;
1570   }
1571   > li {
1572     display: block;
1573     float: left;
1574     list-style: none;
1575     border-left: 1px solid $grey;
1576     padding-left: $lineheight/2;
1577     margin-right: $lineheight/2;
1578     &:first-child {
1579       border-left: 0;
1580       padding-left: 0;
1581     }
1582     &:last-child {
1583       margin-right: 0px;
1584     }
1585   }
1586 }
1587
1588 div.secondary-actions {
1589   padding: 10px;
1590   text-align: center;
1591 }
1592
1593 /* Utility for managing inner content areas */
1594
1595 .inner22 { padding: $lineheight;}
1596
1597 .inner12 { padding: $lineheight/2 $lineheight;}
1598
1599 .inner11 { padding: $lineheight/2;}
1600
1601 .inner20 { padding: $lineheight 0;}
1602
1603 .inner02 { padding: 0 $lineheight;}
1604
1605 .buttons {
1606   min-width: 200px;
1607   input[type="submit"],
1608   input[type="button"],
1609   input[type="reset"],
1610   .button,
1611   .button_to {
1612     box-sizing: border-box;
1613     float: left;
1614     border-radius: 0;
1615     margin:0;
1616     min-width: 75px;
1617     max-width: 180px;
1618     border-right:1px solid white;
1619     text-overflow: ellipsis;
1620     white-space: nowrap;
1621     overflow: hidden;
1622   }
1623   input:first-child,
1624   .button:first-child,
1625   .button_to:first-child {
1626     border-radius:2px 0 0 2px;
1627   }
1628   input:last-child,
1629   .button:last-child,
1630   .button_to:last-child {
1631     border-radius:0 2px 2px 0;
1632     border-right-width: 0;
1633   }
1634   input:only-child,
1635   .button:only-child,
1636   .button_to:only-child,
1637   *[value="Hide"] + input:last-child,
1638   *[value="Hide"] + .button:last-child,
1639   *[value="Hide"] + .button_to:last-child {
1640     border-radius:2px;
1641     border-right-width: 0;
1642   }
1643     /* if a 3-button set has a hidden middle button */
1644   *[value="Hide"] + input:nth-child(3),
1645   *[value="Hide"] + .button:nth-child(3),
1646   *[value="Hide"] + .button_to:nth-child(3) {
1647     border-radius:0 2px 2px 0;
1648     border-right-width: 0;
1649   }
1650   /* if a 3-button set starts with a hidden button */
1651   *[value="Hide"] + input:nth-child(2):not(:last-child),
1652   *[value="Hide"] + .button:nth-child(2):not(:last-child),
1653   *[value="Hide"] + .button_to:nth-child(2):not(:last-child) {
1654     border-radius:2px 0 0 2px;
1655     border-right-width: 1px;
1656   }
1657 }
1658
1659 /* Customise the background colour of striped tables */
1660
1661 .table-striped > tbody > tr:nth-child(2n+1) > td,
1662 .table-striped > tbody > tr:nth-child(2n+1) > th {
1663    background-color: $offwhite;
1664 }
1665
1666 /* Rules for OpenID logo */
1667
1668 .openid_logo {
1669   vertical-align: text-bottom;
1670   border: 0;
1671 }
1672
1673 /* Rules for rich text */
1674
1675 .richtext,
1676 .prose {
1677   code {
1678     font-size: 13px;
1679     background: $lightgrey;
1680     padding: 2px 3px;
1681   }
1682
1683   pre {
1684     font-size: 13px;
1685     background: $lightgrey;
1686     padding: 2px 3px;
1687     white-space: pre-wrap;
1688
1689     code {
1690       padding: 0;
1691     }
1692   }
1693
1694   img {
1695     padding: $lineheight;
1696     background-color: $offwhite;
1697     display: block;
1698     max-width: 100%;
1699     margin: auto;
1700   }
1701
1702   blockquote {
1703     border-left: $lineheight solid $offwhite;
1704     padding-left: $lineheight;
1705     margin: 0;
1706     color: $darkgrey;
1707   }
1708 }
1709
1710 .diary_post .richtext {
1711     margin-top: $lineheight;
1712   }
1713
1714 .comments .richtext {
1715   margin-left: 70px;
1716   margin-top: 0;
1717 }
1718
1719 /* Rules for the user notes list */
1720
1721 .note_list {
1722   tr.creator {
1723     background-color: $offwhite;
1724   }
1725 }
1726
1727 /* Rules for the iD editor */
1728
1729 .id-embed {
1730   width: 100%;
1731   height: 100%;
1732 }
1733
1734 /* Rules for the "Welcome" page */
1735 .site-welcome, .site-fixthemap {
1736   .center {
1737     text-align: center;
1738     .sprite {
1739       float: none;
1740       margin: auto;
1741     }
1742   }
1743
1744   .sprite {
1745     background-image: image-url("welcome-sprite.png");
1746     background-size: 500px 250px;
1747     display: block;
1748     float: left;
1749   }
1750
1751   .icon-list {
1752     padding-bottom: 20px;
1753     div {
1754       margin-bottom: 10px;
1755       p {
1756         padding-top: 10px;
1757       }
1758     }
1759   }
1760   .sprite.small {
1761     width: 50px;
1762     height: 50px;
1763   }
1764
1765   .sprite.x {
1766     /* no-r2 */ background-position: -50px 0;
1767   }
1768
1769   .sprite.term {
1770     margin-right: 10px;
1771     vertical-align: middle;
1772   }
1773
1774   .sprite.node {
1775     /* no-r2 */ background-position: -100px 0;
1776   }
1777
1778   .sprite.way {
1779     /* no-r2 */ background-position: -150px 0;
1780   }
1781
1782   .sprite.tag {
1783     /* no-r2 */ background-position: -200px 0;
1784   }
1785
1786   .sprite.editor {
1787     /* no-r2 */ background-position: -250px 0;
1788   }
1789
1790   .sprite.question {
1791     /* no-r2 */ background-position: -300px 0;
1792   }
1793
1794   .sprite.rules {
1795     /* no-r2 */ background-position: -350px 0;
1796   }
1797
1798   .start-mapping {
1799     margin: auto;
1800     cursor: pointer;
1801     border: none;
1802     padding: 20px 40px;
1803     font-size: 30px;
1804     text-decoration: none;
1805   }
1806
1807   .icon.note {
1808     background-color: #333;
1809     border-radius: 4px;
1810   }
1811 }
1812
1813 .site-about #content {
1814   background-color: $lightgrey;
1815   background-position: 50% 50%;
1816   background-repeat: no-repeat;
1817   background-size: cover;
1818   background-attachment: fixed;
1819
1820
1821   .content-inner {
1822     position: relative;
1823     color: #333;
1824     min-width: 320px;
1825     max-width: 640px;
1826   }
1827
1828   .text {
1829     background: white;
1830     padding: 40px;
1831   }
1832
1833   .attr {
1834     position: relative;
1835     padding: 170px 40px 20px;
1836     background: #333;
1837     background: rgba(0, 0, 0, .8);
1838     margin-bottom: 0;
1839     margin-top: -20px;
1840
1841     h1 {
1842       display: block;
1843       color: white;
1844       font-weight: 300;
1845       font-size: 28px;
1846       span {
1847         color: $vibrant-green;
1848       }
1849     }
1850
1851     @include media-breakpoint-up(sm) {
1852       h1 {
1853         font-size: 34px;
1854       }
1855     }
1856
1857     .user-image {
1858       position: absolute;
1859       top: 0px;
1860       right: 240px;
1861       left: 0px;
1862       height: 150px;
1863       background-position: 0 50%;
1864       background-repeat: no-repeat;
1865       background-image: image-url('about/osm.png');
1866       background-size: cover;
1867       background-color: $vibrant-green;
1868     }
1869
1870     .byosm {
1871       position: absolute;
1872       top: 0px;
1873       right: 0px;
1874       z-index: 1;
1875       width: 240px;
1876       height: 150px;
1877       padding: 20px 20px 20px 40px;
1878       font: 500 20px/24px Helvetica, Arial, sans-serif;
1879       white-space: nowrap;
1880       color: #fff;
1881       background: $vibrant-green;
1882     }
1883
1884     .byosm span {
1885       display: inline-block;
1886       width: 20px;
1887       margin-left: -20px;
1888     }
1889   }
1890
1891   .icon {
1892     width: 30px;
1893     height: 30px;
1894     margin-right: 10px;
1895     vertical-align: middle;
1896     background: 40px 40px image-url('about/sprite.png') no-repeat;
1897
1898     &.local {
1899       /* no-r2 */
1900       background-position: 0px 0px;
1901     }
1902     &.community {
1903       /* no-r2 */
1904       background-position: 0px -40px;
1905     }
1906     &.open {
1907       /* no-r2 */
1908       background-position: 0px -80px;
1909     }
1910     &.partners {
1911       /* no-r2 */
1912       background-position: 0px -120px;
1913     }
1914     &.infringement {
1915       /* no-r2 */
1916       background-position: 0px -160px;
1917     }
1918     &.legal {
1919       /* no-r2 */
1920       background-position: -45px -160px;
1921     }
1922   }
1923 }
1924
1925 @import 'browse';
1926
1927 @media only screen and (max-width:960px) {
1928   .header-illustration.new-user-arm {
1929     display: none;
1930   }
1931 }