| Index: third_party/WebKit/Source/devtools/front_end/audits2/lighthouse/report-styles.css
|
| diff --git a/third_party/WebKit/Source/devtools/front_end/audits2/lighthouse/report-styles.css b/third_party/WebKit/Source/devtools/front_end/audits2/lighthouse/report-styles.css
|
| index 5967638645c360a84ae3ad54003948c653cd7158..9fa00037f0b45fb854e8d82e32a7d64e723f8936 100644
|
| --- a/third_party/WebKit/Source/devtools/front_end/audits2/lighthouse/report-styles.css
|
| +++ b/third_party/WebKit/Source/devtools/front_end/audits2/lighthouse/report-styles.css
|
| @@ -14,9 +14,11 @@
|
| * limitations under the License.
|
| */
|
|
|
| - :root {
|
| +.lh-root {
|
| --text-font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
|
| --body-font-size: 13px;
|
| + --header-font-size: 16px;
|
| + --body-line-height: 1.5;
|
| --default-padding: 16px;
|
|
|
| --secondary-text-color: #565656;
|
| @@ -26,7 +28,11 @@
|
| --average-color: #ef6c00; /* md orange 800 */
|
| --warning-color: #757575; /* md grey 600 */
|
|
|
| - --report-border-color: #ebebeb;
|
| + --report-border-color: #ccc;
|
| + --report-secondary-border-color: #ebebeb;
|
| + --report-width: 850px;
|
| + --report-menu-width: 280px;
|
| + --report-content-width: calc(var(--report-width) + var(--report-menu-width));
|
|
|
| --lh-score-highlight-bg: #fafafa;
|
| --lh-score-icon-background-size: 17px;
|
| @@ -35,35 +41,75 @@
|
| --lh-category-score-width: 50px;
|
| }
|
|
|
| -* {
|
| +.lh-root * {
|
| box-sizing: border-box;
|
| }
|
|
|
| -body {
|
| +.lh-root {
|
| font-family: var(--text-font-family);
|
| font-size: var(--body-font-size);
|
| margin: 0;
|
| line-height: var(--body-line-height);
|
| + background: #f5f5f5;
|
| + scroll-behavior: smooth;
|
| }
|
|
|
| -[hidden] {
|
| +.lh-root [hidden] {
|
| display: none !important;
|
| }
|
|
|
| -.lh-details {
|
| - font-size: smaller;
|
| - margin-top: var(--default-padding);
|
| +a {
|
| + color: #0c50c7;
|
| }
|
|
|
| -.lh-details summary {
|
| +summary {
|
| cursor: pointer;
|
| }
|
|
|
| +.lh-details {
|
| + font-size: smaller;
|
| + margin-top: var(--default-padding);
|
| +}
|
| +
|
| .lh-details[open] summary {
|
| margin-bottom: var(--default-padding);
|
| }
|
|
|
| +/* Report header */
|
| +
|
| +.report-icon {
|
| + opacity: 0.7;
|
| +}
|
| +.report-icon:hover {
|
| + opacity: 1;
|
| +}
|
| +.report-icon[disabled] {
|
| + opacity: 0.3;
|
| + pointer-events: none;
|
| +}
|
| +
|
| +.report-icon--share {
|
| + background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg>');
|
| +}
|
| +.report-icon--print {
|
| + background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/><path fill="none" d="M0 0h24v24H0z"/></svg>');
|
| +}
|
| +.report-icon--copy {
|
| + background-image: url('data:image/svg+xml;utf8,<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>');
|
| +}
|
| +.report-icon--open {
|
| + background-image: url('data:image/svg+xml;utf8,<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z"/></svg>');
|
| +}
|
| +.report-icon--download {
|
| + background-image: url('data:image/svg+xml;utf8,<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
|
| +}
|
| +
|
| /* List */
|
| +.lh-list {
|
| + font-size: smaller;
|
| + margin-top: var(--default-padding);
|
| +}
|
| +
|
| .lh-list__items {
|
| padding-left: var(--default-padding);
|
| }
|
| @@ -143,7 +189,7 @@ body {
|
| }
|
|
|
| .lh-score__value--binary {
|
| - text-indent: -500px;
|
| + text-indent: -5000px;
|
| }
|
|
|
| /* No icon for audits with number scores. */
|
| @@ -200,26 +246,27 @@ body {
|
| margin-top: 2px;
|
| }
|
|
|
| -.lh-score__header[open] .lh-score__arrow {
|
| +.lh-score__header[open] .lh-toggle-arrow {
|
| transform: rotateZ(90deg);
|
| }
|
|
|
| -.lh-score__arrow {
|
| +.lh-toggle-arrow {
|
| background: url('data:image/svg+xml;utf8,<svg fill="black" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>') no-repeat 50% 50%;
|
| background-size: contain;
|
| background-color: transparent;
|
| width: 24px;
|
| height: 24px;
|
| flex: none;
|
| - margin: 0 8px 0 8px;
|
| + margin-left: calc(var(--default-padding) / 2);
|
| transition: transform 150ms ease-in-out;
|
| + cursor: pointer;
|
| + border: none;
|
| }
|
|
|
| .lh-score__snippet {
|
| display: flex;
|
| align-items: center;
|
| justify-content: space-between;
|
| - cursor: pointer;
|
| /*outline: none;*/
|
| }
|
|
|
| @@ -243,26 +290,48 @@ body {
|
|
|
| .lh-audit > .lh-score {
|
| font-size: 16px;
|
| + font-size: var(--header-font-size);
|
| +}
|
| +
|
| +.lh-debug {
|
| + margin-top: calc(var(--default-padding) / 2);
|
| + margin-left: calc(var(--lh-audit-score-width) + var(--lh-score-margin));
|
| + color: var(--fail-color);
|
| }
|
|
|
| /* Report */
|
|
|
| +.lh-container {
|
| + display: flex;
|
| + max-width: var(--report-content-width);
|
| + margin: 0 auto;
|
| + /*border-right: 1px solid var(--report-border-color);*/
|
| + /*border-left: 1px solid var(--report-border-color);*/
|
| +}
|
| +
|
| +.lh-report {
|
| + margin-left: var(--report-menu-width);
|
| + background-color: #fff;
|
| +}
|
| +
|
| .lh-exception {
|
| font-size: large;
|
| }
|
|
|
| -.lh-report {
|
| - padding: var(--default-padding);
|
| +.lh-scores-header {
|
| + display: flex;
|
| + margin: var(--report-header-height) 0 0 0;
|
| + padding: calc(var(--default-padding) * 2) var(--default-padding);
|
| + border-bottom: 1px solid var(--report-border-color);
|
| }
|
|
|
| .lh-category {
|
| - padding: 24px 0;
|
| + padding: 24px calc(var(--default-padding) * 2);
|
| border-top: 1px solid var(--report-border-color);
|
| }
|
|
|
| .lh-category:first-of-type {
|
| border: none;
|
| - padding-top: 0;
|
| }
|
|
|
| .lh-category > .lh-audit,
|
| @@ -289,16 +358,70 @@ body {
|
| }
|
|
|
| summary.lh-passed-audits-summary {
|
| - margin: 10px 5px;
|
| + margin: var(--default-padding);
|
| font-size: 15px;
|
| + display: flex;
|
| + align-items: center;
|
| }
|
|
|
| summary.lh-passed-audits-summary::-webkit-details-marker {
|
| - background: rgb(66, 175, 69);
|
| + background: var(--pass-color);
|
| color: white;
|
| - position:relative;
|
| + position: relative;
|
| content: '';
|
| - padding: 3px;
|
| + padding: 3px 3px 3px 6px;
|
| + border-radius: 2px;
|
| +}
|
| +
|
| +.lh-passed-audits[open] summary.lh-passed-audits-summary::-webkit-details-marker {
|
| + padding: 3px 5px 3px 4px;
|
| +}
|
| +
|
| +#lh-log {
|
| + position: fixed;
|
| + background-color: #323232;
|
| + color: #fff;
|
| + min-height: 48px;
|
| + min-width: 288px;
|
| + padding: 16px 24px;
|
| + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
| + border-radius: 2px;
|
| + margin: 12px;
|
| + font-size: 14px;
|
| + cursor: default;
|
| + transition: transform 0.3s, opacity 0.3s;
|
| + transform: translateY(100px);
|
| + opacity: 0;
|
| + -webkit-font-smoothing: antialiased;
|
| + bottom: 0;
|
| + left: 0;
|
| + z-index: 3;
|
| +}
|
| +
|
| +#lh-log.show {
|
| + opacity: 1;
|
| + transform: translateY(0);
|
| +}
|
| +
|
| +@media screen and (max-width: 767px) {
|
| + .lh-report {
|
| + margin-left: 0;
|
| + }
|
| + .lh-category {
|
| + padding: 24px var(--default-padding);
|
| + }
|
| +}
|
| +
|
| +@media print {
|
| + body {
|
| + -webkit-print-color-adjust: exact; /* print background colors */
|
| + }
|
| + .lh-report {
|
| + margin-left: 0;
|
| + }
|
| + .lh-categories {
|
| + margin-top: 0;
|
| + }
|
| }
|
|
|
| /*# sourceURL=report.styles.css */
|
|
|