]> git.openstreetmap.org Git - rails.git/blob - app/assets/stylesheets/common.css.scss
Replace standard PanZoomBar control with new SimplePanZoom control
[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 .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 .sidebar-alert {
104   padding: 4px 5px 4px 5px;
105   border-top: 1px solid #ccc;
106   margin-top: 4px;
107   margin-bottom: -4px;
108   background: #e00;
109   font-size: 13px;
110   font-weight: bold;
111   line-height: 17px;
112
113   p {
114     margin: 5px;
115   }
116 }
117
118 /*
119  * Rules for notice boxes shown in the left sidebar when important, but
120  * non-critical information needs to be conveyed such as notices about
121  * donation drives.
122  */
123
124 .sidebar-notice {
125   padding: 4px 5px 4px 5px;
126   border-top: 1px solid #ccc;
127   margin-top: 4px;
128   margin-bottom: -4px;
129   background: #ea0;
130   font-size: 13px;
131   line-height: 17px;
132
133   p {
134     margin: 5px;
135   }
136 }
137
138 /* Rules for the menu displayed in the left sidebar */
139
140 .left_menu {
141   padding: 5px 10px;
142   margin: 4px 0;
143   border-top: 1px solid #ccc;
144   border-bottom: 1px solid #ccc;
145   line-height: 20px;
146   font-size: 14px;
147   font-weight: bold;
148 }
149
150 .left_menu h1 {
151   font-style: normal;
152   font-size: 15px;
153 }
154
155 .left_menu ul {
156   margin: 0px;
157   list-style-type: none;
158 }
159
160 .left_menu li {
161   margin: 0px;
162   padding: 0px;
163 }
164
165 /* submenus */
166 .left_menu ul li ul {
167   font-weight: normal;
168   line-height: 15px;
169   font-size: 12px;
170 }
171
172 .left_menu a {
173   color: #000;
174 }
175
176 /* Rules for SOTM advert */
177
178 #sotm {
179   width: 180px;
180   min-width: 180px;
181   margin: 5px;
182   padding: 0px;
183   border: 0px;
184   background: #fff;
185 }
186
187 /*
188  * Rules for "optional boxes" which appear in the left sidebar on
189  * certain pages. Current users are the seach box on the main page
190  * and the tag cloud on the traces pages.
191  */
192
193 .optionalbox {
194   padding: 5px 10px;
195   margin: 4px 0;
196   border-top: 1px solid #ccc;
197 }
198
199 .optionalbox h1 {
200   font-size: 14px;
201   font-weight: bold;
202   line-height: 20px;
203   margin: 0px;
204   vertical-align: bottom;
205 }
206
207 /* Rules for the search box */
208
209 .whereami {
210   line-height: 20px;
211   vertical-align: bottom;
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: #ccc;
302   cursor: default;
303 }
304
305 #tabnav a:link.disabled:hover,
306 #tabnav a:visited.disabled:hover,
307 #tabnav a:link:hover.disabled:hover,
308 #tabnav a:visited:hover.disabled:hover {
309   text-decoration: none;
310 }
311
312 .count-number {
313   padding: 2px 5px;
314   border-radius: 3px;
315   background: #eee;
316   margin: 0 2px;
317   font-size: 11px;
318   color: #333;
319 }
320
321 /* Rules for greeting bar in the top right corner */
322
323 #greeting {
324   height: 28px;
325   margin: 0px;
326   font-size: 13px;
327   line-height: 28px;
328 }
329
330 .greeting-bar-unread {
331   font-weight: bold;
332 }
333
334 /* Rules for the message shown in place of the map when javascript is disabled */
335
336 #noscript {
337   z-index: 20000000;
338   position: absolute;
339   top: 15px;
340 }
341
342 /* Rules for OpenLayers maps */
343
344 #map {
345   margin: 0px;
346   padding: 0px;
347 }
348
349 .olControlAttribution {
350   bottom: 15px !important;
351   left: 0px !important;
352   right: 0px !important;
353   text-align: center;
354 }
355
356 #permalink {
357   z-index: 10000;
358   position: absolute;
359   bottom: 0px;
360   right: 0px;
361   padding: 5px;
362   background:#fff;
363   text-align: right;
364   font-size: 12px;
365 }
366
367 #permalink a {
368   padding: 5px;
369 }
370
371 /* Rules for edit menu */
372
373 .menuicon {
374   padding: 5px;
375
376   &:hover {
377     background: #eee;
378     text-decoration: none !important;
379   }
380 }
381
382 .menu {
383   display: none;
384   z-index: 10000;
385   position: absolute;
386   background-color: #ffffff;
387   border: 1px solid #cccccc;
388   border-top: 0px;
389 }
390
391 .menu ul {
392   margin: 0px;
393   padding: 0px;
394 }
395
396 .menu li {
397   padding: 2px 5px;
398   margin: 0px;
399   list-style-type: none;
400   border-top: 1px solid #eee;
401   white-space: nowrap;
402 }
403
404 /* Rules for attribution text under the main map shown on printouts */
405
406 #attribution {
407   display: none;
408 }
409
410 .attribution_notice {
411   text-align: center;
412 }
413
414 /* Rules for the popout map sidebar */
415
416 #sidebar {
417   display: none;
418   position: absolute;
419   margin: 0px;
420   padding: 0px;
421   width: 30%;
422   top: 0px;
423   bottom: 0px;
424 }
425
426 #sidebar #sidebar_content {
427   overflow: auto;
428   position: absolute;
429   font-size: 13px;
430   line-height: 15px;
431   top: 29px;
432   bottom: 0px;
433   left: 0px;
434   right: 0px;
435 }
436
437 #sidebar .sidebar_title {
438   margin: 0px;
439   padding: 3px 6px 4px 6px;
440   height: 29px;
441   font-size: 14px;
442   line-height: 15px;
443   background: #bbb;
444 }
445
446 /* Rules for the map key which appears in the popout sidebar */
447
448 #mapkey h3 {
449   font-size: 110%;
450   font-weight: normal;
451   text-align: center;
452 }
453
454 #mapkey .mapkey-table {
455   padding-left: 5px;
456   padding-right: 5px;
457 }
458
459 #mapkey .mapkey-table-key {
460 }
461
462 #mapkey .mapkey-table-value {
463   font-size: 90%;
464 }
465
466 /* Rules for search results which appear in the popout sidebar */
467
468 .search_searching {
469   margin-top: 5px;
470   margin-bottom: 5px;
471 }
472
473 .search_results_heading {
474   margin: 0px;
475   padding: 2px 5px;
476   border-bottom: 1px solid #ccc;
477   font-weight: bold;
478 }
479
480 .search_results_entry {
481   margin: 0px;
482   padding: 2px 5px;
483 }
484
485 .search_results_error {
486   margin: 0px;
487   padding: 2px 6px 0px;
488   color: #f00;
489 }
490
491 /* Rules for data browser information which appears in the popout sidebar */
492
493 .browse_heading {
494   margin: 0px;
495   padding: 3px 6px;
496   border: 1px solid #ccc;
497   background: #ddd;
498 }
499
500 .browse_details {
501   margin: 0px;
502   padding: 0px 6px;
503 }
504
505 /* Rules for export information which appears in the popout sidebar */
506
507 .export_heading {
508   margin: 0px;
509   padding: 2px 5px;
510   border-bottom: 1px solid #ccc;
511   font-weight: bold;
512 }
513
514 .export_bounds {
515   width: 100%;
516   text-align: center;
517 }
518
519 .export_bound {
520   margin: 5px;
521 }
522
523 .export_details {
524   padding: 2px 6px;
525 }
526
527 #export_osm {
528   display: none;
529 }
530
531 #export_mapnik {
532   display: none;
533 }
534
535 #export_osmarender {
536   display: none;
537 }
538
539 .export_hint {
540   padding: 0px 12px;
541   font-style: italic;
542 }
543
544 .export_buttons {
545   width: 100%;
546   text-align: center;
547 }
548
549 /* Rules for the main content area */
550
551 #content {
552   padding: 10px;
553   margin: 0px;
554   position: absolute;
555   bottom: 0px;
556 }
557
558 #content.site_index,
559 #content.site_edit,
560 #content.site_export {
561   border: 0px;
562   padding: 0px;
563 }
564
565 #slim_container {
566   width: 100%;
567 }
568
569 #slim_container_content {
570   max-width: 50em;
571   background-color: #FFFFFF;
572   margin: 10px auto;
573   padding: 3px;
574   border-radius: 25px;
575   -moz-border-radius: 25px;
576   border: 1px solid #e6e6e6;
577 }
578
579 #slim_content {
580   margin: 10px;
581   margin-top: 90px;
582   max-width: 50em;
583 }
584
585 #slim_header {
586   margin: 10px;
587   position: absolute;
588   top: 0px;
589 }
590
591 #slim_header img {
592   vertical-align: middle;
593   margin-bottom: 5px;
594 }
595
596 /* Rules for the home page */
597
598 .site_index #map {
599   position: absolute;
600   top: 0px;
601   bottom: 0px;
602   left: 0px;
603   right: 0px;
604 }
605
606 .site_export #map {
607   position: absolute;
608   top: 0px;
609   bottom: 0px;
610   left: 0px;
611   right: 0px;
612 }
613
614 /* Rules for the edit page */
615
616 .site_edit #map {
617   position: absolute;
618   top: 0px;
619   bottom: 0px;
620   left: 0px;
621   right: 0px;
622 }
623
624 /* Rules for the changeset list shown by the history tab etc */
625
626 #changeset_list_container {
627   position: relative;
628 }
629
630 #changeset_list {
631   width: 50%;
632   font-size: small;
633   border-collapse: collapse;
634   border-width: 0px;
635   margin-top: 1px;
636   margin-bottom: 1px;
637 }
638
639 #changeset_list td {
640   vertical-align: top;
641   padding: 3px;
642 }
643
644 #changeset_list .date {
645   white-space: nowrap;
646 }
647
648 #changeset_list .user {
649   white-space: nowrap;
650 }
651
652 #changeset_list .area {
653   white-space: nowrap;
654 }
655
656 #changeset_list .selected {
657   background-color: rgb(255, 255, 160);
658   background-color: rgba(255, 255, 85, 0.5);
659 }
660
661 #changeset_list_map {
662   position: absolute;
663   top: 0px;
664   bottom: 0px;
665   width: 49%;
666   min-height: 400px;
667   border: solid 1px black;
668 }
669
670 /* Rules for the data browser */
671
672 #browse_navigation {
673   width: 250px;
674   text-align: center;
675 }
676
677 table.browse_details th {
678   white-space: nowrap;
679 }
680
681 #browse_map {
682   width: 250px;
683 }
684
685 #browse_map #small_map {
686   width: 250px;
687   height: 300px;
688   border: solid 1px black;
689 }
690
691 #browse_map .geolink {
692   display: none;
693 }
694
695 /* Rules for the trace list shown by the traces tab etc */
696
697 #trace_list {
698   font-size: small;
699   border-collapse: collapse;
700   border-width: 0px;
701 }
702
703 #trace_list .trace_summary {
704   font-size: 12px;
705   color: gray;
706 }
707
708 #trace_list .trace_pending {
709   color: red;
710 }
711
712 #trace_list .trace_public {
713   color: green;
714 }
715
716 #trace_list .trace_identifiable {
717   color: green;
718 }
719
720 #trace_list .trace_trackable {
721   color: red;
722 }
723
724 #trace_list .trace_private {
725   color: red;
726 }
727
728 /* Rules for the user list */
729
730 #user_list {
731   width: 100%;
732   font-size: small;
733 }
734
735 #user_list tr {
736   vertical-align: middle;
737 }
738
739 #user_list p {
740   margin-top: 0px;
741   margin-bottom: 0px;
742 }
743
744 #user_list_actions {
745   margin-top: 10px;
746 }
747
748 /* Rules for the new diary entry page */
749
750 .diary_entry div#map {
751   position: relative;
752   width: 90%;
753   height: 400px;
754   border: 1px solid #ccc;
755   display: none;
756 }
757
758 /* Rules for the login page */
759
760 #login_wrapper div {
761   margin: 5px;
762   padding: 15px;
763   border-radius: 15px;
764   -moz-border-radius: 15px;
765 }
766
767 #login_login {
768   background-color: #f5f5ff;
769   border: 1px solid #f3f3ff;
770   border-radius: 15px;
771   -moz-border-radius: 15px;
772 }
773
774 #login_login h1 {
775   margin-top: 5px;
776 }
777
778 table#login_openid_buttons {
779   padding-bottom: 10px;
780 }
781
782 #login_openid_buttons td {
783   padding-left: 10px;
784   padding-right: 10px;
785   padding-top: 5px;
786   padding-bottom: 5px;
787 }
788
789 #login_openid_buttons img {
790   border: 0;
791 }
792
793 #login_signup form.button-to div {
794   margin: 0px;
795   padding: 0px;
796 }
797
798 /* Rules for the account confirmation page */
799
800 div#contributorTerms {
801   border: 1px solid black;
802   padding: 4px;
803   overflow: auto;
804   width: 95%;
805   height: 400px;
806 }
807
808 div#slim_content div#contributorTerms {
809   width: auto;
810 }
811
812 div#contributorTerms p#first {
813   margin-top: 0px;
814 }
815
816 div#contributorTerms p#last {
817   margin-bottom: 0px;
818 }
819
820 div#contributorTerms ol {
821   margin-bottom: 0px;
822 }
823
824 div#contributorTerms img {
825   display: block;
826   margin-left: auto;
827   margin-right: auto;
828   margin-top: 10%;
829 }
830
831 form#termsForm {
832   width: 95%;
833   margin-bottom: 3em;
834 }
835
836 div#slim_content form#termsForm {
837   width: auto;
838 }
839
840 p#contributorGuidance {
841   background-color: #f5f5ff;
842   border: 1px solid #f3f3ff;
843   border-radius: 15px;
844   -moz-border-radius: 15px;
845   padding: 10px;
846 }
847
848 /* Rules for the account settings page */
849
850 #accountForm td {
851   padding-bottom: 10px;
852 }
853
854 #accountForm .user_map {
855   position: relative;
856   width: 500px;
857   height: 400px; 
858   border: 1px solid #ccc;
859 }
860
861 #accountImage td {
862   padding-bottom: 0px;
863 }
864
865 .nohome .location {
866   display: none;
867 }
868
869 #homerow .message {
870   display: none;
871 }
872
873 .nohome .message {
874   display: inline !important;
875 }
876
877 #accountForm input[type=submit] {
878   margin-top: 15px;
879 }
880
881 /* Rules for the user view */
882
883 .user_view .user_map {
884   position: relative;
885   width: 400px;
886   height: 400px; 
887   border: 1px solid #ccc;
888 }
889
890 .user_view .user_map p#no_home_location {
891   position: absolute;
892   top: 0px;
893   bottom: 0px;
894   width: 90%;
895   height: 30%;
896   margin: auto 5%
897 }
898
899 /* Rules for the user map */
900
901 .user_map .olControlPanZoomBar {
902   display: none;
903 }
904
905 .user_map .olControlZoom {
906   display: block;
907 }
908
909 /* Rules for user popups on maps */
910
911 .user_popup p {
912   padding-top: 3px;
913   padding-bottom: 3px;
914   margin-top: 0px;
915   margin-bottom: 0px;
916   margin-left: 55px;
917   margin-right: 2px;
918 }
919
920 .user_popup img.user_thumbnail {
921   float: left;
922 }
923
924 /* Rules for message in/out box page */
925
926 #messages {
927   border: 1px solid #ccc;
928 }
929
930 .inbox-row-unread .inbox-subject {
931   font-weight: bold;
932 }
933
934 /* Rules for "flash" notice boxes shown at the top of the content area */
935
936 #error {
937   border: 1px solid red;
938   padding: 7px;
939   background-color: #fff0f0;
940   margin-bottom: 20px;
941   border-radius: 5px;
942   -moz-border-radius: 5px;
943 }
944
945 #warning {
946   border: 1px solid orange;
947   padding: 7px;
948   background-color: #fff6f0;
949   margin-bottom: 20px;
950   border-radius: 5px;
951   -moz-border-radius: 5px;
952 }
953
954 #notice {
955   border: 1px solid green;
956   padding: 7px;
957   background-color: #f0fff0;
958   margin-bottom: 20px;
959   border-radius: 5px;
960   -moz-border-radius: 5px;
961 }
962
963 /* Rules for highlighting fields with rails validation errors */
964
965 .field_with_errors {
966   padding: 2px;
967   background-color: red;
968   display: table;
969 }
970
971 /* Rules for rails validation error boxes */
972
973 #errorExplanation {
974   width: 400px;
975   border: 2px solid red;
976   padding: 7px;
977   padding-bottom: 12px;
978   margin-bottom: 20px;
979   background-color: #f0f0f0;
980 }
981
982 #errorExplanation h2 {
983   font-weight: bold;
984   font-size: 12px;
985   margin: -7px;
986   background-color: #c00;
987   color: #fff;
988 }
989
990 #errorExplanation p {
991   color: #333;
992   margin-bottom: 0px;
993   padding: 5px;
994 }
995
996 #errorExplanation ul li {
997   font-size: 12px;
998   list-style: square;
999 }
1000
1001 /* Rules for forms */
1002
1003 .fieldName {
1004   vertical-align: top;
1005   font-weight: bold;
1006   font-size: 12px;
1007   line-height: 20px;
1008 }
1009
1010 .minorNote {
1011   font-size: 0.8em;
1012 }
1013
1014 input[type="text"],
1015 input[type="email"],
1016 input[type="url"],
1017 input[type="password"],
1018 textarea {
1019   border: 1px solid #888;
1020 }
1021
1022 /* Rules for user images */
1023
1024 img.user_image {
1025   max-width: 100px;
1026   max-height: 100px;
1027   border: 1px solid black;
1028 }
1029
1030 img.user_thumbnail {
1031   max-width: 50px;
1032   max-height: 100px;
1033   border: 1px solid black;
1034 }
1035
1036 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
1037
1038 .nowrap {
1039   white-space: nowrap;
1040 }
1041
1042 /* Rules for geo microformats */
1043
1044 abbr.geo {
1045   border-bottom: none;
1046 }
1047
1048 /* Rules for RSS buttons */
1049
1050 .rsssmall {
1051   position: relative;
1052   top: 4px;
1053 }
1054
1055 /* Rules for doing distinct colour of alternate table rows */
1056
1057 .table0 {
1058   background: #f6f6f6;
1059 }
1060
1061 .table1 {
1062   background: #fff;
1063 }
1064
1065 /* Rules for OpenID logo */
1066
1067 .openid_logo {
1068   vertical-align: text-bottom;
1069   border: 0;
1070 }
1071
1072 /* Rules for rich text editors */
1073
1074 .richtext_container {
1075   white-space: nowrap;
1076
1077   .richtext_content {
1078     display: inline-block;
1079     vertical-align: top;
1080
1081     .richtext_preview {
1082       display: inline-block;
1083       margin-top: 1px;
1084       margin-bottom: 1px;
1085       border: 4px solid #eee;
1086       background-color: #eee;
1087       white-space: normal;
1088
1089       &.loading {
1090         background-image: image-url("loading.gif");
1091         background-repeat: no-repeat;
1092         background-position: center;
1093       }
1094
1095       > :first-child {
1096         margin-top: 0px;
1097       }
1098     }
1099   }
1100
1101   .richtext_help {
1102     display: inline-block;
1103     vertical-align: top;
1104     background-color: #ddd;
1105     padding: 5px 10px 10px 10px;
1106     font-size: 12px;
1107
1108     p {
1109       margin: 0px;
1110     }
1111
1112     th {
1113       vertical-align: top;
1114     }
1115
1116     td {
1117       font-family: fixed;
1118       line-height: 16px;
1119       padding: 0px !important;
1120     }
1121
1122     input.richtext_doedit {
1123       margin-top: 5px !important;
1124     }
1125
1126     input.richtext_dopreview {
1127       margin-top: 5px !important;
1128     }
1129   }
1130 }