X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/8f4edc234adb903a5b6ae304c771fd85adb32699..1eab367de5950af5396756dbf09cc9bd3edc3b8f:/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 d93928205..8ecaaf113 100644 --- a/app/assets/stylesheets/common.css.scss +++ b/app/assets/stylesheets/common.css.scss @@ -38,7 +38,6 @@ abbr, acronym { strong { font-weight: bold; - font-weight: 500; } /* Micro Clearfix | Details: http://nicolasgallagher.com/micro-clearfix-hack/ */ @@ -105,18 +104,12 @@ body { height: 100%; } -body.slim { - background-color: #f0f0f0; -} - h1, h2, h3 { - font-weight: bold; - font-weight: 500; + font-weight: 600; line-height: 1.2; } h4, h5 { - font-weight: bold; font-weight: 500; } @@ -212,8 +205,7 @@ table { line-height: $lineheight; } th { - font-weight: bold; - font-weight: 500; + font-weight: 600; vertical-align: top; } td { @@ -248,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; @@ -270,7 +262,7 @@ header { img.logo { width: 30px; height: 30px; - margin-top: -4px; + margin-top: -2px; vertical-align: middle; } @@ -310,7 +302,6 @@ nav.primary { a.tab, .dropdown-toggle { display: inline-block; - font-weight: bold; font-weight: 500; color: $green; padding: 5px 15px; @@ -369,8 +360,6 @@ nav.secondary { .user-menu { $border: 1px solid $grey; - font-weight: bold; - font-weight: 500; border: $border; border-radius: $border-radius; margin-left: 10px; @@ -397,7 +386,8 @@ nav.secondary { &.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; } @@ -414,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; } @@ -633,7 +623,7 @@ nav.secondary { float: left; width: $sidebarWidth; background: #fff; - font-size: 13px; + font-size: 12px; h2 { padding: $lineheight $lineheight $lineheight/2; @@ -642,6 +632,7 @@ nav.secondary { h3, h4 { margin-top: $lineheight; margin-bottom: $lineheight/2; + font-size: 13px; } .icon.close { @@ -650,19 +641,28 @@ nav.secondary { } } + .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: normal; font-weight: 300; } @@ -707,6 +707,14 @@ nav.secondary { color:#222; border:1px solid #ddd; } + + .tooltip { + opacity: 1; + border: 1px solid #ccc; + .tooltip-arrow { + border-top-color: #ccc; + } + } } } @@ -740,8 +748,7 @@ nav.secondary { padding: 2px 6px; border-bottom-right-radius: 3px; cursor: pointer; - font-weight: bold; - font-weight: 500; + font-weight: 600; font-size: 16px; text-stroke: 2px #fff; background: rgba(255,255,255,.9); @@ -764,6 +771,7 @@ nav.secondary { font-size: 13px; margin-bottom: 8px; } + li.disabled { color: #999; } } } @@ -876,6 +884,12 @@ nav.secondary { p { padding: $lineheight; } + + input { + display: block; + margin-left: auto; + margin-right: auto; + } } #sidebar { @@ -884,7 +898,7 @@ nav.secondary { .load_more { text-align: center; margin: $lineheight auto; - width: $lineheight; + width: 40px; display: block; } } @@ -988,8 +1002,8 @@ header .search_form { #sidebar .changesets { li { - padding: $lineheight; - border-bottom: $keyline; + padding: 15px 20px; + border-bottom: 1px solid #ddd; cursor: pointer; &.selected { background: #FFFFE6; } @@ -997,7 +1011,7 @@ header .search_form { } h4 { - margin-top: 0; + margin: 0; a { color: #000; } @@ -1009,12 +1023,18 @@ header .search_form { #sidebar_content { .browse-section { padding: $lineheight/2 $lineheight; + border-bottom: 1px solid #ddd; h4:first-child { margin-top: 0; + word-wrap: break-word; } } + .browse-section:last-of-type { + border-bottom: none; + } + .paginate { float: right; padding: 1px 6px; @@ -1052,25 +1072,25 @@ header .search_form { border: 1px solid #ddd; border-radius: 3px; font-size: 12px; + table-layout: fixed; + border-collapse: separate; - li { + 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%; - float: left; padding: 6px 10px; + word-wrap: break-word; } .browse-tag-k { - font-weight: bold; font-weight: 500; background-color: #F6F6F6; } @@ -1095,8 +1115,9 @@ header .search_form { } } - .note-description p { - margin-left: 10px; + .note-description { + overflow: hidden; + margin: 0 0 10px 10px; } } @@ -1114,16 +1135,35 @@ header .search_form { 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 { @@ -1147,6 +1187,7 @@ header .search_form { #map { height: 100%; + overflow: hidden; } } @@ -1159,7 +1200,7 @@ header .search_form { } .content-body { - h1, h2, h3, p { + h1, h2, h3, p, ul, ol { margin-bottom: $lineheight; } @@ -1231,43 +1272,7 @@ header .search_form { 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 */ @@ -1365,6 +1370,10 @@ header .search_form { } .user-view { + // Silly exception; remove when user page is redesigned. + .content-inner { + max-width: none; + } p#no_home_location { margin: $lineheight; } @@ -1514,7 +1523,7 @@ header .search_form { padding: $lineheight; margin-bottom: $lineheight; overflow: auto; - height: 10em; + height: 20em; } #decline { @@ -1523,11 +1532,6 @@ header .search_form { background: darken($lightblue, $hovercolor); } } - - .form-row { - margin: auto; - max-width: 370px; - } } /* Rules for the account settings page */ @@ -1638,6 +1642,10 @@ header .search_form { vertical-align: middle; } +.inbox-sent { + white-space: nowrap; +} + .inbox-mark-unread, .inbox-mark-read, .inbox-delete { @@ -1650,6 +1658,7 @@ header .search_form { .message-read .message-buttons { margin-top: $lineheight; + margin-bottom: $lineheight * 1.5; padding-top: $lineheight; border-top: 1px solid $lightgrey; } @@ -1677,12 +1686,6 @@ header .search_form { /* 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; @@ -1706,7 +1709,6 @@ header .search_form { 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; @@ -1740,7 +1742,6 @@ header .search_form { margin-bottom: $lineheight/4; font-size: $typeheight; font-weight: bold; - font-weight: 500; line-height: 1.5; } label.standard-label.secondary { @@ -1797,6 +1798,10 @@ textarea { padding: 2px 5px; margin: 0; width: 200px; + + &.field_with_errors { + border: 2px solid #ff7070; + } } textarea { @@ -1823,6 +1828,8 @@ img.user_thumbnail { } img.user_thumbnail_tiny { + width: auto; + height: auto; max-width: 25px; max-height: 25px; border: 1px solid #ccc; @@ -1870,7 +1877,6 @@ ul.secondary-actions { div.secondary-actions { padding: 10px; - border-top: 1px solid #ccc; text-align: center; } @@ -2071,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; @@ -2288,7 +2312,7 @@ a.button { } /* Rules for the "Welcome" page */ -.site-welcome { +.site-welcome, .site-fixthemap { .center { text-align: center; .sprite { @@ -2375,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; @@ -2447,7 +2464,6 @@ a.button { h1 { display: block; color: white; - font-weight: normal; font-weight: 300; font-size: 34px; span {