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