mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-01 17:57:36 +08:00
This patch provides forced-colors overrides to make sidebar icons on the changes panel visible in high contrast mode. Screenshots: https://imgur.com/a/GG665sc Bug: 1048378 Change-Id: I6f285eca8abafc40de17a8606a5f9c59aea0a384 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2107112 Commit-Queue: Kalon Hinds <kahinds@microsoft.com> Reviewed-by: Mathias Bynens <mathias@chromium.org>
50 lines
1.3 KiB
CSS
50 lines
1.3 KiB
CSS
li .icon {
|
|
margin: -3px -5px -3px -5px;
|
|
background: linear-gradient(45deg, hsl(0, 0%, 50%), hsl(0, 0%, 70%));
|
|
}
|
|
|
|
.tree-outline li {
|
|
min-height: 20px;
|
|
}
|
|
|
|
.tree-outline li:hover:not(.selected) .selection {
|
|
display: block;
|
|
background-color: var(--item-hover-color);
|
|
}
|
|
|
|
.navigator-fs-tree-item .icon {
|
|
background: linear-gradient(45deg, hsl(28, 75%, 50%), hsl(28, 75%, 70%));
|
|
}
|
|
|
|
.navigator-sm-script-tree-item .icon,
|
|
.navigator-script-tree-item .icon,
|
|
.navigator-snippet-tree-item .icon {
|
|
background: linear-gradient(45deg, hsl(48, 70%, 50%), hsl(48, 70%, 70%));
|
|
}
|
|
|
|
.navigator-sm-stylesheet-tree-item .icon,
|
|
.navigator-stylesheet-tree-item .icon {
|
|
background: linear-gradient(45deg, hsl(256, 50%, 50%), hsl(256, 50%, 70%));
|
|
}
|
|
|
|
.navigator-image-tree-item .icon,
|
|
.navigator-font-tree-item .icon {
|
|
background: linear-gradient(45deg, hsl(109, 33%, 50%), hsl(109, 33%, 70%));
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
li .icon,
|
|
.navigator-fs-tree-item .icon,
|
|
.navigator-sm-script-tree-item .icon,
|
|
.navigator-script-tree-item .icon,
|
|
.navigator-snippet-tree-item .icon,
|
|
.navigator-sm-stylesheet-tree-item .icon,
|
|
.navigator-stylesheet-tree-item .icon,
|
|
.navigator-image-tree-item .icon,
|
|
.navigator-font-tree-item .icon {
|
|
background-color: ButtonText;
|
|
background-image: none;
|
|
forced-color-adjust: none;
|
|
}
|
|
}
|