Files
react-native-devtools-frontend/front_end/coverage/coverageListView.css
T
Kham Udom 211ca5084f Fix high contrast in Coverage panel
You are now able to see usage bar in the grid and the foreground
of the percentage text is set to the correct color on focused.

Before: https://imgur.com/a/NmTkhcl
After: https://imgur.com/a/lCJ7kWn

Bug: 1048378
Change-Id: I1512f8f07d9ca5f5003becacdd27745c5330326e
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2081872
Commit-Queue: Kham Udom <khamu@microsoft.com>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
2020-03-01 21:18:32 +00:00

91 lines
1.6 KiB
CSS

.data-grid {
border: none;
}
.data-grid td .url-outer {
width: 100%;
display: inline-flex;
justify-content: flex-start;
}
.data-grid td .url-outer .filter-highlight {
font-weight: bold;
}
.data-grid td .url-prefix {
overflow-x: hidden;
text-overflow: ellipsis;
}
.data-grid td .url-suffix {
flex: none;
}
.data-grid td .bar {
display: inline-block;
height: 8px;
border: 1px solid transparent;
}
.data-grid .selected td .bar {
border-top: 1px white solid;
border-bottom: 1px white solid;
}
.data-grid .selected td .bar:last-child {
border-right: 1px white solid;
}
.data-grid .selected td .bar:first-child {
border-left: 1px white solid;
}
.data-grid td .bar-container {
}
.data-grid td .bar-unused-size {
background-color: #EE442F;
}
.data-grid td .bar-used-size {
background-color: #63ACBE;
}
.data-grid td .percent-value {
color: #888;
width: 45px;
display: inline-block;
}
.data-grid:focus tr.selected span.percent-value {
color: #eee;
}
@media (forced-colors: active) {
.data-grid td .bar-container {
forced-color-adjust: none;
}
.data-grid td .bar-unused-size {
background-color: ButtonText;
}
.data-grid td .bar-used-size {
background-color: ButtonFace;
}
.data-grid .selected td .bar {
border-top-color: HighlightText;
border-bottom-color: HighlightText;
}
.data-grid .selected td .bar:last-child {
border-right-color: HighlightText;
}
.data-grid .selected td .bar:first-child {
border-left-color: HighlightText;
}
.data-grid td .bar {
border-color: ButtonText;
}
.data-grid:focus tr.selected span.percent-value {
color: HighlightText;
}
}