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;
14 text-decoration: underline dotted;
17 #container { position: relative; }
20 vertical-align: middle;
21 margin-right: $lineheight * 0.25;
27 display: inline-block;
31 background: transparent image-url("sprite.svg") no-repeat 0 0;
36 .icon.search { /*rtl:ignore*/ background-position: 0 0; }
37 .icon.donate { /*rtl:ignore*/ background-position: -20px 0; }
38 .icon.zoomin { /*rtl:ignore*/ background-position: -40px 0; }
39 .icon.zoomout { /*rtl:ignore*/ background-position: -60px 0; }
40 .icon.geolocate { /*rtl:ignore*/ background-position: -80px 0; }
41 .active .icon.geolocate { /*rtl:ignore*/ background-position: -80px -20px; }
42 .icon.layers { /*rtl:ignore*/ background-position: -100px 0; }
43 .icon.key { /*rtl:ignore*/ background-position: -120px 0; }
44 .icon.share { /*rtl:ignore*/ background-position: -140px 0; }
45 .icon.clipboard { /*rtl:ignore*/ background-position: -160px 0; }
46 .icon.link { /*rtl:ignore*/ background-position: -180px 0; }
47 .icon.close { /*rtl:ignore*/ background-position: -200px 0; }
48 .icon.close:hover { /*rtl:ignore*/ background-position: -200px -20px; }
49 .icon.check { /*rtl:ignore*/ background-position: -220px 0; }
50 .icon.note { /*rtl:ignore*/ background-position: -240px 0; }
51 .icon.note.grey { /*rtl:ignore*/ background-position: -240px -20px; }
52 .icon.query { /*rtl:ignore*/ background-position: -260px 0; }
54 /* Utility for de-emphasizing content */
60 /* Bootstrap contextual table classes overrides in dark mode */
62 @include color-mode(dark) {
64 --bs-table-bg: rgb(var(--bs-primary-rgb), .25);
67 --bs-table-bg: rgb(var(--bs-secondary-rgb), .25);
70 --bs-table-bg: rgb(var(--bs-success-rgb), .25);
72 .table-primary, .table-secondary, .table-success {
73 --bs-table-color: initial;
74 border-color: inherit;
78 /* Rules for the header */
85 background: image-url("menu-icon.png") no-repeat;
86 background-size: 30px 30px;
89 margin: 14px 10px 0 0;
93 @include color-mode(dark) {
100 height: $headerHeight;
104 h1, nav, nav > ul, nav > ul > li {
105 display: inline-block;
110 padding: $lineheight * 0.5;
133 & > .btn-group .btn-outline-primary {
134 @include button-outline-variant($green, $color-hover: $white, $active-color: $white);
138 .btn-outline-primary {
143 border-top-color: $grey;
147 background-color: lighten($green, 30%);
152 // Small tweaks to the toggle to stop the primary colour showing through
153 // when the menu is shown
154 .show > .btn-outline-primary.dropdown-toggle {
155 background-color: $green;
156 border-color: $green;
159 box-shadow: 0 0 0 0.2rem fade-out($green, 0.5);
170 background-color: lighten($grey, 10%);
174 nav.primary, nav.secondary {
177 background-color: $green;
183 #compact-secondary-nav {
188 #compact-secondary-nav {
189 display: inline-block;
202 flex-direction: column;
204 min-height: $headerHeight;
215 #sidebar .search_forms,
232 .user-menu, .login-menu {
237 #compact-secondary-nav {
242 display: inline-block;
245 .overlay-sidebar #sidebar .welcome {
249 .overlay-sidebar #sidebar #banner {
254 /* Utility for styling notification numbers */
257 background: transparentize(lighten($green, 25%), .25);
259 font-weight: $font-weight-normal;
262 /* Rules for Leaflet maps */
264 .leaflet-top.leaflet-right,
265 .leaflet-top.leaflet-left {
269 flex-direction: column;
270 flex-wrap: wrap-reverse;
273 .leaflet-control .control-button {
277 background-color: #333;
278 background-color: rgba(0,0,0,.6);
283 background-color: black;
288 background-color: #333;
289 background-color: rgba(0,0,0,.5);
294 background-color: $vibrant-green;
298 border-start-start-radius: 4px;
302 border-end-start-radius: 4px;
311 /* Rules for the sidebar and main map area */
331 width: $sidebarWidth;
338 .overlay-sidebar #sidebar {
365 width: $sidebarWidth;
381 .leaflet-marker-draggable {
396 @include media-breakpoint-down(md) {
431 --bs-btn-border-color: var(--bs-body-bg);
434 --bs-btn-border-color: var(--bs-primary-border-subtle);
443 li.disabled { color: $darkgrey; }
454 top: 10px !important;
456 margin-right: 0px !important;
457 margin-top: 0px !important;
461 .leaflet-popup-scrolled {
462 padding-right: $lineheight;
463 border-bottom: 0px !important;
464 border-top: 0px !important;
467 .leaflet-popup-content-wrapper,
469 @extend .bg-body, .text-body;
472 .leaflet-popup-content-wrapper {
476 color: var(--bs-link-color) !important;
480 /* Rules for attribution text under the main map shown on printouts */
482 .donate-attr { color: darken($green, 10%) !important; }
484 /* Rules for the sidebar */
494 /* Temporary label size override until we remove site-wide font customisation */
505 /* Stop bootstrap 5 from floating legends when they don't need to be */
510 /* Override the text colour for primary and secondary buttons, to match our
511 bootstrap 4 colours. Note this has accessibility issues, which is why
512 bootstrap 5 calculates black as the appropriate colour, and we should
513 reconsider our colours at some point with that in mind. */
516 @include button-variant($primary, $primary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
520 @include button-variant($secondary, $secondary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
523 .btn-outline-secondary {
524 @include button-outline-variant($secondary, $color-hover: $white, $active-color: $white);
527 /* Rules for the search and direction forms */
529 header .search_forms,
540 /* Rules for search sidebar */
542 #sidebar .search_results_entry {
543 .search_more .loader {
548 /* Rules for routing */
551 background-image: image-url('routing-sprite.png');
554 background-repeat: no-repeat;
556 @for $i from 0 through 25 {
557 div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
560 @include color-mode(dark) {
573 .routing_marker { width: 15px; cursor: move; }
579 /* Rules for the history sidebar */
581 #sidebar .changesets {
587 a.stretched-link > span, a:not(.stretched-link), [title] {
589 z-index: 2; /* needs to be higher than Bootstrap's stretched link ::after z-index */
593 .changeset_more .loader {
599 /* Rules for the browse sidebar */
603 padding-bottom: $spacer;
604 margin-bottom: $spacer;
605 border-bottom: 1px solid $grey;
608 word-wrap: break-word;
612 .browse-section:last-of-type {
618 white-space: pre-wrap;
619 word-wrap: break-word;
620 word-break: break-word;
622 tr:last-child th, tr:last-child td {
629 margin: 0 0 10px 10px;
637 /* Bootstrap buttons don't have any vertical margin, so
638 they touch when adjacent buttons wrap onto a new line
639 e.g. wide form buttons on a narrow sidebar */
643 margin-bottom: $spacer * 0.25;
647 /* Force LTR/RTL alignment for placeholder text */
649 .form-control::placeholder {
653 /* Rules for export sidebar */
656 .export_area_inputs {
667 /*rtl:ignore*/ float: left;
670 /*rtl:ignore*/ float: right;
675 /* Rules for edit pages */
686 /* Rules for non-map content pages */
692 padding: $lineheight;
695 /* Overrides for pages that use new layout conventions */
697 .header-illustration {
698 background-position: 0 0;
699 background-repeat: no-repeat;
707 background-image: image-url("sign-up-illustration.png");
711 background-image: image-url("confirm-illustration.png");
715 background-image: image-url("terms-illustration.png");
723 background-image: image-url("sign-up-illustration-arm.png");
726 pointer-events: none;
730 [dir=rtl] .header-illustration {
731 transform: scaleX(-1);
734 transform: scaleX(-1);
738 /* Rules for small maps in content areas */
742 margin-bottom: $lineheight;
745 @include media-breakpoint-up(md) {
751 /* Rules for the user map */
753 .content_map .leaflet-popup-content {
758 /* Rules for user popups on maps */
768 /* Rules for the diary entry page */
775 .diary-comment .col-auto {
778 .diary-comment .col {
783 /* Rules for the account confirmation page */
787 padding: $lineheight;
788 margin-bottom: $lineheight;
797 list-style-type: lower-alpha;
802 /* Rules for user images */
814 img.user_thumbnail_tiny {
820 /* General styles for action lists / subnavs */
822 nav.secondary-actions {
835 border-left: 1px solid $grey;
836 padding-left: $lineheight * 0.5;
837 margin-right: $lineheight * 0.5;
838 margin-bottom: $lineheight * 0.125;
843 div.secondary-actions {
848 /* Rules for rich text */
852 background: var(--bs-secondary-bg);
857 background: var(--bs-secondary-bg);
859 white-space: pre-wrap;
867 padding: $lineheight;
868 background-color: var(--bs-tertiary-bg);
875 border-left: $lineheight solid var(--bs-tertiary-bg);
876 padding-left: $lineheight;
878 color: var(--bs-secondary-color);
882 /* Rules for the "Welcome" page */
883 .site-welcome, .site-fixthemap {
885 background-image: image-url("welcome-sprite.png");
886 background-size: 500px 250px;
896 /*rtl:ignore*/ background-position: -50px 0;
901 vertical-align: middle;
905 /*rtl:ignore*/ background-position: -100px 0;
909 /*rtl:ignore*/ background-position: -150px 0;
913 /*rtl:ignore*/ background-position: -200px 0;
917 /*rtl:ignore*/ background-position: -250px 0;
921 /*rtl:ignore*/ background-position: -300px 0;
925 /*rtl:ignore*/ background-position: -350px 0;
929 background-color: #333;
934 .site-about #content {
944 color: $vibrant-green;
950 background-position: 0 50%;
951 background-repeat: no-repeat;
952 background-image: image-url('about/osm.png');
953 background-size: cover;
954 background-color: $vibrant-green;
958 background: $vibrant-green;
962 display: inline-block;
971 background: 40px 40px image-url('about/sprite.png') no-repeat;
975 background-position: 0px 0px;
979 background-position: 0px -40px;
983 background-position: 0px -80px;
987 background-position: 0px -120px;
991 background-position: 0px -160px;
995 background-position: -45px -160px;
1000 /* Rules for tabs inside secondary background sections */
1002 .bg-body-secondary .nav-tabs {
1003 --bs-border-color: var(--bs-secondary-border-subtle);
1004 --bs-secondary-bg: var(--bs-secondary-border-subtle);
1005 margin-bottom: -1px;
1008 /* Rules for traces */
1011 mix-blend-mode: darken;
1014 @include color-mode(dark) {
1017 mix-blend-mode: lighten;