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.png") no-repeat 0 0;
41 background-image: image-url("sprite.svg");
46 .icon.search { /*rtl:ignore*/ background-position: 0 0; }
47 .icon.donate { /*rtl:ignore*/ background-position: -20px 0; }
48 .icon.zoomin { /*rtl:ignore*/ background-position: -40px 0; }
49 .icon.zoomout { /*rtl:ignore*/ background-position: -60px 0; }
50 .icon.geolocate { /*rtl:ignore*/ background-position: -80px 0; }
51 .active .icon.geolocate { /*rtl:ignore*/ background-position: -80px -20px; }
52 .icon.layers { /*rtl:ignore*/ background-position: -100px 0; }
53 .icon.key { /*rtl:ignore*/ background-position: -120px 0; }
54 .icon.share { /*rtl:ignore*/ background-position: -140px 0; }
55 .icon.clipboard { /*rtl:ignore*/ background-position: -160px 0; }
56 .icon.link { /*rtl:ignore*/ background-position: -180px 0; }
57 .icon.close { /*rtl:ignore*/ background-position: -200px 0; }
58 .icon.close:hover { /*rtl:ignore*/ background-position: -200px -20px; }
59 .icon.check { /*rtl:ignore*/ background-position: -220px 0; }
60 .icon.note { /*rtl:ignore*/ background-position: -240px 0; }
61 .icon.note.grey { /*rtl:ignore*/ background-position: -240px -20px; }
62 .icon.query { /*rtl:ignore*/ background-position: -260px 0; }
64 /* Utility for de-emphasizing content */
70 /* Rules for borders */
71 /* These add additional colours to those provided by bootstrap */
73 border-color: $grey !important;
77 border-color: $lightgrey !important;
80 /* Rules for the header */
85 background: image-url("menu-icon.png") no-repeat;
86 background-size: 30px 30px;
89 margin: 14px 10px 0 0;
94 height: $headerHeight;
99 h1, nav, nav > ul, nav > ul > li {
100 display: inline-block;
105 padding: $lineheight * 0.5;
129 & > .btn-group .btn-outline-primary {
130 @include button-outline-variant($green, $color-hover: $white, $active-color: $white);
134 .btn-outline-primary {
139 border-top-color: $grey;
143 background-color: lighten($green, 30%);
148 // Small tweaks to the toggle to stop the primary colour showing through
149 // when the menu is shown
150 .show > .btn-outline-primary.dropdown-toggle {
151 background-color: $green;
152 border-color: $green;
155 box-shadow: 0 0 0 0.2rem fade-out($green, 0.5);
170 color: darken($darkgrey, 25%);
174 background-color: lighten($grey, 10%);
178 nav.primary, nav.secondary {
181 background-color: $green;
187 #compact-secondary-nav {
192 #compact-secondary-nav {
193 display: inline-block;
207 float: none !important;
215 min-height: $headerHeight;
227 #sidebar .search_forms,
243 border-top: 1px solid #eee;
245 border-bottom: 1px solid #eee;
263 .user-menu, .login-menu {
268 #compact-secondary-nav {
273 display: inline-block;
276 .overlay-sidebar #sidebar .welcome {
280 .overlay-sidebar #sidebar #banner {
285 /* Utility for styling notification numbers */
288 background: lighten($green, 30%);
290 font-weight: $font-weight-normal;
293 /* Rules for Leaflet maps */
295 .leaflet-top.leaflet-right,
296 .leaflet-top.leaflet-left {
300 flex-direction: column;
301 flex-wrap: wrap-reverse;
304 .leaflet-control .control-button {
308 background-color: #333;
309 background-color: rgba(0,0,0,.6);
314 background-color: black;
319 background-color: #333;
320 background-color: rgba(0,0,0,.5);
325 background-color: $vibrant-green;
329 border-start-start-radius: 4px;
333 border-end-start-radius: 4px;
342 /* Rules for the sidebar and main map area */
362 width: $sidebarWidth;
370 .overlay-sidebar #sidebar {
398 width: $sidebarWidth;
414 .leaflet-marker-draggable {
429 border-bottom: 1px solid $grey;
435 @include media-breakpoint-down(md) {
477 border: 2px solid #fff;
480 transition: border-color 0.08s ease-in;
487 border-bottom-right-radius: 3px;
491 text-stroke: 2px #fff;
492 background: rgba(255,255,255,.9);
494 input[type="radio"] {
499 &.active { border-color: darken($green, 10%); }
502 &.active { border-color: darken($green, 20%); }
512 li.disabled { color: $darkgrey; }
523 top: 10px !important;
525 margin-right: 0px !important;
526 margin-top: 0px !important;
530 .leaflet-popup-scrolled {
531 padding-right: $lineheight;
532 border-bottom: 0px !important;
533 border-top: 0px !important;
536 .leaflet-popup-content-wrapper {
537 border-radius: 4px !important;
540 /* Rules for attribution text under the main map shown on printouts */
542 .donate-attr { color: darken($green, 10%) !important; }
544 /* Rules for the sidebar */
554 /* Temporary label size override until we remove site-wide font customisation */
565 /* Stop bootstrap 5 from floating legends when they don't need to be */
570 /* Override the text colour for primary and secondary buttons, to match our
571 bootstrap 4 colours. Note this has accessibility issues, which is why
572 bootstrap 5 calculates black as the appropriate colour, and we should
573 reconsider our colours at some point with that in mind. */
576 @include button-variant($primary, $primary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
580 @include button-variant($secondary, $secondary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
583 .btn-outline-secondary {
584 @include button-outline-variant($secondary, $color-hover: $white, $active-color: $white);
587 /* Rules for the search and direction forms */
589 header .search_forms,
594 /* Rules for the map key which appears in the popout sidebar */
597 .mapkey-table-key img {
604 /* Rules for search sidebar */
606 #sidebar .search_results_entry {
608 background: $list-highlight;
611 .search_more .loader {
616 /* Rules for routing */
619 background-image: image-url('routing-sprite.png');
622 background-repeat: no-repeat;
624 @for $i from 0 through 25 {
625 div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
635 background: $list-highlight;
638 .routing_marker { width: 15px; cursor: move; }
644 /* Rules for the history sidebar */
646 #sidebar .changesets {
648 &.selected { background: $list-highlight; }
649 /* color is derived from changeset bbox fillColor in history.js */
651 a.stretched-link > span, a:not(.stretched-link), [title] {
653 z-index: 2; /* needs to be higher than Bootstrap's stretched link ::after z-index */
657 .changeset_more .loader {
663 /* Rules for the browse sidebar */
667 padding-bottom: $spacer;
668 margin-bottom: $spacer;
669 border-bottom: 1px solid $grey;
672 word-wrap: break-word;
676 .browse-section:last-of-type {
682 white-space: pre-wrap;
684 tr:last-child th, tr:last-child td {
688 .colour-preview-box {
691 // add color via inline css on element: background-color: <tag value>;
695 span.action-button:hover {
697 text-decoration: underline;
702 margin: 0 0 10px 10px;
715 background: $list-highlight;
722 /* Bootstrap buttons don't have any vertical margin, so
723 they touch when adjacent buttons wrap onto a new line
724 e.g. wide form buttons on a narrow sidebar */
728 margin-bottom: $spacer * 0.25;
732 /* Force LTR/RTL alignment for placeholder text */
734 .form-control::placeholder {
738 /* Rules for export sidebar */
746 .export_area_inputs {
747 margin-bottom: $spacer;
755 background: $lightgrey;
757 #maxlat { margin-top: -1px; }
760 /*rtl:ignore*/ margin-left: -1px;
764 /*rtl:ignore*/ margin-right: -1px;
766 #minlat { margin-bottom: -1px; }
770 /* Rules for edit pages */
781 /* Rules for non-map content pages */
784 background: $lightgrey;
791 padding: $lineheight;
794 /* Overrides for pages that use new layout conventions */
796 .header-illustration {
797 background-position: 0 0;
798 background-repeat: no-repeat;
806 background-image: image-url("sign-up-illustration.png");
810 background-image: image-url("confirm-illustration.png");
814 background-image: image-url("terms-illustration.png");
822 background-image: image-url("sign-up-illustration-arm.png");
825 pointer-events: none;
829 [dir=rtl] .header-illustration {
830 transform: scaleX(-1);
833 transform: scaleX(-1);
837 /* Rules for small maps in content areas */
841 margin-bottom: $lineheight;
844 @include media-breakpoint-up(md) {
850 /* Rules for the user map */
852 .content_map .leaflet-popup-content {
857 /* Rules for user popups on maps */
868 /* Rules for the diary entry page */
879 border-top: 1px dashed $grey;
881 border-top: 1px solid $grey;
886 /* Rules for the account confirmation page */
890 padding: $lineheight;
891 margin-bottom: $lineheight;
900 list-style-type: lower-alpha;
905 /* Rules for messages pages */
909 background: $offwhite;
912 .inbox-row-unread td {
918 background-color: $lightgrey;
930 background-color: $lightgrey;
933 /* Rules for user images */
945 img.user_thumbnail_tiny {
952 /* General styles for action lists / subnavs */
954 nav.secondary-actions {
967 border-left: 1px solid $grey;
968 padding-left: $lineheight * 0.5;
969 margin-right: $lineheight * 0.5;
970 margin-bottom: $lineheight * 0.125;
975 div.secondary-actions {
980 /* Rules for rich text */
985 background: $lightgrey;
990 background: $lightgrey;
992 white-space: pre-wrap;
1000 padding: $lineheight;
1001 background-color: $offwhite;
1008 border-left: $lineheight solid $offwhite;
1009 padding-left: $lineheight;
1015 /* Rules for the "Welcome" page */
1016 .site-welcome, .site-fixthemap {
1018 background-image: image-url("welcome-sprite.png");
1019 background-size: 500px 250px;
1029 /*rtl:ignore*/ background-position: -50px 0;
1034 vertical-align: middle;
1038 /*rtl:ignore*/ background-position: -100px 0;
1042 /*rtl:ignore*/ background-position: -150px 0;
1046 /*rtl:ignore*/ background-position: -200px 0;
1050 /*rtl:ignore*/ background-position: -250px 0;
1054 /*rtl:ignore*/ background-position: -300px 0;
1058 /*rtl:ignore*/ background-position: -350px 0;
1062 background-color: #333;
1067 .site-about #content {
1068 background-color: $lightgrey;
1079 color: $vibrant-green;
1085 background-position: 0 50%;
1086 background-repeat: no-repeat;
1087 background-image: image-url('about/osm.png');
1088 background-size: cover;
1089 background-color: $vibrant-green;
1093 background: $vibrant-green;
1097 display: inline-block;
1106 background: 40px 40px image-url('about/sprite.png') no-repeat;
1110 background-position: 0px 0px;
1114 background-position: 0px -40px;
1118 background-position: 0px -80px;
1122 background-position: 0px -120px;
1126 background-position: 0px -160px;
1130 background-position: -45px -160px;