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 /* Bootstrap contextual table classes overrides in dark mode */
71 @include color-mode(dark) {
73 --bs-table-bg: rgb(var(--bs-primary-rgb), .25);
76 --bs-table-bg: rgb(var(--bs-secondary-rgb), .25);
78 .table-primary, .table-secondary {
79 --bs-table-color: initial;
80 border-color: inherit;
84 /* Rules for the header */
91 background: image-url("menu-icon.png") no-repeat;
92 background-size: 30px 30px;
95 margin: 14px 10px 0 0;
99 @include color-mode(dark) {
106 height: $headerHeight;
110 h1, nav, nav > ul, nav > ul > li {
111 display: inline-block;
116 padding: $lineheight * 0.5;
139 & > .btn-group .btn-outline-primary {
140 @include button-outline-variant($green, $color-hover: $white, $active-color: $white);
144 .btn-outline-primary {
149 border-top-color: $grey;
153 background-color: lighten($green, 30%);
158 // Small tweaks to the toggle to stop the primary colour showing through
159 // when the menu is shown
160 .show > .btn-outline-primary.dropdown-toggle {
161 background-color: $green;
162 border-color: $green;
165 box-shadow: 0 0 0 0.2rem fade-out($green, 0.5);
176 background-color: lighten($grey, 10%);
180 nav.primary, nav.secondary {
183 background-color: $green;
189 #compact-secondary-nav {
194 #compact-secondary-nav {
195 display: inline-block;
208 flex-direction: column;
210 min-height: $headerHeight;
221 #sidebar .search_forms,
238 .user-menu, .login-menu {
243 #compact-secondary-nav {
248 display: inline-block;
251 .overlay-sidebar #sidebar .welcome {
255 .overlay-sidebar #sidebar #banner {
260 /* Utility for styling notification numbers */
263 background: lighten($green, 30%);
265 font-weight: $font-weight-normal;
268 /* Rules for Leaflet maps */
270 .leaflet-top.leaflet-right,
271 .leaflet-top.leaflet-left {
275 flex-direction: column;
276 flex-wrap: wrap-reverse;
279 .leaflet-control .control-button {
283 background-color: #333;
284 background-color: rgba(0,0,0,.6);
289 background-color: black;
294 background-color: #333;
295 background-color: rgba(0,0,0,.5);
300 background-color: $vibrant-green;
304 border-start-start-radius: 4px;
308 border-end-start-radius: 4px;
317 /* Rules for the sidebar and main map area */
337 width: $sidebarWidth;
344 .overlay-sidebar #sidebar {
371 width: $sidebarWidth;
387 .leaflet-marker-draggable {
402 @include media-breakpoint-down(md) {
437 --bs-btn-border-color: var(--bs-body-bg);
440 --bs-btn-border-color: var(--bs-primary-border-subtle);
449 li.disabled { color: $darkgrey; }
460 top: 10px !important;
462 margin-right: 0px !important;
463 margin-top: 0px !important;
467 .leaflet-popup-scrolled {
468 padding-right: $lineheight;
469 border-bottom: 0px !important;
470 border-top: 0px !important;
473 .leaflet-popup-content-wrapper {
474 border-radius: 4px !important;
477 /* Rules for attribution text under the main map shown on printouts */
479 .donate-attr { color: darken($green, 10%) !important; }
481 /* Rules for the sidebar */
491 /* Temporary label size override until we remove site-wide font customisation */
502 /* Stop bootstrap 5 from floating legends when they don't need to be */
507 /* Override the text colour for primary and secondary buttons, to match our
508 bootstrap 4 colours. Note this has accessibility issues, which is why
509 bootstrap 5 calculates black as the appropriate colour, and we should
510 reconsider our colours at some point with that in mind. */
513 @include button-variant($primary, $primary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
517 @include button-variant($secondary, $secondary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
520 .btn-outline-secondary {
521 @include button-outline-variant($secondary, $color-hover: $white, $active-color: $white);
524 /* Rules for the search and direction forms */
526 header .search_forms,
531 /* Rules for search sidebar */
533 #sidebar .search_results_entry {
535 background: $list-highlight;
538 .search_more .loader {
543 /* Rules for routing */
546 background-image: image-url('routing-sprite.png');
549 background-repeat: no-repeat;
551 @for $i from 0 through 25 {
552 div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
555 @include color-mode(dark) {
568 background: $list-highlight;
571 .routing_marker { width: 15px; cursor: move; }
577 /* Rules for the history sidebar */
579 #sidebar .changesets {
581 &.selected { background: $list-highlight; }
582 /* color is derived from changeset bbox fillColor in history.js */
584 a.stretched-link > span, a:not(.stretched-link), [title] {
586 z-index: 2; /* needs to be higher than Bootstrap's stretched link ::after z-index */
590 .changeset_more .loader {
596 /* Rules for the browse sidebar */
600 padding-bottom: $spacer;
601 margin-bottom: $spacer;
602 border-bottom: 1px solid $grey;
605 word-wrap: break-word;
609 .browse-section:last-of-type {
615 white-space: pre-wrap;
617 tr:last-child th, tr:last-child td {
624 margin: 0 0 10px 10px;
637 background: $list-highlight;
644 /* Bootstrap buttons don't have any vertical margin, so
645 they touch when adjacent buttons wrap onto a new line
646 e.g. wide form buttons on a narrow sidebar */
650 margin-bottom: $spacer * 0.25;
654 /* Force LTR/RTL alignment for placeholder text */
656 .form-control::placeholder {
660 /* Rules for export sidebar */
668 .export_area_inputs {
669 margin-bottom: $spacer;
681 /*rtl:ignore*/ float: left;
684 /*rtl:ignore*/ float: right;
689 /* Rules for edit pages */
700 /* Rules for non-map content pages */
706 padding: $lineheight;
709 /* Overrides for pages that use new layout conventions */
711 .header-illustration {
712 background-position: 0 0;
713 background-repeat: no-repeat;
721 background-image: image-url("sign-up-illustration.png");
725 background-image: image-url("confirm-illustration.png");
729 background-image: image-url("terms-illustration.png");
737 background-image: image-url("sign-up-illustration-arm.png");
740 pointer-events: none;
744 [dir=rtl] .header-illustration {
745 transform: scaleX(-1);
748 transform: scaleX(-1);
752 /* Rules for small maps in content areas */
756 margin-bottom: $lineheight;
759 @include media-breakpoint-up(md) {
765 /* Rules for the user map */
767 .content_map .leaflet-popup-content {
772 /* Rules for user popups on maps */
783 /* Rules for the diary entry page */
790 .diary-comment .col-auto {
793 .diary-comment .col {
798 /* Rules for the account confirmation page */
802 padding: $lineheight;
803 margin-bottom: $lineheight;
812 list-style-type: lower-alpha;
817 /* Rules for messages pages */
821 background: $offwhite;
824 .inbox-row-unread td {
835 /* Rules for user images */
847 img.user_thumbnail_tiny {
853 /* General styles for action lists / subnavs */
855 nav.secondary-actions {
868 border-left: 1px solid $grey;
869 padding-left: $lineheight * 0.5;
870 margin-right: $lineheight * 0.5;
871 margin-bottom: $lineheight * 0.125;
876 div.secondary-actions {
881 /* Rules for rich text */
886 background: var(--bs-secondary-bg);
891 background: var(--bs-secondary-bg);
893 white-space: pre-wrap;
901 padding: $lineheight;
902 background-color: var(--bs-tertiary-bg);
909 border-left: $lineheight solid var(--bs-tertiary-bg);
910 padding-left: $lineheight;
912 color: var(--bs-secondary-color);
916 /* Rules for the "Welcome" page */
917 .site-welcome, .site-fixthemap {
919 background-image: image-url("welcome-sprite.png");
920 background-size: 500px 250px;
930 /*rtl:ignore*/ background-position: -50px 0;
935 vertical-align: middle;
939 /*rtl:ignore*/ background-position: -100px 0;
943 /*rtl:ignore*/ background-position: -150px 0;
947 /*rtl:ignore*/ background-position: -200px 0;
951 /*rtl:ignore*/ background-position: -250px 0;
955 /*rtl:ignore*/ background-position: -300px 0;
959 /*rtl:ignore*/ background-position: -350px 0;
963 background-color: #333;
968 .site-about #content {
978 color: $vibrant-green;
984 background-position: 0 50%;
985 background-repeat: no-repeat;
986 background-image: image-url('about/osm.png');
987 background-size: cover;
988 background-color: $vibrant-green;
992 background: $vibrant-green;
996 display: inline-block;
1005 background: 40px 40px image-url('about/sprite.png') no-repeat;
1009 background-position: 0px 0px;
1013 background-position: 0px -40px;
1017 background-position: 0px -80px;
1021 background-position: 0px -120px;
1025 background-position: 0px -160px;
1029 background-position: -45px -160px;
1034 /* Rules for tabs inside secondary background sections */
1036 .bg-body-secondary .nav-tabs {
1037 --bs-border-color: var(--bs-secondary-border-subtle);
1038 --bs-secondary-bg: var(--bs-secondary-border-subtle);
1039 margin-bottom: -1px;
1042 /* Rules for traces */
1045 mix-blend-mode: darken;
1048 @include color-mode(dark) {
1051 mix-blend-mode: lighten;