a36f3558dd
I set out to do a quick and dirty typography overhaul to make things more consistent and a bit cleaner, but I kept running into things I didn't like, so this lead me down something of a rabbit hole of design tweaks to the OSM site. Goals here are to have better content hierarchy, better vertical rhythm, more consistent UI, cleaner markup with less tables, all while keeping the basics pretty much intact. There are a lot of things I didn't touch even though they need to be updated (lots of tables where stuff shouldn't be tables, mostly). Basic overview of changes: I added a new persistent header that helps segment pages. It's now a lot easier to know what you're looking at. The header has a page title, a description, plus a submenu of actions. There is now a pattern of 20px/10px margins and padding for more rhythm and breathing room throughout the site. I know there are other problems here or things I've missed - would love another set of eyes to look over this! I am still getting comfortable working on the site - it's my first time ever digging into a ruby or rails so I'm not familiar with the templating language yet.
1608 lines
24 KiB
SCSS
1608 lines
24 KiB
SCSS
/* 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 */
|
|
|
|
body {
|
|
font-family: 'Helvetica Neue',Arial,sans-serif;
|
|
font-size: 14px;
|
|
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: 24px;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 21px;
|
|
margin-top: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
h4,h5,h6 {
|
|
font-size: 14px;
|
|
margin-top: 10px;
|
|
margin-bottom: 20px;
|
|
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: 20px;
|
|
}
|
|
|
|
.small_icon {
|
|
vertical-align: middle;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
/* Rules for links */
|
|
|
|
a {
|
|
color: #00f;
|
|
text-decoration: none;
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
/* Rules for horizontal lines */
|
|
|
|
hr {
|
|
border: none;
|
|
background-color: #ccc;
|
|
color: #ccc;
|
|
height: 1px;
|
|
}
|
|
|
|
/* General styles for tables */
|
|
|
|
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;
|
|
height: 100%;
|
|
width: 185px;
|
|
font-size: 11px;
|
|
line-height: 12px;
|
|
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: 20px 5px;
|
|
text-align: center;
|
|
margin: auto;
|
|
}
|
|
|
|
#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 {
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
.sidebar-copy p {
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.sidebar-copy.intro {
|
|
margin-top: -1px;
|
|
border-top: 1px solid #ccc;
|
|
}
|
|
|
|
/*
|
|
* Rules for alert boxes shown in the left sidebar when important
|
|
* information needs to be conveyed such as when the site is
|
|
* undergoing maintenance.
|
|
*/
|
|
|
|
.sidebar-alert {
|
|
padding: 5px;
|
|
border-top: 1px solid #ccc;
|
|
margin-top: 4px;
|
|
margin-bottom: -4px;
|
|
background: #e00;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
p {
|
|
margin: 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.
|
|
*/
|
|
|
|
.sidebar-notice {
|
|
padding: 5px;
|
|
border-top: 1px solid #ccc;
|
|
margin-top: 4px;
|
|
margin-bottom: -4px;
|
|
background: #ea0;
|
|
font-size: 12px;
|
|
p {
|
|
margin: 5px;
|
|
}
|
|
}
|
|
|
|
/* Rules for the menu displayed in the left sidebar */
|
|
|
|
.left_menu {
|
|
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 img {
|
|
margin: 10px 0px;
|
|
}
|
|
|
|
.left_menu ul {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.left_menu li {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.left_menu h4 {
|
|
padding: 5px 0 5px 0;
|
|
font-size: 12px;
|
|
margin: 0;
|
|
}
|
|
|
|
.left_menu li:last-child h4 {
|
|
padding-top: 0;
|
|
}
|
|
|
|
/* Rules for SOTM advert */
|
|
|
|
#sotm {
|
|
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
|
|
* and the tag cloud on the traces pages.
|
|
*/
|
|
|
|
.optionalbox {
|
|
left: 0px;
|
|
padding: 5px 10px;
|
|
margin: 5px 0;
|
|
text-align: left;
|
|
}
|
|
|
|
/* Rules for the search box */
|
|
|
|
#search_field form {
|
|
width: 165px;
|
|
}
|
|
|
|
#search_field {
|
|
position: relative;
|
|
}
|
|
|
|
#search_field input[type="text"] {
|
|
width: 165px;
|
|
padding: 3px;
|
|
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"] {
|
|
border: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 15px;
|
|
height: 15px;
|
|
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: 5px 0 0 0;
|
|
}
|
|
|
|
/* Utility for de-emphasizing content */
|
|
|
|
.deemphasize {
|
|
color: #999;
|
|
a {
|
|
color: #7092FF;
|
|
}
|
|
}
|
|
|
|
/* Rules for donation request box */
|
|
|
|
.donate {
|
|
display: block;
|
|
position: relative;
|
|
width: 153px;
|
|
padding: 5px;
|
|
border: 1px solid #AED1A0;
|
|
background: #cbeea7;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
border-radius: 2px;
|
|
-moz-border-radius: 2px;
|
|
color: #222;
|
|
margin: 10px 10px 0px 10px;
|
|
}
|
|
|
|
.donate:hover {
|
|
background: #9ed485;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.donate p {
|
|
text-indent: 20px;
|
|
margin: 0;
|
|
}
|
|
|
|
.donate .donate-icon {
|
|
width: 15px;
|
|
height: 15px;
|
|
border: 0px;
|
|
background: image-url("sprite.png") 0 -30px no-repeat;
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 17px;
|
|
}
|
|
|
|
/* Rules for Creative Commons logo button */
|
|
|
|
#cclogo {
|
|
margin: 10px 0;
|
|
float: right;
|
|
}
|
|
|
|
/* Rules for tabbed navigation bar */
|
|
|
|
#top-bar {
|
|
position: relative;
|
|
margin-left: 185px;
|
|
height: 29px;
|
|
border-bottom: 1px solid #ccc;
|
|
background: white;
|
|
z-index: 100;
|
|
}
|
|
|
|
.site-edit #top-bar,
|
|
.site-index #top-bar,
|
|
.site-export #top-bar {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
#tabnav {
|
|
height: 29px;
|
|
margin-bottom:0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#tabnav li {
|
|
display: inline;
|
|
}
|
|
|
|
#tabnav a, #tabnav a:link, #tabnav a:visited {
|
|
float: left;
|
|
background: #fff;
|
|
font-weight: bold;
|
|
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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
#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:hover,
|
|
#tabnav a:visited.disabled:hover,
|
|
#tabnav a:link:hover.disabled:hover,
|
|
#tabnav a:visited:hover.disabled:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Utility for styling notification numbers */
|
|
|
|
.count-number {
|
|
padding: 2px 5px;
|
|
border-radius: 3px;
|
|
background: #d7d7ff;
|
|
margin: 0 2px;
|
|
font-size: 11px;
|
|
color: #333;
|
|
}
|
|
|
|
/* Rules for greeting bar in the top right corner */
|
|
|
|
#greeting {
|
|
float: right;
|
|
padding-top: 3px;
|
|
}
|
|
|
|
.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;
|
|
left: 15px;
|
|
}
|
|
|
|
/* Rules for Leaflet maps */
|
|
|
|
#permalink {
|
|
z-index: 10000;
|
|
position: absolute;
|
|
bottom: 0px;
|
|
right: 0px;
|
|
padding: 5px;
|
|
background:#fff;
|
|
}
|
|
|
|
.site-index .leaflet-top,
|
|
.site-export .leaflet-top {
|
|
top: 10px !important;
|
|
.leaflet-control {
|
|
margin-top: 0px !important;
|
|
}
|
|
}
|
|
|
|
.site-index #map .olControlScaleLine,
|
|
.site-export #map .olControlScaleLine {
|
|
left: 10px !important;
|
|
}
|
|
|
|
/* Rules for edit menu */
|
|
|
|
.menuicon {
|
|
padding: 0 5px;
|
|
font-weight: normal;
|
|
display: inline-block;
|
|
&:hover {
|
|
text-decoration: none !important;
|
|
}
|
|
}
|
|
|
|
.menu {
|
|
display: none;
|
|
z-index: 10000;
|
|
position: absolute;
|
|
background-color: #ffffff;
|
|
border: 1px solid #cccccc;
|
|
border-top: 0px;
|
|
}
|
|
|
|
.menu ul {
|
|
margin: 0px;
|
|
}
|
|
|
|
.menu li {
|
|
padding: 2px 5px;
|
|
border-top: 1px solid #eee;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Rules for attribution text under the main map shown on printouts */
|
|
|
|
#attribution {
|
|
display: none;
|
|
}
|
|
|
|
.attribution_license,
|
|
.attribution_project {
|
|
text-align: left;
|
|
}
|
|
|
|
.attribution_notice {
|
|
text-align: center;
|
|
}
|
|
|
|
/* Rules for the popout map sidebar */
|
|
|
|
#sidebar {
|
|
display: none;
|
|
position: absolute;
|
|
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_close {
|
|
position: absolute;
|
|
height: 20px;
|
|
top: 0px;
|
|
bottom: 0;
|
|
right: 20px;
|
|
margin: auto;
|
|
}
|
|
|
|
#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 {
|
|
padding: 20px;
|
|
}
|
|
|
|
#mapkey .mapkey-table-key img {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
#mapkey td {
|
|
padding: 0 5px 5px 5px;
|
|
}
|
|
|
|
/* Rules for search results which appear in the popout sidebar */
|
|
|
|
.search_searching {
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.search_results_entry {
|
|
margin-bottom: 0 ;
|
|
}
|
|
|
|
.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 {
|
|
color: #f00;
|
|
}
|
|
|
|
/* Rules for data browser information which appears in the popout sidebar */
|
|
|
|
#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 {
|
|
position: relative;
|
|
}
|
|
|
|
.browse_status {
|
|
display: none;
|
|
}
|
|
|
|
/* Rules for export information which appears in the popout sidebar */
|
|
|
|
.export_bounds {
|
|
text-align: center;
|
|
}
|
|
|
|
.export_area_inputs {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.export_bound {
|
|
margin: 5px;
|
|
}
|
|
|
|
.export_details input[type="text"]#export_html_text {
|
|
width: 100%;
|
|
}
|
|
|
|
#sidebar #marker_inputs li:last-child {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
#export_osm,
|
|
#export_mapnik,
|
|
#export_osmarender {
|
|
display: none;
|
|
}
|
|
|
|
.export_buttons {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Rules for the main content area */
|
|
|
|
#content {
|
|
padding: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.site-edit #content,
|
|
.site-index #content,
|
|
.site-export #content {
|
|
position: fixed;
|
|
padding: 0;
|
|
top: 30px; bottom: 0;
|
|
left: 185px; right: 0;
|
|
border-left: 1px solid #ccc;
|
|
}
|
|
|
|
.wrapper {
|
|
margin-left: 185px;
|
|
border-left: 1px solid #ccc;
|
|
text-align: left;
|
|
}
|
|
|
|
.site-edit #content {
|
|
top: 30px;
|
|
}
|
|
|
|
#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;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
#slim_header img {
|
|
vertical-align: middle;
|
|
margin-bottom: 5px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
/* Rules for small maps in content areas */
|
|
|
|
.content_map {
|
|
position: relative;
|
|
width: 45%;
|
|
height: 398px;
|
|
border: 1px solid #ccc;
|
|
margin-bottom: 20px;
|
|
float: right;
|
|
}
|
|
|
|
.content_map #small_map {
|
|
height: 100%;
|
|
width: 100%;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* Rules for the home page */
|
|
|
|
.site-export #map,
|
|
.site-index #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;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Rules for the changeset list shown by the history tab etc */
|
|
|
|
#changeset_list {
|
|
width: 100%;
|
|
ul {
|
|
padding: 10px 0;
|
|
margin-bottom: 0px;
|
|
border-top: 1px solid #ccc;
|
|
&:last-child {
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
}
|
|
.selected {
|
|
background-color: rgb(255, 255, 160);
|
|
}
|
|
.date,
|
|
.user {
|
|
border-left: 1px solid #ccc;
|
|
padding-left: 5px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
#changeset_list_map {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
top: 20px;
|
|
right: 20px;
|
|
width: 45%;
|
|
min-height: 398px;
|
|
max-height: 598px;
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
/* Rules for the data browser */
|
|
|
|
.browse-section {
|
|
border-top: 1px solid #ccc;
|
|
margin-top: 10px;
|
|
padding-top: 10px;
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
h4, p {
|
|
margin-bottom: 5px;
|
|
}
|
|
p, ul, .bbox {
|
|
margin-left: 33.3333%;
|
|
}
|
|
h4 {
|
|
width: 33.3333%;
|
|
float: left;
|
|
}
|
|
}
|
|
|
|
.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: 10px;
|
|
border-width: 0px;
|
|
text-align: right;
|
|
}
|
|
|
|
#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 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 {
|
|
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 15px;
|
|
min-height: 62px;
|
|
}
|
|
|
|
.content_map .leaflet-popup-content-wrapper {
|
|
-webkit-border-radius: 4px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Rules for user popups on maps */
|
|
|
|
.user_popup {
|
|
min-width: 200px;
|
|
}
|
|
|
|
.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;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
/* 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%;
|
|
}
|
|
|
|
#user_list tr {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
#user_list p {
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
#user_list_actions {
|
|
float: right;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* Rules for the diary list page */
|
|
|
|
.diary_entry-list img.user_thumbnail {
|
|
float: left;
|
|
}
|
|
|
|
.diary_post {
|
|
position: relative;
|
|
margin-top: 20px;
|
|
padding-top: 20px;
|
|
border-top: 1px solid #ccc;
|
|
|
|
&:first-child {
|
|
margin-top: 0;
|
|
border-top: 0;
|
|
padding-top: 0;
|
|
}
|
|
h1, h2 {
|
|
font-size: 21px;
|
|
line-height: 21px;
|
|
}
|
|
small.deemphasize {
|
|
display: block;
|
|
}
|
|
ul,
|
|
ol {
|
|
margin-bottom: 20px;
|
|
font-style: italic;
|
|
margin-left: 20px;
|
|
}
|
|
ul li {
|
|
list-style: disc;
|
|
}
|
|
ol li {
|
|
list-style: decimal;
|
|
}
|
|
ul.secondary-actions { display: inline-block;}
|
|
}
|
|
|
|
.content-heading .hide_unless_logged_in { // hacky selector, better to just add a new class to this div
|
|
display: inline;
|
|
}
|
|
|
|
.post_heading {
|
|
margin-bottom: 20px;
|
|
h2 {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
font-size: 24px;
|
|
float: left;
|
|
line-height: 32px;
|
|
}
|
|
}
|
|
|
|
/* Rules for the diary entry page */
|
|
|
|
.diary_entry {
|
|
#map {
|
|
position: relative;
|
|
width: 90%;
|
|
height: 398px;
|
|
border: 1px solid #ccc;
|
|
display: none;
|
|
margin-bottom: 20px;
|
|
}
|
|
#newcomment {
|
|
border-top: 1px solid #ccc;
|
|
padding-top: 20px;
|
|
margin-top: 10px;
|
|
}
|
|
.diary-comment {
|
|
margin-top: 10px;
|
|
&:first-child {
|
|
margin-top: 20px;
|
|
padding-top: 20px;
|
|
border-top: 1px solid #ccc;
|
|
}
|
|
p {
|
|
margin-bottom: 10px;
|
|
margin-left: 70px;
|
|
}
|
|
.comment-heading {
|
|
margin-bottom: 0;
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.diary_entry-view img.user_thumbnail {
|
|
float: left;
|
|
}
|
|
|
|
/* 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 #ccc;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
overflow: auto;
|
|
height: 398px;
|
|
}
|
|
|
|
div#contributorTerms p#last {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
div#contributorTerms ol {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
div#contributorTerms img {
|
|
display: block;
|
|
margin: 20px auto inherit auto;
|
|
}
|
|
|
|
form#termsForm div#buttons {
|
|
float: right;
|
|
}
|
|
|
|
form#termsForm input#agree {
|
|
margin-left: 40px;
|
|
}
|
|
|
|
div#slim_content form#termsForm {
|
|
width: auto;
|
|
}
|
|
|
|
p#contributorGuidance {
|
|
background-color: #f4f4ff;
|
|
border-radius: 3px;
|
|
-moz-border-radius: 3px;
|
|
margin-top: 20px;
|
|
padding: 10px;
|
|
}
|
|
|
|
/* Rules for the account settings page */
|
|
|
|
#accountForm {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
#accountForm td {
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
#accountForm .user_map {
|
|
position: relative;
|
|
width: 498px;
|
|
height: 398px;
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
.accountImage-options {
|
|
width: 50%;
|
|
display: inline-block;
|
|
}
|
|
|
|
.nohome .location {
|
|
display: none;
|
|
}
|
|
|
|
#homerow .message {
|
|
display: none;
|
|
}
|
|
|
|
.nohome .message {
|
|
display: inline !important;
|
|
}
|
|
|
|
#accountForm input[type=submit] {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.content_map.settings_map {
|
|
float: none;
|
|
width: 50%;
|
|
}
|
|
|
|
/* Rules for message in/out box page */
|
|
|
|
.messages {
|
|
width: 100%;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
.messages tbody tr {
|
|
border-top: 1px solid #ccc;
|
|
}
|
|
|
|
.messages .inbox-row {
|
|
background: #f8f8ff;
|
|
}
|
|
|
|
.messages .inbox-row-unread {
|
|
background:#CBEEA7;
|
|
}
|
|
|
|
.right {
|
|
float: right;
|
|
}
|
|
|
|
.messages tr td,
|
|
.messages tr th {
|
|
padding: 5px;
|
|
}
|
|
|
|
.inbox-row .inbox-mark-read {
|
|
display: none;
|
|
}
|
|
|
|
.info-line {
|
|
margin-bottom: 20px;
|
|
padding: 5px 0px 4px 0px;
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
|
|
.info-line form,
|
|
.info-line form div {
|
|
display: inline;
|
|
}
|
|
|
|
.info-line .user_thumbnail_tiny {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.inbox-row-unread .inbox-mark-unread {
|
|
display: none;
|
|
}
|
|
|
|
/* Rules for "flash" notice boxes shown at the top of the content area */
|
|
|
|
.flash {
|
|
padding: 20px;
|
|
&#error {
|
|
background-color: #ff7070;
|
|
}
|
|
&#warning {
|
|
background-color: #fff6f0;
|
|
}
|
|
&#notice {
|
|
background-color: #CBEEA7;
|
|
}
|
|
}
|
|
|
|
/* Rules for highlighting fields with rails validation errors */
|
|
|
|
.field_with_errors {
|
|
padding: 2px;
|
|
background-color: #ff7070;
|
|
display: table;
|
|
}
|
|
|
|
/* Rules for rails validation error boxes */
|
|
|
|
#errorExplanation {
|
|
width: 400px;
|
|
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;
|
|
background-color: #c00;
|
|
color: #fff;
|
|
text-align: left;
|
|
}
|
|
|
|
#errorExplanation p {
|
|
color: #333;
|
|
margin-bottom: 0px;
|
|
padding: 5px;
|
|
}
|
|
|
|
#errorExplanation ul li {
|
|
font-size: 12px;
|
|
list-style: disc;
|
|
}
|
|
|
|
/* Rules for forms */
|
|
|
|
.submitButton {
|
|
text-align: center;
|
|
}
|
|
|
|
.fieldName {
|
|
vertical-align: top;
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
text-align: right;
|
|
}
|
|
|
|
.submitButton {
|
|
text-align: right;
|
|
}
|
|
|
|
.minorNote {
|
|
font-size: 12px;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="email"],
|
|
input[type="url"],
|
|
input[type="password"],
|
|
textarea {
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
/* Rules for user images */
|
|
|
|
img.user_image {
|
|
width: 100px;
|
|
height: 100px;
|
|
border: 1px solid #ccc;
|
|
margin-bottom: 20px;
|
|
float: left;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
img.user_thumbnail {
|
|
width: 50px;
|
|
height: 50px;
|
|
border: 1px solid #ccc;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
img.user_thumbnail_tiny {
|
|
max-width: 24px;
|
|
max-height: 24px;
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* 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-bottom: 20px;
|
|
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;
|
|
}
|
|
}
|
|
.hidden li,
|
|
.hide_unless_logged_in li,
|
|
.hide_unless_administrator li {
|
|
border-left: 1px solid #ccc;
|
|
padding-left: 5px;
|
|
}
|
|
.hidden:first-child li,
|
|
.hide_unless_logged_in:first-child li,
|
|
.hide_unless_administrator:first-child li {
|
|
border-left: 0;
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
|
|
/* 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,
|
|
.item0 {
|
|
background: #F4F4FF;
|
|
}
|
|
|
|
.table1,
|
|
.item1 {
|
|
background: #fff;
|
|
}
|
|
|
|
/* Rules for OpenID logo */
|
|
|
|
.openid_logo {
|
|
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;
|
|
padding: 20px;
|
|
background-color: #f4f4ff;
|
|
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;
|
|
margin-left: 15px;
|
|
background-color: #f8f8ff;
|
|
padding: 20px;
|
|
p {
|
|
margin: 0px;
|
|
}
|
|
th {
|
|
vertical-align: top;
|
|
text-align: left;
|
|
padding: 0px 15px 0px 0px !important;
|
|
}
|
|
table > thead th {
|
|
font-weight: bold;
|
|
}
|
|
td {
|
|
font-family: fixed;
|
|
line-height: 16px;
|
|
text-align: left;
|
|
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;
|
|
}
|
|
}
|
|
}
|