]> git.openstreetmap.org Git - rails.git/blob - app/assets/stylesheets/common.scss
Merge remote-tracking branch 'upstream/pull/4736'
[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 time[title] {
14   text-decoration: underline dotted;
15 }
16
17 #container { position: relative; }
18
19 /* Rules for icons */
20
21 .icon {
22   display: inline-block;
23   vertical-align: top;
24   width: 20px;
25   height: 20px;
26   background: transparent image-url("sprite.svg") no-repeat 0 0;
27   text-indent: -9999px;
28   overflow: hidden;
29 }
30
31 .icon.search      { /*rtl:ignore*/ background-position: 0 0; }
32 .icon.donate      { /*rtl:ignore*/ background-position: -20px 0; }
33 .icon.zoomin      { /*rtl:ignore*/ background-position: -40px 0; }
34 .icon.zoomout     { /*rtl:ignore*/ background-position: -60px 0; }
35 .icon.geolocate   { /*rtl:ignore*/ background-position: -80px 0; }
36 .active .icon.geolocate   { /*rtl:ignore*/ background-position: -80px -20px; }
37 .icon.layers      { /*rtl:ignore*/ background-position: -100px 0; }
38 .icon.key         { /*rtl:ignore*/ background-position: -120px 0; }
39 .icon.share       { /*rtl:ignore*/ background-position: -140px 0; }
40 .icon.clipboard   { /*rtl:ignore*/ background-position: -160px 0; }
41 .icon.link        { /*rtl:ignore*/ background-position: -180px 0; }
42 .icon.close       { /*rtl:ignore*/ background-position: -200px 0; }
43 .icon.close:hover { /*rtl:ignore*/ background-position: -200px -20px; }
44 .icon.check       { /*rtl:ignore*/ background-position: -220px 0; }
45 .icon.note        { /*rtl:ignore*/ background-position: -240px 0; }
46 .icon.note.grey   { /*rtl:ignore*/ background-position: -240px -20px; }
47 .icon.query       { /*rtl:ignore*/ background-position: -260px 0; }
48
49 /* Utility for de-emphasizing content */
50
51 .text-muted a {
52   color: $blue;
53 }
54
55 /* Bootstrap contextual table classes overrides in dark mode */
56
57 @include color-mode(dark) {
58   .table-primary {
59     --bs-table-bg: rgb(var(--bs-primary-rgb), .25);
60   }
61   .table-secondary {
62     --bs-table-bg: rgb(var(--bs-secondary-rgb), .25);
63   }
64   .table-success {
65     --bs-table-bg: rgb(var(--bs-success-rgb), .25);
66   }
67   .table-primary, .table-secondary, .table-success {
68     --bs-table-color: initial;
69     border-color: inherit;
70   }
71 }
72
73 /* Rules for the header */
74
75 #menu-icon {
76   display: none;
77   position: absolute;
78   top: 0;
79   right: 0;
80   background: image-url("menu-icon.png") no-repeat;
81   background-size: 30px 30px;
82   width: 30px;
83   height: 30px;
84   margin: 14px 10px 0 0;
85   opacity: 0.6;
86 }
87
88 @include color-mode(dark) {
89   #menu-icon {
90     filter: invert(1);
91   }
92 }
93
94 header {
95   height: $headerHeight;
96   position: relative;
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   img.logo {
109     margin-top: -2px;
110   }
111
112   h1 {
113     font-size: 18px;
114     line-height: 1.2;
115     padding-top: 15px;
116   }
117
118   .btn {
119     font-size: 14px;
120   }
121
122   nav.primary {
123     margin-right: auto;
124   }
125 }
126
127 nav.primary {
128   & > .btn-group .btn-outline-primary {
129     @include button-outline-variant($green, $color-hover: $white, $active-color: $white);
130   }
131
132   .disabled {
133     .btn-outline-primary {
134       color: $grey;
135       cursor: default;
136
137       .caret {
138         border-top-color: $grey;
139       }
140
141       &:hover {
142         background-color: lighten($green, 30%);
143       }
144     }
145   }
146
147   // Small tweaks to the toggle to stop the primary colour showing through
148   // when the menu is shown
149   .show > .btn-outline-primary.dropdown-toggle {
150     background-color: $green;
151     border-color: $green;
152
153     &:focus {
154       box-shadow: 0 0 0 0.2rem fade-out($green, 0.5);
155     }
156   }
157 }
158
159 nav.secondary {
160   .nav-link {
161     padding: 0.2rem;
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: transparentize(lighten($green, 25%), .25);
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 .leaflet-popup-tip,
460 .leaflet-contextmenu,
461 .leaflet-contextmenu-item {
462   @extend .bg-body, .text-body;
463 }
464
465 .leaflet-contextmenu-item.over {
466   @extend .bg-body-secondary, .border-secondary, .border-opacity-10;
467 }
468
469 .leaflet-popup-content-wrapper {
470   @extend .rounded-1;
471
472   a {
473     color: var(--bs-link-color) !important;
474   }
475 }
476
477 /* Rules for attribution text under the main map shown on printouts */
478
479 .donate-attr { color: darken($green, 10%) !important; }
480
481 /* Rules for the sidebar */
482
483 #browse_status {
484   input {
485     display: block;
486     margin-left: auto;
487     margin-right: auto;
488   }
489 }
490
491 /* Temporary label size override until we remove site-wide font customisation */
492
493 form {
494   label {
495     font-size: 16px;
496   }
497   .col-form-label {
498     font-size: 16px;
499   }
500 }
501
502 /* Stop bootstrap 5 from floating legends when they don't need to be */
503 legend {
504   float: none;
505 }
506
507 /* Override the text colour for primary and secondary buttons, to match our
508    bootstrap 4 colours. Note this has accessibility issues, which is why
509    bootstrap 5 calculates black as the appropriate colour, and we should
510    reconsider our colours at some point with that in mind. */
511
512 .btn-primary {
513   @include button-variant($primary, $primary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
514 }
515
516 .btn-secondary {
517   @include button-variant($secondary, $secondary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
518 }
519
520 .btn-outline-secondary {
521   @include button-outline-variant($secondary, $color-hover: $white, $active-color: $white);
522 }
523
524 /* Rules for the search and direction forms */
525
526 header .search_forms,
527 .directions_form {
528   display: none;
529 }
530
531 .search_form {
532   .describe_location {
533     font-size: 10px;
534   }
535 }
536
537 /* Rules for search sidebar */
538
539 #sidebar .search_results_entry {
540   .search_more .loader {
541     display: none;
542   }
543 }
544
545 /* Rules for routing */
546
547 div.direction {
548   background-image: image-url('routing-sprite.png');
549   width: 20px;
550   height: 20px;
551   background-repeat: no-repeat;
552 }
553 @for $i from 0 through 25 {
554 div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
555 }
556
557 @include color-mode(dark) {
558   div.direction {
559     filter: invert(1);
560   }
561 }
562
563 td.distance {
564     font-size: x-small;
565 }
566 tr.turn {
567     cursor: pointer;
568 }
569
570 .routing_marker { width: 15px; cursor: move; }
571
572 .browse_status {
573   display: none;
574 }
575
576 /* Rules for the history sidebar */
577
578 #sidebar .changesets {
579   li {
580     &.selected {
581       @extend :hover;
582     }
583
584     a.stretched-link > span, a:not(.stretched-link), [title] {
585       position: relative;
586       z-index: 2; /* needs to be higher than Bootstrap's stretched link ::after z-index */
587     }
588   }
589
590   .changeset_more .loader {
591     display: none;
592     width: 100%;
593   }
594 }
595
596 /* Rules for the browse sidebar */
597
598 #sidebar_content {
599   .browse-section {
600     padding-bottom: $spacer;
601     margin-bottom: $spacer;
602     border-bottom: 1px solid $grey;
603
604     h4:first-child {
605       word-wrap: break-word;
606     }
607   }
608
609   .browse-section:last-of-type {
610     border-bottom: none;
611   }
612
613   .browse-tag-list {
614     table-layout: fixed;
615     white-space: pre-wrap;
616     word-wrap: break-word;
617     word-break: break-word;
618
619     tr:last-child th, tr:last-child td {
620       border-bottom: 0;
621     }
622   }
623
624   .note-description {
625     overflow: hidden;
626     margin: 0 0 10px 10px;
627   }
628
629   .query-results {
630     display: none;
631   }
632 }
633
634 /* Bootstrap buttons don't have any vertical margin, so
635    they touch when adjacent buttons wrap onto a new line
636    e.g. wide form buttons on a narrow sidebar */
637
638 .btn-wrapper {
639   > .btn {
640     margin-bottom: $spacer * 0.25;
641   }
642 }
643
644 /* Force LTR/RTL alignment for placeholder text */
645
646 .form-control::placeholder {
647   text-align: left;
648 }
649
650 /* Rules for export sidebar */
651
652 .export_form {
653   .export_area_inputs {
654     input[type="text"] {
655       width: 100px;
656     }
657   }
658
659   .export_boxy {
660     > * {
661         margin: -1px;
662     }
663     #minlon {
664       /*rtl:ignore*/ float: left;
665     }
666     #maxlon {
667       /*rtl:ignore*/ float: right;
668     }
669   }
670 }
671
672 /* Rules for edit pages */
673
674 .site-edit {
675   #content {
676     position: absolute;
677     top: $headerHeight;
678     bottom: 0;
679     width: 100%;
680   }
681 }
682
683 /* Rules for non-map content pages */
684
685 .content-inner {
686   position: relative;
687   max-width: 960px;
688   margin: auto;
689   padding: $lineheight;
690 }
691
692 /* Overrides for pages that use new layout conventions */
693
694 .header-illustration {
695   background-position: 0 0;
696   background-repeat: no-repeat;
697   position: relative;
698   min-height: 200px;
699   width: 100%;
700   left: 0;
701   bottom: 0;
702
703   &.new-user-main {
704     background-image: image-url("sign-up-illustration.png");
705   }
706
707   &.confirm-main {
708     background-image: image-url("confirm-illustration.png");
709   }
710
711   &.new-user-terms {
712     background-image: image-url("terms-illustration.png");
713   }
714
715   &.new-user-arm {
716     height: 110px;
717     width: 130px;
718     left: 280px;
719     top: 180px;
720     background-image: image-url("sign-up-illustration-arm.png");
721     position: absolute;
722     z-index: 100;
723     pointer-events: none;
724   }
725 }
726
727 [dir=rtl] .header-illustration {
728   transform: scaleX(-1);
729
730   h1 {
731     transform: scaleX(-1);
732   }
733 }
734
735 /* Rules for small maps in content areas */
736
737 .content_map {
738   height: 200px;
739   margin-bottom: $lineheight;
740 }
741
742 @include media-breakpoint-up(md) {
743   .content_map {
744     height: 400px;
745   }
746 }
747
748 /* Rules for the user map */
749
750 .content_map .leaflet-popup-content {
751   margin: $spacer;
752   min-height: 50px;
753 }
754
755 /* Rules for user popups on maps */
756
757 .user_popup {
758   p {
759     padding: 0 0 5px 0;
760     margin: 0 0 0 60px;
761     font-size: 12px;
762   }
763 }
764
765 /* Rules for the diary entry page */
766
767 .diary_entries {
768   #map {
769     height: 400px;
770     display: none;
771   }
772   .diary-comment .col-auto {
773     width: 62px;
774   }
775   .diary-comment .col {
776     max-width: 690px;
777   }
778 }
779
780 /* Rules for the account confirmation page */
781
782 .users-terms {
783   .legale {
784     padding: $lineheight;
785     margin-bottom: $lineheight;
786     overflow: auto;
787     height: 20em;
788
789     li {
790       list-style: inherit;
791     }
792
793     ol ol {
794       list-style-type: lower-alpha;
795     }
796   }
797 }
798
799 /* Rules for user images */
800
801 img.user_image {
802   max-width: 100px;
803   max-height: 100px;
804 }
805
806 img.user_thumbnail {
807   max-width: 50px;
808   max-height: 50px;
809 }
810
811 img.user_thumbnail_tiny {
812   width: 25px;
813   height: 25px;
814   object-fit: contain;
815 }
816
817 /* General styles for action lists / subnavs */
818
819 nav.secondary-actions {
820   margin-left: -11px;
821   overflow: hidden;
822   > ul {
823     display: flex;
824     flex-direction: row;
825     flex-wrap: wrap;
826     margin-bottom: 0;
827     margin-left: -1px;
828     padding: 0;
829     > li {
830       flex-basis: auto;
831       list-style: none;
832       border-left: 1px solid $grey;
833       padding-left: $lineheight * 0.5;
834       margin-right: $lineheight * 0.5;
835       margin-bottom: $lineheight * 0.125;
836     }
837   }
838 }
839
840 div.secondary-actions {
841   padding: 10px;
842   text-align: center;
843 }
844
845 /* Rules for rich text */
846
847 .richtext {
848   code {
849     background: var(--bs-secondary-bg);
850     padding: 2px 3px;
851   }
852
853   pre {
854     background: var(--bs-secondary-bg);
855     padding: 2px 3px;
856     white-space: pre-wrap;
857
858     code {
859       padding: 0;
860     }
861   }
862
863   img {
864     padding: $lineheight;
865     background-color: var(--bs-tertiary-bg);
866     display: block;
867     max-width: 100%;
868     margin: auto;
869   }
870
871   blockquote {
872     border-left: $lineheight solid var(--bs-tertiary-bg);
873     padding-left: $lineheight;
874     margin: 0;
875     color: var(--bs-secondary-color);
876   }
877 }
878
879 /* Rules for the "Welcome" page */
880 .site-welcome, .site-fixthemap {
881   .sprite {
882     background-image: image-url("welcome-sprite.png");
883     background-size: 500px 250px;
884     display: block;
885   }
886
887   .sprite.small {
888     width: 50px;
889     height: 50px;
890   }
891
892   .sprite.x {
893     /*rtl:ignore*/ background-position: -50px 0;
894   }
895
896   .sprite.term {
897     margin-right: 10px;
898     vertical-align: middle;
899   }
900
901   .sprite.node {
902     /*rtl:ignore*/ background-position: -100px 0;
903   }
904
905   .sprite.way {
906     /*rtl:ignore*/ background-position: -150px 0;
907   }
908
909   .sprite.tag {
910     /*rtl:ignore*/ background-position: -200px 0;
911   }
912
913   .sprite.editor {
914     /*rtl:ignore*/ background-position: -250px 0;
915   }
916
917   .sprite.question {
918     /*rtl:ignore*/ background-position: -300px 0;
919   }
920
921   .sprite.rules {
922     /*rtl:ignore*/ background-position: -350px 0;
923   }
924 }
925
926 .site-about #content {
927   .content-inner {
928     max-width: 760px;
929   }
930
931   .attr {
932     margin-top: -20px;
933
934     h1 {
935       span {
936         color: $vibrant-green;
937       }
938     }
939
940     .user-image {
941       height: 150px;
942       background-position: 0 50%;
943       background-repeat: no-repeat;
944       background-image: image-url('about/osm.png');
945       background-size: cover;
946       background-color: $vibrant-green;
947     }
948
949     .byosm {
950       background: $vibrant-green;
951     }
952
953     .byosm span {
954       display: inline-block;
955       width: 1em;
956       margin-left: -1em;
957     }
958   }
959
960   .icon {
961     width: 30px;
962     height: 30px;
963     background: 40px 40px image-url('about/sprite.png') no-repeat;
964
965     &.local {
966       /*rtl:ignore*/
967       background-position: 0px 0px;
968     }
969     &.community {
970       /*rtl:ignore*/
971       background-position: 0px -40px;
972     }
973     &.open {
974       /*rtl:ignore*/
975       background-position: 0px -80px;
976     }
977     &.partners {
978       /*rtl:ignore*/
979       background-position: 0px -120px;
980     }
981     &.infringement {
982       /*rtl:ignore*/
983       background-position: 0px -160px;
984     }
985     &.legal {
986       /*rtl:ignore*/
987       background-position: -45px -160px;
988     }
989   }
990 }
991
992 /* Rules for tabs inside secondary background sections */
993
994 .bg-body-secondary .nav-tabs {
995   --bs-border-color: var(--bs-secondary-border-subtle);
996   --bs-secondary-bg: var(--bs-secondary-border-subtle);
997   margin-bottom: -1px;
998 }
999
1000 /* Rules for traces */
1001
1002 img.trace_image {
1003   mix-blend-mode: darken;
1004 }
1005
1006 @include color-mode(dark) {
1007   img.trace_image {
1008     filter: invert(1);
1009     mix-blend-mode: lighten;
1010   }
1011 }
1012
1013 @import 'browse';