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 Leaflet maps */
323 .leaflet-top.leaflet-right,
324 .leaflet-top.leaflet-left {
328 flex-direction: column;
329 flex-wrap: wrap-reverse;
332 .leaflet-control .control-button {
336 background-color: #333;
337 background-color: rgba(0,0,0,.6);
342 background-color: black;
347 background-color: #333;
348 background-color: rgba(0,0,0,.5);
353 background-color: $vibrant-green;
357 border-start-start-radius: 4px;
361 border-end-start-radius: 4px;
370 /* Rules for the sidebar and main map area */
390 width: $sidebarWidth;
398 .overlay-sidebar #sidebar {
426 width: $sidebarWidth;
442 .leaflet-marker-draggable {
457 border-bottom: 1px solid $grey;
463 @include media-breakpoint-down(md) {
505 border: 2px solid #fff;
508 transition: border-color 0.08s ease-in;
515 border-bottom-right-radius: 3px;
519 text-stroke: 2px #fff;
520 background: rgba(255,255,255,.9);
522 input[type="radio"] {
527 &.active { border-color: darken($green, 10%); }
530 &.active { border-color: darken($green, 20%); }
540 li.disabled { color: $darkgrey; }
551 top: 10px !important;
553 margin-right: 0px !important;
554 margin-top: 0px !important;
558 .leaflet-popup-scrolled {
559 padding-right: $lineheight;
560 border-bottom: 0px !important;
561 border-top: 0px !important;
564 .leaflet-popup-content-wrapper {
565 border-radius: 4px !important;
568 /* Rules for attribution text under the main map shown on printouts */
570 .donate-attr { color: darken($green, 10%) !important; }
572 /* Rules for the sidebar */
586 /* Temporary label size override until we remove site-wide font customisation */
597 /* Stop bootstrap 5 from floating legends when they don't need to be */
602 /* Override the text colour for primary and secondary buttons, to match our
603 bootstrap 4 colours. Note this has accessibility issues, which is why
604 bootstrap 5 calculates black as the appropriate colour, and we should
605 reconsider our colours at some point with that in mind. */
608 @include button-variant($primary, $primary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
612 @include button-variant($secondary, $secondary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
615 .btn-outline-secondary {
616 @include button-outline-variant($secondary, $color-hover: $white, $active-color: $white);
619 /* Rules for the search and direction forms */
621 header .search_forms,
626 /* Rules for the map key which appears in the popout sidebar */
629 .mapkey-table-key img {
636 /* Rules for search sidebar */
638 #sidebar .search_results_entry {
640 background: $list-highlight;
643 .search_more .loader {
648 /* Rules for routing */
651 background-image: image-url('routing-sprite.png');
654 background-repeat: no-repeat;
656 @for $i from 0 through 25 {
657 div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
667 background: $list-highlight;
670 .routing_marker { width: 15px; cursor: move; }
676 /* Rules for the history sidebar */
678 #sidebar .changesets {
680 &.selected { background: $list-highlight; }
681 /* color is derived from changeset bbox fillColor in history.js */
683 a.stretched-link > span, a:not(.stretched-link), [title] {
685 z-index: 2; /* needs to be higher than Bootstrap's stretched link ::after z-index */
689 .changeset_more .loader {
695 /* Rules for the browse sidebar */
699 padding-bottom: $spacer;
700 margin-bottom: $spacer;
701 border-bottom: 1px solid $grey;
704 word-wrap: break-word;
708 .browse-section:last-of-type {
713 background-color: $offwhite;
715 border-collapse: separate;
718 margin-bottom: $spacer;
721 border-bottom: 1px solid $grey;
724 tr:last-child th, tr:last-child td {
732 word-wrap: break-word;
733 white-space: pre-wrap;
738 background-color: $offwhite;
742 border-left: 1px solid $grey;
743 background-color: #fff;
746 .colour-preview-box {
751 border: 1px solid rgba(0, 0, 0, .1);
752 // add color via inline css on element: background-color: <tag value>;
756 span.action-button:hover {
758 text-decoration: underline;
763 margin: 0 0 10px 10px;
776 background: $list-highlight;
783 /* Bootstrap buttons don't have any vertical margin, so
784 they touch when adjacent buttons wrap onto a new line
785 e.g. wide form buttons on a narrow sidebar */
789 margin-bottom: $spacer * 0.25;
793 /* Rules for export sidebar */
801 .export_area_inputs {
802 margin-bottom: $spacer;
810 background: $lightgrey;
812 #maxlat { margin-top: -1px; }
815 /* no-r2 */ margin-left: -1px;
819 /* no-r2 */ margin-right: -1px;
821 #minlat { margin-bottom: -1px; }
825 /* Rules for edit pages */
836 /* Rules for non-map content pages */
839 background: $lightgrey;
846 padding: $lineheight;
849 /* Overrides for pages that use new layout conventions */
851 .header-illustration {
852 background-position: 0 0;
853 background-repeat: no-repeat;
861 background-image: image-url("sign-up-illustration.png");
865 background-image: image-url("confirm-illustration.png");
869 background-image: image-url("terms-illustration.png");
877 background-image: image-url("sign-up-illustration-arm.png");
880 pointer-events: none;
884 [dir=rtl] .header-illustration {
885 transform: scaleX(-1);
888 transform: scaleX(-1);
892 /* Rules for small maps in content areas */
896 margin-bottom: $lineheight;
899 @include media-breakpoint-up(md) {
905 /* Rules for the user map */
907 .content_map .leaflet-popup-content {
912 /* Rules for user popups on maps */
923 /* Rules for the diary entry page */
934 border-top: 1px dashed $grey;
936 border-top: 1px solid $grey;
941 /* Rules for the account confirmation page */
945 padding: $lineheight;
946 margin-bottom: $lineheight;
955 list-style-type: lower-alpha;
960 /* Rules for messages pages */
964 background: $offwhite;
967 .inbox-row-unread td {
973 background-color: $lightgrey;
985 background-color: $lightgrey;
988 /* Rules for user images */
1000 img.user_thumbnail_tiny {
1007 /* General styles for action lists / subnavs */
1009 nav.secondary-actions {
1014 flex-direction: row;
1022 border-left: 1px solid $grey;
1023 padding-left: $lineheight * 0.5;
1024 margin-right: $lineheight * 0.5;
1025 margin-bottom: $lineheight * 0.125;
1030 div.secondary-actions {
1035 /* Rules for rich text */
1040 background: $lightgrey;
1045 background: $lightgrey;
1047 white-space: pre-wrap;
1055 padding: $lineheight;
1056 background-color: $offwhite;
1063 border-left: $lineheight solid $offwhite;
1064 padding-left: $lineheight;
1070 /* Rules for the "Welcome" page */
1071 .site-welcome, .site-fixthemap {
1073 background-image: image-url("welcome-sprite.png");
1074 background-size: 500px 250px;
1084 /* no-r2 */ background-position: -50px 0;
1089 vertical-align: middle;
1093 /* no-r2 */ background-position: -100px 0;
1097 /* no-r2 */ background-position: -150px 0;
1101 /* no-r2 */ background-position: -200px 0;
1105 /* no-r2 */ background-position: -250px 0;
1109 /* no-r2 */ background-position: -300px 0;
1113 /* no-r2 */ background-position: -350px 0;
1117 background-color: #333;
1122 .site-about #content {
1123 background-color: $lightgrey;
1134 color: $vibrant-green;
1140 background-position: 0 50%;
1141 background-repeat: no-repeat;
1142 background-image: image-url('about/osm.png');
1143 background-size: cover;
1144 background-color: $vibrant-green;
1148 background: $vibrant-green;
1152 display: inline-block;
1161 background: 40px 40px image-url('about/sprite.png') no-repeat;
1165 background-position: 0px 0px;
1169 background-position: 0px -40px;
1173 background-position: 0px -80px;
1177 background-position: 0px -120px;
1181 background-position: 0px -160px;
1185 background-position: -45px -160px;