diff --git a/css/app.css b/css/app.css
index 54eb1ded9..10ac5130b 100644
--- a/css/app.css
+++ b/css/app.css
@@ -78,51 +78,61 @@ button {
border:0;
line-height:20px;
cursor:pointer;
- border-radius:4px;
- border:1px solid #b0b0b0;
+ border:1px solid #aaa;
+ box-shadow: inset 0 0 0 1px #fff;
color:#222;
background: white;
font-weight:bold;
white-space:nowrap;
font-size:14px;
+ display: inline-block;
+ height:40px;
+ margin:10px;
}
button:hover {
background-color: #ececec;
}
-button.big {
- margin:10px;
- height:40px;
+button.active:not([disabled]) {
+ background:#7392ff;
+ color:#fff;
}
-button.mini {
- width:auto;
+button.wide,
+button.narrow {
+ border-radius:4px;
+}
+
+button.wide,
+button.add-button {
+ width: 80px;
+}
+
+
+button.narrow,
+button.add-button:first-child {
+ width:40px;
}
.buttons-joined {
+ display: inline-block;
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-right-width: 0;
border-radius:0;
+ margin: 0;
}
.buttons-joined button:first-child {
- border-radius:3px 0 0 3px;
+ border-radius:4px 0 0 4px;
}
.buttons-joined button:last-child {
- border-right:0;
- border-radius:0 3px 3px 0;
+ border-right-width: 1px;
+ border-radius:0 4px 4px 0;
}
button[disabled] {
@@ -130,11 +140,6 @@ button[disabled] {
cursor:auto;
}
-button.active:not([disabled]) {
- background:#7392ff;
- color:#fff;
-}
-
button.save {
display:inline-block;
color:#6dc643;
@@ -207,7 +212,7 @@ img.tile {
------------------------------------------------------- */
#bar {
- border-bottom:1px solid #aaa;
+ border-bottom:1px solid #ccc;
position:absolute;
left:0px;
top:0px;
@@ -221,6 +226,60 @@ img.tile {
display:none;
}
+/* Inspector */
+
+.inspector-wrap {
+ border:1px solid #ccc;
+ position:absolute;
+ right: 0;
+ left: 510px;
+ padding:10px;
+ height: 60px;
+ opacity:0;
+ display:none;
+}
+
+.inspector-wrap a.permalink {
+ text-decoration:none;
+ margin-right:1em;
+}
+
+.inspector tbody td {
+ border: 1px solid #ccc;
+ width:150px;
+}
+
+.inspector input {
+ margin:0;
+ padding:4px;
+ border:0;
+ background:#fff;
+ width:150px;
+}
+
+.inspector-wrap table {
+ border-collapse: collapse;
+ width:347px;
+ border-spacing:0;
+}
+
+.inspector-wrap .tag-table-wrap {
+ max-height:350px;
+ overflow:auto;
+}
+
+.inspector-wrap table td {
+ padding:0;
+ border-spacing:0;
+}
+
+.inspector-wrap .close {
+ border: 0;
+ position: absolute;
+ top: 0;
+ right: 0;
+ cursor: pointer;
+}
/* Map Controls */
@@ -316,66 +375,6 @@ div.geocode-control input {
margin-left:10px;
}
-.inspector-wrap {
- border-radius:3px;
- border:1px solid #ccc;
- position:absolute;
- top:50px;
- left:50%;
- margin-left:-175px;
- overflow:auto;
- padding:10px;
- background:#fff;
- width:350px;
- opacity:0;
- display:none;
-}
-
-/* Inspector
-------------------------------------------------------- */
-
-.inspector-wrap a.permalink {
- text-decoration:none;
- margin-right:1em;
-}
-
-.inspector tbody td {
- border: 1px solid #ccc;
- width:150px;
-}
-
-.inspector input {
- margin:0;
- padding:4px;
- border:0;
- background:#fff;
- width:150px;
-}
-
-.inspector-wrap table {
- border-collapse: collapse;
- width:347px;
- border-spacing:0;
-}
-
-.inspector-wrap .tag-table-wrap {
- max-height:350px;
- overflow:auto;
-}
-
-.inspector-wrap table td {
- padding:0;
- border-spacing:0;
-}
-
-.inspector-wrap .close {
- border: 0;
- position: absolute;
- top: 0;
- right: 0;
- cursor: pointer;
-}
-
div.typeahead {
background:#fff;
width:148px;
diff --git a/js/id/id.js b/js/id/id.js
index f422b9349..a0534863a 100644
--- a/js/id/id.js
+++ b/js/id/id.js
@@ -45,7 +45,7 @@ window.iD = function(container) {
.attr('class', 'buttons-joined');
undo_buttons.append('button')
- .attr({ id: 'undo', 'class': 'mini' })
+ .attr({ id: 'undo', 'class': 'narrow' })
.property('disabled', true)
.html('←')
.on('click', history.undo)
@@ -53,7 +53,7 @@ window.iD = function(container) {
.placement('bottom'));
undo_buttons.append('button')
- .attr({ id: 'redo', 'class': 'mini' })
+ .attr({ id: 'redo', 'class': 'narrow' })
.property('disabled', true)
.html('→')
.on('click', history.redo)
@@ -66,7 +66,7 @@ window.iD = function(container) {
.attr('class', 'hello');
bar.append('button')
- .attr('class', 'save big')
+ .attr('class', 'save wide')
.html("Upload")
.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] + ' big'; })
+ .enter().append('button').attr('class', function(d) { return d[0] + ' wide'; })
.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('?').attr('class','big');
+ gc.append('button').text('?').attr('class','wide');
gc
.on('mouseover', function() {
d3.select('.geocode-control input').style('display', 'inline-block');
@@ -142,7 +142,7 @@ window.iD = function(container) {
.call(iD.layerswitcher(map));
this.append('div')
- .attr('class', 'inspector-wrap')
+ .attr('class', 'inspector-wrap fillL')
.style('display', 'none');
this.append('div')
diff --git a/js/id/ui/layerswitcher.js b/js/id/ui/layerswitcher.js
index 39b8e201f..f91d80e36 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', 'big')
+ .attr('class', 'wide')
.text('L')
.on('click', function() {
content.classed('hide', function() {