chrome-devtools-frontend
Version:
Chrome DevTools UI
103 lines (82 loc) • 2.55 kB
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 #fff solid; /* stylelint-disable-line plugin/use_theme_colors */
/* See: crbug.com/1152736 for color variable migration. */
border-bottom: 1px #fff solid; /* stylelint-disable-line plugin/use_theme_colors */
/* See: crbug.com/1152736 for color variable migration. */
}
.data-grid .selected td .bar:last-child {
border-right: 1px #fff solid; /* stylelint-disable-line plugin/use_theme_colors */
/* See: crbug.com/1152736 for color variable migration. */
}
.data-grid .selected td .bar:first-child {
border-left: 1px #fff solid; /* stylelint-disable-line plugin/use_theme_colors */
/* See: crbug.com/1152736 for color variable migration. */
}
.data-grid td .bar-unused-size {
background-color: #ee442f; /* stylelint-disable-line plugin/use_theme_colors */
/* See: crbug.com/1152736 for color variable migration. */
}
.data-grid td .bar-used-size {
background-color: #63acbe; /* stylelint-disable-line plugin/use_theme_colors */
/* See: crbug.com/1152736 for color variable migration. */
}
.data-grid td .percent-value {
color: #888; /* stylelint-disable-line plugin/use_theme_colors */
/* See: crbug.com/1152736 for color variable migration. */
width: 45px;
display: inline-block;
}
.data-grid:focus tr.selected span.percent-value {
color: #eee; /* stylelint-disable-line plugin/use_theme_colors */
/* See: crbug.com/1152736 for color variable migration. */
}
@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 td .bar {
border-color: ButtonText;
}
.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:focus tr.selected span.percent-value {
color: HighlightText;
}
}