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);
361 border-radius: 4px 0 0 4px;
367 background-color: black;
372 background-color: #333;
373 background-color: rgba(0,0,0,.5);
378 background-color: $vibrant-green;
386 .leaflet-control .zoomin,
387 .control-layers .control-button {
389 border-radius: 4px 0 0 0;
392 .leaflet-control .zoomout,
393 .control-key .control-button {
398 .control-locate .control-button,
399 .control-share .control-button {
400 border-radius: 0 0 0 4px;
403 /* Rules for the sidebar and main map area */
423 width: $sidebarWidth;
442 .overlay-sidebar #sidebar {
479 width: $sidebarWidth;
495 .leaflet-marker-draggable {
510 border-bottom: 1px solid $grey;
516 border: 1px solid $grey;
518 border-top-color: $grey;
524 @include media-breakpoint-down(md) {
572 border: 2px solid #fff;
575 transition: border-color 0.08s ease-in;
582 border-bottom-right-radius: 3px;
586 text-stroke: 2px #fff;
587 background: rgba(255,255,255,.9);
589 input[type="radio"] {
594 &.active { border-color: darken($green, 10%); }
597 &.active { border-color: darken($green, 20%); }
607 li.disabled { color: $darkgrey; }
617 text-decoration: none;
618 background-color: $lightblue;
620 border-right: 1px solid #fff;
624 border-right: 1px solid #fff;
625 border-radius: 4px 0 0 4px;
629 border-radius: 0 4px 4px 0;
633 background-color: $blue;
645 font-family: monospace;
667 top: $lineheight/2 !important;
669 margin-right: 0px !important;
670 margin-top: 0px !important;
674 .leaflet-popup-scrolled {
675 padding-right: $lineheight;
676 border-bottom: 0px !important;
677 border-top: 0px !important;
680 .leaflet-popup-content-wrapper {
681 border-radius: 4px !important;
684 /* Rules for attribution text under the main map shown on printouts */
694 .attribution_license,
695 .attribution_project {
699 .attribution_notice {
703 .donate-attr { color: darken($green, 10%) !important; }
705 /* Rules for the sidebar */
709 padding: $lineheight/2 $lineheight;
710 // background: $offwhite;
711 // border-bottom: 1px solid $grey;
730 margin: $lineheight auto;
741 /* Temporary label size override until we remove site-wide font customisation */
749 /* Stop bootstrap 5 from floating legends when they don't need to be */
754 /* Override the text colour for primary and secondary buttons, to match our
755 bootstrap 4 colours. Note this has accessibility issues, which is why
756 bootstrap 5 calculates black as the appropriate colour, and we should
757 reconsider our colours at some point with that in mind. */
760 @include button-variant($primary, $primary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
764 @include button-variant($secondary, $secondary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
767 .btn-outline-secondary {
768 @include button-outline-variant($secondary, $color-hover: $white, $active-color: $white);
771 /* Rules for the search and direction forms */
773 header .search_forms,
778 /* Rules for the map key which appears in the popout sidebar */
781 .mapkey-table-key img {
788 /* Rules for search sidebar */
790 #sidebar .search_results_entry {
793 &.selected { background: $list-highlight; }
796 .search_more .loader {
802 .search_results_error {
807 /* Rules for routing */
810 background-image: image-url('routing-sprite.png');
813 background-repeat: no-repeat;
815 @for $i from 0 through 25 {
816 div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
819 td.instruction, td.distance {
820 padding-top: $lineheight/5;
821 padding-bottom: $lineheight/5;
822 border-bottom: 1px solid $grey;
833 background: $list-highlight;
836 .routing_marker { width: 15px; cursor: move; }
838 /* Rules for entity history */
843 border-bottom: $keyline;
851 /* Rules for the history sidebar */
853 #sidebar .changesets {
855 &.selected { background: $list-highlight; }
856 /* color is derived from changeset bbox fillColor in history.js */
858 a.stretched-link > span, a:not(.stretched-link), [title] {
860 z-index: 2; /* needs to be higher than Bootstrap's stretched link ::after z-index */
872 .changeset_more .loader {
878 /* Rules for the browse sidebar */
882 padding-bottom: $spacer;
883 margin-bottom: $spacer;
884 border-bottom: 1px solid $grey;
887 word-wrap: break-word;
891 .browse-section:last-of-type {
896 background-color: $offwhite;
898 border-collapse: separate;
901 margin-bottom: $spacer;
904 border-bottom: 1px solid $grey;
907 tr:last-child th, tr:last-child td {
915 word-wrap: break-word;
916 white-space: pre-wrap;
921 background-color: $offwhite;
925 border-left: 1px solid $grey;
926 background-color: #fff;
929 .colour-preview-box {
934 border: 1px solid rgba(0, 0, 0, .1);
935 // add color via inline css on element: background-color: <tag value>;
939 .note-comments li, .changeset-comments li {
940 margin: $lineheight/2 0;
943 margin: 10px 6px 0 6px;
948 .subscribe-buttons input {
954 span.action-button:hover {
956 text-decoration: underline;
961 margin: 0 0 10px 10px;
974 background: $list-highlight;
981 /* Bootstrap buttons don't have any vertical margin, so
982 they touch when adjacent buttons wrap onto a new line
983 e.g. wide form buttons on a narrow sidebar */
987 margin-bottom: $spacer * 0.25;
991 /* Rules for export sidebar */
999 .export_area_inputs {
1000 margin-bottom: $spacer;
1001 input[type="text"] {
1008 background: $lightgrey;
1010 #maxlat { margin-top: -1px; }
1013 /* no-r2 */ margin-left: -1px;
1017 /* no-r2 */ margin-right: -1px;
1019 #minlat { margin-bottom: -1px; }
1023 margin: $lineheight/4;
1027 padding-left: $lineheight/2;
1030 margin-bottom: 10px;
1035 /* Rules for edit pages */
1051 /* Rules for non-map content pages */
1054 background: $lightgrey;
1061 padding: $lineheight;
1064 /* Overrides for pages that use new layout conventions */
1066 .header-illustration {
1067 background-position: 0 0;
1068 background-repeat: no-repeat;
1076 background-image: image-url("sign-up-illustration.png");
1080 background-image: image-url("confirm-illustration.png");
1084 background-image: image-url("terms-illustration.png");
1092 background-image: image-url("sign-up-illustration-arm.png");
1095 pointer-events: none;
1099 [dir=rtl] .header-illustration {
1100 transform: scaleX(-1);
1103 #content.maximised {
1112 /* Rules for small maps in content areas */
1116 margin-bottom: $lineheight;
1119 @include media-breakpoint-up(md) {
1125 /* Rules for the user map */
1127 .content_map .leaflet-popup-content {
1128 margin: $lineheight/2;
1132 /* Rules for user popups on maps */
1138 margin-top: 0 0 0 60px;
1143 /* Rules for the user list */
1149 /* Rules for the diary list page */
1153 padding-top: $lineheight;
1154 padding-bottom: $lineheight/2;
1155 border-top: 1px solid $grey;
1158 background-color: #fee;
1162 /* Rules for the diary entry page */
1168 margin-bottom: $lineheight;
1174 border-top: 1px dashed $grey;
1175 padding-top: $lineheight/2;
1176 padding-bottom: $lineheight/2;
1178 margin-top: $lineheight/2;
1179 padding-top: $lineheight;
1180 border-top: 1px solid $grey;
1183 background-color: #fee;
1186 margin-bottom: $lineheight/2;
1195 /* Rules for the log in page */
1197 #login_auth_buttons {
1202 padding: $lineheight/4 $lineheight/2;
1206 /* Rules for the account confirmation page */
1210 padding: $lineheight;
1211 margin-bottom: $lineheight;
1216 list-style: inherit;
1220 list-style-type: lower-alpha;
1225 /* Rules for the account settings page */
1227 #accountForm .user_image {
1231 #accountForm #user_image {
1235 #accountForm ul.accountImage-options {
1248 display: inline !important;
1251 /* Rules for the oauth settings page */
1253 .oauth_clients .buttons .oauth-edit {
1254 border-radius: 2px 0 0 2px;
1257 .oauth_clients .buttons .oauth-delete {
1258 border-radius: 0 2px 2px 0;
1261 /* Rules for the oauth authorization page */
1263 .oauth-authorize ul {
1267 /* Rules for messages pages */
1270 button[type="submit"] {
1272 white-space: nowrap;
1276 background: $offwhite;
1280 background: #CBEEA7;
1288 .inbox-row .inbox-mark-read {
1293 margin-bottom: $lineheight;
1294 padding: $lineheight/4 0px 4px 0px;
1295 border-bottom: 1px solid $grey;
1302 .info-line .user_thumbnail_tiny {
1303 vertical-align: middle;
1307 white-space: nowrap;
1316 .inbox-row-unread .inbox-mark-unread {
1320 /* Rules for "flash" notice boxes shown at the top of the content area */
1324 background-color: #ff7070;
1328 background-color: #ffe0cc;
1332 background-color: #CBEEA7;
1336 /* Rules for highlighting fields with rails validation errors */
1339 display: inline-block;
1345 background-color: #ff7070;
1348 /* Rules for rails validation error boxes */
1352 border: 2px solid #ff7070;
1353 padding: 0 $lineheight/2;
1354 margin-bottom: $lineheight;
1355 background-color: #f0f0f0;
1358 margin: 0 -10px 10px -10px;
1359 padding: $lineheight/4 $lineheight/4 $lineheight/4 15px;
1362 background-color: #c00;
1370 padding: $lineheight/4;
1375 background-color: $lightgrey;
1377 .describe_location {
1386 background-color: $lightgrey;
1392 vertical-align: middle;
1397 /* Rules for user images */
1404 img.user_thumbnail {
1409 img.user_thumbnail_tiny {
1416 /* Rules for geo microformats */
1419 border-bottom: none;
1422 /* General styles for action lists / subnavs / pager navs */
1425 nav.secondary-actions {
1430 flex-direction: row;
1436 display: inline-block;
1442 border-left: 1px solid $grey;
1443 padding-left: $lineheight/2;
1444 margin-right: $lineheight/2;
1445 margin-bottom: $lineheight/8;
1450 div.secondary-actions {
1457 input[type="submit"],
1458 input[type="button"],
1459 input[type="reset"],
1462 box-sizing: border-box;
1468 border-right:1px solid white;
1469 text-overflow: ellipsis;
1470 white-space: nowrap;
1474 .button:first-child,
1475 .button_to:first-child {
1476 border-radius:2px 0 0 2px;
1480 .button_to:last-child {
1481 border-radius:0 2px 2px 0;
1482 border-right-width: 0;
1486 .button_to:only-child,
1487 *[value="Hide"] + input:last-child,
1488 *[value="Hide"] + .button:last-child,
1489 *[value="Hide"] + .button_to:last-child {
1491 border-right-width: 0;
1493 /* if a 3-button set has a hidden middle button */
1494 *[value="Hide"] + input:nth-child(3),
1495 *[value="Hide"] + .button:nth-child(3),
1496 *[value="Hide"] + .button_to:nth-child(3) {
1497 border-radius:0 2px 2px 0;
1498 border-right-width: 0;
1500 /* if a 3-button set starts with a hidden button */
1501 *[value="Hide"] + input:nth-child(2):not(:last-child),
1502 *[value="Hide"] + .button:nth-child(2):not(:last-child),
1503 *[value="Hide"] + .button_to:nth-child(2):not(:last-child) {
1504 border-radius:2px 0 0 2px;
1505 border-right-width: 1px;
1509 /* Create a single-line dl */
1513 display: inline-block;
1520 /* Rules for OpenID logo */
1523 vertical-align: text-bottom;
1527 /* Rules for rich text */
1532 background: $lightgrey;
1537 background: $lightgrey;
1539 white-space: pre-wrap;
1547 padding: $lineheight;
1548 background-color: $offwhite;
1555 border-left: $lineheight solid $offwhite;
1556 padding-left: $lineheight;
1562 /* Rules for the user notes list */
1566 background-color: $offwhite;
1570 /* Rules for the iD editor */
1577 /* Rules for the "Welcome" page */
1578 .site-welcome, .site-fixthemap {
1580 background-image: image-url("welcome-sprite.png");
1581 background-size: 500px 250px;
1586 padding-bottom: 20px;
1588 margin-bottom: 10px;
1600 /* no-r2 */ background-position: -50px 0;
1605 vertical-align: middle;
1609 /* no-r2 */ background-position: -100px 0;
1613 /* no-r2 */ background-position: -150px 0;
1617 /* no-r2 */ background-position: -200px 0;
1621 /* no-r2 */ background-position: -250px 0;
1625 /* no-r2 */ background-position: -300px 0;
1629 /* no-r2 */ background-position: -350px 0;
1633 background-color: #333;
1638 .site-about #content {
1639 background-color: $lightgrey;
1640 background-position: 50% 50%;
1641 background-repeat: no-repeat;
1642 background-size: cover;
1643 background-attachment: fixed;
1654 color: $vibrant-green;
1660 background-position: 0 50%;
1661 background-repeat: no-repeat;
1662 background-image: image-url('about/osm.png');
1663 background-size: cover;
1664 background-color: $vibrant-green;
1668 background: $vibrant-green;
1672 display: inline-block;
1682 vertical-align: middle;
1683 background: 40px 40px image-url('about/sprite.png') no-repeat;
1687 background-position: 0px 0px;
1691 background-position: 0px -40px;
1695 background-position: 0px -80px;
1699 background-position: 0px -120px;
1703 background-position: 0px -160px;
1707 background-position: -45px -160px;