mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-01 01:38:07 +08:00
Kham Udom
6a142bd33f
Fixed the hover and keyboard focus state on console Sidebar to make sure the background is highlight color and the icons and text are highlight text color. Console view gets an update to fix keyboard focus. Icons, texts and links are highlight text color when focused. Update the drop down button and drop down menu by adding a border and and also fix the hover state on the drop down menu items. Before: https://imgur.com/a/SVNuGLx After: https://imgur.com/a/0l5Edhi https://imgur.com/a/OpxsFOs Bug: 1048378 Change-Id: Ia6d51e1a2c39dc7e5031d437c832d7dcd94e4fea Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2023169 Commit-Queue: Kham Udom <khamu@microsoft.com> Reviewed-by: Mathias Bynens <mathias@chromium.org>
77 lines
1.7 KiB
CSS
77 lines
1.7 KiB
CSS
/*
|
|
* Copyright (c) 2017 The Chromium Authors. All rights reserved.
|
|
* Use of this source code is governed by a BSD-style license that can be
|
|
* found in the LICENSE file.
|
|
*/
|
|
|
|
:host {
|
|
overflow: auto;
|
|
background-color: var(--toolbar-bg-color);
|
|
}
|
|
|
|
.tree-outline-disclosure {
|
|
max-width: 100%;
|
|
padding-left: 6px;
|
|
}
|
|
|
|
.count {
|
|
flex: none;
|
|
margin: 0 8px;
|
|
}
|
|
|
|
[is=ui-icon] {
|
|
margin: 0 5px;
|
|
}
|
|
|
|
[is=ui-icon].icon-mask {
|
|
background-color: #555;
|
|
}
|
|
|
|
li {
|
|
height: 24px;
|
|
}
|
|
|
|
li .largeicon-navigator-file {
|
|
background: linear-gradient(45deg, hsl(48, 70%, 50%), hsl(48, 70%, 70%));
|
|
margin: 0;
|
|
}
|
|
|
|
li .largeicon-navigator-folder {
|
|
background: linear-gradient(45deg, hsl(210, 82%, 65%), hsl(210, 82%, 80%));
|
|
margin: -3px -3px 0 -5px;
|
|
}
|
|
|
|
.tree-element-title {
|
|
flex-shrink: 100;
|
|
flex-grow: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.tree-outline li:hover:not(.selected) .selection {
|
|
display: block;
|
|
background-color: var(--item-hover-color);
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
[is=ui-icon].icon-mask {
|
|
background-color: ButtonText;
|
|
}
|
|
.tree-outline li:hover:not(.selected) .selection {
|
|
forced-color-adjust: none;
|
|
background-color: Highlight;
|
|
}
|
|
.tree-outline li:hover .tree-element-title,
|
|
.tree-outline li.selected .tree-element-title,
|
|
.tree-outline li:hover .count,
|
|
.tree-outline li.selected .count {
|
|
forced-color-adjust: none;
|
|
color: HighlightText;
|
|
}
|
|
.tree-outline li:hover [is=ui-icon].icon-mask,
|
|
.tree-outline li.selected [is=ui-icon].icon-mask,
|
|
.tree-outline li.selected:focus .spritesheet-mediumicons:not(.icon-mask) {
|
|
background-color: HighlightText !important;
|
|
}
|
|
}
|