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]],