Butter bar visual refresh.

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 {
   height: 100%;
 }
 
 html.col-resize * {
   cursor: col-resize !important;
@@ skipping 66 matching lines @@
   border-color: #aaa;
   color: #888;
 }
 
 /* Drop opacity of selected rows to give a visual feedback on copy/cut
  * operation. */
 .blink {
   opacity: 0.8;
 }
 
+#butter-bar-container {
+  -webkit-box-pack: center;
+  display: -webkit-box;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 3;

[Vladislav Kaznacheev, 2012/08/13 13:27:18]

I suspect this element would also need pointer-events: none

[SeRya, 2012/08/14 11:37:01]

Thank you for the point. I ensured that comtainer is transparent for the mouse
but the butter bar itself is not.

+}
+
 #butter-bar {
   -webkit-box-align: end;
   -webkit-box-orient: horizontal;
   -webkit-transition: opacity 300ms;
   background-color: rgba(95, 95, 95, 0.17);
   color: #222;
   display: -webkit-box;
+  max-width: 340px;
+  min-width: 200px;
   padding: 0 1em;
-  position: absolute;
   top: 1px;
+  width: 30%;
+  z-index: 2;
 }
 
 #butter-bar:not(.visible) {
   opacity: 0;
   pointer-events: none;
 }
 
 #butter-bar .content {
+  -webkit-box-flex: 1;
   padding-bottom: 4px;
   padding-top: 4px;
 }
 
 #butter-bar .actions {
   -webkit-box-orient: horizontal;
   -webkit-box-pack: end;
   display: -webkit-box;
   height: 20px;
 }
@@ skipping 18 matching lines @@
 }
 
 #butter-bar.error {
   background-color: rgba(221, 75, 57, 0.2);
   border: 1px solid rgba(221, 75, 57, 0.5);
   border-radius: 2px;
   padding: 2px 1em;
 }
 
 .progress-bar {
+  -webkit-box-flex: 1;
   border: 1px solid #999;
   margin-bottom: 2px;
   margin-top: 3px;
   padding: 1px;
-  width: 320px;
 }
 
 .progress-track {
   -webkit-animation-duration: 800ms;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-name: bg;
   -webkit-animation-timing-function: linear;
   background-color: #ccc;
   background-image: -webkit-linear-gradient(315deg, transparent,
       transparent 33%, rgba(0, 0, 0, 0.12) 33%, rgba(0, 0, 0, 0.12) 66%,
@@ skipping 1364 matching lines @@
   height: 100%;
 }
 
 #list-container .table-header-cell:hover {
   background-color: #f2f2f2;
 }
 
 button:focus {
   outline-color: rgb(77, 144, 254);
 }