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