]> git.openstreetmap.org Git - rails.git/blob - app/assets/stylesheets/common.scss
1e638d47d5680888d3066574bf7ef3a2666554e2
[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   .icon {
380     margin: 10px;
381   }
382 }
383
384 .leaflet-control-group-end + .leaflet-control {
385   padding-top: 10px;
386 }
387
388 .leaflet-control:first-child,
389 .leaflet-control-group-end + .leaflet-control {
390   &.control-button, .control-button:first-child {
391     border-start-start-radius: 4px;
392   }
393 }
394
395 .leaflet-control-group-end {
396   &.control-button, .control-button:last-child {
397     border-end-start-radius: 4px;
398   }
399 }
400
401 /* Rules for the sidebar and main map area */
402
403 .map-layout {
404   #content {
405     overflow: hidden;
406     position: absolute;
407     top: $headerHeight;
408     bottom: 0;
409     width: 100%;
410   }
411
412   #sidebar, #map {
413     position: relative;
414     height: 100%;
415     overflow-x: hidden;
416     overflow-y: auto;
417   }
418
419   #sidebar {
420     float: left;
421     width: $sidebarWidth;
422     background: #fff;
423
424     #sidebar_loader {
425       display: none;
426     }
427
428     #sidebar_content {
429       padding: $spacer;
430     }
431
432     > div {
433       position: relative;
434       float: left;
435       clear: both;
436       width: 100%;
437     }
438   }
439
440   .overlay-sidebar #sidebar {
441     position: absolute;
442     z-index: 1000;
443     height: auto;
444     overflow: hidden;
445
446     #banner {
447       display: block;
448     }
449
450     .welcome {
451       display: none;
452
453       &.visible {
454         display: block;
455       }
456     }
457
458     #sidebar_content {
459       display: none;
460     }
461   }
462
463   .welcome {
464     display: none;
465
466     p {
467       font-size: 110%;
468       font-weight: 300;
469     }
470   }
471
472   #banner {
473     display: none;
474
475     img {
476       display: block;
477       width: $sidebarWidth;
478     }
479   }
480
481   #map {
482     height: 100%;
483     overflow: hidden;
484
485     &.query-active {
486       cursor: help;
487     }
488
489     &.query-disabled {
490       cursor: not-allowed;
491     }
492
493     .leaflet-marker-draggable {
494       cursor: move;
495     }
496   }
497
498   #map-ui {
499     display: none;
500     position: relative;
501     float: right;
502     width: 250px;
503     height: 100%;
504     background: white;
505     overflow: auto;
506
507     .section {
508       border-bottom: 1px solid $grey;
509       padding: 10px 20px;
510     }
511
512     .tooltip {
513       opacity: 1;
514       border: 1px solid $grey;
515       .tooltip-arrow {
516         border-top-color: $grey;
517       }
518     }
519   }
520 }
521
522 @include media-breakpoint-down(md) {
523   body.map-layout {
524     #sidebar, #map {
525       position: relative;
526       overflow-x: hidden;
527       width: 100%;
528       height: 50%;
529     }
530
531     .overlay-sidebar {
532       #sidebar {
533         position: absolute;
534         width: 350px;
535         height: auto;
536         overflow: hidden;
537       }
538
539       #map {
540         height: 100%;
541       }
542     }
543
544     #map-ui {
545       z-index: 9999;
546       width: 100%;
547       overflow-y: scroll;
548     }
549   }
550 }
551
552 .layers-ui,
553 .share-ui {
554   li:last-child {
555     margin-bottom: 0;
556   }
557 }
558
559 .layers-ui {
560   .base-layers {
561     .leaflet-container {
562       width: 100%;
563       height: 50px;
564       cursor: pointer;
565     }
566
567     li  {
568       overflow: hidden;
569       border-radius: 3px;
570       border: 2px solid #fff;
571       margin-bottom: 8px;
572       position: relative;
573       transition: border-color 0.08s ease-in;
574
575       label {
576         position: absolute;
577         top: 0;
578         left: 0;
579         padding: 2px 6px;
580         border-bottom-right-radius: 3px;
581         cursor: pointer;
582         font-weight: 600;
583         font-size: 16px;
584         text-stroke: 2px #fff;
585         background: rgba(255,255,255,.9);
586         z-index: 1000;
587         input[type="radio"] {
588           display: none;
589         }
590       }
591
592       &.active { border-color: darken($green, 10%); }
593       &:hover {
594         border-color: $grey;
595         &.active { border-color: darken($green, 20%); }
596       }
597     }
598   }
599
600   .overlay-layers {
601     p {
602       font-size: 13px;
603       margin-bottom: 8px;
604     }
605     li.disabled { color: $darkgrey; }
606   }
607 }
608
609 .share-ui {
610   .share-tabs {
611     margin-bottom: 10px;
612
613     a {
614       color: #fff;
615       text-decoration: none;
616       background-color: $lightblue;
617       padding: 5px 10px;
618       border-right: 1px solid #fff;
619     }
620
621     a:first-child {
622       border-right: 1px solid #fff;
623       border-radius: 4px 0 0 4px;
624     }
625
626     a:last-child {
627       border-radius: 0 4px 4px 0;
628     }
629
630     a.active {
631       background-color: $blue;
632     }
633   }
634
635   .share-tab {
636     display: none;
637   }
638
639   .share-link {
640     input[type=text],
641     textarea {
642       width: 100%;
643       font-family: monospace;
644       font-size: small;
645       line-height: 1.3;
646     }
647   }
648
649   .share-image {
650     label {
651       margin-right: 10px;
652     }
653   }
654
655   #embed_html {
656     resize: vertical;
657   }
658
659   #mapnik_scale {
660     width: 100px;
661   }
662 }
663
664 .leaflet-top {
665   top: $lineheight/2 !important;
666   .leaflet-control {
667     margin-right: 0px !important;
668     margin-top: 0px !important;
669   }
670 }
671
672 .leaflet-popup-scrolled {
673   padding-right: $lineheight;
674   border-bottom: 0px !important;
675   border-top: 0px !important;
676 }
677
678 .leaflet-popup-content-wrapper {
679   border-radius: 4px !important;
680 }
681
682 /* Rules for attribution text under the main map shown on printouts */
683
684 #attribution {
685   display: none;
686
687   table {
688     width: 100%
689   }
690 }
691
692 .attribution_license,
693 .attribution_project {
694   text-align: left;
695 }
696
697 .attribution_notice {
698   text-align: center;
699 }
700
701 .donate-attr { color: darken($green, 10%) !important; }
702
703 /* Rules for the sidebar */
704
705 .sidebar_heading {
706   position: relative;
707   padding: $lineheight/2 $lineheight;
708   // background: $offwhite;
709   // border-bottom: 1px solid $grey;
710 }
711
712 #browse_status {
713   input {
714     display: block;
715     margin-left: auto;
716     margin-right: auto;
717   }
718
719   > div {
720    padding: $spacer;
721   }
722 }
723
724 #sidebar {
725   #sidebar_loader,
726   .search_more {
727     width: 100%;
728     margin: $lineheight auto;
729   }
730
731   .loader {
732     text-align: center;
733     margin: auto;
734     width: 40px;
735     display: block;
736   }
737 }
738
739 /* Temporary label size override until we remove site-wide font customisation */
740
741 form {
742   label {
743     font-size: 16px;
744   }
745 }
746
747 /* Stop bootstrap 5 from floating legends when they don't need to be */
748 legend {
749   float: none;
750 }
751
752 /* Override the text colour for primary and secondary buttons, to match our
753    bootstrap 4 colours. Note this has accessibility issues, which is why
754    bootstrap 5 calculates black as the appropriate colour, and we should
755    reconsider our colours at some point with that in mind. */
756
757 .btn-primary {
758   @include button-variant($primary, $primary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
759 }
760
761 .btn-secondary {
762   @include button-variant($secondary, $secondary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
763 }
764
765 .btn-outline-secondary {
766   @include button-outline-variant($secondary, $color-hover: $white, $active-color: $white);
767 }
768
769 /* Rules for the search and direction forms */
770
771 header .search_forms,
772 .directions_form {
773   display: none;
774 }
775
776 /* Rules for the map key which appears in the popout sidebar */
777
778 #mapkey {
779  .mapkey-table-key img {
780     display: block;
781     margin-left: auto;
782     margin-right: auto;
783   }
784 }
785
786 /* Rules for search sidebar */
787
788 #sidebar .search_results_entry {
789   ul li {
790     cursor: pointer;
791     &.selected { background: $list-highlight; }
792   }
793
794   .search_more .loader {
795     display: none;
796     width: 100%;
797   }
798 }
799
800 .search_results_error {
801   color: #f00;
802   padding: 10px 20px;
803 }
804
805 /* Rules for routing */
806
807 div.direction {
808   background-image: image-url('routing-sprite.png');
809   width: 20px;
810   height: 20px;
811   background-repeat: no-repeat;
812 }
813 @for $i from 0 through 25 {
814 div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
815 }
816
817 td.instruction, td.distance {
818     padding-top: $lineheight/5;
819     padding-bottom: $lineheight/5;
820     border-bottom: 1px solid $grey;
821 }
822 td.distance {
823     color: $darkgrey;
824     text-align: right;
825     font-size: x-small;
826 }
827 tr.turn {
828     cursor: pointer;
829 }
830 tr.turn:hover {
831     background: $list-highlight;
832 }
833
834 .routing_marker { width: 15px; cursor: move; }
835
836 /* Rules for entity history */
837
838 #sidebar_content {
839   .browse_details {
840     position: relative;
841     border-bottom: $keyline;
842   }
843 }
844
845 .browse_status {
846   display: none;
847 }
848
849 /* Rules for the history sidebar */
850
851 #sidebar .changesets {
852   li {
853     &.selected { background: $list-highlight; }
854     /* color is derived from changeset bbox fillColor in history.js */
855
856     a.stretched-link > span, a:not(.stretched-link), [title] {
857       position: relative;
858       z-index: 2; /* needs to be higher than Bootstrap's stretched link ::after z-index */
859     }
860   }
861
862   .comments {
863     color: $darkgrey;
864   }
865
866   .comments-0 {
867     opacity: 0.5;
868   }
869
870   .changeset_more .loader {
871     display: none;
872     width: 100%;
873   }
874 }
875
876 /* Rules for the browse sidebar */
877
878 #sidebar_content {
879   .browse-section {
880     padding-bottom: $spacer;
881     margin-bottom: $spacer;
882     border-bottom: 1px solid $grey;
883
884     h4:first-child {
885       word-wrap: break-word;
886     }
887   }
888
889   .browse-section:last-of-type {
890     border-bottom: none;
891   }
892
893   .browse-tag-list {
894     background-color: $offwhite;
895     table-layout: fixed;
896     border-collapse: separate;
897     border-spacing: 0;
898     width: 100%;
899     margin-bottom: $spacer;
900
901     th, td {
902       border-bottom: 1px solid $grey;
903     }
904
905     tr:last-child th, tr:last-child td {
906       border-bottom: 0;
907     }
908
909     .browse-tag-k,
910     .browse-tag-v {
911       width: 50%;
912       padding: 6px 10px;
913       word-wrap: break-word;
914       white-space: pre-wrap;
915     }
916
917     .browse-tag-k {
918       font-weight: 500;
919       background-color: $offwhite;
920     }
921
922     .browse-tag-v {
923       border-left: 1px solid $grey;
924       background-color: #fff;
925     }
926
927     .colour-preview-box {
928       float: right;
929       width: 14px;
930       height: 14px;
931       margin: 4px 0px;
932       border: 1px solid rgba(0, 0, 0, .1);
933       // add color via inline css on element: background-color: <tag value>;
934     }
935   }
936
937   .note-comments li, .changeset-comments li {
938     margin: $lineheight/2 0;
939
940     p {
941       margin: 10px 6px 0 6px;
942       line-height: 1.5;
943     }
944   }
945
946   .subscribe-buttons input {
947     font-size: 90%;
948     line-height: 15px;
949     min-height: 20px;
950   }
951
952   span.action-button:hover {
953     cursor: pointer;
954     text-decoration: underline;
955   }
956
957   .note-description {
958     overflow: hidden;
959     margin: 0 0 10px 10px;
960   }
961
962   .query-results {
963     display: none;
964
965     ul {
966       li {
967         &.query-result {
968           cursor: pointer;
969         }
970
971         &.selected {
972           background: $list-highlight;
973         }
974       }
975     }
976   }
977 }
978
979 /* Bootstrap buttons don't have any vertical margin, so
980    they touch when adjacent buttons wrap onto a new line
981    e.g. wide form buttons on a narrow sidebar */
982
983 .btn-wrapper {
984   > .btn {
985     margin-bottom: $spacer * 0.25;
986   }
987 }
988
989 /* Rules for export sidebar */
990
991 .export_form {
992   .export_area_inputs,
993   .export_button {
994     text-align: center;
995   }
996
997   .export_area_inputs {
998     margin-bottom: $spacer;
999     input[type="text"] {
1000       width: 100px;
1001       text-align: center;
1002     }
1003   }
1004
1005   .export_boxy {
1006     background: $lightgrey;
1007
1008     #maxlat { margin-top: -1px; }
1009     #minlon {
1010       float: left;
1011       /* no-r2 */ margin-left: -1px;
1012     }
1013     #maxlon {
1014       float: right;
1015       /* no-r2 */ margin-right: -1px;
1016     }
1017     #minlat { margin-bottom: -1px; }
1018   }
1019
1020   .export_bound {
1021     margin: $lineheight/4;
1022   }
1023
1024   dl {
1025     padding-left: $lineheight/2;
1026     dd {
1027       margin-left: 0;
1028       margin-bottom: 10px;
1029     }
1030   }
1031 }
1032
1033 /* Rules for edit pages */
1034
1035 .site-edit {
1036   #content {
1037     position: absolute;
1038     top: $headerHeight;
1039     bottom: 0;
1040     width: 100%;
1041   }
1042
1043   #map {
1044     height: 100%;
1045     overflow: hidden;
1046   }
1047 }
1048
1049 /* Rules for non-map content pages */
1050
1051 .content-heading {
1052   background: $lightgrey;
1053 }
1054
1055 .content-inner {
1056   position: relative;
1057   max-width: 960px;
1058   margin: auto;
1059   padding: $lineheight;
1060 }
1061
1062 /* Overrides for pages that use new layout conventions */
1063
1064 .header-illustration {
1065   background-position: 0 0;
1066   background-repeat: no-repeat;
1067   position: relative;
1068   min-height: 200px;
1069   width: 100%;
1070   left: 0;
1071   bottom: 0;
1072
1073   &.new-user-main {
1074     background-image: image-url("sign-up-illustration.png");
1075   }
1076
1077   &.confirm-main {
1078     background-image: image-url("confirm-illustration.png");
1079   }
1080
1081   &.new-user-terms {
1082     background-image: image-url("terms-illustration.png");
1083   }
1084
1085   &.new-user-arm {
1086     height: 110px;
1087     width: 130px;
1088     left: 280px;
1089     top: 180px;
1090     background-image: image-url("sign-up-illustration-arm.png");
1091     position: absolute;
1092     z-index: 100;
1093     pointer-events: none;
1094   }
1095 }
1096
1097 [dir=rtl] .header-illustration {
1098   transform: scaleX(-1);
1099 }
1100
1101 #content.maximised {
1102   top: 0;
1103   left: 0;
1104   right: 0;
1105   bottom: 0;
1106   border: 0;
1107   z-index: 2000;
1108 }
1109
1110 /* Rules for small maps in content areas */
1111
1112 .content_map {
1113   height: 200px;
1114   margin-bottom: $lineheight;
1115 }
1116
1117 @include media-breakpoint-up(md) {
1118   .content_map {
1119     height: 400px;
1120   }
1121 }
1122
1123 /* Rules for the user map */
1124
1125 .content_map .leaflet-popup-content {
1126   margin: $lineheight/2;
1127   min-height: 50px;
1128 }
1129
1130 /* Rules for user popups on maps */
1131
1132 .user_popup {
1133   min-width: 200px;
1134   p {
1135     padding: 0 0 5px 0;
1136     margin-top: 0 0 0 60px;
1137     font-size: 12px;
1138   }
1139 }
1140
1141 /* Rules for the user list */
1142
1143 #user_list {
1144   width: 100%;
1145 }
1146
1147 /* Rules for the diary list page */
1148
1149 .diary_post {
1150   position: relative;
1151   padding-top: $lineheight;
1152   padding-bottom: $lineheight/2;
1153   border-top: 1px solid $grey;
1154
1155   &.deleted {
1156     background-color: #fee;
1157   }
1158 }
1159
1160 /* Rules for the diary entry page */
1161
1162 .diary_entries {
1163   #map {
1164     height: 400px;
1165     display: none;
1166     margin-bottom: $lineheight;
1167   }
1168   .comments {
1169     max-width: 740px;
1170   }
1171   .diary-comment {
1172     border-top: 1px dashed $grey;
1173     padding-top: $lineheight/2;
1174     padding-bottom: $lineheight/2;
1175     &:first-child {
1176       margin-top: $lineheight/2;
1177       padding-top: $lineheight;
1178       border-top: 1px solid $grey;
1179     }
1180     &.deleted {
1181       background-color: #fee;
1182     }
1183     p {
1184       margin-bottom: $lineheight/2;
1185     }
1186     .comment-heading {
1187       margin-bottom: 0;
1188       margin-top: 0;
1189     }
1190   }
1191 }
1192
1193 /* Rules for the log in page */
1194
1195 #login_auth_buttons {
1196   margin-bottom: 0;
1197
1198   li {
1199     float: left;
1200     padding: $lineheight/4 $lineheight/2;
1201   }
1202 }
1203
1204 /* Rules for the account confirmation page */
1205
1206 .users-terms {
1207   .legale {
1208     padding: $lineheight;
1209     margin-bottom: $lineheight;
1210     overflow: auto;
1211     height: 20em;
1212
1213     li {
1214       list-style: inherit;
1215     }
1216
1217     ol ol {
1218       list-style-type: lower-alpha;
1219     }
1220   }
1221 }
1222
1223 /* Rules for the account settings page */
1224
1225 #accountForm .user_image {
1226   margin-bottom: 0;
1227 }
1228
1229 #accountForm #user_image {
1230   margin-left: 20px;
1231 }
1232
1233 #accountForm ul.accountImage-options {
1234   margin-left: 120px;
1235 }
1236
1237 .nohome .location {
1238   display: none;
1239 }
1240
1241 #homerow .message {
1242   display: none;
1243 }
1244
1245 .nohome .message {
1246   display: inline !important;
1247 }
1248
1249 /* Rules for the oauth authorization page */
1250
1251 .oauth-authorize ul {
1252   list-style: none;
1253 }
1254
1255 /* Rules for messages pages */
1256
1257 .messages {
1258   button[type="submit"] {
1259     margin: auto;
1260     white-space: nowrap;
1261   }
1262
1263   .inbox-row {
1264     background: $offwhite;
1265   }
1266
1267   .inbox-row-unread {
1268     background: #CBEEA7;
1269   }
1270
1271   .right {
1272     float: right;
1273   }
1274 }
1275
1276 .inbox-row .inbox-mark-read {
1277   display: none;
1278 }
1279
1280 .info-line {
1281   margin-bottom: $lineheight;
1282   padding: $lineheight/4 0px 4px 0px;
1283   border-bottom: 1px solid $grey;
1284
1285   form, form div {
1286     display: inline;
1287   }
1288 }
1289
1290 .info-line .user_thumbnail_tiny {
1291   vertical-align: middle;
1292 }
1293
1294 .inbox-sent {
1295   white-space: nowrap;
1296 }
1297
1298 .inbox-mark-unread,
1299 .inbox-mark-read,
1300 .inbox-delete {
1301   width: 1%;
1302 }
1303
1304 .inbox-row-unread .inbox-mark-unread {
1305   display: none;
1306 }
1307
1308 /* Rules for "flash" notice boxes shown at the top of the content area */
1309
1310 .flash {
1311   &.error {
1312     background-color: #ff7070;
1313   }
1314
1315   &.warning {
1316     background-color: #ffe0cc;
1317   }
1318
1319   &.notice {
1320     background-color: #CBEEA7;
1321   }
1322 }
1323
1324 /* Rules for highlighting fields with rails validation errors */
1325
1326 .formError {
1327   display: inline-block;
1328   padding: 5px 10px;
1329   margin-top: 5px;
1330   border-radius: 4px;
1331   font-size: 12px;
1332   color: #fff;
1333   background-color: #ff7070;
1334 }
1335
1336 /* Rules for rails validation error boxes */
1337
1338 #errorExplanation {
1339   width: 400px;
1340   border: 2px solid #ff7070;
1341   padding: 0 $lineheight/2;
1342   margin-bottom: $lineheight;
1343   background-color: #f0f0f0;
1344
1345   h2 {
1346     margin: 0 -10px 10px -10px;
1347     padding: $lineheight/4 $lineheight/4 $lineheight/4 15px;
1348     font-weight: bold;
1349     font-size: 12px;
1350     background-color: #c00;
1351     color: #fff;
1352     text-align: left;
1353   }
1354
1355   p {
1356     color: #333;
1357     margin-bottom: 0px;
1358     padding: $lineheight/4;
1359   }
1360 }
1361
1362 .search_form {
1363   background-color: $lightgrey;
1364
1365   .describe_location {
1366     top: 6px;
1367     right: 6px;
1368     font-size: 10px;
1369     color: $blue;
1370   }
1371 }
1372
1373 .directions_form {
1374   background-color: $lightgrey;
1375
1376   .loader_copy {
1377     display: none;
1378
1379     img {
1380       vertical-align: middle;
1381     }
1382   }
1383 }
1384
1385 /* Rules for user images */
1386
1387 img.user_image {
1388   max-width: 100px;
1389   max-height: 100px;
1390 }
1391
1392 img.user_thumbnail {
1393   max-width: 50px;
1394   max-height: 50px;
1395 }
1396
1397 img.user_thumbnail_tiny {
1398   width: auto;
1399   height: auto;
1400   max-width: 25px;
1401   max-height: 25px;
1402 }
1403
1404 /* Rules for geo microformats */
1405
1406 abbr.geo {
1407   border-bottom: none;
1408 }
1409
1410 /* General styles for action lists / subnavs */
1411
1412
1413 nav.secondary-actions {
1414   margin-left: -11px;
1415   overflow: hidden;
1416   > ul {
1417     display: flex;
1418     flex-direction: row;
1419     flex-wrap: wrap;
1420     margin-bottom: 0;
1421     margin-left: -1px;
1422     padding: 0;
1423     > li {
1424       flex-basis: auto;
1425       list-style: none;
1426       border-left: 1px solid $grey;
1427       padding-left: $lineheight/2;
1428       margin-right: $lineheight/2;
1429       margin-bottom: $lineheight/8;
1430     }
1431   }
1432 }
1433
1434 div.secondary-actions {
1435   padding: 10px;
1436   text-align: center;
1437 }
1438
1439 /* Create a single-line dl */
1440
1441 dl.dl-inline {
1442   dt, dd {
1443     display: inline-block;
1444   }
1445   dd {
1446     margin-right: 1em;
1447   }
1448 }
1449
1450 /* Rules for OpenID logo */
1451
1452 .openid_logo {
1453   vertical-align: text-bottom;
1454   border: 0;
1455 }
1456
1457 /* Rules for rich text */
1458
1459 .richtext,
1460 .prose {
1461   code {
1462     background: $lightgrey;
1463     padding: 2px 3px;
1464   }
1465
1466   pre {
1467     background: $lightgrey;
1468     padding: 2px 3px;
1469     white-space: pre-wrap;
1470
1471     code {
1472       padding: 0;
1473     }
1474   }
1475
1476   img {
1477     padding: $lineheight;
1478     background-color: $offwhite;
1479     display: block;
1480     max-width: 100%;
1481     margin: auto;
1482   }
1483
1484   blockquote {
1485     border-left: $lineheight solid $offwhite;
1486     padding-left: $lineheight;
1487     margin: 0;
1488     color: $darkgrey;
1489   }
1490 }
1491
1492 /* Rules for the user notes list */
1493
1494 .note_list {
1495   tr.creator {
1496     background-color: $offwhite;
1497   }
1498 }
1499
1500 /* Rules for the iD editor */
1501
1502 .id-embed {
1503   width: 100%;
1504   height: 100%;
1505 }
1506
1507 /* Rules for the "Welcome" page */
1508 .site-welcome, .site-fixthemap {
1509   .sprite {
1510     background-image: image-url("welcome-sprite.png");
1511     background-size: 500px 250px;
1512     display: block;
1513   }
1514
1515   .icon-list {
1516     padding-bottom: 20px;
1517     div {
1518       margin-bottom: 10px;
1519       p {
1520         padding-top: 10px;
1521       }
1522     }
1523   }
1524   .sprite.small {
1525     width: 50px;
1526     height: 50px;
1527   }
1528
1529   .sprite.x {
1530     /* no-r2 */ background-position: -50px 0;
1531   }
1532
1533   .sprite.term {
1534     margin-right: 10px;
1535     vertical-align: middle;
1536   }
1537
1538   .sprite.node {
1539     /* no-r2 */ background-position: -100px 0;
1540   }
1541
1542   .sprite.way {
1543     /* no-r2 */ background-position: -150px 0;
1544   }
1545
1546   .sprite.tag {
1547     /* no-r2 */ background-position: -200px 0;
1548   }
1549
1550   .sprite.editor {
1551     /* no-r2 */ background-position: -250px 0;
1552   }
1553
1554   .sprite.question {
1555     /* no-r2 */ background-position: -300px 0;
1556   }
1557
1558   .sprite.rules {
1559     /* no-r2 */ background-position: -350px 0;
1560   }
1561
1562   .icon.note {
1563     background-color: #333;
1564     border-radius: 4px;
1565   }
1566 }
1567
1568 .site-about #content {
1569   background-color: $lightgrey;
1570
1571   .content-inner {
1572     max-width: 760px;
1573   }
1574
1575   .attr {
1576     margin-top: -20px;
1577
1578     h1 {
1579       span {
1580         color: $vibrant-green;
1581       }
1582     }
1583
1584     .user-image {
1585       height: 150px;
1586       background-position: 0 50%;
1587       background-repeat: no-repeat;
1588       background-image: image-url('about/osm.png');
1589       background-size: cover;
1590       background-color: $vibrant-green;
1591     }
1592
1593     .byosm {
1594       background: $vibrant-green;
1595     }
1596
1597     .byosm span {
1598       display: inline-block;
1599       width: 1em;
1600       margin-left: -1em;
1601     }
1602   }
1603
1604   .icon {
1605     width: 30px;
1606     height: 30px;
1607     margin-right: 10px;
1608     vertical-align: middle;
1609     background: 40px 40px image-url('about/sprite.png') no-repeat;
1610
1611     &.local {
1612       /* no-r2 */
1613       background-position: 0px 0px;
1614     }
1615     &.community {
1616       /* no-r2 */
1617       background-position: 0px -40px;
1618     }
1619     &.open {
1620       /* no-r2 */
1621       background-position: 0px -80px;
1622     }
1623     &.partners {
1624       /* no-r2 */
1625       background-position: 0px -120px;
1626     }
1627     &.infringement {
1628       /* no-r2 */
1629       background-position: 0px -160px;
1630     }
1631     &.legal {
1632       /* no-r2 */
1633       background-position: -45px -160px;
1634     }
1635   }
1636 }
1637
1638 @import 'browse';