@import "parameters"; @import "bootstrap"; @import "rails_bootstrap_forms"; /* Styles common to large and small screens */ /* Default rules for the body of every page */ body { font-size: $typeheight; } p > img { width: auto; max-width: 100%; } small, aside { font-size: 12px; } #container { position: relative; } .small_icon { vertical-align: middle; margin-right: $lineheight/4; } [dir=rtl] { /* no-r2 */ text-align: right; } [dir=ltr] { /* no-r2 */ text-align: left; } /* Rules for icons */ .icon { display: inline-block; vertical-align: top; width: 20px; height: 20px; background: transparent image-url("sprite.png") no-repeat 0 0; background-image: image-url("sprite.svg"); text-indent: -9999px; overflow: hidden; } .icon.search { /* no-r2 */ background-position: 0 0; } .icon.donate { /* no-r2 */ background-position: -20px 0; } .icon.zoomin { /* no-r2 */ background-position: -40px 0; } .icon.zoomout { /* no-r2 */ background-position: -60px 0; } .icon.geolocate { /* no-r2 */ background-position: -80px 0; } .active .icon.geolocate { /* no-r2 */ background-position: -80px -20px; } .icon.layers { /* no-r2 */ background-position: -100px 0; } .icon.key { /* no-r2 */ background-position: -120px 0; } .icon.share { /* no-r2 */ background-position: -140px 0; } .icon.clipboard { /* no-r2 */ background-position: -160px 0; } .icon.link { /* no-r2 */ background-position: -180px 0; } .icon.close { /* no-r2 */ background-position: -200px 0; } .close-wrap:hover .icon.close, .icon.close:hover { /* no-r2 */ background-position: -200px -20px; } .icon.check { /* no-r2 */ background-position: -220px 0; } .icon.note { /* no-r2 */ background-position: -240px 0; } .icon.note.grey { /* no-r2 */ background-position: -240px -20px; } .icon.query { /* no-r2 */ background-position: -260px 0; } /* Utility for de-emphasizing content */ .text-muted a { color: $blue; } /* Rules for borders */ /* These add additional colours to those provided by bootstrap */ .border-grey { border-color: $grey !important; } .border-lightgrey { border-color: $lightgrey !important; } /* Rules for the header */ #menu-icon { display: none !important; float: right; background: image-url("menu-icon.png") no-repeat; background-size: 30px 30px; display: block; width: 30px; height: 30px; margin: 14px 10px 0 0; opacity: 0.6; } header { height: $headerHeight; position: relative; z-index: 1001; font-size: 14px; h1, nav, nav > ul, nav > ul > li { display: inline-block; } > * { height: 100%; padding: $lineheight/2; } h1, nav.primary { float: left; } a, a:hover { text-decoration: none; } img.logo { width: 30px; height: 30px; margin-top: -2px; vertical-align: middle; } h1 { font-size: 18px; font-weight: 600; line-height: 1.2; margin: 0; padding-top: 15px; a { color: #000; } a:hover { color: #000; } } .btn { font-size: 14px; } } nav.primary { .btn-outline-primary { @include button-outline-variant($green, $white); } .disabled { .btn-outline-primary { color: $grey; cursor: default; .caret { border-top-color: $grey; } &:hover { background-color: lighten($green, 30%); } } } // Small tweaks to the toggle to stop the primary colour showing through // when the menu is shown .show > .btn-outline-primary.dropdown-toggle { background-color: $green; border-color: $green; &:focus { box-shadow: 0 0 0 0.2rem fade-out($green, 0.5); } } } nav.secondary { position: absolute; right: 0; .nav-link { padding: 0.2rem; color: $darkgrey; } > ul li.current a { color: darken($darkgrey, 25%); } .login-menu { .btn-outline-secondary { @include button-outline-variant($darkgrey, $white, null, null, $white); } } .user-menu { .btn-outline-secondary { @include button-outline-variant($darkgrey, $darkgrey, white, $darkgrey); border-color: $grey; &:hover { border-color: $grey; } &:focus { background-color: white; box-shadow: none; } } &.show .btn-outline-secondary { background-color: white; &:focus { box-shadow: none; } } } #inboxanchor { display: inline-block; height: 25px; margin: 3px 0 3px 3px; background-color: lighten($grey, 10%); line-height: 20px; border-radius: 3; } .dropdown-menu { .count-number { font-size: 14px; } } } nav.primary, nav.secondary { .dropdown-item { &:hover, &:active { background-color: $green; color: white; } } } #compact-secondary-nav { display: none; } body.compact-nav { #compact-secondary-nav { display: inline-block; } .compact-hide { display: none; } } /* Utility for styling notification numbers */ .count-number { padding: 2px $lineheight/4; border-radius: 2px; background: lighten($green, 30%); margin: 0 2px; font-size: 11px; color: #333; } /* Rules for the message shown in place of the map when javascript is disabled */ #noscript { z-index: 20000000; margin-left: 400px; margin-top: 50px; } /* Rules for Leaflet maps */ .leaflet-control .control-button { display: block; height: 40px; width: 40px; background-color: #333; background-color: rgba(0,0,0,.6); border-radius: 4px 0 0 4px; margin-bottom: 10px; outline: none; &:hover { background-color: black; } &.disabled, &.leaflet-disabled { background-color: #333; background-color: rgba(0,0,0,.5); cursor: default; } &.active { background-color: $vibrant-green; } .icon { margin: 10px; } } .leaflet-control .zoomin, .control-layers .control-button { margin-bottom: 0px; border-radius: 4px 0 0 0; } .leaflet-control .zoomout, .control-key .control-button { margin-bottom: 0; border-radius: 0; } .control-locate .control-button, .control-share .control-button { border-radius: 0 0 0 4px; } /* Rules for the sidebar and main map area */ .map-layout { #content { overflow: hidden; position: absolute; top: $headerHeight; bottom: 0; width: 100%; } #sidebar, #map { position: relative; height: 100%; overflow-x: hidden; overflow-y: auto; } #sidebar { float: left; width: $sidebarWidth; background: #fff; #sidebar_loader { display: none; } #sidebar_content { padding: $spacer; } > div { position: relative; float: left; clear: both; width: 100%; } h2 { font-size: 1.5rem; } h3, h4 { font-size: 1.25rem; } .close-wrap { cursor: pointer; position: absolute; top: 0; right: 0; width: 60px; height: 60px; .icon.close { pointer-events: none; position: absolute; right: 20px; top: 20px; } } } .overlay-sidebar #sidebar { position: absolute; z-index: 1000; height: auto; overflow: hidden; #banner { display: block; } .welcome { display: none; &.visible { display: block; } } #sidebar_content { display: none; } } .welcome { display: none; p { font-size: 110%; font-weight: 300; } } #banner { display: none; img { display: block; width: $sidebarWidth; } } #map { height: 100%; overflow: hidden; &.query-active { cursor: help; } &.query-disabled { cursor: not-allowed; } .leaflet-marker-draggable { cursor: move; } } #map-ui { display: none; position: relative; float: right; width: 250px; height: 100%; background: white; overflow: auto; .section { border-bottom: 1px solid $grey; padding: 10px 20px; } a.close-button { float: right; padding:5px; font-size:20px; line-height:10px; color:#222; border:1px solid $grey; } .tooltip { opacity: 1; border: 1px solid $grey; .tooltip-arrow { border-top-color: $grey; } } } } .layers-ui, .share-ui { li:last-child { margin-bottom: 0; } } .layers-ui { .base-layers { .leaflet-container { width: 100%; height: 50px; cursor: pointer; } li { overflow: hidden; border-radius: 3px; border: 2px solid #fff; margin-bottom: 8px; position: relative; transition: border-color 0.08s ease-in; label { position: absolute; top: 0; left: 0; padding: 2px 6px; border-bottom-right-radius: 3px; cursor: pointer; font-weight: 600; font-size: 16px; text-stroke: 2px #fff; background: rgba(255,255,255,.9); z-index: 1000; input[type="radio"] { display: none; } } &.active { border-color: darken($green, 10%); } &:hover { border-color: $grey; &.active { border-color: darken($green, 20%); } } } } .overlay-layers { p { font-size: 13px; margin-bottom: 8px; } li.disabled { color: $darkgrey; } } } .share-ui { .share-tabs { margin-bottom: 10px; a { color: #fff; text-decoration: none; background-color: $lightblue; padding: 5px 10px; border-right: 1px solid #fff; } a:first-child { border-right: 1px solid #fff; border-radius: 4px 0 0 4px; } a:last-child { border-radius: 0 4px 4px 0; } a.active { background-color: $blue; } } .share-tab { display: none; } .share-link { input[type=text], textarea { width: 100%; font-family: monospace; font-size: small; line-height: 1.3; } } .share-image { label { margin-right: 10px; } } #embed_html { resize: vertical; } #mapnik_scale { width: 100px; } } .leaflet-top { top: $lineheight/2 !important; .leaflet-control { margin-right: 0px !important; margin-top: 0px !important; } } .leaflet-popup-scrolled { padding-right: $lineheight; border-bottom: 0px !important; border-top: 0px !important; } .leaflet-popup-content-wrapper { border-radius: 4px !important; } /* Rules for attribution text under the main map shown on printouts */ #attribution { display: none; table { width: 100% } } .attribution_license, .attribution_project { text-align: left; } .attribution_notice { text-align: center; } .donate-attr { color: darken($green, 10%) !important; } /* Rules for the sidebar */ .sidebar_heading { position: relative; padding: $lineheight/2 $lineheight; // background: $offwhite; // border-bottom: 1px solid $grey; > .close { float: right; margin-top: 2px; cursor: pointer; } } #browse_status { input { display: block; margin-left: auto; margin-right: auto; } > div { padding: $spacer; } } #sidebar { #sidebar_loader, .search_more { width: 100%; margin: $lineheight auto; } .loader { text-align: center; margin: auto; width: 40px; display: block; } } /* Temporary label size override until we remove site-wide font customisation */ form { label { font-size: 16px; } } /* Stop bootstrap 5 from floating legends when they don't need to be */ legend { float: none; } /* Override the text colour for primary and secondary buttons, to match our bootstrap 4 colours. Note this has accessibility issues, which is why bootstrap 5 calculates black as the appropriate colour, and we should reconsider our colours at some point with that in mind. */ .btn-primary { @include button-variant($primary, $primary, $white, null, null, $white, null, null, $white, null, null, $white); } .btn-secondary { @include button-variant($secondary, $secondary, $white, null, null, $white, null, null, $white, null, null, $white); } .btn-outline-secondary { @include button-outline-variant($secondary, $white, null, null, $white); } /* Rules for the search and direction forms */ header .search_forms, .directions_form { display: none; } /* Rules for the map key which appears in the popout sidebar */ #mapkey { .mapkey-table-key img { display: block; margin-left: auto; margin-right: auto; } } /* Rules for search sidebar */ #sidebar .search_results_entry { ul li { cursor: pointer; &.selected { background: $list-highlight; } } .search_more .loader { display: none; width: 100%; } } .search_results_error { color: #f00; padding: 10px 20px; } /* Rules for routing */ div.direction { background-image: image-url('routing-sprite.png'); width: 20px; height: 20px; background-repeat: no-repeat; } @for $i from 0 through 25 { div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; } } td.instruction, td.distance { padding-top: $lineheight/5; padding-bottom: $lineheight/5; border-bottom: 1px solid $grey; } td.distance { color: $darkgrey; text-align: right; font-size: x-small; } tr.turn { cursor: pointer; } tr.turn:hover { background: $list-highlight; } .routing_marker { width: 15px; cursor: move; } /* Rules for entity history */ #sidebar_content { .browse_details { position: relative; border-bottom: $keyline; } } .browse_status { display: none; } /* Rules for the history sidebar */ #sidebar .changesets { li { cursor: pointer; &.selected { background: $list-highlight; } /* color is derived from changeset bbox fillColor in history.js */ } .comments { color: $darkgrey; } .comments-0 { opacity: 0.5; } .changeset_more .loader { display: none; width: 100%; } } /* Rules for the browse sidebar */ #sidebar_content { .browse-section { padding-bottom: $spacer; margin-bottom: $spacer; border-bottom: 1px solid $grey; h4:first-child { word-wrap: break-word; } } .browse-section:last-of-type { border-bottom: none; } .browse-tag-list { background-color: $offwhite; table-layout: fixed; border-collapse: separate; border-spacing: 0; width: 100%; margin-bottom: $spacer; th, td { border-bottom: 1px solid $grey; } tr:last-child th, tr:last-child td { border-bottom: 0; } .browse-tag-k, .browse-tag-v { width: 50%; padding: 6px 10px; word-wrap: break-word; white-space: pre-wrap; } .browse-tag-k { font-weight: 500; background-color: $offwhite; } .browse-tag-v { border-left: 1px solid $grey; background-color: #fff; } .colour-preview-box { float: right; width: 14px; height: 14px; margin: 4px 0px; border: 1px solid rgba(0, 0, 0, .1); // add color via inline css on element: background-color: ; } } .note-comments li, .changeset-comments li { margin: $lineheight/2 0; p { margin: 10px 6px 0 6px; line-height: 1.5; } } .subscribe-buttons input { font-size: 90%; line-height: 15px; min-height: 20px; } span.action-button:hover { cursor: pointer; text-decoration: underline; } .note-description { overflow: hidden; margin: 0 0 10px 10px; } .query-results { display: none; ul { li { &.query-result { cursor: pointer; } &.selected { background: $list-highlight; } } } } } /* Bootstrap buttons don't have any vertical margin, so they touch when adjacent buttons wrap onto a new line e.g. wide form buttons on a narrow sidebar */ .btn-wrapper { > .btn { margin-bottom: $spacer * 0.25; } } /* Rules for export sidebar */ .export_form { .export_area_inputs, .export_button { text-align: center; } .export_area_inputs { margin-bottom: $spacer; input[type="text"] { width: 100px; text-align: center; } } .export_boxy { background: $lightgrey; #maxlat { margin-top: -1px; } #minlon { float: left; /* no-r2 */ margin-left: -1px; } #maxlon { float: right; /* no-r2 */ margin-right: -1px; } #minlat { margin-bottom: -1px; } } .export_bound { margin: $lineheight/4; } dl { padding-left: $lineheight/2; dd { margin-left: 0; margin-bottom: 10px; } } } /* Rules for edit pages */ .site-edit { #content { position: absolute; top: $headerHeight; bottom: 0; width: 100%; } #map { height: 100%; overflow: hidden; } } /* Rules for non-map content pages */ .content-heading { background: $lightgrey; } .content-inner { position: relative; max-width: 960px; margin: auto; padding: $lineheight; } /* Overrides for pages that use new layout conventions */ .header-illustration { background-position: 0 0; background-repeat: no-repeat; position: relative; min-height: 200px; width: 100%; left: 0; bottom: 0; &.new-user-main { background-image: image-url("sign-up-illustration.png"); } &.confirm-main { background-image: image-url("confirm-illustration.png"); } &.new-user-terms { background-image: image-url("terms-illustration.png"); } &.new-user-arm { height: 110px; width: 130px; left: 280px; top: 180px; background-image: image-url("sign-up-illustration-arm.png"); position: absolute; z-index: 100; pointer-events: none; } } [dir=rtl] .header-illustration { transform: scaleX(-1); } #content.maximised { top: 0; left: 0; right: 0; bottom: 0; border: 0; z-index: 2000; } /* Rules for small maps in content areas */ .content_map { height: 200px; margin-bottom: $lineheight; } @include media-breakpoint-up(md) { .content_map { height: 400px; } } /* Rules for the user map */ .content_map .leaflet-popup-content { margin: $lineheight/2; min-height: 50px; } /* Rules for user popups on maps */ .user_popup { min-width: 200px; p { padding: 0 0 5px 0; margin-top: 0 0 0 60px; font-size: 12px; } } /* Rules for the user list */ #user_list { width: 100%; } /* Rules for the diary list page */ .diary_post { position: relative; padding-top: $lineheight; padding-bottom: $lineheight/2; border-top: 1px solid $grey; &.deleted { background-color: #fee; } } /* Rules for the diary entry page */ .diary_entries { #map { height: 400px; display: none; margin-bottom: $lineheight; } .comments { max-width: 740px; } .diary-comment { border-top: 1px dashed $grey; padding-top: $lineheight/2; padding-bottom: $lineheight/2; &:first-child { margin-top: $lineheight/2; padding-top: $lineheight; border-top: 1px solid $grey; } &.deleted { background-color: #fee; } p { margin-bottom: $lineheight/2; } .comment-heading { margin-bottom: 0; margin-top: 0; } } } /* Rules for the log in page */ #login_auth_buttons { margin-bottom: 0; li { float: left; padding: $lineheight/4 $lineheight/2; } } /* Rules for the account confirmation page */ .users-terms { .legale { padding: $lineheight; margin-bottom: $lineheight; overflow: auto; height: 20em; li { list-style: inherit; } ol ol { list-style-type: lower-alpha; } } } /* Rules for the account settings page */ #accountForm .user_image { margin-bottom: 0; } #accountForm #user_image { margin-left: 20px; } #accountForm ul.accountImage-options { margin-left: 120px; } .nohome .location { display: none; } #homerow .message { display: none; } .nohome .message { display: inline !important; } /* Rules for the oauth settings page */ .oauth_clients .buttons .oauth-edit { border-radius: 2px 0 0 2px; } .oauth_clients .buttons .oauth-delete { border-radius: 0 2px 2px 0; } /* Rules for the oauth authorization page */ .oauth-authorize ul { list-style: none; } /* Rules for messages pages */ .messages { button[type="submit"] { margin: auto; white-space: nowrap; } .inbox-row { background: $offwhite; } .inbox-row-unread { background: #CBEEA7; } .right { float: right; } } .inbox-row .inbox-mark-read { display: none; } .info-line { margin-bottom: $lineheight; padding: $lineheight/4 0px 4px 0px; border-bottom: 1px solid $grey; form, form div { display: inline; } } .info-line .user_thumbnail_tiny { vertical-align: middle; } .inbox-sent { white-space: nowrap; } .inbox-mark-unread, .inbox-mark-read, .inbox-delete { width: 1%; } .inbox-row-unread .inbox-mark-unread { display: none; } /* Rules for "flash" notice boxes shown at the top of the content area */ .flash { &.error { background-color: #ff7070; } &.warning { background-color: #ffe0cc; } &.notice { background-color: #CBEEA7; } } /* Rules for highlighting fields with rails validation errors */ .formError { display: inline-block; padding: 5px 10px; margin-top: 5px; border-radius: 4px; font-size: 12px; color: #fff; background-color: #ff7070; } /* Rules for rails validation error boxes */ #errorExplanation { width: 400px; border: 2px solid #ff7070; padding: 0 $lineheight/2; margin-bottom: $lineheight; background-color: #f0f0f0; h2 { margin: 0 -10px 10px -10px; padding: $lineheight/4 $lineheight/4 $lineheight/4 15px; font-weight: bold; font-size: 12px; background-color: #c00; color: #fff; text-align: left; } p { color: #333; margin-bottom: 0px; padding: $lineheight/4; } } .search_form { background-color: $lightgrey; .describe_location { top: 6px; right: 6px; font-size: 10px; color: $blue; } } .directions_form { background-color: $lightgrey; .loader_copy { display: none; img { vertical-align: middle; } } a.reverse_directions { cursor: pointer; } } /* Rules for user images */ img.user_image { max-width: 100px; max-height: 100px; } img.user_thumbnail { max-width: 50px; max-height: 50px; } img.user_thumbnail_tiny { width: auto; height: auto; max-width: 25px; max-height: 25px; } /* Rules for geo microformats */ abbr.geo { border-bottom: none; } /* General styles for action lists / subnavs / pager navs */ nav.secondary-actions { margin-left: -11px; overflow: hidden; > ul { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 0; margin-left: -1px; padding: 0; &.pager { display: inline-block; margin-right: 60px; } > li { flex-basis: auto; list-style: none; border-left: 1px solid $grey; padding-left: $lineheight/2; margin-right: $lineheight/2; margin-bottom: $lineheight/8; } } } div.secondary-actions { padding: 10px; text-align: center; } .buttons { min-width: 200px; input[type="submit"], input[type="button"], input[type="reset"], .button, .button_to { box-sizing: border-box; float: left; border-radius: 0; margin:0; min-width: 75px; max-width: 180px; border-right:1px solid white; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } input:first-child, .button:first-child, .button_to:first-child { border-radius:2px 0 0 2px; } input:last-child, .button:last-child, .button_to:last-child { border-radius:0 2px 2px 0; border-right-width: 0; } input:only-child, .button:only-child, .button_to:only-child, *[value="Hide"] + input:last-child, *[value="Hide"] + .button:last-child, *[value="Hide"] + .button_to:last-child { border-radius:2px; border-right-width: 0; } /* if a 3-button set has a hidden middle button */ *[value="Hide"] + input:nth-child(3), *[value="Hide"] + .button:nth-child(3), *[value="Hide"] + .button_to:nth-child(3) { border-radius:0 2px 2px 0; border-right-width: 0; } /* if a 3-button set starts with a hidden button */ *[value="Hide"] + input:nth-child(2):not(:last-child), *[value="Hide"] + .button:nth-child(2):not(:last-child), *[value="Hide"] + .button_to:nth-child(2):not(:last-child) { border-radius:2px 0 0 2px; border-right-width: 1px; } } /* Create a single-line dl */ dl.dl-inline { dt, dd { display: inline-block; } dd { margin-right: 1em; } } /* Rules for OpenID logo */ .openid_logo { vertical-align: text-bottom; border: 0; } /* Rules for rich text */ .richtext, .prose { code { font-size: 13px; background: $lightgrey; padding: 2px 3px; } pre { font-size: 13px; background: $lightgrey; padding: 2px 3px; white-space: pre-wrap; code { padding: 0; } } img { padding: $lineheight; background-color: $offwhite; display: block; max-width: 100%; margin: auto; } blockquote { border-left: $lineheight solid $offwhite; padding-left: $lineheight; margin: 0; color: $darkgrey; } } /* Rules for the user notes list */ .note_list { tr.creator { background-color: $offwhite; } } /* Rules for the iD editor */ .id-embed { width: 100%; height: 100%; } /* Rules for the "Welcome" page */ .site-welcome, .site-fixthemap { .center { text-align: center; .sprite { float: none; margin: auto; } } .sprite { background-image: image-url("welcome-sprite.png"); background-size: 500px 250px; display: block; float: left; } .icon-list { padding-bottom: 20px; div { margin-bottom: 10px; p { padding-top: 10px; } } } .sprite.small { width: 50px; height: 50px; } .sprite.x { /* no-r2 */ background-position: -50px 0; } .sprite.term { margin-right: 10px; vertical-align: middle; } .sprite.node { /* no-r2 */ background-position: -100px 0; } .sprite.way { /* no-r2 */ background-position: -150px 0; } .sprite.tag { /* no-r2 */ background-position: -200px 0; } .sprite.editor { /* no-r2 */ background-position: -250px 0; } .sprite.question { /* no-r2 */ background-position: -300px 0; } .sprite.rules { /* no-r2 */ background-position: -350px 0; } .start-mapping { margin: auto; cursor: pointer; border: none; padding: 20px 40px; font-size: 30px; text-decoration: none; } .icon.note { background-color: #333; border-radius: 4px; } } .site-about #content { background-color: $lightgrey; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; .content-inner { max-width: 760px; } .attr { margin-top: -20px; h1 { span { color: $vibrant-green; } } .user-image { height: 150px; background-position: 0 50%; background-repeat: no-repeat; background-image: image-url('about/osm.png'); background-size: cover; background-color: $vibrant-green; } .byosm { background: $vibrant-green; } .byosm span { display: inline-block; width: 1em; margin-left: -1em; } } .icon { width: 30px; height: 30px; margin-right: 10px; vertical-align: middle; background: 40px 40px image-url('about/sprite.png') no-repeat; &.local { /* no-r2 */ background-position: 0px 0px; } &.community { /* no-r2 */ background-position: 0px -40px; } &.open { /* no-r2 */ background-position: 0px -80px; } &.partners { /* no-r2 */ background-position: 0px -120px; } &.infringement { /* no-r2 */ background-position: 0px -160px; } &.legal { /* no-r2 */ background-position: -45px -160px; } } } @import 'browse'; @media only screen and (max-width:960px) { .header-illustration.new-user-arm { display: none; } }