Files.app: Update visual style of progress center.

ui/file_manager/file_manager/foreground/css/file_manager.css

 /* Copyright (c) 2014 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. */
 
 /* Special attribute used in HTML to hide elements. */
 body[type='folder'] [invisibleif~='folder'],
 body[type='upload-folder'] [invisibleif~='upload-folder'],
 body[type='saveas-file'] [invisibleif~='saveas-file'],
 body[type='open-file'] [invisibleif~='open-file'],
 body[type='open-multi-file'] [invisibleif~='open-multi-file'],
@@ skipping 1615 matching lines @@
   /* Height values of each frame are set by script.
    * Keep the animation sync with JS. */
   from {
   }
   to {
   }
 }
 
 #progress-center {
   background-color: transparent;
-  border-top: 1px solid transparent;
+  border-top: 1px solid rgb(214, 214, 214);
   overflow: hidden;
   position: relative;
   transition: background-color 300ms linear,
               border 300ms linear;
 }
 
-#progress-center.opened {
-  background-color: #ebebeb;
-  border-top: 1px solid #d8d8d8;
-}
-
 #progress-center.animated {
   -webkit-animation: progress-center-toggle 300ms ease-out;
 }
 
 #progress-center-open-view {
   opacity: 1;
   padding-top: 10px;
   transition: opacity 300ms linear;
 }
 
 #progress-center:not(.opened) #progress-center-open-view {
   opacity: 0;
   pointer-events: none;
   position: absolute;
 }
 
 #progress-center-close-view {
   opacity: 1;
-  padding-top: 10px;
+  padding-top: 20px;
   transition: opacity 300ms linear;
 }
 
 #progress-center.opened #progress-center-close-view {
   opacity: 0;
   pointer-events: none;
   position: absolute;
 }
 
 #progress-center.animated #progress-center-open-view,
 #progress-center.animated #progress-center-close-view {
   left: 0;
   pointer-events: none;
   position: absolute;
   right: 0;
   top: 0;
   z-index: 1;
 }
 
 #progress-center li {
-  -webkit-padding-end: 10px;
+  -webkit-padding-end: 12px;
   display: flex;
   /* This must not be margin-bottom to calculate parent's height correctly. */
-  padding-bottom: 20px;
+  padding-bottom: 16px;
 }
 
 #progress-center label {
-  color: #777;
+  color: rgb(76, 76, 76);
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 #progress-center li.error.single label {
   white-space: normal;
 }
 
 #progress-center .progress-frame {
-  -webkit-padding-end: 10px;
-  -webkit-padding-start: 20px;
+  -webkit-padding-end: 12px;
+  -webkit-padding-start: 16px;
   flex: 1 0 0;
 }
 
 #progress-center .progress-bar {
-  background: #d8d8d8;
-  border-radius: 3px;
+  background: rgb(224, 224, 224);
+  border-radius: 2px;
   display: inline-block;
-  height: 6px;
+  height: 4px;
+  margin-bottom: 3px;
   opacity: 1;
   overflow: hidden;
   width: 100%;
 }
 
 #progress-center li.error .progress-bar,
 #progress-center li.quiet .progress-bar {
   display: none;
 }
 
 #progress-center .progress-track {
-  background: #787878;
+  background: rgb(26, 194, 34);
   height: 100%;
 }
 
 #progress-center .progress-track.animated {
   transition: width 300ms linear;
 }
 
 #progress-center .button-frame {
   align-self: flex-end;
   flex: none;
 }
 
 #progress-center button {
   border: none;
   cursor: pointer;
   display: inline-block;
-  height: 12px;
+  height: 16px;
   min-height: 0;
   min-width: 0;
   outline: none;
   padding: 0;
   vertical-align: middle;
-  width: 12px;
+  width: 16px;
 }
 
 #progress-center li.error.single .button-frame {
   display: none;
 }
 
 #progress-center button.close {
-  -webkit-margin-end: 10px;
+  -webkit-margin-end: 12px;
   -webkit-margin-start: auto;
   background: -webkit-image-set(
-      url(../images/files/ui/process_drawer_button_opened.png) 1x,
-      url(../images/files/ui/2x/process_drawer_button_opened.png) 2x)
+      url(../images/files/ui/expand_less_active.png) 1x,
+      url(../images/files/ui/2x/expand_less_active.png) 2x)
       no-repeat;
   display: block;
   margin-bottom: 20px;
 }
 
-#progress-center button.close:hover {
-  background: -webkit-image-set(
-      url(../images/files/ui/process_drawer_button_opened_hover.png) 1x,
-      url(../images/files/ui/2x/process_drawer_button_opened_hover.png) 2x)
-      no-repeat;
-}
-
-#progress-center button.close:active {
-  background: -webkit-image-set(
-      url(../images/files/ui/process_drawer_button_opened_pressed.png) 1x,
-      url(../images/files/ui/2x/process_drawer_button_opened_pressed.png) 2x)
-      no-repeat;
-}
-
 #progress-center button.open {
   background: -webkit-image-set(
-      url(../images/files/ui/process_drawer_button_closed.png) 1x,
-      url(../images/files/ui/2x/process_drawer_button_closed.png) 2x)
+      url(../images/files/ui/expand_more.png) 1x,
+      url(../images/files/ui/2x/expand_more.png) 2x)
       no-repeat;
-}
-
-#progress-center button.open:hover {
-  background: -webkit-image-set(
-      url(../images/files/ui/process_drawer_button_closed_hover.png) 1x,
-      url(../images/files/ui/2x/process_drawer_button_closed_hover.png) 2x)
-      no-repeat;
-}
-
-#progress-center button.open:active {
-  background: -webkit-image-set(
-      url(../images/files/ui/process_drawer_button_closed_pressed.png) 1x,
-      url(../images/files/ui/2x/process_drawer_button_closed_pressed.png) 2x)
-      no-repeat;
+  /* If progress bar exists, show open button at slighly higher position. */
+  margin-bottom: 14px;
 }
 
 #progress-center button.cancel {
   background: -webkit-image-set(
-      url(../images/files/ui/close_bar.png) 1x,
-      url(../images/files/ui/2x/close_bar.png) 2x)
+      url(../images/files/ui/cancel.png) 1x,
+      url(../images/files/ui/2x/cancel.png) 2x)
       no-repeat;
 }
 
+#progress-center li.error button.open,
+#progress-center li.quiet button.open {
+  margin-bottom: 0;
+}
+
 #progress-center-close-view:not(.single) button.cancel {
   display: none;
 }
 
 #progress-center-close-view.single button.open {
   display: none;
 }
 
 #progress-center li:not(.cancelable) button.cancel {
   visibility: hidden;
 }
 
 #cloud-import-banner {
   background: #2196f3;
   color: white;
   display: flex;
   flex: 0 0 14px;
   font-size; 14px;
   padding: 20px 15px;
 }
 
 .text-measure {
   pointer-events: none;
   position: absolute;
   top: 0;
   visibility: hidden;
   z-index: -1;
 }