3 @import "rails_bootstrap_forms";
5 /* Bootstrap + r2 fixes */
8 .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow {
10 right: unset !important;
11 left: calc(-1 * var(--bs-tooltip-arrow-height)) !important;
15 left: unset !important;
16 right: -1px !important;
20 .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow {
22 left: unset !important;
23 right: calc(-1 * var(--bs-tooltip-arrow-height)) !important;
27 right: unset !important;
28 left: -1px !important;
33 /* Styles common to large and small screens */
35 /* Default rules for the body of every page */
38 font-size: $typeheight;
50 #container { position: relative; }
53 vertical-align: middle;
54 margin-right: $lineheight * 0.25;
57 [dir=rtl] { /* no-r2 */ text-align: right; }
59 [dir=ltr] { /* no-r2 */ text-align: left; }
64 display: inline-block;
68 background: transparent image-url("sprite.png") no-repeat 0 0;
69 background-image: image-url("sprite.svg");
74 .icon.search { /* no-r2 */ background-position: 0 0; }
75 .icon.donate { /* no-r2 */ background-position: -20px 0; }
76 .icon.zoomin { /* no-r2 */ background-position: -40px 0; }
77 .icon.zoomout { /* no-r2 */ background-position: -60px 0; }
78 .icon.geolocate { /* no-r2 */ background-position: -80px 0; }
79 .active .icon.geolocate { /* no-r2 */ background-position: -80px -20px; }
80 .icon.layers { /* no-r2 */ background-position: -100px 0; }
81 .icon.key { /* no-r2 */ background-position: -120px 0; }
82 .icon.share { /* no-r2 */ background-position: -140px 0; }
83 .icon.clipboard { /* no-r2 */ background-position: -160px 0; }
84 .icon.link { /* no-r2 */ background-position: -180px 0; }
85 .icon.close { /* no-r2 */ background-position: -200px 0; }
86 .icon.close:hover { /* no-r2 */ background-position: -200px -20px; }
87 .icon.check { /* no-r2 */ background-position: -220px 0; }
88 .icon.note { /* no-r2 */ background-position: -240px 0; }
89 .icon.note.grey { /* no-r2 */ background-position: -240px -20px; }
90 .icon.query { /* no-r2 */ background-position: -260px 0; }
92 /* Utility for de-emphasizing content */
98 /* Rules for borders */
99 /* These add additional colours to those provided by bootstrap */
101 border-color: $grey !important;
105 border-color: $lightgrey !important;
108 /* Rules for the header */
113 background: image-url("menu-icon.png") no-repeat;
114 background-size: 30px 30px;
117 margin: 14px 10px 0 0;
122 height: $headerHeight;
127 h1, nav, nav > ul, nav > ul > li {
128 display: inline-block;
133 padding: $lineheight * 0.5;
157 & > .btn-group .btn-outline-primary {
158 @include button-outline-variant($green, $color-hover: $white, $active-color: $white);
162 .btn-outline-primary {
167 border-top-color: $grey;
171 background-color: lighten($green, 30%);
176 // Small tweaks to the toggle to stop the primary colour showing through
177 // when the menu is shown
178 .show > .btn-outline-primary.dropdown-toggle {
179 background-color: $green;
180 border-color: $green;
183 box-shadow: 0 0 0 0.2rem fade-out($green, 0.5);
198 color: darken($darkgrey, 25%);
202 background-color: lighten($grey, 10%);
206 nav.primary, nav.secondary {
209 background-color: $green;
215 #compact-secondary-nav {
220 #compact-secondary-nav {
221 display: inline-block;
235 float: none !important;
243 min-height: $headerHeight;
255 #sidebar .search_forms,
271 border-top: 1px solid #eee;
273 border-bottom: 1px solid #eee;
291 .user-menu, .login-menu {
296 #compact-secondary-nav {
301 display: inline-block;
304 .overlay-sidebar #sidebar .welcome {
308 .overlay-sidebar #sidebar #banner {
313 /* Utility for styling notification numbers */
316 background: lighten($green, 30%);
318 font-weight: $font-weight-normal;
321 /* Rules for the message shown in place of the map when javascript is disabled */
329 /* Rules for Leaflet maps */
331 .leaflet-top.leaflet-right,
332 .leaflet-top.leaflet-left {
336 flex-direction: column;
337 flex-wrap: wrap-reverse;
340 .leaflet-control .control-button {
344 background-color: #333;
345 background-color: rgba(0,0,0,.6);
350 background-color: black;
355 background-color: #333;
356 background-color: rgba(0,0,0,.5);
361 background-color: $vibrant-green;
365 border-start-start-radius: 4px;
369 border-end-start-radius: 4px;
378 /* Rules for the sidebar and main map area */
398 width: $sidebarWidth;
414 .overlay-sidebar #sidebar {
447 width: $sidebarWidth;
451 background-color: rgba(255, 255, 255, 0.5);
468 .leaflet-marker-draggable {
483 border-bottom: 1px solid $grey;
489 @include media-breakpoint-down(md) {
531 border: 2px solid #fff;
534 transition: border-color 0.08s ease-in;
541 border-bottom-right-radius: 3px;
545 text-stroke: 2px #fff;
546 background: rgba(255,255,255,.9);
548 input[type="radio"] {
553 &.active { border-color: darken($green, 10%); }
556 &.active { border-color: darken($green, 20%); }
566 li.disabled { color: $darkgrey; }
577 top: 10px !important;
579 margin-right: 0px !important;
580 margin-top: 0px !important;
584 .leaflet-popup-scrolled {
585 padding-right: $lineheight;
586 border-bottom: 0px !important;
587 border-top: 0px !important;
590 .leaflet-popup-content-wrapper {
591 border-radius: 4px !important;
594 /* Rules for attribution text under the main map shown on printouts */
596 .donate-attr { color: darken($green, 10%) !important; }
598 /* Rules for the sidebar */
612 /* Temporary label size override until we remove site-wide font customisation */
623 /* Stop bootstrap 5 from floating legends when they don't need to be */
628 /* Override the text colour for primary and secondary buttons, to match our
629 bootstrap 4 colours. Note this has accessibility issues, which is why
630 bootstrap 5 calculates black as the appropriate colour, and we should
631 reconsider our colours at some point with that in mind. */
634 @include button-variant($primary, $primary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
638 @include button-variant($secondary, $secondary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
641 .btn-outline-secondary {
642 @include button-outline-variant($secondary, $color-hover: $white, $active-color: $white);
645 /* Rules for the search and direction forms */
647 header .search_forms,
652 /* Rules for the map key which appears in the popout sidebar */
655 .mapkey-table-key img {
662 /* Rules for search sidebar */
664 #sidebar .search_results_entry {
666 background: $list-highlight;
669 .search_more .loader {
674 /* Rules for routing */
677 background-image: image-url('routing-sprite.png');
680 background-repeat: no-repeat;
682 @for $i from 0 through 25 {
683 div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
693 background: $list-highlight;
696 .routing_marker { width: 15px; cursor: move; }
702 /* Rules for the history sidebar */
704 #sidebar .changesets {
706 &.selected { background: $list-highlight; }
707 /* color is derived from changeset bbox fillColor in history.js */
709 a.stretched-link > span, a:not(.stretched-link), [title] {
711 z-index: 2; /* needs to be higher than Bootstrap's stretched link ::after z-index */
715 .changeset_more .loader {
721 /* Rules for the browse sidebar */
725 padding-bottom: $spacer;
726 margin-bottom: $spacer;
727 border-bottom: 1px solid $grey;
730 word-wrap: break-word;
734 .browse-section:last-of-type {
740 white-space: pre-wrap;
742 tr:last-child th, tr:last-child td {
746 .colour-preview-box {
749 // add color via inline css on element: background-color: <tag value>;
753 span.action-button:hover {
755 text-decoration: underline;
760 margin: 0 0 10px 10px;
773 background: $list-highlight;
780 /* Bootstrap buttons don't have any vertical margin, so
781 they touch when adjacent buttons wrap onto a new line
782 e.g. wide form buttons on a narrow sidebar */
786 margin-bottom: $spacer * 0.25;
790 /* Rules for export sidebar */
798 .export_area_inputs {
799 margin-bottom: $spacer;
807 background: $lightgrey;
809 #maxlat { margin-top: -1px; }
812 /* no-r2 */ margin-left: -1px;
816 /* no-r2 */ margin-right: -1px;
818 #minlat { margin-bottom: -1px; }
822 /* Rules for edit pages */
838 /* Rules for non-map content pages */
841 background: $lightgrey;
848 padding: $lineheight;
851 /* Overrides for pages that use new layout conventions */
853 .header-illustration {
854 background-position: 0 0;
855 background-repeat: no-repeat;
863 background-image: image-url("sign-up-illustration.png");
867 background-image: image-url("confirm-illustration.png");
871 background-image: image-url("terms-illustration.png");
879 background-image: image-url("sign-up-illustration-arm.png");
882 pointer-events: none;
886 [dir=rtl] .header-illustration {
887 transform: scaleX(-1);
890 transform: scaleX(-1);
903 /* Rules for small maps in content areas */
907 margin-bottom: $lineheight;
910 @include media-breakpoint-up(md) {
916 /* Rules for the user map */
918 .content_map .leaflet-popup-content {
923 /* Rules for user popups on maps */
934 /* Rules for the diary entry page */
945 border-top: 1px dashed $grey;
947 border-top: 1px solid $grey;
952 /* Rules for the account confirmation page */
956 padding: $lineheight;
957 margin-bottom: $lineheight;
966 list-style-type: lower-alpha;
971 /* Rules for messages pages */
975 background: $offwhite;
978 .inbox-row-unread td {
984 background-color: $lightgrey;
996 background-color: $lightgrey;
999 /* Rules for user images */
1006 img.user_thumbnail {
1011 img.user_thumbnail_tiny {
1018 /* General styles for action lists / subnavs */
1020 nav.secondary-actions {
1025 flex-direction: row;
1033 border-left: 1px solid $grey;
1034 padding-left: $lineheight * 0.5;
1035 margin-right: $lineheight * 0.5;
1036 margin-bottom: $lineheight * 0.125;
1041 div.secondary-actions {
1046 /* Rules for rich text */
1051 background: $lightgrey;
1056 background: $lightgrey;
1058 white-space: pre-wrap;
1066 padding: $lineheight;
1067 background-color: $offwhite;
1074 border-left: $lineheight solid $offwhite;
1075 padding-left: $lineheight;
1081 /* Rules for the iD editor */
1088 /* Rules for the "Welcome" page */
1089 .site-welcome, .site-fixthemap {
1091 background-image: image-url("welcome-sprite.png");
1092 background-size: 500px 250px;
1102 /* no-r2 */ background-position: -50px 0;
1107 vertical-align: middle;
1111 /* no-r2 */ background-position: -100px 0;
1115 /* no-r2 */ background-position: -150px 0;
1119 /* no-r2 */ background-position: -200px 0;
1123 /* no-r2 */ background-position: -250px 0;
1127 /* no-r2 */ background-position: -300px 0;
1131 /* no-r2 */ background-position: -350px 0;
1135 background-color: #333;
1140 .site-about #content {
1141 background-color: $lightgrey;
1152 color: $vibrant-green;
1158 background-position: 0 50%;
1159 background-repeat: no-repeat;
1160 background-image: image-url('about/osm.png');
1161 background-size: cover;
1162 background-color: $vibrant-green;
1166 background: $vibrant-green;
1170 display: inline-block;
1179 background: 40px 40px image-url('about/sprite.png') no-repeat;
1183 background-position: 0px 0px;
1187 background-position: 0px -40px;
1191 background-position: 0px -80px;
1195 background-position: 0px -120px;
1199 background-position: 0px -160px;
1203 background-position: -45px -160px;