From 7c5cb5b3f1d64483474b19f4e12b33266abe5dc6 Mon Sep 17 00:00:00 2001
From: Saman Bemel-Benrud <samanpwbb@gmail.com>
Date: Mon, 24 Jun 2013 11:13:40 -0400
Subject: [PATCH] more dramatic different between hover and active edit feature
 pane

---
 css/app.css               | 40 +++++++++++++++++++--------------------
 js/id/ui/entity_editor.js |  2 +-
 js/id/ui/preset.js        |  4 ++--
 3 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/css/app.css b/css/app.css
index 1358ef4e4..62b5afaea 100644
--- a/css/app.css
+++ b/css/app.css
@@ -311,7 +311,7 @@ ul.link-list li:last-child {
 }
 
 .fillL3 {
-    background: #f1f1f1;
+    background: #ececec;
     color: #333;
 }
 
@@ -891,15 +891,17 @@ a:hover .icon.out-link   { background-position: -500px -14px;}
 
 .subgrid .preset-list {
     padding: 10px 10px 0 10px;
-    border: 1px solid #CCC;
     margin-top: 0;
+    border: 0;
     border-radius: 8px;
+    width: -webkit-calc(100% + 20px);
+    margin-left: -10px;
 }
 
 .subgrid .arrow {
     border: solid rgba(0, 0, 0, 0);
     border-width: 10px;
-    border-bottom-color: #CCC;
+    border-bottom-color: #f1f1f1;
     width: 0;
     height: 0;
     margin-left: 50%;
@@ -947,12 +949,9 @@ a:hover .icon.out-link   { background-position: -500px -14px;}
 }
 
 .inspector-preset form.preset-form {
-    padding: 20px;
-}
-
-.entity-editor-pane .preset-list-item {
-    border-bottom: 1px solid #ccc;
-    padding: 20px;
+    padding: 10px;
+    margin: 0 10px 20px 10px;
+    border-radius: 8px;
 }
 
 .entity-editor-pane .preset-list-item::after {
@@ -966,7 +965,7 @@ a:hover .icon.out-link   { background-position: -500px -14px;}
     margin: auto;
     border: solid rgba(0, 0, 0, 0);
     border-width: 10px;
-    border-bottom-color: #ccc;
+    border-bottom-color: #ececec;
 }
 
 .entity-editor-pane .preset-list-item .preset-list-button-wrap {
@@ -1040,13 +1039,14 @@ a:hover .icon.out-link   { background-position: -500px -14px;}
 }
 /* Preset form (hover mode) */
 
-.inspector-hover textarea,
+.preset-input-wrap .label,
 .inspector-hover input,
-.inspector-hover .form-label,
+.inspector-hover label {
+    background: #ececec;
+}
+
 .inspector-hover a,
-.inspector-hover .checkselect label:last-of-type,
-.inspector-hover .preset-input-wrap,
-.inspector-hover .preset-input-wrap li {
+.inspector-hover .checkselect label:last-of-type {
     color: #666;
 }
 
@@ -1213,6 +1213,7 @@ input,
 }
 
 button.preset-add-field {
+    background: #f6f6f6;
     width: 25%;
     height: 40px;
     -webkit-transition: width 200ms;
@@ -1221,6 +1222,10 @@ button.preset-add-field {
             transition: width 200ms;
 }
 
+button.preset-add-field:hover {
+    background: #ececec;
+}
+
 /* set width based on # of buttons */
 
 button.preset-add-field:only-child {
@@ -1351,7 +1356,6 @@ input[type=number] {
     display: block;
     padding: 5px 10px;
     color: #7092FF;
-    background-color: white;
 }
 
 .checkselect label:hover {
@@ -2327,10 +2331,6 @@ img.wiki-image {
     display: inline-block;
 }
 
-.mode-save .commit-info {
-    padding-bottom: 10px;
-}
-
 .mode-save .commit-form {
     margin-bottom: 0;
 }
diff --git a/js/id/ui/entity_editor.js b/js/id/ui/entity_editor.js
index 89d0267f0..411fbf6d3 100644
--- a/js/id/ui/entity_editor.js
+++ b/js/id/ui/entity_editor.js
@@ -46,7 +46,7 @@ iD.ui.EntityEditor = function(context) {
             .attr('class', 'inspector-body');
 
         $enter.append('div')
-            .attr('class', 'preset-list-item inspector-inner fillL')
+            .attr('class', 'preset-list-item inspector-inner')
             .append('div')
             .attr('class', 'preset-list-button-wrap')
             .append('button')
diff --git a/js/id/ui/preset.js b/js/id/ui/preset.js
index 6e414e2c9..57b9daddb 100644
--- a/js/id/ui/preset.js
+++ b/js/id/ui/preset.js
@@ -76,7 +76,7 @@ iD.ui.preset = function(context) {
             .data([0]);
 
         $form.enter().append('form')
-            .attr('class', 'fillL preset-form inspector-inner');
+            .attr('class', 'preset-form inspector-inner fillL3');
 
         var $fields = $form.selectAll('.form-field')
             .data(shown, fieldKey);
@@ -132,7 +132,7 @@ iD.ui.preset = function(context) {
             .data([0]);
 
         $more.enter().append('div')
-            .attr('class', 'more-buttons fillL inspector-inner');
+            .attr('class', 'more-buttons inspector-inner');
 
         var $buttons = $more.selectAll('.preset-add-field')
             .data(notShown, fieldKey);