From a3b54a71f9f6f1464e6ee88abdfd5ef30ea24737 Mon Sep 17 00:00:00 2001 From: Changhao Han Date: Tue, 7 Jul 2020 23:59:05 +0200 Subject: [PATCH] Fix stylelint-config-standard issues in elements/metricsSidebarPane.css Bug: chromium:1083142 Change-Id: I1b077d076cf9518c0faccdef6700e1bf5452b580 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2285127 Auto-Submit: Changhao Han Commit-Queue: Mathias Bynens Reviewed-by: Mathias Bynens --- front_end/elements/metricsSidebarPane.css | 63 ++++++++++++----------- 1 file changed, 32 insertions(+), 31 deletions(-) diff --git a/front_end/elements/metricsSidebarPane.css b/front_end/elements/metricsSidebarPane.css index 760fbbfad5..0e3b8aaff9 100644 --- a/front_end/elements/metricsSidebarPane.css +++ b/front_end/elements/metricsSidebarPane.css @@ -18,6 +18,7 @@ :host { --metrics-height: 190px; + height: var(--metrics-height); contain: strict; } @@ -29,37 +30,6 @@ --metrics-height: 214px; } -/* All computed layout attributes except position have a quite light - * background color applied to them, so the default light font in dark - * mode is very low contrast. Therefore we swap back to a dark font by - * default in dark mode because the background colors are lighter. - */ -:host-context(.-theme-with-dark-background) .metrics .margin, -:host-context(.-theme-with-dark-background) .metrics .border, -:host-context(.-theme-with-dark-background) .metrics .padding, -:host-context(.-theme-with-dark-background) .metrics .content { - color: #222; -} - -/* When you hover over margin the rest of the items get given a black - * background and so then the black text we set above means the numbers - * are invisible. So if you're hovering over the margin we set the - * color of the text for all the children to light. This also fixes - * hovering over anything within margin such as border/padding. - */ -:host-context(.-theme-with-dark-background) .metrics .margin:hover div { - color: #ccc; -} - -/* In dark mode the hover color that is used when hovering on border - * constrasts very poorly with the lighter text colour used in dark - * mode. So when you hover over the border we apply a dark font color - * that contrasts much better with the background. - */ -:host-context(.-theme-with-dark-background) .metrics .border:hover > div:not(.padding) { - color: #222; -} - .metrics .label { position: absolute; font-size: 10px; @@ -147,3 +117,34 @@ .metrics .bottom { display: inline-block; } + +/* All computed layout attributes except position have a quite light + * background color applied to them, so the default light font in dark + * mode is very low contrast. Therefore we swap back to a dark font by + * default in dark mode because the background colors are lighter. + */ +:host-context(.-theme-with-dark-background) .metrics .margin, +:host-context(.-theme-with-dark-background) .metrics .border, +:host-context(.-theme-with-dark-background) .metrics .padding, +:host-context(.-theme-with-dark-background) .metrics .content { + color: #222; +} + +/* When you hover over margin the rest of the items get given a black + * background and so then the black text we set above means the numbers + * are invisible. So if you're hovering over the margin we set the + * color of the text for all the children to light. This also fixes + * hovering over anything within margin such as border/padding. + */ +:host-context(.-theme-with-dark-background) .metrics .margin:hover div { + color: #ccc; +} + +/* In dark mode the hover color that is used when hovering on border + * constrasts very poorly with the lighter text colour used in dark + * mode. So when you hover over the border we apply a dark font color + * that contrasts much better with the background. + */ +:host-context(.-theme-with-dark-background) .metrics .border:hover > div:not(.padding) { + color: #222; +}