X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/10c9ca81c788c5aa3cd7a66d9cdbaedc14def1bc..bc27347b8f8333b65962b8c00f76dc99a1095a8a:/app/assets/stylesheets/common.css.scss diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss index dd29b813d..13910e565 100644 --- a/app/assets/stylesheets/common.css.scss +++ b/app/assets/stylesheets/common.css.scss @@ -5,9 +5,16 @@ $typeheight: 14px; $offwhite: #f4f4ff; $blue: #7092FF; $lightblue: #B8C5F0; -$grey: #AAA; -$keyline: #CCC; +$green: #7ebc6f; +$grey: #CCC; +$red: red; +$lightgrey: #EEE; +$darkgrey: #AAA; $hovercolor: 20%; +$headerHeight: 54px; +$sidebarWidth: 300px; +$keyline: 1px solid $lightgrey; +$border-radius: 3px; /* Styles common to large and small screens */ @@ -45,6 +52,8 @@ abbr, acronym { cursor: help; } +strong { font-weight: 500; } + /* Micro Clearfix | Details: http://nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix:before, @@ -57,12 +66,44 @@ abbr, acronym { 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 */ * { - -moz-box-sizing: border-box; -webkit-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } body { @@ -81,36 +122,18 @@ body.slim { } h1, h2, h3 { - margin-top: $lineheight/2; - margin-bottom: $lineheight; - font-weight: bold; + font-weight: 500; line-height: 1.2; } -h1, h2 { - font-size: 32px; -} - -#content h2 { - font-size: 21px; -} - -h3 { - font-size: 21px; - margin-top: $lineheight/2; - margin-bottom: $lineheight; -} +h4, h5 { font-weight: 500; } -h4,h5,h6 { - font-size: $typeheight; - margin-top: $lineheight/2; - margin-bottom: $lineheight/2; - font-weight: bold; - line-height: 1.5; +h1 { + font-size: 18px; } -p, ul { - margin-bottom: $lineheight; +h2, h3 { + font-size: 16px; } p > img { @@ -122,15 +145,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; @@ -141,6 +155,8 @@ h6:first-child { margin-right: $lineheight/4; } +.red { color: $red; } + /* Rules for icons */ .icon { @@ -151,10 +167,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; } @@ -162,6 +174,7 @@ h6:first-child { .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; } @@ -170,12 +183,15 @@ h6:first-child { .icon.close { background-position: -200px 0; } .icon.check { background-position: -220px 0; } .icon.note { background-position: -240px 0; } +.icon.gear { background-position: -260px 0; } /* Rules for links */ a { color: #00f; text-decoration: none; + -webkit-appearance: none; + outline: 0; &:hover { text-decoration: underline; } @@ -201,7 +217,7 @@ table { line-height: $lineheight; } th { - font-weight: bold; + font-weight: 500; vertical-align: top; } td { @@ -209,304 +225,205 @@ table { } } -/* Rules for the whole left sidebar, including the logo */ - -#left { - position: absolute; - height: 100%; - width: 185px; - font-size: 11px; - line-height: 1.1; - z-index: 100; - border-right: 1px solid #ccc; -} - -/* Rules for the OpenStreetMap logo in the top left corner */ - -#logo { - display: block; - width: 170px; - min-width: 170px; - padding: $lineheight $lineheight/4; - text-align: center; - margin: auto; -} - -#logo h1 { - font-size: 18px; - line-height: 1; - text-align: center; - margin: 0; -} - -#logo h2 { - font-size: $lineheight/2; - line-height: 15px; - margin: 0; -} - -/* Rules for the site name */ - -#small-title { - display: none; -} - -/* Rules for the introductory text displayed in the left sidebar to new users */ - -.sidebar-copy { - padding: $lineheight/4 $lineheight/2; - p { - margin: $lineheight/4 0; - } -} -.sidebar-copy.intro { - border-top: 1px solid #ccc; -} - -/* - * Rules for alert boxes shown in the left sidebar when important - * information needs to be conveyed such as when the site is - * undergoing maintenance. - */ +/* Utility for de-emphasizing content */ -.sidebar-alert { - padding: $lineheight/4; - border-top: 1px solid #ccc; - margin-top: 4px; - margin-bottom: -5px; - background: #e00; - font-size: 12px; - font-weight: bold; - p { - margin: $lineheight/4; +.deemphasize { + color: #999; + a { + color: $blue; } } -/* - * Rules for notice boxes shown in the left sidebar when important, but - * non-critical information needs to be conveyed such as notices about - * donation drives. - */ - -.sidebar-notice { - padding: $lineheight/4; - border-top: 1px solid #ccc; - margin-top: 4px; - margin-bottom: -5px; - background: #ea0; - font-size: 12px; - p { - margin: $lineheight/4; - } -} +/* Rules for the header */ -/* Rules for the menu displayed in the left sidebar */ +header { + height: $headerHeight; + position: relative; + // border-bottom: $keyline; + z-index: 1001; + font-size: 13px; -.left_menu { - left: 0px; - margin: 0; - padding: $lineheight/4 $lineheight/2; - font-size: 12px; - line-height: 1.25; - list-style-type: none; - border-bottom: 1px solid #ccc; - border-top: 1px solid #ccc; - img { - margin: $lineheight/2 0px; + h1, nav, nav > ul, nav > ul > li, .dropdown { + display: inline-block; } - ul { - padding: 0; - margin: 0; + > * { + height: 100%; + padding: $lineheight/2 $lineheight; } - li { - list-style-type: none; - padding: 0; - margin: 0; + h1, nav.primary { + float: left; } - h4 { - padding: $lineheight/4 0 $lineheight/4 0; - font-size: 12px; - margin: 0; + a, a:hover { + text-decoration: none; } - li:last-child h4 { - padding-top: 0; + img.logo { + width: 30px; + height: 30px; + margin-top: -4px; + vertical-align: middle; } -} -/* Rules for SOTM advert */ + h1 { + margin: 0; + padding: ($lineheight - 3) $lineheight ($lineheight + 3); -#sotm { - width: 165px; - margin: $lineheight/2; - padding: 0px; - border: 0px; - background: #fff; - img { - width: 165px; + a { + color: #000; + } } } -/* - * Rules for "optional boxes" which appear in the left sidebar on - * certain pages. Current users are the seach box on the main page - * and the tag cloud on the traces pages. - */ - -.optionalbox { - left: 0px; - padding: $lineheight/4 $lineheight/2; - margin: $lineheight/4 0; - text-align: left; -} +nav.primary { + > ul { + $border: 1px solid $green; -/* Rules for the search box */ + border: $border; + border-radius: $border-radius; -#search_field { - position: relative; + > li { + border-right: $border; + &: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; } + > 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%); } + } + } + } - form { - width: 165px; + a.tab, + .dropdown-toggle { + display: inline-block; + font-weight: 500; + color: $green; + padding: 5px 15px; } - input[type="text"] { - width: 165px; - padding: 3px; - font-size: $typeheight; - line-height: 1.1; - height: 25px; - padding: 2px 0px 2px $lineheight/4; - box-shadow: inset #DDD 0px 1px 3px; + .dropdown-toggle { + padding: 5px 6px; } - input[type="text"]:focus { - outline: none; - border: 1px solid #000; + .caret { + border-top-color: $green; + margin-top: 10px; } - input[type="submit"] { - border: 0; - margin: 0; - padding: 0; - width: 15px; - height: 15px; - min-width: 0; - text-indent: -1000px; - overflow: hidden; - background: image-url("sprite.png") 0 0 no-repeat; - position: absolute; - top: $lineheight/4; - right: $lineheight/4; - cursor: pointer; + .disabled a { + color: #ccc; + cursor: default; + + .caret { + border-top-color: #ccc; + } } -} -.search_help { - margin: $lineheight/4 0 0 0; -} + > ul li.current { + background-color: $green; -/* Utility for de-emphasizing content */ + .tab { + color: #fff; + } -.deemphasize { - color: #999; - a { - color: $blue; + .caret { + border-top-color: #fff; + } } } -/* 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 $lineheight/2 0px $lineheight/2; +nav.secondary { + position: absolute; + right: 0; - &:hover { - background: #9ed485; + > ul a, + .dropdown-toggle { + display: inline-block; text-decoration: none; + color: $darkgrey; + padding: 5px; + + &:hover { color: darken($darkgrey, 10%); } } -} -/* Rules for Creative Commons logo button */ + > ul li.current a { + color: darken($darkgrey, 25%); + } -#cclogo { - margin: $lineheight/2 0; - float: right; -} + .user-menu { + $border: 1px solid $grey; -/* Rules for tabbed navigation bar */ + font-weight: 500; + border: $border; + border-radius: $border-radius; + margin-left: 10px; -#top-bar { - position: relative; - margin-left: 185px; - height: 30px; - border-bottom: 1px solid #ccc; - background: white; - z-index: 100; -} + > li { + border-right: $border; + &:last-child { + border-right: 0; -.site-edit #top-bar, -.site-index #top-bar, -.site-export #top-bar { - position: fixed; - left: 0; - 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%); } + } -#tabnav { - height: 29px; - margin-bottom:0; - overflow: hidden; - li { - display: inline; + a { + padding: 5px 15px; + } + + &.logged-in > a { + padding: 0; + > .user-button { + padding: 5px 10px 5px 6px; + display: inline-block; + } + } } - a, a:link, a:visited { - float: left; - font-weight: bold; - padding: 3px $lineheight/2; - text-decoration: none; - color: #333; - float: left; - margin-right: 1px; - -webkit-transition: color 200ms ease-in; - -moz-transition: color 200ms ease-in; - -o-transition: color 200ms ease-in; - transition: color 200ms ease-in; + + .caret { + border-top-color: $grey; + margin-top: 9px; } -} -.site-index #tabnav a#viewanchor, -.site-edit #tabnav a#editanchor, -.changeset-list #tabnav a#historyanchor, -.site-export #tabnav a#exportanchor { - border-bottom: 1px solid #aaa; - background: #9ed485; - color: #000; -} + img.user_thumbnail_tiny { + border: 0; + vertical-align: top; + margin-top: 0px; + margin: 3px 0 0 3px; + border-radius: 2px; + } -#tabnav a:link:hover, #tabnav a:visited:hover { - text-decoration: underline; -} + #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; + } -#tabnav a:link.disabled, -#tabnav a:visited.disabled, -#tabnav a:link:hover.disabled, -#tabnav a:visited:hover.disabled { - color: #ccc; - cursor: default; - &:hover { - text-decoration: none; + .dropdown-menu { + left: auto; + right: 0; + + .count-number { + float: right; + padding: 0 5px; + margin: 0; + } } } @@ -521,18 +438,6 @@ a.donate { color: #333; } -/* Rules for greeting bar in the top right corner */ - -#greeting { - float: right; - padding-top: 3px; - margin-right: $lineheight/4; -} - -.greeting-bar-unread { - font-weight: bold; -} - /* Rules for the message shown in place of the map when javascript is disabled */ #noscript { @@ -542,109 +447,365 @@ a.donate { left: 15px; } -/* Rules for Leaflet maps */ +/* Rules for bootstrap tooltips */ + +.tooltip { + position: absolute; + display: none; + color: #333; + text-align: left; + font-size: 12px; + max-width: 250px; +} -.leaflet-control a { +.tooltip.in { + opacity: 0.8; + z-index: 1030; + height: auto; display: block; - height: 40px; - width: 40px; - background-color: white; - background-color: rgba(255,255,255,.8); - border-radius: 4px; - margin-bottom: 10px; } -.leaflet-control a:hover { - background-color: white; +.tooltip.top { + margin-top: -10px; + text-align: center; } -.leaflet-control a .icon { - margin: 10px; +.tooltip.right { + margin-left: 10px; } -#map-ui { - position: absolute; - display: none; - right: 0; - width: 200px; - height: 100%; - background: white; +.tooltip.bottom { + margin-top: 10px; + text-align: center; +} - .leaflet-container { - width: 100%; - height: 50px; - } +.tooltip.left { + margin-left: -10px; + text-align: right; } -.leaflet-control-attribution { - a.disabled { - color: #99c9dc; - cursor: default; - text-decoration: none; - } +.tooltip-inner { + display: inline-block; + padding: 10px; + font-weight: normal; + background-color: white; +} - ul.secondary-actions { - float: left; - margin-right: $lineheight/4; +.tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} - &:only-child { - margin-right: 0px; - } - } +.tooltip.top .tooltip-arrow { + bottom: -5px; + left: 50%; + margin-left: -5px; + border-top-color: white; + border-width: 5px 5px 0; } -.site-index .leaflet-top, -.site-export .leaflet-top { - top: $lineheight/2 !important; - .leaflet-control { - margin-top: 0px !important; - } +.tooltip.right .tooltip-arrow { + top: 50%; + left: -5px; + margin-top: -5px; + border-right-color: white; + border-width: 5px 5px 5px 0; } -.site-index #map .olControlScaleLine, -.site-export #map .olControlScaleLine { - left: $lineheight/2 !important; +.tooltip.left .tooltip-arrow { + top: 50%; + right: -5px; + margin-top: -5px; + border-left-color: white; + border-width: 5px 0 5px 5px; } -.leaflet-popup-scrolled { - padding-right: $lineheight; - border-bottom: 0px !important; - border-top: 0px !important; +.tooltip.bottom .tooltip-arrow { + top: -5px; + left: 50%; + margin-left: -5px; + border-bottom-color: white; + border-width: 0 5px 5px; } -.leaflet-popup-content-wrapper { - border-radius: 4px !important; - -webkit-border-radius: 4px !important; -} +/* Rules for Leaflet maps */ -/* Rules for edit menu */ +.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; -.menuicon { - padding: 0 $lineheight/4; - font-weight: normal; - display: inline-block; &:hover { - text-decoration: none !important; + background-color: black; + } + + &.active { + background-color: #9ed485; + } + + &.disabled { + background-color: #333; + background-color: rgba(0,0,0,.5); + cursor: default; + } + + .icon { + margin: 10px; } } -.menu { - display: none; - z-index: 10000; - position: absolute; - background-color: #ffffff; - border: 1px solid $keyline; - border-top: 0px; - ul { - margin: 0px; +.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 { + 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; + + h2, h3, h4 { + padding: $lineheight $lineheight $lineheight/2; + } + + h4 { + font-weight: normal; + color: #666; + font-size: 12px; + } + + .icon.close { + position: absolute; + right: $lineheight; + } + + .footer { + position: absolute; + bottom: 0; + } + + p.credits { + font-size: 11px; + color: #999; + + a { + color: #666; + } + } + + p.large-text { + font-size: 1.7em; + line-height: 1.4em; + font-weight: 300; + } } + + #sidebar.minimized { + position: absolute; + z-index: 1000; + height: auto; + border-right: none; + + #sidebar_content { + display: none; + } + + #search_form { + background: none; + width: 78%; + } + } + + #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; + } + } +} + +.layers-ui, +.share-ui { + li:last-child { + margin-bottom: 0; + } +} + +.layers-ui { li { - padding: 2px $lineheight/4; - border-top: 1px solid #eee; - white-space: nowrap; + overflow: hidden; + border-radius: 3px; + border: 3px solid #fff; + margin-bottom: 8px; + position: relative; + transition: border-color 0.08s ease-in; + } + + label { + position: absolute; + top: 12px; + left: 10px; + cursor: pointer; + font-weight: 500; + font-size: 16px; + text-stroke: 2px #fff; + text-shadow: + -2px -2px 1px #fff, + 2px -2px 1px #fff, + -2px 2px 1px #fff, + 2px 2px 1px #fff; + } + + li.active { + border-color: darken($green, 10%); + } + + li:hover { + border-color: $grey; + &.active { border-color: darken($green, 20%); } + } + + .base-layers { + .leaflet-container { + width: 100%; + height: 50px; + cursor: pointer; + } + } +} + +.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.leaflet-right { + top: $lineheight !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 { @@ -660,66 +821,127 @@ a.donate { text-align: center; } -/* Rules for the popout map sidebar */ +/* Rules for the sidebar */ -#sidebar { - display: none; +.sidebar_heading { + position: relative; + padding: $lineheight/2 $lineheight; + // background: $offwhite; + // border-bottom: 1px solid #ccc; + > .close { + float: right; + margin-top: 2px; + cursor: pointer; + } +} + +#sidebar_content { position: absolute; - overflow: auto; - top: 0px; - bottom: 0px; - left: 0px; - border-right: 1px solid $keyline; - width: 33.3333%; - .sidebar_heading { + top: 50px; + bottom: 0; + width: 100%; + overflow-y: auto; + + .loader, + .load_more { + text-align: center; + margin: $lineheight auto; + width: $lineheight; + display: block; + } +} + +/* Rules for the search box */ + +#search_form { + position: relative; + padding: $lineheight/2 $lineheight; + background-color: $lightgrey; + + #query_wrapper { position: relative; - padding: $lineheight/2 $lineheight; - z-index: 9999; - background: $offwhite; - border-bottom: 1px solid #ccc; + overflow: hidden; } - h4 { - margin: 0; + + 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; } - ul { - margin-bottom: 0; - &:last-child { - border-bottom: 1px solid #ccc; - } - li { - margin-bottom: $lineheight/4; - &:last-child { - margin-bottom: 0; - } - } + + 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; } } -#sidebar_close { - position: absolute; - height: $lineheight; - top: 0px; - bottom: 0; - right: $lineheight; - margin: auto; +/* 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; + } } -#sidebar_content { +/* Rules for rotating sidebar ads */ + +.ad-container { + display: block; + height: 120px; + margin: auto; + overflow: hidden; position: relative; - margin-bottom: 20px; - width: 100%; - h4 { - padding: 0 $lineheight $lineheight/2 $lineheight; - margin-top: $lineheight/2; - margin-bottom: 0; - border-bottom: 1px solid #ddd; + 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 { - padding: $lineheight $lineheight 0 $lineheight; .mapkey-table-key img { display: block; margin-left: auto; @@ -732,29 +954,21 @@ a.donate { /* Rules for search results which appear in the popout sidebar */ -.search_searching { - margin-top: $lineheight/4; - margin-bottom: $lineheight/4; -} - .search_results_entry { - margin-bottom: 0; + ul li { + border-bottom: $keyline; + &:first-child { border-top: $keyline; } + } .search_details { display: block; + float: right; text-align: right; + margin-top: 0.2em; + margin-left: 0.5em; } } -.search_results_entry .search_searching { - text-align: center; - margin: $lineheight auto; - width: $lineheight; - display: block; -} - -ul.results-list li { border-bottom: 1px solid #ccc; } - .search_results_error { color: #f00; } @@ -780,14 +994,116 @@ ul.results-list li { border-bottom: 1px solid #ccc; } } } -.browse_details { - position: relative; +/* Rules for entity history */ +#sidebar_content { + .browse_details { + position: relative; + border-bottom: $keyline; + } } .browse_status { display: none; } +/* Rules for the changeset list shown by the history tab */ + +#sidebar .changesets { + li { + padding: $lineheight; + border-bottom: $keyline; + cursor: pointer; + } + + li.selected { + background: #FCFEA4; + } +} + +/* Rules for the data browser */ + +#sidebar_content { + .browse-section { + padding: 10px 20px; + + h4 { + padding: 0; + } + } + + .paginate ul, .note-comments 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 { + 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: 6px 10px; + } + + .browse-tag-k { + font-weight: 500; + background-color: #F6F6F6; + border-radius: 4px 0 0 4px; + } + + .browse-tag-v { + border-left: 1px solid #CCC; + } + } +} + +/* Rules for the changeset details */ + +#sidebar_content { + .browse-section.header { + padding: 20px; + border-bottom: 1px solid #ccc; + + h2 { + padding: 0 0 5px 0; + border-bottom: none; + } + } +} + /* Rules for export information which appears in the popout sidebar */ .export_bounds { @@ -797,7 +1113,7 @@ ul.results-list li { border-bottom: 1px solid #ccc; } .export_area_inputs { margin-bottom: $lineheight/2; input[type="text"] { - width: 60px; + width: 80px; margin-bottom: 5px; } } @@ -806,45 +1122,119 @@ ul.results-list li { border-bottom: 1px solid #ccc; } margin: $lineheight/4; } -.export_details input[type="text"]#export_html_text { - width: 100%; +#export_osm { + span.small-title { + font-weight: 500; + display: block; + font-size: 14px; + padding-bottom: 5px; + } + + dl { + padding-left: 30px; + font-size: 13px; + color: #666; + dd { + margin-left: 0; + margin-bottom: 10px; + } + } } -#sidebar #marker_inputs li:last-child { - margin-bottom: $lineheight/2; +/* Rules for edit pages */ + +.site-edit { + #content { + position: absolute; + top: $headerHeight; + bottom: 0; + width: 100%; + } + + #map { + height: 100%; + } } -#export_osm, -#export_mapnik, -#export_osmarender { - display: none; +/* Rules for non-map content pages */ + +.content-heading { + background: $lightgrey; + + h1 { font-size: 22px; } } -/* Rules for the main content area */ +.content-body { + h1, h2, h3, p { + margin-bottom: $lineheight; + } -#content { - padding: $lineheight; + h1, h2, h3 { + margin-top: $lineheight/2; + } +} + +.content-inner { position: relative; + max-width: 900px; + margin: auto; + padding: $lineheight; } -.site-edit #content, -.site-index #content, -.site-export #content { - position: fixed; - padding: 0; - top: 30px; bottom: 0; - left: 184px; right: 0; - border-left: 1px solid #ccc; +/* Overrides for pages that use new layout conventions */ + +.user-new, +.user-create, +.user-terms { + .content-body .content-inner { + padding: 0; + } } -.wrapper { - margin-left: 184px; - border-left: 1px solid #ccc; - text-align: left; +.user-new, +.user-create, +.user-terms, +.user-confirm { + .content-heading .content-inner { + height: 200px; + } } -.site-edit #content { - top: 30px; +.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; + } +} + +@media only screen and (max-width:900px) { + .header-illustration.new-user-arm { + display: none; + } } #content.maximised { @@ -892,167 +1282,15 @@ ul.results-list li { border-bottom: 1px solid #ccc; } } } -.content-heading { - position: relative; - padding: $lineheight; - background: $offwhite; - h1, h2 { - margin-bottom: $lineheight/2; - line-height: 100%; - &:last-child { - margin-bottom: 0; - } - } - p { - margin-top: $lineheight/2; - margin-bottom: 0px; - } -} - -/* Rules for small maps in content areas */ - -.content_map { - position: relative; - width: 45%; - height: 400px; - border: 1px solid #ccc; - margin-bottom: $lineheight; - float: right; -} - -.content_map #small_map { - height: 100%; - width: 100%; - margin-bottom: $lineheight; -} - -/* Rules for the home page */ - -.site-export #map, -.site-index #map { - position: absolute; - top: 0px; - bottom: 0px; - left: 0px; - right: 0px; -} - -/* Rules for the edit page */ - -.site-edit #map { - position: absolute; - top: 0px; - bottom: 0px; - left: 0px; - right: 0px; - overflow: hidden; -} - -/* Rules for the changeset list shown by the history tab etc */ - -#changeset_list { - width: 100%; - ul { - padding: $lineheight/2 0; - margin-bottom: 0px; - border-top: 1px solid #ccc; - &:last-child { - border-bottom: 1px solid #ccc; - } - } - .selected { - background: #FFFFC0; - } - .date, - .user { - border-left: 1px solid #ccc; - padding-left: $lineheight/4; - margin-right: $lineheight/4; - } -} - -#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: $lineheight; - top: $lineheight; - right: $lineheight; - left: $lineheight; - border: 1px solid #ccc; -} - -#changeset_list_map_wrapper.scrolled #changeset_list_map { - margin-left: 93px; -} - -/* Rules for the data browser */ - -.browse-section { - border-top: 1px solid #ccc; - margin-top: $lineheight/2; - padding-top: $lineheight/2; - &:first-child { - margin-top: 0; - } - .warning { - background-color: #ffe0cc; - margin: 0px; - padding: 4px 6px; - max-width: 100%; - } - h4, p { - margin-bottom: $lineheight/4; - } - p, ul, .bbox, .geo { - display: inline-block; - vertical-align: top; - max-width: 65%; - } - ul p { - margin-left: 0; - margin-bottom: 0; - } - h4 { - width: 33.3333%; - display: inline-block; - vertical-align: top; - } -} - -.bbox { - div { - width: 33.3333%; - text-align: center; - padding: $lineheight/4 0; - overflow: hidden; - text-overflow: ellipsis; - float: left; - } - .max_lat, - .min_lat { - margin-left: auto; - margin-right: auto; - width: 100%; - } -} - -#browse_map .geolink { - display: none; -} +/* Rules for small maps in content areas */ -#browse_map .secondary-actions { - margin-bottom: $lineheight/2; +.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 */ @@ -1193,46 +1431,40 @@ ul.results-list li { border-bottom: 1px solid #ccc; } /* Rules for the diary list page */ -.diary_entry-list img.user_thumbnail { - float: left; -} - .diary_post { - max-width: 740px; position: relative; margin-top: $lineheight/2; padding-top: $lineheight; border-top: 1px solid #ccc; - &:first-child { - margin-top: 0; - border-top: 0; - padding-top: 0; + .post_heading { + margin-bottom: $lineheight; + + h2 { + margin-top: 0; + margin-bottom: $lineheight/2; + font-size: 24px; + } } - h1, h2 { - font-size: 21px; - line-height: 1; + + img.user_thumbnail { + float: left; } + small.deemphasize { float: left; display: block; } - ul.secondary-actions { display: inline-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; } -#content .post_heading { - margin-bottom: $lineheight; - h2 { - margin-top: 0; - margin-bottom: $lineheight/2; - font-size: 24px; - } -} - /* Rules for the diary entry page */ .diary_entry { @@ -1275,7 +1507,7 @@ ul.results-list li { border-bottom: 1px solid #ccc; } float: left; } -/* Rules for the login page */ +/* Rules for the log in page */ #login_openid_buttons { margin-bottom: 0; @@ -1288,49 +1520,25 @@ ul.results-list li { border-bottom: 1px solid #ccc; } /* Rules for the account confirmation page */ -#terms { +.user-terms { .legale { border: 1px solid #ccc; padding: $lineheight; margin-bottom: $lineheight; overflow: auto; height: 10em; - - &:p#last { - margin-bottom: 0px; - } - - &:ol { - margin-bottom: 0px; - } - - &:img { - display: block; - margin: $lineheight auto inherit auto; - } } - form.sign { - input[type=submit] { - float: left; - } - #decline { - background: $grey; - &:hover { - background: darken($grey, $hovercolor); - } + #decline { + background: $lightblue; + &:hover { + background: darken($lightblue, $hovercolor); } } - fieldset { - margin-bottom: $lineheight; - } - #contributorGuidance { - background-color: $offwhite; - border-radius: 4px; - -moz-border-radius: 4px; - } - .signing-buttons { - height: 50px; + + .form-row { + margin: auto; + max-width: 370px; } } @@ -1420,7 +1628,7 @@ ul.results-list li { border-bottom: 1px solid #ccc; } } tr td { height: 30px; - border-right: 1px solid $keyline; + border-right: 1px solid $lightgrey; } } @@ -1455,7 +1663,7 @@ ul.results-list li { border-bottom: 1px solid #ccc; } .message-read .message-buttons { margin-top: $lineheight; padding-top: $lineheight; - border-top: 1px solid $keyline; + border-top: 1px solid $lightgrey; } .message-read .buttons .mark-unread-button { @@ -1464,17 +1672,19 @@ ul.results-list li { border-bottom: 1px solid #ccc; } /* Rules for "flash" notice boxes shown at the top of the content area */ -.flash { - padding: $lineheight; - &#error { - background-color: #ff7070; - } - &#warning { - background-color: #ffe0cc; - } - &#notice { - background-color: #CBEEA7; - } +.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 */ @@ -1482,7 +1692,17 @@ ul.results-list li { border-bottom: 1px solid #ccc; } .field_with_errors { padding: 2px; background-color: #ff7070; - display: table; + display: inline-block; +} + +.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 */ @@ -1497,7 +1717,7 @@ ul.results-list li { border-bottom: 1px solid #ccc; } h2 { margin: 0 -10px 10px -10px; padding: $lineheight/4 $lineheight/4 $lineheight/4 15px; - font-weight: bold; + font-weight: 500; font-size: 12px; background-color: #c00; color: #fff; @@ -1530,7 +1750,7 @@ ul.results-list li { border-bottom: 1px solid #ccc; } display: block; margin-bottom: $lineheight/4; font-size: $typeheight; - font-weight: bold; + font-weight: 500; line-height: 1.5; } label.standard-label.secondary { @@ -1547,7 +1767,11 @@ ul.results-list li { border-bottom: 1px solid #ccc; } .form-divider { margin-top: $lineheight; padding-top: $lineheight; - border-top: 1px solid $keyline; + border-top: 1px solid $lightgrey; + } + .horizontal-list .form-row { + float: left; + padding-right: 10px; } .form-row { margin-bottom: $lineheight/2; @@ -1588,7 +1812,6 @@ textarea { textarea { padding: 5px; width: 100%; - height: 100% !important; } /* Rules for user images */ @@ -1615,12 +1838,6 @@ img.user_thumbnail_tiny { border: 1px solid #ccc; } -/* Rule for "nowrap" class that can be applied to anything to stop wrapping */ - -.nowrap { - white-space: nowrap; -} - /* Rules for geo microformats */ abbr.geo { @@ -1631,7 +1848,7 @@ abbr.geo { .rsssmall { position: relative; - top: 5px; + top: 3px; } /* General styles for action lists / subnavs / pager navs */ @@ -1644,13 +1861,13 @@ ul.secondary-actions { display: inline-block; margin-right: 60px; } - li { + > li { display: block; float: left; list-style: none; border-left: 1px solid #ccc; - padding-left: $lineheight/4; - margin-right: $lineheight/4; + padding-left: $lineheight/2; + margin-right: $lineheight/2; &:first-child { border-left: 0; padding-left: 0; @@ -1661,6 +1878,12 @@ ul.secondary-actions { } } +div.secondary-actions { + padding: 10px; + border-top: 1px solid #ccc; + text-align: center; +} + /* Utility for managing inner content areas */ .inner22 { padding: $lineheight;} @@ -1669,6 +1892,8 @@ ul.secondary-actions { .inner11 { padding: $lineheight/2;} +.inner20 { padding: $lineheight 0;} + .inner02 { padding: 0 $lineheight;} /* Utility for general button styles */ @@ -1682,6 +1907,7 @@ a.button { 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; @@ -1700,7 +1926,10 @@ a.button { } } &:disabled { - background: $lightblue; + background: $lightgrey; + &:hover { + background: $lightgrey; + } } &:last-child { margin-bottom: 0; @@ -1718,8 +1947,11 @@ a.button { border-radius: 0; margin:0; min-width: 100px; - max-width: 150px; + max-width: 180px; border-right:1px solid white; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } input:first-child, .button:first-child { @@ -1747,7 +1979,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; } } @@ -1824,7 +2056,6 @@ a.button { } ul, ol { - font-style: italic; padding-left: $lineheight; margin-bottom: $lineheight; margin-left: $lineheight; @@ -1951,7 +2182,6 @@ a.button { left: $lineheight/4; min-width: 15px; min-height: 15px; - background: image-url("sprite.png") 0 -45px no-repeat; } .permalink span { @@ -1991,25 +2221,358 @@ 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; - overflow: hidden; +/* Rules for dropdown menus */ + +.dropdown { position: relative; - border-bottom: 1px solid #ccc; } -.ad { - height: 100px; - border: 0; - background: #fff; +.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-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 { + .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-position: 50% 50%; + background-repeat: no-repeat; + 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; + 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; } + &.contributors { background-position: 0px -120px; } + &.infringement { background-position: 0px -160px; } + } } + +@import 'browse';