mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-06 12:01:40 +08:00
The color selection for code coverage (red+green) is not ideal for developers that are impacted by color blindness. This changes the colors to a brighter red and some blueish green that, a combination that is known to work well enough for people impacted by different kinds of color blindness. https://pbs.twimg.com/media/EEU9fCzUUAItz4n?format=jpg shows an example of how these two colors look like now. Bug: chromium:1003671 Change-Id: I9c3e08fb350a6086624d63f44e069813c618588e Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1801762 Auto-Submit: Benedikt Meurer <bmeurer@chromium.org> Commit-Queue: Yang Guo <yangguo@chromium.org> Reviewed-by: Yang Guo <yangguo@chromium.org> Cr-Original-Commit-Position: refs/heads/master@{#696727} Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src Cr-Mirrored-Commit: 71d06de626d5e15fae7534df8fe0bb1613838aa7
62 lines
963 B
CSS
62 lines
963 B
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;
|
|
}
|
|
|
|
.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;
|
|
}
|