From e7178135049ca0eb8e02985f87edc399335f7260 Mon Sep 17 00:00:00 2001 From: Michael Blasingame Date: Wed, 4 Mar 2020 14:58:19 -0800 Subject: [PATCH 1/4] CSS changes --- lighthouse-core/report/html/report-styles.css | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css index 12ff0e27e025..a919dd83cc9c 100644 --- a/lighthouse-core/report/html/report-styles.css +++ b/lighthouse-core/report/html/report-styles.css @@ -1332,13 +1332,19 @@ .lh-table td { padding: 8px 6px; } -.lh-table th:first-child { +.lh-table th:first-child, +.lh-table td:first-child { padding-left: 0; } -.lh-table th:last-child { +.lh-table th:last-child, +.lh-table td:last-child { padding-right: 0; } +.lh-table tr { + vertical-align: baseline; +} + /* Looks unnecessary, but mostly for keeping the s left-aligned */ .lh-table-column--text, .lh-table-column--source-location, @@ -1369,6 +1375,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, From 51ba8f98bfa7170605df49bba25a15a77bef12f9 Mon Sep 17 00:00:00 2001 From: Michael Blasingame Date: Wed, 4 Mar 2020 15:24:13 -0800 Subject: [PATCH 2/4] Fix alignment --- lighthouse-core/report/html/report-styles.css | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css index a919dd83cc9c..c346c3e6fcbe 100644 --- a/lighthouse-core/report/html/report-styles.css +++ b/lighthouse-core/report/html/report-styles.css @@ -1332,12 +1332,10 @@ .lh-table td { padding: 8px 6px; } -.lh-table th:first-child, -.lh-table td:first-child { +.lh-table th:first-child { padding-left: 0; } -.lh-table th:last-child, -.lh-table td:last-child { +.lh-table th:last-child { padding-right: 0; } From 3e505def8a42f12886ec30d04c475742031654b7 Mon Sep 17 00:00:00 2001 From: Michael Blasingame Date: Thu, 5 Mar 2020 13:39:52 -0800 Subject: [PATCH 3/4] Code snippet font changes --- lighthouse-core/report/html/report-styles.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css index c346c3e6fcbe..c2c07963a9f8 100644 --- a/lighthouse-core/report/html/report-styles.css +++ b/lighthouse-core/report/html/report-styles.css @@ -414,8 +414,8 @@ .lh-node__snippet { font-family: var(--report-font-family-monospace); color: var(--color-teal-600); - font-size: 12px; - line-height: 1.5em; + font-size: 14px; + line-height: 1.25em; } /* Score */ From 5a9966e77c26608ab2eea89cc45584acd10a0df7 Mon Sep 17 00:00:00 2001 From: Michael Blasingame Date: Fri, 6 Mar 2020 16:54:04 -0800 Subject: [PATCH 4/4] More style changes --- lighthouse-core/report/html/report-styles.css | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css index c2c07963a9f8..9ecf75bea02a 100644 --- a/lighthouse-core/report/html/report-styles.css +++ b/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); + color: var(--snippet-color); font-size: 14px; - line-height: 1.25em; + 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: '—';