MD Settings: remove shadow from drawer in narrow mode, change font color

chrome/browser/resources/settings/settings_ui/settings_ui.html

 <link rel="import" href="chrome://resources/cr_elements/cr_icons.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-drawer-panel/paper-drawer-panel.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-header-panel/paper-header-panel.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toolbar/paper-toolbar.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://md-settings/direction_delegate.html">
@@ skipping 15 matching lines @@
 
       paper-drawer-panel {
         @apply(--layout-center);
         --paper-drawer-panel-drawer-container: {
           background: none;  /* Remove default background styling. */
         };
         position: relative;
       }
 
       #drawer {
+        --paper-header-panel-shadow: {
+          /* Polymer's style transformation chokes on :host() and :not() (and
+           * many other things, it seems). Just hide the built-in shadow and
+           * duplicate its style. */
+          display: none;
+        };
         /* Explicitly set this so that transitions work and look good. */
         background-color: var(--settings-background-color);
       }
 
+      #drawer .toolbar::after {
+        box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
+        content: '';
+        display: block;
+        height: 6px;
+      }
+
       #drawer,
-      #drawer .toolbar {
-        transition: background-color .3s, color .3s;
+      #drawer .toolbar,
+      #drawer .toolbar::after {
+        transition: background-color .3s, color .3s, height .3s;
+      }
+
+      :host(:not(.narrowing)) [narrow] #drawer,
+      :host(:not(.narrowing)) [narrow] #drawer .toolbar,
+      :host(:not(.narrowing)) [narrow] #drawer .toolbar::after {
+        transition: none;  /* Transition only when removing [narrow]. */
       }
 
       :host(:not(.narrowing)) [narrow] #drawer,
       :host(:not(.narrowing)) [narrow] #drawer .toolbar {
         background-color: white;
-        transition: none;  /* Transition only when removing [narrow]. */
       }
 
       :host(:not(.narrowing)) [narrow] #drawer .toolbar {
-        color: black;
+        color: var(--settings-nav-grey);
+      }
+
+      :host(:not(.narrowing)) [narrow] #drawer .toolbar::after {
+        border-bottom: var(--settings-separator-line);
+        height: 0;
       }
 
       paper-icon-button {
         --iron-icon-fill-color: var(--settings-title-bar-color);
       }
 
       paper-icon-button[suffix] {
         --iron-icon-fill-color: var(--settings-title-search-color);
         height: 32px; /* After padding, the icon size is 16px. */
         width: 32px;
@@ skipping 98 matching lines @@
             </paper-input>
           </div>
         </paper-toolbar>
         <settings-main prefs="{{prefs}}" current-route="{{currentRoute}}">
         </paper-icon-button>
       </paper-header-panel>
     </paper-drawer-panel>
   </template>
   <script src="settings_ui.js"></script>
 </dom-module>