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