report: update table and inline code formatting (#10437)

lighthouse-core/report/html/report-styles.css

@@ -128,7 +128,7 @@
   --scorescale-width: 18px;
   --section-padding-vertical: 12px;
   --snippet-background-color: var(--color-gray-50);
-  --snippet-color: var(--color-gray-800);
+  --snippet-color: #0938C2;
   --sparkline-height: 5px;
   --stackpack-padding-horizontal: 10px;
   --sticky-header-background-color: var(--report-background-color);
@@ -187,6 +187,7 @@
     --report-text-color-secondary: var(--color-gray-400);
     --report-text-color: var(--color-gray-100);
     --topbar-background-color: var(--color-gray);
+    --snippet-color: var(--color-cyan-500);
 
     /* SVGs */
     --plugin-icon-url: var(--plugin-icon-url-dark);
@@ -413,9 +414,9 @@
 /* Node */
 .lh-node__snippet {
   font-family: var(--report-font-family-monospace);
-  color: var(--color-teal-600);
-  font-size: 12px;
-  line-height: 1.5em;
+  color: var(--snippet-color);
+  font-size: 14px;
+  line-height: 20px;
 }
 
 /* Score */
@@ -498,6 +499,11 @@
   flex: 1;
 }
 
+.lh-audit__title-and-text code {
+  color: var(--snippet-color);
+  font-size: 15px;
+}
+
 /* Prepend display text with em dash separator. But not in Opportunities. */
 .lh-audit__display-text:not(:empty):before {
   content: '—';
@@ -1339,6 +1345,10 @@
   padding-right: 0;
 }
 
+.lh-table tr {
+  vertical-align: baseline;
+}
+
 /* Looks unnecessary, but mostly for keeping the <th>s left-aligned */
 .lh-table-column--text,
 .lh-table-column--source-location,
@@ -1369,6 +1379,10 @@
   min-width: 250px;
 }
 
+.lh-table-column--text {
+  min-width: 80px;
+}
+
 /* Keep columns narrow if they follow the URL column */
 /* 12% was determined to be a decent narrow width, but wide enough for column headings */
 .lh-table-column--url + th.lh-table-column--bytes,