/* Default rules for the body of every page */
body {
- font-family: Arial,sans-serif;
- color: #000;
+ font-family: 'Helvetica Neue',Arial,sans-serif;
+ font-size: 14px;
+ line-height: 20px;
+ color: #222;
background-color: #fff;
margin: 0px;
padding: 0px;
+ text-align: left;
}
body.slim {
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;
- min-width: 170px;
+ top: 30px;
+ bottom: 0;
+ width: 185px;
+ font-size: 11px;
+ line-height: 12px;
+ 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;
- margin: 5px;
- height: 150px;
- background: #fff;
- border: 1px solid #ccd;
- border-radius: 5px;
- -moz-border-radius: 5px;
+ text-align: center;
+ margin: auto;
+}
+
+#logo img {
+ border: 0px;
}
#logo h1 {
- font-size: 14px;
+ font-size: 18px;
+ line-height: 20px;
text-align: center;
margin: 0px;
}
#logo h2 {
font-size: 10px;
+ line-height: 15px;
margin: 0px;
}
display: none;
}
+#small-title img {
+ border: 0px;
+}
+
/* Rules for the introductory text displayed in the left sidebar to new users */
-#intro {
- width: 170px;
- padding: 5px;
- margin: 5px;
- border: 1px solid #ccc;
- font-size: 11px;
- border-radius: 5px;
- -moz-border-radius: 5px;
+.sidebar-copy {
+ padding: 5px 10px;
}
-#intro p {
- margin: 5px;
+.sidebar-copy p {
+ margin: 5px 0;
+}
+
+.sidebar-copy.intro {
+ margin-top: -1px;
+ border-top: 1px solid #ccc;
}
/*
* 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;
+.sidebar-alert {
+ padding: 4px 5px 4px 5px;
+ border-top: 1px solid #ccc;
+ margin-top: 4px;
+ margin-bottom: -4px;
+ background: #e00;
+ font-size: 13px;
+ font-weight: bold;
+ line-height: 17px;
+
+ p {
+ margin: 5px;
+ }
}
/*
* donation drives.
*/
-.notice {
- width: 170px;
- margin: 5px;
- padding: 5px;
- border: 1px solid #ccc;
+.sidebar-notice {
+ padding: 4px 5px 4px 5px;
+ border-top: 1px solid #ccc;
+ margin-top: 4px;
+ margin-bottom: -4px;
background: #ea0;
- line-height: 1.2em;
- font-size: 14px;
- border-radius: 5px;
- -moz-border-radius: 5px;
+ font-size: 13px;
+ line-height: 17px;
+
+ p {
+ margin: 5px;
+ }
}
/* Rules for the menu displayed in the left sidebar */
.left_menu {
- width: 170px;
- min-width: 170px;
- margin: 5px;
- padding: 5px;
- border: 1px solid #ccc;
- background: #ddd;
- line-height: 1.2em;
- font-size: 14px;
- font-weight: bold;
- border-radius: 5px;
- -moz-border-radius: 5px;
-}
-
-.left_menu td {
+ left: 0px;
+ margin: 0;
+ padding: 5px 10px;
+ line-height: 15px;
font-size: 12px;
+ list-style-type: none;
+ border-bottom: 1px solid #ccc;
+ border-top: 1px solid #ccc;
}
-.left_menu h1 {
- font-style: normal;
- font-size: 15px;
+.left_menu ul {
+ padding: 0;
+ margin: 0;
}
-.left_menu ul {
- margin: 0px;
+.left_menu li {
list-style-type: none;
+ padding: 0;
+ margin: 0;
}
-.left_menu li {
- margin: 0px;
- padding: 0px;
+.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 */
#sotm {
- width: 180px;
- min-width: 180px;
- margin: 5px;
+ width: 165px;
+ margin: 10px;
padding: 0px;
border: 0px;
background: #fff;
}
+#sotm img {
+ width: 165px;
+}
+
/*
* Rules for "optional boxes" which appear in the left sidebar on
* certain pages. Current users are the seach box on the main page
*/
.optionalbox {
- width: 170px;
- min-width: 170px;
- margin: 5px;
- padding: 5px;
- border: 1px solid #ccc;
- line-height: 1.2em;
- font-size: 12px;
- background: #eee;
- border-radius: 5px;
- -moz-border-radius: 5px;
+ left: 0px;
+ padding: 5px 10px;
+ margin: 5px 0;
+ text-align: left;
}
.optionalbox h1 {
font-size: 14px;
font-weight: bold;
- line-height: 22px;
+ line-height: 20px;
margin: 0px;
vertical-align: bottom;
}
/* Rules for the search box */
.whereami {
- line-height: 22px;
- vertical-align: bottom;
-}
-
-.search_container {
- height: 16px;
- padding-bottom: 6px;
}
#search_field form {
- width: 100%;
+ width: 165px;
margin: 0px;
padding: 0px;
}
+#search_field {
+ position: relative;
+}
+
#search_field input[type="text"] {
- width: 136px;
+ width: 165px;
+ font-size: 14px;
+ line-height: 15px;
+ 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 {
+ outline: none;
+ border: 1px solid #000;
}
#search_field input[type="submit"] {
- width: 26px;
+ width: 15px;
+ height: 15px;
+ border: 0px;
+ text-indent: -1000px;
+ overflow: hidden;
+ text-transform: capitalize;
padding-left: 0px;
padding-right: 0px;
+ background: image-url("sprite.png");
+ position: absolute;
+ top: 5px;
+ right: 4px;
+ cursor: pointer;
}
.search_help {
- font-size: 10px;
- line-height: 1em;
- margin-top: 3px;
- margin-bottom: 0px;
+ margin: 5px 0 0 0;
+}
+
+.deemphasize {
+ color: #999;
+}
+
+.deemphasize a {
+ color: #7092FF;
}
/* Rules for donation request box */
.donate {
- width: 170px;
- margin: 5px;
+ display: block;
+ position: relative;
+ width: 153px;
+ margin: 10px 10px 0px 10px;
padding: 5px;
- border: 1px solid #ccc;
+ border: 1px solid #AED1A0;
background: #cbeea7;
- line-height: 1.2em;
+ line-height: 20px;
text-align: center;
font-size: 14px;
- border-radius: 5px;
- -moz-border-radius: 5px;
+ border-radius: 2px;
+ -moz-border-radius: 2px;
+ color: #222;
+}
+
+.donate:hover {
+ background: #9ed485;
+ text-decoration: none;
+}
+
+.donate p {
+ text-indent: 20px;
+ margin: 0;
+}
+
+.donate .donate-icon {
+ width: 15px;
+ height: 15px;
+ border: 0px;
+ padding-left: 0px;
+ padding-right: 0px;
+ background: image-url("sprite.png") 0 -30px no-repeat;
+ position: absolute;
+ top: 8px;
+ left: 17px;
}
/* Rules for Creative Commons logo button */
/* Rules for tabbed navigation bar */
-#tabnav
-{
- height: 20px;
- margin: 0px;
- padding-top: 5px;
- background: image-url('tab_bottom.gif') repeat-x bottom;
+#top-bar {
+ position: absolute;
+ top: 0;
+ left: 185px;
+ right: 0;
+ height: 29px;
+ border-bottom: 1px solid #ccc;
+ background: white;
}
-#tabnav li
-{
- margin: 0px;
+#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: #f3f3f3;
- font-size: 13px;
- line-height: 14px;
+#tabnav a, #tabnav a:link, #tabnav a:visited {
+ float: left;
+ background: #fff;
+ font-size: 14px;
+ line-height: 19px;
font-weight: bold;
- padding: 2px 10px;
- border: 1px solid #ccc;
+ padding: 5px 10px;
+ margin-right: 1px;
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;
+ -webkit-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 {
+ border-bottom: 1px solid #aaa;
+ background: #9ed485;
+ color: #000;
}
-#tabnav a:link.active, #tabnav a:visited.active
-{
- border-bottom: 1px solid #fff;
- background: #fff;
- color: #000;
+#tabnav a:link:hover, #tabnav a:visited:hover {
+ text-decoration:underline;
}
-#tabnav a:link:hover, #tabnav a:visited:hover
-{
- background: #fff;
+#tabnav a:link.disabled,
+#tabnav a:visited.disabled,
+#tabnav a:link:hover.disabled,
+#tabnav a:visited:hover.disabled {
+ color: #ccc;
+ cursor: default;
}
-#tabnav a:link.disabled, #tabnav a:visited.disabled,
-#tabnav a:link:hover.disabled, #tabnav a:visited:hover.disabled
-{
- background: #bbbbbb;
- color: white
+#tabnav a:link.disabled:hover,
+#tabnav a:visited.disabled:hover,
+#tabnav a:link:hover.disabled:hover,
+#tabnav a:visited:hover.disabled:hover {
+ text-decoration: none;
+}
+
+.count-number {
+ padding: 2px 5px;
+ border-radius: 3px;
+ background: #eee;
+ margin: 0 2px;
+ font-size: 11px;
+ color: #333;
}
/* Rules for greeting bar in the top right corner */
#greeting {
- height: 20px;
+ float: right;
+ height: 28px;
margin: 0px;
- padding-top: 5px;
+ padding-right: 10px;
font-size: 13px;
- line-height: 14px;
- background: image-url('tab_bottom.gif') repeat-x bottom;
+ line-height: 28px;
}
.greeting-bar-unread {
z-index: 20000000;
position: absolute;
top: 15px;
+ left: 15px;
}
-/* Rules for OpenLayers maps */
+/* Rules for Leaflet maps */
#map {
- border: 1px solid black;
- margin: 0px;
+ margin: 0px;
+ border: 0px;
padding: 0px;
}
-.olControlAttribution {
- bottom: 15px !important;
- left: 0px !important;
- right: 0px !important;
- text-align: center;
-}
-
#permalink {
z-index: 10000;
position: absolute;
- bottom: 15px;
- right: 15px;
+ bottom: 0px;
+ right: 0px;
+ padding: 5px;
+ background:#fff;
text-align: right;
- font-size: smaller;
+ font-size: 12px;
+}
+
+#permalink a {
+ padding: 5px;
+}
+
+.site-index .leaflet-top,
+.site-export .leaflet-top {
+ top: 40px !important;
+
+ .leaflet-control {
+ margin-top: 0px !important;
+ }
+}
+
+.site-index #map .olControlScaleLine,
+.site-export #map .olControlScaleLine {
+ left: 10px !important;
}
/* Rules for edit menu */
+.menuicon {
+ padding: 5px;
+
+ &:hover {
+ background: #eee;
+ text-decoration: none !important;
+ }
+}
+
.menu {
display: none;
z-index: 10000;
position: absolute;
background-color: #ffffff;
- border: 1px solid black;
+ border: 1px solid #cccccc;
+ border-top: 0px;
}
.menu ul {
- margin-top: 10px;
- margin-bottom: 10px;
- padding-left: 10px;
- padding-right: 10px;
+ margin: 0px;
+ padding: 0px;
}
.menu li {
+ padding: 2px 5px;
+ margin: 0px;
list-style-type: none;
+ border-top: 1px solid #eee;
white-space: nowrap;
}
display: none;
}
+.attribution_license {
+ text-align: left;
+}
+
.attribution_notice {
text-align: center;
}
+.attribution_project {
+ text-align: right;
+}
+
/* Rules for the popout map sidebar */
#sidebar {
display: none;
position: absolute;
- border: 1px solid black;
- margin: 0px;
+ margin: 30px 0px 0px 0px;
padding: 0px;
+ border-right: 1px solid #ccc;
width: 30%;
top: 0px;
bottom: 0px;
+ left: 0px;
}
#sidebar #sidebar_content {
overflow: auto;
position: absolute;
font-size: 13px;
- line-height: 14px;
+ line-height: 15px;
top: 29px;
bottom: 0px;
left: 0px;
#sidebar .sidebar_title {
margin: 0px;
- padding: 3px 6px;
+ padding: 3px 6px 4px 6px;
height: 29px;
font-size: 14px;
line-height: 15px;
- border-bottom: 1px solid black;
- background: #bbb;
+ background: #ccc;
+}
+
+#sidebar #sidebar_title {
+ text-align: left;
+}
+
+#sidebar #sidebar_close {
+ text-align: right;
}
/* Rules for the map key which appears in the popout sidebar */
padding-right: 5px;
}
-#mapkey .mapkey-table-key {
+#mapkey .mapkey-table-key img {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
}
#mapkey .mapkey-table-value {
.search_results_heading {
margin: 0px;
- padding: 3px 6px;
- border: 1px solid #ccc;
- background: #ddd;
+ padding: 2px 5px;
+ border-bottom: 1px solid #ccc;
+ font-weight: bold;
}
.search_results_entry {
margin: 0px;
- padding: 2px 6px;
+ padding: 2px 5px;
}
.search_results_error {
.export_heading {
margin: 0px;
- padding: 3px 6px;
- border: 1px solid #ccc;
- background: #ddd;
+ padding: 2px 5px;
+ border-bottom: 1px solid #ccc;
+ font-weight: bold;
}
.export_bounds {
/* Rules for the main content area */
#content {
+ padding: 20px;
+ margin: 30px 0px 0px 185px;
+ border-left: 1px solid #ccc;
+ text-align: left;
+}
+
+.site-edit #content,
+.site-index #content,
+.site-export #content {
+ position: fixed;
+ margin-top: 0px;
+ left: 0px;
+ right: 0px;
+ top: 0px;
+ bottom: 0px;
padding: 0px;
- margin: 0px;
- position: absolute;
- bottom: 10px;
- line-height: 1.2em;
+}
+
+.site-edit #content {
+ top: 30px;
}
#slim_container {
#slim_header img {
vertical-align: middle;
margin-bottom: 5px;
+ margin-right: 5px;
+}
+
+/* Rules for text content pages */
+
+.wide-table {
+ width: 100%;
}
/* Rules for the home page */
-.site_index #map {
+.site-index #map {
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
}
-.site_export #map {
+.site-export #map {
position: absolute;
top: 0px;
bottom: 0px;
/* Rules for the edit page */
-.site_edit #map {
+.site-edit #map {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
+ overflow: hidden;
}
/* Rules for the changeset list shown by the history tab etc */
border-width: 0px;
margin-top: 1px;
margin-bottom: 1px;
+ text-align: left;
}
#changeset_list td {
#changeset_list_map {
position: absolute;
+ float: right;
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;
+ margin-left: 10px;
text-align: center;
}
}
#browse_map {
+ float: right;
width: 250px;
+ text-align: right;
+ margin-left: 10px;
}
#browse_map #small_map {
font-size: small;
border-collapse: collapse;
border-width: 0px;
+ text-align: right;
}
#trace_list .trace_summary {
}
#user_list_actions {
+ float: right;
margin-top: 10px;
}
+/* Rules for the diary list */
+
+.diary_entry-list img.user_image {
+ float: right;
+}
+
+.diary_entry-list img.user_thumbnail {
+ float: right;
+}
+
+/* Rules for the diary entry view */
+
+.diary_entry-view img.user_image {
+ float: right;
+}
+
+.diary_entry-view img.user_thumbnail {
+ float: right;
+}
+
/* Rules for the new diary entry page */
.diary_entry div#map {
position: relative;
width: 90%;
height: 400px;
+ border: 1px solid #ccc;
display: none;
}
margin-bottom: 3em;
}
+form#termsForm div#buttons {
+ float: right;
+}
+
+form#termsForm input#agree {
+ margin-left: 50px;
+}
+
div#slim_content form#termsForm {
width: auto;
}
/* Rules for the account settings page */
+#accountForm {
+ margin-top: 20px;
+}
+
#accountForm td {
padding-bottom: 10px;
}
#accountForm .user_map {
position: relative;
width: 500px;
- height: 400px;
+ height: 400px;
+ border: 1px solid #ccc;
}
-#accountImage td {
- padding-bottom: 0px;
+#accountForm td.accountImage {
+ img {
+ vertical-align: top;
+ margin-top: 3px;
+ }
+
+ table {
+ display: inline-block;
+
+ td {
+ padding-bottom: 0px;
+ }
+ }
}
.nohome .location {
/* Rules for the user view */
-.user_view .user_map {
+.user-view img.user_image {
+ float: right;
+}
+
+.user-view .user_map {
+ float: right;
position: relative;
width: 400px;
- height: 400px;
+ height: 400px;
+ border: 1px solid #ccc;
}
-.user_view .user_map p#no_home_location {
+.user-view .user_map p#no_home_location {
position: absolute;
top: 0px;
bottom: 0px;
/* Rules for the user map */
-.user_map .olControlPanZoomBar {
+.user_map .leaflet-control-pan,
+.user_map .leaflet-control-zoomslider {
display: none;
}
-.user_map .olControlPanZoom {
+.user_map .leaflet-control-zoom {
display: block;
}
/* Rules for user popups on maps */
+.user_popup {
+ min-width: 200px;
+}
+
.user_popup p {
padding-top: 3px;
padding-bottom: 3px;
/* Rules for message in/out box page */
-#messages {
- border: 1px solid #ccc;
+.messages {
+ width: 100%;
+ border-collapse: collapse;
+ border-spacing: 0px;
+ border-width: 0px;
}
-.inbox-row-unread .inbox-subject {
- font-weight: bold;
+.messages tbody tr {
+ border-top: 1px solid #ccc;
+}
+
+.messages .inbox-row {
+ background: #eee;
+}
+
+.messages tr td,
+.messages tr th {
+ padding: 0px 5px;
+}
+
+.inbox-row .inbox-mark-read {
+ display: none;
+}
+
+.info-line {
+ border-bottom: 1px solid #ccc;
+ padding: 5px 0px 4px 0px;
+}
+
+.info-line form,
+.info-line form div {
+ display: inline;
+}
+
+.info-line .user_thumbnail_tiny {
+ vertical-align: middle;
+}
+
+.right {
+ float: right;
+}
+
+.inbox-row-unread .inbox-mark-unread {
+ display: none;
}
/* Rules for "flash" notice boxes shown at the top of the content area */
#errorExplanation h2 {
font-weight: bold;
font-size: 12px;
+ padding: 5px 5px 5px 15px;
margin: -7px;
background-color: #c00;
color: #fff;
+ text-align: left;
}
#errorExplanation p {
.fieldName {
vertical-align: top;
font-weight: bold;
+ font-size: 12px;
+ line-height: 20px;
+ text-align: right;
+}
+
+.submitButton {
+ text-align: right;
}
.minorNote {
font-size: 0.8em;
}
-input[type="text"], input[type="email"], input[type="url"], input[type="password"], textarea {
- border: 1px solid black;
+input[type="text"],
+input[type="email"],
+input[type="url"],
+input[type="password"],
+textarea {
+ border: 1px solid #ccc;
}
-input[type="submit"] {
- border: 1px solid black;
+input.openid_url {
+ background: image-url('openid_input.png') repeat-y left white;
+ padding-left: 16px;
}
/* Rules for user images */
img.user_image {
max-width: 100px;
max-height: 100px;
- border: 1px solid black;
+ border: 1px solid #ccc;
}
img.user_thumbnail {
max-width: 50px;
max-height: 100px;
- border: 1px solid black;
+ border: 1px solid #ccc;
+}
+
+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 */
/* Rules for doing distinct colour of alternate table rows */
-.table0 {
+.table0 {
background: #f6f6f6;
}
-.table1 {
+.table1 {
background: #fff;
}
vertical-align: text-bottom;
border: 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;
+
+ &.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;
+ background-color: #ddd;
+ margin-left: 15px;
+ padding: 5px 10px 10px 10px;
+ font-size: 12px;
+
+ p {
+ margin: 0px;
+ }
+
+ th {
+ vertical-align: top;
+ text-align: left;
+ padding: 0px 15px 0px 0px !important;
+ }
+
+ td {
+ text-align: left;
+ font-family: fixed;
+ line-height: 16px;
+ padding: 0px !important;
+ }
+
+ input.richtext_doedit {
+ margin-top: 5px !important;
+ margin-right: 10px !important;
+ }
+
+ input.richtext_dopreview {
+ margin-top: 5px !important;
+ margin-left: 10px !important;
+ }
+ }
+}
projects / rails.git / blobdiff