X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/acd72861ed8ad46d759a6e509f3e7c459db1a4f5..ce7b651eb25473b74765ccb349f37ebd4ea6edfe:/public/stylesheets/common.css?ds=sidebyside diff --git a/public/stylesheets/common.css b/public/stylesheets/common.css index d2fdea511..89fa39b31 100644 --- a/public/stylesheets/common.css +++ b/public/stylesheets/common.css @@ -1,4 +1,22 @@ -a, a:visited, a:active, a:link, a:hover { +/* Styles common to large and small screens */ + +/* Default rules for the body of every page */ + +body { + font-family: Arial,sans-serif; + color: #000; + background-color: #fff; + margin: 0px; + padding: 0px; +} + +body.slim { + background-color: #f0f0f0; +} + +/* Rules for links */ + +a { color: #00f; text-decoration: none; } @@ -7,142 +25,113 @@ a:hover { text-decoration: underline; } -#frontpage_main { - width: 100%; - text-align: center; - font-family: sans-serif; -} - +/* Rules for horizontal lines */ -#frontpage_MAIN h1 { - font-size: xx-large; - font-weight: normal; +hr { + border: none; + background-color: #ccc; + color: #ccc; + height: 1px; } -body { - font-family: Arial,sans-serif; - color: #000; - background-color: #fff; - margin: 0px; - padding: 0px; -} +/* Rules for the whole left sidebar, including the logo */ #left { position: absolute; - top: -8px; - min-width: 150px; + top: 0px; + min-width: 170px; } +/* Rules for the OpenStreetMap logo in the top left corner */ + #logo { - width: 150px; - min-width: 150px; - padding: 10px; - margin: 10px; + width: 170px; + min-width: 170px; + padding: 5px; + margin: 5px; height: 150px; background: #fff; border: 1px solid #ccd; + border-radius: 5px; + -moz-border-radius: 5px; } + #logo h1 { font-size: 14px; text-align: center; margin: 0px; } + #logo h2 { font-size: 10px; margin: 0px; } -/* The Map Key sidebar */ -#mapkey h3 { - font-size: 110%; - font-weight: normal; - text-align: center; -} - -#mapkey .mapkey-table { - padding-left: 5px; - padding-right: 5px; -} - -/*#mapkey .mapkey-table-key {}*/ - -#mapkey .mapkey-table-value { - font-size: 90%; -} - - -#greeting { - float: right; - height: 20px; - margin: 0px; - padding-right: 10px; - padding-top: 5px; - font-size: 13px; - line-height: 14px; - background: url('../images/tab_bottom.gif') repeat-x bottom; -} +/* Rules for the site name */ -#small-greeting { - display: none; +#small-title { + display: none; } -/* An unread message (e.g. "inbox(1)") */ -.greeting-bar-unread { - font-weight: bold; -} +/* Rules for the introductory text displayed in the left sidebar to new users */ #intro { width: 170px; - margin: 10px; + padding: 5px; + margin: 5px; border: 1px solid #ccc; font-size: 11px; + border-radius: 5px; + -moz-border-radius: 5px; } -#intro p { margin: 10px; } +#intro p { margin: 5px; } + +/* + * Rules for alert boxes shown in the left sidebar when important + * information needs to be conveyed such as when the site is + * undergoing maintenance. + */ #alert { - width: 150px; - margin: 10px; - padding: 10px; + width: 170px; + margin: 5px; + padding: 5px; border: 1px solid #ccc; background: #d00; line-height: 1.2em; text-align: left; font-size: 14px; + border-radius: 5px; + -moz-border-radius: 5px; } -#sotm { - width: 170px; - padding: 0px; -} +/* + * Rules for notice boxes shown in the left sidebar when important, but + * non-critical information needs to be conveyed such as notices about + * donation drives. + */ .notice { - width: 150px; - margin: 10px; - padding: 10px; + width: 170px; + margin: 5px; + padding: 5px; border: 1px solid #ccc; background: #ea0; line-height: 1.2em; text-align: left; font-size: 14px; + border-radius: 5px; + -moz-border-radius: 5px; } -.donate { - width: 150px; - margin: 10px; - padding: 10px; - border: 1px solid #ccc; - background: #cbeea7; - line-height: 1.2em; - text-align: center; - font-size: 14px; -} +/* Rules for the menu displayed in the left sidebar */ .left_menu { - width: 150px; - min-width: 150px; - margin: 10px; - padding: 10px; + width: 170px; + min-width: 170px; + margin: 5px; + padding: 5px; border: 1px solid #ccc; left: 0px; background: #ddd; @@ -150,6 +139,8 @@ body { text-align: Left; font-size: 14px; font-weight: bold; + border-radius: 5px; + -moz-border-radius: 5px; } .left_menu td { @@ -165,9 +156,9 @@ body { } .left_menu ul { - /*list-style: none;*/ - padding-left: 10px; + padding-left: 0px; margin: 0px; + list-style-type: none; } .left_menu li { @@ -179,121 +170,109 @@ body { margin: 2px 8px 0px 0px; } -.left_menu a, .left_menu a:visited, .left_menu a:active, .left_menu a:link, .left_menu a:hover { +.left_menu a { color: #000; - text-decoration: none; } -.left_menu a:hover { - color: #000; - text-decoration: underline; -} +/* Rules for SOTM advert */ -#messages { - border: 1px solid #ccc; +#sotm { + width: 180px; + min-width: 180px; + margin: 5px; + padding: 0px; + border: 0px; + background: #fff; } +/* + * Rules for "optional boxes" which appear in the left sidebar on + * certain pages. Current users are the seach box on the main page + * and the tag cloud on the traces pages. + */ -#content { - padding: 0px; - margin: 0px; - position: absolute; - left: 192px; - right: 10px; - top: 35px; - bottom: 10px; +.optionalbox { + width: 170px; + min-width: 170px; + margin: 5px; + padding: 5px; + border: 1px solid #ccc; + left: 0px; line-height: 1.2em; text-align: left; + font-size: 12px; + background: #eee; + border-radius: 5px; + -moz-border-radius: 5px; } -#bottom_bar { - position: absolute; - bottom: 0px; - width: 100%; - font-size: x-small; - text-align: center; +.optionalbox h1 { + font-size: 14px; + font-weight: bold; + line-height: 22px; + margin: 0px; + vertical-align: bottom; } -#mapImage { - position: absolute; - left: 0px; -} -#drag { - top: 0px; - left: 14px; -} +/* Rules for the search box */ -#mapEpilog { - font-size: x-small; +.whereami { + line-height: 22px; + vertical-align: bottom; + float: right; } -#changeset_list, #keyvalue { - font-size: small; - text-align: left; - border-collapse: collapse; - border-width: 0px; +.search_container { + height: 16px; + padding-bottom: 6px; } -#changeset_list { +#search_field form { width: 100%; + margin: 0px; + padding: 0px; } -#changeset_list .date { - white-space: nowrap; +#search_field input[type="text"] { + width: 136px; } -#changeset_list .user { - white-space: nowrap; +#search_field input[type="submit"] { + width: 26px; + padding-left: 0px; + padding-right: 0px; } -#changeset_list .area { - white-space: nowrap; +.search_help { + font-size: 10px; + line-height: 1em; + margin-top: 3px; + margin-bottom: 0px; } -#changeset_list.th { - font-weight: bold; -} +/* Rules for donation request box */ -.emphasized { - background-color: #82bcff; +.donate { + width: 170px; + margin: 5px; + padding: 5px; + border: 1px solid #ccc; + background: #cbeea7; + line-height: 1.2em; + text-align: center; + font-size: 14px; + border-radius: 5px; + -moz-border-radius: 5px; } +/* Rules for Creative Commons logo button */ -#header { - float: left; - width: 100%; - background: #DAE0D2; - font-size: 93%; - line-height: normal; -} -#header ul { - margin: 0px; - padding: 10px 10px 0px 215px; - list-style: none; -} -#header li { - float: left; - margin: 0px; - padding: 0px 0px 0px 9px; -} -#header li a { - float: left; - display: block; - padding: 5px 15px 4px 6px; - text-decoration: none; - font-weight: bold; - color: #765; +#cclogo { + margin-top: 10px; + margin-bottom: 10px; } -#header li a {float:none;} - -#header li a:hover { - color: #333; -} -#header #current a { - color: #333; - padding-bottom: 5px; -} +/* Rules for tabbed navigation bar */ #tabnav { @@ -303,6 +282,7 @@ body { padding-top: 5px; background: url('../images/tab_bottom.gif') repeat-x bottom; } + #tabnav li { margin: 0px; @@ -310,6 +290,7 @@ body { display: inline; list-style-type: none; } + #tabnav a, #tabnav a:link, #tabnav a:visited { float: left; @@ -322,137 +303,112 @@ body { border: 1px solid #ccc; text-decoration: none; color: #333; + border-top-right-radius: 5px; + -moz-border-radius-topright: 5px; + border-top-left-radius: 5px; + -moz-border-radius-topleft: 5px; } + #tabnav a:link.active, #tabnav a:visited.active { border-bottom: 1px solid #fff; background: #fff; color: #000; } -#tabnav a:link:hover + +#tabnav a:link:hover, #tabnav a:visited:hover { background: #fff; } -#gads { - /* position: absolute; */ - left: 100px; - width: 700px; - text-align: center; - font-size: 10px; +#tabnav a:link.disabled, #tabnav a:visited.disabled, +#tabnav a:link:hover.disabled, #tabnav a:visited:hover.disabled +{ + background: #bbbbbb; + color: white } -hr { - border: none; - background-color: #ccc; - color: #ccc; - height: 1px; -} +/* Rules for greeting bar in the top right corner */ -.gpxsummary { - font-size: 12px; - color: gray; +#greeting { + float: right; + height: 20px; + margin: 0px; + padding-right: 10px; + padding-top: 5px; + font-size: 13px; + line-height: 14px; + background: url('../images/tab_bottom.gif') repeat-x bottom; } -.gpxdesc { - font-style: italic; +.greeting-bar-unread { + font-weight: bold; } -.table0 { - background: #f6f6f6; -} +/* Rules for the message shown in place of the map when javascript is disabled */ -.table1 { - background: #fff; +#noscript { + z-index: 20000000; + position: absolute; + top: 15px; + left: 15px } +/* Rules for OpenLayers maps */ -.optionalbox { - width: 150px; - min-width: 150px; - margin: 10px; - padding: 10px; - border: 1px solid #ccc; +#map { + position: absolute; + border: 1px solid black; + margin: 0px; + padding: 0px; left: 0px; - line-height: 1.2em; - text-align: left; - font-size: 12px; - background: #eee; + right: 2px; + top: 0px; + bottom: 0px; } -.oboxheader { - font-size: 14px; - font-weight: bold; - line-height: 22px; - vertical-align: bottom; +.olControlAttribution { + display: none !important; } -.whereami { +#permalink { + z-index: 10000; position: absolute; - right: 21px; - line-height: 22px; - vertical-align: bottom; -} - -.optionalbox form { - margin: 0px; - padding: 0px; -} - -#search_field form { - width: 100%; -} - -#search_field input[type="text"] { - width: 116px; -} - -#search_field input[type="submit"] { - width: 26px; + bottom: 15px; + right: 15px; + font-size: smaller; + text-align: right; } -.search_form { - height: 16px; - padding-bottom: 6px; -} +/* Rules for edit menu */ -.rsssmall { - position: relative; - top: 4px; +#editmenu { + display: none; + z-index: 10000; + position: absolute; + background-color: #ffffff; + border: 1px solid black; } -.button { +#editmenu ul { margin-top: 10px; margin-bottom: 10px; + padding-left: 10px; + padding-right: 10px; } -#controls img -{ - z-index: 9999; +#editmenu li { + list-style-type: none; } -#controls -{ - position:absolute; - top: 0px; - left: 0px; - width: 64px; - height: 32px; - z-index: 9998; - cursor: pointer; -} +/* Rules for attribution text under the main map shown on printouts */ -#map { - position: absolute; - border: 1px solid black; - margin: 0px; - padding: 0px; - left: 0px; - right: 2px; - top: 0px; - bottom: 0px; +#attribution { + display: none; } +/* Rules for the popout map sidebar */ + #sidebar { display: none; position: absolute; @@ -486,6 +442,53 @@ hr { background: #bbb; } +/* 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 .mapkey-table-key { +} + +#mapkey .mapkey-table-value { + font-size: 90%; +} + +/* Rules for search results which appear in the popout sidebar */ + +.search_searching { + margin-top: 5px; + margin-bottom: 5px; +} + +.search_results_heading { + margin: 0px; + padding: 3px 6px; + border: 1px solid #ccc; + background: #ddd; +} + +.search_results_entry { + margin: 0px; + padding: 2px 6px; +} + +.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; @@ -498,58 +501,368 @@ hr { padding: 0px 6px; } -.search_results_heading { +/* Rules for export information which appears in the popout sidebar */ + +.export_heading { margin: 0px; padding: 3px 6px; border: 1px solid #ccc; background: #ddd; } -.search_results_entry { - margin: 0px; +.export_bounds { + width: 100%; + text-align: center; +} + +.export_bound { + margin: 5px; +} + +.export_details { padding: 2px 6px; } -.search_results_error { +#export_osm { + display: none; +} + +#export_mapnik { + display: none; +} + +#export_osmarender { + display: none; +} + +.export_hint { + padding: 0px 12px; + font-style: italic; +} + +.export_buttons { + width: 100%; + text-align: center; +} + +/* Rules for the main content area */ + +#content { + padding: 0px; margin: 0px; - padding: 2px 6px 0px; - color: #f00; + position: absolute; + right: 10px; + bottom: 10px; + line-height: 1.2em; + text-align: left; } -.search_help { - font-size: 10px; - line-height: 1em; - margin-top: 3px; +#slim_container { + width: 100%; +} + +#slim_container_content { + max-width: 50em; + background-color: #FFFFFF; + margin: 10px auto; + padding: 3px; + border-radius: 25px; + -moz-border-radius: 25px; + border: 1px solid #e6e6e6; +} + +#slim_content { + margin: 10px; + margin-top: 90px; + max-width: 50em; +} + +#slim_header { + margin: 10px; + position: absolute; + top: 0px; +} + +#slim_header img { + vertical-align: middle; + margin-right: 5px; + margin-bottom: 5px; +} + +/* Rules for the changeset list shown by the history tab etc */ + +#changeset_list_container { + position: relative; +} + +#changeset_list { + width: 50%; + font-size: small; + text-align: left; + 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; +} + +#changeset_list .area { + white-space: nowrap; +} + +#changeset_list .selected { + background-color: rgb(255, 255, 160); + background-color: rgba(255, 255, 85, 0.5); +} + +#changeset_list_map { + float: right; + position: absolute; + top: 0px; + bottom: 0px; + right: 0px; + width: 49%; + min-height: 400px; + border: solid 1px black; +} + +/* Rules for the data browser */ + +#browse_navigation { + float: right; + width: 250px; + text-align: center; + margin-left: 10px; +} + +table.browse_details th { + white-space: nowrap; +} + +#browse_map { + float: right; + width: 250px; + text-align: right; + margin-left: 10px; +} + +#browse_map #small_map { + width: 250px; + height: 300px; + border: solid 1px black; +} + +/* Rules for the trace list shown by the traces tab etc */ + +#trace_list { + font-size: small; + text-align: left; + border-collapse: collapse; + border-width: 0px; +} + +#trace_list .trace_summary { + font-size: 12px; + color: gray; +} + +/* Rules for the user list */ + +#user_list { + width: 100%; + font-size: small; +} + +#user_list tr { + vertical-align: middle; +} + +#user_list p { + margin-top: 0px; margin-bottom: 0px; } -.search_searching { +#user_list_actions { + float: right; + margin-top: 10px; +} + +/* Rules for the login page */ + +#login_wrapper div { + margin: 5px; + padding: 15px; + border-radius: 15px; + -moz-border-radius: 15px; +} + +#login_wrapper input[type=submit] { + float: right; +} + +#login_login { + background-color: #f5f5ff; + border: 1px solid #f3f3ff; + border-radius: 15px; + -moz-border-radius: 15px; +} + +#login_login h1 { margin-top: 5px; - margin-bottom: 5px; } -.olControlAttribution { - display: none !important; +table#login_openid_buttons { + padding-bottom: 10px; } -/* inbox and messaging stuff */ -.inbox-row-unread .inbox-subject { - font-weight: bold; +#login_openid_buttons td { + padding-left: 10px; + padding-right: 10px; + padding-top: 5px; + padding-bottom: 5px; } -/* rails error field stuff */ +#login_openid_buttons img { + border: 0; +} -.fieldWithErrors { - padding: 2px; - background-color: red; - display: table; +#login_signup form.button-to div { + margin: 0px; + padding: 0px; +} + +/* Rules for the account confirmation page */ + +div#contributorTerms { + border: 1px solid black; + padding: 4px; + overflow: auto; + width: 95%; + height: 400px; +} + +div#slim_content div#contributorTerms { + width: auto; +} + +div#contributorTerms p#first { + margin-top: 0px; } +div#contributorTerms p#last { + margin-bottom: 0px; +} + +div#contributorTerms ol { + margin-bottom: 0px; +} + +div#contributorTerms img { + display: block; + margin-left: auto; + margin-right: auto; + margin-top: 10%; +} + +form#termsForm { + width: 95%; + margin-bottom: 3em; +} + +div#slim_content form#termsForm { + width: auto; +} + +form#termsForm div#buttons { + float: right; +} + +form#termsForm input#agree { + margin-left: 50px; +} + +p#contributorGuidance { + background-color: #f5f5ff; + border: 1px solid #f3f3ff; + border-radius: 15px; + -moz-border-radius: 15px; + padding: 10px; +} + +/* Rules for the account settings page */ + +#accountForm td { + padding-bottom: 10px; +} + +#accountImage td { + padding-bottom: 0px; +} + +.nohome .location { + display: none; +} + +#homerow .message { + display: none; +} + +.nohome .message { + display: inline !important; +} + +/* Rules for the user map */ + +.user_map .olControlPanZoomBar { + display: none; +} + +.user_map .olControlPanZoom { + display: block; +} + +/* 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; +} + +/* Rules for message in/out box page */ + +#messages { + border: 1px solid #ccc; +} + +.inbox-row-unread .inbox-subject { + font-weight: bold; +} + +/* Rules for "flash" notice boxes shown at the top of the content area */ + #error { border: 1px solid red; padding: 7px; background-color: #fff0f0; margin-bottom: 20px; + border-radius: 5px; + -moz-border-radius: 5px; } #warning { @@ -557,6 +870,8 @@ hr { padding: 7px; background-color: #fff6f0; margin-bottom: 20px; + border-radius: 5px; + -moz-border-radius: 5px; } #notice { @@ -564,8 +879,20 @@ hr { padding: 7px; background-color: #f0fff0; margin-bottom: 20px; + border-radius: 5px; + -moz-border-radius: 5px; +} + +/* Rules for highlighting fields with rails validation errors */ + +.fieldWithErrors { + padding: 2px; + background-color: red; + display: table; } +/* Rules for rails validation error boxes */ + #errorExplanation { width: 400px; border: 2px solid red; @@ -596,121 +923,76 @@ hr { list-style: square; } -input[type="text"], input[type="password"], textarea { - border: 1px solid black; -} - -input[type="submit"] { - border: 1px solid black; -} - -#accountForm td { - padding-bottom:10px; -} +/* Rules for forms */ .fieldName { - text-align:right; - font-weight:bold; -} - - -.nohome .location { - display: none; -} - -#homerow .message { - display: none; -} - -.nohome .message { - display: inline !important; + text-align: right; + font-weight: bold; } .minorNote { - font-size:0.8em; + font-size: 0.8em; } -.nowrap { - white-space: nowrap; +input[type="text"], input[type="password"], textarea { + border: 1px solid black; } -#map #popup p { - margin: 0px; - padding: 2px; +input[type="submit"] { + border: 1px solid black; } -#permalink { - z-index:10000; - position:absolute; - bottom:15px; - right:15px; - font-size:smaller; - text-align: right; +input.openid_url { + background: url('../images/openid_input.png') repeat-y left white; + padding-left: 16px; } -#attribution { - display: none; -} +/* Rules for user images */ -.export_heading { - margin: 0px; - padding: 3px 6px; - border: 1px solid #ccc; - background: #ddd; +img.user_image { + max-width: 100px; + max-height: 100px; + border: 1px solid black; } -.export_bounds { - width: 100%; - text-align: center; +img.user_thumbnail { + max-width: 50px; + max-height: 100px; + border: 1px solid black; } -.export_bound { - margin: 5px; -} +/* Rule for "nowrap" class that can be applied to anything to stop wrapping */ -.export_details { - padding: 2px 6px; +.nowrap { + white-space: nowrap; } -#export_osm { - display: none; -} +/* Rules for geo microformats */ -#export_mapnik { - display: none; +abbr.geo { + border-bottom: none; } -#export_osmarender { - display: none; -} +/* Rules for RSS buttons */ -.export_hint { - padding: 0px 12px; - font-style: italic; +.rsssmall { + position: relative; + top: 4px; } -.export_buttons { - width: 100%; - text-align: center; -} +/* Rules for doing distinct colour of alternate table rows */ -#noscript { - z-index: 20000000; - position: absolute; - top: 15px; - left: 15px +.table0 { + background: #f6f6f6; } -abbr.geo { - border-bottom: none; +.table1 { + background: #fff; } -img.user_image { - width: 100px; - height: 100px; -} +/* Rules for OpenID logo */ -img.user_thumbnail { - width: 50px; - height: 50px; +.openid_logo { + vertical-align: text-bottom; + border: 0; }