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 /* Rules for the header */
76 background: image-url("menu-icon.png") no-repeat;
77 background-size: 30px 30px;
80 margin: 14px 10px 0 0;
84 @include color-mode(dark) {
91 height: $headerHeight;
95 h1, nav, nav > ul, nav > ul > li {
96 display: inline-block;
101 padding: $lineheight * 0.5;
124 & > .btn-group .btn-outline-primary {
125 @include button-outline-variant($green, $color-hover: $white, $active-color: $white);
129 .btn-outline-primary {
134 border-top-color: $grey;
138 background-color: lighten($green, 30%);
143 // Small tweaks to the toggle to stop the primary colour showing through
144 // when the menu is shown
145 .show > .btn-outline-primary.dropdown-toggle {
146 background-color: $green;
147 border-color: $green;
150 box-shadow: 0 0 0 0.2rem fade-out($green, 0.5);
161 background-color: lighten($grey, 10%);
165 nav.primary, nav.secondary {
168 background-color: $green;
174 #compact-secondary-nav {
179 #compact-secondary-nav {
180 display: inline-block;
193 flex-direction: column;
195 min-height: $headerHeight;
206 #sidebar .search_forms,
223 .user-menu, .login-menu {
228 #compact-secondary-nav {
233 display: inline-block;
236 .overlay-sidebar #sidebar .welcome {
240 .overlay-sidebar #sidebar #banner {
245 /* Utility for styling notification numbers */
248 background: lighten($green, 30%);
250 font-weight: $font-weight-normal;
253 /* Rules for Leaflet maps */
255 .leaflet-top.leaflet-right,
256 .leaflet-top.leaflet-left {
260 flex-direction: column;
261 flex-wrap: wrap-reverse;
264 .leaflet-control .control-button {
268 background-color: #333;
269 background-color: rgba(0,0,0,.6);
274 background-color: black;
279 background-color: #333;
280 background-color: rgba(0,0,0,.5);
285 background-color: $vibrant-green;
289 border-start-start-radius: 4px;
293 border-end-start-radius: 4px;
302 /* Rules for the sidebar and main map area */
322 width: $sidebarWidth;
329 .overlay-sidebar #sidebar {
356 width: $sidebarWidth;
372 .leaflet-marker-draggable {
387 @include media-breakpoint-down(md) {
422 --bs-btn-border-color: var(--bs-body-bg);
425 --bs-btn-border-color: var(--bs-primary-border-subtle);
434 li.disabled { color: $darkgrey; }
445 top: 10px !important;
447 margin-right: 0px !important;
448 margin-top: 0px !important;
452 .leaflet-popup-scrolled {
453 padding-right: $lineheight;
454 border-bottom: 0px !important;
455 border-top: 0px !important;
458 .leaflet-popup-content-wrapper {
459 border-radius: 4px !important;
462 /* Rules for attribution text under the main map shown on printouts */
464 .donate-attr { color: darken($green, 10%) !important; }
466 /* Rules for the sidebar */
476 /* Temporary label size override until we remove site-wide font customisation */
487 /* Stop bootstrap 5 from floating legends when they don't need to be */
492 /* Override the text colour for primary and secondary buttons, to match our
493 bootstrap 4 colours. Note this has accessibility issues, which is why
494 bootstrap 5 calculates black as the appropriate colour, and we should
495 reconsider our colours at some point with that in mind. */
498 @include button-variant($primary, $primary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
502 @include button-variant($secondary, $secondary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
505 .btn-outline-secondary {
506 @include button-outline-variant($secondary, $color-hover: $white, $active-color: $white);
509 /* Rules for the search and direction forms */
511 header .search_forms,
516 /* Rules for search sidebar */
518 #sidebar .search_results_entry {
520 background: $list-highlight;
523 .search_more .loader {
528 /* Rules for routing */
531 background-image: image-url('routing-sprite.png');
534 background-repeat: no-repeat;
536 @for $i from 0 through 25 {
537 div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
540 @include color-mode(dark) {
553 background: $list-highlight;
556 .routing_marker { width: 15px; cursor: move; }
562 /* Rules for the history sidebar */
564 #sidebar .changesets {
566 &.selected { background: $list-highlight; }
567 /* color is derived from changeset bbox fillColor in history.js */
569 a.stretched-link > span, a:not(.stretched-link), [title] {
571 z-index: 2; /* needs to be higher than Bootstrap's stretched link ::after z-index */
575 .changeset_more .loader {
581 /* Rules for the browse sidebar */
585 padding-bottom: $spacer;
586 margin-bottom: $spacer;
587 border-bottom: 1px solid $grey;
590 word-wrap: break-word;
594 .browse-section:last-of-type {
600 white-space: pre-wrap;
602 tr:last-child th, tr:last-child td {
609 margin: 0 0 10px 10px;
622 background: $list-highlight;
629 /* Bootstrap buttons don't have any vertical margin, so
630 they touch when adjacent buttons wrap onto a new line
631 e.g. wide form buttons on a narrow sidebar */
635 margin-bottom: $spacer * 0.25;
639 /* Force LTR/RTL alignment for placeholder text */
641 .form-control::placeholder {
645 /* Rules for export sidebar */
648 .export_area_inputs {
659 /*rtl:ignore*/ float: left;
662 /*rtl:ignore*/ float: right;
667 /* Rules for edit pages */
678 /* Rules for non-map content pages */
684 padding: $lineheight;
687 /* Overrides for pages that use new layout conventions */
689 .header-illustration {
690 background-position: 0 0;
691 background-repeat: no-repeat;
699 background-image: image-url("sign-up-illustration.png");
703 background-image: image-url("confirm-illustration.png");
707 background-image: image-url("terms-illustration.png");
715 background-image: image-url("sign-up-illustration-arm.png");
718 pointer-events: none;
722 [dir=rtl] .header-illustration {
723 transform: scaleX(-1);
726 transform: scaleX(-1);
730 /* Rules for small maps in content areas */
734 margin-bottom: $lineheight;
737 @include media-breakpoint-up(md) {
743 /* Rules for the user map */
745 .content_map .leaflet-popup-content {
750 /* Rules for user popups on maps */
761 /* Rules for the diary entry page */
768 .diary-comment .col-auto {
771 .diary-comment .col {
776 /* Rules for the account confirmation page */
780 padding: $lineheight;
781 margin-bottom: $lineheight;
790 list-style-type: lower-alpha;
795 /* Rules for messages pages */
799 background: $offwhite;
802 .inbox-row-unread td {
813 /* Rules for user images */
825 img.user_thumbnail_tiny {
831 /* General styles for action lists / subnavs */
833 nav.secondary-actions {
846 border-left: 1px solid $grey;
847 padding-left: $lineheight * 0.5;
848 margin-right: $lineheight * 0.5;
849 margin-bottom: $lineheight * 0.125;
854 div.secondary-actions {
859 /* Rules for rich text */
864 background: var(--bs-secondary-bg);
869 background: var(--bs-secondary-bg);
871 white-space: pre-wrap;
879 padding: $lineheight;
880 background-color: var(--bs-tertiary-bg);
887 border-left: $lineheight solid var(--bs-tertiary-bg);
888 padding-left: $lineheight;
890 color: var(--bs-secondary-color);
894 /* Rules for the "Welcome" page */
895 .site-welcome, .site-fixthemap {
897 background-image: image-url("welcome-sprite.png");
898 background-size: 500px 250px;
908 /*rtl:ignore*/ background-position: -50px 0;
913 vertical-align: middle;
917 /*rtl:ignore*/ background-position: -100px 0;
921 /*rtl:ignore*/ background-position: -150px 0;
925 /*rtl:ignore*/ background-position: -200px 0;
929 /*rtl:ignore*/ background-position: -250px 0;
933 /*rtl:ignore*/ background-position: -300px 0;
937 /*rtl:ignore*/ background-position: -350px 0;
941 background-color: #333;
946 .site-about #content {
956 color: $vibrant-green;
962 background-position: 0 50%;
963 background-repeat: no-repeat;
964 background-image: image-url('about/osm.png');
965 background-size: cover;
966 background-color: $vibrant-green;
970 background: $vibrant-green;
974 display: inline-block;
983 background: 40px 40px image-url('about/sprite.png') no-repeat;
987 background-position: 0px 0px;
991 background-position: 0px -40px;
995 background-position: 0px -80px;
999 background-position: 0px -120px;
1003 background-position: 0px -160px;
1007 background-position: -45px -160px;
1012 /* Rules for tabs inside secondary background sections */
1014 .bg-body-secondary .nav-tabs {
1015 --bs-border-color: var(--bs-secondary-border-subtle);
1016 --bs-secondary-bg: var(--bs-secondary-border-subtle);
1017 margin-bottom: -1px;
1020 /* Rules for traces */
1023 mix-blend-mode: darken;
1026 @include color-mode(dark) {
1029 mix-blend-mode: lighten;