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