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   overflow:hidden;
 257 }
 258
 259 #tabnav li {
 260   margin: 0px;
 261   padding: 0px;
 262   display: inline;
 263   list-style-type: none;
 264 }
 265
 266 #tabnav a, #tabnav a:link, #tabnav a:visited {
 267   background: #fff;
 268   font-size: 14px;
 269   line-height: 19px;
 270   font-weight: bold;
 271   padding: 5px 10px;
 272   text-decoration: none;
 273   color: #333;
 274 }
 275
 276 #tabnav a:link.active, #tabnav a:visited.active {
 277   border-bottom: 1px solid #aaa;
 278   background: #9ed485;
 279   color: #000;
 280 }
 281
 282 #tabnav a:link:hover, #tabnav a:visited:hover {
 283   text-decoration:underline;
 284 }
 285
 286 #tabnav a:link.disabled,
 287 #tabnav a:visited.disabled,
 288 #tabnav a:link:hover.disabled,
 289 #tabnav a:visited:hover.disabled {
 290   color: #888;
 291 }
 292
 293 /* Rules for greeting bar in the top right corner */
 294
 295 #greeting {
 296   height: 30px;
 297   margin: 0px;
 298   font-size: 13px;
 299   line-height: 30px;
 300 }
 301
 302 .greeting-bar-unread {
 303   font-weight: bold;
 304 }
 305
 306 /* Rules for the message shown in place of the map when javascript is disabled */
 307
 308 #noscript {
 309   z-index: 20000000;
 310   position: absolute;
 311   top: 15px;
 312 }
 313
 314 /* Rules for OpenLayers maps */
 315
 316 #map {
 317   margin: 0px;
 318   padding: 0px;
 319 }
 320
 321 .olControlAttribution {
 322   bottom: 15px !important;
 323   left: 0px !important;
 324   right: 0px !important;
 325   text-align: center;
 326 }
 327
 328 #permalink {
 329   z-index: 10000;
 330   position: absolute;
 331   bottom: 0px;
 332   right: 0px;
 333   padding: 5px;
 334   background:#fff;
 335   text-align: right;
 336   font-size: 12px;
 337 }
 338
 339 #permalink a {
 340   padding: 5px;
 341 }
 342
 343 /* Rules for edit menu */
 344
 345 .menu {
 346   display: none;
 347   z-index: 10000;
 348   position: absolute;
 349   background-color: #ffffff;
 350   border: 1px solid black;
 351 }
 352
 353 .menu ul {
 354   margin-top: 10px;
 355   margin-bottom: 10px;
 356   padding-left: 10px;
 357   padding-right: 10px;
 358 }
 359
 360 .menu li {
 361   list-style-type: none;
 362   white-space: nowrap;
 363 }
 364
 365 /* Rules for attribution text under the main map shown on printouts */
 366
 367 #attribution {
 368   display: none;
 369 }
 370
 371 .attribution_notice {
 372   text-align: center;
 373 }
 374
 375 /* Rules for the popout map sidebar */
 376
 377 #sidebar {
 378   display: none;
 379   position: absolute;
 380   margin: 0px;
 381   padding: 0px;
 382   width: 30%;
 383   top: 0px;
 384   bottom: 0px;
 385 }
 386
 387 #sidebar #sidebar_content {
 388   overflow: auto;
 389   position: absolute;
 390   font-size: 13px;
 391   line-height: 15px;
 392   top: 29px;
 393   bottom: 0px;
 394   left: 0px;
 395   right: 0px;
 396 }
 397
 398 #sidebar .sidebar_title {
 399   margin: 0px;
 400   padding: 3px 6px 4px 6px;
 401   height: 29px;
 402   font-size: 14px;
 403   line-height: 15px;
 404   background: #bbb;
 405 }
 406
 407 /* Rules for the map key which appears in the popout sidebar */
 408
 409 #mapkey h3 {
 410   font-size: 110%;
 411   font-weight: normal;
 412   text-align: center;
 413 }
 414
 415 #mapkey .mapkey-table {
 416   padding-left: 5px;
 417   padding-right: 5px;
 418 }
 419
 420 #mapkey .mapkey-table-key {
 421 }
 422
 423 #mapkey .mapkey-table-value {
 424   font-size: 90%;
 425 }
 426
 427 /* Rules for search results which appear in the popout sidebar */
 428
 429 .search_searching {
 430   margin-top: 5px;
 431   margin-bottom: 5px;
 432 }
 433
 434 .search_results_heading {
 435   margin: 0px;
 436   padding: 2px 5px;
 437   border-bottom: 1px solid #ccc;
 438   font-weight: bold;
 439 }
 440
 441 .search_results_entry {
 442   margin: 0px;
 443   padding: 2px 5px;
 444 }
 445
 446 .search_results_error {
 447   margin: 0px;
 448   padding: 2px 6px 0px;
 449   color: #f00;
 450 }
 451
 452 /* Rules for data browser information which appears in the popout sidebar */
 453
 454 .browse_heading {
 455   margin: 0px;
 456   padding: 3px 6px;
 457   border: 1px solid #ccc;
 458   background: #ddd;
 459 }
 460
 461 .browse_details {
 462   margin: 0px;
 463   padding: 0px 6px;
 464 }
 465
 466 /* Rules for export information which appears in the popout sidebar */
 467
 468 .export_heading {
 469   margin: 0px;
 470   padding: 2px 5px;
 471   border-bottom: 1px solid #ccc;
 472   font-weight: bold;
 473 }
 474
 475 .export_bounds {
 476   width: 100%;
 477   text-align: center;
 478 }
 479
 480 .export_bound {
 481   margin: 5px;
 482 }
 483
 484 .export_details {
 485   padding: 2px 6px;
 486 }
 487
 488 #export_osm {
 489   display: none;
 490 }
 491
 492 #export_mapnik {
 493   display: none;
 494 }
 495
 496 #export_osmarender {
 497   display: none;
 498 }
 499
 500 .export_hint {
 501   padding: 0px 12px;
 502   font-style: italic;
 503 }
 504
 505 .export_buttons {
 506   width: 100%;
 507   text-align: center;
 508 }
 509
 510 /* Rules for the main content area */
 511
 512 #content {
 513   padding: 10px;
 514   margin: 0px;
 515   position: absolute;
 516   bottom: 0px;
 517 }
 518
 519 #content.site_index,
 520 #content.site_edit,
 521 #content.site_export {
 522   border: 0px;
 523   padding: 0px;
 524 }
 525
 526 #slim_container {
 527   width: 100%;
 528 }
 529
 530 #slim_container_content {
 531   max-width: 50em;
 532   background-color: #FFFFFF;
 533   margin: 10px auto;
 534   padding: 3px;
 535   border-radius: 25px;
 536   -moz-border-radius: 25px;
 537   border: 1px solid #e6e6e6;
 538 }
 539
 540 #slim_content {
 541   margin: 10px;
 542   margin-top: 90px;
 543   max-width: 50em;
 544 }
 545
 546 #slim_header {
 547   margin: 10px;
 548   position: absolute;
 549   top: 0px;
 550 }
 551
 552 #slim_header img {
 553   vertical-align: middle;
 554   margin-bottom: 5px;
 555 }
 556
 557 /* Rules for the home page */
 558
 559 .site_index #map {
 560   position: absolute;
 561   top: 0px;
 562   bottom: 0px;
 563   left: 0px;
 564   right: 0px;
 565 }
 566
 567 .site_export #map {
 568   position: absolute;
 569   top: 0px;
 570   bottom: 0px;
 571   left: 0px;
 572   right: 0px;
 573 }
 574
 575 /* Rules for the edit page */
 576
 577 .site_edit #map {
 578   position: absolute;
 579   top: 0px;
 580   bottom: 0px;
 581   left: 0px;
 582   right: 0px;
 583 }
 584
 585 /* Rules for the changeset list shown by the history tab etc */
 586
 587 #changeset_list_container {
 588   position: relative;
 589 }
 590
 591 #changeset_list {
 592   width: 50%;
 593   font-size: small;
 594   border-collapse: collapse;
 595   border-width: 0px;
 596   margin-top: 1px;
 597   margin-bottom: 1px;
 598 }
 599
 600 #changeset_list td {
 601   vertical-align: top;
 602   padding: 3px;
 603 }
 604
 605 #changeset_list .date {
 606   white-space: nowrap;
 607 }
 608
 609 #changeset_list .user {
 610   white-space: nowrap;
 611 }
 612
 613 #changeset_list .area {
 614   white-space: nowrap;
 615 }
 616
 617 #changeset_list .selected {
 618   background-color: rgb(255, 255, 160);
 619   background-color: rgba(255, 255, 85, 0.5);
 620 }
 621
 622 #changeset_list_map {
 623   position: absolute;
 624   top: 0px;
 625   bottom: 0px;
 626   width: 49%;
 627   min-height: 400px;
 628   border: solid 1px black;
 629 }
 630
 631 /* Rules for the data browser */
 632
 633 #browse_navigation {
 634   width: 250px;
 635   text-align: center;
 636 }
 637
 638 table.browse_details th {
 639   white-space: nowrap;
 640 }
 641
 642 #browse_map {
 643   width: 250px;
 644 }
 645
 646 #browse_map #small_map {
 647   width: 250px;
 648   height: 300px;
 649   border: solid 1px black;
 650 }
 651
 652 #browse_map .geolink {
 653   display: none;
 654 }
 655
 656 /* Rules for the trace list shown by the traces tab etc */
 657
 658 #trace_list {
 659   font-size: small;
 660   border-collapse: collapse;
 661   border-width: 0px;
 662 }
 663
 664 #trace_list .trace_summary {
 665   font-size: 12px;
 666   color: gray;
 667 }
 668
 669 #trace_list .trace_pending {
 670   color: red;
 671 }
 672
 673 #trace_list .trace_public {
 674   color: green;
 675 }
 676
 677 #trace_list .trace_identifiable {
 678   color: green;
 679 }
 680
 681 #trace_list .trace_trackable {
 682   color: red;
 683 }
 684
 685 #trace_list .trace_private {
 686   color: red;
 687 }
 688
 689 /* Rules for the user list */
 690
 691 #user_list {
 692   width: 100%;
 693   font-size: small;
 694 }
 695
 696 #user_list tr {
 697   vertical-align: middle;
 698 }
 699
 700 #user_list p {
 701   margin-top: 0px;
 702   margin-bottom: 0px;
 703 }
 704
 705 #user_list_actions {
 706   margin-top: 10px;
 707 }
 708
 709 /* Rules for the new diary entry page */
 710
 711 .diary_entry div#map {
 712   position: relative;
 713   width: 90%;
 714   height: 400px;
 715   border: 1px solid #ccc;
 716   display: none;
 717 }
 718
 719 /* Rules for the login page */
 720
 721 #login_wrapper div {
 722   margin: 5px;
 723   padding: 15px;
 724   border-radius: 15px;
 725   -moz-border-radius: 15px;
 726 }
 727
 728 #login_login {
 729   background-color: #f5f5ff;
 730   border: 1px solid #f3f3ff;
 731   border-radius: 15px;
 732   -moz-border-radius: 15px;
 733 }
 734
 735 #login_login h1 {
 736   margin-top: 5px;
 737 }
 738
 739 table#login_openid_buttons {
 740   padding-bottom: 10px;
 741 }
 742
 743 #login_openid_buttons td {
 744   padding-left: 10px;
 745   padding-right: 10px;
 746   padding-top: 5px;
 747   padding-bottom: 5px;
 748 }
 749
 750 #login_openid_buttons img {
 751   border: 0;
 752 }
 753
 754 #login_signup form.button-to div {
 755   margin: 0px;
 756   padding: 0px;
 757 }
 758
 759 /* Rules for the account confirmation page */
 760
 761 div#contributorTerms {
 762   border: 1px solid black;
 763   padding: 4px;
 764   overflow: auto;
 765   width: 95%;
 766   height: 400px;
 767 }
 768
 769 div#slim_content div#contributorTerms {
 770   width: auto;
 771 }
 772
 773 div#contributorTerms p#first {
 774   margin-top: 0px;
 775 }
 776
 777 div#contributorTerms p#last {
 778   margin-bottom: 0px;
 779 }
 780
 781 div#contributorTerms ol {
 782   margin-bottom: 0px;
 783 }
 784
 785 div#contributorTerms img {
 786   display: block;
 787   margin-left: auto;
 788   margin-right: auto;
 789   margin-top: 10%;
 790 }
 791
 792 form#termsForm {
 793   width: 95%;
 794   margin-bottom: 3em;
 795 }
 796
 797 div#slim_content form#termsForm {
 798   width: auto;
 799 }
 800
 801 p#contributorGuidance {
 802   background-color: #f5f5ff;
 803   border: 1px solid #f3f3ff;
 804   border-radius: 15px;
 805   -moz-border-radius: 15px;
 806   padding: 10px;
 807 }
 808
 809 /* Rules for the account settings page */
 810
 811 #accountForm td {
 812   padding-bottom: 10px;
 813 }
 814
 815 #accountForm .user_map {
 816   position: relative;
 817   width: 500px;
 818   height: 400px;
 819   border: 1px solid #ccc;
 820 }
 821
 822 #accountImage td {
 823   padding-bottom: 0px;
 824 }
 825
 826 .nohome .location {
 827   display: none;
 828 }
 829
 830 #homerow .message {
 831   display: none;
 832 }
 833
 834 .nohome .message {
 835   display: inline !important;
 836 }
 837
 838 #accountForm input[type=submit] {
 839   margin-top: 15px;
 840 }
 841
 842 /* Rules for the user view */
 843
 844 .user_view .user_map {
 845   position: relative;
 846   width: 400px;
 847   height: 400px;
 848   border: 1px solid #ccc;
 849 }
 850
 851 .user_view .user_map p#no_home_location {
 852   position: absolute;
 853   top: 0px;
 854   bottom: 0px;
 855   width: 90%;
 856   height: 30%;
 857   margin: auto 5%
 858 }
 859
 860 /* Rules for the user map */
 861
 862 .user_map .olControlPanZoomBar {
 863   display: none;
 864 }
 865
 866 .user_map .olControlPanZoom {
 867   display: block;
 868 }
 869
 870 /* Rules for user popups on maps */
 871
 872 .user_popup p {
 873   padding-top: 3px;
 874   padding-bottom: 3px;
 875   margin-top: 0px;
 876   margin-bottom: 0px;
 877   margin-left: 55px;
 878   margin-right: 2px;
 879 }
 880
 881 .user_popup img.user_thumbnail {
 882   float: left;
 883 }
 884
 885 /* Rules for message in/out box page */
 886
 887 #messages {
 888   border: 1px solid #ccc;
 889 }
 890
 891 .inbox-row-unread .inbox-subject {
 892   font-weight: bold;
 893 }
 894
 895 /* Rules for "flash" notice boxes shown at the top of the content area */
 896
 897 #error {
 898   border: 1px solid red;
 899   padding: 7px;
 900   background-color: #fff0f0;
 901   margin-bottom: 20px;
 902   border-radius: 5px;
 903   -moz-border-radius: 5px;
 904 }
 905
 906 #warning {
 907   border: 1px solid orange;
 908   padding: 7px;
 909   background-color: #fff6f0;
 910   margin-bottom: 20px;
 911   border-radius: 5px;
 912   -moz-border-radius: 5px;
 913 }
 914
 915 #notice {
 916   border: 1px solid green;
 917   padding: 7px;
 918   background-color: #f0fff0;
 919   margin-bottom: 20px;
 920   border-radius: 5px;
 921   -moz-border-radius: 5px;
 922 }
 923
 924 /* Rules for highlighting fields with rails validation errors */
 925
 926 .field_with_errors {
 927   padding: 2px;
 928   background-color: red;
 929   display: table;
 930 }
 931
 932 /* Rules for rails validation error boxes */
 933
 934 #errorExplanation {
 935   width: 400px;
 936   border: 2px solid red;
 937   padding: 7px;
 938   padding-bottom: 12px;
 939   margin-bottom: 20px;
 940   background-color: #f0f0f0;
 941 }
 942
 943 #errorExplanation h2 {
 944   font-weight: bold;
 945   font-size: 12px;
 946   margin: -7px;
 947   background-color: #c00;
 948   color: #fff;
 949 }
 950
 951 #errorExplanation p {
 952   color: #333;
 953   margin-bottom: 0px;
 954   padding: 5px;
 955 }
 956
 957 #errorExplanation ul li {
 958   font-size: 12px;
 959   list-style: square;
 960 }
 961
 962 /* Rules for forms */
 963
 964 .fieldName {
 965   vertical-align: top;
 966   font-weight: bold;
 967   font-size: 12px;
 968   line-height: 20px;
 969 }
 970
 971 .minorNote {
 972   font-size: 0.8em;
 973 }
 974
 975 input[type="text"],
 976 input[type="email"],
 977 input[type="url"],
 978 input[type="password"],
 979 textarea {
 980   border: 1px solid #888;
 981 }
 982
 983 /* Rules for user images */
 984
 985 img.user_image {
 986   max-width: 100px;
 987   max-height: 100px;
 988   border: 1px solid black;
 989 }
 990
 991 img.user_thumbnail {
 992   max-width: 50px;
 993   max-height: 100px;
 994   border: 1px solid black;
 995 }
 996
 997 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
 998
 999 .nowrap {
1000   white-space: nowrap;
1001 }
1002
1003 /* Rules for geo microformats */
1004
1005 abbr.geo {
1006   border-bottom: none;
1007 }
1008
1009 /* Rules for RSS buttons */
1010
1011 .rsssmall {
1012   position: relative;
1013   top: 4px;
1014 }
1015
1016 /* Rules for doing distinct colour of alternate table rows */
1017
1018 .table0 {
1019   background: #f6f6f6;
1020 }
1021
1022 .table1 {
1023   background: #fff;
1024 }
1025
1026 /* Rules for OpenID logo */
1027
1028 .openid_logo {
1029   vertical-align: text-bottom;
1030   border: 0;
1031 }