From 50e2f5b4a5de384fb8af87d396f382a7f4713d7b Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Mon, 22 Apr 2019 18:21:33 -0700 Subject: [PATCH 1/3] report(redesign): pwa icons --- lighthouse-core/report/html/report-styles.css | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css index b7c0699271a6..70a94f40d67d 100644 --- a/lighthouse-core/report/html/report-styles.css +++ b/lighthouse-core/report/html/report-styles.css @@ -106,6 +106,8 @@ --plugin-badge-size-big: calc(var(--gauge-circle-size-big) / 2.7); --plugin-badge-size: calc(var(--gauge-circle-size) / 2.7); --plugin-icon-size: 65%; + --pwa-icon-margin: 0 6px 0 -2px; + --pwa-icon-size: var(--topbar-icon-size); --score-container-padding: 12px; --score-container-width: 160px; --score-number-font-size-big: 42px; @@ -136,13 +138,13 @@ --average-icon-url: url('data:image/svg+xml;utf8,info'); --fail-icon-url: url('data:image/svg+xml;utf8,warn'); - --pwa-fast-reliable-gray-url: url('data:image/svg+xml;utf8,'); - --pwa-installable-gray-url: url('data:image/svg+xml;utf8,'); - --pwa-optimized-gray-url: url('data:image/svg+xml;utf8,'); + --pwa-fast-reliable-gray-url: url('data:image/svg+xml;utf8,'); + --pwa-installable-gray-url: url('data:image/svg+xml;utf8,'); + --pwa-optimized-gray-url: url('data:image/svg+xml;utf8,'); - --pwa-fast-reliable-color-url: url('data:image/svg+xml;utf8,'); - --pwa-installable-color-url: url('data:image/svg+xml;utf8,'); - --pwa-optimized-color-url: url('data:image/svg+xml;utf8,'); + --pwa-fast-reliable-color-url: url('data:image/svg+xml;utf8,'); + --pwa-installable-color-url: url('data:image/svg+xml;utf8,'); + --pwa-optimized-color-url: url('data:image/svg+xml;utf8,'); } @media only screen and (max-width: 480px) { @@ -155,6 +157,7 @@ --gauge-circle-size: 72px; --header-padding: 16px 0 16px 0; --plugin-icon-size: 75%; + --pwa-icon-margin: 0 7px 0 -3px; --score-container-padding: 8px; --score-container-width: 112px; --score-number-font-size-big: 34px; @@ -656,29 +659,26 @@ .lh-audit-group__header::before { /* By default, groups don't get an icon */ content: none; - width: calc(var(--subheader-font-size) / 14 * 24); - height: calc(var(--subheader-font-size) / 14 * 24); - margin-right: calc(var(--subheader-font-size) / 2); - background: var(--medium-100-gray) none no-repeat center / 16px; + width: var(--pwa-icon-size); + height: var(--pwa-icon-size); + margin: var(--pwa-icon-margin); display: inline-block; - border-radius: 50%; vertical-align: middle; + background-position: 50% 50%; + background-repeat: no-repeat; } .lh-audit-group--pwa-fast-reliable .lh-audit-group__header::before { content: ''; background-image: var(--pwa-fast-reliable-gray-url); - background-size: var(--lh-group-icon-background-size); } .lh-audit-group--pwa-installable .lh-audit-group__header::before { content: ''; background-image: var(--pwa-installable-gray-url); - background-size: var(--lh-group-icon-background-size); } .lh-audit-group--pwa-optimized .lh-audit-group__header::before { content: ''; background-image: var(--pwa-optimized-gray-url); - background-size: var(--lh-group-icon-background-size); } .lh-audit-group--pwa-fast-reliable.lh-badged .lh-audit-group__header::before { background-image: var(--pwa-fast-reliable-color-url); From 03cd39b689f8f5827f05b225c23e1da31760cd6a Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Tue, 23 Apr 2019 09:52:52 -0700 Subject: [PATCH 2/3] pr changes --- lighthouse-core/report/html/report-styles.css | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css index 70a94f40d67d..b17a6fe40b50 100644 --- a/lighthouse-core/report/html/report-styles.css +++ b/lighthouse-core/report/html/report-styles.css @@ -142,9 +142,9 @@ --pwa-installable-gray-url: url('data:image/svg+xml;utf8,'); --pwa-optimized-gray-url: url('data:image/svg+xml;utf8,'); - --pwa-fast-reliable-color-url: url('data:image/svg+xml;utf8,'); - --pwa-installable-color-url: url('data:image/svg+xml;utf8,'); - --pwa-optimized-color-url: url('data:image/svg+xml;utf8,'); + --pwa-fast-reliable-color-url: url('data:image/svg+xml;utf8,'); + --pwa-installable-color-url: url('data:image/svg+xml;utf8,'); + --pwa-optimized-color-url: url('data:image/svg+xml;utf8,'); } @media only screen and (max-width: 480px) { @@ -664,8 +664,6 @@ margin: var(--pwa-icon-margin); display: inline-block; vertical-align: middle; - background-position: 50% 50%; - background-repeat: no-repeat; } .lh-audit-group--pwa-fast-reliable .lh-audit-group__header::before { From 2a907b17ad55b44eeee7c9c6b5b090e7d5176ed5 Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Tue, 23 Apr 2019 10:28:42 -0700 Subject: [PATCH 3/3] revery greys --- lighthouse-core/report/html/report-styles.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css index b17a6fe40b50..a2f380a2dcbf 100644 --- a/lighthouse-core/report/html/report-styles.css +++ b/lighthouse-core/report/html/report-styles.css @@ -138,9 +138,9 @@ --average-icon-url: url('data:image/svg+xml;utf8,info'); --fail-icon-url: url('data:image/svg+xml;utf8,warn'); - --pwa-fast-reliable-gray-url: url('data:image/svg+xml;utf8,'); - --pwa-installable-gray-url: url('data:image/svg+xml;utf8,'); - --pwa-optimized-gray-url: url('data:image/svg+xml;utf8,'); + --pwa-fast-reliable-gray-url: url('data:image/svg+xml;utf8,'); + --pwa-installable-gray-url: url('data:image/svg+xml;utf8,'); + --pwa-optimized-gray-url: url('data:image/svg+xml;utf8,'); --pwa-fast-reliable-color-url: url('data:image/svg+xml;utf8,'); --pwa-installable-color-url: url('data:image/svg+xml;utf8,');