#left {
position: absolute;
- top: 0px;
+ top: 30px;
+ bottom: 0;
width: 185px;
font-size: 11px;
line-height: 12px;
/* Rules for the OpenStreetMap logo in the top left corner */
#logo {
+ display: block;
width: 170px;
min-width: 170px;
padding: 5px;
text-align: center;
- margin: 25px 0 5px 0;
+ margin: auto;
+}
+
+#logo img {
+ border: 0px;
}
#logo h1 {
display: none;
}
+#small-title img {
+ border: 0px;
+}
+
/* Rules for the introductory text displayed in the left sidebar to new users */
-#intro {
- border-top: 1px solid #ccc;
+.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: 20px;
- 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 {
- padding: 5px;
- margin: 4px 0;
- border-top: 1px solid #ccc;
+ margin: 0;
+ padding: 5px 10px;
+ line-height: 15px;
+ font-size: 12px;
+ list-style-type: none;
border-bottom: 1px solid #ccc;
- line-height: 20px;
- font-size: 14px;
- font-weight: bold;
+ 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 {
- padding: 5px;
- margin: 4px 0;
- border-top: 1px solid #ccc;
+ padding: 5px 10px;
+ margin: 5px 0;
}
.optionalbox h1 {
/* Rules for the search box */
.whereami {
- line-height: 20px;
- vertical-align: bottom;
-}
-
-.search_container {
- height: 15px;
- padding-bottom: 5px;
}
#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;
+ 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;
+ cursor: pointer;
}
.search_help {
- margin-top: 2px;
- margin-bottom: 0px;
+ margin: 5px 0 0 0;
+}
+
+.deemphasize {
+ color: #999;
+}
+
+.deemphasize a {
+ color: #7092FF;
}
/* Rules for donation request box */
.donate {
- width: 155px;
- margin: 10px 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: 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;
}
/* Rules for Creative Commons logo button */
/* Rules for tabbed navigation bar */
+#top-bar {
+ position: absolute;
+ top: 0;
+ height: 29px;
+ border-bottom: 1px solid #ccc;
+ background: white;
+}
+
#tabnav {
- height: 20px;
- margin: 0px;
- padding-top: 5px;
- background: image-url('tab_bottom.gif') repeat-x bottom;
+ padding: 0;
+ margin: 0;
+ overflow:hidden;
}
#tabnav li {
}
#tabnav a, #tabnav a:link, #tabnav a:visited {
- background: #f3f3f3;
- font-size: 13px;
- line-height: 14px;
+ background: #fff;
+ font-size: 14px;
+ line-height: 19px;
font-weight: bold;
- padding: 2px 10px;
- border: 1px solid #ccc;
+ padding: 5px 10px;
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;
+ -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:hover, #tabnav a:visited:hover {
- background: #fff;
+ text-decoration:underline;
}
#tabnav a:link.disabled,
#tabnav a:visited.disabled,
#tabnav a:link:hover.disabled,
#tabnav a:visited:hover.disabled {
- background: #bbbbbb;
- color: white
+ color: #ccc;
+ cursor: default;
+}
+
+#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;
+ height: 28px;
margin: 0px;
- padding-top: 5px;
font-size: 13px;
- line-height: 15px;
- background: image-url('tab_bottom.gif') repeat-x bottom;
+ line-height: 28px;
}
.greeting-bar-unread {
top: 15px;
}
-/* Rules for OpenLayers maps */
+/* Rules for Leaflet maps */
#map {
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;
}
#permalink a {
- padding: 5px;
+ padding: 5px;
+}
+
+.site-index .leaflet-top,
+.site-export .leaflet-top {
+ margin-top: 40px !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;
}
#sidebar {
display: none;
position: absolute;
- border: 1px solid #888;
- margin: 0px;
+ margin: 30px 0px 0px 0px;
padding: 0px;
width: 30%;
top: 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 #888;
- background: #bbb;
+ background: #ccc;
}
/* 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: 2px 5px;
- border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
- background: #eee;
+ font-weight: bold;
}
.search_results_entry {
/* Rules for the main content area */
-body.site #content {
- padding: 0px;
- margin: 0px;
- position: absolute;
- bottom: 0px;
+#content {
+ padding: 20px;
+ margin: 30px 0px 0px 0px;
}
-#content {
- padding: 10px;
- margin: 0px;
- position: absolute;
+.site-edit #content,
+.site-index #content,
+.site-export #content {
+ position: fixed;
+ margin-top: 0px;
+ left: 0px;
+ right: 0px;
+ top: 0px;
bottom: 0px;
+ padding: 0px;
+}
+
+.site-edit #content {
+ top: 30px;
}
#slim_container {
margin-bottom: 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 */
position: relative;
width: 90%;
height: 400px;
+ border: 1px solid #ccc;
display: none;
}
/* 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 .user_map {
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 {
- display: none;
-}
-
-.user_map .olControlPanZoom {
- display: block;
-}
-
/* Rules for user popups on maps */
.user_popup p {
/* 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 */
input[type="url"],
input[type="password"],
textarea {
- border: 1px solid #888;
+ border: 1px solid #ccc;
}
/* 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 */
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;
+ padding: 5px 10px 10px 10px;
+ font-size: 12px;
+
+ p {
+ margin: 0px;
+ }
+
+ th {
+ vertical-align: top;
+ }
+
+ td {
+ font-family: fixed;
+ line-height: 16px;
+ padding: 0px !important;
+ }
+
+ input.richtext_doedit {
+ margin-top: 5px !important;
+ }
+
+ input.richtext_dopreview {
+ margin-top: 5px !important;
+ }
+ }
+}
projects / rails.git / blobdiff