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;
22 #container { position: relative; }
25 vertical-align: middle;
26 margin-right: $lineheight/4;
29 [dir=rtl] { /* no-r2 */ text-align: right; }
31 [dir=ltr] { /* no-r2 */ text-align: left; }
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 { /* no-r2 */ background-position: 0 0; }
47 .icon.donate { /* no-r2 */ background-position: -20px 0; }
48 .icon.zoomin { /* no-r2 */ background-position: -40px 0; }
49 .icon.zoomout { /* no-r2 */ background-position: -60px 0; }
50 .icon.geolocate { /* no-r2 */ background-position: -80px 0; }
51 .active .icon.geolocate { /* no-r2 */ background-position: -80px -20px; }
52 .icon.layers { /* no-r2 */ background-position: -100px 0; }
53 .icon.key { /* no-r2 */ background-position: -120px 0; }
54 .icon.share { /* no-r2 */ background-position: -140px 0; }
55 .icon.clipboard { /* no-r2 */ background-position: -160px 0; }
56 .icon.link { /* no-r2 */ background-position: -180px 0; }
57 .icon.close { /* no-r2 */ background-position: -200px 0; }
58 .icon.close:hover { /* no-r2 */ background-position: -200px -20px; }
59 .icon.check { /* no-r2 */ background-position: -220px 0; }
60 .icon.note { /* no-r2 */ background-position: -240px 0; }
61 .icon.note.grey { /* no-r2 */ background-position: -240px -20px; }
62 .icon.query { /* no-r2 */ 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 */
83 display: none !important;
85 background: image-url("menu-icon.png") no-repeat;
86 background-size: 30px 30px;
90 margin: 14px 10px 0 0;
95 height: $headerHeight;
100 h1, nav, nav > ul, nav > ul > li {
101 display: inline-block;
106 padding: $lineheight/2;
114 text-decoration: none;
121 vertical-align: middle;
147 .btn-outline-primary {
148 @include button-outline-variant($green, $color-hover: $white, $active-color: $white);
152 .btn-outline-primary {
157 border-top-color: $grey;
161 background-color: lighten($green, 30%);
166 // Small tweaks to the toggle to stop the primary colour showing through
167 // when the menu is shown
168 .show > .btn-outline-primary.dropdown-toggle {
169 background-color: $green;
170 border-color: $green;
173 box-shadow: 0 0 0 0.2rem fade-out($green, 0.5);
188 color: darken($darkgrey, 25%);
192 .btn-outline-secondary {
193 @include button-outline-variant($darkgrey, $color-hover: $white, $active-color: $white);
198 .btn-outline-secondary {
199 @include button-outline-variant($darkgrey, $color-hover: $darkgrey, $active-background: white, $active-border: $darkgrey);
208 display: inline-block;
210 margin: 3px 0 3px 3px;
211 background-color: lighten($grey, 10%);
223 nav.primary, nav.secondary {
226 background-color: $green;
232 #compact-secondary-nav {
237 #compact-secondary-nav {
238 display: inline-block;
247 display: inline-block !important;
252 float: none !important;
260 min-height: $headerHeight;
272 #sidebar .search_forms,
288 border-top: 1px solid #eee;
290 border-bottom: 1px solid #eee;
313 #compact-secondary-nav {
318 display: inline-block;
321 .overlay-sidebar #sidebar .welcome.visible {
325 .overlay-sidebar #sidebar #banner {
329 .leaflet-top.leaflet-right {
330 top: 10px !important;
334 /* Utility for styling notification numbers */
337 padding: 2px $lineheight/4;
339 background: lighten($green, 30%);
345 /* Rules for the message shown in place of the map when javascript is disabled */
353 /* Rules for Leaflet maps */
355 .leaflet-control .control-button {
359 background-color: #333;
360 background-color: rgba(0,0,0,.6);
365 background-color: black;
370 background-color: #333;
371 background-color: rgba(0,0,0,.5);
376 background-color: $vibrant-green;
384 /* Rules for the sidebar and main map area */
404 width: $sidebarWidth;
423 .overlay-sidebar #sidebar {
460 width: $sidebarWidth;
476 .leaflet-marker-draggable {
491 border-bottom: 1px solid $grey;
497 border: 1px solid $grey;
499 border-top-color: $grey;
505 @include media-breakpoint-down(md) {
553 border: 2px solid #fff;
556 transition: border-color 0.08s ease-in;
563 border-bottom-right-radius: 3px;
567 text-stroke: 2px #fff;
568 background: rgba(255,255,255,.9);
570 input[type="radio"] {
575 &.active { border-color: darken($green, 10%); }
578 &.active { border-color: darken($green, 20%); }
588 li.disabled { color: $darkgrey; }
598 text-decoration: none;
599 background-color: $lightblue;
601 border-right: 1px solid #fff;
605 border-right: 1px solid #fff;
606 border-radius: 4px 0 0 4px;
610 border-radius: 0 4px 4px 0;
614 background-color: $blue;
626 font-family: monospace;
648 top: $lineheight/2 !important;
650 margin-right: 0px !important;
651 margin-top: 0px !important;
655 .leaflet-popup-scrolled {
656 padding-right: $lineheight;
657 border-bottom: 0px !important;
658 border-top: 0px !important;
661 .leaflet-popup-content-wrapper {
662 border-radius: 4px !important;
665 /* Rules for attribution text under the main map shown on printouts */
675 .attribution_license,
676 .attribution_project {
680 .attribution_notice {
684 .donate-attr { color: darken($green, 10%) !important; }
686 /* Rules for the sidebar */
690 padding: $lineheight/2 $lineheight;
691 // background: $offwhite;
692 // border-bottom: 1px solid $grey;
711 margin: $lineheight auto;
722 /* Temporary label size override until we remove site-wide font customisation */
730 /* Stop bootstrap 5 from floating legends when they don't need to be */
735 /* Override the text colour for primary and secondary buttons, to match our
736 bootstrap 4 colours. Note this has accessibility issues, which is why
737 bootstrap 5 calculates black as the appropriate colour, and we should
738 reconsider our colours at some point with that in mind. */
741 @include button-variant($primary, $primary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
745 @include button-variant($secondary, $secondary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
748 .btn-outline-secondary {
749 @include button-outline-variant($secondary, $color-hover: $white, $active-color: $white);
752 /* Rules for the search and direction forms */
754 header .search_forms,
759 /* Rules for the map key which appears in the popout sidebar */
762 .mapkey-table-key img {
769 /* Rules for search sidebar */
771 #sidebar .search_results_entry {
774 &.selected { background: $list-highlight; }
777 .search_more .loader {
783 .search_results_error {
788 /* Rules for routing */
791 background-image: image-url('routing-sprite.png');
794 background-repeat: no-repeat;
796 @for $i from 0 through 25 {
797 div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
800 td.instruction, td.distance {
801 padding-top: $lineheight/5;
802 padding-bottom: $lineheight/5;
803 border-bottom: 1px solid $grey;
814 background: $list-highlight;
817 .routing_marker { width: 15px; cursor: move; }
819 /* Rules for entity history */
824 border-bottom: $keyline;
832 /* Rules for the history sidebar */
834 #sidebar .changesets {
836 &.selected { background: $list-highlight; }
837 /* color is derived from changeset bbox fillColor in history.js */
839 a.stretched-link > span, a:not(.stretched-link), [title] {
841 z-index: 2; /* needs to be higher than Bootstrap's stretched link ::after z-index */
853 .changeset_more .loader {
859 /* Rules for the browse sidebar */
863 padding-bottom: $spacer;
864 margin-bottom: $spacer;
865 border-bottom: 1px solid $grey;
868 word-wrap: break-word;
872 .browse-section:last-of-type {
877 background-color: $offwhite;
879 border-collapse: separate;
882 margin-bottom: $spacer;
885 border-bottom: 1px solid $grey;
888 tr:last-child th, tr:last-child td {
896 word-wrap: break-word;
897 white-space: pre-wrap;
902 background-color: $offwhite;
906 border-left: 1px solid $grey;
907 background-color: #fff;
910 .colour-preview-box {
915 border: 1px solid rgba(0, 0, 0, .1);
916 // add color via inline css on element: background-color: <tag value>;
920 .note-comments li, .changeset-comments li {
921 margin: $lineheight/2 0;
924 margin: 10px 6px 0 6px;
929 .subscribe-buttons input {
935 span.action-button:hover {
937 text-decoration: underline;
942 margin: 0 0 10px 10px;
955 background: $list-highlight;
962 /* Bootstrap buttons don't have any vertical margin, so
963 they touch when adjacent buttons wrap onto a new line
964 e.g. wide form buttons on a narrow sidebar */
968 margin-bottom: $spacer * 0.25;
972 /* Rules for export sidebar */
980 .export_area_inputs {
981 margin-bottom: $spacer;
989 background: $lightgrey;
991 #maxlat { margin-top: -1px; }
994 /* no-r2 */ margin-left: -1px;
998 /* no-r2 */ margin-right: -1px;
1000 #minlat { margin-bottom: -1px; }
1004 margin: $lineheight/4;
1008 padding-left: $lineheight/2;
1011 margin-bottom: 10px;
1016 /* Rules for edit pages */
1032 /* Rules for non-map content pages */
1035 background: $lightgrey;
1042 padding: $lineheight;
1045 /* Overrides for pages that use new layout conventions */
1047 .header-illustration {
1048 background-position: 0 0;
1049 background-repeat: no-repeat;
1057 background-image: image-url("sign-up-illustration.png");
1061 background-image: image-url("confirm-illustration.png");
1065 background-image: image-url("terms-illustration.png");
1073 background-image: image-url("sign-up-illustration-arm.png");
1076 pointer-events: none;
1080 [dir=rtl] .header-illustration {
1081 transform: scaleX(-1);
1084 #content.maximised {
1093 /* Rules for small maps in content areas */
1097 margin-bottom: $lineheight;
1100 @include media-breakpoint-up(md) {
1106 /* Rules for the user map */
1108 .content_map .leaflet-popup-content {
1109 margin: $lineheight/2;
1113 /* Rules for user popups on maps */
1119 margin-top: 0 0 0 60px;
1124 /* Rules for the user list */
1130 /* Rules for the diary list page */
1134 padding-top: $lineheight;
1135 padding-bottom: $lineheight/2;
1136 border-top: 1px solid $grey;
1139 background-color: #fee;
1143 /* Rules for the diary entry page */
1149 margin-bottom: $lineheight;
1155 border-top: 1px dashed $grey;
1156 padding-top: $lineheight/2;
1157 padding-bottom: $lineheight/2;
1159 margin-top: $lineheight/2;
1160 padding-top: $lineheight;
1161 border-top: 1px solid $grey;
1164 background-color: #fee;
1167 margin-bottom: $lineheight/2;
1176 /* Rules for the log in page */
1178 #login_auth_buttons {
1183 padding: $lineheight/4 $lineheight/2;
1187 /* Rules for the account confirmation page */
1191 padding: $lineheight;
1192 margin-bottom: $lineheight;
1197 list-style: inherit;
1201 list-style-type: lower-alpha;
1206 /* Rules for the account settings page */
1208 #accountForm .user_image {
1212 #accountForm #user_image {
1216 #accountForm ul.accountImage-options {
1229 display: inline !important;
1232 /* Rules for the oauth authorization page */
1234 .oauth-authorize ul {
1238 /* Rules for messages pages */
1241 button[type="submit"] {
1243 white-space: nowrap;
1247 background: $offwhite;
1251 background: #CBEEA7;
1259 .inbox-row .inbox-mark-read {
1264 margin-bottom: $lineheight;
1265 padding: $lineheight/4 0px 4px 0px;
1266 border-bottom: 1px solid $grey;
1273 .info-line .user_thumbnail_tiny {
1274 vertical-align: middle;
1278 white-space: nowrap;
1287 .inbox-row-unread .inbox-mark-unread {
1291 /* Rules for "flash" notice boxes shown at the top of the content area */
1295 background-color: #ff7070;
1299 background-color: #ffe0cc;
1303 background-color: #CBEEA7;
1307 /* Rules for highlighting fields with rails validation errors */
1310 display: inline-block;
1316 background-color: #ff7070;
1319 /* Rules for rails validation error boxes */
1323 border: 2px solid #ff7070;
1324 padding: 0 $lineheight/2;
1325 margin-bottom: $lineheight;
1326 background-color: #f0f0f0;
1329 margin: 0 -10px 10px -10px;
1330 padding: $lineheight/4 $lineheight/4 $lineheight/4 15px;
1333 background-color: #c00;
1341 padding: $lineheight/4;
1346 background-color: $lightgrey;
1348 .describe_location {
1357 background-color: $lightgrey;
1363 vertical-align: middle;
1368 /* Rules for user images */
1375 img.user_thumbnail {
1380 img.user_thumbnail_tiny {
1387 /* Rules for geo microformats */
1390 border-bottom: none;
1393 /* General styles for action lists / subnavs */
1396 nav.secondary-actions {
1401 flex-direction: row;
1409 border-left: 1px solid $grey;
1410 padding-left: $lineheight/2;
1411 margin-right: $lineheight/2;
1412 margin-bottom: $lineheight/8;
1417 div.secondary-actions {
1422 /* Create a single-line dl */
1426 display: inline-block;
1433 /* Rules for OpenID logo */
1436 vertical-align: text-bottom;
1440 /* Rules for rich text */
1445 background: $lightgrey;
1450 background: $lightgrey;
1452 white-space: pre-wrap;
1460 padding: $lineheight;
1461 background-color: $offwhite;
1468 border-left: $lineheight solid $offwhite;
1469 padding-left: $lineheight;
1475 /* Rules for the user notes list */
1479 background-color: $offwhite;
1483 /* Rules for the iD editor */
1490 /* Rules for the "Welcome" page */
1491 .site-welcome, .site-fixthemap {
1493 background-image: image-url("welcome-sprite.png");
1494 background-size: 500px 250px;
1499 padding-bottom: 20px;
1501 margin-bottom: 10px;
1513 /* no-r2 */ background-position: -50px 0;
1518 vertical-align: middle;
1522 /* no-r2 */ background-position: -100px 0;
1526 /* no-r2 */ background-position: -150px 0;
1530 /* no-r2 */ background-position: -200px 0;
1534 /* no-r2 */ background-position: -250px 0;
1538 /* no-r2 */ background-position: -300px 0;
1542 /* no-r2 */ background-position: -350px 0;
1546 background-color: #333;
1551 .site-about #content {
1552 background-color: $lightgrey;
1563 color: $vibrant-green;
1569 background-position: 0 50%;
1570 background-repeat: no-repeat;
1571 background-image: image-url('about/osm.png');
1572 background-size: cover;
1573 background-color: $vibrant-green;
1577 background: $vibrant-green;
1581 display: inline-block;
1591 vertical-align: middle;
1592 background: 40px 40px image-url('about/sprite.png') no-repeat;
1596 background-position: 0px 0px;
1600 background-position: 0px -40px;
1604 background-position: 0px -80px;
1608 background-position: 0px -120px;
1612 background-position: 0px -160px;
1616 background-position: -45px -160px;