]> git.openstreetmap.org Git - rails.git/blob - app/assets/stylesheets/common.scss
Merge remote-tracking branch 'upstream/pull/3301'
[rails.git] / app / assets / stylesheets / common.scss
1 @import "parameters";
2 @import "bootstrap";
3 @import "rails_bootstrap_forms";
4
5 /* Styles common to large and small screens */
6
7 /* Default rules for the body of every page */
8
9 body {
10   font-size: $typeheight;
11 }
12
13 p > img {
14   width: auto;
15   max-width: 100%;
16 }
17
18 small, aside {
19   font-size: 12px;
20 }
21
22 #container { position: relative; }
23
24 .small_icon {
25   vertical-align: middle;
26   margin-right: $lineheight/4;
27 }
28
29 [dir=rtl] { /* no-r2 */ text-align: right; }
30
31 [dir=ltr] { /* no-r2 */ text-align: left; }
32
33 /* Rules for icons */
34
35 .icon {
36   display: inline-block;
37   vertical-align: top;
38   width: 20px;
39   height: 20px;
40   background: transparent image-url("sprite.png") no-repeat 0 0;
41   background-image: image-url("sprite.svg");
42   text-indent: -9999px;
43   overflow: hidden;
44 }
45
46 .icon.search      { /* no-r2 */ background-position: 0 0; }
47 .icon.donate      { /* no-r2 */ background-position: -20px 0; }
48 .icon.zoomin      { /* no-r2 */ background-position: -40px 0; }
49 .icon.zoomout     { /* no-r2 */ background-position: -60px 0; }
50 .icon.geolocate   { /* no-r2 */ background-position: -80px 0; }
51 .active .icon.geolocate   { /* no-r2 */ background-position: -80px -20px; }
52 .icon.layers      { /* no-r2 */ background-position: -100px 0; }
53 .icon.key         { /* no-r2 */ background-position: -120px 0; }
54 .icon.share       { /* no-r2 */ background-position: -140px 0; }
55 .icon.clipboard   { /* no-r2 */ background-position: -160px 0; }
56 .icon.link        { /* no-r2 */ background-position: -180px 0; }
57 .icon.close       { /* no-r2 */ background-position: -200px 0; }
58 .icon.close:hover { /* no-r2 */ background-position: -200px -20px; }
59 .icon.check       { /* no-r2 */ background-position: -220px 0; }
60 .icon.note        { /* no-r2 */ background-position: -240px 0; }
61 .icon.note.grey   { /* no-r2 */ background-position: -240px -20px; }
62 .icon.query       { /* no-r2 */ background-position: -260px 0; }
63
64 /* Utility for de-emphasizing content */
65
66 .text-muted a {
67   color: $blue;
68 }
69
70 /* Rules for borders */
71 /* These add additional colours to those provided by bootstrap */
72 .border-grey {
73   border-color: $grey !important;
74 }
75
76 .border-lightgrey {
77   border-color: $lightgrey !important;
78 }
79
80 /* Rules for the header */
81
82 #menu-icon {
83   display: none !important;
84   float: right;
85   background: image-url("menu-icon.png") no-repeat;
86   background-size: 30px 30px;
87   display: block;
88   width: 30px;
89   height: 30px;
90   margin: 14px 10px 0 0;
91   opacity: 0.6;
92 }
93
94 header {
95   height: $headerHeight;
96   position: relative;
97   z-index: 1001;
98   font-size: 14px;
99
100   h1, nav, nav > ul, nav > ul > li {
101     display: inline-block;
102   }
103
104   > * {
105     height: 100%;
106     padding: $lineheight/2;
107   }
108
109   h1, nav.primary {
110     float: left;
111   }
112
113   a, a:hover {
114     text-decoration: none;
115   }
116
117   img.logo {
118     width: 30px;
119     height: 30px;
120     margin-top: -2px;
121     vertical-align: middle;
122   }
123
124   h1 {
125     font-size: 18px;
126     font-weight: 600;
127     line-height: 1.2;
128     margin: 0;
129     padding-top: 15px;
130
131     a {
132       color: #000;
133     }
134
135     a:hover {
136       color: #000;
137     }
138   }
139
140   .btn {
141     font-size: 14px;
142   }
143 }
144
145
146 nav.primary {
147   .btn-outline-primary {
148     @include button-outline-variant($green, $color-hover: $white, $active-color: $white);
149   }
150
151   .disabled {
152     .btn-outline-primary {
153       color: $grey;
154       cursor: default;
155
156       .caret {
157         border-top-color: $grey;
158       }
159
160       &:hover {
161         background-color: lighten($green, 30%);
162       }
163     }
164   }
165
166   // Small tweaks to the toggle to stop the primary colour showing through
167   // when the menu is shown
168   .show > .btn-outline-primary.dropdown-toggle {
169     background-color: $green;
170     border-color: $green;
171
172     &:focus {
173       box-shadow: 0 0 0 0.2rem fade-out($green, 0.5);
174     }
175   }
176 }
177
178 nav.secondary {
179   position: absolute;
180   right: 0;
181
182   .nav-link {
183     padding: 0.2rem;
184     color: $darkgrey;
185   }
186
187   > ul li.current a {
188     color: darken($darkgrey, 25%);
189   }
190
191   .login-menu {
192     .btn-outline-secondary {
193       @include button-outline-variant($darkgrey, $color-hover: $white, $active-color: $white);
194     }
195   }
196
197   .user-menu {
198     .btn-outline-secondary {
199       @include button-outline-variant($darkgrey, $color-hover: $darkgrey, $active-background: white, $active-border: $darkgrey);
200       border-color: $grey;
201       &:hover {
202         border-color: $grey;
203       }
204     }
205   }
206
207   #inboxanchor {
208     display: inline-block;
209     height: 25px;
210     margin: 3px 0 3px 3px;
211     background-color: lighten($grey, 10%);
212     line-height: 20px;
213     border-radius: 3;
214   }
215
216   .dropdown-menu {
217     .count-number {
218       font-size: 14px;
219     }
220   }
221 }
222
223 nav.primary, nav.secondary {
224   .dropdown-item {
225     &:hover, &:active {
226       background-color: $green;
227       color: white;
228     }
229   }
230 }
231
232 #compact-secondary-nav {
233   display: none;
234 }
235
236 body.compact-nav {
237   #compact-secondary-nav {
238     display: inline-block;
239   }
240   .compact-hide {
241     display: none;
242   }
243 }
244
245 body.small-nav {
246   #menu-icon {
247     display: inline-block !important;
248   }
249
250   nav.primary,
251   nav.secondary {
252     float: none !important;
253     position: relative;
254     display: block;
255     clear: both;
256   }
257
258   header {
259     height: auto;
260     min-height: $headerHeight;
261     background: #fff;
262
263     &.closed nav {
264       display: none;
265     }
266
267     .search_forms {
268       display: block;
269     }
270   }
271
272   #sidebar .search_forms,
273   #edit_tab,
274   #export_tab {
275     display: none;
276   }
277
278   nav.primary {
279     padding: 0;
280
281     ul, li {
282       border: none;
283       border-radius: 0;
284       width: 100%;
285     }
286
287     ul {
288       border-top: 1px solid #eee;
289       li {
290         border-bottom: 1px solid #eee;
291         border-right: none;
292         > a {
293           border-radius: 0;
294           width: 100%;
295           text-align: center;
296           font-size: 15px;
297         }
298       }
299     }
300
301     .btn-group {
302       width: 100%;
303       padding: 10px;
304     }
305   }
306
307   nav.secondary {
308     .user-menu {
309       width: 100%;
310     }
311   }
312
313   #compact-secondary-nav {
314     display: none;
315   }
316
317   .compact-hide {
318     display: inline-block;
319   }
320
321   .overlay-sidebar #sidebar .welcome.visible {
322     display: none;
323   }
324
325   .overlay-sidebar #sidebar #banner {
326     display: none;
327   }
328
329   .leaflet-top.leaflet-right {
330     top: 10px !important;
331   }
332 }
333
334 /* Utility for styling notification numbers */
335
336 .count-number {
337   padding: 2px $lineheight/4;
338   border-radius: 2px;
339   background: lighten($green, 30%);
340   margin: 0 2px;
341   font-size: 11px;
342   color: #333;
343 }
344
345 /* Rules for the message shown in place of the map when javascript is disabled */
346
347 #noscript {
348   z-index: 20000000;
349   margin-left: 400px;
350   margin-top: 50px;
351 }
352
353 /* Rules for Leaflet maps */
354
355 .leaflet-control .control-button {
356   display: block;
357   height: 40px;
358   width: 40px;
359   background-color: #333;
360   background-color: rgba(0,0,0,.6);
361   outline: none;
362
363   &:hover,
364   &:focus {
365     background-color: black;
366   }
367
368   &.disabled,
369   &.leaflet-disabled {
370     background-color: #333;
371     background-color: rgba(0,0,0,.5);
372     cursor: default;
373   }
374
375   &.active {
376     background-color: $vibrant-green;
377   }
378
379   &-first {
380     border-start-start-radius: 4px;
381   }
382
383   &-last {
384     border-end-start-radius: 4px;
385     margin-bottom: 10px;
386   }
387
388   .icon {
389     margin: 10px;
390   }
391 }
392
393 /* Rules for the sidebar and main map area */
394
395 .map-layout {
396   #content {
397     overflow: hidden;
398     position: absolute;
399     top: $headerHeight;
400     bottom: 0;
401     width: 100%;
402   }
403
404   #sidebar, #map {
405     position: relative;
406     height: 100%;
407     overflow-x: hidden;
408     overflow-y: auto;
409   }
410
411   #sidebar {
412     float: left;
413     width: $sidebarWidth;
414     background: #fff;
415
416     #sidebar_loader {
417       display: none;
418     }
419
420     #sidebar_content {
421       padding: $spacer;
422     }
423
424     > div {
425       position: relative;
426       float: left;
427       clear: both;
428       width: 100%;
429     }
430   }
431
432   .overlay-sidebar #sidebar {
433     position: absolute;
434     z-index: 1000;
435     height: auto;
436     overflow: hidden;
437
438     #banner {
439       display: block;
440     }
441
442     .welcome {
443       display: none;
444
445       &.visible {
446         display: block;
447       }
448     }
449
450     #sidebar_content {
451       display: none;
452     }
453   }
454
455   .welcome {
456     display: none;
457
458     p {
459       font-size: 110%;
460       font-weight: 300;
461     }
462   }
463
464   #banner {
465     display: none;
466
467     img {
468       display: block;
469       width: $sidebarWidth;
470     }
471   }
472
473   #map {
474     height: 100%;
475     overflow: hidden;
476
477     &.query-active {
478       cursor: help;
479     }
480
481     &.query-disabled {
482       cursor: not-allowed;
483     }
484
485     .leaflet-marker-draggable {
486       cursor: move;
487     }
488   }
489
490   #map-ui {
491     display: none;
492     position: relative;
493     float: right;
494     width: 250px;
495     height: 100%;
496     background: white;
497     overflow: auto;
498
499     .section {
500       border-bottom: 1px solid $grey;
501       padding: 10px 20px;
502     }
503   }
504 }
505
506 @include media-breakpoint-down(md) {
507   body.map-layout {
508     #sidebar, #map {
509       position: relative;
510       overflow-x: hidden;
511       width: 100%;
512       height: 50%;
513     }
514
515     #map-ui {
516       z-index: 9999;
517       width: 100%;
518       height: 50%;
519       overflow-y: scroll;
520     }
521
522     .overlay-sidebar {
523       #sidebar {
524         position: absolute;
525         width: 350px;
526         height: auto;
527         overflow: hidden;
528       }
529
530       #map, #map-ui {
531         height: 100%;
532       }
533     }
534   }
535 }
536
537 .layers-ui,
538 .share-ui {
539   li:last-child {
540     margin-bottom: 0;
541   }
542 }
543
544 .layers-ui {
545   .base-layers {
546     .leaflet-container {
547       width: 100%;
548       height: 50px;
549       cursor: pointer;
550     }
551
552     li  {
553       overflow: hidden;
554       border-radius: 3px;
555       border: 2px solid #fff;
556       margin-bottom: 8px;
557       position: relative;
558       transition: border-color 0.08s ease-in;
559
560       label {
561         position: absolute;
562         top: 0;
563         left: 0;
564         padding: 2px 6px;
565         border-bottom-right-radius: 3px;
566         cursor: pointer;
567         font-weight: 600;
568         font-size: 16px;
569         text-stroke: 2px #fff;
570         background: rgba(255,255,255,.9);
571         z-index: 1000;
572         input[type="radio"] {
573           display: none;
574         }
575       }
576
577       &.active { border-color: darken($green, 10%); }
578       &:hover {
579         border-color: $grey;
580         &.active { border-color: darken($green, 20%); }
581       }
582     }
583   }
584
585   .overlay-layers {
586     p {
587       font-size: 13px;
588       margin-bottom: 8px;
589     }
590     li.disabled { color: $darkgrey; }
591   }
592 }
593
594 .share-ui {
595   .share-tab {
596     display: none;
597   }
598
599   .share-link {
600     input[type=text],
601     textarea {
602       width: 100%;
603       font-family: monospace;
604       font-size: small;
605       line-height: 1.3;
606     }
607   }
608
609   .share-image {
610     label {
611       margin-right: 10px;
612     }
613   }
614
615   #embed_html {
616     resize: vertical;
617   }
618
619   #mapnik_scale {
620     width: 100px;
621   }
622 }
623
624 .leaflet-top {
625   top: $lineheight/2 !important;
626   .leaflet-control {
627     margin-right: 0px !important;
628     margin-top: 0px !important;
629   }
630 }
631
632 .leaflet-popup-scrolled {
633   padding-right: $lineheight;
634   border-bottom: 0px !important;
635   border-top: 0px !important;
636 }
637
638 .leaflet-popup-content-wrapper {
639   border-radius: 4px !important;
640 }
641
642 /* Rules for attribution text under the main map shown on printouts */
643
644 #attribution {
645   display: none;
646
647   table {
648     width: 100%
649   }
650 }
651
652 .attribution_license,
653 .attribution_project {
654   text-align: left;
655 }
656
657 .attribution_notice {
658   text-align: center;
659 }
660
661 .donate-attr { color: darken($green, 10%) !important; }
662
663 /* Rules for the sidebar */
664
665 .sidebar_heading {
666   position: relative;
667   padding: $lineheight/2 $lineheight;
668   // background: $offwhite;
669   // border-bottom: 1px solid $grey;
670 }
671
672 #browse_status {
673   input {
674     display: block;
675     margin-left: auto;
676     margin-right: auto;
677   }
678
679   > div {
680    padding: $spacer;
681   }
682 }
683
684 /* Temporary label size override until we remove site-wide font customisation */
685
686 form {
687   label {
688     font-size: 16px;
689   }
690 }
691
692 /* Stop bootstrap 5 from floating legends when they don't need to be */
693 legend {
694   float: none;
695 }
696
697 /* Override the text colour for primary and secondary buttons, to match our
698    bootstrap 4 colours. Note this has accessibility issues, which is why
699    bootstrap 5 calculates black as the appropriate colour, and we should
700    reconsider our colours at some point with that in mind. */
701
702 .btn-primary {
703   @include button-variant($primary, $primary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
704 }
705
706 .btn-secondary {
707   @include button-variant($secondary, $secondary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
708 }
709
710 .btn-outline-secondary {
711   @include button-outline-variant($secondary, $color-hover: $white, $active-color: $white);
712 }
713
714 /* Rules for the search and direction forms */
715
716 header .search_forms,
717 .directions_form {
718   display: none;
719 }
720
721 /* Rules for the map key which appears in the popout sidebar */
722
723 #mapkey {
724  .mapkey-table-key img {
725     display: block;
726     margin-left: auto;
727     margin-right: auto;
728   }
729 }
730
731 /* Rules for search sidebar */
732
733 #sidebar .search_results_entry {
734   ul li {
735     cursor: pointer;
736     &.selected { background: $list-highlight; }
737   }
738
739   .search_more .loader {
740     display: none;
741   }
742 }
743
744 .search_results_error {
745   color: #f00;
746   padding: 10px 20px;
747 }
748
749 /* Rules for routing */
750
751 div.direction {
752   background-image: image-url('routing-sprite.png');
753   width: 20px;
754   height: 20px;
755   background-repeat: no-repeat;
756 }
757 @for $i from 0 through 25 {
758 div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
759 }
760
761 td.instruction, td.distance {
762     padding-top: $lineheight/5;
763     padding-bottom: $lineheight/5;
764     border-bottom: 1px solid $grey;
765 }
766 td.distance {
767     color: $darkgrey;
768     text-align: right;
769     font-size: x-small;
770 }
771 tr.turn {
772     cursor: pointer;
773 }
774 tr.turn:hover {
775     background: $list-highlight;
776 }
777
778 .routing_marker { width: 15px; cursor: move; }
779
780 /* Rules for entity history */
781
782 #sidebar_content {
783   .browse_details {
784     position: relative;
785     border-bottom: $keyline;
786   }
787 }
788
789 .browse_status {
790   display: none;
791 }
792
793 /* Rules for the history sidebar */
794
795 #sidebar .changesets {
796   li {
797     &.selected { background: $list-highlight; }
798     /* color is derived from changeset bbox fillColor in history.js */
799
800     a.stretched-link > span, a:not(.stretched-link), [title] {
801       position: relative;
802       z-index: 2; /* needs to be higher than Bootstrap's stretched link ::after z-index */
803     }
804   }
805
806   .comments {
807     color: $darkgrey;
808   }
809
810   .comments-0 {
811     opacity: 0.5;
812   }
813
814   .changeset_more .loader {
815     display: none;
816     width: 100%;
817   }
818 }
819
820 /* Rules for the browse sidebar */
821
822 #sidebar_content {
823   .browse-section {
824     padding-bottom: $spacer;
825     margin-bottom: $spacer;
826     border-bottom: 1px solid $grey;
827
828     h4:first-child {
829       word-wrap: break-word;
830     }
831   }
832
833   .browse-section:last-of-type {
834     border-bottom: none;
835   }
836
837   .browse-tag-list {
838     background-color: $offwhite;
839     table-layout: fixed;
840     border-collapse: separate;
841     border-spacing: 0;
842     width: 100%;
843     margin-bottom: $spacer;
844
845     th, td {
846       border-bottom: 1px solid $grey;
847     }
848
849     tr:last-child th, tr:last-child td {
850       border-bottom: 0;
851     }
852
853     .browse-tag-k,
854     .browse-tag-v {
855       width: 50%;
856       padding: 6px 10px;
857       word-wrap: break-word;
858       white-space: pre-wrap;
859     }
860
861     .browse-tag-k {
862       font-weight: 500;
863       background-color: $offwhite;
864     }
865
866     .browse-tag-v {
867       border-left: 1px solid $grey;
868       background-color: #fff;
869     }
870
871     .colour-preview-box {
872       float: right;
873       width: 14px;
874       height: 14px;
875       margin: 4px 0px;
876       border: 1px solid rgba(0, 0, 0, .1);
877       // add color via inline css on element: background-color: <tag value>;
878     }
879   }
880
881   .note-comments li, .changeset-comments li {
882     margin: $lineheight/2 0;
883
884     p {
885       margin: 10px 6px 0 6px;
886       line-height: 1.5;
887     }
888   }
889
890   .subscribe-buttons input {
891     font-size: 90%;
892     line-height: 15px;
893     min-height: 20px;
894   }
895
896   span.action-button:hover {
897     cursor: pointer;
898     text-decoration: underline;
899   }
900
901   .note-description {
902     overflow: hidden;
903     margin: 0 0 10px 10px;
904   }
905
906   .query-results {
907     display: none;
908
909     ul {
910       li {
911         &.query-result {
912           cursor: pointer;
913         }
914
915         &.selected {
916           background: $list-highlight;
917         }
918       }
919     }
920   }
921 }
922
923 /* Bootstrap buttons don't have any vertical margin, so
924    they touch when adjacent buttons wrap onto a new line
925    e.g. wide form buttons on a narrow sidebar */
926
927 .btn-wrapper {
928   > .btn {
929     margin-bottom: $spacer * 0.25;
930   }
931 }
932
933 /* Rules for export sidebar */
934
935 .export_form {
936   .export_area_inputs,
937   .export_button {
938     text-align: center;
939   }
940
941   .export_area_inputs {
942     margin-bottom: $spacer;
943     input[type="text"] {
944       width: 100px;
945       text-align: center;
946     }
947   }
948
949   .export_boxy {
950     background: $lightgrey;
951
952     #maxlat { margin-top: -1px; }
953     #minlon {
954       float: left;
955       /* no-r2 */ margin-left: -1px;
956     }
957     #maxlon {
958       float: right;
959       /* no-r2 */ margin-right: -1px;
960     }
961     #minlat { margin-bottom: -1px; }
962   }
963
964   .export_bound {
965     margin: $lineheight/4;
966   }
967
968   dl {
969     padding-left: $lineheight/2;
970     dd {
971       margin-left: 0;
972       margin-bottom: 10px;
973     }
974   }
975 }
976
977 /* Rules for edit pages */
978
979 .site-edit {
980   #content {
981     position: absolute;
982     top: $headerHeight;
983     bottom: 0;
984     width: 100%;
985   }
986
987   #map {
988     height: 100%;
989     overflow: hidden;
990   }
991 }
992
993 /* Rules for non-map content pages */
994
995 .content-heading {
996   background: $lightgrey;
997 }
998
999 .content-inner {
1000   position: relative;
1001   max-width: 960px;
1002   margin: auto;
1003   padding: $lineheight;
1004 }
1005
1006 /* Overrides for pages that use new layout conventions */
1007
1008 .header-illustration {
1009   background-position: 0 0;
1010   background-repeat: no-repeat;
1011   position: relative;
1012   min-height: 200px;
1013   width: 100%;
1014   left: 0;
1015   bottom: 0;
1016
1017   &.new-user-main {
1018     background-image: image-url("sign-up-illustration.png");
1019   }
1020
1021   &.confirm-main {
1022     background-image: image-url("confirm-illustration.png");
1023   }
1024
1025   &.new-user-terms {
1026     background-image: image-url("terms-illustration.png");
1027   }
1028
1029   &.new-user-arm {
1030     height: 110px;
1031     width: 130px;
1032     left: 280px;
1033     top: 180px;
1034     background-image: image-url("sign-up-illustration-arm.png");
1035     position: absolute;
1036     z-index: 100;
1037     pointer-events: none;
1038   }
1039 }
1040
1041 [dir=rtl] .header-illustration {
1042   transform: scaleX(-1);
1043
1044   h1 {
1045     transform: scaleX(-1);
1046   }
1047 }
1048
1049 #content.maximised {
1050   top: 0;
1051   left: 0;
1052   right: 0;
1053   bottom: 0;
1054   border: 0;
1055   z-index: 2000;
1056 }
1057
1058 /* Rules for small maps in content areas */
1059
1060 .content_map {
1061   height: 200px;
1062   margin-bottom: $lineheight;
1063 }
1064
1065 @include media-breakpoint-up(md) {
1066   .content_map {
1067     height: 400px;
1068   }
1069 }
1070
1071 /* Rules for the user map */
1072
1073 .content_map .leaflet-popup-content {
1074   margin: $lineheight/2;
1075   min-height: 50px;
1076 }
1077
1078 /* Rules for user popups on maps */
1079
1080 .user_popup {
1081   min-width: 200px;
1082   p {
1083     padding: 0 0 5px 0;
1084     margin: 0 0 0 60px;
1085     font-size: 12px;
1086   }
1087 }
1088
1089 /* Rules for the user list */
1090
1091 #user_list {
1092   width: 100%;
1093 }
1094
1095 /* Rules for the diary list page */
1096
1097 .diary_post {
1098   position: relative;
1099   padding-top: $lineheight;
1100   padding-bottom: $lineheight/2;
1101   border-top: 1px solid $grey;
1102
1103   &.deleted {
1104     background-color: #fee;
1105   }
1106 }
1107
1108 /* Rules for the diary entry page */
1109
1110 .diary_entries {
1111   #map {
1112     height: 400px;
1113     display: none;
1114     margin-bottom: $lineheight;
1115   }
1116   .comments {
1117     max-width: 740px;
1118   }
1119   .diary-comment {
1120     border-top: 1px dashed $grey;
1121     padding-top: $lineheight/2;
1122     padding-bottom: $lineheight/2;
1123     &:first-child {
1124       margin-top: $lineheight/2;
1125       padding-top: $lineheight;
1126       border-top: 1px solid $grey;
1127     }
1128     &.deleted {
1129       background-color: #fee;
1130     }
1131     p {
1132       margin-bottom: $lineheight/2;
1133     }
1134     .comment-heading {
1135       margin-bottom: 0;
1136       margin-top: 0;
1137     }
1138   }
1139 }
1140
1141 /* Rules for the log in page */
1142
1143 #login_auth_buttons {
1144   margin-bottom: 0;
1145
1146   li {
1147     float: left;
1148     padding: $lineheight/4 $lineheight/2;
1149   }
1150 }
1151
1152 /* Rules for the account confirmation page */
1153
1154 .users-terms {
1155   .legale {
1156     padding: $lineheight;
1157     margin-bottom: $lineheight;
1158     overflow: auto;
1159     height: 20em;
1160
1161     li {
1162       list-style: inherit;
1163     }
1164
1165     ol ol {
1166       list-style-type: lower-alpha;
1167     }
1168   }
1169 }
1170
1171 /* Rules for the account settings page */
1172
1173 #accountForm .user_image {
1174   margin-bottom: 0;
1175 }
1176
1177 #accountForm #user_image {
1178   margin-left: 20px;
1179 }
1180
1181 #accountForm ul.accountImage-options {
1182   margin-left: 120px;
1183 }
1184
1185 .nohome .location {
1186   display: none;
1187 }
1188
1189 #homerow .message {
1190   display: none;
1191 }
1192
1193 .nohome .message {
1194   display: inline !important;
1195 }
1196
1197 /* Rules for the oauth authorization page */
1198
1199 .oauth-authorize ul {
1200   list-style: none;
1201 }
1202
1203 /* Rules for messages pages */
1204
1205 .messages {
1206   button[type="submit"] {
1207     margin: auto;
1208     white-space: nowrap;
1209   }
1210
1211   .inbox-row {
1212     background: $offwhite;
1213   }
1214
1215   .inbox-row-unread {
1216     background: #CBEEA7;
1217   }
1218
1219   .right {
1220     float: right;
1221   }
1222 }
1223
1224 .inbox-row .inbox-mark-read {
1225   display: none;
1226 }
1227
1228 .info-line {
1229   margin-bottom: $lineheight;
1230   padding: $lineheight/4 0px 4px 0px;
1231   border-bottom: 1px solid $grey;
1232
1233   form, form div {
1234     display: inline;
1235   }
1236 }
1237
1238 .info-line .user_thumbnail_tiny {
1239   vertical-align: middle;
1240 }
1241
1242 .inbox-sent {
1243   white-space: nowrap;
1244 }
1245
1246 .inbox-mark-unread,
1247 .inbox-mark-read,
1248 .inbox-delete {
1249   width: 1%;
1250 }
1251
1252 .inbox-row-unread .inbox-mark-unread {
1253   display: none;
1254 }
1255
1256 /* Rules for "flash" notice boxes shown at the top of the content area */
1257
1258 .flash {
1259   &.error {
1260     background-color: #ff7070;
1261   }
1262
1263   &.warning {
1264     background-color: #ffe0cc;
1265   }
1266
1267   &.notice {
1268     background-color: #CBEEA7;
1269   }
1270 }
1271
1272 /* Rules for highlighting fields with rails validation errors */
1273
1274 .formError {
1275   display: inline-block;
1276   padding: 5px 10px;
1277   margin-top: 5px;
1278   border-radius: 4px;
1279   font-size: 12px;
1280   color: #fff;
1281   background-color: #ff7070;
1282 }
1283
1284 /* Rules for rails validation error boxes */
1285
1286 #errorExplanation {
1287   width: 400px;
1288   border: 2px solid #ff7070;
1289   padding: 0 $lineheight/2;
1290   margin-bottom: $lineheight;
1291   background-color: #f0f0f0;
1292
1293   h2 {
1294     margin: 0 -10px 10px -10px;
1295     padding: $lineheight/4 $lineheight/4 $lineheight/4 15px;
1296     font-weight: bold;
1297     font-size: 12px;
1298     background-color: #c00;
1299     color: #fff;
1300     text-align: left;
1301   }
1302
1303   p {
1304     color: #333;
1305     margin-bottom: 0px;
1306     padding: $lineheight/4;
1307   }
1308 }
1309
1310 .search_form {
1311   background-color: $lightgrey;
1312
1313   .describe_location {
1314     top: 6px;
1315     right: 6px;
1316     font-size: 10px;
1317     color: $blue;
1318   }
1319 }
1320
1321 .directions_form {
1322   background-color: $lightgrey;
1323 }
1324
1325 /* Rules for user images */
1326
1327 img.user_image {
1328   max-width: 100px;
1329   max-height: 100px;
1330 }
1331
1332 img.user_thumbnail {
1333   max-width: 50px;
1334   max-height: 50px;
1335 }
1336
1337 img.user_thumbnail_tiny {
1338   width: auto;
1339   height: auto;
1340   max-width: 25px;
1341   max-height: 25px;
1342 }
1343
1344 /* Rules for geo microformats */
1345
1346 abbr.geo {
1347   border-bottom: none;
1348 }
1349
1350 /* General styles for action lists / subnavs */
1351
1352
1353 nav.secondary-actions {
1354   margin-left: -11px;
1355   overflow: hidden;
1356   > ul {
1357     display: flex;
1358     flex-direction: row;
1359     flex-wrap: wrap;
1360     margin-bottom: 0;
1361     margin-left: -1px;
1362     padding: 0;
1363     > li {
1364       flex-basis: auto;
1365       list-style: none;
1366       border-left: 1px solid $grey;
1367       padding-left: $lineheight/2;
1368       margin-right: $lineheight/2;
1369       margin-bottom: $lineheight/8;
1370     }
1371   }
1372 }
1373
1374 div.secondary-actions {
1375   padding: 10px;
1376   text-align: center;
1377 }
1378
1379 /* Create a single-line dl */
1380
1381 dl.dl-inline {
1382   dt, dd {
1383     display: inline-block;
1384   }
1385   dd {
1386     margin-right: 1em;
1387   }
1388 }
1389
1390 /* Rules for OpenID logo */
1391
1392 .openid_logo {
1393   vertical-align: text-bottom;
1394   border: 0;
1395 }
1396
1397 /* Rules for rich text */
1398
1399 .richtext,
1400 .prose {
1401   code {
1402     background: $lightgrey;
1403     padding: 2px 3px;
1404   }
1405
1406   pre {
1407     background: $lightgrey;
1408     padding: 2px 3px;
1409     white-space: pre-wrap;
1410
1411     code {
1412       padding: 0;
1413     }
1414   }
1415
1416   img {
1417     padding: $lineheight;
1418     background-color: $offwhite;
1419     display: block;
1420     max-width: 100%;
1421     margin: auto;
1422   }
1423
1424   blockquote {
1425     border-left: $lineheight solid $offwhite;
1426     padding-left: $lineheight;
1427     margin: 0;
1428     color: $darkgrey;
1429   }
1430 }
1431
1432 /* Rules for the user notes list */
1433
1434 .note_list {
1435   tr.creator {
1436     background-color: $offwhite;
1437   }
1438 }
1439
1440 /* Rules for the iD editor */
1441
1442 .id-embed {
1443   width: 100%;
1444   height: 100%;
1445 }
1446
1447 /* Rules for the "Welcome" page */
1448 .site-welcome, .site-fixthemap {
1449   .sprite {
1450     background-image: image-url("welcome-sprite.png");
1451     background-size: 500px 250px;
1452     display: block;
1453   }
1454
1455   .sprite.small {
1456     width: 50px;
1457     height: 50px;
1458   }
1459
1460   .sprite.x {
1461     /* no-r2 */ background-position: -50px 0;
1462   }
1463
1464   .sprite.term {
1465     margin-right: 10px;
1466     vertical-align: middle;
1467   }
1468
1469   .sprite.node {
1470     /* no-r2 */ background-position: -100px 0;
1471   }
1472
1473   .sprite.way {
1474     /* no-r2 */ background-position: -150px 0;
1475   }
1476
1477   .sprite.tag {
1478     /* no-r2 */ background-position: -200px 0;
1479   }
1480
1481   .sprite.editor {
1482     /* no-r2 */ background-position: -250px 0;
1483   }
1484
1485   .sprite.question {
1486     /* no-r2 */ background-position: -300px 0;
1487   }
1488
1489   .sprite.rules {
1490     /* no-r2 */ background-position: -350px 0;
1491   }
1492
1493   .icon.note {
1494     background-color: #333;
1495     border-radius: 4px;
1496   }
1497 }
1498
1499 .site-about #content {
1500   background-color: $lightgrey;
1501
1502   .content-inner {
1503     max-width: 760px;
1504   }
1505
1506   .attr {
1507     margin-top: -20px;
1508
1509     h1 {
1510       span {
1511         color: $vibrant-green;
1512       }
1513     }
1514
1515     .user-image {
1516       height: 150px;
1517       background-position: 0 50%;
1518       background-repeat: no-repeat;
1519       background-image: image-url('about/osm.png');
1520       background-size: cover;
1521       background-color: $vibrant-green;
1522     }
1523
1524     .byosm {
1525       background: $vibrant-green;
1526     }
1527
1528     .byosm span {
1529       display: inline-block;
1530       width: 1em;
1531       margin-left: -1em;
1532     }
1533   }
1534
1535   .icon {
1536     width: 30px;
1537     height: 30px;
1538     background: 40px 40px image-url('about/sprite.png') no-repeat;
1539
1540     &.local {
1541       /* no-r2 */
1542       background-position: 0px 0px;
1543     }
1544     &.community {
1545       /* no-r2 */
1546       background-position: 0px -40px;
1547     }
1548     &.open {
1549       /* no-r2 */
1550       background-position: 0px -80px;
1551     }
1552     &.partners {
1553       /* no-r2 */
1554       background-position: 0px -120px;
1555     }
1556     &.infringement {
1557       /* no-r2 */
1558       background-position: 0px -160px;
1559     }
1560     &.legal {
1561       /* no-r2 */
1562       background-position: -45px -160px;
1563     }
1564   }
1565 }
1566
1567 @import 'browse';