X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/af227e5aeb1650afe432486ccf81a486a4a27574..de97f7bfe418ecedb8800236020c95f16474f1ab:/app/assets/stylesheets/common.css.scss diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss index 6a80453c6..43d59cfb5 100644 --- a/app/assets/stylesheets/common.css.scss +++ b/app/assets/stylesheets/common.css.scss @@ -97,9 +97,9 @@ abbr, acronym { /* Default rules for the body of every page */ * { - -moz-box-sizing: border-box; -webkit-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } body { @@ -139,15 +139,6 @@ small, aside { font-size: 12px; } -h1:first-child, -h2:first-child, -h3:first-child, -h4:first-child, -h5:first-child, -h6:first-child { - margin-top: 0; -} - .column-1 { width: 50%; margin: 0 0 $lineheight/2 0; @@ -168,10 +159,6 @@ h6:first-child { background:transparent image-url("sprite.png") no-repeat 0 0; text-indent:-9999px; overflow:hidden; - } - -.icon-pre-text { - margin-right: 5px; } .icon.search { background-position: 0 0; } @@ -228,51 +215,6 @@ table { } } -/* Rules for the search box */ - -#search_form { - position: relative; - padding: $lineheight; - background-color: $lightgrey; - border-bottom: $keyline; - - #query_wrapper { - position: relative; - overflow: hidden; - } - - input { - width: 100%; - height: 30px; - border-right: none; - border-radius: 2px 0 0 2px; - - 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; - } -} - /* Utility for de-emphasizing content */ .deemphasize { @@ -282,27 +224,6 @@ table { } } -/* Rules for donation request box */ - -a.donate { - display: block; - width: 163px; - padding: $lineheight/4; - border: 1px solid #AED1A0; - background: #cbeea7; - font-size: $typeheight; - line-height: 1.4; - text-align: center; - border-radius: 2px; - color: #222; - margin: $lineheight/2 auto; - - &:hover { - background: #9ed485; - text-decoration: none; - } -} - /* Rules for the header */ header { @@ -381,10 +302,6 @@ nav.primary { color: #ccc; cursor: default; - &:hover { - text-decoration: none; - } - .caret { border-top-color: #ccc; } @@ -582,7 +499,6 @@ nav.secondary { width: 40px; background-color: #333; background-color: rgba(0,0,0,.6); - -bottom: 1px solid #333; border-radius: 4px 0 0 4px; margin-bottom: 10px; outline: none; @@ -623,34 +539,88 @@ nav.secondary { border-radius: 0 0 0 4px; } -/* Rules for the home page */ +/* Rules for the sidebar and main map area */ -#map { - height: 100%; - overflow: hidden; -} +.map-layout { + #content { + position: absolute; + top: $headerHeight; + bottom: 0; + width: 100%; + } -#map-ui { - display: none; - position: relative; - float: right; - width: 250px; - height: 100%; - background: white; - overflow: auto; + #sidebar, #map { + position: relative; + height: 100%; + overflow-x: hidden; + overflow-y: auto; + } - .section { - border-bottom: 1px solid #DDD; - padding: 15px; + #sidebar { + float: left; + width: $sidebarWidth; + border-right: $keyline; + + .alert { + background: #e00; + } + + h2, h3, h4 { + padding: $lineheight; + border-bottom: $keyline; + } + + h4 { + font-weight: normal; + } + + .icon.close { + position: absolute; + right: $lineheight; + } + + .footer { + position: absolute; + bottom: 0; + } + + p.credits { + font-size: 11px; + color: #999; + + a { + color: #666; + } + } + } + + #map { + height: 100%; + overflow: hidden; } - a.close-button { + #map-ui { + display: none; + position: relative; float: right; - padding:5px; - font-size:20px; - line-height:10px; - color:#222; - border:1px solid #ddd; + width: 250px; + height: 100%; + background: white; + overflow: auto; + + .section { + border-bottom: 1px solid #DDD; + padding: 15px; + } + + a.close-button { + float: right; + padding:5px; + font-size:20px; + line-height:10px; + color:#222; + border:1px solid #ddd; + } } } @@ -779,42 +749,6 @@ nav.secondary { /* Rules for the sidebar */ -#sidebar { - border-right: $keyline; - - .alert { - background: #e00; - } - - h2, h3, h4 { - padding: $lineheight; - border-bottom: $keyline; - } - - h4 { - font-weight: normal; - } - - .icon.close { - position: absolute; - right: $lineheight; - } - - .footer { - position: absolute; - bottom: 0; - } - - p.credits { - font-size: 11px; - color: #999; - - a { - color: #666; - } - } -} - .sidebar_heading { position: relative; padding: $lineheight/2 $lineheight; @@ -839,6 +773,95 @@ nav.secondary { overflow-y: auto; } +/* Rules for the search box */ + +#search_form { + position: relative; + padding: $lineheight; + background-color: $lightgrey; + border-bottom: $keyline; + + #query_wrapper { + position: relative; + overflow: hidden; + } + + input { + width: 100%; + height: 30px; + border-right: none; + border-radius: 2px 0 0 2px; + + 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 donation request box */ + +a.donate { + display: block; + width: 163px; + padding: $lineheight/4; + border: 1px solid #AED1A0; + background: #cbeea7; + font-size: $typeheight; + line-height: 1.4; + text-align: center; + border-radius: 2px; + color: #222; + margin: $lineheight/2 auto; + + &:hover { + background: #9ed485; + text-decoration: none; + } +} + +/* Rules for rotating sidebar ads */ + +.ad-container { + display: block; + height: 120px; + margin: auto; + overflow: hidden; + position: relative; + border-bottom: 1px solid #ccc; + + a { + display: block; + width: 165px; + margin: auto; + } + + .ad { + height: 100px; + border: 0; + background: #fff; + } +} + /* Rules for the map key which appears in the popout sidebar */ #mapkey { @@ -913,6 +936,78 @@ nav.secondary { display: none; } +/* Rules for the changeset list shown by the history tab */ + +#sidebar .changesets { + li { + padding: $lineheight; + border-bottom: $keyline; + } +} + +/* Rules for the data browser */ + +#sidebar_content { + .browse-section { + padding: 20px; + border-bottom: 1px solid #CCC; + } + + .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 { + border: 1px solid #CCC; + border-radius: 4px; + font-size: 12px; + + li { + border-bottom: 1px solid #CCC; + } + + li:last-child { + border-bottom: 0; + } + + .browse-tag-k, + .browse-tag-v { + display: inline-block; + width: 50%; + height: 30px; + float: left; + padding: 9px 10px; + } + + .browse-tag-k { + font-weight: bold; + background-color: #F6F6F6; + border-radius: 4px 0 0 4px; + } + + .browse-tag-v { + border-left: 1px solid #CCC; + } + } +} + /* Rules for export information which appears in the popout sidebar */ .export_bounds { @@ -931,32 +1026,7 @@ nav.secondary { margin: $lineheight/4; } -/* Rules for the sidebar and main content area */ - -.site-index, -.site-export, -.site-edit, -.changeset-list, -.browse { - #content { - 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; - } -} +/* Rules for non-map content pages */ .content-heading { background: $lightgrey; @@ -1092,78 +1162,6 @@ nav.secondary { float: right; } -/* Rules for the changeset list shown by the history tab */ - -#sidebar .changesets { - li { - padding: $lineheight; - border-bottom: $keyline; - } -} - -/* Rules for the data browser */ - -body.browse #sidebar_content { - .browse-section { - padding: 20px; - border-bottom: 1px solid #CCC; - } - - .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 { - border: 1px solid #CCC; - border-radius: 4px; - font-size: 12px; - - li { - border-bottom: 1px solid #CCC; - } - - li:last-child { - border-bottom: 0; - } - - .browse-tag-k, - .browse-tag-v { - display: inline-block; - width: 50%; - height: 30px; - float: left; - padding: 9px 10px; - } - - .browse-tag-k { - font-weight: bold; - background-color: #F6F6F6; - border-radius: 4px 0 0 4px; - } - - .browse-tag-v { - border-left: 1px solid #CCC; - } - } -} - /* Rules for the trace list shown by the traces tab etc */ #trace_list { @@ -1842,7 +1840,7 @@ a.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 solid white; + border-right-width: 1px; } } @@ -2084,37 +2082,13 @@ a.button { } } -/* - * Rules for the iD editor - */ +/* Rules for the iD editor */ .id-embed { width: 100%; height: 100%; } -/* Rules for rotating sidebar ads */ -.ad-container { - display: block; - height: 120px; - margin: auto; - overflow: hidden; - position: relative; - border-bottom: 1px solid #ccc; - - a { - display: block; - width: 165px; - margin: auto; - } - - .ad { - height: 100px; - border: 0; - background: #fff; - } -} - /* Rules for dropdown menus */ .dropdown { @@ -2458,3 +2432,5 @@ a.button { &.infringement { background-position: 0px -160px; } } } + +@import 'browse';