3 @import "rails_bootstrap_forms";
5 /* Styles common to large and small screens */
7 /* Default rules for the body of every page */
10 font-size: $typeheight;
23 text-decoration: underline dotted;
26 #container { position: relative; }
29 vertical-align: middle;
30 margin-right: $lineheight * 0.25;
36 display: inline-block;
40 background: transparent image-url("sprite.svg") no-repeat 0 0;
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; }
63 /* Utility for de-emphasizing content */
69 /* Rules for the header */
76 background: image-url("menu-icon.png") no-repeat;
77 background-size: 30px 30px;
80 margin: 14px 10px 0 0;
85 height: $headerHeight;
90 h1, nav, nav > ul, nav > ul > li {
91 display: inline-block;
96 padding: $lineheight * 0.5;
119 & > .btn-group .btn-outline-primary {
120 @include button-outline-variant($green, $color-hover: $white, $active-color: $white);
124 .btn-outline-primary {
129 border-top-color: $grey;
133 background-color: lighten($green, 30%);
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;
145 box-shadow: 0 0 0 0.2rem fade-out($green, 0.5);
156 background-color: lighten($grey, 10%);
160 nav.primary, nav.secondary {
163 background-color: $green;
169 #compact-secondary-nav {
174 #compact-secondary-nav {
175 display: inline-block;
188 flex-direction: column;
190 min-height: $headerHeight;
201 #sidebar .search_forms,
218 .user-menu, .login-menu {
223 #compact-secondary-nav {
228 display: inline-block;
231 .overlay-sidebar #sidebar .welcome {
235 .overlay-sidebar #sidebar #banner {
240 /* Utility for styling notification numbers */
243 background: lighten($green, 30%);
245 font-weight: $font-weight-normal;
248 /* Rules for Leaflet maps */
250 .leaflet-top.leaflet-right,
251 .leaflet-top.leaflet-left {
255 flex-direction: column;
256 flex-wrap: wrap-reverse;
259 .leaflet-control .control-button {
263 background-color: #333;
264 background-color: rgba(0,0,0,.6);
269 background-color: black;
274 background-color: #333;
275 background-color: rgba(0,0,0,.5);
280 background-color: $vibrant-green;
284 border-start-start-radius: 4px;
288 border-end-start-radius: 4px;
297 /* Rules for the sidebar and main map area */
317 width: $sidebarWidth;
324 .overlay-sidebar #sidebar {
352 width: $sidebarWidth;
368 .leaflet-marker-draggable {
383 border-bottom: 1px solid $grey;
389 @include media-breakpoint-down(md) {
431 border: 2px solid #fff;
434 transition: border-color 0.08s ease-in;
441 border-bottom-right-radius: 3px;
445 text-stroke: 2px #fff;
446 background: rgba(255,255,255,.9);
448 input[type="radio"] {
453 &.active { border-color: darken($green, 10%); }
456 &.active { border-color: darken($green, 20%); }
466 li.disabled { color: $darkgrey; }
477 top: 10px !important;
479 margin-right: 0px !important;
480 margin-top: 0px !important;
484 .leaflet-popup-scrolled {
485 padding-right: $lineheight;
486 border-bottom: 0px !important;
487 border-top: 0px !important;
490 .leaflet-popup-content-wrapper {
491 border-radius: 4px !important;
494 /* Rules for attribution text under the main map shown on printouts */
496 .donate-attr { color: darken($green, 10%) !important; }
498 /* Rules for the sidebar */
508 /* Temporary label size override until we remove site-wide font customisation */
519 /* Stop bootstrap 5 from floating legends when they don't need to be */
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. */
530 @include button-variant($primary, $primary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
534 @include button-variant($secondary, $secondary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
537 .btn-outline-secondary {
538 @include button-outline-variant($secondary, $color-hover: $white, $active-color: $white);
541 /* Rules for the search and direction forms */
543 header .search_forms,
548 /* Rules for search sidebar */
550 #sidebar .search_results_entry {
552 background: $list-highlight;
555 .search_more .loader {
560 /* Rules for routing */
563 background-image: image-url('routing-sprite.png');
566 background-repeat: no-repeat;
568 @for $i from 0 through 25 {
569 div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
579 background: $list-highlight;
582 .routing_marker { width: 15px; cursor: move; }
588 /* Rules for the history sidebar */
590 #sidebar .changesets {
592 &.selected { background: $list-highlight; }
593 /* color is derived from changeset bbox fillColor in history.js */
595 a.stretched-link > span, a:not(.stretched-link), [title] {
597 z-index: 2; /* needs to be higher than Bootstrap's stretched link ::after z-index */
601 .changeset_more .loader {
607 /* Rules for the browse sidebar */
611 padding-bottom: $spacer;
612 margin-bottom: $spacer;
613 border-bottom: 1px solid $grey;
616 word-wrap: break-word;
620 .browse-section:last-of-type {
626 white-space: pre-wrap;
628 tr:last-child th, tr:last-child td {
635 margin: 0 0 10px 10px;
648 background: $list-highlight;
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 */
661 margin-bottom: $spacer * 0.25;
665 /* Force LTR/RTL alignment for placeholder text */
667 .form-control::placeholder {
671 /* Rules for export sidebar */
679 .export_area_inputs {
680 margin-bottom: $spacer;
688 background: $lightgrey;
694 /*rtl:ignore*/ float: left;
697 /*rtl:ignore*/ float: right;
702 /* Rules for edit pages */
713 /* Rules for non-map content pages */
719 padding: $lineheight;
722 /* Overrides for pages that use new layout conventions */
724 .header-illustration {
725 background-position: 0 0;
726 background-repeat: no-repeat;
734 background-image: image-url("sign-up-illustration.png");
738 background-image: image-url("confirm-illustration.png");
742 background-image: image-url("terms-illustration.png");
750 background-image: image-url("sign-up-illustration-arm.png");
753 pointer-events: none;
757 [dir=rtl] .header-illustration {
758 transform: scaleX(-1);
761 transform: scaleX(-1);
765 /* Rules for small maps in content areas */
769 margin-bottom: $lineheight;
772 @include media-breakpoint-up(md) {
778 /* Rules for the user map */
780 .content_map .leaflet-popup-content {
785 /* Rules for user popups on maps */
796 /* Rules for the diary entry page */
803 .diary-comment .col-auto {
806 .diary-comment .col {
811 /* Rules for the account confirmation page */
815 padding: $lineheight;
816 margin-bottom: $lineheight;
825 list-style-type: lower-alpha;
830 /* Rules for messages pages */
834 background: $offwhite;
837 .inbox-row-unread td {
852 /* Rules for user images */
864 img.user_thumbnail_tiny {
870 /* General styles for action lists / subnavs */
872 nav.secondary-actions {
885 border-left: 1px solid $grey;
886 padding-left: $lineheight * 0.5;
887 margin-right: $lineheight * 0.5;
888 margin-bottom: $lineheight * 0.125;
893 div.secondary-actions {
898 /* Rules for rich text */
903 background: $lightgrey;
908 background: $lightgrey;
910 white-space: pre-wrap;
918 padding: $lineheight;
919 background-color: $offwhite;
926 border-left: $lineheight solid $offwhite;
927 padding-left: $lineheight;
933 /* Rules for the "Welcome" page */
934 .site-welcome, .site-fixthemap {
936 background-image: image-url("welcome-sprite.png");
937 background-size: 500px 250px;
947 /*rtl:ignore*/ background-position: -50px 0;
952 vertical-align: middle;
956 /*rtl:ignore*/ background-position: -100px 0;
960 /*rtl:ignore*/ background-position: -150px 0;
964 /*rtl:ignore*/ background-position: -200px 0;
968 /*rtl:ignore*/ background-position: -250px 0;
972 /*rtl:ignore*/ background-position: -300px 0;
976 /*rtl:ignore*/ background-position: -350px 0;
980 background-color: #333;
985 .site-about #content {
986 background-color: $lightgrey;
997 color: $vibrant-green;
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;
1011 background: $vibrant-green;
1015 display: inline-block;
1024 background: 40px 40px image-url('about/sprite.png') no-repeat;
1028 background-position: 0px 0px;
1032 background-position: 0px -40px;
1036 background-position: 0px -80px;
1040 background-position: 0px -120px;
1044 background-position: 0px -160px;
1048 background-position: -45px -160px;
1053 /* Rules for tabs inside secondary background sections */
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;