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