@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 */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; 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.gear { 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; position: absolute; top: 15px; left: 15px; } /* 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; } &.active { background-color: #9ed485; } &.disabled { background-color: #333; background-color: rgba(0,0,0,.5); cursor: default; } .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; } #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; -webkit-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; -webkit-transition: 300ms linear; -moz-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 { margin: $lineheight/2 0; p { margin-left: 10px; } } .note-description { overflow: hidden; margin: 0 0 10px 10px; } } /* 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: -moz-calc(100% - 150px); width: -webkit-calc(100% - 150px); 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 { 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; line-height: 20px; 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; -moz-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; } } .buttons { min-width: 200px; input[type="submit"], input[type="button"], input[type="reset"], .button { 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 { border-radius:2px 0 0 2px; } input:last-child, .button:last-child { border-radius:0 2px 2px 0; border-right-width: 0; } input:only-child, .button:only-child, *[value="Hide"] + input:last-child, *[value="Hide"] + .button: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) { 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) { 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: -moz-calc(100% - 235px); width: -webkit-calc(100% - 235px); width: calc(100% - 235px); @media only screen and (max-width:768px) { width: 100%; } } .richtext_container { margin-bottom: $lineheight; .richtext_content { width: 50%; width: -moz-calc(100% - 235px); width: -webkit-calc(100% - 235px); 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; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -webkit-background-clip: padding-box; -moz-background-clip: padding; 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; } }