X-Git-Url: https://git.openstreetmap.org/rails.git/blobdiff_plain/2880d66eb8f8568faa0a541171dfb703e7a72c08..7bd8f813ef824d3d04d756b55ce989d61e3e5b22:/app/assets/stylesheets/common.css.scss diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss index f7018af99..9071fa32b 100644 --- a/app/assets/stylesheets/common.css.scss +++ b/app/assets/stylesheets/common.css.scss @@ -48,6 +48,12 @@ abbr, acronym { /* Default rules for the body of every page */ +* { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + body { font-family: 'Helvetica Neue',Arial,sans-serif; font-size: 14px; @@ -169,7 +175,7 @@ table { height: 100%; width: 185px; font-size: 11px; - line-height: 12px; + line-height: 1.1; z-index: 100; border-right: 1px solid #ccc; } @@ -187,7 +193,7 @@ table { #logo h1 { font-size: 18px; - line-height: 20px; + line-height: 1.1; text-align: center; margin: 0px; } @@ -262,8 +268,8 @@ table { left: 0px; margin: 0; padding: 5px 10px; - line-height: 15px; font-size: 12px; + line-height: 1.25; list-style-type: none; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; @@ -335,14 +341,10 @@ table { width: 165px; padding: 3px; font-size: 14px; - line-height: 15px; + line-height: 1.1; height: 25px; padding: 2px 0px 2px 5px; box-shadow: inset #DDD 0px 1px 3px; - box-sizing: border-box; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; } #search_field input[type="text"]:focus { @@ -382,38 +384,26 @@ table { .donate { display: block; - position: relative; - width: 153px; + width: 164px; padding: 5px; border: 1px solid #AED1A0; background: #cbeea7; - line-height: 20px; - text-align: center; font-size: 14px; + line-height: 1.4; + text-align: center; border-radius: 2px; - -moz-border-radius: 2px; color: #222; margin: 10px 10px 0px 10px; -} -.donate:hover { - background: #9ed485; - text-decoration: none; -} - -.donate p { - text-indent: 20px; - margin: 0; -} - -.donate .donate-icon { - width: 15px; - height: 15px; - border: 0px; - background: image-url("sprite.png") 0 -30px no-repeat; - position: absolute; - top: 8px; - left: 17px; + &:hover { + background: #9ed485; + text-decoration: none; + } + span { + margin: 0; + padding-left: 18px; + background: image-url("sprite.png") 0 -29px no-repeat; + } } /* Rules for Creative Commons logo button */ @@ -428,7 +418,7 @@ table { #top-bar { position: relative; margin-left: 185px; - height: 29px; + height: 30px; border-bottom: 1px solid #ccc; background: white; z-index: 100; @@ -443,7 +433,7 @@ table { } #tabnav { - height: 29px; + height: 30px; margin-bottom:0; overflow: hidden; } @@ -454,7 +444,6 @@ table { #tabnav a, #tabnav a:link, #tabnav a:visited { float: left; - background: #fff; font-weight: bold; padding: 3px 10px; text-decoration: none; @@ -529,10 +518,21 @@ table { /* Rules for Leaflet maps */ -.leaflet-control-attribution a.disabled { - color: #99c9dc; - cursor: default; - text-decoration: none; +.leaflet-control-attribution { + a.disabled { + color: #99c9dc; + cursor: default; + text-decoration: none; + } + + ul.secondary-actions { + float: left; + margin-right: 5px; + + &:only-child { + margin-right: 0px; + } + } } .site-index .leaflet-top, @@ -681,7 +681,12 @@ table { } .search_results_entry { - margin-bottom: 0 ; + margin-bottom: 0; + + .search_details { + display: block; + text-align: right; + } } .search_results_entry .search_searching { @@ -772,12 +777,12 @@ ul.results-list li { border-bottom: 1px solid #ccc; } position: fixed; padding: 0; top: 30px; bottom: 0; - left: 185px; right: 0; + left: 184px; right: 0; border-left: 1px solid #ccc; } .wrapper { - margin-left: 185px; + margin-left: 184px; border-left: 1px solid #ccc; text-align: left; } @@ -854,7 +859,7 @@ ul.results-list li { border-bottom: 1px solid #ccc; } .content_map { position: relative; width: 45%; - height: 398px; + height: 400px; border: 1px solid #ccc; margin-bottom: 20px; float: right; @@ -911,17 +916,31 @@ ul.results-list li { border-bottom: 1px solid #ccc; } } } +#changeset_list_map_wrapper { + position: absolute; + width: 50%; + height: 490px; + top: 0; + right: 0; +} + +#changeset_list_map_wrapper.scrolled { + position: fixed; +} + #changeset_list_map { position: absolute; bottom: 20px; top: 20px; right: 20px; - width: 45%; - min-height: 398px; - max-height: 598px; + left: 20px; border: 1px solid #ccc; } +#changeset_list_map_wrapper.scrolled #changeset_list_map { + margin-left: 93px; +} + /* Rules for the data browser */ .browse-section { @@ -935,15 +954,15 @@ ul.results-list li { border-bottom: 1px solid #ccc; } background-color: #ffe0cc; margin: 0px; padding: 4px 6px; - } - div { - clear: left; + max-width: 100%; } h4, p { margin-bottom: 5px; } - p, ul, .bbox { - margin-left: 33.3333%; + p, ul, .bbox, .geo { + display: inline-block; + vertical-align: top; + max-width: 65%; } ul p { margin-left: 0; @@ -951,7 +970,8 @@ ul.results-list li { border-bottom: 1px solid #ccc; } } h4 { width: 33.3333%; - float: left; + display: inline-block; + vertical-align: top; } } @@ -1147,7 +1167,7 @@ ul.results-list li { border-bottom: 1px solid #ccc; } } h1, h2 { font-size: 21px; - line-height: 21px; + line-height: 1; } small.deemphasize { float: left; @@ -1175,7 +1195,7 @@ ul.results-list li { border-bottom: 1px solid #ccc; } #map { position: relative; width: 90%; - height: 398px; + height: 400px; border: 1px solid #ccc; display: none; margin-bottom: 20px; @@ -1255,8 +1275,8 @@ div#slim_content form#termsForm { p#contributorGuidance { background-color: #f4f4ff; - border-radius: 3px; - -moz-border-radius: 3px; + border-radius: 4px; + -moz-border-radius: 4px; margin-top: 20px; padding: 10px; } @@ -1273,8 +1293,8 @@ p#contributorGuidance { #accountForm .user_map { position: relative; - width: 498px; - height: 398px; + width: 500px; + height: 400px; border: 1px solid #ccc; } @@ -1419,7 +1439,7 @@ p#contributorGuidance { vertical-align: top; font-weight: bold; font-size: 12px; - line-height: 20px; + line-height: 1.6666; text-align: right; } @@ -1458,8 +1478,8 @@ img.user_thumbnail { } img.user_thumbnail_tiny { - max-width: 24px; - max-height: 24px; + max-width: 25px; + max-height: 25px; border: 1px solid #ccc; } @@ -1479,7 +1499,7 @@ abbr.geo { .rsssmall { position: relative; - top: 4px; + top: 5px; } /* General styles for action lists / subnavs / pager navs */ @@ -1586,14 +1606,18 @@ a.button.submit { font-size: 14px; } + code { + font-size: 13px; + background: #e8e8e8; + padding: 2px 3px; + } + img { padding: 20px; background-color: #f4f4ff; display: block; max-width: 100%; margin: auto; - box-sizing: border-box; - -moz-box-sizing: border-box; } blockquote { @@ -1631,18 +1655,15 @@ a.button.submit { /* Rules for rich text editors */ .richtext_container { - white-space: nowrap; - .richtext_content { display: inline-block; vertical-align: top; - white-space: normal; .richtext_preview { display: inline-block; padding: 20px; background-color: #f4f4ff; - overflow-x: scroll; + overflow-x: auto; &.loading { background-image: image-url("loading.gif"); @@ -1662,7 +1683,7 @@ a.button.submit { margin-left: 15px; background-color: #f8f8ff; padding: 10px; - width: 200px; + max-width: 450px; ul { margin-bottom: 0; @@ -1674,20 +1695,22 @@ a.button.submit { padding-bottom: 5px; } - li h4, li span { - display: block; + li h4, li span, li p { + display: inline-block; + vertical-align: top; font-size: 11px; } li h4 { + width: 35%; margin: 0; - float: left; } - li span { - float: right; - width: 50%; + li span, li p { + width: 60%; margin-left: 10px; + margin-bottom: 5px; + white-space: nowrap; } input.richtext_doedit, @@ -1765,6 +1788,7 @@ a.button.submit { .comment { width: 100%; + height: 100px; } .buttons { @@ -1772,3 +1796,34 @@ a.button.submit { text-align: right; } } + +/* + * Rules for the iD editor + */ +.id-embed { + width: 100%; + height: 100%; +} + +/* Rules for rotating sidebar ads */ +.ad-container { + display: block; + height: 120px; + overflow: hidden; + position: relative; + border-bottom: 1px solid #ccc; +} + +.ads { + width: 370px; + position: absolute; + left: 0%; +} + +.ad { + float: left; + height: 120px; + padding: 10px; + border: 0px; + background: #fff; +}