From 5fd1cfeaee82b6484e824a61d0a9f36bd06074c7 Mon Sep 17 00:00:00 2001 From: Eric Bidelman Date: Sat, 28 Jan 2017 09:33:39 -0800 Subject: [PATCH] Report: fix rendering issues in FF. Fixes #1124 (#1551) * Report: fix rendering issues in FF. Fixes #1124 * Use same blue color for help ? that devtools uses --- lighthouse-core/report/styles/report.css | 66 ++++++++++++------- .../report/templates/report-template.html | 1 + 2 files changed, 43 insertions(+), 24 deletions(-) diff --git a/lighthouse-core/report/styles/report.css b/lighthouse-core/report/styles/report.css index d52a84cfbe16..b78417efaaf7 100644 --- a/lighthouse-core/report/styles/report.css +++ b/lighthouse-core/report/styles/report.css @@ -26,9 +26,9 @@ span, div, p, section, header, h1, h2, li, ul { :root { --text-font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - --text-color: #212121; - --secondary-text-color: #757575; - --accent-color: #719EA8; + --text-color: #222; + --secondary-text-color: #606060; + --accent-color: #3879d9; --poor-color: #eb211e; --good-color: #1ac123; --average-color: #ffae00; @@ -41,7 +41,7 @@ span, div, p, section, header, h1, h2, li, ul { --subitem-line-height: 20px; --subheading-font-size: 16px; --subheading-line-height: 24px; - --subheading-color: var(--accent-color); + --subheading-color: inherit; --heading-font-size: 24px; --heading-line-height: 32px; --subitem-indent: 24px; @@ -54,16 +54,12 @@ span, div, p, section, header, h1, h2, li, ul { :root[data-report-context="devtools"] { --text-font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif; - --text-color: #222; - --secondary-text-color: #606060; - --accent-color: #3879d9; --body-font-size: 13px; --body-line-height: 17px; --subitem-font-size: 14px; --subitem-line-height: 18px; --subheading-font-size: 16px; --subheading-line-height: 20px; - --subheading-color: inherit; --report-header-height: 0; --heading-font-size: 20px; --heading-line-height: 24px; @@ -267,7 +263,7 @@ body { position: absolute; top: 0; right: 0; - background: url('data:image/svg+xml;utf-8,BetaBETA') top right no-repeat; + background: url('data:image/svg+xml;utf-8,BetaBETA') top right no-repeat; } .menu__header-title { @@ -686,13 +682,21 @@ body { right: 0; top: 0; bottom: 0; - -webkit-mask: center center / 12px 12px no-repeat; background-color: #fff; } -.subitem-result__good::after { -webkit-mask-image: url('data:image/svg+xml;utf8,good'); } -.subitem-result__poor::after { -webkit-mask-image: url('data:image/svg+xml;utf8,poor'); } -.subitem-result__unknown::after { -webkit-mask-image: url('data:image/svg+xml;utf8,neutral'); } +.subitem-result__good::after { + background: url('data:image/svg+xml;utf8,good') no-repeat 50% 50%; + background-size: 12px; +} +.subitem-result__poor::after { + background: url('data:image/svg+xml;utf8,poor') no-repeat 50% 50%; + background-size: 12px; +} +.subitem-result__unknown::after { + background: url('data:image/svg+xml;utf8,neutral') no-repeat 50% 50%; + background-size: 12px; +} .subitem-result__points { margin-top: calc((var(--subitem-line-height) - var(--subitem-font-size) - 4px) / 2); @@ -718,28 +722,38 @@ body { .subitem__help-toggle { -webkit-appearance: none; - position: relative; - display: inline-block; + -moz-appearance: none; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #ccc; vertical-align: middle; - margin-left: .5em; + margin-left: 8px; outline: 0; + cursor: pointer; } -.subitem__help-toggle::after { +.subitem__help-toggle + label { + position: relative; + display: inline-block; + height: 12px; + width: 12px; + left: -21px; + top: 2px; + pointer-events: none; +} + +.subitem__help-toggle + label::after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; - -webkit-mask: 1px 1px / 12px 12px no-repeat; - -webkit-mask-image: url('data:image/svg+xml;utf8,help'); - background-color: var(--secondary-text-color); - cursor: pointer; + height: 12px; + width: 12px; + display: inline-block; + background: url('data:image/svg+xml;utf8,help') no-repeat 50% 50%; } .subitem__help-toggle:hover { @@ -751,8 +765,12 @@ body { border-color: var(--accent-color); } -.subitem__help-toggle:checked::after { - background-color: #fff; +.subitem__help-toggle:checked + label::after { + content: ''; + background: url('data:image/svg+xml;utf8,help') no-repeat 50% 50%; + background-size: contain; + border-radius: 50%; + background-color: var(--accent-color); } .subitem__help { @@ -763,7 +781,7 @@ body { margin-left: var(--subitem-indent); } -.subitem__help-toggle:checked + .subitem__help { +.subitem__help-toggle:checked ~ .subitem__help { display: block; } diff --git a/lighthouse-core/report/templates/report-template.html b/lighthouse-core/report/templates/report-template.html index 594a30c8aecb..b30d98a1acac 100644 --- a/lighthouse-core/report/templates/report-template.html +++ b/lighthouse-core/report/templates/report-template.html @@ -128,6 +128,7 @@

{{ aggregation.name }}

{{#if subItem.helpText }} + {{ sanitize subItem.helpText }}