app/assets/stylesheets/common.css.scss

   1 /* Styles common to large and small screens */
   2
   3 /* Default rules for the body of every page */
   4
   5 body {
   6   font-family: 'Helvetica Neue',Arial,sans-serif;
   7   font-size: 14px;
   8   line-height: 20px;
   9   color: #222;
  10   background-color: #fff;
  11   margin: 0px;
  12   padding: 0px;
  13 }
  14
  15 body.slim {
  16   background-color: #f0f0f0;
  17 }
  18
  19 /* Rules for links */
  20
  21 a {
  22   color: #00f;
  23   text-decoration: none;
  24 }
  25
  26 a:hover {
  27   text-decoration: underline;
  28 }
  29
  30 /* Rules for horizontal lines */
  31
  32 hr {
  33   border: none;
  34   background-color: #ccc;
  35   color: #ccc;
  36   height: 1px;
  37 }
  38
  39 /* Default rules for headings */
  40
  41 h2 {
  42   margin: 5px 0;
  43   font-size: 25px;
  44   line-height: 30px;
  45 }
  46
  47 /* Rules for the whole left sidebar, including the logo */
  48
  49 #left {
  50   position: absolute;
  51   top: 0px;
  52   width: 185px;
  53   font-size: 11px;
  54   line-height: 12px;
  55 }
  56
  57 /* Rules for the OpenStreetMap logo in the top left corner */
  58
  59 #logo {
  60   width: 170px;
  61   min-width: 170px;
  62   padding: 5px;
  63   text-align: center;
  64   margin: 25px 0 5px 0;
  65 }
  66
  67 #logo h1 {
  68   font-size: 18px;
  69   line-height: 20px;
  70   text-align: center;
  71   margin: 0px;
  72 }
  73
  74 #logo h2 {
  75   font-size: 10px;
  76   line-height: 15px;
  77   margin: 0px;
  78 }
  79
  80 /* Rules for the site name */
  81
  82 #small-title {
  83   display: none;
  84 }
  85
  86 /* Rules for the introductory text displayed in the left sidebar to new users */
  87
  88 #intro {
  89   border-top: 1px solid #ccc;
  90 }
  91
  92 #intro p {
  93   margin: 5px;
  94 }
  95
  96 /*
  97  * Rules for alert boxes shown in the left sidebar when important
  98  * information needs to be conveyed such as when the site is
  99  * undergoing maintenance.
 100  */
 101
 102 #alert {
 103   width: 170px;
 104   margin: 5px;
 105   padding: 5px;
 106   border: 1px solid #ccc;
 107   background: #d00;
 108   line-height: 1.2em;
 109   font-size: 14px;
 110   border-radius: 5px;
 111   -moz-border-radius: 5px;
 112 }
 113
 114 /*
 115  * Rules for notice boxes shown in the left sidebar when important, but
 116  * non-critical information needs to be conveyed such as notices about
 117  * donation drives.
 118  */
 119
 120 .notice {
 121   width: 170px;
 122   margin: 5px;
 123   padding: 5px;
 124   border: 1px solid #ccc;
 125   background: #ea0;
 126   line-height: 20px;
 127   font-size: 14px;
 128   border-radius: 5px;
 129   -moz-border-radius: 5px;
 130 }
 131
 132 /* Rules for the menu displayed in the left sidebar */
 133
 134 .left_menu {
 135   padding: 5px;
 136   margin: 4px 0;
 137   border-top: 1px solid #ccc;
 138   border-bottom: 1px solid #ccc;
 139   line-height: 20px;
 140   font-size: 14px;
 141   font-weight: bold;
 142 }
 143
 144 .left_menu h1 {
 145   font-style: normal;
 146   font-size: 15px;
 147 }
 148
 149 .left_menu ul {
 150   margin: 0px;
 151   list-style-type: none;
 152 }
 153
 154 .left_menu li {
 155   margin: 0px;
 156   padding: 0px;
 157 }
 158
 159 .left_menu a {
 160   color: #000;
 161 }
 162
 163 /* Rules for SOTM advert */
 164
 165 #sotm {
 166   width: 180px;
 167   min-width: 180px;
 168   margin: 5px;
 169   padding: 0px;
 170   border: 0px;
 171   background: #fff;
 172 }
 173
 174 /*
 175  * Rules for "optional boxes" which appear in the left sidebar on
 176  * certain pages. Current users are the seach box on the main page
 177  * and the tag cloud on the traces pages.
 178  */
 179
 180 .optionalbox {
 181   padding: 5px;
 182   margin: 4px 0;
 183   border-top: 1px solid #ccc;
 184 }
 185
 186 .optionalbox h1 {
 187   font-size: 14px;
 188   font-weight: bold;
 189   line-height: 20px;
 190   margin: 0px;
 191   vertical-align: bottom;
 192 }
 193
 194 /* Rules for the search box */
 195
 196 .whereami {
 197   line-height: 20px;
 198   vertical-align: bottom;
 199 }
 200
 201 .search_container {
 202   height: 15px;
 203   padding-bottom: 5px;
 204 }
 205
 206 #search_field form {
 207   width: 100%;
 208   margin: 0px;
 209   padding: 0px;
 210 }
 211
 212 #search_field input[type="text"] {
 213   width: 136px;
 214 }
 215
 216 #search_field input[type="submit"] {
 217   width: 26px;
 218   padding-left: 0px;
 219   padding-right: 0px;
 220 }
 221
 222 .search_help {
 223   margin-top: 2px;
 224   margin-bottom: 0px;
 225 }
 226
 227 /* Rules for donation request box */
 228
 229 .donate {
 230   width: 155px;
 231   margin: 10px 5px;
 232   padding: 5px;
 233   border: 1px solid #ccc;
 234   background: #cbeea7;
 235   line-height: 20px;
 236   text-align: center;
 237   font-size: 14px;
 238   border-radius: 5px;
 239   -moz-border-radius: 5px;
 240 }
 241
 242 /* Rules for Creative Commons logo button */
 243
 244 #cclogo {
 245   margin-top: 10px;
 246   margin-bottom: 10px;
 247 }
 248
 249 /* Rules for tabbed navigation bar */
 250
 251 #tabnav {
 252   height: 29px;
 253   border-bottom: 1px solid #ccc;
 254   padding: 0;
 255   margin: 0;
 256 }
 257
 258 #tabnav li {
 259   margin: 0px;
 260   padding: 0px;
 261   display: inline;
 262   list-style-type: none;
 263 }
 264
 265 #tabnav a, #tabnav a:link, #tabnav a:visited {
 266   background: #fff;
 267   font-size: 14px;
 268   line-height: 19px;
 269   font-weight: bold;
 270   padding: 5px 10px;
 271   text-decoration: none;
 272   color: #333;
 273 }
 274
 275 #tabnav a:link.active, #tabnav a:visited.active {
 276   border-bottom: 1px solid #aaa;
 277   background: #9ed485;
 278   color: #000;
 279 }
 280
 281 #tabnav a:link:hover, #tabnav a:visited:hover {
 282   text-decoration:underline;
 283 }
 284
 285 #tabnav a:link.disabled,
 286 #tabnav a:visited.disabled,
 287 #tabnav a:link:hover.disabled,
 288 #tabnav a:visited:hover.disabled {
 289   color: #888;
 290 }
 291
 292 /* Rules for greeting bar in the top right corner */
 293
 294 #greeting {
 295   height: 30px;
 296   margin: 0px;
 297   font-size: 13px;
 298   line-height: 30px;
 299 }
 300
 301 .greeting-bar-unread {
 302   font-weight: bold;
 303 }
 304
 305 /* Rules for the message shown in place of the map when javascript is disabled */
 306
 307 #noscript {
 308   z-index: 20000000;
 309   position: absolute;
 310   top: 15px;
 311 }
 312
 313 /* Rules for OpenLayers maps */
 314
 315 #map {
 316   margin: 0px;
 317   padding: 0px;
 318 }
 319
 320 .olControlAttribution {
 321   bottom: 15px !important;
 322   left: 0px !important;
 323   right: 0px !important;
 324   text-align: center;
 325 }
 326
 327 #permalink {
 328   z-index: 10000;
 329   position: absolute;
 330   bottom: 0px;
 331   right: 0px;
 332   padding: 5px;
 333   background:#fff;
 334   text-align: right;
 335   font-size: 12px;
 336 }
 337
 338 #permalink a {
 339   padding: 5px;
 340 }
 341
 342 /* Rules for edit menu */
 343
 344 .menu {
 345   display: none;
 346   z-index: 10000;
 347   position: absolute;
 348   background-color: #ffffff;
 349   border: 1px solid black;
 350 }
 351
 352 .menu ul {
 353   margin-top: 10px;
 354   margin-bottom: 10px;
 355   padding-left: 10px;
 356   padding-right: 10px;
 357 }
 358
 359 .menu li {
 360   list-style-type: none;
 361   white-space: nowrap;
 362 }
 363
 364 /* Rules for attribution text under the main map shown on printouts */
 365
 366 #attribution {
 367   display: none;
 368 }
 369
 370 .attribution_notice {
 371   text-align: center;
 372 }
 373
 374 /* Rules for the popout map sidebar */
 375
 376 #sidebar {
 377   display: none;
 378   position: absolute;
 379   margin: 0px;
 380   padding: 0px;
 381   width: 30%;
 382   top: 0px;
 383   bottom: 0px;
 384 }
 385
 386 #sidebar #sidebar_content {
 387   overflow: auto;
 388   position: absolute;
 389   font-size: 13px;
 390   line-height: 15px;
 391   top: 29px;
 392   bottom: 0px;
 393   left: 0px;
 394   right: 0px;
 395 }
 396
 397 #sidebar .sidebar_title {
 398   margin: 0px;
 399   padding: 3px 6px 4px 6px;
 400   height: 29px;
 401   font-size: 14px;
 402   line-height: 15px;
 403   background: #bbb;
 404 }
 405
 406 /* Rules for the map key which appears in the popout sidebar */
 407
 408 #mapkey h3 {
 409   font-size: 110%;
 410   font-weight: normal;
 411   text-align: center;
 412 }
 413
 414 #mapkey .mapkey-table {
 415   padding-left: 5px;
 416   padding-right: 5px;
 417 }
 418
 419 #mapkey .mapkey-table-key {
 420 }
 421
 422 #mapkey .mapkey-table-value {
 423   font-size: 90%;
 424 }
 425
 426 /* Rules for search results which appear in the popout sidebar */
 427
 428 .search_searching {
 429   margin-top: 5px;
 430   margin-bottom: 5px;
 431 }
 432
 433 .search_results_heading {
 434   margin: 0px;
 435   padding: 2px 5px;
 436   border-bottom: 1px solid #ccc;
 437   font-weight: bold;
 438 }
 439
 440 .search_results_entry {
 441   margin: 0px;
 442   padding: 2px 5px;
 443 }
 444
 445 .search_results_error {
 446   margin: 0px;
 447   padding: 2px 6px 0px;
 448   color: #f00;
 449 }
 450
 451 /* Rules for data browser information which appears in the popout sidebar */
 452
 453 .browse_heading {
 454   margin: 0px;
 455   padding: 3px 6px;
 456   border: 1px solid #ccc;
 457   background: #ddd;
 458 }
 459
 460 .browse_details {
 461   margin: 0px;
 462   padding: 0px 6px;
 463 }
 464
 465 /* Rules for export information which appears in the popout sidebar */
 466
 467 .export_heading {
 468   margin: 0px;
 469   padding: 2px 5px;
 470   border-bottom: 1px solid #ccc;
 471   font-weight: bold;
 472 }
 473
 474 .export_bounds {
 475   width: 100%;
 476   text-align: center;
 477 }
 478
 479 .export_bound {
 480   margin: 5px;
 481 }
 482
 483 .export_details {
 484   padding: 2px 6px;
 485 }
 486
 487 #export_osm {
 488   display: none;
 489 }
 490
 491 #export_mapnik {
 492   display: none;
 493 }
 494
 495 #export_osmarender {
 496   display: none;
 497 }
 498
 499 .export_hint {
 500   padding: 0px 12px;
 501   font-style: italic;
 502 }
 503
 504 .export_buttons {
 505   width: 100%;
 506   text-align: center;
 507 }
 508
 509 /* Rules for the main content area */
 510
 511 #content {
 512   padding: 10px;
 513   margin: 0px;
 514   position: absolute;
 515   bottom: 0px;
 516 }
 517
 518 #content.site_index,
 519 #content.site_edit,
 520 #content.site_export {
 521   border: 0px;
 522   padding: 0px;
 523 }
 524
 525 #slim_container {
 526   width: 100%;
 527 }
 528
 529 #slim_container_content {
 530   max-width: 50em;
 531   background-color: #FFFFFF;
 532   margin: 10px auto;
 533   padding: 3px;
 534   border-radius: 25px;
 535   -moz-border-radius: 25px;
 536   border: 1px solid #e6e6e6;
 537 }
 538
 539 #slim_content {
 540   margin: 10px;
 541   margin-top: 90px;
 542   max-width: 50em;
 543 }
 544
 545 #slim_header {
 546   margin: 10px;
 547   position: absolute;
 548   top: 0px;
 549 }
 550
 551 #slim_header img {
 552   vertical-align: middle;
 553   margin-bottom: 5px;
 554 }
 555
 556 /* Rules for the home page */
 557
 558 .site_index #map {
 559   position: absolute;
 560   top: 0px;
 561   bottom: 0px;
 562   left: 0px;
 563   right: 0px;
 564 }
 565
 566 .site_export #map {
 567   position: absolute;
 568   top: 0px;
 569   bottom: 0px;
 570   left: 0px;
 571   right: 0px;
 572 }
 573
 574 /* Rules for the edit page */
 575
 576 .site_edit #map {
 577   position: absolute;
 578   top: 0px;
 579   bottom: 0px;
 580   left: 0px;
 581   right: 0px;
 582 }
 583
 584 /* Rules for the changeset list shown by the history tab etc */
 585
 586 #changeset_list_container {
 587   position: relative;
 588 }
 589
 590 #changeset_list {
 591   width: 50%;
 592   font-size: small;
 593   border-collapse: collapse;
 594   border-width: 0px;
 595   margin-top: 1px;
 596   margin-bottom: 1px;
 597 }
 598
 599 #changeset_list td {
 600   vertical-align: top;
 601   padding: 3px;
 602 }
 603
 604 #changeset_list .date {
 605   white-space: nowrap;
 606 }
 607
 608 #changeset_list .user {
 609   white-space: nowrap;
 610 }
 611
 612 #changeset_list .area {
 613   white-space: nowrap;
 614 }
 615
 616 #changeset_list .selected {
 617   background-color: rgb(255, 255, 160);
 618   background-color: rgba(255, 255, 85, 0.5);
 619 }
 620
 621 #changeset_list_map {
 622   position: absolute;
 623   top: 0px;
 624   bottom: 0px;
 625   width: 49%;
 626   min-height: 400px;
 627   border: solid 1px black;
 628 }
 629
 630 /* Rules for the data browser */
 631
 632 #browse_navigation {
 633   width: 250px;
 634   text-align: center;
 635 }
 636
 637 table.browse_details th {
 638   white-space: nowrap;
 639 }
 640
 641 #browse_map {
 642   width: 250px;
 643 }
 644
 645 #browse_map #small_map {
 646   width: 250px;
 647   height: 300px;
 648   border: solid 1px black;
 649 }
 650
 651 #browse_map .geolink {
 652   display: none;
 653 }
 654
 655 /* Rules for the trace list shown by the traces tab etc */
 656
 657 #trace_list {
 658   font-size: small;
 659   border-collapse: collapse;
 660   border-width: 0px;
 661 }
 662
 663 #trace_list .trace_summary {
 664   font-size: 12px;
 665   color: gray;
 666 }
 667
 668 #trace_list .trace_pending {
 669   color: red;
 670 }
 671
 672 #trace_list .trace_public {
 673   color: green;
 674 }
 675
 676 #trace_list .trace_identifiable {
 677   color: green;
 678 }
 679
 680 #trace_list .trace_trackable {
 681   color: red;
 682 }
 683
 684 #trace_list .trace_private {
 685   color: red;
 686 }
 687
 688 /* Rules for the user list */
 689
 690 #user_list {
 691   width: 100%;
 692   font-size: small;
 693 }
 694
 695 #user_list tr {
 696   vertical-align: middle;
 697 }
 698
 699 #user_list p {
 700   margin-top: 0px;
 701   margin-bottom: 0px;
 702 }
 703
 704 #user_list_actions {
 705   margin-top: 10px;
 706 }
 707
 708 /* Rules for the new diary entry page */
 709
 710 .diary_entry div#map {
 711   position: relative;
 712   width: 90%;
 713   height: 400px;
 714   border: 1px solid #ccc;
 715   display: none;
 716 }
 717
 718 /* Rules for the login page */
 719
 720 #login_wrapper div {
 721   margin: 5px;
 722   padding: 15px;
 723   border-radius: 15px;
 724   -moz-border-radius: 15px;
 725 }
 726
 727 #login_login {
 728   background-color: #f5f5ff;
 729   border: 1px solid #f3f3ff;
 730   border-radius: 15px;
 731   -moz-border-radius: 15px;
 732 }
 733
 734 #login_login h1 {
 735   margin-top: 5px;
 736 }
 737
 738 table#login_openid_buttons {
 739   padding-bottom: 10px;
 740 }
 741
 742 #login_openid_buttons td {
 743   padding-left: 10px;
 744   padding-right: 10px;
 745   padding-top: 5px;
 746   padding-bottom: 5px;
 747 }
 748
 749 #login_openid_buttons img {
 750   border: 0;
 751 }
 752
 753 #login_signup form.button-to div {
 754   margin: 0px;
 755   padding: 0px;
 756 }
 757
 758 /* Rules for the account confirmation page */
 759
 760 div#contributorTerms {
 761   border: 1px solid black;
 762   padding: 4px;
 763   overflow: auto;
 764   width: 95%;
 765   height: 400px;
 766 }
 767
 768 div#slim_content div#contributorTerms {
 769   width: auto;
 770 }
 771
 772 div#contributorTerms p#first {
 773   margin-top: 0px;
 774 }
 775
 776 div#contributorTerms p#last {
 777   margin-bottom: 0px;
 778 }
 779
 780 div#contributorTerms ol {
 781   margin-bottom: 0px;
 782 }
 783
 784 div#contributorTerms img {
 785   display: block;
 786   margin-left: auto;
 787   margin-right: auto;
 788   margin-top: 10%;
 789 }
 790
 791 form#termsForm {
 792   width: 95%;
 793   margin-bottom: 3em;
 794 }
 795
 796 div#slim_content form#termsForm {
 797   width: auto;
 798 }
 799
 800 p#contributorGuidance {
 801   background-color: #f5f5ff;
 802   border: 1px solid #f3f3ff;
 803   border-radius: 15px;
 804   -moz-border-radius: 15px;
 805   padding: 10px;
 806 }
 807
 808 /* Rules for the account settings page */
 809
 810 #accountForm td {
 811   padding-bottom: 10px;
 812 }
 813
 814 #accountForm .user_map {
 815   position: relative;
 816   width: 500px;
 817   height: 400px;
 818   border: 1px solid #ccc;
 819 }
 820
 821 #accountImage td {
 822   padding-bottom: 0px;
 823 }
 824
 825 .nohome .location {
 826   display: none;
 827 }
 828
 829 #homerow .message {
 830   display: none;
 831 }
 832
 833 .nohome .message {
 834   display: inline !important;
 835 }
 836
 837 #accountForm input[type=submit] {
 838   margin-top: 15px;
 839 }
 840
 841 /* Rules for the user view */
 842
 843 .user_view .user_map {
 844   position: relative;
 845   width: 400px;
 846   height: 400px;
 847   border: 1px solid #ccc;
 848 }
 849
 850 .user_view .user_map p#no_home_location {
 851   position: absolute;
 852   top: 0px;
 853   bottom: 0px;
 854   width: 90%;
 855   height: 30%;
 856   margin: auto 5%
 857 }
 858
 859 /* Rules for the user map */
 860
 861 .user_map .olControlPanZoomBar {
 862   display: none;
 863 }
 864
 865 .user_map .olControlPanZoom {
 866   display: block;
 867 }
 868
 869 /* Rules for user popups on maps */
 870
 871 .user_popup p {
 872   padding-top: 3px;
 873   padding-bottom: 3px;
 874   margin-top: 0px;
 875   margin-bottom: 0px;
 876   margin-left: 55px;
 877   margin-right: 2px;
 878 }
 879
 880 .user_popup img.user_thumbnail {
 881   float: left;
 882 }
 883
 884 /* Rules for message in/out box page */
 885
 886 #messages {
 887   border: 1px solid #ccc;
 888 }
 889
 890 .inbox-row-unread .inbox-subject {
 891   font-weight: bold;
 892 }
 893
 894 /* Rules for "flash" notice boxes shown at the top of the content area */
 895
 896 #error {
 897   border: 1px solid red;
 898   padding: 7px;
 899   background-color: #fff0f0;
 900   margin-bottom: 20px;
 901   border-radius: 5px;
 902   -moz-border-radius: 5px;
 903 }
 904
 905 #warning {
 906   border: 1px solid orange;
 907   padding: 7px;
 908   background-color: #fff6f0;
 909   margin-bottom: 20px;
 910   border-radius: 5px;
 911   -moz-border-radius: 5px;
 912 }
 913
 914 #notice {
 915   border: 1px solid green;
 916   padding: 7px;
 917   background-color: #f0fff0;
 918   margin-bottom: 20px;
 919   border-radius: 5px;
 920   -moz-border-radius: 5px;
 921 }
 922
 923 /* Rules for highlighting fields with rails validation errors */
 924
 925 .field_with_errors {
 926   padding: 2px;
 927   background-color: red;
 928   display: table;
 929 }
 930
 931 /* Rules for rails validation error boxes */
 932
 933 #errorExplanation {
 934   width: 400px;
 935   border: 2px solid red;
 936   padding: 7px;
 937   padding-bottom: 12px;
 938   margin-bottom: 20px;
 939   background-color: #f0f0f0;
 940 }
 941
 942 #errorExplanation h2 {
 943   font-weight: bold;
 944   font-size: 12px;
 945   margin: -7px;
 946   background-color: #c00;
 947   color: #fff;
 948 }
 949
 950 #errorExplanation p {
 951   color: #333;
 952   margin-bottom: 0px;
 953   padding: 5px;
 954 }
 955
 956 #errorExplanation ul li {
 957   font-size: 12px;
 958   list-style: square;
 959 }
 960
 961 /* Rules for forms */
 962
 963 .fieldName {
 964   vertical-align: top;
 965   font-weight: bold;
 966   font-size: 12px;
 967   line-height: 20px;
 968 }
 969
 970 .minorNote {
 971   font-size: 0.8em;
 972 }
 973
 974 input[type="text"],
 975 input[type="email"],
 976 input[type="url"],
 977 input[type="password"],
 978 textarea {
 979   border: 1px solid #888;
 980 }
 981
 982 /* Rules for user images */
 983
 984 img.user_image {
 985   max-width: 100px;
 986   max-height: 100px;
 987   border: 1px solid black;
 988 }
 989
 990 img.user_thumbnail {
 991   max-width: 50px;
 992   max-height: 100px;
 993   border: 1px solid black;
 994 }
 995
 996 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
 997
 998 .nowrap {
 999   white-space: nowrap;
1000 }
1001
1002 /* Rules for geo microformats */
1003
1004 abbr.geo {
1005   border-bottom: none;
1006 }
1007
1008 /* Rules for RSS buttons */
1009
1010 .rsssmall {
1011   position: relative;
1012   top: 4px;
1013 }
1014
1015 /* Rules for doing distinct colour of alternate table rows */
1016
1017 .table0 {
1018   background: #f6f6f6;
1019 }
1020
1021 .table1 {
1022   background: #fff;
1023 }
1024
1025 /* Rules for OpenID logo */
1026
1027 .openid_logo {
1028   vertical-align: text-bottom;
1029   border: 0;
1030 }