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