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