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 .sidebar-copy {
  89   border-top: 1px solid #ccc;
  90   padding: 0px 5px;
  91 }
  92
  93 .sidebar-copy p {
  94   margin: 5px;
  95 }
  96
  97 /*
  98  * Rules for alert boxes shown in the left sidebar when important
  99  * information needs to be conveyed such as when the site is
 100  * undergoing maintenance.
 101  */
 102
 103 #alert {
 104   width: 170px;
 105   margin: 5px;
 106   padding: 5px;
 107   border: 1px solid #ccc;
 108   background: #d00;
 109   line-height: 1.2em;
 110   font-size: 14px;
 111   border-radius: 5px;
 112   -moz-border-radius: 5px;
 113 }
 114
 115 /*
 116  * Rules for notice boxes shown in the left sidebar when important, but
 117  * non-critical information needs to be conveyed such as notices about
 118  * donation drives.
 119  */
 120
 121 .notice {
 122   width: 170px;
 123   margin: 5px;
 124   padding: 5px;
 125   border: 1px solid #ccc;
 126   background: #ea0;
 127   line-height: 20px;
 128   font-size: 14px;
 129   border-radius: 5px;
 130   -moz-border-radius: 5px;
 131 }
 132
 133 /* Rules for the menu displayed in the left sidebar */
 134
 135 .left_menu {
 136   padding: 5px 10px;
 137   margin: 4px 0;
 138   border-top: 1px solid #ccc;
 139   border-bottom: 1px solid #ccc;
 140   line-height: 20px;
 141   font-size: 14px;
 142   font-weight: bold;
 143 }
 144
 145 .left_menu h1 {
 146   font-style: normal;
 147   font-size: 15px;
 148 }
 149
 150 .left_menu ul {
 151   margin: 0px;
 152   list-style-type: none;
 153 }
 154
 155 .left_menu li {
 156   margin: 0px;
 157   padding: 0px;
 158 }
 159
 160 /* submenus */
 161 .left_menu ul li ul {
 162   font-weight: normal;
 163   line-height: 15px;
 164   font-size: 12px;
 165 }
 166
 167 .left_menu a {
 168   color: #000;
 169 }
 170
 171 /* Rules for SOTM advert */
 172
 173 #sotm {
 174   width: 180px;
 175   min-width: 180px;
 176   margin: 5px;
 177   padding: 0px;
 178   border: 0px;
 179   background: #fff;
 180 }
 181
 182 /*
 183  * Rules for "optional boxes" which appear in the left sidebar on
 184  * certain pages. Current users are the seach box on the main page
 185  * and the tag cloud on the traces pages.
 186  */
 187
 188 .optionalbox {
 189   padding: 5px 10px;
 190   margin: 4px 0;
 191   border-top: 1px solid #ccc;
 192 }
 193
 194 .optionalbox h1 {
 195   font-size: 14px;
 196   font-weight: bold;
 197   line-height: 20px;
 198   margin: 0px;
 199   vertical-align: bottom;
 200 }
 201
 202 /* Rules for the search box */
 203
 204 .whereami {
 205   line-height: 20px;
 206   vertical-align: bottom;
 207 }
 208
 209 .search_container {
 210   height: 15px;
 211   padding-bottom: 5px;
 212 }
 213
 214 #search_field form {
 215   width: 100%;
 216   margin: 0px;
 217   padding: 0px;
 218 }
 219
 220 #search_field input[type="text"] {
 221   width: 130px;
 222 }
 223
 224 #search_field input[type="submit"] {
 225   width: 26px;
 226   padding-left: 0px;
 227   padding-right: 0px;
 228 }
 229
 230 .search_help {
 231   margin-top: 2px;
 232   margin-bottom: 0px;
 233 }
 234
 235 /* Rules for donation request box */
 236
 237 .donate {
 238   width: 153px;
 239   margin: 10px 10px;
 240   padding: 5px;
 241   border: 1px solid #ccc;
 242   background: #cbeea7;
 243   line-height: 20px;
 244   text-align: center;
 245   font-size: 14px;
 246   border-radius: 5px;
 247   -moz-border-radius: 5px;
 248 }
 249
 250 /* Rules for Creative Commons logo button */
 251
 252 #cclogo {
 253   margin-top: 10px;
 254   margin-bottom: 10px;
 255 }
 256
 257 /* Rules for tabbed navigation bar */
 258
 259 #top-bar {
 260   border-bottom: 1px solid #ccc;
 261   height: 29px;
 262 }
 263
 264 #tabnav {
 265   padding: 0;
 266   margin: 0;
 267   overflow:hidden;
 268 }
 269
 270 #tabnav li {
 271   margin: 0px;
 272   padding: 0px;
 273   display: inline;
 274   list-style-type: none;
 275 }
 276
 277 #tabnav a, #tabnav a:link, #tabnav a:visited {
 278   background: #fff;
 279   font-size: 14px;
 280   line-height: 19px;
 281   font-weight: bold;
 282   padding: 5px 10px;
 283   text-decoration: none;
 284   color: #333;
 285 }
 286
 287 #tabnav a:link.active, #tabnav a:visited.active {
 288   border-bottom: 1px solid #aaa;
 289   background: #9ed485;
 290   color: #000;
 291 }
 292
 293 #tabnav a:link:hover, #tabnav a:visited:hover {
 294   text-decoration:underline;
 295 }
 296
 297 #tabnav a:link.disabled,
 298 #tabnav a:visited.disabled,
 299 #tabnav a:link:hover.disabled,
 300 #tabnav a:visited:hover.disabled {
 301   color: #888;
 302 }
 303
 304 /* Rules for greeting bar in the top right corner */
 305
 306 #greeting {
 307   height: 28px;
 308   margin: 0px;
 309   font-size: 13px;
 310   line-height: 28px;
 311 }
 312
 313 .greeting-bar-unread {
 314   font-weight: bold;
 315 }
 316
 317 /* Rules for the message shown in place of the map when javascript is disabled */
 318
 319 #noscript {
 320   z-index: 20000000;
 321   position: absolute;
 322   top: 15px;
 323 }
 324
 325 /* Rules for OpenLayers maps */
 326
 327 #map {
 328   margin: 0px;
 329   padding: 0px;
 330 }
 331
 332 .olControlAttribution {
 333   bottom: 15px !important;
 334   left: 0px !important;
 335   right: 0px !important;
 336   text-align: center;
 337 }
 338
 339 #permalink {
 340   z-index: 10000;
 341   position: absolute;
 342   bottom: 0px;
 343   right: 0px;
 344   padding: 5px;
 345   background:#fff;
 346   text-align: right;
 347   font-size: 12px;
 348 }
 349
 350 #permalink a {
 351   padding: 5px;
 352 }
 353
 354 /* Rules for edit menu */
 355
 356 .menu {
 357   display: none;
 358   z-index: 10000;
 359   position: absolute;
 360   background-color: #ffffff;
 361   border: 1px solid black;
 362 }
 363
 364 .menu ul {
 365   margin-top: 10px;
 366   margin-bottom: 10px;
 367   padding-left: 10px;
 368   padding-right: 10px;
 369 }
 370
 371 .menu li {
 372   list-style-type: none;
 373   white-space: nowrap;
 374 }
 375
 376 /* Rules for attribution text under the main map shown on printouts */
 377
 378 #attribution {
 379   display: none;
 380 }
 381
 382 .attribution_notice {
 383   text-align: center;
 384 }
 385
 386 /* Rules for the popout map sidebar */
 387
 388 #sidebar {
 389   display: none;
 390   position: absolute;
 391   margin: 0px;
 392   padding: 0px;
 393   width: 30%;
 394   top: 0px;
 395   bottom: 0px;
 396 }
 397
 398 #sidebar #sidebar_content {
 399   overflow: auto;
 400   position: absolute;
 401   font-size: 13px;
 402   line-height: 15px;
 403   top: 29px;
 404   bottom: 0px;
 405   left: 0px;
 406   right: 0px;
 407 }
 408
 409 #sidebar .sidebar_title {
 410   margin: 0px;
 411   padding: 3px 6px 4px 6px;
 412   height: 29px;
 413   font-size: 14px;
 414   line-height: 15px;
 415   background: #bbb;
 416 }
 417
 418 /* Rules for the map key which appears in the popout sidebar */
 419
 420 #mapkey h3 {
 421   font-size: 110%;
 422   font-weight: normal;
 423   text-align: center;
 424 }
 425
 426 #mapkey .mapkey-table {
 427   padding-left: 5px;
 428   padding-right: 5px;
 429 }
 430
 431 #mapkey .mapkey-table-key {
 432 }
 433
 434 #mapkey .mapkey-table-value {
 435   font-size: 90%;
 436 }
 437
 438 /* Rules for search results which appear in the popout sidebar */
 439
 440 .search_searching {
 441   margin-top: 5px;
 442   margin-bottom: 5px;
 443 }
 444
 445 .search_results_heading {
 446   margin: 0px;
 447   padding: 2px 5px;
 448   border-bottom: 1px solid #ccc;
 449   font-weight: bold;
 450 }
 451
 452 .search_results_entry {
 453   margin: 0px;
 454   padding: 2px 5px;
 455 }
 456
 457 .search_results_error {
 458   margin: 0px;
 459   padding: 2px 6px 0px;
 460   color: #f00;
 461 }
 462
 463 /* Rules for data browser information which appears in the popout sidebar */
 464
 465 .browse_heading {
 466   margin: 0px;
 467   padding: 3px 6px;
 468   border: 1px solid #ccc;
 469   background: #ddd;
 470 }
 471
 472 .browse_details {
 473   margin: 0px;
 474   padding: 0px 6px;
 475 }
 476
 477 /* Rules for export information which appears in the popout sidebar */
 478
 479 .export_heading {
 480   margin: 0px;
 481   padding: 2px 5px;
 482   border-bottom: 1px solid #ccc;
 483   font-weight: bold;
 484 }
 485
 486 .export_bounds {
 487   width: 100%;
 488   text-align: center;
 489 }
 490
 491 .export_bound {
 492   margin: 5px;
 493 }
 494
 495 .export_details {
 496   padding: 2px 6px;
 497 }
 498
 499 #export_osm {
 500   display: none;
 501 }
 502
 503 #export_mapnik {
 504   display: none;
 505 }
 506
 507 #export_osmarender {
 508   display: none;
 509 }
 510
 511 .export_hint {
 512   padding: 0px 12px;
 513   font-style: italic;
 514 }
 515
 516 .export_buttons {
 517   width: 100%;
 518   text-align: center;
 519 }
 520
 521 /* Rules for the main content area */
 522
 523 #content {
 524   padding: 10px;
 525   margin: 0px;
 526   position: absolute;
 527   bottom: 0px;
 528 }
 529
 530 #content.site_index,
 531 #content.site_edit,
 532 #content.site_export {
 533   border: 0px;
 534   padding: 0px;
 535 }
 536
 537 #slim_container {
 538   width: 100%;
 539 }
 540
 541 #slim_container_content {
 542   max-width: 50em;
 543   background-color: #FFFFFF;
 544   margin: 10px auto;
 545   padding: 3px;
 546   border-radius: 25px;
 547   -moz-border-radius: 25px;
 548   border: 1px solid #e6e6e6;
 549 }
 550
 551 #slim_content {
 552   margin: 10px;
 553   margin-top: 90px;
 554   max-width: 50em;
 555 }
 556
 557 #slim_header {
 558   margin: 10px;
 559   position: absolute;
 560   top: 0px;
 561 }
 562
 563 #slim_header img {
 564   vertical-align: middle;
 565   margin-bottom: 5px;
 566 }
 567
 568 /* Rules for the home page */
 569
 570 .site_index #map {
 571   position: absolute;
 572   top: 0px;
 573   bottom: 0px;
 574   left: 0px;
 575   right: 0px;
 576 }
 577
 578 .site_export #map {
 579   position: absolute;
 580   top: 0px;
 581   bottom: 0px;
 582   left: 0px;
 583   right: 0px;
 584 }
 585
 586 /* Rules for the edit page */
 587
 588 .site_edit #map {
 589   position: absolute;
 590   top: 0px;
 591   bottom: 0px;
 592   left: 0px;
 593   right: 0px;
 594 }
 595
 596 /* Rules for the changeset list shown by the history tab etc */
 597
 598 #changeset_list_container {
 599   position: relative;
 600 }
 601
 602 #changeset_list {
 603   width: 50%;
 604   font-size: small;
 605   border-collapse: collapse;
 606   border-width: 0px;
 607   margin-top: 1px;
 608   margin-bottom: 1px;
 609 }
 610
 611 #changeset_list td {
 612   vertical-align: top;
 613   padding: 3px;
 614 }
 615
 616 #changeset_list .date {
 617   white-space: nowrap;
 618 }
 619
 620 #changeset_list .user {
 621   white-space: nowrap;
 622 }
 623
 624 #changeset_list .area {
 625   white-space: nowrap;
 626 }
 627
 628 #changeset_list .selected {
 629   background-color: rgb(255, 255, 160);
 630   background-color: rgba(255, 255, 85, 0.5);
 631 }
 632
 633 #changeset_list_map {
 634   position: absolute;
 635   top: 0px;
 636   bottom: 0px;
 637   width: 49%;
 638   min-height: 400px;
 639   border: solid 1px black;
 640 }
 641
 642 /* Rules for the data browser */
 643
 644 #browse_navigation {
 645   width: 250px;
 646   text-align: center;
 647 }
 648
 649 table.browse_details th {
 650   white-space: nowrap;
 651 }
 652
 653 #browse_map {
 654   width: 250px;
 655 }
 656
 657 #browse_map #small_map {
 658   width: 250px;
 659   height: 300px;
 660   border: solid 1px black;
 661 }
 662
 663 #browse_map .geolink {
 664   display: none;
 665 }
 666
 667 /* Rules for the trace list shown by the traces tab etc */
 668
 669 #trace_list {
 670   font-size: small;
 671   border-collapse: collapse;
 672   border-width: 0px;
 673 }
 674
 675 #trace_list .trace_summary {
 676   font-size: 12px;
 677   color: gray;
 678 }
 679
 680 #trace_list .trace_pending {
 681   color: red;
 682 }
 683
 684 #trace_list .trace_public {
 685   color: green;
 686 }
 687
 688 #trace_list .trace_identifiable {
 689   color: green;
 690 }
 691
 692 #trace_list .trace_trackable {
 693   color: red;
 694 }
 695
 696 #trace_list .trace_private {
 697   color: red;
 698 }
 699
 700 /* Rules for the user list */
 701
 702 #user_list {
 703   width: 100%;
 704   font-size: small;
 705 }
 706
 707 #user_list tr {
 708   vertical-align: middle;
 709 }
 710
 711 #user_list p {
 712   margin-top: 0px;
 713   margin-bottom: 0px;
 714 }
 715
 716 #user_list_actions {
 717   margin-top: 10px;
 718 }
 719
 720 /* Rules for the new diary entry page */
 721
 722 .diary_entry div#map {
 723   position: relative;
 724   width: 90%;
 725   height: 400px;
 726   border: 1px solid #ccc;
 727   display: none;
 728 }
 729
 730 /* Rules for the login page */
 731
 732 #login_wrapper div {
 733   margin: 5px;
 734   padding: 15px;
 735   border-radius: 15px;
 736   -moz-border-radius: 15px;
 737 }
 738
 739 #login_login {
 740   background-color: #f5f5ff;
 741   border: 1px solid #f3f3ff;
 742   border-radius: 15px;
 743   -moz-border-radius: 15px;
 744 }
 745
 746 #login_login h1 {
 747   margin-top: 5px;
 748 }
 749
 750 table#login_openid_buttons {
 751   padding-bottom: 10px;
 752 }
 753
 754 #login_openid_buttons td {
 755   padding-left: 10px;
 756   padding-right: 10px;
 757   padding-top: 5px;
 758   padding-bottom: 5px;
 759 }
 760
 761 #login_openid_buttons img {
 762   border: 0;
 763 }
 764
 765 #login_signup form.button-to div {
 766   margin: 0px;
 767   padding: 0px;
 768 }
 769
 770 /* Rules for the account confirmation page */
 771
 772 div#contributorTerms {
 773   border: 1px solid black;
 774   padding: 4px;
 775   overflow: auto;
 776   width: 95%;
 777   height: 400px;
 778 }
 779
 780 div#slim_content div#contributorTerms {
 781   width: auto;
 782 }
 783
 784 div#contributorTerms p#first {
 785   margin-top: 0px;
 786 }
 787
 788 div#contributorTerms p#last {
 789   margin-bottom: 0px;
 790 }
 791
 792 div#contributorTerms ol {
 793   margin-bottom: 0px;
 794 }
 795
 796 div#contributorTerms img {
 797   display: block;
 798   margin-left: auto;
 799   margin-right: auto;
 800   margin-top: 10%;
 801 }
 802
 803 form#termsForm {
 804   width: 95%;
 805   margin-bottom: 3em;
 806 }
 807
 808 div#slim_content form#termsForm {
 809   width: auto;
 810 }
 811
 812 p#contributorGuidance {
 813   background-color: #f5f5ff;
 814   border: 1px solid #f3f3ff;
 815   border-radius: 15px;
 816   -moz-border-radius: 15px;
 817   padding: 10px;
 818 }
 819
 820 /* Rules for the account settings page */
 821
 822 #accountForm td {
 823   padding-bottom: 10px;
 824 }
 825
 826 #accountForm .user_map {
 827   position: relative;
 828   width: 500px;
 829   height: 400px;
 830   border: 1px solid #ccc;
 831 }
 832
 833 #accountImage td {
 834   padding-bottom: 0px;
 835 }
 836
 837 .nohome .location {
 838   display: none;
 839 }
 840
 841 #homerow .message {
 842   display: none;
 843 }
 844
 845 .nohome .message {
 846   display: inline !important;
 847 }
 848
 849 #accountForm input[type=submit] {
 850   margin-top: 15px;
 851 }
 852
 853 /* Rules for the user view */
 854
 855 .user_view .user_map {
 856   position: relative;
 857   width: 400px;
 858   height: 400px;
 859   border: 1px solid #ccc;
 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 }