X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/89a132d31c8ca3b446c716860e55bf31bc811bd0..1eab367de5950af5396756dbf09cc9bd3edc3b8f:/app/assets/stylesheets/common.css.scss diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss index 19cb873df..8ecaaf113 100644 --- a/app/assets/stylesheets/common.css.scss +++ b/app/assets/stylesheets/common.css.scss @@ -1,20 +1,4 @@ -/* Parameters */ -$lineheight: 20px; -$typeheight: 14px; - -$offwhite: #f4f4ff; -$blue: #7092FF; -$lightblue: #B8C5F0; -$green: #7ebc6f; -$grey: #CCC; -$red: red; -$lightgrey: #EEE; -$darkgrey: #AAA; -$hovercolor: 20%; -$headerHeight: 54px; -$sidebarWidth: 300px; -$keyline: 1px solid $lightgrey; -$border-radius: 3px; +@import "parameters"; /* Styles common to large and small screens */ @@ -52,7 +36,9 @@ abbr, acronym { cursor: help; } -strong { font-weight: 500; } +strong { + font-weight: bold; +} /* Micro Clearfix | Details: http://nicolasgallagher.com/micro-clearfix-hack/ */ @@ -115,18 +101,17 @@ body { margin: 0px; padding: 0px; text-align: left; -} - -body.slim { - background-color: #f0f0f0; + height: 100%; } 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; @@ -145,6 +130,8 @@ small, aside { font-size: 12px; } +#container { position: relative; } + .column-1 { width: 50%; margin: 0 0 $lineheight/2 0; @@ -189,7 +176,7 @@ small, aside { /* Rules for links */ a { - color: #00f; + color: #24d; text-decoration: none; -webkit-appearance: none; outline: 0; @@ -218,7 +205,7 @@ table { line-height: $lineheight; } th { - font-weight: 500; + font-weight: 600; vertical-align: top; } td { @@ -240,7 +227,7 @@ table { #menu-icon { display: none !important; float: right; - background: url("/assets/menu-icon.png") no-repeat; + background: image-url("menu-icon.png") no-repeat; background-size: 30px 30px; display: block; width: 30px; @@ -253,7 +240,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; @@ -261,7 +248,7 @@ header { > * { height: 100%; - padding: $lineheight/2 $lineheight; + padding: $lineheight/2; } h1, nav.primary { @@ -275,13 +262,13 @@ header { img.logo { width: 30px; height: 30px; - margin-top: -4px; + margin-top: -2px; vertical-align: middle; } h1 { margin: 0; - padding: ($lineheight - 3) $lineheight ($lineheight + 3); + padding-top: 15px; a { color: #000; @@ -298,11 +285,10 @@ nav.primary { > 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; } > a:hover { background: lighten($green, 30%); } &.current > a:hover { background: $green; } &.disabled > a:hover { background: lighten($green, 38%); } @@ -364,7 +350,7 @@ nav.secondary { color: $darkgrey; padding: 5px; - &:hover { color: darken($darkgrey, 10%); } + &:hover { color: darken($darkgrey, 25%); } } } @@ -374,8 +360,6 @@ nav.secondary { .user-menu { $border: 1px solid $grey; - - font-weight: 500; border: $border; border-radius: $border-radius; margin-left: 10px; @@ -396,14 +380,18 @@ nav.secondary { a { padding: 5px 15px; + } &.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; } + &:hover > .user-button { color: darken($darkgrey, 5%); } } } @@ -416,7 +404,7 @@ nav.secondary { border: 0; vertical-align: top; margin-top: 0px; - margin: 3px 0 0 3px; + margin: 4px 0 0 4px; border-radius: 2px; } @@ -432,7 +420,8 @@ nav.secondary { .dropdown-menu { left: auto; - right: 0; + right: -1px; + border-radius: 3px 0 3px 3px; .count-number { float: right; @@ -442,6 +431,24 @@ nav.secondary { } } +#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 { @@ -598,6 +605,7 @@ nav.secondary { .map-layout { #content { + overflow: hidden; position: absolute; top: $headerHeight; bottom: 0; @@ -614,57 +622,61 @@ nav.secondary { #sidebar { 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 { - position: absolute; - right: $lineheight; + float: right; cursor: pointer; } + } - .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; - } + .welcome { + display: none; } - #sidebar.minimized { + .overlay-sidebar #sidebar { position: absolute; z-index: 1000; height: auto; - border-right: none; - + 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; + } - #search_form { - background: none; - width: 78%; + .button { + width: 50%; + float: left; + margin: 0; + border-radius: 0; + font-weight: normal; + padding: .6em; + + &.learn-more { + border-right: 1px solid #fff; + } } } @@ -695,6 +707,14 @@ nav.secondary { color:#222; border:1px solid #ddd; } + + .tooltip { + opacity: 1; + border: 1px solid #ccc; + .tooltip-arrow { + border-top-color: #ccc; + } + } } } @@ -728,15 +748,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); - text-shadow: - -2px -2px 1px #fff, - 2px -2px 1px #fff, - -2px 2px 1px #fff, - 2px 2px 1px #fff; + z-index: 2; // For IE9 input[type="radio"] { display: none; } @@ -755,6 +771,7 @@ nav.secondary { font-size: 13px; margin-bottom: 8px; } + li.disabled { color: #999; } } } @@ -813,8 +830,8 @@ nav.secondary { } } -.leaflet-top.leaflet-right { - top: $lineheight !important; +.leaflet-top { + top: $lineheight/2 !important; .leaflet-control { margin-right: 0px !important; margin-top: 0px !important; @@ -847,6 +864,8 @@ nav.secondary { text-align: center; } +.donate-attr { color: darken($green, 10%) !important; } + /* Rules for the sidebar */ .sidebar_heading { @@ -861,39 +880,50 @@ nav.secondary { } } -#sidebar_content { - position: absolute; - top: 50px; - bottom: 0; - width: 100%; - overflow-y: auto; +#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: $lineheight; + width: 40px; display: block; } } /* Rules for the search box */ -#search_form { +header .search_form { + display: none; +} + +.search_form { position: relative; - padding: $lineheight/2 $lineheight; + padding: $lineheight/2; background-color: $lightgrey; - #query_wrapper { + .query_wrapper { position: relative; overflow: hidden; + border-radius: 2px 0 0 2px; } - input { + input[type=text] { width: 100%; height: 30px; border-right: none; - border-radius: 2px 0 0 2px; transition: 300ms linear; -webkit-transition: 300ms linear; @@ -912,7 +942,7 @@ nav.secondary { border-radius: 0 2px 2px 0; } - #describe_location { + .describe_location { position: absolute; top: 6px; right: 6px; @@ -921,48 +951,6 @@ nav.secondary { } } -/* Rules for donation request box */ - -a.donate { - display: block; - padding: $lineheight/4 $lineheight; - border: 1px solid $green; - font-size: $typeheight; - line-height: 1.4; - text-align: center; - border-radius: 2px; - color: #222; - margin: $lineheight/2 $lineheight; - - &:hover { - background: $green; - 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 { @@ -976,7 +964,7 @@ a.donate { } } -/* Rules for search results which appear in the popout sidebar */ +/* Rules for search sidebar */ .search_results_entry { ul li { @@ -997,28 +985,8 @@ a.donate { color: #f00; } -/* Rules for data browser information which appears in the popout sidebar */ - -#browse_content { - position: relative; - .browse_show_list.button { - position: absolute; - left: $lineheight; - right: $lineheight; - bottom: -40px; - margin-bottom: 0; - } - a.more-details { - position: absolute; - top: 0; - right: $lineheight; - } - ul li { - margin-bottom: 0; - } -} - /* Rules for entity history */ + #sidebar_content { .browse_details { position: relative; @@ -1030,35 +998,51 @@ a.donate { 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: lighten($green, 35%); } + &.selected { background: #FFFFE6; } + /* color is derived from changeset bbox fillColor in history.js */ } - .comment a { - font-weight: bold; - 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 ul, .note-comments ul { + .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; } @@ -1084,69 +1068,106 @@ a.donate { } .browse-tag-list { - border: 1px solid #CCC; - border-radius: 4px; + background-color: #F6F6F6; + border: 1px solid #ddd; + border-radius: 3px; font-size: 12px; + table-layout: fixed; + border-collapse: separate; - li { - border-bottom: 1px solid #CCC; + 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%; - height: 30px; - float: left; padding: 6px 10px; + word-wrap: break-word; } .browse-tag-k { font-weight: 500; background-color: #F6F6F6; - border-radius: 4px 0 0 4px; } .browse-tag-v { - border-left: 1px solid #CCC; + border-left: 1px solid #ddd; + background-color: #fff; } } -} -/* Rules for export information which appears in the popout sidebar */ + .warning { + margin: $lineheight/2 0; + padding: $lineheight/2; + font-size: 90%; + } + + .note-comments li { + margin: $lineheight/2 0; -.export_bounds { - text-align: center; -} + p { + margin-left: 10px; + } + } -.export_area_inputs { - margin-bottom: $lineheight/2; - input[type="text"] { - width: 80px; - margin-bottom: 5px; + .note-description { + overflow: hidden; + margin: 0 0 10px 10px; } } -.export_bound { - margin: $lineheight/4; -} +/* Rules for export sidebar */ -#export_osm { - span.small-title { - font-weight: 500; - display: block; - font-size: 14px; - padding-bottom: 5px; +.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; @@ -1166,6 +1187,7 @@ a.donate { #map { height: 100%; + overflow: hidden; } } @@ -1178,7 +1200,7 @@ a.donate { } .content-body { - h1, h2, h3, p { + h1, h2, h3, p, ul, ol { margin-bottom: $lineheight; } @@ -1250,43 +1272,7 @@ a.donate { 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 */ @@ -1384,6 +1370,10 @@ a.donate { } .user-view { + // Silly exception; remove when user page is redesigned. + .content-inner { + max-width: none; + } p#no_home_location { margin: $lineheight; } @@ -1533,7 +1523,7 @@ a.donate { padding: $lineheight; margin-bottom: $lineheight; overflow: auto; - height: 10em; + height: 20em; } #decline { @@ -1542,11 +1532,6 @@ a.donate { background: darken($lightblue, $hovercolor); } } - - .form-row { - margin: auto; - max-width: 370px; - } } /* Rules for the account settings page */ @@ -1657,6 +1642,10 @@ a.donate { vertical-align: middle; } +.inbox-sent { + white-space: nowrap; +} + .inbox-mark-unread, .inbox-mark-read, .inbox-delete { @@ -1669,6 +1658,7 @@ a.donate { .message-read .message-buttons { margin-top: $lineheight; + margin-bottom: $lineheight * 1.5; padding-top: $lineheight; border-top: 1px solid $lightgrey; } @@ -1696,12 +1686,6 @@ a.donate { /* 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; @@ -1724,7 +1708,7 @@ a.donate { 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; @@ -1757,7 +1741,7 @@ a.donate { display: block; margin-bottom: $lineheight/4; font-size: $typeheight; - font-weight: 500; + font-weight: bold; line-height: 1.5; } label.standard-label.secondary { @@ -1814,6 +1798,10 @@ textarea { padding: 2px 5px; margin: 0; width: 200px; + + &.field_with_errors { + border: 2px solid #ff7070; + } } textarea { @@ -1840,6 +1828,8 @@ img.user_thumbnail { } img.user_thumbnail_tiny { + width: auto; + height: auto; max-width: 25px; max-height: 25px; border: 1px solid #ccc; @@ -1887,7 +1877,6 @@ ul.secondary-actions { div.secondary-actions { padding: 10px; - border-top: 1px solid #ccc; text-align: center; } @@ -1953,7 +1942,7 @@ a.button { float: left; border-radius: 0; margin:0; - min-width: 100px; + min-width: 75px; max-width: 180px; border-right:1px solid white; text-overflow: ellipsis; @@ -2088,14 +2077,32 @@ a.button { /* 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; @@ -2168,66 +2175,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 { @@ -2279,6 +2226,7 @@ a.button { 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); @@ -2364,7 +2312,7 @@ a.button { } /* Rules for the "Welcome" page */ -.site-welcome { +.site-welcome, .site-fixthemap { .center { text-align: center; .sprite { @@ -2451,13 +2399,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; @@ -2578,7 +2519,7 @@ a.button { &.local { background-position: 0px 0px; } &.community { background-position: 0px -40px; } &.open { background-position: 0px -80px; } - &.contributors { background-position: 0px -120px; } + &.partners { background-position: 0px -120px; } &.infringement { background-position: 0px -160px; } } }