]> git.openstreetmap.org Git - rails.git/blob - app/assets/stylesheets/common.css.scss
Restore borders to maps on various pages
[rails.git] / 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 }