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