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