diff --git a/css/app.css b/css/app.css
index 53eec9933..8b46887f5 100644
--- a/css/app.css
+++ b/css/app.css
@@ -18,7 +18,7 @@ body {
}
.limiter {
- max-width: 1400px;
+ max-width: 1200px;
}
div, textarea, input, span, ul, li, ol, a, button {
@@ -164,24 +164,15 @@ ul li { list-style: none;}
ul.toggle-list li a {
font-weight: bold;
padding: 10px;
- border-top: 1px solid #CCC;
+ border-top: 1px solid white;
display:block;
}
-ul.toggle-list li a:hover {
- background: #ececec;
-}
-
ul.toggle-list .icon {
float: left;
margin-right: 5px;
}
-a.selected {
- color:#222;
-}
-
-
ul.link-list li {
float: left;
display: inline-block;
@@ -199,11 +190,10 @@ ul.link-list li:first-child {
/* Utility Classes
------------------------------------------------------- */
-.fillL { background-color: white;}
+.fillL { background: white;}
.fillL2 { background: #f7f7f7 url(../img/background-pattern-1.png) repeat;}
.fillD {
- background-color: #222222;
- background-color: rgba(0,0,0,.8);
+ background: rgba(0,0,0,.7);
color: white;
}
@@ -216,9 +206,8 @@ form.hide {
}
.content {
- background-color:#fff;
+ background:#fff;
border-radius: 4px;
- border: 1px solid #ccc;
}
.pad1 {padding: 10px;}
@@ -230,8 +219,7 @@ form.hide {
button {
line-height:20px;
- border:1px solid #aaa;
- box-shadow: inset 0 0 0px 1px #fff;
+ border:0;
color:#222;
background: white;
font-weight:bold;
@@ -242,17 +230,20 @@ button {
}
button:hover {
- background-color: #ececec;
+ background: #ececec;
+}
+
+button.col3:hover {
+ background: #bde5aa;
}
button.active {
- box-shadow: inset 0 0 0px 1px #fff, inset 0 0 6px 1px rgba(0,0,0,.35);
cursor:url(../img/cursor-pointing.png) 6 1, auto;
}
button.active:not([disabled]) {
- background-color: #ececec;
- box-shadow: inset 0 0 0px 1px #fff, inset 0 0 6px 1px rgba(0,0,0,.25);
+ background: #6bc641;
+ color: white;
}
button.wide,
@@ -282,14 +273,15 @@ button.centered {
.button-wrap {
display: inline-block;
- padding:10px 0 10px 10px;
+ padding-right:10px;
margin: 0;
}
.button-wrap button:only-child { width: 100%;}
+.button-wrap:last-child { padding-right: 0; }
.joined button {
- border-right-width: 0;
+ border-right: 1px solid rgba(0,0,0,.5);
border-radius:0;
}
@@ -298,15 +290,16 @@ button.centered {
}
.joined button:last-child {
- border-right-width: 1px;
+ border-right-width: 0px;
border-radius:0 4px 4px 0;
}
button.action {
- background: #444;
+ color: white;
+ background: #7092ff;
}
button.action:hover {
- background: #222;
+ background: #597BE7;
}
button.delete {
@@ -328,15 +321,9 @@ button.save .count {
}
button.save.has-count .count {
- display: block;
- color: #444;
- background: #fff;
- border-radius: 0 3px 3px 0;
- padding: 9px;
- float: right;
- margin-left: 10px;
- margin-top: -9px;
- margin-right: -8px;
+ display: inline-block;
+ color: rgba(255,255,255,.5);
+ padding-left: 5px;
}
button.close {
@@ -346,22 +333,22 @@ button.close {
}
button .label {
- margin-right: 3px;
+ display: none;
}
-button.action .label {
+button.save .label {
+ display: inline-block;
color: white;
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}
button[disabled] {
cursor:auto;
- background: white;
+ background: #cecece;
pointer-events:none;
}
button[disabled] .label {
- color:#ccc;
+ color:#999999;
text-shadow: none;
}
@@ -386,18 +373,13 @@ button[disabled]:hover {
height: 40px;
}
-.icon.icon-pre-text {
- margin-right: 3px;
-}
-
/* Definitions for every icon */
-
-.icon.browse { background-position: 0px 0px;}
-.icon.add-point { background-position: -20px 0px;}
-.icon.add-line { background-position: -40px 0px;}
-.icon.add-area { background-position: -60px 0px;}
-.icon.undo { background-position: -80px 0px;}
-.icon.redo { background-position: -100px 0px;}
+button.active:not([disabled]) .icon.browse { background-position: 0px -20px;}
+button.active:not([disabled]) .icon.add-point { background-position: -20px -20px;}
+button.active:not([disabled]) .icon.add-line { background-position: -40px -20px;}
+button.active:not([disabled]) .icon.add-area { background-position: -60px -20px;}
+button.active:not([disabled]) .icon.undo { background-position: -80px -20px;}
+button.active:not([disabled]) .icon.redo { background-position: -100px -20px;}
.icon.apply { background-position: -120px 0px;}
.icon.save { background-position: -140px 0px;}
.icon.close { background-position: -160px 0px;}
@@ -411,10 +393,13 @@ button[disabled]:hover {
.icon.avatar { background-position: -320px 0px;}
.icon.nearby { background-position: -340px 0px;}
-.fillD .icon.browse { background-position: 0px -20px;}
-.fillD .icon.add-point { background-position: -20px -20px;}
-.fillD .icon.add-line { background-position: -40px -20px;}
-.fillD .icon.add-area { background-position: -60px -20px;}
+.icon.browse { background-position: 0px 0px;}
+.icon.add-point { background-position: -20px 0px;}
+.icon.add-line { background-position: -40px 0px;}
+.icon.add-area { background-position: -60px 0px;}
+.icon.undo { background-position: -80px 0px;}
+.icon.redo { background-position: -100px 0px;}
+
.fillD .icon.undo { background-position: -80px -20px;}
.fillD .icon.redo { background-position: -100px -20px;}
.fillD .icon.apply { background-position: -120px -20px;}
@@ -422,11 +407,11 @@ button[disabled]:hover {
.fillD .icon.close { background-position: -160px -20px;}
.fillD .icon.delete { background-position: -180px -20px;}
.fillD .icon.remove { background-position: -200px -20px;}
-.fillD .icon.inspect { background-position: -220px -20px;}
-.fillD .icon.zoom-in { background-position: -240px -20px;}
-.fillD .icon.zoom-out { background-position: -260px -20px;}
-.fillD .icon.geocode { background-position: -280px -20px;}
-.fillD .icon.layers { background-position: -300px -20px;}
+.map-control .icon.inspect { background-position: -220px -20px;}
+.map-control .icon.zoom-in { background-position: -240px -20px;}
+.map-control .icon.zoom-out { background-position: -260px -20px;}
+.map-control .icon.geocode { background-position: -280px -20px;}
+.map-control .icon.layers { background-position: -300px -20px;}
.fillD .icon.avatar { background-position: -320px -20px;}
.fillD .icon.nearby { background-position: -340px -20px;}
@@ -465,12 +450,12 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
------------------------------------------------------- */
#bar {
- border-bottom:1px solid #ccc;
position:absolute;
left:0px;
top:0px;
right:0;
height:60px;
+ background: rgba(0,0,0,.8);
}
/* Status box */
@@ -485,12 +470,10 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
opacity:0;
display:none;
padding-left: 10px;
- max-width: 600px;
+ max-width: 500px;
}
.inspector {
- border-left: 1px solid #ccc;
- border-bottom: 1px solid #ccc;
min-height: 60px;
position: relative;
}
@@ -500,7 +483,6 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
}
.inspector-inner.head {
- border-bottom: 1px solid #ccc;
background:#fff;
z-index:1;
position:relative;
@@ -580,13 +562,14 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
right: 30px;
}
-.inspector-buttons {
- border-top: 1px solid #ccc;
-}
-
.inspector-buttons .button-wrap {
width: 20%;
}
+.inspector-buttons .button-wrap:first-child { padding-right: 5px;}
+
+.inspector-buttons .button-wrap:last-child {
+ padding-left: 5px;
+}
.inspector-inner .add-tag-row {
width: 100%;
@@ -604,12 +587,22 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
/* Map Controls */
.map-control {
- left:10px;
+ left:0px;
position:absolute;
}
.map-control button {
width: 40px;
+ border-radius: 0 4px 4px 0;
+ background: rgba(0, 0, 0, .8);
+}
+
+.map-control button:hover {
+ background: rgba(0, 0, 0, .9);
+}
+
+.map-control button.active:hover {
+ background: #6bc641;
}
.map-overlay {
@@ -618,6 +611,7 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
left:50px;
top:0;
display: block;
+ border-radius: 4px;
}
/* Zoomer */
@@ -628,12 +622,13 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
}
.zoombuttons button.zoom-in {
- border-radius:4px 4px 0 0;
+ border-radius:0 4px 0 0;
+ border-bottom: 1px solid rgba(0, 0, 0, .5);
}
.zoombuttons button.zoom-out {
border-top:0;
- border-radius:0 0 4px 4px;
+ border-radius:0 0 4px 0;
}
/* Layer Switcher */
@@ -642,28 +637,24 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
top:210px;
}
-.layerswitcher-control .adjustments {
- padding:5px;
- opacity:0.2;
-}
-
-.layerswitcher-control .adjustments:hover {
- opacity:1;
-}
-
-.layerswitcher-control .adjustments .reset {
+.layerswitcher-control .adjustments button {
+ opacity:0.5;
height:20px;
font-size:10px;
font-weight:normal;
- padding:0 5px;
+ padding:0 5px 3px 5px;
+ background: white;
+ border: 1px solid #ddd;
+ border-radius: 0;
+}
+
+.layerswitcher-control .adjustments button:hover {
+ opacity: 1;
}
.layerswitcher-control .nudge {
- height:20px;
width:20px;
- font-size:10px;
margin-right:2px;
- font-weight:normal;
}
.opacity-options-wrapper {
@@ -735,7 +726,7 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
display:block;
position:absolute;
overflow:hidden;
- top:60px;
+ top:0px;
left:0;
right:0;
bottom:0;
@@ -860,9 +851,6 @@ div.typeahead a:first-child {
text-align: center;
}
-.modal button { margin-bottom: 0;}
-.modal button:first-child { margin-left: 0;}
-
.modal button.close-modal {
float:right;
margin-right:10px;
@@ -912,11 +900,14 @@ div.typeahead a:first-child {
}
.modal-section {
- padding: 20px;
- border-bottom: 1px solid #ccc;
+ padding: 10px;
}
-.modal-section:last-child { border-bottom: 0;}
+
+.body .modal-section:last-child {
+ border-bottom: 0;
+ border-radius: 0 0 4px 4px;
+}
.modal-section img.wiki-image {
max-width: 400px;
diff --git a/img/source/sprite.svg b/img/source/sprite.svg
index f239c672f..c3fdcf407 100644
--- a/img/source/sprite.svg
+++ b/img/source/sprite.svg
@@ -13,7 +13,7 @@
height="200"
id="svg12393"
version="1.1"
- inkscape:version="0.48.2 r9819"
+ inkscape:version="0.48.1 r9760"
sodipodi:docname="sprite.svg"
inkscape:export-filename="/Users/saman/work_repos/iD/img/sprite.png"
inkscape:export-xdpi="90"
@@ -39,8 +39,8 @@
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1"
- inkscape:cx="150.66428"
- inkscape:cy="90.493266"
+ inkscape:cx="54.93799"
+ inkscape:cy="205.49862"
inkscape:document-units="px"
inkscape:current-layer="layer12"
showgrid="false"
@@ -165,7 +165,7 @@
image/svg+xml
-
+
@@ -175,110 +175,6 @@
id="layer1"
transform="translate(-25,-62.362183)"
style="display:inline">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;opacity:1" />
@@ -935,26 +464,6 @@
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
@@ -1260,30 +548,12 @@
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/img/sprite.png b/img/sprite.png
index 2f933d9f8..8a536fa47 100644
Binary files a/img/sprite.png and b/img/sprite.png differ
diff --git a/js/id/id.js b/js/id/id.js
index 2edc7fd23..b1beb425f 100644
--- a/js/id/id.js
+++ b/js/id/id.js
@@ -22,7 +22,8 @@ window.iD = function(container) {
.call(map);
var bar = container.append('div')
- .attr('id', 'bar').attr('class', 'fillL2');
+ .attr('id', 'bar')
+ .attr('class','pad1');
var limiter = bar.append('div')
.attr('class', 'limiter');
diff --git a/js/id/ui/inspector.js b/js/id/ui/inspector.js
index b1d26a53b..1724e8ed4 100644
--- a/js/id/ui/inspector.js
+++ b/js/id/ui/inspector.js
@@ -47,7 +47,7 @@ iD.ui.inspector = function() {
drawTags(entity.tags);
inspectorbody.append('div')
- .attr('class', 'inspector-buttons')
+ .attr('class', 'inspector-buttons pad1')
.call(drawButtons);
}
diff --git a/js/id/ui/layerswitcher.js b/js/id/ui/layerswitcher.js
index a2acad1b5..4556fbe19 100644
--- a/js/id/ui/layerswitcher.js
+++ b/js/id/ui/layerswitcher.js
@@ -56,7 +56,7 @@ iD.ui.layerswitcher = function(map) {
var opa = content
.append('div')
- .attr('class', 'opacity-options-wrapper fillL2');
+ .attr('class', 'opacity-options-wrapper');
opa.append('h4').text('Layers');
@@ -102,7 +102,7 @@ iD.ui.layerswitcher = function(map) {
content
.append('ul')
- .attr('class', 'toggle-list')
+ .attr('class', 'toggle-list fillL2')
.selectAll('a.layer')
.data(sources)
.enter()
@@ -135,7 +135,7 @@ iD.ui.layerswitcher = function(map) {
var adjustments = content
.append('div')
- .attr('class', 'adjustments');
+ .attr('class', 'adjustments pad1');
var directions = [
['←', [-1, 0]],