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;
19 text-decoration: underline dotted;
22 #container { position: relative; }
25 vertical-align: middle;
26 margin-right: $lineheight * 0.25;
32 display: inline-block;
36 background: transparent image-url("sprite.svg") no-repeat 0 0;
41 .icon.search { /*rtl:ignore*/ background-position: 0 0; }
42 .icon.donate { /*rtl:ignore*/ background-position: -20px 0; }
43 .icon.zoomin { /*rtl:ignore*/ background-position: -40px 0; }
44 .icon.zoomout { /*rtl:ignore*/ background-position: -60px 0; }
45 .icon.geolocate { /*rtl:ignore*/ background-position: -80px 0; }
46 .active .icon.geolocate { /*rtl:ignore*/ background-position: -80px -20px; }
47 .icon.layers { /*rtl:ignore*/ background-position: -100px 0; }
48 .icon.key { /*rtl:ignore*/ background-position: -120px 0; }
49 .icon.share { /*rtl:ignore*/ background-position: -140px 0; }
50 .icon.clipboard { /*rtl:ignore*/ background-position: -160px 0; }
51 .icon.link { /*rtl:ignore*/ background-position: -180px 0; }
52 .icon.close { /*rtl:ignore*/ background-position: -200px 0; }
53 .icon.close:hover { /*rtl:ignore*/ background-position: -200px -20px; }
54 .icon.check { /*rtl:ignore*/ background-position: -220px 0; }
55 .icon.note { /*rtl:ignore*/ background-position: -240px 0; }
56 .icon.note.grey { /*rtl:ignore*/ background-position: -240px -20px; }
57 .icon.query { /*rtl:ignore*/ background-position: -260px 0; }
59 /* Utility for de-emphasizing content */
65 /* Bootstrap contextual table classes overrides in dark mode */
67 @include color-mode(dark) {
69 --bs-table-bg: rgb(var(--bs-primary-rgb), .25);
72 --bs-table-bg: rgb(var(--bs-secondary-rgb), .25);
75 --bs-table-bg: rgb(var(--bs-success-rgb), .25);
77 .table-primary, .table-secondary, .table-success {
78 --bs-table-color: initial;
79 border-color: inherit;
83 /* Rules for the header */
90 background: image-url("menu-icon.png") no-repeat;
91 background-size: 30px 30px;
94 margin: 14px 10px 0 0;
98 @include color-mode(dark) {
105 height: $headerHeight;
109 h1, nav, nav > ul, nav > ul > li {
110 display: inline-block;
115 padding: $lineheight * 0.5;
138 & > .btn-group .btn-outline-primary {
139 @include button-outline-variant($green, $color-hover: $white, $active-color: $white);
143 .btn-outline-primary {
148 border-top-color: $grey;
152 background-color: lighten($green, 30%);
157 // Small tweaks to the toggle to stop the primary colour showing through
158 // when the menu is shown
159 .show > .btn-outline-primary.dropdown-toggle {
160 background-color: $green;
161 border-color: $green;
164 box-shadow: 0 0 0 0.2rem fade-out($green, 0.5);
175 background-color: lighten($grey, 10%);
179 nav.primary, nav.secondary {
182 background-color: $green;
188 #compact-secondary-nav {
193 #compact-secondary-nav {
194 display: inline-block;
207 flex-direction: column;
209 min-height: $headerHeight;
220 #sidebar .search_forms,
237 .user-menu, .login-menu {
242 #compact-secondary-nav {
247 display: inline-block;
250 .overlay-sidebar #sidebar .welcome {
254 .overlay-sidebar #sidebar #banner {
259 /* Utility for styling notification numbers */
262 background: transparentize(lighten($green, 25%), .25);
264 font-weight: $font-weight-normal;
267 /* Rules for Leaflet maps */
269 .leaflet-top.leaflet-right,
270 .leaflet-top.leaflet-left {
274 flex-direction: column;
275 flex-wrap: wrap-reverse;
278 .leaflet-control .control-button {
282 background-color: #333;
283 background-color: rgba(0,0,0,.6);
288 background-color: black;
293 background-color: #333;
294 background-color: rgba(0,0,0,.5);
299 background-color: $vibrant-green;
303 border-start-start-radius: 4px;
307 border-end-start-radius: 4px;
316 /* Rules for the sidebar and main map area */
336 width: $sidebarWidth;
343 .overlay-sidebar #sidebar {
370 width: $sidebarWidth;
386 .leaflet-marker-draggable {
401 @include media-breakpoint-down(md) {
436 --bs-btn-border-color: var(--bs-body-bg);
439 --bs-btn-border-color: var(--bs-primary-border-subtle);
448 li.disabled { color: $darkgrey; }
459 top: 10px !important;
461 margin-right: 0px !important;
462 margin-top: 0px !important;
466 .leaflet-popup-scrolled {
467 padding-right: $lineheight;
468 border-bottom: 0px !important;
469 border-top: 0px !important;
472 .leaflet-popup-content-wrapper,
474 @extend .bg-body, .text-body;
477 .leaflet-popup-content-wrapper {
481 color: var(--bs-link-color) !important;
485 /* Rules for attribution text under the main map shown on printouts */
487 .donate-attr { color: darken($green, 10%) !important; }
489 /* Rules for the sidebar */
499 /* Temporary label size override until we remove site-wide font customisation */
510 /* Stop bootstrap 5 from floating legends when they don't need to be */
515 /* Override the text colour for primary and secondary buttons, to match our
516 bootstrap 4 colours. Note this has accessibility issues, which is why
517 bootstrap 5 calculates black as the appropriate colour, and we should
518 reconsider our colours at some point with that in mind. */
521 @include button-variant($primary, $primary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
525 @include button-variant($secondary, $secondary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
528 .btn-outline-secondary {
529 @include button-outline-variant($secondary, $color-hover: $white, $active-color: $white);
532 /* Rules for the search and direction forms */
534 header .search_forms,
545 /* Rules for search sidebar */
547 #sidebar .search_results_entry {
549 background: $list-highlight;
552 .search_more .loader {
557 /* Rules for routing */
560 background-image: image-url('routing-sprite.png');
563 background-repeat: no-repeat;
565 @for $i from 0 through 25 {
566 div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
569 @include color-mode(dark) {
582 .routing_marker { width: 15px; cursor: move; }
588 /* Rules for the history sidebar */
590 #sidebar .changesets {
596 a.stretched-link > span, a:not(.stretched-link), [title] {
598 z-index: 2; /* needs to be higher than Bootstrap's stretched link ::after z-index */
602 .changeset_more .loader {
608 /* Rules for the browse sidebar */
612 padding-bottom: $spacer;
613 margin-bottom: $spacer;
614 border-bottom: 1px solid $grey;
617 word-wrap: break-word;
621 .browse-section:last-of-type {
627 white-space: pre-wrap;
628 word-wrap: break-word;
629 word-break: break-word;
631 tr:last-child th, tr:last-child td {
638 margin: 0 0 10px 10px;
654 /* Bootstrap buttons don't have any vertical margin, so
655 they touch when adjacent buttons wrap onto a new line
656 e.g. wide form buttons on a narrow sidebar */
660 margin-bottom: $spacer * 0.25;
664 /* Force LTR/RTL alignment for placeholder text */
666 .form-control::placeholder {
670 /* Rules for export sidebar */
673 .export_area_inputs {
684 /*rtl:ignore*/ float: left;
687 /*rtl:ignore*/ float: right;
692 /* Rules for edit pages */
703 /* Rules for non-map content pages */
709 padding: $lineheight;
712 /* Overrides for pages that use new layout conventions */
714 .header-illustration {
715 background-position: 0 0;
716 background-repeat: no-repeat;
724 background-image: image-url("sign-up-illustration.png");
728 background-image: image-url("confirm-illustration.png");
732 background-image: image-url("terms-illustration.png");
740 background-image: image-url("sign-up-illustration-arm.png");
743 pointer-events: none;
747 [dir=rtl] .header-illustration {
748 transform: scaleX(-1);
751 transform: scaleX(-1);
755 /* Rules for small maps in content areas */
759 margin-bottom: $lineheight;
762 @include media-breakpoint-up(md) {
768 /* Rules for the user map */
770 .content_map .leaflet-popup-content {
775 /* Rules for user popups on maps */
785 /* Rules for the diary entry page */
792 .diary-comment .col-auto {
795 .diary-comment .col {
800 /* Rules for the account confirmation page */
804 padding: $lineheight;
805 margin-bottom: $lineheight;
814 list-style-type: lower-alpha;
819 /* Rules for user images */
831 img.user_thumbnail_tiny {
837 /* General styles for action lists / subnavs */
839 nav.secondary-actions {
852 border-left: 1px solid $grey;
853 padding-left: $lineheight * 0.5;
854 margin-right: $lineheight * 0.5;
855 margin-bottom: $lineheight * 0.125;
860 div.secondary-actions {
865 /* Rules for rich text */
869 background: var(--bs-secondary-bg);
874 background: var(--bs-secondary-bg);
876 white-space: pre-wrap;
884 padding: $lineheight;
885 background-color: var(--bs-tertiary-bg);
892 border-left: $lineheight solid var(--bs-tertiary-bg);
893 padding-left: $lineheight;
895 color: var(--bs-secondary-color);
899 /* Rules for the "Welcome" page */
900 .site-welcome, .site-fixthemap {
902 background-image: image-url("welcome-sprite.png");
903 background-size: 500px 250px;
913 /*rtl:ignore*/ background-position: -50px 0;
918 vertical-align: middle;
922 /*rtl:ignore*/ background-position: -100px 0;
926 /*rtl:ignore*/ background-position: -150px 0;
930 /*rtl:ignore*/ background-position: -200px 0;
934 /*rtl:ignore*/ background-position: -250px 0;
938 /*rtl:ignore*/ background-position: -300px 0;
942 /*rtl:ignore*/ background-position: -350px 0;
946 background-color: #333;
951 .site-about #content {
961 color: $vibrant-green;
967 background-position: 0 50%;
968 background-repeat: no-repeat;
969 background-image: image-url('about/osm.png');
970 background-size: cover;
971 background-color: $vibrant-green;
975 background: $vibrant-green;
979 display: inline-block;
988 background: 40px 40px image-url('about/sprite.png') no-repeat;
992 background-position: 0px 0px;
996 background-position: 0px -40px;
1000 background-position: 0px -80px;
1004 background-position: 0px -120px;
1008 background-position: 0px -160px;
1012 background-position: -45px -160px;
1017 /* Rules for tabs inside secondary background sections */
1019 .bg-body-secondary .nav-tabs {
1020 --bs-border-color: var(--bs-secondary-border-subtle);
1021 --bs-secondary-bg: var(--bs-secondary-border-subtle);
1022 margin-bottom: -1px;
1025 /* Rules for traces */
1028 mix-blend-mode: darken;
1031 @include color-mode(dark) {
1034 mix-blend-mode: lighten;