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