X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/b04339f699f21644652735e9b814dfb505154a52..87d9ef8ea50e2f6c1df3b3b89e3b393e9bcdab90:/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 4ec0dced3..9b9537f86 100644 --- a/app/assets/stylesheets/common.css.scss +++ b/app/assets/stylesheets/common.css.scss @@ -87,9 +87,7 @@ strong { /* Default rules for the body of every page */ * { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + box-sizing: border-box; } body { @@ -104,10 +102,6 @@ body { height: 100%; } -body.slim { - background-color: #f0f0f0; -} - h1, h2, h3 { font-weight: 600; line-height: 1.2; @@ -850,7 +844,6 @@ nav.secondary { .leaflet-popup-content-wrapper { border-radius: 4px !important; - -webkit-border-radius: 4px !important; } /* Rules for attribution text under the main map shown on printouts */ @@ -888,6 +881,12 @@ nav.secondary { p { padding: $lineheight; } + + input { + display: block; + margin-left: auto; + margin-right: auto; + } } #sidebar { @@ -924,8 +923,6 @@ header .search_form { border-right: none; transition: 300ms linear; - -webkit-transition: 300ms linear; - -moz-transition: 300ms linear; } input:focus { @@ -967,7 +964,9 @@ header .search_form { .search_results_entry { ul li { border-bottom: $keyline; + cursor: pointer; &:first-child { border-top: $keyline; } + &.selected { background: #FFFFE6; } } .search_details { @@ -1025,6 +1024,7 @@ header .search_form { h4:first-child { margin-top: 0; + word-wrap: break-word; } } @@ -1069,20 +1069,20 @@ 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; } @@ -1160,6 +1160,7 @@ header .search_form { .export_button { margin-top: $lineheight; + margin-bottom: $lineheight; } dl { @@ -1271,42 +1272,6 @@ header .search_form { z-index: 2000; } -#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; - } -} - /* Rules for small maps in content areas */ .content_map { @@ -1351,6 +1316,30 @@ header .search_form { } } +/* Rules for the new trace form */ + +#new_trace { + input[type=text] { + width: 50%; + width: calc(100% - 150px); + max-width: 500px; + } +} + +/* Rules for the edit trace form */ + +.edit_trace { + .form-row p { + margin-bottom: 0px; + } + + input[type=text] { + width: 50%; + width: calc(100% - 150px); + max-width: 500px; + } +} + /* Rules for the user profile page */ #userinformation { @@ -1690,6 +1679,7 @@ header .search_form { .message-read .message-buttons { margin-top: $lineheight; + margin-bottom: $lineheight * 1.5; padding-top: $lineheight; border-top: 1px solid $lightgrey; } @@ -1717,12 +1707,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; @@ -1835,6 +1819,10 @@ textarea { padding: 2px 5px; margin: 0; width: 200px; + + &.field_with_errors { + border: 2px solid #ff7070; + } } textarea { @@ -1861,6 +1849,8 @@ img.user_thumbnail { } img.user_thumbnail_tiny { + width: auto; + height: auto; max-width: 25px; max-height: 25px; border: 1px solid #ccc; @@ -1932,7 +1922,6 @@ a.button { cursor: pointer; border: 0; display: inline-block; - line-height: 20px; padding: $lineheight/4 $lineheight/2; min-height: 20px + $lineheight/2; min-width: 120px; @@ -1941,7 +1930,6 @@ a.button { background: $blue; text-align: center; border-radius: 2px; - -moz-border-radius: 2px; &:hover { background: darken($blue, $hovercolor); text-decoration: none; @@ -1963,6 +1951,16 @@ a.button { } } +input[type="button"], +input[type="submit"], +input[type="reset"] { + line-height: normal; +} + +a.button { + line-height: 20px; +} + .buttons { min-width: 200px; input[type="submit"], @@ -2108,14 +2106,28 @@ a.button { /* Rules for rich text editors */ +input.richtext_title[type="text"] { + width: 50%; + width: calc(100% - 235px); + + @media only screen and (max-width:768px) { + width: 100%; + } +} + .richtext_container { margin-bottom: $lineheight; .richtext_content { width: 50%; + 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; @@ -2242,12 +2254,8 @@ a.button { 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); - -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; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + background-clip: padding-box; } .dropdown-menu.pull-right { @@ -2325,7 +2333,7 @@ a.button { } /* Rules for the "Welcome" page */ -.site-welcome { +.site-welcome, .site-fixthemap { .center { text-align: center; .sprite { @@ -2412,13 +2420,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;