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;
380 border-start-start-radius: 4px;
384 border-end-start-radius: 4px;
393 /* Rules for the sidebar and main map area */
413 width: $sidebarWidth;
432 .overlay-sidebar #sidebar {
469 width: $sidebarWidth;
485 .leaflet-marker-draggable {
500 border-bottom: 1px solid $grey;
506 border: 1px solid $grey;
508 border-top-color: $grey;
514 @include media-breakpoint-down(md) {
562 border: 2px solid #fff;
565 transition: border-color 0.08s ease-in;
572 border-bottom-right-radius: 3px;
576 text-stroke: 2px #fff;
577 background: rgba(255,255,255,.9);
579 input[type="radio"] {
584 &.active { border-color: darken($green, 10%); }
587 &.active { border-color: darken($green, 20%); }
597 li.disabled { color: $darkgrey; }
607 text-decoration: none;
608 background-color: $lightblue;
610 border-right: 1px solid #fff;
614 border-right: 1px solid #fff;
615 border-radius: 4px 0 0 4px;
619 border-radius: 0 4px 4px 0;
623 background-color: $blue;
635 font-family: monospace;
657 top: $lineheight/2 !important;
659 margin-right: 0px !important;
660 margin-top: 0px !important;
664 .leaflet-popup-scrolled {
665 padding-right: $lineheight;
666 border-bottom: 0px !important;
667 border-top: 0px !important;
670 .leaflet-popup-content-wrapper {
671 border-radius: 4px !important;
674 /* Rules for attribution text under the main map shown on printouts */
684 .attribution_license,
685 .attribution_project {
689 .attribution_notice {
693 .donate-attr { color: darken($green, 10%) !important; }
695 /* Rules for the sidebar */
699 padding: $lineheight/2 $lineheight;
700 // background: $offwhite;
701 // border-bottom: 1px solid $grey;
720 margin: $lineheight auto;
731 /* Temporary label size override until we remove site-wide font customisation */
739 /* Stop bootstrap 5 from floating legends when they don't need to be */
744 /* Override the text colour for primary and secondary buttons, to match our
745 bootstrap 4 colours. Note this has accessibility issues, which is why
746 bootstrap 5 calculates black as the appropriate colour, and we should
747 reconsider our colours at some point with that in mind. */
750 @include button-variant($primary, $primary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
754 @include button-variant($secondary, $secondary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
757 .btn-outline-secondary {
758 @include button-outline-variant($secondary, $color-hover: $white, $active-color: $white);
761 /* Rules for the search and direction forms */
763 header .search_forms,
768 /* Rules for the map key which appears in the popout sidebar */
771 .mapkey-table-key img {
778 /* Rules for search sidebar */
780 #sidebar .search_results_entry {
783 &.selected { background: $list-highlight; }
786 .search_more .loader {
792 .search_results_error {
797 /* Rules for routing */
800 background-image: image-url('routing-sprite.png');
803 background-repeat: no-repeat;
805 @for $i from 0 through 25 {
806 div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
809 td.instruction, td.distance {
810 padding-top: $lineheight/5;
811 padding-bottom: $lineheight/5;
812 border-bottom: 1px solid $grey;
823 background: $list-highlight;
826 .routing_marker { width: 15px; cursor: move; }
828 /* Rules for entity history */
833 border-bottom: $keyline;
841 /* Rules for the history sidebar */
843 #sidebar .changesets {
845 &.selected { background: $list-highlight; }
846 /* color is derived from changeset bbox fillColor in history.js */
848 a.stretched-link > span, a:not(.stretched-link), [title] {
850 z-index: 2; /* needs to be higher than Bootstrap's stretched link ::after z-index */
862 .changeset_more .loader {
868 /* Rules for the browse sidebar */
872 padding-bottom: $spacer;
873 margin-bottom: $spacer;
874 border-bottom: 1px solid $grey;
877 word-wrap: break-word;
881 .browse-section:last-of-type {
886 background-color: $offwhite;
888 border-collapse: separate;
891 margin-bottom: $spacer;
894 border-bottom: 1px solid $grey;
897 tr:last-child th, tr:last-child td {
905 word-wrap: break-word;
906 white-space: pre-wrap;
911 background-color: $offwhite;
915 border-left: 1px solid $grey;
916 background-color: #fff;
919 .colour-preview-box {
924 border: 1px solid rgba(0, 0, 0, .1);
925 // add color via inline css on element: background-color: <tag value>;
929 .note-comments li, .changeset-comments li {
930 margin: $lineheight/2 0;
933 margin: 10px 6px 0 6px;
938 .subscribe-buttons input {
944 span.action-button:hover {
946 text-decoration: underline;
951 margin: 0 0 10px 10px;
964 background: $list-highlight;
971 /* Bootstrap buttons don't have any vertical margin, so
972 they touch when adjacent buttons wrap onto a new line
973 e.g. wide form buttons on a narrow sidebar */
977 margin-bottom: $spacer * 0.25;
981 /* Rules for export sidebar */
989 .export_area_inputs {
990 margin-bottom: $spacer;
998 background: $lightgrey;
1000 #maxlat { margin-top: -1px; }
1003 /* no-r2 */ margin-left: -1px;
1007 /* no-r2 */ margin-right: -1px;
1009 #minlat { margin-bottom: -1px; }
1013 margin: $lineheight/4;
1017 padding-left: $lineheight/2;
1020 margin-bottom: 10px;
1025 /* Rules for edit pages */
1041 /* Rules for non-map content pages */
1044 background: $lightgrey;
1051 padding: $lineheight;
1054 /* Overrides for pages that use new layout conventions */
1056 .header-illustration {
1057 background-position: 0 0;
1058 background-repeat: no-repeat;
1066 background-image: image-url("sign-up-illustration.png");
1070 background-image: image-url("confirm-illustration.png");
1074 background-image: image-url("terms-illustration.png");
1082 background-image: image-url("sign-up-illustration-arm.png");
1085 pointer-events: none;
1089 [dir=rtl] .header-illustration {
1090 transform: scaleX(-1);
1093 #content.maximised {
1102 /* Rules for small maps in content areas */
1106 margin-bottom: $lineheight;
1109 @include media-breakpoint-up(md) {
1115 /* Rules for the user map */
1117 .content_map .leaflet-popup-content {
1118 margin: $lineheight/2;
1122 /* Rules for user popups on maps */
1128 margin-top: 0 0 0 60px;
1133 /* Rules for the user list */
1139 /* Rules for the diary list page */
1143 padding-top: $lineheight;
1144 padding-bottom: $lineheight/2;
1145 border-top: 1px solid $grey;
1148 background-color: #fee;
1152 /* Rules for the diary entry page */
1158 margin-bottom: $lineheight;
1164 border-top: 1px dashed $grey;
1165 padding-top: $lineheight/2;
1166 padding-bottom: $lineheight/2;
1168 margin-top: $lineheight/2;
1169 padding-top: $lineheight;
1170 border-top: 1px solid $grey;
1173 background-color: #fee;
1176 margin-bottom: $lineheight/2;
1185 /* Rules for the log in page */
1187 #login_auth_buttons {
1192 padding: $lineheight/4 $lineheight/2;
1196 /* Rules for the account confirmation page */
1200 padding: $lineheight;
1201 margin-bottom: $lineheight;
1206 list-style: inherit;
1210 list-style-type: lower-alpha;
1215 /* Rules for the account settings page */
1217 #accountForm .user_image {
1221 #accountForm #user_image {
1225 #accountForm ul.accountImage-options {
1238 display: inline !important;
1241 /* Rules for the oauth authorization page */
1243 .oauth-authorize ul {
1247 /* Rules for messages pages */
1250 button[type="submit"] {
1252 white-space: nowrap;
1256 background: $offwhite;
1260 background: #CBEEA7;
1268 .inbox-row .inbox-mark-read {
1273 margin-bottom: $lineheight;
1274 padding: $lineheight/4 0px 4px 0px;
1275 border-bottom: 1px solid $grey;
1282 .info-line .user_thumbnail_tiny {
1283 vertical-align: middle;
1287 white-space: nowrap;
1296 .inbox-row-unread .inbox-mark-unread {
1300 /* Rules for "flash" notice boxes shown at the top of the content area */
1304 background-color: #ff7070;
1308 background-color: #ffe0cc;
1312 background-color: #CBEEA7;
1316 /* Rules for highlighting fields with rails validation errors */
1319 display: inline-block;
1325 background-color: #ff7070;
1328 /* Rules for rails validation error boxes */
1332 border: 2px solid #ff7070;
1333 padding: 0 $lineheight/2;
1334 margin-bottom: $lineheight;
1335 background-color: #f0f0f0;
1338 margin: 0 -10px 10px -10px;
1339 padding: $lineheight/4 $lineheight/4 $lineheight/4 15px;
1342 background-color: #c00;
1350 padding: $lineheight/4;
1355 background-color: $lightgrey;
1357 .describe_location {
1366 background-color: $lightgrey;
1372 vertical-align: middle;
1377 /* Rules for user images */
1384 img.user_thumbnail {
1389 img.user_thumbnail_tiny {
1396 /* Rules for geo microformats */
1399 border-bottom: none;
1402 /* General styles for action lists / subnavs */
1405 nav.secondary-actions {
1410 flex-direction: row;
1418 border-left: 1px solid $grey;
1419 padding-left: $lineheight/2;
1420 margin-right: $lineheight/2;
1421 margin-bottom: $lineheight/8;
1426 div.secondary-actions {
1431 /* Create a single-line dl */
1435 display: inline-block;
1442 /* Rules for OpenID logo */
1445 vertical-align: text-bottom;
1449 /* Rules for rich text */
1454 background: $lightgrey;
1459 background: $lightgrey;
1461 white-space: pre-wrap;
1469 padding: $lineheight;
1470 background-color: $offwhite;
1477 border-left: $lineheight solid $offwhite;
1478 padding-left: $lineheight;
1484 /* Rules for the user notes list */
1488 background-color: $offwhite;
1492 /* Rules for the iD editor */
1499 /* Rules for the "Welcome" page */
1500 .site-welcome, .site-fixthemap {
1502 background-image: image-url("welcome-sprite.png");
1503 background-size: 500px 250px;
1508 padding-bottom: 20px;
1510 margin-bottom: 10px;
1522 /* no-r2 */ background-position: -50px 0;
1527 vertical-align: middle;
1531 /* no-r2 */ background-position: -100px 0;
1535 /* no-r2 */ background-position: -150px 0;
1539 /* no-r2 */ background-position: -200px 0;
1543 /* no-r2 */ background-position: -250px 0;
1547 /* no-r2 */ background-position: -300px 0;
1551 /* no-r2 */ background-position: -350px 0;
1555 background-color: #333;
1560 .site-about #content {
1561 background-color: $lightgrey;
1572 color: $vibrant-green;
1578 background-position: 0 50%;
1579 background-repeat: no-repeat;
1580 background-image: image-url('about/osm.png');
1581 background-size: cover;
1582 background-color: $vibrant-green;
1586 background: $vibrant-green;
1590 display: inline-block;
1600 vertical-align: middle;
1601 background: 40px 40px image-url('about/sprite.png') no-repeat;
1605 background-position: 0px 0px;
1609 background-position: 0px -40px;
1613 background-position: 0px -80px;
1617 background-position: 0px -120px;
1621 background-position: 0px -160px;
1625 background-position: -45px -160px;