X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/8cd6168b48e03b8c3a2dbbfc2b6c882ef8b09465..6453310d4dc095c670fb3431e15c3c05639716c9:/app/assets/stylesheets/common.css.scss diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss index fcc580021..2aacad0e6 100644 --- a/app/assets/stylesheets/common.css.scss +++ b/app/assets/stylesheets/common.css.scss @@ -75,7 +75,7 @@ h1, h2 { } #content h2 { - font-size: 24px; + font-size: 21px; } h3 { @@ -469,7 +469,7 @@ table { .site-index #tabnav a#viewanchor, .site-edit #tabnav a#editanchor, -.changeset_list #tabnav a#historyanchor, +.changeset-list #tabnav a#historyanchor, .site-export #tabnav a#exportanchor { border-bottom: 1px solid #aaa; background: #9ed485; @@ -511,6 +511,7 @@ table { #greeting { float: right; padding-top: 3px; + margin-right: 5px; } .greeting-bar-unread { @@ -562,6 +563,11 @@ table { border-top: 0px !important; } +.leaflet-popup-content-wrapper { + border-radius: 4px !important; + -webkit-border-radius: 4px !important; +} + /* Rules for edit menu */ .menuicon { @@ -789,6 +795,15 @@ ul.results-list li { border-bottom: 1px solid #ccc; } top: 30px; } +#content.maximised { + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 0; + z-index: 1000; +} + #slim_container { width: 100%; } @@ -805,12 +820,16 @@ ul.results-list li { border-bottom: 1px solid #ccc; } #slim_content { margin: 10px; - margin-top: 90px; + margin-top: 95px; max-width: 50em; + + .content-heading { + margin-bottom: 15px; + } } #slim_header { - margin: 10px; + margin: 30px 10px; position: absolute; top: 0px; margin-right: 5px; @@ -891,7 +910,7 @@ ul.results-list li { border-bottom: 1px solid #ccc; } } } .selected { - background-color: rgb(255, 255, 160); + background: #FFFFC0; } .date, .user { @@ -921,12 +940,24 @@ ul.results-list li { border-bottom: 1px solid #ccc; } &:first-child { margin-top: 0; } + .warning { + background-color: #ffe0cc; + margin: 0px; + padding: 4px 6px; + } + div { + clear: left; + } h4, p { margin-bottom: 5px; } p, ul, .bbox { margin-left: 33.3333%; } + ul p { + margin-left: 0; + margin-bottom: 0; + } h4 { width: 33.3333%; float: left; @@ -958,28 +989,6 @@ ul.results-list li { border-bottom: 1px solid #ccc; } margin-bottom: 10px; } -td.browse_comments { - padding: 0px; - - table { - border-collapse: collapse; - - td { - padding-bottom: 10px; - - p { - margin-top: 0px; - margin-bottom: 0px; - } - - span.by { - font-size: small; - color: #999999; - } - } - } -} - /* Rules for the trace list shown by the traces tab etc */ #trace_list { @@ -1039,6 +1048,7 @@ td.browse_comments { } .activity-block { + clear: left; border-bottom: 1px solid #ccc; padding-bottom: 20px; float: left; @@ -1077,11 +1087,6 @@ td.browse_comments { min-height: 62px; } -.content_map .leaflet-popup-content-wrapper { --webkit-border-radius: 4px; - border-radius: 4px; -} - /* Rules for user popups on maps */ .user_popup { @@ -1138,6 +1143,7 @@ td.browse_comments { } .diary_post { + max-width: 740px; position: relative; margin-top: 20px; padding-top: 20px; @@ -1153,20 +1159,9 @@ td.browse_comments { line-height: 21px; } small.deemphasize { + float: left; display: block; } - ul, - ol { - margin-bottom: 20px; - font-style: italic; - margin-left: 20px; - } - ul li { - list-style: disc; - } - ol li { - list-style: decimal; - } ul.secondary-actions { display: inline-block;} } @@ -1174,14 +1169,12 @@ td.browse_comments { display: inline; } -.post_heading { +#content .post_heading { margin-bottom: 20px; h2 { margin-top: 0; - margin-bottom: 0; + margin-bottom: 10px; font-size: 24px; - float: left; - line-height: 32px; } } @@ -1201,8 +1194,13 @@ td.browse_comments { padding-top: 20px; margin-top: 10px; } + .comments { + max-width: 740px; + } .diary-comment { margin-top: 10px; + border-top: 1px dashed #ccc; + padding-top: 10px; &:first-child { margin-top: 20px; padding-top: 20px; @@ -1210,7 +1208,6 @@ td.browse_comments { } p { margin-bottom: 10px; - margin-left: 70px; } .comment-heading { margin-bottom: 0; @@ -1375,7 +1372,7 @@ p#contributorGuidance { background-color: #ff7070; } &#warning { - background-color: #fff6f0; + background-color: #ffe0cc; } &#notice { background-color: #CBEEA7; @@ -1454,8 +1451,8 @@ textarea { /* Rules for user images */ img.user_image { - width: 100px; - height: 100px; + max-width: 100px; + max-height: 100px; border: 1px solid #ccc; margin-bottom: 20px; float: left; @@ -1463,8 +1460,8 @@ img.user_image { } img.user_thumbnail { - width: 50px; - height: 50px; + max-width: 50px; + max-height: 50px; border: 1px solid #ccc; margin-right: 20px; } @@ -1516,18 +1513,9 @@ ul.secondary-actions { border-left: 0; padding-left: 0; } - } - .hidden li, - .hide_unless_logged_in li, - .hide_unless_administrator li { - border-left: 1px solid #ccc; - padding-left: 5px; + &:last-child { + margin-right: 0px; } - .hidden:first-child li, - .hide_unless_logged_in:first-child li, - .hide_unless_administrator:first-child li { - border-left: 0; - padding-left: 0; } } @@ -1566,6 +1554,7 @@ a.button.submit { background-color: #9ed485; } } + /* Rules for doing distinct colour of alternate table rows */ .table0, @@ -1585,68 +1574,197 @@ a.button.submit { border: 0; } +/* Rules for rich text */ + +.richtext { + h1, h2 { + padding-bottom: 10px; + border-bottom: 1px dashed #cccccc; + margin-bottom: 10px; + } + + h1 { + font-size: 24px; + } + + h2 { + font-size: 18px; + } + + h3 { + font-size: 14px; + } + + img { + padding: 20px; + background-color: #f4f4ff; + display: block; + max-width: 100%; + margin: auto; + box-sizing: border-box; + -moz-box-sizing: border-box; + } + + blockquote { + border-left: 20px solid #f4f4ff; + padding-left: 20px; + margin: 0; + color: #7E7E7E; + } + + ul, ol { + font-style: italic; + padding-left: 20px; + margin-bottom: 20px; + margin-left: 20px; + } + + ul li { + list-style: disc; + } + + ol li { + list-style: decimal; + } +} + +.diary_post .richtext { + margin-top: 20px; + } + +.comments .richtext { + margin-left: 70px; + margin-top: 0; +} + /* Rules for rich text editors */ .richtext_container { white-space: nowrap; + .richtext_content { display: inline-block; vertical-align: top; + white-space: normal; + .richtext_preview { display: inline-block; padding: 20px; background-color: #f4f4ff; - white-space: normal; + overflow-x: scroll; + &.loading { background-image: image-url("loading.gif"); background-repeat: no-repeat; background-position: center; } + > :first-child { margin-top: 0px; } } } + .richtext_help { display: inline-block; vertical-align: top; margin-left: 15px; background-color: #f8f8ff; - padding: 20px; - p { - margin: 0px; + padding: 10px; + width: 200px; + + ul { + margin-bottom: 0; } - th { - vertical-align: top; - text-align: left; - padding: 0px 15px 0px 0px !important; + + h4.heading, li { + border-bottom: 1px solid #ccc; + margin-bottom: 5px; + padding-bottom: 5px; } - table > thead th { - font-weight: bold; + + li h4, li span { + display: block; + font-size: 11px; } - td { - font-family: fixed; - line-height: 16px; - text-align: left; - padding: 0px !important; + + li h4 { + margin: 0; + float: left; } - input.richtext_doedit { - margin-top: 5px !important; - margin-right: 10px !important; + + li span { + float: right; + width: 50%; + margin-left: 10px; } + + input.richtext_doedit, input.richtext_dopreview { - margin-top: 5px !important; - margin-left: 10px !important; + margin-right: 10px; } } } +/* Rules for the user notes list */ + +.note_list { + tr.creator { + background-color: #eeeeee; + } + + td { + padding: 3px; + } + + p { + margin-bottom: 0px; + } +} + /* Rules for the notes interface */ .note { + padding-top: 10px; +} + +.note { + h2 { + margin-bottom: 10px; + } + + div { + margin-top: 10px; + } + + .permalink { + position: absolute; + top: 5px; + left: 5px; + min-width: 15px; + min-height: 15px; + background: image-url("sprite.png") 0 -45px no-repeat; + } + + .permalink span { + display: none; + padding-left: 20px; + } + + .permalink:hover span { + display: block; + } + + .warning { + display: block; + background-color: #ffe0cc; + padding: 4px 6px; + margin-bottom: 10px; + } + .comment_body { - margin-top: 4px; - margin-bottom: 4px; + margin-top: 2px; + margin-bottom: 2px; p { margin-top: 0px;