Preliminary change list CSS changes This is the start of a series of changes to change list styling, and mainly focuses on rule consolidation and background-color/border changes. Change-Id: I40052ec062ca9afaa92aaacea6237f264764ee2c

diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html
index a2c7853..8817eaa 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html

@@ -31,7 +31,6 @@
     <style include="shared-styles">
       :host {
         display: table-row;
-        border-bottom: 1px solid #eee;
       }
       :host(:hover) {
         background-color: #f5fafd;
@@ -48,9 +47,6 @@
       :host([selected][assigned]) {
         background-color: #fcfaa6;
       }
-      .cell {
-        padding: .3em .5em;
-      }
       .container {
         position: relative;
       }

diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.html b/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.html
index 27d3a42..48c7414 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.html
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.html

@@ -29,46 +29,26 @@
 
 <dom-module id="gr-change-list">
   <template>
-    <style include="shared-styles">
+    <style include="shared-styles"></style>
+    <style include="gr-change-list-styles">
       #changeList {
         border-collapse: collapse;
         width: 100%;
       }
-      .cell {
-        padding: .3em .5em;
-      }
-      th {
-        text-align: left;
-      }
-      .groupHeader {
-        background-color: #eee;
-        border-top: 1em solid #fff;
-      }
-      .groupHeader a {
-        color: #000;
-        text-decoration: none;
-      }
-      .groupHeader a:hover {
-        text-decoration: underline;
-      }
-      .headerRow + tr {
-        border: none;
-      }
     </style>
-    <style include="gr-change-list-styles"></style>
     <table id="changeList">
-      <tr class="headerRow">
-        <th class="topHeader keyboard"></th>
-        <th class="topHeader star" hidden$="[[!showStar]]" hidden></th>
-        <th class="topHeader number" hidden$="[[!showNumber]]" hidden>#</th>
+      <tr class="topHeader">
+        <th class="keyboard"></th>
+        <th class="star" hidden$="[[!showStar]]" hidden></th>
+        <th class="number" hidden$="[[!showNumber]]" hidden>#</th>
         <template is="dom-repeat" items="[[changeTableColumns]]" as="item">
-          <th class$="[[_lowerCase(item)]] topHeader"
+          <th class$="[[_lowerCase(item)]]"
               hidden$="[[isColumnHidden(item, visibleChangeTableColumns)]]">
             [[item]]
           </th>
         </template>
         <template is="dom-repeat" items="[[labelNames]]" as="labelName">
-          <th class="topHeader label" title$="[[labelName]]">
+          <th class="label" title$="[[labelName]]">
             [[_computeLabelShortcut(labelName)]]
           </th>
         </template>
@@ -77,6 +57,8 @@
           index-as="sectionIndex">
         <template is="dom-if" if="[[changeSection.sectionName]]">
           <tr class="groupHeader">
+            <td class="keyboard"></td>
+            <td class="star" hidden$="[[!showStar]]" hidden></td>
             <td class="cell"
                 colspan$="[[_computeColspan(changeTableColumns, labelNames)]]">
               <a href$="[[_sectionHref(changeSection.query)]]">

diff --git a/polygerrit-ui/app/styles/gr-change-list-styles.html b/polygerrit-ui/app/styles/gr-change-list-styles.html
index de591d1..dcd7409 100644
--- a/polygerrit-ui/app/styles/gr-change-list-styles.html
+++ b/polygerrit-ui/app/styles/gr-change-list-styles.html

@@ -19,18 +19,46 @@
       :host {
         font-size: var(--font-size-normal);
       }
+      gr-change-list-item,
+      tr {
+        border-top: 1px solid #ddd;
+      }
+      tbody {
+        border: 1px solid #ddd;
+        border-top: none;
+      }
+      th {
+        text-align: left;
+      }
+      th,
+      .cell {
+        vertical-align: middle;
+      }
+      th:not(.label),
+      .cell:not(.label) {
+        padding-right: 8px;
+      }
       .topHeader,
       .groupHeader {
-        border-bottom: 1px solid #eee;
         font-family: var(--font-family-bold);
-        padding: .3em .5em;
       }
       .topHeader {
-        background-color: #ddd;
+        background-color: #fafafa;
+        font-size: var(--font-size-large);
+        height: 3rem;
       }
-      .noChanges {
-        border-bottom: 1px solid #eee;
-        padding: .3em .5em;
+      .groupHeader {
+        background-color: #f4f4f4;
+      }
+      .groupHeader a {
+        color: #000;
+        text-decoration: none;
+      }
+      .groupHeader a:hover {
+        text-decoration: underline;
+      }
+      .cell {
+        height: 2.25rem;
       }
       .keyboard,
       .star {
@@ -52,15 +80,12 @@
       .project {
         white-space: nowrap;
       }
-      .updated {
-        text-align: right;
-      }
-      .size,
-      .updated {
-        text-align: right;
-      }
       .label {
         text-align: center;
+        width: 3rem;
+      }
+      .label:not(.topHeader) {
+        border-left: 1px solid #ddd;
       }
       @media only screen and (max-width: 50em) {
         :host {
@@ -81,13 +106,17 @@
         .branch,
         .updated,
         .label,
-        .assignee {
+        .assignee,
+        .groupHeader .star {
           display: none;
         }
         .star {
           padding-left: .35em;
           padding-top: .25em;
         }
+        .groupHeader .cell {
+          padding: 0 .5em;
+        }
         .subject {
           margin-bottom: .25em;
           width: calc(100% - 2em);