X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/054f934f27e79ab0f7a25a89b6b719cc2cb0cb06..87bf5e73d4eccb88aa057fa27be0f482509c8fdf:/app/assets/stylesheets/common.css.scss?ds=sidebyside diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss index 5d65d5994..0195ed326 100644 --- a/app/assets/stylesheets/common.css.scss +++ b/app/assets/stylesheets/common.css.scss @@ -1,18 +1,4 @@ -/* Parameters */ -$lineheight: 20px; -$typeheight: 14px; - -$offwhite: #f4f4ff; -$blue: #7092FF; -$lightblue: #B8C5F0; -$green: #7ebc6f; -$grey: #CCC; -$lightgrey: #EEE; -$darkgrey: #AAA; -$hovercolor: 20%; -$headerHeight: 75px; -$sidebarWidth: 350px; -$keyline: 1px solid $grey; +@import "parameters"; /* Styles common to large and small screens */ @@ -50,6 +36,10 @@ abbr, acronym { cursor: help; } +strong { + font-weight: bold; +} + /* Micro Clearfix | Details: http://nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix:before, @@ -111,6 +101,7 @@ body { margin: 0px; padding: 0px; text-align: left; + height: 100%; } body.slim { @@ -118,10 +109,14 @@ body.slim { } h1, h2, h3 { - font-weight: bold; + font-weight: 600; line-height: 1.2; } +h4, h5 { + font-weight: 500; +} + h1 { font-size: 18px; } @@ -139,6 +134,8 @@ small, aside { font-size: 12px; } +#container { position: relative; } + .column-1 { width: 50%; margin: 0 0 $lineheight/2 0; @@ -149,6 +146,8 @@ small, aside { margin-right: $lineheight/4; } +.red { color: $red; } + /* Rules for icons */ .icon { @@ -173,6 +172,7 @@ small, aside { .icon.clipboard { background-position: -160px 0; } .icon.link { background-position: -180px 0; } .icon.close { background-position: -200px 0; } +.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; } @@ -180,8 +180,10 @@ small, aside { /* Rules for links */ a { - color: #00f; + color: #24d; text-decoration: none; + -webkit-appearance: none; + outline: 0; &:hover { text-decoration: underline; } @@ -207,7 +209,7 @@ table { line-height: $lineheight; } th { - font-weight: bold; + font-weight: 600; vertical-align: top; } td { @@ -215,51 +217,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 { @@ -269,34 +226,25 @@ table { } } -/* Rules for donation request box */ +/* Rules for the header */ -a.donate { +#menu-icon { + display: none !important; + float: right; + background: image-url("menu-icon.png") no-repeat; + background-size: 30px 30px; 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; - } + width: 30px; + height: 30px; + margin: 14px 10px 0 0; + opacity: 0.6; } -/* Rules for the header */ - header { height: $headerHeight; position: relative; - border-bottom: $keyline; z-index: 1001; + font-size: 14px; h1, nav, nav > ul, nav > ul > li, .dropdown { display: inline-block; @@ -304,7 +252,7 @@ header { > * { height: 100%; - padding: $lineheight; + padding: $lineheight/2; } h1, nav.primary { @@ -316,14 +264,15 @@ header { } img.logo { - width: 40px; - height: 40px; + width: 30px; + height: 30px; + margin-top: -2px; vertical-align: middle; } h1 { margin: 0; - border-right: $keyline; + padding-top: 15px; a { color: #000; @@ -333,35 +282,42 @@ header { nav.primary { > ul { - $border: 1px solid darken($green, 20%); + $border: 1px solid $green; border: $border; - border-radius: 4px; + border-radius: $border-radius; > li { border-right: $border; - &:last-child { border-right: 0; } + float: left; + &:last-child { + border-right: 0; + } + > 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%); } + } } } a.tab, .dropdown-toggle { display: inline-block; - font-weight: bold; + font-weight: 500; color: $green; padding: 5px 15px; } .dropdown-toggle { - padding: 5px 10px; - } - - #edit_tab a.tab { - border-right: 1px solid lighten($green, 20%); + padding: 5px 6px; } .caret { border-top-color: $green; + margin-top: 10px; } .disabled a { @@ -390,13 +346,16 @@ nav.secondary { position: absolute; right: 0; - > ul a, - .dropdown-toggle { - display: inline-block; - font-weight: bold; - text-decoration: none; - color: $darkgrey; - padding: 5px 5px; + > ul { + vertical-align: middle; + a, .dropdown-toggle { + display: inline-block; + text-decoration: none; + color: $darkgrey; + padding: 5px; + + &:hover { color: darken($darkgrey, 25%); } + } } > ul li.current a { @@ -405,45 +364,68 @@ nav.secondary { .user-menu { $border: 1px solid $grey; - border: $border; - border-radius: 4px; + border-radius: $border-radius; margin-left: 10px; > li { border-right: $border; - &:last-child { border-right: 0; } + 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; } + &:hover a { background: lighten($darkgrey, 30%); } } a { padding: 5px 15px; + + } + + &.logged-in > a { + padding: 0; + > .user-button { + line-height: 1.8; + padding: 5px 10px 3px 6px; + display: inline-block; + color: $darkgrey; + } + &:hover > .user-button { color: darken($darkgrey, 5%); } } } .caret { border-top-color: $grey; - margin-top: 10px; + margin-top: 9px; } img.user_thumbnail_tiny { border: 0; vertical-align: top; - margin-top: 2px; - border-radius: 2px 0 0 2px; + margin-top: 0px; + margin: 4px 0 0 4px; + border-radius: 2px; } #inboxanchor { display: inline-block; vertical-align: top; - height: 20px; - margin: 2px 7px 0 0; - background-color: $grey; - border-radius: 0 2px 2px 0; + height: 25px; + margin: 3px 0 3px 3px; + background-color: lighten($grey, 10%); + line-height: 20px; + border-radius: 2; } .dropdown-menu { left: auto; - right: 0; + right: -1px; + border-radius: 3px 0 3px 3px; .count-number { float: right; @@ -453,12 +435,30 @@ 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 { padding: 2px $lineheight/4; border-radius: 2px; - background: #d7d7ff; + background: lighten($green, 30%); margin: 0 2px; font-size: 11px; color: #333; @@ -605,34 +605,120 @@ 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 { + overflow: hidden; + 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; + } + + #sidebar { + float: left; + width: $sidebarWidth; + background: #fff; + font-size: 12px; + + h2 { + padding: $lineheight $lineheight $lineheight/2; + } - .section { - border-bottom: 1px solid #DDD; - padding: 15px; + h3, h4 { + margin-top: $lineheight; + margin-bottom: $lineheight/2; + font-size: 13px; + } + + .icon.close { + float: right; + cursor: pointer; + } + } + + .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 { + p { + padding: $lineheight/2 $lineheight $lineheight; + font-size: 110%; + font-weight: 300; + } + + .button { + width: 50%; + float: left; + margin: 0; + border-radius: 0; + font-weight: normal; + padding: .6em; + + &.learn-more { + border-right: 1px solid #fff; + } + } + } + + #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: 10px 20px; + } + + a.close-button { + float: right; + padding:5px; + font-size:20px; + line-height:10px; + color:#222; + border:1px solid #ddd; + } + + .tooltip { + opacity: 1; + border: 1px solid #ccc; + .tooltip-arrow { + border-top-color: #ccc; + } + } } } @@ -644,29 +730,52 @@ nav.secondary { } .layers-ui { - li { - border-radius: 4px; - overflow: hidden; - margin-bottom: 10px; - } - - label { - display: block; - padding: 5px 5px 5px 7px; - background-color: #eee; - cursor: pointer; - } - - li.active label { - background-color: #ccc; - } - .base-layers { .leaflet-container { width: 100%; height: 50px; cursor: pointer; } + + li { + overflow: hidden; + border-radius: 3px; + border: 2px solid #fff; + margin-bottom: 8px; + position: relative; + transition: border-color 0.08s ease-in; + + label { + position: absolute; + top: 0; + left: 0; + padding: 2px 6px; + border-bottom-right-radius: 3px; + cursor: pointer; + 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; + } + } + + &.active { border-color: darken($green, 10%); } + &:hover { + border-color: $grey; + &.active { border-color: darken($green, 20%); } + } + } + } + + .overlay-layers { + p { + font-size: 13px; + margin-bottom: 8px; + } + li.disabled { color: #999; } } } @@ -725,8 +834,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; @@ -759,167 +868,311 @@ nav.secondary { text-align: center; } +.donate-attr { color: darken($green, 10%) !important; } + /* Rules for the sidebar */ +.sidebar_heading { + position: relative; + padding: $lineheight/2 $lineheight; + // background: $offwhite; + // border-bottom: 1px solid #ccc; + > .close { + float: right; + margin-top: 2px; + cursor: pointer; + } +} + +#browse_status { + p { + padding: $lineheight; + } +} + #sidebar { - border-right: $keyline; + #sidebar_loader, + .loader, + .load_more { + text-align: center; + margin: $lineheight auto; + width: 40px; + display: block; + } +} + +/* Rules for the search box */ + +header .search_form { + display: none; +} + +.search_form { + position: relative; + padding: $lineheight/2; + background-color: $lightgrey; - .alert { - background: #e00; + .query_wrapper { + position: relative; + overflow: hidden; + border-radius: 2px 0 0 2px; } - h2, h3, h4 { - padding: $lineheight; + input[type=text] { + width: 100%; + height: 30px; + border-right: none; + + 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 the map key which appears in the popout sidebar */ + +#mapkey { + .mapkey-table-key img { + display: block; + margin-left: auto; + margin-right: auto; + } + td { + padding: 0 $lineheight/4 $lineheight/4 $lineheight/4; + } +} + +/* Rules for search sidebar */ + +.search_results_entry { + 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_error { + color: #f00; +} + +/* Rules for entity history */ + +#sidebar_content { + .browse_details { + position: relative; border-bottom: $keyline; } +} + +.browse_status { + display: none; +} + +/* Rules for the history sidebar */ + +#sidebar .changesets { + li { + padding: 15px 20px; + border-bottom: 1px solid #ddd; + cursor: pointer; + + &.selected { background: #FFFFE6; } + /* color is derived from changeset bbox fillColor in history.js */ + } h4 { - font-weight: normal; + margin: 0; + a { + color: #000; + } + } +} + +/* Rules for the browse sidebar */ + +#sidebar_content { + .browse-section { + padding: $lineheight/2 $lineheight; + border-bottom: 1px solid #ddd; + + h4:first-child { + margin-top: 0; + } + } + + :last-child { + border-bottom: none; } - .icon.close { - position: absolute; - right: $lineheight; + .paginate { + float: right; + padding: 1px 6px; + border: 1px solid #eee; + border-radius: 3px; + } + + .paginate 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 { + background-color: #F6F6F6; + border: 1px solid #ddd; + border-radius: 3px; + font-size: 12px; + + li { + border-bottom: 1px solid #ddd; + } + + li:last-child { + border-bottom: 0; + } + + .browse-tag-k, + .browse-tag-v { + display: inline-block; + width: 50%; + float: left; + padding: 6px 10px; + } + + .browse-tag-k { + font-weight: 500; + background-color: #F6F6F6; + } + + .browse-tag-v { + border-left: 1px solid #ddd; + background-color: #fff; + } } - .footer { - position: absolute; - bottom: 0; + .warning { + margin: $lineheight/2 0; + padding: $lineheight/2; + font-size: 90%; } - p.credits { - font-size: 11px; - color: #999; + .note-comments li { + margin: $lineheight/2 0; - a { - color: #666; + p { + margin-left: 10px; } } -} - -.sidebar_heading { - position: relative; - padding: $lineheight/2 $lineheight; - background: $offwhite; - border-bottom: 1px solid #ccc; -} - -.sidebar_close { - position: absolute; - height: $lineheight; - top: 0px; - bottom: 0; - right: $lineheight; - margin: auto; -} - -#sidebar_content { - position: absolute; - top: 72px; - bottom: 0; - width: 100%; - overflow-y: auto; -} - -/* Rules for the map key which appears in the popout sidebar */ -#mapkey { - .mapkey-table-key img { - display: block; - margin-left: auto; - margin-right: auto; - } - td { - padding: 0 $lineheight/4 $lineheight/4 $lineheight/4; + .note-description { + overflow: hidden; + margin: 0 0 10px 10px; } } -/* Rules for search results which appear in the popout sidebar */ +/* Rules for export sidebar */ -.search_searching { - margin-top: $lineheight/4; - margin-bottom: $lineheight/4; -} +.export_form { + padding: $lineheight; -.search_results_entry { - .search_searching { + .export_area_inputs, + .export_button { text-align: center; - margin: $lineheight auto; - width: $lineheight; - display: block; - } - - ul li { - border-bottom: 1px solid #ccc; } - .search_details { - display: block; - float: right; - text-align: right; - margin-top: 0.2em; - margin-left: 0.5em; + .export_area_inputs { + margin-bottom: $lineheight/2; + input[type="text"] { + width: 80px; + text-align: center; + margin-bottom: 5px; + } } -} - -.search_results_error { - color: #f00; -} -/* Rules for data browser information which appears in the popout sidebar */ + .export_boxy { + background: #eee; + border: 1px solid #ccc; + border-radius: 3px; -#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; + #maxlat { margin-top: -1px; } + #minlon { + float: left; + margin-left: -1px; + } + #maxlon { + float: right; + margin-right: -1px; + } + #minlat { margin-bottom: 0; } } -} - -.browse_details { - position: relative; -} - -.browse_status { - display: none; -} -/* Rules for export information which appears in the popout sidebar */ - -.export_bounds { - text-align: center; -} + .export_bound { + margin: $lineheight/4; + } -.export_area_inputs { - margin-bottom: $lineheight/2; - input[type="text"] { - width: 80px; - margin-bottom: 5px; + .export_button { + margin-top: $lineheight; } -} -.export_bound { - margin: $lineheight/4; + dl { + padding-left: $lineheight/2; + dd { + margin-left: 0; + margin-bottom: 10px; + } + } } -/* Rules for the sidebar and main content area */ +/* Rules for edit pages */ -.site-index, -.site-export, -.site-edit, -.changeset-list, -.browse { +.site-edit { #content { position: absolute; top: $headerHeight; @@ -927,22 +1180,17 @@ nav.secondary { width: 100%; } - #sidebar, #map { - position: relative; + #map { height: 100%; - overflow-x: hidden; - overflow-y: auto; - } - - #sidebar { - float: left; - width: $sidebarWidth; } } +/* Rules for non-map content pages */ + .content-heading { background: $lightgrey; - border-bottom: $keyline; + + h1 { font-size: 22px; } } .content-body { @@ -1012,12 +1260,6 @@ nav.secondary { } } -@media only screen and (max-width:900px) { - .header-illustration.new-user-arm { - display: none; - } -} - #content.maximised { top: 0; left: 0; @@ -1074,78 +1316,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 { @@ -1230,6 +1400,10 @@ body.browse #sidebar_content { } .user-view { + // Silly exception; remove when user page is redesigned. + .content-inner { + max-width: none; + } p#no_home_location { margin: $lineheight; } @@ -1379,7 +1553,7 @@ body.browse #sidebar_content { padding: $lineheight; margin-bottom: $lineheight; overflow: auto; - height: 10em; + height: 20em; } #decline { @@ -1388,11 +1562,6 @@ body.browse #sidebar_content { background: darken($lightblue, $hovercolor); } } - - .form-row { - margin: auto; - max-width: 370px; - } } /* Rules for the account settings page */ @@ -1525,17 +1694,19 @@ body.browse #sidebar_content { /* 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 */ @@ -1699,7 +1870,7 @@ abbr.geo { .rsssmall { position: relative; - top: 5px; + top: 3px; } /* General styles for action lists / subnavs / pager navs */ @@ -1717,8 +1888,8 @@ ul.secondary-actions { 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; @@ -1729,6 +1900,11 @@ ul.secondary-actions { } } +div.secondary-actions { + padding: 10px; + text-align: center; +} + /* Utility for managing inner content areas */ .inner22 { padding: $lineheight;} @@ -1791,7 +1967,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; @@ -2006,97 +2182,13 @@ 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 - */ +/* 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 { @@ -2131,7 +2223,7 @@ a.button { .dropdown-menu { position: absolute; top: 100%; - left: 0; + left: -1px; z-index: 1000; display: none; float: left; @@ -2141,6 +2233,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); @@ -2306,7 +2399,8 @@ a.button { } .site-about #content { - background-color: #000; + //background-color: #000; + background-color: #eee; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; @@ -2321,13 +2415,14 @@ a.button { .caption { max-width: 200px; - font: italic 14px/20px 'Times New Roman', serif; + font: 13px/20px Helvetica, Arial, sans-serif; position: fixed; text-align: right; right: 20px; bottom: 60px; text-shadow: #000 0px 1px 5px; - color: #fff; + color: #eee; + opacity: 0.8; display: none; } @@ -2374,15 +2469,17 @@ a.button { .attr { position: relative; - padding: 170px 20px 20px 20px; + padding: 170px 40px 20px; background: #333; background: rgba(0, 0, 0, .8); margin-bottom: 0; + margin-top: -20px; - strong { + h1 { display: block; color: white; - font-size: 25px; + font-weight: 300; + font-size: 34px; span { color: #76c551; } @@ -2409,16 +2506,16 @@ a.button { width: 240px; height: 150px; padding: 20px 20px 20px 40px; - font: bold 24px/25px Helvetica, Arial, sans-serif; + font: 500 20px/24px Helvetica, Arial, sans-serif; white-space: nowrap; color: #fff; - background: #76c551 + background: #76c551; } .byosm span { display: inline-block; - width: 25px; - margin-left: -25px; + width: 20px; + margin-left: -20px; } } @@ -2436,9 +2533,16 @@ 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; } } } @import 'browse'; + +@media only screen and (max-width:960px) { + .header-illustration.new-user-arm { + display: none; + } +} +