3 @import "rails_bootstrap_forms";
5 /* Styles common to large and small screens */
7 .fillL { background-color: white; }
9 /* Default rules for the body of every page */
12 font-family: 'Helvetica Neue',Arial,sans-serif;
13 font-size: $typeheight;
16 background-color: #fff;
32 #container { position: relative; }
35 vertical-align: middle;
36 margin-right: $lineheight/4;
39 [dir=rtl] { /* no-r2 */ text-align: right; }
41 [dir=ltr] { /* no-r2 */ text-align: left; }
46 display: inline-block;
50 background: transparent image-url("sprite.png") no-repeat 0 0;
51 background-image: image-url("sprite.svg");
56 .icon.search { /* no-r2 */ background-position: 0 0; }
57 .icon.donate { /* no-r2 */ background-position: -20px 0; }
58 .icon.zoomin { /* no-r2 */ background-position: -40px 0; }
59 .icon.zoomout { /* no-r2 */ background-position: -60px 0; }
60 .icon.geolocate { /* no-r2 */ background-position: -80px 0; }
61 .active .icon.geolocate { /* no-r2 */ background-position: -80px -20px; }
62 .icon.layers { /* no-r2 */ background-position: -100px 0; }
63 .icon.key { /* no-r2 */ background-position: -120px 0; }
64 .icon.share { /* no-r2 */ background-position: -140px 0; }
65 .icon.clipboard { /* no-r2 */ background-position: -160px 0; }
66 .icon.link { /* no-r2 */ background-position: -180px 0; }
67 .icon.close { /* no-r2 */ background-position: -200px 0; }
68 .close-wrap:hover .icon.close,
69 .icon.close:hover { /* no-r2 */ background-position: -200px -20px; }
70 .icon.check { /* no-r2 */ background-position: -220px 0; }
71 .icon.note { /* no-r2 */ background-position: -240px 0; }
72 .icon.note.grey { /* no-r2 */ background-position: -240px -20px; }
73 .icon.query { /* no-r2 */ background-position: -260px 0; }
79 text-decoration: none;
82 text-decoration: underline;
86 /* Utility for de-emphasizing content */
99 /* Rules for the header */
102 display: none !important;
104 background: image-url("menu-icon.png") no-repeat;
105 background-size: 30px 30px;
109 margin: 14px 10px 0 0;
114 height: $headerHeight;
119 h1, nav, nav > ul, nav > ul > li {
120 display: inline-block;
125 padding: $lineheight/2;
133 text-decoration: none;
140 vertical-align: middle;
166 .btn-outline-primary {
167 @include button-outline-variant($green, $white);
171 .btn-outline-primary {
176 border-top-color: $grey;
180 background-color: lighten($green, 30%);
185 // Small tweaks to the toggle to stop the primary colour showing through
186 // when the menu is shown
187 .show > .btn-outline-primary.dropdown-toggle {
188 background-color: $green;
189 border-color: $green;
192 box-shadow: 0 0 0 0.2rem fade-out($green, 0.5);
207 color: darken($darkgrey, 25%);
211 .btn-outline-secondary {
212 @include button-outline-variant($darkgrey);
217 .btn-outline-secondary {
218 @include button-outline-variant($darkgrey, $darkgrey, white, $darkgrey);
224 background-color: white;
228 &.show .btn-outline-secondary {
229 background-color: white;
236 img.user_thumbnail_tiny {
242 display: inline-block;
244 margin: 3px 0 3px 3px;
245 background-color: lighten($grey, 10%);
257 nav.primary, nav.secondary {
260 background-color: $green;
266 #compact-secondary-nav {
271 #compact-secondary-nav {
272 display: inline-block;
279 /* Utility for styling notification numbers */
282 padding: 2px $lineheight/4;
284 background: lighten($green, 30%);
290 /* Rules for the message shown in place of the map when javascript is disabled */
298 /* Rules for Leaflet maps */
300 .leaflet-control .control-button {
304 background-color: #333;
305 background-color: rgba(0,0,0,.6);
306 border-radius: 4px 0 0 4px;
311 background-color: black;
316 background-color: #333;
317 background-color: rgba(0,0,0,.5);
322 background-color: $vibrant-green;
330 .leaflet-control .zoomin,
331 .control-layers .control-button {
333 border-radius: 4px 0 0 0;
336 .leaflet-control .zoomout,
337 .control-key .control-button {
342 .control-locate .control-button,
343 .control-share .control-button {
344 border-radius: 0 0 0 4px;
347 /* Rules for the sidebar and main map area */
367 width: $sidebarWidth;
382 padding: $lineheight $lineheight $lineheight/2;
387 margin-top: $lineheight;
388 margin-bottom: $lineheight/2;
401 pointer-events: none;
426 .overlay-sidebar #sidebar {
463 width: $sidebarWidth;
479 .leaflet-marker-draggable {
494 border-bottom: 1px solid $grey;
504 border:1px solid $grey;
509 border: 1px solid $grey;
511 border-top-color: $grey;
535 border: 2px solid #fff;
538 transition: border-color 0.08s ease-in;
545 border-bottom-right-radius: 3px;
549 text-stroke: 2px #fff;
550 background: rgba(255,255,255,.9);
552 input[type="radio"] {
557 &.active { border-color: darken($green, 10%); }
560 &.active { border-color: darken($green, 20%); }
570 li.disabled { color: $darkgrey; }
580 text-decoration: none;
581 background-color: $lightblue;
583 border-right: 1px solid #fff;
587 border-right: 1px solid #fff;
588 border-radius: 4px 0 0 4px;
592 border-radius: 0 4px 4px 0;
596 background-color: $blue;
608 font-family: monospace;
630 top: $lineheight/2 !important;
632 margin-right: 0px !important;
633 margin-top: 0px !important;
637 .leaflet-popup-scrolled {
638 padding-right: $lineheight;
639 border-bottom: 0px !important;
640 border-top: 0px !important;
643 .leaflet-popup-content-wrapper {
644 border-radius: 4px !important;
647 /* Rules for attribution text under the main map shown on printouts */
657 .attribution_license,
658 .attribution_project {
662 .attribution_notice {
666 .donate-attr { color: darken($green, 10%) !important; }
668 /* Rules for the sidebar */
672 padding: $lineheight/2 $lineheight;
673 // background: $offwhite;
674 // border-bottom: 1px solid $grey;
694 margin: $lineheight auto;
705 /* Temporary label size override until we remove site-wide font customisation */
713 /* Rules for the search and direction forms */
715 header .search_forms,
720 /* Rules for the map key which appears in the popout sidebar */
723 .mapkey-table-key img {
730 /* Rules for search sidebar */
732 #sidebar .search_results_entry {
735 &.selected { background: $list-highlight; }
738 .search_more .loader {
744 .search_results_error {
749 /* Rules for routing */
751 #sidebar_content>table {
752 padding: 5px 20px 10px 15px;
754 border-collapse: separate;
759 background-image: image-url('routing-sprite.png');
762 background-repeat: no-repeat;
764 @for $i from 0 through 25 {
765 div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
769 padding: 0 $lineheight $lineheight/4;
772 td.instruction, td.distance {
773 padding-top: $lineheight/5;
774 padding-bottom: $lineheight/5;
775 border-bottom: 1px solid $grey;
786 background: $list-highlight;
788 .routing_engines, #route_from, #route_to { margin-left: 25px; }
789 .routing_marker { width: 15px; position: absolute; cursor: move; }
791 /* Rules for entity history */
796 border-bottom: $keyline;
804 /* Rules for the history sidebar */
806 #sidebar .changesets {
810 &.selected { background: $list-highlight; }
811 /* color is derived from changeset bbox fillColor in history.js */
823 .changeset_more .loader {
829 /* Rules for the browse sidebar */
833 padding: $lineheight/2 $lineheight;
834 border-bottom: 1px solid $grey;
838 word-wrap: break-word;
842 .browse-section:last-of-type {
849 border: 1px solid $lightgrey;
857 padding: 5px 0 5px 10px;
859 border: 1px solid $grey;
860 border-radius: 4px 4px 0 0;
861 background-color: $offwhite;
867 background-color: #FFF;
868 border: 1px solid $grey;
870 border-radius: 0 0 4px 4px;
875 background-color: $offwhite;
876 border: 1px solid $grey;
879 border-collapse: separate;
884 border-bottom: 1px solid $grey;
887 tr:last-child th, tr:last-child td {
895 word-wrap: break-word;
896 white-space: pre-wrap;
901 background-color: $offwhite;
905 border-left: 1px solid $grey;
906 background-color: #fff;
909 .colour-preview-box {
914 border: 1px solid rgba(0, 0, 0, .1);
915 // add color via inline css on element: background-color: <tag value>;
919 .note-comments li, .changeset-comments li {
920 margin: $lineheight/2 0;
923 margin: 10px 6px 0 6px;
934 margin: 18px 10px 10px;
938 .subscribe-buttons input {
944 span.action-button:hover {
946 text-decoration: underline;
951 margin: 0 0 10px 10px;
955 padding: $lineheight $lineheight $lineheight/2;
960 padding-bottom: $lineheight/2;
963 padding: 0 $lineheight;
973 background: $list-highlight;
982 margin-bottom: $lineheight/4;
986 /* Rules for export sidebar */
989 padding: $lineheight;
996 .export_area_inputs {
997 margin-bottom: $lineheight/2;
1005 background: $lightgrey;
1006 border: 1px solid $grey;
1009 #maxlat { margin-top: -1px; }
1012 /* no-r2 */ margin-left: -1px;
1016 /* no-r2 */ margin-right: -1px;
1018 #minlat { margin-bottom: -1px; }
1022 margin: $lineheight/4;
1026 padding-left: $lineheight/2;
1029 margin-bottom: 10px;
1034 /* Rules for the routing sidebar */
1043 /* Rules for edit pages */
1059 /* Rules for non-map content pages */
1062 background: $lightgrey;
1069 padding: $lineheight;
1072 /* Overrides for pages that use new layout conventions */
1078 .content-heading .content-inner {
1083 .header-illustration {
1084 background-position: 0 0;
1085 background-repeat: no-repeat;
1093 background-image: image-url("sign-up-illustration.png");
1097 background-image: image-url("confirm-illustration.png");
1101 background-image: image-url("terms-illustration.png");
1109 background-image: image-url("sign-up-illustration-arm.png");
1114 [dir=rtl] .header-illustration {
1115 transform: scaleX(-1);
1118 #content.maximised {
1127 /* Rules for small maps in content areas */
1131 border: 1px solid $grey;
1132 margin-bottom: $lineheight;
1135 @include media-breakpoint-up(md) {
1141 /* Rules for the user profile page */
1145 .userinformation-inner {
1154 .admin-user-info small {
1155 margin-bottom: $lineheight/2;
1157 margin-right: $lineheight;
1161 margin-top: $lineheight;
1165 .activity-details p {
1171 // Silly exception; remove when user page is redesigned.
1175 p#no_home_location {
1176 margin: $lineheight;
1179 margin-top: $lineheight/4;
1184 /* Rules for the user map */
1186 .content_map .leaflet-popup-content {
1187 margin: $lineheight/2;
1191 /* Rules for user popups on maps */
1197 margin-top: 0 0 0 60px;
1200 img.user_thumbnail {
1202 margin: 0 $lineheight/2 0 0;
1206 /* Rules for the user list */
1212 vertical-align: middle;
1221 #user_list_actions {
1223 margin-top: $lineheight/2;
1226 /* Rules for the diary list page */
1230 padding-top: $lineheight;
1231 padding-bottom: $lineheight/2;
1232 border-top: 1px solid $grey;
1235 margin-top: $lineheight/2;
1239 background-color: #fee;
1243 margin-bottom: $lineheight;
1247 margin-bottom: $lineheight/2;
1251 img.user_thumbnail {
1261 /* Rules for the diary entry page */
1266 border: 1px solid $grey;
1268 margin-bottom: $lineheight;
1274 border-top: 1px dashed $grey;
1275 padding-top: $lineheight/2;
1276 padding-bottom: $lineheight/2;
1278 margin-top: $lineheight/2;
1279 padding-top: $lineheight;
1280 border-top: 1px solid $grey;
1283 background-color: #fee;
1286 margin-bottom: $lineheight/2;
1295 .diary_entries-show img.user_thumbnail {
1299 /* Rules for the log in page */
1301 #login_auth_buttons {
1306 padding: $lineheight/4 $lineheight/2;
1310 /* Rules for the account confirmation page */
1314 border: 1px solid $grey;
1315 padding: $lineheight;
1316 margin-bottom: $lineheight;
1321 list-style: inherit;
1325 list-style-type: lower-alpha;
1330 background: $lightblue;
1332 background: darken($lightblue, $hovercolor);
1337 /* Rules for the account settings page */
1339 #accountForm .user_image {
1343 #accountForm #user_image {
1347 #accountForm ul.accountImage-options {
1360 display: inline !important;
1363 /* Rules for the oauth settings page */
1365 .oauth_clients .buttons .oauth-edit {
1366 border-radius: 2px 0 0 2px;
1369 .oauth_clients .buttons .oauth-delete {
1370 border-radius: 0 2px 2px 0;
1373 /* Rules for the oauth authorization page */
1375 .oauth-authorize ul {
1379 /* Rules for messages pages */
1382 input[type="submit"] {
1387 background: $offwhite;
1391 background: #CBEEA7;
1399 .inbox-row .inbox-mark-read {
1404 margin-bottom: $lineheight;
1405 padding: $lineheight/4 0px 4px 0px;
1406 border-bottom: 1px solid $grey;
1413 .info-line .user_thumbnail_tiny {
1414 vertical-align: middle;
1418 white-space: nowrap;
1427 .inbox-row-unread .inbox-mark-unread {
1431 /* Rules for "flash" notice boxes shown at the top of the content area */
1434 padding: $lineheight;
1437 background-color: #ff7070;
1441 background-color: #ffe0cc;
1445 background-color: #CBEEA7;
1449 display: inline-block;
1450 margin-left: $lineheight / 2;
1451 vertical-align: middle;
1454 margin-top: $lineheight * 0.5;
1455 margin-bottom: $lineheight * 0.5;
1468 /* Rules for highlighting fields with rails validation errors */
1471 display: inline-block;
1477 background-color: #ff7070;
1480 /* Rules for rails validation error boxes */
1484 border: 2px solid #ff7070;
1485 padding: 0 $lineheight/2;
1486 margin-bottom: $lineheight;
1487 background-color: #f0f0f0;
1490 margin: 0 -10px 10px -10px;
1491 padding: $lineheight/4 $lineheight/4 $lineheight/4 15px;
1494 background-color: #c00;
1502 padding: $lineheight/4;
1506 /* Rules for forms */
1510 margin-bottom: $lineheight;
1512 label.standard-label {
1514 margin-bottom: $lineheight/4;
1515 font-size: $typeheight;
1519 label.standard-label.secondary {
1520 display: inline-block;
1521 font-weight: normal;
1524 font-weight: normal;
1531 margin-top: $lineheight;
1532 padding-top: $lineheight;
1533 border-top: 1px solid $lightgrey;
1535 .horizontal-list .standard-form-row {
1537 padding-right: 10px;
1539 .standard-form-row {
1540 margin-bottom: $lineheight/2;
1547 list-style-type: none;
1549 input[type="checkbox"],
1550 input[type="radio"] {
1555 #remember_me_openid {
1563 input[type="checkbox"],
1564 input[type="radio"] {
1569 input[type="email"],
1571 input[type="password"],
1574 background-color: #fff;
1575 border: 1px solid $grey;
1581 &.field_with_errors {
1582 border: 2px solid #ff7070;
1594 /* Utility for general button styles */
1596 input[type="button"],
1597 input[type="submit"],
1598 input[type="reset"],
1602 display: inline-block;
1603 padding: $lineheight/4 $lineheight/2;
1604 min-height: 20px + $lineheight/2;
1606 margin: 0 0 $lineheight/2 0;
1612 background: darken($blue, $hovercolor);
1613 text-decoration: none;
1616 background: $lightblue;
1618 background: darken($lightblue, $hovercolor);
1622 background: $lightgrey;
1624 background: $lightgrey;
1632 input[type="button"],
1633 input[type="submit"],
1634 input[type="reset"] {
1635 line-height: normal;
1645 padding: $lineheight/2;
1646 background-color: $lightgrey;
1651 border-radius: 2px 0 0 2px;
1657 transition: 300ms linear;
1660 input[type=text].overflow {
1662 border-radius: 3px 0px 0px 3px;
1667 box-shadow: 0px 0px 7px $vibrant-green;
1670 input[type=submit].float {
1674 border-radius: 0 2px 2px 0;
1678 background-color: rgba($red, 0.4);
1682 /* this next line is to polyfill the vertical alignment of text within a select element,
1683 * which is different between firefox and chrome. */
1693 .describe_location {
1716 padding-right: 25px;
1720 select.routing_engines {
1722 margin: 0px 0px 5px 25px;
1737 margin: 0px 0px 5px 0px;
1744 vertical-align: middle;
1748 a.reverse_directions {
1750 margin: 0px 0px 5px 25px;
1755 /* Rules for user images */
1760 border: 1px solid $grey;
1761 margin-bottom: $lineheight;
1763 margin-right: $lineheight;
1766 img.user_thumbnail {
1769 border: 1px solid $grey;
1770 margin-right: $lineheight;
1773 img.user_thumbnail_tiny {
1778 border: 1px solid $grey;
1781 /* Rules for geo microformats */
1784 border-bottom: none;
1787 /* General styles for action lists / subnavs / pager navs */
1789 ul.secondary-actions {
1795 display: inline-block;
1802 border-left: 1px solid $grey;
1803 padding-left: $lineheight/2;
1804 margin-right: $lineheight/2;
1815 div.secondary-actions {
1820 /* Utility for managing inner content areas */
1822 .inner22 { padding: $lineheight;}
1824 .inner12 { padding: $lineheight/2 $lineheight;}
1826 .inner11 { padding: $lineheight/2;}
1828 .inner20 { padding: $lineheight 0;}
1830 .inner02 { padding: 0 $lineheight;}
1834 input[type="submit"],
1835 input[type="button"],
1836 input[type="reset"],
1839 box-sizing: border-box;
1845 border-right:1px solid white;
1846 text-overflow: ellipsis;
1847 white-space: nowrap;
1851 .button:first-child,
1852 .button_to:first-child {
1853 border-radius:2px 0 0 2px;
1857 .button_to:last-child {
1858 border-radius:0 2px 2px 0;
1859 border-right-width: 0;
1863 .button_to:only-child,
1864 *[value="Hide"] + input:last-child,
1865 *[value="Hide"] + .button:last-child,
1866 *[value="Hide"] + .button_to:last-child {
1868 border-right-width: 0;
1870 /* if a 3-button set has a hidden middle button */
1871 *[value="Hide"] + input:nth-child(3),
1872 *[value="Hide"] + .button:nth-child(3),
1873 *[value="Hide"] + .button_to:nth-child(3) {
1874 border-radius:0 2px 2px 0;
1875 border-right-width: 0;
1877 /* if a 3-button set starts with a hidden button */
1878 *[value="Hide"] + input:nth-child(2):not(:last-child),
1879 *[value="Hide"] + .button:nth-child(2):not(:last-child),
1880 *[value="Hide"] + .button_to:nth-child(2):not(:last-child) {
1881 border-radius:2px 0 0 2px;
1882 border-right-width: 1px;
1886 /* Customise the background colour of striped tables */
1888 .table-striped > tbody > tr:nth-child(2n+1) > td,
1889 .table-striped > tbody > tr:nth-child(2n+1) > th {
1890 background-color: $offwhite;
1893 /* Rules for OpenID logo */
1896 vertical-align: text-bottom;
1900 /* Rules for rich text */
1906 background: $lightgrey;
1912 background: $lightgrey;
1914 white-space: pre-wrap;
1922 padding: $lineheight;
1923 background-color: $offwhite;
1930 border-left: $lineheight solid $offwhite;
1931 padding-left: $lineheight;
1937 .diary_post .richtext {
1938 margin-top: $lineheight;
1941 .comments .richtext {
1946 /* Rules for rich text editors */
1949 input.richtext_title[type="text"] {
1951 width: calc(100% - 235px);
1953 @media only screen and (max-width:768px) {
1958 .richtext_container {
1959 margin-bottom: $lineheight;
1963 width: calc(100% - 235px);
1964 display: inline-block;
1965 vertical-align: top;
1967 @media only screen and (max-width:768px) {
1972 display: inline-block;
1973 padding: $lineheight;
1974 background-color: $offwhite;
1978 background-image: image-url("loading.gif");
1979 background-repeat: no-repeat;
1980 background-position: center;
1990 display: inline-block;
1991 vertical-align: top;
1993 background-color: $offwhite;
1994 padding: $lineheight/2;
2002 border-bottom: 1px solid $grey;
2003 margin-bottom: $lineheight/4;
2004 padding-bottom: $lineheight/4;
2007 li h4, li span, li p {
2008 display: inline-block;
2009 vertical-align: top;
2020 margin-left: $lineheight/2;
2021 margin-bottom: $lineheight/4;
2022 white-space: nowrap;
2028 /* Rules for the user notes list */
2032 background-color: $offwhite;
2036 /* Rules for the iD editor */
2043 /* Rules for the "Welcome" page */
2044 .site-welcome, .site-fixthemap {
2054 background-image: image-url("welcome-sprite.png");
2055 background-size: 500px 250px;
2061 padding-bottom: 20px;
2063 margin-bottom: 10px;
2075 /* no-r2 */ background-position: -50px 0;
2080 vertical-align: middle;
2084 /* no-r2 */ background-position: -100px 0;
2088 /* no-r2 */ background-position: -150px 0;
2092 /* no-r2 */ background-position: -200px 0;
2096 /* no-r2 */ background-position: -250px 0;
2100 /* no-r2 */ background-position: -300px 0;
2104 /* no-r2 */ background-position: -350px 0;
2113 text-decoration: none;
2117 background-color: #333;
2122 .site-about #content {
2123 background-color: $lightgrey;
2124 background-position: 50% 50%;
2125 background-repeat: no-repeat;
2126 background-size: cover;
2127 background-attachment: fixed;
2144 padding: 170px 40px 20px;
2146 background: rgba(0, 0, 0, .8);
2156 color: $vibrant-green;
2160 @include media-breakpoint-up(sm) {
2172 background-position: 0 50%;
2173 background-repeat: no-repeat;
2174 background-image: image-url('about/osm.png');
2175 background-size: cover;
2176 background-color: $vibrant-green;
2186 padding: 20px 20px 20px 40px;
2187 font: 500 20px/24px Helvetica, Arial, sans-serif;
2188 white-space: nowrap;
2190 background: $vibrant-green;
2194 display: inline-block;
2204 vertical-align: middle;
2205 background: 40px 40px image-url('about/sprite.png') no-repeat;
2209 background-position: 0px 0px;
2213 background-position: 0px -40px;
2217 background-position: 0px -80px;
2221 background-position: 0px -120px;
2225 background-position: 0px -160px;
2229 background-position: -45px -160px;
2236 @media only screen and (max-width:960px) {
2237 .header-illustration.new-user-arm {