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