From 4dd4deb1cf3266afd4b12cbaeeb851409294cf55 Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Mon, 29 Jul 2013 11:50:38 -0700
Subject: [PATCH] Back to dark UI controls

---
 css/app.css            | 31 ++++++++++++++++++-------------
 js/id/ui/background.js |  2 +-
 js/id/ui/geolocate.js  |  2 +-
 js/id/ui/help.js       |  2 +-
 4 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/css/app.css b/css/app.css
index 13885fe9a..b3bd11552 100644
--- a/css/app.css
+++ b/css/app.css
@@ -549,15 +549,17 @@ button.save.has-count .count::before {
 .icon.relation.route         { background-position: -540px 0;}
 .icon.relation.multipolygon  { background-position: -560px 0;}
 
-.icon.plus.light       { background-position: -240px -20px;}
-.icon.zoom-in          { background-position: -240px 0px;}
-.icon.zoom-out         { background-position: -260px 0px;}
 .icon.inspect.light    { background-position: -220px -20px;}
+.icon.plus.light       { background-position: -240px -20px;}
+.icon.zoom-in          { background-position: -240px -20px;}
+.icon.zoom-out         { background-position: -260px -20px;}
 .icon.geocode.light    { background-position: -280px -20px;}
-.icon.help.light       { background-position: -460px -20px;}
+.icon.layers.light     { background-position: -300px -20px;}
 .icon.avatar.light     { background-position: -320px -20px;}
 .icon.nearby.light     { background-position: -340px -20px;}
+.icon.geolocate.light  { background-position: -360px -20px;}
 .icon.bug.light        { background-position: -400px -20px;}
+.icon.help.light       { background-position: -460px -20px;}
 
 .icon.back.blue        { background-position: -420px -20px;}
 .icon.forward.blue     { background-position: -440px -20px;}
@@ -1759,7 +1761,7 @@ img.wiki-image {
 /* Map Controls */
 
 .map-controls {
-    right: 10px;
+    right: 0;
     top: 70px;
     width: 40px;
     position: fixed;
@@ -1768,13 +1770,16 @@ img.wiki-image {
 
 .map-control > button {
     width: 40px;
-    background-color: #FFF;
-    background-color: rgba(255, 255, 255, 0.8);
+    background: rgba(0,0,0,.5);
     border-radius: 0;
 }
 
 .map-control > button:hover {
-    background-color: #FFF;
+    background: rgba(0, 0, 0, .8);
+}
+
+.map-control > button.active:hover {
+    background: #7092ff;
 }
 
 .map-overlay {
@@ -1791,7 +1796,7 @@ img.wiki-image {
 /* Zoomer */
 
 .zoombuttons button.zoom-in {
-    border-radius: 4px 4px 0 0;
+    border-radius: 4px 0 0 0;
 }
 
 /* Background Settings */
@@ -1802,12 +1807,12 @@ img.wiki-image {
 }
 
 .background-control button {
-    border-radius: 4px 4px 0 0;
+    border-radius: 4px 0 0 0;
 }
 
 
 .background-control button.active {
-    border-radius: 0 4px 0 0;
+    border-radius: 0;
 }
 
 .background-control {
@@ -1958,13 +1963,13 @@ img.wiki-image {
 }
 
 .geolocate-control button {
-    border-radius: 0 0 4px 4px;
+    border-radius: 0 0 0 4px;
 }
 
 /* Help */
 
 .help-control button {
-    border-radius: 0 0 4px 4px;
+    border-radius: 0 0 0 4px;
 }
 
 .help-wrap {
diff --git a/js/id/ui/background.js b/js/id/ui/background.js
index 82373dead..2f3830fa1 100644
--- a/js/id/ui/background.js
+++ b/js/id/ui/background.js
@@ -192,7 +192,7 @@ iD.ui.Background = function(context) {
             shown = false;
 
         button.append('span')
-            .attr('class', 'layers icon');
+            .attr('class', 'icon layers light');
 
         opa.append('h4')
             .text(t('background.title'));
diff --git a/js/id/ui/geolocate.js b/js/id/ui/geolocate.js
index 0229727c0..c9709180e 100644
--- a/js/id/ui/geolocate.js
+++ b/js/id/ui/geolocate.js
@@ -24,6 +24,6 @@ iD.ui.Geolocate = function(map) {
                 .placement('right'));
 
          button.append('span')
-             .attr('class', 'icon geolocate');
+             .attr('class', 'icon geolocate light');
     };
 };
diff --git a/js/id/ui/help.js b/js/id/ui/help.js
index aeb33a6d4..48dd30053 100644
--- a/js/id/ui/help.js
+++ b/js/id/ui/help.js
@@ -144,7 +144,7 @@ iD.ui.Help = function(context) {
             .call(tooltip);
 
         button.append('span')
-            .attr('class', 'icon help');
+            .attr('class', 'icon help light');
 
         context.surface().on('mousedown.help-outside', hide);
         context.container().on('mousedown.b.help-outside', hide);