diff --git a/css/app.css b/css/app.css
index 172a90e9b..54eb1ded9 100644
--- a/css/app.css
+++ b/css/app.css
@@ -5,10 +5,13 @@ body {
font:normal 12px/20px 'Helvetica Neue', Arial, sans-serif;
margin:0;
padding:0;
+ color:#444;
+}
+
+#iD * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
- color:#444;
}
h2 {
@@ -58,6 +61,9 @@ input[type=text]:focus {
/* Utility Classes
------------------------------------------------------- */
+.fillL { background-color: white;}
+.fillL2 { background: #f7f7f7 url(/img/background-pattern-1.png) repeat;}
+
div.hide {
display:none;
}
@@ -69,14 +75,69 @@ a.selected {
/* Buttons */
button {
- background:#7092ff;
border:0;
- color:#fff;
- font-size:12px;
- line-height:18px;
- margin:5px 5px 0 0;
+ line-height:20px;
cursor:pointer;
- border-radius:2px;
+ border-radius:4px;
+ border:1px solid #b0b0b0;
+ color:#222;
+ background: white;
+ font-weight:bold;
+ white-space:nowrap;
+ font-size:14px;
+}
+
+button:hover {
+ background-color: #ececec;
+}
+
+button.big {
+ margin:10px;
+ height:40px;
+}
+
+button.mini {
+ width:auto;
+}
+
+.buttons-joined {
+ margin:10px;
+ padding:1px;
+ border-radius: 4px;
+ background:#fff;
+ display:inline-block;
+ border:1px solid #b0b0b0;
+}
+
+.buttons-joined button {
+ height:36px;
+ border:0;
+ border-right:1px solid #ccc;
+ border-radius:0;
+}
+
+.buttons-joined button:first-child {
+ border-radius:3px 0 0 3px;
+}
+
+.buttons-joined button:last-child {
+ border-right:0;
+ border-radius:0 3px 3px 0;
+}
+
+button[disabled] {
+ color:#eee;
+ cursor:auto;
+}
+
+button.active:not([disabled]) {
+ background:#7392ff;
+ color:#fff;
+}
+
+button.save {
+ display:inline-block;
+ color:#6dc643;
}
button.cancel {
@@ -87,6 +148,14 @@ button.delete {
background:#DD5757;
}
+input[type=text] {
+ width:150px;
+ height:20px;
+ border:1px solid #ccc;
+ padding:5px;
+ margin:0;
+}
+
button small {
display: inline-block;
font-weight: normal;
@@ -95,15 +164,6 @@ button small {
vertical-align: top;
}
-div.buttons-joined {
- margin:5px;
- padding:1px;
- background:#fff;
- display:inline-block;
- border-radius:3px;
- border:1px solid #ccc;
-}
-
/* Map
------------------------------------------------------- */
@@ -147,80 +207,20 @@ img.tile {
------------------------------------------------------- */
#bar {
- background:#e8e8e8;
border-bottom:1px solid #aaa;
position:absolute;
left:0px;
top:0px;
- height:44px;
right:0;
+ height:60px;
}
-#bar button,
-button.white {
- width:80px;
- white-space:nowrap;
- cursor:pointer;
- display:inline-block;
- background:#fff;
- color:#222;
- font-weight:bold;
- font-size:14px;
- line-height:19px;
- border-radius:3px;
- border:1px solid #ccc;
- padding:0 10px;
- height:35px;
- margin:0;
-}
+/* Status box */
-#bar div.buttons-joined button:first-child {
- border-radius:2px 0 0 2px;
-}
-
-#bar div.buttons-joined button:last-child {
- border-right:0;
- border-radius:0 2px 2px 0;
-}
-
-#bar div.buttons-joined button {
- height:31px;
- border:0;
- border-right:1px solid #ccc;
- border-radius:0;
-}
-
-#bar .messages {
+.messages {
display:none;
}
-#bar button[disabled] {
- color:#eee;
- cursor:auto;
-}
-
-#bar button.active:not([disabled]) {
- background:#7392ff;
- color:#fff;
-}
-
-#bar button.save {
- display:inline-block;
- color:#6dc643;
-}
-
-#bar button.mini,
-#bar button.mini {
- width:auto;
-}
-
-#bar input[type=text] {
- width:150px;
- height:20px;
- border:1px solid #ccc;
- padding:5px;
- margin:0;
-}
/* Map Controls */
diff --git a/css/reset.css b/css/reset.css
index e29c0f5f4..7f9084c6f 100644
--- a/css/reset.css
+++ b/css/reset.css
@@ -1,4 +1,4 @@
-/* http://meyerweb.com/eric/tools/css/reset/
+/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
@@ -12,8 +12,8 @@ b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
@@ -24,7 +24,7 @@ time, mark, audio, video {
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
+article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
@@ -46,3 +46,97 @@ table {
border-collapse: collapse;
border-spacing: 0;
}
+
+/*
+ * 1. Corrects font family not being inherited in all browsers.
+ * 2. Corrects font size not being inherited in all browsers.
+ * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
+ */
+
+button,
+input,
+select,
+textarea {
+ font-family: inherit; /* 1 */
+ font-size: 100%; /* 2 */
+ margin: 0; /* 3 */
+}
+
+/*
+ * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+button,
+input {
+ line-height: normal;
+}
+
+/*
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ * and `video` controls.
+ * 2. Corrects inability to style clickable `input` types in iOS.
+ * 3. Improves usability and consistency of cursor style between image-type
+ * `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+ -webkit-appearance: button; /* 2 */
+ cursor: pointer; /* 3 */
+}
+
+/*
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+input[disabled] {
+ cursor: default;
+}
+
+/*
+ * 1. Addresses box sizing set to `content-box` in IE 8/9.
+ * 2. Removes excess padding in IE 8/9.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/*
+ * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
+ * (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ -moz-box-sizing: content-box;
+ -webkit-box-sizing: content-box; /* 2 */
+ box-sizing: content-box;
+}
+
+/*
+ * Removes inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/*
+ * Removes inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
\ No newline at end of file
diff --git a/img/background-pattern-1.png b/img/background-pattern-1.png
index 745cd63a4..8e3ffcbc4 100644
Binary files a/img/background-pattern-1.png and b/img/background-pattern-1.png differ
diff --git a/img/source/design.svg b/img/source/design.svg
index 179a2accc..e682c225c 100644
--- a/img/source/design.svg
+++ b/img/source/design.svg
@@ -21,6 +21,11 @@
inkscape:export-ydpi="90">
+
+
+
+
Save
logout
+ inkscape:export-ydpi="90"
+ id="g12678"
+ transform="translate(-110,-109)">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ transform="translate(0,-309)"
+ inkscape:export-filename="/Users/saman/work_repos/iD/img/sprite.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90">
Add a point of interest to the map.
+ Patterns
+ style="display:none">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ style="display:inline"
+ transform="translate(-550,247.63782)"
+ id="g5467"
+ inkscape:export-filename="/Users/saman/work_repos/iD/img/source/layerswitcher-expanded.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90">
+ style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#b0b0b0;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+ id="rect5469"
+ width="39"
+ height="39"
+ x="560.5"
+ y="-27.137817" />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Baselayer
-
-
-
- OpenStreetMap
-
-
- Bing Satellite
-
- Overlays
-
-
- Baselayer
+
+
+
+ OpenStreetMap
+
+
+ Bing Satellite
+
+ Overlays
+
+
+ TIGER roads
-
-
- TIGER roads
+
+
+ Standard
-
-
-
-
-
-
-
-
- Cycle Map
-
-
- Standard
+
+
+
+
+
+
+
+
+ GPS Tracks
+ y="363">Cycle Map
+
+
+ GPS Tracks
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+ style="opacity:0.5;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+ id="rect8789-1"
+ width="20"
+ height="20"
+ x="110"
+ y="230"
+ rx="0"
+ ry="0" />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ y="230"
+ x="130"
+ height="20"
+ width="20"
+ id="rect8791-0"
+ style="color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+
+
+
+
-
-
-
-
-
- Adjust the opacity
-
+
+ Adjust the opacity
+
")
.attr('title', 'Save changes to OpenStreetMap, making them visible to other users')
.call(bootstrap.tooltip()
@@ -111,12 +111,12 @@ window.iD = function(container) {
.attr('class', 'zoombuttons')
.selectAll('button')
.data([['zoom-in', '+', map.zoomIn], ['zoom-out', '-', map.zoomOut]])
- .enter().append('button').attr('class', function(d) { return d[0]; })
+ .enter().append('button').attr('class', function(d) { return d[0] + ' big'; })
.text(function(d) { return d[1]; })
.on('click', function(d) { return d[2](); });
var gc = bar.append('div').attr('class', 'geocode-control');
- gc.append('button').text('?');
+ gc.append('button').text('?').attr('class','big');
gc
.on('mouseover', function() {
d3.select('.geocode-control input').style('display', 'inline-block');
diff --git a/js/id/ui/layerswitcher.js b/js/id/ui/layerswitcher.js
index 7484fb0c7..39b8e201f 100644
--- a/js/id/ui/layerswitcher.js
+++ b/js/id/ui/layerswitcher.js
@@ -15,7 +15,7 @@ iD.layerswitcher = function(map) {
function layerswitcher(selection) {
selection
.append('button')
- .attr('class', 'white')
+ .attr('class', 'big')
.text('L')
.on('click', function() {
content.classed('hide', function() {