4 @import "rails_bootstrap_forms";
6 /* Styles common to large and small screens */
8 /* Default rules for the body of every page */
11 font-size: $typeheight;
15 text-decoration: underline dotted;
21 display: inline-block;
25 background: transparent image-url("sprite.svg") no-repeat 0 0;
30 .icon.search { /*rtl:ignore*/ background-position: 0 0; }
31 .icon.donate { /*rtl:ignore*/ background-position: -20px 0; }
32 .icon.zoomin { /*rtl:ignore*/ background-position: -40px 0; }
33 .icon.zoomout { /*rtl:ignore*/ background-position: -60px 0; }
34 .icon.geolocate { /*rtl:ignore*/ background-position: -80px 0; }
35 .active .icon.geolocate { /*rtl:ignore*/ background-position: -80px -20px; }
36 .icon.layers { /*rtl:ignore*/ background-position: -100px 0; }
37 .icon.key { /*rtl:ignore*/ background-position: -120px 0; }
38 .icon.share { /*rtl:ignore*/ background-position: -140px 0; }
39 .icon.clipboard { /*rtl:ignore*/ background-position: -160px 0; }
40 .icon.link { /*rtl:ignore*/ background-position: -180px 0; }
41 .icon.close { /*rtl:ignore*/ background-position: -200px 0; }
42 .icon.close:hover { /*rtl:ignore*/ background-position: -200px -20px; }
43 .icon.check { /*rtl:ignore*/ background-position: -220px 0; }
44 .icon.note { /*rtl:ignore*/ background-position: -240px 0; }
45 .icon.note.grey { /*rtl:ignore*/ background-position: -240px -20px; }
46 .icon.query { /*rtl:ignore*/ background-position: -260px 0; }
48 /* Utility for de-emphasizing content */
50 .text-body-secondary a {
54 /* Bootstrap contextual table classes overrides in dark mode */
56 @include color-mode(dark) {
58 --bs-table-bg: rgb(var(--bs-primary-rgb), .25);
61 --bs-table-bg: rgb(var(--bs-secondary-rgb), .25);
64 --bs-table-bg: rgb(var(--bs-success-rgb), .25);
66 .table-primary, .table-secondary, .table-success {
67 --bs-table-color: initial;
68 border-color: inherit;
72 /* Utility for delayed loading spinner */
75 animation: 300ms linear forwards delayed-fade-in;
78 @keyframes delayed-fade-in {
84 /* Bootstrap close button overrides for nested light/dark themes */
86 [data-bs-theme="dark"] .btn-close {
87 filter: var(--bs-btn-close-white-filter);
90 [data-bs-theme="light"] .btn-close {
94 /* Rules for the header */
101 background: image-url("menu-icon.svg") no-repeat;
102 background-size: 30px 30px;
105 margin: 14px 10px 0 0;
109 @include color-mode(dark) {
116 height: $headerHeight;
121 padding: $lineheight * 0.5;
125 height: $headerHeight;
143 #edit_tab .btn-outline-primary {
144 @include button-outline-variant($green, $color-hover: $white, $active-color: $white);
148 .btn-outline-primary {
153 border-top-color: $grey;
157 background-color: lighten($green, 30%);
162 // Small tweaks to the toggle to stop the primary colour showing through
163 // when the menu is shown
164 .show > .btn-outline-primary.dropdown-toggle {
165 background-color: $green;
166 border-color: $green;
169 box-shadow: 0 0 0 0.2rem fade-out($green, 0.5);
180 nav.primary, nav.secondary {
183 background-color: $green;
189 #compact-secondary-nav {
194 #compact-secondary-nav {
195 display: inline-block;
208 flex-direction: column;
210 min-height: $headerHeight;
213 display: none !important;
225 #sidebar .search_forms {
240 flex-direction: column;
242 .user-menu, .login-menu {
247 #compact-secondary-nav {
252 display: inline-block;
255 .overlay-sidebar #sidebar .welcome {
259 .overlay-sidebar #sidebar #banner {
264 /* Utility for styling notification numbers */
267 background: transparentize(lighten($green, 25%), .25);
269 font-weight: $font-weight-normal;
272 /* Rules for Leaflet maps */
274 .leaflet-top.leaflet-right,
275 .leaflet-top.leaflet-left {
279 flex-direction: column;
280 flex-wrap: wrap-reverse;
283 .leaflet-control .control-button {
287 background-color: #333;
288 background-color: rgba(0,0,0,.6);
293 background-color: black;
298 background-color: #333;
299 background-color: rgba(0,0,0,.5);
304 background-color: $vibrant-green;
308 border-start-start-radius: 4px;
312 border-end-start-radius: 4px;
321 /* Rules for the sidebar and main map area */
341 width: $sidebarWidth;
348 .overlay-sidebar #sidebar {
375 width: $sidebarWidth;
391 .leaflet-marker-draggable {
396 animation: 1500ms forwards query-marker-fade;
398 @keyframes query-marker-fade {
414 @include media-breakpoint-down(md) {
429 .overlay-sidebar.overlay-right-sidebar {
449 box-sizing: content-box;
450 top: - map.get($border-widths, 4);
451 left: - map.get($border-widths, 4);
452 --bs-btn-border-color: var(--bs-body-bg);
455 --bs-btn-border-color: var(--bs-primary-border-subtle);
460 li.disabled { color: $darkgrey; }
471 top: 10px !important;
473 margin-right: 0px !important;
474 margin-top: 0px !important;
478 .leaflet-popup-scrolled {
479 padding-right: $lineheight;
480 border-bottom: 0px !important;
481 border-top: 0px !important;
484 .leaflet-popup-content-wrapper, .leaflet-popup-tip,
485 .leaflet-contextmenu, .leaflet-contextmenu-item,
486 .leaflet-control-attribution, .leaflet-control-scale-line {
487 @extend .bg-body, .text-body;
490 .leaflet-control-attribution, .leaflet-control-scale-line {
491 @extend .bg-opacity-75;
492 text-shadow: none !important;
495 .leaflet-contextmenu-item.over {
496 @extend .bg-body-secondary, .border-secondary, .border-opacity-10;
499 .leaflet-popup-content-wrapper {
503 color: var(--bs-link-color) !important;
507 @include color-mode(dark) {
508 .leaflet-tile-container .leaflet-tile,
509 .mapkey-table-entry td:first-child > * {
510 filter: brightness(.8);
513 .leaflet-container .leaflet-control-attribution a {
514 color: var(--bs-link-color);
517 .leaflet-control-scale-line {
518 border-color: rgba(var(--bs-light-rgb), .75) !important;
522 /* Rules for attribution text under the main map shown on printouts */
524 .donate-attr { color: darken($green, 10%) !important; }
526 /* Temporary label size override until we remove site-wide font customisation */
537 /* Stop bootstrap 5 from floating legends when they don't need to be */
542 /* Override the text colour for primary and secondary buttons, to match our
543 bootstrap 4 colours. Note this has accessibility issues, which is why
544 bootstrap 5 calculates black as the appropriate colour, and we should
545 reconsider our colours at some point with that in mind. */
548 @include button-variant($primary, $primary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
552 @include button-variant($secondary, $secondary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
555 .btn-outline-secondary {
556 @include button-outline-variant($secondary, $color-hover: $white, $active-color: $white);
559 /* Rules for the search and direction forms */
561 header .search_forms,
572 /* Rules for search sidebar */
574 #sidebar .search_results_entry {
575 .search_more .loader {
580 /* Rules for routing */
583 background-image: image-url('routing-sprite.svg');
586 background-repeat: no-repeat;
588 @for $i from 0 through 25 {
589 div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
592 @include color-mode(dark) {
605 .routing_marker_column {
613 /* Rules for the history sidebar */
615 #sidebar .changesets {
621 a.stretched-link > span, a:not(.stretched-link), [title] {
623 z-index: 2; /* needs to be higher than Bootstrap's stretched link ::after z-index */
627 .changeset_more .loader {
633 /* Rules for the browse sidebar */
637 padding-bottom: $spacer;
638 margin-bottom: $spacer;
639 border-bottom: 1px solid $grey;
642 word-wrap: break-word;
646 .browse-section:last-of-type {
652 white-space: pre-wrap;
653 word-wrap: break-word;
654 word-break: break-word;
656 tr:last-child th, tr:last-child td {
666 /* Force LTR/RTL alignment for placeholder text */
668 .form-control::placeholder {
672 /* Rules for export sidebar */
675 .export_area_inputs {
686 /*rtl:ignore*/ float: left;
689 /*rtl:ignore*/ float: right;
694 /* Rules for edit pages */
705 /* Rules for non-map content pages */
711 padding: $lineheight;
714 /* Rules for login and signup pages */
716 .sessions-new, .users-new, .users-create {
717 #content .content-inner {
722 .header-illustration {
723 background-position: right;
724 background-repeat: no-repeat;
732 background-image: image-url("sign-up-illustration.svg");
733 background-position-x: 70px;
737 background-image: image-url("confirm-illustration.svg");
741 background-image: image-url("terms-illustration.svg");
745 [dir=rtl] .header-illustration {
746 transform: scaleX(-1);
749 transform: scaleX(-1);
753 transform: scaleX(-1);
757 /* Rules for small maps in content areas */
761 margin-bottom: $lineheight;
764 @include media-breakpoint-up(md) {
770 /* Rules for the user map */
772 .content_map .leaflet-popup-content {
777 /* Rules for user popups on maps */
787 /* Rules for the diary entry page */
794 .diary-comment .col-auto {
797 .diary-comment .col {
802 /* Rules for the account confirmation page */
806 padding: $lineheight;
807 margin-bottom: $lineheight;
816 list-style-type: lower-alpha;
821 /* Rules for user images */
833 img.user_thumbnail_tiny {
839 /* General styles for action lists / subnavs */
841 nav.secondary-actions {
854 border-left: 1px solid $grey;
855 padding-left: $lineheight * 0.5;
856 margin-right: $lineheight * 0.5;
857 margin-bottom: $lineheight * 0.125;
862 div.secondary-actions {
867 /* Rules for rich text */
871 background: var(--bs-secondary-bg);
876 background: var(--bs-secondary-bg);
878 white-space: pre-wrap;
886 padding: $lineheight;
887 background-color: var(--bs-tertiary-bg);
894 border-left: $lineheight solid var(--bs-tertiary-bg);
895 padding-left: $lineheight;
897 color: var(--bs-secondary-color);
901 /* Rules for the "About" page */
903 .site-about #content {
913 color: $vibrant-green;
919 background-position: 0 50%;
920 background-repeat: no-repeat;
921 background-image: image-url('about/osm.png');
922 background-size: cover;
923 background-color: $vibrant-green;
927 background: $vibrant-green;
931 display: inline-block;
938 /* Rules for tables with usernames */
940 .messages-table .username,
941 #block_list .username {
945 /* Rules for navigation tabs */
947 .nav-tabs .username {
951 .bg-body-secondary .nav-tabs {
952 --bs-border-color: var(--bs-secondary-border-subtle);
953 --bs-secondary-bg: var(--bs-secondary-border-subtle);
957 /* Rules for traces */
960 mix-blend-mode: darken;
963 @include color-mode(dark) {
966 mix-blend-mode: lighten;
970 /* Rules for map sidebar icons */
972 .browse-section .browse-element-list {
973 line-height: 1.25rem;
979 .d-flex > .browse-icon {
980 height: max(20px, 1.25rem);
983 @include color-mode(dark) {
984 .browse-icon-invertible {
985 filter: invert(.8) hue-rotate(180deg);