zzos/react-native-devtools-frontend
1
0
Fork 0
mirror of https://github.com/react/react-native-devtools-frontend.git synced 2026-10-29 17:35:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix stylelint-config-standard issues in elements/metricsSidebarPane.css

Browse Source 
Bug: chromium:1083142
Change-Id: I1b077d076cf9518c0faccdef6700e1bf5452b580
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2285127
Auto-Submit: Changhao Han <changhaohan@chromium.org>
Commit-Queue: Mathias Bynens <mathias@chromium.org>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
This commit is contained in:
Changhao Han
2020-07-08 05:11:44 +00:00
committed by Commit Bot
parent 298e663029
commit a3b54a71f9
1 changed files with 32 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front_end/elements/metricsSidebarPane.css
+32 -31
View File
@@ -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;
}