From 7177fd05b8fc57b3cb7fd6d7a80a71806f7ddd29 Mon Sep 17 00:00:00 2001 From: John Brown Date: Sun, 22 Mar 2020 15:02:12 +0000 Subject: [PATCH 1/5] Changed runtime error message color themes --- lighthouse-core/report/html/report-styles.css | 15 ++++++++++----- lighthouse-core/report/html/templates.html | 2 +- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css index b804dff9723d..ff9161b6ee3b 100644 --- a/lighthouse-core/report/html/report-styles.css +++ b/lighthouse-core/report/html/report-styles.css @@ -53,6 +53,7 @@ --color-green: #0CCE6B; --color-orange-700: #D04900; --color-orange: #FFA400; + --color-orange-rgb: 255, 164, 0; --color-red-700: #EB0F00; --color-red: #FF4E42; --color-teal-600: #00897B; @@ -66,7 +67,7 @@ --color-informative: var(--color-blue-900); --color-pass-secondary: var(--color-green-700); --color-pass: var(--color-green); - --color-hover: var(--color-gray-50); + --color-hover: var(--color-gray-50); /* Component variables */ --audit-description-padding-left: calc(var(--score-icon-size) + var(--score-icon-margin-left) + var(--score-icon-margin-right)); @@ -1010,16 +1011,20 @@ .lh-warnings--toplevel { --item-margin: calc(var(--header-line-height) / 4); - color: var(--report-text-color-secondary); + color: var(--report-text-color); margin-left: auto; margin-right: auto; - max-width: calc(var(--report-width) - var(--category-padding) * 2); - background-color: var(--color-amber-50); + max-width: calc(var(--report-width) - var(--category-padding) * 2); + background-color: rgba(var(--color-orange-rgb), .1); padding: var(--toplevel-warning-padding); } +.lh-warnings__msg { + color: var(--color-orange-700); + margin: 0; +} + .lh-warnings ul { - padding-left: calc(var(--category-padding) * 2); margin: 0; } .lh-warnings li { diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html index 6af232a56b5f..02b009ec8130 100644 --- a/lighthouse-core/report/html/templates.html +++ b/lighthouse-core/report/html/templates.html @@ -18,7 +18,7 @@ From 15827c00143cc41073a29ee3537823414ed27836 Mon Sep 17 00:00:00 2001 From: John Brown Date: Sat, 25 Apr 2020 18:29:49 +0100 Subject: [PATCH 2/5] Reduced padding on runtime error message and rounded the message box corners --- lighthouse-core/report/html/report-styles.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css index ff9161b6ee3b..d79c88f73662 100644 --- a/lighthouse-core/report/html/report-styles.css +++ b/lighthouse-core/report/html/report-styles.css @@ -140,7 +140,7 @@ --topbar-height: 32px; --topbar-logo-size: 24px; --topbar-padding: 0 8px; - --toplevel-warning-padding: 22px; + --toplevel-warning-padding: 18px; /* SVGs */ --plugin-icon-url-dark: url('data:image/svg+xml;utf8,'); @@ -1017,6 +1017,7 @@ max-width: calc(var(--report-width) - var(--category-padding) * 2); background-color: rgba(var(--color-orange-rgb), .1); padding: var(--toplevel-warning-padding); + border-radius: 8px; } .lh-warnings__msg { From 33bb1aa1c28f9c935a230ab7f054ee2594e34bc8 Mon Sep 17 00:00:00 2001 From: John Brown Date: Sat, 9 May 2020 15:36:33 +0100 Subject: [PATCH 3/5] Fix contrast issue and correct file inconsistencies --- lighthouse-core/report/html/report-styles.css | 24 ++++++++++++------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css index d79c88f73662..e027afc5534b 100644 --- a/lighthouse-core/report/html/report-styles.css +++ b/lighthouse-core/report/html/report-styles.css @@ -51,23 +51,23 @@ --color-gray: #000000; --color-green-700: #018642; --color-green: #0CCE6B; + --color-orange-50: #FFF3E0; --color-orange-700: #D04900; --color-orange: #FFA400; - --color-orange-rgb: 255, 164, 0; --color-red-700: #EB0F00; --color-red: #FF4E42; --color-teal-600: #00897B; --color-white: #FFFFFF; /* Context-specific colors */ - --color-average-secondary: var(--color-orange-700); --color-average: var(--color-orange); - --color-fail-secondary: var(--color-red-700); + --color-average-secondary: var(--color-orange-700); --color-fail: var(--color-red); + --color-fail-secondary: var(--color-red-700); + --color-hover: var(--color-gray-50); --color-informative: var(--color-blue-900); - --color-pass-secondary: var(--color-green-700); --color-pass: var(--color-green); - --color-hover: var(--color-gray-50); + --color-pass-secondary: var(--color-green-700); /* Component variables */ --audit-description-padding-left: calc(var(--score-icon-size) + var(--score-icon-margin-left) + var(--score-icon-margin-right)); @@ -140,7 +140,10 @@ --topbar-height: 32px; --topbar-logo-size: 24px; --topbar-padding: 0 8px; + --toplevel-warning-background-color: var(--color-orange-50); + --toplevel-warning-message-text-color: var(--report-text-color); --toplevel-warning-padding: 18px; + --toplevel-warning-text-color: var(--report-text-color); /* SVGs */ --plugin-icon-url-dark: url('data:image/svg+xml;utf8,'); @@ -188,6 +191,9 @@ --report-text-color-secondary: var(--color-gray-400); --report-text-color: var(--color-gray-100); --topbar-background-color: var(--color-gray); + --toplevel-warning-background-color: #544B40; + --toplevel-warning-message-text-color: var(--color-orange-700); + --toplevel-warning-text-color: var(--color-gray-100); /* SVGs */ --plugin-icon-url: var(--plugin-icon-url-dark); @@ -1011,17 +1017,17 @@ .lh-warnings--toplevel { --item-margin: calc(var(--header-line-height) / 4); - color: var(--report-text-color); + color: var(--toplevel-warning-text-color); margin-left: auto; margin-right: auto; - max-width: calc(var(--report-width) - var(--category-padding) * 2); - background-color: rgba(var(--color-orange-rgb), .1); + max-width: calc(var(--report-width) - var(--category-padding) * 2); + background-color: var(--toplevel-warning-background-color); padding: var(--toplevel-warning-padding); border-radius: 8px; } .lh-warnings__msg { - color: var(--color-orange-700); + color: var(--toplevel-warning-message-text-color); margin: 0; } From b7a38cbdbd50583404e51f4c84fa8f745f8bb2f1 Mon Sep 17 00:00:00 2001 From: John Brown Date: Sun, 10 May 2020 15:50:40 +0100 Subject: [PATCH 4/5] Replace tabs with spaces and sort color variables --- lighthouse-core/report/html/report-styles.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css index 78a768dd79df..def4cfe69fbc 100644 --- a/lighthouse-core/report/html/report-styles.css +++ b/lighthouse-core/report/html/report-styles.css @@ -60,14 +60,14 @@ --color-white: #FFFFFF; /* Context-specific colors */ - --color-average: var(--color-orange); --color-average-secondary: var(--color-orange-700); - --color-fail: var(--color-red); + --color-average: var(--color-orange); --color-fail-secondary: var(--color-red-700); + --color-fail: var(--color-red); --color-hover: var(--color-gray-50); --color-informative: var(--color-blue-900); - --color-pass: var(--color-green); --color-pass-secondary: var(--color-green-700); + --color-pass: var(--color-green); /* Component variables */ --audit-description-padding-left: calc(var(--score-icon-size) + var(--score-icon-margin-left) + var(--score-icon-margin-right)); @@ -194,7 +194,7 @@ --topbar-background-color: var(--color-gray); --toplevel-warning-background-color: #544B40; --toplevel-warning-message-text-color: var(--color-orange-700); - --toplevel-warning-text-color: var(--color-gray-100); + --toplevel-warning-text-color: var(--color-gray-100); /* SVGs */ --plugin-icon-url: var(--plugin-icon-url-dark); @@ -1033,8 +1033,8 @@ } .lh-warnings__msg { - color: var(--toplevel-warning-message-text-color); - margin: 0; + color: var(--toplevel-warning-message-text-color); + margin: 0; } .lh-warnings ul { From 9d33ee290aa7c2806d52cb0b3c182d4a8d4cb3fb Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Tue, 12 May 2020 14:51:43 -0700 Subject: [PATCH 5/5] Update lighthouse-core/report/html/report-styles.css --- lighthouse-core/report/html/report-styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css index def4cfe69fbc..0a3388fb1fe3 100644 --- a/lighthouse-core/report/html/report-styles.css +++ b/lighthouse-core/report/html/report-styles.css @@ -141,7 +141,7 @@ --topbar-logo-size: 24px; --topbar-padding: 0 8px; --toplevel-warning-background-color: var(--color-orange-50); - --toplevel-warning-message-text-color: var(--report-text-color); + --toplevel-warning-message-text-color: #BD4200; --toplevel-warning-padding: 18px; --toplevel-warning-text-color: var(--report-text-color);