]> git.openstreetmap.org Git - rails.git/blob - app/assets/stylesheets/common.scss
Merge pull request #4201 from AntonKhorev/issues-limit-settings
[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 * 0.25;
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;
84   float: right;
85   background: image-url("menu-icon.png") no-repeat;
86   background-size: 30px 30px;
87   width: 30px;
88   height: 30px;
89   margin: 14px 10px 0 0;
90   opacity: 0.6;
91 }
92
93 header {
94   height: $headerHeight;
95   position: relative;
96   z-index: 1001;
97   font-size: 14px;
98
99   h1, nav, nav > ul, nav > ul > li {
100     display: inline-block;
101   }
102
103   > * {
104     height: 100%;
105     padding: $lineheight * 0.5;
106   }
107
108   h1, nav.primary {
109     float: left;
110   }
111
112   a, a:hover {
113     text-decoration: none;
114   }
115
116   img.logo {
117     width: 30px;
118     height: 30px;
119     margin-top: -2px;
120     vertical-align: middle;
121   }
122
123   h1 {
124     font-size: 18px;
125     font-weight: 600;
126     line-height: 1.2;
127     margin: 0;
128     padding-top: 15px;
129
130     a {
131       color: #000;
132     }
133
134     a:hover {
135       color: #000;
136     }
137   }
138
139   .btn {
140     font-size: 14px;
141   }
142 }
143
144
145 nav.primary {
146   .btn-outline-primary {
147     @include button-outline-variant($green, $color-hover: $white, $active-color: $white);
148   }
149
150   .disabled {
151     .btn-outline-primary {
152       color: $grey;
153       cursor: default;
154
155       .caret {
156         border-top-color: $grey;
157       }
158
159       &:hover {
160         background-color: lighten($green, 30%);
161       }
162     }
163   }
164
165   // Small tweaks to the toggle to stop the primary colour showing through
166   // when the menu is shown
167   .show > .btn-outline-primary.dropdown-toggle {
168     background-color: $green;
169     border-color: $green;
170
171     &:focus {
172       box-shadow: 0 0 0 0.2rem fade-out($green, 0.5);
173     }
174   }
175 }
176
177 nav.secondary {
178   position: absolute;
179   right: 0;
180
181   .nav-link {
182     padding: 0.2rem;
183     color: $darkgrey;
184   }
185
186   > ul li.current a {
187     color: darken($darkgrey, 25%);
188   }
189
190   .login-menu {
191     .btn-outline-secondary {
192       @include button-outline-variant($darkgrey, $color-hover: $white, $active-color: $white);
193     }
194   }
195
196   .user-menu {
197     .btn-outline-secondary {
198       @include button-outline-variant($darkgrey, $color-hover: $darkgrey, $active-background: white, $active-border: $darkgrey);
199       border-color: $grey;
200       &:hover {
201         border-color: $grey;
202       }
203     }
204   }
205
206   #inboxanchor {
207     background-color: lighten($grey, 10%);
208   }
209 }
210
211 nav.primary, nav.secondary {
212   .dropdown-item {
213     &:hover, &:active {
214       background-color: $green;
215       color: white;
216     }
217   }
218 }
219
220 #compact-secondary-nav {
221   display: none;
222 }
223
224 body.compact-nav {
225   #compact-secondary-nav {
226     display: inline-block;
227   }
228   .compact-hide {
229     display: none;
230   }
231 }
232
233 body.small-nav {
234   #menu-icon {
235     display: block;
236   }
237
238   nav.primary,
239   nav.secondary {
240     float: none !important;
241     position: relative;
242     display: block;
243     clear: both;
244   }
245
246   header {
247     height: auto;
248     min-height: $headerHeight;
249     background: #fff;
250
251     &.closed nav {
252       display: none;
253     }
254
255     .search_forms {
256       display: block;
257     }
258   }
259
260   #sidebar .search_forms,
261   #edit_tab,
262   #export_tab {
263     display: none;
264   }
265
266   nav.primary {
267     padding: 0;
268
269     ul, li {
270       border: none;
271       border-radius: 0;
272       width: 100%;
273     }
274
275     ul {
276       border-top: 1px solid #eee;
277       li {
278         border-bottom: 1px solid #eee;
279         border-right: none;
280         > a {
281           border-radius: 0;
282           width: 100%;
283           text-align: center;
284           font-size: 15px;
285         }
286       }
287     }
288
289     .btn-group {
290       width: 100%;
291       padding: 10px;
292     }
293   }
294
295   nav.secondary {
296     .user-menu, .login-menu {
297       width: 100%;
298     }
299   }
300
301   #compact-secondary-nav {
302     display: none;
303   }
304
305   .compact-hide {
306     display: inline-block;
307   }
308
309   .overlay-sidebar #sidebar .welcome {
310     display: none;
311   }
312
313   .overlay-sidebar #sidebar #banner {
314     display: none;
315   }
316 }
317
318 /* Utility for styling notification numbers */
319
320 .count-number {
321   background: lighten($green, 30%);
322   color: $gray-800;
323   font-weight: $font-weight-normal;
324 }
325
326 /* Rules for the message shown in place of the map when javascript is disabled */
327
328 #noscript {
329   z-index: 20000000;
330   margin-left: 400px;
331   margin-top: 50px;
332 }
333
334 /* Rules for Leaflet maps */
335
336 .leaflet-top.leaflet-right,
337 .leaflet-top.leaflet-left {
338   height: 100%;
339   column-gap: 10px;
340   display: flex;
341   flex-direction: column;
342   flex-wrap: wrap-reverse;
343 }
344
345 .leaflet-control .control-button {
346   display: block;
347   height: 40px;
348   width: 40px;
349   background-color: #333;
350   background-color: rgba(0,0,0,.6);
351   outline: none;
352
353   &:hover,
354   &:focus {
355     background-color: black;
356   }
357
358   &.disabled,
359   &.leaflet-disabled {
360     background-color: #333;
361     background-color: rgba(0,0,0,.5);
362     cursor: default;
363   }
364
365   &.active {
366     background-color: $vibrant-green;
367   }
368
369   &-first {
370     border-start-start-radius: 4px;
371   }
372
373   &-last {
374     border-end-start-radius: 4px;
375     margin-bottom: 10px;
376   }
377
378   .icon {
379     margin: 10px;
380   }
381 }
382
383 /* Rules for the sidebar and main map area */
384
385 .map-layout {
386   #content {
387     overflow: hidden;
388     position: absolute;
389     top: $headerHeight;
390     bottom: 0;
391     width: 100%;
392   }
393
394   #sidebar, #map {
395     position: relative;
396     height: 100%;
397     overflow-x: hidden;
398     overflow-y: auto;
399   }
400
401   #sidebar {
402     float: left;
403     width: $sidebarWidth;
404     background: #fff;
405
406     #sidebar_loader {
407       display: none;
408     }
409
410     #sidebar_content {
411       padding: $spacer;
412     }
413
414     > div {
415       position: relative;
416     }
417   }
418
419   .overlay-sidebar #sidebar {
420     position: absolute;
421     z-index: 1000;
422     height: auto;
423     overflow: hidden;
424
425     #banner {
426       display: block;
427     }
428
429     .welcome {
430       display: block;
431     }
432
433     #sidebar_content {
434       display: none;
435     }
436   }
437
438   .welcome {
439     display: none;
440
441     p {
442       font-size: 110%;
443       font-weight: 300;
444     }
445   }
446
447   #banner {
448     display: none;
449
450     img {
451       display: block;
452       width: $sidebarWidth;
453     }
454
455     button.btn-close {
456       background-color: rgba(255, 255, 255, 0.5);
457       opacity: 1.0;
458     }
459   }
460
461   #map {
462     height: 100%;
463     overflow: hidden;
464
465     &.query-active {
466       cursor: help;
467     }
468
469     &.query-disabled {
470       cursor: not-allowed;
471     }
472
473     .leaflet-marker-draggable {
474       cursor: move;
475     }
476   }
477
478   #map-ui {
479     display: none;
480     position: relative;
481     float: right;
482     width: 250px;
483     height: 100%;
484     background: white;
485     overflow: auto;
486
487     .section {
488       border-bottom: 1px solid $grey;
489       padding: $spacer;
490     }
491   }
492 }
493
494 @include media-breakpoint-down(md) {
495   body.map-layout {
496     #sidebar, #map {
497       position: relative;
498       overflow-x: hidden;
499       width: 100%;
500       height: 50%;
501     }
502
503     #map-ui {
504       z-index: 9999;
505       width: 100%;
506       height: 50%;
507       overflow-y: scroll;
508     }
509
510     .overlay-sidebar {
511       #sidebar {
512         position: absolute;
513         width: 350px;
514         height: auto;
515         overflow: hidden;
516       }
517
518       #map, #map-ui {
519         height: 100%;
520       }
521     }
522   }
523 }
524
525 .layers-ui {
526   .base-layers {
527     .leaflet-container {
528       width: 100%;
529       height: 50px;
530       cursor: pointer;
531     }
532
533     li  {
534       overflow: hidden;
535       border-radius: 3px;
536       border: 2px solid #fff;
537       margin-bottom: 8px;
538       position: relative;
539       transition: border-color 0.08s ease-in;
540
541       label {
542         position: absolute;
543         top: 0;
544         left: 0;
545         padding: 2px 6px;
546         border-bottom-right-radius: 3px;
547         cursor: pointer;
548         font-weight: 600;
549         font-size: 16px;
550         text-stroke: 2px #fff;
551         background: rgba(255,255,255,.9);
552         z-index: 1000;
553         input[type="radio"] {
554           display: none;
555         }
556       }
557
558       &.active { border-color: darken($green, 10%); }
559       &:hover {
560         border-color: $grey;
561         &.active { border-color: darken($green, 20%); }
562       }
563     }
564   }
565
566   .overlay-layers {
567     p {
568       font-size: 13px;
569       margin-bottom: 8px;
570     }
571     li.disabled { color: $darkgrey; }
572   }
573 }
574
575 .share-ui {
576   #mapnik_scale {
577     width: 100px;
578   }
579 }
580
581 .leaflet-top {
582   top: 10px !important;
583   .leaflet-control {
584     margin-right: 0px !important;
585     margin-top: 0px !important;
586   }
587 }
588
589 .leaflet-popup-scrolled {
590   padding-right: $lineheight;
591   border-bottom: 0px !important;
592   border-top: 0px !important;
593 }
594
595 .leaflet-popup-content-wrapper {
596   border-radius: 4px !important;
597 }
598
599 /* Rules for attribution text under the main map shown on printouts */
600
601 #attribution {
602   display: none;
603 }
604
605 .donate-attr { color: darken($green, 10%) !important; }
606
607 /* Rules for the sidebar */
608
609 #browse_status {
610   input {
611     display: block;
612     margin-left: auto;
613     margin-right: auto;
614   }
615
616   > div {
617    padding: $spacer;
618   }
619 }
620
621 /* Temporary label size override until we remove site-wide font customisation */
622
623 form {
624   label {
625     font-size: 16px;
626   }
627   .col-form-label {
628     font-size: 16px;
629   }
630 }
631
632 /* Stop bootstrap 5 from floating legends when they don't need to be */
633 legend {
634   float: none;
635 }
636
637 /* Override the text colour for primary and secondary buttons, to match our
638    bootstrap 4 colours. Note this has accessibility issues, which is why
639    bootstrap 5 calculates black as the appropriate colour, and we should
640    reconsider our colours at some point with that in mind. */
641
642 .btn-primary {
643   @include button-variant($primary, $primary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
644 }
645
646 .btn-secondary {
647   @include button-variant($secondary, $secondary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
648 }
649
650 .btn-outline-secondary {
651   @include button-outline-variant($secondary, $color-hover: $white, $active-color: $white);
652 }
653
654 /* Rules for the search and direction forms */
655
656 header .search_forms,
657 .directions_form {
658   display: none;
659 }
660
661 /* Rules for the map key which appears in the popout sidebar */
662
663 #mapkey {
664  .mapkey-table-key img {
665     display: block;
666     margin-left: auto;
667     margin-right: auto;
668   }
669 }
670
671 /* Rules for search sidebar */
672
673 #sidebar .search_results_entry {
674   ul li {
675     cursor: pointer;
676     &.selected { background: $list-highlight; }
677   }
678
679   .search_more .loader {
680     display: none;
681   }
682 }
683
684 .search_results_error {
685   color: #f00;
686   padding: 10px 20px;
687 }
688
689 /* Rules for routing */
690
691 div.direction {
692   background-image: image-url('routing-sprite.png');
693   width: 20px;
694   height: 20px;
695   background-repeat: no-repeat;
696 }
697 @for $i from 0 through 25 {
698 div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
699 }
700
701 td.distance {
702     color: $darkgrey;
703     text-align: right;
704     font-size: x-small;
705 }
706 tr.turn {
707     cursor: pointer;
708 }
709 tr.turn:hover {
710     background: $list-highlight;
711 }
712
713 .routing_marker { width: 15px; cursor: move; }
714
715 .browse_status {
716   display: none;
717 }
718
719 /* Rules for the history sidebar */
720
721 #sidebar .changesets {
722   li {
723     &.selected { background: $list-highlight; }
724     /* color is derived from changeset bbox fillColor in history.js */
725
726     a.stretched-link > span, a:not(.stretched-link), [title] {
727       position: relative;
728       z-index: 2; /* needs to be higher than Bootstrap's stretched link ::after z-index */
729     }
730   }
731
732   .comments {
733     color: $darkgrey;
734   }
735
736   .comments-0 {
737     opacity: 0.5;
738   }
739
740   .changeset_more .loader {
741     display: none;
742     width: 100%;
743   }
744 }
745
746 /* Rules for the browse sidebar */
747
748 #sidebar_content {
749   .browse-section {
750     padding-bottom: $spacer;
751     margin-bottom: $spacer;
752     border-bottom: 1px solid $grey;
753
754     h4:first-child {
755       word-wrap: break-word;
756     }
757   }
758
759   .browse-section:last-of-type {
760     border-bottom: none;
761   }
762
763   .browse-tag-list {
764     background-color: $offwhite;
765     table-layout: fixed;
766     border-collapse: separate;
767     border-spacing: 0;
768     width: 100%;
769     margin-bottom: $spacer;
770
771     th, td {
772       border-bottom: 1px solid $grey;
773     }
774
775     tr:last-child th, tr:last-child td {
776       border-bottom: 0;
777     }
778
779     .browse-tag-k,
780     .browse-tag-v {
781       width: 50%;
782       padding: 6px 10px;
783       word-wrap: break-word;
784       white-space: pre-wrap;
785     }
786
787     .browse-tag-k {
788       font-weight: 500;
789       background-color: $offwhite;
790     }
791
792     .browse-tag-v {
793       border-left: 1px solid $grey;
794       background-color: #fff;
795     }
796
797     .colour-preview-box {
798       float: right;
799       width: 14px;
800       height: 14px;
801       margin: 4px 0px;
802       border: 1px solid rgba(0, 0, 0, .1);
803       // add color via inline css on element: background-color: <tag value>;
804     }
805   }
806
807   .subscribe-buttons input {
808     font-size: 90%;
809     line-height: 15px;
810     min-height: 20px;
811   }
812
813   span.action-button:hover {
814     cursor: pointer;
815     text-decoration: underline;
816   }
817
818   .note-description {
819     overflow: hidden;
820     margin: 0 0 10px 10px;
821   }
822
823   .query-results {
824     display: none;
825
826     ul {
827       li {
828         &.query-result {
829           cursor: pointer;
830         }
831
832         &.selected {
833           background: $list-highlight;
834         }
835       }
836     }
837   }
838 }
839
840 /* Bootstrap buttons don't have any vertical margin, so
841    they touch when adjacent buttons wrap onto a new line
842    e.g. wide form buttons on a narrow sidebar */
843
844 .btn-wrapper {
845   > .btn {
846     margin-bottom: $spacer * 0.25;
847   }
848 }
849
850 /* Rules for export sidebar */
851
852 .export_form {
853   .export_area_inputs,
854   .export_button {
855     text-align: center;
856   }
857
858   .export_area_inputs {
859     margin-bottom: $spacer;
860     input[type="text"] {
861       width: 100px;
862       text-align: center;
863     }
864   }
865
866   .export_boxy {
867     background: $lightgrey;
868
869     #maxlat { margin-top: -1px; }
870     #minlon {
871       float: left;
872       /* no-r2 */ margin-left: -1px;
873     }
874     #maxlon {
875       float: right;
876       /* no-r2 */ margin-right: -1px;
877     }
878     #minlat { margin-bottom: -1px; }
879   }
880 }
881
882 /* Rules for edit pages */
883
884 .site-edit {
885   #content {
886     position: absolute;
887     top: $headerHeight;
888     bottom: 0;
889     width: 100%;
890   }
891
892   #map {
893     height: 100%;
894     overflow: hidden;
895   }
896 }
897
898 /* Rules for non-map content pages */
899
900 .content-heading {
901   background: $lightgrey;
902 }
903
904 .content-inner {
905   position: relative;
906   max-width: 960px;
907   margin: auto;
908   padding: $lineheight;
909 }
910
911 /* Overrides for pages that use new layout conventions */
912
913 .header-illustration {
914   background-position: 0 0;
915   background-repeat: no-repeat;
916   position: relative;
917   min-height: 200px;
918   width: 100%;
919   left: 0;
920   bottom: 0;
921
922   &.new-user-main {
923     background-image: image-url("sign-up-illustration.png");
924   }
925
926   &.confirm-main {
927     background-image: image-url("confirm-illustration.png");
928   }
929
930   &.new-user-terms {
931     background-image: image-url("terms-illustration.png");
932   }
933
934   &.new-user-arm {
935     height: 110px;
936     width: 130px;
937     left: 280px;
938     top: 180px;
939     background-image: image-url("sign-up-illustration-arm.png");
940     position: absolute;
941     z-index: 100;
942     pointer-events: none;
943   }
944 }
945
946 [dir=rtl] .header-illustration {
947   transform: scaleX(-1);
948
949   h1 {
950     transform: scaleX(-1);
951   }
952 }
953
954 #content.maximised {
955   top: 0;
956   left: 0;
957   right: 0;
958   bottom: 0;
959   border: 0;
960   z-index: 2000;
961 }
962
963 /* Rules for small maps in content areas */
964
965 .content_map {
966   height: 200px;
967   margin-bottom: $lineheight;
968 }
969
970 @include media-breakpoint-up(md) {
971   .content_map {
972     height: 400px;
973   }
974 }
975
976 /* Rules for the user map */
977
978 .content_map .leaflet-popup-content {
979   margin: $spacer;
980   min-height: 50px;
981 }
982
983 /* Rules for user popups on maps */
984
985 .user_popup {
986   min-width: 200px;
987   p {
988     padding: 0 0 5px 0;
989     margin: 0 0 0 60px;
990     font-size: 12px;
991   }
992 }
993
994 /* Rules for the user list */
995
996 #user_list {
997   width: 100%;
998 }
999
1000 /* Rules for the diary entry page */
1001
1002 .diary_entries {
1003   #map {
1004     height: 400px;
1005     display: none;
1006   }
1007   .comments {
1008     max-width: 740px;
1009   }
1010   .diary-comment {
1011     border-top: 1px dashed $grey;
1012     &:first-child {
1013       border-top: 1px solid $grey;
1014     }
1015   }
1016 }
1017
1018 /* Rules for the account confirmation page */
1019
1020 .users-terms {
1021   .legale {
1022     padding: $lineheight;
1023     margin-bottom: $lineheight;
1024     overflow: auto;
1025     height: 20em;
1026
1027     li {
1028       list-style: inherit;
1029     }
1030
1031     ol ol {
1032       list-style-type: lower-alpha;
1033     }
1034   }
1035 }
1036
1037 /* Rules for the oauth authorization page */
1038
1039 .oauth-authorize ul {
1040   list-style: none;
1041 }
1042
1043 /* Rules for messages pages */
1044
1045 .messages {
1046   .inbox-row {
1047     background: $offwhite;
1048   }
1049
1050   .inbox-row-unread {
1051     background: #CBEEA7;
1052   }
1053 }
1054
1055 .search_form {
1056   background-color: $lightgrey;
1057
1058   .describe_location {
1059     top: 6px;
1060     right: 6px;
1061     font-size: 10px;
1062     color: $blue;
1063   }
1064 }
1065
1066 .directions_form {
1067   background-color: $lightgrey;
1068 }
1069
1070 /* Rules for user images */
1071
1072 img.user_image {
1073   max-width: 100px;
1074   max-height: 100px;
1075 }
1076
1077 img.user_thumbnail {
1078   max-width: 50px;
1079   max-height: 50px;
1080 }
1081
1082 img.user_thumbnail_tiny {
1083   width: auto;
1084   height: auto;
1085   max-width: 25px;
1086   max-height: 25px;
1087 }
1088
1089 /* General styles for action lists / subnavs */
1090
1091 nav.secondary-actions {
1092   margin-left: -11px;
1093   overflow: hidden;
1094   > ul {
1095     display: flex;
1096     flex-direction: row;
1097     flex-wrap: wrap;
1098     margin-bottom: 0;
1099     margin-left: -1px;
1100     padding: 0;
1101     > li {
1102       flex-basis: auto;
1103       list-style: none;
1104       border-left: 1px solid $grey;
1105       padding-left: $lineheight * 0.5;
1106       margin-right: $lineheight * 0.5;
1107       margin-bottom: $lineheight * 0.125;
1108     }
1109   }
1110 }
1111
1112 div.secondary-actions {
1113   padding: 10px;
1114   text-align: center;
1115 }
1116
1117 /* Rules for rich text */
1118
1119 .richtext,
1120 .prose {
1121   code {
1122     background: $lightgrey;
1123     padding: 2px 3px;
1124     direction: inherit; /* fix for Bootstrap < 5.2 */
1125     unicode-bidi: unset; /* fix for Bootstrap < 5.2 */
1126   }
1127
1128   pre {
1129     background: $lightgrey;
1130     padding: 2px 3px;
1131     white-space: pre-wrap;
1132
1133     code {
1134       padding: 0;
1135     }
1136   }
1137
1138   img {
1139     padding: $lineheight;
1140     background-color: $offwhite;
1141     display: block;
1142     max-width: 100%;
1143     margin: auto;
1144   }
1145
1146   blockquote {
1147     border-left: $lineheight solid $offwhite;
1148     padding-left: $lineheight;
1149     margin: 0;
1150     color: $darkgrey;
1151   }
1152 }
1153
1154 /* Rules for the iD editor */
1155
1156 .id-embed {
1157   width: 100%;
1158   height: 100%;
1159 }
1160
1161 /* Rules for the "Welcome" page */
1162 .site-welcome, .site-fixthemap {
1163   .sprite {
1164     background-image: image-url("welcome-sprite.png");
1165     background-size: 500px 250px;
1166     display: block;
1167   }
1168
1169   .sprite.small {
1170     width: 50px;
1171     height: 50px;
1172   }
1173
1174   .sprite.x {
1175     /* no-r2 */ background-position: -50px 0;
1176   }
1177
1178   .sprite.term {
1179     margin-right: 10px;
1180     vertical-align: middle;
1181   }
1182
1183   .sprite.node {
1184     /* no-r2 */ background-position: -100px 0;
1185   }
1186
1187   .sprite.way {
1188     /* no-r2 */ background-position: -150px 0;
1189   }
1190
1191   .sprite.tag {
1192     /* no-r2 */ background-position: -200px 0;
1193   }
1194
1195   .sprite.editor {
1196     /* no-r2 */ background-position: -250px 0;
1197   }
1198
1199   .sprite.question {
1200     /* no-r2 */ background-position: -300px 0;
1201   }
1202
1203   .sprite.rules {
1204     /* no-r2 */ background-position: -350px 0;
1205   }
1206
1207   .icon.note {
1208     background-color: #333;
1209     border-radius: 4px;
1210   }
1211 }
1212
1213 .site-about #content {
1214   background-color: $lightgrey;
1215
1216   .content-inner {
1217     max-width: 760px;
1218   }
1219
1220   .attr {
1221     margin-top: -20px;
1222
1223     h1 {
1224       span {
1225         color: $vibrant-green;
1226       }
1227     }
1228
1229     .user-image {
1230       height: 150px;
1231       background-position: 0 50%;
1232       background-repeat: no-repeat;
1233       background-image: image-url('about/osm.png');
1234       background-size: cover;
1235       background-color: $vibrant-green;
1236     }
1237
1238     .byosm {
1239       background: $vibrant-green;
1240     }
1241
1242     .byosm span {
1243       display: inline-block;
1244       width: 1em;
1245       margin-left: -1em;
1246     }
1247   }
1248
1249   .icon {
1250     width: 30px;
1251     height: 30px;
1252     background: 40px 40px image-url('about/sprite.png') no-repeat;
1253
1254     &.local {
1255       /* no-r2 */
1256       background-position: 0px 0px;
1257     }
1258     &.community {
1259       /* no-r2 */
1260       background-position: 0px -40px;
1261     }
1262     &.open {
1263       /* no-r2 */
1264       background-position: 0px -80px;
1265     }
1266     &.partners {
1267       /* no-r2 */
1268       background-position: 0px -120px;
1269     }
1270     &.infringement {
1271       /* no-r2 */
1272       background-position: 0px -160px;
1273     }
1274     &.legal {
1275       /* no-r2 */
1276       background-position: -45px -160px;
1277     }
1278   }
1279 }
1280
1281 @import 'browse';