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