]> git.openstreetmap.org Git - rails.git/blob - app/assets/stylesheets/common.scss
1ccdc7871454547b94623c1f393e469a1c222e1f
[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 time[title] {
23   text-decoration: underline dotted;
24 }
25
26 #container { position: relative; }
27
28 .small_icon {
29   vertical-align: middle;
30   margin-right: $lineheight * 0.25;
31 }
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.svg") no-repeat 0 0;
41   text-indent: -9999px;
42   overflow: hidden;
43 }
44
45 .icon.search      { /*rtl:ignore*/ background-position: 0 0; }
46 .icon.donate      { /*rtl:ignore*/ background-position: -20px 0; }
47 .icon.zoomin      { /*rtl:ignore*/ background-position: -40px 0; }
48 .icon.zoomout     { /*rtl:ignore*/ background-position: -60px 0; }
49 .icon.geolocate   { /*rtl:ignore*/ background-position: -80px 0; }
50 .active .icon.geolocate   { /*rtl:ignore*/ background-position: -80px -20px; }
51 .icon.layers      { /*rtl:ignore*/ background-position: -100px 0; }
52 .icon.key         { /*rtl:ignore*/ background-position: -120px 0; }
53 .icon.share       { /*rtl:ignore*/ background-position: -140px 0; }
54 .icon.clipboard   { /*rtl:ignore*/ background-position: -160px 0; }
55 .icon.link        { /*rtl:ignore*/ background-position: -180px 0; }
56 .icon.close       { /*rtl:ignore*/ background-position: -200px 0; }
57 .icon.close:hover { /*rtl:ignore*/ background-position: -200px -20px; }
58 .icon.check       { /*rtl:ignore*/ background-position: -220px 0; }
59 .icon.note        { /*rtl:ignore*/ background-position: -240px 0; }
60 .icon.note.grey   { /*rtl:ignore*/ background-position: -240px -20px; }
61 .icon.query       { /*rtl:ignore*/ background-position: -260px 0; }
62
63 /* Utility for de-emphasizing content */
64
65 .text-muted a {
66   color: $blue;
67 }
68
69 /* Rules for the header */
70
71 #menu-icon {
72   display: none;
73   position: absolute;
74   top: 0;
75   right: 0;
76   background: image-url("menu-icon.png") no-repeat;
77   background-size: 30px 30px;
78   width: 30px;
79   height: 30px;
80   margin: 14px 10px 0 0;
81   opacity: 0.6;
82 }
83
84 @include color-mode(dark) {
85   #menu-icon {
86     filter: invert(1);
87   }
88 }
89
90 header {
91   height: $headerHeight;
92   position: relative;
93   z-index: 1001;
94   font-size: 14px;
95
96   h1, nav, nav > ul, nav > ul > li {
97     display: inline-block;
98   }
99
100   > * {
101     height: 100%;
102     padding: $lineheight * 0.5;
103   }
104
105   img.logo {
106     margin-top: -2px;
107   }
108
109   h1 {
110     font-size: 18px;
111     line-height: 1.2;
112     padding-top: 15px;
113   }
114
115   .btn {
116     font-size: 14px;
117   }
118
119   nav.primary {
120     margin-right: auto;
121   }
122 }
123
124 nav.primary {
125   & > .btn-group .btn-outline-primary {
126     @include button-outline-variant($green, $color-hover: $white, $active-color: $white);
127   }
128
129   .disabled {
130     .btn-outline-primary {
131       color: $grey;
132       cursor: default;
133
134       .caret {
135         border-top-color: $grey;
136       }
137
138       &:hover {
139         background-color: lighten($green, 30%);
140       }
141     }
142   }
143
144   // Small tweaks to the toggle to stop the primary colour showing through
145   // when the menu is shown
146   .show > .btn-outline-primary.dropdown-toggle {
147     background-color: $green;
148     border-color: $green;
149
150     &:focus {
151       box-shadow: 0 0 0 0.2rem fade-out($green, 0.5);
152     }
153   }
154 }
155
156 nav.secondary {
157   .nav-link {
158     padding: 0.2rem;
159   }
160
161   #inboxanchor {
162     background-color: lighten($grey, 10%);
163   }
164 }
165
166 nav.primary, nav.secondary {
167   .dropdown-item {
168     &:hover, &:active {
169       background-color: $green;
170       color: white;
171     }
172   }
173 }
174
175 #compact-secondary-nav {
176   display: none;
177 }
178
179 body.compact-nav {
180   #compact-secondary-nav {
181     display: inline-block;
182   }
183   .compact-hide {
184     display: none;
185   }
186 }
187
188 body.small-nav {
189   #menu-icon {
190     display: block;
191   }
192
193   header {
194     flex-direction: column;
195     height: auto;
196     min-height: $headerHeight;
197
198     &.closed nav {
199       display: none;
200     }
201
202     .search_forms {
203       display: block;
204     }
205   }
206
207   #sidebar .search_forms,
208   #edit_tab,
209   #export_tab {
210     display: none;
211   }
212
213   nav.primary {
214     margin-right: 0;
215     padding: 0;
216
217     .btn-group {
218       width: 100%;
219       padding: 10px;
220     }
221   }
222
223   nav.secondary {
224     .user-menu, .login-menu {
225       width: 100%;
226     }
227   }
228
229   #compact-secondary-nav {
230     display: none;
231   }
232
233   .compact-hide {
234     display: inline-block;
235   }
236
237   .overlay-sidebar #sidebar .welcome {
238     display: none;
239   }
240
241   .overlay-sidebar #sidebar #banner {
242     display: none;
243   }
244 }
245
246 /* Utility for styling notification numbers */
247
248 .count-number {
249   background: lighten($green, 30%);
250   color: $gray-800;
251   font-weight: $font-weight-normal;
252 }
253
254 /* Rules for Leaflet maps */
255
256 .leaflet-top.leaflet-right,
257 .leaflet-top.leaflet-left {
258   height: 100%;
259   column-gap: 10px;
260   display: flex;
261   flex-direction: column;
262   flex-wrap: wrap-reverse;
263 }
264
265 .leaflet-control .control-button {
266   display: block;
267   height: 40px;
268   width: 40px;
269   background-color: #333;
270   background-color: rgba(0,0,0,.6);
271   outline: none;
272
273   &:hover,
274   &:focus {
275     background-color: black;
276   }
277
278   &.disabled,
279   &.leaflet-disabled {
280     background-color: #333;
281     background-color: rgba(0,0,0,.5);
282     cursor: default;
283   }
284
285   &.active {
286     background-color: $vibrant-green;
287   }
288
289   &-first {
290     border-start-start-radius: 4px;
291   }
292
293   &-last {
294     border-end-start-radius: 4px;
295     margin-bottom: 10px;
296   }
297
298   .icon {
299     margin: 10px;
300   }
301 }
302
303 /* Rules for the sidebar and main map area */
304
305 .map-layout {
306   #content {
307     overflow: hidden;
308     position: absolute;
309     top: $headerHeight;
310     bottom: 0;
311     width: 100%;
312   }
313
314   #sidebar, #map {
315     position: relative;
316     height: 100%;
317     overflow-x: hidden;
318     overflow-y: auto;
319   }
320
321   #sidebar {
322     float: left;
323     width: $sidebarWidth;
324
325     #sidebar_loader {
326       display: none;
327     }
328   }
329
330   .overlay-sidebar #sidebar {
331     position: absolute;
332     z-index: 1000;
333     height: auto;
334     overflow: hidden;
335
336     #banner {
337       display: block;
338     }
339
340     .welcome {
341       display: block;
342     }
343
344     #sidebar_content {
345       display: none;
346     }
347   }
348
349   .welcome {
350     display: none;
351   }
352
353   #banner {
354     display: none;
355
356     img {
357       display: block;
358       width: $sidebarWidth;
359     }
360   }
361
362   #map {
363     height: 100%;
364     overflow: hidden;
365
366     &.query-active {
367       cursor: help;
368     }
369
370     &.query-disabled {
371       cursor: not-allowed;
372     }
373
374     .leaflet-marker-draggable {
375       cursor: move;
376     }
377   }
378
379   #map-ui {
380     display: none;
381     position: relative;
382     float: right;
383     width: 250px;
384     height: 100%;
385     overflow: auto;
386   }
387 }
388
389 @include media-breakpoint-down(md) {
390   body.map-layout {
391     #sidebar, #map {
392       position: relative;
393       overflow-x: hidden;
394       width: 100%;
395       height: 50%;
396     }
397
398     #map-ui {
399       z-index: 9999;
400       width: 100%;
401       height: 50%;
402       overflow-y: scroll;
403     }
404
405     .overlay-sidebar {
406       #sidebar {
407         position: absolute;
408         width: 350px;
409         height: auto;
410         overflow: hidden;
411       }
412
413       #map, #map-ui {
414         height: 100%;
415       }
416     }
417   }
418 }
419
420 .layers-ui {
421   .base-layers > * {
422     height: 56px;
423
424     > .btn {
425       --bs-btn-border-color: var(--bs-body-bg);
426     }
427     > .btn:hover {
428       --bs-btn-border-color: var(--bs-primary-border-subtle);
429     }
430   }
431
432   .overlay-layers {
433     p {
434       font-size: 13px;
435       margin-bottom: 8px;
436     }
437     li.disabled { color: $darkgrey; }
438   }
439 }
440
441 .share-ui {
442   #mapnik_scale {
443     width: 100px;
444   }
445 }
446
447 .leaflet-top {
448   top: 10px !important;
449   .leaflet-control {
450     margin-right: 0px !important;
451     margin-top: 0px !important;
452   }
453 }
454
455 .leaflet-popup-scrolled {
456   padding-right: $lineheight;
457   border-bottom: 0px !important;
458   border-top: 0px !important;
459 }
460
461 .leaflet-popup-content-wrapper {
462   border-radius: 4px !important;
463 }
464
465 /* Rules for attribution text under the main map shown on printouts */
466
467 .donate-attr { color: darken($green, 10%) !important; }
468
469 /* Rules for the sidebar */
470
471 #browse_status {
472   input {
473     display: block;
474     margin-left: auto;
475     margin-right: auto;
476   }
477 }
478
479 /* Temporary label size override until we remove site-wide font customisation */
480
481 form {
482   label {
483     font-size: 16px;
484   }
485   .col-form-label {
486     font-size: 16px;
487   }
488 }
489
490 /* Stop bootstrap 5 from floating legends when they don't need to be */
491 legend {
492   float: none;
493 }
494
495 /* Override the text colour for primary and secondary buttons, to match our
496    bootstrap 4 colours. Note this has accessibility issues, which is why
497    bootstrap 5 calculates black as the appropriate colour, and we should
498    reconsider our colours at some point with that in mind. */
499
500 .btn-primary {
501   @include button-variant($primary, $primary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
502 }
503
504 .btn-secondary {
505   @include button-variant($secondary, $secondary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
506 }
507
508 .btn-outline-secondary {
509   @include button-outline-variant($secondary, $color-hover: $white, $active-color: $white);
510 }
511
512 /* Rules for the search and direction forms */
513
514 header .search_forms,
515 .directions_form {
516   display: none;
517 }
518
519 /* Rules for search sidebar */
520
521 #sidebar .search_results_entry {
522   ul li.selected {
523     background: $list-highlight;
524   }
525
526   .search_more .loader {
527     display: none;
528   }
529 }
530
531 /* Rules for routing */
532
533 div.direction {
534   background-image: image-url('routing-sprite.png');
535   width: 20px;
536   height: 20px;
537   background-repeat: no-repeat;
538 }
539 @for $i from 0 through 25 {
540 div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
541 }
542
543 @include color-mode(dark) {
544   div.direction {
545     filter: invert(1);
546   }
547 }
548
549 td.distance {
550     font-size: x-small;
551 }
552 tr.turn {
553     cursor: pointer;
554 }
555 tr.turn:hover {
556     background: $list-highlight;
557 }
558
559 .routing_marker { width: 15px; cursor: move; }
560
561 .browse_status {
562   display: none;
563 }
564
565 /* Rules for the history sidebar */
566
567 #sidebar .changesets {
568   li {
569     &.selected { background: $list-highlight; }
570     /* color is derived from changeset bbox fillColor in history.js */
571
572     a.stretched-link > span, a:not(.stretched-link), [title] {
573       position: relative;
574       z-index: 2; /* needs to be higher than Bootstrap's stretched link ::after z-index */
575     }
576   }
577
578   .changeset_more .loader {
579     display: none;
580     width: 100%;
581   }
582 }
583
584 /* Rules for the browse sidebar */
585
586 #sidebar_content {
587   .browse-section {
588     padding-bottom: $spacer;
589     margin-bottom: $spacer;
590     border-bottom: 1px solid $grey;
591
592     h4:first-child {
593       word-wrap: break-word;
594     }
595   }
596
597   .browse-section:last-of-type {
598     border-bottom: none;
599   }
600
601   .browse-tag-list {
602     table-layout: fixed;
603     white-space: pre-wrap;
604
605     tr:last-child th, tr:last-child td {
606       border-bottom: 0;
607     }
608   }
609
610   .note-description {
611     overflow: hidden;
612     margin: 0 0 10px 10px;
613   }
614
615   .query-results {
616     display: none;
617
618     ul {
619       li {
620         &.query-result {
621           cursor: pointer;
622         }
623
624         &.selected {
625           background: $list-highlight;
626         }
627       }
628     }
629   }
630 }
631
632 /* Bootstrap buttons don't have any vertical margin, so
633    they touch when adjacent buttons wrap onto a new line
634    e.g. wide form buttons on a narrow sidebar */
635
636 .btn-wrapper {
637   > .btn {
638     margin-bottom: $spacer * 0.25;
639   }
640 }
641
642 /* Force LTR/RTL alignment for placeholder text */
643
644 .form-control::placeholder {
645   text-align: left;
646 }
647
648 /* Rules for export sidebar */
649
650 .export_form {
651   .export_area_inputs,
652   .export_button {
653     text-align: center;
654   }
655
656   .export_area_inputs {
657     margin-bottom: $spacer;
658     input[type="text"] {
659       width: 100px;
660       text-align: center;
661     }
662   }
663
664   .export_boxy {
665     > * {
666         margin: -1px;
667     }
668     #minlon {
669       /*rtl:ignore*/ float: left;
670     }
671     #maxlon {
672       /*rtl:ignore*/ float: right;
673     }
674   }
675 }
676
677 /* Rules for edit pages */
678
679 .site-edit {
680   #content {
681     position: absolute;
682     top: $headerHeight;
683     bottom: 0;
684     width: 100%;
685   }
686 }
687
688 /* Rules for non-map content pages */
689
690 .content-inner {
691   position: relative;
692   max-width: 960px;
693   margin: auto;
694   padding: $lineheight;
695 }
696
697 /* Overrides for pages that use new layout conventions */
698
699 .header-illustration {
700   background-position: 0 0;
701   background-repeat: no-repeat;
702   position: relative;
703   min-height: 200px;
704   width: 100%;
705   left: 0;
706   bottom: 0;
707
708   &.new-user-main {
709     background-image: image-url("sign-up-illustration.png");
710   }
711
712   &.confirm-main {
713     background-image: image-url("confirm-illustration.png");
714   }
715
716   &.new-user-terms {
717     background-image: image-url("terms-illustration.png");
718   }
719
720   &.new-user-arm {
721     height: 110px;
722     width: 130px;
723     left: 280px;
724     top: 180px;
725     background-image: image-url("sign-up-illustration-arm.png");
726     position: absolute;
727     z-index: 100;
728     pointer-events: none;
729   }
730 }
731
732 [dir=rtl] .header-illustration {
733   transform: scaleX(-1);
734
735   h1 {
736     transform: scaleX(-1);
737   }
738 }
739
740 /* Rules for small maps in content areas */
741
742 .content_map {
743   height: 200px;
744   margin-bottom: $lineheight;
745 }
746
747 @include media-breakpoint-up(md) {
748   .content_map {
749     height: 400px;
750   }
751 }
752
753 /* Rules for the user map */
754
755 .content_map .leaflet-popup-content {
756   margin: $spacer;
757   min-height: 50px;
758 }
759
760 /* Rules for user popups on maps */
761
762 .user_popup {
763   min-width: 200px;
764   p {
765     padding: 0 0 5px 0;
766     margin: 0 0 0 60px;
767     font-size: 12px;
768   }
769 }
770
771 /* Rules for the diary entry page */
772
773 .diary_entries {
774   #map {
775     height: 400px;
776     display: none;
777   }
778   .diary-comment .col-auto {
779     width: 62px;
780   }
781   .diary-comment .col {
782     max-width: 690px;
783   }
784 }
785
786 /* Rules for the account confirmation page */
787
788 .users-terms {
789   .legale {
790     padding: $lineheight;
791     margin-bottom: $lineheight;
792     overflow: auto;
793     height: 20em;
794
795     li {
796       list-style: inherit;
797     }
798
799     ol ol {
800       list-style-type: lower-alpha;
801     }
802   }
803 }
804
805 /* Rules for messages pages */
806
807 .messages {
808   .inbox-row {
809     background: $offwhite;
810   }
811
812   .inbox-row-unread td {
813     background: #CBEEA7;
814   }
815 }
816
817 .search_form {
818   #query {
819     z-index: 0;
820   }
821
822   .describe_location {
823     font-size: 10px;
824   }
825 }
826
827 /* Rules for user images */
828
829 img.user_image {
830   max-width: 100px;
831   max-height: 100px;
832 }
833
834 img.user_thumbnail {
835   max-width: 50px;
836   max-height: 50px;
837 }
838
839 img.user_thumbnail_tiny {
840   width: 25px;
841   height: 25px;
842   object-fit: contain;
843 }
844
845 /* General styles for action lists / subnavs */
846
847 nav.secondary-actions {
848   margin-left: -11px;
849   overflow: hidden;
850   > ul {
851     display: flex;
852     flex-direction: row;
853     flex-wrap: wrap;
854     margin-bottom: 0;
855     margin-left: -1px;
856     padding: 0;
857     > li {
858       flex-basis: auto;
859       list-style: none;
860       border-left: 1px solid $grey;
861       padding-left: $lineheight * 0.5;
862       margin-right: $lineheight * 0.5;
863       margin-bottom: $lineheight * 0.125;
864     }
865   }
866 }
867
868 div.secondary-actions {
869   padding: 10px;
870   text-align: center;
871 }
872
873 /* Rules for rich text */
874
875 .richtext,
876 .prose {
877   code {
878     background: var(--bs-secondary-bg);
879     padding: 2px 3px;
880   }
881
882   pre {
883     background: var(--bs-secondary-bg);
884     padding: 2px 3px;
885     white-space: pre-wrap;
886
887     code {
888       padding: 0;
889     }
890   }
891
892   img {
893     padding: $lineheight;
894     background-color: var(--bs-tertiary-bg);
895     display: block;
896     max-width: 100%;
897     margin: auto;
898   }
899
900   blockquote {
901     border-left: $lineheight solid var(--bs-tertiary-bg);
902     padding-left: $lineheight;
903     margin: 0;
904     color: var(--bs-secondary-color);
905   }
906 }
907
908 /* Rules for the "Welcome" page */
909 .site-welcome, .site-fixthemap {
910   .sprite {
911     background-image: image-url("welcome-sprite.png");
912     background-size: 500px 250px;
913     display: block;
914   }
915
916   .sprite.small {
917     width: 50px;
918     height: 50px;
919   }
920
921   .sprite.x {
922     /*rtl:ignore*/ background-position: -50px 0;
923   }
924
925   .sprite.term {
926     margin-right: 10px;
927     vertical-align: middle;
928   }
929
930   .sprite.node {
931     /*rtl:ignore*/ background-position: -100px 0;
932   }
933
934   .sprite.way {
935     /*rtl:ignore*/ background-position: -150px 0;
936   }
937
938   .sprite.tag {
939     /*rtl:ignore*/ background-position: -200px 0;
940   }
941
942   .sprite.editor {
943     /*rtl:ignore*/ background-position: -250px 0;
944   }
945
946   .sprite.question {
947     /*rtl:ignore*/ background-position: -300px 0;
948   }
949
950   .sprite.rules {
951     /*rtl:ignore*/ background-position: -350px 0;
952   }
953
954   .icon.note {
955     background-color: #333;
956     border-radius: 4px;
957   }
958 }
959
960 .site-about #content {
961   .content-inner {
962     max-width: 760px;
963   }
964
965   .attr {
966     margin-top: -20px;
967
968     h1 {
969       span {
970         color: $vibrant-green;
971       }
972     }
973
974     .user-image {
975       height: 150px;
976       background-position: 0 50%;
977       background-repeat: no-repeat;
978       background-image: image-url('about/osm.png');
979       background-size: cover;
980       background-color: $vibrant-green;
981     }
982
983     .byosm {
984       background: $vibrant-green;
985     }
986
987     .byosm span {
988       display: inline-block;
989       width: 1em;
990       margin-left: -1em;
991     }
992   }
993
994   .icon {
995     width: 30px;
996     height: 30px;
997     background: 40px 40px image-url('about/sprite.png') no-repeat;
998
999     &.local {
1000       /*rtl:ignore*/
1001       background-position: 0px 0px;
1002     }
1003     &.community {
1004       /*rtl:ignore*/
1005       background-position: 0px -40px;
1006     }
1007     &.open {
1008       /*rtl:ignore*/
1009       background-position: 0px -80px;
1010     }
1011     &.partners {
1012       /*rtl:ignore*/
1013       background-position: 0px -120px;
1014     }
1015     &.infringement {
1016       /*rtl:ignore*/
1017       background-position: 0px -160px;
1018     }
1019     &.legal {
1020       /*rtl:ignore*/
1021       background-position: -45px -160px;
1022     }
1023   }
1024 }
1025
1026 /* Rules for tabs inside secondary background sections */
1027
1028 .bg-body-secondary .nav-tabs {
1029   --bs-border-color: var(--bs-secondary-border-subtle);
1030   --bs-secondary-bg: var(--bs-secondary-border-subtle);
1031   margin-bottom: -1px;
1032 }
1033
1034 /* Rules for traces */
1035
1036 img.trace_image {
1037   mix-blend-mode: darken;
1038 }
1039
1040 @include color-mode(dark) {
1041   img.trace_image {
1042     filter: invert(1);
1043     mix-blend-mode: lighten;
1044   }
1045 }
1046
1047 @import 'browse';