X-Git-Url: https://git.openstreetmap.org/rails.git/blobdiff_plain/bd19e75214a05c2cc4cd36dd63d30cace2ab1f8e..b09c14218f917f9d76e89a5c2eebf6a6d0d5eedd:/app/assets/stylesheets/common.css.scss diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss index 3845c5b31..8d40bbe39 100644 --- a/app/assets/stylesheets/common.css.scss +++ b/app/assets/stylesheets/common.css.scss @@ -36,7 +36,9 @@ abbr, acronym { cursor: help; } -strong { font-weight: 500; } +strong { + font-weight: bold; +} /* Micro Clearfix | Details: http://nicolasgallagher.com/micro-clearfix-hack/ */ @@ -85,9 +87,7 @@ strong { font-weight: 500; } /* Default rules for the body of every page */ * { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + box-sizing: border-box; } body { @@ -102,16 +102,14 @@ body { height: 100%; } -body.slim { - background-color: #f0f0f0; -} - h1, h2, h3 { - font-weight: 500; + font-weight: 600; line-height: 1.2; } -h4, h5 { font-weight: 500; } +h4, h5 { + font-weight: 500; +} h1 { font-size: 18px; @@ -171,7 +169,7 @@ small, aside { .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; } +.icon.query { background-position: -260px 0; } /* Rules for links */ @@ -205,7 +203,7 @@ table { line-height: $lineheight; } th { - font-weight: 500; + font-weight: 600; vertical-align: top; } td { @@ -240,7 +238,7 @@ header { height: $headerHeight; position: relative; z-index: 1001; - font-size: 13px; + font-size: 14px; h1, nav, nav > ul, nav > ul > li, .dropdown { display: inline-block; @@ -262,7 +260,7 @@ header { img.logo { width: 30px; height: 30px; - margin-top: -4px; + margin-top: -2px; vertical-align: middle; } @@ -350,7 +348,7 @@ nav.secondary { color: $darkgrey; padding: 5px; - &:hover { color: darken($darkgrey, 10%); } + &:hover { color: darken($darkgrey, 25%); } } } @@ -360,8 +358,6 @@ nav.secondary { .user-menu { $border: 1px solid $grey; - - font-weight: 500; border: $border; border-radius: $border-radius; margin-left: 10px; @@ -388,7 +384,8 @@ nav.secondary { &.logged-in > a { padding: 0; > .user-button { - padding: 5px 10px 5px 6px; + line-height: 1.8; + padding: 5px 10px 3px 6px; display: inline-block; color: $darkgrey; } @@ -405,7 +402,7 @@ nav.secondary { border: 0; vertical-align: top; margin-top: 0px; - margin: 3px 0 0 3px; + margin: 4px 0 0 4px; border-radius: 2px; } @@ -465,9 +462,8 @@ nav.secondary { #noscript { z-index: 20000000; - position: absolute; - top: 15px; - left: 15px; + margin-left: 400px; + margin-top: 50px; } /* Rules for bootstrap tooltips */ @@ -570,16 +566,16 @@ nav.secondary { background-color: black; } - &.active { - background-color: #9ed485; - } - &.disabled { background-color: #333; background-color: rgba(0,0,0,.5); cursor: default; } + &.active { + background-color: #9ed485; + } + .icon { margin: 10px; } @@ -624,15 +620,16 @@ nav.secondary { float: left; width: $sidebarWidth; background: #fff; + font-size: 12px; - h2, h3, h4 { + h2 { padding: $lineheight $lineheight $lineheight/2; } - h4 { - font-weight: normal; - color: #666; - font-size: 12px; + h3, h4 { + margin-top: $lineheight; + margin-bottom: $lineheight/2; + font-size: 13px; } .icon.close { @@ -641,12 +638,22 @@ nav.secondary { } } + .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 { @@ -661,7 +668,7 @@ nav.secondary { float: left; margin: 0; border-radius: 0; - font-weight: 400; + font-weight: normal; padding: .6em; &.learn-more { @@ -673,6 +680,14 @@ nav.secondary { #map { height: 100%; overflow: hidden; + + &.query-active { + cursor: help; + } + + &.query-disabled { + cursor: not-allowed; + } } #map-ui { @@ -697,6 +712,14 @@ nav.secondary { color:#222; border:1px solid #ddd; } + + .tooltip { + opacity: 1; + border: 1px solid #ccc; + .tooltip-arrow { + border-top-color: #ccc; + } + } } } @@ -730,10 +753,11 @@ nav.secondary { padding: 2px 6px; border-bottom-right-radius: 3px; cursor: pointer; - font-weight: 500; + 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; } @@ -752,6 +776,7 @@ nav.secondary { font-size: 13px; margin-bottom: 8px; } + li.disabled { color: #999; } } } @@ -826,7 +851,6 @@ nav.secondary { .leaflet-popup-content-wrapper { border-radius: 4px !important; - -webkit-border-radius: 4px !important; } /* Rules for attribution text under the main map shown on printouts */ @@ -864,25 +888,34 @@ nav.secondary { p { padding: $lineheight; } + + input { + display: block; + margin-left: auto; + margin-right: auto; + } } -#sidebar_content { +#sidebar { + #sidebar_loader, .loader, .load_more { text-align: center; margin: $lineheight auto; - width: $lineheight; + width: 40px; display: block; } } -/* Rules for the search box */ +/* Rules for the search and direction forms */ -header .search_form { +header .search_forms, +.directions_form { display: none; } -.search_form { +.search_form, +.directions_form { position: relative; padding: $lineheight/2; background-color: $lightgrey; @@ -896,11 +929,11 @@ header .search_form { input[type=text] { width: 100%; height: 30px; - border-right: none; - transition: 300ms linear; - -webkit-transition: 300ms linear; - -moz-transition: 300ms linear; + } + + input[type=text].overflow { + border-right: none; } input:focus { @@ -908,13 +941,25 @@ header .search_form { box-shadow: 0px 0px 7px #9ED485; } - input[type=submit] { + input[type=submit].float { float: right; width: auto; min-width: 0; border-radius: 0 2px 2px 0; } + select { + /* this next line is to polyfill the vertical alignment of text within a select element, + * which is different between firefox and chrome. */ + padding: 0.3em 0; + } + + .query_options { + text-align: right; + font-size: 10px; + color: $blue; + } + .describe_location { position: absolute; top: 6px; @@ -922,6 +967,33 @@ header .search_form { font-size: 10px; color: $blue; } + + .switch_link { + float: right; + width: auto; + min-width: 0; + margin-left: 6px; + } + + img.button { + display: block; + } + + span.force_width { + width: 100%; + padding-right: 25px; + display: block; + } + + select.routing_engines { + min-height: 30px; + margin: 0px 0px 5px 25px; + } + + div.line { + width: 100%; + margin: 0px 0px 5px 0px; + } } /* Rules for the map key which appears in the popout sidebar */ @@ -937,12 +1009,14 @@ header .search_form { } } -/* Rules for search results which appear in the popout sidebar */ +/* Rules for search sidebar */ .search_results_entry { ul li { border-bottom: $keyline; + cursor: pointer; &:first-child { border-top: $keyline; } + &.selected { background: $list-highlight; } } .search_details { @@ -958,7 +1032,49 @@ header .search_form { color: #f00; } +/* Rules for routing */ + +#sidebar_content>table { + padding: 5px 20px 10px 15px; + width: 100%; + border-collapse: separate; +} + +div.direction { + background-image: image-url('routing-sprite.png'); + width: 20px; + height: 20px; + background-repeat: no-repeat; +} +@for $i from 1 through 17 { +div.direction.i#{$i} { background-position: #{($i)*-20+20}px 0px; } +} + +p#routing_summary { + padding: 0 $lineheight $lineheight/4; +} + +td.instruction, td.distance { + padding-top: $lineheight/5; + padding-bottom: $lineheight/5; + border-bottom: 1px solid #DDD; +} +td.distance { + color: #BBB; + text-align: right; + font-size: x-small; +} +tr.turn { + cursor: pointer; +} +tr.turn:hover { + background: $list-highlight; +} +.routing_engines, #route_from, #route_to { margin-left: 25px; } +.routing_marker { width: 15px; position: absolute; } + /* Rules for entity history */ + #sidebar_content { .browse_details { position: relative; @@ -970,44 +1086,48 @@ header .search_form { display: none; } -/* Rules for the changeset list shown by the history tab */ +/* Rules for the history sidebar */ #sidebar .changesets { li { - padding: $lineheight; - border-bottom: $keyline; + padding: 15px 20px; + border-bottom: 1px solid #ddd; cursor: pointer; - &.selected { background: #FFFFE6; } + &.selected { background: $list-highlight; } /* color is derived from changeset bbox fillColor in history.js */ - - h4 { - padding: 0; - } } - .comment a { - font-weight: 500; - color: #000; + h4 { + margin: 0; + a { + color: #000; + } } } -/* Rules for the data browser */ +/* Rules for the browse sidebar */ #sidebar_content { .browse-section { - padding: 10px 20px; + padding: $lineheight/2 $lineheight; + border-bottom: 1px solid #ddd; - h4 { - padding: 0; + h4:first-child { + margin-top: 0; + word-wrap: break-word; } + } - .paginate { - float: right; - padding: 1px 6px; - border: 1px solid #eee; - border-radius: 3px; - } + .browse-section:last-of-type { + border-bottom: none; + } + + .paginate { + float: right; + padding: 1px 6px; + border: 1px solid #eee; + border-radius: 3px; } .paginate ul { @@ -1037,26 +1157,25 @@ header .search_form { .browse-tag-list { background-color: #F6F6F6; - border-top: 1px solid #ddd; - border-bottom: 1px solid #ddd; + border: 1px solid #ddd; + border-radius: 3px; font-size: 12px; - margin-left: -$lineheight; - margin-right: -$lineheight; + table-layout: fixed; + border-collapse: separate; - li { + th, td { border-bottom: 1px solid #ddd; } - li:last-child { + tr:last-child th, tr:last-child td { border-bottom: 0; } .browse-tag-k, .browse-tag-v { - display: inline-block; width: 50%; - float: left; - padding: 6px 10px 6px $lineheight; + padding: 6px 10px; + word-wrap: break-word; } .browse-tag-k { @@ -1069,38 +1188,123 @@ header .search_form { background-color: #fff; } } -} -/* Rules for export information which appears in the popout sidebar */ + .warning { + margin: $lineheight/2 0; + padding: $lineheight/2; + font-size: 90%; + } -.export_bounds, .export_button { - text-align: center; -} + .note-comments li, .changeset-comments li { + margin: $lineheight/2 0; -.export_area_inputs { - margin-bottom: $lineheight/2; - input[type="text"] { - width: 80px; - margin-bottom: 5px; + p { + margin-left: 10px; + } } -} -.export_bound { - margin: $lineheight/4; + .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: $list-highlight; + } + } + } + } } -#export_osm { - span.small-title { - font-weight: 500; - display: block; - font-size: 14px; - padding-bottom: 5px; +/* 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: 30px; - font-size: 13px; - color: #666; + padding-left: $lineheight/2; dd { margin-left: 0; margin-bottom: 10px; @@ -1108,6 +1312,15 @@ header .search_form { } } +/* Rules for the routing sidebar */ + +#sidebar_content { + #routing_credit { + text-align: center; + padding: 0.5em; + } +} + /* Rules for edit pages */ .site-edit { @@ -1120,6 +1333,7 @@ header .search_form { #map { height: 100%; + overflow: hidden; } } @@ -1132,7 +1346,7 @@ header .search_form { } .content-body { - h1, h2, h3, p { + h1, h2, h3, p, ul, ol { margin-bottom: $lineheight; } @@ -1204,43 +1418,7 @@ header .search_form { right: 0; bottom: 0; border: 0; - z-index: 1000; -} - -#slim_container { - width: 100%; -} - -#slim_container_content { - max-width: 50em; - background-color: #FFFFFF; - margin: $lineheight/2 auto; - padding: 3px; - border-radius: 25px; - -moz-border-radius: 25px; - border: 1px solid #e6e6e6; -} - -#slim_content { - margin: $lineheight/2; - margin-top: 95px; - max-width: 50em; - - .content-heading { - margin-bottom: 15px; - } -} - -#slim_header { - margin: 30px $lineheight/2; - position: absolute; - top: 0px; - margin-right: $lineheight/4; - img { - vertical-align: middle; - margin-bottom: $lineheight/4; - margin-right: $lineheight/4; - } + z-index: 2000; } /* Rules for small maps in content areas */ @@ -1287,6 +1465,30 @@ header .search_form { } } +/* 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 { @@ -1338,6 +1540,10 @@ header .search_form { } .user-view { + // Silly exception; remove when user page is redesigned. + .content-inner { + max-width: none; + } p#no_home_location { margin: $lineheight; } @@ -1487,7 +1693,7 @@ header .search_form { padding: $lineheight; margin-bottom: $lineheight; overflow: auto; - height: 10em; + height: 20em; } #decline { @@ -1496,11 +1702,6 @@ header .search_form { background: darken($lightblue, $hovercolor); } } - - .form-row { - margin: auto; - max-width: 370px; - } } /* Rules for the account settings page */ @@ -1611,6 +1812,10 @@ header .search_form { vertical-align: middle; } +.inbox-sent { + white-space: nowrap; +} + .inbox-mark-unread, .inbox-mark-read, .inbox-delete { @@ -1623,6 +1828,7 @@ header .search_form { .message-read .message-buttons { margin-top: $lineheight; + margin-bottom: $lineheight * 1.5; padding-top: $lineheight; border-top: 1px solid $lightgrey; } @@ -1650,12 +1856,6 @@ header .search_form { /* Rules for highlighting fields with rails validation errors */ -.field_with_errors { - padding: 2px; - background-color: #ff7070; - display: inline-block; -} - .formError { display: inline-block; padding: 5px 10px; @@ -1678,7 +1878,7 @@ header .search_form { h2 { margin: 0 -10px 10px -10px; padding: $lineheight/4 $lineheight/4 $lineheight/4 15px; - font-weight: 500; + font-weight: bold; font-size: 12px; background-color: #c00; color: #fff; @@ -1711,7 +1911,7 @@ header .search_form { display: block; margin-bottom: $lineheight/4; font-size: $typeheight; - font-weight: 500; + font-weight: bold; line-height: 1.5; } label.standard-label.secondary { @@ -1768,6 +1968,10 @@ textarea { padding: 2px 5px; margin: 0; width: 200px; + + &.field_with_errors { + border: 2px solid #ff7070; + } } textarea { @@ -1794,6 +1998,8 @@ img.user_thumbnail { } img.user_thumbnail_tiny { + width: auto; + height: auto; max-width: 25px; max-height: 25px; border: 1px solid #ccc; @@ -1841,7 +2047,6 @@ ul.secondary-actions { div.secondary-actions { padding: 10px; - border-top: 1px solid #ccc; text-align: center; } @@ -1866,7 +2071,6 @@ 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; @@ -1875,7 +2079,6 @@ a.button { background: $blue; text-align: center; border-radius: 2px; - -moz-border-radius: 2px; &:hover { background: darken($blue, $hovercolor); text-decoration: none; @@ -1897,12 +2100,23 @@ a.button { } } +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, + .button_to { box-sizing: border-box; float: left; border-radius: 0; @@ -1915,30 +2129,36 @@ a.button { overflow: hidden; } input:first-child, - .button:first-child { + .button:first-child, + .button_to:first-child { border-radius:2px 0 0 2px; } input:last-child, - .button: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: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: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: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; } @@ -2042,14 +2262,28 @@ a.button { /* 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; @@ -2122,66 +2356,6 @@ a.button { } } -/* Rules for the notes interface */ - -.leaflet-popup-content .note { - padding-top: $lineheight/2; -} - -.leaflet-popup-content .note { - h2 { - margin-bottom: $lineheight/2; - } - - div { - margin-top: $lineheight/2; - } - - .permalink { - position: absolute; - top: $lineheight/4; - left: $lineheight/4; - min-width: 15px; - min-height: 15px; - } - - .permalink span { - display: none; - padding-left: $lineheight; - } - - .permalink:hover span { - display: block; - } - - .warning { - display: block; - background-color: #ffe0cc; - padding: 4px 6px; - margin-bottom: $lineheight/2; - } - - .comment_body { - margin-top: 2px; - margin-bottom: 2px; - - p { - margin-top: 0px; - margin-bottom: 0px; - } - } - - .comment { - width: 100%; - height: 100px; - } - - .buttons { - margin-top: $lineheight/4; - text-align: right; - } -} - /* Rules for the iD editor */ .id-embed { @@ -2236,12 +2410,8 @@ a.button { 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; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + background-clip: padding-box; } .dropdown-menu.pull-right { @@ -2319,7 +2489,7 @@ a.button { } /* Rules for the "Welcome" page */ -.site-welcome { +.site-welcome, .site-fixthemap { .center { text-align: center; .sprite { @@ -2406,13 +2576,6 @@ a.button { background-size: cover; background-attachment: fixed; - &.photo-0 { background-image: image-url('about/0.jpg'); .photo-0 { display: block; } } - &.photo-1 { background-image: image-url('about/1.jpg'); .photo-1 { display: block; } } - &.photo-2 { background-image: image-url('about/2.jpg'); .photo-2 { display: block; } } - &.photo-3 { background-image: image-url('about/4.jpg'); .photo-3 { display: block; } } - &.photo-4 { background-image: image-url('about/4.jpg'); .photo-4 { display: block; } } - &.photo-5 { background-image: image-url('about/5.jpg'); .photo-5 { display: block; } } - .caption { max-width: 200px; font: 13px/20px Helvetica, Arial, sans-serif;