mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-01 01:38:07 +08:00
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>
91 lines
1.6 KiB
CSS
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;
|
|
}
|
|
}
|