Files.app: Update visual style of progress center.

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

Index: ui/file_manager/file_manager/foreground/css/file_manager.css
diff --git a/ui/file_manager/file_manager/foreground/css/file_manager.css b/ui/file_manager/file_manager/foreground/css/file_manager.css
index f3c870f5c618f2d612349da85595a1e6bb2cd357..6c53009d6f661d48649457e90cc141f89ed4953b 100644
--- a/ui/file_manager/file_manager/foreground/css/file_manager.css
+++ b/ui/file_manager/file_manager/foreground/css/file_manager.css
@@ -1633,18 +1633,13 @@ list.autocomplete-suggestions > [lead] > div.detail-text em {
 
 #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;
 }
@@ -1663,7 +1658,7 @@ list.autocomplete-suggestions > [lead] > div.detail-text em {
 
 #progress-center-close-view {
   opacity: 1;
-  padding-top: 10px;
+  padding-top: 20px;
   transition: opacity 300ms linear;
 }
 
@@ -1684,14 +1679,14 @@ list.autocomplete-suggestions > [lead] > div.detail-text em {
 }
 
 #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;
@@ -1703,16 +1698,17 @@ list.autocomplete-suggestions > [lead] > div.detail-text em {
 }
 
 #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%;
@@ -1724,7 +1720,7 @@ list.autocomplete-suggestions > [lead] > div.detail-text em {
 }
 
 #progress-center .progress-track {
-  background: #787878;
+  background: rgb(26, 194, 34);
   height: 100%;
 }
 
@@ -1741,13 +1737,13 @@ list.autocomplete-suggestions > [lead] > div.detail-text em {
   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 {
@@ -1755,56 +1751,35 @@ list.autocomplete-suggestions > [lead] > div.detail-text em {
 }
 
 #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;
+  /* If progress bar exists, show open button at slighly higher position. */
+  margin-bottom: 14px;
 }
 
-#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 {
+#progress-center button.cancel {
   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)
+      url(../images/files/ui/cancel.png) 1x,
+      url(../images/files/ui/2x/cancel.png) 2x)
       no-repeat;
 }
 
-#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)
-      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 {