X-Git-Url: https://git.openstreetmap.org/rails.git/blobdiff_plain/17f926fefb1329aaa41a64634d17d1dffd3ddba5..2452576333c8b0e76bf3a921d8321fbcc267f146:/app/assets/stylesheets/common.css.scss diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss deleted file mode 100644 index 7038bb69c..000000000 --- a/app/assets/stylesheets/common.css.scss +++ /dev/null @@ -1,2619 +0,0 @@ -@import "parameters"; - -/* Styles common to large and small screens */ - -/* Minimal CSS reset */ - -html, body, ul, ol, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p, input { - margin: 0; - padding: 0; - border: 0; - font-size:100%; -} - -fieldset,img { border: 0; } - -legend { color: #000; } - -sup { vertical-align: text-top; } - -sub { vertical-align: text-bottom; } - -table { - border-collapse: collapse; - border-spacing: 0; -} - -li { list-style: none; } - -input, -select, -textarea, -body { font: #{$typeheight}/#{$lineheight} "Helvetica Neue",Arial,sans-serif; } - -abbr, acronym { - border-bottom: .1em dotted; - cursor: help; -} - -strong { - font-weight: bold; -} - -/* Micro Clearfix | Details: http://nicolasgallagher.com/micro-clearfix-hack/ */ - -.clearfix:before, -.clearfix:after { - content: " "; - display: table; -} - -.clearfix:after { - clear: both; -} - -/* Basic grid */ - -.col0 { float:left; width:04.1666%; } -.col1 { float:left; width:08.3333%; } -.col2 { float:left; width:16.6666%; } -.col3 { float:left; width:25.0000%; } -.col4 { float:left; width:33.3333%; } -.col5 { float:left; width:41.6666%; } -.col6 { float:left; width:50.0000%; } -.col7 { float:left; width:58.3333%; } -.col8 { float:left; width:66.6666%; } -.col9 { float:left; width:75.0000%; } -.col10 { float:left; width:83.3333%; } -.col11 { float:left; width:91.6666%; } -.col12 { width:100%; } - -.margin0 { margin-left:04.1666%; } -.margin1 { margin-left:08.3333%; } -.margin2 { margin-left:16.6666%; } -.margin3 { margin-left:25.0000%; } -.margin4 { margin-left:33.3333%; } -.margin5 { margin-left:41.6666%; } -.margin6 { margin-left:50.0000%; } -.margin7 { margin-left:58.3333%; } -.margin8 { margin-left:66.6666%; } -.margin9 { margin-left:75.0000%; } -.margin10 { margin-left:83.3333%; } -.margin11 { margin-left:91.6666%; } -.margin12 { margin-left:100.0000%; } - -.fillL { background-color: white; } - -/* Default rules for the body of every page */ - -* { - box-sizing: border-box; -} - -body { - font-family: 'Helvetica Neue',Arial,sans-serif; - font-size: $typeheight; - line-height: 1.6666; - color: #222; - background-color: #fff; - margin: 0px; - padding: 0px; - text-align: left; - height: 100%; -} - -h1, h2, h3 { - font-weight: 600; - line-height: 1.2; -} - -h4, h5 { - font-weight: 500; -} - -h1 { - font-size: 18px; -} - -h2, h3 { - font-size: 16px; -} - -p > img { - width: auto; - max-width: 100%; -} - -small, aside { - font-size: 12px; -} - -#container { position: relative; } - -.column-1 { - width: 50%; - margin: 0 0 $lineheight/2 0; -} - -.small_icon { - vertical-align: middle; - margin-right: $lineheight/4; -} - -.red { color: $red; } - -/* Rules for icons */ - -.icon { - display:inline-block; - vertical-align:top; - width:20px; - height:20px; - background:transparent image-url("sprite.png") no-repeat 0 0; - text-indent:-9999px; - overflow:hidden; -} - -.icon.search { background-position: 0 0; } -.icon.donate { background-position: -20px 0; } -.icon.zoomin { background-position: -40px 0; } -.icon.zoomout { background-position: -60px 0; } -.icon.geolocate { background-position: -80px 0; } -.active .icon.geolocate { background-position: -80px -20px; } -.icon.layers { background-position: -100px 0; } -.icon.key { background-position: -120px 0; } -.icon.share { background-position: -140px 0; } -.icon.clipboard { background-position: -160px 0; } -.icon.link { background-position: -180px 0; } -.icon.close { background-position: -200px 0; } -.icon.close:hover { background-position: -200px -20px; } -.icon.check { background-position: -220px 0; } -.icon.note { background-position: -240px 0; } -.icon.query { background-position: -260px 0; } - -/* Rules for links */ - -a { - color: #24d; - text-decoration: none; - -webkit-appearance: none; - outline: 0; - &:hover { - text-decoration: underline; - } -} - -/* Rules for horizontal lines */ - -hr { - border: none; - background-color: #ccc; - color: #ccc; - height: 1px; -} - -/* General styles for tables */ - -table { - width: 100%; - margin-bottom: $lineheight; - th, td { - text-align: left; - padding: $lineheight/4; - line-height: $lineheight; - } - th { - font-weight: 600; - vertical-align: top; - } - td { - vertical-align: middle; - } -} - -/* Utility for de-emphasizing content */ - -.deemphasize { - color: #999; - a { - color: $blue; - } -} - -/* 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, .dropdown { - 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 { - margin: 0; - padding-top: 15px; - - a { - color: #000; - } - } -} - -nav.primary { - > ul { - $border: 1px solid $green; - - border: $border; - border-radius: $border-radius; - - > li { - border-right: $border; - float: left; - &:last-child { - border-right: 0; - } - > a:hover { background: lighten($green, 30%); } - &.current > a:hover { background: $green; } - &.disabled > a:hover { background: lighten($green, 38%); } - &.dropdown { - > a.tab { border-right: 1px solid lighten($green, 30%); } - &.current > a.tab { border-right: 1px solid lighten($green, 10%); } - } - } - } - - a.tab, - .dropdown-toggle { - display: inline-block; - font-weight: 500; - color: $green; - padding: 5px 15px; - } - - .dropdown-toggle { - padding: 5px 6px; - } - - .caret { - border-top-color: $green; - margin-top: 10px; - } - - .disabled a { - color: #ccc; - cursor: default; - - .caret { - border-top-color: #ccc; - } - } - - > ul li.current { - background-color: $green; - - .tab { - color: #fff; - } - - .caret { - border-top-color: #fff; - } - } -} - -nav.secondary { - position: absolute; - right: 0; - - > ul { - vertical-align: middle; - a, .dropdown-toggle { - display: inline-block; - text-decoration: none; - color: $darkgrey; - padding: 5px; - - &:hover { color: darken($darkgrey, 25%); } - } - } - - > ul li.current a { - color: darken($darkgrey, 25%); - } - - .user-menu { - $border: 1px solid $grey; - border: $border; - border-radius: $border-radius; - margin-left: 10px; - - > li { - border-right: $border; - float: left; - &:last-child { - border-right: 0; - - > a { - border-radius: 0 $border-radius $border-radius 0; - } - } - &:first-child > a { border-radius: $border-radius 0 0 $border-radius; } - &:hover a { background: lighten($darkgrey, 30%); } - } - - a { - padding: 5px 15px; - - } - - &.logged-in > a { - padding: 0; - > .user-button { - line-height: 1.8; - padding: 5px 10px 3px 6px; - display: inline-block; - color: $darkgrey; - } - &:hover > .user-button { color: darken($darkgrey, 5%); } - } - } - - .caret { - border-top-color: $grey; - margin-top: 9px; - } - - img.user_thumbnail_tiny { - border: 0; - vertical-align: top; - margin-top: 0px; - margin: 4px 0 0 4px; - border-radius: 2px; - } - - #inboxanchor { - display: inline-block; - vertical-align: top; - height: 25px; - margin: 3px 0 3px 3px; - background-color: lighten($grey, 10%); - line-height: 20px; - border-radius: 2; - } - - .dropdown-menu { - left: auto; - right: -1px; - border-radius: 3px 0 3px 3px; - - .count-number { - float: right; - padding: 0 5px; - margin: 0; - } - } -} - -#compact-secondary-nav { - display: none; - ul li a { - width: 100%; - color: #333; - &:hover { color: #fff; } - } -} - -@media only screen and (max-width:960px) { - #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 bootstrap tooltips */ - -.tooltip { - position: absolute; - display: none; - color: #333; - text-align: left; - font-size: 12px; - max-width: 250px; -} - -.tooltip.in { - opacity: 0.8; - z-index: 1030; - height: auto; - display: block; -} - -.tooltip.top { - margin-top: -10px; - text-align: center; -} - -.tooltip.right { - margin-left: 10px; -} - -.tooltip.bottom { - margin-top: 10px; - text-align: center; -} - -.tooltip.left { - margin-left: -10px; - text-align: right; -} - -.tooltip-inner { - display: inline-block; - padding: 10px; - font-weight: normal; - background-color: white; -} - -.tooltip-arrow { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; -} - -.tooltip.top .tooltip-arrow { - bottom: -5px; - left: 50%; - margin-left: -5px; - border-top-color: white; - border-width: 5px 5px 0; -} - -.tooltip.right .tooltip-arrow { - top: 50%; - left: -5px; - margin-top: -5px; - border-right-color: white; - border-width: 5px 5px 5px 0; -} - -.tooltip.left .tooltip-arrow { - top: 50%; - right: -5px; - margin-top: -5px; - border-left-color: white; - border-width: 5px 0 5px 5px; -} - -.tooltip.bottom .tooltip-arrow { - top: -5px; - left: 50%; - margin-left: -5px; - border-bottom-color: white; - border-width: 0 5px 5px; -} - -/* 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 { - background-color: #333; - background-color: rgba(0,0,0,.5); - cursor: default; - } - - &.active { - background-color: #9ed485; - } - - .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; - font-size: 12px; - - h2 { - padding: $lineheight $lineheight $lineheight/2; - } - - h3, h4 { - margin-top: $lineheight; - margin-bottom: $lineheight/2; - font-size: 13px; - } - - .icon.close { - float: right; - cursor: pointer; - } - } - - .welcome { - display: none; - } - - .overlay-sidebar #sidebar { - position: absolute; - z-index: 1000; - height: auto; - border-bottom-right-radius: 5px; - overflow: hidden; - .welcome { - display: block; - } - #sidebar_content { - display: none; - } - } - - .welcome { - p { - padding: $lineheight/2 $lineheight $lineheight; - font-size: 110%; - font-weight: 300; - } - - .button { - width: 50%; - float: left; - margin: 0; - border-radius: 0; - font-weight: normal; - padding: .6em; - - &.learn-more { - border-right: 1px solid #fff; - } - } - } - - #map { - height: 100%; - overflow: hidden; - - &.query-active { - cursor: help; - } - - &.query-disabled { - cursor: not-allowed; - } - } - - #map-ui { - display: none; - position: relative; - float: right; - width: 250px; - height: 100%; - background: white; - overflow: auto; - - .section { - border-bottom: 1px solid #DDD; - padding: 10px 20px; - } - - a.close-button { - float: right; - padding:5px; - font-size:20px; - line-height:10px; - color:#222; - border:1px solid #ddd; - } - - .tooltip { - opacity: 1; - border: 1px solid #ccc; - .tooltip-arrow { - border-top-color: #ccc; - } - } - } -} - -.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: 2; // For IE9 - 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: #999; } - } -} - -.share-ui { - .share-tabs { - margin-bottom: 10px; - - a { - color: #fff; - text-decoration: none; - background-color: $lightblue; - padding: 5px 10px; - } - - a:first-child { - border-right: 1px solid #fff; - border-radius: 4px 0 0 4px; - } - - a:last-child { - border-left: 1px solid #fff; - 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; -} - -.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 #ccc; - > .close { - float: right; - margin-top: 2px; - cursor: pointer; - } -} - -#browse_status { - p { - padding: $lineheight; - } - - input { - display: block; - margin-left: auto; - margin-right: auto; - } -} - -#sidebar { - #sidebar_loader, - .loader, - .load_more { - text-align: center; - margin: $lineheight auto; - width: 40px; - display: block; - } -} - -/* Rules for the search box */ - -header .search_form { - display: none; -} - -.search_form { - position: relative; - padding: $lineheight/2; - background-color: $lightgrey; - - .query_wrapper { - position: relative; - overflow: hidden; - border-radius: 2px 0 0 2px; - } - - input[type=text] { - width: 100%; - height: 30px; - border-right: none; - - transition: 300ms linear; - } - - input:focus { - outline: none; - box-shadow: 0px 0px 7px #9ED485; - } - - input[type=submit] { - float: right; - width: auto; - min-width: 0; - border-radius: 0 2px 2px 0; - } - - .describe_location { - position: absolute; - top: 6px; - right: 6px; - font-size: 10px; - color: $blue; - } -} - -/* Rules for the map key which appears in the popout sidebar */ - -#mapkey { - .mapkey-table-key img { - display: block; - margin-left: auto; - margin-right: auto; - } - td { - padding: 0 $lineheight/4 $lineheight/4 $lineheight/4; - } -} - -/* Rules for search sidebar */ - -.search_results_entry { - ul li { - border-bottom: $keyline; - cursor: pointer; - &:first-child { border-top: $keyline; } - &.selected { background: #FFFFE6; } - } - - .search_details { - display: block; - float: right; - text-align: right; - margin-top: 0.2em; - margin-left: 0.5em; - } -} - -.search_results_error { - color: #f00; -} - -/* 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 { - padding: 15px 20px; - border-bottom: 1px solid #ddd; - cursor: pointer; - - &.selected { background: #FFFFE6; } - /* color is derived from changeset bbox fillColor in history.js */ - } - - h4 { - margin: 0; - a { - color: #000; - } - } -} - -/* Rules for the browse sidebar */ - -#sidebar_content { - .browse-section { - padding: $lineheight/2 $lineheight; - border-bottom: 1px solid #ddd; - - h4:first-child { - margin-top: 0; - word-wrap: break-word; - } - } - - .browse-section:last-of-type { - border-bottom: none; - } - - .paginate { - float: right; - padding: 1px 6px; - border: 1px solid #eee; - border-radius: 3px; - } - - .paginate ul { - padding-left: 20px; - } - - .browse-field { - margin-bottom: 10px; - - h4 { - padding: 5px 0 5px 10px; - font-size: 12px; - border: 1px solid #CCC; - border-radius: 4px 4px 0 0; - background-color: #F6F6F6; - } - - p { - padding: 7px 10px; - font-size: 12px; - background-color: #FFF; - border: 1px solid #CCC; - border-top: 0; - border-radius: 0 0 4px 4px; - } - } - - .browse-tag-list { - background-color: #F6F6F6; - border: 1px solid #ddd; - border-radius: 3px; - font-size: 12px; - table-layout: fixed; - border-collapse: separate; - - th, td { - border-bottom: 1px solid #ddd; - } - - 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; - } - - .browse-tag-k { - font-weight: 500; - background-color: #F6F6F6; - } - - .browse-tag-v { - border-left: 1px solid #ddd; - background-color: #fff; - } - } - - .warning { - margin: $lineheight/2 0; - padding: $lineheight/2; - font-size: 90%; - } - - .note-comments li, .changeset-comments li { - margin: $lineheight/2 0; - - p { - margin-left: 10px; - } - } - - .comments-header { - float: left; - } - - .subscribe-buttons { - float: left; - margin: 18px 10px 10px; - min-width: 80px; - } - - .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-intro p { - padding: $lineheight $lineheight $lineheight/2; - } - - .query-results { - display: none; - - h3 { - padding: $lineheight $lineheight $lineheight/2; - margin: 0; - } - - ul { - li { - padding: 15px 20px; - border-bottom: 1px solid #ddd; - - &.query-result { - cursor: pointer; - } - - &.selected { - background: #FFFFE6; - } - } - } - } -} - -/* Rules for export sidebar */ - -.export_form { - padding: $lineheight; - - .export_area_inputs, - .export_button { - text-align: center; - } - - .export_area_inputs { - margin-bottom: $lineheight/2; - input[type="text"] { - width: 80px; - text-align: center; - margin-bottom: 5px; - } - } - - .export_boxy { - background: #eee; - border: 1px solid #ccc; - border-radius: 3px; - - #maxlat { margin-top: -1px; } - #minlon { - float: left; - margin-left: -1px; - } - #maxlon { - float: right; - margin-right: -1px; - } - #minlat { margin-bottom: 0; } - } - - .export_bound { - margin: $lineheight/4; - } - - .export_button { - margin-top: $lineheight; - margin-bottom: $lineheight; - } - - 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; - - h1 { font-size: 22px; } -} - -.content-body { - h1, h2, h3, p, ul, ol { - margin-bottom: $lineheight; - } - - h1, h2, h3 { - margin-top: $lineheight/2; - } -} - -.content-inner { - position: relative; - max-width: 900px; - margin: auto; - padding: $lineheight; -} - -/* Overrides for pages that use new layout conventions */ - -.user-new, -.user-create, -.user-terms { - .content-body .content-inner { - padding: 0; - } -} - -.user-new, -.user-create, -.user-terms, -.user-confirm { - .content-heading .content-inner { - height: 200px; - } -} - -.header-illustration { - background-position: 0 0; - background-repeat: no-repeat; - position: absolute; - 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: 260px; - top: 160px; - background-image: image-url("sign-up-illustration-arm.png"); - z-index: 100; - } -} - -#content.maximised { - top: 0; - left: 0; - right: 0; - bottom: 0; - border: 0; - z-index: 2000; -} - -/* Rules for small maps in content areas */ - -.content_map { - position: relative; - width: 45%; - height: 400px; - border: 1px solid #ccc; - margin-bottom: $lineheight; - float: right; -} - -/* Rules for the trace list shown by the traces tab etc */ - -#trace_list { - font-size: $lineheight/2; - border-width: 0px; - text-align: right; - - .trace_summary { - font-size: 12px; - color: gray; - } - - .trace_pending { - color: red; - } - - .trace_public { - color: green; - } - - .trace_identifiable { - color: green; - } - - .trace_trackable { - color: red; - } - - .trace_private { - color: red; - } -} - -/* Rules for the new trace form */ - -#new_trace { - input[type=text] { - width: 50%; - width: calc(100% - 150px); - max-width: 500px; - } -} - -/* Rules for the edit trace form */ - -.edit_trace { - .form-row p { - margin-bottom: 0px; - } - - input[type=text] { - width: 50%; - width: calc(100% - 150px); - max-width: 500px; - } -} - -/* Rules for the user profile page */ - -#userinformation { - - min-height: 100px; - .userinformation-inner { - float: left; - } - h2 { - margin-top: 0; - } - .user-description { - width: 100%; - clear: both; - } - .deemphasize { - margin: 0; - } -} - -.admin-user-info small { - margin-bottom: $lineheight/2; - display: inline; - margin-right: $lineheight; -} - -.activity-block { - clear: left; - border-bottom: 1px solid #ccc; - padding-bottom: $lineheight; - float: left; - h3 { - margin-bottom: $lineheight/2; - } -} - -.contact-activity { - margin-top: $lineheight; - width: 100%; -} - -.activity-details p { - margin-left: 70px; - margin-bottom: 0; -} - -#friends-container .contact-activity ul { - margin-left: 70px; -} - -.user-view { - // Silly exception; remove when user page is redesigned. - .content-inner { - max-width: none; - } - p#no_home_location { - margin: $lineheight; - } - .user_thumbnail { - margin-top: $lineheight/4; - float: left; - } -} - -/* 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; - } - img.user_thumbnail { - float: left; - margin: 0 $lineheight/2 0 0; - } -} - -/* Rules for the user list */ - -#user_list { - font-size: $lineheight/2; - width: 100%; - - tr { - vertical-align: middle; - } - - p { - margin-top: 0px; - margin-bottom: 0px; - } -} - -#user_list_actions { - float: right; - margin-top: $lineheight/2; -} - -/* Rules for the diary list page */ - -.diary_post { - position: relative; - margin-top: $lineheight/2; - padding-top: $lineheight; - border-top: 1px solid #ccc; - - .post_heading { - margin-bottom: $lineheight; - - h2 { - margin-top: 0; - margin-bottom: $lineheight/2; - font-size: 24px; - } - } - - img.user_thumbnail { - float: left; - } - - small.deemphasize { - float: left; - display: block; - } - - ul.secondary-actions { - display: inline-block; - } -} - -.content-heading .hide_unless_logged_in { // hacky selector, better to just add a new class to this div - display: inline; -} - -/* Rules for the diary entry page */ - -.diary_entry { - #map { - position: relative; - width: 90%; - height: 400px; - border: 1px solid #ccc; - display: none; - margin-bottom: $lineheight; - } - #newcomment { - border-top: 1px solid #ccc; - padding-top: $lineheight; - margin-top: $lineheight/2; - } - .comments { - max-width: 740px; - } - .diary-comment { - margin-top: $lineheight/2; - border-top: 1px dashed #ccc; - padding-top: $lineheight/2; - &:first-child { - margin-top: $lineheight; - padding-top: $lineheight; - border-top: 1px solid #ccc; - } - p { - margin-bottom: $lineheight/2; - } - .comment-heading { - margin-bottom: 0; - margin-top: 0; - } - } -} - -.diary_entry-view img.user_thumbnail { - float: left; -} - -/* Rules for the log in page */ - -#login_openid_buttons { - margin-bottom: 0; -} - -#login_openid_buttons li { - float: left; - padding: $lineheight/4 $lineheight/2; -} - -/* Rules for the account confirmation page */ - -.user-terms { - .legale { - border: 1px solid #ccc; - padding: $lineheight; - margin-bottom: $lineheight; - overflow: auto; - height: 20em; - } - - #decline { - background: $lightblue; - &:hover { - background: darken($lightblue, $hovercolor); - } - } -} - -/* Rules for the account settings page */ - -#accountForm .user_map { - position: relative; - width: 500px; - height: 400px; - border: 1px solid #ccc; -} - -#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; -} - -.content_map.settings_map { - width: 50%; - float: none; -} - -/* 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 messages pages */ - -.messages { - width: 100%; - border: 1px solid #ddd; - - input[type="submit"] { - margin: auto; - } - tbody tr { - border-top: 1px solid #ccc; - } - - .inbox-row { - background: #f8f8ff; - } - - .inbox-row-unread { - background:#CBEEA7; - } - - .right { - float: right; - } - - tr td, - tr th { - padding: $lineheight/4; - } - p:last-child, - h2:last-child, - h3:last-child, - ol:last-child, - ul:last-child { - margin-bottom:0; - } - tr td { - height: 30px; - border-right: 1px solid $lightgrey; - } -} - -.inbox-row .inbox-mark-read { - display: none; -} - -.info-line { - margin-bottom: $lineheight; - padding: $lineheight/4 0px 4px 0px; - border-bottom: 1px solid #ccc; - - 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; -} - -.message-read .message-buttons { - margin-top: $lineheight; - margin-bottom: $lineheight * 1.5; - padding-top: $lineheight; - border-top: 1px solid $lightgrey; -} - -.message-read .buttons .mark-unread-button { - border-radius: 0; -} - -/* Rules for "flash" notice boxes shown at the top of the content area */ - -.error { - padding: $lineheight; - background-color: #ff7070; -} - -.warning { - padding: $lineheight; - background-color: #ffe0cc; -} - -.notice { - padding: $lineheight; - 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; - } - - ul { - padding-left: $lineheight; - - li { - font-size: 12px; - list-style: disc; - } - } -} - -/* Rules for forms */ - -.standard-form { - fieldset { - margin-bottom: $lineheight; - } - label.standard-label { - display: block; - margin-bottom: $lineheight/4; - font-size: $typeheight; - font-weight: bold; - line-height: 1.5; - } - label.standard-label.secondary { - display: inline-block; - font-weight: normal; - } - .form-help { - font-weight: normal; - } - .form-column { - float: left; - margin-right: 20px; - } - .form-divider { - margin-top: $lineheight; - padding-top: $lineheight; - border-top: 1px solid $lightgrey; - } - .horizontal-list .form-row { - float: left; - padding-right: 10px; - } - .form-row { - margin-bottom: $lineheight/2; - } - .form-list { - margin-bottom: 0; - } - .form-list li { - margin-bottom: 5px; - } - input[type="checkbox"], - input[type="radio"] { - float: left; - margin-top: 5px; - } -} - -#remember_me_openid { - display: block; -} - -input[type="checkbox"], -input[type="radio"] { - margin-right: 5px; -} - -input[type="text"], -input[type="email"], -input[type="url"], -input[type="password"], -textarea { - background-color: #fff; - border: 1px solid #ccc; - padding: 2px 5px; - margin: 0; - width: 200px; - - &.field_with_errors { - border: 2px solid #ff7070; - } -} - -textarea { - padding: 5px; - width: 100%; -} - -/* Rules for user images */ - -img.user_image { - max-width: 100px; - max-height: 100px; - border: 1px solid #ccc; - margin-bottom: $lineheight; - float: left; - margin-right: $lineheight; -} - -img.user_thumbnail { - max-width: 50px; - max-height: 50px; - border: 1px solid #ccc; - margin-right: $lineheight; -} - -img.user_thumbnail_tiny { - width: auto; - height: auto; - max-width: 25px; - max-height: 25px; - border: 1px solid #ccc; -} - -/* Rules for geo microformats */ - -abbr.geo { - border-bottom: none; -} - -/* Rules for RSS buttons */ - -.rsssmall { - position: relative; - top: 3px; -} - -/* General styles for action lists / subnavs / pager navs */ - -ul.secondary-actions { - font-style: normal; - margin-bottom: 0; - margin-left: 0; - &.pager { - display: inline-block; - margin-right: 60px; - } - > li { - display: block; - float: left; - list-style: none; - border-left: 1px solid #ccc; - padding-left: $lineheight/2; - margin-right: $lineheight/2; - &:first-child { - border-left: 0; - padding-left: 0; - } - &:last-child { - margin-right: 0px; - } - } -} - -div.secondary-actions { - padding: 10px; - text-align: center; -} - -/* Utility for managing inner content areas */ - -.inner22 { padding: $lineheight;} - -.inner12 { padding: $lineheight/2 $lineheight;} - -.inner11 { padding: $lineheight/2;} - -.inner20 { padding: $lineheight 0;} - -.inner02 { padding: 0 $lineheight;} - -/* Utility for general button styles */ - -input[type="button"], -input[type="submit"], -input[type="reset"], -a.button { - cursor: pointer; - border: 0; - display: inline-block; - padding: $lineheight/4 $lineheight/2; - min-height: 20px + $lineheight/2; - min-width: 120px; - margin: 0 0 $lineheight/2 0; - color: white; - background: $blue; - text-align: center; - border-radius: 2px; - &:hover { - background: darken($blue, $hovercolor); - text-decoration: none; - } - &.deemphasize { - background: $lightblue; - &:hover { - background: darken($lightblue, $hovercolor); - } - } - &:disabled { - background: $lightgrey; - &:hover { - background: $lightgrey; - } - } - &:last-child { - margin-bottom: 0; - } -} - -input[type="button"], -input[type="submit"], -input[type="reset"] { - line-height: normal; -} - -a.button { - line-height: 20px; -} - -.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; - } -} - -/* Rules for doing distinct colour of alternate table rows */ - -.table0, -.item0 { - background: $offwhite; -} - -.table1, -.item1 { - background: #fff; -} - -/* Rules for OpenID logo */ - -.openid_logo { - vertical-align: text-bottom; - border: 0; -} - -/* Rules for rich text */ - -.richtext, -.prose { - h1, h2 { - padding-bottom: $lineheight/2; - border-bottom: 1px dashed #cccccc; - margin-bottom: $lineheight/2; - } - - h1 { - font-size: 24px; - } - - h2 { - font-size: 18px; - } - - h3 { - font-size: $typeheight; - } - - code { - font-size: 13px; - background: #e8e8e8; - padding: 2px 3px; - } - - pre { - font-size: 13px; - background: #e8e8e8; - padding: 2px 3px; - - 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: #7E7E7E; - } - - ul, ol { - padding-left: $lineheight; - margin-bottom: $lineheight; - margin-left: $lineheight; - } - - ul li { - list-style: disc; - } - - ol li { - list-style: decimal; - } -} - -.diary_post .richtext { - margin-top: $lineheight; - } - -.comments .richtext { - margin-left: 70px; - margin-top: 0; -} - -/* Rules for rich text editors */ - -input.richtext_title[type="text"] { - width: 50%; - width: calc(100% - 235px); - - @media only screen and (max-width:768px) { - width: 100%; - } -} - -.richtext_container { - margin-bottom: $lineheight; - - .richtext_content { - width: 50%; - width: calc(100% - 235px); - display: inline-block; - vertical-align: top; - - @media only screen and (max-width:768px) { - width: 100%; - } - - .richtext_preview { - display: inline-block; - padding: $lineheight; - background-color: $offwhite; - overflow-x: auto; - - &.loading { - background-image: image-url("loading.gif"); - background-repeat: no-repeat; - background-position: center; - } - - > :first-child { - margin-top: 0px; - } - } - } - - .richtext_help { - display: inline-block; - vertical-align: top; - margin-left: 15px; - background-color: #f8f8ff; - padding: $lineheight/2; - width: 220px; - - ul { - margin-bottom: 0; - } - - h4.heading, li { - border-bottom: 1px solid #ccc; - margin-bottom: $lineheight/4; - padding-bottom: $lineheight/4; - } - - li h4, li span, li p { - display: inline-block; - vertical-align: top; - font-size: 11px; - } - - li h4 { - width: 40%; - margin: 0; - } - - li span, li p { - width: 50%; - margin-left: $lineheight/2; - margin-bottom: $lineheight/4; - white-space: nowrap; - } - } -} - -/* Rules for the user notes list */ - -.note_list { - tr.creator { - background-color: #eeeeee; - } - - td { - padding: 3px; - } - - p { - margin-bottom: 0px; - } -} - -/* Rules for the iD editor */ - -.id-embed { - width: 100%; - height: 100%; -} - -/* Rules for dropdown menus */ - -.dropdown { - position: relative; -} - -.dropdown-toggle { - *margin-bottom: -3px; -} - -.dropdown-toggle:active, -.open .dropdown-toggle { - outline: 0; -} - -.caret { - display: inline-block; - width: 0; - height: 0; - vertical-align: top; - border-top: 4px solid #000000; - border-right: 4px solid transparent; - border-left: 4px solid transparent; - content: ""; -} - -.dropdown .caret { - margin-top: 8px; - margin-left: 2px; -} - -.dropdown-menu { - position: absolute; - top: 100%; - left: -1px; - z-index: 1000; - display: none; - float: left; - min-width: 160px; - padding: 5px 0; - margin: 0; - list-style: none; - background-color: #ffffff; - border: 1px solid #ccc; - border-radius: 0 3px 3px; - *border-right-width: 2px; - *border-bottom-width: 2px; - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); - background-clip: padding-box; -} - -.dropdown-menu.pull-right { - right: 0; - left: auto; -} - -.dropdown-menu .divider { - *width: 100%; - height: 1px; - margin: 9px 1px; - *margin: -5px 0 5px; - overflow: hidden; - background-color: #e5e5e5; - border-bottom: 1px solid #ffffff; -} - -.dropdown-menu > li > a { - display: block; - padding: 3px 10px; - clear: both; - font-weight: normal; - line-height: 20px; - color: #333333; - white-space: nowrap; -} - -.dropdown-menu > li > a:hover, -.dropdown-menu > li > a:focus, -.dropdown-submenu:hover > a, -.dropdown-submenu:focus > a { - color: #ffffff; - text-decoration: none; - background-color: $green; -} - -.dropdown-menu > .active > a, -.dropdown-menu > .active > a:hover, -.dropdown-menu > .active > a:focus { - color: #ffffff; - text-decoration: none; - background-color: $green; - outline: 0; -} - -.dropdown-menu > .disabled > a, -.dropdown-menu > .disabled > a:hover, -.dropdown-menu > .disabled > a:focus { - color: #999999; -} - -.dropdown-menu > .disabled > a:hover, -.dropdown-menu > .disabled > a:focus { - text-decoration: none; - cursor: default; - background-color: transparent; - background-image: none; -} - -.open { - *z-index: 1000; -} - -.open > .dropdown-menu { - display: block; -} - -.dropdown-backdrop { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 990; -} - -/* 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 { - background-position: -50px 0; - } - - .sprite.term { - margin-right: 10px; - vertical-align: middle; - } - - .sprite.node { - background-position: -100px 0; - } - - .sprite.way { - background-position: -150px 0; - } - - .sprite.tag { - background-position: -200px 0; - } - - .sprite.editor { - background-position: -250px 0; - } - - .sprite.question { - background-position: -300px 0; - } - - .start-mapping { - margin: auto; - cursor: pointer; - border: none; - padding: 20px 40px; - font-size: 30px; - text-decoration: none; - } - - .note-box { - margin-top: 20px; - background-color: $offwhite; - } - - .icon.note { - background-color: #333; - border-radius: 4px; - } -} - -.site-about #content { - //background-color: #000; - background-color: #eee; - background-position: 50% 50%; - background-repeat: no-repeat; - background-size: cover; - background-attachment: fixed; - - .caption { - max-width: 200px; - font: 13px/20px Helvetica, Arial, sans-serif; - position: fixed; - text-align: right; - right: 20px; - bottom: 60px; - text-shadow: #000 0px 1px 5px; - color: #eee; - opacity: 0.8; - display: none; - } - - .caption a { - color: white; - white-space: nowrap; - text-decoration: none; - } - - a.next { - display: block; - position: fixed; - right: 10px; - bottom: 10px; - width: 40px; - height: 40px; - border-radius: 5px; - text-indent: -9999px; - overflow: hidden; - background: image-url('about/sprite.png') -120px 0px no-repeat; - background-color: #000; - background-color: rgba(0, 0, 0, 0.5); - } - - .content-inner { - position: relative; - color: #333; - min-width: 320px; - max-width: 640px; - - .section { - margin-bottom: 30px; - } - - .section:last-child { - margin-bottom: 0; - } - } - - .text { - background: white; - padding: 40px; - } - - .attr { - position: relative; - padding: 170px 40px 20px; - background: #333; - background: rgba(0, 0, 0, .8); - margin-bottom: 0; - margin-top: -20px; - - h1 { - display: block; - color: white; - font-weight: 300; - font-size: 34px; - span { - color: #76c551; - } - } - - .user-image { - position: absolute; - top: 0px; - right: 240px; - left: 0px; - height: 150px; - background-position: 0 50%; - background-repeat: no-repeat; - background-image: image-url('about/osm.png'); - background-size: cover; - background-color: #76c551; - } - - .byosm { - position: absolute; - top: 0px; - right: 0px; - z-index: 1; - width: 240px; - height: 150px; - padding: 20px 20px 20px 40px; - font: 500 20px/24px Helvetica, Arial, sans-serif; - white-space: nowrap; - color: #fff; - background: #76c551; - } - - .byosm span { - display: inline-block; - width: 20px; - margin-left: -20px; - } - } - - h2 { - margin-bottom: 10px; - } - - .icon { - width: 30px; - height: 30px; - margin-right: 10px; - vertical-align: middle; - background: 40px 40px image-url('about/sprite.png') no-repeat; - - &.local { background-position: 0px 0px; } - &.community { background-position: 0px -40px; } - &.open { background-position: 0px -80px; } - &.partners { background-position: 0px -120px; } - &.infringement { background-position: 0px -160px; } - } -} - -@import 'browse'; - -@media only screen and (max-width:960px) { - .header-illustration.new-user-arm { - display: none; - } -} -