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