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