X-Git-Url: https://git.openstreetmap.org/rails.git/blobdiff_plain/a36f3558dd43dd5a598e36dd21fd5f7d2b4a94f5..a14abfe90bb5d5145049b06e83be5d752145bb6a:/app/assets/stylesheets/common.css.scss diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss index 255b846cf..bab4c9560 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 { @@ -537,6 +538,12 @@ table { background:#fff; } +.leaflet-control-attribution a.disabled { + color: #99c9dc; + cursor: default; + text-decoration: none; +} + .site-index .leaflet-top, .site-export .leaflet-top { top: 10px !important; @@ -550,6 +557,17 @@ table { left: 10px !important; } +.leaflet-popup-scrolled { + padding-right: 20px; + border-bottom: 0px !important; + border-top: 0px !important; +} + +.leaflet-popup-content-wrapper { + border-radius: 4px !important; + -webkit-border-radius: 4px !important; +} + /* Rules for edit menu */ .menuicon { @@ -777,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%; } @@ -793,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; @@ -879,7 +910,7 @@ ul.results-list li { border-bottom: 1px solid #ccc; } } } .selected { - background-color: rgb(255, 255, 160); + background: #FFFFC0; } .date, .user { @@ -909,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; @@ -1005,6 +1048,7 @@ ul.results-list li { border-bottom: 1px solid #ccc; } } .activity-block { + clear: left; border-bottom: 1px solid #ccc; padding-bottom: 20px; float: left; @@ -1043,11 +1087,6 @@ ul.results-list li { border-bottom: 1px solid #ccc; } min-height: 62px; } -.content_map .leaflet-popup-content-wrapper { --webkit-border-radius: 4px; - border-radius: 4px; -} - /* Rules for user popups on maps */ .user_popup { @@ -1104,6 +1143,7 @@ ul.results-list li { border-bottom: 1px solid #ccc; } } .diary_post { + max-width: 740px; position: relative; margin-top: 20px; padding-top: 20px; @@ -1119,20 +1159,9 @@ ul.results-list li { border-bottom: 1px solid #ccc; } 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;} } @@ -1140,14 +1169,12 @@ ul.results-list li { border-bottom: 1px solid #ccc; } 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; } } @@ -1167,8 +1194,13 @@ ul.results-list li { border-bottom: 1px solid #ccc; } 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; @@ -1176,7 +1208,6 @@ ul.results-list li { border-bottom: 1px solid #ccc; } } p { margin-bottom: 10px; - margin-left: 70px; } .comment-heading { margin-bottom: 0; @@ -1341,7 +1372,7 @@ p#contributorGuidance { background-color: #ff7070; } &#warning { - background-color: #fff6f0; + background-color: #ffe0cc; } &#notice { background-color: #CBEEA7; @@ -1420,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; @@ -1429,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; } @@ -1482,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; } } @@ -1532,6 +1554,7 @@ a.button.submit { background-color: #9ed485; } } + /* Rules for doing distinct colour of alternate table rows */ .table0, @@ -1551,58 +1574,192 @@ 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 { + h2 { + margin-bottom: 10px; + } + + div { + margin-top: 10px; + } + + .permalink { + margin: -10px 0 10px -12px; + } + + .warning { + display: block; + background-color: #ffe0cc; + padding: 4px 6px; + margin-bottom: 10px; + } + + .comment_body { + margin-top: 2px; + margin-bottom: 2px; + + p { + margin-top: 0px; + margin-bottom: 0px; + } + } + + .comment { + width: 100%; + } + + .buttons { + margin-top: 5px; + text-align: right; + } +}