openstreetmap-website/app/assets/stylesheets/common.css.scss
Tom MacWright dc48c9a510 Front page copy revision
This edits the front page copy to be more direct, link off to more
useful resources, and guide people to register for an account. It
also moves partner links to below the donate link.
2012-03-14 17:33:00 +00:00

1042 lines
15 KiB
SCSS

/* Styles common to large and small screens */
/* Default rules for the body of every page */
body {
font-family: 'Helvetica Neue',Arial,sans-serif;
font-size: 14px;
line-height: 20px;
color: #222;
background-color: #fff;
margin: 0px;
padding: 0px;
}
body.slim {
background-color: #f0f0f0;
}
/* Rules for links */
a {
color: #00f;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Rules for horizontal lines */
hr {
border: none;
background-color: #ccc;
color: #ccc;
height: 1px;
}
/* Default rules for headings */
h2 {
margin: 5px 0;
font-size: 25px;
line-height: 30px;
}
/* Rules for the whole left sidebar, including the logo */
#left {
position: absolute;
top: 0px;
width: 185px;
font-size: 11px;
line-height: 12px;
}
/* Rules for the OpenStreetMap logo in the top left corner */
#logo {
width: 170px;
min-width: 170px;
padding: 5px;
text-align: center;
margin: 25px 0 5px 0;
}
#logo h1 {
font-size: 18px;
line-height: 20px;
text-align: center;
margin: 0px;
}
#logo h2 {
font-size: 10px;
line-height: 15px;
margin: 0px;
}
/* Rules for the site name */
#small-title {
display: none;
}
/* Rules for the introductory text displayed in the left sidebar to new users */
.sidebar-copy {
border-top: 1px solid #ccc;
padding: 0px 5px;
}
.sidebar-copy 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: 170px;
margin: 5px;
padding: 5px;
border: 1px solid #ccc;
background: #d00;
line-height: 1.2em;
font-size: 14px;
border-radius: 5px;
-moz-border-radius: 5px;
}
/*
* 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: 170px;
margin: 5px;
padding: 5px;
border: 1px solid #ccc;
background: #ea0;
line-height: 20px;
font-size: 14px;
border-radius: 5px;
-moz-border-radius: 5px;
}
/* Rules for the menu displayed in the left sidebar */
.left_menu {
padding: 5px 10px;
margin: 4px 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
line-height: 20px;
font-size: 14px;
font-weight: bold;
}
.left_menu h1 {
font-style: normal;
font-size: 15px;
}
.left_menu ul {
margin: 0px;
list-style-type: none;
}
.left_menu li {
margin: 0px;
padding: 0px;
}
/* submenus */
.left_menu ul li ul {
font-weight: normal;
line-height: 15px;
font-size: 12px;
}
.left_menu a {
color: #000;
}
/* Rules for SOTM advert */
#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.
*/
.optionalbox {
padding: 5px 10px;
margin: 4px 0;
border-top: 1px solid #ccc;
}
.optionalbox h1 {
font-size: 14px;
font-weight: bold;
line-height: 20px;
margin: 0px;
vertical-align: bottom;
}
/* Rules for the search box */
.whereami {
line-height: 20px;
vertical-align: bottom;
}
.search_container {
height: 15px;
padding-bottom: 5px;
}
#search_field form {
width: 100%;
margin: 0px;
padding: 0px;
}
#search_field input[type="text"] {
width: 130px;
}
#search_field input[type="submit"] {
width: 26px;
padding-left: 0px;
padding-right: 0px;
}
.search_help {
margin-top: 2px;
margin-bottom: 0px;
}
/* Rules for donation request box */
.donate {
width: 155px;
margin: 10px 10px;
padding: 5px;
border: 1px solid #ccc;
background: #cbeea7;
line-height: 20px;
text-align: center;
font-size: 14px;
border-radius: 5px;
-moz-border-radius: 5px;
}
/* Rules for Creative Commons logo button */
#cclogo {
margin-top: 10px;
margin-bottom: 10px;
}
/* Rules for tabbed navigation bar */
#top-bar {
border-bottom: 1px solid #ccc;
height: 29px;
}
#tabnav {
padding: 0;
margin: 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;
font-weight: bold;
padding: 5px 10px;
text-decoration: none;
color: #333;
}
#tabnav a:link.active, #tabnav a:visited.active {
border-bottom: 1px solid #aaa;
background: #9ed485;
color: #000;
}
#tabnav a:link:hover, #tabnav a:visited:hover {
text-decoration:underline;
}
#tabnav a:link.disabled,
#tabnav a:visited.disabled,
#tabnav a:link:hover.disabled,
#tabnav a:visited:hover.disabled {
color: #888;
}
/* Rules for greeting bar in the top right corner */
#greeting {
height: 28px;
margin: 0px;
font-size: 13px;
line-height: 28px;
}
.greeting-bar-unread {
font-weight: bold;
}
/* Rules for the message shown in place of the map when javascript is disabled */
#noscript {
z-index: 20000000;
position: absolute;
top: 15px;
}
/* Rules for OpenLayers maps */
#map {
margin: 0px;
padding: 0px;
}
.olControlAttribution {
bottom: 15px !important;
left: 0px !important;
right: 0px !important;
text-align: center;
}
#permalink {
z-index: 10000;
position: absolute;
bottom: 0px;
right: 0px;
padding: 5px;
background:#fff;
text-align: right;
font-size: 12px;
}
#permalink a {
padding: 5px;
}
/* Rules for edit menu */
.menu {
display: none;
z-index: 10000;
position: absolute;
background-color: #ffffff;
border: 1px solid black;
}
.menu ul {
margin-top: 10px;
margin-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
.menu li {
list-style-type: none;
white-space: nowrap;
}
/* Rules for attribution text under the main map shown on printouts */
#attribution {
display: none;
}
.attribution_notice {
text-align: center;
}
/* Rules for the popout map sidebar */
#sidebar {
display: none;
position: absolute;
margin: 0px;
padding: 0px;
width: 30%;
top: 0px;
bottom: 0px;
}
#sidebar #sidebar_content {
overflow: auto;
position: absolute;
font-size: 13px;
line-height: 15px;
top: 29px;
bottom: 0px;
left: 0px;
right: 0px;
}
#sidebar .sidebar_title {
margin: 0px;
padding: 3px 6px 4px 6px;
height: 29px;
font-size: 14px;
line-height: 15px;
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: 2px 5px;
border-bottom: 1px solid #ccc;
font-weight: bold;
}
.search_results_entry {
margin: 0px;
padding: 2px 5px;
}
.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_details {
margin: 0px;
padding: 0px 6px;
}
/* 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_details {
padding: 2px 6px;
}
#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: 10px;
margin: 0px;
position: absolute;
bottom: 0px;
}
#content.site_index,
#content.site_edit,
#content.site_export {
border: 0px;
padding: 0px;
}
#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-bottom: 5px;
}
/* Rules for the home page */
.site_index #map {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.site_export #map {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
/* Rules for the edit page */
.site_edit #map {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
/* 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;
}
#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 {
position: absolute;
top: 0px;
bottom: 0px;
width: 49%;
min-height: 400px;
border: solid 1px black;
}
/* Rules for the data browser */
#browse_navigation {
width: 250px;
text-align: center;
}
table.browse_details th {
white-space: nowrap;
}
#browse_map {
width: 250px;
}
#browse_map #small_map {
width: 250px;
height: 300px;
border: solid 1px black;
}
#browse_map .geolink {
display: none;
}
/* Rules for the trace list shown by the traces tab etc */
#trace_list {
font-size: small;
border-collapse: collapse;
border-width: 0px;
}
#trace_list .trace_summary {
font-size: 12px;
color: gray;
}
#trace_list .trace_pending {
color: red;
}
#trace_list .trace_public {
color: green;
}
#trace_list .trace_identifiable {
color: green;
}
#trace_list .trace_trackable {
color: red;
}
#trace_list .trace_private {
color: red;
}
/* 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;
}
#user_list_actions {
margin-top: 10px;
}
/* Rules for the new diary entry page */
.diary_entry div#map {
position: relative;
width: 90%;
height: 400px;
border: 1px solid #ccc;
display: none;
}
/* Rules for the login page */
#login_wrapper div {
margin: 5px;
padding: 15px;
border-radius: 15px;
-moz-border-radius: 15px;
}
#login_login {
background-color: #f5f5ff;
border: 1px solid #f3f3ff;
border-radius: 15px;
-moz-border-radius: 15px;
}
#login_login h1 {
margin-top: 5px;
}
table#login_openid_buttons {
padding-bottom: 10px;
}
#login_openid_buttons td {
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
#login_openid_buttons img {
border: 0;
}
#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;
}
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;
}
#accountForm .user_map {
position: relative;
width: 500px;
height: 400px;
border: 1px solid #ccc;
}
#accountImage td {
padding-bottom: 0px;
}
.nohome .location {
display: none;
}
#homerow .message {
display: none;
}
.nohome .message {
display: inline !important;
}
#accountForm input[type=submit] {
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%
}
/* 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;
}
.user_popup img.user_thumbnail {
float: left;
}
/* 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 {
border: 1px solid orange;
padding: 7px;
background-color: #fff6f0;
margin-bottom: 20px;
border-radius: 5px;
-moz-border-radius: 5px;
}
#notice {
border: 1px solid green;
padding: 7px;
background-color: #f0fff0;
margin-bottom: 20px;
border-radius: 5px;
-moz-border-radius: 5px;
}
/* Rules for highlighting fields with rails validation errors */
.field_with_errors {
padding: 2px;
background-color: red;
display: table;
}
/* Rules for rails validation error boxes */
#errorExplanation {
width: 400px;
border: 2px solid red;
padding: 7px;
padding-bottom: 12px;
margin-bottom: 20px;
background-color: #f0f0f0;
}
#errorExplanation h2 {
font-weight: bold;
font-size: 12px;
margin: -7px;
background-color: #c00;
color: #fff;
}
#errorExplanation p {
color: #333;
margin-bottom: 0px;
padding: 5px;
}
#errorExplanation ul li {
font-size: 12px;
list-style: square;
}
/* Rules for forms */
.fieldName {
vertical-align: top;
font-weight: bold;
font-size: 12px;
line-height: 20px;
}
.minorNote {
font-size: 0.8em;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
textarea {
border: 1px solid #888;
}
/* Rules for user images */
img.user_image {
max-width: 100px;
max-height: 100px;
border: 1px solid black;
}
img.user_thumbnail {
max-width: 50px;
max-height: 100px;
border: 1px solid black;
}
/* Rule for "nowrap" class that can be applied to anything to stop wrapping */
.nowrap {
white-space: nowrap;
}
/* Rules for geo microformats */
abbr.geo {
border-bottom: none;
}
/* Rules for RSS buttons */
.rsssmall {
position: relative;
top: 4px;
}
/* Rules for doing distinct colour of alternate table rows */
.table0 {
background: #f6f6f6;
}
.table1 {
background: #fff;
}
/* Rules for OpenID logo */
.openid_logo {
vertical-align: text-bottom;
border: 0;
}