From 6cc1b25f91773f8c8a5f60819662c2fd8524d061 Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Mon, 24 Jun 2019 11:15:52 -0700 Subject: [PATCH 1/6] report: center toplevel errors --- lighthouse-core/report/html/report-styles.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css index 8f0f3208dcd0..655db055316f 100644 --- a/lighthouse-core/report/html/report-styles.css +++ b/lighthouse-core/report/html/report-styles.css @@ -993,8 +993,9 @@ .lh-warnings--toplevel { --item-margin: calc(var(--header-line-height) / 4); color: var(--report-text-color-secondary); - margin: var(--category-padding); - padding: var(--category-padding); + margin-left: auto; + margin-right: auto; + width: 50%; } .lh-warnings ul { padding-left: calc(var(--category-padding) * 2); From 5211794c803df2ee4625dd0a519f9b1f9ad80f76 Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Mon, 24 Jun 2019 13:06:16 -0700 Subject: [PATCH 2/6] bg color --- lighthouse-core/report/html/report-styles.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css index 655db055316f..3a5b1d9eb7c6 100644 --- a/lighthouse-core/report/html/report-styles.css +++ b/lighthouse-core/report/html/report-styles.css @@ -35,6 +35,7 @@ .lh-vars { /* Palette using Material Design Colors * https://www.materialui.co/colors */ + --color-amber: #FFF8E1; /* 50 */ --color-blue-200: #90CAF9; --color-blue-900: #0D47A1; --color-blue-A700: #2962FF; @@ -996,6 +997,7 @@ margin-left: auto; margin-right: auto; width: 50%; + background-color: var(--color-amber); } .lh-warnings ul { padding-left: calc(var(--category-padding) * 2); From 38746280097b1b21a91dc24d87e5ce4b38fbf230 Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Mon, 24 Jun 2019 13:08:50 -0700 Subject: [PATCH 3/6] breakpoint --- lighthouse-core/report/html/report-styles.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css index 3a5b1d9eb7c6..03845b2220ca 100644 --- a/lighthouse-core/report/html/report-styles.css +++ b/lighthouse-core/report/html/report-styles.css @@ -999,6 +999,12 @@ width: 50%; background-color: var(--color-amber); } +@media screen and (max-width: 964px) { + .lh-warnings--toplevel { + width: 100%; + } +} + .lh-warnings ul { padding-left: calc(var(--category-padding) * 2); margin: 0; From 0ef6187d38bcf5fb112e1cb9eb9fbe3dca4907af Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Tue, 25 Jun 2019 15:15:43 -0700 Subject: [PATCH 4/6] amber-50 --- lighthouse-core/report/html/report-styles.css | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css index 03845b2220ca..83c422457539 100644 --- a/lighthouse-core/report/html/report-styles.css +++ b/lighthouse-core/report/html/report-styles.css @@ -29,13 +29,12 @@ For colors: --color-{hue}-{intensity} - {intensity} is the Material Design tag - 700, A700, etc. Omit "-{intensity}" if there is only one - color of that hue. + {intensity} is the Material Design tag - 700, A700, etc. */ .lh-vars { /* Palette using Material Design Colors * https://www.materialui.co/colors */ - --color-amber: #FFF8E1; /* 50 */ + --color-amber-50: #FFF8E1; --color-blue-200: #90CAF9; --color-blue-900: #0D47A1; --color-blue-A700: #2962FF; @@ -997,7 +996,7 @@ margin-left: auto; margin-right: auto; width: 50%; - background-color: var(--color-amber); + background-color: var(--color-amber-50); } @media screen and (max-width: 964px) { .lh-warnings--toplevel { From e82ed838f24335116a66bf81f1a3b097852f95f4 Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Tue, 25 Jun 2019 15:20:00 -0700 Subject: [PATCH 5/6] padding --- lighthouse-core/report/html/report-styles.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css index 83c422457539..6ce04f5fbfc5 100644 --- a/lighthouse-core/report/html/report-styles.css +++ b/lighthouse-core/report/html/report-styles.css @@ -138,6 +138,7 @@ --topbar-height: 32px; --topbar-logo-size: 24px; --topbar-padding: 0 8px; + --toplevel-warning-padding: 22px; /* SVGs */ --plugin-icon-url-dark: url('data:image/svg+xml;utf8,'); @@ -997,6 +998,7 @@ margin-right: auto; width: 50%; background-color: var(--color-amber-50); + padding: var(--toplevel-warning-padding); } @media screen and (max-width: 964px) { .lh-warnings--toplevel { From cb05e649201e58aef00f07ee3fddc4e7101c83a1 Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Tue, 25 Jun 2019 16:15:42 -0700 Subject: [PATCH 6/6] better --- lighthouse-core/report/html/report-styles.css | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css index 6ce04f5fbfc5..bfe03c5e2414 100644 --- a/lighthouse-core/report/html/report-styles.css +++ b/lighthouse-core/report/html/report-styles.css @@ -996,15 +996,10 @@ color: var(--report-text-color-secondary); margin-left: auto; margin-right: auto; - width: 50%; + max-width: calc(var(--report-width) - var(--category-padding) * 2); background-color: var(--color-amber-50); padding: var(--toplevel-warning-padding); } -@media screen and (max-width: 964px) { - .lh-warnings--toplevel { - width: 100%; - } -} .lh-warnings ul { padding-left: calc(var(--category-padding) * 2);