[Aura] Polish app list.

chrome/browser/resources/aura/app_list/app_list.css

Index: chrome/browser/resources/aura/app_list/app_list.css
diff --git a/chrome/browser/resources/aura/app_list/app_list.css b/chrome/browser/resources/aura/app_list/app_list.css
index 7148b623cef484674e414f1d8794805d14f6e855..025543410f44f0fc714665d206e857cb69bc1b6b 100644
--- a/chrome/browser/resources/aura/app_list/app_list.css
+++ b/chrome/browser/resources/aura/app_list/app_list.css
@@ -21,38 +21,26 @@ body {
   color: white;
   font-size: 14px;
   font-weight: bold;
+  padding: 2px;  /* Extra padding for text-shadow. */
   text-shadow: 0 0 2px black, 0 0 4px black;
 }
 
-#launcher-search-container {
-  position: relative;
-  z-index: 5;
-}
-
-#launcher-search,
-#launcher-search::-webkit-input-placeholder {
-  color: white;
-}
-
-#launcher-search {
-  -webkit-padding-start: 10px;
-  -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.1);
-  background-color: rgba(0, 0, 0, 0.2);
-  border: none;
-  font-size: 14px;
-  height: 34px;
-  min-width: 384px;
-  outline: 1px solid rgba(0, 0, 0, 0.1);
+#container {
+  height: 550px;
+  left: 50%;
+  margin-top: -225px;

[Evan Stade, 2011/12/01 18:59:10]

this seems like the wrong way to do this, what are you trying to offset and why
can't you cancel it out directly instead of offsetting?

[xiyuan, 2011/12/01 19:36:10]

This is to align center of #container div with its parent when the parent's size
is not known. You use left:50% and top:50% to move the child to center of parent
and then use negative margin-top/margin-left to align child's center with
parent's center.

[Evan Stade, 2011/12/02 20:40:06]

I see. Can you add a comment about this then?

[xiyuan, 2011/12/02 21:24:20]

Done. Comments added.

+  margin-left: -450px;
+  position: absolute;
+  top: 50%;
+  width: 900px;
 }
 
 #card-slider-frame {
-  /* Must match #footer height. 0 because footer is hidden.*/
-  bottom: 0;
+  /* Must match #footer height. */
+  bottom: 50px;
   overflow: hidden;
-  /* We want this to fill the window except for the region used
-     by footer */
-  position: fixed;
-  top: 0;
+  position: absolute;
+  height: 500px;
   width: 100%;
 }
 
@@ -63,10 +51,9 @@ body {
 }
 
 #footer {
-  background-image: -webkit-linear-gradient(
-      rgba(242, 242, 242, 0.9), rgba(222, 222, 222, 0.9));
+  background: transparent;
   bottom: 0;
-  position: fixed;
+  position: absolute;
   width: 100%;
   z-index: 5;
 }
@@ -76,3 +63,28 @@ body {
   display: -webkit-box;
   height: 49px;
 }
+
+.dot .selection-bar {
+  border-color: rgba(0x7F, 0x7F, 0x7F, 0.2);

[Evan Stade, 2011/12/01 18:59:10]

the dot selection colors are kind of a mess, they should probably just be black
always with variable opacity (not via rgba)

this would make it easier to override rather than repeating 7f everywhere

[arv (Not doing code reviews), 2011/12/01 19:30:57]

This is not valid CSS.  0x7F is not a valid number

[xiyuan, 2011/12/01 19:36:10]

Cannot use black for aura because default deaktop background is dark and black
does not stands out.

Using opacity to avoid repeating color sounds good.

[xiyuan, 2011/12/01 19:36:10]

oops. Changed to use #7f7f7f and use opacity as estade suggested.

+}
+
+.dot input {
+  color: #7f7f7f;
+  font-size: 12px;
+}
+
+.dot:focus input,
+.dot:hover input,
+.dot.selected input {
+  color: white;
+}
+
+.dot:focus .selection-bar,
+.dot:hover .selection-bar,
+.dot.drag-target .selection-bar {
+  border-color: #b2b2b2;
+}
+
+.dot.selected .selection-bar {
+  border-color: #7f7f7f;
+}