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;
222 #sidebar .search_forms {
237 flex-direction: column;
239 .user-menu, .login-menu {
244 #compact-secondary-nav {
249 display: inline-block;
252 .overlay-sidebar #sidebar .welcome {
256 .overlay-sidebar #sidebar #banner {
261 /* Utility for styling notification numbers */
264 background: transparentize(lighten($green, 25%), .25);
266 font-weight: $font-weight-normal;
269 /* Rules for Leaflet maps */
271 .leaflet-top.leaflet-right,
272 .leaflet-top.leaflet-left {
276 flex-direction: column;
277 flex-wrap: wrap-reverse;
280 .leaflet-control .control-button {
284 background-color: #333;
285 background-color: rgba(0,0,0,.6);
290 background-color: black;
295 background-color: #333;
296 background-color: rgba(0,0,0,.5);
301 background-color: $vibrant-green;
305 border-start-start-radius: 4px;
309 border-end-start-radius: 4px;
318 /* Rules for the sidebar and main map area */
338 width: $sidebarWidth;
345 .overlay-sidebar #sidebar {
372 width: $sidebarWidth;
388 .leaflet-marker-draggable {
393 animation: 1500ms forwards query-marker-fade;
395 @keyframes query-marker-fade {
411 @include media-breakpoint-down(md) {
426 .overlay-sidebar.overlay-right-sidebar {
446 box-sizing: content-box;
447 top: - map.get($border-widths, 4);
448 left: - map.get($border-widths, 4);
449 --bs-btn-border-color: var(--bs-body-bg);
452 --bs-btn-border-color: var(--bs-primary-border-subtle);
457 li.disabled { color: $darkgrey; }
468 top: 10px !important;
470 margin-right: 0px !important;
471 margin-top: 0px !important;
475 .leaflet-popup-scrolled {
476 padding-right: $lineheight;
477 border-bottom: 0px !important;
478 border-top: 0px !important;
481 .leaflet-popup-content-wrapper, .leaflet-popup-tip,
482 .leaflet-contextmenu, .leaflet-contextmenu-item,
483 .leaflet-control-attribution, .leaflet-control-scale-line {
484 @extend .bg-body, .text-body;
487 .leaflet-control-attribution, .leaflet-control-scale-line {
488 @extend .bg-opacity-75;
489 text-shadow: none !important;
492 .leaflet-contextmenu-item.over {
493 @extend .bg-body-secondary, .border-secondary, .border-opacity-10;
496 .leaflet-popup-content-wrapper {
500 color: var(--bs-link-color) !important;
504 @include color-mode(dark) {
505 .leaflet-tile-container .leaflet-tile,
506 .mapkey-table-entry td:first-child > * {
507 filter: brightness(.8);
510 .leaflet-container .leaflet-control-attribution a {
511 color: var(--bs-link-color);
514 .leaflet-control-scale-line {
515 border-color: rgba(var(--bs-light-rgb), .75) !important;
519 /* Rules for attribution text under the main map shown on printouts */
521 .donate-attr { color: darken($green, 10%) !important; }
523 /* Temporary label size override until we remove site-wide font customisation */
534 /* Stop bootstrap 5 from floating legends when they don't need to be */
539 /* Override the text colour for primary and secondary buttons, to match our
540 bootstrap 4 colours. Note this has accessibility issues, which is why
541 bootstrap 5 calculates black as the appropriate colour, and we should
542 reconsider our colours at some point with that in mind. */
545 @include button-variant($primary, $primary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
549 @include button-variant($secondary, $secondary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
552 .btn-outline-secondary {
553 @include button-outline-variant($secondary, $color-hover: $white, $active-color: $white);
556 /* Rules for the search and direction forms */
558 header .search_forms,
569 /* Rules for search sidebar */
571 #sidebar .search_results_entry {
572 .search_more .loader {
577 /* Rules for routing */
580 background-image: image-url('routing-sprite.svg');
583 background-repeat: no-repeat;
585 @for $i from 0 through 25 {
586 div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
589 @include color-mode(dark) {
602 .routing_marker_column {
610 /* Rules for the history sidebar */
612 #sidebar .changesets {
618 a.stretched-link > span, a:not(.stretched-link), [title] {
620 z-index: 2; /* needs to be higher than Bootstrap's stretched link ::after z-index */
624 .changeset_more .loader {
630 /* Rules for the browse sidebar */
634 padding-bottom: $spacer;
635 margin-bottom: $spacer;
636 border-bottom: 1px solid $grey;
639 word-wrap: break-word;
643 .browse-section:last-of-type {
649 white-space: pre-wrap;
650 word-wrap: break-word;
651 word-break: break-word;
653 tr:last-child th, tr:last-child td {
663 /* Force LTR/RTL alignment for placeholder text */
665 .form-control::placeholder {
669 /* Rules for export sidebar */
672 .export_area_inputs {
683 /*rtl:ignore*/ float: left;
686 /*rtl:ignore*/ float: right;
691 /* Rules for edit pages */
702 /* Rules for non-map content pages */
708 padding: $lineheight;
711 /* Rules for login and signup pages */
713 .sessions-new, .users-new, .users-create {
714 #content .content-inner {
719 .header-illustration {
720 background-position: right;
721 background-repeat: no-repeat;
729 background-image: image-url("sign-up-illustration.svg");
730 background-position-x: 70px;
734 background-image: image-url("confirm-illustration.svg");
738 background-image: image-url("terms-illustration.svg");
742 [dir=rtl] .header-illustration {
743 transform: scaleX(-1);
746 transform: scaleX(-1);
750 transform: scaleX(-1);
754 /* Rules for small maps in content areas */
758 margin-bottom: $lineheight;
761 @include media-breakpoint-up(md) {
767 /* Rules for the user map */
769 .content_map .leaflet-popup-content {
774 /* Rules for user popups on maps */
784 /* Rules for the diary entry page */
791 .diary-comment .col-auto {
794 .diary-comment .col {
799 /* Rules for the account confirmation page */
803 padding: $lineheight;
804 margin-bottom: $lineheight;
813 list-style-type: lower-alpha;
818 /* Rules for user images */
830 img.user_thumbnail_tiny {
836 /* General styles for action lists / subnavs */
838 nav.secondary-actions {
851 border-left: 1px solid $grey;
852 padding-left: $lineheight * 0.5;
853 margin-right: $lineheight * 0.5;
854 margin-bottom: $lineheight * 0.125;
859 div.secondary-actions {
864 /* Rules for rich text */
868 background: var(--bs-secondary-bg);
873 background: var(--bs-secondary-bg);
875 white-space: pre-wrap;
883 padding: $lineheight;
884 background-color: var(--bs-tertiary-bg);
891 border-left: $lineheight solid var(--bs-tertiary-bg);
892 padding-left: $lineheight;
894 color: var(--bs-secondary-color);
898 /* Rules for the "About" page */
900 .site-about #content {
910 color: $vibrant-green;
916 background-position: 0 50%;
917 background-repeat: no-repeat;
918 background-image: image-url('about/osm.png');
919 background-size: cover;
920 background-color: $vibrant-green;
924 background: $vibrant-green;
928 display: inline-block;
935 /* Rules for block pages */
937 #block_list .username {
941 /* Rules for navigation tabs */
943 .nav-tabs .username {
947 .bg-body-secondary .nav-tabs {
948 --bs-border-color: var(--bs-secondary-border-subtle);
949 --bs-secondary-bg: var(--bs-secondary-border-subtle);
953 /* Rules for traces */
956 mix-blend-mode: darken;
959 @include color-mode(dark) {
962 mix-blend-mode: lighten;
966 /* Rules for map sidebar icons */
972 display: inline-block;
977 .node, .way, .relation {
981 .node::before { content: image-url('browse/node.svg'); }
982 .way::before { content: image-url('browse/way.svg'); }
983 .relation::before { content: image-url('browse/relation.svg'); }
986 @each $class, $item in $map-sidebar-icons {
987 .browse-section #{$class}::before {
988 content: image-url('browse/#{map.get($item, "filename")}');
991 @if map.get($item, "invert") {
992 @include color-mode(dark) {
993 .browse-section #{$class}::before {
994 filter: invert(.8) hue-rotate(180deg);