MD Downloads: update basic cards

chrome/browser/resources/md_downloads/item.css

 /* Copyright 2015 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. */
 
 :host {
   @apply(--downloads-shared-style);
   display: flex;
   margin: 24px 0;
 }
 
@@ skipping 24 matching lines @@
 
 :host([hide-date]) #date-container {
   visibility: hidden;
 }
 
 #content {
   background: white;
   border-radius: 2px;  /* TODO(dbeam): why does this differ from Polymer? */
   display: flex;
   flex: none;
-  min-height: 96px;
+  min-height: 103px;
   width: var(--downloads-item-width);
 }
 
 #details {
   -webkit-border-start: 1px #d8d8d8 solid;
   display: flex;
   flex: 1;
   flex-direction: column;
   padding: 16px 16px 12px 16px;
 }
@@ skipping 26 matching lines @@
 }
 
 #name,
 #file-link,
 #url {
   max-width: 100%;
 }
 
 #name,
 #file-link {
+  font-weight: bold;
   word-break: break-all;
 }
 
 #name {
   -webkit-margin-end: 12px;  /* Only really affects #tag. */
-  font-weight: bold;
-}
-
-.is-active #name {
-  color: #212121;
 }
 
 .dangerous #name {
   color: rgb(35, 114, 236);
 }
 
+/* TODO(dbeam): should .keep be a scarier/different color? */
+.is-active :-webkit-any(#file-link, #pause, #resume, #show, .keep) {
+  color: rgb(51, 103, 214);
+}
+
 #tag {
   color: #5a5a5a;
   font-weight: bold;
 }
 
 #url {
   color: inherit;
   margin-top: 6px;
   overflow: hidden;
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .is-active #url {
-  color: rgb(51, 103, 214);
+  color: #969696;
 }
 
 #progress,
 #description:not(:empty),
 .controls {
   margin-top: 16px;
 }
 
 .is-active #description {
   color: #616161;
 }
 
 .dangerous #description {
   color: rgb(217, 84, 61);
 }
 
 #progress {
   --paper-progress-active-color: rgb(54, 126, 237);
   --paper-progress-container-color: rgb(223, 222, 223);
   width: auto;
 }
 
 /* TODO(dbeam): open up a CSS mixin instead in Polymer. */
 #progress /deep/ #progressContainer {
   border-radius: 2px;
 }
 
+#cancel,
+#retry,
+.discard {
+  color: #5a5a5a;
+}
+
 #remove-wrapper {
   align-self: flex-start;
   margin: 0;
 }
 
 #remove {
+  --iron-icon-height: 20px;
+  --iron-icon-width: 20px;
   --paper-icon-button: {
-    height: 16px;
-    width: 16px;
+    height: 20px;
+    padding: 6px;
+    width: 20px;
   };
-  --iron-icon-height: 16px;
-  --iron-icon-width: 16px;
 }
 
 #incognito {
   bottom: 16px;
   content: -webkit-image-set(url(1x/incognito_marker.png) 1x,
                              url(2x/incognito_marker.png) 2x);
   position: absolute;
   right: 10px;
 }
 
@@ skipping 17 matching lines @@
   #content {
     margin: 0 auto;
   }
 
   #date-container {
     flex: none !important;
     margin: 0 auto 30px;
     width: var(--downloads-item-width);
   }
 }