X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/8d76be71bbb8a799cbf0627dee170f26ade5a11f..0eb2afa83aee217fc2c6399bd23d0d8152c09eb5:/app/assets/stylesheets/common.scss diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 736125bed..f8cd32438 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -7,15 +7,7 @@ /* Default rules for the body of every page */ body { - font-family: 'Helvetica Neue',Arial,sans-serif; font-size: $typeheight; - line-height: 1.6666; - color: #222; - background-color: #fff; - margin: 0px; - padding: 0px; - text-align: left; - height: 100%; } p > img { @@ -799,7 +791,6 @@ tr.turn:hover { } .comments { - float: right; color: $darkgrey; } @@ -1036,27 +1027,18 @@ tr.turn:hover { .content-inner { position: relative; - max-width: 900px; + max-width: 960px; margin: auto; padding: $lineheight; } /* Overrides for pages that use new layout conventions */ -.users-new, -.users-create, -.users-terms, -.users-confirm { - .content-heading .content-inner { - height: 200px; - } -} - .header-illustration { background-position: 0 0; background-repeat: no-repeat; - position: absolute; - height: 200px; + position: relative; + min-height: 200px; width: 100%; left: 0; bottom: 0; @@ -1076,9 +1058,10 @@ tr.turn:hover { &.new-user-arm { height: 110px; width: 130px; - left: 260px; - top: 160px; + left: 280px; + top: 180px; background-image: image-url("sign-up-illustration-arm.png"); + position: absolute; z-index: 100; } } @@ -1112,47 +1095,11 @@ tr.turn:hover { /* Rules for the user profile page */ -#userinformation { - min-height: 100px; - .userinformation-inner { - float: left; - } - .user-description { - width: 100%; - clear: both; - } -} - -.admin-user-info small { - margin-bottom: $lineheight/2; - display: inline; - margin-right: $lineheight; -} - .contact-activity { margin-top: $lineheight; width: 100%; } -.activity-details p { - margin-left: 70px; - margin-bottom: 0; -} - -.users-show { - // Silly exception; remove when user page is redesigned. - .content-inner { - max-width: none; - } - p#no_home_location { - margin: $lineheight; - } - .user_thumbnail { - margin-top: $lineheight/4; - float: left; - } -} - /* Rules for the user map */ .content_map .leaflet-popup-content { @@ -1482,6 +1429,12 @@ img.user_image { margin-right: $lineheight; } +img.user_image_no_margins { + max-width: 100px; + max-height: 100px; + border: 1px solid $grey; +} + img.user_thumbnail { max-width: 50px; max-height: 50px; @@ -1489,6 +1442,12 @@ img.user_thumbnail { margin-right: $lineheight; } +img.user_thumbnail_no_margins { + max-width: 50px; + max-height: 50px; + border: 1px solid $grey; +} + img.user_thumbnail_tiny { width: auto; height: auto; @@ -1505,28 +1464,28 @@ abbr.geo { /* General styles for action lists / subnavs / pager navs */ -ul.secondary-actions { - font-style: normal; - margin-bottom: 0; - margin-left: 0; - padding: 0; - &.pager { - display: inline-block; - margin-right: 60px; - } - > li { - display: block; - float: left; - list-style: none; - border-left: 1px solid $grey; - padding-left: $lineheight/2; - margin-right: $lineheight/2; - &:first-child { - border-left: 0; - padding-left: 0; + +nav.secondary-actions { + margin-left: -11px; + overflow: hidden; + > ul { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-bottom: 0; + margin-left: -1px; + padding: 0; + &.pager { + display: inline-block; + margin-right: 60px; } - &:last-child { - margin-right: 0px; + > li { + flex-basis: auto; + list-style: none; + border-left: 1px solid $grey; + padding-left: $lineheight/2; + margin-right: $lineheight/2; + margin-bottom: $lineheight/8; } } } @@ -1590,6 +1549,17 @@ div.secondary-actions { } } +/* Create a single-line dl */ + +dl.dl-inline { + dt, dd { + display: inline-block; + } + dd { + margin-right: 1em; + } +} + /* Customise the background colour of striped tables */ .table-striped > tbody > tr:nth-child(2n+1) > td, @@ -1746,48 +1716,20 @@ div.secondary-actions { background-size: cover; background-attachment: fixed; - .content-inner { - position: relative; - color: #333; - min-width: 320px; - max-width: 640px; - } - - .text { - background: white; - padding: 40px; + max-width: 760px; } .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: 28px; span { color: $vibrant-green; } } - @include media-breakpoint-up(sm) { - h1 { - font-size: 34px; - } - } - .user-image { - position: absolute; - top: 0px; - right: 240px; - left: 0px; height: 150px; background-position: 0 50%; background-repeat: no-repeat; @@ -1797,16 +1739,6 @@ div.secondary-actions { } .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: $vibrant-green; }