FileBrowser: tuned colors according to mocks.

chrome/browser/resources/file_manager/css/file_manager.css

 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
 html.col-resize * {
   cursor: col-resize !important;
 }
 
 /* Outer frame of the dialog. */
 body {
@@ skipping 192 matching lines @@
   -webkit-box-flex: 0;
   cursor: col-resize;
   margin-left: -4px;  /* +1px to accomodate the roots list border */
   margin-right: -3px;
   position: relative;
   width: 7px;
   z-index: 2;
 }
 
 /* Roots list at the left. */
-list.roots-list {
-  border-right: 1px solid #d2d2d2;
+#roots-list {
+  border-right: 1px solid rgb(170, 170, 170);
 }
 
-list.roots-list > * {
+#roots-list > * {
   background-color: #e6e6e6;
+  background-image: none;
   border: none;
-  border-radius: 0;
   height: 39px;
   margin: 0;
   padding: 0 5px;
 }
 
-list.roots-list > .accepts,
-list.roots-list > [lead][selected],
-list.roots-list > [lead],
-list.roots-list > [selected],
-list.roots-list > [anchor] {
-  background-color: rgb(204, 219, 243);
-  background-image: none;
-  border-bottom: 1px solid rgb(195, 210, 233);
-  border-top: 1px solid rgb(195, 210, 233);
-  height: 37px;
+#roots-list > :hover {
+  background-color: rgba(0, 0, 0, 0.05);
+  border-color: rgba(0, 0, 0, 0.05);
 }
 
-list.roots-list > .accepts:hover,
-list.roots-list > [lead]:hover,
-list.roots-list > [lead][selected]:hover,
-list.roots-list > [selected]:hover,
-list.roots-list > [anchor]:hover {
-  background-color: rgb(193, 211, 236) !important;
-  border-bottom: 1px solid transparent !important;
-  border-top: 1px solid transparent !important;
-  height: 37px !important;
+#roots-list > .accepts,
+#roots-list > [lead][selected],
+#roots-list > [lead],
+#roots-list > [selected],
+#roots-list > [anchor] {
+  background-color: rgb(204, 204, 204);
 }
 
-list.roots-list li.root-item {
+#roots-list > .accepts:hover,
+#roots-list > [lead]:hover,
+#roots-list > [lead][selected]:hover,
+#roots-list > [selected]:hover,
+#roots-list > [anchor]:hover {
+  background-color: rgb(192, 192, 192);
+}
+
+#roots-list li.root-item {
   -webkit-box-align: center;
   display: -webkit-box;
   padding-left: 11px;
 }
 
 li.root-item > .root-label {
   -webkit-box-flex: 1;
   margin-right: 5px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ skipping 210 matching lines @@
 [gdata] button.settings:active {
   background-image: url('../images/settings_button_pressed.png');
 }
 
 .filelist-panel {
   -webkit-box-flex: 1;
   -webkit-box-orient: vertical;
   display: -webkit-box;
 }
 
-.list-container {
+#list-container {
   -webkit-box-flex: 1;
   display: -webkit-box;
   position: relative;
 }
 
 .spinner {
   background-image: url(../images/spinner.svg);
   background-size: 100%;
   height: 22px;
   left: 50%;
@@ skipping 62 matching lines @@
   overflow: hidden;
   position: relative;
   width: 112px;
 }
 
 div.img-container > img {
   -webkit-user-drag: none;
   position: absolute;
 }
 
-.list-container list > *,
-.list-container grid > * {
+#list-container list > *,
+#list-container grid > * {
   background-image: none;
   border-radius: 0;
   line-height: 30px;
 }
 
-.list-container list > [selected],
-.list-container grid > [selected] {
+#list-container list > [selected],
+#list-container grid > [selected] {
   background-color: rgb(203, 219, 241);
-  border-color: rgb(224, 233, 247);
+  border-top: 1px solid rgb(224, 233, 247);
 }
 
-.list-container list > .accepts[selected],
-.list-container grid > .accepts[selected],
-.list-container list > [selected]:hover,
-.list-container grid > [selected]:hover {
+#list-container list > .accepts[selected],
+#list-container grid > .accepts[selected],
+#list-container list > [selected]:hover,
+#list-container grid > [selected]:hover {
   background-color: rgb(193, 211, 236);
 }
 
-.list-container list > .accepts,
-.list-container grid > .accepts,
-.list-container list > :hover,
-.list-container grid > :hover {
-  background-color: rgb(242, 246, 250);
-  border-color: rgb(242, 246, 250);
+#list-container list > .accepts,
+#list-container grid > .accepts,
+#list-container list > :hover,
+#list-container grid > :hover {
+  background-color: #f1f1f1;
 }
 
-.list-container.nohover list > :not([selected]):hover,
-.list-container.nohover grid > :not([selected]):hover {
+#list-container.nohover list > :not([selected]):hover,
+#list-container.nohover grid > :not([selected]):hover {
   background-color: transparent;
   border-color: transparent;
 }
 
 .table-row-cell .filename-label,
 .thumbnail-item .filename-label,
 /* Show ellipsis in cells. The name column has different structure and overrides
    this rule. */
 .table-row-cell > div {
   display: block;
@@ skipping 197 matching lines @@
 #select-all-checkbox {
   -webkit-margin-end: 10px;
   -webkit-margin-start: 0;
   margin-bottom: 0;
   margin-top: 0;
   /* 1px below text */
   position: relative;
   top: 1px;
 }
 
-li.thumbnail-item .file-checkbox {
+#list-container li.thumbnail-item .file-checkbox {
   -webkit-margin-start: 7px;
   margin-top: 6px;
   opacity: 0;
 }
 
-li.table-row:hover .file-checkbox,
-li.table-row:hover .pin,
-li.thumbnail-item:hover .file-checkbox {
+#list-container li.table-row:hover .file-checkbox,
+#list-container li.table-row:hover .pin,
+#list-container li.thumbnail-item:hover .file-checkbox {
   opacity: 0.5;
 }
 
 .file-checkbox:hover,
 .pin:hover,
-li.table-row[selected] .file-checkbox,
-li.table-row[selected] .pin,
-li.table-row .pin:checked,
-li.thumbnail-item[selected] .file-checkbox {
+#list-container li.table-row[selected] .file-checkbox,
+#list-container li.table-row[selected] .pin,
+#list-container li.table-row .pin:checked,
+#list-container li.thumbnail-item[selected] .file-checkbox {
   opacity: 1 !important;
 }
 
-li.table-row {
-  line-height: 38px;
+#list-container li {

[Vladislav Kaznacheev, 2012/04/28 14:07:53]

This style will be applied to grid items as well. This was not the case before.

[Dmitry Zvorygin, 2012/04/28 14:21:55]

Done.

+  border: none;
+  border-top: 1px solid transparent;
+  line-height: 39px;
   padding-bottom: 1px;
   padding-top: 1px;
 }
 
 /* The icon in the name column. */
 .detail-icon {
   background-image: url(../images/filetype_generic.png);
   background-position: center;
   background-repeat: no-repeat;
   height: 24px;
@@ skipping 316 matching lines @@
 }
 
 body[ash] .dialog-title,
 body[type='full-page'] [invisibleif='full-page'],
 body:not([type='full-page']) [visibleif='full-page'],
 body:not([type='saveas-file']) [visibleif='saveas-file'],
 body:not([type='saveas-file']):not([type='full-page'])
     [visibleif='saveas-file full-page'] {
   display: none;
 }