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