]> git.openstreetmap.org Git - rails.git/blob - app/assets/stylesheets/common.scss
Add a primary key to the changeset_tags table
[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-group .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   .changeset_more .loader {
733     display: none;
734     width: 100%;
735   }
736 }
737
738 /* Rules for the browse sidebar */
739
740 #sidebar_content {
741   .browse-section {
742     padding-bottom: $spacer;
743     margin-bottom: $spacer;
744     border-bottom: 1px solid $grey;
745
746     h4:first-child {
747       word-wrap: break-word;
748     }
749   }
750
751   .browse-section:last-of-type {
752     border-bottom: none;
753   }
754
755   .browse-tag-list {
756     background-color: $offwhite;
757     table-layout: fixed;
758     border-collapse: separate;
759     border-spacing: 0;
760     width: 100%;
761     margin-bottom: $spacer;
762
763     th, td {
764       border-bottom: 1px solid $grey;
765     }
766
767     tr:last-child th, tr:last-child td {
768       border-bottom: 0;
769     }
770
771     .browse-tag-k,
772     .browse-tag-v {
773       width: 50%;
774       padding: 6px 10px;
775       word-wrap: break-word;
776       white-space: pre-wrap;
777     }
778
779     .browse-tag-k {
780       font-weight: 500;
781       background-color: $offwhite;
782     }
783
784     .browse-tag-v {
785       border-left: 1px solid $grey;
786       background-color: #fff;
787     }
788
789     .colour-preview-box {
790       float: right;
791       width: 14px;
792       height: 14px;
793       margin: 4px 0px;
794       border: 1px solid rgba(0, 0, 0, .1);
795       // add color via inline css on element: background-color: <tag value>;
796     }
797   }
798
799   .subscribe-buttons input {
800     font-size: 90%;
801     line-height: 15px;
802     min-height: 20px;
803   }
804
805   span.action-button:hover {
806     cursor: pointer;
807     text-decoration: underline;
808   }
809
810   .note-description {
811     overflow: hidden;
812     margin: 0 0 10px 10px;
813   }
814
815   .query-results {
816     display: none;
817
818     ul {
819       li {
820         &.query-result {
821           cursor: pointer;
822         }
823
824         &.selected {
825           background: $list-highlight;
826         }
827       }
828     }
829   }
830 }
831
832 /* Bootstrap buttons don't have any vertical margin, so
833    they touch when adjacent buttons wrap onto a new line
834    e.g. wide form buttons on a narrow sidebar */
835
836 .btn-wrapper {
837   > .btn {
838     margin-bottom: $spacer * 0.25;
839   }
840 }
841
842 /* Rules for export sidebar */
843
844 .export_form {
845   .export_area_inputs,
846   .export_button {
847     text-align: center;
848   }
849
850   .export_area_inputs {
851     margin-bottom: $spacer;
852     input[type="text"] {
853       width: 100px;
854       text-align: center;
855     }
856   }
857
858   .export_boxy {
859     background: $lightgrey;
860
861     #maxlat { margin-top: -1px; }
862     #minlon {
863       float: left;
864       /* no-r2 */ margin-left: -1px;
865     }
866     #maxlon {
867       float: right;
868       /* no-r2 */ margin-right: -1px;
869     }
870     #minlat { margin-bottom: -1px; }
871   }
872 }
873
874 /* Rules for edit pages */
875
876 .site-edit {
877   #content {
878     position: absolute;
879     top: $headerHeight;
880     bottom: 0;
881     width: 100%;
882   }
883
884   #map {
885     height: 100%;
886     overflow: hidden;
887   }
888 }
889
890 /* Rules for non-map content pages */
891
892 .content-heading {
893   background: $lightgrey;
894 }
895
896 .content-inner {
897   position: relative;
898   max-width: 960px;
899   margin: auto;
900   padding: $lineheight;
901 }
902
903 /* Overrides for pages that use new layout conventions */
904
905 .header-illustration {
906   background-position: 0 0;
907   background-repeat: no-repeat;
908   position: relative;
909   min-height: 200px;
910   width: 100%;
911   left: 0;
912   bottom: 0;
913
914   &.new-user-main {
915     background-image: image-url("sign-up-illustration.png");
916   }
917
918   &.confirm-main {
919     background-image: image-url("confirm-illustration.png");
920   }
921
922   &.new-user-terms {
923     background-image: image-url("terms-illustration.png");
924   }
925
926   &.new-user-arm {
927     height: 110px;
928     width: 130px;
929     left: 280px;
930     top: 180px;
931     background-image: image-url("sign-up-illustration-arm.png");
932     position: absolute;
933     z-index: 100;
934     pointer-events: none;
935   }
936 }
937
938 [dir=rtl] .header-illustration {
939   transform: scaleX(-1);
940
941   h1 {
942     transform: scaleX(-1);
943   }
944 }
945
946 #content.maximised {
947   top: 0;
948   left: 0;
949   right: 0;
950   bottom: 0;
951   border: 0;
952   z-index: 2000;
953 }
954
955 /* Rules for small maps in content areas */
956
957 .content_map {
958   height: 200px;
959   margin-bottom: $lineheight;
960 }
961
962 @include media-breakpoint-up(md) {
963   .content_map {
964     height: 400px;
965   }
966 }
967
968 /* Rules for the user map */
969
970 .content_map .leaflet-popup-content {
971   margin: $spacer;
972   min-height: 50px;
973 }
974
975 /* Rules for user popups on maps */
976
977 .user_popup {
978   min-width: 200px;
979   p {
980     padding: 0 0 5px 0;
981     margin: 0 0 0 60px;
982     font-size: 12px;
983   }
984 }
985
986 /* Rules for the user list */
987
988 #user_list {
989   width: 100%;
990 }
991
992 /* Rules for the diary entry page */
993
994 .diary_entries {
995   #map {
996     height: 400px;
997     display: none;
998   }
999   .comments {
1000     max-width: 740px;
1001   }
1002   .diary-comment {
1003     border-top: 1px dashed $grey;
1004     &:first-child {
1005       border-top: 1px solid $grey;
1006     }
1007   }
1008 }
1009
1010 /* Rules for the account confirmation page */
1011
1012 .users-terms {
1013   .legale {
1014     padding: $lineheight;
1015     margin-bottom: $lineheight;
1016     overflow: auto;
1017     height: 20em;
1018
1019     li {
1020       list-style: inherit;
1021     }
1022
1023     ol ol {
1024       list-style-type: lower-alpha;
1025     }
1026   }
1027 }
1028
1029 /* Rules for the oauth authorization page */
1030
1031 .oauth-authorize ul {
1032   list-style: none;
1033 }
1034
1035 /* Rules for messages pages */
1036
1037 .messages {
1038   .inbox-row {
1039     background: $offwhite;
1040   }
1041
1042   .inbox-row-unread {
1043     background: #CBEEA7;
1044   }
1045 }
1046
1047 .search_form {
1048   background-color: $lightgrey;
1049
1050   #query {
1051     z-index: 0;
1052   }
1053
1054   .describe_location {
1055     font-size: 10px;
1056   }
1057 }
1058
1059 .directions_form {
1060   background-color: $lightgrey;
1061 }
1062
1063 /* Rules for user images */
1064
1065 img.user_image {
1066   max-width: 100px;
1067   max-height: 100px;
1068 }
1069
1070 img.user_thumbnail {
1071   max-width: 50px;
1072   max-height: 50px;
1073 }
1074
1075 img.user_thumbnail_tiny {
1076   width: auto;
1077   height: auto;
1078   max-width: 25px;
1079   max-height: 25px;
1080 }
1081
1082 /* General styles for action lists / subnavs */
1083
1084 nav.secondary-actions {
1085   margin-left: -11px;
1086   overflow: hidden;
1087   > ul {
1088     display: flex;
1089     flex-direction: row;
1090     flex-wrap: wrap;
1091     margin-bottom: 0;
1092     margin-left: -1px;
1093     padding: 0;
1094     > li {
1095       flex-basis: auto;
1096       list-style: none;
1097       border-left: 1px solid $grey;
1098       padding-left: $lineheight * 0.5;
1099       margin-right: $lineheight * 0.5;
1100       margin-bottom: $lineheight * 0.125;
1101     }
1102   }
1103 }
1104
1105 div.secondary-actions {
1106   padding: 10px;
1107   text-align: center;
1108 }
1109
1110 /* Rules for rich text */
1111
1112 .richtext,
1113 .prose {
1114   code {
1115     background: $lightgrey;
1116     padding: 2px 3px;
1117   }
1118
1119   pre {
1120     background: $lightgrey;
1121     padding: 2px 3px;
1122     white-space: pre-wrap;
1123
1124     code {
1125       padding: 0;
1126     }
1127   }
1128
1129   img {
1130     padding: $lineheight;
1131     background-color: $offwhite;
1132     display: block;
1133     max-width: 100%;
1134     margin: auto;
1135   }
1136
1137   blockquote {
1138     border-left: $lineheight solid $offwhite;
1139     padding-left: $lineheight;
1140     margin: 0;
1141     color: $darkgrey;
1142   }
1143 }
1144
1145 /* Rules for the iD editor */
1146
1147 .id-embed {
1148   width: 100%;
1149   height: 100%;
1150 }
1151
1152 /* Rules for the "Welcome" page */
1153 .site-welcome, .site-fixthemap {
1154   .sprite {
1155     background-image: image-url("welcome-sprite.png");
1156     background-size: 500px 250px;
1157     display: block;
1158   }
1159
1160   .sprite.small {
1161     width: 50px;
1162     height: 50px;
1163   }
1164
1165   .sprite.x {
1166     /* no-r2 */ background-position: -50px 0;
1167   }
1168
1169   .sprite.term {
1170     margin-right: 10px;
1171     vertical-align: middle;
1172   }
1173
1174   .sprite.node {
1175     /* no-r2 */ background-position: -100px 0;
1176   }
1177
1178   .sprite.way {
1179     /* no-r2 */ background-position: -150px 0;
1180   }
1181
1182   .sprite.tag {
1183     /* no-r2 */ background-position: -200px 0;
1184   }
1185
1186   .sprite.editor {
1187     /* no-r2 */ background-position: -250px 0;
1188   }
1189
1190   .sprite.question {
1191     /* no-r2 */ background-position: -300px 0;
1192   }
1193
1194   .sprite.rules {
1195     /* no-r2 */ background-position: -350px 0;
1196   }
1197
1198   .icon.note {
1199     background-color: #333;
1200     border-radius: 4px;
1201   }
1202 }
1203
1204 .site-about #content {
1205   background-color: $lightgrey;
1206
1207   .content-inner {
1208     max-width: 760px;
1209   }
1210
1211   .attr {
1212     margin-top: -20px;
1213
1214     h1 {
1215       span {
1216         color: $vibrant-green;
1217       }
1218     }
1219
1220     .user-image {
1221       height: 150px;
1222       background-position: 0 50%;
1223       background-repeat: no-repeat;
1224       background-image: image-url('about/osm.png');
1225       background-size: cover;
1226       background-color: $vibrant-green;
1227     }
1228
1229     .byosm {
1230       background: $vibrant-green;
1231     }
1232
1233     .byosm span {
1234       display: inline-block;
1235       width: 1em;
1236       margin-left: -1em;
1237     }
1238   }
1239
1240   .icon {
1241     width: 30px;
1242     height: 30px;
1243     background: 40px 40px image-url('about/sprite.png') no-repeat;
1244
1245     &.local {
1246       /* no-r2 */
1247       background-position: 0px 0px;
1248     }
1249     &.community {
1250       /* no-r2 */
1251       background-position: 0px -40px;
1252     }
1253     &.open {
1254       /* no-r2 */
1255       background-position: 0px -80px;
1256     }
1257     &.partners {
1258       /* no-r2 */
1259       background-position: 0px -120px;
1260     }
1261     &.infringement {
1262       /* no-r2 */
1263       background-position: 0px -160px;
1264     }
1265     &.legal {
1266       /* no-r2 */
1267       background-position: -45px -160px;
1268     }
1269   }
1270 }
1271
1272 @import 'browse';