X-Git-Url: https://git.openstreetmap.org/rails.git/blobdiff_plain/ebcb038c1c27695790f81900204d4c8589b2dfbb..167bc5001d23c429f090c55a932c7d66e2cc2b8e:/app/assets/stylesheets/common.css.scss diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss index 0f7100481..42f3c0b70 100644 --- a/app/assets/stylesheets/common.css.scss +++ b/app/assets/stylesheets/common.css.scss @@ -1,30 +1,143 @@ /* Styles common to large and small screens */ +/* Minimal CSS reset */ + +html, body, ul, ol, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p { + margin: 0; + padding: 0; + border: 0; + font-size:100%; +} + +fieldset,img { border: 0; } + +legend { color: #000; } + +sup { vertical-align: text-top; } + +sub { vertical-align: text-bottom; } + +table { + border-collapse: collapse; + border-spacing: 0; +} + +li { list-style: none; } + +input, +select, +textarea, +body { font: 14px/20px "Helvetica Neue",Arial,sans-serif; } + +abbr, acronym { + border-bottom: .1em dotted; + cursor: help; +} + +/* Micro Clearfix | Details: http://nicolasgallagher.com/micro-clearfix-hack/ */ + +.clearfix:before, +.clearfix:after { + content: " "; + display: table; +} + +.clearfix:after { + clear: both; +} + /* Default rules for the body of every page */ +* { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + body { font-family: 'Helvetica Neue',Arial,sans-serif; font-size: 14px; - line-height: 20px; + line-height: 1.6666; color: #222; background-color: #fff; margin: 0px; padding: 0px; + text-align: left; } body.slim { background-color: #f0f0f0; } +h1, h2, h3 { + margin-top: 10px; + margin-bottom: 20px; + font-weight: bold; + line-height: 1.2; +} + +h1, h2 { + font-size: 32px; +} + +#content h2 { + font-size: 21px; +} + +h3 { + font-size: 21px; + margin-top: 10px; + margin-bottom: 20px; +} + +h4,h5,h6 { + font-size: 14px; + margin-top: 10px; + margin-bottom: 10px; + font-weight: bold; + line-height: 1.5; +} + +p, ul { + margin-bottom: 20px; +} + +p > img { + width: auto; + max-width: 100%; +} + +small, aside { + font-size: 12px; +} + +h1:first-child, +h2:first-child, +h3:first-child, +h4:first-child, +h5:first-child, +h6:first-child { + margin-top: 0; +} + +.column-1 { + width: 50%; + margin-bottom: 10px; +} + +.small_icon { + vertical-align: middle; + margin-right: 5px; +} + /* Rules for links */ a { color: #00f; text-decoration: none; -} - -a:hover { - text-decoration: underline; + &:hover { + text-decoration: underline; + } } /* Rules for horizontal lines */ @@ -36,49 +149,59 @@ hr { height: 1px; } -/* Default rules for headings */ +/* General styles for tables */ -h2 { - margin: 5px 0; - font-size: 25px; - line-height: 30px; +table { + width: 100%; + margin-bottom: 20px; + th, td { + text-align: left; + padding: 5px; + line-height: 20px; + } + th { + font-weight: bold; + vertical-align: top; + } + td { + vertical-align: middle; + } } /* Rules for the whole left sidebar, including the logo */ #left { position: absolute; - top: 0px; + height: 100%; width: 185px; font-size: 11px; - line-height: 12px; + line-height: 1.1; + z-index: 100; + border-right: 1px solid #ccc; } /* Rules for the OpenStreetMap logo in the top left corner */ #logo { + display: block; width: 170px; min-width: 170px; - padding: 5px; + padding: 20px 5px; text-align: center; - margin: 25px 0 5px 0; -} - -#logo img { - border: 0px; + margin: auto; } #logo h1 { font-size: 18px; - line-height: 20px; + line-height: 1; text-align: center; - margin: 0px; + margin: 0; } #logo h2 { font-size: 10px; line-height: 15px; - margin: 0px; + margin: 0; } /* Rules for the site name */ @@ -87,14 +210,10 @@ h2 { display: none; } -#small-title img { - border: 0px; -} - /* Rules for the introductory text displayed in the left sidebar to new users */ .sidebar-copy { - padding: 0px 10px; + padding: 5px 10px; } .sidebar-copy p { @@ -102,7 +221,6 @@ h2 { } .sidebar-copy.intro { - margin-top: -1px; border-top: 1px solid #ccc; } @@ -113,15 +231,13 @@ h2 { */ .sidebar-alert { - padding: 4px 5px 4px 5px; + padding: 5px; border-top: 1px solid #ccc; margin-top: 4px; - margin-bottom: -4px; + margin-bottom: -5px; background: #e00; - font-size: 13px; + font-size: 12px; font-weight: bold; - line-height: 17px; - p { margin: 5px; } @@ -134,14 +250,12 @@ h2 { */ .sidebar-notice { - padding: 4px 5px 4px 5px; + padding: 5px; border-top: 1px solid #ccc; margin-top: 4px; - margin-bottom: -4px; + margin-bottom: -5px; background: #ea0; - font-size: 13px; - line-height: 17px; - + font-size: 12px; p { margin: 5px; } @@ -150,38 +264,39 @@ h2 { /* Rules for the menu displayed in the left sidebar */ .left_menu { + left: 0px; + margin: 0; padding: 5px 10px; - margin: 4px 0; + font-size: 12px; + line-height: 1.25; + list-style-type: none; + border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; - line-height: 20px; - font-size: 14px; - font-weight: bold; } -.left_menu h1 { - font-style: normal; - font-size: 15px; +.left_menu img { + margin: 10px 0px; } .left_menu ul { - margin: 0px; - list-style-type: none; + padding: 0; + margin: 0; } .left_menu li { - margin: 0px; - padding: 0px; + list-style-type: none; + padding: 0; + margin: 0; } -/* submenus */ -.left_menu ul li ul { - font-weight: normal; - line-height: 15px; +.left_menu h4 { + padding: 5px 0 5px 0; font-size: 12px; + margin: 0; } -.left_menu a { - color: #000; +.left_menu li:last-child h4 { + padding-top: 0; } /* Rules for SOTM advert */ @@ -205,44 +320,30 @@ h2 { */ .optionalbox { + left: 0px; padding: 5px 10px; - margin: 4px 0; -} - -.optionalbox h1 { - font-size: 14px; - font-weight: bold; - line-height: 20px; - margin: 0px; - vertical-align: bottom; + margin: 5px 0; + text-align: left; } /* Rules for the search box */ -.whereami { -} - #search_field form { - width: 100%; - margin: 0px; - padding: 0px; + width: 165px; } #search_field { - position:relative; + position: relative; } #search_field input[type="text"] { width: 165px; - padding: 5px; + padding: 3px; font-size: 14px; - line-height: 15px; + line-height: 1.1; height: 25px; + padding: 2px 0px 2px 5px; box-shadow: inset #DDD 0px 1px 3px; - box-sizing: border-box; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; } #search_field input[type="text"]:focus { @@ -251,102 +352,120 @@ h2 { } #search_field input[type="submit"] { + border: 0; + margin: 0; + padding: 0; width: 15px; height: 15px; - border:0; - text-indent:-1000px; - padding-left: 0px; - padding-right: 0px; - background: url(sprite.png); - position:absolute; - right:2px; - top:5px; - cursor:pointer; + text-indent: -1000px; + overflow: hidden; + background: image-url("sprite.png") 0 0 no-repeat; + position: absolute; + top: 5px; + right: 5px; + cursor: pointer; } .search_help { - margin:0; + margin: 5px 0 0 0; } +/* Utility for de-emphasizing content */ + .deemphasize { color: #999; -} - -.deemphasize a { - color: #7092FF; + a { + color: #7092FF; + } } /* Rules for donation request box */ .donate { - width: 153px; - margin: 10px 10px; + display: block; + width: 164px; padding: 5px; border: 1px solid #AED1A0; background: #cbeea7; - line-height: 20px; - text-align: center; font-size: 14px; + line-height: 1.4; + text-align: center; border-radius: 2px; - -moz-border-radius: 2px; -} + color: #222; + margin: 10px 10px 0px 10px; -.donate a { - color:#222; + &:hover { + background: #9ed485; + text-decoration: none; + } + span { + margin: 0; + padding-left: 18px; + background: image-url("sprite.png") 0 -29px no-repeat; + } } /* Rules for Creative Commons logo button */ #cclogo { - margin-top: 10px; - margin-bottom: 10px; + margin: 10px 0; + float: right; } /* Rules for tabbed navigation bar */ #top-bar { + position: relative; + margin-left: 185px; + height: 30px; border-bottom: 1px solid #ccc; - height: 29px; + background: white; + z-index: 100; +} + +.site-edit #top-bar, +.site-index #top-bar, +.site-export #top-bar { + position: fixed; + left: 0; + right: 0; } #tabnav { - padding: 0; - margin: 0; - overflow:hidden; + height: 30px; + margin-bottom:0; + overflow: hidden; } #tabnav li { - margin: 0px; - padding: 0px; display: inline; - list-style-type: none; } #tabnav a, #tabnav a:link, #tabnav a:visited { - background: #fff; - font-size: 14px; - line-height: 19px; + float: left; font-weight: bold; - padding: 5px 10px; + padding: 3px 10px; text-decoration: none; color: #333; + float: left; + margin-right: 1px; -webkit-transition: color 200ms ease-in; - -moz-transition: color 200ms ease-in; - -o-transition: color 200ms ease-in; - transition: color 200ms ease-in; + -moz-transition: color 200ms ease-in; + -o-transition: color 200ms ease-in; + transition: color 200ms ease-in; } -body.site-index #tabnav a#viewanchor, -body.site-edit #tabnav a#editanchor, -body.changeset-list #tabnav a#historyanchor, -body.site-export #tabnav a#exportanchor { +.site-index #tabnav a#viewanchor, +.site-edit #tabnav a#editanchor, +.changeset-list #tabnav a#historyanchor, +.site-export #tabnav a#exportanchor { border-bottom: 1px solid #aaa; background: #9ed485; color: #000; } #tabnav a:link:hover, #tabnav a:visited:hover { - text-decoration:underline; + text-decoration: underline; } #tabnav a:link.disabled, @@ -364,10 +483,12 @@ body.site-export #tabnav a#exportanchor { text-decoration: none; } +/* Utility for styling notification numbers */ + .count-number { padding: 2px 5px; border-radius: 3px; - background: #eee; + background: #d7d7ff; margin: 0 2px; font-size: 11px; color: #333; @@ -376,10 +497,9 @@ body.site-export #tabnav a#exportanchor { /* Rules for greeting bar in the top right corner */ #greeting { - height: 28px; - margin: 0px; - font-size: 13px; - line-height: 28px; + float: right; + padding-top: 3px; + margin-right: 5px; } .greeting-bar-unread { @@ -392,45 +512,59 @@ body.site-export #tabnav a#exportanchor { z-index: 20000000; position: absolute; top: 15px; + left: 15px; } -/* Rules for OpenLayers maps */ +/* Rules for Leaflet maps */ -#map { - margin: 0px; - border: 0px; - padding: 0px; +.leaflet-control-attribution { + a.disabled { + color: #99c9dc; + cursor: default; + text-decoration: none; + } + + ul.secondary-actions { + float: left; + margin-right: 5px; + + &:only-child { + margin-right: 0px; + } + } } -.olControlAttribution { - bottom: 15px !important; - left: 0px !important; - right: 0px !important; - text-align: center; +.site-index .leaflet-top, +.site-export .leaflet-top { + top: 10px !important; + .leaflet-control { + margin-top: 0px !important; + } } -#permalink { - z-index: 10000; - position: absolute; - bottom: 0px; - right: 0px; - padding: 5px; - background:#fff; - text-align: right; - font-size: 12px; +.site-index #map .olControlScaleLine, +.site-export #map .olControlScaleLine { + left: 10px !important; } -#permalink a { - padding: 5px; +.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 { - padding: 5px; - + padding: 0 5px; + font-weight: normal; + display: inline-block; &:hover { - background: #eee; text-decoration: none !important; } } @@ -446,13 +580,10 @@ body.site-export #tabnav a#exportanchor { .menu ul { margin: 0px; - padding: 0px; } .menu li { padding: 2px 5px; - margin: 0px; - list-style-type: none; border-top: 1px solid #eee; white-space: nowrap; } @@ -463,6 +594,11 @@ body.site-export #tabnav a#exportanchor { display: none; } +.attribution_license, +.attribution_project { + text-align: left; +} + .attribution_notice { text-align: center; } @@ -472,44 +608,58 @@ body.site-export #tabnav a#exportanchor { #sidebar { display: none; position: absolute; - margin: 0px; - padding: 0px; - width: 30%; + overflow: auto; top: 0px; bottom: 0px; + left: 0px; + border-right: 1px solid #ccc; + width: 33.3333%; + .sidebar_heading { + position: relative; + padding: 10px 20px; + z-index: 9999; + background: #F4F4FF; + border-bottom: 1px solid #ccc; + } + h4 { + margin: 0; + } + ul { + margin-bottom: 0; + li { + margin-bottom: 5px; + &:last-child { + margin-bottom: 0; + } + } + } } -#sidebar #sidebar_content { - overflow: auto; +#sidebar_close { position: absolute; - font-size: 13px; - line-height: 15px; - top: 29px; - bottom: 0px; - left: 0px; - right: 0px; + height: 20px; + top: 0px; + bottom: 0; + right: 20px; + margin: auto; } -#sidebar .sidebar_title { - margin: 0px; - padding: 3px 6px 4px 6px; - height: 29px; - font-size: 14px; - line-height: 15px; - background: #bbb; +#sidebar_content { + position: relative; + bottom: 0; + width: 100%; + h4 { + padding: 0 20px 10px 20px; + margin-top: 10px; + margin-bottom: 0; + border-bottom: 1px solid #ddd; + } } /* Rules for the map key which appears in the popout sidebar */ -#mapkey h3 { - font-size: 110%; - font-weight: normal; - text-align: center; -} - -#mapkey .mapkey-table { - padding-left: 5px; - padding-right: 5px; +#mapkey { + padding: 20px; } #mapkey .mapkey-table-key img { @@ -518,8 +668,8 @@ body.site-export #tabnav a#exportanchor { margin-right: auto; } -#mapkey .mapkey-table-value { - font-size: 90%; +#mapkey td { + padding: 0 5px 5px 5px; } /* Rules for search results which appear in the popout sidebar */ @@ -529,77 +679,85 @@ body.site-export #tabnav a#exportanchor { margin-bottom: 5px; } -.search_results_heading { - margin: 0px; - padding: 2px 5px; - border-bottom: 1px solid #ccc; - font-weight: bold; +.search_results_entry { + margin-bottom: 0; + + .search_details { + display: block; + text-align: right; + } } -.search_results_entry { - margin: 0px; - padding: 2px 5px; +.search_results_entry .search_searching { + text-align: center; + margin: 20px auto; + width: 20px; + display: block; } +ul.results-list li { border-bottom: 1px solid #ccc; } + .search_results_error { - margin: 0px; - padding: 2px 6px 0px; color: #f00; } /* Rules for data browser information which appears in the popout sidebar */ -.browse_heading { - margin: 0px; - padding: 3px 6px; - border: 1px solid #ccc; - background: #ddd; +#browse_content { + position: relative; + .browse_show_list.button { + position: absolute; + left: 20px; + right: 20px; + bottom: -40px; + margin-bottom: 0; + } + a.more-details { + position: absolute; + top: 0; + right: 20px; + } + ul li { + margin-bottom: 0; + } } .browse_details { - margin: 0px; - padding: 0px 6px; + position: relative; +} + +.browse_status { + display: none; } /* Rules for export information which appears in the popout sidebar */ -.export_heading { - margin: 0px; - padding: 2px 5px; - border-bottom: 1px solid #ccc; - font-weight: bold; -} - .export_bounds { - width: 100%; text-align: center; } -.export_bound { - margin: 5px; +.export_area_inputs { + margin-bottom: 10px; } -.export_details { - padding: 2px 6px; +.export_bound { + margin: 5px; } -#export_osm { - display: none; +.export_details input[type="text"]#export_html_text { + width: 100%; } -#export_mapnik { - display: none; +#sidebar #marker_inputs li:last-child { + margin-bottom: 10px; } +#export_osm, +#export_mapnik, #export_osmarender { display: none; } -.export_hint { - padding: 0px 12px; - font-style: italic; -} - .export_buttons { width: 100%; text-align: center; @@ -608,17 +766,37 @@ body.site-export #tabnav a#exportanchor { /* Rules for the main content area */ #content { - padding: 10px; - margin: 0px; - position: absolute; - bottom: 0px; + padding: 20px; + position: relative; } -.site-index #content, .site-edit #content, +.site-index #content, .site-export #content { - border: 0px; - padding: 0px; + position: fixed; + padding: 0; + top: 30px; bottom: 0; + left: 184px; right: 0; + border-left: 1px solid #ccc; +} + +.wrapper { + margin-left: 184px; + border-left: 1px solid #ccc; + text-align: left; +} + +.site-edit #content { + top: 30px; +} + +#content.maximised { + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 0; + z-index: 1000; } #slim_container { @@ -637,32 +815,65 @@ body.site-export #tabnav a#exportanchor { #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; } #slim_header img { vertical-align: middle; margin-bottom: 5px; + margin-right: 5px; } -/* Rules for the home page */ +.content-heading { + position: relative; + padding: 20px; + background: #F4F4FF; + h1, h2 { + margin-bottom: 10px; + line-height: 100%; + &:last-child { + margin-bottom: 0; + } + } + p { + margin-top: 10px; + margin-bottom: 0px; + } +} -.site-index #map { - position: absolute; - top: 0px; - bottom: 0px; - left: 0px; - right: 0px; +/* Rules for small maps in content areas */ + +.content_map { + position: relative; + width: 45%; + height: 400px; + border: 1px solid #ccc; + margin-bottom: 20px; + float: right; +} + +.content_map #small_map { + height: 100%; + width: 100%; + margin-bottom: 20px; } -.site-export #map { +/* Rules for the home page */ + +.site-export #map, +.site-index #map { position: absolute; top: 0px; bottom: 0px; @@ -683,81 +894,117 @@ body.site-export #tabnav a#exportanchor { /* Rules for the changeset list shown by the history tab etc */ -#changeset_list_container { - position: relative; -} - #changeset_list { - width: 50%; - font-size: small; - border-collapse: collapse; - border-width: 0px; - margin-top: 1px; - margin-bottom: 1px; -} - -#changeset_list td { - vertical-align: top; - padding: 3px; -} - -#changeset_list .date { - white-space: nowrap; -} - -#changeset_list .user { - white-space: nowrap; + width: 100%; + ul { + padding: 10px 0; + margin-bottom: 0px; + border-top: 1px solid #ccc; + &:last-child { + border-bottom: 1px solid #ccc; + } + } + .selected { + background: #FFFFC0; + } + .date, + .user { + border-left: 1px solid #ccc; + padding-left: 5px; + margin-right: 5px; + } } -#changeset_list .area { - white-space: nowrap; +#changeset_list_map_wrapper { + position: absolute; + width: 50%; + height: 490px; + top: 0; + right: 0; } -#changeset_list .selected { - background-color: rgb(255, 255, 160); - background-color: rgba(255, 255, 85, 0.5); +#changeset_list_map_wrapper.scrolled { + position: fixed; } #changeset_list_map { position: absolute; - top: 0px; - bottom: 0px; - width: 49%; - min-height: 400px; - border: solid 1px black; + bottom: 20px; + top: 20px; + right: 20px; + left: 20px; + border: 1px solid #ccc; } -/* Rules for the data browser */ - -#browse_navigation { - width: 250px; - text-align: center; +#changeset_list_map_wrapper.scrolled #changeset_list_map { + margin-left: 93px; } -table.browse_details th { - white-space: nowrap; -} +/* Rules for the data browser */ -#browse_map { - width: 250px; +.browse-section { + border-top: 1px solid #ccc; + margin-top: 10px; + padding-top: 10px; + &:first-child { + margin-top: 0; + } + .warning { + background-color: #ffe0cc; + margin: 0px; + padding: 4px 6px; + max-width: 100%; + } + h4, p { + margin-bottom: 5px; + } + p, ul, .bbox, .geo { + display: inline-block; + vertical-align: top; + max-width: 65%; + } + ul p { + margin-left: 0; + margin-bottom: 0; + } + h4 { + width: 33.3333%; + display: inline-block; + vertical-align: top; + } } -#browse_map #small_map { - width: 250px; - height: 300px; - border: solid 1px black; +.bbox { + div { + width: 33.3333%; + text-align: center; + padding: 5px 0; + overflow: hidden; + text-overflow: ellipsis; + float: left; + } + .max_lat, + .min_lat { + margin-left: auto; + margin-right: auto; + width: 100%; + } } #browse_map .geolink { display: none; } +#browse_map .secondary-actions { + margin-bottom: 10px; +} + /* Rules for the trace list shown by the traces tab etc */ #trace_list { - font-size: small; - border-collapse: collapse; + font-size: 10px; border-width: 0px; + text-align: right; } #trace_list .trace_summary { @@ -785,11 +1032,101 @@ table.browse_details th { color: red; } +/* Rules for the user profile page */ + +#userinformation { + min-height: 100px; + .userinformation-inner { + float: left; + } + h2 { + margin-top: 0; + } + .user-description { + width: 100%; + clear: both; + } + .deemphasize { + margin: 0; + } +} + +.admin-user-info small { + margin-bottom: 10px; + display: inline; + margin-right: 20px; +} + +.activity-block { + clear: left; + border-bottom: 1px solid #ccc; + padding-bottom: 20px; + float: left; + h3 { + margin-bottom: 10px; + } +} + +.contact-activity { + margin-top: 20px; + width: 100%; +} + +.activity-details p { + margin-left: 72px; + margin-bottom: 0; +} + +#friends-container .contact-activity ul { + margin-left: 72px; + } + +.user-view p#no_home_location { + margin: 20px; +} + +.user-view .user_thumbnail { + margin-top: 5px; + float: left; +} + +/* Rules for the user map */ + +.content_map .leaflet-popup-content { + margin: 10px; + min-height: 50px; +} + +/* Rules for user popups on maps */ + +.user_popup { + min-width: 200px; +} + +.user_popup p { + padding-top:0; + padding-bottom: 5px; + margin-top: 0; +} + +.user_popup img.user_thumbnail { + float: left; + margin: 0 10px 0 0; +} + +/* Rules for user popups on maps */ + +.user_popup p { + margin-bottom: 0; + margin-left: 60px; + font-size: 12px; +} + /* Rules for the user list */ #user_list { + font-size: 10px; width: 100%; - font-size: small; } #user_list tr { @@ -802,75 +1139,109 @@ table.browse_details th { } #user_list_actions { + float: right; margin-top: 10px; } -/* Rules for the new diary entry page */ +/* Rules for the diary list page */ -.diary_entry div#map { - position: relative; - width: 90%; - height: 400px; - border: 1px solid #ccc; - display: none; +.diary_entry-list img.user_thumbnail { + float: left; } -/* Rules for the login page */ +.diary_post { + max-width: 740px; + position: relative; + margin-top: 10px; + padding-top: 20px; + border-top: 1px solid #ccc; -#login_wrapper div { - margin: 5px; - padding: 15px; - border-radius: 15px; - -moz-border-radius: 15px; + &:first-child { + margin-top: 0; + border-top: 0; + padding-top: 0; + } + h1, h2 { + font-size: 21px; + line-height: 1; + } + small.deemphasize { + float: left; + display: block; + } + ul.secondary-actions { display: inline-block;} } -#login_login { - background-color: #f5f5ff; - border: 1px solid #f3f3ff; - border-radius: 15px; - -moz-border-radius: 15px; +.content-heading .hide_unless_logged_in { // hacky selector, better to just add a new class to this div + display: inline; } -#login_login h1 { - margin-top: 5px; +#content .post_heading { + margin-bottom: 20px; + h2 { + margin-top: 0; + margin-bottom: 10px; + font-size: 24px; + } } -table#login_openid_buttons { - padding-bottom: 10px; -} +/* Rules for the diary entry page */ -#login_openid_buttons td { - padding-left: 10px; - padding-right: 10px; - padding-top: 5px; - padding-bottom: 5px; +.diary_entry { + #map { + position: relative; + width: 90%; + height: 400px; + border: 1px solid #ccc; + display: none; + margin-bottom: 20px; + } + #newcomment { + border-top: 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; + border-top: 1px solid #ccc; + } + p { + margin-bottom: 10px; + } + .comment-heading { + margin-bottom: 0; + margin-top: 0; + } + } } -#login_openid_buttons img { - border: 0; +.diary_entry-view img.user_thumbnail { + float: left; } -#login_signup form.button-to div { - margin: 0px; - padding: 0px; +/* Rules for the login page */ + +#login_openid_buttons li { + float: left; + padding: 5px 10px; } /* Rules for the account confirmation page */ div#contributorTerms { - border: 1px solid black; - padding: 4px; + border: 1px solid #ccc; + padding: 20px; + margin-bottom: 20px; overflow: auto; - width: 95%; - height: 400px; -} - -div#slim_content div#contributorTerms { - width: auto; -} - -div#contributorTerms p#first { - margin-top: 0px; + height: 398px; } div#contributorTerms p#last { @@ -883,14 +1254,15 @@ div#contributorTerms ol { div#contributorTerms img { display: block; - margin-left: auto; - margin-right: auto; - margin-top: 10%; + margin: 20px auto inherit auto; +} + +form#termsForm div#buttons { + float: right; } -form#termsForm { - width: 95%; - margin-bottom: 3em; +form#termsForm input#agree { + margin-left: 40px; } div#slim_content form#termsForm { @@ -898,10 +1270,10 @@ div#slim_content form#termsForm { } p#contributorGuidance { - background-color: #f5f5ff; - border: 1px solid #f3f3ff; - border-radius: 15px; - -moz-border-radius: 15px; + background-color: #f4f4ff; + border-radius: 4px; + -moz-border-radius: 4px; + margin-top: 20px; padding: 10px; } @@ -918,12 +1290,13 @@ p#contributorGuidance { #accountForm .user_map { position: relative; width: 500px; - height: 400px; + height: 400px; border: 1px solid #ccc; } -#accountImage td { - padding-bottom: 0px; +.accountImage-options { + width: 50%; + display: inline-block; } .nohome .location { @@ -942,101 +1315,82 @@ p#contributorGuidance { margin-top: 15px; } -/* Rules for the user view */ - -.user-view .user_map { - position: relative; - width: 400px; - height: 400px; - border: 1px solid #ccc; -} - -.user-view .user_map p#no_home_location { - position: absolute; - top: 0px; - bottom: 0px; - width: 90%; - height: 30%; - margin: auto 5% +.content_map.settings_map { + float: none; + width: 50%; } -/* Rules for the user map */ +/* Rules for message in/out box page */ -.user_map .olControlSimplePanZoom { - display: none; +.messages { + width: 100%; + border: 1px solid #ddd; } -.user_map .olControlZoom { - display: block; +.messages tbody tr { + border-top: 1px solid #ccc; } -/* Rules for user popups on maps */ - -.user_popup p { - padding-top: 3px; - padding-bottom: 3px; - margin-top: 0px; - margin-bottom: 0px; - margin-left: 55px; - margin-right: 2px; +.messages .inbox-row { + background: #f8f8ff; } -.user_popup img.user_thumbnail { - float: left; +.messages .inbox-row-unread { + background:#CBEEA7; } -/* Rules for message in/out box page */ - -#messages { - border: 1px solid #ccc; +.right { + float: right; } -.inbox-row-unread .inbox-subject { - font-weight: bold; +.messages tr td, +.messages tr th { + padding: 5px; } .inbox-row .inbox-mark-read { display: none; } -.inbox-row-unread .inbox-mark-unread { - display: none; +.info-line { + margin-bottom: 20px; + padding: 5px 0px 4px 0px; + border-bottom: 1px solid #ccc; } -/* Rules for "flash" notice boxes shown at the top of the content area */ +.info-line form, +.info-line form div { + display: inline; +} -#error { - border: 1px solid red; - padding: 7px; - background-color: #fff0f0; - margin-bottom: 20px; - border-radius: 5px; - -moz-border-radius: 5px; +.info-line .user_thumbnail_tiny { + vertical-align: middle; } -#warning { - border: 1px solid orange; - padding: 7px; - background-color: #fff6f0; - margin-bottom: 20px; - border-radius: 5px; - -moz-border-radius: 5px; +.inbox-row-unread .inbox-mark-unread { + display: none; } -#notice { - border: 1px solid green; - padding: 7px; - background-color: #f0fff0; - margin-bottom: 20px; - border-radius: 5px; - -moz-border-radius: 5px; +/* Rules for "flash" notice boxes shown at the top of the content area */ + +.flash { + padding: 20px; + &#error { + background-color: #ff7070; + } + &#warning { + background-color: #ffe0cc; + } + &#notice { + background-color: #CBEEA7; + } } /* Rules for highlighting fields with rails validation errors */ .field_with_errors { padding: 2px; - background-color: red; + background-color: #ff7070; display: table; } @@ -1044,19 +1398,20 @@ p#contributorGuidance { #errorExplanation { width: 400px; - border: 2px solid red; - padding: 7px; - padding-bottom: 12px; + border: 2px solid #ff7070; + padding: 10px; margin-bottom: 20px; background-color: #f0f0f0; } #errorExplanation h2 { + margin: -10px; + padding: 5px 5px 5px 15px; font-weight: bold; font-size: 12px; - margin: -7px; background-color: #c00; color: #fff; + text-align: left; } #errorExplanation p { @@ -1067,20 +1422,29 @@ p#contributorGuidance { #errorExplanation ul li { font-size: 12px; - list-style: square; + list-style: disc; } /* Rules for forms */ +.submitButton { + text-align: center; +} + .fieldName { vertical-align: top; font-weight: bold; font-size: 12px; - line-height: 20px; + line-height: 1.6666; + text-align: right; +} + +.submitButton { + text-align: right; } .minorNote { - font-size: 0.8em; + font-size: 12px; } input[type="text"], @@ -1096,13 +1460,23 @@ textarea { img.user_image { max-width: 100px; max-height: 100px; - border: 1px solid black; + border: 1px solid #ccc; + margin-bottom: 20px; + float: left; + margin-right: 20px; } img.user_thumbnail { max-width: 50px; - max-height: 100px; - border: 1px solid black; + max-height: 50px; + border: 1px solid #ccc; + margin-right: 20px; +} + +img.user_thumbnail_tiny { + max-width: 25px; + max-height: 25px; + border: 1px solid #ccc; } /* Rule for "nowrap" class that can be applied to anything to stop wrapping */ @@ -1121,16 +1495,81 @@ abbr.geo { .rsssmall { position: relative; - top: 4px; + top: 5px; +} + +/* General styles for action lists / subnavs / pager navs */ + +ul.secondary-actions { + font-style: normal; + margin-bottom: 0; + margin-left: 0; + &.pager { + display: inline-block; + margin-right: 60px; + } + li { + display: block; + float: left; + list-style: none; + border-left: 1px solid #ccc; + padding-left: 5px; + margin-right: 5px; + &:first-child { + border-left: 0; + padding-left: 0; + } + &:last-child { + margin-right: 0px; + } + } +} + +/* Utility for managing inner content areas */ + +.inner22 { padding: 20px;} + +.inner12 { padding: 10px 20px;} + +.inner02 { padding: 0 20px;} + +/* Utility for general button styles */ + +a.button { + display: block; + padding: 5px; + min-width: 120px; + margin-bottom: 10px; + color: white; + background: #7092FF; + text-align: center; + border-radius: 2px; + -moz-border-radius: 2px; + &:hover { + background: blue; + text-decoration: none; + } + &:last-child { + margin-bottom: 0; + } +} + +a.button.submit { + background-color: #cbeea7; + &:hover { + background-color: #9ed485; + } } /* Rules for doing distinct colour of alternate table rows */ -.table0 { - background: #f6f6f6; +.table0, +.item0 { + background: #F4F4FF; } -.table1 { +.table1, +.item1 { background: #fff; } @@ -1141,22 +1580,85 @@ abbr.geo { 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; + } + + code { + font-size: 13px; + background: #e8e8e8; + padding: 2px 3px; + } + + img { + padding: 20px; + background-color: #f4f4ff; + display: block; + max-width: 100%; + margin: auto; + } + + 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; .richtext_preview { display: inline-block; - margin-top: 1px; - margin-bottom: 1px; - border: 4px solid #eee; - background-color: #eee; - white-space: normal; + padding: 20px; + background-color: #f4f4ff; + overflow-x: auto; &.loading { background-image: image-url("loading.gif"); @@ -1173,30 +1675,151 @@ abbr.geo { .richtext_help { display: inline-block; vertical-align: top; - background-color: #ddd; - padding: 5px 10px 10px 10px; - font-size: 12px; + margin-left: 15px; + background-color: #f8f8ff; + padding: 10px; + width: 300px; + max-width: 450px; + + ul { + margin-bottom: 0; + } - p { - margin: 0px; + h4.heading, li { + border-bottom: 1px solid #ccc; + margin-bottom: 5px; + padding-bottom: 5px; } - th { + li h4, li span, li p { + display: inline-block; vertical-align: top; + font-size: 11px; } - td { - font-family: fixed; - line-height: 16px; - padding: 0px !important; + li h4 { + width: 35%; + margin: 0; } - input.richtext_doedit { - margin-top: 5px !important; + li span, li p { + width: 60%; + margin-left: 10px; + margin-bottom: 5px; + white-space: nowrap; } + input.richtext_doedit, input.richtext_dopreview { - margin-top: 5px !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: 2px; + margin-bottom: 2px; + + p { + margin-top: 0px; + margin-bottom: 0px; + } + } + + .comment { + width: 100%; + height: 100px; + } + + .buttons { + margin-top: 5px; + text-align: right; + } +} + +/* + * Rules for the iD editor + */ +.id-embed { + width: 100%; + height: 100%; +} + +/* Rules for rotating sidebar ads */ +.ad-container { + display: block; + height: 120px; + overflow: hidden; + position: relative; + border-bottom: 1px solid #ccc; +} + +.ads { + width: 370px; + position: absolute; + left: 0%; +} + +.ad { + float: left; + height: 120px; + padding: 10px; + border: 0px; + background: #fff; +}