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