5 @import "rails_bootstrap_forms";
7 /* Styles common to large and small screens */
9 /* Default rules for the body of every page */
12 font-size: $typeheight;
16 text-decoration: underline dotted;
22 display: inline-block;
26 background: transparent image-url("sprite.svg") no-repeat 0 0;
31 .icon.search { /*rtl:ignore*/ background-position: 0 0; }
32 .icon.donate { /*rtl:ignore*/ background-position: -20px 0; }
33 .icon.zoomin { /*rtl:ignore*/ background-position: -40px 0; }
34 .icon.zoomout { /*rtl:ignore*/ background-position: -60px 0; }
35 .icon.geolocate { /*rtl:ignore*/ background-position: -80px 0; }
36 .active .icon.geolocate { /*rtl:ignore*/ background-position: -80px -20px; }
37 .icon.layers { /*rtl:ignore*/ background-position: -100px 0; }
38 .icon.key { /*rtl:ignore*/ background-position: -120px 0; }
39 .icon.share { /*rtl:ignore*/ background-position: -140px 0; }
40 .icon.clipboard { /*rtl:ignore*/ background-position: -160px 0; }
41 .icon.link { /*rtl:ignore*/ background-position: -180px 0; }
42 .icon.close { /*rtl:ignore*/ background-position: -200px 0; }
43 .icon.close:hover { /*rtl:ignore*/ background-position: -200px -20px; }
44 .icon.check { /*rtl:ignore*/ background-position: -220px 0; }
45 .icon.note { /*rtl:ignore*/ background-position: -240px 0; }
46 .icon.note.grey { /*rtl:ignore*/ background-position: -240px -20px; }
47 .icon.query { /*rtl:ignore*/ background-position: -260px 0; }
49 /* Utility for de-emphasizing content */
51 .text-body-secondary a {
55 /* Bootstrap contextual table classes overrides in dark mode */
57 @include color-mode(dark) {
59 --bs-table-bg: rgb(var(--bs-primary-rgb), .25);
62 --bs-table-bg: rgb(var(--bs-secondary-rgb), .25);
65 --bs-table-bg: rgb(var(--bs-success-rgb), .25);
67 .table-primary, .table-secondary, .table-success {
68 --bs-table-color: initial;
69 border-color: inherit;
73 /* Utility for delayed loading spinner */
76 animation: 300ms linear forwards delayed-fade-in;
79 @keyframes delayed-fade-in {
85 /* Bootstrap close button overrides for nested light/dark themes */
87 [data-bs-theme="dark"] .btn-close {
88 filter: var(--bs-btn-close-white-filter);
91 [data-bs-theme="light"] .btn-close {
95 /* Rules for the header */
102 background: image-url("menu-icon.svg") no-repeat;
103 background-size: 30px 30px;
106 margin: 14px 10px 0 0;
110 @include color-mode(dark) {
117 height: $headerHeight;
122 padding: $lineheight * 0.5;
126 height: $headerHeight;
144 #edit_tab .btn-outline-primary {
145 @include button-outline-variant($green, $color-hover: $white, $active-color: $white);
149 .btn-outline-primary {
154 border-top-color: $grey;
158 background-color: lighten($green, 30%);
163 // Small tweaks to the toggle to stop the primary colour showing through
164 // when the menu is shown
165 .show > .btn-outline-primary.dropdown-toggle {
166 background-color: $green;
167 border-color: $green;
170 box-shadow: 0 0 0 0.2rem fade-out($green, 0.5);
181 nav.primary, nav.secondary {
184 background-color: $green;
190 #compact-secondary-nav {
195 #compact-secondary-nav {
196 display: inline-block;
209 flex-direction: column;
211 min-height: $headerHeight;
214 display: none !important;
226 #sidebar .search_forms {
241 flex-direction: column;
243 .user-menu, .login-menu {
248 #compact-secondary-nav {
253 display: inline-block;
256 .overlay-sidebar #sidebar .welcome {
260 .overlay-sidebar #sidebar #banner {
265 /* Utility for styling notification numbers */
268 background: transparentize(lighten($green, 25%), .25);
270 font-weight: $font-weight-normal;
273 /* Rules for Leaflet maps */
275 .leaflet-top.leaflet-right,
276 .leaflet-top.leaflet-left {
280 flex-direction: column;
281 flex-wrap: wrap-reverse;
284 .leaflet-control .control-button {
288 background-color: #333;
289 background-color: rgba(0,0,0,.6);
294 background-color: black;
299 background-color: #333;
300 background-color: rgba(0,0,0,.5);
305 background-color: $vibrant-green;
309 border-start-start-radius: 4px;
313 border-end-start-radius: 4px;
322 /* Rules for the sidebar and main map area */
342 width: $sidebarWidth;
349 .overlay-sidebar #sidebar {
376 width: $sidebarWidth;
392 .leaflet-marker-draggable {
397 animation: 1500ms forwards query-marker-fade;
399 @keyframes query-marker-fade {
415 @include media-breakpoint-down(md) {
430 .overlay-sidebar.overlay-right-sidebar {
450 box-sizing: content-box;
451 top: - map.get($border-widths, 4);
452 left: - map.get($border-widths, 4);
453 --bs-btn-border-color: var(--bs-body-bg);
456 --bs-btn-border-color: var(--bs-primary-border-subtle);
461 li.disabled { color: $darkgrey; }
472 top: 10px !important;
474 margin-right: 0px !important;
475 margin-top: 0px !important;
479 .leaflet-popup-scrolled {
480 padding-right: $lineheight;
481 border-bottom: 0px !important;
482 border-top: 0px !important;
485 .leaflet-popup-content-wrapper, .leaflet-popup-tip,
486 .leaflet-contextmenu, .leaflet-contextmenu-item,
487 .leaflet-control-attribution, .leaflet-control-scale-line {
488 @extend .bg-body, .text-body;
491 .leaflet-control-attribution, .leaflet-control-scale-line {
492 @extend .bg-opacity-75;
493 text-shadow: none !important;
496 .leaflet-contextmenu-item.over {
497 @extend .bg-body-secondary, .border-secondary, .border-opacity-10;
500 .leaflet-popup-content-wrapper {
504 color: var(--bs-link-color) !important;
508 @include color-mode(dark) {
509 .leaflet-tile-container .leaflet-tile,
510 .mapkey-table-entry td:first-child > * {
511 filter: brightness(.8);
514 .leaflet-container .leaflet-control-attribution a {
515 color: var(--bs-link-color);
518 .leaflet-control-scale-line {
519 border-color: rgba(var(--bs-light-rgb), .75) !important;
523 /* Rules for attribution text under the main map shown on printouts */
525 .donate-attr { color: darken($green, 10%) !important; }
527 /* Temporary label size override until we remove site-wide font customisation */
538 /* Stop bootstrap 5 from floating legends when they don't need to be */
543 /* Override the text colour for primary and secondary buttons, to match our
544 bootstrap 4 colours. Note this has accessibility issues, which is why
545 bootstrap 5 calculates black as the appropriate colour, and we should
546 reconsider our colours at some point with that in mind. */
549 @include button-variant($primary, $primary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
553 @include button-variant($secondary, $secondary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
556 .btn-outline-secondary {
557 @include button-outline-variant($secondary, $color-hover: $white, $active-color: $white);
560 /* Rules for the search and direction forms */
562 header .search_forms,
573 /* Rules for search sidebar */
575 #sidebar .search_results_entry {
576 .search_more .loader {
581 /* Rules for routing */
584 background-image: image-url('routing-sprite.svg');
587 background-repeat: no-repeat;
589 @for $i from 0 through 25 {
590 div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
593 @include color-mode(dark) {
606 .routing_marker_column {
614 /* Rules for the history sidebar */
616 #sidebar .changesets {
622 a.stretched-link > span, a:not(.stretched-link), [title] {
624 z-index: 2; /* needs to be higher than Bootstrap's stretched link ::after z-index */
628 .changeset_more .loader {
634 /* Rules for the browse sidebar */
638 padding-bottom: $spacer;
639 margin-bottom: $spacer;
640 border-bottom: 1px solid $grey;
643 word-wrap: break-word;
647 .browse-section:last-of-type {
653 white-space: pre-wrap;
654 word-wrap: break-word;
655 word-break: break-word;
657 tr:last-child th, tr:last-child td {
667 /* Force LTR/RTL alignment for placeholder text */
669 .form-control::placeholder {
673 /* Rules for export sidebar */
676 .export_area_inputs {
687 /*rtl:ignore*/ float: left;
690 /*rtl:ignore*/ float: right;
695 /* Rules for edit pages */
706 /* Rules for non-map content pages */
712 padding: $lineheight;
715 /* Rules for login and signup pages */
717 .sessions-new, .users-new, .users-create {
718 #content .content-inner {
723 .header-illustration {
724 background-position: right;
725 background-repeat: no-repeat;
733 background-image: image-url("sign-up-illustration.svg");
734 background-position-x: 70px;
738 background-image: image-url("confirm-illustration.svg");
742 background-image: image-url("terms-illustration.svg");
746 [dir=rtl] .header-illustration {
747 transform: scaleX(-1);
750 transform: scaleX(-1);
754 transform: scaleX(-1);
758 /* Rules for small maps in content areas */
762 margin-bottom: $lineheight;
765 @include media-breakpoint-up(md) {
771 /* Rules for the user map */
773 .content_map .leaflet-popup-content {
778 /* Rules for user popups on maps */
788 /* Rules for the diary entry page */
795 .diary-comment .col-auto {
798 .diary-comment .col {
803 /* Rules for the account confirmation page */
807 padding: $lineheight;
808 margin-bottom: $lineheight;
817 list-style-type: lower-alpha;
822 /* Rules for user images */
834 img.user_thumbnail_tiny {
840 /* General styles for action lists / subnavs */
842 nav.secondary-actions {
855 border-left: 1px solid $grey;
856 padding-left: $lineheight * 0.5;
857 margin-right: $lineheight * 0.5;
858 margin-bottom: $lineheight * 0.125;
863 div.secondary-actions {
868 /* Rules for rich text */
872 background: var(--bs-secondary-bg);
877 background: var(--bs-secondary-bg);
879 white-space: pre-wrap;
887 padding: $lineheight;
888 background-color: var(--bs-tertiary-bg);
895 border-left: $lineheight solid var(--bs-tertiary-bg);
896 padding-left: $lineheight;
898 color: var(--bs-secondary-color);
902 /* Rules for the "About" page */
904 .site-about #content {
914 color: $vibrant-green;
920 background-position: 0 50%;
921 background-repeat: no-repeat;
922 background-image: image-url('about/osm.png');
923 background-size: cover;
924 background-color: $vibrant-green;
928 background: $vibrant-green;
932 display: inline-block;
939 /* Rules for tables with usernames */
941 .messages-table .username,
942 #block_list .username {
946 /* Rules for navigation tabs */
948 .nav-tabs .username {
952 .bg-body-secondary .nav-tabs {
953 --bs-border-color: var(--bs-secondary-border-subtle);
954 --bs-secondary-bg: var(--bs-secondary-border-subtle);
958 /* Rules for traces */
961 mix-blend-mode: darken;
964 @include color-mode(dark) {
967 mix-blend-mode: lighten;
971 /* Rules for map sidebar icons */
977 display: inline-block;
982 .node, .way, .relation {
986 .node::before { content: image-url('browse/node.svg'); }
987 .way::before { content: image-url('browse/way.svg'); }
988 .relation::before { content: image-url('browse/relation.svg'); }
991 @each $class, $item in $map-sidebar-icons {
992 .browse-section #{$class}::before {
993 content: image-url('browse/#{map.get($item, "filename")}');
996 @if map.get($item, "invert") {
997 @include color-mode(dark) {
998 .browse-section #{$class}::before {
999 filter: invert(.8) hue-rotate(180deg);